@almanaclabs/blaze-ui 0.3.2 → 0.4.0

package/README.md

@@ -58,3 +58,26 @@ the rendered anchor as a button to assistive technology.
 
 Buttons use `type="button"` by default. Set `type="submit"` explicitly inside
 forms.
+
+## Package structure
+
+Root named imports are the supported consumer API:
+
+```tsx
+import { Button, DatePicker } from '@almanaclabs/blaze-ui'
+```
+
+The published package intentionally preserves its internal ESM modules so
+application bundlers can tree-shake components and place them in the chunks
+that use them. Paths under `dist/components/**` are private implementation
+details, not public APIs. Keep the package's `sideEffects` declaration limited
+to CSS so JavaScript remains tree-shakeable without dropping required styles.
+
+## Recipes
+
+Copyable recipe source and agent instructions are installed under
+`node_modules/@almanaclabs/blaze-ui/recipes`. Inspect `recipes/manifest.json` to
+discover available recipes, then copy or adapt a recipe into the application.
+
+Recipes are not runtime exports. Applications own their routing, authorization,
+data, and business behavior.

package/dist/components/accordion/accordion.js

@@ -0,0 +1,53 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Accordion as r } from "@base-ui/react/accordion";
+import { IconChevronDown as i, IconChevronUp as a } from "@tabler/icons-react";
+//#region src/components/accordion/accordion.tsx
+function o({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Root, {
+		"data-slot": "accordion",
+		className: e("flex w-full flex-col", n),
+		...i
+	});
+}
+function s({ className: n, ...i }) {
+	return /* @__PURE__ */ t(r.Item, {
+		"data-slot": "accordion-item",
+		className: e("not-last:border-b", n),
+		...i
+	});
+}
+function c({ className: o, children: s, ...c }) {
+	return /* @__PURE__ */ t(r.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ n(r.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: e("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", o),
+			...c,
+			children: [
+				s,
+				/* @__PURE__ */ t(i, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+				}),
+				/* @__PURE__ */ t(a, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+				})
+			]
+		})
+	});
+}
+function l({ className: n, children: i, ...a }) {
+	return /* @__PURE__ */ t(r.Panel, {
+		"data-slot": "accordion-content",
+		className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
+		...a,
+		children: /* @__PURE__ */ t("div", {
+			className: e("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", n),
+			children: i
+		})
+	});
+}
+//#endregion
+export { o as Accordion, l as AccordionContent, s as AccordionItem, c as AccordionTrigger };

package/dist/components/alert/alert.js

@@ -0,0 +1,43 @@
+import { cn as e } from "../../lib/utils.js";
+import { cva as t } from "class-variance-authority";
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+//#region src/components/alert/alert.tsx
+var r = t("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 i({ className: t, variant: i, ...a }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "alert",
+		role: "alert",
+		className: e(r({ variant: i }), t),
+		...a
+	});
+}
+function a({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "alert-title",
+		className: e("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", t),
+		...r
+	});
+}
+function o({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "alert-description",
+		className: e("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", t),
+		...r
+	});
+}
+function s({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "alert-action",
+		className: e("absolute top-2 right-2", t),
+		...r
+	});
+}
+//#endregion
+export { i as Alert, s as AlertAction, o as AlertDescription, a as AlertTitle };

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

@@ -0,0 +1,94 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import "react";
+import { AlertDialog as i } from "@base-ui/react/alert-dialog";
+//#region src/components/alert-dialog/alert-dialog.tsx
+function a({ ...e }) {
+	return /* @__PURE__ */ n(i.Root, {
+		"data-slot": "alert-dialog",
+		...e
+	});
+}
+function o({ ...e }) {
+	return /* @__PURE__ */ n(i.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...e
+	});
+}
+function s({ ...e }) {
+	return /* @__PURE__ */ n(i.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...e
+	});
+}
+function c({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: e("fixed inset-0 isolate z-50 bg-foreground/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", t),
+		...r
+	});
+}
+function l({ className: t, size: a = "default", ...o }) {
+	return /* @__PURE__ */ r(s, { children: [/* @__PURE__ */ n(c, {}), /* @__PURE__ */ n(i.Popup, {
+		"data-slot": "alert-dialog-content",
+		"data-size": a,
+		className: e("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", t),
+		...o
+	})] });
+}
+function u({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "alert-dialog-header",
+		className: e("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]", t),
+		...r
+	});
+}
+function d({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "alert-dialog-footer",
+		className: e("-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", t),
+		...r
+	});
+}
+function f({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "alert-dialog-media",
+		className: e("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", t),
+		...r
+	});
+}
+function p({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Title, {
+		"data-slot": "alert-dialog-title",
+		className: e("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", t),
+		...r
+	});
+}
+function m({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Description, {
+		"data-slot": "alert-dialog-description",
+		className: e("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", t),
+		...r
+	});
+}
+function h({ className: r, ...i }) {
+	return /* @__PURE__ */ n(t, {
+		"data-slot": "alert-dialog-action",
+		className: e(r),
+		...i
+	});
+}
+function g({ className: r, variant: a = "outline", size: o = "default", ...s }) {
+	return /* @__PURE__ */ n(i.Close, {
+		"data-slot": "alert-dialog-cancel",
+		className: e(r),
+		render: /* @__PURE__ */ n(t, {
+			variant: a,
+			size: o
+		}),
+		...s
+	});
+}
+//#endregion
+export { a as AlertDialog, h as AlertDialogAction, g as AlertDialogCancel, l as AlertDialogContent, m as AlertDialogDescription, d as AlertDialogFooter, u as AlertDialogHeader, f as AlertDialogMedia, c as AlertDialogOverlay, s as AlertDialogPortal, p as AlertDialogTitle, o as AlertDialogTrigger };

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

@@ -0,0 +1,13 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/aspect-ratio/aspect-ratio.tsx
+function n({ ratio: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "aspect-ratio",
+		style: { "--ratio": n },
+		className: e("relative aspect-(--ratio)", r),
+		...i
+	});
+}
+//#endregion
+export { n as AspectRatio };

package/dist/components/attachment/attachment.js

@@ -0,0 +1,104 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../button/button.js";
+import { cva as n } from "class-variance-authority";
+import { jsx as r } from "react/jsx-runtime";
+import "react";
+import { mergeProps as i } from "@base-ui/react/merge-props";
+import { useRender as a } from "@base-ui/react/use-render";
+//#region src/components/attachment/attachment.tsx
+var o = n("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 s({ className: t, state: n = "done", size: i = "default", orientation: a = "horizontal", ...s }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "attachment",
+		"data-state": n,
+		"data-size": i,
+		"data-orientation": a,
+		className: e(o({
+			size: i,
+			orientation: a
+		}), t),
+		...s
+	});
+}
+var c = n("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 l({ className: t, variant: n = "icon", ...i }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "attachment-media",
+		"data-variant": n,
+		className: e(c({ variant: n }), t),
+		...i
+	});
+}
+function u({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "attachment-content",
+		className: e("max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", t),
+		...n
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ r("span", {
+		"data-slot": "attachment-title",
+		className: e("block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer", t),
+		...n
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ r("span", {
+		"data-slot": "attachment-description",
+		className: e("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80", "max-w-full", t),
+		...n
+	});
+}
+function p({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "attachment-actions",
+		className: e("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", t),
+		...n
+	});
+}
+function m({ className: n, variant: i, size: a = "icon-xs", ...o }) {
+	return /* @__PURE__ */ r(t, {
+		"data-slot": "attachment-action",
+		variant: i ?? "ghost",
+		size: a,
+		className: e(n),
+		...o
+	});
+}
+function h({ className: t, render: n, type: r, ...o }) {
+	return a({
+		defaultTagName: "button",
+		props: i({
+			type: n ? r : r ?? "button",
+			className: e("absolute inset-0 z-10 outline-none", t)
+		}, o),
+		render: n,
+		state: { slot: "attachment-trigger" }
+	});
+}
+function g({ className: t, ...n }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "attachment-group",
+		className: e("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", t),
+		...n
+	});
+}
+//#endregion
+export { s as Attachment, m as AttachmentAction, p as AttachmentActions, u as AttachmentContent, f as AttachmentDescription, g as AttachmentGroup, l as AttachmentMedia, d as AttachmentTitle, h as AttachmentTrigger };

package/dist/components/avatar/avatar.js

@@ -0,0 +1,50 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+import { Avatar as n } from "@base-ui/react/avatar";
+//#region src/components/avatar/avatar.tsx
+function r({ className: r, size: i = "default", ...a }) {
+	return /* @__PURE__ */ t(n.Root, {
+		"data-slot": "avatar",
+		"data-size": i,
+		className: e("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", r),
+		...a
+	});
+}
+function i({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Image, {
+		"data-slot": "avatar-image",
+		className: e("aspect-square size-full rounded-full object-cover", r),
+		...i
+	});
+}
+function a({ className: r, ...i }) {
+	return /* @__PURE__ */ t(n.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: e("flex size-full items-center justify-center rounded-full bg-muted text-sm text-foreground group-data-[size=sm]/avatar:text-xs", r),
+		...i
+	});
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("span", {
+		"data-slot": "avatar-badge",
+		className: e("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", n),
+		...r
+	});
+}
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "avatar-group",
+		className: e("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", n),
+		...r
+	});
+}
+function c({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "avatar-group-count",
+		className: e("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", n),
+		...r
+	});
+}
+//#endregion
+export { r as Avatar, o as AvatarBadge, a as AvatarFallback, s as AvatarGroup, c as AvatarGroupCount, i as AvatarImage };

package/dist/components/badge/badge.js

@@ -0,0 +1,29 @@
+import { cn as e } from "../../lib/utils.js";
+import { cva as t } from "class-variance-authority";
+import { mergeProps as n } from "@base-ui/react/merge-props";
+import { useRender as r } from "@base-ui/react/use-render";
+//#region src/components/badge/badge.tsx
+var i = t("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 a({ className: t, variant: a = "default", render: o, ...s }) {
+	return r({
+		defaultTagName: "span",
+		props: n({ className: e(i({ variant: a }), t) }, s),
+		render: o,
+		state: {
+			slot: "badge",
+			variant: a
+		}
+	});
+}
+//#endregion
+export { a as Badge, i as badgeVariants };

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,72 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import "react";
+import { IconChevronRight as r, IconDots as i } from "@tabler/icons-react";
+import { mergeProps as a } from "@base-ui/react/merge-props";
+import { useRender as o } from "@base-ui/react/use-render";
+//#region src/components/breadcrumb/breadcrumb.tsx
+function s({ className: n, ...r }) {
+	return /* @__PURE__ */ t("nav", {
+		"aria-label": "breadcrumb",
+		"data-slot": "breadcrumb",
+		className: e(n),
+		...r
+	});
+}
+function c({ className: n, ...r }) {
+	return /* @__PURE__ */ t("ol", {
+		"data-slot": "breadcrumb-list",
+		className: e("flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground", n),
+		...r
+	});
+}
+function l({ className: n, ...r }) {
+	return /* @__PURE__ */ t("li", {
+		"data-slot": "breadcrumb-item",
+		className: e("inline-flex items-center gap-1", n),
+		...r
+	});
+}
+function u({ className: t, render: n, ...r }) {
+	return o({
+		defaultTagName: "a",
+		props: a({ className: e("transition-colors hover:text-foreground", t) }, r),
+		render: n,
+		state: { slot: "breadcrumb-link" }
+	});
+}
+function d({ className: n, ...r }) {
+	return /* @__PURE__ */ t("span", {
+		"data-slot": "breadcrumb-page",
+		role: "link",
+		"aria-disabled": "true",
+		"aria-current": "page",
+		className: e("font-normal text-foreground", n),
+		...r
+	});
+}
+function f({ children: n, className: i, ...a }) {
+	return /* @__PURE__ */ t("li", {
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: e("[&>svg]:size-3.5", i),
+		...a,
+		children: n ?? /* @__PURE__ */ t(r, {})
+	});
+}
+function p({ className: r, ...a }) {
+	return /* @__PURE__ */ n("span", {
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		"aria-hidden": "true",
+		className: e("flex size-5 items-center justify-center [&>svg]:size-4", r),
+		...a,
+		children: [/* @__PURE__ */ t(i, {}), /* @__PURE__ */ t("span", {
+			className: "sr-only",
+			children: "More"
+		})]
+	});
+}
+//#endregion
+export { s as Breadcrumb, p as BreadcrumbEllipsis, l as BreadcrumbItem, u as BreadcrumbLink, c as BreadcrumbList, d as BreadcrumbPage, f as BreadcrumbSeparator };

package/dist/components/bubble/bubble.js

@@ -0,0 +1,73 @@
+import { cn as e } from "../../lib/utils.js";
+import { cva as t } from "class-variance-authority";
+import { jsx as n } from "react/jsx-runtime";
+import "react";
+import { mergeProps as r } from "@base-ui/react/merge-props";
+import { useRender as i } from "@base-ui/react/use-render";
+//#region src/components/bubble/bubble.tsx
+function a({ className: t, ...r }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "bubble-group",
+		className: e("flex min-w-0 flex-col gap-2", t),
+		...r
+	});
+}
+var o = t("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 s({ variant: t = "default", align: r = "start", className: i, ...a }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "bubble",
+		"data-variant": t,
+		"data-align": r,
+		className: e(o({ variant: t }), i),
+		...a
+	});
+}
+function c({ className: t, render: n, ...a }) {
+	return i({
+		defaultTagName: "div",
+		props: r({ className: e("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", t) }, a),
+		render: n,
+		state: { slot: "bubble-content" }
+	});
+}
+var l = t("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 u({ side: t = "bottom", align: r = "end", className: i, ...a }) {
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "bubble-reactions",
+		"data-align": r,
+		"data-side": t,
+		className: e(l({
+			side: t,
+			align: r
+		}), i),
+		...a
+	});
+}
+//#endregion
+export { s as Bubble, c as BubbleContent, a as BubbleGroup, u as BubbleReactions };

package/dist/components/button/button.js

@@ -0,0 +1,46 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "@base-ui/react/button";
+import { cva as n } from "class-variance-authority";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/button/button.tsx
+var i = n("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80",
+			outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+			ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+			destructive: "bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/10 dark:hover:bg-destructive/15 dark:focus-visible:ring-destructive/40",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+			lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+			icon: "size-8",
+			"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+			"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+			"icon-lg": "size-9"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function a({ className: n, variant: a = "default", size: o = "default", ...s }) {
+	let c = i({
+		variant: a,
+		size: o
+	});
+	return /* @__PURE__ */ r(t, {
+		"data-slot": "button",
+		"data-variant": a,
+		"data-size": o,
+		className: typeof n == "function" ? (t) => e(c, n(t)) : e(c, n),
+		...s
+	});
+}
+//#endregion
+export { a as Button, i as buttonVariants };

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

@@ -0,0 +1,41 @@
+import { cn as e } from "../../lib/utils.js";
+import { Separator as t } from "../separator/separator.js";
+import { cva as n } from "class-variance-authority";
+import { jsx as r } from "react/jsx-runtime";
+import { mergeProps as i } from "@base-ui/react/merge-props";
+import { useRender as a } from "@base-ui/react/use-render";
+//#region src/components/button-group/button-group.tsx
+var o = n("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 s({ className: t, orientation: n, ...i }) {
+	return /* @__PURE__ */ r("div", {
+		role: "group",
+		"data-slot": "button-group",
+		"data-orientation": n,
+		className: e(o({ orientation: n }), t),
+		...i
+	});
+}
+function c({ className: t, render: n, ...r }) {
+	return a({
+		defaultTagName: "div",
+		props: i({ className: e("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", t) }, r),
+		render: n,
+		state: { slot: "button-group-text" }
+	});
+}
+function l({ className: n, orientation: i = "vertical", ...a }) {
+	return /* @__PURE__ */ r(t, {
+		"data-slot": "button-group-separator",
+		orientation: i,
+		className: e("relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto", n),
+		...a
+	});
+}
+//#endregion
+export { s as ButtonGroup, l as ButtonGroupSeparator, c as ButtonGroupText, o as buttonGroupVariants };