@badnpm/ui 0.0.0-stage → 0.0.1

package/dist/cjs/providers/preference-provider.cjs

@@ -0,0 +1,127 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useHydrated = require('../hooks/use-hydrated.cjs');
+var preference = require('../lib/preference.cjs');
+
+const PreferenceContext = React.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(preference.BASE_COLORS, candidate.baseColor) ? candidate.baseColor : fallback.baseColor,
+        theme: isOption(preference.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, preference.DEFAULT_PREFERENCE);
+    const defaults = React.useMemo(() => ({ baseColor, theme, radius }), [baseColor, theme, radius]);
+    const hydrated = useHydrated.useHydrated();
+    const [storedPreference, setPreference] = React.useState(() => readPreference(storageKey, defaults));
+    // 保存最新偏好，保证同一批次连续修改不同字段时保留先前修改。
+    const preferenceRef = React.useRef(storedPreference);
+    // 服务端及客户端水合首帧使用相同默认值，水合后才向子组件公开本地偏好。
+    const preference$1 = hydrated ? storedPreference : defaults;
+    // 主动修改时才写入存储；跨标签页同步仅更新内存，避免删除后又写回默认值。
+    const updatePreference = React.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 = React.useCallback((nextBaseColor) => {
+        updatePreference({ baseColor: nextBaseColor });
+    }, [updatePreference]);
+    // 此处 theme 是配色方案（如 blue），并非 light / dark / system。
+    const setTheme = React.useCallback((nextTheme) => {
+        updatePreference({ theme: nextTheme });
+    }, [updatePreference]);
+    // 圆角以 rem 保存，转换为 CSS 长度的工作由下方 effect 统一完成。
+    const setRadius = React.useCallback((nextRadius) => {
+        updatePreference({ radius: nextRadius });
+    }, [updatePreference]);
+    // 配色通过独立属性组合；圆角以内联变量覆盖主题默认值，不改动深浅模式类名。
+    React.useLayoutEffect(() => {
+        if (!hydrated)
+            return;
+        const root = document.documentElement;
+        // 在浏览器绘制前更新属性，分别匹配 base-color 和 themes 中的选择器。
+        root.dataset.baseColor = preference$1.baseColor;
+        root.dataset.theme = preference$1.theme;
+        root.style.setProperty('--radius', `${preference$1.radius}rem`);
+    }, [preference$1, hydrated]);
+    React.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 = React.useMemo(() => ({ ...preference$1, setBaseColor, setTheme, setRadius }), [preference$1, setBaseColor, setTheme, setRadius]);
+    return jsxRuntime.jsx(PreferenceContext.Provider, { value: value, children: children });
+}
+// 统一读取偏好上下文，在缺少 Provider 时给出明确的使用错误。
+function usePreference() {
+    const context = React.useContext(PreferenceContext);
+    if (context === undefined) {
+        throw new Error('usePreference must be used within a PreferenceProvider');
+    }
+    return context;
+}
+
+exports.PreferenceProvider = PreferenceProvider;
+exports.usePreference = usePreference;

package/dist/cjs/providers/theme-provider.cjs

@@ -0,0 +1,181 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useHydrated = require('../hooks/use-hydrated.cjs');
+
+const COLOR_SCHEME_QUERY = '(prefers-color-scheme: dark)';
+const ThemeProviderContext = React.createContext(undefined);
+// 校验存储值，同时将类型收窄为合法的主题选项。
+function isTheme(value) {
+    return value === 'dark' || value === 'light' || value === 'system';
+}
+// 优先读取已保存的主题；值无效或存储不可用时使用默认主题。
+function readTheme(storageKey, fallback) {
+    try {
+        const value = localStorage.getItem(storageKey);
+        return isTheme(value) ? value : fallback;
+    }
+    catch {
+        // 存储不可用时回退到默认主题，不影响组件初始化。
+        return fallback;
+    }
+}
+// 持久化用户选择，存储失败时仍允许更新页面主题。
+function persistTheme(storageKey, theme) {
+    try {
+        localStorage.setItem(storageKey, theme);
+    }
+    catch {
+        // 忽略存储异常，主题仍可在当前页面内切换。
+    }
+}
+// 将用户选择解析为实际配色；system 每次读取当前系统偏好。
+function resolveTheme(theme) {
+    if (theme !== 'system') {
+        return theme;
+    }
+    return window.matchMedia(COLOR_SCHEME_QUERY).matches ? 'dark' : 'light';
+}
+// 更新根元素的主题类名，并返回清理临时样式及动画帧的函数。
+function applyTheme(theme, disableTransitionOnChange) {
+    const root = document.documentElement;
+    const resolvedTheme = resolveTheme(theme);
+    // 主题已生效且没有冲突类名时，跳过重复的 DOM 操作。
+    if (root.classList.contains(resolvedTheme) && !root.classList.contains(resolvedTheme === 'dark' ? 'light' : 'dark')) {
+        return () => { };
+    }
+    const style = disableTransitionOnChange ? document.createElement('style') : null;
+    if (style) {
+        style.textContent = '*,*::before,*::after{transition:none!important}';
+        document.head.appendChild(style);
+        // 强制浏览器计算样式，确保禁用过渡的规则先于主题切换生效。
+        window.getComputedStyle(root).getPropertyValue('transition-property');
+    }
+    root.classList.remove('light', 'dark');
+    root.classList.add(resolvedTheme);
+    if (!style) {
+        return () => { };
+    }
+    // 在禁用过渡期间计算新主题样式，再通过两次动画帧延迟移除规则。
+    window.getComputedStyle(root).getPropertyValue('color');
+    let frame = requestAnimationFrame(() => {
+        frame = requestAnimationFrame(() => style.remove());
+    });
+    // 重新应用主题或卸载时，取消待执行的帧并移除临时样式。
+    return () => {
+        cancelAnimationFrame(frame);
+        style.remove();
+    };
+}
+// 判断事件是否来自可编辑区域，避免主题快捷键干扰输入。
+function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+    if (target.isContentEditable) {
+        return true;
+    }
+    return target.closest('input, textarea, select') !== null;
+}
+// 统一管理主题状态、页面样式及系统和跨标签页同步。
+function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'bad-ui:theme', disableTransitionOnChange = true, keyboardShortcut, }) {
+    const hydrated = useHydrated.useHydrated();
+    const [storedTheme, setThemeState] = React.useState(() => readTheme(storageKey, defaultTheme));
+    // 水合首帧与服务端一致，完成后才使用浏览器保存的主题。
+    const theme = hydrated ? storedTheme : defaultTheme;
+    // 所有主动切换共用此入口，统一更新存储和 React 状态。
+    const setTheme = React.useCallback((nextTheme) => {
+        persistTheme(storageKey, nextTheme);
+        setThemeState(nextTheme);
+    }, [storageKey]);
+    // 按需解析系统配色，按钮和快捷键共用同一切换逻辑。
+    const toggleTheme = React.useCallback(() => {
+        setTheme(resolveTheme(theme) === 'dark' ? 'light' : 'dark');
+    }, [theme, setTheme]);
+    // 水合完成后应用主题；服务端与水合首帧不访问系统配色或修改根元素。
+    React.useLayoutEffect(() => {
+        if (!hydrated)
+            return;
+        let cleanup = applyTheme(theme, disableTransitionOnChange);
+        const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY);
+        const handleChange = () => {
+            cleanup();
+            cleanup = applyTheme(theme, disableTransitionOnChange);
+        };
+        // 仅跟随系统时订阅配色变化；显式选择深浅色后不再跟随。
+        if (theme === 'system') {
+            mediaQuery.addEventListener('change', handleChange);
+        }
+        return () => {
+            mediaQuery.removeEventListener('change', handleChange);
+            cleanup();
+        };
+    }, [theme, disableTransitionOnChange, hydrated]);
+    React.useEffect(() => {
+        if (!hydrated || !keyboardShortcut)
+            return;
+        const shortcutKey = keyboardShortcut.toLowerCase();
+        // 忽略已处理事件、输入法组合和长按重复。
+        const handleKeyDown = (event) => {
+            if (event.defaultPrevented || event.isComposing || event.repeat) {
+                return;
+            }
+            if (event.metaKey || event.ctrlKey || event.altKey) {
+                return;
+            }
+            if (isEditableTarget(event.target)) {
+                return;
+            }
+            if (event.key.toLowerCase() !== shortcutKey) {
+                return;
+            }
+            toggleTheme();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [toggleTheme, hydrated, keyboardShortcut]);
+    React.useEffect(() => {
+        // storage 事件用于接收同源其他标签页的主题变更。
+        const handleStorageChange = (event) => {
+            if (event.storageArea !== localStorage) {
+                return;
+            }
+            // clear() 触发的事件 key 为 null，也需要回退到默认主题。
+            if (event.key !== null && event.key !== storageKey) {
+                return;
+            }
+            if (isTheme(event.newValue)) {
+                setThemeState(event.newValue);
+                return;
+            }
+            // 存储项被移除、清空或写入无效值时，恢复默认主题。
+            setThemeState(defaultTheme);
+        };
+        window.addEventListener('storage', handleStorageChange);
+        return () => {
+            window.removeEventListener('storage', handleStorageChange);
+        };
+    }, [defaultTheme, storageKey]);
+    // 保持上下文值的引用稳定，避免父组件重渲染引起无关更新。
+    const value = React.useMemo(() => ({
+        theme,
+        setTheme,
+        toggleTheme,
+    }), [theme, setTheme, toggleTheme]);
+    return jsxRuntime.jsx(ThemeProviderContext.Provider, { value: value, children: children });
+}
+// 获取主题上下文，并在缺少 Provider 时给出明确错误。
+const useTheme = () => {
+    const context = React.useContext(ThemeProviderContext);
+    if (context === undefined) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+};
+
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;

package/dist/cjs/types/components/accordion.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+
+declare function Accordion({ className, ...props }: Accordion$1.Root.Props): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: Accordion$1.Item.Props): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: Accordion$1.Trigger.Props): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: Accordion$1.Panel.Props): React.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/cjs/types/components/alert-dialog.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
+import { Button } from './button.js';
+
+declare function AlertDialog({ ...props }: AlertDialog$1.Root.Props): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialog$1.Trigger.Props): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: AlertDialog$1.Portal.Props): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialog$1.Backdrop.Props): React.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: AlertDialog$1.Popup.Props & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialog$1.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialog$1.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialog$1.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/cjs/types/components/alert.d.ts

