@calliopelabs/ui 0.0.0-stage → 0.1.0

package/dist/overlays/Drawer.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Dialog as DrawerPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+import { overlayClassName } from "./Dialog.js";
+export function Drawer(props) {
+    return _jsx(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+export function DrawerTrigger(props) {
+    return _jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+export function DrawerClose(props) {
+    return _jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+const SIDE = {
+    right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=open]:animate-cui-slide-in-right sm:max-w-sm",
+    left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=open]:animate-cui-slide-in-left sm:max-w-sm",
+    bottom: "inset-x-0 bottom-0 max-h-[85dvh] border-t data-[state=open]:animate-cui-slide-in-bottom",
+};
+/**
+ * A modal panel from an edge: secondary content that should not cost a page
+ * (a detail sheet, a filter set), and the shell's rails on narrow screens.
+ * The Astrolift UI calls it a sheet.
+ */
+export function DrawerContent({ className, children, side = "right", hideCloseButton = false, ...props }) {
+    const { messages } = useUI();
+    return (_jsxs(DrawerPrimitive.Portal, { children: [_jsx(DrawerPrimitive.Overlay, { "data-slot": "drawer-overlay", className: overlayClassName() }), _jsxs(DrawerPrimitive.Content, { "data-slot": "drawer-content", "data-side": side, className: cn("fixed z-50 flex flex-col gap-4 overflow-y-auto border-border bg-background text-sm text-foreground shadow-lg outline-none", SIDE[side], className), ...props, children: [children, !hideCloseButton && (_jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close-button", "aria-label": messages.dialog.close, className: "absolute top-3 right-3 rounded-lg p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: _jsx(XIcon, { className: "size-4", "aria-hidden": true }) }))] })] }));
+}
+export function DrawerHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex flex-col gap-1 p-4 pr-10", className), ...props }));
+}
+export function DrawerFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
+}
+export function DrawerTitle({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn("font-head text-base font-semibold text-foreground", className), ...props }));
+}
+export function DrawerDescription({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}

package/dist/page/Breadcrumbs.d.ts

@@ -0,0 +1,20 @@
+import type { CrumbSwitchOption } from "../nav/model.js";
+export interface Crumb {
+    label: string;
+    /** Absent on the last crumb, the page itself. */
+    href?: string;
+    /** The sideways move: the area's other functions (`areaSwitcher`), or the person's projects. */
+    switcher?: readonly CrumbSwitchOption[];
+}
+export interface BreadcrumbsProps {
+    crumbs: readonly Crumb[];
+    /** The landmark's name. Defaults to "Breadcrumb". */
+    label?: string;
+    className?: string;
+}
+/**
+ * Where the page sits. Crumbs come from the navigation model, never from
+ * path segments (a segment is not always a page). The first crumb usually
+ * switches between the area's functions.
+ */
+export declare function Breadcrumbs({ crumbs, label, className }: BreadcrumbsProps): import("react").JSX.Element;

package/dist/page/Breadcrumbs.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../primitives/DropdownMenu.js";
+import { useUI } from "../provider/UIProvider.js";
+/**
+ * Where the page sits. Crumbs come from the navigation model, never from
+ * path segments (a segment is not always a page). The first crumb usually
+ * switches between the area's functions.
+ */
+export function Breadcrumbs({ crumbs, label, className }) {
+    const { messages } = useUI();
+    return (_jsx("nav", { "aria-label": label ?? messages.breadcrumb.label, className: cn("min-w-0", className), children: _jsx("ol", { className: "flex min-w-0 flex-wrap items-center gap-1.5 text-sm text-muted-foreground", children: crumbs.map((crumb, i) => (_jsxs("li", { className: "flex min-w-0 items-center gap-1.5", children: [i > 0 && (_jsx("span", { "aria-hidden": true, className: "text-muted-foreground/60", children: "\u203A" })), _jsx(CrumbItem, { crumb: crumb, isLast: i === crumbs.length - 1 })] }, `${crumb.label}-${i}`))) }) }));
+}
+function CrumbItem({ crumb, isLast }) {
+    const { Link, messages } = useUI();
+    if (crumb.switcher && crumb.switcher.length > 0) {
+        return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { "aria-label": messages.breadcrumb.switchFrom(crumb.label), className: "inline-flex min-w-0 items-center gap-1 rounded-lg hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: [_jsx("span", { className: "truncate", children: crumb.label }), _jsx(ChevronDownIcon, { className: "size-3.5 shrink-0", "aria-hidden": true })] }), _jsx(DropdownMenuContent, { className: "min-w-48", children: crumb.switcher.map((option) => (_jsx(DropdownMenuItem, { asChild: true, children: _jsxs(Link, { href: option.href, "aria-current": option.active ? "page" : undefined, children: [_jsx(CheckIcon, { className: cn("size-3.5", !option.active && "invisible"), "aria-hidden": true }), option.label] }) }, option.href))) })] }));
+    }
+    if (isLast || !crumb.href) {
+        return (_jsx("span", { "aria-current": isLast ? "page" : undefined, className: cn("min-w-0 truncate", isLast && "text-foreground"), children: crumb.label }));
+    }
+    return (_jsx(Link, { href: crumb.href, className: "min-w-0 truncate rounded-lg hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", children: crumb.label }));
+}

package/dist/page/PageFrame.d.ts

@@ -0,0 +1,17 @@
+import type * as React from "react";
+import { type PageHeaderProps } from "./PageHeader.js";
+export interface PageFrameProps extends PageHeaderProps {
+    /** The filter bar, under the header: search, filter selects, the list's actions. */
+    filters?: React.ReactNode;
+    /** A notice the reader must see before the body (a one-time reveal). Not a second list. */
+    notice?: React.ReactNode;
+    children: React.ReactNode;
+}
+/**
+ * A page: its header (breadcrumb, title, actions, tabs), an optional filter
+ * bar and notice, then the body. The body is made of Sections holding Cards,
+ * tables or charts, two container levels at most (Astrolift's container
+ * rule). A page fits about two screens; more becomes a tab, a section that
+ * loads when opened, or a drawer.
+ */
+export declare function PageFrame({ filters, notice, children, className, ...header }: PageFrameProps): React.JSX.Element;

package/dist/page/PageFrame.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { PageHeader } from "./PageHeader.js";
+/**
+ * A page: its header (breadcrumb, title, actions, tabs), an optional filter
+ * bar and notice, then the body. The body is made of Sections holding Cards,
+ * tables or charts, two container levels at most (Astrolift's container
+ * rule). A page fits about two screens; more becomes a tab, a section that
+ * loads when opened, or a drawer.
+ */
+export function PageFrame({ filters, notice, children, className, ...header }) {
+    return (_jsxs("div", { "data-slot": "page-frame", className: cn("flex min-w-0 flex-1 flex-col gap-4", className), children: [_jsx(PageHeader, { ...header }), notice, filters && (_jsx("div", { "data-slot": "page-filters", className: "flex min-w-0 flex-wrap items-center gap-2", children: filters })), _jsx("div", { className: "flex min-w-0 flex-col gap-6", children: children })] }));
+}

package/dist/page/PageHeader.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import { type Crumb } from "./Breadcrumbs.js";
+import { type TabNavItem } from "./TabNav.js";
+export interface PageHeaderProps {
+    crumbs?: readonly Crumb[];
+    title: React.ReactNode;
+    /** A status badge beside the title. */
+    status?: React.ReactNode;
+    /** One line of context beside the title: environment, region, model. */
+    context?: React.ReactNode;
+    /** Supporting copy under the title row. */
+    description?: React.ReactNode;
+    /** The page's one primary action. */
+    primaryAction?: React.ReactNode;
+    /** The `⋯` menu, beside the primary action. */
+    menu?: React.ReactNode;
+    /** At most one row of tabs: the views of a list, or an entity's own tabs. */
+    tabs?: readonly TabNavItem[];
+    /** Names the tab row. Defaults to "Page". */
+    tabsLabel?: string;
+    className?: string;
+}
+/**
+ * Every page's header, in three rows (Astrolift spec 44 §4.4): the
+ * breadcrumb, the title row with its status, context and actions, and at
+ * most one row of tabs. Pure.
+ */
+export declare function PageHeader({ crumbs, title, status, context, description, primaryAction, menu, tabs, tabsLabel, className, }: PageHeaderProps): React.JSX.Element;

package/dist/page/PageHeader.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { Breadcrumbs } from "./Breadcrumbs.js";
+import { TabNav } from "./TabNav.js";
+/**
+ * Every page's header, in three rows (Astrolift spec 44 §4.4): the
+ * breadcrumb, the title row with its status, context and actions, and at
+ * most one row of tabs. Pure.
+ */
+export function PageHeader({ crumbs, title, status, context, description, primaryAction, menu, tabs, tabsLabel = "Page", className, }) {
+    return (_jsxs("header", { "data-slot": "page-header", className: cn("flex min-w-0 flex-col gap-3", className), children: [crumbs && crumbs.length > 0 && _jsx(Breadcrumbs, { crumbs: crumbs }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2", children: [_jsx("h1", { className: "min-w-0 truncate font-head text-xl font-semibold", children: title }), status, context && (_jsx("span", { className: "min-w-0 truncate text-sm text-muted-foreground", children: context })), (primaryAction || menu) && (_jsxs("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [primaryAction, menu] }))] }), description && (_jsx("div", { className: "max-w-2xl text-sm [overflow-wrap:anywhere] text-muted-foreground", children: description })), tabs && tabs.length > 0 && (_jsx(TabNav, { tabs: tabs, label: tabsLabel, className: "-mx-3 md:-mx-6" }))] }));
+}

