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

package/dist/chunk-CV77MF4G.js

@@ -0,0 +1,70 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var formValidationVariants = cva(
+  "text-sm mt-1.5",
+  {
+    variants: {
+      state: {
+        idle: "text-muted-foreground",
+        error: "text-destructive",
+        success: "text-success",
+        warning: "text-warning"
+      }
+    },
+    defaultVariants: {
+      state: "idle"
+    }
+  }
+);
+function getAutoState(props) {
+  if (props.error) return "error";
+  if (props.warning) return "warning";
+  if (props.success) return "success";
+  return "idle";
+}
+function getMessage(state, props) {
+  switch (state) {
+    case "error":
+      return props.error;
+    case "warning":
+      return props.warning;
+    case "success":
+      return props.success;
+    case "idle":
+    default:
+      return props.help;
+  }
+}
+function FormValidation({
+  className,
+  state,
+  error,
+  success,
+  warning,
+  help,
+  ...props
+}) {
+  const resolvedState = state ?? getAutoState({ error, success, warning});
+  const message = getMessage(resolvedState, { error, success, warning, help });
+  if (!message) {
+    return null;
+  }
+  const role = resolvedState === "error" ? "alert" : resolvedState === "success" ? "status" : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(formValidationVariants({ state: resolvedState }), className),
+      "data-slot": "form-validation",
+      "data-state": resolvedState,
+      role,
+      ...props,
+      children: message
+    }
+  );
+}
+
+export { FormValidation, formValidationVariants };
+//# sourceMappingURL=chunk-CV77MF4G.js.map
+//# sourceMappingURL=chunk-CV77MF4G.js.map

package/dist/chunk-CV77MF4G.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/FormValidation/FormValidation.variants.ts","../src/components/forms/FormValidation/FormValidation.tsx"],"names":[],"mappings":";;;;AAKO,IAAM,sBAAA,GAAyB,GAAA;AAAA,EACpC,gBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,KAAA,EAAO;AAAA,QACL,IAAA,EAAM,uBAAA;AAAA,QACN,KAAA,EAAO,kBAAA;AAAA,QACP,OAAA,EAAS,cAAA;AAAA,QACT,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,KAAA,EAAO;AAAA;AACT;AAEJ;ACRA,SAAS,aAAa,KAAA,EAAiD;AACrE,EAAA,IAAI,KAAA,CAAM,OAAO,OAAO,OAAA;AACxB,EAAA,IAAI,KAAA,CAAM,SAAS,OAAO,SAAA;AAC1B,EAAA,IAAI,KAAA,CAAM,SAAS,OAAO,SAAA;AAC1B,EAAA,OAAO,MAAA;AACT;AAKA,SAAS,UAAA,CAAW,OAA4B,KAAA,EAA4B;AAC1E,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,OAAA;AACH,MAAA,OAAO,KAAA,CAAM,KAAA;AAAA,IACf,KAAK,SAAA;AACH,MAAA,OAAO,KAAA,CAAM,OAAA;AAAA,IACf,KAAK,SAAA;AACH,MAAA,OAAO,KAAA,CAAM,OAAA;AAAA,IACf,KAAK,MAAA;AAAA,IACL;AACE,MAAA,OAAO,KAAA,CAAM,IAAA;AAAA;AAEnB;AA8BA,SAAS,cAAA,CAAe;AAAA,EACtB,SAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqD;AAEnD,EAAA,MAAM,aAAA,GAAgB,SAAS,YAAA,CAAa,EAAE,OAAO,OAAA,EAAS,OAAc,CAAC,CAAA;AAC7E,EAAA,MAAM,OAAA,GAAU,WAAW,aAAA,EAAe,EAAE,OAAO,OAAA,EAAS,OAAA,EAAS,MAAM,CAAA;AAG3E,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAGA,EAAA,MAAM,OAAO,aAAA,KAAkB,OAAA,GAAU,OAAA,GAAU,aAAA,KAAkB,YAAY,QAAA,GAAW,MAAA;AAE5F,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,sBAAA,CAAuB,EAAE,OAAO,aAAA,EAAe,GAAG,SAAS,CAAA;AAAA,MACzE,WAAA,EAAU,iBAAA;AAAA,MACV,YAAA,EAAY,aAAA;AAAA,MACZ,IAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chunk-CV77MF4G.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * FormValidation variant styles using CVA\n */\nexport const formValidationVariants = cva(\n  \"text-sm mt-1.5\",\n  {\n    variants: {\n      state: {\n        idle: \"text-muted-foreground\",\n        error: \"text-destructive\",\n        success: \"text-success\",\n        warning: \"text-warning\",\n      },\n    },\n    defaultVariants: {\n      state: \"idle\",\n    },\n  }\n)\n\n// Export variant prop types\nexport type FormValidationVariantProps = VariantProps<typeof formValidationVariants>\n","import type { FormValidationProps, FormValidationState } from \"./FormValidation.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  type FormValidationVariantProps,\n  formValidationVariants,\n} from \"./FormValidation.variants\"\n\n/**\n * Determines the validation state based on which message prop is provided.\n * Priority order: error > warning > success > help (idle)\n */\nfunction getAutoState(props: FormValidationProps): FormValidationState {\n  if (props.error) return \"error\"\n  if (props.warning) return \"warning\"\n  if (props.success) return \"success\"\n  return \"idle\"\n}\n\n/**\n * Gets the message content based on the validation state.\n */\nfunction getMessage(state: FormValidationState, props: FormValidationProps) {\n  switch (state) {\n    case \"error\":\n      return props.error\n    case \"warning\":\n      return props.warning\n    case \"success\":\n      return props.success\n    case \"idle\":\n    default:\n      return props.help\n  }\n}\n\n/**\n * FormValidation displays form validation feedback with appropriate styling.\n *\n * @example\n * ```tsx\n * // Auto-detect state from message prop\n * <FormValidation error=\"This field is required\" />\n * <FormValidation success=\"Email is available\" />\n * <FormValidation warning=\"Password is weak\" />\n * <FormValidation help=\"Enter your email address\" />\n * ```\n *\n * @example\n * ```tsx\n * // Explicit state control\n * <FormValidation state=\"error\" error=\"Invalid format\" />\n * ```\n *\n * @example\n * ```tsx\n * // With conditional rendering\n * <FormValidation\n *   error={errors.email?.message}\n *   success={isValid ? \"Looks good!\" : undefined}\n *   help=\"We'll never share your email\"\n * />\n * ```\n */\nfunction FormValidation({\n  className,\n  state,\n  error,\n  success,\n  warning,\n  help,\n  ...props\n}: FormValidationProps & FormValidationVariantProps) {\n  // Auto-detect state if not explicitly provided\n  const resolvedState = state ?? getAutoState({ error, success, warning, help })\n  const message = getMessage(resolvedState, { error, success, warning, help })\n\n  // Don't render if no message to display\n  if (!message) {\n    return null\n  }\n\n  // Determine appropriate role for accessibility\n  const role = resolvedState === \"error\" ? \"alert\" : resolvedState === \"success\" ? \"status\" : undefined\n\n  return (\n    <div\n      className={cn(formValidationVariants({ state: resolvedState }), className)}\n      data-slot=\"form-validation\"\n      data-state={resolvedState}\n      role={role}\n      {...props}\n    >\n      {message}\n    </div>\n  )\n}\n\nexport { FormValidation }\n"]}

package/dist/chunk-DGOW65KM.js

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

package/dist/chunk-DGOW65KM.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-DGOW65KM.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-DJHDCDU6.js

@@ -0,0 +1,101 @@
+import { Field, FieldLabel, FieldError, FieldDescription } from './chunk-LRE3LJMW.js';
+import { Textarea } from './chunk-ARJAIH7Q.js';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function TextareaField({
+  label,
+  description,
+  errorMessage,
+  required,
+  id: providedId,
+  ...textareaProps
+}) {
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const hasError = !!errorMessage;
+  return /* @__PURE__ */ jsxs(Field, { children: [
+    label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        "aria-describedby": hasError ? errorId : description ? descriptionId : void 0,
+        "aria-invalid": hasError || void 0,
+        "aria-required": required ?? void 0,
+        id,
+        ...textareaProps
+      }
+    ),
+    hasError ? /* @__PURE__ */ jsx(FieldError, { id: errorId, children: errorMessage }) : description ? /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, children: description }) : null
+  ] });
+}
+var textareaFieldVariants = cva(
+  "flex flex-col gap-2",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5",
+        md: "gap-2",
+        lg: "gap-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var textareaFieldLabelVariants = cva(
+  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var textareaFieldDescriptionVariants = cva(
+  "text-muted-foreground",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var textareaFieldErrorVariants = cva(
+  "text-destructive font-medium",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+
+export { TextareaField, textareaFieldDescriptionVariants, textareaFieldErrorVariants, textareaFieldLabelVariants, textareaFieldVariants };
+//# sourceMappingURL=chunk-DJHDCDU6.js.map
+//# sourceMappingURL=chunk-DJHDCDU6.js.map

package/dist/chunk-DJHDCDU6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/TextareaField/TextareaField.tsx","../src/components/forms/TextareaField/TextareaField.variants.ts"],"names":[],"mappings":";;;;;;AA2BA,SAAS,aAAA,CAAc;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,cAAc,KAAA,EAAM;AAC1B,EAAA,MAAM,KAAK,UAAA,IAAc,WAAA;AACzB,EAAA,MAAM,aAAA,GAAgB,GAAG,EAAE,CAAA,YAAA,CAAA;AAC3B,EAAA,MAAM,OAAA,GAAU,GAAG,EAAE,CAAA,MAAA,CAAA;AAErB,EAAA,MAAM,QAAA,GAAW,CAAC,CAAC,YAAA;AAEnB,EAAA,4BACG,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,KAAA,oBACC,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAS,EAAA,EAClB,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,4BACC,GAAA,CAAC,MAAA,EAAA,EAAK,eAAY,MAAA,EAAO,SAAA,EAAU,yBAAwB,QAAA,EAAA,GAAA,EAE3D;AAAA,KAAA,EAEJ,CAAA;AAAA,oBAEF,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EACE,QAAA,GAAW,OAAA,GAAW,WAAA,GAAc,aAAA,GAAgB,MAAA;AAAA,QAEtD,gBAAc,QAAA,IAAY,MAAA;AAAA,QAC1B,iBAAe,QAAA,IAAY,MAAA;AAAA,QAC3B,EAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IACC,QAAA,mBACC,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAI,OAAA,EAAU,QAAA,EAAA,YAAA,EAAa,CAAA,GACrC,WAAA,mBACF,GAAA,CAAC,gBAAA,EAAA,EAAiB,EAAA,EAAI,aAAA,EAAgB,uBAAY,CAAA,GAChD;AAAA,GAAA,EACN,CAAA;AAEJ;AChEO,IAAM,qBAAA,GAAwB,GAAA;AAAA,EACnC,qBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,OAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,0BAAA,GAA6B,GAAA;AAAA,EACxC,oFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,gCAAA,GAAmC,GAAA;AAAA,EAC9C,uBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,0BAAA,GAA6B,GAAA;AAAA,EACxC,8BAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ","file":"chunk-DJHDCDU6.js","sourcesContent":["\"use client\"\n\nimport type { TextareaFieldProps } from \"./TextareaField.types\"\n\nimport { useId } from \"react\"\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"../Field\"\nimport { Textarea } from \"../Textarea\"\n\n/**\n * TextareaField - A complete form field combining Textarea with label, description, and error handling\n *\n * @example\n * ```tsx\n * <TextareaField\n *   label=\"Description\"\n *   description=\"Enter a detailed description\"\n *   placeholder=\"Type here...\"\n * />\n *\n * <TextareaField\n *   label=\"Comments\"\n *   errorMessage=\"This field is required\"\n *   required\n * />\n * ```\n */\nfunction TextareaField({\n  label,\n  description,\n  errorMessage,\n  required,\n  id: providedId,\n  ...textareaProps\n}: TextareaFieldProps) {\n  const generatedId = useId()\n  const id = providedId ?? generatedId\n  const descriptionId = `${id}-description`\n  const errorId = `${id}-error`\n\n  const hasError = !!errorMessage\n\n  return (\n    <Field>\n      {label && (\n        <FieldLabel htmlFor={id}>\n          {label}\n          {required && (\n            <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n              *\n            </span>\n          )}\n        </FieldLabel>\n      )}\n      <Textarea\n        aria-describedby={\n          hasError ? errorId : (description ? descriptionId : undefined)\n        }\n        aria-invalid={hasError || undefined}\n        aria-required={required ?? undefined}\n        id={id}\n        {...textareaProps}\n      />\n      {hasError ? (\n        <FieldError id={errorId}>{errorMessage}</FieldError>\n      ) : description ? (\n        <FieldDescription id={descriptionId}>{description}</FieldDescription>\n      ) : null}\n    </Field>\n  )\n}\n\nexport { TextareaField }\n","import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * TextareaField container variant styles using CVA\n * Wraps the Field + Textarea combination with consistent spacing\n */\nexport const textareaFieldVariants = cva(\n  \"flex flex-col gap-2\",\n  {\n    variants: {\n      size: {\n        sm: \"gap-1.5\",\n        md: \"gap-2\",\n        lg: \"gap-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * TextareaField label variant styles using CVA\n */\nexport const textareaFieldLabelVariants = cva(\n  \"font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * TextareaField description variant styles using CVA\n */\nexport const textareaFieldDescriptionVariants = cva(\n  \"text-muted-foreground\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * TextareaField error variant styles using CVA\n */\nexport const textareaFieldErrorVariants = cva(\n  \"text-destructive font-medium\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type TextareaFieldVariantProps = VariantProps<typeof textareaFieldVariants>\nexport type TextareaFieldLabelVariantProps = VariantProps<typeof textareaFieldLabelVariants>\nexport type TextareaFieldDescriptionVariantProps = VariantProps<typeof textareaFieldDescriptionVariants>\nexport type TextareaFieldErrorVariantProps = VariantProps<typeof textareaFieldErrorVariants>\n"]}