@pixel-point/toolcraft 0.0.2

package/templates/ui/components/primitives/slider/slider.tsx

@@ -0,0 +1,511 @@
+"use client";
+
+import * as React from "react";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import type { BaseUIEvent } from "@base-ui/react/types";
+
+import { cn } from "../../../lib/utils";
+import { useSliderInteractionValueChange } from "./slider-interaction";
+import { SliderControlContent } from "./slider-parts";
+import { useSliderThumbReset } from "./slider-reset";
+import {
+  getSliderValues,
+  normalizeSliderValueShape,
+  snapSliderValue,
+  valuesMatch,
+  type SliderRuntimeValue,
+  type SliderValue,
+} from "./slider-value";
+
+type SliderVariant = "continuous" | "discrete";
+
+type SliderProps<Value extends number | readonly number[]> = SliderPrimitive.Root.Props<Value> & {
+  getAriaLabel?: (index: number) => string;
+  markerCount?: number;
+  markerValues?: readonly number[];
+  resetValue?: Value;
+  showFill?: boolean;
+  snapValues?: readonly number[];
+  variant?: SliderVariant;
+};
+
+type SliderPointerEvent = BaseUIEvent<React.PointerEvent<HTMLDivElement>>;
+type SliderFocusEvent = BaseUIEvent<React.FocusEvent<HTMLDivElement>>;
+type SliderPointerEventHandler = (event: SliderPointerEvent) => void;
+type SliderFocusEventHandler = (event: SliderFocusEvent) => void;
+
+type SliderValueStateOptions<Value extends number | readonly number[]> = {
+  defaultValue?: Value;
+  largeStep?: number;
+  max: number;
+  min: number;
+  onValueChange?: SliderProps<Value>["onValueChange"];
+  onValueCommitted?: SliderProps<Value>["onValueCommitted"];
+  snapValues?: readonly number[];
+  step: number;
+  value?: Value;
+  variant: SliderVariant;
+};
+
+type ControlledDiscreteValueResetOptions<Value extends number | readonly number[]> = {
+  discreteValue: Value | undefined;
+  isDiscrete: boolean;
+  lastInternalDiscreteValueRef: React.RefObject<Value | undefined>;
+  max: number;
+  min: number;
+  setDiscreteValue: React.Dispatch<React.SetStateAction<Value | undefined>>;
+  snapValues?: readonly number[];
+  step: number;
+  value: Value | undefined;
+};
+
+type SliderPointerDraggingOptions = {
+  disabled?: boolean;
+  onBlurCapture?: SliderFocusEventHandler;
+  onPointerCancelCapture?: SliderPointerEventHandler;
+  onPointerDownCapture?: SliderPointerEventHandler;
+  onPointerUpCapture?: SliderPointerEventHandler;
+};
+
+type SliderRuntimeOptions<Value extends number | readonly number[]> = {
+  defaultValue?: Value;
+  disabled?: boolean;
+  largeStep?: number;
+  markerCount?: number;
+  markerValues?: readonly number[];
+  max: number;
+  min: number;
+  onBlurCapture?: SliderFocusEventHandler;
+  onPointerCancelCapture?: SliderPointerEventHandler;
+  onPointerDownCapture?: SliderPointerEventHandler;
+  onPointerUpCapture?: SliderPointerEventHandler;
+  onValueChange?: SliderProps<Value>["onValueChange"];
+  onValueCommitted?: SliderProps<Value>["onValueCommitted"];
+  resetValue?: Value;
+  snapValues?: readonly number[];
+  step: number;
+  value?: Value;
+  variant: SliderVariant;
+};
+
+function getSliderStepMarkerCount({
+  max,
+  min,
+  step,
+}: {
+  max: number;
+  min: number;
+  step: number;
+}): number | undefined {
+  if (
+    !Number.isFinite(step) ||
+    !Number.isFinite(min) ||
+    !Number.isFinite(max) ||
+    step <= 0 ||
+    max <= min
+  ) {
+    return undefined;
+  }
+
+  const rawStepCount = (max - min) / step;
+  const roundedStepCount = Math.round(rawStepCount);
+  const stepCount =
+    Math.abs(rawStepCount - roundedStepCount) < Number.EPSILON * 100
+      ? roundedStepCount
+      : Math.floor(rawStepCount) + 1;
+
+  return Math.max(2, stepCount + 1);
+}
+
+function useControlledDiscreteValueReset<Value extends number | readonly number[]>({
+  discreteValue,
+  isDiscrete,
+  lastInternalDiscreteValueRef,
+  max,
+  min,
+  setDiscreteValue,
+  snapValues,
+  step,
+  value,
+}: ControlledDiscreteValueResetOptions<Value>) {
+  React.useEffect(() => {
+    if (!isDiscrete || value === undefined || discreteValue === undefined) {
+      return;
+    }
+
+    const lastInternalValue = lastInternalDiscreteValueRef.current;
+    if (lastInternalValue !== undefined) {
+      if (valuesMatch(value, lastInternalValue)) {
+        return;
+      }
+
+      const snappedInternalValue = snapSliderValue(lastInternalValue, min, max, step, snapValues);
+      if (valuesMatch(value, snappedInternalValue)) {
+        return;
+      }
+    }
+
+    setDiscreteValue(undefined);
+  }, [
+    discreteValue,
+    isDiscrete,
+    lastInternalDiscreteValueRef,
+    max,
+    min,
+    setDiscreteValue,
+    snapValues,
+    step,
+    value,
+  ]);
+}
+
+function useSliderValueState<Value extends number | readonly number[]>({
+  defaultValue,
+  largeStep,
+  max,
+  min,
+  onValueChange,
+  onValueCommitted,
+  snapValues,
+  step,
+  value,
+  variant,
+}: SliderValueStateOptions<Value>) {
+  const [discreteValue, setDiscreteValue] = React.useState<Value | undefined>(() =>
+    value === undefined ? defaultValue : undefined,
+  );
+  const lastInternalDiscreteValueRef = React.useRef<Value | undefined>(
+    value === undefined ? defaultValue : undefined,
+  );
+  const lastChangeDetailsRef = React.useRef<SliderPrimitive.Root.ChangeEventDetails | null>(null);
+  const isDiscrete = variant === "discrete";
+  const resolvedValue = isDiscrete ? (discreteValue ?? value ?? defaultValue) : value;
+  const rootStep = isDiscrete ? Math.max((max - min) / 1000, 0.000001) : step;
+  const rootLargeStep = isDiscrete ? (largeStep ?? step) : largeStep;
+  const values = React.useMemo(
+    () => getSliderValues(resolvedValue, defaultValue, min, max),
+    [resolvedValue, defaultValue, min, max],
+  );
+
+  useControlledDiscreteValueReset({
+    discreteValue,
+    isDiscrete,
+    lastInternalDiscreteValueRef,
+    max,
+    min,
+    setDiscreteValue,
+    snapValues,
+    step,
+    value,
+  });
+
+  const handleValueChange = React.useCallback(
+    (nextValue: SliderValue<Value>, eventDetails: SliderPrimitive.Root.ChangeEventDetails) => {
+      lastChangeDetailsRef.current = eventDetails;
+      if (isDiscrete) {
+        const normalizedNextValue = normalizeSliderValueShape(
+          nextValue as SliderRuntimeValue,
+          value,
+          defaultValue,
+          min,
+        );
+        lastInternalDiscreteValueRef.current = normalizedNextValue;
+        setDiscreteValue(normalizedNextValue);
+        onValueChange?.(
+          snapSliderValue(normalizedNextValue, min, max, step, snapValues) as SliderValue<Value>,
+          eventDetails,
+        );
+        return;
+      }
+
+      onValueChange?.(nextValue, eventDetails);
+    },
+    [defaultValue, isDiscrete, max, min, onValueChange, snapValues, step, value],
+  );
+  const handleValueCommitted = React.useCallback(
+    (nextValue: SliderValue<Value>, eventDetails: SliderPrimitive.Root.CommitEventDetails) => {
+      if (!isDiscrete) {
+        onValueCommitted?.(nextValue, eventDetails);
+        return;
+      }
+
+      const normalizedNextValue = normalizeSliderValueShape(
+        nextValue as SliderRuntimeValue,
+        value,
+        defaultValue,
+        min,
+      );
+      const snappedValue = snapSliderValue(normalizedNextValue, min, max, step, snapValues);
+      lastInternalDiscreteValueRef.current = snappedValue;
+      setDiscreteValue(snappedValue);
+
+      if (!valuesMatch(snappedValue, normalizedNextValue) && lastChangeDetailsRef.current) {
+        onValueChange?.(snappedValue as SliderValue<Value>, lastChangeDetailsRef.current);
+      }
+
+      onValueCommitted?.(snappedValue as SliderValue<Value>, eventDetails);
+    },
+    [defaultValue, isDiscrete, max, min, onValueChange, onValueCommitted, snapValues, step, value],
+  );
+
+  return {
+    handleValueChange,
+    handleValueCommitted,
+    isDiscrete,
+    resolvedValue,
+    rootLargeStep,
+    rootStep,
+    values,
+  };
+}
+
+function useSliderPointerDragging({
+  disabled,
+  onBlurCapture,
+  onPointerCancelCapture,
+  onPointerDownCapture,
+  onPointerUpCapture,
+}: SliderPointerDraggingOptions) {
+  const [isPointerDragging, setIsPointerDragging] = React.useState(false);
+  const stopPointerDrag = React.useCallback(() => {
+    setIsPointerDragging(false);
+  }, []);
+  const handlePointerDownCapture = React.useCallback(
+    (event: SliderPointerEvent) => {
+      onPointerDownCapture?.(event);
+      if (event.defaultPrevented || disabled || event.button !== 0) {
+        return;
+      }
+
+      setIsPointerDragging(true);
+    },
+    [disabled, onPointerDownCapture],
+  );
+  const handlePointerUpCapture = React.useCallback(
+    (event: SliderPointerEvent) => {
+      onPointerUpCapture?.(event);
+      stopPointerDrag();
+    },
+    [onPointerUpCapture, stopPointerDrag],
+  );
+  const handlePointerCancelCapture = React.useCallback(
+    (event: SliderPointerEvent) => {
+      onPointerCancelCapture?.(event);
+      stopPointerDrag();
+    },
+    [onPointerCancelCapture, stopPointerDrag],
+  );
+  const handleBlurCapture = React.useCallback(
+    (event: SliderFocusEvent) => {
+      onBlurCapture?.(event);
+      stopPointerDrag();
+    },
+    [onBlurCapture, stopPointerDrag],
+  );
+
+  React.useEffect(() => {
+    if (!isPointerDragging) {
+      return undefined;
+    }
+
+    window.addEventListener("pointerup", stopPointerDrag);
+    window.addEventListener("pointercancel", stopPointerDrag);
+    window.addEventListener("blur", stopPointerDrag);
+
+    return () => {
+      window.removeEventListener("pointerup", stopPointerDrag);
+      window.removeEventListener("pointercancel", stopPointerDrag);
+      window.removeEventListener("blur", stopPointerDrag);
+    };
+  }, [isPointerDragging, stopPointerDrag]);
+
+  return {
+    handleBlurCapture,
+    handlePointerCancelCapture,
+    handlePointerDownCapture,
+    handlePointerUpCapture,
+    isPointerDragging,
+  };
+}
+
+function useSliderRuntime<Value extends number | readonly number[]>({
+  defaultValue,
+  disabled,
+  largeStep,
+  markerCount,
+  markerValues,
+  max,
+  min,
+  onBlurCapture,
+  onPointerCancelCapture,
+  onPointerDownCapture,
+  onPointerUpCapture,
+  onValueChange,
+  onValueCommitted,
+  resetValue,
+  snapValues,
+  step,
+  value,
+  variant,
+}: SliderRuntimeOptions<Value>) {
+  const sliderValue = useSliderValueState({
+    defaultValue,
+    largeStep,
+    max,
+    min,
+    onValueChange,
+    onValueCommitted,
+    snapValues,
+    step,
+    value,
+    variant,
+  });
+  const pointerDrag = useSliderPointerDragging({
+    disabled,
+    onBlurCapture,
+    onPointerCancelCapture,
+    onPointerDownCapture,
+    onPointerUpCapture,
+  });
+  const resolvedMarkerCount =
+    variant === "discrete"
+      ? (
+          markerCount ??
+          getSliderStepMarkerCount({ max, min, step }) ??
+          Math.max(2, Math.round(max - min) + 1)
+        )
+      : (markerCount ?? Math.max(2, Math.round(max - min) + 1));
+  const handleValueChange = useSliderInteractionValueChange({
+    disabled,
+    handleValueChange: sliderValue.handleValueChange,
+    max,
+    min,
+    values: sliderValue.values,
+  });
+  const handleThumbDoubleClick = useSliderThumbReset({
+    defaultValue,
+    disabled,
+    handleValueChange,
+    handleValueCommitted: sliderValue.handleValueCommitted,
+    isDiscrete: sliderValue.isDiscrete,
+    max,
+    min,
+    resetValue,
+    snapValues,
+    step,
+    value,
+    values: sliderValue.values,
+  });
+
+  return {
+    handleThumbDoubleClick,
+    handleValueChange,
+    pointerDrag,
+    resolvedMarkerCount,
+    sliderValue,
+    markerValues,
+  };
+}
+
+function Slider<Value extends number | readonly number[]>({
+  className,
+  defaultValue,
+  disabled,
+  getAriaLabel,
+  largeStep,
+  markerCount,
+  markerValues,
+  onBlurCapture,
+  onPointerCancelCapture,
+  onPointerDownCapture,
+  onPointerUpCapture,
+  onValueChange,
+  onValueCommitted,
+  orientation = "horizontal",
+  resetValue,
+  showFill = true,
+  snapValues,
+  step = 1,
+  thumbAlignment = "edge",
+  variant = "continuous",
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderProps<Value>) {
+  const {
+    handleThumbDoubleClick,
+    handleValueChange,
+    pointerDrag,
+    resolvedMarkerCount,
+    sliderValue,
+  } = useSliderRuntime({
+    defaultValue,
+    disabled,
+    largeStep,
+    markerCount,
+    markerValues,
+    max,
+    min,
+    onBlurCapture,
+    onPointerCancelCapture,
+    onPointerDownCapture,
+    onPointerUpCapture,
+    onValueChange,
+    onValueCommitted,
+    resetValue,
+    snapValues,
+    step,
+    value,
+    variant,
+  });
+
+  return (
+    <SliderPrimitive.Root
+      className={cn(
+        "app-no-drag data-horizontal:w-full data-vertical:h-full",
+        "[--slider-active-color:var(--foreground)] [--slider-track-color:color-mix(in_oklab,var(--muted-foreground)_38%,transparent)]",
+        "data-[disabled]:[--slider-active-color:var(--foreground)] data-[disabled]:[--slider-track-color:var(--foreground)]",
+        className,
+      )}
+      data-slot="slider"
+      data-variant={variant}
+      defaultValue={sliderValue.isDiscrete ? undefined : defaultValue}
+      value={sliderValue.resolvedValue}
+      min={min}
+      max={max}
+      disabled={disabled}
+      largeStep={sliderValue.rootLargeStep}
+      onBlurCapture={pointerDrag.handleBlurCapture}
+      onPointerCancelCapture={pointerDrag.handlePointerCancelCapture}
+      onPointerDownCapture={pointerDrag.handlePointerDownCapture}
+      onPointerUpCapture={pointerDrag.handlePointerUpCapture}
+      onValueChange={handleValueChange}
+      onValueCommitted={sliderValue.handleValueCommitted}
+      orientation={orientation}
+      step={sliderValue.rootStep}
+      thumbAlignment={thumbAlignment}
+      thumbCollisionBehavior="none"
+      {...props}
+    >
+      <SliderControlContent
+        count={sliderValue.values.length}
+        disabled={disabled}
+        getAriaLabel={getAriaLabel}
+        isDiscrete={sliderValue.isDiscrete}
+        isPointerDragging={pointerDrag.isPointerDragging}
+        markerCount={resolvedMarkerCount}
+        markerValues={markerValues}
+        max={max}
+        min={min}
+        onThumbDoubleClick={handleThumbDoubleClick}
+        orientation={orientation}
+        showFill={showFill}
+      />
+    </SliderPrimitive.Root>
+  );
+}
+
+export { SliderInteractionProvider } from "./slider-interaction";
+export type { SliderInteractionChangeDetails } from "./slider-interaction";
+export { Slider };

package/templates/ui/components/primitives/switch.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+
+import { cn } from "../../lib/utils";
+
+function Switch({
+  className,
+  checkedThumbSide = "end",
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  checkedThumbSide?: "start" | "end";
+  size?: "xs" | "sm" | "default";
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-checked-thumb-side={checkedThumbSide}
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 cursor-pointer items-center rounded-full p-px transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 aria-invalid:ring aria-invalid:ring-[color:color-mix(in_oklab,var(--destructive)_20%,transparent)] data-[size=default]:h-4 data-[size=default]:w-[28px] data-[size=sm]:h-3.5 data-[size=sm]:w-[24px] data-[size=xs]:h-3 data-[size=xs]:w-5 dark:aria-invalid:ring-[color:color-mix(in_oklab,var(--destructive)_40%,transparent)] data-checked:bg-[color:var(--accent)] data-unchecked:bg-[color:color-mix(in_oklab,var(--input)_20%,transparent)] data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-[color:var(--background)] ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=xs]/switch:size-2.5 group-data-[checked-thumb-side=end]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[checked-thumb-side=end]/switch:data-unchecked:translate-x-0 group-data-[checked-thumb-side=start]/switch:data-checked:translate-x-0 group-data-[checked-thumb-side=start]/switch:data-unchecked:translate-x-[calc(100%-2px)] dark:bg-[color:var(--foreground)]"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/templates/ui/components/primitives/textarea.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { SHARED_INPUT_CONTROL_BASE_CLASS_NAME } from "../../lib/input-control-style";
+
+import { cn } from "../../lib/utils";
+
+const textareaVariants = cva(
+  cn("flex field-sizing-content resize-none", SHARED_INPUT_CONTROL_BASE_CLASS_NAME),
+  {
+    variants: {
+      size: {
+        content: "min-h-0 px-2 py-2 text-sm/relaxed",
+        sm: "min-h-14 px-2 py-1.5 text-xs/relaxed",
+        default: "min-h-16 px-2 py-2 text-xs-plus/relaxed",
+        lg: "min-h-20 px-2.5 py-2.5 text-sm/relaxed",
+        xl: "min-h-24 px-3 py-3 text-base/relaxed",
+      },
+      variant: {
+        default: "",
+        "code-editor":
+          "relative z-10 min-h-0 overflow-x-auto overflow-y-hidden font-mono whitespace-pre text-xs/relaxed text-transparent caret-[color:var(--foreground)] selection:bg-[color:var(--accent)] selection:text-transparent",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+  },
+);
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea"> & VariantProps<typeof textareaVariants>
+>(function Textarea({ className, size, variant, ...props }, ref) {
+  return (
+    <textarea
+      ref={ref}
+      data-size={size ?? "default"}
+      data-slot="textarea"
+      data-variant={variant ?? "default"}
+      className={cn(textareaVariants({ size, variant }), className)}
+      {...props}
+    />
+  );
+});
+
+export { Textarea, textareaVariants };

package/templates/ui/components/primitives/toggle-group.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import * as React from "react";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+import { toggleVariants } from "./toggle";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal",
+});
+
+function getJoinedOutlineGroupClassName({
+  orientation,
+  spacing,
+  variant,
+}: {
+  orientation: "horizontal" | "vertical";
+  spacing: number;
+  variant?: VariantProps<typeof toggleVariants>["variant"];
+}): string {
+  if (spacing !== 0 || variant !== "outline") {
+    return "";
+  }
+
+  if (orientation === "vertical") {
+    return "[&>[data-slot]]:relative [&>[data-slot]:has(+[data-slot])]:border-b-0 [&>[data-slot][aria-pressed=true]+[data-slot]]:border-t-[color:color-mix(in_oklab,var(--border)_10%,transparent)] [&>[data-slot][data-pressed]+[data-slot]]:border-t-[color:color-mix(in_oklab,var(--border)_10%,transparent)] [&>[data-slot][data-state=on]+[data-slot]]:border-t-[color:color-mix(in_oklab,var(--border)_10%,transparent)]";
+  }
+
+  return "[&>[data-slot]]:relative [&>[data-slot]:has(+[data-slot])]:border-r-0 [&>[data-slot][aria-pressed=true]+[data-slot]]:border-l-[color:color-mix(in_oklab,var(--border)_10%,transparent)] [&>[data-slot][data-pressed]+[data-slot]]:border-l-[color:color-mix(in_oklab,var(--border)_10%,transparent)] [&>[data-slot][data-state=on]+[data-slot]]:border-l-[color:color-mix(in_oklab,var(--border)_10%,transparent)]";
+}
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number;
+    orientation?: "horizontal" | "vertical";
+  }) {
+  const joinedOutlineGroupClassName = getJoinedOutlineGroupClassName({
+    orientation,
+    spacing,
+    variant,
+  });
+
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      data-orientation={orientation}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] data-vertical:flex-col data-vertical:items-stretch",
+        joinedOutlineGroupClassName,
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing, orientation }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };