@ciridae/ui 0.3.2 → 0.3.5

package/dist/components/pages/kanban-page.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { PlusIcon, SearchIcon } from "lucide-react";
+import { KanbanBoard } from "@ciridae/ui/kanban-board";
+import { KanbanDetailSheet } from "@ciridae/ui/kanban-detail-sheet";
+import { Button } from "@ciridae/ui/button";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, } from "@ciridae/ui/input-group";
+import { PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderMain, PageHeaderTitle, } from "@ciridae/ui/page-header";
+function KanbanPage({ cards, columns, isLoading = false, onCardMove, onCreateCard, renderCardActions, renderColumnActions, }) {
+    const [search, setSearch] = React.useState("");
+    const [selectedCardId, setSelectedCardId] = React.useState();
+    const filteredCards = React.useMemo(() => filterKanbanCards(cards, search), [cards, search]);
+    const selectedCard = React.useMemo(() => cards.find((card) => card.id === selectedCardId), [cards, selectedCardId]);
+    const selectedColumn = getSelectedColumn(columns, selectedCard);
+    return (_jsxs("div", { className: "min-h-svh bg-background text-foreground", children: [_jsx(KanbanPageHeader, { onCreateCard: onCreateCard }), _jsxs("main", { className: "grid gap-4 px-4 py-4 md:px-6 lg:px-8", children: [_jsx(KanbanPageToolbar, { filteredCount: filteredCards.length, onSearchChange: setSearch, search: search, totalCount: cards.length }), _jsx(KanbanBoard, { cards: filteredCards, columnMaxHeight: "calc(100vh - 18rem)", columns: columns, empty: getBoardEmptyMessage(search), isLoading: isLoading, onCardMove: onCardMove
+                            ? (move) => onCardMove(getUnfilteredMoveEvent(move, filteredCards, cards))
+                            : undefined, onCardSelect: (card) => setSelectedCardId(card.id), renderCardActions: renderCardActions, renderColumnActions: renderColumnActions })] }), _jsx(KanbanDetailSheet, { card: selectedCard, column: selectedColumn, onOpenChange: (open) => {
+                    if (!open)
+                        setSelectedCardId(undefined);
+                }, open: Boolean(selectedCard) })] }));
+}
+function KanbanPageHeader({ onCreateCard }) {
+    return (_jsx(PageHeader, { children: _jsxs(PageHeaderMain, { children: [_jsxs(PageHeaderContent, { children: [_jsx(PageHeaderTitle, { children: "Work board" }), _jsx(PageHeaderDescription, { children: "Track work across status columns and open cards for detail." })] }), onCreateCard ? (_jsx(PageHeaderActions, { children: _jsxs(Button, { onClick: onCreateCard, type: "button", children: [_jsx(PlusIcon, {}), "New card"] }) })) : null] }) }));
+}
+function KanbanPageToolbar({ filteredCount, onSearchChange, search, totalCount, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { className: "w-full sm:max-w-sm", children: _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { children: _jsx(KanbanSearchAdornment, {}) }), _jsx(InputGroupInput, { "aria-label": "Search cards", onChange: (event) => onSearchChange(event.target.value), placeholder: "Search cards...", value: search })] }) }), _jsxs("div", { className: "font-mono text-xs text-muted-foreground tabular-nums", children: [filteredCount, " of ", totalCount, " cards"] })] }));
+}
+function KanbanSearchAdornment() {
+    return (_jsxs(InputGroupText, { children: [_jsx(SearchIcon, {}), _jsx("span", { className: "sr-only", children: "Search" })] }));
+}
+function filterKanbanCards(cards, search) {
+    const query = search.trim().toLowerCase();
+    if (!query)
+        return cards;
+    return cards.filter((card) => matchesKanbanSearch(card, query));
+}
+function matchesKanbanSearch(card, query) {
+    return [card.id, card.title, card.description]
+        .filter(Boolean)
+        .some((value) => value?.toLowerCase().includes(query));
+}
+function getSelectedColumn(columns, selectedCard) {
+    if (!selectedCard)
+        return undefined;
+    return columns.find((column) => column.id === selectedCard.columnId);
+}
+function getUnfilteredMoveEvent(move, filteredCards, cards) {
+    const fromIndex = cards
+        .filter((card) => card.columnId === move.fromColumnId)
+        .findIndex((card) => card.id === move.cardId);
+    const filteredTargetCards = filteredCards.filter((card) => card.columnId === move.toColumnId);
+    const targetCard = filteredTargetCards[move.toIndex];
+    const unfilteredTargetCards = cards.filter((card) => card.columnId === move.toColumnId);
+    const toIndex = targetCard
+        ? unfilteredTargetCards.findIndex((card) => card.id === targetCard.id)
+        : unfilteredTargetCards.length;
+    return {
+        ...move,
+        fromIndex: fromIndex >= 0 ? fromIndex : move.fromIndex,
+        toIndex: toIndex >= 0 ? toIndex : move.toIndex,
+    };
+}
+function getBoardEmptyMessage(search) {
+    if (search.trim())
+        return "No cards match this search";
+    return "No cards";
+}
+export { KanbanPage };

