@karakuri-ui/react 0.2.3 → 0.3.0

package/dist/components/ui/modal.mjs

@@ -0,0 +1,313 @@
+"use client";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    className,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true"
+  },
+  /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
+);
+const ModalStyleContext = React.createContext({
+  scrollBehavior: "outside"
+});
+function Modal(props) {
+  return /* @__PURE__ */ React.createElement(DialogPrimitive.Root, { ...props });
+}
+const ModalTrigger = DialogPrimitive.Trigger;
+const ModalPortal = DialogPrimitive.Portal;
+const ModalClose = DialogPrimitive.Close;
+const ModalOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-overlay bg-black/50",
+      "data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit",
+      className
+    ),
+    ...props
+  }
+));
+ModalOverlay.displayName = "ModalOverlay";
+const modalContentVariants = cva("", {
+  variants: {
+    size: {
+      xs: "max-w-[360px]",
+      // 360px — simple confirmation
+      sm: "max-w-[480px]",
+      // 480px — standard (default)
+      md: "max-w-[600px]",
+      // 600px — standard form
+      lg: "max-w-[760px]",
+      // 760px — complex form
+      xl: "max-w-[960px]",
+      // 960px — table, dashboard
+      full: "max-w-none"
+      // full width (constrained by wrapper padding)
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+const ModalContent = React.forwardRef(({ className, children, size = "sm", scrollBehavior = "outside", showCloseButton = true, closeIcon, ...props }, ref) => {
+  const isInside = scrollBehavior === "inside";
+  const isFull = size === "full";
+  const useInsideScroll = isInside || isFull;
+  const closeButton = showCloseButton && /* @__PURE__ */ React.createElement(DialogPrimitive.Close, { className: cn(
+    "absolute right-4 top-4 rounded-md p-1",
+    "text-text-muted hover:text-foreground",
+    "transition-colors duration-fast",
+    "focus-visible:focus-ring focus-visible:outline-none",
+    "disabled:pointer-events-none"
+  ) }, closeIcon || /* @__PURE__ */ React.createElement(DefaultCloseIcon, { className: "icon-sm" }), /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Close"));
+  if (!useInsideScroll) {
+    return /* @__PURE__ */ React.createElement(ModalPortal, null, /* @__PURE__ */ React.createElement(ModalOverlay, null), /* @__PURE__ */ React.createElement(ModalStyleContext.Provider, { value: { scrollBehavior: "outside" } }, /* @__PURE__ */ React.createElement(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "fixed inset-0 z-modal overflow-y-auto",
+          "focus:outline-none",
+          "data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit"
+        ),
+        ...props
+      },
+      /* @__PURE__ */ React.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React.createElement("div", { className: "flex min-h-full items-center justify-center p-4" }, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: cn(
+            "relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden",
+            modalContentVariants({ size }),
+            className
+          ),
+          onClick: (e) => e.stopPropagation()
+        },
+        children,
+        closeButton
+      )))
+    )));
+  }
+  return /* @__PURE__ */ React.createElement(ModalPortal, null, /* @__PURE__ */ React.createElement(ModalOverlay, null), /* @__PURE__ */ React.createElement(ModalStyleContext.Provider, { value: { scrollBehavior: "inside" } }, /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-modal flex items-center justify-center p-4" }, /* @__PURE__ */ React.createElement(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden",
+        "focus:outline-none",
+        "data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit",
+        modalContentVariants({ size }),
+        isInside && "flex flex-col max-h-[85vh]",
+        isFull && "flex flex-col h-full",
+        className
+      ),
+      ...props
+    },
+    children,
+    closeButton
+  ))));
+});
+ModalContent.displayName = "ModalContent";
+const ModalHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col gap-1.5 p-6 pb-0", className),
+    ...props
+  }
+));
+ModalHeader.displayName = "ModalHeader";
+const ModalTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+ModalTitle.displayName = "ModalTitle";
+const ModalDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-md text-text-muted", className),
+    ...props
+  }
+));
+ModalDescription.displayName = "ModalDescription";
+const ModalBody = React.forwardRef(({ className, ...props }, ref) => {
+  const { scrollBehavior } = React.useContext(ModalStyleContext);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cn(
+        "p-6",
+        scrollBehavior === "inside" && "flex-1 overflow-y-auto",
+        className
+      ),
+      ...props
+    }
+  );
+});
+ModalBody.displayName = "ModalBody";
+const ModalFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex items-center justify-end gap-3 p-6 pt-0",
+      className
+    ),
+    ...props
+  }
+));
+ModalFooter.displayName = "ModalFooter";
+const AlertModal = AlertDialogPrimitive.Root;
+const AlertModalTrigger = AlertDialogPrimitive.Trigger;
+const AlertModalPortal = AlertDialogPrimitive.Portal;
+const AlertModalOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  AlertDialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-overlay bg-black/50",
+      "data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit",
+      className
+    ),
+    ...props
+  }
+));
+AlertModalOverlay.displayName = "AlertModalOverlay";
+const alertModalContentVariants = cva("", {
+  variants: {
+    size: {
+      xs: "max-w-[360px]",
+      // 360px
+      sm: "max-w-[480px]"
+      // 480px (default)
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+const AlertModalContent = React.forwardRef(({ className, children, size = "sm", ...props }, ref) => /* @__PURE__ */ React.createElement(AlertModalPortal, null, /* @__PURE__ */ React.createElement(AlertModalOverlay, null), /* @__PURE__ */ React.createElement("div", { className: "fixed inset-0 z-modal flex items-center justify-center p-4" }, /* @__PURE__ */ React.createElement(
+  AlertDialogPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative w-full rounded-xl bg-background text-foreground shadow-xl",
+      "focus:outline-none",
+      "data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit",
+      alertModalContentVariants({ size }),
+      className
+    ),
+    ...props
+  },
+  children
+))));
+AlertModalContent.displayName = "AlertModalContent";
+const AlertModalHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col gap-1.5 p-6 pb-0", className),
+    ...props
+  }
+));
+AlertModalHeader.displayName = "AlertModalHeader";
+const AlertModalTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  AlertDialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+AlertModalTitle.displayName = "AlertModalTitle";
+const AlertModalDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  AlertDialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-md text-text-muted", className),
+    ...props
+  }
+));
+AlertModalDescription.displayName = "AlertModalDescription";
+const AlertModalBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    className: cn("p-6", className),
+    ...props
+  }
+));
+AlertModalBody.displayName = "AlertModalBody";
+const AlertModalFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex items-center justify-end gap-3 p-6 pt-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertModalFooter.displayName = "AlertModalFooter";
+const AlertModalAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  AlertDialogPrimitive.Action,
+  {
+    ref,
+    className,
+    ...props
+  }
+));
+AlertModalAction.displayName = "AlertModalAction";
+const AlertModalCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    className,
+    ...props
+  }
+));
+AlertModalCancel.displayName = "AlertModalCancel";
+export {
+  AlertModal,
+  AlertModalAction,
+  AlertModalBody,
+  AlertModalCancel,
+  AlertModalContent,
+  AlertModalDescription,
+  AlertModalFooter,
+  AlertModalHeader,
+  AlertModalOverlay,
+  AlertModalPortal,
+  AlertModalTitle,
+  AlertModalTrigger,
+  Modal,
+  ModalBody,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  ModalPortal,
+  ModalTitle,
+  ModalTrigger,
+  alertModalContentVariants,
+  modalContentVariants
+};
+//# sourceMappingURL=modal.mjs.map

