@kahitsan/ksui 0.36.0 → 0.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.36.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/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}
       />