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

package/dist/chunk-MQ2446N7.js

@@ -0,0 +1,216 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { ChevronDownIcon } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var navigationMenuVariants = cva([
+  "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center"
+]);
+var navigationMenuListVariants = cva([
+  "group flex flex-1 list-none items-center justify-center gap-1"
+]);
+var navigationMenuItemVariants = cva(["relative"]);
+var navigationMenuTriggerStyle = cva([
+  "group inline-flex h-9 w-max items-center justify-center",
+  "rounded-md bg-[color:var(--navigation-menu-trigger-bg)] px-4 py-2 text-sm font-medium",
+  "hover:bg-[color:var(--navigation-menu-trigger-hover-bg)] hover:text-[color:var(--navigation-menu-trigger-hover-text)]",
+  "focus:bg-[color:var(--navigation-menu-trigger-hover-bg)] focus:text-[color:var(--navigation-menu-trigger-hover-text)]",
+  "disabled:pointer-events-none disabled:opacity-50",
+  "data-[state=open]:hover:bg-[color:var(--navigation-menu-trigger-hover-bg)] data-[state=open]:text-[color:var(--navigation-menu-trigger-hover-text)]",
+  "data-[state=open]:focus:bg-[color:var(--navigation-menu-trigger-hover-bg)] data-[state=open]:bg-[color:var(--navigation-menu-trigger-hover-bg)]/50",
+  "focus-visible:ring-ring/50 outline-none",
+  "transition-[color,box-shadow]",
+  "focus-visible:ring-[3px] focus-visible:outline-1"
+]);
+var navigationMenuContentVariants = cva([
+  // Motion animations
+  "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out",
+  "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
+  "data-[motion=from-end]:slide-in-from-right-52",
+  "data-[motion=from-start]:slide-in-from-left-52",
+  "data-[motion=to-end]:slide-out-to-right-52",
+  "data-[motion=to-start]:slide-out-to-left-52",
+  // Positioning
+  "top-0 left-0 w-full p-2 pr-2.5",
+  "md:absolute md:w-auto",
+  // No viewport mode styles
+  "group-data-[viewport=false]/navigation-menu:bg-[color:var(--navigation-menu-content-bg)]",
+  "group-data-[viewport=false]/navigation-menu:text-[color:var(--navigation-menu-content-text)]",
+  "group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in",
+  "group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out",
+  "group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95",
+  "group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
+  "group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0",
+  "group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0",
+  "group-data-[viewport=false]/navigation-menu:top-full",
+  "group-data-[viewport=false]/navigation-menu:mt-1.5",
+  "group-data-[viewport=false]/navigation-menu:overflow-hidden",
+  "group-data-[viewport=false]/navigation-menu:rounded-md",
+  "group-data-[viewport=false]/navigation-menu:border",
+  "group-data-[viewport=false]/navigation-menu:shadow",
+  "group-data-[viewport=false]/navigation-menu:duration-200",
+  // Link focus reset
+  "**:data-[slot=navigation-menu-link]:focus:ring-0",
+  "**:data-[slot=navigation-menu-link]:focus:outline-none"
+]);
+var navigationMenuViewportWrapperVariants = cva([
+  "absolute top-full left-0 isolate z-50 flex justify-center"
+]);
+var navigationMenuViewportVariants = cva([
+  "origin-top-center bg-[color:var(--navigation-menu-viewport-bg)] text-[color:var(--navigation-menu-viewport-text)]",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
+  "relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)]",
+  "w-full overflow-hidden rounded-md border shadow",
+  "md:w-[var(--radix-navigation-menu-viewport-width)]"
+]);
+var navigationMenuLinkVariants = cva([
+  "data-[active=true]:focus:bg-[color:var(--navigation-menu-trigger-hover-bg)] data-[active=true]:hover:bg-[color:var(--navigation-menu-trigger-hover-bg)]",
+  "data-[active=true]:bg-[color:var(--navigation-menu-trigger-hover-bg)]/50 data-[active=true]:text-[color:var(--navigation-menu-trigger-hover-text)]",
+  "hover:bg-[color:var(--navigation-menu-trigger-hover-bg)] hover:text-[color:var(--navigation-menu-trigger-hover-text)]",
+  "focus:bg-[color:var(--navigation-menu-trigger-hover-bg)] focus:text-[color:var(--navigation-menu-trigger-hover-text)]",
+  "focus-visible:ring-ring/50",
+  "[&_svg:not([class*='text-'])]:text-muted-foreground",
+  "flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none",
+  "focus-visible:ring-[3px] focus-visible:outline-1",
+  "[&_svg:not([class*='size-'])]:size-4"
+]);
+var navigationMenuIndicatorVariants = cva([
+  "data-[state=visible]:animate-in data-[state=hidden]:animate-out",
+  "data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+  // z-[1]: intentionally a decorative local lift — keeps the arrow above its
+  // immediate sibling content without participating in the global z-index scale.
+  "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden"
+]);
+var navigationMenuIndicatorArrowVariants = cva([
+  "bg-[color:var(--navigation-menu-indicator-bg)] relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md"
+]);
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    NavigationMenuPrimitive.Root,
+    {
+      className: cn(navigationMenuVariants(), className),
+      "data-slot": "navigation-menu",
+      "data-viewport": viewport,
+      ...props,
+      children: [
+        children,
+        viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})
+      ]
+    }
+  );
+}
+function NavigationMenuList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.List,
+    {
+      className: cn(navigationMenuListVariants(), className),
+      "data-slot": "navigation-menu-list",
+      ...props
+    }
+  );
+}
+function NavigationMenuItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Item,
+    {
+      className: cn(navigationMenuItemVariants(), className),
+      "data-slot": "navigation-menu-item",
+      ...props
+    }
+  );
+}
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    NavigationMenuPrimitive.Trigger,
+    {
+      className: cn(navigationMenuTriggerStyle(), "group", className),
+      "data-slot": "navigation-menu-trigger",
+      ...props,
+      children: [
+        children,
+        " ",
+        /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            "aria-hidden": "true",
+            className: "relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+          }
+        )
+      ]
+    }
+  );
+}
+function NavigationMenuContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Content,
+    {
+      className: cn(navigationMenuContentVariants(), className),
+      "data-slot": "navigation-menu-content",
+      ...props
+    }
+  );
+}
+function NavigationMenuViewport({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn(navigationMenuViewportWrapperVariants()), children: /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Viewport,
+    {
+      className: cn(navigationMenuViewportVariants(), className),
+      "data-slot": "navigation-menu-viewport",
+      ...props
+    }
+  ) });
+}
+function NavigationMenuLink({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Link,
+    {
+      className: cn(navigationMenuLinkVariants(), className),
+      "data-slot": "navigation-menu-link",
+      ...props
+    }
+  );
+}
+function NavigationMenuIndicator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Indicator,
+    {
+      className: cn(navigationMenuIndicatorVariants(), className),
+      "data-slot": "navigation-menu-indicator",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn(navigationMenuIndicatorArrowVariants()) })
+    }
+  );
+}
+
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuContentVariants, navigationMenuIndicatorArrowVariants, navigationMenuIndicatorVariants, navigationMenuItemVariants, navigationMenuLinkVariants, navigationMenuListVariants, navigationMenuTriggerStyle, navigationMenuVariants, navigationMenuViewportVariants, navigationMenuViewportWrapperVariants };
+//# sourceMappingURL=chunk-MQ2446N7.js.map
+//# sourceMappingURL=chunk-MQ2446N7.js.map

package/dist/chunk-MQ2446N7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/NavigationMenu/NavigationMenu.variants.ts","../src/components/navigation/NavigationMenu/NavigationMenu.tsx"],"names":[],"mappings":"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","file":"chunk-MQ2446N7.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * NavigationMenu root variant styles\n */\nexport const navigationMenuVariants = cva([\n  \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n])\n\n/**\n * NavigationMenuList variant styles\n */\nexport const navigationMenuListVariants = cva([\n  \"group flex flex-1 list-none items-center justify-center gap-1\",\n])\n\n/**\n * NavigationMenuItem variant styles\n */\nexport const navigationMenuItemVariants = cva([\"relative\"])\n\n/**\n * NavigationMenuTrigger variant styles\n * Used for both trigger buttons and standalone links\n */\nexport const navigationMenuTriggerStyle = cva([\n  \"group inline-flex h-9 w-max items-center justify-center\",\n  \"rounded-md bg-[color:var(--navigation-menu-trigger-bg)] px-4 py-2 text-sm font-medium\",\n  \"hover:bg-[color:var(--navigation-menu-trigger-hover-bg)] hover:text-[color:var(--navigation-menu-trigger-hover-text)]\",\n  \"focus:bg-[color:var(--navigation-menu-trigger-hover-bg)] focus:text-[color:var(--navigation-menu-trigger-hover-text)]\",\n  \"disabled:pointer-events-none disabled:opacity-50\",\n  \"data-[state=open]:hover:bg-[color:var(--navigation-menu-trigger-hover-bg)] data-[state=open]:text-[color:var(--navigation-menu-trigger-hover-text)]\",\n  \"data-[state=open]:focus:bg-[color:var(--navigation-menu-trigger-hover-bg)] data-[state=open]:bg-[color:var(--navigation-menu-trigger-hover-bg)]/50\",\n  \"focus-visible:ring-ring/50 outline-none\",\n  \"transition-[color,box-shadow]\",\n  \"focus-visible:ring-[3px] focus-visible:outline-1\",\n])\n\n/**\n * NavigationMenuContent variant styles\n */\nexport const navigationMenuContentVariants = cva([\n  // Motion animations\n  \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out\",\n  \"data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out\",\n  \"data-[motion=from-end]:slide-in-from-right-52\",\n  \"data-[motion=from-start]:slide-in-from-left-52\",\n  \"data-[motion=to-end]:slide-out-to-right-52\",\n  \"data-[motion=to-start]:slide-out-to-left-52\",\n  // Positioning\n  \"top-0 left-0 w-full p-2 pr-2.5\",\n  \"md:absolute md:w-auto\",\n  // No viewport mode styles\n  \"group-data-[viewport=false]/navigation-menu:bg-[color:var(--navigation-menu-content-bg)]\",\n  \"group-data-[viewport=false]/navigation-menu:text-[color:var(--navigation-menu-content-text)]\",\n  \"group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in\",\n  \"group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out\",\n  \"group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95\",\n  \"group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95\",\n  \"group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0\",\n  \"group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0\",\n  \"group-data-[viewport=false]/navigation-menu:top-full\",\n  \"group-data-[viewport=false]/navigation-menu:mt-1.5\",\n  \"group-data-[viewport=false]/navigation-menu:overflow-hidden\",\n  \"group-data-[viewport=false]/navigation-menu:rounded-md\",\n  \"group-data-[viewport=false]/navigation-menu:border\",\n  \"group-data-[viewport=false]/navigation-menu:shadow\",\n  \"group-data-[viewport=false]/navigation-menu:duration-200\",\n  // Link focus reset\n  \"**:data-[slot=navigation-menu-link]:focus:ring-0\",\n  \"**:data-[slot=navigation-menu-link]:focus:outline-none\",\n])\n\n/**\n * NavigationMenuViewport wrapper variant styles\n */\nexport const navigationMenuViewportWrapperVariants = cva([\n  \"absolute top-full left-0 isolate z-50 flex justify-center\",\n])\n\n/**\n * NavigationMenuViewport variant styles\n */\nexport const navigationMenuViewportVariants = cva([\n  \"origin-top-center bg-[color:var(--navigation-menu-viewport-bg)] text-[color:var(--navigation-menu-viewport-text)]\",\n  \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n  \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90\",\n  \"relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)]\",\n  \"w-full overflow-hidden rounded-md border shadow\",\n  \"md:w-[var(--radix-navigation-menu-viewport-width)]\",\n])\n\n/**\n * NavigationMenuLink variant styles\n */\nexport const navigationMenuLinkVariants = cva([\n  \"data-[active=true]:focus:bg-[color:var(--navigation-menu-trigger-hover-bg)] data-[active=true]:hover:bg-[color:var(--navigation-menu-trigger-hover-bg)]\",\n  \"data-[active=true]:bg-[color:var(--navigation-menu-trigger-hover-bg)]/50 data-[active=true]:text-[color:var(--navigation-menu-trigger-hover-text)]\",\n  \"hover:bg-[color:var(--navigation-menu-trigger-hover-bg)] hover:text-[color:var(--navigation-menu-trigger-hover-text)]\",\n  \"focus:bg-[color:var(--navigation-menu-trigger-hover-bg)] focus:text-[color:var(--navigation-menu-trigger-hover-text)]\",\n  \"focus-visible:ring-ring/50\",\n  \"[&_svg:not([class*='text-'])]:text-muted-foreground\",\n  \"flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none\",\n  \"focus-visible:ring-[3px] focus-visible:outline-1\",\n  \"[&_svg:not([class*='size-'])]:size-4\",\n])\n\n/**\n * NavigationMenuIndicator variant styles\n */\nexport const navigationMenuIndicatorVariants = cva([\n  \"data-[state=visible]:animate-in data-[state=hidden]:animate-out\",\n  \"data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\n  // z-[1]: intentionally a decorative local lift — keeps the arrow above its\n  // immediate sibling content without participating in the global z-index scale.\n  \"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n])\n\n/**\n * NavigationMenuIndicator arrow variant styles\n */\nexport const navigationMenuIndicatorArrowVariants = cva([\n  \"bg-[color:var(--navigation-menu-indicator-bg)] relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md\",\n])\n","\"use client\"\n\nimport type {\n  NavigationMenuContentProps,\n  NavigationMenuIndicatorProps,\n  NavigationMenuItemProps,\n  NavigationMenuLinkProps,\n  NavigationMenuListProps,\n  NavigationMenuProps,\n  NavigationMenuTriggerProps,\n  NavigationMenuViewportProps,\n} from \"./NavigationMenu.types\"\n\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  navigationMenuContentVariants,\n  navigationMenuIndicatorArrowVariants,\n  navigationMenuIndicatorVariants,\n  navigationMenuItemVariants,\n  navigationMenuLinkVariants,\n  navigationMenuListVariants,\n  navigationMenuTriggerStyle,\n  navigationMenuVariants,\n  navigationMenuViewportVariants,\n  navigationMenuViewportWrapperVariants,\n} from \"./NavigationMenu.variants\"\n\n/**\n * NavigationMenu - A collection of navigation links.\n *\n * Built on top of Radix UI NavigationMenu primitive with additional styling.\n * Provides accessible navigation with keyboard support and animations.\n *\n * @example\n * <NavigationMenu>\n *   <NavigationMenuList>\n *     <NavigationMenuItem>\n *       <NavigationMenuTrigger>Item One</NavigationMenuTrigger>\n *       <NavigationMenuContent>\n *         <NavigationMenuLink href=\"/link\">Link</NavigationMenuLink>\n *       </NavigationMenuContent>\n *     </NavigationMenuItem>\n *   </NavigationMenuList>\n * </NavigationMenu>\n */\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: NavigationMenuProps) {\n  return (\n    <NavigationMenuPrimitive.Root\n      className={cn(navigationMenuVariants(), className)}\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\n/**\n * NavigationMenuList - Container for navigation menu items.\n */\nfunction NavigationMenuList({\n  className,\n  ...props\n}: NavigationMenuListProps) {\n  return (\n    <NavigationMenuPrimitive.List\n      className={cn(navigationMenuListVariants(), className)}\n      data-slot=\"navigation-menu-list\"\n      {...props}\n    />\n  )\n}\n\n/**\n * NavigationMenuItem - An individual navigation item.\n */\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: NavigationMenuItemProps) {\n  return (\n    <NavigationMenuPrimitive.Item\n      className={cn(navigationMenuItemVariants(), className)}\n      data-slot=\"navigation-menu-item\"\n      {...props}\n    />\n  )\n}\n\n/**\n * NavigationMenuTrigger - Button that opens a navigation menu content panel.\n *\n * Includes a chevron icon that rotates when open.\n */\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuTriggerProps) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      data-slot=\"navigation-menu-trigger\"\n      {...props}\n    >\n      {children}{\" \"}\n      <ChevronDownIcon\n        aria-hidden=\"true\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\n/**\n * NavigationMenuContent - Content panel for navigation menu items.\n *\n * Supports animated transitions for entering and leaving states.\n */\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuContentProps) {\n  return (\n    <NavigationMenuPrimitive.Content\n      className={cn(navigationMenuContentVariants(), className)}\n      data-slot=\"navigation-menu-content\"\n      {...props}\n    />\n  )\n}\n\n/**\n * NavigationMenuViewport - Viewport container for navigation menu content.\n *\n * Positioned below the navigation menu with proper sizing.\n */\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: NavigationMenuViewportProps) {\n  return (\n    <div className={cn(navigationMenuViewportWrapperVariants())}>\n      <NavigationMenuPrimitive.Viewport\n        className={cn(navigationMenuViewportVariants(), className)}\n        data-slot=\"navigation-menu-viewport\"\n        {...props}\n      />\n    </div>\n  )\n}\n\n/**\n * NavigationMenuLink - A navigation link within the menu.\n *\n * Use for both internal and external navigation links.\n */\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuLinkProps) {\n  return (\n    <NavigationMenuPrimitive.Link\n      className={cn(navigationMenuLinkVariants(), className)}\n      data-slot=\"navigation-menu-link\"\n      {...props}\n    />\n  )\n}\n\n/**\n * NavigationMenuIndicator - Visual indicator showing the active menu item.\n *\n * Animates between items as the user navigates.\n */\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: NavigationMenuIndicatorProps) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      className={cn(navigationMenuIndicatorVariants(), className)}\n      data-slot=\"navigation-menu-indicator\"\n      {...props}\n    >\n      <div className={cn(navigationMenuIndicatorArrowVariants())} />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuViewport,\n}\n"]}

package/dist/chunk-MVOENLOZ.js

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

package/dist/chunk-MVOENLOZ.js.map

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

package/dist/chunk-N23L6UDK.js

@@ -0,0 +1,108 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { ArrowRight } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var featureItemVariants = cva(
+  "flex items-start gap-[var(--feature-item-root-gap)] p-[var(--feature-item-root-padding)]",
+  {
+    variants: {
+      tone: {
+        subtle: "",
+        warning: "",
+        info: "",
+        brand: ""
+      }
+    },
+    defaultVariants: {
+      tone: "subtle"
+    }
+  }
+);
+var featureItemIconVariants = cva(
+  "inline-grid place-items-center shrink-0 size-[var(--feature-item-icon-size)] rounded-[var(--feature-item-icon-radius)] [&_svg]:size-5 [&_svg]:shrink-0",
+  {
+    variants: {
+      tone: {
+        subtle: "bg-[color:var(--feature-item-tone-subtle-bg)] text-[color:var(--feature-item-tone-subtle-fg)]",
+        warning: "bg-[color:var(--feature-item-tone-warning-bg)] text-[color:var(--feature-item-tone-warning-fg)]",
+        info: "bg-[color:var(--feature-item-tone-info-bg)] text-[color:var(--feature-item-tone-info-fg)]",
+        brand: "bg-[color:var(--feature-item-tone-brand-bg)] text-[color:var(--feature-item-tone-brand-fg)]"
+      }
+    },
+    defaultVariants: {
+      tone: "subtle"
+    }
+  }
+);
+function FeatureItem({
+  className,
+  tone,
+  icon,
+  title,
+  description,
+  action,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(featureItemVariants({ tone }), className),
+      "data-slot": "feature-item",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(featureItemIconVariants({ tone })),
+            "data-slot": "feature-item-icon",
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col gap-[var(--feature-item-body-gap)]",
+            "data-slot": "feature-item-body",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-[length:var(--feature-item-title-font-size)] font-[number:var(--feature-item-title-font-weight)] text-[color:var(--feature-item-title-color)]",
+                  "data-slot": "feature-item-title",
+                  children: title
+                }
+              ),
+              description && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "text-[length:var(--feature-item-description-font-size)] leading-[var(--feature-item-description-line-height)] text-[color:var(--feature-item-description-color)]",
+                  "data-slot": "feature-item-description",
+                  children: description
+                }
+              ),
+              action && /* @__PURE__ */ jsxs(
+                "a",
+                {
+                  className: "inline-flex items-center gap-[var(--feature-item-link-gap)] mt-[var(--feature-item-link-margin-top)] text-[length:var(--feature-item-link-font-size)] font-[number:var(--feature-item-link-font-weight)] text-[color:var(--feature-item-link-color)] cursor-pointer hover:underline",
+                  "data-slot": "feature-item-action",
+                  ...action.href ? { href: action.href } : {},
+                  ...action.onClick ? { onClick: action.onClick } : {},
+                  children: [
+                    action.label,
+                    /* @__PURE__ */ jsx(ArrowRight, { className: "size-3" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { FeatureItem, featureItemIconVariants, featureItemVariants };
+//# sourceMappingURL=chunk-N23L6UDK.js.map
+//# sourceMappingURL=chunk-N23L6UDK.js.map

package/dist/chunk-N23L6UDK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/FeatureItem/FeatureItem.variants.ts","../src/components/primitives/FeatureItem/FeatureItem.tsx"],"names":[],"mappings":";;;;;AAEO,IAAM,mBAAA,GAAsB,GAAA;AAAA,EACjC,0FAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,MAAA,EAAQ,EAAA;AAAA,QACR,OAAA,EAAS,EAAA;AAAA,QACT,IAAA,EAAM,EAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAEO,IAAM,uBAAA,GAA0B,GAAA;AAAA,EACrC,wJAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,MAAA,EACE,+FAAA;AAAA,QACF,OAAA,EACE,iGAAA;AAAA,QACF,IAAA,EAAM,2FAAA;AAAA,QACN,KAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AC3BA,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,EAAA,CAAG,mBAAA,CAAoB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACtD,WAAA,EAAU,cAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,MAAA;AAAA,YACZ,WAAW,EAAA,CAAG,uBAAA,CAAwB,EAAE,IAAA,EAAM,CAAC,CAAA;AAAA,YAC/C,WAAA,EAAU,mBAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,wBACA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,kDAAA;AAAA,YACV,WAAA,EAAU,mBAAA;AAAA,YAEV,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,oJAAA;AAAA,kBACV,WAAA,EAAU,oBAAA;AAAA,kBAET,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,cACC,WAAA,oBACC,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,kKAAA;AAAA,kBACV,WAAA,EAAU,0BAAA;AAAA,kBAET,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,cAED,MAAA,oBACC,IAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,qRAAA;AAAA,kBACV,WAAA,EAAU,qBAAA;AAAA,kBACT,GAAI,OAAO,IAAA,GAAO,EAAE,MAAM,MAAA,CAAO,IAAA,KAAS,EAAC;AAAA,kBAC3C,GAAI,OAAO,OAAA,GAAU,EAAE,SAAS,MAAA,CAAO,OAAA,KAAY,EAAC;AAAA,kBAEpD,QAAA,EAAA;AAAA,oBAAA,MAAA,CAAO,KAAA;AAAA,oCACR,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA;AAAA;AACjC;AAAA;AAAA;AAEJ;AAAA;AAAA,GACF;AAEJ","file":"chunk-N23L6UDK.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const featureItemVariants = cva(\n  \"flex items-start gap-[var(--feature-item-root-gap)] p-[var(--feature-item-root-padding)]\",\n  {\n    variants: {\n      tone: {\n        subtle: \"\",\n        warning: \"\",\n        info: \"\",\n        brand: \"\",\n      },\n    },\n    defaultVariants: {\n      tone: \"subtle\",\n    },\n  }\n)\n\nexport const featureItemIconVariants = cva(\n  \"inline-grid place-items-center shrink-0 size-[var(--feature-item-icon-size)] rounded-[var(--feature-item-icon-radius)] [&_svg]:size-5 [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: {\n        subtle:\n          \"bg-[color:var(--feature-item-tone-subtle-bg)] text-[color:var(--feature-item-tone-subtle-fg)]\",\n        warning:\n          \"bg-[color:var(--feature-item-tone-warning-bg)] text-[color:var(--feature-item-tone-warning-fg)]\",\n        info: \"bg-[color:var(--feature-item-tone-info-bg)] text-[color:var(--feature-item-tone-info-fg)]\",\n        brand:\n          \"bg-[color:var(--feature-item-tone-brand-bg)] text-[color:var(--feature-item-tone-brand-fg)]\",\n      },\n    },\n    defaultVariants: {\n      tone: \"subtle\",\n    },\n  }\n)\n","import type { FeatureItemProps } from \"./FeatureItem.types\"\n\nimport { ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  featureItemIconVariants,\n  featureItemVariants,\n} from \"./FeatureItem.variants\"\n\nfunction FeatureItem({\n  className,\n  tone,\n  icon,\n  title,\n  description,\n  action,\n  ...props\n}: FeatureItemProps) {\n  return (\n    <div\n      className={cn(featureItemVariants({ tone }), className)}\n      data-slot=\"feature-item\"\n      {...props}\n    >\n      <span\n        aria-hidden=\"true\"\n        className={cn(featureItemIconVariants({ tone }))}\n        data-slot=\"feature-item-icon\"\n      >\n        {icon}\n      </span>\n      <div\n        className=\"flex flex-col gap-[var(--feature-item-body-gap)]\"\n        data-slot=\"feature-item-body\"\n      >\n        <div\n          className=\"text-[length:var(--feature-item-title-font-size)] font-[number:var(--feature-item-title-font-weight)] text-[color:var(--feature-item-title-color)]\"\n          data-slot=\"feature-item-title\"\n        >\n          {title}\n        </div>\n        {description && (\n          <div\n            className=\"text-[length:var(--feature-item-description-font-size)] leading-[var(--feature-item-description-line-height)] text-[color:var(--feature-item-description-color)]\"\n            data-slot=\"feature-item-description\"\n          >\n            {description}\n          </div>\n        )}\n        {action && (\n          <a\n            className=\"inline-flex items-center gap-[var(--feature-item-link-gap)] mt-[var(--feature-item-link-margin-top)] text-[length:var(--feature-item-link-font-size)] font-[number:var(--feature-item-link-font-weight)] text-[color:var(--feature-item-link-color)] cursor-pointer hover:underline\"\n            data-slot=\"feature-item-action\"\n            {...(action.href ? { href: action.href } : {})}\n            {...(action.onClick ? { onClick: action.onClick } : {})}\n          >\n            {action.label}\n            <ArrowRight className=\"size-3\" />\n          </a>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport {\n  FeatureItem,\n  featureItemIconVariants,\n  featureItemVariants,\n}\n"]}

package/dist/chunk-N3I6GA4I.js

@@ -0,0 +1,137 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { MinusIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var inputOTPSlotVariants = cva(
+  // Base styles
+  [
+    "relative flex items-center justify-center border-y border-r text-center shadow-xs transition-all outline-none",
+    "first:border-l",
+    "border-[color:var(--input-otp-slot-border)] bg-[color:var(--input-otp-slot-bg)] dark:bg-input/30",
+    "data-[active=true]:border-[color:var(--input-otp-slot-active-border)] data-[active=true]:ring-[color:var(--input-otp-slot-active-ring)]/50 data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+    "data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+    "aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-[var(--input-otp-slot-size-sm-size)] text-[length:var(--input-otp-slot-size-sm-text)] rounded-[var(--input-otp-slot-size-sm-radius)]",
+        md: "size-[var(--input-otp-slot-size-md-size)] text-[length:var(--input-otp-slot-size-md-text)] rounded-[var(--input-otp-slot-size-md-radius)]",
+        lg: "size-[var(--input-otp-slot-size-lg-size)] text-[length:var(--input-otp-slot-size-lg-text)] rounded-[var(--input-otp-slot-size-lg-radius)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputOTPContainerVariants = cva(
+  "flex items-center has-disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "gap-[var(--input-otp-container-gap-sm)]",
+        md: "gap-[var(--input-otp-container-gap-md)]",
+        lg: "gap-[var(--input-otp-container-gap-lg)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var inputOTPGroupVariants = cva("flex items-center");
+var inputOTPCaretStyles = "pointer-events-none absolute inset-0 flex items-center justify-center";
+var inputOTPCaretInnerStyles = "animate-caret-blink bg-[color:var(--input-otp-caret-color)] h-[var(--input-otp-caret-height)] w-[var(--input-otp-caret-width)] duration-1000";
+function normalizeOTPValue(value) {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  if (Array.isArray(value)) {
+    return value.join("");
+  }
+  return "";
+}
+function InputOTP({
+  className,
+  containerClassName,
+  slotSize = "md",
+  defaultValue,
+  onChange,
+  value,
+  ...props
+}) {
+  const isControlled = value !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    () => normalizeOTPValue(defaultValue)
+  );
+  const resolvedValue = isControlled ? normalizeOTPValue(value) : uncontrolledValue;
+  const handleChange = React.useCallback(
+    (nextValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onChange?.(nextValue);
+    },
+    [isControlled, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    OTPInput,
+    {
+      className: cn("disabled:cursor-not-allowed", className),
+      containerClassName: cn(inputOTPContainerVariants({ size: slotSize }), containerClassName),
+      "data-slot": "input-otp",
+      value: resolvedValue,
+      onChange: handleChange,
+      ...props
+    }
+  );
+}
+function InputOTPGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(inputOTPGroupVariants(), className),
+      "data-slot": "input-otp-group",
+      ...props
+    }
+  );
+}
+function InputOTPSlot({
+  index,
+  size,
+  placeholder,
+  className,
+  ...props
+}) {
+  const inputOTPContext = React.use(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
+  const showPlaceholder = !char && !isActive && placeholder;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(inputOTPSlotVariants({ size }), className),
+      "data-active": isActive,
+      "data-slot": "input-otp-slot",
+      ...props,
+      children: [
+        char,
+        showPlaceholder && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/30 select-none", children: placeholder }),
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: inputOTPCaretStyles, children: /* @__PURE__ */ jsx("div", { className: inputOTPCaretInnerStyles }) })
+      ]
+    }
+  );
+}
+function InputOTPSeparator({ children, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: children ?? /* @__PURE__ */ jsx(MinusIcon, {}) });
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, inputOTPCaretInnerStyles, inputOTPCaretStyles, inputOTPContainerVariants, inputOTPGroupVariants, inputOTPSlotVariants };
+//# sourceMappingURL=chunk-N3I6GA4I.js.map
+//# sourceMappingURL=chunk-N3I6GA4I.js.map

package/dist/chunk-N3I6GA4I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/InputOTP/InputOTP.variants.ts","../src/components/forms/InputOTP/InputOTP.tsx"],"names":[],"mappings":"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","file":"chunk-N3I6GA4I.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * InputOTP slot variant styles using CVA\n */\nexport const inputOTPSlotVariants = cva(\n  // Base styles\n  [\n    \"relative flex items-center justify-center border-y border-r text-center shadow-xs transition-all outline-none\",\n    \"first:border-l\",\n    \"border-[color:var(--input-otp-slot-border)] bg-[color:var(--input-otp-slot-bg)] dark:bg-input/30\",\n    \"data-[active=true]:border-[color:var(--input-otp-slot-active-border)] data-[active=true]:ring-[color:var(--input-otp-slot-active-ring)]/50 data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n    \"data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n    \"aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-[var(--input-otp-slot-size-sm-size)] text-[length:var(--input-otp-slot-size-sm-text)] rounded-[var(--input-otp-slot-size-sm-radius)]\",\n        md: \"size-[var(--input-otp-slot-size-md-size)] text-[length:var(--input-otp-slot-size-md-text)] rounded-[var(--input-otp-slot-size-md-radius)]\",\n        lg: \"size-[var(--input-otp-slot-size-lg-size)] text-[length:var(--input-otp-slot-size-lg-text)] rounded-[var(--input-otp-slot-size-lg-radius)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputOTP container variant styles using CVA\n */\nexport const inputOTPContainerVariants = cva(\n  \"flex items-center has-disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"gap-[var(--input-otp-container-gap-sm)]\",\n        md: \"gap-[var(--input-otp-container-gap-md)]\",\n        lg: \"gap-[var(--input-otp-container-gap-lg)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * InputOTP group styles\n */\nexport const inputOTPGroupVariants = cva(\"flex items-center\")\n\n/**\n * InputOTP caret animation styles\n */\nexport const inputOTPCaretStyles =\n  \"pointer-events-none absolute inset-0 flex items-center justify-center\"\n\nexport const inputOTPCaretInnerStyles =\n  \"animate-caret-blink bg-[color:var(--input-otp-caret-color)] h-[var(--input-otp-caret-height)] w-[var(--input-otp-caret-width)] duration-1000\"\n\nexport type InputOTPSlotVariantProps = VariantProps<typeof inputOTPSlotVariants>\nexport type InputOTPContainerVariantProps = VariantProps<typeof inputOTPContainerVariants>\n","\"use client\"\n\nimport type {\n  InputOTPGroupProps,\n  InputOTPProps,\n  InputOTPSeparatorProps,\n  InputOTPSlotProps,\n} from \"./InputOTP.types\"\n\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { MinusIcon } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  inputOTPCaretInnerStyles,\n  inputOTPCaretStyles,\n  inputOTPContainerVariants,\n  inputOTPGroupVariants,\n  inputOTPSlotVariants,\n} from \"./InputOTP.variants\"\n\nfunction normalizeOTPValue(\n  value: InputOTPProps[\"defaultValue\"] | InputOTPProps[\"value\"]\n): string {\n  if (typeof value === \"string\") {\n    return value\n  }\n\n  if (typeof value === \"number\") {\n    return String(value)\n  }\n\n  if (Array.isArray(value)) {\n    return value.join(\"\")\n  }\n\n  return \"\"\n}\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  slotSize = \"md\",\n  defaultValue,\n  onChange,\n  value,\n  ...props\n}: InputOTPProps) {\n  const isControlled = value !== undefined\n  const [uncontrolledValue, setUncontrolledValue] = React.useState(() =>\n    normalizeOTPValue(defaultValue)\n  )\n\n  const resolvedValue = isControlled ? normalizeOTPValue(value) : uncontrolledValue\n\n  const handleChange = React.useCallback(\n    (nextValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(nextValue)\n      }\n\n      onChange?.(nextValue)\n    },\n    [isControlled, onChange]\n  )\n\n  return (\n    <OTPInput\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      containerClassName={cn(inputOTPContainerVariants({ size: slotSize }), containerClassName)}\n      data-slot=\"input-otp\"\n      value={resolvedValue}\n      onChange={handleChange}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: InputOTPGroupProps) {\n  return (\n    <div\n      className={cn(inputOTPGroupVariants(), className)}\n      data-slot=\"input-otp-group\"\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  size,\n  placeholder,\n  className,\n  ...props\n}: InputOTPSlotProps) {\n  const inputOTPContext = React.use(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {}\n\n  // Show placeholder only when slot is empty and not active\n  const showPlaceholder = !char && !isActive && placeholder\n\n  return (\n    <div\n      className={cn(inputOTPSlotVariants({ size }), className)}\n      data-active={isActive}\n      data-slot=\"input-otp-slot\"\n      {...props}\n    >\n      {char}\n      {showPlaceholder && (\n        <span className=\"text-muted-foreground/30 select-none\">{placeholder}</span>\n      )}\n      {hasFakeCaret && (\n        <div className={inputOTPCaretStyles}>\n          <div className={inputOTPCaretInnerStyles} />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ children, ...props }: InputOTPSeparatorProps) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      {children ?? <MinusIcon />}\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }\n"]}

package/dist/chunk-N4UTBJRY.js

@@ -0,0 +1,72 @@
+import { TextInput } from './chunk-PWCMCMDN.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { CheckCircle2Icon, XCircleIcon } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var emailValidationIconVariants = cva(
+  "flex items-center justify-center transition-colors",
+  {
+    variants: {
+      validationState: {
+        idle: "text-muted-foreground",
+        valid: "text-success",
+        invalid: "text-destructive"
+      },
+      size: {
+        xs: "[&_svg]:size-3",
+        sm: "[&_svg]:size-3.5",
+        md: "[&_svg]:size-4",
+        lg: "[&_svg]:size-4.5",
+        xl: "[&_svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      validationState: "idle",
+      size: "md"
+    }
+  }
+);
+function EmailInput({
+  className,
+  size = "md",
+  variant,
+  validationState = "idle",
+  showValidationIcon = false,
+  validIcon,
+  invalidIcon,
+  disabled,
+  ...props
+}) {
+  const showIcon = showValidationIcon && validationState !== "idle";
+  const trailing = showIcon ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(emailValidationIconVariants({ size, validationState })),
+      "data-slot": "email-validation-icon",
+      children: [
+        validationState === "valid" && (validIcon ?? /* @__PURE__ */ jsx(CheckCircle2Icon, {})),
+        validationState === "invalid" && (invalidIcon ?? /* @__PURE__ */ jsx(XCircleIcon, {}))
+      ]
+    }
+  ) : void 0;
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      "aria-invalid": validationState === "invalid" ? true : void 0,
+      className,
+      "data-slot": "email-input",
+      disabled,
+      size,
+      trailingIcon: trailing,
+      type: "email",
+      variant,
+      ...props
+    }
+  );
+}
+
+export { EmailInput, emailValidationIconVariants };
+//# sourceMappingURL=chunk-N4UTBJRY.js.map
+//# sourceMappingURL=chunk-N4UTBJRY.js.map

package/dist/chunk-N4UTBJRY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/EmailInput/EmailInput.variants.ts","../src/components/forms/EmailInput/EmailInput.tsx"],"names":[],"mappings":";;;;;;AAKO,IAAM,2BAAA,GAA8B,GAAA;AAAA,EACzC,oDAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,eAAA,EAAiB;AAAA,QACf,IAAA,EAAM,uBAAA;AAAA,QACN,KAAA,EAAO,cAAA;AAAA,QACP,OAAA,EAAS;AAAA,OACX;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,eAAA,EAAiB,MAAA;AAAA,MACjB,IAAA,EAAM;AAAA;AACR;AAEJ;ACRA,SAAS,UAAA,CAAW;AAAA,EAClB,SAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA;AAAA,EACA,eAAA,GAAkB,MAAA;AAAA,EAClB,kBAAA,GAAqB,KAAA;AAAA,EACrB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,MAAM,QAAA,GAAW,sBAAsB,eAAA,KAAoB,MAAA;AAE3D,EAAA,MAAM,WAAW,QAAA,mBACf,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,WAAW,EAAA,CAAG,2BAAA,CAA4B,EAAE,IAAA,EAAM,eAAA,EAAiB,CAAC,CAAA;AAAA,MACpE,WAAA,EAAU,uBAAA;AAAA,MAET,QAAA,EAAA;AAAA,QAAA,eAAA,KAAoB,OAAA,KAAY,SAAA,oBAAa,GAAA,CAAC,gBAAA,EAAA,EAAiB,CAAA,CAAA;AAAA,QAC/D,eAAA,KAAoB,SAAA,KAAc,WAAA,oBAAe,GAAA,CAAC,WAAA,EAAA,EAAY,CAAA;AAAA;AAAA;AAAA,GACjE,GACE,MAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,eAAA,KAAoB,SAAA,GAAY,IAAA,GAAO,MAAA;AAAA,MACrD,SAAA;AAAA,MACA,WAAA,EAAU,aAAA;AAAA,MACV,QAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA,EAAc,QAAA;AAAA,MACd,IAAA,EAAK,OAAA;AAAA,MACL,OAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-N4UTBJRY.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Email validation icon visual variants\n */\nexport const emailValidationIconVariants = cva(\n  \"flex items-center justify-center transition-colors\",\n  {\n    variants: {\n      validationState: {\n        idle: \"text-muted-foreground\",\n        valid: \"text-success\",\n        invalid: \"text-destructive\",\n      },\n      size: {\n        xs: \"[&_svg]:size-3\",\n        sm: \"[&_svg]:size-3.5\",\n        md: \"[&_svg]:size-4\",\n        lg: \"[&_svg]:size-4.5\",\n        xl: \"[&_svg]:size-5\",\n      },\n    },\n    defaultVariants: {\n      validationState: \"idle\",\n      size: \"md\",\n    },\n  }\n)\n\nexport type EmailValidationIconVariantProps = VariantProps<typeof emailValidationIconVariants>\n","\"use client\"\n\nimport type { EmailInputProps } from \"./EmailInput.types\"\n\nimport { CheckCircle2Icon, XCircleIcon } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { TextInput } from \"../TextInput\"\nimport { emailValidationIconVariants } from \"./EmailInput.variants\"\n\n/**\n * EmailInput component with optional validation state indicator.\n * Now uses TextInput internally for consistency.\n *\n * @example\n * ```tsx\n * <EmailInput placeholder=\"Enter email\" />\n * ```\n */\nfunction EmailInput({\n  className,\n  size = \"md\",\n  variant,\n  validationState = \"idle\",\n  showValidationIcon = false,\n  validIcon,\n  invalidIcon,\n  disabled,\n  ...props\n}: EmailInputProps) {\n  const showIcon = showValidationIcon && validationState !== \"idle\"\n\n  const trailing = showIcon ? (\n    <div\n      aria-hidden=\"true\"\n      className={cn(emailValidationIconVariants({ size, validationState }))}\n      data-slot=\"email-validation-icon\"\n    >\n      {validationState === \"valid\" && (validIcon ?? <CheckCircle2Icon />)}\n      {validationState === \"invalid\" && (invalidIcon ?? <XCircleIcon />)}\n    </div>\n  ) : undefined\n\n  return (\n    <TextInput\n      aria-invalid={validationState === \"invalid\" ? true : undefined}\n      className={className}\n      data-slot=\"email-input\"\n      disabled={disabled}\n      size={size}\n      trailingIcon={trailing}\n      type=\"email\"\n      variant={variant}\n      {...props}\n    />\n  )\n}\n\nexport { EmailInput }"]}