@kahitsan/ksui 0.32.0 → 0.34.0

package/src/components/composite/SalesBodyEditor.tsx

@@ -222,8 +222,8 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
   });
 
   return (
-    <div class="rounded-lg border border-emerald-500/20 bg-emerald-500/5 p-3 space-y-3">
-      <div class="flex items-center justify-between gap-2 text-[10px] uppercase tracking-widest text-emerald-400 font-semibold">
+    <div class="rounded-lg border border-[color-mix(in_srgb,var(--ks-success,#10b981)_20%,transparent)] bg-[color-mix(in_srgb,var(--ks-success,#10b981)_5%,transparent)] p-3 space-y-3">
+      <div class="flex items-center justify-between gap-2 text-[10px] uppercase tracking-widest text-[var(--ks-success-fg,#34d399)] font-semibold">
         <span class="flex items-center gap-1.5">
           <PackageIcon size={12} />
           Packages availed
@@ -231,7 +231,7 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
         <button
           type="button"
           onClick={() => setPickerOpen((v) => !v)}
-          class="ks-interactive inline-flex items-center gap-1 rounded-md border border-emerald-500/30 bg-emerald-500/10 px-2 py-0.5 text-[10px] uppercase tracking-widest text-emerald-300 hover:bg-emerald-500/20"
+          class="ks-interactive inline-flex items-center gap-1 rounded-md border border-[color-mix(in_srgb,var(--ks-success,#10b981)_30%,transparent)] bg-[color-mix(in_srgb,var(--ks-success,#10b981)_10%,transparent)] px-2 py-0.5 text-[10px] uppercase tracking-widest text-[var(--ks-success-fg,#34d399)] hover:bg-[color-mix(in_srgb,var(--ks-success,#10b981)_20%,transparent)]"
         >
           <Plus size={10} /> Add package
         </button>
@@ -240,23 +240,23 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
       <Show when={pickerOpen()}>
         <Show
           when={!loading()}
-          fallback={<div class="text-xs text-zinc-500">Loading packages…</div>}
+          fallback={<div class="text-xs text-[var(--ks-fg-subtle,#71717a)]">Loading packages…</div>}
         >
           <Show
             when={!loadError()}
-            fallback={<div class="text-xs text-rose-400">{loadError()}</div>}
+            fallback={<div class="text-xs text-[var(--ks-danger-fg,#f87171)]">{loadError()}</div>}
           >
             <Show
               when={packages().length > 0}
               fallback={
-                <div class="text-xs text-zinc-500">No active packages.</div>
+                <div class="text-xs text-[var(--ks-fg-subtle,#71717a)]">No active packages.</div>
               }
             >
-              <div class="space-y-1.5 max-h-56 overflow-y-auto rounded-md border border-emerald-500/15 p-2 bg-zinc-950/40">
+              <div class="space-y-1.5 max-h-56 overflow-y-auto rounded-md border border-[color-mix(in_srgb,var(--ks-success,#10b981)_15%,transparent)] p-2 bg-[color-mix(in_srgb,var(--ks-bg,#0a0a0a)_40%,transparent)]">
                 <For each={packages()}>
                   {(pkg) => (
                     <div class="space-y-1">
-                      <div class="text-[11px] uppercase tracking-widest text-zinc-400">
+                      <div class="text-[11px] uppercase tracking-widest text-[var(--ks-fg-muted,#a1a1aa)]">
                         {pkg.name}
                       </div>
                       <div class="flex flex-wrap gap-1.5">
@@ -265,7 +265,7 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
                             <button
                               type="button"
                               onClick={() => addVariant(pkg, v)}
-                              class="ks-interactive inline-flex items-center gap-1 rounded border border-zinc-700 bg-zinc-900 px-2 py-0.5 text-xs text-zinc-300 hover:border-emerald-500/40 hover:text-emerald-300"
+                              class="ks-interactive inline-flex items-center gap-1 rounded border border-[var(--ks-input-border,#3f3f46)] bg-[var(--ks-input-bg,#18181b)] px-2 py-0.5 text-xs text-[var(--ks-fg,#ffffff)] hover:border-[color-mix(in_srgb,var(--ks-success,#10b981)_40%,transparent)] hover:text-[var(--ks-success-fg,#34d399)]"
                             >
                               {v.name} · {formatPHP(Number(v.price))}
                             </button>
@@ -284,7 +284,7 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
       <Show
         when={props.items.length > 0}
         fallback={
-          <div class="text-xs text-zinc-500">No packages added yet.</div>
+          <div class="text-xs text-[var(--ks-fg-subtle,#71717a)]">No packages added yet.</div>
         }
       >
         <div class="space-y-1.5">
@@ -292,11 +292,11 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
             {(line) => (
               <div class="flex items-center gap-2 text-sm">
                 <div class="min-w-0 flex-1">
-                  <div class="text-zinc-200 truncate">
+                  <div class="text-[var(--ks-fg,#ffffff)] truncate">
                     {line.package_name}{" "}
-                    <span class="text-zinc-500">· {line.variant_name}</span>
+                    <span class="text-[var(--ks-fg-subtle,#71717a)]">· {line.variant_name}</span>
                   </div>
-                  <div class="text-[11px] text-zinc-500 tabular-nums">
+                  <div class="text-[11px] text-[var(--ks-fg-subtle,#71717a)] tabular-nums">
                     {formatPHP(line.unit_price)} · {line.duration_value}{" "}
                     {line.duration_unit}
                     {line.duration_value !== 1 ? "s" : ""}
@@ -306,30 +306,30 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
                   <button
                     type="button"
                     onClick={() => adjust(line.key, -1)}
-                    class="ks-interactive flex h-6 w-6 items-center justify-center rounded border border-zinc-700 bg-zinc-900 text-zinc-300 hover:border-emerald-500/40"
+                    class="ks-interactive flex h-6 w-6 items-center justify-center rounded border border-[var(--ks-input-border,#3f3f46)] bg-[var(--ks-input-bg,#18181b)] text-[var(--ks-fg,#ffffff)] hover:border-[color-mix(in_srgb,var(--ks-success,#10b981)_40%,transparent)]"
                     aria-label="Decrease quantity"
                   >
                     <Minus size={12} />
                   </button>
-                  <span class="w-6 text-center text-sm text-zinc-200 tabular-nums">
+                  <span class="w-6 text-center text-sm text-[var(--ks-fg,#ffffff)] tabular-nums">
                     {line.quantity}
                   </span>
                   <button
                     type="button"
                     onClick={() => adjust(line.key, 1)}
-                    class="ks-interactive flex h-6 w-6 items-center justify-center rounded border border-zinc-700 bg-zinc-900 text-zinc-300 hover:border-emerald-500/40"
+                    class="ks-interactive flex h-6 w-6 items-center justify-center rounded border border-[var(--ks-input-border,#3f3f46)] bg-[var(--ks-input-bg,#18181b)] text-[var(--ks-fg,#ffffff)] hover:border-[color-mix(in_srgb,var(--ks-success,#10b981)_40%,transparent)]"
                     aria-label="Increase quantity"
                   >
                     <Plus size={12} />
                   </button>
                 </div>
-                <div class="w-20 text-right text-zinc-300 tabular-nums whitespace-nowrap">
+                <div class="w-20 text-right text-[var(--ks-fg,#ffffff)] tabular-nums whitespace-nowrap">
                   {formatPHP(line.unit_price * line.quantity)}
                 </div>
                 <button
                   type="button"
                   onClick={() => remove(line.key)}
-                  class="ks-interactive flex h-6 w-6 items-center justify-center rounded text-zinc-500 hover:text-rose-400"
+                  class="ks-interactive flex h-6 w-6 items-center justify-center rounded text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-danger-fg,#f87171)]"
                   aria-label="Remove line"
                 >
                   <Trash2 size={12} />
@@ -342,7 +342,7 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
 
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
         <div>
-          <label class="text-[10px] uppercase tracking-widest text-zinc-500 font-semibold">
+          <label class="text-[10px] uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-semibold">
             Billed to
           </label>
           <ComboBox<ClientOption>
@@ -360,7 +360,7 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
           />
         </div>
         <div>
-          <label class="text-[10px] uppercase tracking-widest text-zinc-500 font-semibold">
+          <label class="text-[10px] uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-semibold">
             Voucher
           </label>
           <VoucherPicker
@@ -377,7 +377,7 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
 
       <Show when={!props.voucher}>
         <div>
-          <label class="text-[10px] uppercase tracking-widest text-zinc-500 font-semibold">
+          <label class="text-[10px] uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-semibold">
             Manual discount (₱)
           </label>
           <input
@@ -386,19 +386,19 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
             step="0.01"
             value={props.manualDiscount}
             onInput={(e) => props.setManualDiscount(e.currentTarget.value)}
-            class="mt-0.5 w-full rounded-md border border-zinc-700 bg-zinc-900 px-2 py-1 text-sm text-zinc-200 tabular-nums focus:border-emerald-500/50 focus:outline-none"
+            class="mt-0.5 w-full rounded-md border border-[var(--ks-input-border,#3f3f46)] bg-[var(--ks-input-bg,#18181b)] px-2 py-1 text-sm text-[var(--ks-fg,#ffffff)] tabular-nums focus:border-[color-mix(in_srgb,var(--ks-success,#10b981)_50%,transparent)] focus:outline-none"
           />
         </div>
       </Show>
 
       <Show when={props.items.length > 0}>
-        <div class="border-t border-emerald-500/15 pt-2 text-xs space-y-0.5 tabular-nums">
-          <div class="flex items-center justify-between text-zinc-400">
+        <div class="border-t border-[color-mix(in_srgb,var(--ks-success,#10b981)_15%,transparent)] pt-2 text-xs space-y-0.5 tabular-nums">
+          <div class="flex items-center justify-between text-[var(--ks-fg-muted,#a1a1aa)]">
             <span>Subtotal</span>
             <span>{formatPHP(subtotal())}</span>
           </div>
           <Show when={effectiveDiscount() > 0}>
-            <div class="flex items-center justify-between text-zinc-400">
+            <div class="flex items-center justify-between text-[var(--ks-fg-muted,#a1a1aa)]">
               <span>
                 {props.voucher
                   ? `Voucher ${props.voucher.code}`
@@ -407,7 +407,7 @@ export default function SalesBodyEditor(props: SalesBodyEditorProps) {
               <span>− {formatPHP(effectiveDiscount())}</span>
             </div>
           </Show>
-          <div class="flex items-center justify-between text-zinc-200 font-semibold">
+          <div class="flex items-center justify-between text-[var(--ks-fg,#ffffff)] font-semibold">
             <span>Total</span>
             <span>{formatPHP(total())}</span>
           </div>

package/src/components/composite/SearchableSelect.tsx

@@ -151,7 +151,7 @@ export default function SearchableSelect(props: SearchableSelectProps): JSX.Elem
         onClick={() => !props.disabled && setOpen((o) => !o)}
         class={
           props.triggerClass ??
-          "inline-flex items-center gap-1.5 text-xs text-zinc-300 bg-zinc-800/60 hover:bg-zinc-800 border border-zinc-700/60 rounded px-2 py-1 cursor-pointer transition-colors"
+          "inline-flex items-center gap-1.5 text-xs text-[var(--ks-fg,#ffffff)] bg-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_60%,transparent)] hover:bg-[var(--ks-surface-raised,#1a1a1a)] border border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_60%,transparent)] rounded px-2 py-1 cursor-pointer transition-colors"
         }
         classList={{ "cursor-not-allowed opacity-60": props.disabled }}
         title={props.disabled ? undefined : "Click to select"}
@@ -160,33 +160,33 @@ export default function SearchableSelect(props: SearchableSelectProps): JSX.Elem
           {busy()
             ? "…"
             : (currentLabel() ?? (
-                <span class="text-zinc-500 italic">{props.placeholder ?? "Select…"}</span>
+                <span class="text-[var(--ks-fg-subtle,#71717a)] italic">{props.placeholder ?? "Select…"}</span>
               ))}
         </span>
-        <ChevronsUpDown size={12} class="text-zinc-500 shrink-0" />
+        <ChevronsUpDown size={12} class="text-[var(--ks-fg-subtle,#71717a)] shrink-0" />
       </button>
       <Show when={open()}>
         <Portal>
           <div
             ref={popupRef}
-            class="z-[10000] rounded-md border border-zinc-700 bg-zinc-900/95 backdrop-blur shadow-xl overflow-hidden flex flex-col"
+            class="z-[10000] rounded-md border border-[var(--ks-input-border,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_95%,transparent)] backdrop-blur shadow-xl overflow-hidden flex flex-col"
             style={popupStyle()}
           >
-            <div class="px-2 py-1.5 border-b border-zinc-800">
+            <div class="px-2 py-1.5 border-b border-[var(--ks-border-strong,#3f3f46)]">
               <input
                 ref={inputRef}
                 type="text"
                 value={query()}
                 onInput={(e) => setQuery(e.currentTarget.value)}
                 placeholder={props.searchPlaceholder ?? "Search…"}
-                class="w-full px-2 py-1 text-xs bg-zinc-950 border border-zinc-800 rounded text-zinc-200 placeholder:text-zinc-600 focus:outline-none focus:border-amber-500/50"
+                class="w-full px-2 py-1 text-xs bg-[var(--ks-bg,#0a0a0a)] border border-[var(--ks-border-strong,#3f3f46)] rounded text-[var(--ks-fg,#ffffff)] placeholder:text-[var(--ks-input-placeholder,#71717a)] focus:outline-none focus:border-[color-mix(in_srgb,var(--ks-focus-ring,#c9a961)_50%,transparent)]"
               />
             </div>
             <div class="flex-1 overflow-y-auto">
               <Show
                 when={!props.loading && filtered().length > 0}
                 fallback={
-                  <div class="px-3 py-3 text-xs text-zinc-500 text-center">{emptyStateLabel()}</div>
+                  <div class="px-3 py-3 text-xs text-[var(--ks-fg-subtle,#71717a)] text-center">{emptyStateLabel()}</div>
                 }
               >
                 <For each={filtered()}>
@@ -196,22 +196,22 @@ export default function SearchableSelect(props: SearchableSelectProps): JSX.Elem
                       <button
                         type="button"
                         onClick={() => select(opt)}
-                        class="w-full text-left px-3 py-2 text-xs hover:bg-amber-500/10 transition-colors flex items-center justify-between gap-2"
+                        class="w-full text-left px-3 py-2 text-xs hover:bg-[color-mix(in_srgb,var(--ks-primary,#c9a961)_10%,transparent)] transition-colors flex items-center justify-between gap-2"
                         classList={{
-                          "text-amber-400": selected(),
-                          "text-zinc-200": !selected(),
+                          "text-[var(--ks-accent,#fbbf24)]": selected(),
+                          "text-[var(--ks-fg,#ffffff)]": !selected(),
                         }}
                       >
                         <span class="flex flex-col min-w-0">
                           <span class="font-medium truncate">{opt.label}</span>
                           <Show when={opt.description}>
-                            <span class="text-[10px] text-zinc-500 truncate">
+                            <span class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] truncate">
                               {opt.description}
                             </span>
                           </Show>
                         </span>
                         <Show when={selected()}>
-                          <span class="text-amber-400 shrink-0">✓</span>
+                          <span class="text-[var(--ks-accent,#fbbf24)] shrink-0">✓</span>
                         </Show>
                       </button>
                     );
@@ -220,11 +220,11 @@ export default function SearchableSelect(props: SearchableSelectProps): JSX.Elem
               </Show>
             </div>
             <Show when={props.allowClear && props.value != null && props.value !== ""}>
-              <div class="border-t border-zinc-800">
+              <div class="border-t border-[var(--ks-border-strong,#3f3f46)]">
                 <button
                   type="button"
                   onClick={() => select(null)}
-                  class="w-full text-left px-3 py-2 text-xs text-red-400 hover:bg-red-500/10 transition-colors flex items-center gap-2"
+                  class="w-full text-left px-3 py-2 text-xs text-[var(--ks-danger-fg,#f87171)] hover:bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)] transition-colors flex items-center gap-2"
                 >
                   <X size={12} />
                   <span>Clear selection</span>

package/src/components/composite/SecretReveal.tsx

@@ -34,19 +34,19 @@ const SecretReveal: Component<SecretRevealProps> = (props) => {
   };
 
   return (
-    <div class="mb-4 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
-      <p class="text-xs text-amber-300 font-medium mb-2">{local.warning ?? DEFAULT_WARNING}</p>
+    <div class="mb-4 p-3 rounded-lg bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_10%,transparent)] border border-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_20%,transparent)]">
+      <p class="text-xs text-[var(--ks-accent-hover,#fcd34d)] font-medium mb-2">{local.warning ?? DEFAULT_WARNING}</p>
       <div class="flex items-center gap-2">
         <code
           data-testid={local.testId}
-          class="flex-1 px-2 py-1.5 rounded bg-zinc-900 border border-zinc-700 text-amber-200 text-xs font-mono break-all"
+          class="flex-1 px-2 py-1.5 rounded bg-[var(--ks-input-bg,#18181b)] border border-[var(--ks-input-border,#3f3f46)] text-[var(--ks-accent-hover,#fcd34d)] text-xs font-mono break-all"
         >
           {local.secret}
         </code>
         <button
           type="button"
           onClick={copy}
-          class="ks-interactive px-2 py-1.5 rounded bg-zinc-800 border border-zinc-700 text-zinc-300 hover:text-white text-xs flex items-center gap-1"
+          class="ks-interactive px-2 py-1.5 rounded bg-[var(--ks-surface-raised,#1a1a1a)] border border-[var(--ks-input-border,#3f3f46)] text-[var(--ks-fg-muted,#a1a1aa)] hover:text-[var(--ks-fg,#ffffff)] text-xs flex items-center gap-1"
           aria-label="Copy secret"
         >
           <Copy size={12} />
@@ -54,7 +54,7 @@ const SecretReveal: Component<SecretRevealProps> = (props) => {
         </button>
       </div>
       <Show when={local.caption}>
-        <p class="text-[10px] text-zinc-500 mt-2">{local.caption}</p>
+        <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-2">{local.caption}</p>
       </Show>
     </div>
   );

package/src/components/composite/TransactionAccountFields.tsx

@@ -0,0 +1,78 @@
+import { Show } from "solid-js";
+import type { PaymentAccountOption } from "./PaymentAccountPicker";
+import FormField from "../base/FormField";
+import AccountRadioPicker from "./AccountRadioPicker";
+import TransferAccountsPicker from "./TransferAccountsPicker";
+
+export type TransactionFormAccount = PaymentAccountOption & {
+  balance?: number | string | null;
+};
+
+export interface TransactionAccountFieldsProps {
+  category: string;
+  accounts: TransactionFormAccount[];
+  accountLabel: string;
+  accountHint: string;
+  showSecondAccount: boolean;
+  secondAccountLabel?: string;
+  sourceAccount: string;
+  setSourceAccount: (v: string) => void;
+  destAccount: string;
+  setDestAccount: (v: string) => void;
+  amount: string;
+  transferFeeAmount: string;
+  transferFeeEnabled: boolean;
+  allowTransferFee: boolean;
+}
+
+/**
+ * The single-account-picker vs transfer-accounts-picker branch, split out of
+ * TransactionForm to keep that file under the file-size budget. `sale` writes
+ * to destAccount, every other category writes to sourceAccount — that
+ * category-driven single/second-account split is the only domain logic here.
+ */
+export default function TransactionAccountFields(props: TransactionAccountFieldsProps) {
+  return (
+    <Show
+      when={props.showSecondAccount}
+      fallback={
+        <FormField label={props.accountLabel}>
+          <AccountRadioPicker
+            accounts={props.accounts}
+            ariaLabel={props.accountLabel}
+            value={
+              props.category === "sale" ? props.destAccount : props.sourceAccount
+            }
+            onChange={(v) => {
+              if (props.category === "sale") {
+                props.setDestAccount(v);
+                props.setSourceAccount("");
+              } else {
+                props.setSourceAccount(v);
+                props.setDestAccount("");
+              }
+            }}
+          />
+          <Show when={props.accountHint}>
+            <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-0.5">
+              {props.accountHint}
+            </p>
+          </Show>
+        </FormField>
+      }
+    >
+      <TransferAccountsPicker
+        accounts={props.accounts}
+        sourceAccount={props.sourceAccount}
+        setSourceAccount={props.setSourceAccount}
+        destAccount={props.destAccount}
+        setDestAccount={props.setDestAccount}
+        sourceLabel={props.accountLabel}
+        destLabel={props.secondAccountLabel!}
+        amount={props.amount}
+        feeAmount={props.transferFeeAmount}
+        feeEnabled={props.transferFeeEnabled && props.allowTransferFee}
+      />
+    </Show>
+  );
+}