@handled-ai/design-system 0.15.1 → 0.16.1

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

package/dist/components/collapsible-section.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+interface CollapsibleSectionProps {
+    /** Total number of items (used in the expansion bar label). */
+    count: number;
+    /** Items to show before collapsing. Default: 5. */
+    maxItems?: number;
+    /** Children to render — the component slices React.Children.toArray(children) at maxItems. */
+    children: React.ReactNode;
+    /** Start expanded. Default: false. */
+    defaultExpanded?: boolean;
+    /** Custom label for the expansion bar. Default: "Show all {count}". */
+    expandLabel?: string;
+    /** Custom label when expanded. Default: "Show less". */
+    collapseLabel?: string;
+    className?: string;
+}
+declare function CollapsibleSection({ count, maxItems, children, defaultExpanded, expandLabel, collapseLabel, className, }: CollapsibleSectionProps): React.JSX.Element;
+
+export { CollapsibleSection, type CollapsibleSectionProps };

package/dist/components/collapsible-section.js

@@ -0,0 +1,48 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils.js";
+function CollapsibleSection({
+  count,
+  maxItems = 5,
+  children,
+  defaultExpanded = false,
+  expandLabel,
+  collapseLabel,
+  className
+}) {
+  const [expanded, setExpanded] = React.useState(defaultExpanded);
+  const items = React.Children.toArray(children);
+  const visible = expanded ? items : items.slice(0, maxItems);
+  const showBar = items.length > maxItems;
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    visible,
+    showBar && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        className: "flex items-center justify-between w-full px-3 py-1.5 mt-1 text-xs font-medium text-muted-foreground border border-border/50 rounded-md hover:bg-muted/30 transition-colors cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: expanded ? collapseLabel != null ? collapseLabel : "Show less" : expandLabel != null ? expandLabel : `Show all ${count}` }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "h-3.5 w-3.5 transition-transform duration-200",
+                expanded && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  CollapsibleSection
+};
+//# sourceMappingURL=collapsible-section.js.map

package/dist/components/collapsible-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/collapsible-section.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\n\nexport interface CollapsibleSectionProps {\n  /** Total number of items (used in the expansion bar label). */\n  count: number\n  /** Items to show before collapsing. Default: 5. */\n  maxItems?: number\n  /** Children to render — the component slices React.Children.toArray(children) at maxItems. */\n  children: React.ReactNode\n  /** Start expanded. Default: false. */\n  defaultExpanded?: boolean\n  /** Custom label for the expansion bar. Default: \"Show all {count}\". */\n  expandLabel?: string\n  /** Custom label when expanded. Default: \"Show less\". */\n  collapseLabel?: string\n  className?: string\n}\n\nexport function CollapsibleSection({\n  count,\n  maxItems = 5,\n  children,\n  defaultExpanded = false,\n  expandLabel,\n  collapseLabel,\n  className,\n}: CollapsibleSectionProps) {\n  const [expanded, setExpanded] = React.useState(defaultExpanded)\n\n  const items = React.Children.toArray(children)\n  const visible = expanded ? items : items.slice(0, maxItems)\n  const showBar = items.length > maxItems\n\n  return (\n    <div className={className}>\n      {visible}\n      {showBar && (\n        <button\n          type=\"button\"\n          onClick={() => setExpanded(!expanded)}\n          className=\"flex items-center justify-between w-full px-3 py-1.5 mt-1 text-xs font-medium text-muted-foreground border border-border/50 rounded-md hover:bg-muted/30 transition-colors cursor-pointer\"\n        >\n          <span>\n            {expanded\n              ? (collapseLabel ?? \"Show less\")\n              : (expandLabel ?? `Show all ${count}`)}\n          </span>\n          <ChevronDown\n            className={cn(\n              \"h-3.5 w-3.5 transition-transform duration-200\",\n              expanded && \"rotate-180\"\n            )}\n          />\n        </button>\n      )}\n    </div>\n  )\n}\n"],"mappings":";AAyCQ,SAKE,KALF;AAvCR,YAAY,WAAW;AACvB,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AAkBZ,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,eAAe;AAE9D,QAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ;AAC7C,QAAM,UAAU,WAAW,QAAQ,MAAM,MAAM,GAAG,QAAQ;AAC1D,QAAM,UAAU,MAAM,SAAS;AAE/B,SACE,qBAAC,SAAI,WACF;AAAA;AAAA,IACA,WACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,YAAY,CAAC,QAAQ;AAAA,QACpC,WAAU;AAAA,QAEV;AAAA,8BAAC,UACE,qBACI,wCAAiB,cACjB,oCAAe,YAAY,KAAK,IACvC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY;AAAA,cACd;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;","names":[]}

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

@@ -28,7 +28,9 @@ interface ContactListProps {
     contacts: ContactItem[];
     onAdd?: () => void;
     addLabel?: string;
+    /** Maximum contacts to show before collapsing. Shows expansion bar when exceeded. Undefined = show all (backward compatible). */
+    maxItems?: number;
 }
-declare function ContactList({ title, count, contacts, onAdd, addLabel }: ContactListProps): React.JSX.Element;
+declare function ContactList({ title, count, contacts, onAdd, addLabel, maxItems }: ContactListProps): React.JSX.Element;
 
 export { type ContactChannel, type ContactItem, ContactList, type ContactListProps };

package/dist/components/contact-list.js

@@ -2,7 +2,9 @@
 
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Plus, X } from "lucide-react";
+import * as React from "react";
+import { ChevronDown, Plus, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
 import { Badge } from "./badge.js";
 import { Button } from "./button.js";
 const badgeColors = {
@@ -62,7 +64,10 @@ function ContactRow({ contact }) {
     ] })
   ] });
 }
-function ContactList({ title, count, contacts, onAdd, addLabel }) {
+function ContactList({ title, count, contacts, onAdd, addLabel, maxItems }) {
+  const [expanded, setExpanded] = React.useState(false);
+  const visibleContacts = maxItems != null && !expanded ? contacts.slice(0, maxItems) : contacts;
+  const showExpansionBar = maxItems != null && contacts.length > maxItems;
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsx("h3", { className: "text-[13px] font-semibold text-foreground", children: title }),
@@ -75,7 +80,19 @@ function ContactList({ title, count, contacts, onAdd, addLabel }) {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-0", children: contacts.map((contact) => /* @__PURE__ */ jsx(ContactRow, { contact }, contact.id)) })
+    /* @__PURE__ */ jsx("div", { className: "space-y-0", children: visibleContacts.map((contact) => /* @__PURE__ */ jsx(ContactRow, { contact }, contact.id)) }),
+    showExpansionBar && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        className: "flex items-center justify-between w-full px-3 py-1.5 mt-1 text-xs font-medium text-muted-foreground border border-border/50 rounded-md hover:bg-muted/30 transition-colors",
+        children: [
+          /* @__PURE__ */ jsx("span", { children: expanded ? "Show less" : `Show all ${contacts.length} contacts` }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: cn("h-3.5 w-3.5 transition-transform duration-200", expanded && "rotate-180") })
+        ]
+      }
+    )
   ] });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/contact-list.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Plus, X } from \"lucide-react\"\nimport { Badge } from \"./badge\"\nimport { Button } from \"./button\"\n\nexport interface ContactChannel {\n  type: \"linkedin\" | \"gmail\" | \"salesforce\" | \"phone\" | \"custom\"\n  icon: React.ReactNode\n  label?: string\n  onClick?: () => void\n}\n\nexport interface ContactItem {\n  id: string\n  name: string\n  role: string\n  badge?: {\n    label: string\n    color?: \"indigo\" | \"green\" | \"amber\" | \"red\" | \"muted\"\n  }\n  channels?: ContactChannel[]\n  action?: {\n    label: string\n    onClick?: () => void\n  }\n  description?: string\n  onDismiss?: () => void\n}\n\nexport interface ContactListProps {\n  title?: string\n  count?: string\n  contacts: ContactItem[]\n  onAdd?: () => void\n  addLabel?: string\n}\n\nconst badgeColors: Record<string, string> = {\n  indigo: \"bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800\",\n  green: \"bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800\",\n  amber: \"bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800\",\n  red: \"bg-red-50 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800\",\n  muted: \"bg-muted text-muted-foreground border-border\",\n}\n\nfunction ContactRow({ contact }: { contact: ContactItem }) {\n  return (\n    <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n      <div className=\"flex items-center gap-2.5 min-w-0\">\n        {contact.badge && (\n          <Badge\n            variant=\"outline\"\n            className={`shadow-none px-2 py-0 text-[11px] font-medium shrink-0 ${badgeColors[contact.badge.color ?? \"muted\"]}`}\n          >\n            {contact.badge.label}\n          </Badge>\n        )}\n        <span className=\"font-medium text-[13px] text-foreground truncate\">{contact.name}</span>\n        <span className=\"text-muted-foreground text-[13px] shrink-0\">&middot;</span>\n        <span className=\"text-muted-foreground text-[13px] truncate\">{contact.role}</span>\n      </div>\n\n      <div className=\"flex items-center gap-1 shrink-0\">\n        {contact.channels?.map((ch, i) => (\n          <button\n            key={i}\n            onClick={ch.onClick}\n            className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\"\n            title={ch.label}\n          >\n            {ch.icon}\n          </button>\n        ))}\n        {contact.action && (\n          <Button\n            size=\"sm\"\n            className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\"\n            onClick={contact.action.onClick}\n          >\n            <Plus className=\"w-3 h-3 mr-1\" />\n            {contact.action.label}\n          </Button>\n        )}\n        {contact.onDismiss && (\n          <button\n            onClick={contact.onDismiss}\n            className=\"h-6 w-6 flex items-center justify-center text-muted-foreground/40 hover:text-foreground hover:bg-muted rounded-md transition-colors opacity-0 group-hover:opacity-100\"\n          >\n            <X className=\"w-3 h-3\" />\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport function ContactList({ title, count, contacts, onAdd, addLabel }: ContactListProps) {\n  return (\n    <div className=\"space-y-2.5\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-[13px] font-semibold text-foreground\">{title}</h3>\n        <div className=\"flex items-center gap-3\">\n          {count && <span className=\"text-xs text-muted-foreground\">{count}</span>}\n          {onAdd && (\n            <Button variant=\"ghost\" size=\"sm\" onClick={onAdd} className=\"h-7 text-xs font-medium hover:bg-muted/50\">\n              <Plus className=\"w-3.5 h-3.5 mr-1\" /> {addLabel ?? \"Add\"}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"space-y-0\">\n        {contacts.map((contact) => (\n          <ContactRow key={contact.id} contact={contact} />\n        ))}\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAkDM,SAEI,KAFJ;AA/CN,SAAS,MAAM,SAAS;AACxB,SAAS,aAAa;AACtB,SAAS,cAAc;AAkCvB,MAAM,cAAsC;AAAA,EAC1C,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL,OAAO;AACT;AAEA,SAAS,WAAW,EAAE,QAAQ,GAA6B;AA/C3D;AAgDE,SACE,qBAAC,SAAI,WAAU,wJACb;AAAA,yBAAC,SAAI,WAAU,qCACZ;AAAA,cAAQ,SACP;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAW,0DAA0D,aAAY,aAAQ,MAAM,UAAd,YAAuB,OAAO,CAAC;AAAA,UAE/G,kBAAQ,MAAM;AAAA;AAAA,MACjB;AAAA,MAEF,oBAAC,UAAK,WAAU,oDAAoD,kBAAQ,MAAK;AAAA,MACjF,oBAAC,UAAK,WAAU,8CAA6C,kBAAQ;AAAA,MACrE,oBAAC,UAAK,WAAU,8CAA8C,kBAAQ,MAAK;AAAA,OAC7E;AAAA,IAEA,qBAAC,SAAI,WAAU,oCACZ;AAAA,oBAAQ,aAAR,mBAAkB,IAAI,CAAC,IAAI,MAC1B;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,GAAG;AAAA,UACZ,WAAU;AAAA,UACV,OAAO,GAAG;AAAA,UAET,aAAG;AAAA;AAAA,QALC;AAAA,MAMP;AAAA,MAED,QAAQ,UACP;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,QAAQ,OAAO;AAAA,UAExB;AAAA,gCAAC,QAAK,WAAU,gBAAe;AAAA,YAC9B,QAAQ,OAAO;AAAA;AAAA;AAAA,MAClB;AAAA,MAED,QAAQ,aACP;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,QAAQ;AAAA,UACjB,WAAU;AAAA,UAEV,8BAAC,KAAE,WAAU,WAAU;AAAA;AAAA,MACzB;AAAA,OAEJ;AAAA,KACF;AAEJ;AAEO,SAAS,YAAY,EAAE,OAAO,OAAO,UAAU,OAAO,SAAS,GAAqB;AACzF,SACE,qBAAC,SAAI,WAAU,eACb;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,0BAAC,QAAG,WAAU,6CAA6C,iBAAM;AAAA,MACjE,qBAAC,SAAI,WAAU,2BACZ;AAAA,iBAAS,oBAAC,UAAK,WAAU,iCAAiC,iBAAM;AAAA,QAChE,SACC,qBAAC,UAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,OAAO,WAAU,6CAC1D;AAAA,8BAAC,QAAK,WAAU,oBAAmB;AAAA,UAAE;AAAA,UAAE,8BAAY;AAAA,WACrD;AAAA,SAEJ;AAAA,OACF;AAAA,IAEA,oBAAC,SAAI,WAAU,aACZ,mBAAS,IAAI,CAAC,YACb,oBAAC,cAA4B,WAAZ,QAAQ,EAAsB,CAChD,GACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/contact-list.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus, X } from \"lucide-react\"\nimport { cn } from \"../lib/utils\"\nimport { Badge } from \"./badge\"\nimport { Button } from \"./button\"\n\nexport interface ContactChannel {\n  type: \"linkedin\" | \"gmail\" | \"salesforce\" | \"phone\" | \"custom\"\n  icon: React.ReactNode\n  label?: string\n  onClick?: () => void\n}\n\nexport interface ContactItem {\n  id: string\n  name: string\n  role: string\n  badge?: {\n    label: string\n    color?: \"indigo\" | \"green\" | \"amber\" | \"red\" | \"muted\"\n  }\n  channels?: ContactChannel[]\n  action?: {\n    label: string\n    onClick?: () => void\n  }\n  description?: string\n  onDismiss?: () => void\n}\n\nexport interface ContactListProps {\n  title?: string\n  count?: string\n  contacts: ContactItem[]\n  onAdd?: () => void\n  addLabel?: string\n  /** Maximum contacts to show before collapsing. Shows expansion bar when exceeded. Undefined = show all (backward compatible). */\n  maxItems?: number\n}\n\nconst badgeColors: Record<string, string> = {\n  indigo: \"bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800\",\n  green: \"bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800\",\n  amber: \"bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800\",\n  red: \"bg-red-50 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800\",\n  muted: \"bg-muted text-muted-foreground border-border\",\n}\n\nfunction ContactRow({ contact }: { contact: ContactItem }) {\n  return (\n    <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n      <div className=\"flex items-center gap-2.5 min-w-0\">\n        {contact.badge && (\n          <Badge\n            variant=\"outline\"\n            className={`shadow-none px-2 py-0 text-[11px] font-medium shrink-0 ${badgeColors[contact.badge.color ?? \"muted\"]}`}\n          >\n            {contact.badge.label}\n          </Badge>\n        )}\n        <span className=\"font-medium text-[13px] text-foreground truncate\">{contact.name}</span>\n        <span className=\"text-muted-foreground text-[13px] shrink-0\">&middot;</span>\n        <span className=\"text-muted-foreground text-[13px] truncate\">{contact.role}</span>\n      </div>\n\n      <div className=\"flex items-center gap-1 shrink-0\">\n        {contact.channels?.map((ch, i) => (\n          <button\n            key={i}\n            onClick={ch.onClick}\n            className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\"\n            title={ch.label}\n          >\n            {ch.icon}\n          </button>\n        ))}\n        {contact.action && (\n          <Button\n            size=\"sm\"\n            className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\"\n            onClick={contact.action.onClick}\n          >\n            <Plus className=\"w-3 h-3 mr-1\" />\n            {contact.action.label}\n          </Button>\n        )}\n        {contact.onDismiss && (\n          <button\n            onClick={contact.onDismiss}\n            className=\"h-6 w-6 flex items-center justify-center text-muted-foreground/40 hover:text-foreground hover:bg-muted rounded-md transition-colors opacity-0 group-hover:opacity-100\"\n          >\n            <X className=\"w-3 h-3\" />\n          </button>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport function ContactList({ title, count, contacts, onAdd, addLabel, maxItems }: ContactListProps) {\n  const [expanded, setExpanded] = React.useState(false)\n\n  const visibleContacts = maxItems != null && !expanded ? contacts.slice(0, maxItems) : contacts\n  const showExpansionBar = maxItems != null && contacts.length > maxItems\n\n  return (\n    <div className=\"space-y-2.5\">\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-[13px] font-semibold text-foreground\">{title}</h3>\n        <div className=\"flex items-center gap-3\">\n          {count && <span className=\"text-xs text-muted-foreground\">{count}</span>}\n          {onAdd && (\n            <Button variant=\"ghost\" size=\"sm\" onClick={onAdd} className=\"h-7 text-xs font-medium hover:bg-muted/50\">\n              <Plus className=\"w-3.5 h-3.5 mr-1\" /> {addLabel ?? \"Add\"}\n            </Button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"space-y-0\">\n        {visibleContacts.map((contact) => (\n          <ContactRow key={contact.id} contact={contact} />\n        ))}\n      </div>\n\n      {showExpansionBar && (\n        <button\n          type=\"button\"\n          onClick={() => setExpanded(!expanded)}\n          className=\"flex items-center justify-between w-full px-3 py-1.5 mt-1 text-xs font-medium text-muted-foreground border border-border/50 rounded-md hover:bg-muted/30 transition-colors\"\n        >\n          <span>{expanded ? \"Show less\" : `Show all ${contacts.length} contacts`}</span>\n          <ChevronDown className={cn(\"h-3.5 w-3.5 transition-transform duration-200\", expanded && \"rotate-180\")} />\n        </button>\n      )}\n    </div>\n  )\n}\n"],"mappings":";AAqDM,SAEI,KAFJ;AAnDN,YAAY,WAAW;AACvB,SAAS,aAAa,MAAM,SAAS;AACrC,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,cAAc;AAoCvB,MAAM,cAAsC;AAAA,EAC1C,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL,OAAO;AACT;AAEA,SAAS,WAAW,EAAE,QAAQ,GAA6B;AAlD3D;AAmDE,SACE,qBAAC,SAAI,WAAU,wJACb;AAAA,yBAAC,SAAI,WAAU,qCACZ;AAAA,cAAQ,SACP;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,WAAW,0DAA0D,aAAY,aAAQ,MAAM,UAAd,YAAuB,OAAO,CAAC;AAAA,UAE/G,kBAAQ,MAAM;AAAA;AAAA,MACjB;AAAA,MAEF,oBAAC,UAAK,WAAU,oDAAoD,kBAAQ,MAAK;AAAA,MACjF,oBAAC,UAAK,WAAU,8CAA6C,kBAAQ;AAAA,MACrE,oBAAC,UAAK,WAAU,8CAA8C,kBAAQ,MAAK;AAAA,OAC7E;AAAA,IAEA,qBAAC,SAAI,WAAU,oCACZ;AAAA,oBAAQ,aAAR,mBAAkB,IAAI,CAAC,IAAI,MAC1B;AAAA,QAAC;AAAA;AAAA,UAEC,SAAS,GAAG;AAAA,UACZ,WAAU;AAAA,UACV,OAAO,GAAG;AAAA,UAET,aAAG;AAAA;AAAA,QALC;AAAA,MAMP;AAAA,MAED,QAAQ,UACP;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,QAAQ,OAAO;AAAA,UAExB;AAAA,gCAAC,QAAK,WAAU,gBAAe;AAAA,YAC9B,QAAQ,OAAO;AAAA;AAAA;AAAA,MAClB;AAAA,MAED,QAAQ,aACP;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,QAAQ;AAAA,UACjB,WAAU;AAAA,UAEV,8BAAC,KAAE,WAAU,WAAU;AAAA;AAAA,MACzB;AAAA,OAEJ;AAAA,KACF;AAEJ;AAEO,SAAS,YAAY,EAAE,OAAO,OAAO,UAAU,OAAO,UAAU,SAAS,GAAqB;AACnG,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AAEpD,QAAM,kBAAkB,YAAY,QAAQ,CAAC,WAAW,SAAS,MAAM,GAAG,QAAQ,IAAI;AACtF,QAAM,mBAAmB,YAAY,QAAQ,SAAS,SAAS;AAE/D,SACE,qBAAC,SAAI,WAAU,eACb;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,0BAAC,QAAG,WAAU,6CAA6C,iBAAM;AAAA,MACjE,qBAAC,SAAI,WAAU,2BACZ;AAAA,iBAAS,oBAAC,UAAK,WAAU,iCAAiC,iBAAM;AAAA,QAChE,SACC,qBAAC,UAAO,SAAQ,SAAQ,MAAK,MAAK,SAAS,OAAO,WAAU,6CAC1D;AAAA,8BAAC,QAAK,WAAU,oBAAmB;AAAA,UAAE;AAAA,UAAE,8BAAY;AAAA,WACrD;AAAA,SAEJ;AAAA,OACF;AAAA,IAEA,oBAAC,SAAI,WAAU,aACZ,0BAAgB,IAAI,CAAC,YACpB,oBAAC,cAA4B,WAAZ,QAAQ,EAAsB,CAChD,GACH;AAAA,IAEC,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,YAAY,CAAC,QAAQ;AAAA,QACpC,WAAU;AAAA,QAEV;AAAA,8BAAC,UAAM,qBAAW,cAAc,YAAY,SAAS,MAAM,aAAY;AAAA,UACvE,oBAAC,eAAY,WAAW,GAAG,iDAAiD,YAAY,YAAY,GAAG;AAAA;AAAA;AAAA,IACzG;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/data-table-condition-filter.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+type ConditionOperator = "eq" | "neq" | "gt" | "gte" | "lt" | "lte" | "in" | "is_null" | "is_not_null";