package/dist/components/ui/modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/modal.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n  <svg\n    className={className}\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    stroke=\"currentColor\"\n    strokeWidth={2}\n    aria-hidden=\"true\"\n  >\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\n// ─── Style Context ──────────────────────────────────────────\ntype ModalStyleContextValue = {\n  scrollBehavior: 'inside' | 'outside'\n}\nconst ModalStyleContext = React.createContext<ModalStyleContextValue>({\n  scrollBehavior: 'outside',\n})\n\n// ═══════════════════════════════════════════════════════════════\n// Modal (Dialog)\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Modal (Root) — wrapper to keep our own component identity separate from DialogPrimitive.Root ──\nfunction Modal(props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root {...props} />\n}\n\n// ─── ModalTrigger ───────────────────────────────────────────\nconst ModalTrigger = DialogPrimitive.Trigger\n\n// ─── ModalPortal ────────────────────────────────────────────\nconst ModalPortal = DialogPrimitive.Portal\n\n// ─── ModalClose ─────────────────────────────────────────────\nconst ModalClose = DialogPrimitive.Close\n\n// ─── ModalOverlay ───────────────────────────────────────────\nconst ModalOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-overlay bg-black/50',\n      'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n      className\n    )}\n    {...props}\n  />\n))\nModalOverlay.displayName = 'ModalOverlay'\n\n// ─── ModalContent ───────────────────────────────────────────\nconst modalContentVariants = cva('', {\n  variants: {\n    size: {\n      xs: 'max-w-[360px]',   // 360px — simple confirmation\n      sm: 'max-w-[480px]',   // 480px — standard (default)\n      md: 'max-w-[600px]',   // 600px — standard form\n      lg: 'max-w-[760px]',   // 760px — complex form\n      xl: 'max-w-[960px]',   // 960px — table, dashboard\n      full: 'max-w-none',    // full width (constrained by wrapper padding)\n    },\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n\nexport interface ModalContentProps\n  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n    VariantProps<typeof modalContentVariants> {\n  /** Scroll behavior when content overflows */\n  scrollBehavior?: 'inside' | 'outside'\n  /** Show built-in close button */\n  showCloseButton?: boolean\n  /** Custom close icon (replaces default X) */\n  closeIcon?: React.ReactNode\n}\n\nconst ModalContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  ModalContentProps\n>(({ className, children, size = 'sm', scrollBehavior = 'outside', showCloseButton = true, closeIcon, ...props }, ref) => {\n  const isInside = scrollBehavior === 'inside'\n  const isFull = size === 'full'\n  const useInsideScroll = isInside || isFull\n\n  const closeButton = showCloseButton && (\n    <DialogPrimitive.Close className={cn(\n      'absolute right-4 top-4 rounded-md p-1',\n      'text-text-muted hover:text-foreground',\n      'transition-colors duration-fast',\n      'focus-visible:focus-ring focus-visible:outline-none',\n      'disabled:pointer-events-none'\n    )}>\n      {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n      <span className=\"sr-only\">Close</span>\n    </DialogPrimitive.Close>\n  )\n\n  if (!useInsideScroll) {\n    // Outside scroll: DialogPrimitive.Content becomes the full-screen scrollable container.\n    // Radix's internal RemoveScroll detects its own root element as scrollable,\n    // allowing wheel/touch scroll events to pass through correctly.\n    return (\n      <ModalPortal>\n        <ModalOverlay />\n        <ModalStyleContext.Provider value={{ scrollBehavior: 'outside' }}>\n          <DialogPrimitive.Content\n            ref={ref}\n            className={cn(\n              'fixed inset-0 z-modal overflow-y-auto',\n              'focus:outline-none',\n              'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n            )}\n            {...props}\n          >\n            {/* Backdrop click area: closes dialog when clicking outside the panel */}\n            <DialogPrimitive.Close asChild>\n              <div className=\"flex min-h-full items-center justify-center p-4\">\n                <div\n                  className={cn(\n                    'relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden',\n                    modalContentVariants({ size }),\n                    className,\n                  )}\n                  onClick={(e) => e.stopPropagation()}\n                >\n                  {children}\n                  {closeButton}\n                </div>\n              </div>\n            </DialogPrimitive.Close>\n          </DialogPrimitive.Content>\n        </ModalStyleContext.Provider>\n      </ModalPortal>\n    )\n  }\n\n  // Inside scroll / full: DialogPrimitive.Content is the visual modal panel.\n  return (\n    <ModalPortal>\n      <ModalOverlay />\n      <ModalStyleContext.Provider value={{ scrollBehavior: 'inside' }}>\n        <div className=\"fixed inset-0 z-modal flex items-center justify-center p-4\">\n          <DialogPrimitive.Content\n            ref={ref}\n            className={cn(\n              'relative w-full rounded-xl bg-background text-foreground shadow-xl overflow-hidden',\n              'focus:outline-none',\n              'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n              modalContentVariants({ size }),\n              isInside && 'flex flex-col max-h-[85vh]',\n              isFull && 'flex flex-col h-full',\n              className,\n            )}\n            {...props}\n          >\n            {children}\n            {closeButton}\n          </DialogPrimitive.Content>\n        </div>\n      </ModalStyleContext.Provider>\n    </ModalPortal>\n  )\n})\nModalContent.displayName = 'ModalContent'\n\n// ─── ModalHeader ────────────────────────────────────────────\nconst ModalHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n    {...props}\n  />\n))\nModalHeader.displayName = 'ModalHeader'\n\n// ─── ModalTitle ─────────────────────────────────────────────\nconst ModalTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold text-foreground', className)}\n    {...props}\n  />\n))\nModalTitle.displayName = 'ModalTitle'\n\n// ─── ModalDescription ───────────────────────────────────────\nconst ModalDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-md text-text-muted', className)}\n    {...props}\n  />\n))\nModalDescription.displayName = 'ModalDescription'\n\n// ─── ModalBody ──────────────────────────────────────────────\nconst ModalBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  const { scrollBehavior } = React.useContext(ModalStyleContext)\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'p-6',\n        scrollBehavior === 'inside' && 'flex-1 overflow-y-auto',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nModalBody.displayName = 'ModalBody'\n\n// ─── ModalFooter ────────────────────────────────────────────\nconst ModalFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-end gap-3 p-6 pt-0',\n      className\n    )}\n    {...props}\n  />\n))\nModalFooter.displayName = 'ModalFooter'\n\n// ═══════════════════════════════════════════════════════════════\n// AlertModal (AlertDialog)\n// ═══════════════════════════════════════════════════════════════\n\n// ─── AlertModal (Root) ──────────────────────────────────────\nconst AlertModal = AlertDialogPrimitive.Root\n\n// ─── AlertModalTrigger ──────────────────────────────────────\nconst AlertModalTrigger = AlertDialogPrimitive.Trigger\n\n// ─── AlertModalPortal ───────────────────────────────────────\nconst AlertModalPortal = AlertDialogPrimitive.Portal\n\n// ─── AlertModalOverlay ──────────────────────────────────────\nconst AlertModalOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-overlay bg-black/50',\n      'data-[state=open]:animate-modal-overlay-enter data-[state=closed]:animate-modal-overlay-exit',\n      className\n    )}\n    {...props}\n  />\n))\nAlertModalOverlay.displayName = 'AlertModalOverlay'\n\n// ─── AlertModalContent ──────────────────────────────────────\nconst alertModalContentVariants = cva('', {\n  variants: {\n    size: {\n      xs: 'max-w-[360px]',  // 360px\n      sm: 'max-w-[480px]',  // 480px (default)\n    },\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n\nexport interface AlertModalContentProps\n  extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>,\n    VariantProps<typeof alertModalContentVariants> {}\n\nconst AlertModalContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertModalContentProps\n>(({ className, children, size = 'sm', ...props }, ref) => (\n  <AlertModalPortal>\n    <AlertModalOverlay />\n    <div className=\"fixed inset-0 z-modal flex items-center justify-center p-4\">\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          'relative w-full rounded-xl bg-background text-foreground shadow-xl',\n          'focus:outline-none',\n          'data-[state=open]:animate-modal-content-enter data-[state=closed]:animate-modal-content-exit',\n          alertModalContentVariants({ size }),\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </AlertDialogPrimitive.Content>\n    </div>\n  </AlertModalPortal>\n))\nAlertModalContent.displayName = 'AlertModalContent'\n\n// ─── AlertModalHeader ───────────────────────────────────────\nconst AlertModalHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col gap-1.5 p-6 pb-0', className)}\n    {...props}\n  />\n))\nAlertModalHeader.displayName = 'AlertModalHeader'\n\n// ─── AlertModalTitle ────────────────────────────────────────\nconst AlertModalTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn('text-lg font-semibold text-foreground', className)}\n    {...props}\n  />\n))\nAlertModalTitle.displayName = 'AlertModalTitle'\n\n// ─── AlertModalDescription ──────────────────────────────────\nconst AlertModalDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn('text-md text-text-muted', className)}\n    {...props}\n  />\n))\nAlertModalDescription.displayName = 'AlertModalDescription'\n\n// ─── AlertModalBody ─────────────────────────────────────────\nconst AlertModalBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('p-6', className)}\n    {...props}\n  />\n))\nAlertModalBody.displayName = 'AlertModalBody'\n\n// ─── AlertModalFooter ───────────────────────────────────────\nconst AlertModalFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center justify-end gap-3 p-6 pt-0',\n      className\n    )}\n    {...props}\n  />\n))\nAlertModalFooter.displayName = 'AlertModalFooter'\n\n// ─── AlertModalAction ───────────────────────────────────────\nconst AlertModalAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={className}\n    {...props}\n  />\n))\nAlertModalAction.displayName = 'AlertModalAction'\n\n// ─── AlertModalCancel ───────────────────────────────────────\nconst AlertModalCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={className}\n    {...props}\n  />\n))\nAlertModalCancel.displayName = 'AlertModalCancel'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n  Modal,\n  ModalTrigger,\n  ModalPortal,\n  ModalOverlay,\n  ModalContent,\n  ModalHeader,\n  ModalTitle,\n  ModalDescription,\n  ModalBody,\n  ModalFooter,\n  ModalClose,\n  modalContentVariants,\n  AlertModal,\n  AlertModalTrigger,\n  AlertModalPortal,\n  AlertModalOverlay,\n  AlertModalContent,\n  AlertModalHeader,\n  AlertModalTitle,\n  AlertModalDescription,\n  AlertModalBody,\n  AlertModalFooter,\n  AlertModalAction,\n  AlertModalCancel,\n  alertModalContentVariants,\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/navigation-menu.d.mts

