@reactzero/combo 0.1.0

package/dist/styles/chips.css

@@ -0,0 +1,71 @@
+/* ------------------------------------------------------------------ */
+/* Multi-select chip trigger                                          */
+/* ------------------------------------------------------------------ */
+
+.rzero-combo-trigger--multi {
+  flex-wrap: nowrap;
+  gap: 4px;
+  padding: var(--rzero-combo-input-padding-multi, 4px 8px);
+  align-items: flex-start;
+}
+
+.rzero-combo-trigger-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
+.rzero-combo-trigger-content input {
+  flex: 1 1 60px;
+  min-width: 60px;
+  padding: 2px 4px;
+}
+
+.rzero-combo-trigger-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  padding-top: 2px;
+}
+
+.rzero-combo-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: var(--rzero-combo-chip-padding, 2px 6px);
+  background: var(--rzero-combo-chip-bg, #e5e7eb);
+  color: var(--rzero-combo-chip-color, #374151);
+  border-radius: var(--rzero-combo-chip-radius, 4px);
+  font-size: var(--rzero-combo-chip-font-size, 13px);
+  line-height: 1.4;
+  max-width: 150px;
+}
+
+.rzero-combo-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rzero-combo-chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 2px;
+  color: var(--rzero-combo-chip-remove-color, #6b7280);
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.rzero-combo-chip-remove:hover {
+  color: var(--rzero-combo-chip-remove-hover-color, #111827);
+  background: var(--rzero-combo-chip-remove-hover-bg, rgba(0,0,0,0.08));
+}

package/dist/styles/custom-item.css

@@ -0,0 +1,64 @@
+/* ------------------------------------------------------------------ */
+/* Custom item layout — multi-line with icon, title, description, meta */
+/* ------------------------------------------------------------------ */
+
+.rzero-combo-custom-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 4px 0;
+  width: 100%;
+}
+
+.rzero-combo-custom-item-icon {
+  flex-shrink: 0;
+  width: var(--rzero-combo-custom-item-icon-size, 32px);
+  height: var(--rzero-combo-custom-item-icon-size, 32px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rzero-combo-custom-item-icon-radius, 6px);
+  overflow: hidden;
+}
+
+.rzero-combo-custom-item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.rzero-combo-custom-item-title {
+  font-weight: 500;
+  color: inherit;
+  line-height: 1.3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rzero-combo-custom-item-description {
+  font-size: var(--rzero-combo-item-description-font-size, 12px);
+  color: var(--rzero-combo-item-description-color, #6b7280);
+  line-height: 1.3;
+  margin-top: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rzero-combo-custom-item-meta {
+  flex-shrink: 0;
+  font-size: var(--rzero-combo-item-meta-font-size, 12px);
+  color: var(--rzero-combo-item-meta-color, #9ca3af);
+  align-self: center;
+}
+
+.rzero-combo-custom-item-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: var(--rzero-combo-badge-radius, 10px);
+  background: var(--rzero-combo-badge-bg, #e5e7eb);
+  color: var(--rzero-combo-badge-color, #374151);
+  font-size: var(--rzero-combo-badge-font-size, 11px);
+  font-weight: 500;
+}

package/dist/styles/footer.css

@@ -0,0 +1,73 @@
+/* Footer */
+.rzero-combo-footer {
+  border-top: var(--rzero-combo-footer-border-top, 1px solid #e5e7eb);
+  padding: var(--rzero-combo-footer-padding, 8px 12px);
+  font-size: var(--rzero-combo-input-font-size, 14px);
+  color: var(--rzero-combo-footer-color, #6b7280);
+}
+
+/* Footer actions layout */
+.rzero-combo-footer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.rzero-combo-footer-actions-buttons {
+  display: flex;
+  gap: 6px;
+}
+
+.rzero-combo-footer-actions button {
+  padding: 4px 12px;
+  border: var(--rzero-combo-footer-action-border, 1px solid #d1d5db);
+  border-radius: var(--rzero-combo-footer-action-border-radius, 4px);
+  background: var(--rzero-combo-footer-action-bg, transparent);
+  color: var(--rzero-combo-footer-action-color, #374151);
+  font-size: var(--rzero-combo-footer-action-font-size, 13px);
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+.rzero-combo-footer-actions button:hover {
+  background: var(--rzero-combo-footer-action-hover-bg, #f3f4f6);
+}
+
+.rzero-combo-footer-actions button[data-variant="primary"] {
+  background: var(--rzero-combo-footer-action-primary-bg, #3b82f6);
+  color: var(--rzero-combo-footer-action-primary-color, #ffffff);
+  border-color: var(--rzero-combo-footer-action-primary-bg, #3b82f6);
+}
+
+.rzero-combo-footer-actions button[data-variant="primary"]:hover {
+  background: var(--rzero-combo-footer-action-primary-hover-bg, #2563eb);
+}
+
+.rzero-combo-footer-actions button[data-variant="ghost"] {
+  border-color: transparent;
+  background: transparent;
+}
+
+.rzero-combo-footer-actions button[data-variant="ghost"]:hover {
+  background: var(--rzero-combo-footer-action-hover-bg, #f3f4f6);
+}
+
+.rzero-combo-footer-actions button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Footer note */
+.rzero-combo-footer-note {
+  font-size: var(--rzero-combo-footer-note-font-size, 12px);
+  color: var(--rzero-combo-footer-note-color, #9ca3af);
+}
+
+/* Separator between groups */
+.rzero-combo-separator {
+  height: 1px;
+  background: var(--rzero-combo-separator-color, #e5e7eb);
+  margin: 4px 0;
+  border: none;
+}

package/dist/styles/groups.css

@@ -0,0 +1,23 @@
+/* Sticky group headers */
+.rzero-combo-group-header[data-sticky] {
+  position: sticky;
+  top: 0;
+  background: var(--rzero-combo-popover-bg, #ffffff);
+  z-index: 1;
+}
+
+/* Group header with count badge */
+.rzero-combo-group-header-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: var(--rzero-combo-group-header-count-bg, #e5e7eb);
+  color: var(--rzero-combo-group-header-count-color, #6b7280);
+  font-size: 10px;
+  font-weight: 600;
+  margin-left: 6px;
+}

package/dist/styles/meta.css

@@ -0,0 +1,30 @@
+/* ------------------------------------------------------------------ */
+/* Meta row: hint text, error text, selection count                   */
+/* ------------------------------------------------------------------ */
+
+.rzero-combo-meta {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: var(--rzero-combo-meta-margin-top, 4px);
+  font-size: var(--rzero-combo-meta-font-size, 12px);
+  line-height: 1.4;
+}
+
+.rzero-combo-hint {
+  color: var(--rzero-combo-hint-color, #6b7280);
+}
+
+.rzero-combo-error-text {
+  color: var(--rzero-combo-error-text-color, #dc2626);
+}
+
+.rzero-combo-selection-count {
+  color: var(--rzero-combo-selection-count-color, #9ca3af);
+  white-space: nowrap;
+  margin-left: auto;
+}
+.rzero-combo-selection-count[data-warning] {
+  color: var(--rzero-combo-selection-count-warning-color, #f59e0b);
+}

package/dist/styles/radio.css

@@ -0,0 +1,36 @@
+/* ------------------------------------------------------------------ */
+/* Radio variant — pure CSS via ::before pseudo-element               */
+/* ------------------------------------------------------------------ */
+
+.rzero-combo-item[data-variant="radio"] {
+  gap: 8px;
+  justify-content: flex-start;
+}
+
+.rzero-combo-item[data-variant="radio"]::before {
+  content: '';
+  flex-shrink: 0;
+  width: var(--rzero-combo-radio-size, 16px);
+  height: var(--rzero-combo-radio-size, 16px);
+  border: 2px solid var(--rzero-combo-radio-border, #d1d5db);
+  border-radius: 50%;
+  background: var(--rzero-combo-radio-bg, #ffffff);
+  transition: background 150ms ease, border-color 150ms ease;
+}
+
+.rzero-combo-item[data-variant="radio"][data-selected]::before {
+  border-color: var(--rzero-combo-radio-checked-border, #3b82f6);
+  background: radial-gradient(
+    circle,
+    var(--rzero-combo-radio-checked-dot, #3b82f6) 35%,
+    transparent 36%
+  );
+}
+
+.rzero-combo-item[data-variant="radio"][data-highlighted]::before {
+  border-color: var(--rzero-combo-radio-hover-border, #9ca3af);
+}
+
+.rzero-combo-item[data-variant="radio"][data-selected][data-highlighted]::before {
+  border-color: var(--rzero-combo-radio-checked-border, #3b82f6);
+}

package/dist/styles/select.css

@@ -0,0 +1,35 @@
+/* Select variant trigger */
+.rzero-combo-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  border: var(--rzero-combo-input-border, 1px solid #d1d5db);
+  border-radius: var(--rzero-combo-input-border-radius, 6px);
+  background: var(--rzero-combo-input-bg, #ffffff);
+  padding: var(--rzero-combo-input-padding, 8px 12px);
+  min-height: var(--rzero-combo-input-height, 40px);
+  font-size: var(--rzero-combo-input-font-size, 14px);
+  color: var(--rzero-combo-input-color, #111827);
+  cursor: pointer;
+  transition: box-shadow 150ms ease, border-color 150ms ease;
+}
+
+.rzero-combo-select-trigger:focus-visible {
+  box-shadow: var(--rzero-combo-input-focus-ring, 0 0 0 2px #3b82f6);
+  outline: none;
+}
+
+.rzero-combo-select-trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.rzero-combo-select-value {
+  flex: 1;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/styles/states.css

@@ -0,0 +1,22 @@
+/* Empty / loading states */
+.rzero-combo-empty,
+.rzero-combo-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--rzero-combo-item-height, 36px);
+  padding: var(--rzero-combo-item-padding, 0 12px);
+  color: var(--rzero-combo-icon-muted-color, #9ca3af);
+  font-size: var(--rzero-combo-input-font-size, 14px);
+}
+
+/* Error state */
+.rzero-combo-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--rzero-combo-item-height, 36px);
+  padding: var(--rzero-combo-item-padding, 0 12px);
+  color: var(--rzero-combo-error-color, #dc2626);
+  font-size: var(--rzero-combo-input-font-size, 14px);
+}

package/dist/tabs.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("react"),k=require("./Combo-Cx3kSkop.cjs");function w(v){const{tabs:a,defaultActiveTab:f,activeTab:l,onTabChange:m,renderTabLabel:g,renderFooter:h,...e}=v,c=d.useId(),T=d.useRef(null),[y,p]=d.useState(()=>f??a[0]?.id??""),o=l!==void 0?l:y,u=d.useCallback(t=>{l===void 0&&p(t),m?.(t)},[l,m]),I=d.useMemo(()=>a.find(n=>n.id===o)?.items??[],[a,o]),C=d.useCallback(t=>{const n=a.filter(x=>!x.disabled),s=n.findIndex(x=>x.id===o);if(s===-1)return;let i=-1;if(t.key==="ArrowRight")i=(s+1)%n.length;else if(t.key==="ArrowLeft")i=(s-1+n.length)%n.length;else if(t.key==="Home")i=0;else if(t.key==="End")i=n.length-1;else return;t.preventDefault();const b=n[i];u(b.id),T.current?.querySelector(`[data-tab-id="${b.id}"]`)?.focus()},[a,o,u]),j=d.useCallback(t=>{if(!t.ctrlKey&&!t.metaKey)return;const n=a.filter(b=>!b.disabled),s=n.findIndex(b=>b.id===o);if(s===-1)return;let i=-1;if(t.key==="ArrowRight")i=(s+1)%n.length;else if(t.key==="ArrowLeft")i=(s-1+n.length)%n.length;else return;t.preventDefault(),u(n[i].id)},[a,o,u]);return r.jsx(k.Combo,{...e,items:I,renderFooter:h,onInputKeyDown:j,renderListHeader:()=>r.jsx(A,{tabs:a,activeTabId:o,baseId:c,tabListRef:T,onTabChange:u,onKeyDown:C,renderTabLabel:g})})}function A({tabs:v,activeTabId:a,baseId:f,tabListRef:l,onTabChange:m,onKeyDown:g,renderTabLabel:h}){return r.jsx("div",{ref:l,className:"rzero-combo-tabs",role:"tablist","aria-label":"Item categories",onMouseDown:e=>e.preventDefault(),children:v.map(e=>{const c=e.id===a;return r.jsx("button",{type:"button",role:"tab",id:`${f}-tab-${e.id}`,"aria-selected":c,"aria-controls":`${f}-panel-${e.id}`,"aria-disabled":e.disabled||void 0,"data-tab-id":e.id,"data-active":c||void 0,"data-disabled":e.disabled||void 0,className:"rzero-combo-tab",tabIndex:c?0:-1,onClick:()=>{e.disabled||m(e.id)},onKeyDown:g,children:h?h(e,c):r.jsxs(r.Fragment,{children:[e.icon&&r.jsx("span",{className:"rzero-combo-tab-icon","aria-hidden":"true",children:e.icon}),r.jsx("span",{children:e.label}),e.badge!==void 0&&r.jsx("span",{className:"rzero-combo-tab-badge",children:e.badge})]})},e.id)})})}exports.TabbedCombo=w;
+//# sourceMappingURL=tabs.cjs.map

package/dist/tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.cjs","sources":["../src/components/tabs/TabbedCombo.tsx"],"sourcesContent":["import { useState, useCallback, useRef, useMemo, useId } from 'react';\nimport { Combo } from '../Combo';\nimport type { ComboProps } from '../Combo';\nimport type { ReactNode, KeyboardEvent, RefObject } from 'react';\n\nexport interface TabConfig<T> {\n  /** Unique tab identifier */\n  id: string;\n  /** Tab display label */\n  label: string;\n  /** Items belonging to this tab */\n  items: T[];\n  /** Optional icon for the tab */\n  icon?: ReactNode;\n  /** Optional badge (e.g. count) */\n  badge?: ReactNode;\n  /** Disable this tab */\n  disabled?: boolean;\n}\n\nexport interface TabbedComboProps<T>\n  extends Omit<ComboProps<T>, 'items' | 'groups'> {\n  /** Tab configuration with per-tab items */\n  tabs: TabConfig<T>[];\n  /** Default active tab ID (uncontrolled) */\n  defaultActiveTab?: string;\n  /** Active tab ID (controlled) */\n  activeTab?: string;\n  /** Callback when active tab changes */\n  onTabChange?: (tabId: string) => void;\n  /** Custom tab label renderer */\n  renderTabLabel?: (tab: TabConfig<T>, isActive: boolean) => ReactNode;\n}\n\n/**\n * Combo with a tab strip inside the popover for categorized content.\n * Each tab filters to its own set of items.\n *\n * @example\n * ```tsx\n * <TabbedCombo\n *   tabs={[\n *     { id: 'fruits', label: 'Fruits', items: fruits },\n *     { id: 'vegetables', label: 'Vegetables', items: vegetables },\n *   ]}\n *   placeholder=\"Search food...\"\n * />\n * ```\n */\nexport function TabbedCombo<T>(props: TabbedComboProps<T>) {\n  const {\n    tabs,\n    defaultActiveTab,\n    activeTab: controlledActiveTab,\n    onTabChange,\n    renderTabLabel,\n    renderFooter,\n    ...comboProps\n  } = props;\n\n  const baseId = useId();\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  // Active tab state (controlled or uncontrolled)\n  const [internalActiveTab, setInternalActiveTab] = useState(\n    () => defaultActiveTab ?? tabs[0]?.id ?? '',\n  );\n\n  const activeTabId =\n    controlledActiveTab !== undefined ? controlledActiveTab : internalActiveTab;\n\n  const handleTabChange = useCallback(\n    (tabId: string) => {\n      if (controlledActiveTab === undefined) {\n        setInternalActiveTab(tabId);\n      }\n      onTabChange?.(tabId);\n    },\n    [controlledActiveTab, onTabChange],\n  );\n\n  // Get items for the active tab\n  const activeItems = useMemo(() => {\n    const tab = tabs.find((t) => t.id === activeTabId);\n    return tab?.items ?? [];\n  }, [tabs, activeTabId]);\n\n  // Tab keyboard navigation (Left/Right arrow)\n  const handleTabKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const enabledTabs = tabs.filter((t) => !t.disabled);\n      const currentIdx = enabledTabs.findIndex((t) => t.id === activeTabId);\n      if (currentIdx === -1) return;\n\n      let nextIdx = -1;\n      if (e.key === 'ArrowRight') {\n        nextIdx = (currentIdx + 1) % enabledTabs.length;\n      } else if (e.key === 'ArrowLeft') {\n        nextIdx = (currentIdx - 1 + enabledTabs.length) % enabledTabs.length;\n      } else if (e.key === 'Home') {\n        nextIdx = 0;\n      } else if (e.key === 'End') {\n        nextIdx = enabledTabs.length - 1;\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      const nextTab = enabledTabs[nextIdx];\n      handleTabChange(nextTab.id);\n\n      // Focus the activated tab button\n      const tabEl = tabListRef.current?.querySelector(\n        `[data-tab-id=\"${nextTab.id}\"]`,\n      ) as HTMLButtonElement | null;\n      tabEl?.focus();\n    },\n    [tabs, activeTabId, handleTabChange],\n  );\n\n  // Ctrl+Arrow from the input switches tabs without losing focus\n  const handleInputKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (!e.ctrlKey && !e.metaKey) return;\n\n      const enabledTabs = tabs.filter((t) => !t.disabled);\n      const currentIdx = enabledTabs.findIndex((t) => t.id === activeTabId);\n      if (currentIdx === -1) return;\n\n      let nextIdx = -1;\n      if (e.key === 'ArrowRight') {\n        nextIdx = (currentIdx + 1) % enabledTabs.length;\n      } else if (e.key === 'ArrowLeft') {\n        nextIdx = (currentIdx - 1 + enabledTabs.length) % enabledTabs.length;\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      handleTabChange(enabledTabs[nextIdx].id);\n    },\n    [tabs, activeTabId, handleTabChange],\n  );\n\n  return (\n    <Combo<T>\n      {...comboProps}\n      items={activeItems}\n      renderFooter={renderFooter}\n      onInputKeyDown={handleInputKeyDown}\n      renderListHeader={() => (\n        <TabStrip\n          tabs={tabs}\n          activeTabId={activeTabId}\n          baseId={baseId}\n          tabListRef={tabListRef}\n          onTabChange={handleTabChange}\n          onKeyDown={handleTabKeyDown}\n          renderTabLabel={renderTabLabel}\n        />\n      )}\n    />\n  );\n}\n\n// Internal TabStrip component\nfunction TabStrip<T>({\n  tabs,\n  activeTabId,\n  baseId,\n  tabListRef,\n  onTabChange,\n  onKeyDown,\n  renderTabLabel,\n}: {\n  tabs: TabConfig<T>[];\n  activeTabId: string;\n  baseId: string;\n  tabListRef: RefObject<HTMLDivElement | null>;\n  onTabChange: (tabId: string) => void;\n  onKeyDown: (e: KeyboardEvent) => void;\n  renderTabLabel?: (tab: TabConfig<T>, isActive: boolean) => ReactNode;\n}) {\n  return (\n    <div\n      ref={tabListRef as RefObject<HTMLDivElement>}\n      className=\"rzero-combo-tabs\"\n      role=\"tablist\"\n      aria-label=\"Item categories\"\n      onMouseDown={(e) => e.preventDefault()}\n    >\n      {tabs.map((tab) => {\n        const isActive = tab.id === activeTabId;\n        return (\n          <button\n            key={tab.id}\n            type=\"button\"\n            role=\"tab\"\n            id={`${baseId}-tab-${tab.id}`}\n            aria-selected={isActive}\n            aria-controls={`${baseId}-panel-${tab.id}`}\n            aria-disabled={tab.disabled || undefined}\n            data-tab-id={tab.id}\n            data-active={isActive || undefined}\n            data-disabled={tab.disabled || undefined}\n            className=\"rzero-combo-tab\"\n            tabIndex={isActive ? 0 : -1}\n            onClick={() => {\n              if (tab.disabled) return;\n              onTabChange(tab.id);\n            }}\n            onKeyDown={onKeyDown}\n          >\n            {renderTabLabel ? (\n              renderTabLabel(tab, isActive)\n            ) : (\n              <>\n                {tab.icon && (\n                  <span className=\"rzero-combo-tab-icon\" aria-hidden=\"true\">\n                    {tab.icon}\n                  </span>\n                )}\n                <span>{tab.label}</span>\n                {tab.badge !== undefined && (\n                  <span className=\"rzero-combo-tab-badge\">{tab.badge}</span>\n                )}\n              </>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["TabbedCombo","props","tabs","defaultActiveTab","controlledActiveTab","onTabChange","renderTabLabel","renderFooter","comboProps","baseId","useId","tabListRef","useRef","internalActiveTab","setInternalActiveTab","useState","activeTabId","handleTabChange","useCallback","tabId","activeItems","useMemo","t","handleTabKeyDown","e","enabledTabs","currentIdx","nextIdx","nextTab","handleInputKeyDown","jsx","Combo","TabStrip","onKeyDown","tab","isActive","jsxs","Fragment"],"mappings":"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"}

package/dist/tabs.js

@@ -0,0 +1,132 @@
+import { jsx as d, jsxs as k, Fragment as C } from "react/jsx-runtime";
+import { useId as D, useRef as K, useState as $, useCallback as p, useMemo as z } from "react";
+import { C as L } from "./Combo-qs6_L512.js";
+function F(h) {
+  const {
+    tabs: i,
+    defaultActiveTab: u,
+    activeTab: s,
+    onTabChange: f,
+    renderTabLabel: v,
+    renderFooter: m,
+    ...e
+  } = h, l = D(), T = K(null), [y, x] = $(
+    () => u ?? i[0]?.id ?? ""
+  ), a = s !== void 0 ? s : y, b = p(
+    (t) => {
+      s === void 0 && x(t), f?.(t);
+    },
+    [s, f]
+  ), I = z(() => i.find((n) => n.id === a)?.items ?? [], [i, a]), w = p(
+    (t) => {
+      const n = i.filter((g) => !g.disabled), o = n.findIndex((g) => g.id === a);
+      if (o === -1) return;
+      let r = -1;
+      if (t.key === "ArrowRight")
+        r = (o + 1) % n.length;
+      else if (t.key === "ArrowLeft")
+        r = (o - 1 + n.length) % n.length;
+      else if (t.key === "Home")
+        r = 0;
+      else if (t.key === "End")
+        r = n.length - 1;
+      else
+        return;
+      t.preventDefault();
+      const c = n[r];
+      b(c.id), T.current?.querySelector(
+        `[data-tab-id="${c.id}"]`
+      )?.focus();
+    },
+    [i, a, b]
+  ), A = p(
+    (t) => {
+      if (!t.ctrlKey && !t.metaKey) return;
+      const n = i.filter((c) => !c.disabled), o = n.findIndex((c) => c.id === a);
+      if (o === -1) return;
+      let r = -1;
+      if (t.key === "ArrowRight")
+        r = (o + 1) % n.length;
+      else if (t.key === "ArrowLeft")
+        r = (o - 1 + n.length) % n.length;
+      else
+        return;
+      t.preventDefault(), b(n[r].id);
+    },
+    [i, a, b]
+  );
+  return /* @__PURE__ */ d(
+    L,
+    {
+      ...e,
+      items: I,
+      renderFooter: m,
+      onInputKeyDown: A,
+      renderListHeader: () => /* @__PURE__ */ d(
+        N,
+        {
+          tabs: i,
+          activeTabId: a,
+          baseId: l,
+          tabListRef: T,
+          onTabChange: b,
+          onKeyDown: w,
+          renderTabLabel: v
+        }
+      )
+    }
+  );
+}
+function N({
+  tabs: h,
+  activeTabId: i,
+  baseId: u,
+  tabListRef: s,
+  onTabChange: f,
+  onKeyDown: v,
+  renderTabLabel: m
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: s,
+      className: "rzero-combo-tabs",
+      role: "tablist",
+      "aria-label": "Item categories",
+      onMouseDown: (e) => e.preventDefault(),
+      children: h.map((e) => {
+        const l = e.id === i;
+        return /* @__PURE__ */ d(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            id: `${u}-tab-${e.id}`,
+            "aria-selected": l,
+            "aria-controls": `${u}-panel-${e.id}`,
+            "aria-disabled": e.disabled || void 0,
+            "data-tab-id": e.id,
+            "data-active": l || void 0,
+            "data-disabled": e.disabled || void 0,
+            className: "rzero-combo-tab",
+            tabIndex: l ? 0 : -1,
+            onClick: () => {
+              e.disabled || f(e.id);
+            },
+            onKeyDown: v,
+            children: m ? m(e, l) : /* @__PURE__ */ k(C, { children: [
+              e.icon && /* @__PURE__ */ d("span", { className: "rzero-combo-tab-icon", "aria-hidden": "true", children: e.icon }),
+              /* @__PURE__ */ d("span", { children: e.label }),
+              e.badge !== void 0 && /* @__PURE__ */ d("span", { className: "rzero-combo-tab-badge", children: e.badge })
+            ] })
+          },
+          e.id
+        );
+      })
+    }
+  );
+}
+export {
+  F as TabbedCombo
+};
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../src/components/tabs/TabbedCombo.tsx"],"sourcesContent":["import { useState, useCallback, useRef, useMemo, useId } from 'react';\nimport { Combo } from '../Combo';\nimport type { ComboProps } from '../Combo';\nimport type { ReactNode, KeyboardEvent, RefObject } from 'react';\n\nexport interface TabConfig<T> {\n  /** Unique tab identifier */\n  id: string;\n  /** Tab display label */\n  label: string;\n  /** Items belonging to this tab */\n  items: T[];\n  /** Optional icon for the tab */\n  icon?: ReactNode;\n  /** Optional badge (e.g. count) */\n  badge?: ReactNode;\n  /** Disable this tab */\n  disabled?: boolean;\n}\n\nexport interface TabbedComboProps<T>\n  extends Omit<ComboProps<T>, 'items' | 'groups'> {\n  /** Tab configuration with per-tab items */\n  tabs: TabConfig<T>[];\n  /** Default active tab ID (uncontrolled) */\n  defaultActiveTab?: string;\n  /** Active tab ID (controlled) */\n  activeTab?: string;\n  /** Callback when active tab changes */\n  onTabChange?: (tabId: string) => void;\n  /** Custom tab label renderer */\n  renderTabLabel?: (tab: TabConfig<T>, isActive: boolean) => ReactNode;\n}\n\n/**\n * Combo with a tab strip inside the popover for categorized content.\n * Each tab filters to its own set of items.\n *\n * @example\n * ```tsx\n * <TabbedCombo\n *   tabs={[\n *     { id: 'fruits', label: 'Fruits', items: fruits },\n *     { id: 'vegetables', label: 'Vegetables', items: vegetables },\n *   ]}\n *   placeholder=\"Search food...\"\n * />\n * ```\n */\nexport function TabbedCombo<T>(props: TabbedComboProps<T>) {\n  const {\n    tabs,\n    defaultActiveTab,\n    activeTab: controlledActiveTab,\n    onTabChange,\n    renderTabLabel,\n    renderFooter,\n    ...comboProps\n  } = props;\n\n  const baseId = useId();\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  // Active tab state (controlled or uncontrolled)\n  const [internalActiveTab, setInternalActiveTab] = useState(\n    () => defaultActiveTab ?? tabs[0]?.id ?? '',\n  );\n\n  const activeTabId =\n    controlledActiveTab !== undefined ? controlledActiveTab : internalActiveTab;\n\n  const handleTabChange = useCallback(\n    (tabId: string) => {\n      if (controlledActiveTab === undefined) {\n        setInternalActiveTab(tabId);\n      }\n      onTabChange?.(tabId);\n    },\n    [controlledActiveTab, onTabChange],\n  );\n\n  // Get items for the active tab\n  const activeItems = useMemo(() => {\n    const tab = tabs.find((t) => t.id === activeTabId);\n    return tab?.items ?? [];\n  }, [tabs, activeTabId]);\n\n  // Tab keyboard navigation (Left/Right arrow)\n  const handleTabKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const enabledTabs = tabs.filter((t) => !t.disabled);\n      const currentIdx = enabledTabs.findIndex((t) => t.id === activeTabId);\n      if (currentIdx === -1) return;\n\n      let nextIdx = -1;\n      if (e.key === 'ArrowRight') {\n        nextIdx = (currentIdx + 1) % enabledTabs.length;\n      } else if (e.key === 'ArrowLeft') {\n        nextIdx = (currentIdx - 1 + enabledTabs.length) % enabledTabs.length;\n      } else if (e.key === 'Home') {\n        nextIdx = 0;\n      } else if (e.key === 'End') {\n        nextIdx = enabledTabs.length - 1;\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      const nextTab = enabledTabs[nextIdx];\n      handleTabChange(nextTab.id);\n\n      // Focus the activated tab button\n      const tabEl = tabListRef.current?.querySelector(\n        `[data-tab-id=\"${nextTab.id}\"]`,\n      ) as HTMLButtonElement | null;\n      tabEl?.focus();\n    },\n    [tabs, activeTabId, handleTabChange],\n  );\n\n  // Ctrl+Arrow from the input switches tabs without losing focus\n  const handleInputKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (!e.ctrlKey && !e.metaKey) return;\n\n      const enabledTabs = tabs.filter((t) => !t.disabled);\n      const currentIdx = enabledTabs.findIndex((t) => t.id === activeTabId);\n      if (currentIdx === -1) return;\n\n      let nextIdx = -1;\n      if (e.key === 'ArrowRight') {\n        nextIdx = (currentIdx + 1) % enabledTabs.length;\n      } else if (e.key === 'ArrowLeft') {\n        nextIdx = (currentIdx - 1 + enabledTabs.length) % enabledTabs.length;\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      handleTabChange(enabledTabs[nextIdx].id);\n    },\n    [tabs, activeTabId, handleTabChange],\n  );\n\n  return (\n    <Combo<T>\n      {...comboProps}\n      items={activeItems}\n      renderFooter={renderFooter}\n      onInputKeyDown={handleInputKeyDown}\n      renderListHeader={() => (\n        <TabStrip\n          tabs={tabs}\n          activeTabId={activeTabId}\n          baseId={baseId}\n          tabListRef={tabListRef}\n          onTabChange={handleTabChange}\n          onKeyDown={handleTabKeyDown}\n          renderTabLabel={renderTabLabel}\n        />\n      )}\n    />\n  );\n}\n\n// Internal TabStrip component\nfunction TabStrip<T>({\n  tabs,\n  activeTabId,\n  baseId,\n  tabListRef,\n  onTabChange,\n  onKeyDown,\n  renderTabLabel,\n}: {\n  tabs: TabConfig<T>[];\n  activeTabId: string;\n  baseId: string;\n  tabListRef: RefObject<HTMLDivElement | null>;\n  onTabChange: (tabId: string) => void;\n  onKeyDown: (e: KeyboardEvent) => void;\n  renderTabLabel?: (tab: TabConfig<T>, isActive: boolean) => ReactNode;\n}) {\n  return (\n    <div\n      ref={tabListRef as RefObject<HTMLDivElement>}\n      className=\"rzero-combo-tabs\"\n      role=\"tablist\"\n      aria-label=\"Item categories\"\n      onMouseDown={(e) => e.preventDefault()}\n    >\n      {tabs.map((tab) => {\n        const isActive = tab.id === activeTabId;\n        return (\n          <button\n            key={tab.id}\n            type=\"button\"\n            role=\"tab\"\n            id={`${baseId}-tab-${tab.id}`}\n            aria-selected={isActive}\n            aria-controls={`${baseId}-panel-${tab.id}`}\n            aria-disabled={tab.disabled || undefined}\n            data-tab-id={tab.id}\n            data-active={isActive || undefined}\n            data-disabled={tab.disabled || undefined}\n            className=\"rzero-combo-tab\"\n            tabIndex={isActive ? 0 : -1}\n            onClick={() => {\n              if (tab.disabled) return;\n              onTabChange(tab.id);\n            }}\n            onKeyDown={onKeyDown}\n          >\n            {renderTabLabel ? (\n              renderTabLabel(tab, isActive)\n            ) : (\n              <>\n                {tab.icon && (\n                  <span className=\"rzero-combo-tab-icon\" aria-hidden=\"true\">\n                    {tab.icon}\n                  </span>\n                )}\n                <span>{tab.label}</span>\n                {tab.badge !== undefined && (\n                  <span className=\"rzero-combo-tab-badge\">{tab.badge}</span>\n                )}\n              </>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["TabbedCombo","props","tabs","defaultActiveTab","controlledActiveTab","onTabChange","renderTabLabel","renderFooter","comboProps","baseId","useId","tabListRef","useRef","internalActiveTab","setInternalActiveTab","useState","activeTabId","handleTabChange","useCallback","tabId","activeItems","useMemo","t","handleTabKeyDown","e","enabledTabs","currentIdx","nextIdx","nextTab","handleInputKeyDown","jsx","Combo","TabStrip","onKeyDown","tab","isActive","jsxs","Fragment"],"mappings":"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"}

package/dist/themes/dark.css

@@ -0,0 +1,96 @@
+[data-rzero-theme="dark"] {
+  /* Input */
+  --rzero-combo-input-bg: #1f2937;
+  --rzero-combo-input-border: 1px solid #374151;
+  --rzero-combo-input-color: #f9fafb;
+  --rzero-combo-input-hover-border: #60a5fa;
+  --rzero-combo-input-focus-ring: 0 0 0 2px #60a5fa;
+
+  /* Label & hint */
+  --rzero-combo-label-color: #e2e8f0;
+  --rzero-combo-hint-color: #94a3b8;
+
+  /* Popover */
+  --rzero-combo-popover-bg: #1f2937;
+  --rzero-combo-popover-border: 1px solid #374151;
+  --rzero-combo-popover-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+
+  /* Items */
+  --rzero-combo-item-color: #e5e7eb;
+  --rzero-combo-item-hover-bg: #374151;
+  --rzero-combo-item-selected-bg: #1e3a5f;
+  --rzero-combo-item-selected-color: #93c5fd;
+  --rzero-combo-item-highlighted-bg: #1e3a5f;
+  --rzero-combo-item-description-color: #94a3b8;
+  --rzero-combo-item-meta-color: #64748b;
+
+  /* Group headers */
+  --rzero-combo-group-header-color: #94a3b8;
+  --rzero-combo-group-header-count-bg: #374151;
+  --rzero-combo-group-header-count-color: #94a3b8;
+
+  /* Icons */
+  --rzero-combo-icon-muted-color: #64748b;
+
+  /* Chips */
+  --rzero-combo-chip-bg: #312e81;
+  --rzero-combo-chip-color: #c7d2fe;
+  --rzero-combo-chip-remove-color: #94a3b8;
+  --rzero-combo-chip-remove-hover-color: #f1f5f9;
+  --rzero-combo-chip-remove-hover-bg: rgba(255, 255, 255, 0.1);
+
+  /* Error states */
+  --rzero-combo-error-border: #f87171;
+  --rzero-combo-error-color: #f87171;
+  --rzero-combo-error-text-color: #fca5a5;
+  --rzero-combo-error-focus-ring: 0 0 0 2px #f87171;
+
+  /* Selection count */
+  --rzero-combo-selection-count-color: #94a3b8;
+  --rzero-combo-selection-count-warning-color: #fbbf24;
+
+  /* Checkbox variant */
+  --rzero-combo-checkbox-border: #4b5563;
+  --rzero-combo-checkbox-bg: #374151;
+  --rzero-combo-checkbox-checked-bg: #60a5fa;
+  --rzero-combo-checkbox-checked-border: #60a5fa;
+  --rzero-combo-checkbox-hover-border: #94a3b8;
+
+  /* Radio variant */
+  --rzero-combo-radio-border: #4b5563;
+  --rzero-combo-radio-bg: #374151;
+  --rzero-combo-radio-checked-border: #60a5fa;
+  --rzero-combo-radio-checked-dot: #60a5fa;
+  --rzero-combo-radio-hover-border: #94a3b8;
+
+  /* Badges */
+  --rzero-combo-badge-bg: #374151;
+  --rzero-combo-badge-color: #d1d5db;
+
+  /* Footer */
+  --rzero-combo-footer-border-top: 1px solid #374151;
+  --rzero-combo-footer-color: #94a3b8;
+  --rzero-combo-footer-note-color: #64748b;
+  --rzero-combo-footer-action-border: 1px solid #4b5563;
+  --rzero-combo-footer-action-color: #e5e7eb;
+  --rzero-combo-footer-action-hover-bg: #374151;
+  --rzero-combo-footer-action-primary-bg: #60a5fa;
+  --rzero-combo-footer-action-primary-color: #111827;
+  --rzero-combo-footer-action-primary-hover-bg: #3b82f6;
+
+  /* Separator */
+  --rzero-combo-separator-color: #374151;
+
+  /* Tabs */
+  --rzero-combo-tab-border-color: #374151;
+  --rzero-combo-tab-color: #94a3b8;
+  --rzero-combo-tab-hover-bg: #374151;
+  --rzero-combo-tab-hover-color: #e5e7eb;
+  --rzero-combo-tab-focus-ring: #60a5fa;
+  --rzero-combo-tab-active-color: #f9fafb;
+  --rzero-combo-tab-active-border-color: #60a5fa;
+  --rzero-combo-tab-badge-bg: #374151;
+  --rzero-combo-tab-badge-color: #94a3b8;
+  --rzero-combo-tab-badge-active-bg: #1e3a5f;
+  --rzero-combo-tab-badge-active-color: #93c5fd;
+}