package/dist/page/Section.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+export interface SectionProps extends Omit<React.ComponentProps<"section">, "title"> {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Actions beside the title. */
+    action?: React.ReactNode;
+    /** A hairline under the heading; spacing alone by default. */
+    divided?: boolean;
+    /** For the document outline. Defaults to h2. */
+    headingLevel?: "h2" | "h3";
+    children: React.ReactNode;
+}
+/**
+ * A page region, expressed as a heading rather than a border: the top level
+ * of `PageFrame > Section > (Card | table | chart)`. Never wrap a bordered box
+ * around another, and never put a Section inside a Card.
+ */
+export declare function Section({ title, description, action, divided, headingLevel, className, children, ...props }: SectionProps): React.JSX.Element;

package/dist/page/Section.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/**
+ * A page region, expressed as a heading rather than a border: the top level
+ * of `PageFrame > Section > (Card | table | chart)`. Never wrap a bordered box
+ * around another, and never put a Section inside a Card.
+ */
+export function Section({ title, description, action, divided = false, headingLevel = "h2", className, children, ...props }) {
+    const Heading = headingLevel;
+    const hasHeader = Boolean(title || description || action);
+    return (_jsxs("section", { "data-slot": "section", className: cn("flex min-w-0 flex-col gap-4", className), ...props, children: [hasHeader && (_jsxs("div", { className: cn("flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between", divided && "border-b pb-3"), children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [title && _jsx(Heading, { className: "text-base font-semibold tracking-tight", children: title }), description && _jsx("p", { className: "text-sm text-muted-foreground", children: description })] }), action && _jsx("div", { className: "flex flex-wrap items-center gap-2", children: action })] })), children] }));
+}