package/dist/components/ui/calendar.d.ts

@@ -3,7 +3,8 @@ import { DayPicker, type DayButton } from "react-day-picker";
 import { Button } from "@ciridae/ui/button";
 type CalendarProps = React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+    initialFocus?: boolean;
 };
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: CalendarProps): React.JSX.Element;
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, initialFocus: _initialFocus, components, ...props }: CalendarProps): React.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): React.JSX.Element;
 export { Calendar, CalendarDayButton };

package/dist/components/ui/calendar.js

@@ -5,7 +5,7 @@ import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { cn } from "@ciridae/ui/utils";
 import { Button } from "@ciridae/ui/button";
 import { buttonVariants } from "@ciridae/ui/button-variants";
-function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, initialFocus: _initialFocus, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
     const mergedClassNames = getCalendarClassNames({
         buttonVariant,

package/dist/components/ui/dialog.d.ts

@@ -10,7 +10,8 @@ declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogP
 declare function DialogPortal({ container, ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+declare function DialogContent({ className, children, overlayClassName, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    overlayClassName?: string;
     showCloseButton?: boolean;
 }): React.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/components/ui/dialog.js

@@ -30,8 +30,8 @@ function DialogClose({ ...props }) {
 function DialogOverlay({ className, ...props }) {
     return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 z-50 bg-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }));
 }
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-(--panel-gap) rounded-lg border bg-background p-(--panel-padding) shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 sm:max-w-lg", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-[var(--focus-ring-width)] focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+function DialogContent({ className, children, overlayClassName, showCloseButton = true, ...props }) {
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, { className: overlayClassName }), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-(--panel-gap) rounded-lg border bg-background p-(--panel-padding) shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 sm:max-w-lg", className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-[var(--focus-ring-width)] focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
 }
 function DialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className), ...props }));

package/dist/components/ui/page-header.d.ts

@@ -1,6 +1,20 @@
 import * as React from "react";
 import { Button } from "@ciridae/ui/button";
-declare function PageHeader({ className, ...props }: React.ComponentProps<"header">): React.JSX.Element;
+type PageHeaderBreadcrumbItem = {
+    label: string;
+    to?: string;
+};
+type PageHeaderProps = React.ComponentProps<"header"> & {
+    actions?: React.ReactNode;
+    backLink?: {
+        label: string;
+        to?: string;
+    };
+    breadcrumbItems?: PageHeaderBreadcrumbItem[];
+    subtitle?: React.ReactNode;
+    title?: React.ReactNode;
+};
+declare function PageHeader({ actions, backLink, breadcrumbItems, children, className, subtitle, title, ...props }: PageHeaderProps): React.JSX.Element;
 declare function PageHeaderMain({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function PageHeaderContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 type PageHeaderBackButtonProps = (Omit<React.ComponentProps<typeof Button>, "asChild" | "children"> & {

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

@@ -2,8 +2,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowLeftIcon } from "lucide-react";
 import { Button } from "@ciridae/ui/button";
 import { cn } from "@ciridae/ui/utils";
-function PageHeader({ className, ...props }) {
-    return (_jsx("header", { "data-slot": "page-header", className: cn("border-b bg-background text-foreground", className), ...props }));
+function PageHeader({ actions, backLink, breadcrumbItems, children, className, subtitle, title, ...props }) {
+    if (hasPageHeaderConvenienceContent({ actions, backLink, breadcrumbItems, subtitle, title })) {
+        return (_jsx("header", { "data-slot": "page-header", className: cn("border-b bg-background text-foreground", className), ...props, children: _jsx(PageHeaderConvenienceLayout, { actions: actions, backLink: backLink, breadcrumbItems: breadcrumbItems, subtitle: subtitle, title: title, children: children }) }));
+    }
+    return (_jsx("header", { "data-slot": "page-header", className: cn("border-b bg-background text-foreground", className), ...props, children: children }));
+}
+function hasPageHeaderConvenienceContent({ actions, backLink, breadcrumbItems, subtitle, title, }) {
+    return Boolean(title || subtitle || actions || backLink || breadcrumbItems);
+}
+function PageHeaderConvenienceLayout({ actions, backLink, breadcrumbItems, children, subtitle, title, }) {
+    return (_jsxs(PageHeaderMain, { children: [_jsxs(PageHeaderContent, { children: [backLink ? _jsx(PageHeaderBackLink, { backLink: backLink }) : null, breadcrumbItems?.length ? _jsx(PageHeaderBreadcrumbs, { items: breadcrumbItems }) : null, title ? _jsx(PageHeaderTitle, { children: title }) : null, subtitle ? _jsx(PageHeaderDescription, { children: subtitle }) : null, children] }), actions ? _jsx(PageHeaderActions, { children: actions }) : null] }));
+}
+function PageHeaderBackLink({ backLink }) {
+    if (backLink.to) {
+        return (_jsx(PageHeaderBackButton, { asChild: true, children: _jsx("a", { href: backLink.to, children: backLink.label }) }));
+    }
+    return _jsx(PageHeaderBackButton, { children: backLink.label });
+}
+function PageHeaderBreadcrumbs({ items }) {
+    return (_jsx(PageHeaderMeta, { children: items.map((item) => (_jsx("span", { children: item.label }, `${item.label}:${item.to ?? ""}`))) }));
 }
 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 }));

package/dist/components/ui/resizable.d.ts

@@ -1,6 +1,13 @@
 import * as ResizablePrimitive from "react-resizable-panels";
-declare function ResizablePanelGroup({ className, ...props }: ResizablePrimitive.GroupProps): import("react").JSX.Element;
-declare function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps): import("react").JSX.Element;
+type ResizablePanelGroupProps = ResizablePrimitive.GroupProps & {
+    autoSaveId?: string;
+    direction?: "horizontal" | "vertical";
+};
+type ResizablePanelProps = ResizablePrimitive.PanelProps & {
+    order?: number;
+};
+declare function ResizablePanelGroup({ autoSaveId: _autoSaveId, className, direction, ...props }: ResizablePanelGroupProps): import("react").JSX.Element;
+declare function ResizablePanel({ order: _order, ...props }: ResizablePanelProps): import("react").JSX.Element;
 declare function ResizableHandle({ withHandle, className, ...props }: ResizablePrimitive.SeparatorProps & {
     withHandle?: boolean;
 }): import("react").JSX.Element;

package/dist/components/ui/resizable.js

@@ -3,10 +3,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { GripVerticalIcon } from "lucide-react";
 import * as ResizablePrimitive from "react-resizable-panels";
 import { cn } from "@ciridae/ui/utils";
-function ResizablePanelGroup({ className, ...props }) {
-    return (_jsx(ResizablePrimitive.Group, { "data-slot": "resizable-panel-group", className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className), ...props }));
+function ResizablePanelGroup({ autoSaveId: _autoSaveId, className, direction, ...props }) {
+    return (_jsx(ResizablePrimitive.Group, { "data-slot": "resizable-panel-group", className: cn("flex h-full w-full aria-[orientation=vertical]:flex-col", className), ...props, orientation: props.orientation ?? direction }));
 }
-function ResizablePanel({ ...props }) {
+function ResizablePanel({ order: _order, ...props }) {
     return _jsx(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
 }
 function ResizableHandle({ withHandle, className, ...props }) {

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,16 +7,16 @@ 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" })] }) }));

package/dist/components/ui/sonner.d.ts

@@ -1,3 +1,3 @@
-import { type ToasterProps } from "sonner";
+import { toast, type ToasterProps } from "sonner";
 declare const Toaster: ({ theme, ...props }: ToasterProps) => import("react").JSX.Element;
-export { Toaster };
+export { toast, Toaster };

package/dist/components/ui/sonner.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CircleCheckIcon, InfoIcon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
-import { Toaster as Sonner } from "sonner";
+import { toast, Toaster as Sonner } from "sonner";
 import { Spinner } from "@ciridae/ui/spinner";
 const toasterStyle = {
     "--normal-bg": "var(--popover)",
@@ -30,4 +30,4 @@ const Toaster = ({ theme = "system", ...props }) => {
             loading: _jsx(Spinner, { className: "size-4" }),
         }, style: toasterStyle, ...props }));
 };
-export { Toaster };
+export { toast, Toaster };

package/dist/styled-system/css/css.d.ts

@@ -1,22 +1,17 @@
 /* eslint-disable */
 import type { SystemStyleObject } from '../types/index';
-
-type Styles = SystemStyleObject | undefined | null | false
-
+type Styles = SystemStyleObject | undefined | null | false;
 interface CssRawFunction {
-  (styles: Styles): SystemStyleObject
-  (styles: Styles[]): SystemStyleObject
-  (...styles: Array<Styles | Styles[]>): SystemStyleObject
-  (styles: Styles): SystemStyleObject
+    (styles: Styles): SystemStyleObject;
+    (styles: Styles[]): SystemStyleObject;
+    (...styles: Array<Styles | Styles[]>): SystemStyleObject;
+    (styles: Styles): SystemStyleObject;
 }
-
 interface CssFunction {
-  (styles: Styles): string
-  (styles: Styles[]): string
-  (...styles: Array<Styles | Styles[]>): string
-  (styles: Styles): string
-
-  raw: CssRawFunction
+    (styles: Styles): string;
+    (styles: Styles[]): string;
+    (...styles: Array<Styles | Styles[]>): string;
+    (styles: Styles): string;
+    raw: CssRawFunction;
 }
-
-export declare const css: CssFunction;
+export declare const css: CssFunction;

package/dist/styled-system/css/cva.d.ts

@@ -1,6 +1,4 @@
 /* eslint-disable */
 import type { RecipeCreatorFn } from '../types/recipe';
-
-export declare const cva: RecipeCreatorFn
-
-export type { RecipeVariant, RecipeVariantProps } from '../types/recipe';
+export declare const cva: RecipeCreatorFn;
+export type { RecipeVariant, RecipeVariantProps } from '../types/recipe';

package/dist/styled-system/css/cx.d.ts

@@ -1,5 +1,4 @@
 /* eslint-disable */
-type Argument = string | boolean | null | undefined
-
+type Argument = string | boolean | null | undefined;
 /** Conditionally join classNames into a single string */
-export declare function cx(...args: Argument[]): string
+export declare function cx(...args: Argument[]): string;

package/dist/styled-system/css/index.d.ts

@@ -2,4 +2,4 @@
 export * from './css';
 export * from './cx';
 export * from './cva';
-export * from './sva';
+export * from './sva';

package/dist/styled-system/css/sva.d.ts

@@ -1,4 +1,3 @@
 /* eslint-disable */
 import type { SlotRecipeCreatorFn } from '../types/recipe';
-
-export declare const sva: SlotRecipeCreatorFn
+export declare const sva: SlotRecipeCreatorFn;

package/dist/styled-system/patterns/aspect-ratio.d.ts

@@ -4,17 +4,13 @@ import type { Properties } from '../types/csstype';
 import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
-
 export interface AspectRatioProperties {
-   ratio?: ConditionalValue<number>
+    ratio?: ConditionalValue<number>;
+}
+interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'> {
 }
-
-interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'> {}
-
 interface AspectRatioPatternFn {
-  (styles?: AspectRatioStyles): string
-  raw: (styles?: AspectRatioStyles) => SystemStyleObject
+    (styles?: AspectRatioStyles): string;
+    raw: (styles?: AspectRatioStyles) => SystemStyleObject;
 }
-
-
 export declare const aspectRatio: AspectRatioPatternFn;

package/dist/styled-system/patterns/bleed.d.ts

@@ -4,18 +4,14 @@ import type { Properties } from '../types/csstype';
 import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
-
 export interface BleedProperties {
-   inline?: SystemProperties["marginInline"]
-	block?: SystemProperties["marginBlock"]
+    inline?: SystemProperties["marginInline"];
+    block?: SystemProperties["marginBlock"];
+}
+interface BleedStyles extends BleedProperties, DistributiveOmit<SystemStyleObject, keyof BleedProperties> {
 }
