lynote-ui 0.0.11 → 0.0.12

package/dist/attachment/index.d.ts

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

package/dist/attachment/index.js

@@ -0,0 +1,118 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-8l464Juk.js");
+const require_utils = require("../utils-DrngEK1K.js");
+const require_button = require("../button/index.js");
+let class_variance_authority = require("class-variance-authority");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+//#region src/attachment/index.tsx
+var attachmentVariants = (0, class_variance_authority.cva)("group/attachment bg-card text-card-foreground focus-within:ring-ring/30 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit min-w-0 max-w-full shrink-0 flex-wrap rounded-2xl border transition-colors focus-within:ring-1 data-[state=idle]:border-dashed", { variants: {
+	size: {
+		default: "has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2 gap-2 text-sm",
+		sm: "has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5 gap-2.5 text-xs",
+		xs: "has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1 gap-1.5 rounded-xl text-xs"
+	},
+	orientation: {
+		horizontal: "min-w-40 items-center",
+		vertical: "has-data-[slot=attachment-content]:w-30 w-24 flex-col"
+	}
+} });
+function Attachment({ className, state = "done", size = "default", orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "attachment",
+		"data-state": state,
+		"data-size": size,
+		"data-orientation": orientation,
+		className: require_utils.cn(attachmentVariants({
+			size,
+			orientation
+		}), className),
+		...props
+	});
+}
+var attachmentMediaVariants = (0, class_variance_authority.cva)("bg-muted text-foreground 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! relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg 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 [&_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 [&_svg]:pointer-events-none", {
+	variants: { variant: {
+		icon: "",
+		image: "*:[img]:aspect-square *:[img]:w-full *:[img]:object-cover opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100"
+	} },
+	defaultVariants: { variant: "icon" }
+});
+function AttachmentMedia({ className, variant = "icon", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "attachment-media",
+		"data-variant": variant,
+		className: require_utils.cn(attachmentMediaVariants({ variant }), className),
+		...props
+	});
+}
+function AttachmentContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "attachment-content",
+		className: require_utils.cn("min-w-0 max-w-full flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", className),
+		...props
+	});
+}
+function AttachmentTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "attachment-title",
+		className: require_utils.cn("group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block min-w-0 max-w-full truncate font-medium", className),
+		...props
+	});
+}
+function AttachmentDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "attachment-description",
+		className: require_utils.cn("text-muted-foreground group-data-[state=error]/attachment:text-destructive/80 mt-0.5 block min-w-0 truncate text-xs", "max-w-full", className),
+		...props
+	});
+}
+function AttachmentActions({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "attachment-actions",
+		className: require_utils.cn("relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:gap-1", className),
+		...props
+	});
+}
+function AttachmentAction({ className, variant, size = "xs", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+		"data-slot": "attachment-action",
+		variant: variant ?? "ghost",
+		size,
+		icon: true,
+		className: require_utils.cn(className),
+		...props
+	});
+}
+function AttachmentTrigger({ className, render, type, ...props }) {
+	return (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "button",
+		props: (0, _base_ui_react_merge_props.mergeProps)({
+			type: render ? type : type ?? "button",
+			className: require_utils.cn("absolute inset-0 z-10 outline-none", className)
+		}, props),
+		render,
+		state: { slot: "attachment-trigger" }
+	});
+}
+function AttachmentGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "attachment-group",
+		className: require_utils.cn("scroll-fade-x scrollbar-none flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className),
+		...props
+	});
+}
+//#endregion
+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;
+
+//# sourceMappingURL=index.js.map

