@vamos-ui/react 0.3.0 → 0.4.1

package/dist/components/menubar.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import * as MenubarPrimitive from "radix-ui/menubar";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { useCan } from "../lib/provider.js";
+import { MenuCheckIcon, MenuEntries, MenuItemContent, MenuRadioDot, MenuSizeContext, menuContentVariants, menuIndicatorClass, menuItemClass, menuLabelClass, menuSeparatorClass, useVisibleEntries, } from "../lib/menu.js";
+/* ------------------------------------------------------------------ */
+/* Bar                                                                 */
+/* ------------------------------------------------------------------ */
+export const menubarVariants = /*#__PURE__*/ cva("flex min-w-0 items-center gap-0.5 overflow-x-auto [scrollbar-width:none]", {
+    variants: {
+        variant: {
+            /** A hairline surface strip — the top of an editor or a desktop-style app window. */
+            bar: "surface rounded-ui-lg p-1",
+            /** No chrome: sits inside a Top bar, toolbar or window header. */
+            ghost: "",
+        },
+    },
+    defaultVariants: { variant: "bar" },
+});
+/**
+ * A desktop-app menu bar (WAI-ARIA `menubar`): File / Edit / View… One tab stop; ← → move between
+ * menus (and keep the open one open), ↓ / Enter / Space open, Esc closes, typeahead inside a menu.
+ *
+ * ```tsx
+ * <Menubar aria-label="Editor" menus={[
+ *   { id: "file", label: "File", items: [{ id: "new", label: "New document", shortcut: "mod+n", onSelect: create }] },
+ * ]} />
+ * ```
+ */
+export const Menubar = /*#__PURE__*/ React.forwardRef(function Menubar({ className, variant, menus, size = "md", children, loop = true, ...props }, ref) {
+    return (_jsx(MenuSizeContext.Provider, { value: size, children: _jsxs(MenubarPrimitive.Root, { ref: ref, "data-slot": "menubar", "data-variant": variant ?? "bar", loop: loop, className: cn(menubarVariants({ variant }), className), ...props, children: [menus ? _jsx(MenubarMenus, { menus: menus }) : null, children] }) }));
+});
+/** One menu: a `MenubarTrigger` plus its `MenubarContent`. `value` is needed only for a controlled bar. */
+export const MenubarMenu = MenubarPrimitive.Menu;
+export const MenubarGroup = MenubarPrimitive.Group;
+export const MenubarSub = MenubarPrimitive.Sub;
+export const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+/** The top-level button ("File"). */
+export const MenubarTrigger = /*#__PURE__*/ React.forwardRef(function MenubarTrigger({ className, ...props }, ref) {
+    return (_jsx(MenubarPrimitive.Trigger, { ref: ref, "data-slot": "menubar-trigger", className: cn("inline-flex h-[calc(var(--control-h)-0.5rem)] shrink-0 cursor-default select-none items-center gap-1.5 rounded-ui-sm px-2.5 text-[13px] font-medium text-fg outline-none", "transition-colors duration-100 hover:bg-hover focus-visible:bg-hover focus-ring", "data-highlighted:bg-hover data-[state=open]:bg-selected", "disabled:pointer-events-none disabled:opacity-45 data-disabled:pointer-events-none data-disabled:opacity-45", "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-fg-muted", className), ...props }));
+});
+/** A menu panel under its trigger. Portals into the nearest `ThemeScope`; only this first layer blurs in glass mode. */
+export const MenubarContent = /*#__PURE__*/ React.forwardRef(function MenubarContent({ className, size: sizeProp, sideOffset = 6, alignOffset = -4, collisionPadding = 12, align = "start", ...props }, ref) {
+    const container = usePortalContainer();
+    const barSize = React.useContext(MenuSizeContext);
+    const size = sizeProp ?? barSize;
+    return (_jsx(MenubarPrimitive.Portal, { container: container, children: _jsx(MenuSizeContext.Provider, { value: size, children: _jsx(Layer, { asChild: true, children: _jsx(MenubarPrimitive.Content, { ref: ref, "data-slot": "menubar-content", sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: collisionPadding, align: align, className: cn(menuContentVariants({ size }), "max-h-(--radix-menubar-content-available-height) origin-(--radix-menubar-content-transform-origin)", className), ...props }) }) }) }));
+});
+/** One command. `onSelect` fires on click, Enter and Space, then the menu closes (`event.preventDefault()` keeps it open). */
+export const MenubarItem = /*#__PURE__*/ React.forwardRef(function MenubarItem({ className, icon, description, shortcut, badge, tone = "default", inset, asChild, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsx(MenubarPrimitive.Item, { ref: ref, "data-slot": "menubar-item", "data-tone": tone, asChild: asChild, className: menuItemClass({ size, tone, inset, className }), ...props, children: asChild ? (children) : (_jsx(MenuItemContent, { icon: icon, description: description, shortcut: shortcut, badge: badge, children: children })) }));
+});
+/** A toggle (`menuitemcheckbox`) — "Show ruler", "Word wrap". */
+export const MenubarCheckboxItem = /*#__PURE__*/ React.forwardRef(function MenubarCheckboxItem({ className, shortcut, description, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsxs(MenubarPrimitive.CheckboxItem, { ref: ref, "data-slot": "menubar-checkbox-item", className: menuItemClass({ size, inset: true, className }), ...props, children: [_jsx("span", { className: menuIndicatorClass, children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(MenuCheckIcon, {}) }) }), _jsx(MenuItemContent, { shortcut: shortcut, description: description, children: children })] }));
+});
+/** One choice inside a `MenubarRadioGroup` (`menuitemradio`) — zoom level, sort order. */
+export const MenubarRadioItem = /*#__PURE__*/ React.forwardRef(function MenubarRadioItem({ className, shortcut, description, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsxs(MenubarPrimitive.RadioItem, { ref: ref, "data-slot": "menubar-radio-item", className: menuItemClass({ size, inset: true, className }), ...props, children: [_jsx("span", { className: menuIndicatorClass, children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(MenuRadioDot, {}) }) }), _jsx(MenuItemContent, { shortcut: shortcut, description: description, children: children })] }));
+});
+export const MenubarLabel = /*#__PURE__*/ React.forwardRef(function MenubarLabel({ className, inset, ...props }, ref) {
+    return _jsx(MenubarPrimitive.Label, { ref: ref, "data-slot": "menubar-label", className: cn(menuLabelClass, inset && "ps-8", className), ...props });
+});
+export const MenubarSeparator = /*#__PURE__*/ React.forwardRef(function MenubarSeparator({ className, ...props }, ref) {
+    return _jsx(MenubarPrimitive.Separator, { ref: ref, "data-slot": "menubar-separator", className: cn(menuSeparatorClass, className), ...props });
+});
+/** Trailing text hint (when you don't want keycaps). */
+export function MenubarShortcut({ className, ...props }) {
+    return _jsx("span", { "data-slot": "menubar-shortcut", className: cn("ms-auto ps-4 font-mono text-[11px] tracking-wide text-fg-subtle", className), ...props });
+}
+/** Opens a submenu on hover, Enter, Space or → (← in RTL). */
+export const MenubarSubTrigger = /*#__PURE__*/ React.forwardRef(function MenubarSubTrigger({ className, icon, inset, children, ...props }, ref) {
+    const size = React.useContext(MenuSizeContext);
+    return (_jsx(MenubarPrimitive.SubTrigger, { ref: ref, "data-slot": "menubar-sub-trigger", className: menuItemClass({ size, inset, className: cn("data-[state=open]:bg-hover", className) }), ...props, children: _jsx(MenuItemContent, { icon: icon, chevron: true, children: children }) }));
+});
+/** A submenu panel. One layer deeper, so it is opaque in glass mode. */
+export const MenubarSubContent = /*#__PURE__*/ React.forwardRef(function MenubarSubContent({ className, size: sizeProp, sideOffset = 4, alignOffset = -5, collisionPadding = 12, ...props }, ref) {
+    const container = usePortalContainer();
+    const parentSize = React.useContext(MenuSizeContext);
+    const size = sizeProp ?? parentSize;
+    return (_jsx(MenubarPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsx(MenubarPrimitive.SubContent, { ref: ref, "data-slot": "menubar-sub-content", sideOffset: sideOffset, alignOffset: alignOffset, collisionPadding: collisionPadding, className: cn(menuContentVariants({ size }), "max-h-(--radix-menubar-content-available-height)", className), ...props }) }) }));
+});
+/* ------------------------------------------------------------------ */
+/* Data-driven                                                         */
+/* ------------------------------------------------------------------ */
+const menubarParts = {
+    Item: MenubarItem,
+    CheckboxItem: MenubarCheckboxItem,
+    RadioGroup: MenubarRadioGroup,
+    RadioItem: MenubarRadioItem,
+    Label: MenubarLabel,
+    Separator: MenubarSeparator,
+    Group: MenubarGroup,
+    Sub: MenubarSub,
+    SubTrigger: MenubarSubTrigger,
+    SubContent: MenubarSubContent,
+};
+/** Renders `MenuEntry[]` as menubar items (inside your own `MenubarContent`). */
+export function MenubarEntries({ items }) {
+    const visible = useVisibleEntries(items);
+    return _jsx(MenuEntries, { entries: visible, parts: menubarParts });
+}
+function MenubarDataMenu({ menu }) {
+    const visible = useVisibleEntries(menu.items);
+    if (visible.length === 0)
+        return null;
+    return (_jsxs(MenubarMenu, { value: menu.id, children: [_jsx(MenubarTrigger, { disabled: menu.disabled, children: menu.label }), _jsx(MenubarContent, { children: _jsx(MenuEntries, { entries: visible, parts: menubarParts }) })] }));
+}
+/** Renders `MenubarMenuEntry[]` (what `Menubar menus` uses). Menus with no visible entries are dropped. */
+export function MenubarMenus({ menus }) {
+    const can = useCan();
+    return (_jsx(_Fragment, { children: menus
+            .filter((m) => !m.permission || can(m.permission))
+            .map((m) => (_jsx(MenubarDataMenu, { menu: m }, m.id))) }));
+}