@@ -0,0 +1,13 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/cjs/types/components/aspect-ratio.d.ts

@@ -0,0 +1,7 @@
+import * as React$1 from 'react';
+
+declare function AspectRatio({ ratio, className, ...props }: React.ComponentProps<"div"> & {
+    ratio: number;
+}): React$1.JSX.Element;
+
+export { AspectRatio };

package/dist/cjs/types/components/attachment.d.ts

@@ -0,0 +1,26 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import { Button } from './button.js';
+
+declare const attachmentVariants: (props?: ({
+    size?: "default" | "sm" | "xs" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {
+    state?: "idle" | "uploading" | "processing" | "error" | "done";
+}): React.JSX.Element;
+declare const attachmentMediaVariants: (props?: ({
+    variant?: "image" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): React.JSX.Element;
+declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentAction({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AttachmentTrigger({ className, render, type, ...props }: useRender.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };

package/dist/cjs/types/components/avatar.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
+
+declare function Avatar({ className, size, ...props }: Avatar$1.Root.Props & {
+    size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: Avatar$1.Image.Props): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: Avatar$1.Fallback.Props): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

package/dist/cjs/types/components/badge.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+
+export { Badge, badgeVariants };

package/dist/cjs/types/components/breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+
+declare function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/cjs/types/components/bubble.d.ts

@@ -0,0 +1,19 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+
+declare function BubbleGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const bubbleVariants: (props?: ({
+    variant?: "default" | "destructive" | "secondary" | "outline" | "ghost" | "muted" | "tinted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Bubble({ variant, align, className, ...props }: React.ComponentProps<"div"> & VariantProps<typeof bubbleVariants> & {
+    align?: "start" | "end";
+}): React.JSX.Element;
+declare function BubbleContent({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function BubbleReactions({ side, align, className, ...props }: React.ComponentProps<"div"> & {
+    align?: "start" | "end";
+    side?: "top" | "bottom";
+}): React.JSX.Element;
+
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };

package/dist/cjs/types/components/button-group.d.ts

@@ -0,0 +1,14 @@
+import * as React$1 from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import { Separator } from './separator.js';
+
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): React$1.JSX.Element;
+declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): React$1.JSX.Element;
+
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/cjs/types/components/button.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { VariantProps } from 'class-variance-authority';
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "xs" | "icon" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): React.JSX.Element;
+
+export { Button, buttonVariants };

package/dist/cjs/types/components/calendar.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { DayPicker, DayButton, Locale } from 'react-day-picker';
+import { Button } from './button.js';
+
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): React.JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
+    locale?: Partial<Locale>;
+}): React.JSX.Element;
+
+export { Calendar, CalendarDayButton };

package/dist/cjs/types/components/card.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/cjs/types/components/carousel.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import useEmblaCarousel, { UseEmblaCarouselType } from 'embla-carousel-react';
+import { Button } from './button.js';
+
+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;
+};
+type CarouselContextProps = {
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+    api: ReturnType<typeof useEmblaCarousel>[1];
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+} & CarouselProps;
+declare function useCarousel(): CarouselContextProps;
+declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: React.ComponentProps<"div"> & CarouselProps): React.JSX.Element;
+declare function CarouselContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CarouselItem({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CarouselPrevious({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function CarouselNext({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
+export type { CarouselApi };

package/dist/cjs/types/components/chart.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { TooltipValueType } from 'recharts';
+
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type TooltipNameType = number | string;
+type ChartConfig = Record<string, {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+}): React.JSX.Element;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => React.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, "accessibilityLayer">): React.JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+} & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
+
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
+export type { ChartConfig };

package/dist/cjs/types/components/checkbox.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+
+declare function Checkbox({ className, ...props }: Checkbox$1.Root.Props): React.JSX.Element;
+
+export { Checkbox };

package/dist/cjs/types/components/code-block.d.ts

@@ -0,0 +1,29 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Button } from './button.js';
+
+declare const codeBlockVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function CodeBlock({ className, variant, size, ...props }: React.ComponentProps<"div"> & VariantProps<typeof codeBlockVariants> & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+declare function CodeBlockHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CodeBlockTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CodeBlockActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CodeBlockCopyButton({ value, variant, size, className, onClick, ...props }: React.ComponentProps<typeof Button> & {
+    value: string;
+}): React.JSX.Element;
+declare function CodeBlockContent({ className, children, style, wrap, lineNumbers, startLine, ...props }: React.ComponentProps<"pre"> & {
+    wrap?: boolean;
+    lineNumbers?: boolean;
+    startLine?: number;
+}): React.JSX.Element;
+declare const codeBlockLineVariants: (props?: ({
+    variant?: "default" | "added" | "removed" | "highlighted" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function CodeBlockLine({ className, variant, children, ...props }: React.ComponentProps<"span"> & VariantProps<typeof codeBlockLineVariants>): React.JSX.Element;
+declare function CodeBlockFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+
+export { CodeBlock, CodeBlockActions, CodeBlockContent, CodeBlockCopyButton, CodeBlockFooter, CodeBlockHeader, CodeBlockLine, CodeBlockTitle };

package/dist/cjs/types/components/collapsible.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Collapsible as Collapsible$1 } from '@base-ui/react/collapsible';
+
+declare function Collapsible({ ...props }: Collapsible$1.Root.Props): React.JSX.Element;
+declare function CollapsibleTrigger({ ...props }: Collapsible$1.Trigger.Props): React.JSX.Element;
+declare function CollapsibleContent({ ...props }: Collapsible$1.Panel.Props): React.JSX.Element;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };