@handled-ai/design-system 0.9.28 → 0.11.0

package/dist/components/account-contacts-popover.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { SuggestedContact, SuggestedActionsIconMap } from './suggested-actions.js';
+
+declare function BrandIcon({ src, alt, className }: {
+    src: string;
+    alt: string;
+    className?: string;
+}): React.JSX.Element;
+interface AccountContactsPopoverProps {
+    contacts: SuggestedContact[];
+    onSelect: (contact: SuggestedContact) => void;
+    onSelectTo?: (contact: SuggestedContact) => void;
+    onSelectCc?: (contact: SuggestedContact) => void;
+    onSelectBcc?: (contact: SuggestedContact) => void;
+    onViewAll?: () => void;
+    onOpenRecentActivity?: () => void;
+    trigger: React.ReactNode;
+    iconMap?: SuggestedActionsIconMap;
+}
+declare function AccountContactsPopover({ contacts, onSelect, onSelectTo, onSelectCc, onSelectBcc, onViewAll, onOpenRecentActivity, trigger, iconMap, }: AccountContactsPopoverProps): React.JSX.Element;
+
+export { AccountContactsPopover, type AccountContactsPopoverProps, BrandIcon };

package/dist/components/account-contacts-popover.js

@@ -0,0 +1,180 @@
+"use client"
+
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Clock,
+  ExternalLink
+} from "lucide-react";
+function BrandIcon({ src, alt, className }) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className: `${className != null ? className : ""} object-contain`,
+      draggable: false
+    }
+  );
+}
+function AccountContactsPopover({
+  contacts,
+  onSelect,
+  onSelectTo,
+  onSelectCc,
+  onSelectBcc,
+  onViewAll,
+  onOpenRecentActivity,
+  trigger,
+  iconMap
+}) {
+  const [open, setOpen] = React.useState(false);
+  const triggerRef = React.useRef(null);
+  const [popoverStyle, setPopoverStyle] = React.useState({});
+  React.useEffect(() => {
+    if (open && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const popoverWidth = Math.min(448, window.innerWidth - 32);
+      let left = rect.right - popoverWidth;
+      if (left < 16) left = 16;
+      if (left + popoverWidth > window.innerWidth - 16) left = window.innerWidth - 16 - popoverWidth;
+      setPopoverStyle({ position: "fixed", top: rect.bottom + 4, left });
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: () => setOpen(!open), children: trigger }),
+    open && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setOpen(false) }),
+      /* @__PURE__ */ jsxs("div", { style: popoverStyle, className: "fixed bg-background border border-border rounded-lg shadow-xl z-50 w-[28rem] max-w-[calc(100vw-2rem)] py-2 animate-in fade-in slide-in-from-top-1 duration-150", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide", children: "Account Contacts" }),
+        /* @__PURE__ */ jsx("div", { className: "max-h-48 overflow-y-auto", children: contacts.map((c, i) => {
+          var _a, _b, _c, _d, _e, _f;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "button",
+              onClick: () => {
+                (onSelectTo != null ? onSelectTo : onSelect)(c);
+                setOpen(false);
+              },
+              className: "flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0", children: c.name.split(" ").map((n) => n[0]).join("") }),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
+                  /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-foreground", children: c.name }),
+                  /* @__PURE__ */ jsxs("div", { className: "truncate text-xs text-muted-foreground leading-tight", children: [
+                    c.role,
+                    " \xB7 ",
+                    (_f = (_e = (_c = (_b = c.email) != null ? _b : (_a = c.emails) == null ? void 0 : _a[0]) != null ? _c : c.phone) != null ? _e : (_d = c.phones) == null ? void 0 : _d[0]) != null ? _f : ""
+                  ] }),
+                  c.lastActivity && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onOpenRecentActivity == null ? void 0 : onOpenRecentActivity();
+                        setOpen(false);
+                      },
+                      className: "mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
+                      children: [
+                        /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3 shrink-0" }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 font-medium", children: "Last activity" }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground/60", children: "\xB7" }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: c.lastActivity.date }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground/60", children: "\xB7" }),
+                        /* @__PURE__ */ jsx("span", { className: "truncate capitalize", children: c.lastActivity.type })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "ml-2 flex items-center gap-1.5 shrink-0", children: [
+                  onSelectTo && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onSelectTo(c);
+                        setOpen(false);
+                      },
+                      className: "h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40",
+                      children: "To"
+                    }
+                  ),
+                  onSelectCc && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onSelectCc(c);
+                        setOpen(false);
+                      },
+                      className: "h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40",
+                      children: "Cc"
+                    }
+                  ),
+                  onSelectBcc && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onSelectBcc(c);
+                        setOpen(false);
+                      },
+                      className: "h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40",
+                      children: "Bcc"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        if (c.salesforceUrl) {
+                          window.open(c.salesforceUrl, "_blank", "noopener,noreferrer");
+                        } else {
+                          onViewAll == null ? void 0 : onViewAll();
+                        }
+                      },
+                      className: "h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background hover:bg-muted/40 transition-colors shrink-0",
+                      "aria-label": `Open ${c.name} in Salesforce`,
+                      children: (iconMap == null ? void 0 : iconMap.salesforce) ? /* @__PURE__ */ jsx(BrandIcon, { src: iconMap.salesforce, alt: "Salesforce", className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(ExternalLink, { className: "w-3.5 h-3.5 text-muted-foreground" })
+                    }
+                  )
+                ] })
+              ]
+            },
+            i
+          );
+        }) }),
+        onViewAll && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "h-px bg-border mx-3 my-1" }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => {
+                onViewAll();
+                setOpen(false);
+              },
+              className: "flex items-center gap-2 w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3" }),
+                "View all contacts"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+export {
+  AccountContactsPopover,
+  BrandIcon
+};
+//# sourceMappingURL=account-contacts-popover.js.map

package/dist/components/account-contacts-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/account-contacts-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Clock,\n  ExternalLink,\n} from \"lucide-react\"\nimport type { SuggestedContact, SuggestedActionsIconMap } from \"./suggested-actions\"\n\n// ---------------------------------------------------------------------------\n// BrandIcon\n// ---------------------------------------------------------------------------\n\nexport function BrandIcon({ src, alt, className }: { src: string; alt: string; className?: string }) {\n  return (\n    <img\n      src={src}\n      alt={alt}\n      className={`${className ?? \"\"} object-contain`}\n      draggable={false}\n    />\n  )\n}\n\n// ---------------------------------------------------------------------------\n// AccountContactsPopover\n// ---------------------------------------------------------------------------\n\nexport interface AccountContactsPopoverProps {\n  contacts: SuggestedContact[]\n  onSelect: (contact: SuggestedContact) => void\n  onSelectTo?: (contact: SuggestedContact) => void\n  onSelectCc?: (contact: SuggestedContact) => void\n  onSelectBcc?: (contact: SuggestedContact) => void\n  onViewAll?: () => void\n  onOpenRecentActivity?: () => void\n  trigger: React.ReactNode\n  iconMap?: SuggestedActionsIconMap\n}\n\nexport function AccountContactsPopover({\n  contacts,\n  onSelect,\n  onSelectTo,\n  onSelectCc,\n  onSelectBcc,\n  onViewAll,\n  onOpenRecentActivity,\n  trigger,\n  iconMap,\n}: AccountContactsPopoverProps) {\n  const [open, setOpen] = React.useState(false)\n  const triggerRef = React.useRef<HTMLDivElement>(null)\n  const [popoverStyle, setPopoverStyle] = React.useState<React.CSSProperties>({})\n\n  React.useEffect(() => {\n    if (open && triggerRef.current) {\n      const rect = triggerRef.current.getBoundingClientRect()\n      const popoverWidth = Math.min(448, window.innerWidth - 32)\n      let left = rect.right - popoverWidth\n      if (left < 16) left = 16\n      if (left + popoverWidth > window.innerWidth - 16) left = window.innerWidth - 16 - popoverWidth\n      setPopoverStyle({ position: \"fixed\", top: rect.bottom + 4, left })\n    }\n  }, [open])\n\n  return (\n    <div>\n      <div ref={triggerRef} onClick={() => setOpen(!open)}>{trigger}</div>\n      {open && (\n        <>\n          <div className=\"fixed inset-0 z-40\" onClick={() => setOpen(false)} />\n          <div style={popoverStyle} className=\"fixed bg-background border border-border rounded-lg shadow-xl z-50 w-[28rem] max-w-[calc(100vw-2rem)] py-2 animate-in fade-in slide-in-from-top-1 duration-150\">\n            <div className=\"px-3 py-1.5 text-[11px] font-medium text-muted-foreground/60 uppercase tracking-wide\">\n              Account Contacts\n            </div>\n            <div className=\"max-h-48 overflow-y-auto\">\n              {contacts.map((c, i) => (\n                <div\n                  key={i}\n                  role=\"button\"\n                  onClick={() => { (onSelectTo ?? onSelect)(c); setOpen(false) }}\n                  className=\"flex items-center gap-3 w-full px-3 py-2 text-left hover:bg-muted/50 transition-colors cursor-pointer\"\n                >\n                  <div className=\"w-7 h-7 rounded-full bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground shrink-0\">\n                    {c.name.split(\" \").map((n) => n[0]).join(\"\")}\n                  </div>\n                  <div className=\"flex-1 min-w-0 overflow-hidden\">\n                    <div className=\"truncate text-sm font-medium text-foreground\">{c.name}</div>\n                    <div className=\"truncate text-xs text-muted-foreground leading-tight\">\n                      {c.role} · {c.email ?? c.emails?.[0] ?? c.phone ?? c.phones?.[0] ?? \"\"}\n                    </div>\n                    {c.lastActivity && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onOpenRecentActivity?.()\n                          setOpen(false)\n                        }}\n                        className=\"mt-1.5 flex max-w-full items-center gap-1.5 overflow-hidden rounded-md border border-border/70 bg-muted/30 px-2 py-1 text-[11px] text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n                      >\n                        <Clock className=\"w-3 h-3 shrink-0\" />\n                        <span className=\"shrink-0 font-medium\">Last activity</span>\n                        <span className=\"shrink-0 text-muted-foreground/60\">·</span>\n                        <span className=\"shrink-0\">{c.lastActivity.date}</span>\n                        <span className=\"shrink-0 text-muted-foreground/60\">·</span>\n                        <span className=\"truncate capitalize\">{c.lastActivity.type}</span>\n                      </button>\n                    )}\n                  </div>\n                  <div className=\"ml-2 flex items-center gap-1.5 shrink-0\">\n                    {onSelectTo && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectTo(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        To\n                      </button>\n                    )}\n                    {onSelectCc && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectCc(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        Cc\n                      </button>\n                    )}\n                    {onSelectBcc && (\n                      <button\n                        type=\"button\"\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onSelectBcc(c)\n                          setOpen(false)\n                        }}\n                        className=\"h-6 rounded border border-border bg-background px-1.5 text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                      >\n                        Bcc\n                      </button>\n                    )}\n                    <button\n                      type=\"button\"\n                      onClick={(e) => {\n                        e.stopPropagation()\n                        if (c.salesforceUrl) {\n                          window.open(c.salesforceUrl, \"_blank\", \"noopener,noreferrer\")\n                        } else {\n                          onViewAll?.()\n                        }\n                      }}\n                      className=\"h-7 w-7 inline-flex items-center justify-center rounded-md border border-border bg-background hover:bg-muted/40 transition-colors shrink-0\"\n                      aria-label={`Open ${c.name} in Salesforce`}\n                    >\n                      {iconMap?.salesforce ? (\n                        <BrandIcon src={iconMap.salesforce} alt=\"Salesforce\" className=\"w-3.5 h-3.5\" />\n                      ) : (\n                        <ExternalLink className=\"w-3.5 h-3.5 text-muted-foreground\" />\n                      )}\n                    </button>\n                  </div>\n                </div>\n              ))}\n            </div>\n            {onViewAll && (\n              <>\n                <div className=\"h-px bg-border mx-3 my-1\" />\n                <button\n                  onClick={() => { onViewAll(); setOpen(false) }}\n                  className=\"flex items-center gap-2 w-full px-3 py-2 text-left text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n                >\n                  <ExternalLink className=\"w-3 h-3\" />\n                  View all contacts\n                </button>\n              </>\n            )}\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/components/badge.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
+    variant?: "default" | "outline" | "link" | "secondary" | "destructive" | "ghost" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/button.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    variant?: "default" | "outline" | "link" | "secondary" | "destructive" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/components/compliance-badge.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+type ComplianceStatus = "verified" | "pending" | "changed_since_verified" | "never_verified";
+interface ComplianceBadgeProps extends React.HTMLAttributes<HTMLElement> {
+    status: ComplianceStatus;
+    variant?: "line" | "pill";
+}
+declare function ComplianceBadge({ status, variant, className, ...rest }: ComplianceBadgeProps): React.JSX.Element;
+
+export { ComplianceBadge, type ComplianceBadgeProps, type ComplianceStatus };