package/dist/components/native-select.js

@@ -16,7 +16,7 @@ import { controlVariants } from "../lib/variants.js";
  * </Field>
  * ```
  */
-export const NativeSelect = React.forwardRef(function NativeSelect({ className, selectClassName, size = "md", variant = "default", invalid, placeholder, items, children, ...rest }, ref) {
+export const NativeSelect = /*#__PURE__*/ React.forwardRef(function NativeSelect({ className, selectClassName, size = "md", variant = "default", invalid, placeholder, items, children, ...rest }, ref) {
     const props = useFieldControl({ ...rest, "aria-invalid": invalid ? true : rest["aria-invalid"] });
     const { readOnly, ...selectProps } = props;
     let options = children;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { NavigationMenu as RadixNav } from "radix-ui";
+import * as RadixNav from "radix-ui/navigation-menu";
 declare const navLabels: {
     label: string;
     open: string;

package/dist/components/navigation-menu.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { Dialog, NavigationMenu as RadixNav } from "radix-ui";
+import * as Dialog from "radix-ui/dialog";
+import * as RadixNav from "radix-ui/navigation-menu";
 import { ChevronDown, Menu, X } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
@@ -19,7 +20,7 @@ const navLabels = {
 /* ------------------------------------------------------------------ */
 /* Root                                                                */
 /* ------------------------------------------------------------------ */
-const rootVariants = cva("relative z-(--z-nav) flex max-w-max flex-1 items-center justify-center", {
+const rootVariants = /*#__PURE__*/ cva("relative z-(--z-nav) flex max-w-max flex-1 items-center justify-center", {
     variants: {
         variant: {
             /** Sits in a site header. */
@@ -49,7 +50,7 @@ const rootVariants = cva("relative z-(--z-nav) flex max-w-max flex-1 items-cente
  * </NavigationMenu>
  * ```
  */
-export const NavigationMenu = React.forwardRef(function NavigationMenu({ variant = "bar", viewport = true, items, labels, className, children, "aria-label": ariaLabel, ...props }, ref) {
+export const NavigationMenu = /*#__PURE__*/ React.forwardRef(function NavigationMenu({ variant = "bar", viewport = true, items, labels, className, children, "aria-label": ariaLabel, ...props }, ref) {
     const t = useLabels("navigationMenu", navLabels, labels);
     return (_jsxs(RadixNav.Root, { ref: ref, "data-slot": "navigation-menu", "data-variant": variant, "data-viewport": viewport || undefined, "aria-label": ariaLabel ?? t("label"), className: cn(rootVariants({ variant }), className), ...props, children: [items ? _jsx(NavigationMenuItems, { items: items, viewport: viewport }) : children, viewport ? _jsx(NavigationMenuViewport, {}) : null] }));
 });
@@ -57,16 +58,16 @@ function NavigationMenuItems({ items, viewport }) {
     return (_jsx(NavigationMenuList, { children: items.map((item, i) => (_jsx(NavigationMenuItem, { children: item.children?.length ? (_jsxs(_Fragment, { children: [_jsx(NavigationMenuTrigger, { children: item.label }), _jsxs(NavigationMenuContent, { layout: item.layout, inline: !viewport, children: [item.layout === "featured" && item.featured ? _jsx(NavigationMenuFeatured, { ...item.featured }) : null, _jsx(NavigationMenuGroup, { children: item.children.map((child, j) => (_jsx("li", { children: _jsx(NavigationMenuLink, { href: child.href ?? "#", title: child.label, description: child.description, icon: child.icon }) }, child.id ?? j))) })] })] })) : (_jsx(NavigationMenuLink, { href: item.href ?? "#", variant: "top", children: item.label })) }, item.id ?? i))) }));
 }
 /** The row of top-level items. */
-export const NavigationMenuList = React.forwardRef(function NavigationMenuList({ className, ...props }, ref) {
+export const NavigationMenuList = /*#__PURE__*/ React.forwardRef(function NavigationMenuList({ className, ...props }, ref) {
     return _jsx(RadixNav.List, { ref: ref, "data-slot": "navigation-menu-list", className: cn("flex flex-1 list-none items-center justify-center gap-0.5", className), ...props });
 });
 /** One top-level item (a trigger + content, or a plain link). */
-export const NavigationMenuItem = React.forwardRef(function NavigationMenuItem({ className, ...props }, ref) {
+export const NavigationMenuItem = /*#__PURE__*/ React.forwardRef(function NavigationMenuItem({ className, ...props }, ref) {
     return _jsx(RadixNav.Item, { ref: ref, "data-slot": "navigation-menu-item", className: cn("relative", className), ...props });
 });
 const topItemClass = cn("group/nav inline-flex h-9 select-none items-center justify-center gap-1 rounded-full px-3.5 text-sm font-medium text-fg-muted outline-none", "transition-colors duration-150 hover:bg-hover hover:text-fg focus-ring", "data-[state=open]:bg-hover data-[state=open]:text-fg data-active:text-fg aria-[current=page]:text-fg");
 /** Opens a panel. Hover (with intent delay), click, Enter/Space or ↓. */
-export const NavigationMenuTrigger = React.forwardRef(function NavigationMenuTrigger({ className, children, ...props }, ref) {
+export const NavigationMenuTrigger = /*#__PURE__*/ React.forwardRef(function NavigationMenuTrigger({ className, children, ...props }, ref) {
     return (_jsxs(RadixNav.Trigger, { ref: ref, "data-slot": "navigation-menu-trigger", className: cn(topItemClass, className), ...props, children: [children, _jsx(ChevronDown, { "aria-hidden": true, className: "relative top-px size-3.5 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none group-data-[state=open]/nav:rotate-180" })] }));
 });
 const contentLayouts = {
@@ -75,19 +76,19 @@ const contentLayouts = {
     featured: "grid w-[min(42rem,calc(100vw-2rem))] grid-cols-[minmax(0,15rem)_minmax(0,1fr)] gap-2",
 };
 /** The panel of an item. */
-export const NavigationMenuContent = React.forwardRef(function NavigationMenuContent({ layout = "list", inline, className, ...props }, ref) {
+export const NavigationMenuContent = /*#__PURE__*/ React.forwardRef(function NavigationMenuContent({ layout = "list", inline, className, ...props }, ref) {
     return (_jsx(RadixNav.Content, { ref: ref, "data-slot": "navigation-menu-content", "data-layout": layout, className: cn("ui-nav-content p-2", inline ? "surface-popover ui-pop absolute start-0 top-full z-(--z-popover) mt-2 rounded-ui-lg" : "start-0 top-0 md:absolute", contentLayouts[layout], className), ...props }));
 });
 /** The shared, animated container all panels render into. Rendered by `NavigationMenu` unless `viewport={false}`. */
-export const NavigationMenuViewport = React.forwardRef(function NavigationMenuViewport({ className, ...props }, ref) {
+export const NavigationMenuViewport = /*#__PURE__*/ React.forwardRef(function NavigationMenuViewport({ className, ...props }, ref) {
     return (_jsx("div", { className: "absolute start-0 top-full z-(--z-popover) flex w-full justify-center pt-2", children: _jsx(Layer, { asChild: true, children: _jsx(RadixNav.Viewport, { ref: ref, "data-slot": "navigation-menu-viewport", className: cn("ui-pop ui-nav-viewport surface-popover relative shrink-0 origin-top overflow-hidden rounded-ui-lg", "h-(--radix-navigation-menu-viewport-height) w-full md:w-(--radix-navigation-menu-viewport-width)", className), ...props }) }) }));
 });
 /** A list of links inside a panel (`ul`). */
-export const NavigationMenuGroup = React.forwardRef(function NavigationMenuGroup({ heading, className, children, ...props }, ref) {
+export const NavigationMenuGroup = /*#__PURE__*/ React.forwardRef(function NavigationMenuGroup({ heading, className, children, ...props }, ref) {
     return (_jsxs("div", { className: "min-w-0", children: [heading ? _jsx("p", { className: "px-3 pt-2 pb-1 text-[11px] font-medium tracking-[0.06em] text-fg-subtle", children: heading }) : null, _jsx("ul", { ref: ref, "data-slot": "navigation-menu-group", className: cn("grid list-none gap-0.5", className), ...props, children: children })] }));
 });
 /** A link — in the bar (`variant="top"`) or in a panel with icon and description. Uses the app's router `Link`. */
-export const NavigationMenuLink = React.forwardRef(function NavigationMenuLink({ href, variant = "panel", title, description, icon, active, className, children, ...props }, ref) {
+export const NavigationMenuLink = /*#__PURE__*/ React.forwardRef(function NavigationMenuLink({ href, variant = "panel", title, description, icon, active, className, children, ...props }, ref) {
     const { isActive } = useNavigation();
     const current = active ?? isActive(href);
     if (variant === "top") {
@@ -100,7 +101,7 @@ export function NavigationMenuFeatured({ title, description, href, eyebrow, clas
     return (_jsx(RadixNav.Link, { asChild: true, children: _jsxs(SmartLink, { href: href, "data-slot": "navigation-menu-featured", className: cn("group/feat relative flex min-h-full flex-col justify-end overflow-hidden rounded-ui bg-fg p-5 text-scene outline-none focus-ring", className), children: [_jsx("span", { "aria-hidden": true, className: "absolute -end-10 -top-10 size-40 rounded-full border-[18px] border-accent opacity-90 transition-transform duration-300 group-hover/feat:scale-105 motion-reduce:transition-none" }), eyebrow ? _jsx("span", { className: "relative mb-auto text-[11px] font-medium tracking-[0.08em] opacity-70", children: eyebrow }) : null, _jsx("span", { className: "relative mt-10 font-display text-[1.375rem] leading-tight", children: title }), description ? _jsx("span", { className: "relative mt-1.5 text-[13px] leading-snug opacity-75", children: description }) : null] }) }));
 }
 /** Optional arrow under the open trigger. */
-export const NavigationMenuIndicator = React.forwardRef(function NavigationMenuIndicator({ className, ...props }, ref) {
+export const NavigationMenuIndicator = /*#__PURE__*/ React.forwardRef(function NavigationMenuIndicator({ className, ...props }, ref) {
     return (_jsx(RadixNav.Indicator, { ref: ref, "data-slot": "navigation-menu-indicator", className: cn("top-full z-[1] flex h-2 items-end justify-center overflow-hidden ui-fade", className), ...props, children: _jsx("span", { className: "relative top-[60%] size-2.5 rotate-45 rounded-tl-sm border-s border-t border-popover-border bg-popover" }) }));
 });
 /**

package/dist/components/notification-center.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import * as PopoverPrimitive from "radix-ui/popover";
 import { Bell, Check, CheckCheck, Settings } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useLabels } from "../lib/labels.js";
@@ -92,7 +92,7 @@ export function createMemoryNotificationAdapter(initial, options = {}) {
     };
 }
 const emptyList = { items: [], status: "idle", loadingMore: false };
-const NotificationContext = React.createContext(null);
+const NotificationContext = /*#__PURE__*/ React.createContext(null);
 const useNC = () => {
     const ctx = React.useContext(NotificationContext);
     if (!ctx)
@@ -270,7 +270,7 @@ export function NotificationCenter({ adapter, tabs: tabsProp, toastOnNew, pollIn
 /* Trigger                                                             */
 /* ------------------------------------------------------------------ */
 /** The bell with the unread badge (99+). `aria-label` includes the count. */
-export const NotificationTrigger = React.forwardRef(function NotificationTrigger({ className, size = "sm", onClick, ...props }, ref) {
+export const NotificationTrigger = /*#__PURE__*/ React.forwardRef(function NotificationTrigger({ className, size = "sm", onClick, ...props }, ref) {
     const { open, setOpen, unread, important, triggerRef, t } = useNC();
     const { format } = useLocale();
     const label = unread > 0 ? t("triggerUnread", { count: unread }) : t("trigger");
@@ -379,7 +379,7 @@ const toneWell = {
     danger: "tone-danger",
 };
 /** One notification. Usable on its own — e.g. a full "/notifications" page. */
-export const NotificationItem = React.forwardRef(function NotificationItem({ notification: n, onOpen, onMarkRead, onAction, pendingAction, posinset, setsize, labels, className, ...props }, ref) {
+export const NotificationItem = /*#__PURE__*/ React.forwardRef(function NotificationItem({ notification: n, onOpen, onMarkRead, onAction, pendingAction, posinset, setsize, labels, className, ...props }, ref) {
     const t = useLabels("notifications", notificationLabels, labels);
     const { format } = useLocale();
     const titleId = React.useId();

package/dist/components/page-header.js

@@ -9,7 +9,7 @@ import { ActionMenu } from "./dropdown-menu.js";
 import { AppShellBreadcrumb } from "./app-shell.js";
 // Server-safe nav helpers (this module has no "use client"), so server layouts can call them.
 export { filterNav, resolveActive, flattenNav, matchPath, navItems, findNavItem, navTrailItems, normaliseBadge, isNavGroup, isNavItem, isNavSeparator, SIDEBAR_COOKIE, parseSidebarCookie, } from "../lib/nav.js";
-export const pageHeaderTitleVariants = cva("font-display min-w-0 text-fg [text-wrap:balance]", {
+export const pageHeaderTitleVariants = /*#__PURE__*/ cva("font-display min-w-0 text-fg [text-wrap:balance]", {
     variants: {
         size: {
             /** Record pages. */
@@ -36,12 +36,12 @@ export const pageHeaderTitleVariants = cva("font-display min-w-0 text-fg [text-w
  * />
  * ```
  */
-export const PageHeader = React.forwardRef(function PageHeader({ title, eyebrow, breadcrumb, back, description, meta, actions, menu, tabs, size = "md", sticky, align = "start", loading, className, children, ...props }, ref) {
+export const PageHeader = /*#__PURE__*/ React.forwardRef(function PageHeader({ title, eyebrow, breadcrumb, back, description, meta, actions, menu, tabs, size = "md", sticky, align = "start", loading, className, children, ...props }, ref) {
     const centered = align === "center";
     return (_jsxs("header", { ref: ref, "data-slot": "page-header", "data-size": size, className: cn("grid gap-3", tabs ? "mb-6" : size === "lg" ? "mb-8" : "mb-6", sticky && "surface-bar sticky top-(--topbar-h) z-(--z-sticky) -mx-[var(--page-px,1.5rem)] px-[var(--page-px,1.5rem)] pt-3", sticky && !tabs && "pb-3", centered && "justify-items-center text-center", className), ...props, children: [breadcrumb === "auto" ? _jsx(AppShellBreadcrumb, {}) : breadcrumb ? breadcrumb : null, back ? (_jsxs(SmartLink, { href: back.href, className: "-ms-0.5 inline-flex w-fit items-center gap-1.5 rounded-ui-sm text-[13px] text-fg-muted transition-colors hover:text-fg focus-ring", children: [_jsx(ArrowLeft, { "aria-hidden": true, className: "size-3.5 rtl:-scale-x-100" }), back.label] })) : null, _jsxs("div", { className: cn("flex flex-wrap items-end gap-x-6 gap-y-4", centered ? "justify-center" : "justify-between"), children: [_jsxs("div", { className: cn("min-w-0", centered ? "max-w-2xl" : "max-w-3xl flex-[1_1_22rem]"), children: [eyebrow ? _jsx(PageHeaderEyebrow, { className: "mb-1.5", children: eyebrow }) : null, _jsxs("div", { className: cn("flex flex-wrap items-center gap-x-3 gap-y-1.5", centered && "justify-center"), children: [_jsx(PageHeaderTitle, { size: size, "aria-busy": loading || undefined, children: loading ? _jsx(Skeleton, { className: "inline-block h-[0.8em] w-[min(18rem,60vw)] rounded-ui-sm align-middle" }) : title }), meta ? _jsx("div", { className: "flex flex-wrap items-center gap-2 text-[13px] text-fg-subtle", children: meta }) : null] }), description ? _jsx(PageHeaderDescription, { className: cn(size === "lg" ? "mt-2.5" : "mt-1.5", centered && "mx-auto"), children: description }) : null] }), actions || menu?.length ? (_jsxs(PageHeaderActions, { children: [actions, menu?.length ? _jsx(ActionMenu, { items: menu, triggerSize: "md" }) : null] })) : null] }), children, tabs ? _jsx(PageHeaderTabs, { children: tabs }) : null] }));
 });
 /** The `<h1>`. */
-export const PageHeaderTitle = React.forwardRef(function PageHeaderTitle({ size, className, ...props }, ref) {
+export const PageHeaderTitle = /*#__PURE__*/ React.forwardRef(function PageHeaderTitle({ size, className, ...props }, ref) {
     return _jsx("h1", { ref: ref, "data-slot": "page-header-title", className: cn(pageHeaderTitleVariants({ size }), className), ...props });
 });
 /** The small line above the title. Not uppercased with CSS: `text-transform` breaks Turkish i/İ without the right `lang`. */

package/dist/components/pagination.js

@@ -59,21 +59,21 @@ export function usePaginationRange(options) {
     const { page, pageCount, siblingCount, boundaryCount } = options;
     return React.useMemo(() => paginationRange({ page, pageCount, siblingCount, boundaryCount }), [page, pageCount, siblingCount, boundaryCount]);
 }
-const SizeContext = React.createContext("md");
+const SizeContext = /*#__PURE__*/ React.createContext("md");
 const itemSize = {
     sm: "h-8 min-w-8 px-2 text-[13px] rounded-ui-sm [&_svg]:size-3.5",
     md: "h-(--control-h) min-w-(--control-h) px-2.5 text-sm rounded-ui [&_svg]:size-4",
 };
 /** The `<ul>` of page items. */
-export const PaginationList = React.forwardRef(function PaginationList({ className, ...props }, ref) {
+export const PaginationList = /*#__PURE__*/ React.forwardRef(function PaginationList({ className, ...props }, ref) {
     return _jsx("ul", { ref: ref, "data-slot": "pagination-list", className: cn("flex items-center gap-1", className), ...props });
 });
 /** One `<li>`. */
-export const PaginationItem = React.forwardRef(function PaginationItem({ className, ...props }, ref) {
+export const PaginationItem = /*#__PURE__*/ React.forwardRef(function PaginationItem({ className, ...props }, ref) {
     return _jsx("li", { ref: ref, "data-slot": "pagination-item", className: cn("inline-flex", className), ...props });
 });
 /** A page number, or the shell for Previous / Next. Router `Link` when `href` is set, else a button. */
-export const PaginationLink = React.forwardRef(function PaginationLink({ href, isActive, disabled, loading, className, children, onClick, ...props }, ref) {
+export const PaginationLink = /*#__PURE__*/ React.forwardRef(function PaginationLink({ href, isActive, disabled, loading, className, children, onClick, ...props }, ref) {
     const Link = useLink();
     const size = React.useContext(SizeContext);
     const classes = cn(buttonVariants({ variant: "ghost" }), itemSize[size], "tabular font-normal text-fg-muted hover:text-fg", isActive && "bg-selected font-semibold text-fg hover:bg-selected", className);
@@ -88,12 +88,12 @@ export const PaginationLink = React.forwardRef(function PaginationLink({ href, i
     return (_jsx("button", { ref: ref, type: "button", "aria-current": isActive ? "page" : undefined, "aria-busy": loading || undefined, disabled: disabled, className: classes, "data-slot": "pagination-link", onClick: onClick, ...props, children: content }));
 });
 /** Previous-page control. The arrow flips in RTL. */
-export const PaginationPrevious = React.forwardRef(function PaginationPrevious({ showLabel, labels, className, ...props }, ref) {
+export const PaginationPrevious = /*#__PURE__*/ React.forwardRef(function PaginationPrevious({ showLabel, labels, className, ...props }, ref) {
     const t = useLabels("pagination", paginationLabels, labels);
     return (_jsxs(PaginationLink, { ref: ref, "aria-label": t("previousPage"), className: cn(showLabel && "gap-1 ps-2 pe-3", className), "data-slot": "pagination-previous", ...props, children: [_jsx(ChevronLeft, { "aria-hidden": true, className: "rtl:-scale-x-100" }), showLabel ? _jsx("span", { children: t("previous") }) : null] }));
 });
 /** Next-page control. The arrow flips in RTL. */
-export const PaginationNext = React.forwardRef(function PaginationNext({ showLabel, labels, className, ...props }, ref) {
+export const PaginationNext = /*#__PURE__*/ React.forwardRef(function PaginationNext({ showLabel, labels, className, ...props }, ref) {
     const t = useLabels("pagination", paginationLabels, labels);
     return (_jsxs(PaginationLink, { ref: ref, "aria-label": t("nextPage"), className: cn(showLabel && "gap-1 ps-3 pe-2", className), "data-slot": "pagination-next", ...props, children: [showLabel ? _jsx("span", { children: t("next") }) : null, _jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100" })] }));
 });
@@ -113,7 +113,7 @@ export function PaginationEllipsis({ className, labels, ...props }) {
  *
  * Moving focus to the top of the list after a page change is the consumer's job.
  */
-export const Pagination = React.forwardRef(function Pagination({ page, pageCount, onPageChange, getHref, siblingCount, boundaryCount, variant = "numbers", size = "md", hideOnSinglePage = true, loading, labels, className, ...props }, ref) {
+export const Pagination = /*#__PURE__*/ React.forwardRef(function Pagination({ page, pageCount, onPageChange, getHref, siblingCount, boundaryCount, variant = "numbers", size = "md", hideOnSinglePage = true, loading, labels, className, ...props }, ref) {
     const t = useLabels("pagination", paginationLabels, labels);
     const range = usePaginationRange({ page, pageCount, siblingCount, boundaryCount });
     if (pageCount < 1 || (hideOnSinglePage && pageCount <= 1))
@@ -137,7 +137,7 @@ export const Pagination = React.forwardRef(function Pagination({ page, pageCount
  * The table footer: "1–20 of 312" + rows per page + page numbers. Changing the page size keeps the
  * first visible row on screen (the page is recomputed) — the consumer receives both callbacks.
  */
-export const PaginationBar = React.forwardRef(function PaginationBar({ total, pageSize, pageSizeOptions = [10, 20, 50, 100], onPageSizeChange, page, onPageChange, labels, size = "md", className, style, id, ...props }, ref) {
+export const PaginationBar = /*#__PURE__*/ React.forwardRef(function PaginationBar({ total, pageSize, pageSizeOptions = [10, 20, 50, 100], onPageSizeChange, page, onPageChange, labels, size = "md", className, style, id, ...props }, ref) {
     const t = useLabels("pagination", paginationLabels, labels);
     const f = useFormat();
     const selectId = React.useId();
@@ -156,7 +156,7 @@ export const PaginationBar = React.forwardRef(function PaginationBar({ total, pa
                                 }, className: cn(controlVariants({ size: "sm" }), "tabular w-auto appearance-none pe-7 text-fg"), children: options.map((o) => (_jsx("option", { value: o, children: f.number(o) }, o))) }), _jsx(ChevronDown, { "aria-hidden": true, className: "pointer-events-none absolute end-2 top-1/2 size-3.5 -translate-y-1/2 text-fg-subtle" })] })] })) : null, _jsx(Pagination, { page: current, pageCount: pageCount, onPageChange: onPageChange, labels: labels, size: size, hideOnSinglePage: false, ...props })] }));
 });
 /** Previous / Next for cursor APIs where the total is unknown. */
-export const CursorPagination = React.forwardRef(function CursorPagination({ hasPrev, hasNext, onPrev, onNext, loading, status, size = "md", labels, className, ...props }, ref) {
+export const CursorPagination = /*#__PURE__*/ React.forwardRef(function CursorPagination({ hasPrev, hasNext, onPrev, onNext, loading, status, size = "md", labels, className, ...props }, ref) {
     const t = useLabels("pagination", paginationLabels, labels);
     const [pressed, setPressed] = React.useState(null);
     React.useEffect(() => {

package/dist/components/phone-input.js

@@ -53,7 +53,7 @@ const accept = (ch) => (ch >= "0" && ch <= "9") || ch === "+";
  * <Field label="Mobile"><PhoneInput defaultCountry="TR" onValueChange={(e164) => save(e164)} /></Field>
  * ```
  */
-export const PhoneInput = React.forwardRef(function PhoneInput(props, forwardedRef) {
+export const PhoneInput = /*#__PURE__*/ React.forwardRef(function PhoneInput(props, forwardedRef) {
     const { country: countryProp, defaultCountry, onCountryChange, countries, preferredCountries, display: displayMode = "national", hideCountry, value, defaultValue, onValueChange, validateOn = "blur", onValidate, mono, labels, name, invalid, inputClassName, onBlur, onKeyDown, disabled, readOnly, size, ...rest } = props;
     const { locale } = useLocale();
     const t = useLabels("phoneInput", phoneInputLabels, labels);

package/dist/components/pin-map.js

@@ -69,7 +69,7 @@ function niceStep(span, target) {
  *   selectedId={selected} onSelectedIdChange={setSelected} />
  * ```
  */
-export const PinMap = React.forwardRef(function PinMap({ pins, bounds, aspectRatio = 16 / 10, variant = "pin", selectedId: selectedProp, defaultSelectedId = null, onSelectedIdChange, callout, showLabels, backdrop, bare, className, style, children, ...props }, ref) {
+export const PinMap = /*#__PURE__*/ React.forwardRef(function PinMap({ pins, bounds, aspectRatio = 16 / 10, variant = "pin", selectedId: selectedProp, defaultSelectedId = null, onSelectedIdChange, callout, showLabels, backdrop, bare, className, style, children, ...props }, ref) {
     const f = useFormat();
     const [selectedId, setSelectedId] = useControllableState({ value: selectedProp, defaultValue: defaultSelectedId, onChange: onSelectedIdChange, name: "PinMap" });
     const [focusId, setFocusId] = React.useState(null);

package/dist/components/placeholder-art.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+export type PlaceholderArtPattern = "grid" | "dots" | "lines" | "rings" | "glow";
+export declare const PLACEHOLDER_ART_PATTERNS: PlaceholderArtPattern[];
+/** FNV-1a 32-bit — stable across server and client, so SSR and hydration agree. */
+export declare function hashSeed(seed: string): number;
+export interface PlaceholderArtRecipe {
+    pattern: PlaceholderArtPattern;
+    /** Chart palette slot (1–6) used as the tint. */
+    hue: number;
+    /** Second slot for the glow. */
+    hue2: number;
+    /** Line angle in degrees (lines). */
+    angle: number;
+    /** Pattern cell in px. */
+    cell: number;
+    /** Focal point in % (rings, glow, highlight). */
+    x: number;
+    y: number;
+}
+/** The same seed always gives the same recipe. `pattern` overrides the seeded choice. */
+export declare function placeholderArtRecipe(seed: string, pattern?: PlaceholderArtPattern | "auto"): PlaceholderArtRecipe;
+/** CSS background for a recipe. Token colours only, mixed per theme by the browser. */
+export declare function placeholderArtStyle(recipe: PlaceholderArtRecipe, strength?: "subtle" | "bold"): React.CSSProperties;
+export interface PlaceholderArtProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Any stable string (a slug, a name, a record id). Same seed → same art, on server and client. */
+    seed?: string;
+    /** Force a pattern. Default `"auto"` (picked from the seed). */
+    pattern?: PlaceholderArtPattern | "auto";
+    /** Centre icon. Default: an image glyph. `false` hides it. */
+    icon?: React.ReactNode | false;
+    /**
+     * What the missing image would show. Set → `role="img"` with this as its name; empty → decorative
+     * (`aria-hidden`).
+     */
+    label?: string;
+    /** Print the label (or a custom node) in the bottom corner, e.g. "Photo · Harbour terrace". */
+    caption?: boolean | React.ReactNode;
+    /** `bold` doubles the tint — for large hero areas on plain pages. Default `subtle`. */
+    strength?: "subtle" | "bold";
+}
+/**
+ * A tasteful, deterministic stand-in for a missing image: a token-tinted pattern (grid, dots, lines,
+ * rings or glow) chosen from a seed, an optional glyph and caption. No assets, no network, no
+ * dependencies; follows theme and accent. Fills its parent — give the parent a size, or use it inside
+ * `AspectRatio` / `Image`.
+ *
+ * ```tsx
+ * <AspectRatio ratio="4/3"><PlaceholderArt seed="harbour-terrace" label="Harbour terrace at dusk" /></AspectRatio>
+ * ```
+ */
+export declare const PlaceholderArt: React.ForwardRefExoticComponent<PlaceholderArtProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/placeholder-art.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Image as ImageIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+export const PLACEHOLDER_ART_PATTERNS = ["grid", "dots", "lines", "rings", "glow"];
+/** FNV-1a 32-bit — stable across server and client, so SSR and hydration agree. */
+export function hashSeed(seed) {
+    let h = 0x811c9dc5;
+    for (let i = 0; i < seed.length; i++) {
+        h ^= seed.charCodeAt(i);
+        h = Math.imul(h, 0x01000193);
+    }
+    return h >>> 0;
+}
+/** The same seed always gives the same recipe. `pattern` overrides the seeded choice. */
+export function placeholderArtRecipe(seed, pattern) {
+    const h = hashSeed(seed || "vamos");
+    const pick = (shift, n) => (h >>> shift) % n;
+    const hue = pick(0, 6) + 1;
+    return {
+        pattern: pattern && pattern !== "auto" ? pattern : PLACEHOLDER_ART_PATTERNS[pick(3, PLACEHOLDER_ART_PATTERNS.length)],
+        hue,
+        hue2: ((hue + pick(6, 4)) % 6) + 1,
+        angle: [30, 45, 60, 120, 135, 150][pick(9, 6)],
+        cell: [14, 18, 22, 26][pick(12, 4)],
+        x: 15 + pick(14, 70),
+        y: 10 + pick(21, 60),
+    };
+}
+/** CSS background for a recipe. Token colours only, mixed per theme by the browser. */
+export function placeholderArtStyle(recipe, strength = "subtle") {
+    const { pattern, hue, hue2, angle, cell, x, y } = recipe;
+    const tint = `var(--chart-${hue})`;
+    const k = strength === "bold" ? 1.6 : 1;
+    const ink = `color-mix(in oklab, ${tint} ${Math.round(30 * k)}%, transparent)`;
+    const base = `color-mix(in oklab, ${tint} ${Math.round(9 * k)}%, var(--surface-2))`;
+    const highlight = `radial-gradient(120% 90% at ${x}% ${y}%, color-mix(in oklab, ${tint} ${Math.round(16 * k)}%, transparent), transparent 65%)`;
+    let layers;
+    let sizes;
+    switch (pattern) {
+        case "grid":
+            layers = [highlight, `linear-gradient(${ink} 1px, transparent 1px)`, `linear-gradient(90deg, ${ink} 1px, transparent 1px)`];
+            sizes = ["100% 100%", `${cell}px ${cell}px`, `${cell}px ${cell}px`];
+            break;
+        case "dots":
+            layers = [highlight, `radial-gradient(circle, ${ink} 1.1px, transparent 1.6px)`];
+            sizes = ["100% 100%", `${cell}px ${cell}px`];
+            break;
+        case "lines":
+            layers = [highlight, `repeating-linear-gradient(${angle}deg, ${ink} 0 1px, transparent 1px ${Math.round(cell / 2)}px)`];
+            sizes = ["100% 100%", "100% 100%"];
+            break;
+        case "rings":
+            layers = [highlight, `repeating-radial-gradient(circle at ${x}% ${y}%, transparent 0 ${cell - 1}px, ${ink} ${cell - 1}px ${cell}px)`];
+            sizes = ["100% 100%", "100% 100%"];
+            break;
+        case "glow":
+        default:
+            layers = [
+                `radial-gradient(70% 80% at ${x}% ${y}%, color-mix(in oklab, ${tint} ${Math.round(34 * k)}%, transparent), transparent 70%)`,
+                `radial-gradient(60% 70% at ${100 - x}% ${100 - y}%, color-mix(in oklab, var(--chart-${hue2}) ${Math.round(26 * k)}%, transparent), transparent 70%)`,
+            ];
+            sizes = ["100% 100%", "100% 100%"];
+    }
+    return { backgroundColor: base, backgroundImage: layers.join(", "), backgroundSize: sizes.join(", "), backgroundPosition: "center" };
+}
+/**
+ * A tasteful, deterministic stand-in for a missing image: a token-tinted pattern (grid, dots, lines,
+ * rings or glow) chosen from a seed, an optional glyph and caption. No assets, no network, no
+ * dependencies; follows theme and accent. Fills its parent — give the parent a size, or use it inside
+ * `AspectRatio` / `Image`.
+ *
+ * ```tsx
+ * <AspectRatio ratio="4/3"><PlaceholderArt seed="harbour-terrace" label="Harbour terrace at dusk" /></AspectRatio>
+ * ```
+ */
+export const PlaceholderArt = /*#__PURE__*/ React.forwardRef(function PlaceholderArt({ seed, pattern = "auto", icon, label, caption, strength = "subtle", className, style, ...props }, ref) {
+    const recipe = placeholderArtRecipe(seed ?? label ?? "", pattern);
+    const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true };
+    const captionNode = caption === true ? label : caption || null;
+    return (_jsxs("div", { ref: ref, "data-slot": "placeholder-art", "data-pattern": recipe.pattern, ...a11y, className: cn("relative flex size-full min-h-16 items-center justify-center overflow-hidden text-fg-subtle", className), style: { ...placeholderArtStyle(recipe, strength), ...style }, ...props, children: [icon !== false ? (_jsx("span", { "aria-hidden": true, "data-slot": "placeholder-art-icon", className: "inline-flex size-10 items-center justify-center rounded-full border border-line bg-[color-mix(in_oklab,var(--surface)_72%,transparent)] [&_svg]:size-[18px]", children: icon ?? _jsx(ImageIcon, { strokeWidth: 1.5 }) })) : null, captionNode ? (_jsx("span", { "aria-hidden": true, "data-slot": "placeholder-art-caption", className: "absolute start-3 bottom-2.5 max-w-[calc(100%-1.5rem)] truncate font-mono text-[10.5px] tracking-[0.06em] text-fg-muted uppercase", children: captionNode })) : null] }));
+});

package/dist/components/popover.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import * as PopoverPrimitive from "radix-ui/popover";
 import { type VariantProps } from "class-variance-authority";
 /** Root. Controlled (`open` / `onOpenChange`) or uncontrolled (`defaultOpen`). */
 export declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;

package/dist/components/popover.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Popover as PopoverPrimitive } from "radix-ui";
+import * as PopoverPrimitive from "radix-ui/popover";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/cn.js";
 import { usePortalContainer } from "../lib/theme-scope.js";
@@ -14,7 +14,7 @@ export const PopoverTrigger = PopoverPrimitive.Trigger;
 export const PopoverAnchor = PopoverPrimitive.Anchor;
 /** Closes the popover; use `asChild` with a Button. */
 export const PopoverClose = PopoverPrimitive.Close;
-export const popoverContentVariants = cva(["surface-popover ui-pop z-(--z-popover) rounded-ui-lg outline-none", "max-h-(--radix-popover-content-available-height) overflow-y-auto overscroll-contain"], {
+export const popoverContentVariants = /*#__PURE__*/ cva(["surface-popover ui-pop z-(--z-popover) rounded-ui-lg outline-none", "max-h-(--radix-popover-content-available-height) overflow-y-auto overscroll-contain"], {
     variants: {
         size: {
             auto: "w-auto max-w-[calc(100vw-1.5rem)]",
@@ -31,13 +31,13 @@ export const popoverContentVariants = cva(["surface-popover ui-pop z-(--z-popove
     },
     defaultVariants: { size: "md", padded: true },
 });
-const PopoverTitleContext = React.createContext(null);
+const PopoverTitleContext = /*#__PURE__*/ React.createContext(null);
 /**
  * The floating panel. Portals into the nearest `ThemeScope`, sets the layer depth
  * (only the first layer blurs in glass mode; a popover inside a dialog turns opaque),
  * and is labelled by its `PopoverTitle` when one is rendered.
  */
-export const PopoverContent = React.forwardRef(function PopoverContent({ className, size, padded, arrow = false, sideOffset = 6, collisionPadding = 12, align = "center", children, ...props }, ref) {
+export const PopoverContent = /*#__PURE__*/ React.forwardRef(function PopoverContent({ className, size, padded, arrow = false, sideOffset = 6, collisionPadding = 12, align = "center", children, ...props }, ref) {
     const container = usePortalContainer();
     const titleId = React.useId();
     const [hasTitle, setHasTitle] = React.useState(false);
@@ -45,11 +45,11 @@ export const PopoverContent = React.forwardRef(function PopoverContent({ classNa
     return (_jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(Layer, { asChild: true, children: _jsxs(PopoverPrimitive.Content, { ref: ref, "data-slot": "popover-content", sideOffset: sideOffset, collisionPadding: collisionPadding, align: align, "aria-labelledby": hasTitle ? titleId : undefined, className: cn(popoverContentVariants({ size, padded }), className), ...props, children: [_jsx(PopoverTitleContext.Provider, { value: titleCtx, children: children }), arrow ? (_jsx(PopoverPrimitive.Arrow, { asChild: true, width: 14, height: 7, children: _jsx(FloatingArrow, {}) })) : null] }) }) }));
 });
 /** Title + optional description at the top of the content. */
-export const PopoverHeader = React.forwardRef(function PopoverHeader({ title, description, action, className, children, ...props }, ref) {
+export const PopoverHeader = /*#__PURE__*/ React.forwardRef(function PopoverHeader({ title, description, action, className, children, ...props }, ref) {
     return (_jsxs("div", { ref: ref, "data-slot": "popover-header", className: cn("mb-3 flex items-start gap-3", className), ...props, children: [_jsxs("div", { className: "grid min-w-0 flex-1 gap-0.5", children: [title != null ? _jsx(PopoverTitle, { children: title }) : null, description != null ? _jsx(PopoverDescription, { children: description }) : null, children] }), action ? _jsx("div", { className: "-me-1 -mt-1 shrink-0", children: action }) : null] }));
 });
 /** Heading inside the content; wired to `aria-labelledby`. */
-export const PopoverTitle = React.forwardRef(function PopoverTitle({ className, id, ...props }, ref) {
+export const PopoverTitle = /*#__PURE__*/ React.forwardRef(function PopoverTitle({ className, id, ...props }, ref) {
     const ctx = React.useContext(PopoverTitleContext);
     const register = ctx?.register;
     React.useEffect(() => {
@@ -64,6 +64,6 @@ export function PopoverDescription({ className, ...props }) {
     return _jsx("p", { "data-slot": "popover-description", className: cn("text-[13px] leading-snug text-fg-muted", className), ...props });
 }
 /** Bottom row for actions. Bleeds to the panel edge with a hairline on top. */
-export const PopoverFooter = React.forwardRef(function PopoverFooter({ className, ...props }, ref) {
+export const PopoverFooter = /*#__PURE__*/ React.forwardRef(function PopoverFooter({ className, ...props }, ref) {
     return (_jsx("div", { ref: ref, "data-slot": "popover-footer", className: cn("-mx-(--popover-p) -mb-(--popover-p) mt-4 flex items-center justify-end gap-2 border-t border-line px-(--popover-p) py-[calc(var(--popover-p)*0.7)]", className), ...props }));
 });

package/dist/components/progress.js

@@ -46,7 +46,7 @@ const valueColor = {
 /* ------------------------------------------------------------------ */
 /* Linear                                                               */
 /* ------------------------------------------------------------------ */
-export const progressTrackVariants = cva("relative w-full overflow-hidden rounded-full bg-track", {
+export const progressTrackVariants = /*#__PURE__*/ cva("relative w-full overflow-hidden rounded-full bg-track", {
     variants: {
         size: { xs: "h-0.5", sm: "h-1", md: "h-2" },
     },
@@ -63,7 +63,7 @@ export const progressTrackVariants = cva("relative w-full overflow-hidden rounde
  * <Progress aria-label="Loading" value={null} />
  * ```
  */
-export const Progress = React.forwardRef(function Progress({ value, max, tone, display, valueText, labels, size, label, showValue, hint, className, id, ...props }, ref) {
+export const Progress = /*#__PURE__*/ React.forwardRef(function Progress({ value, max, tone, display, valueText, labels, size, label, showValue, hint, className, id, ...props }, ref) {
     const m = useProgressModel({ value, max, tone, display, valueText, labels });
     const autoId = React.useId();
     const baseId = id ?? `progress${autoId.replace(/:/g, "")}`;
@@ -87,7 +87,7 @@ const CIRCLE = { sm: { px: 18, stroke: 2.5 }, md: { px: 40, stroke: 3.5 }, lg: {
  * <ProgressCircle aria-label="Profile complete" value={72} size="lg" />
  * ```
  */
-export const ProgressCircle = React.forwardRef(function ProgressCircle({ value, max, tone, display, valueText, labels, size = "md", showValue, children, className, ...props }, ref) {
+export const ProgressCircle = /*#__PURE__*/ React.forwardRef(function ProgressCircle({ value, max, tone, display, valueText, labels, size = "md", showValue, children, className, ...props }, ref) {
     const m = useProgressModel({ value, max, tone, display, valueText, labels });
     const { px, stroke } = CIRCLE[size];
     const r = (px - stroke) / 2;