package/dist/page/TabNav.d.ts

@@ -0,0 +1,19 @@
+export interface TabNavItem {
+    key: string;
+    label: string;
+    href: string;
+    active: boolean;
+}
+export interface TabNavProps {
+    tabs: readonly TabNavItem[];
+    /** The landmark's name ("Agent", "Views"). */
+    label: string;
+    className?: string;
+}
+/**
+ * Tabs that are pages: an entity's Overview, Activity, Settings; a list's
+ * views. Links, so each can be opened in a new tab and shared; the current
+ * one carries `aria-current="page"`. One row at most per page, named by
+ * function. On a narrow screen the row scrolls sideways under an edge fade.
+ */
+export declare function TabNav({ tabs, label, className }: TabNavProps): import("react").JSX.Element;

package/dist/page/TabNav.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { useUI } from "../provider/UIProvider.js";
+/**
+ * Tabs that are pages: an entity's Overview, Activity, Settings; a list's
+ * views. Links, so each can be opened in a new tab and shared; the current
+ * one carries `aria-current="page"`. One row at most per page, named by
+ * function. On a narrow screen the row scrolls sideways under an edge fade.
+ */
+export function TabNav({ tabs, label, className }) {
+    const { Link } = useUI();
+    return (_jsx("nav", { "aria-label": label, className: cn("flex min-w-0 [scrollbar-width:none] gap-1 overflow-x-auto border-b border-border [mask-image:linear-gradient(to_right,transparent_0,black_1.5rem,black_calc(100%-3rem),transparent_100%)] px-3 md:px-6", className), children: tabs.map((tab) => (_jsxs(Link, { href: tab.href, "aria-current": tab.active ? "page" : undefined, className: cn("relative shrink-0 rounded-lg px-3 py-2.5 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", tab.active
+                ? "font-medium text-foreground"
+                : "text-muted-foreground hover:text-foreground"), children: [tab.label, tab.active && (_jsx("span", { "aria-hidden": true, className: "absolute inset-x-1 -bottom-px h-0.5 rounded-full bg-primary" }))] }, tab.key))) }));
+}

package/dist/primitives/Button.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+/**
+ * Astrolift's button (shadcn), on the family tokens. Every size takes the
+ * corners setting (`rounded-lg` is `--radius`), so a 0px or 10px choice
+ * reaches buttons as it reaches panels.
+ */
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+    /** Render the child (a link, usually) with the button's styling instead of a <button>. */
+    asChild?: boolean;
+}
+export declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): React.JSX.Element;

package/dist/primitives/Button.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/**
+ * Astrolift's button (shadcn), on the family tokens. Every size takes the
+ * corners setting (`rounded-lg` is `--radius`), so a 0px or 10px choice
+ * reaches buttons as it reaches panels.
+ */
+export const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/85",
+            outline: "border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary",
+            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
+            destructive: "bg-danger/10 text-danger-fg hover:bg-danger/15 focus-visible:border-danger-border focus-visible:ring-danger/20",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-8 gap-1.5 px-2.5",
+            xs: "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-7 gap-1 px-2.5 text-[0.8rem] [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-9 gap-1.5 px-3",
+            icon: "size-8",
+            "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-7",
+            "icon-lg": "size-9",
+        },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+});
+export function Button({ className, variant, size, asChild = false, ...props }) {
+    const Component = asChild ? Slot.Root : "button";
+    return (_jsx(Component, { "data-slot": "button", "data-variant": variant ?? "default", className: cn(buttonVariants({ variant, size }), className), ...props }));
+}

package/dist/primitives/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import type * as React from "react";
+/**
+ * The selection box for data surfaces. Radix rather than a native input:
+ * `indeterminate` has no HTML attribute, so the header's "some selected"
+ * state cannot be expressed in JSX on a native box.
+ */
+export declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element;

package/dist/primitives/Checkbox.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/**
+ * The selection box for data surfaces. Radix rather than a native input:
+ * `indeterminate` has no HTML attribute, so the header's "some selected"
+ * state cannot be expressed in JSX on a native box.
+ */
+export function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer size-4 shrink-0 rounded-sm border border-input transition-shadow outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current", children: props.checked === "indeterminate" ? (_jsx(MinusIcon, { className: "size-3.5", "aria-hidden": true })) : (_jsx(CheckIcon, { className: "size-3.5", "aria-hidden": true })) }) }));
+}

package/dist/primitives/DropdownMenu.d.ts