package/dist/components/compliance-badge.js

@@ -0,0 +1,95 @@
+"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 { Check, Clock, AlertTriangle, Minus } from "lucide-react";
+import { cn } from "../lib/utils.js";
+const statusConfig = {
+  verified: {
+    line: { icon: Check, label: "Compliance verified", classes: "text-status-active-fg" },
+    pill: { icon: Check, label: "Verified", classes: "bg-status-active-bg text-status-active-fg" }
+  },
+  pending: {
+    line: { icon: Clock, label: "Pending compliance review", classes: "text-status-pending-fg" },
+    pill: { icon: AlertTriangle, label: "Pending review", classes: "bg-status-pending-bg text-status-pending-fg" }
+  },
+  changed_since_verified: {
+    line: { icon: AlertTriangle, label: "Changed since last verification", classes: "text-status-warning-fg" },
+    pill: { icon: AlertTriangle, label: "Changed", classes: "bg-status-warning-bg text-status-warning-fg" }
+  },
+  never_verified: {
+    line: { icon: Minus, label: "Never verified", classes: "text-muted-foreground" },
+    pill: { icon: Minus, label: "Never verified", classes: "bg-muted text-muted-foreground" }
+  }
+};
+function ComplianceBadge(_a) {
+  var _b = _a, { status, variant = "line", className } = _b, rest = __objRest(_b, ["status", "variant", "className"]);
+  const config = statusConfig[status][variant];
+  const Icon = config.icon;
+  const iconSize = variant === "line" ? 12 : 10;
+  if (variant === "pill") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      __spreadProps(__spreadValues({
+        "data-slot": "compliance-badge",
+        "data-status": status,
+        "data-variant": "pill",
+        className: cn("text-[10px] px-2 py-0.5 rounded-full inline-flex w-fit items-center gap-1", config.classes, className)
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx(Icon, { size: iconSize }),
+          /* @__PURE__ */ jsx("span", { children: config.label })
+        ]
+      })
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "compliance-badge",
+      "data-status": status,
+      "data-variant": "line",
+      className: cn("text-xs inline-flex w-fit items-center gap-1.5", config.classes, className)
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsx(Icon, { size: iconSize }),
+        /* @__PURE__ */ jsx("span", { children: config.label })
+      ]
+    })
+  );
+}
+export {
+  ComplianceBadge
+};
+//# sourceMappingURL=compliance-badge.js.map

