@badnpm/ui 0.0.0-stage → 0.0.1

package/dist/cjs/components/button-group.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var mergeProps = require('@base-ui/react/merge-props');
+var useRender = require('@base-ui/react/use-render');
+var classVarianceAuthority = require('class-variance-authority');
+var cn = require('cn');
+var separator = require('./separator.cjs');
+
+const buttonGroupVariants = classVarianceAuthority.cva("flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+    variants: {
+        orientation: {
+            horizontal: "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+            vertical: "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+function ButtonGroup({ className, orientation, ...props }) {
+    return (jsxRuntime.jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn.cn(buttonGroupVariants({ orientation }), className), ...props }));
+}
+function ButtonGroupText({ className, render, ...props }) {
+    return useRender.useRender({
+        defaultTagName: "div",
+        props: mergeProps.mergeProps({
+            className: cn.cn("flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+        }, props),
+        render,
+        state: {
+            slot: "button-group-text",
+        },
+    });
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+    return (jsxRuntime.jsx(separator.Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn.cn("relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", className), ...props }));
+}
+
+exports.ButtonGroup = ButtonGroup;
+exports.ButtonGroupSeparator = ButtonGroupSeparator;
+exports.ButtonGroupText = ButtonGroupText;
+exports.buttonGroupVariants = buttonGroupVariants;

package/dist/cjs/components/button.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var button = require('@base-ui/react/button');
+var classVarianceAuthority = require('class-variance-authority');
+var cn = require('cn');
+
+const buttonVariants = classVarianceAuthority.cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+            outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+            ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+            destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+            icon: 'size-8',
+            'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+            'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+            'icon-lg': 'size-9',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+function Button({ className, variant = 'default', size = 'default', ...props }) {
+    return (jsxRuntime.jsx(button.Button, { "data-slot": "button", className: typeof className === 'function'
+            ? (state) => cn.cn(buttonVariants({ variant, size }), className(state))
+            : cn.cn(buttonVariants({ variant, size }), className), ...props }));
+}
+
+exports.Button = Button;
+exports.buttonVariants = buttonVariants;

package/dist/cjs/components/calendar.cjs

@@ -0,0 +1,100 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cn = require('cn');
+var reactDayPicker = require('react-day-picker');
+var button = require('./button.cjs');
+var lucideReact = require('lucide-react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
+    const defaultClassNames = reactDayPicker.getDefaultClassNames();
+    return (jsxRuntime.jsx(reactDayPicker.DayPicker, { showOutsideDays: showOutsideDays, className: cn.cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-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, locale: locale, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
+            ...formatters,
+        }, classNames: {
+            root: cn.cn("w-fit", defaultClassNames.root),
+            months: cn.cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+            month: cn.cn("flex w-full flex-col gap-4", defaultClassNames.month),
+            nav: cn.cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
+            button_previous: cn.cn(button.buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
+            button_next: cn.cn(button.buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+            month_caption: cn.cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+            dropdowns: cn.cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
+            dropdown_root: cn.cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+            dropdown: cn.cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
+            caption_label: cn.cn("font-medium select-none", captionLayout === "label"
+                ? "text-sm"
+                : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
+            month_grid: cn.cn("w-full border-collapse", defaultClassNames.month_grid),
+            weekdays: cn.cn("flex", defaultClassNames.weekdays),
+            weekday: cn.cn("flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+            week: cn.cn("mt-2 flex w-full", defaultClassNames.week),
+            week_number_header: cn.cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
+            week_number: cn.cn("text-[0.8rem] text-muted-foreground select-none", defaultClassNames.week_number),
+            day: cn.cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber
+                ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+                : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
+            range_start: cn.cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
+            range_middle: cn.cn("rounded-none", defaultClassNames.range_middle),
+            range_end: cn.cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
+            today: cn.cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+            outside: cn.cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+            disabled: cn.cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+            hidden: cn.cn("invisible", defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: ({ className, rootRef, ...props }) => {
+                return (jsxRuntime.jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn.cn(className), ...props }));
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === "left") {
+                    return (jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: cn.cn("size-4", className), ...props }));
+                }
+                if (orientation === "right") {
+                    return (jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: cn.cn("size-4", className), ...props }));
+                }
+                return (jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: cn.cn("size-4", className), ...props }));
+            },
+            DayButton: ({ ...props }) => (jsxRuntime.jsx(CalendarDayButton, { locale: locale, ...props })),
+            WeekNumber: ({ children, week, ...props }) => {
+                return (jsxRuntime.jsx("th", { ...props, "data-week-number": week.weekNumber, children: jsxRuntime.jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+            },
+            ...components,
+        }, ...props }));
+}
+function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
+    const defaultClassNames = reactDayPicker.getDefaultClassNames();
+    const ref = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "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.cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 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-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) 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-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
+}
+
+exports.Calendar = Calendar;
+exports.CalendarDayButton = CalendarDayButton;

package/dist/cjs/components/card.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cn = require('cn');
+
+function Card({ className, size = "default", ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "card", "data-size": size, className: cn.cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "card-header", className: cn.cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "card-title", className: cn.cn("font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "card-description", className: cn.cn("text-sm text-muted-foreground", className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "card-action", className: cn.cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "card-content", className: cn.cn("px-(--card-spacing)", className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "card-footer", className: cn.cn("flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)", className), ...props }));
+}
+
+exports.Card = Card;
+exports.CardAction = CardAction;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;

package/dist/cjs/components/carousel.cjs

@@ -0,0 +1,113 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cn = require('cn');
+var useEmblaCarousel = require('embla-carousel-react');
+var button = require('./button.cjs');
+var lucideReact = require('lucide-react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const CarouselContext = React__namespace.createContext(null);
+function useCarousel() {
+    const context = React__namespace.useContext(CarouselContext);
+    if (!context) {
+        throw new Error("useCarousel must be used within a <Carousel />");
+    }
+    return context;
+}
+function Carousel({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }) {
+    const [carouselRef, api] = useEmblaCarousel({
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+    }, plugins);
+    // Embla 是外部状态源，订阅选择和重置事件并直接读取快照。
+    const subscribe = React__namespace.useCallback((onChange) => {
+        if (!api)
+            return () => { };
+        api.on("reInit", onChange);
+        api.on("select", onChange);
+        return () => {
+            api.off("reInit", onChange);
+            api.off("select", onChange);
+        };
+    }, [api]);
+    const canScrollPrev = React__namespace.useSyncExternalStore(subscribe, () => api?.canScrollPrev() ?? false, () => false);
+    const canScrollNext = React__namespace.useSyncExternalStore(subscribe, () => api?.canScrollNext() ?? false, () => false);
+    const scrollPrev = React__namespace.useCallback(() => {
+        api?.scrollPrev();
+    }, [api]);
+    const scrollNext = React__namespace.useCallback(() => {
+        api?.scrollNext();
+    }, [api]);
+    const handleKeyDown = React__namespace.useCallback((event) => {
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            scrollPrev();
+        }
+        else if (event.key === "ArrowRight") {
+            event.preventDefault();
+            scrollNext();
+        }
+    }, [scrollPrev, scrollNext]);
+    React__namespace.useEffect(() => {
+        if (!api || !setApi)
+            return;
+        setApi(api);
+    }, [api, setApi]);
+    return (jsxRuntime.jsx(CarouselContext.Provider, { value: {
+            carouselRef,
+            api: api,
+            opts,
+            orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+            scrollPrev,
+            scrollNext,
+            canScrollPrev,
+            canScrollNext,
+        }, children: jsxRuntime.jsx("div", { onKeyDownCapture: handleKeyDown, className: cn.cn("relative", className), role: "region", "aria-roledescription": "carousel", "data-slot": "carousel", ...props, children: children }) }));
+}
+function CarouselContent({ className, ...props }) {
+    const { carouselRef, orientation } = useCarousel();
+    return (jsxRuntime.jsx("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-content", children: jsxRuntime.jsx("div", { className: cn.cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className), ...props }) }));
+}
+function CarouselItem({ className, ...props }) {
+    const { orientation } = useCarousel();
+    return (jsxRuntime.jsx("div", { role: "group", "aria-roledescription": "slide", "data-slot": "carousel-item", className: cn.cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className), ...props }));
+}
+function CarouselPrevious({ className, variant = "outline", size = "icon-sm", ...props }) {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+    return (jsxRuntime.jsxs(button.Button, { "data-slot": "carousel-previous", variant: variant, size: size, className: cn.cn("absolute touch-manipulation rounded-full", orientation === "horizontal"
+            ? "inset-y-0 -left-12 my-auto"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollPrev, onClick: scrollPrev, ...props, children: [jsxRuntime.jsx(lucideReact.ChevronLeftIcon, {}), jsxRuntime.jsx("span", { className: "sr-only", children: "Previous slide" })] }));
+}
+function CarouselNext({ className, variant = "outline", size = "icon-sm", ...props }) {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+    return (jsxRuntime.jsxs(button.Button, { "data-slot": "carousel-next", variant: variant, size: size, className: cn.cn("absolute touch-manipulation rounded-full", orientation === "horizontal"
+            ? "inset-y-0 -right-12 my-auto"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className), disabled: !canScrollNext, onClick: scrollNext, ...props, children: [jsxRuntime.jsx(lucideReact.ChevronRightIcon, {}), jsxRuntime.jsx("span", { className: "sr-only", children: "Next slide" })] }));
+}
+
+exports.Carousel = Carousel;
+exports.CarouselContent = CarouselContent;
+exports.CarouselItem = CarouselItem;
+exports.CarouselNext = CarouselNext;
+exports.CarouselPrevious = CarouselPrevious;
+exports.useCarousel = useCarousel;

package/dist/cjs/components/chart.cjs

@@ -0,0 +1,160 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cn = require('cn');
+var RechartsPrimitive = require('recharts');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var RechartsPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RechartsPrimitive);
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" };
+const INITIAL_DIMENSION = { width: 320, height: 200 };
+const ChartContext = React__namespace.createContext(null);
+function useChart() {
+    const context = React__namespace.useContext(ChartContext);
+    if (!context) {
+        throw new Error("useChart must be used within a <ChartContainer />");
+    }
+    return context;
+}
+function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
+    const uniqueId = React__namespace.useId();
+    const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+    return (jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: jsxRuntime.jsxs("div", { "data-slot": "chart", "data-chart": chartId, className: cn.cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className), ...props, children: [jsxRuntime.jsx(ChartStyle, { id: chartId, config: config }), jsxRuntime.jsx(RechartsPrimitive__namespace.ResponsiveContainer, { initialDimension: initialDimension, children: children })] }) }));
+}
+const ChartStyle = ({ id, config }) => {
+    const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);
+    if (!colorConfig.length) {
+        return null;
+    }
+    return (jsxRuntime.jsx("style", { dangerouslySetInnerHTML: {
+            __html: Object.entries(THEMES)
+                .map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+                .map(([key, itemConfig]) => {
+                const color = itemConfig.theme?.[theme] ??
+                    itemConfig.color;
+                return color ? `  --color-${key}: ${color};` : null;
+            })
+                .join("\n")}
+}
+`)
+                .join("\n"),
+        } }));
+};
+const ChartTooltip = RechartsPrimitive__namespace.Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }) {
+    const { config } = useChart();
+    const tooltipLabel = React__namespace.useMemo(() => {
+        if (hideLabel || !payload?.length) {
+            return null;
+        }
+        const [item] = payload;
+        const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+        const value = !labelKey && typeof label === "string"
+            ? (config[label]?.label ?? label)
+            : itemConfig?.label;
+        if (labelFormatter) {
+            return (jsxRuntime.jsx("div", { className: cn.cn("font-medium", labelClassName), children: labelFormatter(value, payload) }));
+        }
+        if (!value) {
+            return null;
+        }
+        return jsxRuntime.jsx("div", { className: cn.cn("font-medium", labelClassName), children: value });
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey,
+    ]);
+    if (!active || !payload?.length) {
+        return null;
+    }
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    return (jsxRuntime.jsxs("div", { className: cn.cn("grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className), children: [!nestLabel ? tooltipLabel : null, jsxRuntime.jsx("div", { className: "grid gap-1.5", children: payload
+                    .filter((item) => item.type !== "none")
+                    .map((item, index) => {
+                    const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+                    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+                    const indicatorColor = color ?? item.payload?.fill ?? item.color;
+                    return (jsxRuntime.jsx("div", { className: cn.cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", indicator === "dot" && "items-center"), children: formatter && item?.value !== undefined && item.name ? (formatter(item.value, item.name, item, index, item.payload)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [itemConfig?.icon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (!hideIndicator && (jsxRuntime.jsx("div", { className: cn.cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+                                        "h-2.5 w-2.5": indicator === "dot",
+                                        "w-1": indicator === "line",
+                                        "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                                        "my-0.5": nestLabel && indicator === "dashed",
+                                    }), style: {
+                                        "--color-bg": indicatorColor,
+                                        "--color-border": indicatorColor,
+                                    } }))), jsxRuntime.jsxs("div", { className: cn.cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"), children: [jsxRuntime.jsxs("div", { className: "grid gap-1.5", children: [nestLabel ? tooltipLabel : null, jsxRuntime.jsx("span", { className: "text-muted-foreground", children: itemConfig?.label ?? item.name })] }), item.value != null && (jsxRuntime.jsx("span", { className: "font-mono font-medium text-foreground tabular-nums", children: typeof item.value === "number"
+                                                ? item.value.toLocaleString()
+                                                : String(item.value) }))] })] })) }, index));
+                }) })] }));
+}
+const ChartLegend = RechartsPrimitive__namespace.Legend;
+function ChartLegendContent({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey, }) {
+    const { config } = useChart();
+    if (!payload?.length) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { className: cn.cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className), children: payload
+            .filter((item) => item.type !== "none")
+            .map((item, index) => {
+            const key = `${nameKey ?? item.dataKey ?? "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            return (jsxRuntime.jsxs("div", { className: cn.cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"), children: [itemConfig?.icon && !hideIcon ? (jsxRuntime.jsx(itemConfig.icon, {})) : (jsxRuntime.jsx("div", { className: "h-2 w-2 shrink-0 rounded-[2px]", style: {
+                            backgroundColor: item.color,
+                        } })), itemConfig?.label] }, index));
+        }) }));
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null) {
+        return undefined;
+    }
+    const payloadPayload = "payload" in payload &&
+        typeof payload.payload === "object" &&
+        payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (key in payload &&
+        typeof payload[key] === "string") {
+        configLabelKey = payload[key];
+    }
+    else if (payloadPayload &&
+        key in payloadPayload &&
+        typeof payloadPayload[key] === "string") {
+        configLabelKey = payloadPayload[key];
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+exports.ChartContainer = ChartContainer;
+exports.ChartLegend = ChartLegend;
+exports.ChartLegendContent = ChartLegendContent;
+exports.ChartStyle = ChartStyle;
+exports.ChartTooltip = ChartTooltip;
+exports.ChartTooltipContent = ChartTooltipContent;

package/dist/cjs/components/checkbox.cjs

@@ -0,0 +1,13 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var checkbox = require('@base-ui/react/checkbox');
+var cn = require('cn');
+var lucideReact = require('lucide-react');
+
+function Checkbox({ className, ...props }) {
+    return (jsxRuntime.jsx(checkbox.Checkbox.Root, { "data-slot": "checkbox", className: cn.cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary", className), ...props, children: jsxRuntime.jsx(checkbox.Checkbox.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: jsxRuntime.jsx(lucideReact.CheckIcon, {}) }) }));
+}
+
+exports.Checkbox = Checkbox;

package/dist/cjs/components/code-block.cjs

@@ -0,0 +1,110 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var cn = require('cn');
+var button = require('./button.cjs');
+var lucideReact = require('lucide-react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const codeBlockVariants = classVarianceAuthority.cva("group/code-block relative flex w-full min-w-0 flex-col overflow-hidden rounded-lg text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 data-[size=sm]:text-xs", {
+    variants: {
+        variant: {
+            default: "border border-input text-foreground has-[>[data-slot=code-block-content]:focus-visible]:border-ring dark:bg-input/30",
+            destructive: "border border-destructive/30 text-destructive dark:border-destructive/40",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function CodeBlock({ className, variant = "default", size = "default", ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "code-block", "data-variant": variant, "data-size": size, className: cn.cn(codeBlockVariants({ variant }), className), ...props }));
+}
+function CodeBlockHeader({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "code-block-header", className: cn.cn("flex min-w-0 shrink-0 items-center gap-2 px-3 pt-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pt-2.5 group-data-[variant=destructive]/code-block:text-destructive *:has-[>[data-slot=code-block-title]]:min-w-0", className), ...props }));
+}
+function CodeBlockTitle({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "code-block-title", className: cn.cn("min-w-0 truncate font-sans text-sm font-medium text-foreground group-data-[size=sm]/code-block:text-xs group-data-[variant=destructive]/code-block:text-destructive [&_svg]:pointer-events-none [&_svg]:inline-block [&_svg]:align-middle [&_svg:not([class*='size-'])]:size-3.5 *:[svg]:me-1.5", className), ...props }));
+}
+function CodeBlockActions({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "code-block-actions", className: cn.cn("-my-1 ms-auto -me-1.5 flex shrink-0 items-center gap-1 [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:m-0 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:pointer-coarse:opacity-100 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-1 [[data-slot=code-block]>&]:*:[button]:ring-foreground/10", className), ...props }));
+}
+function CodeBlockCopyButton({ value, variant = "ghost", size = "icon-xs", className, onClick, ...props }) {
+    const [copied, setCopied] = React__namespace.useState(false);
+    React__namespace.useEffect(() => {
+        if (!copied) {
+            return;
+        }
+        const timeout = setTimeout(() => setCopied(false), 2000);
+        return () => clearTimeout(timeout);
+    }, [copied]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(button.Button, { "data-slot": "code-block-copy-button", "data-copied": copied || undefined, variant: variant, size: size, "aria-label": copied ? "Copied" : "Copy", className: cn.cn(className), onClick: (event) => {
+                    onClick?.(event);
+                    navigator.clipboard
+                        .writeText(value)
+                        .then(() => setCopied(true))
+                        .catch(() => { });
+                }, ...props, children: copied ? (jsxRuntime.jsx(lucideReact.CheckIcon, {})) : (jsxRuntime.jsx(lucideReact.CopyIcon, {})) }), jsxRuntime.jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? "Copied" : "" })] }));
+}
+function CodeBlockContent({ className, children, style, wrap = false, lineNumbers = false, startLine = 1, ...props }) {
+    return (jsxRuntime.jsx("pre", { "data-slot": "code-block-content", "data-wrap": wrap || undefined, "data-numbered": lineNumbers || undefined, dir: "ltr", tabIndex: 0, style: { counterReset: `line ${startLine - 1}`, ...style }, className: cn.cn("min-h-0 min-w-0 scroll-fade-x scrollbar-thin overflow-auto px-3 py-3 text-start font-mono leading-relaxed outline-none group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:py-2.5 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5 data-wrap:scroll-fade-y data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap", className), ...props, children: jsxRuntime.jsx("code", { "data-slot": "code-block-code", className: "grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0", children: lineNumbers && typeof children === "string"
+                ? children
+                    .replace(/\n$/, "")
+                    .split("\n")
+                    .map((line, index) => (jsxRuntime.jsx(CodeBlockLine, { children: line }, index)))
+                : children }) }));
+}
+const codeBlockLineVariants = classVarianceAuthority.cva("relative -mx-3 block min-h-lh px-3 group-data-[size=sm]/code-block:-mx-2.5 group-data-[size=sm]/code-block:px-2.5 before:min-w-6 before:text-end before:text-muted-foreground after:absolute after:start-1 after:top-0 after:text-muted-foreground after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:gap-x-3 in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']", {
+    variants: {
+        variant: {
+            default: "",
+            added: "bg-muted after:content-['+']",
+            removed: "bg-destructive/10 after:text-destructive after:content-['−']",
+            highlighted: "bg-muted",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function CodeBlockLine({ className, variant = "default", children, ...props }) {
+    // An empty line holds a newline so copying a selection keeps blank lines.
+    const empty = children === undefined ||
+        children === null ||
+        children === "" ||
+        (Array.isArray(children) && children.length === 0);
+    return (jsxRuntime.jsx("span", { "data-slot": "code-block-line", "data-variant": variant, className: cn.cn(codeBlockLineVariants({ variant }), className), ...props, children: jsxRuntime.jsx("span", { "data-slot": "code-block-line-content", className: "min-w-0", children: empty ? "\n" : children }) }));
+}
+function CodeBlockFooter({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "code-block-footer", className: cn.cn("flex min-w-0 shrink-0 items-center gap-2 px-3 pb-3 text-muted-foreground group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5", className), ...props }));
+}
+
+exports.CodeBlock = CodeBlock;
+exports.CodeBlockActions = CodeBlockActions;
+exports.CodeBlockContent = CodeBlockContent;
+exports.CodeBlockCopyButton = CodeBlockCopyButton;
+exports.CodeBlockFooter = CodeBlockFooter;
+exports.CodeBlockHeader = CodeBlockHeader;
+exports.CodeBlockLine = CodeBlockLine;
+exports.CodeBlockTitle = CodeBlockTitle;