@@ -0,0 +1,120 @@
+import * as React from 'react';
+
+type NavigationMenuRadius = 'sm' | 'md' | 'lg' | 'xl';
+declare const navigationMenuSizeMap: {
+    readonly sm: {
+        readonly trigger: "h-8 text-sm px-3 gap-2";
+        readonly link: "h-8 text-sm px-3 gap-2";
+        readonly icon: "icon-xs";
+        readonly collapsedSquare: "size-8";
+        readonly collapsedWidth: 56;
+        readonly dropdownLink: "px-3 py-1.5 text-sm gap-2";
+        readonly subLink: "h-8 text-sm pl-8 pr-3 gap-2";
+        readonly groupLabel: "text-2xs px-3 mb-1";
+        readonly groupMargin: "mt-4 first:mt-0";
+    };
+    readonly md: {
+        readonly trigger: "h-9 text-md px-3.5 gap-2";
+        readonly link: "h-9 text-md px-3.5 gap-2";
+        readonly icon: "icon-sm";
+        readonly collapsedSquare: "size-9";
+        readonly collapsedWidth: 60;
+        readonly dropdownLink: "px-3 py-1.5 text-md gap-2";
+        readonly subLink: "h-9 text-md pl-9 pr-3.5 gap-2";
+        readonly groupLabel: "text-xs px-3.5 mb-1";
+        readonly groupMargin: "mt-4 first:mt-0";
+    };
+    readonly default: {
+        readonly trigger: "h-10 text-md px-4 gap-2";
+        readonly link: "h-10 text-md px-4 gap-2";
+        readonly icon: "icon-sm";
+        readonly collapsedSquare: "size-10";
+        readonly collapsedWidth: 64;
+        readonly dropdownLink: "px-3 py-2 text-md gap-2";
+        readonly subLink: "h-10 text-md pl-10 pr-4 gap-2";
+        readonly groupLabel: "text-xs px-4 mb-1.5";
+        readonly groupMargin: "mt-5 first:mt-0";
+    };
+    readonly lg: {
+        readonly trigger: "h-12 text-base px-6 gap-2";
+        readonly link: "h-12 text-base px-6 gap-2";
+        readonly icon: "icon-sm";
+        readonly collapsedSquare: "size-12";
+        readonly collapsedWidth: 72;
+        readonly dropdownLink: "px-3 py-2.5 text-base gap-2";
+        readonly subLink: "h-12 text-base pl-12 pr-6 gap-2";
+        readonly groupLabel: "text-xs px-4 mb-2";
+        readonly groupMargin: "mt-6 first:mt-0";
+    };
+};
+interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {
+    /** Layout orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Size of the menu items */
+    size?: 'sm' | 'md' | 'default' | 'lg';
+    /** Vertical only: show icons only (collapsed sidebar) */
+    collapsed?: boolean;
+    /** Vertical only: sidebar width (default: 256px / 16rem) */
+    width?: number | string;
+    /** Vertical only: collapsed sidebar width (default: 64px / 4rem) */
+    collapsedWidth?: number | string;
+    /** Border radius for dropdown content and items */
+    radius?: NavigationMenuRadius;
+    /** Font weight for menu items (default: normal, active items always use semibold) */
+    fontWeight?: 'normal' | 'semibold';
+    /** Horizontal only: delay before hover opens in ms */
+    delayDuration?: number;
+    /** Horizontal only: skip delay when moving between triggers */
+    skipDelayDuration?: number;
+    /** Controlled active menu item value */
+    value?: string;
+    /** Default active menu item value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when active item changes */
+    onValueChange?: (value: string) => void;
+}
+declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;
+interface NavigationMenuListProps extends React.HTMLAttributes<HTMLUListElement> {
+}
+declare const NavigationMenuList: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;
+interface NavigationMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    /** Value identifier for Radix (horizontal mode) */
+    value?: string;
+    /** Vertical only: default open state for sub-menu */
+    defaultOpen?: boolean;
+}
+declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Icon displayed before the label */
+    icon?: React.ReactNode;
+    /** Custom chevron icon (default: built-in ChevronDown for horizontal, ChevronRight for vertical) */
+    chevronIcon?: React.ReactNode;
+}
+declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface NavigationMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const NavigationMenuContent: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Whether the link represents the current page */
+    active?: boolean;
+    /** Compose with custom link component (Radix Slot) */
+    asChild?: boolean;
+    /** Icon displayed before the label */
+    icon?: React.ReactNode;
+}
+declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+interface NavigationMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Group header label */
+    label?: string;
+}
+declare const NavigationMenuGroup: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationMenuIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Active indicator dot color (default: dark/foreground, primary: brand color) */
+    color?: 'default' | 'primary';
+}
+declare const NavigationMenuIndicator: React.ForwardRefExoticComponent<NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationMenuViewportProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const NavigationMenuViewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>;
+
+export { NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuGroup, type NavigationMenuGroupProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, type NavigationMenuRadius, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, navigationMenuSizeMap };

package/dist/components/ui/navigation-menu.d.ts

@@ -0,0 +1,120 @@
+import * as React from 'react';
+
+type NavigationMenuRadius = 'sm' | 'md' | 'lg' | 'xl';
+declare const navigationMenuSizeMap: {
+    readonly sm: {
+        readonly trigger: "h-8 text-sm px-3 gap-2";
+        readonly link: "h-8 text-sm px-3 gap-2";
+        readonly icon: "icon-xs";
+        readonly collapsedSquare: "size-8";
+        readonly collapsedWidth: 56;
+        readonly dropdownLink: "px-3 py-1.5 text-sm gap-2";
+        readonly subLink: "h-8 text-sm pl-8 pr-3 gap-2";
+        readonly groupLabel: "text-2xs px-3 mb-1";
+        readonly groupMargin: "mt-4 first:mt-0";
+    };
+    readonly md: {
+        readonly trigger: "h-9 text-md px-3.5 gap-2";
+        readonly link: "h-9 text-md px-3.5 gap-2";
+        readonly icon: "icon-sm";
+        readonly collapsedSquare: "size-9";
+        readonly collapsedWidth: 60;
+        readonly dropdownLink: "px-3 py-1.5 text-md gap-2";
+        readonly subLink: "h-9 text-md pl-9 pr-3.5 gap-2";
+        readonly groupLabel: "text-xs px-3.5 mb-1";
+        readonly groupMargin: "mt-4 first:mt-0";
+    };
+    readonly default: {
+        readonly trigger: "h-10 text-md px-4 gap-2";
+        readonly link: "h-10 text-md px-4 gap-2";
+        readonly icon: "icon-sm";
+        readonly collapsedSquare: "size-10";
+        readonly collapsedWidth: 64;
+        readonly dropdownLink: "px-3 py-2 text-md gap-2";
+        readonly subLink: "h-10 text-md pl-10 pr-4 gap-2";
+        readonly groupLabel: "text-xs px-4 mb-1.5";
+        readonly groupMargin: "mt-5 first:mt-0";
+    };
+    readonly lg: {
+        readonly trigger: "h-12 text-base px-6 gap-2";
+        readonly link: "h-12 text-base px-6 gap-2";
+        readonly icon: "icon-sm";
+        readonly collapsedSquare: "size-12";
+        readonly collapsedWidth: 72;
+        readonly dropdownLink: "px-3 py-2.5 text-base gap-2";
+        readonly subLink: "h-12 text-base pl-12 pr-6 gap-2";
+        readonly groupLabel: "text-xs px-4 mb-2";
+        readonly groupMargin: "mt-6 first:mt-0";
+    };
+};
+interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {
+    /** Layout orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Size of the menu items */
+    size?: 'sm' | 'md' | 'default' | 'lg';
+    /** Vertical only: show icons only (collapsed sidebar) */
+    collapsed?: boolean;
+    /** Vertical only: sidebar width (default: 256px / 16rem) */
+    width?: number | string;
+    /** Vertical only: collapsed sidebar width (default: 64px / 4rem) */
+    collapsedWidth?: number | string;
+    /** Border radius for dropdown content and items */
+    radius?: NavigationMenuRadius;
+    /** Font weight for menu items (default: normal, active items always use semibold) */
+    fontWeight?: 'normal' | 'semibold';
+    /** Horizontal only: delay before hover opens in ms */
+    delayDuration?: number;
+    /** Horizontal only: skip delay when moving between triggers */
+    skipDelayDuration?: number;
+    /** Controlled active menu item value */
+    value?: string;
+    /** Default active menu item value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when active item changes */
+    onValueChange?: (value: string) => void;
+}
+declare const NavigationMenu: React.ForwardRefExoticComponent<NavigationMenuProps & React.RefAttributes<HTMLElement>>;
+interface NavigationMenuListProps extends React.HTMLAttributes<HTMLUListElement> {
+}
+declare const NavigationMenuList: React.ForwardRefExoticComponent<NavigationMenuListProps & React.RefAttributes<HTMLUListElement>>;
+interface NavigationMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    /** Value identifier for Radix (horizontal mode) */
+    value?: string;
+    /** Vertical only: default open state for sub-menu */
+    defaultOpen?: boolean;
+}
+declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Icon displayed before the label */
+    icon?: React.ReactNode;
+    /** Custom chevron icon (default: built-in ChevronDown for horizontal, ChevronRight for vertical) */
+    chevronIcon?: React.ReactNode;
+}
+declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface NavigationMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const NavigationMenuContent: React.ForwardRefExoticComponent<NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Whether the link represents the current page */
+    active?: boolean;
+    /** Compose with custom link component (Radix Slot) */
+    asChild?: boolean;
+    /** Icon displayed before the label */
+    icon?: React.ReactNode;
+}
+declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+interface NavigationMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Group header label */
+    label?: string;
+}
+declare const NavigationMenuGroup: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationMenuIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Active indicator dot color (default: dark/foreground, primary: brand color) */
+    color?: 'default' | 'primary';
+}
+declare const NavigationMenuIndicator: React.ForwardRefExoticComponent<NavigationMenuIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+interface NavigationMenuViewportProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const NavigationMenuViewport: React.ForwardRefExoticComponent<NavigationMenuViewportProps & React.RefAttributes<HTMLDivElement>>;
+
+export { NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuGroup, type NavigationMenuGroupProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, type NavigationMenuRadius, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, navigationMenuSizeMap };