@badnpm/ui 0.0.0 → 0.0.1

package/README.md

@@ -10,7 +10,7 @@ React 19 组件库，提供 ESM、CommonJS、UMD 三种产物，以及独立的
 npm install @badnpm/ui react@^19 react-dom@^19
 ```
 
-当前包标记为 private，发布前可使用本地 tarball 验证。下文统一使用当前包名 `@badnpm/ui`。
+组件包公开发布到 npm；发布前可使用本地 tarball 验证。下文统一使用当前包名 `@badnpm/ui`。
 
 ## 样式入口
 
@@ -19,10 +19,10 @@ npm install @badnpm/ui react@^19 react-dom@^19
 | 样式入口                           | 用途                                        | 引入方式                     |
 | ---------------------------------- | ------------------------------------------- | ---------------------------- |
 | `@badnpm/ui/styles/index.css`      | Tailwind 重置、组件工具类、主题和基础色变量 | 使用内置组件样式时引入       |
-| `@badnpm/ui/styles/body.css`       | 将 `body` 背景色和文字色设为主题颜色        | 按需引入，与默认样式配合使用 |
+| `@badnpm/ui/styles/custom.css`     | 页面主题配色和滚动条样式                    | 按需引入，与默认样式配合使用 |
 | `@badnpm/ui/styles/font/geist.css` | 加载 Geist 字体，并设置默认无衬线字体       | 按需引入                     |
 
-仅引入默认样式即可使用组件。页面配色与字体可以分别选择，字体文件随包提供。
+仅引入默认样式即可使用组件。页面配色与滚动条作为一组可选样式，字体可以单独选择，字体文件随包提供。
 主题和基础色已包含在默认样式中。`@badnpm/ui/globals.css` 是默认样式的兼容入口，使用示例统一采用 `styles/index.css`。
 
 使用方无需安装 Tailwind、shadcn、tw-animate-css 或 Geist 字体包。
@@ -39,8 +39,8 @@ import { Button, ThemeProvider, ThemeToggle } from '@badnpm/ui';
 
 // 默认组件样式。
 import '@badnpm/ui/styles/index.css';
-// 可选，让整个页面的背景色、文字色跟随主题。
-import '@badnpm/ui/styles/body.css';
+// 可选，应用页面主题配色和滚动条样式。
+import '@badnpm/ui/styles/custom.css';
 // 可选，使用 Geist 字体。
 import '@badnpm/ui/styles/font/geist.css';
 
@@ -56,7 +56,7 @@ function App() {
 createRoot(document.getElementById('root')!).render(<App />);
 ```
 
-删除可选的 CSS 导入，即可由应用自行决定页面配色和字体。
+按需引入 custom.css 和字体入口，分别控制页面配色、滚动条和字体。
 `ThemeToggle` 通过 `ThemeProvider` 读取并切换深浅模式，单独使用 `Button`、`Input` 时可直接渲染。
 
 ## CommonJS
@@ -70,8 +70,8 @@ const { Button, ThemeProvider, ThemeToggle } = require('@badnpm/ui');
 
 // 这些 CSS require 由应用的打包器处理。
 require('@badnpm/ui/styles/index.css');
-// 可选页面配色。
-require('@badnpm/ui/styles/body.css');
+// 可选页面配色和滚动条样式。
+require('@badnpm/ui/styles/custom.css');
 // 可选字体。
 require('@badnpm/ui/styles/font/geist.css');
 
@@ -113,8 +113,8 @@ React 19 的浏览器加载示例采用 ESM CDN，并将 React 显式共享给 R
 
     <!-- 默认组件样式。 -->
     <link rel="stylesheet" href="/vendor/ui/styles/index.css" />
-    <!-- 可选，删除此行后由应用自行设置 body 配色。 -->
-    <link rel="stylesheet" href="/vendor/ui/styles/body.css" />
+    <!-- 可选，应用页面主题配色和滚动条样式。 -->
+    <link rel="stylesheet" href="/vendor/ui/styles/custom.css" />
     <!-- 可选，删除此行后使用应用自己的字体。 -->
     <link rel="stylesheet" href="/vendor/ui/styles/font/geist.css" />
 
@@ -186,7 +186,7 @@ dist/
 ├── types/               # 按源码结构生成的 ESM 类型声明
 ├── cjs/                 # CommonJS 模块，types 子目录提供逐文件类型声明
 ├── umd/index.js         # 浏览器单文件，导出 window.BadUI
-└── styles/              # 默认样式、可选 body 配色和字体资源
+└── styles/              # 默认样式、可选页面配色、滚动条和字体资源
 ```
 
 TypeScript 插件编译 JS，rollup-plugin-dts 配合 preserveModules 按源码目录逐文件生成类型声明。PostCSS 编译独立 CSS 并处理字体资源，样式规则集中在 `postcss.config.mjs`。

package/dist/cjs/components/accordion.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var accordion = require('@base-ui/react/accordion');
+var cn = require('cn');
+var lucideReact = require('lucide-react');
+
+function Accordion({ className, ...props }) {
+    return (jsxRuntime.jsx(accordion.Accordion.Root, { "data-slot": "accordion", className: cn.cn("flex w-full flex-col", className), ...props }));
+}
+function AccordionItem({ className, ...props }) {
+    return (jsxRuntime.jsx(accordion.Accordion.Item, { "data-slot": "accordion-item", className: cn.cn("not-last:border-b", className), ...props }));
+}
+function AccordionTrigger({ className, children, ...props }) {
+    return (jsxRuntime.jsx(accordion.Accordion.Header, { className: "flex", children: jsxRuntime.jsxs(accordion.Accordion.Trigger, { "data-slot": "accordion-trigger", className: cn.cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className), ...props, children: [children, jsxRuntime.jsx(lucideReact.ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }), jsxRuntime.jsx(lucideReact.ChevronUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })] }) }));
+}
+function AccordionContent({ className, children, ...props }) {
+    return (jsxRuntime.jsx(accordion.Accordion.Panel, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up", ...props, children: jsxRuntime.jsx("div", { className: cn.cn("h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), children: children }) }));
+}
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;

package/dist/cjs/components/alert-dialog.cjs

@@ -0,0 +1,56 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var alertDialog = require('@base-ui/react/alert-dialog');
+var cn = require('cn');
+var button = require('./button.cjs');
+
+function AlertDialog({ ...props }) {
+    return jsxRuntime.jsx(alertDialog.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({ ...props }) {
+    return (jsxRuntime.jsx(alertDialog.AlertDialog.Trigger, { "data-slot": "alert-dialog-trigger", ...props }));
+}
+function AlertDialogPortal({ ...props }) {
+    return (jsxRuntime.jsx(alertDialog.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props }));
+}
+function AlertDialogOverlay({ className, ...props }) {
+    return (jsxRuntime.jsx(alertDialog.AlertDialog.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn.cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
+}
+function AlertDialogContent({ className, size = "default", ...props }) {
+    return (jsxRuntime.jsxs(AlertDialogPortal, { children: [jsxRuntime.jsx(AlertDialogOverlay, {}), jsxRuntime.jsx(alertDialog.AlertDialog.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn.cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm 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 })] }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "alert-dialog-header", className: cn.cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "alert-dialog-footer", className: cn.cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className), ...props }));
+}
+function AlertDialogMedia({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "alert-dialog-media", className: cn.cn("mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return (jsxRuntime.jsx(alertDialog.AlertDialog.Title, { "data-slot": "alert-dialog-title", className: cn.cn("font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return (jsxRuntime.jsx(alertDialog.AlertDialog.Description, { "data-slot": "alert-dialog-description", className: cn.cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+}
+function AlertDialogAction({ className, ...props }) {
+    return (jsxRuntime.jsx(button.Button, { "data-slot": "alert-dialog-action", className: cn.cn(className), ...props }));
+}
+function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+    return (jsxRuntime.jsx(alertDialog.AlertDialog.Close, { "data-slot": "alert-dialog-cancel", className: cn.cn(className), render: jsxRuntime.jsx(button.Button, { variant: variant, size: size }), ...props }));
+}
+
+exports.AlertDialog = AlertDialog;
+exports.AlertDialogAction = AlertDialogAction;
+exports.AlertDialogCancel = AlertDialogCancel;
+exports.AlertDialogContent = AlertDialogContent;
+exports.AlertDialogDescription = AlertDialogDescription;
+exports.AlertDialogFooter = AlertDialogFooter;
+exports.AlertDialogHeader = AlertDialogHeader;
+exports.AlertDialogMedia = AlertDialogMedia;
+exports.AlertDialogOverlay = AlertDialogOverlay;
+exports.AlertDialogPortal = AlertDialogPortal;
+exports.AlertDialogTitle = AlertDialogTitle;
+exports.AlertDialogTrigger = AlertDialogTrigger;

package/dist/cjs/components/alert.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var cn = require('cn');
+
+const alertVariants = classVarianceAuthority.cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-card text-card-foreground",
+            destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Alert({ className, variant, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "alert", role: "alert", className: cn.cn(alertVariants({ variant }), className), ...props }));
+}
+function AlertTitle({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "alert-title", className: cn.cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "alert-description", className: cn.cn("text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className), ...props }));
+}
+function AlertAction({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "alert-action", className: cn.cn("absolute top-2 right-2", className), ...props }));
+}
+
+exports.Alert = Alert;
+exports.AlertAction = AlertAction;
+exports.AlertDescription = AlertDescription;
+exports.AlertTitle = AlertTitle;

package/dist/cjs/components/aspect-ratio.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cn = require('cn');
+
+function AspectRatio({ ratio, className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "aspect-ratio", style: {
+            "--ratio": ratio,
+        }, className: cn.cn("relative aspect-(--ratio)", className), ...props }));
+}
+
+exports.AspectRatio = AspectRatio;

package/dist/cjs/components/attachment.cjs

@@ -0,0 +1,80 @@
+'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 button = require('./button.cjs');
+
+const attachmentVariants = classVarianceAuthority.cva("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed", {
+    variants: {
+        size: {
+            default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+            sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+            xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+        },
+        orientation: {
+            horizontal: "min-w-40 items-center",
+            vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30",
+        },
+    },
+});
+function Attachment({ className, state = "done", size = "default", orientation = "horizontal", ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "attachment", "data-state": state, "data-size": size, "data-orientation": orientation, className: cn.cn(attachmentVariants({ size, orientation }), className), ...props }));
+}
+const attachmentMediaVariants = classVarianceAuthority.cva("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
+    variants: {
+        variant: {
+            icon: "",
+            image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover",
+        },
+    },
+    defaultVariants: {
+        variant: "icon",
+    },
+});
+function AttachmentMedia({ className, variant = "icon", ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "attachment-media", "data-variant": variant, className: cn.cn(attachmentMediaVariants({ variant }), className), ...props }));
+}
+function AttachmentContent({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "attachment-content", className: cn.cn("max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", className), ...props }));
+}
+function AttachmentTitle({ className, ...props }) {
+    return (jsxRuntime.jsx("span", { "data-slot": "attachment-title", className: cn.cn("block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer", className), ...props }));
+}
+function AttachmentDescription({ className, ...props }) {
+    return (jsxRuntime.jsx("span", { "data-slot": "attachment-description", className: cn.cn("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive", "max-w-full", className), ...props }));
+}
+function AttachmentActions({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "attachment-actions", className: cn.cn("relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1", className), ...props }));
+}
+function AttachmentAction({ className, variant, size = "icon-xs", ...props }) {
+    return (jsxRuntime.jsx(button.Button, { "data-slot": "attachment-action", variant: variant ?? "ghost", size: size, className: cn.cn(className), ...props }));
+}
+function AttachmentTrigger({ className, render, type, ...props }) {
+    return useRender.useRender({
+        defaultTagName: "button",
+        props: mergeProps.mergeProps({
+            type: render ? type : (type ?? "button"),
+            className: cn.cn("absolute inset-0 z-10 outline-none", className),
+        }, props),
+        render,
+        state: {
+            slot: "attachment-trigger",
+        },
+    });
+}
+function AttachmentGroup({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "attachment-group", className: cn.cn("flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className), ...props }));
+}
+
+exports.Attachment = Attachment;
+exports.AttachmentAction = AttachmentAction;
+exports.AttachmentActions = AttachmentActions;
+exports.AttachmentContent = AttachmentContent;
+exports.AttachmentDescription = AttachmentDescription;
+exports.AttachmentGroup = AttachmentGroup;
+exports.AttachmentMedia = AttachmentMedia;
+exports.AttachmentTitle = AttachmentTitle;
+exports.AttachmentTrigger = AttachmentTrigger;

package/dist/cjs/components/avatar.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var avatar = require('@base-ui/react/avatar');
+var cn = require('cn');
+
+function Avatar({ className, size = "default", ...props }) {
+    return (jsxRuntime.jsx(avatar.Avatar.Root, { "data-slot": "avatar", "data-size": size, className: cn.cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className), ...props }));
+}
+function AvatarImage({ className, ...props }) {
+    return (jsxRuntime.jsx(avatar.Avatar.Image, { "data-slot": "avatar-image", className: cn.cn("aspect-square size-full rounded-full object-cover", className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (jsxRuntime.jsx(avatar.Avatar.Fallback, { "data-slot": "avatar-fallback", className: cn.cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (jsxRuntime.jsx("span", { "data-slot": "avatar-badge", className: cn.cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "avatar-group", className: cn.cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "avatar-group-count", className: cn.cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
+}
+
+exports.Avatar = Avatar;
+exports.AvatarBadge = AvatarBadge;
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarGroup = AvatarGroup;
+exports.AvatarGroupCount = AvatarGroupCount;
+exports.AvatarImage = AvatarImage;

package/dist/cjs/components/badge.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+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');
+
+const badgeVariants = classVarianceAuthority.cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+            secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+            destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+            outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+            ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant = "default", render, ...props }) {
+    return useRender.useRender({
+        defaultTagName: "span",
+        props: mergeProps.mergeProps({
+            className: cn.cn(badgeVariants({ variant }), className),
+        }, props),
+        render,
+        state: {
+            slot: "badge",
+            variant,
+        },
+    });
+}
+
+exports.Badge = Badge;
+exports.badgeVariants = badgeVariants;

package/dist/cjs/components/breadcrumb.cjs

@@ -0,0 +1,46 @@
+'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 cn = require('cn');
+var lucideReact = require('lucide-react');
+
+function Breadcrumb({ className, ...props }) {
+    return (jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", className: cn.cn(className), ...props }));
+}
+function BreadcrumbList({ className, ...props }) {
+    return (jsxRuntime.jsx("ol", { "data-slot": "breadcrumb-list", className: cn.cn("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", className), ...props }));
+}
+function BreadcrumbItem({ className, ...props }) {
+    return (jsxRuntime.jsx("li", { "data-slot": "breadcrumb-item", className: cn.cn("inline-flex items-center gap-1", className), ...props }));
+}
+function BreadcrumbLink({ className, render, ...props }) {
+    return useRender.useRender({
+        defaultTagName: "a",
+        props: mergeProps.mergeProps({
+            className: cn.cn("transition-colors hover:text-foreground", className),
+        }, props),
+        render,
+        state: {
+            slot: "breadcrumb-link",
+        },
+    });
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (jsxRuntime.jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn.cn("font-normal text-foreground", className), ...props }));
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return (jsxRuntime.jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn.cn("[&>svg]:size-3.5", className), ...props, children: children ?? (jsxRuntime.jsx(lucideReact.ChevronRightIcon, {})) }));
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+    return (jsxRuntime.jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn.cn("flex size-5 items-center justify-center [&>svg]:size-4", className), ...props, children: [jsxRuntime.jsx(lucideReact.MoreHorizontalIcon, {}), jsxRuntime.jsx("span", { className: "sr-only", children: "More" })] }));
+}
+
+exports.Breadcrumb = Breadcrumb;
+exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
+exports.BreadcrumbItem = BreadcrumbItem;
+exports.BreadcrumbLink = BreadcrumbLink;
+exports.BreadcrumbList = BreadcrumbList;
+exports.BreadcrumbPage = BreadcrumbPage;
+exports.BreadcrumbSeparator = BreadcrumbSeparator;

package/dist/cjs/components/bubble.cjs

@@ -0,0 +1,66 @@
+'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');
+
+function BubbleGroup({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "bubble-group", className: cn.cn("flex min-w-0 flex-col gap-2", className), ...props }));
+}
+const bubbleVariants = classVarianceAuthority.cva("group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full", {
+    variants: {
+        variant: {
+            default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+            secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+            muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+            tinted: "*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] *:data-[slot=bubble-content]:text-foreground dark:*:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.3_calc(c*0.4)_h)] [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.88_calc(c*0.5)_h)] dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-[oklch(from_var(--primary)_0.35_calc(c*0.5)_h)]",
+            outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+            ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+            destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Bubble({ variant = "default", align = "start", className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "bubble", "data-variant": variant, "data-align": align, className: cn.cn(bubbleVariants({ variant }), className), ...props }));
+}
+function BubbleContent({ className, render, ...props }) {
+    return useRender.useRender({
+        defaultTagName: "div",
+        props: mergeProps.mergeProps({
+            className: cn.cn("w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50", className),
+        }, props),
+        render,
+        state: {
+            slot: "bubble-content",
+        },
+    });
+}
+const bubbleReactionsVariants = classVarianceAuthority.cva("absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0", {
+    variants: {
+        side: {
+            top: "top-0 -translate-y-3/4",
+            bottom: "bottom-0 translate-y-3/4",
+        },
+        align: {
+            start: "left-3",
+            end: "right-3",
+        },
+    },
+    defaultVariants: {
+        side: "bottom",
+        align: "end",
+    },
+});
+function BubbleReactions({ side = "bottom", align = "end", className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "bubble-reactions", "data-align": align, "data-side": side, className: cn.cn(bubbleReactionsVariants({ side, align }), className), ...props }));
+}
+
+exports.Bubble = Bubble;
+exports.BubbleContent = BubbleContent;
+exports.BubbleGroup = BubbleGroup;
+exports.BubbleReactions = BubbleReactions;

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/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;