@etus/ui 0.3.2 → 0.4.0-beta.10

package/dist/chunk-UPK5B2FL.js

@@ -0,0 +1,199 @@
+import { Badge } from './chunk-4GVOOXYD.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { useRef, useState, useId, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var tagsInputVariants = cva(
+  [
+    "flex flex-wrap items-center gap-1.5 w-full min-w-0 rounded-md border bg-transparent transition-[color,box-shadow] outline-none",
+    "dark:bg-input/30",
+    "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+    "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "min-h-8 px-2 py-1 text-sm",
+        md: "min-h-9 px-3 py-1.5 text-base md:text-sm",
+        lg: "min-h-10 px-3.5 py-2 text-base"
+      },
+      variant: {
+        default: "border-input shadow-xs",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-input px-0"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var tagsInputInputVariants = cva(
+  [
+    "flex-1 min-w-24 bg-transparent outline-none",
+    "placeholder:text-muted-foreground",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm h-5",
+        md: "text-base md:text-sm h-5",
+        lg: "text-base h-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function TagsInput({
+  value: controlledValue,
+  defaultValue = [],
+  onChange,
+  onTagAdd,
+  onTagRemove,
+  placeholder = "Add tag...",
+  maxTags,
+  allowDuplicates = false,
+  disabled,
+  size = "md",
+  variant,
+  invalid,
+  delimiters = [","],
+  className,
+  ...props
+}) {
+  const inputRef = useRef(null);
+  const [inputValue, setInputValue] = useState("");
+  const [internalTags, setInternalTags] = useState(defaultValue);
+  const id = useId();
+  const isControlled = controlledValue !== void 0;
+  const tags = isControlled ? controlledValue : internalTags;
+  const updateTags = useCallback(
+    (newTags) => {
+      if (!isControlled) {
+        setInternalTags(newTags);
+      }
+      onChange?.(newTags);
+    },
+    [isControlled, onChange]
+  );
+  const addTag = useCallback(
+    (tag) => {
+      const trimmedTag = tag.trim();
+      if (!trimmedTag) return;
+      if (!allowDuplicates && tags.includes(trimmedTag)) {
+        setInputValue("");
+        return;
+      }
+      if (maxTags && tags.length >= maxTags) {
+        setInputValue("");
+        return;
+      }
+      const newTags = [...tags, trimmedTag];
+      updateTags(newTags);
+      onTagAdd?.(trimmedTag);
+      setInputValue("");
+    },
+    [tags, allowDuplicates, maxTags, updateTags, onTagAdd]
+  );
+  const removeTag = useCallback(
+    (tagToRemove) => {
+      const newTags = tags.filter((tag) => tag !== tagToRemove);
+      updateTags(newTags);
+      onTagRemove?.(tagToRemove);
+    },
+    [tags, updateTags, onTagRemove]
+  );
+  const removeLastTag = useCallback(() => {
+    const lastTag = tags[tags.length - 1];
+    if (lastTag) {
+      removeTag(lastTag);
+    }
+  }, [tags, removeTag]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || delimiters.includes(e.key)) {
+        e.preventDefault();
+        addTag(inputValue);
+      } else if (e.key === "Backspace" && inputValue === "" && tags.length > 0) {
+        removeLastTag();
+      }
+    },
+    [inputValue, tags.length, addTag, removeLastTag, delimiters]
+  );
+  const handleInputChange = useCallback(
+    (e) => {
+      const value = e.target.value;
+      for (const delimiter of delimiters) {
+        if (value.includes(delimiter)) {
+          const parts = value.split(delimiter);
+          parts.forEach((part, index) => {
+            if (index < parts.length - 1) {
+              addTag(part);
+            } else {
+              setInputValue(part);
+            }
+          });
+          return;
+        }
+      }
+      setInputValue(value);
+    },
+    [delimiters, addTag]
+  );
+  const handleContainerClick = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+  const tagSize = size === "lg" ? "default" : "sm";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-disabled": disabled ?? void 0,
+      "aria-invalid": invalid ?? void 0,
+      className: cn(tagsInputVariants({ size, variant }), className),
+      "data-slot": "tags-input",
+      onClick: handleContainerClick,
+      ...props,
+      children: [
+        tags.map((tag, index) => /* @__PURE__ */ jsx(
+          Badge,
+          {
+            color: "muted",
+            size: tagSize,
+            type: "pill-color",
+            onDismiss: disabled ? void 0 : () => {
+              removeTag(tag);
+            },
+            children: tag
+          },
+          `${tag}-${String(index)}`
+        )),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            "aria-label": "Add tag",
+            className: tagsInputInputVariants({ size }),
+            "data-slot": "tags-input-field",
+            disabled,
+            id,
+            placeholder: tags.length === 0 ? placeholder : void 0,
+            type: "text",
+            value: inputValue,
+            onChange: handleInputChange,
+            onKeyDown: handleKeyDown
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { TagsInput, tagsInputInputVariants, tagsInputVariants };
+//# sourceMappingURL=chunk-UPK5B2FL.js.map
+//# sourceMappingURL=chunk-UPK5B2FL.js.map

package/dist/chunk-UPK5B2FL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/TagsInput/TagsInput.variants.ts","../src/components/forms/TagsInput/TagsInput.tsx"],"names":[],"mappings":"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","file":"chunk-UPK5B2FL.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * TagsInput container variant styles using CVA\n */\nexport const tagsInputVariants = cva(\n  [\n    \"flex flex-wrap items-center gap-1.5 w-full min-w-0 rounded-md border bg-transparent transition-[color,box-shadow] outline-none\",\n    \"dark:bg-input/30\",\n    \"focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]\",\n    \"aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"min-h-8 px-2 py-1 text-sm\",\n        md: \"min-h-9 px-3 py-1.5 text-base md:text-sm\",\n        lg: \"min-h-10 px-3.5 py-2 text-base\",\n      },\n      variant: {\n        default: \"border-input shadow-xs\",\n        filled: \"border-transparent bg-muted\",\n        flushed: \"rounded-none border-x-0 border-t-0 border-b-input px-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * TagsInput inner input variant styles\n */\nexport const tagsInputInputVariants = cva(\n  [\n    \"flex-1 min-w-24 bg-transparent outline-none\",\n    \"placeholder:text-muted-foreground\",\n    \"disabled:cursor-not-allowed\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"text-sm h-5\",\n        md: \"text-base md:text-sm h-5\",\n        lg: \"text-base h-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type TagsInputVariantProps = VariantProps<typeof tagsInputVariants>\nexport type TagsInputInputVariantProps = VariantProps<typeof tagsInputInputVariants>\n","\"use client\"\n\nimport type { TagsInputProps } from \"./TagsInput.types\"\n\nimport * as React from \"react\"\nimport { useCallback, useId, useRef, useState } from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Badge } from \"../../primitives/Badge\"\nimport { tagsInputInputVariants, tagsInputVariants } from \"./TagsInput.variants\"\n\n/**\n * TagsInput - A multi-tag input component for entering and managing tags\n *\n * @example\n * ```tsx\n * // Uncontrolled\n * <TagsInput\n *   defaultValue={[\"react\", \"typescript\"]}\n *   placeholder=\"Add tags...\"\n * />\n *\n * // Controlled\n * const [tags, setTags] = useState([\"hello\"])\n * <TagsInput\n *   value={tags}\n *   onChange={setTags}\n *   maxTags={5}\n * />\n * ```\n */\nfunction TagsInput({\n  value: controlledValue,\n  defaultValue = [],\n  onChange,\n  onTagAdd,\n  onTagRemove,\n  placeholder = \"Add tag...\",\n  maxTags,\n  allowDuplicates = false,\n  disabled,\n  size = \"md\",\n  variant,\n  invalid,\n  delimiters = [\",\"],\n  className,\n  ...props\n}: TagsInputProps) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [inputValue, setInputValue] = useState(\"\")\n  const [internalTags, setInternalTags] = useState<string[]>(defaultValue)\n  const id = useId()\n\n  // Determine if controlled or uncontrolled\n  const isControlled = controlledValue !== undefined\n  const tags = isControlled ? controlledValue : internalTags\n\n  const updateTags = useCallback(\n    (newTags: string[]) => {\n      if (!isControlled) {\n        setInternalTags(newTags)\n      }\n      onChange?.(newTags)\n    },\n    [isControlled, onChange]\n  )\n\n  const addTag = useCallback(\n    (tag: string) => {\n      const trimmedTag = tag.trim()\n      if (!trimmedTag) return\n\n      // Check for duplicates\n      if (!allowDuplicates && tags.includes(trimmedTag)) {\n        setInputValue(\"\")\n        return\n      }\n\n      // Check max tags\n      if (maxTags && tags.length >= maxTags) {\n        setInputValue(\"\")\n        return\n      }\n\n      const newTags = [...tags, trimmedTag]\n      updateTags(newTags)\n      onTagAdd?.(trimmedTag)\n      setInputValue(\"\")\n    },\n    [tags, allowDuplicates, maxTags, updateTags, onTagAdd]\n  )\n\n  const removeTag = useCallback(\n    (tagToRemove: string) => {\n      const newTags = tags.filter((tag) => tag !== tagToRemove)\n      updateTags(newTags)\n      onTagRemove?.(tagToRemove)\n    },\n    [tags, updateTags, onTagRemove]\n  )\n\n  const removeLastTag = useCallback(() => {\n    const lastTag = tags[tags.length - 1]\n    if (lastTag) {\n      removeTag(lastTag)\n    }\n  }, [tags, removeTag])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\" || delimiters.includes(e.key)) {\n        e.preventDefault()\n        addTag(inputValue)\n      } else if (e.key === \"Backspace\" && inputValue === \"\" && tags.length > 0) {\n        removeLastTag()\n      }\n    },\n    [inputValue, tags.length, addTag, removeLastTag, delimiters]\n  )\n\n  const handleInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value\n\n      // Check if any delimiter is in the pasted/typed value\n      for (const delimiter of delimiters) {\n        if (value.includes(delimiter)) {\n          const parts = value.split(delimiter)\n          parts.forEach((part, index) => {\n            if (index < parts.length - 1) {\n              addTag(part)\n            } else {\n              setInputValue(part)\n            }\n          })\n          return\n        }\n      }\n\n      setInputValue(value)\n    },\n    [delimiters, addTag]\n  )\n\n  const handleContainerClick = useCallback(() => {\n    inputRef.current?.focus()\n  }, [])\n\n  // Map size to Tag size\n  const tagSize = size === \"lg\" ? \"default\" : \"sm\"\n\n  return (\n    <div\n      aria-disabled={disabled ?? undefined}\n      aria-invalid={invalid ?? undefined}\n      className={cn(tagsInputVariants({ size, variant }), className)}\n      data-slot=\"tags-input\"\n      onClick={handleContainerClick}\n      {...props}\n    >\n      {tags.map((tag, index) => (\n        <Badge\n          key={`${tag}-${String(index)}`}\n          color=\"muted\"\n          size={tagSize}\n          type=\"pill-color\"\n          onDismiss={disabled ? undefined : () => { removeTag(tag); }}\n        >\n          {tag}\n        </Badge>\n      ))}\n      <input\n        ref={inputRef}\n        aria-label=\"Add tag\"\n        className={tagsInputInputVariants({ size })}\n        data-slot=\"tags-input-field\"\n        disabled={disabled}\n        id={id}\n        placeholder={tags.length === 0 ? placeholder : undefined}\n        type=\"text\"\n        value={inputValue}\n        onChange={handleInputChange}\n        onKeyDown={handleKeyDown}\n      />\n    </div>\n  )\n}\n\nexport { TagsInput }\n"]}

package/dist/chunk-UPYT2XM5.js

@@ -0,0 +1,152 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-[var(--toggle-root-gap)] font-[var(--toggle-root-font-weight)] border-[length:var(--toggle-root-border-width)] transition-all duration-150 hover:bg-[color:var(--toggle-variant-default-bg-hover)] hover:text-[color:var(--toggle-variant-default-color-hover)] hover:shadow-sm active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[color:var(--toggle-variant-default-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-default-color-on)] data-[state=on]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:z-10 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-[color:var(--toggle-variant-default-bg-default)] text-[color:var(--toggle-variant-default-color-default)] border-[color:var(--toggle-variant-default-border)]",
+        outline: "border-[color:var(--toggle-variant-outline-border)] bg-[color:var(--toggle-variant-outline-bg-default)] text-[color:var(--toggle-variant-outline-color-default)] hover:bg-[color:var(--toggle-variant-outline-bg-hover)] hover:text-[color:var(--toggle-variant-outline-color-hover)] data-[state=on]:bg-[color:var(--toggle-variant-outline-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-outline-color-on)]"
+      },
+      size: {
+        default: "h-[var(--toggle-size-default-height)] px-[var(--toggle-size-default-padding-x)] min-w-[var(--toggle-size-default-min-width)] [&_svg]:size-[var(--toggle-icon-size-default)]",
+        sm: "h-[var(--toggle-size-sm-height)] px-[var(--toggle-size-sm-padding-x)] min-w-[var(--toggle-size-sm-min-width)] [&_svg]:size-[var(--toggle-icon-size-sm)]",
+        md: "h-[var(--toggle-size-md-height)] px-[var(--toggle-size-md-padding-x)] min-w-[var(--toggle-size-md-min-width)] [&_svg]:size-[var(--toggle-icon-size-md)]",
+        lg: "h-[var(--toggle-size-lg-height)] px-[var(--toggle-size-lg-padding-x)] min-w-[var(--toggle-size-lg-min-width)] [&_svg]:size-[var(--toggle-icon-size-lg)]"
+      },
+      /**
+       * The shape of the toggle button
+       */
+      shape: {
+        pill: "rounded-[var(--toggle-root-border-radius-pill)]",
+        rounded: "rounded-[var(--toggle-root-border-radius-rounded)]"
+      },
+      /**
+       * Whether the item is connected to adjacent items (spacing=0)
+       */
+      connected: {
+        true: "rounded-none first:rounded-l-[var(--toggle-root-border-radius-pill)] last:rounded-r-[var(--toggle-root-border-radius-pill)]",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "outline",
+        connected: true,
+        className: "border-l-0 first:border-l"
+      },
+      {
+        shape: "rounded",
+        connected: true,
+        className: "first:rounded-l-[var(--toggle-root-border-radius-rounded)] last:rounded-r-[var(--toggle-root-border-radius-rounded)]"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "rounded",
+      connected: false
+    }
+  }
+);
+var ToggleGroupContext = React.createContext({});
+function Toggle({
+  className,
+  variant,
+  size,
+  shape,
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    TogglePrimitive.Root,
+    {
+      className: cn(toggleVariants({ variant, size, shape, className })),
+      "data-slot": "toggle",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "toggle-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+var spacingVariants = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4"
+};
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  shape,
+  spacing = 1,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ToggleGroupContext, { value: { variant, size, shape, spacing }, children: /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      className: cn(
+        "group/toggle-group inline-flex items-center",
+        spacingVariants[spacing],
+        className
+      ),
+      "data-slot": "toggle-group",
+      "data-spacing": spacing,
+      ...props,
+      children
+    }
+  ) });
+}
+function ToggleItem({
+  className,
+  variant,
+  size,
+  shape,
+  icon,
+  children,
+  ...props
+}) {
+  const context = React.use(ToggleGroupContext);
+  const resolvedVariant = variant ?? context.variant;
+  const resolvedSize = size ?? context.size;
+  const resolvedShape = shape ?? context.shape;
+  const resolvedSpacing = context.spacing ?? 1;
+  const isConnected = resolvedSpacing === 0;
+  return /* @__PURE__ */ jsxs(
+    ToggleGroupPrimitive.Item,
+    {
+      className: cn(
+        toggleVariants({
+          variant: resolvedVariant,
+          size: resolvedSize,
+          shape: resolvedShape,
+          connected: isConnected,
+          className
+        })
+      ),
+      "data-slot": "toggle-item",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "toggle-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+Toggle.Group = ToggleGroup;
+Toggle.Item = ToggleItem;
+
+export { Toggle, ToggleGroup, ToggleItem, toggleVariants };
+//# sourceMappingURL=chunk-UPYT2XM5.js.map
+//# sourceMappingURL=chunk-UPYT2XM5.js.map

package/dist/chunk-UPYT2XM5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Toggle/Toggle.tsx"],"names":[],"mappings":"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","file":"chunk-UPYT2XM5.js","sourcesContent":["\"use client\"\n\nimport type { ToggleGroupProps, ToggleItemProps, ToggleProps } from \"./Toggle.types\"\n\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-[var(--toggle-root-gap)] font-[var(--toggle-root-font-weight)] border-[length:var(--toggle-root-border-width)] transition-all duration-150 hover:bg-[color:var(--toggle-variant-default-bg-hover)] hover:text-[color:var(--toggle-variant-default-color-hover)] hover:shadow-sm active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[color:var(--toggle-variant-default-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-default-color-on)] data-[state=on]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:z-10 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-[color:var(--toggle-variant-default-bg-default)] text-[color:var(--toggle-variant-default-color-default)] border-[color:var(--toggle-variant-default-border)]\",\n        outline:\n          \"border-[color:var(--toggle-variant-outline-border)] bg-[color:var(--toggle-variant-outline-bg-default)] text-[color:var(--toggle-variant-outline-color-default)] hover:bg-[color:var(--toggle-variant-outline-bg-hover)] hover:text-[color:var(--toggle-variant-outline-color-hover)] data-[state=on]:bg-[color:var(--toggle-variant-outline-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-outline-color-on)]\",\n      },\n      size: {\n        default: \"h-[var(--toggle-size-default-height)] px-[var(--toggle-size-default-padding-x)] min-w-[var(--toggle-size-default-min-width)] [&_svg]:size-[var(--toggle-icon-size-default)]\",\n        sm: \"h-[var(--toggle-size-sm-height)] px-[var(--toggle-size-sm-padding-x)] min-w-[var(--toggle-size-sm-min-width)] [&_svg]:size-[var(--toggle-icon-size-sm)]\",\n        md: \"h-[var(--toggle-size-md-height)] px-[var(--toggle-size-md-padding-x)] min-w-[var(--toggle-size-md-min-width)] [&_svg]:size-[var(--toggle-icon-size-md)]\",\n        lg: \"h-[var(--toggle-size-lg-height)] px-[var(--toggle-size-lg-padding-x)] min-w-[var(--toggle-size-lg-min-width)] [&_svg]:size-[var(--toggle-icon-size-lg)]\",\n      },\n      /**\n       * The shape of the toggle button\n       */\n      shape: {\n        pill: \"rounded-[var(--toggle-root-border-radius-pill)]\",\n        rounded: \"rounded-[var(--toggle-root-border-radius-rounded)]\",\n      },\n      /**\n       * Whether the item is connected to adjacent items (spacing=0)\n       */\n      connected: {\n        true: \"rounded-none first:rounded-l-[var(--toggle-root-border-radius-pill)] last:rounded-r-[var(--toggle-root-border-radius-pill)]\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        variant: \"outline\",\n        connected: true,\n        className: \"border-l-0 first:border-l\",\n      },\n      {\n        shape: \"rounded\",\n        connected: true,\n        className: \"first:rounded-l-[var(--toggle-root-border-radius-rounded)] last:rounded-r-[var(--toggle-root-border-radius-rounded)]\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"rounded\",\n      connected: false,\n    },\n  }\n)\n\n// Context for sharing group props with items\nconst ToggleGroupContext = React.createContext<{\n  shape?: ToggleProps[\"shape\"]\n  size?: ToggleProps[\"size\"]\n  spacing?: ToggleGroupProps[\"spacing\"]\n  variant?: ToggleProps[\"variant\"]\n}>({})\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  shape,\n  icon,\n  children,\n  ...props\n}: ToggleProps) {\n  return (\n    <TogglePrimitive.Root\n      className={cn(toggleVariants({ variant, size, shape, className }))}\n      data-slot=\"toggle\"\n      {...props}\n    >\n      {icon && (\n        <span className=\"shrink-0\" data-slot=\"toggle-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </TogglePrimitive.Root>\n  )\n}\n\nconst spacingVariants = {\n  0: \"gap-0\",\n  1: \"gap-1\",\n  2: \"gap-2\",\n  3: \"gap-3\",\n  4: \"gap-4\",\n}\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  shape,\n  spacing = 1,\n  children,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupContext value={{ variant, size, shape, spacing }}>\n      <ToggleGroupPrimitive.Root\n        className={cn(\n          \"group/toggle-group inline-flex items-center\",\n          spacingVariants[spacing],\n          className\n        )}\n        data-slot=\"toggle-group\"\n        data-spacing={spacing}\n        {...props}\n      >\n        {children}\n      </ToggleGroupPrimitive.Root>\n    </ToggleGroupContext>\n  )\n}\n\nfunction ToggleItem({\n  className,\n  variant,\n  size,\n  shape,\n  icon,\n  children,\n  ...props\n}: ToggleItemProps) {\n  const context = React.use(ToggleGroupContext)\n  const resolvedVariant = variant ?? context.variant\n  const resolvedSize = size ?? context.size\n  const resolvedShape = shape ?? context.shape\n  const resolvedSpacing = context.spacing ?? 1\n  const isConnected = resolvedSpacing === 0\n\n  return (\n    <ToggleGroupPrimitive.Item\n      className={cn(\n        toggleVariants({\n          variant: resolvedVariant,\n          size: resolvedSize,\n          shape: resolvedShape,\n          connected: isConnected,\n          className,\n        })\n      )}\n      data-slot=\"toggle-item\"\n      {...props}\n    >\n      {icon && (\n        <span className=\"shrink-0\" data-slot=\"toggle-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nToggle.Group = ToggleGroup\nToggle.Item = ToggleItem\n\nexport { Toggle, ToggleGroup, ToggleItem, toggleVariants }"]}