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

package/dist/chunk-SX63UD5X.js

@@ -0,0 +1,140 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import { AlertCircleIcon } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var errorMessageVariants = cva(
+  [
+    "text-destructive font-normal",
+    "flex items-center gap-1.5"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        inline: "inline-flex",
+        bordered: [
+          "flex items-start gap-2",
+          "bg-destructive/10 border border-destructive/30",
+          "rounded-md p-3"
+        ],
+        critical: [
+          "bg-destructive text-destructive-foreground",
+          "font-medium rounded-md p-3"
+        ]
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      animated: {
+        true: "animate-shake",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      animated: false
+    }
+  }
+);
+var errorMessageIconVariants = cva("shrink-0", {
+  variants: {
+    size: {
+      sm: "size-3",
+      md: "size-4",
+      lg: "size-5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var errorMessageListVariants = cva("flex flex-col gap-1", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function shouldShowIcon(showIcon, variant) {
+  if (showIcon !== void 0) return showIcon;
+  return variant === "inline" || variant === "bordered" || variant === "critical";
+}
+function ErrorMessage({
+  className,
+  variant = "default",
+  size,
+  icon,
+  showIcon,
+  animated = false,
+  errors,
+  children,
+  ref,
+  ...props
+}) {
+  const errorMessages = errors?.filter((e) => !!e?.message);
+  if (!children && (!errorMessages || errorMessages.length === 0)) {
+    return null;
+  }
+  const displayIcon = shouldShowIcon(showIcon, variant);
+  if (errorMessages && errorMessages.length > 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(errorMessageListVariants({ size }), className),
+        "data-slot": "error-message",
+        role: "alert",
+        ...props,
+        children: errorMessages.map((error) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(errorMessageVariants({ variant, size, animated })),
+            "data-slot": "error-message-item",
+            children: [
+              displayIcon && icon !== null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "error-message-icon", children: icon ?? /* @__PURE__ */ jsx(
+                AlertCircleIcon,
+                {
+                  className: cn(errorMessageIconVariants({ size }))
+                }
+              ) }),
+              error.message
+            ]
+          },
+          error.message
+        ))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: cn(errorMessageVariants({ variant, size, animated }), className),
+      "data-slot": "error-message",
+      role: "alert",
+      ...props,
+      children: [
+        displayIcon && icon !== null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", "data-slot": "error-message-icon", children: icon ?? /* @__PURE__ */ jsx(
+          AlertCircleIcon,
+          {
+            className: cn(errorMessageIconVariants({ size }))
+          }
+        ) }),
+        children
+      ]
+    }
+  );
+}
+
+export { ErrorMessage, errorMessageIconVariants, errorMessageListVariants, errorMessageVariants };
+//# sourceMappingURL=chunk-SX63UD5X.js.map
+//# sourceMappingURL=chunk-SX63UD5X.js.map

package/dist/chunk-SX63UD5X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/ErrorMessage/ErrorMessage.variants.ts","../src/components/forms/ErrorMessage/ErrorMessage.tsx"],"names":[],"mappings":"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","file":"chunk-SX63UD5X.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * ErrorMessage variant styles using CVA\n */\nexport const errorMessageVariants = cva(\n  [\n    \"text-destructive font-normal\",\n    \"flex items-center gap-1.5\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        inline: \"inline-flex\",\n        bordered: [\n          \"flex items-start gap-2\",\n          \"bg-destructive/10 border border-destructive/30\",\n          \"rounded-md p-3\",\n        ],\n        critical: [\n          \"bg-destructive text-destructive-foreground\",\n          \"font-medium rounded-md p-3\",\n        ],\n      },\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-base\",\n      },\n      animated: {\n        true: \"animate-shake\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n      animated: false,\n    },\n  }\n)\n\n/**\n * ErrorMessage icon variant styles using CVA\n */\nexport const errorMessageIconVariants = cva(\"shrink-0\", {\n  variants: {\n    size: {\n      sm: \"size-3\",\n      md: \"size-4\",\n      lg: \"size-5\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n})\n\n/**\n * ErrorMessage list variant styles for errors array\n */\nexport const errorMessageListVariants = cva(\"flex flex-col gap-1\", {\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// Export variant prop types\nexport type ErrorMessageVariantProps = VariantProps<typeof errorMessageVariants>\nexport type ErrorMessageIconVariantProps = VariantProps<typeof errorMessageIconVariants>\n","import type { ErrorMessageProps } from \"./ErrorMessage.types\"\n\nimport { AlertCircleIcon } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  errorMessageIconVariants,\n  errorMessageListVariants,\n  type ErrorMessageVariantProps,\n  errorMessageVariants,\n} from \"./ErrorMessage.variants\"\n\n/**\n * Determines if icon should be shown based on variant\n */\nfunction shouldShowIcon(\n  showIcon: boolean | undefined,\n  variant: string | undefined\n): boolean {\n  if (showIcon !== undefined) return showIcon\n  // Default: show icon for inline, bordered, critical variants\n  return variant === \"inline\" || variant === \"bordered\" || variant === \"critical\"\n}\n\n/**\n * ErrorMessage displays form validation errors with an icon and accessible alert role.\n *\n * @example\n * ```tsx\n * <ErrorMessage>This field is required</ErrorMessage>\n * ```\n *\n * @example\n * ```tsx\n * // With errors array (react-hook-form compatible)\n * <ErrorMessage errors={[{ message: 'Error 1' }, { message: 'Error 2' }]} />\n * ```\n *\n * @example\n * ```tsx\n * // With animation\n * <ErrorMessage animated>Attention required!</ErrorMessage>\n * ```\n *\n * @example\n * ```tsx\n * // Bordered variant\n * <ErrorMessage variant=\"bordered\">Please fix this error</ErrorMessage>\n * ```\n */\nfunction ErrorMessage({\n  className,\n  variant = \"default\",\n  size,\n  icon,\n  showIcon,\n  animated = false,\n  errors,\n  children,\n  ref,\n  ...props\n}: ErrorMessageProps & ErrorMessageVariantProps) {\n  // Filter out undefined errors and extract messages\n  const errorMessages = errors?.filter((e): e is { message?: string } => !!e?.message)\n\n  // If no children and no error messages, don't render\n  if (!children && (!errorMessages || errorMessages.length === 0)) {\n    return null\n  }\n\n  const displayIcon = shouldShowIcon(showIcon, variant)\n\n  // Render errors array as list\n  if (errorMessages && errorMessages.length > 0) {\n    return (\n      <div\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={cn(errorMessageListVariants({ size }), className)}\n        data-slot=\"error-message\"\n        role=\"alert\"\n        {...(props as React.ComponentProps<\"div\">)}\n      >\n        {errorMessages.map((error) => (\n          <span\n            key={error.message}\n            className={cn(errorMessageVariants({ variant, size, animated }))}\n            data-slot=\"error-message-item\"\n          >\n            {displayIcon && icon !== null && (\n              <span aria-hidden=\"true\" data-slot=\"error-message-icon\">\n                {icon ?? (\n                  <AlertCircleIcon\n                    className={cn(errorMessageIconVariants({ size }))}\n                  />\n                )}\n              </span>\n            )}\n            {error.message}\n          </span>\n        ))}\n      </div>\n    )\n  }\n\n  // Render single error message\n  return (\n    <span\n      ref={ref}\n      className={cn(errorMessageVariants({ variant, size, animated }), className)}\n      data-slot=\"error-message\"\n      role=\"alert\"\n      {...props}\n    >\n      {displayIcon && icon !== null && (\n        <span aria-hidden=\"true\" data-slot=\"error-message-icon\">\n          {icon ?? (\n            <AlertCircleIcon\n              className={cn(errorMessageIconVariants({ size }))}\n            />\n          )}\n        </span>\n      )}\n      {children}\n    </span>\n  )\n}\n\nexport { ErrorMessage }\n"]}

package/dist/chunk-SXSR2VRG.js

@@ -0,0 +1,279 @@
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-TEVGCTUN.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { Plus } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var speedDialContainerVariants = cva("relative inline-flex", {
+  variants: {
+    direction: {
+      up: "flex-col-reverse items-center",
+      down: "flex-col items-center",
+      left: "flex-row-reverse items-center",
+      right: "flex-row items-center",
+      "up-left": "flex-col-reverse items-end",
+      "up-right": "flex-col-reverse items-start",
+      "down-left": "flex-col items-end",
+      "down-right": "flex-col items-start"
+    }
+  },
+  defaultVariants: {
+    direction: "up"
+  }
+});
+var speedDialFabVariants = cva(
+  "inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-all duration-200 hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 z-10",
+  {
+    variants: {
+      size: {
+        sm: "size-12 [&_svg]:size-5",
+        default: "size-14 [&_svg]:size-6",
+        lg: "size-16 [&_svg]:size-7"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var speedDialActionVariants = cva(
+  "inline-flex items-center justify-center rounded-full bg-background text-foreground shadow-md border border-border transition-all duration-200 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "size-10 [&_svg]:size-4",
+        default: "size-11 [&_svg]:size-5",
+        lg: "size-12 [&_svg]:size-6"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var speedDialActionsVariants = cva(
+  "flex transition-all duration-200",
+  {
+    variants: {
+      direction: {
+        up: "flex-col-reverse gap-2 pb-2",
+        down: "flex-col gap-2 pt-2",
+        left: "flex-row-reverse gap-2 pr-2",
+        right: "flex-row gap-2 pl-2",
+        "up-left": "flex-col-reverse gap-2 pb-2",
+        "up-right": "flex-col-reverse gap-2 pb-2",
+        "down-left": "flex-col gap-2 pt-2",
+        "down-right": "flex-col gap-2 pt-2"
+      },
+      open: {
+        true: "opacity-100 visible",
+        false: "opacity-0 invisible pointer-events-none"
+      }
+    },
+    defaultVariants: {
+      direction: "up",
+      open: false
+    }
+  }
+);
+var speedDialActionItemVariants = cva(
+  "flex items-center gap-2 transition-all duration-200",
+  {
+    variants: {
+      direction: {
+        up: "flex-row",
+        down: "flex-row",
+        left: "flex-col",
+        right: "flex-col",
+        "up-left": "flex-row-reverse",
+        "up-right": "flex-row",
+        "down-left": "flex-row-reverse",
+        "down-right": "flex-row"
+      },
+      index: {
+        0: "transition-delay-[0ms]",
+        1: "transition-delay-[25ms]",
+        2: "transition-delay-[50ms]",
+        3: "transition-delay-[75ms]",
+        4: "transition-delay-[100ms]",
+        5: "transition-delay-[125ms]"
+      }
+    },
+    defaultVariants: {
+      direction: "up"
+    }
+  }
+);
+function SpeedDial({
+  actions,
+  direction = "up",
+  icon,
+  openIcon,
+  open: controlledOpen,
+  onOpenChange,
+  disabled = false,
+  size = "default",
+  tooltip,
+  showLabels = false,
+  mask = false,
+  className,
+  "aria-label": ariaLabel = "Open actions menu",
+  ...props
+}) {
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const isOpen = controlledOpen ?? internalOpen;
+  const handleToggle = React.useCallback(() => {
+    if (disabled) return;
+    const newOpen = !isOpen;
+    setInternalOpen(newOpen);
+    onOpenChange?.(newOpen);
+  }, [disabled, isOpen, onOpenChange]);
+  const handleClose = React.useCallback(() => {
+    setInternalOpen(false);
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+  const handleActionClick = React.useCallback(
+    (action) => {
+      if (action.disabled) return;
+      action.onClick?.();
+      handleClose();
+    },
+    [handleClose]
+  );
+  React.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && isOpen) {
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, handleClose]);
+  const fabIcon = isOpen ? openIcon ?? /* @__PURE__ */ jsx(Plus, { className: "transition-transform duration-200 rotate-45" }) : icon ?? /* @__PURE__ */ jsx(Plus, { className: "transition-transform duration-200" });
+  const renderActionButton = (action, index) => {
+    const button = /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn(
+          speedDialActionVariants({ size }),
+          action.className
+        ),
+        "aria-label": action.label,
+        "data-slot": "speed-dial-action",
+        disabled: action.disabled,
+        type: "button",
+        onClick: () => {
+          handleActionClick(action);
+        },
+        children: action.icon
+      }
+    );
+    if (showLabels) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            speedDialActionItemVariants({
+              direction,
+              index: Math.min(index, 5)
+            }),
+            !isOpen && "translate-y-2 opacity-0",
+            isOpen && "translate-y-0 opacity-100"
+          ),
+          children: [
+            button,
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-sm font-medium text-foreground whitespace-nowrap bg-background px-2 py-1 rounded shadow-sm border border-border",
+                "data-slot": "speed-dial-action-label",
+                children: action.label
+              }
+            )
+          ]
+        },
+        action.id
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          speedDialActionItemVariants({
+            direction,
+            index: Math.min(index, 5)
+          }),
+          !isOpen && "translate-y-2 opacity-0",
+          isOpen && "translate-y-0 opacity-100"
+        ),
+        children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: direction.includes("left") ? "left" : "right", children: action.label })
+        ] })
+      },
+      action.id
+    );
+  };
+  const fabButton = /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-expanded": isOpen,
+      "aria-haspopup": "menu",
+      "aria-label": ariaLabel,
+      className: cn(speedDialFabVariants({ size })),
+      "data-open": isOpen || void 0,
+      "data-slot": "speed-dial-fab",
+      disabled,
+      type: "button",
+      onClick: handleToggle,
+      children: fabIcon
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    mask && isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "fixed inset-0 bg-black/20 z-40 transition-opacity duration-200",
+        "data-slot": "speed-dial-mask",
+        onClick: handleClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          speedDialContainerVariants({ direction }),
+          mask && isOpen && "z-50",
+          className
+        ),
+        "data-direction": direction,
+        "data-open": isOpen || void 0,
+        "data-slot": "speed-dial",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(speedDialActionsVariants({ direction, open: isOpen })),
+              "data-slot": "speed-dial-actions",
+              role: "menu",
+              children: actions.map((action, index) => renderActionButton(action, index))
+            }
+          ),
+          tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: fabButton }),
+            /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+          ] }) : fabButton
+        ]
+      }
+    )
+  ] });
+}
+
+export { SpeedDial };
+//# sourceMappingURL=chunk-SXSR2VRG.js.map
+//# sourceMappingURL=chunk-SXSR2VRG.js.map

package/dist/chunk-SXSR2VRG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/SpeedDial/SpeedDial.variants.ts","../src/components/navigation/SpeedDial/SpeedDial.tsx"],"names":[],"mappings":"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","file":"chunk-SXSR2VRG.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * SpeedDial container variants\n */\nexport const speedDialContainerVariants = cva(\"relative inline-flex\", {\n  variants: {\n    direction: {\n      up: \"flex-col-reverse items-center\",\n      down: \"flex-col items-center\",\n      left: \"flex-row-reverse items-center\",\n      right: \"flex-row items-center\",\n      \"up-left\": \"flex-col-reverse items-end\",\n      \"up-right\": \"flex-col-reverse items-start\",\n      \"down-left\": \"flex-col items-end\",\n      \"down-right\": \"flex-col items-start\",\n    },\n  },\n  defaultVariants: {\n    direction: \"up\",\n  },\n})\n\n/**\n * SpeedDial main FAB button variants\n */\nexport const speedDialFabVariants = cva(\n  \"inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-all duration-200 hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 z-10\",\n  {\n    variants: {\n      size: {\n        sm: \"size-12 [&_svg]:size-5\",\n        default: \"size-14 [&_svg]:size-6\",\n        lg: \"size-16 [&_svg]:size-7\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\n/**\n * SpeedDial action button variants\n */\nexport const speedDialActionVariants = cva(\n  \"inline-flex items-center justify-center rounded-full bg-background text-foreground shadow-md border border-border transition-all duration-200 hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"size-10 [&_svg]:size-4\",\n        default: \"size-11 [&_svg]:size-5\",\n        lg: \"size-12 [&_svg]:size-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\n/**\n * SpeedDial actions container variants\n */\nexport const speedDialActionsVariants = cva(\n  \"flex transition-all duration-200\",\n  {\n    variants: {\n      direction: {\n        up: \"flex-col-reverse gap-2 pb-2\",\n        down: \"flex-col gap-2 pt-2\",\n        left: \"flex-row-reverse gap-2 pr-2\",\n        right: \"flex-row gap-2 pl-2\",\n        \"up-left\": \"flex-col-reverse gap-2 pb-2\",\n        \"up-right\": \"flex-col-reverse gap-2 pb-2\",\n        \"down-left\": \"flex-col gap-2 pt-2\",\n        \"down-right\": \"flex-col gap-2 pt-2\",\n      },\n      open: {\n        true: \"opacity-100 visible\",\n        false: \"opacity-0 invisible pointer-events-none\",\n      },\n    },\n    defaultVariants: {\n      direction: \"up\",\n      open: false,\n    },\n  }\n)\n\n/**\n * SpeedDial action item wrapper (for label positioning)\n */\nexport const speedDialActionItemVariants = cva(\n  \"flex items-center gap-2 transition-all duration-200\",\n  {\n    variants: {\n      direction: {\n        up: \"flex-row\",\n        down: \"flex-row\",\n        left: \"flex-col\",\n        right: \"flex-col\",\n        \"up-left\": \"flex-row-reverse\",\n        \"up-right\": \"flex-row\",\n        \"down-left\": \"flex-row-reverse\",\n        \"down-right\": \"flex-row\",\n      },\n      index: {\n        0: \"transition-delay-[0ms]\",\n        1: \"transition-delay-[25ms]\",\n        2: \"transition-delay-[50ms]\",\n        3: \"transition-delay-[75ms]\",\n        4: \"transition-delay-[100ms]\",\n        5: \"transition-delay-[125ms]\",\n      },\n    },\n    defaultVariants: {\n      direction: \"up\",\n    },\n  }\n)\n","\"use client\"\n\nimport type { SpeedDialProps } from \"./SpeedDial.types\"\n\nimport { Plus } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport {\n  speedDialActionItemVariants,\n  speedDialActionsVariants,\n  speedDialActionVariants,\n  speedDialContainerVariants,\n  speedDialFabVariants,\n} from \"./SpeedDial.variants\"\n\n/**\n * SpeedDial - A floating action button that expands to reveal multiple actions\n *\n * Inspired by PrimeVue's SpeedDial component. Provides quick access to\n * multiple related actions from a single FAB button.\n *\n * @example\n * ```tsx\n * <SpeedDial\n *   actions={[\n *     { id: \"edit\", icon: <Edit />, label: \"Edit\", onClick: handleEdit },\n *     { id: \"delete\", icon: <Trash />, label: \"Delete\", onClick: handleDelete },\n *     { id: \"share\", icon: <Share />, label: \"Share\", onClick: handleShare },\n *   ]}\n *   direction=\"up\"\n * />\n * ```\n */\nfunction SpeedDial({\n  actions,\n  direction = \"up\",\n  icon,\n  openIcon,\n  open: controlledOpen,\n  onOpenChange,\n  disabled = false,\n  size = \"default\",\n  tooltip,\n  showLabels = false,\n  mask = false,\n  className,\n  \"aria-label\": ariaLabel = \"Open actions menu\",\n  ...props\n}: SpeedDialProps) {\n  // Uncontrolled state\n  const [internalOpen, setInternalOpen] = React.useState(false)\n\n  // Use controlled or uncontrolled\n  const isOpen = controlledOpen ?? internalOpen\n\n  const handleToggle = React.useCallback(() => {\n    if (disabled) return\n    const newOpen = !isOpen\n    setInternalOpen(newOpen)\n    onOpenChange?.(newOpen)\n  }, [disabled, isOpen, onOpenChange])\n\n  const handleClose = React.useCallback(() => {\n    setInternalOpen(false)\n    onOpenChange?.(false)\n  }, [onOpenChange])\n\n  const handleActionClick = React.useCallback(\n    (action: SpeedDialProps[\"actions\"][number]) => {\n      if (action.disabled) return\n      action.onClick?.()\n      handleClose()\n    },\n    [handleClose]\n  )\n\n  // Handle escape key to close\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" && isOpen) {\n        handleClose()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    return () => { document.removeEventListener(\"keydown\", handleKeyDown) }\n  }, [isOpen, handleClose])\n\n  // Default icon with rotation when open\n  const fabIcon = isOpen\n    ? (openIcon ?? <Plus className=\"transition-transform duration-200 rotate-45\" />)\n    : (icon ?? <Plus className=\"transition-transform duration-200\" />)\n\n  // Wrap action button with tooltip if not showing labels\n  const renderActionButton = (\n    action: SpeedDialProps[\"actions\"][number],\n    index: number\n  ) => {\n    const button = (\n      <button\n        className={cn(\n          speedDialActionVariants({ size }),\n          action.className\n        )}\n        aria-label={action.label}\n        data-slot=\"speed-dial-action\"\n        disabled={action.disabled}\n        type=\"button\"\n        onClick={() => { handleActionClick(action) }}\n      >\n        {action.icon}\n      </button>\n    )\n\n    if (showLabels) {\n      return (\n        <div\n          key={action.id}\n          className={cn(\n            speedDialActionItemVariants({\n              direction,\n              index: Math.min(index, 5) as 0 | 1 | 2 | 3 | 4 | 5,\n            }),\n            !isOpen && \"translate-y-2 opacity-0\",\n            isOpen && \"translate-y-0 opacity-100\"\n          )}\n        >\n          {button}\n          <span\n            className=\"text-sm font-medium text-foreground whitespace-nowrap bg-background px-2 py-1 rounded shadow-sm border border-border\"\n            data-slot=\"speed-dial-action-label\"\n          >\n            {action.label}\n          </span>\n        </div>\n      )\n    }\n\n    return (\n      <div\n        key={action.id}\n        className={cn(\n          speedDialActionItemVariants({\n            direction,\n            index: Math.min(index, 5) as 0 | 1 | 2 | 3 | 4 | 5,\n          }),\n          !isOpen && \"translate-y-2 opacity-0\",\n          isOpen && \"translate-y-0 opacity-100\"\n        )}\n      >\n        <Tooltip>\n          <TooltipTrigger asChild>{button}</TooltipTrigger>\n          <TooltipContent side={direction.includes(\"left\") ? \"left\" : \"right\"}>\n            {action.label}\n          </TooltipContent>\n        </Tooltip>\n      </div>\n    )\n  }\n\n  const fabButton = (\n    <button\n      aria-expanded={isOpen}\n      aria-haspopup=\"menu\"\n      aria-label={ariaLabel}\n      className={cn(speedDialFabVariants({ size }))}\n      data-open={isOpen || undefined}\n      data-slot=\"speed-dial-fab\"\n      disabled={disabled}\n      type=\"button\"\n      onClick={handleToggle}\n    >\n      {fabIcon}\n    </button>\n  )\n\n  return (\n    <>\n      {/* Mask overlay */}\n      {mask && isOpen && (\n        <div\n          aria-hidden=\"true\"\n          className=\"fixed inset-0 bg-black/20 z-40 transition-opacity duration-200\"\n          data-slot=\"speed-dial-mask\"\n          onClick={handleClose}\n        />\n      )}\n\n      <div\n        className={cn(\n          speedDialContainerVariants({ direction }),\n          mask && isOpen && \"z-50\",\n          className\n        )}\n        data-direction={direction}\n        data-open={isOpen || undefined}\n        data-slot=\"speed-dial\"\n        {...props}\n      >\n        {/* Actions */}\n        <div\n          className={cn(speedDialActionsVariants({ direction, open: isOpen }))}\n          data-slot=\"speed-dial-actions\"\n          role=\"menu\"\n        >\n          {actions.map((action, index) => renderActionButton(action, index))}\n        </div>\n\n        {/* Main FAB */}\n        {tooltip ? (\n          <Tooltip>\n            <TooltipTrigger asChild>{fabButton}</TooltipTrigger>\n            <TooltipContent>{tooltip}</TooltipContent>\n          </Tooltip>\n        ) : (\n          fabButton\n        )}\n      </div>\n    </>\n  )\n}\n\nexport { SpeedDial }\n"]}

package/dist/chunk-T3LWBCVR.js

@@ -0,0 +1,109 @@
+import { cva } from 'class-variance-authority';
+
+// src/components/forms/TextInput/TextInput.variants.ts
+var inputVariants = cva(
+  // Base styles
+  [
+    "w-full min-w-0 rounded-[var(--input-radius)] border transition-[color,box-shadow] outline-none",
+    "bg-[color:var(--input-bg-default)] text-[color:var(--input-fg-default)] border-[color:var(--input-border-default)]",
+    "file:text-[color:var(--input-fg-default)] placeholder:text-[color:var(--input-fg-placeholder)]",
+    "selection:bg-primary selection:text-primary-foreground",
+    "dark:bg-input",
+    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-[color:var(--input-bg-disabled)] disabled:text-[color:var(--input-fg-disabled)]",
+    "hover:border-[color:var(--border-semantic-strong)]",
+    "focus-visible:border-[color:var(--input-border-focus)] focus-visible:ring-[color:var(--input-border-focus)]/20 focus-visible:ring-4",
+    "aria-invalid:ring-[color:var(--input-border-error)]/20 dark:aria-invalid:ring-[color:var(--input-border-error)]/40 aria-invalid:border-[color:var(--input-border-error)]"
+  ],
+  {
+    variants: {
+      size: {
+        xs: "h-[var(--input-size-xs-h)] px-[var(--input-size-xs-px)] py-[var(--input-size-xs-py)] text-[length:var(--input-size-xs-text)]",
+        sm: "h-[var(--input-size-sm-h)] px-[var(--input-size-sm-px)] py-[var(--input-size-sm-py)] text-[length:var(--input-size-sm-text)]",
+        md: "h-[var(--input-size-md-h)] px-[var(--input-size-md-px)] py-[var(--input-size-md-py)] text-[length:var(--input-size-md-text)]",
+        lg: "h-[var(--input-size-lg-h)] px-[var(--input-size-lg-px)] py-[var(--input-size-lg-py)] text-[length:var(--input-size-lg-text)]",
+        xl: "h-[var(--input-size-xl-h)] px-[var(--input-size-xl-px)] py-[var(--input-size-xl-py)] text-[length:var(--input-size-xl-text)]"
+      },
+      variant: {
+        default: "shadow-xs",
+        filled: "border-transparent bg-muted",
+        flushed: "rounded-none border-x-0 border-t-0 border-b-[color:var(--input-border-default)] px-0",
+        unstyled: "border-0 bg-transparent shadow-none focus-visible:ring-0"
+      },
+      hasLeadingIcon: {
+        true: "",
+        false: ""
+      },
+      hasTrailingIcon: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      // Unstyled without icons should have no padding
+      { variant: "unstyled", hasLeadingIcon: false, hasTrailingIcon: false, className: "p-0" },
+      // Leading icon padding adjustments
+      { size: "xs", hasLeadingIcon: true, className: "pl-[var(--input-icon-padding-xs)]" },
+      { size: "sm", hasLeadingIcon: true, className: "pl-[var(--input-icon-padding-sm)]" },
+      { size: "md", hasLeadingIcon: true, className: "pl-[var(--input-icon-padding-md)]" },
+      { size: "lg", hasLeadingIcon: true, className: "pl-[var(--input-icon-padding-lg)]" },
+      { size: "xl", hasLeadingIcon: true, className: "pl-[var(--input-icon-padding-xl)]" },
+      // Trailing icon padding adjustments
+      { size: "xs", hasTrailingIcon: true, className: "pr-[var(--input-icon-padding-xs)]" },
+      { size: "sm", hasTrailingIcon: true, className: "pr-[var(--input-icon-padding-sm)]" },
+      { size: "md", hasTrailingIcon: true, className: "pr-[var(--input-icon-padding-md)]" },
+      { size: "lg", hasTrailingIcon: true, className: "pr-[var(--input-icon-padding-lg)]" },
+      { size: "xl", hasTrailingIcon: true, className: "pr-[var(--input-icon-padding-xl)]" }
+    ],
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+      hasLeadingIcon: false,
+      hasTrailingIcon: false
+    }
+  }
+);
+var inputWrapperVariants = cva("relative w-full");
+var inputIconVariants = cva(
+  "absolute top-1/2 -translate-y-1/2 flex items-center justify-center text-[color:var(--input-fg-icon)]",
+  {
+    variants: {
+      position: {
+        leading: "left-0",
+        trailing: "right-0"
+      },
+      size: {
+        xs: "size-[var(--input-icon-size-xs)]",
+        sm: "size-[var(--input-icon-size-sm)]",
+        md: "size-[var(--input-icon-size-md)]",
+        lg: "size-[var(--input-icon-size-lg)]",
+        xl: "size-[var(--input-icon-size-xl)]"
+      },
+      interactive: {
+        true: "pointer-events-auto",
+        false: "pointer-events-none"
+      }
+    },
+    compoundVariants: [
+      // Leading icon position adjustments
+      { position: "leading", size: "xs", className: "left-[var(--input-icon-position-xs)]" },
+      { position: "leading", size: "sm", className: "left-[var(--input-icon-position-sm)]" },
+      { position: "leading", size: "md", className: "left-[var(--input-icon-position-md)]" },
+      { position: "leading", size: "lg", className: "left-[var(--input-icon-position-lg)]" },
+      { position: "leading", size: "xl", className: "left-[var(--input-icon-position-xl)]" },
+      // Trailing icon position adjustments
+      { position: "trailing", size: "xs", className: "right-[var(--input-icon-position-xs)]" },
+      { position: "trailing", size: "sm", className: "right-[var(--input-icon-position-sm)]" },
+      { position: "trailing", size: "md", className: "right-[var(--input-icon-position-md)]" },
+      { position: "trailing", size: "lg", className: "right-[var(--input-icon-position-lg)]" },
+      { position: "trailing", size: "xl", className: "right-[var(--input-icon-position-xl)]" }
+    ],
+    defaultVariants: {
+      position: "leading",
+      size: "md"
+    }
+  }
+);
+
+export { inputIconVariants, inputVariants, inputWrapperVariants };
+//# sourceMappingURL=chunk-T3LWBCVR.js.map
+//# sourceMappingURL=chunk-T3LWBCVR.js.map

package/dist/chunk-T3LWBCVR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/TextInput/TextInput.variants.ts"],"names":[],"mappings":"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","file":"chunk-T3LWBCVR.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Input variant styles using CVA\n */\nexport const inputVariants = cva(\n  // Base styles\n  [\n    \"w-full min-w-0 rounded-[var(--input-radius)] border transition-[color,box-shadow] outline-none\",\n    \"bg-[color:var(--input-bg-default)] text-[color:var(--input-fg-default)] border-[color:var(--input-border-default)]\",\n    \"file:text-[color:var(--input-fg-default)] placeholder:text-[color:var(--input-fg-placeholder)]\",\n    \"selection:bg-primary selection:text-primary-foreground\",\n    \"dark:bg-input\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-[color:var(--input-bg-disabled)] disabled:text-[color:var(--input-fg-disabled)]\",\n    \"hover:border-[color:var(--border-semantic-strong)]\",\n    \"focus-visible:border-[color:var(--input-border-focus)] focus-visible:ring-[color:var(--input-border-focus)]/20 focus-visible:ring-4\",\n    \"aria-invalid:ring-[color:var(--input-border-error)]/20 dark:aria-invalid:ring-[color:var(--input-border-error)]/40 aria-invalid:border-[color:var(--input-border-error)]\",\n  ],\n  {\n    variants: {\n      size: {\n        xs: \"h-[var(--input-size-xs-h)] px-[var(--input-size-xs-px)] py-[var(--input-size-xs-py)] text-[length:var(--input-size-xs-text)]\",\n        sm: \"h-[var(--input-size-sm-h)] px-[var(--input-size-sm-px)] py-[var(--input-size-sm-py)] text-[length:var(--input-size-sm-text)]\",\n        md: \"h-[var(--input-size-md-h)] px-[var(--input-size-md-px)] py-[var(--input-size-md-py)] text-[length:var(--input-size-md-text)]\",\n        lg: \"h-[var(--input-size-lg-h)] px-[var(--input-size-lg-px)] py-[var(--input-size-lg-py)] text-[length:var(--input-size-lg-text)]\",\n        xl: \"h-[var(--input-size-xl-h)] px-[var(--input-size-xl-px)] py-[var(--input-size-xl-py)] text-[length:var(--input-size-xl-text)]\",\n      },\n      variant: {\n        default: \"shadow-xs\",\n        filled: \"border-transparent bg-muted\",\n        flushed: \"rounded-none border-x-0 border-t-0 border-b-[color:var(--input-border-default)] px-0\",\n        unstyled: \"border-0 bg-transparent shadow-none focus-visible:ring-0\",\n      },\n      hasLeadingIcon: {\n        true: \"\",\n        false: \"\",\n      },\n      hasTrailingIcon: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      // Unstyled without icons should have no padding\n      { variant: \"unstyled\", hasLeadingIcon: false, hasTrailingIcon: false, className: \"p-0\" },\n      // Leading icon padding adjustments\n      { size: \"xs\", hasLeadingIcon: true, className: \"pl-[var(--input-icon-padding-xs)]\" },\n      { size: \"sm\", hasLeadingIcon: true, className: \"pl-[var(--input-icon-padding-sm)]\" },\n      { size: \"md\", hasLeadingIcon: true, className: \"pl-[var(--input-icon-padding-md)]\" },\n      { size: \"lg\", hasLeadingIcon: true, className: \"pl-[var(--input-icon-padding-lg)]\" },\n      { size: \"xl\", hasLeadingIcon: true, className: \"pl-[var(--input-icon-padding-xl)]\" },\n      // Trailing icon padding adjustments\n      { size: \"xs\", hasTrailingIcon: true, className: \"pr-[var(--input-icon-padding-xs)]\" },\n      { size: \"sm\", hasTrailingIcon: true, className: \"pr-[var(--input-icon-padding-sm)]\" },\n      { size: \"md\", hasTrailingIcon: true, className: \"pr-[var(--input-icon-padding-md)]\" },\n      { size: \"lg\", hasTrailingIcon: true, className: \"pr-[var(--input-icon-padding-lg)]\" },\n      { size: \"xl\", hasTrailingIcon: true, className: \"pr-[var(--input-icon-padding-xl)]\" },\n    ],\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n      hasLeadingIcon: false,\n      hasTrailingIcon: false,\n    },\n  }\n)\n\n/**\n * Input wrapper styles for when icons are present\n */\nexport const inputWrapperVariants = cva(\"relative w-full\")\n\n/**\n * Input icon styles using CVA\n */\nexport const inputIconVariants = cva(\n  \"absolute top-1/2 -translate-y-1/2 flex items-center justify-center text-[color:var(--input-fg-icon)]\",\n  {\n    variants: {\n      position: {\n        leading: \"left-0\",\n        trailing: \"right-0\",\n      },\n      size: {\n        xs: \"size-[var(--input-icon-size-xs)]\",\n        sm: \"size-[var(--input-icon-size-sm)]\",\n        md: \"size-[var(--input-icon-size-md)]\",\n        lg: \"size-[var(--input-icon-size-lg)]\",\n        xl: \"size-[var(--input-icon-size-xl)]\",\n      },\n      interactive: {\n        true: \"pointer-events-auto\",\n        false: \"pointer-events-none\",\n      },\n    },\n    compoundVariants: [\n      // Leading icon position adjustments\n      { position: \"leading\", size: \"xs\", className: \"left-[var(--input-icon-position-xs)]\" },\n      { position: \"leading\", size: \"sm\", className: \"left-[var(--input-icon-position-sm)]\" },\n      { position: \"leading\", size: \"md\", className: \"left-[var(--input-icon-position-md)]\" },\n      { position: \"leading\", size: \"lg\", className: \"left-[var(--input-icon-position-lg)]\" },\n      { position: \"leading\", size: \"xl\", className: \"left-[var(--input-icon-position-xl)]\" },\n      // Trailing icon position adjustments\n      { position: \"trailing\", size: \"xs\", className: \"right-[var(--input-icon-position-xs)]\" },\n      { position: \"trailing\", size: \"sm\", className: \"right-[var(--input-icon-position-sm)]\" },\n      { position: \"trailing\", size: \"md\", className: \"right-[var(--input-icon-position-md)]\" },\n      { position: \"trailing\", size: \"lg\", className: \"right-[var(--input-icon-position-lg)]\" },\n      { position: \"trailing\", size: \"xl\", className: \"right-[var(--input-icon-position-xl)]\" },\n    ],\n    defaultVariants: {\n      position: \"leading\",\n      size: \"md\",\n    },\n  }\n)\n\nexport type InputVariantProps = VariantProps<typeof inputVariants>\nexport type InputIconVariantProps = VariantProps<typeof inputIconVariants>\n"]}