@naeil/ui 0.2.0 → 0.4.0

package/dist/{chunk-SYI3IKIC.js → chunk-QKVN6Q6C.js}

@@ -11,10 +11,14 @@ 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-[11px] font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:ring-accent/25 focus-visible:ring-[2px] focus-visible:outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden",
+  "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",
@@ -50,6 +54,78 @@ function Badge(_a) {
 // src/components/ui/dropdown-menu.tsx
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+
+// 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/dropdown-menu.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function DropdownMenu(_a) {
   var props = __objRest(_a, []);
@@ -70,19 +146,24 @@ function DropdownMenuTrigger(_a) {
 }
 function DropdownMenuContent(_a) {
   var _b = _a, {
+    ref,
     className,
     sideOffset = 4
   } = _b, props = __objRest(_b, [
+    "ref",
     "className",
     "sideOffset"
   ]);
+  const [content, contentRef] = useOverlayRef(ref);
+  useRadixHiddenInert(content);
   return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
     DropdownMenuPrimitive.Content,
     __spreadValues({
+      ref: contentRef,
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn(
-        "bg-card/95 text-popover-foreground backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border-subtle p-1 shadow-md",
+        "ui-menu ui-popup z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border-strong p-1 shadow-md",
         className
       )
     }, props)
@@ -109,7 +190,7 @@ function DropdownMenuItem(_a) {
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "focus:bg-surface-subtle data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-150 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-surface-subtle data-[variant=destructive]:text-error data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-error data-[variant=destructive]:*:[svg]:!text-error [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-base outline-hidden select-none transition-colors duration-(--ui-motion-fast) data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )
     }, props)
@@ -130,7 +211,7 @@ function DropdownMenuCheckboxItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "dropdown-menu-checkbox-item",
       className: cn(
-        "focus:bg-surface-subtle relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none transition-colors duration-150 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-surface-subtle relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-base outline-hidden select-none transition-colors duration-(--ui-motion-fast) data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked
@@ -164,7 +245,7 @@ function DropdownMenuRadioItem(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "dropdown-menu-radio-item",
       className: cn(
-        "focus:bg-surface-subtle relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none transition-colors duration-150 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-surface-subtle relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-base outline-hidden select-none transition-colors duration-(--ui-motion-fast) data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )
     }, props), {
@@ -246,7 +327,7 @@ function DropdownMenuSubTrigger(_a) {
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "focus:bg-surface-subtle data-[state=open]:bg-surface-subtle [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-150 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-surface-subtle data-[state=open]:bg-surface-subtle [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-base outline-hidden select-none transition-colors duration-(--ui-motion-fast) data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )
     }, props), {
@@ -268,7 +349,7 @@ function DropdownMenuSubContent(_a) {
     __spreadValues({
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "bg-card/95 text-popover-foreground backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg border border-border-subtle p-1 shadow-lg",
+        "ui-menu ui-popup z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-border-strong p-1 shadow-lg",
         className
       )
     }, props)
@@ -280,26 +361,26 @@ import { cva as cva2 } from "class-variance-authority";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var buttonVariants = cva2(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-150 cursor-pointer active:scale-[0.98] 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 outline-none focus-visible:border-accent focus-visible:ring-accent/25 focus-visible:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "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 shadow-[inset_0_1px_0_0_var(--color-primary-foreground)/0.1] hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-        outline: "border border-border-subtle bg-background hover:bg-surface-subtle",
+        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: "h-9 px-4 py-2 has-[>svg]:px-3",
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
+        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: {
@@ -335,6 +416,8 @@ function Button(_a) {
 export {
   badgeVariants,
   Badge,
+  useRadixHiddenInert,
+  useOverlayRef,
   DropdownMenu,
   DropdownMenuPortal,
   DropdownMenuTrigger,

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
 import * as React$1 from 'react';
+import { SVGProps } from 'react';
 
 interface NavProps {
     /** Internal Link component (from consumer's next-intl routing) */
@@ -9,11 +10,11 @@ interface NavProps {
     }>;
     /** Current pathname value (already resolved, not a hook) */
     usePathname: () => string;
-    /** Where the .naeil logo links to. Default: "/" */
+    /** Where the naeil logo links to. Default: "/" */
     brandHref?: string;
     /** Whether brandHref is external (renders <a>) or internal (renders Link). Default: false */
     brandExternal?: boolean;
-    /** Custom brand content (replaces default Logo + ".naeil" text) */
+    /** Custom brand content (replaces the default naeil wordmark lockup) */
     brandSlot?: React.ReactNode;
     /** When true, project links (except current) are rendered as external <a> to externalBaseUrl. Default: false */
     projectsExternal?: boolean;
@@ -70,18 +71,26 @@ declare function ThemeProvider({ children, ...props }: React.ComponentProps<type
 
 declare function ThemeToggleIcon(): react_jsx_runtime.JSX.Element;
 
-declare function Logo({ size, mono, className, }: {
+interface LogoProps extends Omit<SVGProps<SVGSVGElement>, "children" | "width" | "height" | "viewBox"> {
+    /** Rendered height. Symbol stays square; lockups preserve their aspect ratio. */
     size?: number;
+    /** Legacy single-ink currentColor silhouette. Prefer tone="gray" for tonal detail. */
     mono?: boolean;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
+    variant?: "symbol" | "horizontal" | "footer" | "stacked" | "wordmark";
+    tone?: "color" | "gray";
+    /** Auto follows the nearest .light/.dark or data-theme ancestor, then the OS. */
+    theme?: "auto" | "light" | "dark";
+    /** null marks a decorative logo; label the containing link instead. */
+    label?: string | null;
+}
+declare function Logo({ size, mono, variant, tone, theme, label, className, ...props }: LogoProps): react_jsx_runtime.JSX.Element;
 
 type HeadingProps = React$1.HTMLAttributes<HTMLHeadingElement> & {
     children: React$1.ReactNode;
 };
-declare const pageTitleClass = "text-foreground text-4xl font-bold tracking-tight lg:text-5xl";
-declare const sectionTitleClass = "text-foreground text-lg font-bold";
+declare const pageTitleClass = "text-foreground text-3xl font-semibold leading-tight";
+declare const sectionTitleClass = "text-foreground text-xl font-semibold";
 declare function PageTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
 declare function SectionTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
 
-export { Footer, LocaleSwitcher, Logo, Nav, PageTitle, SectionTitle, ThemeProvider, ThemeToggle, ThemeToggleIcon, pageTitleClass, sectionTitleClass };
+export { Footer, LocaleSwitcher, Logo, type LogoProps, Nav, PageTitle, SectionTitle, ThemeProvider, ThemeToggle, ThemeToggleIcon, pageTitleClass, sectionTitleClass };