@ciridae/ui 0.3.0 → 0.3.3

package/dist/components/ui/app-shell-page.js

@@ -9,7 +9,7 @@ function AppShellPageHeader({ actions, className, description, title, ...props }
     return (_jsx(PageHeader, { className: className, ...props, children: _jsxs(PageHeaderMain, { className: "relative pl-14 md:pl-6 lg:pl-8", children: [_jsx(SidebarTrigger, { className: "absolute top-1/2 left-4 -translate-y-1/2 md:hidden" }), _jsxs(PageHeaderContent, { children: [_jsx(PageHeaderTitle, { children: title }), description ? _jsx(PageHeaderDescription, { children: description }) : null] }), actions ? _jsx(PageHeaderActions, { children: actions }) : null] }) }));
 }
 function AppShellWelcome({ brand, children, className, description, title, ...props }) {
-    return (_jsx("div", { "data-slot": "app-shell-welcome", className: cn("flex min-h-0 flex-1 items-center justify-center p-6", className), ...props, children: _jsxs("div", { className: "flex max-w-md flex-col items-center gap-4 text-center", children: [brand ? _jsx(AppShellWelcomeBrand, { brand: brand }) : null, _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("h2", { className: "text-2xl font-heading tracking-normal", children: title }), description ? (_jsx("div", { className: "text-sm text-muted-foreground [&>a]:font-medium [&>a]:text-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-foreground/72", children: description })) : null] }), children] }) }));
+    return (_jsx("div", { "data-slot": "app-shell-welcome", className: cn("flex min-h-0 flex-1 items-center justify-center p-6", className), ...props, children: _jsxs("div", { className: "flex max-w-md flex-col items-center gap-4 text-center", children: [brand ? _jsx(AppShellWelcomeBrand, { brand: brand }) : null, _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("h2", { className: "font-heading text-2xl tracking-normal", children: title }), description ? (_jsx("div", { className: "text-sm text-muted-foreground [&>a]:font-medium [&>a]:text-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-foreground/72", children: description })) : null] }), children] }) }));
 }
 function AppShellWelcomeBrand({ brand }) {
     return (_jsxs(_Fragment, { children: [_jsx("img", { alt: brand.name, className: "h-24 w-auto dark:hidden", src: brand.iconLight }), brand.iconDark ? (_jsx("img", { alt: brand.name, className: "hidden h-24 w-auto dark:block", src: brand.iconDark })) : null] }));

package/dist/components/ui/app-shell.js

@@ -24,7 +24,7 @@ function AppShellExpandedBrand({ brand }) {
 }
 function AppShellWordmark({ brand }) {
     if (!brand.wordmarkLight) {
-        return (_jsx("span", { className: "truncate text-sm font-control text-sidebar-foreground", children: brand.name }));
+        return (_jsx("span", { className: "font-control truncate text-sm text-sidebar-foreground", children: brand.name }));
     }
     return (_jsx(AppShellThemedImage, { alt: brand.name, className: "h-3.5 w-auto max-w-[9.5rem]", darkSrc: brand.wordmarkDark, lightSrc: brand.wordmarkLight }));
 }

package/dist/components/ui/button-group.js

@@ -11,6 +11,6 @@ function ButtonGroupText({ className, asChild = false, ...props }) {
     return (_jsx(Comp, { className: cn("flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
 function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
-    return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("relative m-0 self-stretch bg-input data-[orientation=horizontal]:-mt-px data-[orientation=vertical]:h-auto data-[orientation=vertical]:-ml-px", className), ...props }));
+    return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("relative m-0 self-stretch bg-input data-[orientation=horizontal]:-mt-px data-[orientation=vertical]:-ml-px data-[orientation=vertical]:h-auto", className), ...props }));
 }
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };

package/dist/components/ui/card.js

