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

package/dist/chunk-UC5J6GWG.js

@@ -0,0 +1,174 @@
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuShortcut } from './chunk-6G5QK3SU.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { ChevronDown, LoaderCircle } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var splitButtonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-[color:var(--disabled-background)] disabled:text-[color:var(--disabled-foreground)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]",
+        primary: "bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]",
+        destructive: "bg-destructive text-white hover:bg-[color:var(--destructive-hover)] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground disabled:border-[color:var(--disabled-border)] dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+      },
+      size: {
+        md: "h-[var(--button-size-default-h)] px-[var(--button-size-default-px)] py-[var(--button-size-default-py)]",
+        sm: "h-[var(--button-size-sm-h)] gap-[var(--button-size-sm-gap)] px-[var(--button-size-sm-px)]",
+        lg: "h-[var(--button-size-lg-h)] px-[var(--button-size-lg-px)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var splitButtonTriggerVariants = cva(
+  "inline-flex items-center justify-center transition-all disabled:pointer-events-none disabled:bg-[color:var(--disabled-background)] disabled:text-[color:var(--disabled-foreground)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]",
+        primary: "bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]",
+        destructive: "bg-destructive text-white hover:bg-[color:var(--destructive-hover)] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-muted disabled:border-[color:var(--disabled-border)] dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+      },
+      size: {
+        md: "h-[var(--button-size-default-h)] px-[var(--split-button-trigger-padding-x)]",
+        sm: "h-[var(--button-size-sm-h)] px-1.5",
+        lg: "h-[var(--button-size-lg-h)] px-3"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function SplitButton({
+  className,
+  variant,
+  size,
+  children,
+  onClick,
+  menuItems,
+  loading = false,
+  loadingText,
+  disabled,
+  leftIcon,
+  "data-id": dataId,
+  triggerAriaLabel = "Open menu",
+  defaultOpen,
+  open,
+  onOpenChange,
+  ...props
+}) {
+  const isDisabled = disabled ?? loading;
+  const createPayload = React.useCallback(() => ({
+    ...dataId ? { id: dataId } : {},
+    timestamp: Date.now(),
+    isLoading: loading
+  }), [dataId, loading]);
+  const handleClick = React.useCallback(
+    (event) => {
+      onClick?.(event, createPayload());
+    },
+    [onClick, createPayload]
+  );
+  const renderPrimaryContent = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          LoaderCircle,
+          {
+            "aria-hidden": "true",
+            className: "animate-spin",
+            "data-slot": "loading-icon"
+          }
+        ),
+        loadingText ?? children
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "left-icon", children: leftIcon }),
+      children
+    ] });
+  };
+  const renderMenuItem = (item, index) => {
+    const handleItemClick = item.disabled ? void 0 : item.onClick;
+    return /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        ...handleItemClick ? { onClick: handleItemClick } : {},
+        disabled: item.disabled ?? false,
+        variant: item.variant ?? "default",
+        children: [
+          item.icon,
+          /* @__PURE__ */ jsx("span", { children: item.label }),
+          item.shortcut && /* @__PURE__ */ jsx(DropdownMenuShortcut, { children: item.shortcut })
+        ]
+      },
+      index
+    );
+  };
+  const dividerClass = variant === "outline" || variant === "ghost" ? "border-l border-[color:var(--split-button-divider-color)]" : "border-l border-current/20";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("inline-flex", className),
+      "data-id": dataId,
+      "data-slot": "split-button",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: cn(
+              splitButtonVariants({ variant, size }),
+              "rounded-l-[var(--button-radius-default)] rounded-r-none"
+            ),
+            "aria-busy": loading || void 0,
+            "aria-disabled": isDisabled || void 0,
+            "data-loading": loading || void 0,
+            "data-slot": "split-button-primary",
+            disabled: isDisabled,
+            type: "button",
+            onClick: handleClick,
+            children: renderPrimaryContent()
+          }
+        ),
+        /* @__PURE__ */ jsxs(DropdownMenu, { defaultOpen, open, onOpenChange, children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: cn(
+                splitButtonTriggerVariants({ variant, size }),
+                "rounded-r-[var(--button-radius-default)] rounded-l-none",
+                dividerClass
+              ),
+              "aria-disabled": isDisabled || void 0,
+              "aria-label": triggerAriaLabel,
+              "data-slot": "split-button-trigger",
+              disabled: isDisabled,
+              type: "button",
+              children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: menuItems.map(renderMenuItem) })
+        ] })
+      ]
+    }
+  );
+}
+
+export { SplitButton, splitButtonVariants };
+//# sourceMappingURL=chunk-UC5J6GWG.js.map
+//# sourceMappingURL=chunk-UC5J6GWG.js.map

package/dist/chunk-UC5J6GWG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/SplitButton/SplitButton.variants.ts","../src/components/primitives/SplitButton/SplitButton.tsx"],"names":[],"mappings":"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","file":"chunk-UC5J6GWG.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Primary action button variants (left half of SplitButton).\n *\n * State colors follow Figma (DES-1306): solid hover tokens (`--primary-hover` /\n * `--destructive-hover`) instead of opacity, and a solid disabled triplet\n * (`--disabled-background` / `-foreground` / `-border`) instead of `opacity-50`.\n */\nexport const splitButtonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:bg-[color:var(--disabled-background)] disabled:text-[color:var(--disabled-foreground)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]\",\n        primary: \"bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]\",\n        destructive:\n          \"bg-destructive text-white hover:bg-[color:var(--destructive-hover)] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground disabled:border-[color:var(--disabled-border)] dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n      },\n      size: {\n        md:\n          \"h-[var(--button-size-default-h)] px-[var(--button-size-default-px)] py-[var(--button-size-default-py)]\",\n        sm: \"h-[var(--button-size-sm-h)] gap-[var(--button-size-sm-gap)] px-[var(--button-size-sm-px)]\",\n        lg: \"h-[var(--button-size-lg-h)] px-[var(--button-size-lg-px)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * Trigger button variants (right half of SplitButton — icon-only chevron).\n *\n * Adds the Figma `Status=Open` visual (DES-1306 item 2): the outline trigger\n * gets `bg-muted` while the dropdown is open (`data-state=open` from Radix).\n */\nexport const splitButtonTriggerVariants = cva(\n  \"inline-flex items-center justify-center transition-all disabled:pointer-events-none disabled:bg-[color:var(--disabled-background)] disabled:text-[color:var(--disabled-foreground)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]\",\n        primary: \"bg-primary text-primary-foreground hover:bg-[color:var(--primary-hover)]\",\n        destructive:\n          \"bg-destructive text-white hover:bg-[color:var(--destructive-hover)] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground data-[state=open]:bg-muted disabled:border-[color:var(--disabled-border)] dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n      },\n      size: {\n        md:\n          \"h-[var(--button-size-default-h)] px-[var(--split-button-trigger-padding-x)]\",\n        sm: \"h-[var(--button-size-sm-h)] px-1.5\",\n        lg: \"h-[var(--button-size-lg-h)] px-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  }\n)\n\nexport type SplitButtonVariantProps = VariantProps<typeof splitButtonVariants>\nexport type SplitButtonTriggerVariantProps = VariantProps<\n  typeof splitButtonTriggerVariants\n>\n","\"use client\"\n\nimport type {\n  SplitButtonEventPayload,\n  SplitButtonMenuItem,\n  SplitButtonProps,\n} from \"./SplitButton.types\"\n\nimport { ChevronDown, LoaderCircle } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"../../navigation/DropdownMenu\"\nimport {\n  splitButtonVariants,\n  splitButtonTriggerVariants as triggerVariants,\n} from \"./SplitButton.variants\"\n\nfunction SplitButton({\n  className,\n  variant,\n  size,\n  children,\n  onClick,\n  menuItems,\n  loading = false,\n  loadingText,\n  disabled,\n  leftIcon,\n  \"data-id\": dataId,\n  triggerAriaLabel = \"Open menu\",\n  defaultOpen,\n  open,\n  onOpenChange,\n  ...props\n}: SplitButtonProps) {\n  const isDisabled = disabled ?? loading\n\n  // Create event payload for callbacks\n  const createPayload = React.useCallback((): SplitButtonEventPayload => ({\n    ...(dataId ? { id: dataId } : {}),\n    timestamp: Date.now(),\n    isLoading: loading,\n  }), [dataId, loading])\n\n  // Wrapped event handler that emits SplitButtonEventPayload\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event, createPayload())\n    },\n    [onClick, createPayload]\n  )\n\n  // Determine what to render as primary button content\n  const renderPrimaryContent = () => {\n    if (loading) {\n      return (\n        <>\n          <LoaderCircle\n            aria-hidden=\"true\"\n            className=\"animate-spin\"\n            data-slot=\"loading-icon\"\n          />\n          {loadingText ?? children}\n        </>\n      )\n    }\n\n    return (\n      <>\n        {leftIcon && (\n          <span aria-hidden=\"true\" data-slot=\"left-icon\">\n            {leftIcon}\n          </span>\n        )}\n        {children}\n      </>\n    )\n  }\n\n  // Render a single menu item\n  const renderMenuItem = (item: SplitButtonMenuItem, index: number) => {\n    // Guard onClick - don't call if item is disabled\n    const handleItemClick = item.disabled ? undefined : item.onClick\n\n    return (\n      <DropdownMenuItem\n        key={index}\n        {...(handleItemClick ? { onClick: handleItemClick } : {})}\n        disabled={item.disabled ?? false}\n        variant={item.variant ?? \"default\"}\n      >\n        {item.icon}\n        <span>{item.label}</span>\n        {item.shortcut && (\n          <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut>\n        )}\n      </DropdownMenuItem>\n    )\n  }\n\n  // Divider class for visual separation between buttons\n  const dividerClass =\n    variant === \"outline\" || variant === \"ghost\"\n      ? \"border-l border-[color:var(--split-button-divider-color)]\"\n      : \"border-l border-current/20\"\n\n  return (\n    <div\n      className={cn(\"inline-flex\", className)}\n      data-id={dataId}\n      data-slot=\"split-button\"\n      {...props}\n    >\n      {/* Primary action button */}\n      <button\n        className={cn(\n          splitButtonVariants({ variant, size }),\n          \"rounded-l-[var(--button-radius-default)] rounded-r-none\"\n        )}\n        aria-busy={loading || undefined}\n        aria-disabled={isDisabled || undefined}\n        data-loading={loading || undefined}\n        data-slot=\"split-button-primary\"\n        disabled={isDisabled}\n        type=\"button\"\n        onClick={handleClick}\n      >\n        {renderPrimaryContent()}\n      </button>\n\n      {/* Dropdown trigger button */}\n      <DropdownMenu defaultOpen={defaultOpen} open={open} onOpenChange={onOpenChange}>\n        <DropdownMenuTrigger asChild>\n          <button\n            className={cn(\n              triggerVariants({ variant, size }),\n              \"rounded-r-[var(--button-radius-default)] rounded-l-none\",\n              dividerClass\n            )}\n            aria-disabled={isDisabled || undefined}\n            aria-label={triggerAriaLabel}\n            data-slot=\"split-button-trigger\"\n            disabled={isDisabled}\n            type=\"button\"\n          >\n            <ChevronDown className=\"size-4\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          {menuItems.map(renderMenuItem)}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n\nexport { SplitButton, splitButtonVariants }\n"]}

