@kahitsan/ksui 0.35.0 → 0.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.35.0",
+  "version": "0.36.1",
   "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/ProgressBar.tsx

@@ -32,6 +32,10 @@ const styles: Record<string, string> = {
   "animate-shimmer": "ks-progress-shimmer",
 };
 
+// ProgressColor is derived from COLOR_MAP so adding a hue later flows here
+// without re-syncing a hardcoded list.
+export type ProgressColor = keyof typeof COLOR_MAP;
+
 export interface ProgressBarProps extends JSX.HTMLAttributes<HTMLDivElement> {
   progress: number;
   icon?: Component<{ size: number; class?: string }>;
@@ -45,6 +49,9 @@ export interface ProgressBarProps extends JSX.HTMLAttributes<HTMLDivElement> {
   // LiveTimer push the live countdown into the right slot while the
   // total label sits on the left.
   rightLabel?: string;
+  // Explicit color signal — class-substring sniffing broke when COLOR_AMBER
+  // was tokenized (4f6ed40 dropped the literal "amber" from the class).
+  color?: ProgressColor;
   class?: string;
 }
 
@@ -163,6 +170,7 @@ const ProgressBar: Component<ProgressBarProps> = (props) => {
     "position",
     "hidePercentage",
     "rightLabel",
+    "color",
     "class",
   ]);
 
@@ -184,7 +192,12 @@ const ProgressBar: Component<ProgressBarProps> = (props) => {
     return { progress: Math.max(0, Math.min(100, raw)), overflow: Math.max(0, raw - 100) };
   });
 
-  const colorInfo = createMemo(() => extractColorInfo(classProp() ?? ""));
+  const colorInfo = createMemo(() => {
+    // Explicit color wins; fall back to class-substring sniffing for back-compat
+    // with every caller that still drives color via a "text-red-400"-style class.
+    if (local.color) return COLOR_MAP[local.color];
+    return extractColorInfo(classProp() ?? "");
+  });
   const iconSize = createMemo(() => extractTextSize(classProp() ?? ""));
 
   const containerClasses = createMemo(() =>

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

@@ -0,0 +1,111 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@solidjs/testing-library";
+import SegmentedFilter, { type SegmentedFilterOption } from "./SegmentedFilter";
+
+// Back-compat: bare-string options are still accepted alongside the object
+// form, so callers frozen on the old shape don't need a migration.
+const STRING_OPTIONS: SegmentedFilterOption[] = ["today", "week", "month"];
+
+const OBJECT_OPTIONS: SegmentedFilterOption[] = [
+  { value: "table", label: "Table" },
+  { value: "calendar", label: "Calendar" },
+];
+
+const WITH_DISABLED: SegmentedFilterOption[] = [
+  { value: "daily", label: "Per day" },
+  { value: "hourly", label: "Per hour", disabled: true, disabledNote: "Unavailable for this staff type" },
+  { value: "fixed", label: "Fixed period" },
+];
+
+describe("SegmentedFilter", () => {
+  it("renders bare-string options capitalized (back-compat)", () => {
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={STRING_OPTIONS} value="today" onChange={() => {}} />
+    ));
+    const radios = getAllByRole("radio");
+    expect(radios.map((r) => r.textContent)).toEqual(["today", "week", "month"]);
+    expect(radios[0].getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("renders object options with an explicit label", () => {
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={OBJECT_OPTIONS} value="table" onChange={() => {}} />
+    ));
+    const radios = getAllByRole("radio");
+    expect(radios.map((r) => r.textContent)).toEqual(["Table", "Calendar"]);
+  });
+
+  it("emits the clicked value on an enabled segment", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={OBJECT_OPTIONS} value="table" onChange={onChange} />
+    ));
+    fireEvent.click(getAllByRole("radio")[1]);
+    expect(onChange).toHaveBeenCalledWith("calendar");
+  });
+
+  it("no-ops a click on a disabled segment", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={onChange} />
+    ));
+    fireEvent.click(getAllByRole("radio")[1]);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("exposes aria-disabled and the disabledNote via title + sr-only text", () => {
+    const { getAllByRole, getByText } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={() => {}} />
+    ));
+    const disabledRadio = getAllByRole("radio")[1];
+    expect(disabledRadio.getAttribute("aria-disabled")).toBe("true");
+    expect(disabledRadio.getAttribute("title")).toBe("Unavailable for this staff type");
+    expect(getByText("Unavailable for this staff type").className).toContain("sr-only");
+  });
+
+  it("does not set aria-disabled on enabled segments", () => {
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={() => {}} />
+    ));
+    expect(getAllByRole("radio")[0].getAttribute("aria-disabled")).toBe("false");
+  });
+
+  it("pulls disabled segments out of tab order", () => {
+    const { getAllByRole } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={() => {}} />
+    ));
+    expect(getAllByRole("radio")[1].getAttribute("tabindex")).toBe("-1");
+  });
+
+  it("ArrowRight skips a disabled segment and selects the next enabled one", () => {
+    const onChange = vi.fn();
+    const { container } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={onChange} />
+    ));
+    fireEvent.keyDown(container.querySelector('[role="radiogroup"]')!, { key: "ArrowRight" });
+    expect(onChange).toHaveBeenCalledWith("fixed");
+  });
+
+  it("ArrowLeft wraps past a disabled segment to the previous enabled one", () => {
+    const onChange = vi.fn();
+    const { container } = render(() => (
+      <SegmentedFilter options={WITH_DISABLED} value="daily" onChange={onChange} />
+    ));
+    fireEvent.keyDown(container.querySelector('[role="radiogroup"]')!, { key: "ArrowLeft" });
+    expect(onChange).toHaveBeenCalledWith("fixed");
+  });
+
+  it("End lands on the last enabled segment even if the last option is disabled", () => {
+    const onChange = vi.fn();
+    const trailingDisabled: SegmentedFilterOption[] = [
+      { value: "a", label: "A" },
+      { value: "b", label: "B" },
+      { value: "c", label: "C", disabled: true },
+    ];
+    const { container } = render(() => (
+      <SegmentedFilter options={trailingDisabled} value="a" onChange={onChange} />
+    ));
+    fireEvent.keyDown(container.querySelector('[role="radiogroup"]')!, { key: "End" });
+    expect(onChange).toHaveBeenCalledWith("b");
+  });
+});

package/src/components/base/SegmentedFilter.tsx

@@ -2,8 +2,13 @@ import { For, type JSX } from "solid-js";
 
 /** One choice in the segmented row. A bare string uses the value as the label
  *  and is rendered capitalized; an object lets the caller supply an explicit
- *  label that is NOT capitalized (for buckets or other non-status toggles). */
-export type SegmentedFilterOption = string | { value: string; label: string };
+ *  label that is NOT capitalized (for buckets or other non-status toggles).
+ *  `disabled` mutes the segment and pulls it out of roving arrow-key nav;
+ *  `disabledNote` (shown only when disabled) explains why via title + sr-only
+ *  text, since a muted, unclickable control is otherwise unexplained. */
+export type SegmentedFilterOption =
+  | string
+  | { value: string; label: string; disabled?: boolean; disabledNote?: string };
 
 interface SegmentedFilterProps {
   /** The available segments, left to right. */
@@ -29,19 +34,28 @@ interface SegmentedFilterProps {
 export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Element {
   const buttonRefs: (HTMLButtonElement | undefined)[] = [];
   const optionOf = (o: SegmentedFilterOption) =>
-    typeof o === "string" ? { value: o, label: o, capitalize: true } : { ...o, capitalize: false };
+    typeof o === "string"
+      ? { value: o, label: o, capitalize: true, disabled: false, disabledNote: undefined as string | undefined }
+      : { disabled: false, disabledNote: undefined as string | undefined, ...o, capitalize: false };
 
   const currentIndex = () => {
     const i = props.options.findIndex((o) => optionOf(o).value === props.value);
     return i >= 0 ? i : 0;
   };
 
-  const selectByIndex = (idx: number) => {
+  // Roving nav must skip disabled segments while preserving the requested
+  // direction (Home/End pass direction 1 since idx is already the boundary);
+  // a full lap finding no enabled option is the only way this doesn't move.
+  const selectByIndex = (idx: number, direction: 1 | -1 = 1) => {
     const list = props.options;
     if (list.length === 0) return;
-    const wrapped = ((idx % list.length) + list.length) % list.length;
-    props.onChange(optionOf(list[wrapped]).value);
-    buttonRefs[wrapped]?.focus();
+    for (let step = 0, cursor = idx; step < list.length; step++, cursor += direction) {
+      const wrapped = ((cursor % list.length) + list.length) % list.length;
+      if (optionOf(list[wrapped]).disabled) continue;
+      props.onChange(optionOf(list[wrapped]).value);
+      buttonRefs[wrapped]?.focus();
+      return;
+    }
   };
 
   const onKeyDown = (e: KeyboardEvent) => {
@@ -49,20 +63,20 @@ export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Elemen
       case "ArrowRight":
       case "ArrowDown":
         e.preventDefault();
-        selectByIndex(currentIndex() + 1);
+        selectByIndex(currentIndex() + 1, 1);
         break;
       case "ArrowLeft":
       case "ArrowUp":
         e.preventDefault();
-        selectByIndex(currentIndex() - 1);
+        selectByIndex(currentIndex() - 1, -1);
         break;
       case "Home":
         e.preventDefault();
-        selectByIndex(0);
+        selectByIndex(0, 1);
         break;
       case "End":
         e.preventDefault();
-        selectByIndex(props.options.length - 1);
+        selectByIndex(props.options.length - 1, -1);
         break;
     }
   };
@@ -78,25 +92,46 @@ export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Elemen
         {(o, i) => {
           const opt = optionOf(o);
           const selected = () => props.value === opt.value;
-          const isTabStop = () => selected() || (!props.value && i() === 0);
+          // Default tab stop falls to the first enabled option when nothing
+          // is selected yet, so an all-disabled-first row is still reachable.
+          const firstEnabledIndex = () => {
+            const idx = props.options.findIndex((candidate) => !optionOf(candidate).disabled);
+            return idx >= 0 ? idx : 0;
+          };
+          const isTabStop = () => selected() || (!props.value && i() === firstEnabledIndex());
+          const noteId = `${props.testIdPrefix ?? "segmented"}-${opt.value}-note`;
           return (
             <button
               ref={(el) => (buttonRefs[i()] = el)}
               type="button"
               role="radio"
               aria-checked={selected()}
-              tabIndex={isTabStop() ? 0 : -1}
+              aria-disabled={opt.disabled}
+              aria-describedby={opt.disabled && opt.disabledNote ? noteId : undefined}
+              title={opt.disabled ? opt.disabledNote : undefined}
+              tabIndex={opt.disabled ? -1 : isTabStop() ? 0 : -1}
               data-testid={props.testIdPrefix ? `${props.testIdPrefix}-${opt.value}` : undefined}
-              onClick={() => props.onChange(opt.value)}
-              class="px-3 py-1.5 text-xs transition-colors cursor-pointer"
+              onClick={() => {
+                if (opt.disabled) return;
+                props.onChange(opt.value);
+              }}
+              class="px-3 py-1.5 text-xs transition-colors"
               classList={{
                 capitalize: opt.capitalize,
-                "bg-[var(--ks-accent,#fbbf24)]/20 text-[var(--ks-accent,#fbbf24)]": selected(),
+                "cursor-not-allowed": opt.disabled,
+                "cursor-pointer": !opt.disabled,
+                "bg-[var(--ks-accent,#fbbf24)]/20 text-[var(--ks-accent,#fbbf24)]": selected() && !opt.disabled,
+                "text-[var(--ks-fg-subtle,#71717a)]": opt.disabled,
                 "text-[var(--ks-fg-muted,#a1a1aa)] hover:text-[var(--ks-fg,#ffffff)] hover:bg-[var(--ks-surface-raised,#1a1a1a)]":
-                  !selected(),
+                  !selected() && !opt.disabled,
               }}
             >
               {opt.label}
+              {opt.disabled && opt.disabledNote ? (
+                <span id={noteId} class="sr-only">
+                  {opt.disabledNote}
+                </span>
+              ) : null}
             </button>
           );
         }}

package/src/components/composite/LiveTimer.tsx

@@ -11,7 +11,7 @@ import Play from "lucide-solid/icons/play";
 import AlertTriangle from "lucide-solid/icons/triangle-alert";
 import Check from "lucide-solid/icons/check";
 import Calendar from "lucide-solid/icons/calendar";
-import ProgressBar from "../base/ProgressBar";
+import ProgressBar, { type ProgressColor } from "../base/ProgressBar";
 
 export interface LiveTimerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "class"> {
   // Core timing
@@ -354,6 +354,29 @@ const LiveTimer: Component<LiveTimerProps> = (props) => {
     return staticConfig().colorClass;
   });
 
+  // Mirrors colorClass's scenario logic but returns a COLOR_MAP key for
+  // ProgressBar's `color` prop — the class strings above were tokenized
+  // (4f6ed40) so the fill's class-substring sniff can no longer recover
+  // the hue. COMPLETED had no color substring even pre-tokenization, so it
+  // relies on the explicit prop rather than ever reaching the back-compat path.
+  const colorName = createMemo<ProgressColor>(() => {
+    switch (scenario()) {
+      case SCENARIO_COUNTDOWN_TIMER: {
+        const p = progress();
+        return p <= 25 ? "green" : p <= 75 ? "amber" : "red";
+      }
+      case SCENARIO_COUNTDOWN_TO_START:
+        return "blue";
+      case SCENARIO_OPEN_TIMER:
+        return "green";
+      case SCENARIO_OVERDUE:
+        return "purple";
+      case SCENARIO_COMPLETED:
+      default:
+        return "slate";
+    }
+  });
+
   const finalClass = createMemo(() => {
     const user = local.class ?? "";
     if (user.includes("border-") && user.includes("text-")) return user;
@@ -410,6 +433,7 @@ const LiveTimer: Component<LiveTimerProps> = (props) => {
           position={staticConfig().position}
           hidePercentage={resolvedHidePercentage()}
           shimmer={staticConfig().shimmer}
+          color={colorName()}
           class={finalClass()}
           {...others}
         />
@@ -424,6 +448,7 @@ const LiveTimer: Component<LiveTimerProps> = (props) => {
         hidePercentage
         rightLabel={statusLabel()}
         shimmer={staticConfig().shimmer}
+        color={colorName()}
         class={finalClass()}
         {...others}
       />