@handled-ai/design-system 0.9.28 → 0.11.0

package/dist/components/draft-feedback-inline.js

@@ -0,0 +1,153 @@
+"use client"
+
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  ThumbsUp,
+  ThumbsDown,
+  Check,
+  RefreshCw
+} from "lucide-react";
+const positivePills = ["Tone", "Personalization", "Length", "CTA", "Other"];
+const negativePills = ["Too formal", "Too casual", "Too long", "Missing context", "Wrong angle", "Factual error", "Other"];
+function DraftFeedbackInline({
+  initialDirection,
+  onRegenerateRequest,
+  onSubmitFeedback,
+  onDiscardRequest
+}) {
+  const [thumbState, setThumbState] = React.useState(initialDirection != null ? initialDirection : null);
+  const [selectedPills, setSelectedPills] = React.useState([]);
+  const [detailText, setDetailText] = React.useState("");
+  const [noted, setNoted] = React.useState(false);
+  const [regenerated, setRegenerated] = React.useState(false);
+  const togglePill = React.useCallback((pill) => {
+    setSelectedPills((prev) => prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]);
+  }, []);
+  const handleSubmit = React.useCallback(() => {
+    if (!thumbState) return;
+    onSubmitFeedback == null ? void 0 : onSubmitFeedback(thumbState, selectedPills, detailText);
+    setNoted(true);
+    setTimeout(() => {
+      setThumbState(null);
+      setSelectedPills([]);
+      setDetailText("");
+      setNoted(false);
+    }, 3e3);
+  }, [thumbState, selectedPills, detailText, onSubmitFeedback]);
+  const handleRegenerate = React.useCallback(() => {
+    if (!thumbState) return;
+    onRegenerateRequest == null ? void 0 : onRegenerateRequest(selectedPills, detailText);
+    setRegenerated(true);
+    setTimeout(() => {
+      setThumbState(null);
+      setSelectedPills([]);
+      setDetailText("");
+      setRegenerated(false);
+    }, 3e3);
+  }, [thumbState, selectedPills, detailText, onRegenerateRequest]);
+  const handleDiscard = React.useCallback(() => {
+    if (!thumbState) return;
+    onDiscardRequest == null ? void 0 : onDiscardRequest(selectedPills, detailText);
+  }, [thumbState, selectedPills, detailText, onDiscardRequest]);
+  if (noted) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200", children: [
+      /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-500" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Feedback recorded" })
+    ] });
+  }
+  if (regenerated) {
+    return /* @__PURE__ */ jsx("div", { className: "py-2 animate-in fade-in slide-in-from-top-1 duration-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800", children: [
+      /* @__PURE__ */ jsx(RefreshCw, { className: "w-3 h-3 text-indigo-500 animate-spin" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-indigo-600 dark:text-indigo-400", children: "Regenerating draft..." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground font-medium", children: "How's this draft?" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setThumbState(thumbState === "up" ? null : "up");
+              setSelectedPills([]);
+              setDetailText("");
+            },
+            className: `p-1.5 rounded transition-colors ${thumbState === "up" ? "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
+            children: /* @__PURE__ */ jsx(ThumbsUp, { className: "w-4 h-4", fill: thumbState === "up" ? "currentColor" : "none" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setThumbState(thumbState === "down" ? null : "down");
+              setSelectedPills([]);
+              setDetailText("");
+            },
+            className: `p-1.5 rounded transition-colors ${thumbState === "down" ? "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400" : "hover:bg-muted text-muted-foreground hover:text-foreground"}`,
+            children: /* @__PURE__ */ jsx(ThumbsDown, { className: "w-4 h-4", fill: thumbState === "down" ? "currentColor" : "none" })
+          }
+        )
+      ] })
+    ] }),
+    thumbState && /* @__PURE__ */ jsxs("div", { className: "pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mb-2 block font-medium", children: thumbState === "up" ? "What worked well?" : "What needs improvement?" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: (thumbState === "up" ? positivePills : negativePills).map((pill) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => togglePill(pill),
+            className: `px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${selectedPills.includes(pill) ? thumbState === "up" ? "bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800" : "bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800" : "bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground"}`,
+            children: pill
+          },
+          pill
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: detailText,
+          onChange: (e) => setDetailText(e.target.value),
+          placeholder: thumbState === "up" ? "Add specific praise (optional)..." : "Provide specific instructions (optional)...",
+          className: "w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 pt-1", children: thumbState === "down" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleRegenerate,
+            disabled: selectedPills.length === 0 && detailText.length === 0,
+            className: `flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 ${selectedPills.length > 0 || detailText.length > 0 ? "bg-foreground text-background hover:bg-foreground/90" : "bg-muted text-muted-foreground cursor-not-allowed"}`,
+            children: [
+              /* @__PURE__ */ jsx(RefreshCw, { className: "w-3 h-3" }),
+              "Regenerate draft"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: handleDiscard,
+            className: "flex-1 py-1.5 rounded-md text-xs font-medium transition-colors border bg-background text-foreground border-border hover:bg-muted/50 flex items-center justify-center gap-1.5",
+            children: "Discard draft"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleSubmit,
+          className: "flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors bg-foreground text-background hover:bg-foreground/90 border-transparent",
+          children: "Submit feedback"
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  DraftFeedbackInline
+};
+//# sourceMappingURL=draft-feedback-inline.js.map

package/dist/components/draft-feedback-inline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/draft-feedback-inline.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ThumbsUp,\n  ThumbsDown,\n  Check,\n  RefreshCw,\n} from \"lucide-react\"\n\n// ---------------------------------------------------------------------------\n// DraftFeedbackInline\n// ---------------------------------------------------------------------------\n\nconst positivePills = [\"Tone\", \"Personalization\", \"Length\", \"CTA\", \"Other\"]\nconst negativePills = [\"Too formal\", \"Too casual\", \"Too long\", \"Missing context\", \"Wrong angle\", \"Factual error\", \"Other\"]\n\nexport interface DraftFeedbackInlineProps {\n  initialDirection?: 'up' | 'down' | null\n  onRegenerateRequest?: (pills: string[], detail: string) => void\n  onSubmitFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n  onDiscardRequest?: (pills: string[], detail: string) => void\n}\n\nexport function DraftFeedbackInline({\n  initialDirection,\n  onRegenerateRequest,\n  onSubmitFeedback,\n  onDiscardRequest,\n}: DraftFeedbackInlineProps) {\n  const [thumbState, setThumbState] = React.useState<\"up\" | \"down\" | null>(initialDirection ?? null)\n  const [selectedPills, setSelectedPills] = React.useState<string[]>([])\n  const [detailText, setDetailText] = React.useState(\"\")\n  const [noted, setNoted] = React.useState(false)\n  const [regenerated, setRegenerated] = React.useState(false)\n\n  const togglePill = React.useCallback((pill: string) => {\n    setSelectedPills((prev) => (prev.includes(pill) ? prev.filter((p) => p !== pill) : [...prev, pill]))\n  }, [])\n\n  const handleSubmit = React.useCallback(() => {\n    if (!thumbState) return\n    onSubmitFeedback?.(thumbState, selectedPills, detailText)\n    setNoted(true)\n    setTimeout(() => {\n      setThumbState(null)\n      setSelectedPills([])\n      setDetailText(\"\")\n      setNoted(false)\n    }, 3000)\n  }, [thumbState, selectedPills, detailText, onSubmitFeedback])\n\n  const handleRegenerate = React.useCallback(() => {\n    if (!thumbState) return\n    onRegenerateRequest?.(selectedPills, detailText)\n    setRegenerated(true)\n    setTimeout(() => {\n      setThumbState(null)\n      setSelectedPills([])\n      setDetailText(\"\")\n      setRegenerated(false)\n    }, 3000)\n  }, [thumbState, selectedPills, detailText, onRegenerateRequest])\n\n  const handleDiscard = React.useCallback(() => {\n    if (!thumbState) return\n    onDiscardRequest?.(selectedPills, detailText)\n  }, [thumbState, selectedPills, detailText, onDiscardRequest])\n\n  if (noted) {\n    return (\n      <div className=\"flex items-center gap-1.5 py-1 animate-in fade-in slide-in-from-top-1 duration-200\">\n        <Check className=\"w-3.5 h-3.5 text-emerald-500\" />\n        <span className=\"text-xs text-muted-foreground\">Feedback recorded</span>\n      </div>\n    )\n  }\n\n  if (regenerated) {\n    return (\n      <div className=\"py-2 animate-in fade-in slide-in-from-top-1 duration-200\">\n        <div className=\"flex items-center gap-2 px-3 py-2 rounded-md bg-indigo-50 dark:bg-indigo-950/30 border border-indigo-200 dark:border-indigo-800\">\n          <RefreshCw className=\"w-3 h-3 text-indigo-500 animate-spin\" />\n          <span className=\"text-xs font-medium text-indigo-600 dark:text-indigo-400\">Regenerating draft...</span>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"space-y-0\">\n      <div className=\"flex items-center justify-between\">\n        <span className=\"text-sm text-foreground font-medium\">How&apos;s this draft?</span>\n        <div className=\"flex gap-1\">\n          <button\n            onClick={() => {\n              setThumbState(thumbState === \"up\" ? null : \"up\")\n              setSelectedPills([])\n              setDetailText(\"\")\n            }}\n            className={`p-1.5 rounded transition-colors ${\n              thumbState === \"up\"\n                ? \"bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400\"\n                : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n            }`}\n          >\n            <ThumbsUp className=\"w-4 h-4\" fill={thumbState === \"up\" ? \"currentColor\" : \"none\"} />\n          </button>\n          <button\n            onClick={() => {\n              setThumbState(thumbState === \"down\" ? null : \"down\")\n              setSelectedPills([])\n              setDetailText(\"\")\n            }}\n            className={`p-1.5 rounded transition-colors ${\n              thumbState === \"down\"\n                ? \"bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400\"\n                : \"hover:bg-muted text-muted-foreground hover:text-foreground\"\n            }`}\n          >\n            <ThumbsDown className=\"w-4 h-4\" fill={thumbState === \"down\" ? \"currentColor\" : \"none\"} />\n          </button>\n        </div>\n      </div>\n\n      {thumbState && (\n        <div className=\"pt-3 space-y-3 animate-in fade-in slide-in-from-top-2 duration-200\">\n          <div>\n            <span className=\"text-xs text-muted-foreground mb-2 block font-medium\">\n              {thumbState === \"up\" ? \"What worked well?\" : \"What needs improvement?\"}\n            </span>\n            <div className=\"flex flex-wrap gap-1.5\">\n              {(thumbState === \"up\" ? positivePills : negativePills).map((pill) => (\n                <button\n                  key={pill}\n                  onClick={() => togglePill(pill)}\n                  className={`px-2.5 py-1 rounded-full text-[11px] font-medium border transition-colors ${\n                    selectedPills.includes(pill)\n                      ? thumbState === \"up\"\n                        ? \"bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800\"\n                        : \"bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800\"\n                      : \"bg-background text-muted-foreground border-border hover:bg-muted/50 hover:text-foreground\"\n                  }`}\n                >\n                  {pill}\n                </button>\n              ))}\n            </div>\n          </div>\n\n          <textarea\n            value={detailText}\n            onChange={(e) => setDetailText(e.target.value)}\n            placeholder={thumbState === \"up\" ? \"Add specific praise (optional)...\" : \"Provide specific instructions (optional)...\"}\n            className=\"w-full text-xs bg-background border border-border rounded-md px-2.5 py-2 text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-1 focus:ring-indigo-500/50 focus:border-indigo-500/50 resize-none min-h-[60px]\"\n          />\n\n          <div className=\"flex items-center gap-2 pt-1\">\n            {thumbState === \"down\" ? (\n              <>\n                <button\n                  onClick={handleRegenerate}\n                  disabled={selectedPills.length === 0 && detailText.length === 0}\n                  className={`flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors flex items-center justify-center gap-1.5 ${\n                    selectedPills.length > 0 || detailText.length > 0\n                      ? \"bg-foreground text-background hover:bg-foreground/90\"\n                      : \"bg-muted text-muted-foreground cursor-not-allowed\"\n                  }`}\n                >\n                  <RefreshCw className=\"w-3 h-3\" />\n                  Regenerate draft\n                </button>\n                <button\n                  onClick={handleDiscard}\n                  className=\"flex-1 py-1.5 rounded-md text-xs font-medium transition-colors border bg-background text-foreground border-border hover:bg-muted/50 flex items-center justify-center gap-1.5\"\n                >\n                  Discard draft\n                </button>\n              </>\n            ) : (\n              <button\n                onClick={handleSubmit}\n                className=\"flex-1 py-1.5 rounded-md text-xs font-semibold transition-colors bg-foreground text-background hover:bg-foreground/90 border-transparent\"\n              >\n                Submit feedback\n              </button>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/empty-state.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+    icon?: React.ReactNode;
+    title?: string;
+    description: string;
+    action?: React.ReactNode;
+}
+declare function EmptyState({ icon, title, description, action, className, ...rest }: EmptyStateProps): React.JSX.Element;
+
+export { EmptyState, type EmptyStateProps };

package/dist/components/empty-state.js

@@ -0,0 +1,46 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function EmptyState(_a) {
+  var _b = _a, { icon, title, description, action, className } = _b, rest = __objRest(_b, ["icon", "title", "description", "action", "className"]);
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ "data-slot": "empty-state", className: cn("flex flex-col items-center justify-center py-24 gap-3", className) }, rest), { children: [
+    icon && /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-icon", className: "text-muted-foreground/30 [&>svg]:w-12 [&>svg]:h-12", children: icon }),
+    title && /* @__PURE__ */ jsx("p", { "data-slot": "empty-state-title", className: "text-sm font-medium text-muted-foreground", children: title }),
+    /* @__PURE__ */ jsx("p", { "data-slot": "empty-state-description", className: "text-xs text-muted-foreground", children: description }),
+    action && /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-action", className: "mt-3", children: action })
+  ] }));
+}
+export {
+  EmptyState
+};
+//# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\ninterface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: React.ReactNode\n  title?: string\n  description: string\n  action?: React.ReactNode\n}\n\nfunction EmptyState({ icon, title, description, action, className, ...rest }: EmptyStateProps) {\n  return (\n    <div data-slot=\"empty-state\" className={cn(\"flex flex-col items-center justify-center py-24 gap-3\", className)} {...rest}>\n      {icon && (\n        <div data-slot=\"empty-state-icon\" className=\"text-muted-foreground/30 [&>svg]:w-12 [&>svg]:h-12\">\n          {icon}\n        </div>\n      )}\n      {title && (\n        <p data-slot=\"empty-state-title\" className=\"text-sm font-medium text-muted-foreground\">\n          {title}\n        </p>\n      )}\n      <p data-slot=\"empty-state-description\" className=\"text-xs text-muted-foreground\">\n        {description}\n      </p>\n      {action && (\n        <div data-slot=\"empty-state-action\" className=\"mt-3\">\n          {action}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { EmptyState, type EmptyStateProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaI,SAEI,KAFJ;AAXJ,SAAS,UAAU;AASnB,SAAS,WAAW,IAA2E;AAA3E,eAAE,QAAM,OAAO,aAAa,QAAQ,UAXxD,IAWoB,IAAkD,iBAAlD,IAAkD,CAAhD,QAAM,SAAO,eAAa,UAAQ;AACtD,SACE,qBAAC,sCAAI,aAAU,eAAc,WAAW,GAAG,yDAAyD,SAAS,KAAO,OAAnH,EACE;AAAA,YACC,oBAAC,SAAI,aAAU,oBAAmB,WAAU,sDACzC,gBACH;AAAA,IAED,SACC,oBAAC,OAAE,aAAU,qBAAoB,WAAU,6CACxC,iBACH;AAAA,IAEF,oBAAC,OAAE,aAAU,2BAA0B,WAAU,iCAC9C,uBACH;AAAA,IACC,UACC,oBAAC,SAAI,aAAU,sBAAqB,WAAU,QAC3C,kBACH;AAAA,MAEJ;AAEJ;","names":[]}

package/dist/components/filter-chip.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+interface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: React.ReactNode;
+    active?: boolean;
+}
+declare function FilterChip({ icon, children, onClick, active, className, ...rest }: FilterChipProps): React.JSX.Element;
+
+export { FilterChip, type FilterChipProps };