@@ -8,7 +8,7 @@ function Card({ className, variant = "surface", ...props }) {
     return (_jsx("div", { "data-slot": "card", "data-variant": variant, className: cn("group/card flex flex-col gap-(--panel-gap)", cardVariants[variant], className), ...props }));
 }
 function CardHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 has-data-[slot=card-action]:grid-cols-[1fr_auto] group-data-[variant=surface]/card:px-(--panel-padding) [.border-b]:pb-(--panel-padding)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-header", className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 group-data-[variant=surface]/card:px-(--panel-padding) has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-(--panel-padding)", className), ...props }));
 }
 function CardTitle({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-title", className: cn("leading-none font-medium", className), ...props }));

package/dist/components/ui/ciridae-ui-provider.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import { type ThemeProviderProps } from "@ciridae/ui/color-theme";
+export type CiridaeUiProviderProps = {
+    children: ReactNode;
+    agentation?: boolean;
+} & Pick<ThemeProviderProps, "defaultMode">;
+declare function CiridaeUiProvider({ agentation, children, defaultMode }: CiridaeUiProviderProps): import("react").JSX.Element;
+export { CiridaeUiProvider };

package/dist/components/ui/ciridae-ui-provider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, Suspense } from "react";
+import { ThemeProvider, useTheme } from "@ciridae/ui/color-theme";
+import { Toaster } from "@ciridae/ui/sonner";
+import { TooltipProvider } from "@ciridae/ui/tooltip";
+const LazyAgentation = lazy(() => import("agentation").then((module) => ({ default: module.Agentation })));
+function CiridaeUiToaster() {
+    const { mode } = useTheme();
+    return _jsx(Toaster, { richColors: true, closeButton: true, theme: mode });
+}
+function CiridaeUiProvider({ agentation = false, children, defaultMode }) {
+    return (_jsx(ThemeProvider, { defaultMode: defaultMode, children: _jsxs(TooltipProvider, { children: [children, _jsx(CiridaeUiToaster, {}), agentation ? (_jsx(Suspense, { fallback: null, children: _jsx(LazyAgentation, {}) })) : null] }) }));
+}
+export { CiridaeUiProvider };

package/dist/components/ui/color-theme.d.ts

@@ -2,3 +2,4 @@ import * as React from "react";
 import { type ResolvedTheme, type ThemeMode, type ThemeProviderProps } from "./color-theme-context";
 declare function ThemeProvider({ children, defaultMode, storageKey, }: ThemeProviderProps): React.JSX.Element;
 export { ThemeProvider, type ResolvedTheme, type ThemeMode, type ThemeProviderProps };
+export { useTheme } from "./use-color-theme";

package/dist/components/ui/color-theme.js

@@ -45,3 +45,4 @@ function getSystemTheme() {
     return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 export { ThemeProvider };
+export { useTheme } from "./use-color-theme";

package/dist/components/ui/combobox.js

@@ -19,7 +19,7 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
     return (_jsxs(InputGroup, { className: cn("w-auto", className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", asChild: true, "data-slot": "input-group-button", className: "group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent", disabled: disabled, children: _jsx(ComboboxTrigger, {}) })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
 }
 function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
-    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-(--control-height-sm) *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }) }) }));
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: "isolate z-50", children: _jsx(ComboboxPrimitive.Popup, { "data-slot": "combobox-content", "data-chips": !!anchor, className: cn("group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-(--control-height-sm) *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none", className), ...props }) }) }));
 }
 function ComboboxList({ className, ...props }) {
     return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn("max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 data-empty:p-0", className), ...props }));
@@ -31,7 +31,7 @@ function ComboboxGroup({ className, ...props }) {
     return _jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props });
 }
 function ComboboxLabel({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn("px-(--menu-item-padding-x) py-1 text-meta text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm", className), ...props }));
+    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn("text-meta px-(--menu-item-padding-x) py-1 text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm", className), ...props }));
 }
 function ComboboxCollection({ ...props }) {
     return _jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });

package/dist/components/ui/command.js

@@ -33,6 +33,6 @@ function CommandItem({ className, ...props }) {
     return (_jsx(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm px-(--menu-item-padding-x) py-1 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props }));
 }
 function CommandShortcut({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "command-shortcut", className: cn("ml-auto text-meta font-mono text-muted-foreground", className), ...props }));
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn("text-meta ml-auto font-mono text-muted-foreground", className), ...props }));
 }
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/ui/context-menu.js

@@ -52,12 +52,12 @@ function ContextMenuRadioItem({ className, children, ...props }) {
     return (_jsxs(ContextMenuPrimitive.RadioItem, { "data-slot": "context-menu-radio-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm py-1 pr-(--menu-item-padding-x) pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(ContextMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
 }
 function ContextMenuLabel({ className, inset, ...props }) {
-    return (_jsx(ContextMenuPrimitive.Label, { "data-slot": "context-menu-label", "data-inset": inset, className: cn("px-(--menu-item-padding-x) py-1 text-meta text-muted-foreground data-[inset]:pl-8", className), ...props }));
+    return (_jsx(ContextMenuPrimitive.Label, { "data-slot": "context-menu-label", "data-inset": inset, className: cn("text-meta px-(--menu-item-padding-x) py-1 text-muted-foreground data-[inset]:pl-8", className), ...props }));
 }
 function ContextMenuSeparator({ className, ...props }) {
     return (_jsx(ContextMenuPrimitive.Separator, { "data-slot": "context-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
 }
 function ContextMenuShortcut({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn("ml-auto text-meta font-mono text-muted-foreground", className), ...props }));
+    return (_jsx("span", { "data-slot": "context-menu-shortcut", className: cn("text-meta ml-auto font-mono text-muted-foreground", className), ...props }));
 }
 export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuPortalContainerProvider, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

package/dist/components/ui/data-table-grid.js

@@ -15,6 +15,6 @@ function DataTableHeaderCell({ header }) {
     const Icon = sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ArrowUpDownIcon;
     if (!header.column.getCanSort())
         return flexRender(header.column.columnDef.header, header.getContext());
-    return (_jsxs(Button, { "aria-pressed": Boolean(sorted), className: "-ml-2 h-auto px-2 py-0 text-meta text-muted-foreground hover:bg-transparent hover:text-foreground", onClick: header.column.getToggleSortingHandler(), size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(Icon, {})] }));
+    return (_jsxs(Button, { "aria-pressed": Boolean(sorted), className: "text-meta -ml-2 h-auto px-2 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", onClick: header.column.getToggleSortingHandler(), size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(Icon, {})] }));
 }
 export { DataTableGrid };

package/dist/components/ui/data-table.js

@@ -22,6 +22,6 @@ function DataTableSkeleton({ className, ...props }) {
 }
 function SortableTableHead({ active = false, children, className, direction = "asc", onSort, align = "left", ...props }) {
     const Icon = active ? (direction === "asc" ? ArrowUpIcon : ArrowDownIcon) : ArrowUpDownIcon;
-    return (_jsx(TableHead, { "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...props, children: _jsxs(Button, { "aria-pressed": active, className: cn("h-auto px-0 py-0 text-meta text-muted-foreground hover:bg-transparent hover:text-foreground", align === "right" ? "ml-auto justify-end" : "justify-start"), onClick: onSort, size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: children }), _jsx(Icon, {})] }) }));
+    return (_jsx(TableHead, { "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...props, children: _jsxs(Button, { "aria-pressed": active, className: cn("text-meta h-auto px-0 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", align === "right" ? "ml-auto justify-end" : "justify-start"), onClick: onSort, size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: children }), _jsx(Icon, {})] }) }));
 }
 export { DataTable, DataTableToolbar, DataTableContent, DataTableEmpty, DataTableSkeleton, TanStackDataTable, SortableTableHead, };

package/dist/components/ui/dropdown-menu.js

@@ -43,13 +43,13 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
     return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-sm py-1 pr-(--menu-item-padding-x) pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
 }
 function DropdownMenuLabel({ className, inset, ...props }) {
-    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-(--menu-item-padding-x) py-1 text-meta text-muted-foreground data-[inset]:pl-8", className), ...props }));
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("text-meta px-(--menu-item-padding-x) py-1 text-muted-foreground data-[inset]:pl-8", className), ...props }));
 }
 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 }));
 }
 function DropdownMenuShortcut({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-meta font-mono text-muted-foreground", className), ...props }));
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("text-meta ml-auto font-mono text-muted-foreground", className), ...props }));
 }
 function DropdownMenuSub({ ...props }) {
     return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });

package/dist/components/ui/input-group.js

@@ -57,6 +57,6 @@ function InputGroupInput({ className, ...props }) {
     return (_jsx(Input, { "data-slot": "input-group-control", className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className), ...props }));
 }
 function InputGroupTextarea({ className, ...props }) {
-    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className), ...props }));
+    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn("field-sizing-fixed! w-full! min-w-0 flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className), ...props }));
 }
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/dist/components/ui/menubar.js

@@ -43,13 +43,13 @@ function MenubarRadioItem({ className, children, ...props }) {
     return (_jsxs(MenubarPrimitive.RadioItem, { "data-slot": "menubar-radio-item", className: cn("relative flex min-h-(--menu-item-height) cursor-default items-center gap-(--control-gap) rounded-xs py-1 pr-(--menu-item-padding-x) pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground 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: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(MenubarPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
 }
 function MenubarLabel({ className, inset, ...props }) {
-    return (_jsx(MenubarPrimitive.Label, { "data-slot": "menubar-label", "data-inset": inset, className: cn("px-(--menu-item-padding-x) py-1 text-meta text-muted-foreground data-[inset]:pl-8", className), ...props }));
+    return (_jsx(MenubarPrimitive.Label, { "data-slot": "menubar-label", "data-inset": inset, className: cn("text-meta px-(--menu-item-padding-x) py-1 text-muted-foreground data-[inset]:pl-8", className), ...props }));
 }
 function MenubarSeparator({ className, ...props }) {
     return (_jsx(MenubarPrimitive.Separator, { "data-slot": "menubar-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
 }
 function MenubarShortcut({ className, ...props }) {
-    return (_jsx("span", { "data-slot": "menubar-shortcut", className: cn("ml-auto text-meta font-mono text-muted-foreground", className), ...props }));
+    return (_jsx("span", { "data-slot": "menubar-shortcut", className: cn("text-meta ml-auto font-mono text-muted-foreground", className), ...props }));
 }
 function MenubarSub({ ...props }) {
     return _jsx(MenubarPrimitive.Sub, { "data-slot": "menubar-sub", ...props });

package/dist/components/ui/page-header.js

@@ -9,7 +9,7 @@ function PageHeaderMain({ className, ...props }) {
     return (_jsx("div", { "data-slot": "page-header-main", className: cn("flex flex-col gap-3 px-4 py-3 md:flex-row md:items-center md:justify-between md:px-6 lg:px-8", className), ...props }));
 }
 function PageHeaderContent({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "page-header-content", className: cn("flex min-w-0 max-w-3xl flex-col gap-1", className), ...props }));
+    return (_jsx("div", { "data-slot": "page-header-content", className: cn("flex max-w-3xl min-w-0 flex-col gap-1", className), ...props }));
 }
 function PageHeaderBackButton({ asChild = false, children, className, ...props }) {
     if (asChild) {

package/dist/components/ui/registry-docs-api.js

@@ -4,6 +4,6 @@ function RegistryDocsApiTable({ props }) {
     return (_jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: "Prop" }), _jsx(TableHead, { children: "Type" }), _jsx(TableHead, { children: "Default" }), _jsx(TableHead, { children: "Description" })] }) }), _jsx(TableBody, { children: props.map((prop) => (_jsx(RegistryDocsApiTableRow, { prop: prop }, prop.name))) })] }));
 }
 function RegistryDocsApiTableRow({ prop }) {
-    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("code", { className: "font-mono text-xs", children: prop.name }) }), _jsx(TableCell, { className: "max-w-72", children: _jsx("code", { className: "font-mono text-xs text-muted-foreground whitespace-normal", children: prop.type }) }), _jsx(TableCell, { children: prop.defaultValue ? (_jsx("code", { className: "font-mono text-xs text-muted-foreground", children: prop.defaultValue })) : (_jsx("span", { className: "text-muted-foreground", children: "None" })) }), _jsx(TableCell, { className: "whitespace-normal text-muted-foreground", children: prop.description })] }));
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("code", { className: "font-mono text-xs", children: prop.name }) }), _jsx(TableCell, { className: "max-w-72", children: _jsx("code", { className: "font-mono text-xs whitespace-normal text-muted-foreground", children: prop.type }) }), _jsx(TableCell, { children: prop.defaultValue ? (_jsx("code", { className: "font-mono text-xs text-muted-foreground", children: prop.defaultValue })) : (_jsx("span", { className: "text-muted-foreground", children: "None" })) }), _jsx(TableCell, { className: "whitespace-normal text-muted-foreground", children: prop.description })] }));
 }
 export { RegistryDocsApiTable };

package/dist/components/ui/registry-docs-showcase.js

@@ -10,7 +10,7 @@ function RegistryDocsShowcase({ className, code, codeLabel = "preview.tsx", defa
     return (_jsxs("div", { "data-slot": "registry-docs-showcase", className: cn("min-w-0 overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs", className), ...props, children: [_jsx(RegistryDocsShowcasePreview, { previewMode: previewMode, children: preview }), _jsx(RegistryDocsShowcaseCode, { code: code, codeId: codeId, codeLabel: codeLabel, expanded: expanded, onExpandedChange: setExpanded })] }));
 }
 function RegistryDocsShowcasePreview({ children, previewMode, }) {
-    return (_jsx("div", { "data-slot": "registry-docs-showcase-preview", "data-preview-mode": previewMode, className: "flex min-h-[28rem] items-center justify-center overflow-auto bg-background p-(--panel-padding) data-[preview-mode=canvas]:min-h-[34rem] data-[preview-mode=canvas]:items-stretch data-[preview-mode=canvas]:justify-stretch data-[preview-mode=canvas]:p-2 data-[preview-mode=page]:min-h-[36rem] data-[preview-mode=page]:items-start data-[preview-mode=page]:p-0 md:data-[preview-mode=canvas]:min-h-[42rem] md:data-[preview-mode=canvas]:p-3", children: _jsx("div", { className: "flex min-w-0 w-full items-center justify-center data-[preview-mode=canvas]:min-h-full data-[preview-mode=canvas]:items-stretch data-[preview-mode=canvas]:justify-stretch data-[preview-mode=page]:min-h-full data-[preview-mode=page]:items-stretch", "data-preview-mode": previewMode, children: children }) }));
+    return (_jsx("div", { "data-slot": "registry-docs-showcase-preview", "data-preview-mode": previewMode, className: "flex min-h-[28rem] items-center justify-center overflow-auto bg-background p-(--panel-padding) data-[preview-mode=canvas]:min-h-[34rem] data-[preview-mode=canvas]:items-stretch data-[preview-mode=canvas]:justify-stretch data-[preview-mode=canvas]:p-2 data-[preview-mode=page]:min-h-[36rem] data-[preview-mode=page]:items-start data-[preview-mode=page]:p-0 md:data-[preview-mode=canvas]:min-h-[42rem] md:data-[preview-mode=canvas]:p-3", children: _jsx("div", { className: "flex w-full min-w-0 items-center justify-center data-[preview-mode=canvas]:min-h-full data-[preview-mode=canvas]:items-stretch data-[preview-mode=canvas]:justify-stretch data-[preview-mode=page]:min-h-full data-[preview-mode=page]:items-stretch", "data-preview-mode": previewMode, children: children }) }));
 }
 function RegistryDocsShowcaseCode({ code, codeId, codeLabel, expanded, onExpandedChange, }) {
     return (_jsxs("div", { "data-slot": "registry-docs-showcase-code", className: "relative border-t bg-muted/20", children: [_jsx(RegistryDocsShowcaseToggle, { codeId: codeId, expanded: expanded, onExpandedChange: onExpandedChange }), _jsxs("div", { id: codeId, "aria-label": codeLabel, className: cn("relative", expanded ? "max-h-[42rem] overflow-auto" : "max-h-44 overflow-hidden"), children: [_jsxs("div", { className: "mx-auto w-full max-w-5xl", children: [expanded ? _jsx(RegistryDocsShowcaseCopyButton, { code: code }) : null, _jsx(RegistryDocsCodeSnippet, { code: code, className: cn("text-sm [&_.shiki]:text-sm", expanded ? "px-6 pt-8 pb-8 md:px-8" : "p-7 pb-16 opacity-80") })] }), expanded ? null : _jsx(RegistryDocsShowcaseFade, {})] })] }));

package/dist/components/ui/select.js

@@ -21,7 +21,7 @@ function SelectContent({ className, children, position = "item-aligned", align =
                         "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-(--menu-item-padding-x) py-1 text-meta text-muted-foreground", className), ...props }));
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("text-meta px-(--menu-item-padding-x) py-1 text-muted-foreground", className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
     return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex min-h-(--menu-item-height) w-full cursor-default items-center gap-(--control-gap) rounded-sm py-1 pr-8 pl-(--menu-item-padding-x) text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-(--control-gap)", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));

package/dist/components/ui/sidebar/group.js

@@ -6,11 +6,11 @@ function SidebarGroup({ className, ...props }) {
 }
 function SidebarGroupLabel({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot.Root : "div";
-    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn("flex h-(--sidebar-item-height-sm) shrink-0 items-center rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x) text-meta text-sidebar-foreground/45 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-[var(--focus-ring-width)] [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn("text-meta flex h-(--sidebar-item-height-sm) shrink-0 items-center rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x) text-sidebar-foreground/45 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-[var(--focus-ring-width)] [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className), ...props }));
 }
 function SidebarGroupAction({ className, asChild = false, ...props }) {
     const Comp = asChild ? Slot.Root : "button";
-    return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn("absolute top-(--sidebar-group-padding) right-(--sidebar-group-padding) flex size-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--sidebar-item-radius)] p-0 text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] after:absolute after:-inset-2 md:after:hidden [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "group-data-[collapsible=icon]:hidden", className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", className: cn("absolute top-(--sidebar-group-padding) right-(--sidebar-group-padding) flex size-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--sidebar-item-radius)] p-0 text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-colors after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] md:after:hidden [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "group-data-[collapsible=icon]:hidden", className), ...props }));
 }
 function SidebarGroupContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props }));

package/dist/components/ui/sidebar/menu.js

@@ -40,11 +40,11 @@ function SidebarMenuButton({ asChild = false, isActive = false, variant = "defau
 }
 function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
     const Comp = asChild ? Slot.Root : "button";
-    return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn("absolute top-0.5 right-0.5 flex size-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--sidebar-item-radius)] p-0 text-sidebar-foreground/60 ring-sidebar-ring outline-hidden transition-colors peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] after:absolute after:-inset-2 md:after:hidden [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover &&
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", className: cn("absolute top-0.5 right-0.5 flex size-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--sidebar-item-radius)] p-0 text-sidebar-foreground/60 ring-sidebar-ring outline-hidden transition-colors peer-hover/menu-button:text-sidebar-accent-foreground after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] md:after:hidden [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover &&
             "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0", className), ...props }));
 }
 function SidebarMenuBadge({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("pointer-events-none absolute right-1 flex h-(--sidebar-item-height-sm) min-w-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--badge-radius)] px-(--badge-padding-x) text-meta text-sidebar-foreground/60 tabular-nums select-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className), ...props }));
+    return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("text-meta pointer-events-none absolute right-1 flex h-(--sidebar-item-height-sm) min-w-(--sidebar-item-height-sm) items-center justify-center rounded-[var(--badge-radius)] px-(--badge-padding-x) text-sidebar-foreground/60 tabular-nums select-none", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className), ...props }));
 }
 function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
     const width = React.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
@@ -59,6 +59,6 @@ function SidebarMenuSubItem({ className, ...props }) {
 }
 function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }) {
     const Comp = asChild ? Slot.Root : "a";
-    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn("relative flex h-(--sidebar-sub-item-height) min-w-0 items-center gap-(--control-gap) overflow-hidden rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x) text-sidebar-foreground/65 ring-sidebar-ring outline-hidden transition-[color,background-color,box-shadow] hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground hover:[&>svg]:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-transparent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[active=true]:shadow-none data-[active=true]:[&>svg]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0 [&>svg]:text-sidebar-foreground/45", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className), ...props }));
+    return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, className: cn("relative flex h-(--sidebar-sub-item-height) min-w-0 items-center gap-(--control-gap) overflow-hidden rounded-[var(--sidebar-item-radius)] px-(--sidebar-item-padding-x) text-sidebar-foreground/65 ring-sidebar-ring outline-hidden transition-[color,background-color,box-shadow] hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground focus-visible:ring-[var(--focus-ring-width)] active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-transparent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[active=true]:shadow-none [&>span:last-child]:truncate [&>svg]:size-(--sidebar-icon-size) [&>svg]:shrink-0 [&>svg]:text-sidebar-foreground/45 hover:[&>svg]:text-sidebar-accent-foreground data-[active=true]:[&>svg]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className), ...props }));
 }
 export { SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, };

package/dist/components/ui/sidebar-account-menu-theme.js

