@kahitsan/ksui 0.30.0 → 0.31.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.30.0",
+  "version": "0.31.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/Button.tsx

@@ -73,6 +73,10 @@ const styles: Record<string, string> = {
 
 export type ButtonIntent = "primary" | "danger" | "secondary";
 export type ButtonVariant = "clip1" | "clip2" | "ghost" | "link";
+/** "md" (default) preserves the original px-4/py-2/text-sm footprint everywhere
+ *  it's already used. "sm" is for dense contexts — e.g. a DataTable row action
+ *  — where the default footprint reads as oversized against compact rows. */
+export type ButtonSize = "sm" | "md";
 
 export interface ButtonProps {
   /** Element / component to render as (defaults to "button"). Intentionally
@@ -83,6 +87,7 @@ export interface ButtonProps {
   as?: any;
   intent?: ButtonIntent;
   variant?: ButtonVariant;
+  size?: ButtonSize;
   noRipple?: boolean;
   noScanline?: boolean;
   noGlow?: boolean;
@@ -164,17 +169,17 @@ interface VariantConfig {
 const buttonVariantConfig: Record<ButtonVariant, VariantConfig> = {
   clip1: {
     effects: ["clip-top-left-bottom-right"],
-    baseClasses: "px-4 py-2 border",
+    baseClasses: "border",
     overrideType: false,
   },
   clip2: {
     effects: ["clip-top-right-bottom-left"],
-    baseClasses: "px-4 py-2 border",
+    baseClasses: "border",
     overrideType: false,
   },
   ghost: {
     effects: [],
-    baseClasses: "px-4 py-2 bg-transparent border-transparent hover:bg-current/10 hover:border-transparent",
+    baseClasses: "bg-transparent border-transparent hover:bg-current/10 hover:border-transparent",
     overrideType: true,
   },
   link: {
@@ -185,6 +190,16 @@ const buttonVariantConfig: Record<ButtonVariant, VariantConfig> = {
   },
 };
 
+// Padding/text/gap live here (not in variantConfig) so a variant's padding is
+// never in the same class-string as size's — `cn()` is a plain join with no
+// tailwind-merge dedup, so two conflicting padding utilities would silently
+// race on Tailwind's generated CSS order instead of on usage order. `link` is
+// always unpadded regardless of size (see buttonVariantConfig.link).
+const buttonSizeConfig: Record<ButtonSize, { padding: string; text: string; gap: string }> = {
+  md: { padding: "px-4 py-2", text: "text-sm", gap: "gap-2" },
+  sm: { padding: "px-2.5 py-1", text: "text-xs", gap: "gap-1.5" },
+};
+
 interface Ripple {
   id: number;
   x: number;
@@ -201,6 +216,7 @@ const Button = (props: ButtonProps): JSX.Element => {
       as: "button" as ButtonProps["as"],
       intent: "primary" as ButtonIntent,
       variant: "clip1" as ButtonVariant,
+      size: "md" as ButtonSize,
       noRipple: false,
       noScanline: false,
       noGlow: false,
@@ -214,6 +230,7 @@ const Button = (props: ButtonProps): JSX.Element => {
     "as",
     "intent",
     "variant",
+    "size",
     "noRipple",
     "noScanline",
     "noGlow",
@@ -238,6 +255,7 @@ const Button = (props: ButtonProps): JSX.Element => {
   const variantConfig = createMemo(
     () => buttonVariantConfig[local.variant as ButtonVariant] || buttonVariantConfig.clip1,
   );
+  const sizeConfig = createMemo(() => buttonSizeConfig[local.size as ButtonSize] || buttonSizeConfig.md);
 
   const hasRipple = createMemo(() => {
     if (local.noRipple) return false;
@@ -288,15 +306,22 @@ const Button = (props: ButtonProps): JSX.Element => {
 
   const classes = createMemo(() => {
     const coreClasses =
-      "select-none inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus:outline-none text-sm rounded";
+      "select-none inline-flex items-center justify-center font-medium transition-all duration-200 focus:outline-none rounded";
     const textColor = intentConfig().textColor;
     const backgroundClasses = variantConfig().overrideType
       ? ""
       : `${intentConfig().background} ${intentConfig().hover}`;
     const variantClasses = variantConfig().baseClasses;
+    // link is always unpadded (baseClasses carries its own "px-0 py-0") but
+    // still takes text/gap sizing; every other variant takes padding too.
+    const sizeClasses =
+      local.variant === "link"
+        ? `${sizeConfig().text} ${sizeConfig().gap}`
+        : `${sizeConfig().padding} ${sizeConfig().text} ${sizeConfig().gap}`;
 
     return cn(
       coreClasses,
+      sizeClasses,
       textColor,
       backgroundClasses,
       variantClasses,

package/src/components/base/DataTable.tsx

@@ -66,7 +66,7 @@ const STYLE_ID = "ksui-datatable-style";
 // Full list of overridable vars (default = host value):
 //   --ksui-dt-card-bg      outer card background
 //                          (host `.card-bg`: linear-gradient(135deg,#0f0f0f,#1a1a1a))
-//   --ksui-dt-radius       outer card / control corner radius   (0.5rem)
+//   --ksui-dt-radius       outer card / control corner radius   (0.625rem)
 //   --ksui-dt-border       card / header / footer / control border (zinc-800/50, rgba(39,39,42,0.5))
 //   --ksui-dt-row-border   row divider + expansion-row top border (zinc-800/30, rgba(39,39,42,0.3))
 //   --ksui-dt-control-bg   filter button / menu / select / search / show-more bg (zinc-900, #18181b)
@@ -84,10 +84,21 @@ const STYLE_ID = "ksui-datatable-style";
 //   --ksui-dt-accent       active accent text: active pager num / show-more hover (amber-400, #fbbf24)
 //   --ksui-dt-accent-bg    active pager num bg (amber-600/20, rgba(217,119,6,0.2))
 //   --ksui-dt-accent-border focus/hover accent border: search focus, show-more hover (amber-500/40, rgba(245,158,11,0.4))
+//   --ksui-dt-good         positive-status badge text, e.g. "Active" (emerald-400, #34d399)
+//   --ksui-dt-good-bg      positive-status badge bg (emerald-400/14, rgba(52,211,153,0.14))
+//   --ksui-dt-danger       negative-status badge text, e.g. "Overdue"/"Expired" (red-400, #f87171)
+//   --ksui-dt-danger-bg    negative-status badge bg (red-400/14, rgba(248,113,113,0.14))
+//   --ksui-dt-thead-bg     header-row tint, layered over card-bg to set it apart from data rows (white/3%, rgba(255,255,255,0.03))
+//
+// `.ksui-datatable-td-num` / `.ksui-datatable-th-num` (mono, tabular-nums,
+// right-aligned, nowrap) and `.ksui-datatable-badge` (+ `-ok` / `-warn` /
+// `-danger` modifiers, using the vars above) are opt-in utility classes a
+// consumer passes via a column's `className` — DataTable itself never
+// infers column semantics from data.
 //
 const DATATABLE_CSS = `
-.ksui-datatable{background:var(--ksui-dt-card-bg,linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 100%));border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));border-radius:var(--ksui-dt-radius,0.5rem);color:var(--ksui-dt-fg,#e4e4e7);}
-.ksui-datatable-header{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;border-bottom:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));padding:1rem;}
+.ksui-datatable{background:var(--ksui-dt-card-bg,linear-gradient(135deg,#0f0f0f 0%,#1a1a1a 100%));border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));border-radius:var(--ksui-dt-radius,0.625rem);color:var(--ksui-dt-fg,#e4e4e7);box-shadow:0 1px 2px rgba(0,0,0,0.3),0 8px 20px -10px rgba(0,0,0,0.5);}
+.ksui-datatable-header{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem;border-bottom:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));padding:0.75rem 0.875rem;}
 .ksui-datatable-filters-inline{display:none;flex:1 1 0%;}
 .ksui-datatable-filters-mobile{display:block;flex:1 1 0%;}
 @media (min-width:768px){.ksui-datatable-filters-inline{display:block;}.ksui-datatable-filters-mobile{display:none;}}
@@ -105,9 +116,10 @@ const DATATABLE_CSS = `
 .ksui-datatable-search-input:focus{border-color:var(--ksui-dt-accent-border,rgba(245,158,11,0.4));}
 @media (min-width:640px){.ksui-datatable-search-input{width:18rem;}}
 .ksui-datatable-scroll{overflow-x:auto;transition:opacity 0.15s ease;}
-.ksui-datatable-table{width:100%;text-align:left;font-size:0.875rem;line-height:1.25rem;border-collapse:collapse;}
-.ksui-datatable-thead{border-bottom:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ksui-dt-muted,#71717a);}
-.ksui-datatable-th{padding:0.75rem 1rem;}
+.ksui-datatable-table{width:100%;text-align:left;font-size:0.78125rem;line-height:1.3;border-collapse:collapse;}
+.ksui-datatable-thead{border-bottom:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));background:var(--ksui-dt-thead-bg,rgba(255,255,255,0.03));font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.65625rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ksui-dt-muted,#71717a);}
+.ksui-datatable-th{padding:0.5625rem 0.875rem;background:var(--ksui-dt-thead-bg,rgba(255,255,255,0.03));white-space:nowrap;}
+.ksui-datatable-th-num{text-align:right;}
 .ksui-datatable-th-sortable{cursor:pointer;transition:color 0.15s ease;}
 .ksui-datatable-th-sortable:hover{color:var(--ksui-dt-text-strong,#d4d4d8);}
 .ksui-datatable-th-inner{display:inline-flex;align-items:center;}
@@ -116,13 +128,19 @@ const DATATABLE_CSS = `
 .ksui-datatable-row:hover{background-color:var(--ksui-dt-row-hover,rgba(39,39,42,0.5));}
 .ksui-datatable-row-clickable{cursor:pointer;}
 .ksui-datatable-row-clickable:active{background-color:var(--ksui-dt-row-active,rgba(39,39,42,0.7));}
-.ksui-datatable-td{padding:0.75rem 1rem;}
+.ksui-datatable-td{padding:0.5rem 0.875rem;vertical-align:middle;white-space:nowrap;}
+.ksui-datatable-td-num{font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ksui-dt-text-strong,#d4d4d8);}
+.ksui-datatable-code{display:block;font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.71875rem;color:var(--ksui-dt-fg,#e4e4e7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch;}
+.ksui-datatable-badge{display:inline-block;font-family:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;font-size:0.625rem;padding:0.125rem 0.4375rem;border-radius:0.3125rem;letter-spacing:0.02em;background:var(--ksui-dt-control-bg,#18181b);color:var(--ksui-dt-text,#a1a1aa);}
+.ksui-datatable-badge-ok{background:var(--ksui-dt-good-bg,rgba(52,211,153,0.14));color:var(--ksui-dt-good,#34d399);}
+.ksui-datatable-badge-warn{background:var(--ksui-dt-accent-bg,rgba(217,119,6,0.2));color:var(--ksui-dt-accent,#fbbf24);}
+.ksui-datatable-badge-danger{background:var(--ksui-dt-danger-bg,rgba(248,113,113,0.14));color:var(--ksui-dt-danger,#f87171);}
 .ksui-datatable-expansion-row{border-top:1px solid var(--ksui-dt-row-border,rgba(39,39,42,0.3));background-color:var(--ksui-dt-expansion-bg,rgba(9,9,11,0.4));}
 .ksui-datatable-expansion-td{padding:0;}
-.ksui-datatable-skeleton{height:1.25rem;width:100%;border-radius:0.25rem;background:var(--ksui-dt-skeleton,rgba(39,39,42,0.5));animation:ksuiDatatablePulse 1.5s cubic-bezier(0.4,0,0.6,1) infinite;}
+.ksui-datatable-skeleton{height:1rem;width:100%;border-radius:0.25rem;background:var(--ksui-dt-skeleton,rgba(39,39,42,0.5));animation:ksuiDatatablePulse 1.5s cubic-bezier(0.4,0,0.6,1) infinite;}
 @keyframes ksuiDatatablePulse{0%,100%{opacity:1;}50%{opacity:0.5;}}
 .ksui-datatable-empty{padding:3rem 1rem;text-align:center;color:var(--ksui-dt-muted,#71717a);}
-.ksui-datatable-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));padding:1rem;}
+.ksui-datatable-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));padding:0.625rem 0.875rem;}
 .ksui-datatable-info{font-size:0.75rem;color:var(--ksui-dt-muted,#71717a);}
 .ksui-datatable-showmore{border-radius:0.5rem;border:1px solid var(--ksui-dt-border,rgba(39,39,42,0.5));background:var(--ksui-dt-control-bg,#18181b);padding:0.5rem 1rem;font-size:0.75rem;font-weight:500;color:var(--ksui-dt-text-strong,#d4d4d8);transition:border-color 0.15s ease,color 0.15s ease;cursor:pointer;}
 .ksui-datatable-showmore:hover:not(:disabled){border-color:var(--ksui-dt-accent-border,rgba(245,158,11,0.4));color:var(--ksui-dt-accent,#fbbf24);}

package/src/components/base/StatusPill.tsx

@@ -1,89 +1,74 @@
-import { Show, type JSX } from "solid-js";
+import { type JSX } from "solid-js";
 
 export type StatusTone = "success" | "neutral" | "warning" | "danger" | "info";
 
 interface ToneClass {
   text: string;
-  /** Lighter background (default, the packages-style /10). */
+  /** Lighter background (default). */
   bg: string;
-  /** Heavier background (the clients/vouchers-style /20, used when solid). */
+  /** Heavier background, used when `solid` is set. */
   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.
+//
+// Flat tinted bg + text, no border — a borderless chip reads cleaner at the
+// compact sizes tables now use than the previous bordered pill did.
 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). */
+  /** Text shown inside the pill (the caller's own label), rendered as-is —
+   *  the caller decides case. */
   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). */
+  /** Heavier /20 background; default is the lighter /10 background. */
   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.
+// Single status-pill atom: a flat tinted-bg text chip, no border, no leading
+// dot, no forced case — the caller's label renders exactly as given. `solid`
+// switches to the heavier background. 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 ?? ""}`}
+      class={`inline-flex items-center text-xs px-1.5 py-0.5 rounded ${tc().text} ${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/Tooltip.tsx

@@ -5,6 +5,14 @@ interface TooltipProps {
   content: JSX.Element;
   /** Where the bubble sits relative to the trigger. Default "top". */
   placement?: "top" | "bottom";
+  /** Horizontal anchor. "center" (default) centers the bubble on the trigger;
+   *  "start" left-aligns it to the trigger's left edge instead — use when the
+   *  trigger sits near a left edge (sidebar, viewport) where a centered bubble
+   *  would slide underneath it. */
+  align?: "center" | "start";
+  /** Wrap long copy inside a fixed-width bubble instead of one nowrap line —
+   *  pairs with `align="start"` for descriptive copy near a screen edge. */
+  wrap?: boolean;
   /** Allow the trigger to be any element; the wrapper is a span. */
   children: JSX.Element;
   /** Extra classes on the wrapper. The wrapper is inline-flex so it sits
@@ -43,6 +51,7 @@ interface TooltipProps {
 export default function Tooltip(props: TooltipProps): JSX.Element {
   const tooltipId = props.id ?? createUniqueId();
   const placement = () => props.placement ?? "top";
+  const align = () => props.align ?? "center";
   return (
     <span
       class={`relative inline-flex group/tt ${props.class ?? ""}`}
@@ -53,7 +62,9 @@ export default function Tooltip(props: TooltipProps): JSX.Element {
       <span
         role="tooltip"
         id={tooltipId}
-        class={`pointer-events-none absolute left-1/2 -translate-x-1/2 px-2 py-1 rounded-md bg-zinc-900 border border-zinc-700/80 text-[11px] text-zinc-100 whitespace-nowrap opacity-0 group-hover/tt:opacity-100 group-focus-within/tt:opacity-100 transition-opacity duration-150 delay-150 z-50 shadow-lg ${
+        class={`pointer-events-none absolute px-2 py-1 rounded-md bg-zinc-900 border border-zinc-700/80 text-[11px] text-zinc-100 opacity-0 group-hover/tt:opacity-100 group-focus-within/tt:opacity-100 transition-opacity duration-150 delay-150 z-50 shadow-lg ${
+          align() === "start" ? "left-0" : "left-1/2 -translate-x-1/2"
+        } ${props.wrap ? "whitespace-normal w-max max-w-[260px]" : "whitespace-nowrap"} ${
           placement() === "bottom" ? "top-full mt-1" : "bottom-full mb-1"
         }`}
       >

package/src/components/composite/resource/cells.tsx

@@ -31,7 +31,7 @@ export function renderCell(
     case "status": {
       const active = Boolean(raw);
       const arm = active ? r.active : r.inactive;
-      return <StatusPill label={arm.label} tone={arm.tone} dot solid />;
+      return <StatusPill label={arm.label} tone={arm.tone} solid />;
     }
     case "text":
     default: {