package/dist/components/filter-chip.js

@@ -0,0 +1,67 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Filter, ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function FilterChip(_a) {
+  var _b = _a, { icon, children, onClick, active, className } = _b, rest = __objRest(_b, ["icon", "children", "onClick", "active", "className"]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      "data-slot": "filter-chip",
+      "data-active": active ? "" : void 0,
+      "aria-pressed": active,
+      onClick,
+      className: cn(
+        "text-[11px] px-2.5 py-1 rounded-md border border-border",
+        "text-muted-foreground hover:bg-muted/30 cursor-pointer",
+        "inline-flex items-center gap-1.5 transition-colors",
+        "data-[active]:border-foreground/20 data-[active]:text-foreground",
+        className
+      )
+    }, rest), {
+      children: [
+        icon != null ? icon : /* @__PURE__ */ jsx(Filter, { size: 10 }),
+        children,
+        /* @__PURE__ */ jsx(ChevronDown, { size: 10 })
+      ]
+    })
+  );
+}
+export {
+  FilterChip
+};
+//# sourceMappingURL=filter-chip.js.map

package/dist/components/filter-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/filter-chip.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Filter, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\ninterface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: React.ReactNode\n  active?: boolean\n}\n\nfunction FilterChip({ icon, children, onClick, active, className, ...rest }: FilterChipProps) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"filter-chip\"\n      data-active={active ? \"\" : undefined}\n      aria-pressed={active}\n      onClick={onClick}\n      className={cn(\n        \"text-[11px] px-2.5 py-1 rounded-md border border-border\",\n        \"text-muted-foreground hover:bg-muted/30 cursor-pointer\",\n        \"inline-flex items-center gap-1.5 transition-colors\",\n        \"data-[active]:border-foreground/20 data-[active]:text-foreground\",\n        className\n      )}\n      {...rest}\n    >\n      {icon ?? <Filter size={10} />}\n      {children}\n      <ChevronDown size={10} />\n    </button>\n  )\n}\n\nexport { FilterChip, type FilterChipProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcI,SAeW,KAfX;AAXJ,SAAS,QAAQ,mBAAmB;AAEpC,SAAS,UAAU;AAOnB,SAAS,WAAW,IAA0E;AAA1E,eAAE,QAAM,UAAU,SAAS,QAAQ,UAZvD,IAYoB,IAAiD,iBAAjD,IAAiD,CAA/C,QAAM,YAAU,WAAS,UAAQ;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,eAAa,SAAS,KAAK;AAAA,MAC3B,gBAAc;AAAA,MACd;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,OACI,OAbL;AAAA,MAeE;AAAA,8BAAQ,oBAAC,UAAO,MAAM,IAAI;AAAA,QAC1B;AAAA,QACD,oBAAC,eAAY,MAAM,IAAI;AAAA;AAAA;AAAA,EACzB;AAEJ;","names":[]}

