@etus/ui 0.4.0-beta.1 → 0.4.0-beta.10

package/dist/chunk-XOGMDABS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/NativeSelect/NativeSelect.variants.ts","../src/components/forms/NativeSelect/NativeSelect.tsx"],"names":[],"mappings":"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","file":"chunk-XOGMDABS.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * NativeSelect variant styles using CVA\n */\nexport const nativeSelectVariants = cva(\n  // Base styles\n  [\n    \"w-full min-w-0 appearance-none rounded-[var(--native-select-root-radius)] border bg-transparent transition-[color,box-shadow] outline-none\",\n    \"placeholder:text-muted-foreground\",\n    \"selection:bg-primary selection:text-primary-foreground\",\n    \"dark:bg-input/30 dark:hover:bg-input/50\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed\",\n    \"focus-visible:border-[color:var(--native-select-root-border-focus)] focus-visible:ring-[color:var(--native-select-focus-ring-color)]/50 focus-visible:ring-[length:var(--native-select-focus-ring-width)]\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  ],\n  {\n    variants: {\n      size: {\n        xs: \"h-7 px-2 py-0.5 pr-7 text-xs\",\n        sm: \"h-8 px-2.5 py-1 pr-8 text-sm\",\n        md: \"h-9 px-3 py-1 pr-9 text-base md:text-sm\",\n        lg: \"h-10 px-3.5 py-1.5 pr-10 text-base\",\n        xl: \"h-12 px-4 py-2 pr-11 text-lg\",\n      },\n      variant: {\n        default: \"border-input shadow-xs\",\n        filled: \"border-transparent bg-[color:var(--native-select-variant-filled-bg)]\",\n        flushed: \"rounded-none border-x-0 border-t-0 border-b-input px-0 pr-7\",\n      },\n    },\n    defaultVariants: {\n      size: \"lg\",\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * Wrapper styles for the NativeSelect container\n */\nexport const nativeSelectWrapperVariants = cva(\n  \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\n/**\n * Icon styles based on size\n */\nexport const nativeSelectIconVariants = cva(\n  \"text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-50 select-none\",\n  {\n    variants: {\n      size: {\n        xs: \"right-2 size-3\",\n        sm: \"right-2.5 size-3.5\",\n        md: \"right-3 size-4\",\n        lg: \"right-3.5 size-4\",\n        xl: \"right-4 size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * Left icon styles based on size\n */\nexport const nativeSelectLeftIconVariants = cva(\n  \"text-muted-foreground pointer-events-none absolute top-1/2 -translate-y-1/2 opacity-70 select-none\",\n  {\n    variants: {\n      size: {\n        xs: \"left-2 size-3\",\n        sm: \"left-2.5 size-3.5\",\n        md: \"left-3 size-4\",\n        lg: \"left-3.5 size-4\",\n        xl: \"left-4 size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * Additional padding-left when leftIcon is present\n */\nexport const nativeSelectWithLeftIconPadding: Record<NativeSelectSize, string> = {\n  xs: \"pl-7\",\n  sm: \"pl-8\",\n  md: \"pl-9\",\n  lg: \"pl-10\",\n  xl: \"pl-11\",\n}\n\ntype NativeSelectSize = \"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"\n\nexport type NativeSelectVariantProps = VariantProps<typeof nativeSelectVariants>\n","import type {\n  NativeSelectOptGroupProps,\n  NativeSelectOptionProps,\n  NativeSelectProps,\n} from \"./NativeSelect.types\"\n\nimport { ChevronDownIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  nativeSelectIconVariants,\n  nativeSelectLeftIconVariants,\n  nativeSelectVariants,\n  nativeSelectWithLeftIconPadding,\n  nativeSelectWrapperVariants,\n} from \"./NativeSelect.variants\"\n\nfunction NativeSelect({\n  className,\n  size = \"lg\",\n  variant,\n  leftIcon,\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(nativeSelectWrapperVariants())}\n      data-slot=\"native-select-wrapper\"\n    >\n      {leftIcon && (\n        <span\n          aria-hidden=\"true\"\n          className={cn(nativeSelectLeftIconVariants({ size }))}\n          data-slot=\"native-select-left-icon\"\n        >\n          {leftIcon}\n        </span>\n      )}\n      <select\n        className={cn(\n          nativeSelectVariants({ size, variant }),\n          leftIcon && nativeSelectWithLeftIconPadding[size],\n          className\n        )}\n        data-slot=\"native-select\"\n        {...props}\n      />\n      <ChevronDownIcon\n        aria-hidden=\"true\"\n        className={cn(nativeSelectIconVariants({ size }))}\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: NativeSelectOptionProps) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: NativeSelectOptGroupProps) {\n  return (\n    <optgroup\n      className={cn(className)}\n      data-slot=\"native-select-optgroup\"\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n"]}

package/dist/chunk-XYYOV5GW.js

@@ -0,0 +1,186 @@
+import { radioGroupIndicatorVariants, radioGroupItemVariants } from './chunk-ONTUN5XH.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function RadioButton({
+  className,
+  size = "md",
+  label,
+  description,
+  id,
+  ref,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) {
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  const descriptionId = `${inputId}-description`;
+  const isChecked = props.checked ?? props.defaultChecked ?? false;
+  const hasText = Boolean(label) || Boolean(description);
+  const describedByParts = [
+    description ? descriptionId : void 0,
+    ariaDescribedBy
+  ].filter(Boolean);
+  const describedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group inline-flex gap-2",
+        description ? "items-start" : "items-center"
+      ),
+      "data-disabled": props.disabled ? "" : void 0,
+      "data-slot": "radio-button-wrapper",
+      "data-state": isChecked ? "checked" : "unchecked",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative inline-flex items-center justify-center",
+              description && "pt-[2px]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref,
+                  className: cn(
+                    "peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed",
+                    className
+                  ),
+                  "aria-describedby": describedBy,
+                  id: inputId,
+                  type: "radio",
+                  ...props
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    radioGroupItemVariants({ size }),
+                    "peer-checked:border-primary peer-focus-visible:border-ring peer-focus-visible:ring-ring/50 peer-focus-visible:ring-[3px]",
+                    "peer-checked:[&_[data-slot=radio-button-indicator]]:flex"
+                  ),
+                  "data-slot": "radio-button-visual",
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        radioGroupIndicatorVariants({ size }),
+                        "hidden items-center justify-center bg-transparent"
+                      ),
+                      "data-slot": "radio-button-indicator",
+                      children: /* @__PURE__ */ jsx("div", { className: "size-full rounded-full bg-[color:var(--radio-indicator-color)]" })
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        hasText && /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+          label && /* @__PURE__ */ jsx(
+            "label",
+            {
+              className: cn(
+                "text-sm font-medium leading-none cursor-pointer select-none",
+                "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+                size === "lg" && "text-base",
+                size === "sm" && "text-xs"
+              ),
+              "data-slot": "radio-button-label",
+              htmlFor: inputId,
+              children: label
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-xs leading-4 text-[color:var(--muted-foreground)] peer-disabled:opacity-50",
+              "data-slot": "radio-button-description",
+              children: description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var radioButtonVariants = cva(
+  [
+    "peer appearance-none shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none cursor-pointer",
+    "border-input bg-background dark:bg-input/30",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "checked:border-primary checked:bg-primary",
+    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "disabled:cursor-not-allowed disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var radioButtonIndicatorVariants = cva(
+  [
+    "pointer-events-none absolute rounded-full bg-primary-foreground transition-transform",
+    "scale-0 peer-checked:scale-100"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-1.5",
+        md: "size-2",
+        lg: "size-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var radioButtonWrapperVariants = cva(
+  "relative inline-flex items-center justify-center",
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        md: "size-4",
+        lg: "size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var radioButtonLabelVariants = cva(
+  "cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "text-sm ml-2",
+        md: "text-sm ml-2",
+        lg: "text-base ml-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+
+export { RadioButton, radioButtonIndicatorVariants, radioButtonLabelVariants, radioButtonVariants, radioButtonWrapperVariants };
+//# sourceMappingURL=chunk-XYYOV5GW.js.map
+//# sourceMappingURL=chunk-XYYOV5GW.js.map

package/dist/chunk-XYYOV5GW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/RadioButton/RadioButton.tsx","../src/components/forms/RadioButton/RadioButton.variants.ts"],"names":[],"mappings":"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","file":"chunk-XYYOV5GW.js","sourcesContent":["import type { RadioButtonProps } from \"./RadioButton.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  radioGroupIndicatorVariants,\n  radioGroupItemVariants,\n} from \"../RadioGroup/RadioGroup.variants\"\n\n/**\n * A standalone radio button component using native HTML input.\n * For simple use cases without RadioGroup.\n * Visuals are consistent with RadioGroup.\n *\n * @example\n * ```tsx\n * <RadioButton name=\"option\" value=\"1\" label=\"Option 1\" />\n * <RadioButton name=\"option\" value=\"2\" label=\"Option 2\" />\n * ```\n */\nfunction RadioButton({\n  className,\n  size = \"md\",\n  label,\n  description,\n  id,\n  ref,\n  \"aria-describedby\": ariaDescribedBy,\n  ...props\n}: RadioButtonProps) {\n  const generatedId = React.useId()\n  const inputId = id ?? generatedId\n  const descriptionId = `${inputId}-description`\n  const isChecked = props.checked ?? props.defaultChecked ?? false\n  const hasText = Boolean(label) || Boolean(description)\n  const describedByParts = [\n    description ? descriptionId : undefined,\n    ariaDescribedBy,\n  ].filter(Boolean)\n  const describedBy =\n    describedByParts.length > 0 ? describedByParts.join(\" \") : undefined\n\n  return (\n    <div\n      className={cn(\n        \"group inline-flex gap-2\",\n        description ? \"items-start\" : \"items-center\"\n      )}\n      data-disabled={props.disabled ? \"\" : undefined}\n      data-slot=\"radio-button-wrapper\"\n      data-state={isChecked ? \"checked\" : \"unchecked\"}\n    >\n      <div\n        className={cn(\n          \"relative inline-flex items-center justify-center\",\n          description && \"pt-[2px]\"\n        )}\n      >\n        <input\n          ref={ref}\n          className={cn(\n            \"peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed\",\n            className\n          )}\n          aria-describedby={describedBy}\n          id={inputId}\n          type=\"radio\"\n          {...props}\n        />\n        <div\n          className={cn(\n            radioGroupItemVariants({ size }),\n            \"peer-checked:border-primary peer-focus-visible:border-ring peer-focus-visible:ring-ring/50 peer-focus-visible:ring-[3px]\",\n            \"peer-checked:[&_[data-slot=radio-button-indicator]]:flex\"\n          )}\n          data-slot=\"radio-button-visual\"\n        >\n          <div\n            className={cn(\n              radioGroupIndicatorVariants({ size }),\n              \"hidden items-center justify-center bg-transparent\"\n            )}\n            data-slot=\"radio-button-indicator\"\n          >\n            <div className=\"size-full rounded-full bg-[color:var(--radio-indicator-color)]\" />\n          </div>\n        </div>\n      </div>\n      {hasText && (\n        <div className=\"grid gap-1.5\">\n          {label && (\n            <label\n              className={cn(\n                \"text-sm font-medium leading-none cursor-pointer select-none\",\n                \"peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n                size === \"lg\" && \"text-base\",\n                size === \"sm\" && \"text-xs\"\n              )}\n              data-slot=\"radio-button-label\"\n              htmlFor={inputId}\n            >\n              {label}\n            </label>\n          )}\n          {description && (\n            <p\n              className=\"text-xs leading-4 text-[color:var(--muted-foreground)] peer-disabled:opacity-50\"\n              data-slot=\"radio-button-description\"\n            >\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { RadioButton }\n","import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const radioButtonVariants = cva(\n  [\n    \"peer appearance-none shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none cursor-pointer\",\n    \"border-input bg-background dark:bg-input/30\",\n    \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n    \"checked:border-primary checked:bg-primary\",\n    \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioButtonIndicatorVariants = cva(\n  [\n    \"pointer-events-none absolute rounded-full bg-primary-foreground transition-transform\",\n    \"scale-0 peer-checked:scale-100\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-1.5\",\n        md: \"size-2\",\n        lg: \"size-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioButtonWrapperVariants = cva(\n  \"relative inline-flex items-center justify-center\",\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const radioButtonLabelVariants = cva(\n  \"cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"text-sm ml-2\",\n        md: \"text-sm ml-2\",\n        lg: \"text-base ml-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type RadioButtonVariantProps = VariantProps<typeof radioButtonVariants>\nexport type RadioButtonIndicatorVariantProps = VariantProps<typeof radioButtonIndicatorVariants>\nexport type RadioButtonWrapperVariantProps = VariantProps<typeof radioButtonWrapperVariants>\nexport type RadioButtonLabelVariantProps = VariantProps<typeof radioButtonLabelVariants>\n"]}

package/dist/chunk-Y555RCRZ.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+// src/hooks/use-media-query.ts
+function useMediaQuery(query) {
+  const subscribe = React.useCallback(
+    (callback) => {
+      const matchMedia = window.matchMedia(query);
+      matchMedia.addEventListener("change", callback);
+      return () => {
+        matchMedia.removeEventListener("change", callback);
+      };
+    },
+    [query]
+  );
+  const getSnapshot = () => {
+    return window.matchMedia(query).matches;
+  };
+  const getServerSnapshot = () => {
+    return false;
+  };
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+export { useMediaQuery };
+//# sourceMappingURL=chunk-Y555RCRZ.js.map
+//# sourceMappingURL=chunk-Y555RCRZ.js.map

package/dist/chunk-Y555RCRZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-media-query.ts"],"names":[],"mappings":";;;AAEO,SAAS,cAAc,KAAA,EAAe;AAC3C,EAAA,MAAM,SAAA,GAAkB,KAAA,CAAA,WAAA;AAAA,IACtB,CAAC,QAAA,KAAyB;AACxB,MAAA,MAAM,UAAA,GAAa,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAC1C,MAAA,UAAA,CAAW,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AAC9C,MAAA,OAAO,MAAM;AACX,QAAA,UAAA,CAAW,mBAAA,CAAoB,UAAU,QAAQ,CAAA;AAAA,MACnD,CAAA;AAAA,IACF,CAAA;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA,CAAE,OAAA;AAAA,EAClC,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,OAAO,KAAA;AAAA,EACT,CAAA;AAEA,EAAA,OAAa,KAAA,CAAA,oBAAA,CAAqB,SAAA,EAAW,WAAA,EAAa,iBAAiB,CAAA;AAC7E","file":"chunk-Y555RCRZ.js","sourcesContent":["import * as React from \"react\"\n\nexport function useMediaQuery(query: string) {\n  const subscribe = React.useCallback(\n    (callback: () => void) => {\n      const matchMedia = window.matchMedia(query)\n      matchMedia.addEventListener(\"change\", callback)\n      return () => {\n        matchMedia.removeEventListener(\"change\", callback)\n      }\n    },\n    [query]\n  )\n\n  const getSnapshot = () => {\n    return window.matchMedia(query).matches\n  }\n\n  const getServerSnapshot = () => {\n    return false\n  }\n\n  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)\n}\n"]}

package/dist/chunk-Y5GO2F6P.js

@@ -0,0 +1,188 @@
+import { cn } from './chunk-HRNDJU7D.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-Y5GO2F6P.js.map
+//# sourceMappingURL=chunk-Y5GO2F6P.js.map

package/dist/chunk-Y5GO2F6P.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-Y5GO2F6P.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"]}