Toggle group

"use client";

import { cva, type VariantProps } from "class-variance-authority";
import { type ComponentProps } from "react";
import { Toggle as TogglePrimitive } from "radix-ui";
import { cn } from "../lib/cn";

/** Adapted from shadcn/ui Toggle. */

const toggleVariants = cva(
  "dx-focus-ring inline-flex items-center justify-center gap-2 rounded-[var(--md-sys-shape-corner-small)] text-[length:var(--md-sys-typescale-label-large-size)] font-medium whitespace-nowrap transition-colors hover:bg-surface-container-highest hover:text-on-surface disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-secondary-container data-[state=on]:text-on-secondary-container [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline: "border border-outline-variant bg-transparent",
      },
      size: {
        default: "h-9 min-w-9 px-2",
        sm: "h-8 min-w-8 px-1.5",
        lg: "h-10 min-w-10 px-2.5",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
);

export function Toggle({
  className,
  variant,
  size,
  ...props
}: ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
  return (
    <TogglePrimitive.Root
      data-slot="toggle"
      className={cn(toggleVariants({ variant, size }), className)}
      {...props}
    />
  );
}

export { toggleVariants };

"use client";

import { createContext, useContext, type ComponentProps } from "react";
import { type VariantProps } from "class-variance-authority";
import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
import { cn } from "../lib/cn";
import { toggleVariants } from "./toggle";

/** Adapted from shadcn/ui ToggleGroup. */

const ToggleGroupContext = createContext<
  VariantProps<typeof toggleVariants> & { spacing?: number }
>({
  size: "default",
  variant: "default",
  spacing: 0,
});

export function ToggleGroup({
  className,
  variant,
  size,
  spacing = 0,
  children,
  ...props
}: ComponentProps<typeof ToggleGroupPrimitive.Root> &
  VariantProps<typeof toggleVariants> & { spacing?: number }) {
  return (
    <ToggleGroupPrimitive.Root
      data-slot="toggle-group"
      data-variant={variant}
      data-size={size}
      data-spacing={spacing}
      className={cn("flex w-fit items-center rounded-[var(--md-sys-shape-corner-small)]", className)}
      {...props}
    >
      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
        {children}
      </ToggleGroupContext.Provider>
    </ToggleGroupPrimitive.Root>
  );
}

export function ToggleGroupItem({
  className,
  children,
  variant,
  size,
  ...props
}: ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
  const context = useContext(ToggleGroupContext);

  return (
    <ToggleGroupPrimitive.Item
      data-slot="toggle-group-item"
      className={cn(
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        "min-w-0 shrink-0 rounded-none px-3 first:rounded-l-[var(--md-sys-shape-corner-small)] last:rounded-r-[var(--md-sys-shape-corner-small)]",
        className,
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  );
}