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

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"]}