@pipe0/react 0.2.18 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @pipe0/elements-react
 
+## 1.0.0
+
+### Major Changes
+
+- 704c77a: Release major version
+
+### Patch Changes
+
+- Updated dependencies [704c77a]
+  - @pipe0/base@1.0.0
+
 ## 0.2.18
 
 ### Patch Changes

package/dist/components/defaults/adapters/providers-input.mjs

@@ -6,11 +6,24 @@ import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.mjs";
 import { AvatarGroup } from "../../../widgets/avatar-group.mjs";
 import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { providerCatalog } from "@pipe0/base";
 import { Search, X } from "lucide-react";
 import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
 import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
 
 //#region src/components/defaults/adapters/providers-input.tsx
+function resolveFallbackOption(value) {
+	if (!(value in providerCatalog)) return {
+		value,
+		label: value
+	};
+	const provider = value;
+	return {
+		value,
+		label: providerCatalog[provider].label,
+		widgets: { provider_logo: { provider } }
+	};
+}
 function splitWidgets(widgets) {
 	if (!widgets) return {
 		providerName: void 0,
@@ -87,12 +100,12 @@ function ProvidersInputAdapter(field) {
 				children: /* @__PURE__ */ jsx("ul", {
 					className: "pz:flex pz:flex-col pz:gap-0.5 pz:list-none pz:m-0 pz:p-0",
 					children: selected.map((value, index) => {
-						const option = optionByValue.get(value);
+						const option = optionByValue.get(value) ?? resolveFallbackOption(value);
 						return /* @__PURE__ */ jsx(ProviderRow, {
 							value,
 							index,
-							label: option?.label ?? value,
-							widgets: option?.widgets,
+							label: option.label,
+							widgets: option.widgets,
 							onRemove: () => handleRemove(value)
 						}, value);
 					})

package/dist/components/defaults/adapters/providers-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"providers-input.mjs","names":["XIcon","SearchIcon"],"sources":["../../../../src/components/defaults/adapters/providers-input.tsx"],"sourcesContent":["import {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { SortableContext, useSortable, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport type { ProviderName, WidgetsByKind } from \"@pipe0/base\";\nimport { Search as SearchIcon, X as XIcon } from \"lucide-react\";\nimport { type CSSProperties, useMemo, useState } from \"react\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { AvatarGroup } from \"../../../widgets/avatar-group.js\";\nimport { PricingBadge } from \"../../../widgets/pricing-badge.js\";\nimport { WidgetStrip } from \"../../../widgets/widget-strip.js\";\nimport { IconGripVertical, IconPlus } from \"../../internal/icons.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../ui/popover.js\";\n\ntype ProviderOption = {\n  value: string;\n  label: string;\n  widgets?: WidgetsByKind;\n};\n\nfunction splitWidgets(widgets: WidgetsByKind | undefined): {\n  providerName: ProviderName | undefined;\n  leading: WidgetsByKind | undefined;\n  pricing: WidgetsByKind[\"pricing\"] | undefined;\n} {\n  if (!widgets) return { providerName: undefined, leading: undefined, pricing: undefined };\n  const { pricing, provider_logo, ...rest } = widgets;\n  const hasLeading = Object.values(rest).some((v) => v != null);\n  return {\n    providerName: provider_logo?.provider,\n    leading: hasLeading ? rest : undefined,\n    pricing,\n  };\n}\n\nfunction LeadingAvatar({\n  providerName,\n  leading,\n}: {\n  providerName: ProviderName | undefined;\n  leading: WidgetsByKind | undefined;\n}) {\n  if (providerName) {\n    return <AvatarGroup providers={[providerName]} size=\"sm\" className=\"pz:shrink-0\" />;\n  }\n  if (leading) {\n    return (\n      <span className=\"pz:flex pz:items-center pz:shrink-0\">\n        <WidgetStrip widgets={leading} size={18} />\n      </span>\n    );\n  }\n  return null;\n}\n\n/**\n * Provider waterfall — vertical, ordered list of providers tried sequentially\n * until a valid result is returned. The list makes the running order legible\n * (numeric badge per row, drag-to-reorder), and the credit widget per\n * provider stays visible.\n */\nexport function ProvidersInputAdapter(field: FieldHandle<\"providers_input\">) {\n  const selected: string[] = useMemo(\n    () => (field.value ?? []).map((p: { provider: string }) => p.provider),\n    [field.value],\n  );\n\n  const options = field.options ?? [];\n  const optionByValue = useMemo(() => {\n    const map = new Map<string, ProviderOption>();\n    for (const o of options) map.set(o.value, o);\n    return map;\n  }, [options]);\n\n  const maxItems = field.meta.maxItems;\n  const atMax = maxItems !== undefined && selected.length >= maxItems;\n\n  const setValue = (next: string[]) => field.setValue(next.map((provider) => ({ provider })));\n\n  const handleRemove = (value: string) => setValue(selected.filter((v) => v !== value));\n  const handleAdd = (value: string) => {\n    if (selected.includes(value)) return;\n    setValue([...selected, value]);\n  };\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n    if (!over || active.id === over.id) return;\n    const from = selected.indexOf(String(active.id));\n    const to = selected.indexOf(String(over.id));\n    if (from === -1 || to === -1) return;\n    const next = [...selected];\n    const [moved] = next.splice(from, 1);\n    next.splice(to, 0, moved);\n    setValue(next);\n  };\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      {selected.length > 0 && (\n        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>\n          <SortableContext items={selected} strategy={verticalListSortingStrategy}>\n            <ul className=\"pz:flex pz:flex-col pz:gap-0.5 pz:list-none pz:m-0 pz:p-0\">\n              {selected.map((value, index) => {\n                const option = optionByValue.get(value);\n                return (\n                  <ProviderRow\n                    key={value}\n                    value={value}\n                    index={index}\n                    label={option?.label ?? value}\n                    widgets={option?.widgets}\n                    onRemove={() => handleRemove(value)}\n                  />\n                );\n              })}\n            </ul>\n          </SortableContext>\n        </DndContext>\n      )}\n      {!atMax && (\n        <AddProviderControl\n          options={options}\n          excluded={selected}\n          onAdd={handleAdd}\n          ariaInvalid={!!field.error}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction ProviderRow({\n  value,\n  index,\n  label,\n  widgets,\n  onRemove,\n}: {\n  value: string;\n  index: number;\n  label: string;\n  widgets?: WidgetsByKind;\n  onRemove: () => void;\n}) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: value,\n  });\n  const style: CSSProperties = {\n    transform: transform\n      ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`\n      : undefined,\n    transition,\n    opacity: isDragging ? 0.6 : 1,\n  };\n\n  const { providerName, leading, pricing } = splitWidgets(widgets);\n  const orderLabel = String(index + 1);\n\n  return (\n    <li\n      ref={setNodeRef}\n      style={style}\n      className={cn(\n        \"pz:group/prov pz:flex pz:items-center pz:gap-2.5 pz:rounded-md pz:px-1.5 pz:py-1.5\",\n        \"pz:hover:bg-muted/60 pz:transition-colors\",\n      )}\n      {...attributes}\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Drag to reorder\"\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:size-4 pz:cursor-grab pz:touch-none\",\n          \"pz:text-muted-foreground/60 pz:hover:text-foreground pz:transition-colors\",\n        )}\n        {...listeners}\n      >\n        <IconGripVertical width={11} height={14} />\n      </button>\n      <LeadingAvatar providerName={providerName} leading={leading} />\n      <span className=\"pz:text-sm pz:font-medium pz:text-foreground pz:flex-1 pz:truncate\">\n        {label}\n      </span>\n      {pricing && <PricingBadge credits={pricing.credits} />}\n      <span\n        aria-hidden\n        className={cn(\n          \"pz:inline-flex pz:items-center pz:justify-center pz:min-w-7 pz:h-5 pz:px-1.5\",\n          \"pz:rounded-full pz:bg-muted pz:text-muted-foreground pz:text-[10.5px]\",\n          \"pz:font-medium pz:tabular-nums\",\n        )}\n      >\n        {orderLabel}\n      </span>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${label}`}\n        onClick={(e) => {\n          e.stopPropagation();\n          onRemove();\n        }}\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:size-5 pz:rounded\",\n          \"pz:text-muted-foreground/70\",\n          \"pz:hover:bg-destructive/10 pz:hover:text-destructive pz:transition-colors\",\n        )}\n      >\n        <XIcon className=\"pz:size-3\" />\n      </button>\n    </li>\n  );\n}\n\nfunction AddProviderControl({\n  options,\n  excluded,\n  onAdd,\n  ariaInvalid,\n}: {\n  options: ProviderOption[];\n  excluded: string[];\n  onAdd: (value: string) => void;\n  ariaInvalid?: boolean;\n}) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n\n  const excludedSet = useMemo(() => new Set(excluded), [excluded]);\n  const available = useMemo(\n    () => options.filter((o) => !excludedSet.has(o.value)),\n    [options, excludedSet],\n  );\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return available;\n    return available.filter(\n      (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q),\n    );\n  }, [available, query]);\n\n  if (available.length === 0 && excluded.length === 0) {\n    return (\n      <div className=\"pz:text-xs pz:text-muted-foreground pz:px-1.5 pz:py-2\">\n        No providers available\n      </div>\n    );\n  }\n\n  if (available.length === 0) return null;\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(next) => {\n        setOpen(next);\n        if (!next) setQuery(\"\");\n      }}\n    >\n      <PopoverTrigger\n        aria-invalid={ariaInvalid || undefined}\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:gap-1.5 pz:w-full\",\n          \"pz:px-2.5 pz:py-1.5 pz:mt-1 pz:rounded-md\",\n          \"pz:border pz:border-dashed pz:border-input pz:bg-transparent\",\n          \"pz:text-xs pz:text-muted-foreground\",\n          \"pz:hover:bg-muted/60 pz:hover:text-foreground pz:hover:border-muted-foreground/40\",\n          \"pz:transition-colors pz:cursor-pointer\",\n        )}\n      >\n        <IconPlus width={12} height={12} />\n        Add provider\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"pz:w-(--anchor-width) pz:p-0 pz:gap-0\">\n        <div className=\"pz:flex pz:items-center pz:gap-1.5 pz:px-2.5 pz:py-2 pz:border-b pz:border-border\">\n          <SearchIcon className=\"pz:size-3.5 pz:text-muted-foreground pz:shrink-0\" />\n          <input\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search providers…\"\n            // biome-ignore lint/a11y/noAutofocus: popover-scoped picker\n            autoFocus\n            className=\"pz:flex-1 pz:bg-transparent pz:outline-none pz:text-sm pz:placeholder:text-muted-foreground/70\"\n          />\n        </div>\n        <ul className=\"pz:flex pz:flex-col pz:p-1 pz:max-h-72 pz:overflow-auto pz:list-none pz:m-0\">\n          {filtered.length === 0 && (\n            <li className=\"pz:px-2 pz:py-3 pz:text-center pz:text-xs pz:text-muted-foreground\">\n              No providers\n            </li>\n          )}\n          {filtered.map((option) => {\n            const { providerName, leading, pricing } = splitWidgets(option.widgets);\n            return (\n              <li key={option.value} className=\"pz:contents\">\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onAdd(option.value);\n                    setOpen(false);\n                    setQuery(\"\");\n                  }}\n                  className={cn(\n                    \"pz:flex pz:items-center pz:gap-2 pz:w-full pz:text-left\",\n                    \"pz:px-2 pz:py-1.5 pz:rounded-md pz:text-sm\",\n                    \"pz:hover:bg-accent pz:hover:text-accent-foreground\",\n                    \"pz:transition-colors pz:cursor-pointer\",\n                  )}\n                >\n                  <LeadingAvatar providerName={providerName} leading={leading} />\n                  <span className=\"pz:flex-1 pz:truncate\">{option.label}</span>\n                  {pricing && <PricingBadge credits={pricing.credits} />}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"providers-input.mjs","names":["XIcon","SearchIcon"],"sources":["../../../../src/components/defaults/adapters/providers-input.tsx"],"sourcesContent":["import {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport { SortableContext, useSortable, verticalListSortingStrategy } from \"@dnd-kit/sortable\";\nimport { type ProviderName, providerCatalog, type WidgetsByKind } from \"@pipe0/base\";\nimport { Search as SearchIcon, X as XIcon } from \"lucide-react\";\nimport { type CSSProperties, useMemo, useState } from \"react\";\nimport { cn } from \"../../../lib/utils.js\";\nimport type { FieldHandle } from \"../../../types/field-handle.js\";\nimport { AvatarGroup } from \"../../../widgets/avatar-group.js\";\nimport { PricingBadge } from \"../../../widgets/pricing-badge.js\";\nimport { WidgetStrip } from \"../../../widgets/widget-strip.js\";\nimport { IconGripVertical, IconPlus } from \"../../internal/icons.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../../ui/popover.js\";\n\ntype ProviderOption = {\n  value: string;\n  label: string;\n  widgets?: WidgetsByKind;\n};\n\n// Stored payloads may reference providers that are no longer offered\n// (deprecated providers are excluded from the options but stay valid), so\n// resolve their display data from the provider catalog to keep the row\n// legible and removable.\nfunction resolveFallbackOption(value: string): ProviderOption {\n  if (!(value in providerCatalog)) return { value, label: value };\n  const provider = value as ProviderName;\n  return {\n    value,\n    label: providerCatalog[provider].label,\n    widgets: { provider_logo: { provider } },\n  };\n}\n\nfunction splitWidgets(widgets: WidgetsByKind | undefined): {\n  providerName: ProviderName | undefined;\n  leading: WidgetsByKind | undefined;\n  pricing: WidgetsByKind[\"pricing\"] | undefined;\n} {\n  if (!widgets) return { providerName: undefined, leading: undefined, pricing: undefined };\n  const { pricing, provider_logo, ...rest } = widgets;\n  const hasLeading = Object.values(rest).some((v) => v != null);\n  return {\n    providerName: provider_logo?.provider,\n    leading: hasLeading ? rest : undefined,\n    pricing,\n  };\n}\n\nfunction LeadingAvatar({\n  providerName,\n  leading,\n}: {\n  providerName: ProviderName | undefined;\n  leading: WidgetsByKind | undefined;\n}) {\n  if (providerName) {\n    return <AvatarGroup providers={[providerName]} size=\"sm\" className=\"pz:shrink-0\" />;\n  }\n  if (leading) {\n    return (\n      <span className=\"pz:flex pz:items-center pz:shrink-0\">\n        <WidgetStrip widgets={leading} size={18} />\n      </span>\n    );\n  }\n  return null;\n}\n\n/**\n * Provider waterfall — vertical, ordered list of providers tried sequentially\n * until a valid result is returned. The list makes the running order legible\n * (numeric badge per row, drag-to-reorder), and the credit widget per\n * provider stays visible.\n */\nexport function ProvidersInputAdapter(field: FieldHandle<\"providers_input\">) {\n  const selected: string[] = useMemo(\n    () => (field.value ?? []).map((p: { provider: string }) => p.provider),\n    [field.value],\n  );\n\n  const options = field.options ?? [];\n  const optionByValue = useMemo(() => {\n    const map = new Map<string, ProviderOption>();\n    for (const o of options) map.set(o.value, o);\n    return map;\n  }, [options]);\n\n  const maxItems = field.meta.maxItems;\n  const atMax = maxItems !== undefined && selected.length >= maxItems;\n\n  const setValue = (next: string[]) => field.setValue(next.map((provider) => ({ provider })));\n\n  const handleRemove = (value: string) => setValue(selected.filter((v) => v !== value));\n  const handleAdd = (value: string) => {\n    if (selected.includes(value)) return;\n    setValue([...selected, value]);\n  };\n\n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n    useSensor(KeyboardSensor),\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n    if (!over || active.id === over.id) return;\n    const from = selected.indexOf(String(active.id));\n    const to = selected.indexOf(String(over.id));\n    if (from === -1 || to === -1) return;\n    const next = [...selected];\n    const [moved] = next.splice(from, 1);\n    next.splice(to, 0, moved);\n    setValue(next);\n  };\n\n  return (\n    <div data-p0=\"input\" className=\"pz:flex pz:flex-col pz:gap-1\">\n      {selected.length > 0 && (\n        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>\n          <SortableContext items={selected} strategy={verticalListSortingStrategy}>\n            <ul className=\"pz:flex pz:flex-col pz:gap-0.5 pz:list-none pz:m-0 pz:p-0\">\n              {selected.map((value, index) => {\n                const option = optionByValue.get(value) ?? resolveFallbackOption(value);\n                return (\n                  <ProviderRow\n                    key={value}\n                    value={value}\n                    index={index}\n                    label={option.label}\n                    widgets={option.widgets}\n                    onRemove={() => handleRemove(value)}\n                  />\n                );\n              })}\n            </ul>\n          </SortableContext>\n        </DndContext>\n      )}\n      {!atMax && (\n        <AddProviderControl\n          options={options}\n          excluded={selected}\n          onAdd={handleAdd}\n          ariaInvalid={!!field.error}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction ProviderRow({\n  value,\n  index,\n  label,\n  widgets,\n  onRemove,\n}: {\n  value: string;\n  index: number;\n  label: string;\n  widgets?: WidgetsByKind;\n  onRemove: () => void;\n}) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: value,\n  });\n  const style: CSSProperties = {\n    transform: transform\n      ? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`\n      : undefined,\n    transition,\n    opacity: isDragging ? 0.6 : 1,\n  };\n\n  const { providerName, leading, pricing } = splitWidgets(widgets);\n  const orderLabel = String(index + 1);\n\n  return (\n    <li\n      ref={setNodeRef}\n      style={style}\n      className={cn(\n        \"pz:group/prov pz:flex pz:items-center pz:gap-2.5 pz:rounded-md pz:px-1.5 pz:py-1.5\",\n        \"pz:hover:bg-muted/60 pz:transition-colors\",\n      )}\n      {...attributes}\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Drag to reorder\"\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:size-4 pz:cursor-grab pz:touch-none\",\n          \"pz:text-muted-foreground/60 pz:hover:text-foreground pz:transition-colors\",\n        )}\n        {...listeners}\n      >\n        <IconGripVertical width={11} height={14} />\n      </button>\n      <LeadingAvatar providerName={providerName} leading={leading} />\n      <span className=\"pz:text-sm pz:font-medium pz:text-foreground pz:flex-1 pz:truncate\">\n        {label}\n      </span>\n      {pricing && <PricingBadge credits={pricing.credits} />}\n      <span\n        aria-hidden\n        className={cn(\n          \"pz:inline-flex pz:items-center pz:justify-center pz:min-w-7 pz:h-5 pz:px-1.5\",\n          \"pz:rounded-full pz:bg-muted pz:text-muted-foreground pz:text-[10.5px]\",\n          \"pz:font-medium pz:tabular-nums\",\n        )}\n      >\n        {orderLabel}\n      </span>\n      <button\n        type=\"button\"\n        aria-label={`Remove ${label}`}\n        onClick={(e) => {\n          e.stopPropagation();\n          onRemove();\n        }}\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:size-5 pz:rounded\",\n          \"pz:text-muted-foreground/70\",\n          \"pz:hover:bg-destructive/10 pz:hover:text-destructive pz:transition-colors\",\n        )}\n      >\n        <XIcon className=\"pz:size-3\" />\n      </button>\n    </li>\n  );\n}\n\nfunction AddProviderControl({\n  options,\n  excluded,\n  onAdd,\n  ariaInvalid,\n}: {\n  options: ProviderOption[];\n  excluded: string[];\n  onAdd: (value: string) => void;\n  ariaInvalid?: boolean;\n}) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n\n  const excludedSet = useMemo(() => new Set(excluded), [excluded]);\n  const available = useMemo(\n    () => options.filter((o) => !excludedSet.has(o.value)),\n    [options, excludedSet],\n  );\n\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return available;\n    return available.filter(\n      (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q),\n    );\n  }, [available, query]);\n\n  if (available.length === 0 && excluded.length === 0) {\n    return (\n      <div className=\"pz:text-xs pz:text-muted-foreground pz:px-1.5 pz:py-2\">\n        No providers available\n      </div>\n    );\n  }\n\n  if (available.length === 0) return null;\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(next) => {\n        setOpen(next);\n        if (!next) setQuery(\"\");\n      }}\n    >\n      <PopoverTrigger\n        aria-invalid={ariaInvalid || undefined}\n        className={cn(\n          \"pz:flex pz:items-center pz:justify-center pz:gap-1.5 pz:w-full\",\n          \"pz:px-2.5 pz:py-1.5 pz:mt-1 pz:rounded-md\",\n          \"pz:border pz:border-dashed pz:border-input pz:bg-transparent\",\n          \"pz:text-xs pz:text-muted-foreground\",\n          \"pz:hover:bg-muted/60 pz:hover:text-foreground pz:hover:border-muted-foreground/40\",\n          \"pz:transition-colors pz:cursor-pointer\",\n        )}\n      >\n        <IconPlus width={12} height={12} />\n        Add provider\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"pz:w-(--anchor-width) pz:p-0 pz:gap-0\">\n        <div className=\"pz:flex pz:items-center pz:gap-1.5 pz:px-2.5 pz:py-2 pz:border-b pz:border-border\">\n          <SearchIcon className=\"pz:size-3.5 pz:text-muted-foreground pz:shrink-0\" />\n          <input\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search providers…\"\n            // biome-ignore lint/a11y/noAutofocus: popover-scoped picker\n            autoFocus\n            className=\"pz:flex-1 pz:bg-transparent pz:outline-none pz:text-sm pz:placeholder:text-muted-foreground/70\"\n          />\n        </div>\n        <ul className=\"pz:flex pz:flex-col pz:p-1 pz:max-h-72 pz:overflow-auto pz:list-none pz:m-0\">\n          {filtered.length === 0 && (\n            <li className=\"pz:px-2 pz:py-3 pz:text-center pz:text-xs pz:text-muted-foreground\">\n              No providers\n            </li>\n          )}\n          {filtered.map((option) => {\n            const { providerName, leading, pricing } = splitWidgets(option.widgets);\n            return (\n              <li key={option.value} className=\"pz:contents\">\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onAdd(option.value);\n                    setOpen(false);\n                    setQuery(\"\");\n                  }}\n                  className={cn(\n                    \"pz:flex pz:items-center pz:gap-2 pz:w-full pz:text-left\",\n                    \"pz:px-2 pz:py-1.5 pz:rounded-md pz:text-sm\",\n                    \"pz:hover:bg-accent pz:hover:text-accent-foreground\",\n                    \"pz:transition-colors pz:cursor-pointer\",\n                  )}\n                >\n                  <LeadingAvatar providerName={providerName} leading={leading} />\n                  <span className=\"pz:flex-1 pz:truncate\">{option.label}</span>\n                  {pricing && <PricingBadge credits={pricing.credits} />}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipe0/react",
-  "version": "0.2.18",
+  "version": "1.0.0",
   "description": "React component library for building forms and catalogs powered by pipe0 pipes and searches.",
   "license": "MIT",
   "author": "pipe0",
@@ -84,7 +84,7 @@
     "react-hook-form": "^7.62.0",
     "swr": "^2.4.1",
     "tailwind-merge": "^3.3.1",
-    "@pipe0/base": "0.5.18"
+    "@pipe0/base": "1.0.0"
   },
   "devDependencies": {
     "@base-ui/react": "^1.6.0",