package/dist/chunk-UNHPLKMR.js

@@ -0,0 +1,78 @@
+import { TextInput } from './chunk-K4UCALQQ.js';
+import { EyeOffIcon, EyeIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var passwordToggleVariants = cva(
+  // Base styles
+  [
+    "absolute right-0 top-1/2 -translate-y-1/2",
+    "flex items-center justify-center",
+    "text-muted-foreground hover:text-foreground",
+    "transition-colors",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "rounded-sm"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-5 w-5 right-1.5 [&_svg]:size-3",
+        sm: "h-6 w-6 right-2 [&_svg]:size-3.5",
+        md: "h-7 w-7 right-2.5 [&_svg]:size-4",
+        lg: "h-8 w-8 right-2.5 [&_svg]:size-4.5",
+        xl: "h-9 w-9 right-3 [&_svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function PasswordInput({
+  className,
+  size = "md",
+  variant = "default",
+  showToggle = true,
+  showIcon,
+  hideIcon,
+  disabled,
+  ...props
+}) {
+  const [showPassword, setShowPassword] = React.useState(false);
+  const toggleVisibility = React.useCallback(() => {
+    setShowPassword((prev) => !prev);
+  }, []);
+  const toggleButton = showToggle ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": showPassword ? "Hide password" : "Show password",
+      className: passwordToggleVariants({ size }),
+      "data-slot": "password-toggle",
+      disabled,
+      tabIndex: -1,
+      type: "button",
+      onClick: toggleVisibility,
+      children: showPassword ? hideIcon ?? /* @__PURE__ */ jsx(EyeOffIcon, { "aria-hidden": "true" }) : showIcon ?? /* @__PURE__ */ jsx(EyeIcon, { "aria-hidden": "true" })
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      className,
+      "data-slot": "password-input",
+      disabled,
+      size,
+      trailingIcon: toggleButton,
+      trailingIconInteractive: true,
+      type: showPassword ? "text" : "password",
+      variant,
+      ...props
+    }
+  );
+}
+
+export { PasswordInput, passwordToggleVariants };
+//# sourceMappingURL=chunk-UNHPLKMR.js.map
+//# sourceMappingURL=chunk-UNHPLKMR.js.map