@@ -0,0 +1,11 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import type * as React from "react";
+export declare function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+export declare function DropdownMenuTrigger(props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+export declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+export declare function DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+export declare function DropdownMenuItem({ className, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+export declare function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label>): React.JSX.Element;
+export declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;

package/dist/primitives/DropdownMenu.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+export function DropdownMenu(props) {
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+export function DropdownMenuTrigger(props) {
+    return _jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+export function DropdownMenuContent({ className, align = "start", sideOffset = 4, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", align: align, sideOffset: sideOffset, className: cn("z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-[state=open]:animate-cui-fade-in", className), ...props }) }));
+}
+export function DropdownMenuGroup(props) {
+    return _jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+export function DropdownMenuItem({ className, variant = "default", ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-variant": variant, className: cn("relative flex cursor-default items-center gap-1.5 rounded-lg px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[variant=destructive]:text-danger-fg data-[variant=destructive]:focus:bg-danger/10 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+export function DropdownMenuLabel({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", className: cn("px-1.5 py-1 text-xs font-medium text-muted-foreground", className), ...props }));
+}
+export function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}

package/dist/primitives/Input.d.ts

@@ -0,0 +1,2 @@
+import type * as React from "react";
+export declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;

package/dist/primitives/Input.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+export function Input({ className, type, ...props }) {
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm", className), ...props }));
+}

package/dist/primitives/Popover.d.ts

@@ -0,0 +1,5 @@
+import { Popover as PopoverPrimitive } from "radix-ui";
+import type * as React from "react";
+export declare function Popover(props: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+export declare function PopoverTrigger(props: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element;
+export declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element;

package/dist/primitives/Popover.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+export function Popover(props) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+export function PopoverTrigger(props) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+export function PopoverContent({ className, align = "center", sideOffset = 4, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden data-[state=open]:animate-cui-fade-in", className), ...props }) }));
+}

package/dist/primitives/Skeleton.d.ts

@@ -0,0 +1,3 @@
+import type * as React from "react";
+/** A placeholder block with the geometry of what it stands in for. It pulses; with reduced motion it holds still. */
+export declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/primitives/Skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/** A placeholder block with the geometry of what it stands in for. It pulses; with reduced motion it holds still. */
+export function Skeleton({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "skeleton", "aria-hidden": true, className: cn("animate-pulse rounded-lg bg-muted motion-reduce:animate-none", className), ...props }));
+}

package/dist/primitives/Tabs.d.ts

@@ -0,0 +1,12 @@
+import { Tabs as TabsPrimitive } from "radix-ui";
+import type * as React from "react";
+/**
+ * In-page tabs: panels on one URL, with the ARIA tablist pattern (arrow keys
+ * move between tabs). Tabs that are pages (an entity's Overview, Logs,
+ * Settings) are links: use TabNav. The underline matches TabNav's, so the two
+ * read as one family.
+ */
+export declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
+export declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): React.JSX.Element;
+export declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
+export declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;

package/dist/primitives/Tabs.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { cn } from "../lib/cn.js";
+/**
+ * In-page tabs: panels on one URL, with the ARIA tablist pattern (arrow keys
+ * move between tabs). Tabs that are pages (an entity's Overview, Logs,
+ * Settings) are links: use TabNav. The underline matches TabNav's, so the two
+ * read as one family.
+ */
+export function Tabs({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", className: cn("flex min-w-0 flex-col gap-4", className), ...props }));
+}
+export function TabsList({ className, ...props }) {
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn("flex min-w-0 gap-1 overflow-x-auto border-b border-border", className), ...props }));
+}
+export function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative shrink-0 px-3 py-2.5 text-sm text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:rounded-lg focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-medium data-[state=active]:text-foreground data-[state=active]:after:absolute data-[state=active]:after:inset-x-1 data-[state=active]:after:-bottom-px data-[state=active]:after:h-0.5 data-[state=active]:after:rounded-full data-[state=active]:after:bg-primary", className), ...props }));
+}
+export function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("min-w-0 outline-none focus-visible:ring-2 focus-visible:ring-ring", className), ...props }));
+}

package/dist/provider/UIProvider.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { type MessageOverrides, type Messages } from "./messages.js";
+/** What the package hands a link: anchor props with a string `href`. */
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    ref?: React.Ref<HTMLAnchorElement>;
+}
+/** The app's link component: next/link, a router's Link, or a plain anchor. */
+export type LinkComponent = React.ComponentType<LinkProps>;
+interface UIContextValue {
+    Link: LinkComponent;
+    messages: Messages;
+}
+export interface UIProviderProps {
+    /** Rendered for every link the package draws. Defaults to a plain `<a>`. */
+    link?: LinkComponent;
+    /** Copy overrides, one level deep (`{ table: { retry: "Reintentar" } }`). */
+    messages?: MessageOverrides;
+    children: React.ReactNode;
+}
+/**
+ * The app's environment: its link component and its copy. The package never
+ * imports a router, so this is how navigation stays the app's: pass next/link
+ * in a Next app, your router's Link elsewhere. Without a provider every link
+ * is a plain anchor and every string is English.
+ */
+export declare function UIProvider({ link, messages, children }: UIProviderProps): React.JSX.Element;
+export declare function useUI(): UIContextValue;
+export {};

