@kahitsan/ksui 0.41.1 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.41.1",
+  "version": "0.43.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/DatePicker.test.tsx

@@ -43,6 +43,28 @@ describe("DatePicker", () => {
     expect(onChange).toHaveBeenCalledWith("2026-06-20");
   });
 
+  it("labels the trigger and calendar navigation", async () => {
+    render(() => <DatePicker ariaLabel="Paid date" value="2026-06-15" onChange={() => {}} />);
+    await fireEvent.click(screen.getByRole("button", { name: "Paid date" }));
+    expect(screen.getByRole("button", { name: /Previous month from/ })).toBeTruthy();
+    expect(screen.getByRole("button", { name: /Next month from/ })).toBeTruthy();
+  });
+  it("keeps the trigger and clear action keyboard reachable", () => {
+    render(() => <DatePicker value="2026-06-15" onChange={() => {}} />);
+    const trigger = screen.getByText("Jun 15").closest("button")!;
+    expect(trigger.tabIndex).toBe(0);
+    expect(trigger.getAttribute("aria-haspopup")).toBe("dialog");
+    const clear = screen.getByRole("button", { name: "Clear date" });
+    expect(clear.tabIndex).toBe(0);
+  });
+  it("opens from native keyboard activation", async () => {
+    render(() => <DatePicker value={null} onChange={() => {}} />);
+    const trigger = screen.getByText("Pick date").closest("button")!;
+    trigger.focus();
+    await fireEvent.keyDown(trigger, { key: "Enter" });
+    await fireEvent.click(trigger);
+    expect(screen.getByTestId("datepicker-popover")).toBeTruthy();
+  });
   it("renders disabled trigger when disabled prop is true", () => {
     render(() => <DatePicker value={null} onChange={() => {}} disabled />);
     const trigger = screen.getByText("Pick date").closest("button")!;

package/src/components/base/DatePicker.tsx

@@ -165,6 +165,8 @@ interface DatePickerSharedProps {
   placeholder?: string;
   withTime?: boolean;
   disabled?: boolean;
+  /** Accessible purpose label for the trigger, for example "Paid date". */
+  ariaLabel?: string;
   /** Override the trigger button class entirely (escape hatch for custom triggers). */
   triggerClass?: string;
 }
@@ -724,7 +726,9 @@ export default function DatePicker(props: DatePickerProps) {
         ref={triggerRef}
         onClick={openPicker}
         type="button"
-        tabIndex={-1}
+        aria-label={props.ariaLabel}
+        aria-haspopup="dialog"
+        aria-expanded={open()}
         disabled={props.disabled}
         class={
           props.triggerClass ??
@@ -736,7 +740,7 @@ export default function DatePicker(props: DatePickerProps) {
       </button>
       {/* Clear button */}
       <Show when={hasValue()}>
-        <button type="button" tabIndex={-1} class="ksui-datepicker-clear-btn" onClick={clear}>
+        <button type="button" aria-label="Clear date" class="ksui-datepicker-clear-btn" onClick={clear}>
           <X size={14} />
         </button>
       </Show>
@@ -868,11 +872,11 @@ export default function DatePicker(props: DatePickerProps) {
             <div class="ksui-datepicker-section">
               {/* Month nav */}
               <div class="ksui-datepicker-nav">
-                <button type="button" onClick={prevMonth} class="ksui-datepicker-nav-btn">
+                <button type="button" aria-label={`Previous month from ${monthLabel()}`} onClick={prevMonth} class="ksui-datepicker-nav-btn">
                   <ChevronLeft size={16} />
                 </button>
                 <span class="ksui-datepicker-month-label">{monthLabel()}</span>
-                <button type="button" onClick={nextMonth} class="ksui-datepicker-nav-btn">
+                <button type="button" aria-label={`Next month from ${monthLabel()}`} onClick={nextMonth} class="ksui-datepicker-nav-btn">
                   <ChevronRight size={16} />
                 </button>
               </div>

package/src/components/base/MultiSelectGroup.test.tsx

@@ -0,0 +1,41 @@
+import { fireEvent, render, screen } from "@solidjs/testing-library";
+import { createSignal } from "solid-js";
+import { describe, expect, it, vi } from "vitest";
+import MultiSelectGroup from "./MultiSelectGroup";
+
+const options = [
+  { value: "sun", label: "Sun" },
+  { value: "mon", label: "Mon" },
+  { value: "tue", label: "Tue" },
+];
+
+describe("MultiSelectGroup", () => {
+  it("adds and removes independent selections in option order", async () => {
+    const [value, setValue] = createSignal<string[]>(["tue"]);
+    render(() => <MultiSelectGroup ariaLabel="Repeat on" options={options} value={value()} onChange={setValue} />);
+    await fireEvent.click(screen.getByRole("button", { name: "Mon" }));
+    expect(value()).toEqual(["mon", "tue"]);
+    await fireEvent.click(screen.getByRole("button", { name: "Tue" }));
+    expect(value()).toEqual(["mon"]);
+  });
+
+  it("exposes pressed state and native keyboard activation", async () => {
+    const onChange = vi.fn();
+    render(() => <MultiSelectGroup ariaLabel="Days" options={options} value={["mon"]} onChange={onChange} />);
+    expect(screen.getByRole("button", { name: "Mon" }).getAttribute("aria-pressed")).toBe("true");
+    const sunday = screen.getByRole("button", { name: "Sun" });
+    sunday.focus();
+    await fireEvent.keyDown(sunday, { key: "Enter" });
+    await fireEvent.click(sunday);
+    expect(onChange).toHaveBeenCalledWith(["sun", "mon"]);
+  });
+
+  it("blocks disabled options", async () => {
+    const onChange = vi.fn();
+    render(() => <MultiSelectGroup ariaLabel="Days" options={[{ value: "sun", label: "Sun", disabled: true }]} value={[]} onChange={onChange} />);
+    const button = screen.getByRole("button", { name: "Sun" }) as HTMLButtonElement;
+    expect(button.disabled).toBe(true);
+    await fireEvent.click(button);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/components/base/MultiSelectGroup.tsx

@@ -0,0 +1,53 @@
+import { For, type JSX } from "solid-js";
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  disabledNote?: string;
+}
+
+export interface MultiSelectGroupProps {
+  options: MultiSelectOption[];
+  value: readonly string[];
+  onChange: (value: string[]) => void;
+  ariaLabel: string;
+  class?: string;
+  itemClass?: string;
+  disabled?: boolean;
+}
+
+export default function MultiSelectGroup(props: MultiSelectGroupProps): JSX.Element {
+  const selected = (value: string) => props.value.includes(value);
+  const toggle = (option: MultiSelectOption) => {
+    if (props.disabled || option.disabled) return;
+    const next = selected(option.value)
+      ? props.value.filter((value) => value !== option.value)
+      : props.options.filter((candidate) => candidate.value === option.value || props.value.includes(candidate.value)).map((candidate) => candidate.value);
+    props.onChange(next);
+  };
+
+  return (
+    <div role="group" aria-label={props.ariaLabel} class={`flex flex-wrap gap-1 ${props.class ?? ""}`}>
+      <For each={props.options}>
+        {(option) => (
+          <button
+            type="button"
+            aria-pressed={selected(option.value)}
+            disabled={props.disabled || option.disabled}
+            title={option.disabledNote}
+            onClick={() => toggle(option)}
+            class={`rounded-md border px-2.5 py-1.5 text-xs transition-colors ${props.itemClass ?? ""}`}
+            classList={{
+              "border-[var(--ks-info,#38bdf8)] bg-[var(--ks-info,#38bdf8)] text-[var(--ks-info-fg,#7dd3fc)]": selected(option.value),
+              "border-[var(--ks-border,rgba(39,39,42,0.5))] bg-[var(--ks-surface,#0f0f0f)] text-[var(--ks-fg-muted,#a1a1aa)] hover:border-[var(--ks-border-strong,#3f3f46)] hover:text-[var(--ks-fg,#ffffff)]": !selected(option.value),
+              "cursor-not-allowed opacity-50": !!props.disabled || !!option.disabled,
+            }}
+          >
+            {option.label}
+          </button>
+        )}
+      </For>
+    </div>
+  );
+}

package/src/components/base/SegmentedFilter.test.tsx

@@ -27,6 +27,12 @@ describe("SegmentedFilter", () => {
     expect(radios[0].getAttribute("aria-checked")).toBe("true");
   });
 
+  it("supports a mobile-safe scrolling row", () => {
+    const { container } = render(() => (
+      <SegmentedFilter options={STRING_OPTIONS} value="today" onChange={() => {}} scrollable />
+    ));
+    expect(container.querySelector('[role="radiogroup"]')?.className).toContain("overflow-x-auto");
+  });
   it("renders object options with an explicit label", () => {
     const { getAllByRole } = render(() => (
       <SegmentedFilter options={OBJECT_OPTIONS} value="table" onChange={() => {}} />

package/src/components/base/SegmentedFilter.tsx

@@ -23,6 +23,8 @@ interface SegmentedFilterProps {
   class?: string;
   /** Accessible label for the radiogroup wrapper (WAI-ARIA radiogroup pattern). */
   ariaLabel?: string;
+  /** Keep long rows reachable on narrow screens with horizontal scrolling. */
+  scrollable?: boolean;
 }
 
 // A rounded bordered row of segment buttons with one active at a time.
@@ -85,7 +87,7 @@ export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Elemen
     <div
       role="radiogroup"
       aria-label={props.ariaLabel}
-      class={`flex rounded-lg border border-[var(--ks-border,rgba(39,39,42,0.5))] overflow-hidden ${props.class ?? ""}`}
+      class={`flex rounded-lg border border-[var(--ks-border,rgba(39,39,42,0.5))] ${props.scrollable ? "max-w-full overflow-x-auto" : "overflow-hidden"} ${props.class ?? ""}`}
       onKeyDown={onKeyDown}
     >
       <For each={props.options}>
@@ -115,7 +117,7 @@ export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Elemen
                 if (opt.disabled) return;
                 props.onChange(opt.value);
               }}
-              class="px-3 py-1.5 text-xs transition-colors"
+              class="shrink-0 px-3 py-1.5 text-xs transition-colors"
               classList={{
                 capitalize: opt.capitalize,
                 "cursor-not-allowed": opt.disabled,

package/src/index.ts

@@ -60,6 +60,7 @@ export { default as ChartLegend } from "./components/base/ChartLegend";
 // single canonical package.
 export { default as StatusPill, type StatusTone } from "./components/base/StatusPill";
 export { default as SegmentedFilter, type SegmentedFilterOption } from "./components/base/SegmentedFilter";
+export { default as MultiSelectGroup, type MultiSelectGroupProps, type MultiSelectOption } from "./components/base/MultiSelectGroup";
 export { default as CopyButton } from "./components/base/CopyButton";
 export { default as KpiCard, type KpiCardProps, type KpiTone } from "./components/base/KpiCard";
 export { default as RadioCardGroup } from "./components/base/RadioCardGroup";