@naeil/ui 0.3.0 → 0.5.0

package/dist/chunk-CE73AEJZ.js

@@ -0,0 +1,667 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-JBTDRVZ7.js";
+
+// src/components/ui/badge.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-sm border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none ui-focus aria-invalid:border-error transition-colors overflow-hidden",
+  {
+    variants: {
+      variant: {
+        success: "bg-success-bg text-success border-transparent",
+        warning: "bg-warning-bg text-warning border-transparent",
+        error: "bg-error-bg text-error border-transparent",
+        info: "bg-info-bg text-info border-transparent",
+        default: "bg-primary text-primary-foreground border-transparent [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground border-transparent [a&]:hover:bg-secondary/80",
+        outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground border-transparent [a&]:hover:bg-destructive/90"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge(_a) {
+  var _b = _a, {
+    className,
+    variant = "default",
+    asChild = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "asChild"
+  ]);
+  const Comp = asChild ? Slot.Root : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    __spreadValues({
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className)
+    }, props)
+  );
+}
+
+// src/components/ui/button.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { Slot as Slot2 } from "radix-ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap ui-control ui-focus rounded-md text-base font-medium transition-colors duration-(--ui-motion-fast) cursor-pointer  disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0  ui-focus aria-invalid:border-error",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary-hover",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 ",
+        outline: "border border-border-strong bg-background hover:bg-surface-subtle",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-surface-subtle",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "px-4 has-[>svg]:px-3",
+        xs: "gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "rounded-md px-6 has-[>svg]:px-4",
+        icon: "",
+        "icon-xs": "rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "",
+        "icon-lg": ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button(_a) {
+  var _b = _a, {
+    className,
+    variant = "default",
+    size = "default",
+    asChild = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "size",
+    "asChild"
+  ]);
+  const Comp = asChild ? Slot2.Root : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    __spreadValues({
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className }))
+    }, props)
+  );
+}
+
+// src/components/ui/select.tsx
+import { Select as Primitive } from "radix-ui";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+// src/lib/design/modal-inert.ts
+import { useEffect, useMemo, useState } from "react";
+var ownershipKey = /* @__PURE__ */ Symbol.for("@naeil/ui/radix-hidden-inert/v1");
+function ownershipFor(doc) {
+  var _a;
+  const shared = doc;
+  return (_a = shared[ownershipKey]) != null ? _a : shared[ownershipKey] = /* @__PURE__ */ new WeakMap();
+}
+function useRadixHiddenInert(content) {
+  useEffect(() => {
+    if (!content) return;
+    const doc = content.ownerDocument;
+    const ownership = ownershipFor(doc);
+    const held = /* @__PURE__ */ new Set();
+    function release(element) {
+      held.delete(element);
+      const state = ownership.get(element);
+      if (!state || --state.users > 0) return;
+      element.inert = state.original;
+      ownership.delete(element);
+    }
+    function sync() {
+      const hidden = (content == null ? void 0 : content.isConnected) && content.dataset.state === "open" ? [...doc.querySelectorAll('[data-aria-hidden="true"][aria-hidden="true"]')].filter((element) => !element.contains(content)) : [];
+      const desired = new Set(hidden);
+      for (const element of held) if (!desired.has(element)) release(element);
+      for (const element of desired) {
+        if (held.has(element)) continue;
+        let state = ownership.get(element);
+        if (!state) {
+          state = { users: 0, original: element.inert };
+          ownership.set(element, state);
+        }
+        state.users++;
+        held.add(element);
+        element.inert = true;
+      }
+    }
+    const observer = new MutationObserver(sync);
+    observer.observe(doc.body, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["aria-hidden", "data-aria-hidden", "data-state"]
+    });
+    sync();
+    return () => {
+      observer.disconnect();
+      for (const element of held) release(element);
+    };
+  }, [content]);
+}
+function assignObjectRef(ref, node) {
+  ref.current = node;
+}
+function useOverlayRef(consumerRef) {
+  const [node, setNode] = useState(null);
+  const ref = useMemo(() => (value) => {
+    setNode(value);
+    const cleanup = typeof consumerRef === "function" ? consumerRef(value) : void 0;
+    if (consumerRef && typeof consumerRef !== "function") assignObjectRef(consumerRef, value);
+    return () => {
+      setNode(null);
+      if (typeof cleanup === "function") cleanup();
+      else if (typeof consumerRef === "function") consumerRef(null);
+      else if (consumerRef) assignObjectRef(consumerRef, null);
+    };
+  }, [consumerRef]);
+  return [node, ref];
+}
+
+// src/components/ui/select.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Select = Primitive.Root;
+var SelectValue = Primitive.Value;
+var SelectGroup = Primitive.Group;
+function SelectTrigger(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    Primitive.Trigger,
+    __spreadProps(__spreadValues({
+      "data-slot": "select-trigger",
+      className: cn(
+        "ui-control ui-focus flex w-full items-center justify-between gap-2 border border-input bg-background px-3 text-left text-foreground disabled:cursor-not-allowed disabled:opacity-45 data-[placeholder]:text-muted-foreground [&>span]:min-w-0 [&>span]:truncate",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx3(Primitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx3(ChevronDownIcon, { className: "size-4 shrink-0" }) })
+      ]
+    })
+  );
+}
+function SelectContent(_a) {
+  var _b = _a, {
+    ref,
+    className,
+    children,
+    position = "popper",
+    sideOffset = 6
+  } = _b, props = __objRest(_b, [
+    "ref",
+    "className",
+    "children",
+    "position",
+    "sideOffset"
+  ]);
+  const [content, contentRef] = useOverlayRef(ref);
+  useRadixHiddenInert(content);
+  return /* @__PURE__ */ jsx3(Primitive.Portal, { children: /* @__PURE__ */ jsxs(
+    Primitive.Content,
+    __spreadProps(__spreadValues({
+      ref: contentRef,
+      "data-slot": "select-content",
+      position,
+      sideOffset,
+      className: cn(
+        "ui-menu ui-popup z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) max-w-[calc(100vw-24px)] overflow-hidden",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx3(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx3(Primitive.Viewport, { className: "p-1", children }),
+        /* @__PURE__ */ jsx3(SelectScrollDownButton, {})
+      ]
+    })
+  ) });
+}
+function SelectItem(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    Primitive.Item,
+    __spreadProps(__spreadValues({
+      "data-slot": "select-item",
+      className: cn(
+        "relative flex cursor-default items-center rounded-sm py-2 pr-9 pl-3 text-base outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-45",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx3(Primitive.ItemText, { children }),
+        /* @__PURE__ */ jsx3(Primitive.ItemIndicator, { className: "absolute right-3", children: /* @__PURE__ */ jsx3(CheckIcon, { className: "size-4" }) })
+      ]
+    })
+  );
+}
+function SelectLabel(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx3(
+    Primitive.Label,
+    __spreadValues({
+      "data-slot": "select-label",
+      className: cn(
+        "px-3 py-2 text-sm font-medium text-muted-foreground",
+        className
+      )
+    }, props)
+  );
+}
+function SelectSeparator(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx3(
+    Primitive.Separator,
+    __spreadValues({
+      "data-slot": "select-separator",
+      className: cn("my-1 h-px bg-border", className)
+    }, props)
+  );
+}
+function SelectScrollUpButton(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx3(
+    Primitive.ScrollUpButton,
+    __spreadProps(__spreadValues({
+      className: cn("flex h-8 items-center justify-center", className)
+    }, props), {
+      children: /* @__PURE__ */ jsx3(ChevronUpIcon, { className: "size-4" })
+    })
+  );
+}
+function SelectScrollDownButton(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx3(
+    Primitive.ScrollDownButton,
+    __spreadProps(__spreadValues({
+      className: cn("flex h-8 items-center justify-center", className)
+    }, props), {
+      children: /* @__PURE__ */ jsx3(ChevronDownIcon, { className: "size-4" })
+    })
+  );
+}
+
+// src/components/ui/navigation.tsx
+import * as React from "react";
+import { Dialog, Popover } from "radix-ui";
+import { Check, ChevronDown, Menu, X } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var NativeLink = React.forwardRef(
+  function NativeLink2(props, ref) {
+    return /* @__PURE__ */ jsx4("a", __spreadValues({ ref }, props));
+  }
+);
+function DesktopGroup({
+  item,
+  active,
+  open,
+  anotherGroupOpen,
+  onOpenChange,
+  children
+}) {
+  var _a;
+  const hoverOpened = React.useRef(false);
+  const closeTimer = React.useRef(
+    void 0
+  );
+  const panel = React.useRef(null);
+  const trigger = React.useRef(null);
+  const pointerType = React.useRef("");
+  const cancelClose = React.useCallback(() => {
+    clearTimeout(closeTimer.current);
+  }, []);
+  React.useEffect(() => {
+    return cancelClose;
+  }, [open, cancelClose]);
+  const leave = (event) => {
+    if (event.pointerType !== "mouse") return;
+    cancelClose();
+    const duration = getComputedStyle(event.currentTarget).getPropertyValue("--ui-motion-standard").trim();
+    closeTimer.current = setTimeout(
+      () => {
+        if (hoverOpened.current) onOpenChange(false);
+      },
+      parseFloat(duration) * (duration.endsWith("ms") ? 1 : 1e3)
+    );
+  };
+  return /* @__PURE__ */ jsxs2(
+    Popover.Root,
+    {
+      open,
+      onOpenChange: (next) => {
+        cancelClose();
+        if (next) hoverOpened.current = false;
+        onOpenChange(next);
+      },
+      children: [
+        /* @__PURE__ */ jsxs2(
+          Popover.Trigger,
+          {
+            ref: trigger,
+            className: "ui-navigation-link ui-focus",
+            "data-active": active || void 0,
+            onPointerEnter: (event) => {
+              if (event.pointerType !== "mouse") return;
+              cancelClose();
+              if (!open) {
+                hoverOpened.current = true;
+                onOpenChange(true);
+              }
+            },
+            onPointerLeave: leave,
+            onPointerDown: (event) => {
+              pointerType.current = event.pointerType;
+            },
+            onClick: (event) => {
+              var _a2, _b;
+              if (event.detail > 0 && pointerType.current === "mouse") {
+                event.preventDefault();
+                cancelClose();
+                hoverOpened.current = true;
+                onOpenChange(true);
+                return;
+              }
+              if (open && hoverOpened.current) {
+                event.preventDefault();
+                hoverOpened.current = false;
+                cancelClose();
+                (_b = (_a2 = panel.current) == null ? void 0 : _a2.querySelector("a[href]")) == null ? void 0 : _b.focus();
+              }
+            },
+            children: [
+              item.label,
+              /* @__PURE__ */ jsx4(ChevronDown, { size: 16, "aria-hidden": "true" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4(Popover.Portal, { children: /* @__PURE__ */ jsx4(
+          Popover.Content,
+          {
+            ref: panel,
+            "data-slot": "navigation-popover",
+            className: "ui-navigation-popover ui-popup",
+            "data-columns": (_a = item.columns) != null ? _a : 1,
+            align: "start",
+            sideOffset: 8,
+            "aria-label": item.label,
+            onPointerEnter: cancelClose,
+            onPointerLeave: leave,
+            onFocusCapture: () => {
+              hoverOpened.current = false;
+              cancelClose();
+            },
+            onOpenAutoFocus: (event) => {
+              if (hoverOpened.current) event.preventDefault();
+            },
+            onCloseAutoFocus: (event) => {
+              if (hoverOpened.current || anotherGroupOpen) event.preventDefault();
+            },
+            onInteractOutside: (event) => {
+              var _a2;
+              if ((_a2 = trigger.current) == null ? void 0 : _a2.contains(event.target))
+                event.preventDefault();
+            },
+            children: /* @__PURE__ */ jsx4("nav", { "aria-label": item.label, className: "ui-navigation-menu-grid", children })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function Navigation(_a) {
+  var _b = _a, {
+    brand,
+    items,
+    labels,
+    Link = NativeLink,
+    currentHref,
+    toolbar,
+    mobileToolbar,
+    mobileFooter,
+    containerClassName,
+    onNavigate,
+    className
+  } = _b, props = __objRest(_b, [
+    "brand",
+    "items",
+    "labels",
+    "Link",
+    "currentHref",
+    "toolbar",
+    "mobileToolbar",
+    "mobileFooter",
+    "containerClassName",
+    "onNavigate",
+    "className"
+  ]);
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [openGroup, setOpenGroup] = React.useState(null);
+  const trigger = React.useRef(null);
+  const desktop = React.useRef(null);
+  React.useEffect(() => {
+    setMobileOpen(false);
+    setOpenGroup(null);
+  }, [currentHref]);
+  React.useEffect(() => {
+    const element = desktop.current;
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (element.getBoundingClientRect().width > 0) setMobileOpen(false);
+      else setOpenGroup(null);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  const active = (item) => {
+    var _a2;
+    return (_a2 = item.active) != null ? _a2 : !item.external && item.href === currentHref;
+  };
+  function link(item, close, entry = false) {
+    const Component = item.external ? NativeLink : Link;
+    return /* @__PURE__ */ jsxs2(
+      Component,
+      {
+        href: item.href,
+        target: item.target,
+        rel: item.target === "_blank" ? "noopener noreferrer" : void 0,
+        "aria-current": active(item) ? "page" : void 0,
+        className: cn(
+          "ui-navigation-link ui-focus",
+          entry && "ui-navigation-entry"
+        ),
+        onClick: (event) => {
+          onNavigate == null ? void 0 : onNavigate(event, item);
+          if (event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey)
+            close == null ? void 0 : close();
+        },
+        children: [
+          item.icon && /* @__PURE__ */ jsx4("span", { className: "ui-navigation-icon", "aria-hidden": "true", children: item.icon }),
+          /* @__PURE__ */ jsxs2("span", { className: "ui-navigation-copy", children: [
+            /* @__PURE__ */ jsxs2("span", { className: "ui-navigation-title", children: [
+              /* @__PURE__ */ jsx4("span", { children: item.label }),
+              item.badge,
+              entry && active(item) && /* @__PURE__ */ jsx4(Check, { size: 16, className: "shrink-0", "aria-hidden": "true" })
+            ] }),
+            item.description && /* @__PURE__ */ jsx4("span", { className: "ui-navigation-description", children: item.description })
+          ] })
+        ]
+      },
+      item.id
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    "header",
+    __spreadProps(__spreadValues({
+      "data-slot": "navigation",
+      className: cn("ui-navigation", className)
+    }, props), {
+      children: /* @__PURE__ */ jsx4("div", { className: cn("ui-navigation-frame", containerClassName), children: /* @__PURE__ */ jsxs2("div", { className: "ui-navigation-row", children: [
+        /* @__PURE__ */ jsx4("div", { className: "ui-navigation-brand", children: brand }),
+        /* @__PURE__ */ jsx4(
+          "nav",
+          {
+            ref: desktop,
+            "aria-label": labels.navigation,
+            className: "ui-navigation-desktop",
+            children: items.map(
+              (item) => "items" in item ? /* @__PURE__ */ jsx4(
+                DesktopGroup,
+                {
+                  item,
+                  active: item.items.some(active),
+                  open: openGroup === item.id,
+                  anotherGroupOpen: openGroup !== null && openGroup !== item.id,
+                  onOpenChange: (open) => setOpenGroup(
+                    (current) => open ? item.id : current === item.id ? null : current
+                  ),
+                  children: item.items.map(
+                    (child) => link(child, () => setOpenGroup(null), true)
+                  )
+                },
+                item.id
+              ) : link(item)
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx4("div", { className: "ui-navigation-toolbar", children: toolbar }),
+        /* @__PURE__ */ jsxs2(Dialog.Root, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
+          /* @__PURE__ */ jsx4(
+            Dialog.Trigger,
+            {
+              ref: trigger,
+              className: "ui-navigation-toggle ui-navigation-link ui-focus",
+              "aria-label": labels.menu,
+              children: /* @__PURE__ */ jsx4(Menu, { "aria-hidden": "true", size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsxs2(Dialog.Portal, { children: [
+            /* @__PURE__ */ jsx4(
+              Dialog.Overlay,
+              {
+                "data-slot": "navigation-overlay",
+                className: "ui-navigation-overlay ui-popup"
+              }
+            ),
+            /* @__PURE__ */ jsxs2(
+              Dialog.Content,
+              {
+                "data-slot": "navigation-sheet",
+                className: "ui-navigation-sheet ui-popup",
+                "aria-describedby": void 0,
+                onCloseAutoFocus: (event) => {
+                  var _a2, _b2;
+                  if (trigger.current && trigger.current.getBoundingClientRect().width === 0) {
+                    event.preventDefault();
+                    (_b2 = (_a2 = desktop.current) == null ? void 0 : _a2.querySelector("button, a")) == null ? void 0 : _b2.focus();
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "ui-navigation-sheet-heading", children: [
+                    /* @__PURE__ */ jsx4(Dialog.Title, { className: "text-xl font-semibold", children: labels.menu }),
+                    /* @__PURE__ */ jsx4(
+                      Dialog.Close,
+                      {
+                        className: "ui-navigation-link ui-focus",
+                        "aria-label": labels.close,
+                        children: /* @__PURE__ */ jsx4(X, { size: 20, "aria-hidden": "true" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx4(
+                    "nav",
+                    {
+                      "aria-label": labels.navigation,
+                      className: "ui-navigation-mobile-links",
+                      children: items.map(
+                        (item) => "items" in item ? /* @__PURE__ */ jsxs2("section", { "aria-label": item.label, children: [
+                          /* @__PURE__ */ jsx4("h3", { className: "ui-navigation-group-label", children: item.label }),
+                          item.items.map(
+                            (child) => link(child, () => setMobileOpen(false), true)
+                          )
+                        ] }, item.id) : link(item, () => setMobileOpen(false))
+                      )
+                    }
+                  ),
+                  (mobileToolbar != null ? mobileToolbar : toolbar) && /* @__PURE__ */ jsx4("div", { className: "ui-navigation-mobile-toolbar", children: mobileToolbar != null ? mobileToolbar : toolbar }),
+                  mobileFooter && /* @__PURE__ */ jsx4("div", { className: "ui-navigation-mobile-footer", children: mobileFooter })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] }) })
+    })
+  );
+}
+
+export {
+  badgeVariants,
+  Badge,
+  buttonVariants,
+  Button,
+  useRadixHiddenInert,
+  useOverlayRef,
+  Select,
+  SelectValue,
+  SelectGroup,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  Navigation
+};