@naeil/ui 0.1.0 → 0.3.0

package/dist/chunk-QKVN6Q6C.js

@@ -0,0 +1,438 @@
+"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/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, []);
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Root, __spreadValues({ "data-slot": "dropdown-menu" }, props));
+}
+function DropdownMenuPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Portal, __spreadValues({ "data-slot": "dropdown-menu-portal" }, props));
+}
+function DropdownMenuTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Trigger,
+    __spreadValues({
+      "data-slot": "dropdown-menu-trigger"
+    }, props)
+  );
+}
+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(
+        "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)
+  ) });
+}
+function DropdownMenuGroup(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Group, __spreadValues({ "data-slot": "dropdown-menu-group" }, props));
+}
+function DropdownMenuItem(_a) {
+  var _b = _a, {
+    className,
+    inset,
+    variant = "default"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "inset",
+    "variant"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Item,
+    __spreadValues({
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "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)
+  );
+}
+function DropdownMenuCheckboxItem(_a) {
+  var _b = _a, {
+    className,
+    children,
+    checked
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "checked"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.CheckboxItem,
+    __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-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
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx2(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx2(CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    })
+  );
+}
+function DropdownMenuRadioGroup(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.RadioGroup,
+    __spreadValues({
+      "data-slot": "dropdown-menu-radio-group"
+    }, props)
+  );
+}
+function DropdownMenuRadioItem(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    __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-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), {
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx2(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx2(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    })
+  );
+}
+function DropdownMenuLabel(_a) {
+  var _b = _a, {
+    className,
+    inset
+  } = _b, props = __objRest(_b, [
+    "className",
+    "inset"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Label,
+    __spreadValues({
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )
+    }, props)
+  );
+}
+function DropdownMenuSeparator(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Separator,
+    __spreadValues({
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border-subtle -mx-1 my-1 h-px", className)
+    }, props)
+  );
+}
+function DropdownMenuShortcut(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    "span",
+    __spreadValues({
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )
+    }, props)
+  );
+}
+function DropdownMenuSub(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Sub, __spreadValues({ "data-slot": "dropdown-menu-sub" }, props));
+}
+function DropdownMenuSubTrigger(_a) {
+  var _b = _a, {
+    className,
+    inset,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "inset",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    __spreadProps(__spreadValues({
+      "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-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), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx2(ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    })
+  );
+}
+function DropdownMenuSubContent(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.SubContent,
+    __spreadValues({
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "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)
+  );
+}
+
+// src/components/ui/button.tsx
+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 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__ */ jsx3(
+    Comp,
+    __spreadValues({
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className }))
+    }, props)
+  );
+}
+
+export {
+  badgeVariants,
+  Badge,
+  useRadixHiddenInert,
+  useOverlayRef,
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  buttonVariants,
+  Button
+};

package/dist/components/index.d.ts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
+import * as React$1 from 'react';
+
+interface NavProps {
+    /** Internal Link component (from consumer's next-intl routing) */
+    Link: React.ComponentType<React.ComponentPropsWithoutRef<"a"> & {
+        href: string;
+    }>;
+    /** Current pathname value (already resolved, not a hook) */
+    usePathname: () => string;
+    /** 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) */
+    brandSlot?: React.ReactNode;
+    /** When true, project links (except current) are rendered as external <a> to externalBaseUrl. Default: false */
+    projectsExternal?: boolean;
+    /** Base URL for external project links. Default: "https://naeil.dev" */
+    externalBaseUrl?: string;
+    /** Override href for the current project in the dropdown */
+    currentProjectKey?: string;
+    currentProjectHref?: string;
+    /** App-specific sub-navigation items after the project dropdown */
+    subNav?: Array<{
+        label: string;
+        href: string;
+    }>;
+    /** React node for auth UI (rendered in desktop right side + mobile bottom) */
+    authSlot?: React.ReactNode;
+    /** Show Projects dropdown in nav. Default: true */
+    showProjects?: boolean;
+    /** Show blog link in nav. Default: true */
+    showBlog?: boolean;
+    /** Right-side toolbar (theme toggle, locale switcher, etc.) */
+    toolbarSlot?: React.ReactNode;
+}
+declare function Nav({ Link, usePathname, brandHref, brandExternal, brandSlot, projectsExternal, externalBaseUrl, currentProjectKey, currentProjectHref, subNav, authSlot, showProjects, showBlog, toolbarSlot, }: NavProps): react_jsx_runtime.JSX.Element;
+
+interface FooterProps {
+    /** Link component from consumer */
+    Link?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+    /** Whether links go to naeil.dev (external) or are internal. Default: false */
+    linksExternal?: boolean;
+}
+declare function Footer({ Link, linksExternal }: FooterProps): react_jsx_runtime.JSX.Element;
+
+interface LocaleSwitcherProps {
+    /** Available locales */
+    locales: Array<{
+        code: string;
+        short: string;
+        full: string;
+    }>;
+    /** Current locale */
+    currentLocale: string;
+    /** Called when user selects a new locale */
+    onLocaleChange: (locale: string) => void;
+}
+declare function LocaleSwitcher({ locales, currentLocale, onLocaleChange, }: LocaleSwitcherProps): react_jsx_runtime.JSX.Element;
+
+declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
+
+declare function ThemeProvider({ children, ...props }: React.ComponentProps<typeof ThemeProvider$1>): react_jsx_runtime.JSX.Element;
+
+declare function ThemeToggleIcon(): react_jsx_runtime.JSX.Element;
+
+declare function Logo({ size, mono, className, }: {
+    size?: number;
+    mono?: boolean;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+type HeadingProps = React$1.HTMLAttributes<HTMLHeadingElement> & {
+    children: React$1.ReactNode;
+};
+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 };