package/dist/provider/UIProvider.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { defaultMessages, mergeMessages, } from "./messages.js";
+function Anchor({ ref, children, ...props }) {
+    return (_jsx("a", { ref: ref, ...props, children: children }));
+}
+const UIContext = React.createContext({ Link: Anchor, messages: defaultMessages });
+/**
+ * The app's environment: its link component and its copy. The package never
+ * imports a router, so this is how navigation stays the app's: pass next/link
+ * in a Next app, your router's Link elsewhere. Without a provider every link
+ * is a plain anchor and every string is English.
+ */
+export function UIProvider({ link, messages, children }) {
+    const value = React.useMemo(() => ({ Link: link ?? Anchor, messages: mergeMessages(messages) }), [link, messages]);
+    return _jsx(UIContext.Provider, { value: value, children: children });
+}
+export function useUI() {
+    return React.useContext(UIContext);
+}

package/dist/provider/messages.d.ts

@@ -0,0 +1,106 @@
+/**
+ * Every string the package renders, in English. An app with a message
+ * catalog overrides any of them through `UIProvider messages={...}`; a
+ * message that takes a value is a function, so the app's own i18n formats
+ * it (plurals, numbers, word order).
+ */
+export interface Messages {
+    shell: {
+        skipToContent: string;
+        /** The mobile button and drawer title for the sidebar. */
+        navigation: string;
+        close: string;
+    };
+    nav: {
+        /** The sidebar's landmark name. */
+        label: string;
+        collapse: string;
+        expand: string;
+        collapseTitle: string;
+        expandTitle: string;
+    };
+    rail: {
+        show: (label: string) => string;
+        hide: (label: string) => string;
+        resize: (label: string) => string;
+        expand: (label: string) => string;
+        restore: (label: string) => string;
+    };
+    breadcrumb: {
+        label: string;
+        switchFrom: (label: string) => string;
+    };
+    table: {
+        search: string;
+        clearSearch: string;
+        results: (count: number) => string;
+        loading: string;
+        loadFailed: (label: string) => string;
+        requestFailed: string;
+        retry: string;
+        noMatches: string;
+        noMatchesDescription: (label: string) => string;
+        selected: (count: number) => string;
+        clearSelection: string;
+        selectRow: (id: string) => string;
+        selectPage: (label: string) => string;
+        actions: string;
+        rowActions: (label: string) => string;
+        rowsPerPage: string;
+        page: (page: number) => string;
+        previousPage: string;
+        nextPage: string;
+        sortKey: (index: number) => string;
+    };
+    states: {
+        errorTitle: string;
+        unexpected: string;
+        retry: string;
+        errorId: (digest: string) => string;
+        loading: string;
+        learnMore: string;
+    };
+    dialog: {
+        close: string;
+    };
+    confirm: {
+        confirm: string;
+        cancel: string;
+        working: string;
+        failed: string;
+        reasonRequired: string;
+    };
+    user: {
+        /** The collapsed trigger's name: it shows only the initials, so the name starts with them (WCAG 2.5.3). */
+        accountMenu: (name: string, initials: string) => string;
+        signOut: string;
+    };
+    appearance: {
+        locked: string;
+        themes: string;
+        accent: string;
+        ground: string;
+        density: string;
+        corners: string;
+        reset: string;
+        mode: (mode: "dark" | "light") => string;
+        groundLabel: (ground: string, label: string) => string;
+        accentLabel: (accent: string, label: string) => string;
+        densityLabel: (density: "compact" | "cards") => string;
+        densityHint: (density: "compact" | "cards") => string;
+        cornersLabel: (corners: number) => string;
+        customAccent: string;
+        customAccentPick: string;
+        customAccentHelp: string;
+        customAccentInvalid: string;
+        customAccentInUse: string;
+        customAccentOk: (ratio: string) => string;
+        customAccentFaint: (ratio: string, min: number, mode: "dark" | "light") => string;
+    };
+}
+export declare const defaultMessages: Messages;
+/** Any subset of the messages, one level deep. */
+export type MessageOverrides = {
+    [Group in keyof Messages]?: Partial<Messages[Group]>;
+};
+export declare function mergeMessages(overrides: MessageOverrides | undefined): Messages;