@kahitsan/ksui 0.13.2 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/base/Avatar.tsx

@@ -0,0 +1,31 @@
+import AccountAvatar, { type AvatarAccount } from "./AccountAvatar";
+
+export interface AvatarProps {
+  name: string;
+  image?: string | null;
+  size?: "xs" | "sm" | "md" | "lg";
+  class?: string;
+}
+
+const sizeMap: Record<string, number> = {
+  xs: 20,
+  sm: 24,
+  md: 28,
+  lg: 40,
+};
+
+/**
+ * Generic person/user avatar — a thin, domain-free wrapper over {@link AccountAvatar}'s
+ * user variant that accepts a name + optional image and a t-shirt size. Use this for
+ * people; use AccountAvatar directly for financial accounts.
+ */
+export default function Avatar(props: AvatarProps) {
+  const account: AvatarAccount = {
+    id: 0,
+    type: "user",
+    name: props.name,
+    image: props.image,
+  };
+
+  return <AccountAvatar account={account} size={sizeMap[props.size ?? "md"]} class={props.class} />;
+}

package/src/components/composite/SearchableSelect.tsx

@@ -0,0 +1,52 @@
+import ComboBox from "./ComboBox";
+import Search from "lucide-solid/icons/search";
+
+export interface SearchableOption {
+  value: string | number;
+  label: string;
+  description?: string;
+}
+
+export interface SearchableSelectProps {
+  value: string | number | null | undefined;
+  options: SearchableOption[];
+  onChange: (next: SearchableOption | null) => void | Promise<void>;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+/**
+ * Simple single-select dropdown with client-side fuzzy search over a static option
+ * list — a domain-free convenience wrapper over {@link ComboBox}. For richer behavior
+ * (async search, create-on-the-fly, multi-select) use ComboBox directly.
+ */
+export default function SearchableSelect(props: SearchableSelectProps) {
+  const selected = () => {
+    if (props.value == null || props.value === "") return null;
+    return props.options.find((o) => String(o.value) === String(props.value)) ?? null;
+  };
+
+  return (
+    <ComboBox<SearchableOption>
+      search={async (q) => {
+        const trimmed = q.trim().toLowerCase();
+        if (!trimmed) return props.options;
+        return props.options.filter(
+          (o) =>
+            o.label.toLowerCase().includes(trimmed) ||
+            (o.description?.toLowerCase().includes(trimmed) ?? false),
+        );
+      }}
+      selected={selected()}
+      onChange={(next) => props.onChange(next)}
+      idOf={(o) => o.value}
+      labelOf={(o) => o.label}
+      secondaryOf={(o) => o.description ?? null}
+      icon={Search}
+      noun="option"
+      placeholder={props.placeholder ?? "Select..."}
+      disabled={props.disabled}
+      testIdPrefix="searchable-select"
+    />
+  );
+}

package/src/index.ts

@@ -40,6 +40,7 @@ export {
   buildInitialsSvg,
 } from "./components/base/AccountAvatar";
 export type { AvatarAccount } from "./components/base/AccountAvatar";
+export { default as Avatar, type AvatarProps } from "./components/base/Avatar";
 
 export { default as ExistingAttachmentTile } from "./components/base/ExistingAttachmentTile";
 export type { ExistingAttachment } from "./components/base/ExistingAttachmentTile";
@@ -131,6 +132,11 @@ export type {
   ComboBoxSingleProps,
   ComboBoxMultiProps,
 } from "./components/composite/ComboBox";
+export {
+  default as SearchableSelect,
+  type SearchableSelectProps,
+  type SearchableOption,
+} from "./components/composite/SearchableSelect";
 
 // Shared domain option shapes for the common pickers, decoupled from any
 // component (still imported across transactions / counter / payees).