@ciridae/ui 0.2.0

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/components/ui/breadcrumb.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { Slot } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+function Breadcrumb({ ...props }) {
+    return _jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5", className), ...props }));
+}
+function BreadcrumbItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1.5", className), ...props }));
+}
+function BreadcrumbLink({ asChild, className, ...props }) {
+    const Comp = asChild ? Slot.Root : "a";
+    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn("transition-colors hover:text-foreground", className), ...props }));
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props }));
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("flex size-9 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontal, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+}
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/components/ui/button-group-variants.d.ts

@@ -0,0 +1,6 @@
+import { type VariantProps } from "class-variance-authority";
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonGroupVariantProps = VariantProps<typeof buttonGroupVariants>;
+export { buttonGroupVariants, type ButtonGroupVariantProps };

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

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+const buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+    variants: {
+        orientation: {
+            horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+            vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+export { buttonGroupVariants };

package/dist/components/ui/button-group.d.ts

@@ -0,0 +1,8 @@
+import { Separator } from "@ciridae/ui/separator";
+import { type ButtonGroupVariantProps } from "@ciridae/ui/button-group-variants";
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & ButtonGroupVariantProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+import { Separator } from "@ciridae/ui/separator";
+import { buttonGroupVariants, } from "@ciridae/ui/button-group-variants";
+function ButtonGroup({ className, orientation, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
+}
+function ButtonGroupText({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot.Root : "div";
+    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=vertical]:h-auto", className), ...props }));
+}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };

package/dist/components/ui/button-variants.d.ts

@@ -0,0 +1,133 @@
+import { type RecipeVariantProps } from "@ciridae/ui/styled-system/css";
+declare const buttonVariants: import("../../styled-system/types").RecipeRuntimeFn<{
+    variant: {
+        default: {
+            backgroundColor: "primary";
+            color: "primary.foreground";
+            "&:hover": {
+                backgroundColor: "primary.hover";
+            };
+        };
+        destructive: {
+            backgroundColor: "destructive";
+            color: "destructive.foreground";
+            "&:hover": {
+                backgroundColor: "destructive.hover";
+            };
+            "&:focus-visible": {
+                boxShadow: "focus.destructive";
+            };
+            _dark: {
+                "&:focus-visible": {
+                    boxShadow: "focus.destructive.dark";
+                };
+            };
+        };
+        outline: {
+            backgroundColor: "background";
+            borderColor: "border";
+            borderStyle: "solid";
+            borderWidth: "default";
+            boxShadow: "xs";
+            "&:hover": {
+                backgroundColor: "accent";
+                color: "accent.foreground";
+            };
+            _dark: {
+                backgroundColor: "input.subtle";
+                borderColor: "input";
+                "&:hover": {
+                    backgroundColor: "input.hover";
+                };
+            };
+        };
+        secondary: {
+            backgroundColor: "secondary";
+            color: "secondary.foreground";
+            "&:hover": {
+                backgroundColor: "secondary.hover";
+            };
+        };
+        ghost: {
+            "&:hover": {
+                backgroundColor: "accent";
+                color: "accent.foreground";
+            };
+            _dark: {
+                "&:hover": {
+                    backgroundColor: "muted.subtle";
+                };
+            };
+        };
+        link: {
+            color: "primary";
+            textUnderlineOffset: "4px";
+            "&:hover": {
+                textDecorationLine: "underline";
+            };
+        };
+    };
+    size: {
+        default: {
+            height: "control.md";
+            paddingInline: "control.padding.x";
+            "&:has(> svg)": {
+                paddingInline: "control.withIcon.md";
+            };
+        };
+        xs: {
+            borderRadius: "md";
+            fontSize: "xs";
+            gap: "gap.1";
+            height: "control.xs";
+            lineHeight: "xs";
+            paddingInline: "control.padding.xs";
+            "&:has(> svg)": {
+                paddingInline: "control.withIcon.xs";
+            };
+            "& svg:not([class*='size-'])": {
+                height: "icon.xs";
+                width: "icon.xs";
+            };
+        };
+        sm: {
+            gap: "gap.1.5";
+            height: "control.sm";
+            paddingInline: "control.padding.sm";
+            "&:has(> svg)": {
+                paddingInline: "control.withIcon.sm";
+            };
+        };
+        lg: {
+            borderRadius: "md";
+            height: "control.lg";
+            paddingInline: "control.padding.lg";
+            "&:has(> svg)": {
+                paddingInline: "control.withIcon.lg";
+            };
+        };
+        icon: {
+            height: "control.md";
+            width: "control.md";
+        };
+        "icon-xs": {
+            borderRadius: "md";
+            height: "control.xs";
+            width: "control.xs";
+            "& svg:not([class*='size-'])": {
+                height: "icon.xs";
+                width: "icon.xs";
+            };
+        };
+        "icon-sm": {
+            height: "control.sm";
+            width: "control.sm";
+        };
+        "icon-lg": {
+            height: "control.lg";
+            width: "control.lg";
+        };
+    };
+}>;
+type ButtonVariantProps = RecipeVariantProps<typeof buttonVariants>;
+export { buttonVariants, type ButtonVariantProps };

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

@@ -0,0 +1,170 @@
+import { cva } from "@ciridae/ui/styled-system/css";
+const buttonVariants = cva({
+    base: {
+        alignItems: "center",
+        borderRadius: "md",
+        display: "inline-flex",
+        flexShrink: 0,
+        fontSize: "sm",
+        fontWeight: "control",
+        gap: "control.gap",
+        justifyContent: "center",
+        lineHeight: "sm",
+        outline: "none",
+        transitionProperty: "all",
+        transitionDuration: "fast",
+        transitionTimingFunction: "standard",
+        whiteSpace: "nowrap",
+        "&:focus-visible": {
+            borderColor: "ring",
+            boxShadow: "focus",
+        },
+        "&:disabled": {
+            opacity: 0.5,
+            pointerEvents: "none",
+        },
+        "&[aria-invalid='true']": {
+            borderColor: "destructive",
+            boxShadow: "focus.destructive",
+        },
+        _dark: {
+            "&[aria-invalid='true']": {
+                boxShadow: "focus.destructive.dark",
+            },
+        },
+        "&[data-loading='true'] > svg:not([data-slot='spinner'])": {
+            display: "none",
+        },
+        "& svg": {
+            flexShrink: 0,
+            pointerEvents: "none",
+        },
+        "& svg:not([class*='size-'])": {
+            height: "icon.sm",
+            width: "icon.sm",
+        },
+    },
+    variants: {
+        variant: {
+            default: {
+                backgroundColor: "primary",
+                color: "primary.foreground",
+                "&:hover": { backgroundColor: "primary.hover" },
+            },
+            destructive: {
+                backgroundColor: "destructive",
+                color: "destructive.foreground",
+                "&:hover": {
+                    backgroundColor: "destructive.hover",
+                },
+                "&:focus-visible": {
+                    boxShadow: "focus.destructive",
+                },
+                _dark: {
+                    "&:focus-visible": {
+                        boxShadow: "focus.destructive.dark",
+                    },
+                },
+            },
+            outline: {
+                backgroundColor: "background",
+                borderColor: "border",
+                borderStyle: "solid",
+                borderWidth: "default",
+                boxShadow: "xs",
+                "&:hover": {
+                    backgroundColor: "accent",
+                    color: "accent.foreground",
+                },
+                _dark: {
+                    backgroundColor: "input.subtle",
+                    borderColor: "input",
+                    "&:hover": {
+                        backgroundColor: "input.hover",
+                    },
+                },
+            },
+            secondary: {
+                backgroundColor: "secondary",
+                color: "secondary.foreground",
+                "&:hover": {
+                    backgroundColor: "secondary.hover",
+                },
+            },
+            ghost: {
+                "&:hover": {
+                    backgroundColor: "accent",
+                    color: "accent.foreground",
+                },
+                _dark: {
+                    "&:hover": {
+                        backgroundColor: "muted.subtle",
+                    },
+                },
+            },
+            link: {
+                color: "primary",
+                textUnderlineOffset: "4px",
+                "&:hover": { textDecorationLine: "underline" },
+            },
+        },
+        size: {
+            default: {
+                height: "control.md",
+                paddingInline: "control.padding.x",
+                "&:has(> svg)": { paddingInline: "control.withIcon.md" },
+            },
+            xs: {
+                borderRadius: "md",
+                fontSize: "xs",
+                gap: "gap.1",
+                height: "control.xs",
+                lineHeight: "xs",
+                paddingInline: "control.padding.xs",
+                "&:has(> svg)": { paddingInline: "control.withIcon.xs" },
+                "& svg:not([class*='size-'])": {
+                    height: "icon.xs",
+                    width: "icon.xs",
+                },
+            },
+            sm: {
+                gap: "gap.1.5",
+                height: "control.sm",
+                paddingInline: "control.padding.sm",
+                "&:has(> svg)": { paddingInline: "control.withIcon.sm" },
+            },
+            lg: {
+                borderRadius: "md",
+                height: "control.lg",
+                paddingInline: "control.padding.lg",
+                "&:has(> svg)": { paddingInline: "control.withIcon.lg" },
+            },
+            icon: {
+                height: "control.md",
+                width: "control.md",
+            },
+            "icon-xs": {
+                borderRadius: "md",
+                height: "control.xs",
+                width: "control.xs",
+                "& svg:not([class*='size-'])": {
+                    height: "icon.xs",
+                    width: "icon.xs",
+                },
+            },
+            "icon-sm": {
+                height: "control.sm",
+                width: "control.sm",
+            },
+            "icon-lg": {
+                height: "control.lg",
+                width: "control.lg",
+            },
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+export { buttonVariants };

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { type ButtonVariantProps } from "@ciridae/ui/button-variants";
+declare function Button({ children, className, variant, size, asChild, disabled, loading, loadingLabel, onClick, tabIndex, ...props }: React.ComponentProps<"button"> & ButtonVariantProps & {
+    asChild?: boolean;
+    loading?: boolean;
+    loadingLabel?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button };

package/dist/components/ui/button.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
+import { cn } from "@ciridae/ui/utils";
+import { buttonVariants } from "@ciridae/ui/button-variants";
+import { Spinner } from "@ciridae/ui/spinner";
+function Button({ children, className, variant = "default", size = "default", asChild = false, disabled, loading = false, loadingLabel = "Loading", onClick, tabIndex, ...props }) {
+    const Comp = asChild ? Slot.Root : "button";
+    const isDisabled = disabled || loading;
+    return (_jsx(Comp, { ...props, "data-slot": "button", "data-variant": variant, "data-size": size, "data-loading": getDataLoading(loading), "aria-busy": getAriaBusy(loading), "aria-disabled": getAriaDisabled(asChild, isDisabled), className: cn(buttonVariants({ variant, size }), className, getDisabledChildClass(asChild, isDisabled)), disabled: getDisabled(asChild, isDisabled), onClick: getClickHandler(asChild, isDisabled, onClick), tabIndex: getTabIndex(asChild, isDisabled, tabIndex), children: _jsx(ButtonChildren, { asChild: asChild, loading: loading, loadingLabel: loadingLabel, children: children }) }));
+}
+function ButtonChildren({ asChild, children, loading, loadingLabel, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonLoadingIcon, { loading: loading }), _jsx(ButtonContent, { asChild: asChild, children: children }), _jsx(ButtonLoadingLabel, { label: loadingLabel, loading: loading })] }));
+}
+function ButtonLoadingIcon({ loading }) {
+    if (!loading)
+        return null;
+    return _jsx(Spinner, { "aria-hidden": "true", className: "shrink-0" });
+}
+function ButtonContent({ asChild, children }) {
+    if (asChild)
+        return _jsx(Slot.Slottable, { children: children });
+    return _jsx(_Fragment, { children: children });
+}
+function ButtonLoadingLabel({ label, loading }) {
+    if (!loading)
+        return null;
+    return _jsx("span", { className: "sr-only", children: label });
+}
+function getDataLoading(loading) {
+    if (!loading)
+        return undefined;
+    return "true";
+}
+function getAriaBusy(loading) {
+    if (!loading)
+        return undefined;
+    return true;
+}
+function getAriaDisabled(asChild, isDisabled) {
+    if (!asChild || !isDisabled)
+        return undefined;
+    return true;
+}
+function getDisabled(asChild, isDisabled) {
+    if (asChild)
+        return undefined;
+    return isDisabled;
+}
+function getDisabledChildClass(asChild, isDisabled) {
+    if (!asChild || !isDisabled)
+        return undefined;
+    return "pointer-events-none";
+}
+function getClickHandler(asChild, isDisabled, onClick) {
+    if (!asChild || !isDisabled)
+        return onClick;
+    return (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+}
+function getTabIndex(asChild, isDisabled, tabIndex) {
+    if (!asChild || !isDisabled)
+        return tabIndex;
+    return -1;
+}
+export { Button };

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+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"];
+};
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/components/ui/calendar.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+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 }) {
+    const defaultClassNames = getDefaultClassNames();
+    const mergedClassNames = getCalendarClassNames({
+        buttonVariant,
+        captionLayout,
+        classNames,
+        defaultClassNames,
+        showWeekNumber: props.showWeekNumber,
+    });
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+            ...formatters,
+        }, classNames: mergedClassNames, components: {
+            Root: CalendarRoot,
+            Chevron: CalendarChevron,
+            DayButton: CalendarDayButton,
+            WeekNumber: CalendarWeekNumber,
+            ...components,
+        }, ...props }));
+}
+function getCalendarClassNames({ buttonVariant, captionLayout, classNames, defaultClassNames, showWeekNumber, }) {
+    return {
+        ...getCalendarStructureClassNames({ buttonVariant, captionLayout, defaultClassNames }),
+        ...getCalendarDayClassNames({ defaultClassNames, showWeekNumber }),
+        ...classNames,
+    };
+}
+function getCalendarStructureClassNames({ buttonVariant, captionLayout, defaultClassNames, }) {
+    return {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+        button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+        button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+        month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+        dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+        dropdown_root: cn("relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[var(--focus-ring-width)] has-focus:ring-ring/50", defaultClassNames.dropdown_root),
+        dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+        caption_label: cn("font-medium select-none", captionLayout === "label"
+            ? "text-sm"
+            : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn("flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+    };
+}
+function getCalendarDayClassNames({ defaultClassNames, showWeekNumber, }) {
+    return {
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+        week_number: cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+        day: cn("group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md", showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),
+        range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn("rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+        outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+    };
+}
+function CalendarRoot({ className, rootRef, ...props }) {
+    return _jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props });
+}
+function CalendarChevron({ className, orientation, ...props }) {
+    if (orientation === "left") {
+        return _jsx(ChevronLeftIcon, { className: cn("size-4", className), ...props });
+    }
+    if (orientation === "right") {
+        return _jsx(ChevronRightIcon, { className: cn("size-4", className), ...props });
+    }
+    return _jsx(ChevronDownIcon, { className: cn("size-4", className), ...props });
+}
+function CalendarWeekNumber({ children, ...props }) {
+    return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+}
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus({ preventScroll: true });
+    }, [modifiers.focused]);
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
+            !modifiers.range_start &&
+            !modifiers.range_end &&
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[var(--focus-ring-width)] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
+}
+export { Calendar, CalendarDayButton };

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

@@ -0,0 +1,14 @@
+import * as React from "react";
+type CardVariant = "section" | "surface";
+type CardProps = React.ComponentProps<"div"> & {
+    variant?: CardVariant;
+};
+declare function Card({ className, variant, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export type { CardProps, CardVariant };

package/dist/components/ui/card.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@ciridae/ui/utils";
+const cardVariants = {
+    section: "bg-transparent py-(--panel-padding) text-foreground shadow-none",
+    surface: "rounded-lg border bg-card py-(--panel-padding) text-card-foreground shadow-xs",
+};
+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 }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn("leading-none font-medium", className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("group-data-[variant=surface]/card:px-(--panel-padding)", className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center group-data-[variant=surface]/card:px-(--panel-padding) [.border-t]:pt-(--panel-padding)", className), ...props }));
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { Button } from "@ciridae/ui/button";
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: "horizontal" | "vertical";
+    setApi?: (api: CarouselApi) => void;
+};
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): import("react/jsx-runtime").JSX.Element;
+declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };