@badnpm/ui 0.0.0-stage → 0.0.1

package/dist/esm/components/theme-toggle.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { MoonIcon, SunIcon } from 'lucide-react';
+import { Button } from './button.js';
+import { useTheme } from '../providers/theme-provider.js';
+
+function ThemeToggle({ darkLabel = '切换到深色主题', lightLabel = '切换到浅色主题', variant = 'outline', size = 'icon', title = '切换主题', onClick, ...props }) {
+    const { toggleTheme } = useTheme();
+    return (jsxs(Button, { type: "button", variant: variant, size: size, title: title, ...props, onClick: (event) => {
+            // 先执行使用方回调，允许通过 preventDefault() 取消主题切换。
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                toggleTheme();
+        }, children: [jsx(MoonIcon, { "data-icon": "inline-start", "aria-hidden": "true", className: "animate-in duration-200 ease-out zoom-in-75 fade-in spin-in-90 motion-reduce:animate-none dark:hidden" }), jsx(SunIcon, { "data-icon": "inline-start", "aria-hidden": "true", className: "hidden animate-in duration-200 ease-out zoom-in-75 fade-in spin-in-90 motion-reduce:animate-none dark:block" }), jsx("span", { className: "sr-only dark:hidden", children: darkLabel }), jsx("span", { className: "sr-only hidden dark:block", children: lightLabel })] }));
+}
+
+export { ThemeToggle };

package/dist/esm/components/toast.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Toast as Toast$1 } from '@base-ui/react/toast';
+import { cn } from 'cn';
+import { Button } from './button.js';
+import { XIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from 'lucide-react';
+
+const toast = Toast$1.createToastManager();
+function ToastProvider({ ...props }) {
+    return jsx(Toast$1.Provider, { ...props });
+}
+function ToastPortal({ ...props }) {
+    return jsx(Toast$1.Portal, { "data-slot": "toast-portal", ...props });
+}
+function ToastViewport({ className, ...props }) {
+    return (jsx(Toast$1.Viewport, { "data-slot": "toast-viewport", className: cn("pointer-events-none fixed inset-x-4 bottom-4 z-50 mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full", className), ...props }));
+}
+function Toast({ className, ...props }) {
+    return (jsx(Toast$1.Root, { "data-slot": "toast", className: cn("group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-2xl border bg-popover text-popover-foreground shadow-lg will-change-transform outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]", "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_500ms_cubic-bezier(0.22,1,0.36,1),opacity_500ms,height_150ms]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']", "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]", "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]", "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]", "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]", "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]", "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]", className), ...props }));
+}
+function ToastContent({ className, ...props }) {
+    return (jsx(Toast$1.Content, { "data-slot": "toast-content", className: cn("flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100", className), ...props }));
+}
+function ToastTitle({ className, ...props }) {
+    return (jsx(Toast$1.Title, { "data-slot": "toast-title", className: cn("text-sm font-medium", className), ...props }));
+}
+function ToastDescription({ className, ...props }) {
+    return (jsx(Toast$1.Description, { "data-slot": "toast-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function ToastAction({ className, render = jsx(Button, { variant: "outline", size: "sm" }), ...props }) {
+    return (jsx(Toast$1.Action, { "data-slot": "toast-action", render: render, className: cn("shrink-0", className), ...props }));
+}
+function ToastClose({ className, children, render = jsx(Button, { variant: "ghost", size: "icon-sm" }), ...props }) {
+    return (jsx(Toast$1.Close, { "data-slot": "toast-close", "aria-label": "Close toast", render: render, className: cn("relative shrink-0 text-muted-foreground after:absolute after:-inset-2 after:content-[''] hover:text-foreground", className), ...props, children: children ?? (jsx(XIcon, { "aria-hidden": "true" })) }));
+}
+function ToastIcon({ type }) {
+    let icon = null;
+    if (type === "success") {
+        icon = (jsx(CircleCheckIcon, { "aria-hidden": "true" }));
+    }
+    if (type === "info") {
+        icon = (jsx(InfoIcon, { "aria-hidden": "true" }));
+    }
+    if (type === "warning") {
+        icon = (jsx(TriangleAlertIcon, { "aria-hidden": "true" }));
+    }
+    if (type === "error") {
+        icon = (jsx(OctagonXIcon, { className: "text-destructive", "aria-hidden": "true" }));
+    }
+    if (type === "loading") {
+        icon = (jsx(Loader2Icon, { className: "animate-spin", "aria-hidden": "true" }));
+    }
+    if (!icon) {
+        return null;
+    }
+    return (jsx("span", { "data-slot": "toast-icon", className: "shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", children: icon }));
+}
+function ToastList() {
+    const { toasts } = Toast$1.useToastManager();
+    return toasts.map((toastItem) => (jsx(Toast, { toast: toastItem, children: jsxs(ToastContent, { children: [jsx(ToastIcon, { type: toastItem.type }), jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [jsx(ToastTitle, {}), jsx(ToastDescription, {})] }), jsx(ToastAction, {}), jsx(ToastClose, {})] }) }, toastItem.id)));
+}
+function Toaster({ children, toastManager = toast, ...props }) {
+    return (jsxs(ToastProvider, { toastManager: toastManager, ...props, children: [children, jsx(ToastPortal, { children: jsx(ToastViewport, { children: jsx(ToastList, {}) }) })] }));
+}
+const createToastManager = Toast$1.createToastManager;
+const useToastManager = Toast$1.useToastManager;
+
+export { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager };

package/dist/esm/components/toggle-group.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
+import { cn } from 'cn';
+import { toggleVariants } from './toggle.js';
+
+const ToggleGroupContext = React.createContext({
+    size: "default",
+    variant: "default",
+    spacing: 2,
+    orientation: "horizontal",
+});
+function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", children, ...props }) {
+    return (jsx(ToggleGroup$1, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch", className), ...props, children: jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children: children }) }));
+}
+function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
+    const context = React.useContext(ToggleGroupContext);
+    return (jsx(Toggle, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+            variant: context.variant || variant,
+            size: context.size || size,
+        }), className), ...props, children: children }));
+}
+
+export { ToggleGroup, ToggleGroupItem };

package/dist/esm/components/toggle.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { Toggle as Toggle$1 } from '@base-ui/react/toggle';
+import { cva } from 'class-variance-authority';
+import { cn } from 'cn';
+
+const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            outline: "border border-input bg-transparent hover:bg-muted",
+        },
+        size: {
+            default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] 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 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Toggle({ className, variant = "default", size = "default", ...props }) {
+    return (jsx(Toggle$1, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
+}
+
+export { Toggle, toggleVariants };

package/dist/esm/components/tooltip.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+import { cn } from 'cn';
+
+function TooltipProvider({ delay = 0, ...props }) {
+    return (jsx(Tooltip$1.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props }));
+}
+function Tooltip({ ...props }) {
+    return jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+    return jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+    return (jsx(Tooltip$1.Portal, { children: jsx(Tooltip$1.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: jsxs(Tooltip$1.Popup, { "data-slot": "tooltip-content", className: cn("z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [children, jsx(Tooltip$1.Arrow, { className: "z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })] }) }) }));
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/esm/components/trace.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from 'cn';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible.js';
+import { ChevronRightIcon } from 'lucide-react';
+
+function Trace({ className, ...props }) {
+    return (jsx("div", { "data-slot": "trace", className: cn("flex w-full min-w-0 flex-col gap-2 *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:rounded-md *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none *:has-[>[data-slot=trace-line]]:focus-visible:ring-3 *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50", className), ...props }));
+}
+function TraceLine({ className, status, ...props }) {
+    return (jsx("span", { "data-slot": "trace-line", "data-status": status, className: cn("flex w-fit max-w-full min-w-0 items-center gap-2 text-sm text-muted-foreground transition-colors in-[a,button]:cursor-pointer in-[a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=running]:*:data-[slot=trace-title]:shimmer", className), ...props }));
+}
+function TraceIcon({ className, ...props }) {
+    return (jsx("span", { "data-slot": "trace-icon", "aria-hidden": "true", className: cn("flex size-4 shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=trace-title]~&]:-ml-1", className), ...props }));
+}
+function TraceTitle({ className, ...props }) {
+    return (jsx("span", { "data-slot": "trace-title", className: cn("min-w-0 truncate motion-reduce:shimmer-none", className), ...props }));
+}
+function TraceDescription({ className, ...props }) {
+    return (jsx("span", { "data-slot": "trace-description", className: cn("shrink-0 text-muted-foreground tabular-nums", className), ...props }));
+}
+function TraceCollapsible({ className, ...props }) {
+    return (jsx(Collapsible, { "data-slot": "trace-collapsible", className: cn("flex w-full min-w-0 flex-col", className), ...props }));
+}
+function TraceCollapsibleTrigger({ className, children, ...props }) {
+    return (jsxs(CollapsibleTrigger, { "data-slot": "trace-collapsible-trigger", className: cn("group/trace-collapsible-trigger flex w-fit max-w-full min-w-0 cursor-pointer items-center gap-1 rounded-md text-left text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 has-[[data-status=error]]:text-destructive", className), ...props, children: [children, jsx(TraceIcon, { className: "transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90", children: jsx(ChevronRightIcon, {}) })] }));
+}
+function TraceCollapsibleContent({ className, children, ...props }) {
+    return (jsx(CollapsibleContent, { "data-slot": "trace-collapsible-content", className: "h-(--collapsible-panel-height) min-w-0 overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0", ...props, children: jsx("div", { "data-slot": "trace-collapsible-content-inner", className: cn("mt-2 mb-1 ml-[calc(--spacing(2)-1px)] min-w-0 border-l pr-1 pl-4 leading-relaxed wrap-break-word text-muted-foreground", className), children: children }) }));
+}
+
+export { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle };

package/dist/esm/hooks/use-highlighted-code.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { loadHighlighter } from '../lib/highlighter.js';
+
+function useHighlightedCode(value, language) {
+    // A trailing newline would render as an extra empty line.
+    const code = value.endsWith("\n") ? value.slice(0, -1) : value;
+    const [loaded, setLoaded] = React.useState(null);
+    const highlighter = loaded?.language === language ? loaded.highlighter : null;
+    React.useEffect(() => {
+        let cancelled = false;
+        loadHighlighter(language)
+            .then((next) => {
+            if (!cancelled) {
+                setLoaded({ language, highlighter: next });
+            }
+        })
+            .catch(() => { });
+        return () => {
+            cancelled = true;
+        };
+    }, [language]);
+    // The complete lines, highlighted. While the code streams, only the new
+    // lines are tokenized, starting from the grammar state of the last one.
+    const [done, setDone] = React.useState({ highlighter: null, text: "", lines: [] });
+    let next = done;
+    if (next.highlighter !== highlighter || !code.startsWith(next.text)) {
+        next = { highlighter, text: "", lines: [] };
+    }
+    const end = code.lastIndexOf("\n") + 1;
+    if (highlighter && end > next.text.length) {
+        const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);
+        next = {
+            highlighter,
+            text: code.slice(0, end),
+            lines: [...next.lines, ...result.lines],
+            state: result.state,
+        };
+    }
+    if (next !== done) {
+        setDone(next);
+    }
+    // The last line is still being written, so it is tokenized on every render.
+    const tail = code.slice(end);
+    return React.useMemo(() => {
+        if (!highlighter) {
+            return code.split("\n");
+        }
+        return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];
+    }, [code, highlighter, next, tail]);
+}
+
+export { useHighlightedCode };

package/dist/esm/hooks/use-hydrated.js

@@ -0,0 +1,13 @@
+"use client";
+import { useSyncExternalStore } from 'react';
+
+// 水合完成与否由 React 的服务端快照机制区分，无需 effect 中同步设置状态。
+const subscribe = () => () => { };
+const getSnapshot = () => true;
+const getServerSnapshot = () => false;
+/** 服务端及客户端水合首帧返回 false，之后返回 true；纯客户端渲染直接返回 true。 */
+function useHydrated() {
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+export { useHydrated };

package/dist/esm/hooks/use-mobile.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+function subscribe(onChange) {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+}
+const getSnapshot = () => window.innerWidth < MOBILE_BREAKPOINT;
+const getServerSnapshot = () => false;
+function useIsMobile() {
+    return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+export { useIsMobile };

package/dist/esm/index.js

@@ -0,0 +1,73 @@
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './components/accordion.js';
+export { Alert, AlertAction, AlertDescription, AlertTitle } from './components/alert.js';
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from './components/alert-dialog.js';
+export { AspectRatio } from './components/aspect-ratio.js';
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger } from './components/attachment.js';
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage } from './components/avatar.js';
+export { Badge, badgeVariants } from './components/badge.js';
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from './components/breadcrumb.js';
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions } from './components/bubble.js';
+export { Button, buttonVariants } from './components/button.js';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants } from './components/button-group.js';
+export { Calendar, CalendarDayButton } from './components/calendar.js';
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './components/card.js';
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel } from './components/carousel.js';
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './components/chart.js';
+export { Checkbox } from './components/checkbox.js';
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle } from './components/code-block.js';
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from './components/collapsible.js';
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from './components/combobox.js';
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from './components/command.js';
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from './components/context-menu.js';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/dialog.js';
+export { DirectionProvider, useDirection } from '@base-ui/react/direction-provider';
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger } from './components/drawer.js';
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/dropdown-menu.js';
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from './components/empty.js';
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from './components/field.js';
+export { HoverCard, HoverCardContent, HoverCardTrigger } from './components/hover-card.js';
+export { Input } from './components/input.js';
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from './components/input-group.js';
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './components/input-otp.js';
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from './components/item.js';
+export { Kbd, KbdGroup } from './components/kbd.js';
+export { Label } from './components/label.js';
+export { Marker, MarkerContent, MarkerIcon, markerVariants } from './components/marker.js';
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from './components/menubar.js';
+export { Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader } from './components/message.js';
+export { MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport } from './components/message-scroller.js';
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from './components/native-select.js';
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, navigationMenuTriggerStyle } from './components/navigation-menu.js';
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from './components/pagination.js';
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from './components/popover.js';
+export { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue } from './components/progress.js';
+export { Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle } from './components/questionnaire.js';
+export { RadioGroup, RadioGroupItem } from './components/radio-group.js';
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './components/resizable.js';
+export { ScrollArea, ScrollBar } from './components/scroll-area.js';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/select.js';
+export { Separator } from './components/separator.js';
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './components/sheet.js';
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar } from './components/sidebar.js';
+export { Skeleton } from './components/skeleton.js';
+export { Slider } from './components/slider.js';
+export { Spinner } from './components/spinner.js';
+export { Switch } from './components/switch.js';
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './components/table.js';
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from './components/tabs.js';
+export { Textarea } from './components/textarea.js';
+export { ThemeToggle } from './components/theme-toggle.js';
+export { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager } from './components/toast.js';
+export { Toggle, toggleVariants } from './components/toggle.js';
+export { ToggleGroup, ToggleGroupItem } from './components/toggle-group.js';
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './components/tooltip.js';
+export { Trace, TraceCollapsible, TraceCollapsibleContent, TraceCollapsibleTrigger, TraceDescription, TraceIcon, TraceLine, TraceTitle } from './components/trace.js';
+export { PreferenceProvider, usePreference } from './providers/preference-provider.js';
+export { ThemeProvider, useTheme } from './providers/theme-provider.js';
+export { useHighlightedCode } from './hooks/use-highlighted-code.js';
+export { useHydrated } from './hooks/use-hydrated.js';
+export { useIsMobile } from './hooks/use-mobile.js';
+export { highlightCode, loadHighlighter } from './lib/highlighter.js';
+export { BASE_COLORS, COLOR_THEMES, DEFAULT_PREFERENCE, RADIUS_OPTIONS } from './lib/preference.js';
+export { cn } from 'cn';
+export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';

