@handled-ai/design-system 0.8.0 → 0.9.0

package/dist/components/item-list-toolbar.js

@@ -0,0 +1,79 @@
+"use client"
+
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import {
+  ItemListDisplay
+} from "./item-list-display.js";
+import {
+  ItemListFilter
+} from "./item-list-filter.js";
+function ItemListToolbar({
+  quickViews,
+  activeQuickView,
+  onQuickViewChange,
+  filterCategories,
+  selectedFilters,
+  onToggleFilter,
+  onClearFilters,
+  display,
+  onDisplayChange,
+  onResetDisplay,
+  searchSlot
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b border-border bg-muted/20 px-4 py-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto", children: quickViews.map((quickView) => {
+      const isActive = quickView.id === activeQuickView;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onQuickViewChange(isActive ? null : quickView.id),
+          className: cn(
+            "flex shrink-0 items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors",
+            isActive ? "border-emerald-700 bg-emerald-600 text-white" : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground"
+          ),
+          children: [
+            quickView.label,
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "rounded px-1.5 py-0 text-[10px] font-semibold",
+                  isActive ? "bg-emerald-700/80 text-white" : "bg-muted text-muted-foreground"
+                ),
+                children: quickView.count
+              }
+            )
+          ]
+        },
+        quickView.id
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+      searchSlot,
+      /* @__PURE__ */ jsx(
+        ItemListFilter,
+        {
+          categories: filterCategories,
+          selectedFilters,
+          onToggleFilter,
+          onClearFilters
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ItemListDisplay,
+        {
+          value: display,
+          onChange: onDisplayChange,
+          onReset: onResetDisplay
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ItemListToolbar
+};
+//# sourceMappingURL=item-list-toolbar.js.map

package/dist/components/item-list-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/item-list-toolbar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../lib/utils\"\nimport {\n  ItemListDisplay,\n  type ItemListDisplayState,\n} from \"./item-list-display\"\nimport {\n  ItemListFilter,\n  type ItemListFilterCategory,\n} from \"./item-list-filter\"\n\nexport interface ItemListQuickView {\n  id: string\n  label: string\n  count: number\n}\n\ninterface ItemListToolbarProps {\n  quickViews: ItemListQuickView[]\n  activeQuickView: string | null\n  onQuickViewChange: (viewId: string | null) => void\n  filterCategories: ItemListFilterCategory[]\n  selectedFilters: Record<string, string[]>\n  onToggleFilter: (categoryId: string, option: string) => void\n  onClearFilters: () => void\n  display: ItemListDisplayState\n  onDisplayChange: (next: ItemListDisplayState) => void\n  onResetDisplay: () => void\n  searchSlot?: React.ReactNode\n}\n\nexport function ItemListToolbar({\n  quickViews,\n  activeQuickView,\n  onQuickViewChange,\n  filterCategories,\n  selectedFilters,\n  onToggleFilter,\n  onClearFilters,\n  display,\n  onDisplayChange,\n  onResetDisplay,\n  searchSlot,\n}: ItemListToolbarProps) {\n  return (\n    <div className=\"flex flex-wrap items-center justify-between gap-3 border-b border-border bg-muted/20 px-4 py-3\">\n      <div className=\"flex min-w-0 flex-1 items-center gap-2 overflow-x-auto\">\n        {quickViews.map((quickView) => {\n          const isActive = quickView.id === activeQuickView\n          return (\n            <button\n              key={quickView.id}\n              type=\"button\"\n              onClick={() => onQuickViewChange(isActive ? null : quickView.id)}\n              className={cn(\n                \"flex shrink-0 items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors\",\n                isActive\n                  ? \"border-emerald-700 bg-emerald-600 text-white\"\n                  : \"border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground\"\n              )}\n            >\n              {quickView.label}\n              <span\n                className={cn(\n                  \"rounded px-1.5 py-0 text-[10px] font-semibold\",\n                  isActive\n                    ? \"bg-emerald-700/80 text-white\"\n                    : \"bg-muted text-muted-foreground\"\n                )}\n              >\n                {quickView.count}\n              </span>\n            </button>\n          )\n        })}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-2\">\n        {searchSlot}\n        <ItemListFilter\n          categories={filterCategories}\n          selectedFilters={selectedFilters}\n          onToggleFilter={onToggleFilter}\n          onClearFilters={onClearFilters}\n        />\n        <ItemListDisplay\n          value={display}\n          onChange={onDisplayChange}\n          onReset={onResetDisplay}\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":";AAqDY,SAYE,KAZF;AAjDZ,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAEK;AAsBA,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,SACE,qBAAC,SAAI,WAAU,kGACb;AAAA,wBAAC,SAAI,WAAU,0DACZ,qBAAW,IAAI,CAAC,cAAc;AAC7B,YAAM,WAAW,UAAU,OAAO;AAClC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,MAAM,kBAAkB,WAAW,OAAO,UAAU,EAAE;AAAA,UAC/D,WAAW;AAAA,YACT;AAAA,YACA,WACI,iDACA;AAAA,UACN;AAAA,UAEC;AAAA,sBAAU;AAAA,YACX;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,WACI,iCACA;AAAA,gBACN;AAAA,gBAEC,oBAAU;AAAA;AAAA,YACb;AAAA;AAAA;AAAA,QApBK,UAAU;AAAA,MAqBjB;AAAA,IAEJ,CAAC,GACH;AAAA,IAEA,qBAAC,SAAI,WAAU,oCACZ;AAAA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,YAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,SAAS;AAAA;AAAA,MACX;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+declare function ItemList(): React.JSX.Element;
+interface GroupedListGroup<T> {
+    key: string;
+    label: string;
+    items: T[];
+}
+interface GroupedListViewProps<T> {
+    groups: GroupedListGroup<T>[];
+    renderRow: (item: T, index: number) => React.ReactNode;
+    getItemKey: (item: T) => string;
+    selectedKey?: string;
+    onItemClick?: (item: T) => void;
+    emptyMessage?: string;
+    className?: string;
+}
+declare function GroupedListView<T>({ groups, renderRow, getItemKey, selectedKey, onItemClick, emptyMessage, className, }: GroupedListViewProps<T>): React.JSX.Element;
+
+export { type GroupedListGroup, GroupedListView, type GroupedListViewProps, ItemList };