@etus/ui 0.4.0-beta.2 → 0.4.0-beta.21

package/dist/chunk-S6BREP2G.js

@@ -0,0 +1,199 @@
+import { Badge } from './chunk-HNQX6ZG7.js';
+import { cn } from './chunk-RVAYDRMA.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-[var(--tags-input-root-radius)] 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-[color:var(--tags-input-root-border)] 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-[color:var(--tags-input-input-background)] 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-S6BREP2G.js.map
+//# sourceMappingURL=chunk-S6BREP2G.js.map

package/dist/chunk-S6BREP2G.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-S6BREP2G.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-[var(--tags-input-root-radius)] 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-[color:var(--tags-input-root-border)] 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-[color:var(--tags-input-input-background)] 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-SA3IQI3Y.js

@@ -0,0 +1,188 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var tabNavigationVariants = cva(
+  [
+    "flex items-center gap-1",
+    "overflow-x-auto scrollbar-none"
+  ],
+  {
+    defaultVariants: {
+      variant: "line"
+    },
+    variants: {
+      variant: {
+        line: [
+          "border-b border-border"
+        ],
+        solid: [
+          "rounded-lg bg-muted p-1"
+        ]
+      }
+    }
+  }
+);
+var tabNavigationLinkVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "whitespace-nowrap text-sm font-medium",
+    "transition-all duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    compoundVariants: [
+      // Line variant - active state
+      {
+        active: true,
+        variant: "line",
+        class: [
+          "border-b-2 border-primary text-foreground"
+        ]
+      },
+      // Line variant - inactive state
+      {
+        active: false,
+        variant: "line",
+        class: [
+          "border-b-2 border-transparent text-muted-foreground",
+          "hover:text-foreground hover:border-border"
+        ]
+      },
+      // Solid variant - active state
+      {
+        active: true,
+        variant: "solid",
+        class: [
+          "bg-background text-foreground shadow-sm"
+        ]
+      },
+      // Solid variant - inactive state
+      {
+        active: false,
+        variant: "solid",
+        class: [
+          "text-muted-foreground",
+          "hover:text-foreground hover:bg-background/50"
+        ]
+      }
+    ],
+    defaultVariants: {
+      active: false,
+      variant: "line"
+    },
+    variants: {
+      active: {
+        false: "",
+        true: ""
+      },
+      variant: {
+        line: [
+          "px-3 py-2 -mb-px"
+        ],
+        solid: [
+          "px-3 py-1.5 rounded-md"
+        ]
+      }
+    }
+  }
+);
+var TabNavigationContext = React.createContext({
+  activeValue: void 0,
+  onValueChange: void 0,
+  variant: "line"
+});
+function TabNavigation({
+  children,
+  className,
+  defaultValue,
+  onValueChange,
+  value: controlledValue,
+  variant = "line",
+  ...props
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const activeValue = isControlled ? controlledValue : uncontrolledValue;
+  const handleValueChange = React.useCallback(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [isControlled, onValueChange]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      activeValue,
+      onValueChange: handleValueChange,
+      variant
+    }),
+    [activeValue, handleValueChange, variant]
+  );
+  return /* @__PURE__ */ jsx(TabNavigationContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Tab navigation",
+      className: cn(tabNavigationVariants({ variant }), className),
+      "data-slot": "tab-navigation",
+      role: "navigation",
+      ...props,
+      children
+    }
+  ) });
+}
+function TabNavigationLink({
+  active: activeProp,
+  children,
+  className,
+  disabled = false,
+  href,
+  icon,
+  onClick,
+  value,
+  ...props
+}) {
+  const { activeValue, onValueChange, variant } = React.use(TabNavigationContext);
+  const isActive = activeProp ?? activeValue === value;
+  const handleClick = (e) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onValueChange?.(value);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      className: cn(
+        tabNavigationLinkVariants({ active: isActive, variant }),
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      "aria-current": isActive ? "page" : void 0,
+      "aria-disabled": disabled,
+      "data-active": isActive,
+      "data-slot": "tab-navigation-link",
+      href: disabled ? void 0 : href,
+      role: "link",
+      tabIndex: disabled ? -1 : 0,
+      onClick: handleClick,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0", "data-slot": "tab-navigation-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+TabNavigation.displayName = "TabNavigation";
+TabNavigationLink.displayName = "TabNavigationLink";
+
+export { TabNavigation, TabNavigationLink, tabNavigationLinkVariants, tabNavigationVariants };
+//# sourceMappingURL=chunk-SA3IQI3Y.js.map
+//# sourceMappingURL=chunk-SA3IQI3Y.js.map

package/dist/chunk-SA3IQI3Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/TabNavigation/TabNavigation.variants.ts","../src/components/navigation/TabNavigation/TabNavigation.tsx"],"names":[],"mappings":"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","file":"chunk-SA3IQI3Y.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * TabNavigation container variants\n */\nexport const tabNavigationVariants = cva(\n  [\n    \"flex items-center gap-1\",\n    \"overflow-x-auto scrollbar-none\",\n  ],\n  {\n    defaultVariants: {\n      variant: \"line\",\n    },\n    variants: {\n      variant: {\n        line: [\n          \"border-b border-border\",\n        ],\n        solid: [\n          \"rounded-lg bg-muted p-1\",\n        ],\n      },\n    },\n  }\n)\n\n/**\n * TabNavigationLink variants\n */\nexport const tabNavigationLinkVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-2\",\n    \"whitespace-nowrap text-sm font-medium\",\n    \"transition-all duration-200\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n  ],\n  {\n    compoundVariants: [\n      // Line variant - active state\n      {\n        active: true,\n        variant: \"line\",\n        class: [\n          \"border-b-2 border-primary text-foreground\",\n        ],\n      },\n      // Line variant - inactive state\n      {\n        active: false,\n        variant: \"line\",\n        class: [\n          \"border-b-2 border-transparent text-muted-foreground\",\n          \"hover:text-foreground hover:border-border\",\n        ],\n      },\n      // Solid variant - active state\n      {\n        active: true,\n        variant: \"solid\",\n        class: [\n          \"bg-background text-foreground shadow-sm\",\n        ],\n      },\n      // Solid variant - inactive state\n      {\n        active: false,\n        variant: \"solid\",\n        class: [\n          \"text-muted-foreground\",\n          \"hover:text-foreground hover:bg-background/50\",\n        ],\n      },\n    ],\n    defaultVariants: {\n      active: false,\n      variant: \"line\",\n    },\n    variants: {\n      active: {\n        false: \"\",\n        true: \"\",\n      },\n      variant: {\n        line: [\n          \"px-3 py-2 -mb-px\",\n        ],\n        solid: [\n          \"px-3 py-1.5 rounded-md\",\n        ],\n      },\n    },\n  }\n)\n","\"use client\"\n\nimport type {\n  TabNavigationLinkProps,\n  TabNavigationProps,\n  TabNavigationVariant,\n} from \"./TabNavigation.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  tabNavigationLinkVariants,\n  tabNavigationVariants,\n} from \"./TabNavigation.variants\"\n\n/**\n * Context for TabNavigation\n */\ninterface TabNavigationContextValue {\n  activeValue: string | undefined\n  onValueChange: ((value: string) => void) | undefined\n  variant: TabNavigationVariant\n}\n\nconst TabNavigationContext = React.createContext<TabNavigationContextValue>({\n  activeValue: undefined,\n  onValueChange: undefined,\n  variant: \"line\",\n})\n\n/**\n * TabNavigation - Link-based tab navigation\n *\n * A horizontal navigation component styled like tabs but using links\n * for navigation. Unlike regular Tabs which manage content switching,\n * TabNavigation is meant for actual page/route navigation.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <TabNavigation defaultValue=\"dashboard\">\n *   <TabNavigationLink value=\"dashboard\" href=\"/dashboard\">\n *     Dashboard\n *   </TabNavigationLink>\n *   <TabNavigationLink value=\"reports\" href=\"/reports\">\n *     Reports\n *   </TabNavigationLink>\n *   <TabNavigationLink value=\"settings\" href=\"/settings\">\n *     Settings\n *   </TabNavigationLink>\n * </TabNavigation>\n *\n * // Controlled with router\n * const pathname = usePathname()\n *\n * <TabNavigation value={pathname}>\n *   <TabNavigationLink value=\"/dashboard\" href=\"/dashboard\">\n *     Dashboard\n *   </TabNavigationLink>\n *   <TabNavigationLink value=\"/reports\" href=\"/reports\">\n *     Reports\n *   </TabNavigationLink>\n * </TabNavigation>\n *\n * // Solid variant\n * <TabNavigation variant=\"solid\" defaultValue=\"tab1\">\n *   <TabNavigationLink value=\"tab1\" href=\"/tab1\">Tab 1</TabNavigationLink>\n *   <TabNavigationLink value=\"tab2\" href=\"/tab2\">Tab 2</TabNavigationLink>\n * </TabNavigation>\n *\n * // With icons\n * <TabNavigation defaultValue=\"home\">\n *   <TabNavigationLink value=\"home\" href=\"/\" icon={<HomeIcon />}>\n *     Home\n *   </TabNavigationLink>\n *   <TabNavigationLink value=\"settings\" href=\"/settings\" icon={<SettingsIcon />}>\n *     Settings\n *   </TabNavigationLink>\n * </TabNavigation>\n * ```\n */\nfunction TabNavigation({\n  children,\n  className,\n  defaultValue,\n  onValueChange,\n  value: controlledValue,\n  variant = \"line\",\n  ...props\n}: TabNavigationProps) {\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue)\n\n  const isControlled = controlledValue !== undefined\n  const activeValue = isControlled ? controlledValue : uncontrolledValue\n\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue)\n      }\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const contextValue = React.useMemo<TabNavigationContextValue>(\n    () => ({\n      activeValue,\n      onValueChange: handleValueChange,\n      variant,\n    }),\n    [activeValue, handleValueChange, variant]\n  )\n\n  return (\n    <TabNavigationContext value={contextValue}>\n      <nav\n        aria-label=\"Tab navigation\"\n        className={cn(tabNavigationVariants({ variant }), className)}\n        data-slot=\"tab-navigation\"\n        role=\"navigation\"\n        {...props}\n      >\n        {children}\n      </nav>\n    </TabNavigationContext>\n  )\n}\n\n/**\n * TabNavigationLink - Individual navigation link within TabNavigation\n *\n * Renders as an anchor tag for navigation. Can be used with or without href\n * for SPA frameworks that handle navigation differently.\n */\nfunction TabNavigationLink({\n  active: activeProp,\n  children,\n  className,\n  disabled = false,\n  href,\n  icon,\n  onClick,\n  value,\n  ...props\n}: TabNavigationLinkProps) {\n  const { activeValue, onValueChange, variant } = React.use(TabNavigationContext)\n\n  // Determine if this link is active\n  const isActive = activeProp ?? activeValue === value\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    if (disabled) {\n      e.preventDefault()\n      return\n    }\n\n    // Update active value\n    onValueChange?.(value)\n\n    // Call custom onClick handler\n    onClick?.(e)\n  }\n\n  return (\n    <a\n      className={cn(\n        tabNavigationLinkVariants({ active: isActive, variant }),\n        disabled && \"pointer-events-none opacity-50\",\n        className\n      )}\n      aria-current={isActive ? \"page\" : undefined}\n      aria-disabled={disabled}\n      data-active={isActive}\n      data-slot=\"tab-navigation-link\"\n      href={disabled ? undefined : href}\n      role=\"link\"\n      tabIndex={disabled ? -1 : 0}\n      onClick={handleClick}\n      {...props}\n    >\n      {icon && (\n        <span className=\"size-4 shrink-0\" data-slot=\"tab-navigation-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </a>\n  )\n}\n\nTabNavigation.displayName = \"TabNavigation\"\nTabNavigationLink.displayName = \"TabNavigationLink\"\n\nexport { TabNavigation, TabNavigationLink }\n"]}