@@ -9,11 +9,11 @@ function AccountThemeSection({ mode, onModeChange, }) {
     return (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(AccountThemeControls, { mode: mode, onModeChange: onModeChange })] }));
 }
 function AccountThemeControls({ mode, onModeChange, }) {
-    return (_jsxs("div", { className: "px-(--menu-item-padding-x) py-1", children: [_jsx("div", { className: "mb-1 text-xs font-control text-muted-foreground", children: "Theme" }), _jsx("div", { className: "grid grid-cols-3 gap-0.5 rounded-[var(--sidebar-item-radius)] border border-border/70 bg-transparent p-0.5", children: sidebarAccountThemeModes.map((themeMode) => (_jsx(ThemeModeButton, { active: mode === themeMode, mode: themeMode, onModeChange: onModeChange }, themeMode))) })] }));
+    return (_jsxs("div", { className: "px-(--menu-item-padding-x) py-1", children: [_jsx("div", { className: "font-control mb-1 text-xs text-muted-foreground", children: "Theme" }), _jsx("div", { className: "grid grid-cols-3 gap-0.5 rounded-[var(--sidebar-item-radius)] border border-border/70 bg-transparent p-0.5", children: sidebarAccountThemeModes.map((themeMode) => (_jsx(ThemeModeButton, { active: mode === themeMode, mode: themeMode, onModeChange: onModeChange }, themeMode))) })] }));
 }
 function ThemeModeButton({ active, mode, onModeChange, }) {
     const label = getThemeModeLabel(mode);
-    return (_jsxs("button", { "aria-pressed": active, className: cn("flex h-(--sidebar-item-height-sm) items-center justify-center gap-1 rounded-sm px-2 text-xs font-control text-muted-foreground outline-hidden transition-[color,background-color,box-shadow]", "hover:bg-background hover:text-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring", active && "bg-muted text-foreground shadow-none"), onClick: () => onModeChange(mode), type: "button", children: [_jsx(ThemeModeIcon, { mode: mode }), _jsx("span", { children: label })] }));
+    return (_jsxs("button", { "aria-pressed": active, className: cn("font-control flex h-(--sidebar-item-height-sm) items-center justify-center gap-1 rounded-sm px-2 text-xs text-muted-foreground outline-hidden transition-[color,background-color,box-shadow]", "hover:bg-background hover:text-foreground focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring", active && "bg-muted text-foreground shadow-none"), onClick: () => onModeChange(mode), type: "button", children: [_jsx(ThemeModeIcon, { mode: mode }), _jsx("span", { children: label })] }));
 }
 function ThemeModeIcon({ mode }) {
     if (mode === "light")

package/dist/components/ui/sidebar-account-menu.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { type SidebarAccountThemeMode } from "@ciridae/ui/sidebar-account-menu-theme";
 type SidebarAccountMenuProps = {
     username?: string | null;
@@ -8,7 +9,8 @@ type SidebarAccountMenuProps = {
     themeMode?: SidebarAccountThemeMode;
     onThemeModeChange?: (mode: SidebarAccountThemeMode) => void;
     className?: string;
+    children?: ReactNode;
 };
-declare function SidebarAccountMenu({ username, email, imageUrl, onSignOut, isSigningOut, themeMode, onThemeModeChange, className, }: SidebarAccountMenuProps): import("react").JSX.Element;
+declare function SidebarAccountMenu({ username, email, imageUrl, onSignOut, isSigningOut, themeMode, onThemeModeChange, className, children, }: SidebarAccountMenuProps): import("react").JSX.Element;
 export { SidebarAccountMenu };
 export type { SidebarAccountMenuProps, SidebarAccountThemeMode };

package/dist/components/ui/sidebar-account-menu.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronUpIcon, LogOutIcon } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@ciridae/ui/avatar";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@ciridae/ui/dropdown-menu";
@@ -7,28 +7,28 @@ import { useSidebar } from "@ciridae/ui/sidebar/context";
 import { AccountThemeSection, } from "@ciridae/ui/sidebar-account-menu-theme";
 import { Spinner } from "@ciridae/ui/spinner";
 import { cn } from "@ciridae/ui/utils";
-function SidebarAccountMenu({ username, email, imageUrl, onSignOut, isSigningOut = false, themeMode, onThemeModeChange, className, }) {
+function SidebarAccountMenu({ username, email, imageUrl, onSignOut, isSigningOut = false, themeMode, onThemeModeChange, className, children, }) {
     const { isMobile, state } = useSidebar();
     const label = getAccountLabel(username, email);
     const detail = email ?? "Signed in";
     const accountMark = getAccountMark(label);
     const isCollapsed = state === "collapsed" && !isMobile;
-    return (_jsx(SidebarMenu, { className: cn("group-data-[collapsible=icon]:-mx-0.5", className), children: _jsx(SidebarMenuItem, { children: _jsx(AccountDropdown, { detail: detail, imageUrl: imageUrl, accountMark: accountMark, isCollapsed: isCollapsed, isSigningOut: isSigningOut, label: label, onSignOut: onSignOut, onThemeModeChange: onThemeModeChange, themeMode: themeMode }) }) }));
+    return (_jsx(SidebarMenu, { className: cn("group-data-[collapsible=icon]:-mx-0.5", className), children: _jsx(SidebarMenuItem, { children: _jsx(AccountDropdown, { detail: detail, imageUrl: imageUrl, accountMark: accountMark, isCollapsed: isCollapsed, isSigningOut: isSigningOut, label: label, onSignOut: onSignOut, onThemeModeChange: onThemeModeChange, themeMode: themeMode, children: children }) }) }));
 }
-function AccountDropdown({ accountMark, detail, imageUrl, isCollapsed, isSigningOut, label, onSignOut, onThemeModeChange, themeMode, }) {
-    return (_jsxs(DropdownMenu, { children: [_jsx(AccountMenuTrigger, { accountMark: accountMark, detail: detail, imageUrl: imageUrl, label: label }), _jsxs(DropdownMenuContent, { align: isCollapsed ? "end" : "start", className: cn("shadow-sm", isCollapsed ? "w-44" : "w-52"), side: isCollapsed ? "right" : "top", sideOffset: 4, children: [_jsx(AccountMenuLabel, { accountMark: accountMark, detail: detail, imageUrl: imageUrl, label: label }), _jsx(AccountThemeSection, { mode: themeMode, onModeChange: onThemeModeChange }), _jsx(DropdownMenuSeparator, {}), _jsx(AccountSignOutItem, { isSigningOut: isSigningOut, onSignOut: onSignOut })] })] }));
+function AccountDropdown({ accountMark, detail, imageUrl, isCollapsed, isSigningOut, label, onSignOut, onThemeModeChange, themeMode, children, }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(AccountMenuTrigger, { accountMark: accountMark, detail: detail, imageUrl: imageUrl, label: label }), _jsxs(DropdownMenuContent, { align: isCollapsed ? "end" : "start", className: cn("shadow-sm", isCollapsed ? "w-44" : "w-52"), side: isCollapsed ? "right" : "top", sideOffset: 4, children: [_jsx(AccountMenuLabel, { accountMark: accountMark, detail: detail, imageUrl: imageUrl, label: label }), _jsx(AccountThemeSection, { mode: themeMode, onModeChange: onThemeModeChange }), children ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), children] })) : null, _jsx(DropdownMenuSeparator, {}), _jsx(AccountSignOutItem, { isSigningOut: isSigningOut, onSignOut: onSignOut })] })] }));
 }
 function AccountMenuTrigger({ accountMark, detail, imageUrl, label, }) {
     return (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(SidebarMenuButton, { "aria-label": `Open account menu for ${label}`, className: cn("h-auto min-h-(--control-height) py-1", "text-sidebar-foreground/78 hover:text-sidebar-accent-foreground", "data-[state=open]:bg-sidebar-accent/45 data-[state=open]:text-sidebar-accent-foreground", "group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0!"), tooltip: label, children: [_jsx(AccountAvatar, { accountMark: accountMark, imageUrl: imageUrl }), _jsx(AccountTriggerText, { detail: detail, label: label }), _jsx(ChevronUpIcon, { className: "ml-auto size-3.5 text-sidebar-foreground/42 group-data-[collapsible=icon]:hidden" })] }) }));
 }
 function AccountTriggerText({ detail, label }) {
-    return (_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left group-data-[collapsible=icon]:hidden", children: [_jsx("span", { className: "truncate text-sm leading-4 font-control", children: label }), _jsx("span", { className: "truncate text-xs leading-3 text-sidebar-foreground/46", children: detail })] }));
+    return (_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left group-data-[collapsible=icon]:hidden", children: [_jsx("span", { className: "font-control truncate text-sm leading-4", children: label }), _jsx("span", { className: "truncate text-xs leading-3 text-sidebar-foreground/46", children: detail })] }));
 }
 function AccountMenuLabel({ accountMark, detail, imageUrl, label, }) {
-    return (_jsx(DropdownMenuLabel, { className: "p-0 normal-case tracking-normal text-popover-foreground", children: _jsxs("div", { className: "flex min-w-0 items-center gap-(--control-gap) px-(--menu-item-padding-x) py-0.5", children: [_jsx(AccountAvatar, { accountMark: accountMark, imageUrl: imageUrl }), _jsx(AccountMenuLabelText, { detail: detail, label: label })] }) }));
+    return (_jsx(DropdownMenuLabel, { className: "p-0 tracking-normal text-popover-foreground normal-case", children: _jsxs("div", { className: "flex min-w-0 items-center gap-(--control-gap) px-(--menu-item-padding-x) py-0.5", children: [_jsx(AccountAvatar, { accountMark: accountMark, imageUrl: imageUrl }), _jsx(AccountMenuLabelText, { detail: detail, label: label })] }) }));
 }
 function AccountMenuLabelText({ detail, label }) {
-    return (_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left", children: [_jsx("span", { className: "truncate text-sm leading-4 font-control", children: label }), _jsx("span", { className: "truncate text-xs leading-3 text-muted-foreground", children: detail })] }));
+    return (_jsxs("span", { className: "grid min-w-0 flex-1 gap-0.5 text-left", children: [_jsx("span", { className: "font-control truncate text-sm leading-4", children: label }), _jsx("span", { className: "truncate text-xs leading-3 text-muted-foreground", children: detail })] }));
 }
 function AccountSignOutItem({ isSigningOut, onSignOut, }) {
     return (_jsxs(DropdownMenuItem, { className: "min-h-(--sidebar-item-height)", disabled: !onSignOut || isSigningOut, onSelect: () => onSignOut?.(), children: [isSigningOut ? _jsx(Spinner, { "aria-hidden": "true" }) : _jsx(LogOutIcon, {}), _jsx("span", { children: "Sign out" })] }));

package/dist/styled-system/styles.css

@@ -606,12 +606,12 @@
 
 @layer utilities{
 
-  .p_spacing\.4 {
-    padding: spacing.4;
+  .p_4 {
+    padding: var(--spacing-4);
 }
 
-  .p_spacing\.2 {
-    padding: spacing.2;
+  .p_2 {
+    padding: var(--spacing-2);
 }
 
   .anim_pulse {
@@ -642,16 +642,16 @@
     overflow: hidden;
 }
 
-  .gap_gap\.3 {
-    gap: gap.3;
+  .gap_3 {
+    gap: var(--spacing-3);
 }
 
-  .py_spacing\.3 {
-    padding-block: spacing.3;
+  .py_3 {
+    padding-block: var(--spacing-3);
 }
 
-  .px_spacing\.4 {
-    padding-inline: spacing.4;
+  .px_4 {
+    padding-inline: var(--spacing-4);
 }
 
   .gap_gap\.1 {
@@ -666,20 +666,20 @@
     overflow: auto;
 }
 
-  .py_spacing\.2 {
-    padding-block: spacing.2;
+  .py_2 {
+    padding-block: var(--spacing-2);
 }
 
-  .px_spacing\.3 {
-    padding-inline: spacing.3;
+  .px_3 {
+    padding-inline: var(--spacing-3);
 }
 
-  .gap_gap\.2 {
-    gap: gap.2;
+  .gap_2 {
+    gap: var(--spacing-2);
 }
 
-  .my_spacing\.4 {
-    margin-block: spacing.4;
+  .my_4 {
+    margin-block: var(--spacing-4);
 }
 
   .ring_none {
@@ -690,8 +690,8 @@
     border-width: 0;
 }
 
-  .px_spacing\.2 {
-    padding-inline: spacing.2;
+  .px_2 {
+    padding-inline: var(--spacing-2);
 }
 
   .bdr_md {
@@ -1016,8 +1016,8 @@
     min-width: 6rem;
 }
 
-  .mt_spacing\.1 {
-    margin-top: spacing.1;
+  .mt_1 {
+    margin-top: var(--spacing-1);
 }
 
   .max-w_full {
@@ -1036,8 +1036,8 @@
     width: var(--sizes-icon\.sm);
 }
 
-  .mt_spacing\.2 {
-    margin-top: spacing.2;
+  .mt_2 {
+    margin-top: var(--spacing-2);
 }
 
   .h_0\.875rem {
@@ -1080,8 +1080,8 @@
     width: var(--sizes-control\.lg);
 }
 
-  .\[\&\[data-role\=\'system\'\]\]\:py_spacing\.1[data-role='system'] {
-    padding-block: spacing.1;
+  .\[\&\[data-role\=\'system\'\]\]\:py_1[data-role='system'] {
+    padding-block: var(--spacing-1);
 }
 
   .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:bd-c_border {
@@ -1100,12 +1100,12 @@
     border-width: var(--border-widths-default);
 }
 
-  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:py_spacing\.3 {
-    padding-block: spacing.3;
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:py_3 {
+    padding-block: var(--spacing-3);
 }
 
-  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:px_spacing\.4 {
-    padding-inline: spacing.4;
+  .group\/message[data-role='user'] .\[\.group\\\/message\[data-role\=\'user\'\]_\&\]\:px_4 {
+    padding-inline: var(--spacing-4);
 }
 
   .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:bd-c_border {
@@ -1124,12 +1124,12 @@
     border-width: var(--border-widths-default);
 }
 
-  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:py_spacing\.2 {
-    padding-block: spacing.2;
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:py_2 {
+    padding-block: var(--spacing-2);
 }
 
-  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:px_spacing\.3 {
-    padding-inline: spacing.3;
+  .group\/message[data-role='system'] .\[\.group\\\/message\[data-role\=\'system\'\]_\&\]\:px_3 {
+    padding-inline: var(--spacing-3);
 }
 
   .\[\&\[aria-invalid\=\'true\'\]\]\:bd-c_destructive[aria-invalid='true'] {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "0.3.0",
+	"version": "0.3.3",
 	"type": "module",
 	"private": false,
 	"repository": {
@@ -103,6 +103,10 @@
 			"types": "./dist/components/ui/checkbox.d.ts",
 			"default": "./dist/components/ui/checkbox.js"
 		},
+		"./ciridae-ui-provider": {
+			"types": "./dist/components/ui/ciridae-ui-provider.d.ts",
+			"default": "./dist/components/ui/ciridae-ui-provider.js"
+		},
 		"./collapsible": {
 			"types": "./dist/components/ui/collapsible.d.ts",
 			"default": "./dist/components/ui/collapsible.js"
@@ -449,6 +453,7 @@
 	"dependencies": {
 		"@base-ui/react": "^1.6.0",
 		"@tanstack/react-table": "^8.21.3",
+		"agentation": "^3.0.2",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",