package/dist/components/compliance-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/compliance-badge.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Clock, AlertTriangle, Minus } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\ntype ComplianceStatus = \"verified\" | \"pending\" | \"changed_since_verified\" | \"never_verified\"\n\ninterface ComplianceBadgeProps extends React.HTMLAttributes<HTMLElement> {\n  status: ComplianceStatus\n  variant?: \"line\" | \"pill\"\n}\n\nconst statusConfig = {\n  verified: {\n    line: { icon: Check, label: \"Compliance verified\", classes: \"text-status-active-fg\" },\n    pill: { icon: Check, label: \"Verified\", classes: \"bg-status-active-bg text-status-active-fg\" },\n  },\n  pending: {\n    line: { icon: Clock, label: \"Pending compliance review\", classes: \"text-status-pending-fg\" },\n    pill: { icon: AlertTriangle, label: \"Pending review\", classes: \"bg-status-pending-bg text-status-pending-fg\" },\n  },\n  changed_since_verified: {\n    line: { icon: AlertTriangle, label: \"Changed since last verification\", classes: \"text-status-warning-fg\" },\n    pill: { icon: AlertTriangle, label: \"Changed\", classes: \"bg-status-warning-bg text-status-warning-fg\" },\n  },\n  never_verified: {\n    line: { icon: Minus, label: \"Never verified\", classes: \"text-muted-foreground\" },\n    pill: { icon: Minus, label: \"Never verified\", classes: \"bg-muted text-muted-foreground\" },\n  },\n}\n\nfunction ComplianceBadge({ status, variant = \"line\", className, ...rest }: ComplianceBadgeProps) {\n  const config = statusConfig[status][variant]\n  const Icon = config.icon\n  const iconSize = variant === \"line\" ? 12 : 10\n\n  if (variant === \"pill\") {\n    return (\n      <span\n        data-slot=\"compliance-badge\"\n        data-status={status}\n        data-variant=\"pill\"\n        className={cn(\"text-[10px] px-2 py-0.5 rounded-full inline-flex w-fit items-center gap-1\", config.classes, className)}\n        {...rest}\n      >\n        <Icon size={iconSize} />\n        <span>{config.label}</span>\n      </span>\n    )\n  }\n\n  return (\n    <div\n      data-slot=\"compliance-badge\"\n      data-status={status}\n      data-variant=\"line\"\n      className={cn(\"text-xs inline-flex w-fit items-center gap-1.5\", config.classes, className)}\n      {...rest}\n    >\n      <Icon size={iconSize} />\n      <span>{config.label}</span>\n    </div>\n  )\n}\n\nexport { ComplianceBadge, type ComplianceBadgeProps, type ComplianceStatus }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCM,SAOE,KAPF;AArCN,SAAS,OAAO,OAAO,eAAe,aAAa;AAEnD,SAAS,UAAU;AASnB,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,IACR,MAAM,EAAE,MAAM,OAAO,OAAO,uBAAuB,SAAS,wBAAwB;AAAA,IACpF,MAAM,EAAE,MAAM,OAAO,OAAO,YAAY,SAAS,4CAA4C;AAAA,EAC/F;AAAA,EACA,SAAS;AAAA,IACP,MAAM,EAAE,MAAM,OAAO,OAAO,6BAA6B,SAAS,yBAAyB;AAAA,IAC3F,MAAM,EAAE,MAAM,eAAe,OAAO,kBAAkB,SAAS,8CAA8C;AAAA,EAC/G;AAAA,EACA,wBAAwB;AAAA,IACtB,MAAM,EAAE,MAAM,eAAe,OAAO,mCAAmC,SAAS,yBAAyB;AAAA,IACzG,MAAM,EAAE,MAAM,eAAe,OAAO,WAAW,SAAS,8CAA8C;AAAA,EACxG;AAAA,EACA,gBAAgB;AAAA,IACd,MAAM,EAAE,MAAM,OAAO,OAAO,kBAAkB,SAAS,wBAAwB;AAAA,IAC/E,MAAM,EAAE,MAAM,OAAO,OAAO,kBAAkB,SAAS,iCAAiC;AAAA,EAC1F;AACF;AAEA,SAAS,gBAAgB,IAAwE;AAAxE,eAAE,UAAQ,UAAU,QAAQ,UAjCrD,IAiCyB,IAA0C,iBAA1C,IAA0C,CAAxC,UAAQ,WAAkB;AACnD,QAAM,SAAS,aAAa,MAAM,EAAE,OAAO;AAC3C,QAAM,OAAO,OAAO;AACpB,QAAM,WAAW,YAAY,SAAS,KAAK;AAE3C,MAAI,YAAY,QAAQ;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAa;AAAA,QACb,gBAAa;AAAA,QACb,WAAW,GAAG,6EAA6E,OAAO,SAAS,SAAS;AAAA,SAChH,OALL;AAAA,QAOC;AAAA,8BAAC,QAAK,MAAM,UAAU;AAAA,UACtB,oBAAC,UAAM,iBAAO,OAAM;AAAA;AAAA;AAAA,IACtB;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAa;AAAA,MACb,gBAAa;AAAA,MACb,WAAW,GAAG,kDAAkD,OAAO,SAAS,SAAS;AAAA,OACrF,OALL;AAAA,MAOC;AAAA,4BAAC,QAAK,MAAM,UAAU;AAAA,QACtB,oBAAC,UAAM,iBAAO,OAAM;AAAA;AAAA;AAAA,EACtB;AAEJ;","names":[]}

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+interface ContactChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+    name: string;
+    email?: string;
+    verified?: boolean;
+    onConfirm?: () => void;
+    onRemove?: () => void;
+}
+declare function ContactChip({ name, email, verified, onConfirm, onRemove, className, ...rest }: ContactChipProps): React.JSX.Element;
+
+export { ContactChip, type ContactChipProps };

package/dist/components/contact-chip.js

@@ -0,0 +1,98 @@
+"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 { X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function ContactChip(_a) {
+  var _b = _a, {
+    name,
+    email,
+    verified = true,
+    onConfirm,
+    onRemove,
+    className
+  } = _b, rest = __objRest(_b, [
+    "name",
+    "email",
+    "verified",
+    "onConfirm",
+    "onRemove",
+    "className"
+  ]);
+  const isVerified = verified !== false;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    __spreadProps(__spreadValues({
+      "data-slot": "contact-chip",
+      "data-verified": isVerified ? "true" : "false",
+      className: cn(
+        "inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs",
+        isVerified ? "border border-border bg-background" : "border border-status-warning-border bg-status-warning-bg",
+        className
+      )
+    }, rest), {
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: name }),
+        email && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: email }),
+        !isVerified && onConfirm && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "contact-chip-confirm",
+            onClick: onConfirm,
+            "aria-label": `Confirm ${name}`,
+            className: "text-[10px] px-1.5 py-0 rounded bg-status-warning-border/50 text-status-warning-fg hover:bg-status-warning-border cursor-pointer font-medium ml-1",
+            children: "Confirm"
+          }
+        ),
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "contact-chip-remove",
+            onClick: onRemove,
+            "aria-label": `Remove ${name}`,
+            className: "inline-flex size-4 items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+            children: /* @__PURE__ */ jsx(X, { size: 12 })
+          }
+        )
+      ]
+    })
+  );
+}
+export {
+  ContactChip
+};
+//# sourceMappingURL=contact-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/contact-chip.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\ninterface ContactChipProps extends React.HTMLAttributes<HTMLSpanElement> {\n  name: string\n  email?: string\n  verified?: boolean\n  onConfirm?: () => void\n  onRemove?: () => void\n}\n\nfunction ContactChip({\n  name,\n  email,\n  verified = true,\n  onConfirm,\n  onRemove,\n  className,\n  ...rest\n}: ContactChipProps) {\n  const isVerified = verified !== false\n\n  return (\n    <span\n      data-slot=\"contact-chip\"\n      data-verified={isVerified ? \"true\" : \"false\"}\n      className={cn(\n        \"inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs\",\n        isVerified\n          ? \"border border-border bg-background\"\n          : \"border border-status-warning-border bg-status-warning-bg\",\n        className\n      )}\n      {...rest}\n    >\n      <span className=\"font-medium\">{name}</span>\n      {email && <span className=\"text-muted-foreground\">{email}</span>}\n      {!isVerified && onConfirm && (\n        <button\n          type=\"button\"\n          data-slot=\"contact-chip-confirm\"\n          onClick={onConfirm}\n          aria-label={`Confirm ${name}`}\n          className=\"text-[10px] px-1.5 py-0 rounded bg-status-warning-border/50 text-status-warning-fg hover:bg-status-warning-border cursor-pointer font-medium ml-1\"\n        >\n          Confirm\n        </button>\n      )}\n      {onRemove && (\n        <button\n          type=\"button\"\n          data-slot=\"contact-chip-remove\"\n          onClick={onRemove}\n          aria-label={`Remove ${name}`}\n          className=\"inline-flex size-4 items-center justify-center rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\"\n        >\n          <X size={12} />\n        </button>\n      )}\n    </span>\n  )\n}\n\nexport { ContactChip, type ContactChipProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BI,SAYE,KAZF;AAxBJ,SAAS,SAAS;AAElB,SAAS,UAAU;AAUnB,SAAS,YAAY,IAQA;AARA,eACnB;AAAA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,EArBF,IAeqB,IAOhB,iBAPgB,IAOhB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM,aAAa,aAAa;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe,aAAa,SAAS;AAAA,MACrC,WAAW;AAAA,QACT;AAAA,QACA,aACI,uCACA;AAAA,QACJ;AAAA,MACF;AAAA,OACI,OAVL;AAAA,MAYC;AAAA,4BAAC,UAAK,WAAU,eAAe,gBAAK;AAAA,QACnC,SAAS,oBAAC,UAAK,WAAU,yBAAyB,iBAAM;AAAA,QACxD,CAAC,cAAc,aACd;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,aAAU;AAAA,YACV,SAAS;AAAA,YACT,cAAY,WAAW,IAAI;AAAA,YAC3B,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA,QAED,YACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,aAAU;AAAA,YACV,SAAS;AAAA,YACT,cAAY,UAAU,IAAI;AAAA,YAC1B,WAAU;AAAA,YAEV,8BAAC,KAAE,MAAM,IAAI;AAAA;AAAA,QACf;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/draft-feedback-inline.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+interface DraftFeedbackInlineProps {
+    initialDirection?: 'up' | 'down' | null;
+    onRegenerateRequest?: (pills: string[], detail: string) => void;
+    onSubmitFeedback?: (type: "up" | "down", pills: string[], detail: string) => void;
+    onDiscardRequest?: (pills: string[], detail: string) => void;
+}
+declare function DraftFeedbackInline({ initialDirection, onRegenerateRequest, onSubmitFeedback, onDiscardRequest, }: DraftFeedbackInlineProps): React.JSX.Element;
+
+export { DraftFeedbackInline, type DraftFeedbackInlineProps };