package/dist/attachment/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/attachment/index.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib\";\nimport { Button } from \"../button\";\n\nconst attachmentVariants = cva(\n  \"group/attachment bg-card text-card-foreground focus-within:ring-ring/30 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit min-w-0 max-w-full shrink-0 flex-wrap rounded-2xl border transition-colors focus-within:ring-1 data-[state=idle]:border-dashed\",\n  {\n    variants: {\n      size: {\n        default:\n          \"has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2 gap-2 text-sm\",\n        sm: \"has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5 gap-2.5 text-xs\",\n        xs: \"has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1 gap-1.5 rounded-xl text-xs\",\n      },\n      orientation: {\n        horizontal: \"min-w-40 items-center\",\n        vertical: \"has-data-[slot=attachment-content]:w-30 w-24 flex-col\",\n      },\n    },\n  },\n);\n\nfunction Attachment({\n  className,\n  state = \"done\",\n  size = \"default\",\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof attachmentVariants> & {\n    state?: \"idle\" | \"uploading\" | \"processing\" | \"error\" | \"done\";\n  }) {\n  return (\n    <div\n      data-slot=\"attachment\"\n      data-state={state}\n      data-size={size}\n      data-orientation={orientation}\n      className={cn(attachmentVariants({ size, orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nconst attachmentMediaVariants = cva(\n  \"bg-muted text-foreground 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! relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg 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 [&_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 [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        icon: \"\",\n        image:\n          \"*:[img]:aspect-square *:[img]:w-full *:[img]:object-cover opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100\",\n      },\n    },\n    defaultVariants: {\n      variant: \"icon\",\n    },\n  },\n);\n\nfunction AttachmentMedia({\n  className,\n  variant = \"icon\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof attachmentMediaVariants>) {\n  return (\n    <div\n      data-slot=\"attachment-media\"\n      data-variant={variant}\n      className={cn(attachmentMediaVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-content\"\n      className={cn(\n        \"min-w-0 max-w-full flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"attachment-title\"\n      className={cn(\n        \"group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block min-w-0 max-w-full truncate font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"attachment-description\"\n      className={cn(\n        \"text-muted-foreground group-data-[state=error]/attachment:text-destructive/80 mt-0.5 block min-w-0 truncate text-xs\",\n        \"max-w-full\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-actions\"\n      className={cn(\n        \"relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:gap-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentAction({\n  className,\n  variant,\n  size = \"xs\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"attachment-action\"\n      variant={variant ?? \"ghost\"}\n      size={size}\n      icon\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentTrigger({\n  className,\n  render,\n  type,\n  ...props\n}: useRender.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        type: render ? type : (type ?? \"button\"),\n        className: cn(\"absolute inset-0 z-10 outline-none\", className),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: \"attachment-trigger\",\n    },\n  });\n}\n\nfunction AttachmentGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-group\"\n      className={cn(\n        \"scroll-fade-x scrollbar-none flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Attachment,\n  AttachmentAction,\n  AttachmentActions,\n  AttachmentContent,\n  AttachmentDescription,\n  AttachmentGroup,\n  AttachmentMedia,\n  AttachmentTitle,\n  AttachmentTrigger,\n};\n"],"mappings":";;;;;;;;;;;AAOA,IAAM,sBAAA,GAAA,yBAAA,KACJ,0SACA,EACE,UAAU;CACR,MAAM;EACJ,SACE;EACF,IAAI;EACJ,IAAI;EACL;CACD,aAAa;EACX,YAAY;EACZ,UAAU;EACX;CACF,EACF,CACF;AAED,SAAS,WAAW,EAClB,WACA,QAAQ,QACR,OAAO,WACP,cAAc,cACd,GAAG,SAIA;AACH,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,oBAAkB;EAClB,WAAW,cAAA,GAAG,mBAAmB;GAAE;GAAM;GAAa,CAAC,EAAE,UAAU;EACnE,GAAI;EACJ,CAAA;;AAIN,IAAM,2BAAA,GAAA,yBAAA,KACJ,orBACA;CACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,OACE;EACH,EACF;CACD,iBAAiB,EACf,SAAS,QACV;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,UAAU,QACV,GAAG,SAC0E;AAC7E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,cAAA,GAAG,wBAAwB,EAAE,SAAS,CAAC,EAAE,UAAU;EAC9D,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;AAC9B,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAW,cAAA,GACT,6FACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC4B;AAC/B,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,WAAW,cAAA,GACT,kJACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4B;AAC/B,QACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,WAAW,cAAA,GACT,uHACA,cACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;AAC9B,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAW,cAAA,GACT,6PACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EACxB,WACA,SACA,OAAO,MACP,GAAG,SACmC;AACtC,QACE,iBAAA,GAAA,kBAAA,KAAC,eAAA,QAAD;EACE,aAAU;EACV,SAAS,WAAW;EACd;EACN,MAAA;EACA,WAAW,cAAA,GAAG,UAAU;EACxB,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,QACA,MACA,GAAG,SACkC;AACrC,SAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB,QAAA,GAAA,2BAAA,YACE;GACE,MAAM,SAAS,OAAQ,QAAQ;GAC/B,WAAW,cAAA,GAAG,sCAAsC,UAAU;GAC/D,EACD,MACD;EACD;EACA,OAAO,EACL,MAAM,sBACP;EACF,CAAC;;AAGJ,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;AAC7E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAW,cAAA,GACT,sMACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/attachment/index.mjs

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

package/dist/attachment/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/attachment/index.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib\";\nimport { Button } from \"../button\";\n\nconst attachmentVariants = cva(\n  \"group/attachment bg-card text-card-foreground focus-within:ring-ring/30 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 relative flex w-fit min-w-0 max-w-full shrink-0 flex-wrap rounded-2xl border transition-colors focus-within:ring-1 data-[state=idle]:border-dashed\",\n  {\n    variants: {\n      size: {\n        default:\n          \"has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2 gap-2 text-sm\",\n        sm: \"has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5 gap-2.5 text-xs\",\n        xs: \"has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1 gap-1.5 rounded-xl text-xs\",\n      },\n      orientation: {\n        horizontal: \"min-w-40 items-center\",\n        vertical: \"has-data-[slot=attachment-content]:w-30 w-24 flex-col\",\n      },\n    },\n  },\n);\n\nfunction Attachment({\n  className,\n  state = \"done\",\n  size = \"default\",\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof attachmentVariants> & {\n    state?: \"idle\" | \"uploading\" | \"processing\" | \"error\" | \"done\";\n  }) {\n  return (\n    <div\n      data-slot=\"attachment\"\n      data-state={state}\n      data-size={size}\n      data-orientation={orientation}\n      className={cn(attachmentVariants({ size, orientation }), className)}\n      {...props}\n    />\n  );\n}\n\nconst attachmentMediaVariants = cva(\n  \"bg-muted text-foreground 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! relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg 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 [&_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 [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        icon: \"\",\n        image:\n          \"*:[img]:aspect-square *:[img]:w-full *:[img]:object-cover opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100\",\n      },\n    },\n    defaultVariants: {\n      variant: \"icon\",\n    },\n  },\n);\n\nfunction AttachmentMedia({\n  className,\n  variant = \"icon\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof attachmentMediaVariants>) {\n  return (\n    <div\n      data-slot=\"attachment-media\"\n      data-variant={variant}\n      className={cn(attachmentMediaVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-content\"\n      className={cn(\n        \"min-w-0 max-w-full flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"attachment-title\"\n      className={cn(\n        \"group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer block min-w-0 max-w-full truncate font-medium\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"attachment-description\"\n      className={cn(\n        \"text-muted-foreground group-data-[state=error]/attachment:text-destructive/80 mt-0.5 block min-w-0 truncate text-xs\",\n        \"max-w-full\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-actions\"\n      className={cn(\n        \"relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:gap-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentAction({\n  className,\n  variant,\n  size = \"xs\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"attachment-action\"\n      variant={variant ?? \"ghost\"}\n      size={size}\n      icon\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentTrigger({\n  className,\n  render,\n  type,\n  ...props\n}: useRender.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        type: render ? type : (type ?? \"button\"),\n        className: cn(\"absolute inset-0 z-10 outline-none\", className),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: \"attachment-trigger\",\n    },\n  });\n}\n\nfunction AttachmentGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-group\"\n      className={cn(\n        \"scroll-fade-x scrollbar-none flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Attachment,\n  AttachmentAction,\n  AttachmentActions,\n  AttachmentContent,\n  AttachmentDescription,\n  AttachmentGroup,\n  AttachmentMedia,\n  AttachmentTitle,\n  AttachmentTrigger,\n};\n"],"mappings":";;;;;;;;AAOA,IAAM,qBAAqB,IACzB,0SACA,EACE,UAAU;CACR,MAAM;EACJ,SACE;EACF,IAAI;EACJ,IAAI;EACL;CACD,aAAa;EACX,YAAY;EACZ,UAAU;EACX;CACF,EACF,CACF;AAED,SAAS,WAAW,EAClB,WACA,QAAQ,QACR,OAAO,WACP,cAAc,cACd,GAAG,SAIA;AACH,QACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,oBAAkB;EAClB,WAAW,GAAG,mBAAmB;GAAE;GAAM;GAAa,CAAC,EAAE,UAAU;EACnE,GAAI;EACJ,CAAA;;AAIN,IAAM,0BAA0B,IAC9B,orBACA;CACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,OACE;EACH,EACF;CACD,iBAAiB,EACf,SAAS,QACV;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,UAAU,QACV,GAAG,SAC0E;AAC7E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,wBAAwB,EAAE,SAAS,CAAC,EAAE,UAAU;EAC9D,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;AAC9B,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6FACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC4B;AAC/B,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,kJACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4B;AAC/B,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,uHACA,cACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;AAC9B,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,6PACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EACxB,WACA,SACA,OAAO,MACP,GAAG,SACmC;AACtC,QACE,oBAAC,QAAD;EACE,aAAU;EACV,SAAS,WAAW;EACd;EACN,MAAA;EACA,WAAW,GAAG,UAAU;EACxB,GAAI;EACJ,CAAA;;AAIN,SAAS,kBAAkB,EACzB,WACA,QACA,MACA,GAAG,SACkC;AACrC,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL;GACE,MAAM,SAAS,OAAQ,QAAQ;GAC/B,WAAW,GAAG,sCAAsC,UAAU;GAC/D,EACD,MACD;EACD;EACA,OAAO,EACL,MAAM,sBACP;EACF,CAAC;;AAGJ,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;AAC7E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sMACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/bubble/index.d.ts

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

package/dist/bubble/index.js

@@ -0,0 +1,81 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-8l464Juk.js");
+const require_utils = require("../utils-DrngEK1K.js");
+let class_variance_authority = require("class-variance-authority");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+//#region src/bubble/index.tsx
+function BubbleGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "bubble-group",
+		className: require_utils.cn("flex min-w-0 flex-col gap-2", className),
+		...props
+	});
+}
+var bubbleVariants = (0, class_variance_authority.cva)("group/bubble relative flex w-fit min-w-0 max-w-[80%] flex-col gap-1 data-[variant=ghost]:max-w-full data-[align=end]:self-end group-data-[align=end]/message:self-end", {
+	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]:text-foreground *:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] 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: "[&>[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 border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0",
+		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 /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "bubble",
+		"data-variant": variant,
+		"data-align": align,
+		className: require_utils.cn(bubbleVariants({ variant }), className),
+		...props
+	});
+}
+function BubbleContent({ className, render, ...props }) {
+	return (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "div",
+		props: (0, _base_ui_react_merge_props.mergeProps)({ className: require_utils.cn("w-fit max-w-full min-w-0 overflow-hidden rounded-3xl border border-transparent px-3 py-2.5 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/30", className) }, props),
+		render,
+		state: { slot: "bubble-content" }
+	});
+}
+var bubbleReactionsVariants = (0, class_variance_authority.cva)("bg-muted ring-3 ring-card absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full px-1.5 py-0.5 text-sm 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 /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "bubble-reactions",
+		"data-align": align,
+		"data-side": side,
+		className: require_utils.cn(bubbleReactionsVariants({
+			side,
+			align
+		}), className),
+		...props
+	});
+}
+//#endregion
+exports.Bubble = Bubble;
+exports.BubbleContent = BubbleContent;
+exports.BubbleGroup = BubbleGroup;
+exports.BubbleReactions = BubbleReactions;
+
+//# sourceMappingURL=index.js.map

package/dist/bubble/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/bubble/index.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib\";\n\nfunction BubbleGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"bubble-group\"\n      className={cn(\"flex min-w-0 flex-col gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nconst bubbleVariants = cva(\n  \"group/bubble relative flex w-fit min-w-0 max-w-[80%] flex-col gap-1 data-[variant=ghost]:max-w-full data-[align=end]:self-end group-data-[align=end]/message:self-end\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80\",\n        secondary:\n          \"*: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%)]\",\n        muted:\n          \"*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]\",\n        tinted:\n          \"*:data-[slot=bubble-content]:text-foreground *:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] 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)]\",\n        outline:\n          \"*: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\",\n        ghost:\n          \"[&>[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 border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0\",\n        destructive:\n          \"*: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\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Bubble({\n  variant = \"default\",\n  align = \"start\",\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof bubbleVariants> & {\n    align?: \"start\" | \"end\";\n  }) {\n  return (\n    <div\n      data-slot=\"bubble\"\n      data-variant={variant}\n      data-align={align}\n      className={cn(bubbleVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction BubbleContent({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"w-fit max-w-full min-w-0 overflow-hidden rounded-3xl border border-transparent px-3 py-2.5 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/30\",\n          className,\n        ),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: \"bubble-content\",\n    },\n  });\n}\n\nconst bubbleReactionsVariants = cva(\n  \"bg-muted ring-3 ring-card absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full px-1.5 py-0.5 text-sm has-[button]:p-0\",\n  {\n    variants: {\n      side: {\n        top: \"top-0 -translate-y-3/4\",\n        bottom: \"bottom-0 translate-y-3/4\",\n      },\n      align: {\n        start: \"left-3\",\n        end: \"right-3\",\n      },\n    },\n    defaultVariants: {\n      side: \"bottom\",\n      align: \"end\",\n    },\n  },\n);\n\nfunction BubbleReactions({\n  side = \"bottom\",\n  align = \"end\",\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  align?: \"start\" | \"end\";\n  side?: \"top\" | \"bottom\";\n}) {\n  return (\n    <div\n      data-slot=\"bubble-reactions\"\n      data-align={align}\n      data-side={side}\n      className={cn(bubbleReactionsVariants({ side, align }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Bubble, BubbleContent, BubbleGroup, BubbleReactions };\n"],"mappings":";;;;;;;;;;AAMA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;AACzE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAW,cAAA,GAAG,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAIN,IAAM,kBAAA,GAAA,yBAAA,KACJ,yKACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,OACE;EACF,QACE;EACF,SACE;EACF,OACE;EACF,aACE;EACH,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAED,SAAS,OAAO,EACd,UAAU,WACV,QAAQ,SACR,WACA,GAAG,SAIA;AACH,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,cAAY;EACZ,WAAW,cAAA,GAAG,eAAe,EAAE,SAAS,CAAC,EAAE,UAAU;EACrD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,QACA,GAAG,SAC+B;AAClC,SAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB,QAAA,GAAA,2BAAA,YACE,EACE,WAAW,cAAA,GACT,gWACA,UACD,EACF,EACD,MACD;EACD;EACA,OAAO,EACL,MAAM,kBACP;EACF,CAAC;;AAGJ,IAAM,2BAAA,GAAA,yBAAA,KACJ,qJACA;CACE,UAAU;EACR,MAAM;GACJ,KAAK;GACL,QAAQ;GACT;EACD,OAAO;GACL,OAAO;GACP,KAAK;GACN;EACF;CACD,iBAAiB;EACf,MAAM;EACN,OAAO;EACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,OAAO,UACP,QAAQ,OACR,WACA,GAAG,SAIF;AACD,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,WAAW,cAAA,GAAG,wBAAwB;GAAE;GAAM;GAAO,CAAC,EAAE,UAAU;EAClE,GAAI;EACJ,CAAA"}