package/dist/components/inline-banner.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+interface InlineBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "info" | "warning" | "destructive";
+    icon?: React.ReactNode;
+    onDismiss?: () => void;
+}
+declare function InlineBanner({ variant, icon, children, onDismiss, className, ...rest }: InlineBannerProps): React.JSX.Element;
+
+export { InlineBanner, type InlineBannerProps };

package/dist/components/inline-banner.js

@@ -0,0 +1,97 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Info, AlertTriangle, ShieldAlert, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+const variantConfig = {
+  info: {
+    icon: Info,
+    classes: "bg-status-info-bg border-status-info-border text-status-info-fg"
+  },
+  warning: {
+    icon: AlertTriangle,
+    classes: "bg-status-warning-bg border-status-warning-border text-status-warning-fg"
+  },
+  destructive: {
+    icon: ShieldAlert,
+    classes: "bg-status-destructive-bg border-status-destructive-border text-status-destructive-fg"
+  }
+};
+function InlineBanner(_a) {
+  var _b = _a, {
+    variant = "warning",
+    icon,
+    children,
+    onDismiss,
+    className
+  } = _b, rest = __objRest(_b, [
+    "variant",
+    "icon",
+    "children",
+    "onDismiss",
+    "className"
+  ]);
+  const config = variantConfig[variant];
+  const DefaultIcon = config.icon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "inline-banner",
+      "data-variant": variant,
+      role: variant === "destructive" || variant === "warning" ? "alert" : "status",
+      className: cn("rounded-lg border px-3 py-2 flex items-center gap-2", config.classes, className)
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsx("span", { "data-slot": "inline-banner-icon", className: "shrink-0", children: icon != null ? icon : /* @__PURE__ */ jsx(DefaultIcon, { size: 14 }) }),
+        /* @__PURE__ */ jsx("div", { "data-slot": "inline-banner-content", className: "flex-1 min-w-0", children }),
+        onDismiss && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            "data-slot": "inline-banner-dismiss",
+            onClick: onDismiss,
+            className: "shrink-0 p-0.5 rounded hover:bg-black/5 transition-colors",
+            children: /* @__PURE__ */ jsx(X, { size: 14, className: "opacity-60" })
+          }
+        )
+      ]
+    })
+  );
+}
+export {
+  InlineBanner
+};
+//# sourceMappingURL=inline-banner.js.map