+interface ConditionFieldDef {
+    /** Unique field key (e.g., "Account_Balance__c") */
+    id: string;
+    /** Display label (e.g., "Account Balance") */
+    label: string;
+    /** Field data type — determines which operators are available and how the value input renders */
+    type: "text" | "number" | "currency" | "date";
+    /** Allowed operators for this field. Defaults based on type if not provided. */
+    operators?: ConditionOperator[];
+}
+interface ConditionFilterValue {
+    /** Stable identity — used as React key to avoid stale-state bugs on removal */
+    id: string;
+    field: string;
+    operator: ConditionOperator;
+    value: string | number | null;
+}
+interface DataTableConditionFilterProps {
+    /** Available fields the user can filter on */
+    fields: ConditionFieldDef[];
+    /** Current active conditions */
+    conditions: ConditionFilterValue[];
+    /** Called when conditions change (add, update, remove) */
+    onConditionsChange: (conditions: ConditionFilterValue[]) => void;
+    className?: string;
+}
+declare const OPERATOR_LABELS: Record<ConditionOperator, string>;
+declare const DEFAULT_OPERATORS: Record<ConditionFieldDef["type"], ConditionOperator[]>;
+/** Generate a stable unique ID for a new condition row. */
+declare function generateConditionId(): string;
+declare function getOperators(field: ConditionFieldDef): ConditionOperator[];
+declare function DataTableConditionFilter({ fields, conditions, onConditionsChange, className, }: DataTableConditionFilterProps): React.JSX.Element;
+
+export { type ConditionFieldDef, type ConditionFilterValue, type ConditionOperator, DEFAULT_OPERATORS, DataTableConditionFilter, type DataTableConditionFilterProps, OPERATOR_LABELS, generateConditionId, getOperators };

package/dist/components/data-table-condition-filter.js

@@ -0,0 +1,407 @@
+"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));
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  CalendarDays,
+  DollarSign,
+  Eye,
+  Hash,
+  MoreHorizontal,
+  Plus,
+  Trash2,
+  Type
+} from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./select.js";
+const OPERATOR_LABELS = {
+  eq: "=",
+  neq: "\u2260",
+  gt: ">",
+  gte: "\u2265",
+  lt: "<",
+  lte: "\u2264",
+  in: "contains",
+  is_null: "is empty",
+  is_not_null: "is not empty"
+};
+const NUMERIC_OPERATORS = [
+  "eq",
+  "neq",
+  "gt",
+  "gte",
+  "lt",
+  "lte",
+  "is_null",
+  "is_not_null"
+];
+const DEFAULT_OPERATORS = {
+  text: ["eq", "neq", "is_null", "is_not_null"],
+  number: NUMERIC_OPERATORS,
+  currency: NUMERIC_OPERATORS,
+  date: ["gt", "gte", "lt", "lte", "eq", "neq", "is_null", "is_not_null"]
+};
+function generateConditionId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function getOperators(field) {
+  var _a;
+  return ((_a = field.operators) != null ? _a : DEFAULT_OPERATORS[field.type]).filter((op) => op !== "in");
+}
+function isUnaryOperator(op) {
+  return op === "is_null" || op === "is_not_null";
+}
+function getDefaultOperator(field) {
+  var _a;
+  return (_a = getOperators(field)[0]) != null ? _a : "eq";
+}
+function createDraftCondition(field) {
+  return {
+    id: generateConditionId(),
+    field: field.id,
+    operator: getDefaultOperator(field),
+    value: null
+  };
+}
+function normalizeCondition(condition, fields) {
+  var _a;
+  const field = (_a = fields.find((f) => f.id === condition.field)) != null ? _a : fields[0];
+  if (!field) return condition;
+  const operators = getOperators(field);
+  const operator = operators.includes(condition.operator) ? condition.operator : getDefaultOperator(field);
+  return __spreadProps(__spreadValues({}, condition), {
+    field: field.id,
+    operator,
+    value: isUnaryOperator(operator) ? null : condition.value
+  });
+}
+function parseConditionValue(raw, fieldType) {
+  if (raw === "") return null;
+  if (fieldType === "number" || fieldType === "currency") {
+    const parsed = Number(raw);
+    return Number.isNaN(parsed) ? null : parsed;
+  }
+  return raw;
+}
+function isCompleteCondition(condition, fields) {
+  const field = fields.find((f) => f.id === condition.field);
+  if (!field) return false;
+  if (!getOperators(field).includes(condition.operator)) return false;
+  if (isUnaryOperator(condition.operator)) return true;
+  return condition.value !== null && condition.value !== "";
+}
+function getFieldIcon(type) {
+  if (type === "currency") return DollarSign;
+  if (type === "number") return Hash;
+  if (type === "date") return CalendarDays;
+  return Type;
+}
+function ConditionRow({
+  condition,
+  fields,
+  index,
+  onChange,
+  onRemove,
+  onCommit
+}) {
+  var _a;
+  const fieldDef = (_a = fields.find((f) => f.id === condition.field)) != null ? _a : fields[0];
+  const operators = getOperators(fieldDef);
+  const isUnary = isUnaryOperator(condition.operator);
+  const FieldIcon = getFieldIcon(fieldDef.type);
+  const handleFieldChange = (newFieldId) => {
+    var _a2;
+    const newFieldDef = (_a2 = fields.find((f) => f.id === newFieldId)) != null ? _a2 : fields[0];
+    if (!newFieldDef) return;
+    onChange(__spreadProps(__spreadValues({}, condition), {
+      field: newFieldDef.id,
+      operator: getDefaultOperator(newFieldDef),
+      value: null
+    }));
+  };
+  const handleOperatorChange = (newOp) => {
+    onChange(__spreadProps(__spreadValues({}, condition), {
+      operator: newOp,
+      value: isUnaryOperator(newOp) ? null : condition.value
+    }));
+  };
+  const handleValueChange = (event) => {
+    onChange(__spreadProps(__spreadValues({}, condition), {
+      value: parseConditionValue(event.target.value, fieldDef.type)
+    }));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "grid grid-cols-[52px_minmax(150px,1fr)_120px_minmax(140px,1fr)_auto] items-center gap-2 rounded-lg border border-border/70 bg-background p-2 shadow-sm",
+      "data-slot": "condition-row",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-muted-foreground", children: index === 0 ? "Where" : "And" }),
+        /* @__PURE__ */ jsxs(Select, { value: condition.field, onValueChange: handleFieldChange, children: [
+          /* @__PURE__ */ jsxs(SelectTrigger, { className: "h-8 w-full justify-start gap-2", size: "sm", children: [
+            /* @__PURE__ */ jsx(FieldIcon, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(SelectValue, { placeholder: fieldDef.label })
+          ] }),
+          /* @__PURE__ */ jsx(SelectContent, { children: fields.map((field) => {
+            const Icon = getFieldIcon(field.type);
+            return /* @__PURE__ */ jsx(SelectItem, { value: field.id, children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+              field.label
+            ] }) }, field.id);
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: condition.operator,
+            onValueChange: (value) => handleOperatorChange(value),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-full", size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Operator" }) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: operators.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op, children: OPERATOR_LABELS[op] }, op)) })
+            ]
+          }
+        ),
+        isUnary ? /* @__PURE__ */ jsx("div", { className: "h-8 rounded-md border border-dashed border-border/70 bg-muted/30 px-3 py-1.5 text-xs text-muted-foreground", children: "No value needed" }) : /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+          fieldDef.type === "currency" ? /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 text-sm text-muted-foreground", children: "$" }) : null,
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: fieldDef.type === "number" || fieldDef.type === "currency" ? "number" : fieldDef.type === "date" ? "date" : "text",
+              value: condition.value != null ? String(condition.value) : "",
+              onChange: handleValueChange,
+              onClick: (event) => event.stopPropagation(),
+              onKeyDown: (event) => {
+                event.stopPropagation();
+                if (event.key === "Enter") {
+                  onCommit();
+                }
+              },
+              placeholder: fieldDef.type === "currency" ? "Amount" : fieldDef.type === "number" ? "Enter number..." : fieldDef.type === "date" ? "" : "Enter value...",
+              className: cn("h-8", fieldDef.type === "currency" && "pl-6")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8 text-muted-foreground",
+              "aria-label": "Toggle condition visibility",
+              onClick: (event) => event.preventDefault(),
+              children: /* @__PURE__ */ jsx(Eye, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8 text-muted-foreground",
+              "aria-label": "More condition actions",
+              onClick: (event) => event.preventDefault(),
+              children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8 text-muted-foreground hover:text-destructive",
+              onClick: onRemove,
+              "aria-label": "Remove condition",
+              children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function DataTableConditionFilter({
+  fields,
+  conditions,
+  onConditionsChange,
+  className
+}) {
+  const [drafts, setDrafts] = React.useState(
+    () => conditions.map((condition) => normalizeCondition(condition, fields))
+  );
+  React.useEffect(() => {
+    setDrafts(conditions.map((condition) => normalizeCondition(condition, fields)));
+  }, [conditions, fields]);
+  const commitDrafts = React.useCallback(
+    (nextDrafts = drafts) => {
+      onConditionsChange(
+        nextDrafts.map((condition) => normalizeCondition(condition, fields)).filter((condition) => isCompleteCondition(condition, fields))
+      );
+    },
+    [drafts, fields, onConditionsChange]
+  );
+  const handleAdd = () => {
+    const firstField = fields[0];
+    if (!firstField) return;
+    const committedDrafts = drafts.filter(
+      (condition) => isCompleteCondition(condition, fields)
+    );
+    const nextDrafts = [...committedDrafts, createDraftCondition(firstField)];
+    setDrafts(nextDrafts);
+    commitDrafts(committedDrafts);
+  };
+  const handleUpdate = (index, updated) => {
+    setDrafts((current) => {
+      const next = [...current];
+      next[index] = normalizeCondition(updated, fields);
+      return next;
+    });
+  };
+  const handleRemove = (index) => {
+    setDrafts((current) => {
+      const next = current.filter((_, currentIndex) => currentIndex !== index);
+      commitDrafts(next);
+      return next;
+    });
+  };
+  const handleClear = () => {
+    setDrafts([]);
+    onConditionsChange([]);
+  };
+  const hasAppliedConditions = conditions.length > 0;
+  const hasDrafts = drafts.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-[min(760px,calc(100vw-2rem))] rounded-xl border border-border bg-background p-3 text-foreground shadow-xl",
+        className
+      ),
+      "data-slot": "condition-filter",
+      onClick: (event) => event.stopPropagation(),
+      onKeyDown: (event) => {
+        if (event.key !== "Escape") {
+          event.stopPropagation();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between gap-3 border-b border-border/70 pb-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: "Filter builder" }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: "Build field, operator, and value conditions." })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              className: "h-8 text-xs text-destructive hover:text-destructive",
+              onClick: handleClear,
+              disabled: !hasAppliedConditions && !hasDrafts,
+              children: "Clear filters"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: drafts.map((condition, index) => /* @__PURE__ */ jsx(
+          ConditionRow,
+          {
+            condition,
+            fields,
+            index,
+            onChange: (updated) => handleUpdate(index, updated),
+            onRemove: () => handleRemove(index),
+            onCommit: () => commitDrafts()
+          },
+          condition.id
+        )) }),
+        !hasDrafts ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-dashed border-border/80 bg-muted/20 px-3 py-5 text-center text-xs text-muted-foreground", children: "No builder filters yet. Add a filter to start a condition row." }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center justify-between gap-2 border-t border-border/70 pt-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "h-8 text-xs text-muted-foreground",
+                onClick: handleAdd,
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "mr-1 size-3.5" }),
+                  "Add filter"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "h-8 text-xs text-muted-foreground opacity-60",
+                disabled: true,
+                "aria-disabled": "true",
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "mr-1 size-3.5" }),
+                  "Add filter group"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              className: "h-8 text-xs",
+              onClick: () => commitDrafts(),
+              children: "Apply"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_OPERATORS,
+  DataTableConditionFilter,
+  OPERATOR_LABELS,
+  generateConditionId,
+  getOperators
+};
+//# sourceMappingURL=data-table-condition-filter.js.map