@kamaldgrt/ui 0.1.0 → 0.2.0

package/README.md

@@ -6,6 +6,7 @@ Shared React UI primitives styled with Tailwind CSS theme tokens:
 - **`ConfirmModal`**: message plus Cancel and Confirm, with an optional `danger` style and an optional secondary action.
 - **`PromptModal`**: one or more labeled text inputs plus Cancel and OK. It replaces `window.prompt`.
 - **`Drawer`**: right-side slide-over panel with an enter and exit transition and an optional header icon.
+- **`SearchableSelect`**: single-select with a search box. Ids can be strings or numbers, options can have icons, and an optional `allLabel` is a pinned "no filter" choice.
 
 All components are client components (`"use client"` is included in the build).
 
@@ -56,7 +57,7 @@ The components use semantic color tokens, so each app keeps its own look. The ap
 ## Usage
 
 ```tsx
-import { ConfirmModal, Drawer, Modal, PromptModal } from "@kamaldgrt/ui";
+import { ConfirmModal, Drawer, Modal, PromptModal, SearchableSelect } from "@kamaldgrt/ui";
 
 <ConfirmModal
   isOpen={open}
@@ -79,6 +80,14 @@ import { ConfirmModal, Drawer, Modal, PromptModal } from "@kamaldgrt/ui";
   title="Rename"
   fields={[{ name: "name", label: "Name", defaultValue: current }]}
 />
+
+<SearchableSelect
+  ariaLabel="Status"
+  options={[{ id: "open", label: "Open" }, { id: "done", label: "Done" }]}
+  value={status}
+  onChange={setStatus}
+  allLabel="Any status"
+/>
 ```
 
 Behavior worth knowing:

package/dist/index.d.ts

@@ -46,5 +46,21 @@ declare function PromptModal({ isOpen, onClose, onSubmit, title, fields, submitL
     submitLabel?: string;
 }): react.JSX.Element;
 
-export { ConfirmModal, Drawer, Modal, PromptModal };
-export type { PromptField };
+type SearchableSelectOption<T extends string | number = number> = {
+    id: T;
+    label: string;
+    icon?: ReactNode;
+};
+declare function SearchableSelect<T extends string | number = number>({ options, value, onChange, allLabel, placeholder, className, compact, ariaLabel, }: {
+    options: SearchableSelectOption<T>[];
+    value: T | null;
+    onChange: (id: T | null) => void;
+    allLabel?: string;
+    placeholder?: string;
+    className?: string;
+    compact?: boolean;
+    ariaLabel?: string;
+}): react.JSX.Element;
+
+export { ConfirmModal, Drawer, Modal, PromptModal, SearchableSelect };
+export type { PromptField, SearchableSelectOption };

package/dist/index.js

@@ -285,9 +285,129 @@ function PromptModal({
     }
   ) });
 }
+
+// src/SearchableSelect.tsx
+import { useEffect as useEffect4, useMemo, useRef as useRef3, useState as useState3 } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function SearchableSelect({
+  options,
+  value,
+  onChange,
+  allLabel,
+  placeholder = "Search\u2026",
+  className,
+  compact = false,
+  ariaLabel
+}) {
+  var _a;
+  const triggerSize = compact ? "py-0.5 text-xs" : "py-1.5 text-sm";
+  const rowSize = compact ? "py-0.5 text-xs" : "py-1 text-sm";
+  const [open, setOpen] = useState3(false);
+  const [query, setQuery] = useState3("");
+  const containerRef = useRef3(null);
+  const inputRef = useRef3(null);
+  useEffect4(() => {
+    if (!open) return;
+    function handlePointerDown(e) {
+      var _a2;
+      if (!((_a2 = containerRef.current) == null ? void 0 : _a2.contains(e.target))) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
+  useEffect4(() => {
+    var _a2;
+    if (open) (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+  }, [open]);
+  const filtered = useMemo(
+    () => options.filter(
+      (o) => o.label.toLowerCase().includes(query.trim().toLowerCase())
+    ),
+    [options, query]
+  );
+  const selected = options.find((o) => o.id === value);
+  const selectedLabel = value === null ? allLabel != null ? allLabel : "Select\u2026" : (_a = selected == null ? void 0 : selected.label) != null ? _a : "Select\u2026";
+  function toggleOpen() {
+    setOpen((wasOpen) => {
+      const nowOpen = !wasOpen;
+      if (nowOpen) setQuery("");
+      return nowOpen;
+    });
+  }
+  function select(id) {
+    onChange(id);
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs5("div", { ref: containerRef, className: `relative ${className != null ? className : ""}`, children: [
+    /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        "aria-label": ariaLabel,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        onClick: toggleOpen,
+        className: `flex w-full items-center justify-between gap-2 rounded-md border border-border bg-surface px-3 ${triggerSize} text-left text-foreground`,
+        children: [
+          /* @__PURE__ */ jsxs5("span", { className: "flex min-w-0 items-center gap-2", children: [
+            selected == null ? void 0 : selected.icon,
+            /* @__PURE__ */ jsx5("span", { className: "min-w-0 break-words", children: selectedLabel })
+          ] }),
+          /* @__PURE__ */ jsx5(
+            ChevronDown,
+            {
+              className: `h-4 w-4 shrink-0 text-muted transition-transform ${open ? "rotate-180" : ""}`
+            }
+          )
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs5("div", { className: "absolute z-30 mt-1 w-full min-w-48 rounded-md border border-border-subtle bg-surface-elevated p-2 shadow-lg", children: [
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder,
+          className: `mb-2 w-full rounded-md border border-border bg-surface px-2 ${rowSize} text-foreground`
+        }
+      ),
+      /* @__PURE__ */ jsxs5("ul", { className: "max-h-56 overflow-y-auto", children: [
+        allLabel && !query.trim() && /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: () => select(null),
+            className: `block w-full rounded px-2 ${rowSize} text-left hover:bg-surface-hover ${value === null ? "font-medium text-cta" : "text-foreground"}`,
+            children: allLabel
+          }
+        ) }),
+        filtered.length === 0 && /* @__PURE__ */ jsx5("li", { className: `px-2 ${rowSize} text-muted`, children: "No matches" }),
+        filtered.map((option) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            onClick: () => select(option.id),
+            className: `flex w-full items-center gap-2 rounded px-2 ${rowSize} text-left hover:bg-surface-hover ${value === option.id ? "font-medium text-cta" : "text-foreground"}`,
+            children: [
+              option.icon,
+              /* @__PURE__ */ jsx5("span", { className: "min-w-0 break-words", children: option.label })
+            ]
+          }
+        ) }, option.id))
+      ] })
+    ] })
+  ] });
+}
 export {
   ConfirmModal,
   Drawer,
   Modal,
-  PromptModal
+  PromptModal,
+  SearchableSelect
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kamaldgrt/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Shared React UI primitives (modals, drawer) styled with Tailwind theme tokens.",
   "type": "module",
   "exports": {