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

package/dist/chunk-YZY35OHQ.js

@@ -0,0 +1,279 @@
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.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-YZY35OHQ.js.map
+//# sourceMappingURL=chunk-YZY35OHQ.js.map

package/dist/chunk-YZY35OHQ.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-YZY35OHQ.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"]}