package/dist/components/inline-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/inline-banner.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Info, AlertTriangle, ShieldAlert, X } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\ninterface InlineBannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"info\" | \"warning\" | \"destructive\"\n  icon?: React.ReactNode\n  onDismiss?: () => void\n}\n\nconst variantConfig = {\n  info: {\n    icon: Info,\n    classes: \"bg-status-info-bg border-status-info-border text-status-info-fg\",\n  },\n  warning: {\n    icon: AlertTriangle,\n    classes: \"bg-status-warning-bg border-status-warning-border text-status-warning-fg\",\n  },\n  destructive: {\n    icon: ShieldAlert,\n    classes: \"bg-status-destructive-bg border-status-destructive-border text-status-destructive-fg\",\n  },\n}\n\nfunction InlineBanner({\n  variant = \"warning\",\n  icon,\n  children,\n  onDismiss,\n  className,\n  ...rest\n}: InlineBannerProps) {\n  const config = variantConfig[variant]\n  const DefaultIcon = config.icon\n\n  return (\n    <div\n      data-slot=\"inline-banner\"\n      data-variant={variant}\n      role={variant === \"destructive\" || variant === \"warning\" ? \"alert\" : \"status\"}\n      className={cn(\"rounded-lg border px-3 py-2 flex items-center gap-2\", config.classes, className)}\n      {...rest}\n    >\n      <span data-slot=\"inline-banner-icon\" className=\"shrink-0\">\n        {icon ?? <DefaultIcon size={14} />}\n      </span>\n      <div data-slot=\"inline-banner-content\" className=\"flex-1 min-w-0\">\n        {children}\n      </div>\n      {onDismiss && (\n        <button\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          data-slot=\"inline-banner-dismiss\"\n          onClick={onDismiss}\n          className=\"shrink-0 p-0.5 rounded hover:bg-black/5 transition-colors\"\n        >\n          <X size={14} className=\"opacity-60\" />\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport { InlineBanner, type InlineBannerProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCI,SAQa,KARb;AArCJ,SAAS,MAAM,eAAe,aAAa,SAAS;AAEpD,SAAS,UAAU;AAQnB,MAAM,gBAAgB;AAAA,EACpB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;AAEA,SAAS,aAAa,IAOA;AAPA,eACpB;AAAA,cAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAjCF,IA4BsB,IAMjB,iBANiB,IAMjB;AAAA,IALH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,SAAS,cAAc,OAAO;AACpC,QAAM,cAAc,OAAO;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,MAAM,YAAY,iBAAiB,YAAY,YAAY,UAAU;AAAA,MACrE,WAAW,GAAG,uDAAuD,OAAO,SAAS,SAAS;AAAA,OAC1F,OALL;AAAA,MAOC;AAAA,4BAAC,UAAK,aAAU,sBAAqB,WAAU,YAC5C,gCAAQ,oBAAC,eAAY,MAAM,IAAI,GAClC;AAAA,QACA,oBAAC,SAAI,aAAU,yBAAwB,WAAU,kBAC9C,UACH;AAAA,QACC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,aAAU;AAAA,YACV,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,8BAAC,KAAE,MAAM,IAAI,WAAU,cAAa;AAAA;AAAA,QACtC;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/kbd-hint.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+declare function KbdHint({ className, ...props }: React.ComponentProps<"kbd">): React.JSX.Element;
+
+export { KbdHint };

package/dist/components/kbd-hint.js

@@ -0,0 +1,51 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+function KbdHint(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    __spreadValues({
+      "data-slot": "kbd-hint",
+      className: cn(
+        "inline-block text-[10px] leading-none text-muted-foreground/40 font-sans",
+        className
+      )
+    }, props)
+  );
+}
+export {
+  KbdHint
+};
+//# sourceMappingURL=kbd-hint.js.map

package/dist/components/kbd-hint.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/kbd-hint.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\n\nfunction KbdHint({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-hint\"\n      className={cn(\n        \"inline-block text-[10px] leading-none text-muted-foreground/40 font-sans\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { KbdHint }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AASI;AAPJ,SAAS,UAAU;AAEnB,SAAS,QAAQ,IAGe;AAHf,eACf;AAAA;AAAA,EALF,IAIiB,IAEZ,kBAFY,IAEZ;AAAA,IADH;AAAA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/rich-text-toolbar.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+type RichTextAction = "undo" | "redo" | "font" | "bold" | "italic" | "underline" | "align" | "list" | "delete";
+interface RichTextToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    onAction?: (action: RichTextAction) => void;
+}
+declare function RichTextToolbar({ onAction, className, ...rest }: RichTextToolbarProps): React.JSX.Element;
+
+export { type RichTextAction, RichTextToolbar, type RichTextToolbarProps };

package/dist/components/rich-text-toolbar.js

@@ -0,0 +1,103 @@
+"use client"
+
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Undo2, Redo2, Bold, Italic, Underline, AlignLeft, List, Trash2, ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function ToolbarButton({
+  action,
+  icon: Icon,
+  label,
+  extraClassName,
+  onAction
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": "rich-text-toolbar-button",
+      onClick: () => onAction == null ? void 0 : onAction(action),
+      "aria-label": label,
+      className: cn("p-1.5 rounded hover:bg-muted/50 cursor-pointer text-muted-foreground", extraClassName),
+      children: /* @__PURE__ */ jsx(Icon, { size: 14 })
+    }
+  );
+}
+function RichTextToolbar(_a) {
+  var _b = _a, { onAction, className } = _b, rest = __objRest(_b, ["onAction", "className"]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "rich-text-toolbar",
+      role: "toolbar",
+      "aria-label": "Rich text formatting",
+      className: cn("px-3 py-1.5 flex items-center justify-between", className)
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "undo", icon: Undo2, label: "Undo", onAction }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "redo", icon: Redo2, label: "Redo", onAction }),
+          /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              "data-slot": "rich-text-toolbar-button",
+              onClick: () => onAction == null ? void 0 : onAction("font"),
+              "aria-label": "Font family",
+              "aria-haspopup": "true",
+              className: "text-[11px] text-muted-foreground px-1.5 py-0.5 rounded hover:bg-muted/50 cursor-pointer flex items-center gap-1",
+              children: [
+                "Sans Serif",
+                /* @__PURE__ */ jsx(ChevronDown, { size: 10 })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "bold", icon: Bold, label: "Bold", onAction }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "italic", icon: Italic, label: "Italic", onAction }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "underline", icon: Underline, label: "Underline", onAction }),
+          /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-border mx-1", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "align", icon: AlignLeft, label: "Align left", onAction }),
+          /* @__PURE__ */ jsx(ToolbarButton, { action: "list", icon: List, label: "List", onAction })
+        ] }),
+        /* @__PURE__ */ jsx(ToolbarButton, { action: "delete", icon: Trash2, label: "Delete", extraClassName: "hover:text-destructive", onAction })
+      ]
+    })
+  );
+}
+export {
+  RichTextToolbar
+};
+//# sourceMappingURL=rich-text-toolbar.js.map

