@kahitsan/ksui 0.41.0 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.41.0",
+  "version": "0.42.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,22 @@ describe("DatePicker", () => {
     expect(onChange).toHaveBeenCalledWith("2026-06-20");
   });
 
+  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

@@ -724,7 +724,8 @@ export default function DatePicker(props: DatePickerProps) {
         ref={triggerRef}
         onClick={openPicker}
         type="button"
-        tabIndex={-1}
+        aria-haspopup="dialog"
+        aria-expanded={open()}
         disabled={props.disabled}
         class={
           props.triggerClass ??
@@ -736,7 +737,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>

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/composite/FormActions.tsx

@@ -48,7 +48,8 @@ export interface FormActionsProps {
 }
 
 export default function FormActions(props: FormActionsProps): JSX.Element {
-  const isSubmitType = () => props.submitType === "submit";
+  const submitType = props.submitType ?? "button";
+  const submitHandler = submitType === "submit" ? undefined : props.onSubmit;
   return (
     <div
       class={
@@ -65,8 +66,8 @@ export default function FormActions(props: FormActionsProps): JSX.Element {
         {props.cancelLabel ?? "Cancel"}
       </Button>
       <Button
-        type={isSubmitType() ? "submit" : "button"}
-        onClick={isSubmitType() ? undefined : props.onSubmit}
+        type={submitType}
+        onClick={submitHandler}
         disabled={(props.submitting ?? false) || (props.submitDisabled ?? false)}
         intent={props.danger ? "danger" : "primary"}
         class="gap-2 w-full sm:w-auto"

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";