-
-interface BleedStyles extends BleedProperties, DistributiveOmit<SystemStyleObject, keyof BleedProperties > {}
-
 interface BleedPatternFn {
-  (styles?: BleedStyles): string
-  raw: (styles?: BleedStyles) => SystemStyleObject
+    (styles?: BleedStyles): string;
+    raw: (styles?: BleedStyles) => SystemStyleObject;
 }
-
-
 export declare const bleed: BleedPatternFn;

package/dist/styled-system/patterns/box.d.ts

@@ -4,17 +4,12 @@ import type { Properties } from '../types/csstype';
 import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
-
 export interface BoxProperties {
-
 }
-
-interface BoxStyles extends BoxProperties, DistributiveOmit<SystemStyleObject, keyof BoxProperties > {}
-
+interface BoxStyles extends BoxProperties, DistributiveOmit<SystemStyleObject, keyof BoxProperties> {
+}
 interface BoxPatternFn {
-  (styles?: BoxStyles): string
-  raw: (styles?: BoxStyles) => SystemStyleObject
+    (styles?: BoxStyles): string;
+    raw: (styles?: BoxStyles) => SystemStyleObject;
 }
-
-
 export declare const box: BoxPatternFn;

package/dist/styled-system/patterns/center.d.ts

@@ -4,17 +4,13 @@ import type { Properties } from '../types/csstype';
 import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
-
 export interface CenterProperties {
-   inline?: ConditionalValue<boolean>
+    inline?: ConditionalValue<boolean>;
+}
+interface CenterStyles extends CenterProperties, DistributiveOmit<SystemStyleObject, keyof CenterProperties> {
 }
-
-interface CenterStyles extends CenterProperties, DistributiveOmit<SystemStyleObject, keyof CenterProperties > {}
-
 interface CenterPatternFn {
-  (styles?: CenterStyles): string
-  raw: (styles?: CenterStyles) => SystemStyleObject
+    (styles?: CenterStyles): string;
+    raw: (styles?: CenterStyles) => SystemStyleObject;
 }
-
-
 export declare const center: CenterPatternFn;

package/dist/styled-system/patterns/circle.d.ts

@@ -4,17 +4,13 @@ import type { Properties } from '../types/csstype';
 import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
-
 export interface CircleProperties {
-   size?: SystemProperties["width"]
+    size?: SystemProperties["width"];
+}
+interface CircleStyles extends CircleProperties, DistributiveOmit<SystemStyleObject, keyof CircleProperties> {
 }
-
-interface CircleStyles extends CircleProperties, DistributiveOmit<SystemStyleObject, keyof CircleProperties > {}
-
 interface CirclePatternFn {
-  (styles?: CircleStyles): string
-  raw: (styles?: CircleStyles) => SystemStyleObject
+    (styles?: CircleStyles): string;
+    raw: (styles?: CircleStyles) => SystemStyleObject;
 }
-
-
 export declare const circle: CirclePatternFn;

package/dist/styled-system/patterns/container.d.ts

@@ -4,17 +4,12 @@ import type { Properties } from '../types/csstype';
 import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
-
 export interface ContainerProperties {
-
 }
-
-interface ContainerStyles extends ContainerProperties, DistributiveOmit<SystemStyleObject, keyof ContainerProperties > {}
-
+interface ContainerStyles extends ContainerProperties, DistributiveOmit<SystemStyleObject, keyof ContainerProperties> {
+}
 interface ContainerPatternFn {
-  (styles?: ContainerStyles): string
-  raw: (styles?: ContainerStyles) => SystemStyleObject
+    (styles?: ContainerStyles): string;
+    raw: (styles?: ContainerStyles) => SystemStyleObject;
 }
-
-
 export declare const container: ContainerPatternFn;

package/dist/styled-system/patterns/cq.d.ts

@@ -4,18 +4,14 @@ import type { Properties } from '../types/csstype';
 import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
-
 export interface CqProperties {
-   name?: ConditionalValue<Tokens["containerNames"] | Properties["containerName"]>
-	type?: SystemProperties["containerType"]
+    name?: ConditionalValue<Tokens["containerNames"] | Properties["containerName"]>;
+    type?: SystemProperties["containerType"];
+}
+interface CqStyles extends CqProperties, DistributiveOmit<SystemStyleObject, keyof CqProperties> {
 }
-
-interface CqStyles extends CqProperties, DistributiveOmit<SystemStyleObject, keyof CqProperties > {}
-
 interface CqPatternFn {
-  (styles?: CqStyles): string
-  raw: (styles?: CqStyles) => SystemStyleObject
+    (styles?: CqStyles): string;
+    raw: (styles?: CqStyles) => SystemStyleObject;
 }
-
-
 export declare const cq: CqPatternFn;

package/dist/styled-system/patterns/divider.d.ts

@@ -4,19 +4,15 @@ import type { Properties } from '../types/csstype';
 import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
-
 export interface DividerProperties {
-   orientation?: ConditionalValue<"horizontal" | "vertical">
-	thickness?: ConditionalValue<Tokens["sizes"] | Properties["borderWidth"]>
-	color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>
+    orientation?: ConditionalValue<"horizontal" | "vertical">;
+    thickness?: ConditionalValue<Tokens["sizes"] | Properties["borderWidth"]>;
+    color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>;
+}
+interface DividerStyles extends DividerProperties, DistributiveOmit<SystemStyleObject, keyof DividerProperties> {
 }
-
-interface DividerStyles extends DividerProperties, DistributiveOmit<SystemStyleObject, keyof DividerProperties > {}
-
 interface DividerPatternFn {
-  (styles?: DividerStyles): string
-  raw: (styles?: DividerStyles) => SystemStyleObject
+    (styles?: DividerStyles): string;
+    raw: (styles?: DividerStyles) => SystemStyleObject;
 }
-
-
 export declare const divider: DividerPatternFn;

package/dist/styled-system/patterns/flex.d.ts

@@ -4,23 +4,19 @@ import type { Properties } from '../types/csstype';
 import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
-
 export interface FlexProperties {
-   align?: SystemProperties["alignItems"]
-	justify?: SystemProperties["justifyContent"]
-	direction?: SystemProperties["flexDirection"]
-	wrap?: SystemProperties["flexWrap"]
-	basis?: SystemProperties["flexBasis"]
-	grow?: SystemProperties["flexGrow"]
-	shrink?: SystemProperties["flexShrink"]
+    align?: SystemProperties["alignItems"];
+    justify?: SystemProperties["justifyContent"];
+    direction?: SystemProperties["flexDirection"];
+    wrap?: SystemProperties["flexWrap"];
+    basis?: SystemProperties["flexBasis"];
+    grow?: SystemProperties["flexGrow"];
+    shrink?: SystemProperties["flexShrink"];
+}
+interface FlexStyles extends FlexProperties, DistributiveOmit<SystemStyleObject, keyof FlexProperties> {
 }
-
-interface FlexStyles extends FlexProperties, DistributiveOmit<SystemStyleObject, keyof FlexProperties > {}
-
 interface FlexPatternFn {
-  (styles?: FlexStyles): string
-  raw: (styles?: FlexStyles) => SystemStyleObject
+    (styles?: FlexStyles): string;
+    raw: (styles?: FlexStyles) => SystemStyleObject;
 }
-
-
 export declare const flex: FlexPatternFn;

package/dist/styled-system/patterns/float.d.ts

@@ -4,20 +4,16 @@ import type { Properties } from '../types/csstype';
 import type { SystemProperties } from '../types/style-props';
 import type { DistributiveOmit } from '../types/system-types';
 import type { Tokens } from '../tokens/index';
-
 export interface FloatProperties {
-   offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>
-	offsetY?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
-	offset?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
-	placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start">
+    offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>;
+    offsetY?: ConditionalValue<Tokens["spacing"] | Properties["top"]>;
+    offset?: ConditionalValue<Tokens["spacing"] | Properties["top"]>;
+    placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start">;
+}
+interface FloatStyles extends FloatProperties, DistributiveOmit<SystemStyleObject, keyof FloatProperties> {
 }
-
-interface FloatStyles extends FloatProperties, DistributiveOmit<SystemStyleObject, keyof FloatProperties > {}
-
 interface FloatPatternFn {
-  (styles?: FloatStyles): string
-  raw: (styles?: FloatStyles) => SystemStyleObject
+    (styles?: FloatStyles): string;
+    raw: (styles?: FloatStyles) => SystemStyleObject;
 }
-
-
 export declare const float: FloatPatternFn;