@kahitsan/ksui 0.3.0 → 0.4.0

package/src/components/base/ProgressBar.tsx

@@ -0,0 +1,328 @@
+// Source: archive/pillar app/pillar-ui/base/ProgressBar/ProgressBar.tsx
+// Ported into kserp so the counter cards can reuse the same realtime
+// progress visualization the session manager uses on the home page.
+// Adapted to kserp's TS + lucide-solid conventions.
+
+import type { Component, JSX } from "solid-js";
+import { createMemo, splitProps, Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+// The monolith ships these as a CSS module (ProgressBar.module.css). The
+// plugin remote builds to a single IIFE that the host serves as one script —
+// a sidecar .css emitted by the lib build would never get injected, so the
+// progress fill/indicator/shimmer treatment would silently disappear. Inline
+// the keyframes + helper classes once per page via a <style> tag and reference
+// them with plain (unscoped) class names so the bundle stays self-contained.
+const PROGRESS_STYLE_ID = "ks-progress-bar-inline-style";
+const PROGRESS_CSS = `
+.ks-progress-fill { position: relative; border-radius: 0; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
+.ks-progress-indicator { border-radius: 0; box-shadow: 0 0 2px currentColor; }
+.ks-progress-overflow { position: relative; }
+@keyframes ksLiveTimerShimmer { 0% { transform: translateX(-100%) skewX(-25deg); } 100% { transform: translateX(100%) skewX(-25deg); } }
+.ks-progress-shimmer { animation: ksLiveTimerShimmer 2s infinite; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); background-size: 200% 100%; height: 100%; width: 100%; position: absolute; top: 0; left: 0; opacity: 0.7; }
+@media (prefers-reduced-motion: reduce) { .ks-progress-fill { transition: width 0.3s ease; } }
+`;
+function ensureProgressStyle() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(PROGRESS_STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = PROGRESS_STYLE_ID;
+  el.textContent = PROGRESS_CSS;
+  document.head.appendChild(el);
+}
+const styles: Record<string, string> = {
+  "ks-progress-fill": "ks-progress-fill",
+  "ks-progress-indicator": "ks-progress-indicator",
+  "ks-progress-overflow": "ks-progress-overflow",
+  "animate-shimmer": "ks-progress-shimmer",
+};
+
+export interface ProgressBarProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  progress: number;
+  icon?: Component<{ size: number; class?: string }>;
+  label?: string;
+  statusLabel?: string;
+  shimmer?: boolean;
+  position?: "left" | "right";
+  hidePercentage?: boolean;
+  // When set, this string replaces the percentage on the right side
+  // (whether or not `hidePercentage` is true). Lets callers like
+  // LiveTimer push the live countdown into the right slot while the
+  // total label sits on the left.
+  rightLabel?: string;
+  class?: string;
+}
+
+function cn(...classes: Array<string | undefined | null | false>): string {
+  return classes.filter(Boolean).join(" ");
+}
+
+interface ColorInfo {
+  fill: string;
+  indicator: string;
+  stripe: string;
+  overflow: string;
+  shimmer: string;
+}
+
+const COLOR_MAP: Record<string, ColorInfo> = {
+  red: {
+    fill: "rgba(255, 68, 68, 0.2)",
+    indicator: "#FF4444",
+    stripe: "rgba(255, 68, 68, 0.4)",
+    overflow: "rgba(255, 68, 68, 0.4)",
+    shimmer: "rgba(255, 68, 68, 0.3)",
+  },
+  green: {
+    fill: "rgba(0, 204, 136, 0.2)",
+    indicator: "#00CC88",
+    stripe: "rgba(0, 204, 136, 0.4)",
+    overflow: "rgba(0, 204, 136, 0.4)",
+    shimmer: "rgba(0, 204, 136, 0.3)",
+  },
+  blue: {
+    fill: "rgba(74, 158, 255, 0.2)",
+    indicator: "#4A9EFF",
+    stripe: "rgba(74, 158, 255, 0.4)",
+    overflow: "rgba(74, 158, 255, 0.4)",
+    shimmer: "rgba(74, 158, 255, 0.3)",
+  },
+  amber: {
+    fill: "rgba(245, 158, 11, 0.2)",
+    indicator: "#F59E0B",
+    stripe: "rgba(245, 158, 11, 0.4)",
+    overflow: "rgba(245, 158, 11, 0.4)",
+    shimmer: "rgba(245, 158, 11, 0.3)",
+  },
+  orange: {
+    fill: "rgba(255, 136, 51, 0.2)",
+    indicator: "#FF8833",
+    stripe: "rgba(255, 136, 51, 0.4)",
+    overflow: "rgba(255, 136, 51, 0.4)",
+    shimmer: "rgba(255, 136, 51, 0.3)",
+  },
+  purple: {
+    fill: "rgba(168, 85, 247, 0.2)",
+    indicator: "#A855F7",
+    stripe: "rgba(168, 85, 247, 0.4)",
+    overflow: "rgba(168, 85, 247, 0.4)",
+    shimmer: "rgba(168, 85, 247, 0.3)",
+  },
+  slate: {
+    fill: "rgba(148, 163, 184, 0.2)",
+    indicator: "#94A3B8",
+    stripe: "rgba(148, 163, 184, 0.4)",
+    overflow: "rgba(148, 163, 184, 0.4)",
+    shimmer: "rgba(148, 163, 184, 0.3)",
+  },
+  gray: {
+    fill: "rgba(156, 163, 175, 0.2)",
+    indicator: "#9CA3AF",
+    stripe: "rgba(156, 163, 175, 0.4)",
+    overflow: "rgba(156, 163, 175, 0.4)",
+    shimmer: "rgba(156, 163, 175, 0.3)",
+  },
+  zinc: {
+    fill: "rgba(161, 161, 170, 0.2)",
+    indicator: "#A1A1AA",
+    stripe: "rgba(161, 161, 170, 0.4)",
+    overflow: "rgba(161, 161, 170, 0.4)",
+    shimmer: "rgba(161, 161, 170, 0.3)",
+  },
+};
+
+function extractColorInfo(className: string): ColorInfo {
+  for (const [name, value] of Object.entries(COLOR_MAP)) {
+    if (className.includes(name)) return value;
+  }
+  return COLOR_MAP.green;
+}
+
+function extractTextSize(className: string): number {
+  if (className.includes("text-xs")) return 12;
+  if (className.includes("text-sm")) return 14;
+  if (className.includes("text-base")) return 16;
+  if (className.includes("text-lg")) return 18;
+  if (className.includes("text-xl")) return 20;
+  if (className.includes("text-2xl")) return 24;
+  return 14;
+}
+
+const ProgressBar: Component<ProgressBarProps> = (props) => {
+  ensureProgressStyle();
+  const [local, others] = splitProps(props, [
+    "progress",
+    "icon",
+    "label",
+    "statusLabel",
+    "shimmer",
+    "position",
+    "hidePercentage",
+    "rightLabel",
+    "class",
+  ]);
+
+  const progressVal = createMemo(() => {
+    const value = local.progress;
+    if (typeof value !== "number" || Number.isNaN(value)) return 0;
+    return Math.max(0, value);
+  });
+
+  const position = (): "left" | "right" => local.position ?? "left";
+  const shimmer = () => local.shimmer ?? false;
+  const statusLabel = () => local.statusLabel;
+  const label = () => local.label;
+  const hidePercentage = () => local.hidePercentage ?? false;
+  const classProp = () => local.class;
+
+  const progressInfo = createMemo(() => {
+    const raw = progressVal();
+    return { progress: Math.max(0, Math.min(100, raw)), overflow: Math.max(0, raw - 100) };
+  });
+
+  const colorInfo = createMemo(() => extractColorInfo(classProp() ?? ""));
+  const iconSize = createMemo(() => extractTextSize(classProp() ?? ""));
+
+  const containerClasses = createMemo(() =>
+    cn(
+      "select-none relative overflow-hidden rounded bg-black/20 border border-zinc-700/40",
+      "h-8",
+      !classProp()?.includes("w-") ? "w-full" : "",
+      classProp(),
+    ),
+  );
+
+  const progressStyle = createMemo(() => {
+    const colors = colorInfo();
+    const { progress } = progressInfo();
+    const isRight = position() === "right";
+    const style: Record<string, string | number> = {
+      width: `${progress}%`,
+      "background-color": colors.fill,
+    };
+    if (isRight) {
+      style.position = "absolute";
+      style.right = "0px";
+      style["border-radius"] = "0 4px 4px 0";
+    }
+    return style;
+  });
+
+  const overflowStyle = createMemo(() => {
+    const colors = colorInfo();
+    const { overflow } = progressInfo();
+    const isRight = position() === "right";
+    const visible = Math.min(90, overflow);
+    if (isRight) {
+      return {
+        width: `${visible}%`,
+        "background-color": colors.overflow,
+        position: "absolute" as const,
+        left: "0px",
+        top: "0px",
+        height: "100%",
+        "border-radius": "4px 0 0 4px",
+      };
+    }
+    const startPosition = Math.max(10, 100 - visible);
+    return {
+      width: `${visible}%`,
+      "background-color": colors.overflow,
+      position: "absolute" as const,
+      left: `${startPosition}%`,
+      top: "0px",
+      height: "100%",
+      "border-radius": "0 4px 4px 0",
+    };
+  });
+
+  const indicatorStyle = createMemo(() => {
+    const colors = colorInfo();
+    const isRight = position() === "right";
+    return {
+      "background-color": colors.indicator,
+      ...(isRight ? { left: "0px" } : { right: "0px" }),
+    };
+  });
+
+  const overflowIndicatorStyle = createMemo(() => {
+    const colors = colorInfo();
+    const isRight = position() === "right";
+    return {
+      "background-color": colors.indicator,
+      ...(isRight ? { right: "0px" } : { left: "0px" }),
+    };
+  });
+
+  const shimmerStyle = createMemo(() => ({
+    background: `linear-gradient(90deg, transparent, ${colorInfo().shimmer}, transparent)`,
+  }));
+
+  const Icon = () => local.icon;
+
+  return (
+    <div class={containerClasses()} {...others}>
+      <div
+        class={cn("h-full transition-all duration-1000 relative", styles["ks-progress-fill"])}
+        style={progressStyle()}
+      >
+        {shimmer() && progressInfo().overflow <= 0 && (
+          <div class={cn("absolute inset-0", styles["animate-shimmer"])} style={shimmerStyle()} />
+        )}
+        {progressInfo().overflow <= 0 && (
+          <div
+            class={cn("absolute top-0 w-1 h-full animate-pulse", styles["ks-progress-indicator"])}
+            style={indicatorStyle()}
+          />
+        )}
+      </div>
+      {progressInfo().overflow > 0 && (
+        <div
+          class={cn("transition-all duration-1000 animate-pulse", styles["ks-progress-overflow"])}
+          style={overflowStyle()}
+        >
+          <div
+            class={cn("absolute top-0 w-1 h-full animate-pulse", styles["ks-progress-indicator"])}
+            style={overflowIndicatorStyle()}
+          />
+        </div>
+      )}
+      <div class="absolute inset-0 flex items-center justify-between px-3">
+        <div class="flex items-center gap-2 min-w-0 flex-1">
+          {(() => {
+            const I = Icon();
+            return (
+              <Show when={I}>
+                <Dynamic component={I!} size={iconSize()} />
+              </Show>
+            );
+          })()}
+          {statusLabel() && (
+            <span class="font-mono font-semibold tabular-nums">{statusLabel()}</span>
+          )}
+          {label() && (
+            <>
+              {(Icon() || statusLabel()) && <span class="text-zinc-500 mx-1">·</span>}
+              <span class="flex-1 min-w-0">
+                <span class="text-zinc-400 block overflow-hidden text-ellipsis whitespace-nowrap">
+                  {label()}
+                </span>
+              </span>
+            </>
+          )}
+        </div>
+        {local.rightLabel !== undefined ? (
+          <div class="flex-shrink-0 ml-2 text-right">
+            <span class="font-mono font-semibold tabular-nums">{local.rightLabel}</span>
+          </div>
+        ) : !hidePercentage() ? (
+          <div class="flex-shrink-0 ml-2 text-right">
+            <span class="font-mono font-medium text-zinc-400">{Math.round(progressVal())}%</span>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/components/base/RadioCardGroup.tsx

@@ -0,0 +1,146 @@
+import { For, type JSX } from "solid-js";
+
+interface RadioCardGroupProps<T> {
+  /** The selectable options. */
+  options: T[];
+  /** The currently selected key, or null when nothing is selected. */
+  value: string | null;
+  /** Fired with the chosen option's key when selection changes. */
+  onChange: (value: string) => void;
+  /** Derives the stable string key for an option (used for value matching). */
+  keyOf: (option: T) => string;
+  /**
+   * Renders the inner content of one card. Receives the option and whether it
+   * is selected. Defaults to a dot + label layout (see `labelOf`). Callers that
+   * need a richer layout (price, avatar, secondary line) pass their own.
+   */
+  renderOption?: (option: T, selected: boolean) => JSX.Element;
+  /**
+   * Derives the text label for the default `renderOption`. Falls back to
+   * String(keyOf(option)) when omitted. Ignored when `renderOption` is supplied.
+   */
+  labelOf?: (option: T) => string;
+  /** Accessible label for the radiogroup wrapper. */
+  ariaLabel: string;
+  /**
+   * Grid column behavior. A number sets a fixed column count; "auto" (default)
+   * uses the responsive 2-up / 3-up grid that the source pickers used.
+   */
+  columns?: number | "auto";
+  /** Extra classes on the wrapper grid. */
+  class?: string;
+  /**
+   * Extra classes applied to every item button. Use this to override the
+   * default amber-active styling per call site.
+   */
+  itemClass?: string;
+}
+
+// A controlled, keyboard-navigable group of radio cards. The reusable part is
+// the roving-tabindex keyboard model that the transactions account picker and
+// the subscriptions variant picker carried verbatim: arrow keys move and select
+// with modulo wrap, Home/End jump to the ends, and exactly one item is a tab
+// stop (the selected one, or the first item when nothing is selected).
+//
+// Domain content stays out of this component: the caller supplies `keyOf` to
+// match the controlled `value` and an optional `renderOption` for the card body.
+// The default body is a dot + label, which covers the simplest case; richer
+// layouts (price lines, avatars) come in through `renderOption`.
+export default function RadioCardGroup<T>(props: RadioCardGroupProps<T>): JSX.Element {
+  const buttonRefs: (HTMLButtonElement | undefined)[] = [];
+
+  const keyAt = (option: T) => props.keyOf(option);
+
+  const currentIndex = () => {
+    const i = props.options.findIndex((o) => keyAt(o) === props.value);
+    return i >= 0 ? i : 0;
+  };
+
+  const selectByIndex = (idx: number) => {
+    const list = props.options;
+    if (list.length === 0) return;
+    const wrapped = ((idx % list.length) + list.length) % list.length;
+    props.onChange(keyAt(list[wrapped]));
+    buttonRefs[wrapped]?.focus();
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        e.preventDefault();
+        selectByIndex(currentIndex() + 1);
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        e.preventDefault();
+        selectByIndex(currentIndex() - 1);
+        break;
+      case "Home":
+        e.preventDefault();
+        selectByIndex(0);
+        break;
+      case "End":
+        e.preventDefault();
+        selectByIndex(props.options.length - 1);
+        break;
+    }
+  };
+
+  const gridClass = () => {
+    const cols = props.columns ?? "auto";
+    if (cols === "auto") return "grid max-sm:grid-cols-2 sm:grid-cols-3 gap-2";
+    return `grid gap-2 grid-cols-${cols}`;
+  };
+
+  const label = (option: T) => props.labelOf?.(option) ?? String(props.keyOf(option));
+
+  const defaultRender = (option: T, selected: boolean) => (
+    <>
+      <span
+        class="h-2 w-2 rounded-full shrink-0"
+        classList={{
+          "bg-amber-400": selected,
+          "bg-zinc-600 group-hover:bg-zinc-500": !selected,
+        }}
+      />
+      <span class="truncate">{label(option)}</span>
+    </>
+  );
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={props.ariaLabel}
+      tabIndex={-1}
+      class={`${gridClass()} ${props.class ?? ""}`}
+      onKeyDown={onKeyDown}
+    >
+      <For each={props.options}>
+        {(option, i) => {
+          const k = keyAt(option);
+          const selected = () => props.value === k;
+          const isTabStop = () => selected() || (!props.value && i() === 0);
+          return (
+            <button
+              ref={(el) => (buttonRefs[i()] = el)}
+              type="button"
+              role="radio"
+              aria-checked={selected()}
+              tabIndex={isTabStop() ? 0 : -1}
+              onClick={() => props.onChange(k)}
+              class={`group flex items-center gap-2 rounded-lg border px-3 py-3 text-left text-sm transition-colors cursor-pointer ${props.itemClass ?? ""}`}
+              classList={{
+                "border-amber-500/50 bg-amber-600/10 text-amber-300": selected(),
+                "border-zinc-700 bg-zinc-800/50 text-zinc-300 hover:border-zinc-600 hover:bg-zinc-800":
+                  !selected(),
+              }}
+            >
+              {(props.renderOption ?? defaultRender)(option, selected())}
+            </button>
+          );
+        }}
+      </For>
+    </div>
+  );
+}

package/src/components/base/SegmentedFilter.tsx

@@ -0,0 +1,50 @@
+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 };
+
+interface SegmentedFilterProps {
+  /** The available segments, left to right. */
+  options: SegmentedFilterOption[];
+  /** The currently active value. Matched against each option's value. */
+  value: string;
+  /** Called with the chosen value when a segment is clicked. */
+  onChange: (value: string) => void;
+  /** Prefix for each segment's data-testid (`${prefix}-${value}`). */
+  testIdPrefix?: string;
+  /** Extra classes on the outer bordered row. */
+  class?: string;
+}
+
+// A rounded bordered row of segment buttons with one active at a time.
+// Presentational only and domain free: the caller passes the segment values
+// and the active value, so there are no status literals baked in here.
+export default function SegmentedFilter(props: SegmentedFilterProps): JSX.Element {
+  const optionOf = (o: SegmentedFilterOption) =>
+    typeof o === "string" ? { value: o, label: o, capitalize: true } : { ...o, capitalize: false };
+  return (
+    <div class={`flex rounded-lg border border-zinc-800/50 overflow-hidden ${props.class ?? ""}`}>
+      <For each={props.options}>
+        {(o) => {
+          const opt = optionOf(o);
+          return (
+            <button
+              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"
+              classList={{
+                capitalize: opt.capitalize,
+                "bg-amber-500/20 text-amber-400": props.value === opt.value,
+                "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/50": props.value !== opt.value,
+              }}
+            >
+              {opt.label}
+            </button>
+          );
+        }}
+      </For>
+    </div>
+  );
+}

package/src/components/base/StatusPill.tsx

@@ -0,0 +1,90 @@
+import { Show, type JSX } from "solid-js";
+
+export type StatusTone = "success" | "neutral" | "warning" | "danger" | "info";
+
+interface ToneClass {
+  text: string;
+  /** Lighter background (default, the packages-style /10). */
+  bg: string;
+  /** Heavier background (the clients/vouchers-style /20, used when solid). */
+  bgSolid: string;
+  border: string;
+  /** Fill color for the optional leading dot. */
+  dot: string;
+}
+
+// Module-private tone palette. The caller maps its own domain enum
+// (status / is_active / voucher state) to one of these tones and passes a
+// plain label; nothing domain-specific leaks into this atom.
+const TONE_CLASS: Record<StatusTone, ToneClass> = {
+  success: {
+    text: "text-emerald-400",
+    bg: "bg-emerald-500/10",
+    bgSolid: "bg-emerald-500/20",
+    border: "border-emerald-400/40",
+    dot: "bg-emerald-400",
+  },
+  neutral: {
+    text: "text-zinc-400",
+    bg: "bg-zinc-800/60",
+    bgSolid: "bg-zinc-700/40",
+    border: "border-zinc-600",
+    dot: "bg-zinc-400",
+  },
+  warning: {
+    text: "text-amber-400",
+    bg: "bg-amber-500/10",
+    bgSolid: "bg-amber-500/20",
+    border: "border-amber-400/40",
+    dot: "bg-amber-400",
+  },
+  danger: {
+    text: "text-red-400",
+    bg: "bg-red-500/10",
+    bgSolid: "bg-red-500/20",
+    border: "border-red-400/40",
+    dot: "bg-red-400",
+  },
+  info: {
+    text: "text-blue-400",
+    bg: "bg-blue-500/10",
+    bgSolid: "bg-blue-500/20",
+    border: "border-blue-400/40",
+    dot: "bg-blue-400",
+  },
+};
+
+interface StatusPillProps {
+  /** Text shown inside the pill (the caller's own label). */
+  label: string;
+  /** Domain-free tone selector. The caller maps its enum to one of these. */
+  tone: StatusTone;
+  /** Render a leading filled dot in the tone's dot color. */
+  dot?: boolean;
+  /** Heavier /20 background (clients/vouchers style); default is the
+   *  lighter /10 background (packages style). */
+  solid?: boolean;
+  /** Extra classes on the pill wrapper. */
+  class?: string;
+  testId?: string;
+}
+
+// Single status-pill atom. Baseline is the uppercase, wide-tracked,
+// text-[10px] chip from the packages StatusPill. The optional dot covers the
+// clients is_active pill, and solid covers the heavier clients/vouchers
+// backgrounds. Domain enum -> tone + label mapping stays with the caller.
+export default function StatusPill(props: StatusPillProps): JSX.Element {
+  const tc = () => TONE_CLASS[props.tone];
+  const bg = () => (props.solid ? tc().bgSolid : tc().bg);
+  return (
+    <span
+      data-testid={props.testId}
+      class={`inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded border uppercase tracking-wider ${tc().text} ${tc().border} ${bg()} ${props.class ?? ""}`}
+    >
+      <Show when={props.dot}>
+        <span class={`h-1.5 w-1.5 rounded-full ${tc().dot}`} aria-hidden="true" />
+      </Show>
+      {props.label}
+    </span>
+  );
+}

package/src/components/base/TagPill.tsx

@@ -0,0 +1,24 @@
+import { type JSX } from "solid-js";
+
+interface TagPillProps {
+  /** The text to render inside the pill. */
+  label: string;
+  /** Extra classes on the pill span. */
+  class?: string;
+}
+
+// A tiny, intentionally neutral rounded-full chip for category/tag lists.
+// It is strictly zinc with no tone, no dot, and no uppercase, which keeps it
+// visually distinct from StatusPill. When a caller needs a colored chip they
+// should reach for StatusPill instead. Domain-free and presentational only.
+export default function TagPill(props: TagPillProps): JSX.Element {
+  return (
+    <span
+      class={`inline-block rounded-full border border-zinc-700 bg-zinc-800/50 px-2 py-0.5 text-[10px] text-zinc-400 ${
+        props.class ?? ""
+      }`}
+    >
+      {props.label}
+    </span>
+  );
+}