@mastra/playground-ui 66.0.0-alpha.3 → 66.0.0-alpha.5

package/README.md

@@ -29,6 +29,28 @@ With a Tailwind build of your own, compile one sheet instead of `style.css`: imp
 @import '@mastra/playground-ui/sources.css';
 ```
 
+### Data sizes
+
+Import `formatBytes` from the number utility:
+
+```ts
+import { formatBytes } from '@mastra/playground-ui/utils/number';
+
+formatBytes(1536);
+formatBytes(0.5, { unit: 'GB' });
+formatBytes(2048, { unit: 'GB', autoScale: false });
+formatBytes(0.5, { unit: 'GB', autoScale: true });
+formatBytes(2048, { unit: 'GB', autoScale: true });
+```
+
+These calls return `1.5 KB`, `0.5 GB`, `2048 GB`, `512 MB`, and `2 TB`, respectively.
+
+With no options, `formatBytes(bytes)` keeps its existing automatic byte formatting and rounding. With a source `unit`, the formatter keeps the supplied value and unit unchanged unless `autoScale: true`. The supported units are `B`, `KB`, `MB`, `GB`, `TB`, and `PB`, also exported as the `ByteUnit` type.
+
+Conversions use the helper's existing binary convention: each unit is 1024 of the previous unit, despite the legacy `KB` through `PB` labels. These are not decimal SI conversions, where each step is 1000. Convert decimal measurements to this convention before passing them in.
+
+Automatic scaling stops at B and PB. It rounds bytes and values of 10 or more to whole numbers, and smaller values in larger units to one decimal place. When rounding reaches 1024, the opt-in mode promotes to the next unit, except at PB. Zero becomes `0 B` in automatic mode and keeps its source unit otherwise. Negative, non-finite, null, and undefined measurements return `undefined` in every mode.
+
 ### Subtle buttons
 
 Use `variant="subtle"` for a persistent neutral fill, such as a selected view. It keeps the same dimensions as `default`, so switching between the two does not move surrounding controls. Set `aria-pressed` on toggle buttons to expose selection to assistive technology.

package/dist/ActionRow-BfK77pCT.cjs

@@ -0,0 +1,40 @@
+const require_utils = require("./utils-uDc1ofX1.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/ds/components/ActionRow/action-row.tsx
+/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */
+function ActionRowRoot({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "action-row",
+		className: require_utils.cn("flex min-h-control-md flex-wrap items-center justify-between gap-2", className),
+		...props
+	});
+}
+/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */
+function ActionRowStart({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "action-row-start",
+		className: require_utils.cn("flex min-w-64 flex-1 flex-wrap items-center gap-2", className),
+		...props
+	});
+}
+/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */
+function ActionRowEnd({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "action-row-end",
+		className: require_utils.cn("ml-auto flex shrink-0 items-center gap-2", className),
+		...props
+	});
+}
+// src/ds/components/ActionRow/index.ts
+var ActionRow = Object.assign(ActionRowRoot, {
+	Start: ActionRowStart,
+	End: ActionRowEnd
+});
+Object.defineProperty(exports, "ActionRow", {
+	enumerable: true,
+	get: function() {
+		return ActionRow;
+	}
+});
+
+//# sourceMappingURL=ActionRow-BfK77pCT.cjs.map

package/dist/ActionRow-BfK77pCT.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionRow-BfK77pCT.cjs","names":["cn"],"sources":["../src/ds/components/ActionRow/action-row.tsx","../src/ds/components/ActionRow/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\ntype DivProps = ComponentPropsWithoutRef<'div'>;\n\n/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */\nexport function ActionRowRoot({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row\"\n      className={cn('flex min-h-control-md flex-wrap items-center justify-between gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */\nexport function ActionRowStart({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row-start\"\n      className={cn('flex min-w-64 flex-1 flex-wrap items-center gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */\nexport function ActionRowEnd({ className, ...props }: DivProps) {\n  return (\n    <div data-slot=\"action-row-end\" className={cn('ml-auto flex shrink-0 items-center gap-2', className)} {...props} />\n  );\n}\n","import { ActionRowEnd, ActionRowRoot, ActionRowStart } from './action-row';\n\nexport const ActionRow = Object.assign(ActionRowRoot, {\n  Start: ActionRowStart,\n  End: ActionRowEnd,\n});\n"],"mappings":";;;;AAOA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAmB;CAC/D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAWA,cAAAA,GAAG,sEAAsE,SAAS;EAC7F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAmB;CAChE,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,aAAU;EACV,WAAWA,cAAAA,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAmB;CAC9D,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,aAAU;EAAiB,WAAWA,cAAAA,GAAG,4CAA4C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEtH;;AC/BA,IAAa,YAAY,OAAO,OAAO,eAAe;CACpD,OAAO;CACP,KAAK;AACP,CAAC"}

package/dist/ActionRow-Cd6tOC2K.js

@@ -0,0 +1,35 @@
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { jsx } from "react/jsx-runtime";
+// src/ds/components/ActionRow/action-row.tsx
+/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */
+function ActionRowRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "action-row",
+		className: cn("flex min-h-control-md flex-wrap items-center justify-between gap-2", className),
+		...props
+	});
+}
+/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */
+function ActionRowStart({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "action-row-start",
+		className: cn("flex min-w-64 flex-1 flex-wrap items-center gap-2", className),
+		...props
+	});
+}
+/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */
+function ActionRowEnd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "action-row-end",
+		className: cn("ml-auto flex shrink-0 items-center gap-2", className),
+		...props
+	});
+}
+// src/ds/components/ActionRow/index.ts
+var ActionRow = Object.assign(ActionRowRoot, {
+	Start: ActionRowStart,
+	End: ActionRowEnd
+});
+export { ActionRow as t };
+
+//# sourceMappingURL=ActionRow-Cd6tOC2K.js.map

package/dist/ActionRow-Cd6tOC2K.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionRow-Cd6tOC2K.js","names":[],"sources":["../src/ds/components/ActionRow/action-row.tsx","../src/ds/components/ActionRow/index.ts"],"sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport { cn } from '@/lib/utils';\n\ntype DivProps = ComponentPropsWithoutRef<'div'>;\n\n/** One toolbar line: a start group and an end group pushed apart, wrapping on narrow viewports. */\nexport function ActionRowRoot({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row\"\n      className={cn('flex min-h-control-md flex-wrap items-center justify-between gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the left. Grows to fill the line; keeps a floor so the end group wraps under it instead of squeezing it. */\nexport function ActionRowStart({ className, ...props }: DivProps) {\n  return (\n    <div\n      data-slot=\"action-row-start\"\n      className={cn('flex min-w-64 flex-1 flex-wrap items-center gap-2', className)}\n      {...props}\n    />\n  );\n}\n\n/** Actions positioned on the right. Never shrinks; wraps under the start group when needed. */\nexport function ActionRowEnd({ className, ...props }: DivProps) {\n  return (\n    <div data-slot=\"action-row-end\" className={cn('ml-auto flex shrink-0 items-center gap-2', className)} {...props} />\n  );\n}\n","import { ActionRowEnd, ActionRowRoot, ActionRowStart } from './action-row';\n\nexport const ActionRow = Object.assign(ActionRowRoot, {\n  Start: ActionRowStart,\n  End: ActionRowEnd,\n});\n"],"mappings":";;;;AAOA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAmB;CAC/D,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sEAAsE,SAAS;EAC7F,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAmB;CAChE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,aAAa,EAAE,WAAW,GAAG,SAAmB;CAC9D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAiB,WAAW,GAAG,4CAA4C,SAAS;EAAG,GAAI;CAAQ,CAAA;AAEtH;;AC/BA,IAAa,YAAY,OAAO,OAAO,eAAe;CACpD,OAAO;CACP,KAAK;AACP,CAAC"}

package/dist/Arrival-Dm6Vgn78.cjs

@@ -0,0 +1,76 @@
+require('./Arrival.css');const require_tokens = require("./tokens.cjs.js");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/ds/components/Arrival/use-watched.ts
+/** Outside any scope nothing is watched arriving, so nothing animates. */
+var SettledContext = (0, react.createContext)({ current: false });
+/** Whether the reader was watching when this element mounted — the one boundary every entrance derives from. */
+function useWatched() {
+	const settled = (0, react.useContext)(SettledContext);
+	const [watched] = (0, react.useState)(() => settled.current);
+	return watched;
+}
+/** The entrance class if this element mounted while the reader was watching, nothing otherwise. */
+function useArriving() {
+	return useWatched() ? require_tokens.ARRIVING_CLASS : void 0;
+}
+// src/ds/components/Arrival/arrival.tsx
+/**
+* Marks what the reader was handed. Whatever mounts with a scope is already there and
+* never animates; whatever mounts after it painted is the run happening in front of
+* them, and fades in.
+*
+* Scopes nest, and that is the whole rule: a transcript opens one for its history,
+* and every element that fades in opens one for its own subtree, so a row's contents
+* ride its entrance rather than playing a second one on top of it — while a detail
+* that fills in a beat later still gets its own.
+*
+* A ref, not state: this says when a child mounted, which is only ever read by a child
+* mounting. Holding it as state would re-render every scope and its subtree once each
+* after paint — a whole restored transcript rendered twice to tell it to sit still.
+*/
+function ArrivalScope({ children }) {
+	const settled = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		settled.current = true;
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettledContext, {
+		value: settled,
+		children
+	});
+}
+/** An element that fades in when it lands, and hosts a scope for whatever lands inside it later. */
+function Arriving({ children, className }) {
+	const arriving = useArriving();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_utils.cn(arriving, className),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrivalScope, { children })
+	});
+}
+Object.defineProperty(exports, "ArrivalScope", {
+	enumerable: true,
+	get: function() {
+		return ArrivalScope;
+	}
+});
+Object.defineProperty(exports, "Arriving", {
+	enumerable: true,
+	get: function() {
+		return Arriving;
+	}
+});
+Object.defineProperty(exports, "useArriving", {
+	enumerable: true,
+	get: function() {
+		return useArriving;
+	}
+});
+Object.defineProperty(exports, "useWatched", {
+	enumerable: true,
+	get: function() {
+		return useWatched;
+	}
+});
+
+//# sourceMappingURL=Arrival-Dm6Vgn78.cjs.map

package/dist/Arrival-Dm6Vgn78.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrival-Dm6Vgn78.cjs","names":["createContext","useContext","useState","ARRIVING_CLASS","useRef","cn"],"sources":["../src/ds/components/Arrival/use-watched.ts","../src/ds/components/Arrival/arrival.tsx"],"sourcesContent":["import { createContext, useContext, useState } from 'react';\n\nimport { ARRIVING_CLASS } from '@/ds/tokens';\n\nimport './arrival.css';\n\n/** Outside any scope nothing is watched arriving, so nothing animates. */\nexport const SettledContext = createContext<{ readonly current: boolean }>({ current: false });\n\n/** Whether the reader was watching when this element mounted — the one boundary every entrance derives from. */\nexport function useWatched(): boolean {\n  const settled = useContext(SettledContext);\n  const [watched] = useState(() => settled.current);\n\n  return watched;\n}\n\n/** The entrance class if this element mounted while the reader was watching, nothing otherwise. */\nexport function useArriving(): string | undefined {\n  return useWatched() ? ARRIVING_CLASS : undefined;\n}\n","import { useEffect, useRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { SettledContext, useArriving } from './use-watched';\nimport { cn } from '@/lib/utils';\n\n/**\n * Marks what the reader was handed. Whatever mounts with a scope is already there and\n * never animates; whatever mounts after it painted is the run happening in front of\n * them, and fades in.\n *\n * Scopes nest, and that is the whole rule: a transcript opens one for its history,\n * and every element that fades in opens one for its own subtree, so a row's contents\n * ride its entrance rather than playing a second one on top of it — while a detail\n * that fills in a beat later still gets its own.\n *\n * A ref, not state: this says when a child mounted, which is only ever read by a child\n * mounting. Holding it as state would re-render every scope and its subtree once each\n * after paint — a whole restored transcript rendered twice to tell it to sit still.\n */\nexport function ArrivalScope({ children }: { children: ReactNode }) {\n  const settled = useRef(false);\n  useEffect(() => {\n    settled.current = true;\n  }, []);\n\n  return <SettledContext value={settled}>{children}</SettledContext>;\n}\n\n/** An element that fades in when it lands, and hosts a scope for whatever lands inside it later. */\nexport function Arriving({ children, className }: { children: ReactNode; className?: string }) {\n  const arriving = useArriving();\n\n  return (\n    <div className={cn(arriving, className)}>\n      <ArrivalScope>{children}</ArrivalScope>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,IAAa,kBAAA,GAAiBA,MAAAA,cAAAA,CAA6C,EAAE,SAAS,MAAM,CAAC;;AAG7F,SAAgB,aAAsB;CACpC,MAAM,WAAA,GAAUC,MAAAA,WAAAA,CAAW,cAAc;CACzC,MAAM,CAAC,YAAA,GAAWC,MAAAA,SAAAA,OAAe,QAAQ,OAAO;CAEhD,OAAO;AACT;;AAGA,SAAgB,cAAkC;CAChD,OAAO,WAAW,IAAIC,eAAAA,iBAAiB,KAAA;AACzC;;;;;;;;;;;;;;;;ACAA,SAAgB,aAAa,EAAE,YAAqC;CAClE,MAAM,WAAA,GAAUC,MAAAA,OAAAA,CAAO,KAAK;CAC5B,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,QAAQ,UAAU;CACpB,GAAG,CAAC,CAAC;CAEL,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;EAAgB,OAAO;EAAU;CAAyB,CAAA;AACnE;;AAGA,SAAgB,SAAS,EAAE,UAAU,aAA0D;CAC7F,MAAM,WAAW,YAAY;CAE7B,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAWC,cAAAA,GAAG,UAAU,SAAS;EACpC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD,EAAe,SAAuB,CAAA;CACnC,CAAA;AAET"}

package/dist/Arrival-NpBOyV52.js

@@ -0,0 +1,53 @@
+import { ARRIVING_CLASS } from "./tokens.es.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import './Arrival.css';// src/ds/components/Arrival/use-watched.ts
+/** Outside any scope nothing is watched arriving, so nothing animates. */
+var SettledContext = createContext({ current: false });
+/** Whether the reader was watching when this element mounted — the one boundary every entrance derives from. */
+function useWatched() {
+	const settled = useContext(SettledContext);
+	const [watched] = useState(() => settled.current);
+	return watched;
+}
+/** The entrance class if this element mounted while the reader was watching, nothing otherwise. */
+function useArriving() {
+	return useWatched() ? ARRIVING_CLASS : void 0;
+}
+// src/ds/components/Arrival/arrival.tsx
+/**
+* Marks what the reader was handed. Whatever mounts with a scope is already there and
+* never animates; whatever mounts after it painted is the run happening in front of
+* them, and fades in.
+*
+* Scopes nest, and that is the whole rule: a transcript opens one for its history,
+* and every element that fades in opens one for its own subtree, so a row's contents
+* ride its entrance rather than playing a second one on top of it — while a detail
+* that fills in a beat later still gets its own.
+*
+* A ref, not state: this says when a child mounted, which is only ever read by a child
+* mounting. Holding it as state would re-render every scope and its subtree once each
+* after paint — a whole restored transcript rendered twice to tell it to sit still.
+*/
+function ArrivalScope({ children }) {
+	const settled = useRef(false);
+	useEffect(() => {
+		settled.current = true;
+	}, []);
+	return /* @__PURE__ */ jsx(SettledContext, {
+		value: settled,
+		children
+	});
+}
+/** An element that fades in when it lands, and hosts a scope for whatever lands inside it later. */
+function Arriving({ children, className }) {
+	const arriving = useArriving();
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(arriving, className),
+		children: /* @__PURE__ */ jsx(ArrivalScope, { children })
+	});
+}
+export { useWatched as i, Arriving as n, useArriving as r, ArrivalScope as t };
+
+//# sourceMappingURL=Arrival-NpBOyV52.js.map

package/dist/Arrival-NpBOyV52.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Arrival-NpBOyV52.js","names":[],"sources":["../src/ds/components/Arrival/use-watched.ts","../src/ds/components/Arrival/arrival.tsx"],"sourcesContent":["import { createContext, useContext, useState } from 'react';\n\nimport { ARRIVING_CLASS } from '@/ds/tokens';\n\nimport './arrival.css';\n\n/** Outside any scope nothing is watched arriving, so nothing animates. */\nexport const SettledContext = createContext<{ readonly current: boolean }>({ current: false });\n\n/** Whether the reader was watching when this element mounted — the one boundary every entrance derives from. */\nexport function useWatched(): boolean {\n  const settled = useContext(SettledContext);\n  const [watched] = useState(() => settled.current);\n\n  return watched;\n}\n\n/** The entrance class if this element mounted while the reader was watching, nothing otherwise. */\nexport function useArriving(): string | undefined {\n  return useWatched() ? ARRIVING_CLASS : undefined;\n}\n","import { useEffect, useRef } from 'react';\nimport type { ReactNode } from 'react';\n\nimport { SettledContext, useArriving } from './use-watched';\nimport { cn } from '@/lib/utils';\n\n/**\n * Marks what the reader was handed. Whatever mounts with a scope is already there and\n * never animates; whatever mounts after it painted is the run happening in front of\n * them, and fades in.\n *\n * Scopes nest, and that is the whole rule: a transcript opens one for its history,\n * and every element that fades in opens one for its own subtree, so a row's contents\n * ride its entrance rather than playing a second one on top of it — while a detail\n * that fills in a beat later still gets its own.\n *\n * A ref, not state: this says when a child mounted, which is only ever read by a child\n * mounting. Holding it as state would re-render every scope and its subtree once each\n * after paint — a whole restored transcript rendered twice to tell it to sit still.\n */\nexport function ArrivalScope({ children }: { children: ReactNode }) {\n  const settled = useRef(false);\n  useEffect(() => {\n    settled.current = true;\n  }, []);\n\n  return <SettledContext value={settled}>{children}</SettledContext>;\n}\n\n/** An element that fades in when it lands, and hosts a scope for whatever lands inside it later. */\nexport function Arriving({ children, className }: { children: ReactNode; className?: string }) {\n  const arriving = useArriving();\n\n  return (\n    <div className={cn(arriving, className)}>\n      <ArrivalScope>{children}</ArrivalScope>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAOA,IAAa,iBAAiB,cAA6C,EAAE,SAAS,MAAM,CAAC;;AAG7F,SAAgB,aAAsB;CACpC,MAAM,UAAU,WAAW,cAAc;CACzC,MAAM,CAAC,WAAW,eAAe,QAAQ,OAAO;CAEhD,OAAO;AACT;;AAGA,SAAgB,cAAkC;CAChD,OAAO,WAAW,IAAI,iBAAiB,KAAA;AACzC;;;;;;;;;;;;;;;;ACAA,SAAgB,aAAa,EAAE,YAAqC;CAClE,MAAM,UAAU,OAAO,KAAK;CAC5B,gBAAgB;EACd,QAAQ,UAAU;CACpB,GAAG,CAAC,CAAC;CAEL,OAAO,oBAAC,gBAAD;EAAgB,OAAO;EAAU;CAAyB,CAAA;AACnE;;AAGA,SAAgB,SAAS,EAAE,UAAU,aAA0D;CAC7F,MAAM,WAAW,YAAY;CAE7B,OACE,oBAAC,OAAD;EAAK,WAAW,GAAG,UAAU,SAAS;EACpC,UAAA,oBAAC,cAAD,EAAe,SAAuB,CAAA;CACnC,CAAA;AAET"}

package/dist/AttachmentCard-B1fhYov_.cjs

@@ -0,0 +1,81 @@
+const require_utils = require("./utils-uDc1ofX1.cjs");
+const require_Txt = require("./Txt-BnoSqxKE.cjs");
+const require_primitives_message_surface = require("./primitives/message-surface.cjs.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/ds/components/AttachmentCard/attachment-preview.tsx
+/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */
+function AttachmentPreview({ children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "relative block h-44 mask-b-from-45% mask-b-to-95%",
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute inset-x-0 bottom-0 h-28",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]" })
+			]
+		})]
+	});
+}
+// src/ds/components/AttachmentCard/attachment-card.tsx
+/** Sent-file presentation. Upload state and removal controls belong to the composer. */
+function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }) {
+	const className = require_utils.cn(require_primitives_message_surface.messageSurfaceStyle, "relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left", preview && "after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15", (onClick || href) && "cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors");
+	const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentPreview, { children: preview }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: require_utils.cn("flex min-w-0 items-center gap-2.5 px-3 py-2.5", preview && "absolute inset-x-0 bottom-0"),
+		children: [!preview && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground",
+			"aria-hidden": "true",
+			children: icon
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				as: "span",
+				variant: "body-sm",
+				className: "block truncate",
+				title: name,
+				children: name
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+				as: "span",
+				variant: "meta",
+				tone: "muted",
+				className: "block truncate",
+				children: typeLabel
+			})]
+		})]
+	})] });
+	if (onClick) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref: buttonRef,
+		type: "button",
+		className,
+		onClick,
+		"aria-label": `Preview ${name}`,
+		title: name,
+		children: content
+	});
+	if (href) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		className,
+		href,
+		target: "_blank",
+		rel: "noreferrer noopener",
+		"aria-label": `Open ${name}`,
+		title: name,
+		children: content
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		title: name,
+		children: content
+	});
+}
+Object.defineProperty(exports, "AttachmentCard", {
+	enumerable: true,
+	get: function() {
+		return AttachmentCard;
+	}
+});
+
+//# sourceMappingURL=AttachmentCard-B1fhYov_.cjs.map

package/dist/AttachmentCard-B1fhYov_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentCard-B1fhYov_.cjs","names":["cn","messageSurfaceStyle","_Fragment","Txt"],"sources":["../src/ds/components/AttachmentCard/attachment-preview.tsx","../src/ds/components/AttachmentCard/attachment-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */\nexport function AttachmentPreview({ children }: { children: ReactNode }) {\n  return (\n    <span className=\"relative block h-44 mask-b-from-45% mask-b-to-95%\">\n      {children}\n      {/* Fully opaque, overlapping bands replace sharp pixels as the blur radius increases.\n          Fading each layer across its entire height would leave sharp detail visible underneath. */}\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 bottom-0 h-28\">\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]\" />\n      </span>\n    </span>\n  );\n}\n","import type { ReactNode, Ref } from 'react';\nimport { Txt } from '../Txt';\nimport { AttachmentPreview } from './attachment-preview';\nimport { messageSurfaceStyle } from '@/ds/primitives/message-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface AttachmentCardProps {\n  name: string;\n  buttonRef?: Ref<HTMLButtonElement>;\n  typeLabel: string;\n  icon: ReactNode;\n  preview?: ReactNode;\n  onClick?: () => void;\n  href?: string;\n}\n\n/** Sent-file presentation. Upload state and removal controls belong to the composer. */\nexport function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }: AttachmentCardProps) {\n  const className = cn(\n    messageSurfaceStyle,\n    'relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left',\n    preview &&\n      'after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15',\n    (onClick || href) &&\n      'cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors',\n  );\n  const content = (\n    <>\n      {preview && <AttachmentPreview>{preview}</AttachmentPreview>}\n      <span className={cn('flex min-w-0 items-center gap-2.5 px-3 py-2.5', preview && 'absolute inset-x-0 bottom-0')}>\n        {!preview && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <Txt as=\"span\" variant=\"body-sm\" className=\"block truncate\" title={name}>\n            {name}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"block truncate\">\n            {typeLabel}\n          </Txt>\n        </span>\n      </span>\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        className={className}\n        onClick={onClick}\n        aria-label={`Preview ${name}`}\n        title={name}\n      >\n        {content}\n      </button>\n    );\n  }\n  if (href) {\n    return (\n      <a\n        className={className}\n        href={href}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        aria-label={`Open ${name}`}\n        title={name}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <div className={className} title={name}>\n      {content}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAGA,SAAgB,kBAAkB,EAAE,YAAqC;CACvE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,UAGD,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAAnC,UAAA;IACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,+HAAgI,CAAA;IAChJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAM,WAAU,0GAA2G,CAAA;GACvH;EACF,CAAA,CAAA;;AAEV;;;ACDA,SAAgB,eAAe,EAAE,MAAM,WAAW,MAAM,SAAS,SAAS,MAAM,aAAkC;CAChH,MAAM,YAAYA,cAAAA,GAChBC,mCAAAA,qBACA,4EACA,WACE,2IACD,WAAW,SACV,4JACJ;CACA,MAAM,UACJ,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA,CACG,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD,EAAA,UAAoB,QAA2B,CAAA,GAC3D,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;EAAM,WAAWF,cAAAA,GAAG,iDAAiD,WAAW,6BAA6B;EAA7G,UAAA,CACG,CAAC,WACA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;GAAM,WAAU;GAAyE,eAAY;GAClG,UAAA;EACG,CAAA,GAER,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACG,YAAAA,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAU,WAAU;IAAiB,OAAO;IAChE,UAAA;GACE,CAAA,GACL,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAO,MAAK;IAAQ,WAAU;IAClD,UAAA;GACE,CAAA,CACD;EACF,CAAA,CAAA;CACN,CAAA,CAAA,EAAA,CAAA;CAGJ,IAAI,SACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,KAAK;EACL,MAAK;EACM;EACF;EACT,cAAY,WAAW;EACvB,OAAO;EAEN,UAAA;CACK,CAAA;CAGZ,IAAI,MACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;EACa;EACL;EACN,QAAO;EACP,KAAI;EACJ,cAAY,QAAQ;EACpB,OAAO;EAEN,UAAA;CACA,CAAA;CAGP,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAgB;EAAW,OAAO;EAC/B,UAAA;CACE,CAAA;AAET"}

package/dist/AttachmentCard-lKP83CZ-.js

@@ -0,0 +1,76 @@
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { t as Txt } from "./Txt-BM6TVV_c.js";
+import { messageSurfaceStyle } from "./primitives/message-surface.es.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/ds/components/AttachmentCard/attachment-preview.tsx
+/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */
+function AttachmentPreview({ children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative block h-44 mask-b-from-45% mask-b-to-95%",
+		children: [children, /* @__PURE__ */ jsxs("span", {
+			"aria-hidden": "true",
+			className: "pointer-events-none absolute inset-x-0 bottom-0 h-28",
+			children: [
+				/* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]" }),
+				/* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs" }),
+				/* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm" }),
+				/* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg" }),
+				/* @__PURE__ */ jsx("span", { className: "absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]" })
+			]
+		})]
+	});
+}
+// src/ds/components/AttachmentCard/attachment-card.tsx
+/** Sent-file presentation. Upload state and removal controls belong to the composer. */
+function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }) {
+	const className = cn(messageSurfaceStyle, "relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left", preview && "after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15", (onClick || href) && "cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors");
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [preview && /* @__PURE__ */ jsx(AttachmentPreview, { children: preview }), /* @__PURE__ */ jsxs("span", {
+		className: cn("flex min-w-0 items-center gap-2.5 px-3 py-2.5", preview && "absolute inset-x-0 bottom-0"),
+		children: [!preview && /* @__PURE__ */ jsx("span", {
+			className: "flex size-5 shrink-0 items-center justify-center text-muted-foreground",
+			"aria-hidden": "true",
+			children: icon
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx(Txt, {
+				as: "span",
+				variant: "body-sm",
+				className: "block truncate",
+				title: name,
+				children: name
+			}), /* @__PURE__ */ jsx(Txt, {
+				as: "span",
+				variant: "meta",
+				tone: "muted",
+				className: "block truncate",
+				children: typeLabel
+			})]
+		})]
+	})] });
+	if (onClick) return /* @__PURE__ */ jsx("button", {
+		ref: buttonRef,
+		type: "button",
+		className,
+		onClick,
+		"aria-label": `Preview ${name}`,
+		title: name,
+		children: content
+	});
+	if (href) return /* @__PURE__ */ jsx("a", {
+		className,
+		href,
+		target: "_blank",
+		rel: "noreferrer noopener",
+		"aria-label": `Open ${name}`,
+		title: name,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		title: name,
+		children: content
+	});
+}
+export { AttachmentCard as t };
+
+//# sourceMappingURL=AttachmentCard-lKP83CZ-.js.map

package/dist/AttachmentCard-lKP83CZ-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentCard-lKP83CZ-.js","names":["_Fragment"],"sources":["../src/ds/components/AttachmentCard/attachment-preview.tsx","../src/ds/components/AttachmentCard/attachment-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\n/** Crossfade between fully blurred bands, then fade the image into the message surface for its caption. */\nexport function AttachmentPreview({ children }: { children: ReactNode }) {\n  return (\n    <span className=\"relative block h-44 mask-b-from-45% mask-b-to-95%\">\n      {children}\n      {/* Fully opaque, overlapping bands replace sharp pixels as the blur radius increases.\n          Fading each layer across its entire height would leave sharp detail visible underneath. */}\n      <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 bottom-0 h-28\">\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_15%,black_30%,transparent_45%)] backdrop-blur-[2px]\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_15%,black_30%,black_45%,transparent_60%)] backdrop-blur-xs\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_30%,black_45%,black_60%,transparent_75%)] backdrop-blur-sm\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_45%,black_60%,black_75%,transparent_90%)] backdrop-blur-lg\" />\n        <span className=\"absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent_60%,black_75%)] backdrop-blur-[32px]\" />\n      </span>\n    </span>\n  );\n}\n","import type { ReactNode, Ref } from 'react';\nimport { Txt } from '../Txt';\nimport { AttachmentPreview } from './attachment-preview';\nimport { messageSurfaceStyle } from '@/ds/primitives/message-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface AttachmentCardProps {\n  name: string;\n  buttonRef?: Ref<HTMLButtonElement>;\n  typeLabel: string;\n  icon: ReactNode;\n  preview?: ReactNode;\n  onClick?: () => void;\n  href?: string;\n}\n\n/** Sent-file presentation. Upload state and removal controls belong to the composer. */\nexport function AttachmentCard({ name, typeLabel, icon, preview, onClick, href, buttonRef }: AttachmentCardProps) {\n  const className = cn(\n    messageSurfaceStyle,\n    'relative isolate block w-64 max-w-full min-w-0 overflow-hidden text-left',\n    preview &&\n      'after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-[inherit] after:inset-ring-1 after:inset-ring-white/15',\n    (onClick || href) &&\n      'cursor-pointer hover:bg-fill-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus motion-safe:transition-colors',\n  );\n  const content = (\n    <>\n      {preview && <AttachmentPreview>{preview}</AttachmentPreview>}\n      <span className={cn('flex min-w-0 items-center gap-2.5 px-3 py-2.5', preview && 'absolute inset-x-0 bottom-0')}>\n        {!preview && (\n          <span className=\"flex size-5 shrink-0 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n            {icon}\n          </span>\n        )}\n        <span className=\"min-w-0 flex-1\">\n          <Txt as=\"span\" variant=\"body-sm\" className=\"block truncate\" title={name}>\n            {name}\n          </Txt>\n          <Txt as=\"span\" variant=\"meta\" tone=\"muted\" className=\"block truncate\">\n            {typeLabel}\n          </Txt>\n        </span>\n      </span>\n    </>\n  );\n\n  if (onClick) {\n    return (\n      <button\n        ref={buttonRef}\n        type=\"button\"\n        className={className}\n        onClick={onClick}\n        aria-label={`Preview ${name}`}\n        title={name}\n      >\n        {content}\n      </button>\n    );\n  }\n  if (href) {\n    return (\n      <a\n        className={className}\n        href={href}\n        target=\"_blank\"\n        rel=\"noreferrer noopener\"\n        aria-label={`Open ${name}`}\n        title={name}\n      >\n        {content}\n      </a>\n    );\n  }\n  return (\n    <div className={className} title={name}>\n      {content}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAGA,SAAgB,kBAAkB,EAAE,YAAqC;CACvE,OACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,UAGD,qBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GAAnC,UAAA;IACE,oBAAC,QAAD,EAAM,WAAU,+HAAgI,CAAA;IAChJ,oBAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,oBAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,oBAAC,QAAD,EAAM,WAAU,gIAAiI,CAAA;IACjJ,oBAAC,QAAD,EAAM,WAAU,0GAA2G,CAAA;GACvH;EACF,CAAA,CAAA;;AAEV;;;ACDA,SAAgB,eAAe,EAAE,MAAM,WAAW,MAAM,SAAS,SAAS,MAAM,aAAkC;CAChH,MAAM,YAAY,GAChB,qBACA,4EACA,WACE,2IACD,WAAW,SACV,4JACJ;CACA,MAAM,UACJ,qBAAAA,UAAA,EAAA,UAAA,CACG,WAAW,oBAAC,mBAAD,EAAA,UAAoB,QAA2B,CAAA,GAC3D,qBAAC,QAAD;EAAM,WAAW,GAAG,iDAAiD,WAAW,6BAA6B;EAA7G,UAAA,CACG,CAAC,WACA,oBAAC,QAAD;GAAM,WAAU;GAAyE,eAAY;GAClG,UAAA;EACG,CAAA,GAER,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAU,WAAU;IAAiB,OAAO;IAChE,UAAA;GACE,CAAA,GACL,oBAAC,KAAD;IAAK,IAAG;IAAO,SAAQ;IAAO,MAAK;IAAQ,WAAU;IAClD,UAAA;GACE,CAAA,CACD;EACF,CAAA,CAAA;CACN,CAAA,CAAA,EAAA,CAAA;CAGJ,IAAI,SACF,OACE,oBAAC,UAAD;EACE,KAAK;EACL,MAAK;EACM;EACF;EACT,cAAY,WAAW;EACvB,OAAO;EAEN,UAAA;CACK,CAAA;CAGZ,IAAI,MACF,OACE,oBAAC,KAAD;EACa;EACL;EACN,QAAO;EACP,KAAI;EACJ,cAAY,QAAQ;EACpB,OAAO;EAEN,UAAA;CACA,CAAA;CAGP,OACE,oBAAC,OAAD;EAAgB;EAAW,OAAO;EAC/B,UAAA;CACE,CAAA;AAET"}

package/dist/Avatar-Dj8aP7OI.js

@@ -0,0 +1,146 @@
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { controlStateColorTransition } from "./primitives/transitions.es.js";
+import { t as Txt } from "./Txt-BM6TVV_c.js";
+import { i as avatarTextClasses, n as avatarIconClasses, r as avatarSizeClasses, t as AvatarSizeContext } from "./avatar-size-DPNN8IVI.js";
+import { Children, useContext, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Avatar } from "@base-ui/react/avatar";
+// src/ds/components/Avatar/avatar-badge.tsx
+var toneClasses = {
+	neutral: "bg-fill-inverse text-background",
+	success: "bg-success-indicator text-background",
+	warning: "bg-warning-indicator text-background",
+	destructive: "bg-destructive-indicator text-background",
+	info: "bg-info-indicator text-background"
+};
+var badgeSizeClasses = {
+	xs: "min-h-1.5 min-w-1.5 [&>svg]:hidden",
+	inline: "min-h-1.5 min-w-1.5 [&>svg]:hidden",
+	sm: "min-h-2 min-w-2 [&>svg]:hidden",
+	md: "min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs",
+	lg: "min-h-3 min-w-3 [&>svg]:size-icon-xs",
+	control: "min-h-2.5 min-w-2.5 [&>svg]:size-icon-xs"
+};
+function AvatarBadge({ tone, className, children, ...props }) {
+	const size = useContext(AvatarSizeContext) ?? "sm";
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-slot": "avatar-badge",
+		className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 ring-card select-none", "[&>[data-slot=avatar]]:border-0 [&>[data-slot=avatar]]:after:hidden", "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:shadow-inset", tone ? toneClasses[tone] : "bg-card text-foreground", badgeSizeClasses[size], className),
+		children: /* @__PURE__ */ jsx(AvatarSizeContext.Provider, {
+			value: "xs",
+			children
+		})
+	});
+}
+// src/ds/components/Avatar/avatar-named.tsx
+function AvatarNamed({ src, name, size, interactive = false, color, textColor }) {
+	const contextSize = useContext(AvatarSizeContext);
+	const [failedSrc, setFailedSrc] = useState();
+	const resolvedSize = size ?? contextSize ?? "sm";
+	const initial = name.trim()[0]?.toUpperCase() ?? "A";
+	const showImage = Boolean(src) && failedSrc !== src;
+	const showFallbackTint = !showImage && Boolean(color);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar",
+		"data-size": resolvedSize,
+		className: cn(avatarSizeClasses[resolvedSize], "flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border", !showFallbackTint && "bg-fill", controlStateColorTransition, interactive && "cursor-pointer hover:border-border-hover"),
+		style: showFallbackTint ? { backgroundColor: color } : void 0,
+		children: showImage ? /* @__PURE__ */ jsx("img", {
+			src,
+			alt: name,
+			className: "size-full object-cover",
+			onError: () => setFailedSrc(src)
+		}) : /* @__PURE__ */ jsx(Txt, {
+			variant: resolvedSize === "xs" ? "meta" : "body",
+			tone: showFallbackTint ? void 0 : "muted",
+			className: "text-center",
+			style: showFallbackTint && textColor ? { color: textColor } : void 0,
+			children: initial
+		})
+	});
+}
+// src/ds/components/Avatar/avatar-root.tsx
+function AvatarRoot({ size, className, ...props }) {
+	const contextSize = useContext(AvatarSizeContext);
+	const resolvedSize = size ?? contextSize ?? "sm";
+	return /* @__PURE__ */ jsx(AvatarSizeContext.Provider, {
+		value: resolvedSize,
+		children: /* @__PURE__ */ jsx(Avatar.Root, {
+			...props,
+			"data-slot": "avatar",
+			"data-size": resolvedSize,
+			className: cn("relative inline-flex shrink-0 rounded-full select-none", "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border", avatarSizeClasses[resolvedSize], className)
+		})
+	});
+}
+// src/ds/components/Avatar/avatar-element.tsx
+function AvatarElement(props) {
+	if (props.name === void 0) return /* @__PURE__ */ jsx(AvatarRoot, { ...props });
+	return /* @__PURE__ */ jsx(AvatarNamed, { ...props });
+}
+// src/ds/components/Avatar/avatar-fallback.tsx
+function AvatarFallback({ className, ...props }) {
+	const size = useContext(AvatarSizeContext) ?? "sm";
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		...props,
+		"data-slot": "avatar-fallback",
+		className: cn("flex size-full items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground", avatarTextClasses[size], avatarIconClasses[size], className)
+	});
+}
+// src/ds/components/Avatar/avatar-group.tsx
+var groupSizeClasses = {
+	xs: "[--avatar-group-size:var(--spacing-icon-xs)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]",
+	inline: "[--avatar-group-size:var(--spacing-icon-md)] [--avatar-group-gap:1px] [--avatar-group-edge:0.5px]",
+	sm: "[--avatar-group-size:var(--spacing-avatar-sm)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+	md: "[--avatar-group-size:var(--spacing-avatar-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+	lg: "[--avatar-group-size:var(--spacing-avatar-lg)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]",
+	control: "[--avatar-group-size:var(--spacing-control-md)] [--avatar-group-gap:--spacing(0.5)] [--avatar-group-edge:1px]"
+};
+var overlapClasses = ["*:not-first:ml-[calc(var(--avatar-group-size)/-4)]", "*:not-first:[mask-image:radial-gradient(circle_at_calc(var(--avatar-group-size)*-0.25)_50%,transparent_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)),black_calc(var(--avatar-group-size)/2+var(--avatar-group-gap)+var(--avatar-group-edge)))]"];
+function AvatarGroup({ size = "sm", className, children, ...props }) {
+	const items = Children.toArray(children);
+	return /* @__PURE__ */ jsx(AvatarSizeContext.Provider, {
+		value: size,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			"data-slot": "avatar-group",
+			className: cn("flex items-center", groupSizeClasses[size], overlapClasses, className),
+			children: items.map((item, index) => /* @__PURE__ */ jsx("div", {
+				"data-slot": "avatar-group-item",
+				className: "flex",
+				style: { zIndex: items.length - index },
+				children: item
+			}, index))
+		})
+	});
+}
+// src/ds/components/Avatar/avatar-group-count.tsx
+function AvatarGroupCount({ className, ...props }) {
+	const size = useContext(AvatarSizeContext) ?? "sm";
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "avatar-group-count",
+		"data-size": size,
+		className: cn("relative flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground tabular-nums", "after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:border after:border-border", avatarSizeClasses[size], avatarTextClasses[size], avatarIconClasses[size], className)
+	});
+}
+// src/ds/components/Avatar/avatar-image.tsx
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		...props,
+		"data-slot": "avatar-image",
+		className: cn("size-full rounded-full object-cover", className)
+	});
+}
+// src/ds/components/Avatar/Avatar.tsx
+var Avatar$1 = Object.assign(AvatarElement, {
+	Image: AvatarImage,
+	Fallback: AvatarFallback,
+	Badge: AvatarBadge,
+	Group: AvatarGroup,
+	GroupCount: AvatarGroupCount
+});
+export { Avatar$1 as t };
+
+//# sourceMappingURL=Avatar-Dj8aP7OI.js.map