package/dist/components/rich-text-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/rich-text-toolbar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { Undo2, Redo2, Bold, Italic, Underline, AlignLeft, List, Trash2, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\ntype RichTextAction =\n  | \"undo\" | \"redo\"\n  | \"font\"\n  | \"bold\" | \"italic\" | \"underline\"\n  | \"align\" | \"list\"\n  | \"delete\"\n\ninterface RichTextToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  onAction?: (action: RichTextAction) => void\n}\n\nfunction ToolbarButton({\n  action,\n  icon: Icon,\n  label,\n  extraClassName,\n  onAction,\n}: {\n  action: RichTextAction\n  icon: LucideIcon\n  label: string\n  extraClassName?: string\n  onAction?: (action: RichTextAction) => void\n}) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"rich-text-toolbar-button\"\n      onClick={() => onAction?.(action)}\n      aria-label={label}\n      className={cn(\"p-1.5 rounded hover:bg-muted/50 cursor-pointer text-muted-foreground\", extraClassName)}\n    >\n      <Icon size={14} />\n    </button>\n  )\n}\n\nfunction RichTextToolbar({ onAction, className, ...rest }: RichTextToolbarProps) {\n  return (\n    <div\n      data-slot=\"rich-text-toolbar\"\n      role=\"toolbar\"\n      aria-label=\"Rich text formatting\"\n      className={cn(\"px-3 py-1.5 flex items-center justify-between\", className)}\n      {...rest}\n    >\n      <div className=\"flex items-center gap-0.5\">\n        <ToolbarButton action=\"undo\" icon={Undo2} label=\"Undo\" onAction={onAction} />\n        <ToolbarButton action=\"redo\" icon={Redo2} label=\"Redo\" onAction={onAction} />\n\n        <div className=\"w-px h-4 bg-border mx-1\" aria-hidden=\"true\" />\n\n        <button\n          type=\"button\"\n          data-slot=\"rich-text-toolbar-button\"\n          onClick={() => onAction?.(\"font\")}\n          aria-label=\"Font family\"\n          aria-haspopup=\"true\"\n          className=\"text-[11px] text-muted-foreground px-1.5 py-0.5 rounded hover:bg-muted/50 cursor-pointer flex items-center gap-1\"\n        >\n          Sans Serif\n          <ChevronDown size={10} />\n        </button>\n\n        <div className=\"w-px h-4 bg-border mx-1\" aria-hidden=\"true\" />\n\n        <ToolbarButton action=\"bold\" icon={Bold} label=\"Bold\" onAction={onAction} />\n        <ToolbarButton action=\"italic\" icon={Italic} label=\"Italic\" onAction={onAction} />\n        <ToolbarButton action=\"underline\" icon={Underline} label=\"Underline\" onAction={onAction} />\n\n        <div className=\"w-px h-4 bg-border mx-1\" aria-hidden=\"true\" />\n\n        <ToolbarButton action=\"align\" icon={AlignLeft} label=\"Align left\" onAction={onAction} />\n        <ToolbarButton action=\"list\" icon={List} label=\"List\" onAction={onAction} />\n      </div>\n\n      <ToolbarButton action=\"delete\" icon={Trash2} label=\"Delete\" extraClassName=\"hover:text-destructive\" onAction={onAction} />\n    </div>\n  )\n}\n\nexport { RichTextToolbar, type RichTextToolbarProps, type RichTextAction }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCM,cAoBE,YApBF;AApCN,SAAS,OAAO,OAAO,MAAM,QAAQ,WAAW,WAAW,MAAM,QAAQ,mBAAmB;AAE5F,SAAS,UAAU;AAanB,SAAS,cAAc;AAAA,EACrB;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,SAAS,MAAM,qCAAW;AAAA,MAC1B,cAAY;AAAA,MACZ,WAAW,GAAG,wEAAwE,cAAc;AAAA,MAEpG,8BAAC,QAAK,MAAM,IAAI;AAAA;AAAA,EAClB;AAEJ;AAEA,SAAS,gBAAgB,IAAwD;AAAxD,eAAE,YAAU,UA7CrC,IA6CyB,IAA0B,iBAA1B,IAA0B,CAAxB,YAAU;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW,GAAG,iDAAiD,SAAS;AAAA,OACpE,OALL;AAAA,MAOC;AAAA,6BAAC,SAAI,WAAU,6BACb;AAAA,8BAAC,iBAAc,QAAO,QAAO,MAAM,OAAO,OAAM,QAAO,UAAoB;AAAA,UAC3E,oBAAC,iBAAc,QAAO,QAAO,MAAM,OAAO,OAAM,QAAO,UAAoB;AAAA,UAE3E,oBAAC,SAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,UAE5D;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,aAAU;AAAA,cACV,SAAS,MAAM,qCAAW;AAAA,cAC1B,cAAW;AAAA,cACX,iBAAc;AAAA,cACd,WAAU;AAAA,cACX;AAAA;AAAA,gBAEC,oBAAC,eAAY,MAAM,IAAI;AAAA;AAAA;AAAA,UACzB;AAAA,UAEA,oBAAC,SAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,UAE5D,oBAAC,iBAAc,QAAO,QAAO,MAAM,MAAM,OAAM,QAAO,UAAoB;AAAA,UAC1E,oBAAC,iBAAc,QAAO,UAAS,MAAM,QAAQ,OAAM,UAAS,UAAoB;AAAA,UAChF,oBAAC,iBAAc,QAAO,aAAY,MAAM,WAAW,OAAM,aAAY,UAAoB;AAAA,UAEzF,oBAAC,SAAI,WAAU,2BAA0B,eAAY,QAAO;AAAA,UAE5D,oBAAC,iBAAc,QAAO,SAAQ,MAAM,WAAW,OAAM,cAAa,UAAoB;AAAA,UACtF,oBAAC,iBAAc,QAAO,QAAO,MAAM,MAAM,OAAM,QAAO,UAAoB;AAAA,WAC5E;AAAA,QAEA,oBAAC,iBAAc,QAAO,UAAS,MAAM,QAAQ,OAAM,UAAS,gBAAe,0BAAyB,UAAoB;AAAA;AAAA;AAAA,EAC1H;AAEJ;","names":[]}