package/dist/chunk-UNHPLKMR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/PasswordInput/PasswordInput.variants.ts","../src/components/forms/PasswordInput/PasswordInput.tsx"],"names":[],"mappings":";;;;;;AAMO,IAAM,sBAAA,GAAyB,GAAA;AAAA;AAAA,EAEpC;AAAA,IACE,2CAAA;AAAA,IACA,kCAAA;AAAA,IACA,6CAAA;AAAA,IACA,mBAAA;AAAA,IACA,kDAAA;AAAA,IACA,qGAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,kCAAA;AAAA,QACJ,EAAA,EAAI,kCAAA;AAAA,QACJ,EAAA,EAAI,kCAAA;AAAA,QACJ,EAAA,EAAI,oCAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;ACZA,SAAS,aAAA,CAAc;AAAA,EACrB,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,IAAA;AAAA,EACb,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAU,eAAS,KAAK,CAAA;AAE5D,EAAA,MAAM,gBAAA,GAAyB,kBAAY,MAAM;AAC/C,IAAA,eAAA,CAAgB,CAAC,IAAA,KAAS,CAAC,IAAI,CAAA;AAAA,EACjC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,eAAe,UAAA,mBACnB,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,eAAe,eAAA,GAAkB,eAAA;AAAA,MAC7C,SAAA,EAAW,sBAAA,CAAuB,EAAE,IAAA,EAAM,CAAA;AAAA,MAC1C,WAAA,EAAU,iBAAA;AAAA,MACV,QAAA;AAAA,MACA,QAAA,EAAU,EAAA;AAAA,MACV,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,gBAAA;AAAA,MAER,QAAA,EAAA,YAAA,GACI,QAAA,oBAAY,GAAA,CAAC,UAAA,EAAA,EAAW,aAAA,EAAY,MAAA,EAAO,CAAA,GAC3C,QAAA,oBAAY,GAAA,CAAC,OAAA,EAAA,EAAQ,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA,GAC/C,GACE,MAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,WAAA,EAAU,gBAAA;AAAA,MACV,QAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA,EAAc,YAAA;AAAA,MACd,uBAAA,EAAyB,IAAA;AAAA,MACzB,IAAA,EAAM,eAAe,MAAA,GAAS,UAAA;AAAA,MAC9B,OAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-UNHPLKMR.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Password toggle button variant styles using CVA\n * Sizes match the input sizes for proper alignment\n */\nexport const passwordToggleVariants = cva(\n  // Base styles\n  [\n    \"absolute right-0 top-1/2 -translate-y-1/2\",\n    \"flex items-center justify-center\",\n    \"text-muted-foreground hover:text-foreground\",\n    \"transition-colors\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n    \"rounded-sm\",\n  ],\n  {\n    variants: {\n      size: {\n        xs: \"h-5 w-5 right-1.5 [&_svg]:size-3\",\n        sm: \"h-6 w-6 right-2 [&_svg]:size-3.5\",\n        md: \"h-7 w-7 right-2.5 [&_svg]:size-4\",\n        lg: \"h-8 w-8 right-2.5 [&_svg]:size-4.5\",\n        xl: \"h-9 w-9 right-3 [&_svg]:size-5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type PasswordToggleVariantProps = VariantProps<typeof passwordToggleVariants>\n","\"use client\"\n\nimport type { PasswordInputProps } from \"./PasswordInput.types\"\n\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { TextInput } from \"../TextInput\"\nimport { passwordToggleVariants } from \"./PasswordInput.variants\"\n\n/**\n * PasswordInput component with visibility toggle.\n * Now uses TextInput internally for consistency.\n *\n * @example\n * ```tsx\n * <PasswordInput placeholder=\"Enter password\" />\n * ```\n */\nfunction PasswordInput({\n  className,\n  size = \"md\",\n  variant = \"default\",\n  showToggle = true,\n  showIcon,\n  hideIcon,\n  disabled,\n  ...props\n}: PasswordInputProps) {\n  const [showPassword, setShowPassword] = React.useState(false)\n\n  const toggleVisibility = React.useCallback(() => {\n    setShowPassword((prev) => !prev)\n  }, [])\n\n  const toggleButton = showToggle ? (\n    <button\n      aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n      className={passwordToggleVariants({ size })}\n      data-slot=\"password-toggle\"\n      disabled={disabled}\n      tabIndex={-1}\n      type=\"button\"\n      onClick={toggleVisibility}\n    >\n      {showPassword\n        ? (hideIcon ?? <EyeOffIcon aria-hidden=\"true\" />)\n        : (showIcon ?? <EyeIcon aria-hidden=\"true\" />)}\n    </button>\n  ) : undefined\n\n  return (\n    <TextInput\n      className={className}\n      data-slot=\"password-input\"\n      disabled={disabled}\n      size={size}\n      trailingIcon={toggleButton}\n      trailingIconInteractive={true}\n      type={showPassword ? \"text\" : \"password\"}\n      variant={variant}\n      {...props}\n    />\n  )\n}\n\nexport { PasswordInput }"]}

package/dist/chunk-UOHVT5KN.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-UOHVT5KN.js.map
+//# sourceMappingURL=chunk-UOHVT5KN.js.map

package/dist/chunk-UOHVT5KN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-UOHVT5KN.js"}

package/dist/chunk-UP2VWCW5.js

@@ -28,11 +28,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-export {
-  __require,
-  __esm,
-  __commonJS,
-  __export,
-  __toCommonJS
-};
+export { __commonJS, __esm, __export, __require, __toCommonJS };
+//# sourceMappingURL=chunk-UP2VWCW5.js.map
 //# sourceMappingURL=chunk-UP2VWCW5.js.map

package/dist/chunk-UP2VWCW5.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-UP2VWCW5.js"}

package/dist/chunk-UZEJ3ZVR.js

@@ -0,0 +1,128 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var responsiveContainerVariants = cva(
+  [
+    "w-full"
+  ],
+  {
+    variants: {
+      /**
+       * Container style variant
+       * - default: Responsive container with max-width and centering
+       * - fluid: Full width, no max-width constraint
+       * - constrained: Tightly constrained max-width (max-w-7xl)
+       */
+      variant: {
+        default: "mx-auto",
+        fluid: "",
+        constrained: "mx-auto max-w-7xl"
+      },
+      /**
+       * Maximum width of the container
+       * Only applies when variant is "default"
+       * - sm: max-w-4xl - Compact content
+       * - md: max-w-5xl - Standard content
+       * - lg: max-w-6xl - Wider content (default)
+       * - xl: max-w-7xl - Dashboard layouts
+       * - 2xl: max-w-screen-2xl - Full-width applications
+       */
+      maxWidth: {
+        sm: "max-w-4xl",
+        md: "max-w-5xl",
+        lg: "max-w-6xl",
+        xl: "max-w-7xl",
+        "2xl": "max-w-screen-2xl"
+      },
+      /**
+       * Responsive horizontal padding
+       * - true: Applies responsive padding (px-4 sm:px-6 lg:px-8)
+       * - false: No padding
+       */
+      padding: {
+        true: "px-4 sm:px-6 lg:px-8",
+        false: ""
+      },
+      /**
+       * Breakpoint for layout direction change
+       * Changes from column to row layout at specified breakpoint
+       * - sm: flex-col sm:flex-row
+       * - md: flex-col md:flex-row
+       * - lg: flex-col lg:flex-row
+       * - none: No flex layout applied
+       */
+      breakpoint: {
+        sm: "flex flex-col sm:flex-row",
+        md: "flex flex-col md:flex-row",
+        lg: "flex flex-col lg:flex-row",
+        none: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      maxWidth: "lg",
+      padding: true,
+      breakpoint: "none"
+    },
+    compoundVariants: [
+      // Fluid variant ignores maxWidth
+      {
+        variant: "fluid",
+        className: "max-w-none"
+      },
+      // Constrained variant has its own maxWidth
+      {
+        variant: "constrained",
+        maxWidth: "sm",
+        className: ""
+      },
+      {
+        variant: "constrained",
+        maxWidth: "md",
+        className: ""
+      },
+      {
+        variant: "constrained",
+        maxWidth: "lg",
+        className: ""
+      },
+      {
+        variant: "constrained",
+        maxWidth: "xl",
+        className: ""
+      },
+      {
+        variant: "constrained",
+        maxWidth: "2xl",
+        className: ""
+      }
+    ]
+  }
+);
+function ResponsiveContainer({
+  as: Component = "div",
+  variant,
+  maxWidth,
+  padding,
+  breakpoint,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(
+        responsiveContainerVariants({ variant, maxWidth, padding, breakpoint }),
+        className
+      ),
+      "data-slot": "responsive-container",
+      ...props
+    }
+  );
+}
+
+export { ResponsiveContainer, responsiveContainerVariants };
+//# sourceMappingURL=chunk-UZEJ3ZVR.js.map
+//# sourceMappingURL=chunk-UZEJ3ZVR.js.map

package/dist/chunk-UZEJ3ZVR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/ResponsiveContainer/ResponsiveContainer.variants.ts","../src/components/layout/ResponsiveContainer/ResponsiveContainer.tsx"],"names":[],"mappings":";;;;;AAMO,IAAM,2BAAA,GAA8B,GAAA;AAAA,EACzC;AAAA,IACE;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,SAAA;AAAA,QACT,KAAA,EAAO,EAAA;AAAA,QACP,WAAA,EAAa;AAAA,OACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAUA,QAAA,EAAU;AAAA,QACR,EAAA,EAAI,WAAA;AAAA,QACJ,EAAA,EAAI,WAAA;AAAA,QACJ,EAAA,EAAI,WAAA;AAAA,QACJ,EAAA,EAAI,WAAA;AAAA,QACJ,KAAA,EAAO;AAAA,OACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,sBAAA;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASA,UAAA,EAAY;AAAA,QACV,EAAA,EAAI,2BAAA;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,QAAA,EAAU,IAAA;AAAA,MACV,OAAA,EAAS,IAAA;AAAA,MACT,UAAA,EAAY;AAAA,KACd;AAAA,IACA,gBAAA,EAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAA,EAAS,OAAA;AAAA,QACT,SAAA,EAAW;AAAA,OACb;AAAA;AAAA,MAEA;AAAA,QACE,OAAA,EAAS,aAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,SAAA,EAAW;AAAA,OACb;AAAA,MACA;AAAA,QACE,OAAA,EAAS,aAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,SAAA,EAAW;AAAA,OACb;AAAA,MACA;AAAA,QACE,OAAA,EAAS,aAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,SAAA,EAAW;AAAA,OACb;AAAA,MACA;AAAA,QACE,OAAA,EAAS,aAAA;AAAA,QACT,QAAA,EAAU,IAAA;AAAA,QACV,SAAA,EAAW;AAAA,OACb;AAAA,MACA;AAAA,QACE,OAAA,EAAS,aAAA;AAAA,QACT,QAAA,EAAU,KAAA;AAAA,QACV,SAAA,EAAW;AAAA;AACb;AACF;AAEJ;ACvEA,SAAS,mBAAA,CAAoB;AAAA,EAC3B,IAAI,SAAA,GAAY,KAAA;AAAA,EAChB,OAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA6B;AAC3B,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,4BAA4B,EAAE,OAAA,EAAS,QAAA,EAAU,OAAA,EAAS,YAAY,CAAA;AAAA,QACtE;AAAA,OACF;AAAA,MACA,WAAA,EAAU,sBAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-UZEJ3ZVR.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * ResponsiveContainer variant styles\n * Layout component for managing responsive behavior across breakpoints\n */\nexport const responsiveContainerVariants = cva(\n  [\n    \"w-full\",\n  ],\n  {\n    variants: {\n      /**\n       * Container style variant\n       * - default: Responsive container with max-width and centering\n       * - fluid: Full width, no max-width constraint\n       * - constrained: Tightly constrained max-width (max-w-7xl)\n       */\n      variant: {\n        default: \"mx-auto\",\n        fluid: \"\",\n        constrained: \"mx-auto max-w-7xl\",\n      },\n      /**\n       * Maximum width of the container\n       * Only applies when variant is \"default\"\n       * - sm: max-w-4xl - Compact content\n       * - md: max-w-5xl - Standard content\n       * - lg: max-w-6xl - Wider content (default)\n       * - xl: max-w-7xl - Dashboard layouts\n       * - 2xl: max-w-screen-2xl - Full-width applications\n       */\n      maxWidth: {\n        sm: \"max-w-4xl\",\n        md: \"max-w-5xl\",\n        lg: \"max-w-6xl\",\n        xl: \"max-w-7xl\",\n        \"2xl\": \"max-w-screen-2xl\",\n      },\n      /**\n       * Responsive horizontal padding\n       * - true: Applies responsive padding (px-4 sm:px-6 lg:px-8)\n       * - false: No padding\n       */\n      padding: {\n        true: \"px-4 sm:px-6 lg:px-8\",\n        false: \"\",\n      },\n      /**\n       * Breakpoint for layout direction change\n       * Changes from column to row layout at specified breakpoint\n       * - sm: flex-col sm:flex-row\n       * - md: flex-col md:flex-row\n       * - lg: flex-col lg:flex-row\n       * - none: No flex layout applied\n       */\n      breakpoint: {\n        sm: \"flex flex-col sm:flex-row\",\n        md: \"flex flex-col md:flex-row\",\n        lg: \"flex flex-col lg:flex-row\",\n        none: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      maxWidth: \"lg\",\n      padding: true,\n      breakpoint: \"none\",\n    },\n    compoundVariants: [\n      // Fluid variant ignores maxWidth\n      {\n        variant: \"fluid\",\n        className: \"max-w-none\",\n      },\n      // Constrained variant has its own maxWidth\n      {\n        variant: \"constrained\",\n        maxWidth: \"sm\",\n        className: \"\",\n      },\n      {\n        variant: \"constrained\",\n        maxWidth: \"md\",\n        className: \"\",\n      },\n      {\n        variant: \"constrained\",\n        maxWidth: \"lg\",\n        className: \"\",\n      },\n      {\n        variant: \"constrained\",\n        maxWidth: \"xl\",\n        className: \"\",\n      },\n      {\n        variant: \"constrained\",\n        maxWidth: \"2xl\",\n        className: \"\",\n      },\n    ],\n  }\n)\n\nexport type ResponsiveContainerVariantProps = VariantProps<typeof responsiveContainerVariants>\n","import type { ResponsiveContainerProps } from \"./ResponsiveContainer.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { responsiveContainerVariants } from \"./ResponsiveContainer.variants\"\n\n/**\n * ResponsiveContainer\n *\n * A layout component that manages responsive behavior across breakpoints,\n * adjusting layout, width constraints, and padding automatically.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <ResponsiveContainer>\n *   <Content />\n * </ResponsiveContainer>\n *\n * // With responsive layout direction\n * <ResponsiveContainer breakpoint=\"md\">\n *   <Sidebar />\n *   <MainContent />\n * </ResponsiveContainer>\n *\n * // Constrained width without padding\n * <ResponsiveContainer variant=\"constrained\" padding={false}>\n *   <Article />\n * </ResponsiveContainer>\n * ```\n */\nfunction ResponsiveContainer({\n  as: Component = \"div\",\n  variant,\n  maxWidth,\n  padding,\n  breakpoint,\n  className,\n  ...props\n}: ResponsiveContainerProps) {\n  return (\n    <Component\n      className={cn(\n        responsiveContainerVariants({ variant, maxWidth, padding, breakpoint }),\n        className\n      )}\n      data-slot=\"responsive-container\"\n      {...props}\n    />\n  )\n}\n\nexport { ResponsiveContainer }\n"]}