package/dist/bubble/index.mjs

@@ -0,0 +1,75 @@
+import { t as cn } from "../utils-Bg4z4cXr.mjs";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/bubble/index.tsx
+function BubbleGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble-group",
+		className: cn("flex min-w-0 flex-col gap-2", className),
+		...props
+	});
+}
+var bubbleVariants = cva("group/bubble relative flex w-fit min-w-0 max-w-[80%] flex-col gap-1 data-[variant=ghost]:max-w-full data-[align=end]:self-end group-data-[align=end]/message:self-end", {
+	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]:text-foreground *:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] 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: "[&>[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 border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0",
+		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 /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble",
+		"data-variant": variant,
+		"data-align": align,
+		className: cn(bubbleVariants({ variant }), className),
+		...props
+	});
+}
+function BubbleContent({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("w-fit max-w-full min-w-0 overflow-hidden rounded-3xl border border-transparent px-3 py-2.5 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/30", className) }, props),
+		render,
+		state: { slot: "bubble-content" }
+	});
+}
+var bubbleReactionsVariants = cva("bg-muted ring-3 ring-card absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full px-1.5 py-0.5 text-sm 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 /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble-reactions",
+		"data-align": align,
+		"data-side": side,
+		className: cn(bubbleReactionsVariants({
+			side,
+			align
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Bubble, BubbleContent, BubbleGroup, BubbleReactions };
+
+//# sourceMappingURL=index.mjs.map

package/dist/bubble/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/bubble/index.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib\";\n\nfunction BubbleGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"bubble-group\"\n      className={cn(\"flex min-w-0 flex-col gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nconst bubbleVariants = cva(\n  \"group/bubble relative flex w-fit min-w-0 max-w-[80%] flex-col gap-1 data-[variant=ghost]:max-w-full data-[align=end]:self-end group-data-[align=end]/message:self-end\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80\",\n        secondary:\n          \"*: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%)]\",\n        muted:\n          \"*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]\",\n        tinted:\n          \"*:data-[slot=bubble-content]:text-foreground *:data-[slot=bubble-content]:bg-[oklch(from_var(--primary)_0.93_calc(c*0.4)_h)] 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)]\",\n        outline:\n          \"*: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\",\n        ghost:\n          \"[&>[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 border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0\",\n        destructive:\n          \"*: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\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction Bubble({\n  variant = \"default\",\n  align = \"start\",\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof bubbleVariants> & {\n    align?: \"start\" | \"end\";\n  }) {\n  return (\n    <div\n      data-slot=\"bubble\"\n      data-variant={variant}\n      data-align={align}\n      className={cn(bubbleVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction BubbleContent({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"w-fit max-w-full min-w-0 overflow-hidden rounded-3xl border border-transparent px-3 py-2.5 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/30\",\n          className,\n        ),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: \"bubble-content\",\n    },\n  });\n}\n\nconst bubbleReactionsVariants = cva(\n  \"bg-muted ring-3 ring-card absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full px-1.5 py-0.5 text-sm has-[button]:p-0\",\n  {\n    variants: {\n      side: {\n        top: \"top-0 -translate-y-3/4\",\n        bottom: \"bottom-0 translate-y-3/4\",\n      },\n      align: {\n        start: \"left-3\",\n        end: \"right-3\",\n      },\n    },\n    defaultVariants: {\n      side: \"bottom\",\n      align: \"end\",\n    },\n  },\n);\n\nfunction BubbleReactions({\n  side = \"bottom\",\n  align = \"end\",\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  align?: \"start\" | \"end\";\n  side?: \"top\" | \"bottom\";\n}) {\n  return (\n    <div\n      data-slot=\"bubble-reactions\"\n      data-align={align}\n      data-side={side}\n      className={cn(bubbleReactionsVariants({ side, align }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Bubble, BubbleContent, BubbleGroup, BubbleReactions };\n"],"mappings":";;;;;;;AAMA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;AACzE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAIN,IAAM,iBAAiB,IACrB,yKACA;CACE,UAAU,EACR,SAAS;EACP,SACE;EACF,WACE;EACF,OACE;EACF,QACE;EACF,SACE;EACF,OACE;EACF,aACE;EACH,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAED,SAAS,OAAO,EACd,UAAU,WACV,QAAQ,SACR,WACA,GAAG,SAIA;AACH,QACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,cAAY;EACZ,WAAW,GAAG,eAAe,EAAE,SAAS,CAAC,EAAE,UAAU;EACrD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EACrB,WACA,QACA,GAAG,SAC+B;AAClC,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GACT,gWACA,UACD,EACF,EACD,MACD;EACD;EACA,OAAO,EACL,MAAM,kBACP;EACF,CAAC;;AAGJ,IAAM,0BAA0B,IAC9B,qJACA;CACE,UAAU;EACR,MAAM;GACJ,KAAK;GACL,QAAQ;GACT;EACD,OAAO;GACL,OAAO;GACP,KAAK;GACN;EACF;CACD,iBAAiB;EACf,MAAM;EACN,OAAO;EACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,OAAO,UACP,QAAQ,OACR,WACA,GAAG,SAIF;AACD,QACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,WAAW,GAAG,wBAAwB;GAAE;GAAM;GAAO,CAAC,EAAE,UAAU;EAClE,GAAI;EACJ,CAAA"}

package/dist/button/index.d.ts

@@ -3,7 +3,9 @@ import { VariantProps } from 'class-variance-authority';
 import { ClassProp } from 'class-variance-authority/types';
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
+    icon?: boolean | null | undefined;
+    radius?: "none" | "full" | null | undefined;
 } & ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function Button({ className, variant, size, icon, radius, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react/jsx-runtime").JSX.Element;
 export { Button, buttonVariants };

package/dist/button/index.js

@@ -19,25 +19,50 @@ var buttonVariants = (0, class_variance_authority.cva)("group/button focus-visib
 		size: {
 			default: "has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 h-8 gap-1.5 px-2.5",
 			xs: "in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-			sm: "in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] [&_svg:not([class*='size-'])]:size-3.5",
-			lg: "has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 h-9 gap-1.5 px-2.5",
-			icon: "size-8",
-			"icon-xs": "in-data-[slot=button-group]:rounded-lg size-6 rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3",
-			"icon-sm": "in-data-[slot=button-group]:rounded-lg size-7 rounded-[min(var(--radius-md),12px)]",
-			"icon-lg": "size-9"
+			sm: "in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem]",
+			lg: "has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 h-9 gap-1.5 px-2.5"
+		},
+		icon: { true: "p-0" },
+		radius: {
+			none: "!rounded-none",
+			full: "!rounded-full"
 		}
 	},
+	compoundVariants: [
+		{
+			icon: true,
+			size: "default",
+			className: "size-8"
+		},
+		{
+			icon: true,
+			size: "xs",
+			className: "size-6"
+		},
+		{
+			icon: true,
+			size: "sm",
+			className: "size-7"
+		},
+		{
+			icon: true,
+			size: "lg",
+			className: "size-9"
+		}
+	],
 	defaultVariants: {
 		variant: "default",
 		size: "default"
 	}
 });
-function Button({ className, variant = "default", size = "default", ...props }) {
+function Button({ className, variant = "default", size = "default", icon, radius, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_button.Button, {
 		"data-slot": "button",
 		className: require_utils.cn(buttonVariants({
 			variant,
 			size,
+			icon,
+			radius,
 			className
 		})),
 		...props

package/dist/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/button/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib\";\n\nconst buttonVariants = cva(\n  \"group/button focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px 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 inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-clip-padding text-sm font-medium outline-none transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline:\n          \"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\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 h-8 gap-1.5 px-2.5\",\n        xs: \"in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 h-9 gap-1.5 px-2.5\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"in-data-[slot=button-group]:rounded-lg size-6 rounded-[min(var(--radius-md),10px)] [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"in-data-[slot=button-group]:rounded-lg size-7 rounded-[min(var(--radius-md),12px)]\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;AAOA,IAAM,kBAAA,GAAA,yBAAA,KACJ,8lBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SACE;GACF,WACE;GACF,OACE;GACF,aACE;GACF,MAAM;GACP;EACD,MAAM;GACJ,SACE;GACF,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WACE;GACF,WACE;GACF,WAAW;GACZ;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,SAAS,OAAO,EACd,WACA,UAAU,WACV,OAAO,WACP,GAAG,SAC2D;AAC9D,QACE,iBAAA,GAAA,kBAAA,KAAC,sBAAA,QAAD;EACE,aAAU;EACV,WAAW,cAAA,GAAG,eAAe;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC3D,GAAI;EACJ,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/button/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib\";\n\nconst buttonVariants = cva(\n  \"group/button focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px 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 inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-lg border border-transparent bg-clip-padding text-sm font-medium outline-none transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline:\n          \"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\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 h-8 gap-1.5 px-2.5\",\n        xs: \"in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem]\",\n        lg: \"has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 h-9 gap-1.5 px-2.5\",\n      },\n      icon: {\n        true: \"p-0\",\n      },\n      radius: {\n        none: \"!rounded-none\",\n        full: \"!rounded-full\",\n      },\n    },\n    compoundVariants: [\n      { icon: true, size: \"default\", className: \"size-8\" },\n      { icon: true, size: \"xs\", className: \"size-6\" },\n      { icon: true, size: \"sm\", className: \"size-7\" },\n      { icon: true, size: \"lg\", className: \"size-9\" },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  icon,\n  radius,\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, icon, radius, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;;;AAOA,IAAM,kBAAA,GAAA,yBAAA,KACJ,8lBACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SACE;GACF,WACE;GACF,OACE;GACF,aACE;GACF,MAAM;GACP;EACD,MAAM;GACJ,SACE;GACF,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,MAAM,EACJ,MAAM,OACP;EACD,QAAQ;GACN,MAAM;GACN,MAAM;GACP;EACF;CACD,kBAAkB;EAChB;GAAE,MAAM;GAAM,MAAM;GAAW,WAAW;GAAU;EACpD;GAAE,MAAM;GAAM,MAAM;GAAM,WAAW;GAAU;EAC/C;GAAE,MAAM;GAAM,MAAM;GAAM,WAAW;GAAU;EAC/C;GAAE,MAAM;GAAM,MAAM;GAAM,WAAW;GAAU;EAChD;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,SAAS,OAAO,EACd,WACA,UAAU,WACV,OAAO,WACP,MACA,QACA,GAAG,SAC2D;AAC9D,QACE,iBAAA,GAAA,kBAAA,KAAC,sBAAA,QAAD;EACE,aAAU;EACV,WAAW,cAAA,GAAG,eAAe;GAAE;GAAS;GAAM;GAAM;GAAQ;GAAW,CAAC,CAAC;EACzE,GAAI;EACJ,CAAA"}