package/dist/esm/lib/highlighter.js

@@ -0,0 +1,93 @@
+import { jsx } from 'react/jsx-runtime';
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+
+// Add the languages you need. Each one loads the first time it is used.
+const languages = {
+    bash: () => import('shiki/langs/shellscript.mjs'),
+    css: () => import('shiki/langs/css.mjs'),
+    diff: () => import('shiki/langs/diff.mjs'),
+    html: () => import('shiki/langs/html.mjs'),
+    javascript: () => import('shiki/langs/javascript.mjs'),
+    json: () => import('shiki/langs/json.mjs'),
+    jsx: () => import('shiki/langs/jsx.mjs'),
+    markdown: () => import('shiki/langs/markdown.mjs'),
+    python: () => import('shiki/langs/python.mjs'),
+    sql: () => import('shiki/langs/sql.mjs'),
+    tsx: () => import('shiki/langs/tsx.mjs'),
+    typescript: () => import('shiki/langs/typescript.mjs'),
+    yaml: () => import('shiki/langs/yaml.mjs'),
+};
+const aliases = {
+    js: "javascript",
+    md: "markdown",
+    py: "python",
+    sh: "bash",
+    shell: "bash",
+    shellscript: "bash",
+    ts: "typescript",
+    yml: "yaml",
+    zsh: "bash",
+};
+let highlighter;
+function getHighlighter() {
+    highlighter ??= createHighlighterCore({
+        themes: [
+            import('shiki/themes/github-light.mjs'),
+            import('shiki/themes/github-dark.mjs'),
+        ],
+        langs: [],
+        engine: createJavaScriptRegexEngine({ forgiving: true }),
+    });
+    return highlighter;
+}
+function getLanguage(language) {
+    const name = language.toLowerCase();
+    if (name === "ansi") {
+        return name;
+    }
+    if (name in languages) {
+        return name;
+    }
+    return aliases[name] ?? null;
+}
+// Loads a language and returns a highlighter for it, or null for a language
+// that is not listed.
+async function loadHighlighter(language) {
+    const lang = getLanguage(language);
+    if (!lang) {
+        return null;
+    }
+    const shiki = await getHighlighter();
+    if (lang !== "ansi" && !shiki.getLoadedLanguages().includes(lang)) {
+        await shiki.loadLanguage(languages[lang]);
+    }
+    return {
+        // Returns one React node per line, and the grammar state after the last
+        // line. Pass that state back to continue where the code left off.
+        highlight(code, state) {
+            const tokenize = (text) => shiki.codeToTokens(text, {
+                lang,
+                themes: { light: "github-light", dark: "github-dark" },
+                defaultColor: false,
+                grammarState: state,
+            }).tokens;
+            // ANSI has no grammar state, so each line is tokenized on its own and
+            // gets the same colors whether it arrives in one piece or streams.
+            const tokens = lang === "ansi"
+                ? code.split("\n").flatMap((line) => tokenize(line))
+                : tokenize(code);
+            return {
+                lines: tokens.map((line) => line.map((token, index) => (jsx("span", { style: token.htmlStyle, className: "text-(--shiki-light) dark:text-(--shiki-dark)", children: token.content }, index)))),
+                state: shiki.getLastGrammarState(tokens),
+            };
+        },
+    };
+}
+// Returns one React node per line, or null for a language that is not listed.
+async function highlightCode(code, language) {
+    const highlighter = await loadHighlighter(language);
+    return highlighter ? highlighter.highlight(code).lines : null;
+}
+
+export { highlightCode, loadHighlighter };

package/dist/esm/lib/preference.js

@@ -0,0 +1,35 @@
+// color 用于选项色块预览：基础色取浅色模式的 muted-foreground，主题色取 primary。
+const BASE_COLORS = [
+    { value: 'neutral', label: 'Neutral', color: 'oklch(0.556 0 0)' },
+    { value: 'mist', label: 'Mist', color: 'oklch(0.56 0.021 213.5)' },
+    { value: 'zinc', label: 'Zinc', color: 'oklch(0.552 0.016 285.938)' },
+];
+// value 对应 CSS 的 data-theme 属性，label 用于展示，color 是固定的预览色。
+const COLOR_THEMES = [
+    { value: 'neutral', label: 'Neutral', color: 'oklch(0.205 0 0)' },
+    { value: 'blue', label: 'Blue', color: 'oklch(0.488 0.243 264.376)' },
+    { value: 'green', label: 'Green', color: 'oklch(0.527 0.154 150.069)' },
+    { value: 'orange', label: 'Orange', color: 'oklch(0.553 0.195 38.402)' },
+    { value: 'pink', label: 'Pink', color: 'oklch(0.525 0.223 3.958)' },
+    { value: 'purple', label: 'Purple', color: 'oklch(0.496 0.265 301.924)' },
+    { value: 'red', label: 'Red', color: 'oklch(0.505 0.213 27.518)' },
+    { value: 'rose', label: 'Rose', color: 'oklch(0.514 0.222 16.935)' },
+    { value: 'sky', label: 'Sky', color: 'oklch(0.5 0.134 242.749)' },
+    { value: 'yellow', label: 'Yellow', color: 'oklch(0.852 0.199 91.936)' },
+];
+// 圆角预设的 value 单位为 rem，可直接传给 setRadius，也可用于 borderRadius 预览。
+const RADIUS_OPTIONS = [
+    { value: 0, label: '0' },
+    { value: 0.25, label: '0.25' },
+    { value: 0.5, label: '0.5' },
+    { value: 0.625, label: 'Default' },
+    { value: 0.75, label: '0.75' },
+    { value: 1, label: '1' },
+];
+const DEFAULT_PREFERENCE = {
+    baseColor: 'neutral',
+    theme: 'neutral',
+    radius: 0.625,
+};
+
+export { BASE_COLORS, COLOR_THEMES, DEFAULT_PREFERENCE, RADIUS_OPTIONS };

package/dist/esm/providers/preference-provider.js

@@ -0,0 +1,124 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo, useState, useRef, useCallback, useLayoutEffect, useEffect, useContext } from 'react';
+import { useHydrated } from '../hooks/use-hydrated.js';
+import { COLOR_THEMES, BASE_COLORS, DEFAULT_PREFERENCE } from '../lib/preference.js';
+
+const PreferenceContext = createContext(undefined);
+// 校验选项标识，并将 unknown 收窄为对应的字符串联合类型。
+function isOption(options, value) {
+    return options.some((option) => option.value === value);
+}
+// 存储内容不可信：逐项校验，单个字段无效时不影响其他有效偏好。
+function normalizePreference(value, fallback) {
+    const candidate = typeof value === 'object' && value !== null ? value : {};
+    return {
+        baseColor: isOption(BASE_COLORS, candidate.baseColor) ? candidate.baseColor : fallback.baseColor,
+        theme: isOption(COLOR_THEMES, candidate.theme) ? candidate.theme : fallback.theme,
+        // 预设用于展示，不限制自定义圆角；只接受有限的非负数。
+        radius: typeof candidate.radius === 'number' && Number.isFinite(candidate.radius) && candidate.radius >= 0
+            ? candidate.radius
+            : fallback.radius,
+    };
+}
+// 解析并校验存储字符串；没有记录或 JSON 损坏时回退到默认值。
+function parsePreference(value, fallback) {
+    try {
+        return normalizePreference(value === null ? null : JSON.parse(value), fallback);
+    }
+    catch {
+        return fallback;
+    }
+}
+// 将存储访问与 JSON 解析分开处理，兼容浏览器禁止存储的情况。
+function readPreference(storageKey, fallback) {
+    try {
+        return parsePreference(localStorage.getItem(storageKey), fallback);
+    }
+    catch {
+        // 存储不可用时，偏好仍可在当前页面内使用。
+        return fallback;
+    }
+}
+// 比较字段值，避免相同偏好触发重复渲染。
+function isSamePreference(current, next) {
+    return current.baseColor === next.baseColor && current.theme === next.theme && current.radius === next.radius;
+}
+// 管理基础色、主题配色和圆角；深浅模式继续由 ThemeProvider 管理。
+function PreferenceProvider({ children, defaultPreference, storageKey = 'bad-ui:preference', }) {
+    // 先补齐并校验调用方传入的默认值，再作为存储读取和重置时的回退值。
+    const { baseColor, theme, radius } = normalizePreference(defaultPreference, DEFAULT_PREFERENCE);
+    const defaults = useMemo(() => ({ baseColor, theme, radius }), [baseColor, theme, radius]);
+    const hydrated = useHydrated();
+    const [storedPreference, setPreference] = useState(() => readPreference(storageKey, defaults));
+    // 保存最新偏好，保证同一批次连续修改不同字段时保留先前修改。
+    const preferenceRef = useRef(storedPreference);
+    // 服务端及客户端水合首帧使用相同默认值，水合后才向子组件公开本地偏好。
+    const preference = hydrated ? storedPreference : defaults;
+    // 主动修改时才写入存储；跨标签页同步仅更新内存，避免删除后又写回默认值。
+    const updatePreference = useCallback((patch) => {
+        const current = preferenceRef.current;
+        const next = normalizePreference({ ...current, ...patch }, current);
+        if (isSamePreference(current, next))
+            return;
+        preferenceRef.current = next;
+        setPreference(next);
+        try {
+            localStorage.setItem(storageKey, JSON.stringify(next));
+        }
+        catch {
+            // 写入失败不阻断页面偏好更新。
+        }
+    }, [storageKey]);
+    const setBaseColor = useCallback((nextBaseColor) => {
+        updatePreference({ baseColor: nextBaseColor });
+    }, [updatePreference]);
+    // 此处 theme 是配色方案（如 blue），并非 light / dark / system。
+    const setTheme = useCallback((nextTheme) => {
+        updatePreference({ theme: nextTheme });
+    }, [updatePreference]);
+    // 圆角以 rem 保存，转换为 CSS 长度的工作由下方 effect 统一完成。
+    const setRadius = useCallback((nextRadius) => {
+        updatePreference({ radius: nextRadius });
+    }, [updatePreference]);
+    // 配色通过独立属性组合；圆角以内联变量覆盖主题默认值，不改动深浅模式类名。
+    useLayoutEffect(() => {
+        if (!hydrated)
+            return;
+        const root = document.documentElement;
+        // 在浏览器绘制前更新属性，分别匹配 base-color 和 themes 中的选择器。
+        root.dataset.baseColor = preference.baseColor;
+        root.dataset.theme = preference.theme;
+        root.style.setProperty('--radius', `${preference.radius}rem`);
+    }, [preference, hydrated]);
+    useEffect(() => {
+        // 接收其他标签页的变更；删除或清空存储时恢复默认偏好。
+        function handleStorageChange(event) {
+            // 只处理 localStorage 中当前键的变化；clear() 的事件 key 为 null。
+            if (event.storageArea !== localStorage || (event.key !== null && event.key !== storageKey)) {
+                return;
+            }
+            const next = parsePreference(event.newValue, defaults);
+            if (isSamePreference(preferenceRef.current, next))
+                return;
+            preferenceRef.current = next;
+            setPreference(next);
+        }
+        window.addEventListener('storage', handleStorageChange);
+        // 卸载或依赖变化时注销监听，避免重复订阅。
+        return () => window.removeEventListener('storage', handleStorageChange);
+    }, [defaults, storageKey]);
+    // 保持 Context 值的引用稳定，避免父组件重渲染引起无关的订阅更新。
+    const value = useMemo(() => ({ ...preference, setBaseColor, setTheme, setRadius }), [preference, setBaseColor, setTheme, setRadius]);
+    return jsx(PreferenceContext.Provider, { value: value, children: children });
+}
+// 统一读取偏好上下文，在缺少 Provider 时给出明确的使用错误。
+function usePreference() {
+    const context = useContext(PreferenceContext);
+    if (context === undefined) {
+        throw new Error('usePreference must be used within a PreferenceProvider');
+    }
+    return context;
+}
+
+export { PreferenceProvider, usePreference };