@kahitsan/ksui 0.42.0 → 0.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.42.0",
+  "version": "0.44.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,12 @@ 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")!;

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,6 +726,7 @@ export default function DatePicker(props: DatePickerProps) {
         ref={triggerRef}
         onClick={openPicker}
         type="button"
+        aria-label={props.ariaLabel}
         aria-haspopup="dialog"
         aria-expanded={open()}
         disabled={props.disabled}
@@ -869,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/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/components/composite/TransactionForm.tsx

@@ -264,6 +264,9 @@ export interface TransactionFormProps {
   transferFeeAmount: string;
   setTransferFeeAmount: (v: string) => void;
   allowTransferFee: boolean;
+  // Editing a legacy payable row keeps the payable pane; create flows opt out
+  // via allowPayable={false} now that payables live in the Payables module.
+  allowPayable?: boolean;
   pendingFiles: PendingFile[];
   setPendingFiles: (v: PendingFile[]) => void;
   existingAttachments?: TransactionAttachment[];
@@ -399,10 +402,11 @@ export default function TransactionForm(props: TransactionFormProps) {
   // SearchableSelect mount so the loading-state placeholder shows while the
   // per-tenant options are still in flight.
   const subcategoryOptionsReady = () => subcategoryOptions() !== undefined;
-  const categoryOptions = () =>
-    props.category === "payable"
-      ? ["sale", "expense", "business", "payable"]
-      : ["sale", "expense", "business"];
+  const categoryOptions = () => {
+    if (props.category === "payable") return ["sale", "expense", "business", "payable"];
+    const base = ["sale", "expense", "business"];
+    return props.allowPayable === false ? base : [...base, "payable"];
+  };
 
   createEffect(() => {
     if (props.category !== "business" && props.transferFeeEnabled) {