@kahitsan/ksui 0.31.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "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/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/AccountRadioPicker.tsx

@@ -0,0 +1,120 @@
+import { createEffect, Show, For } from "solid-js";
+import AccountAvatar from "../base/AccountAvatar";
+import type { PaymentAccountOption } from "./PaymentAccountPicker";
+
+export interface AccountRadioPickerProps {
+  accounts: PaymentAccountOption[];
+  value: string;
+  onChange: (v: string) => void;
+  ariaLabel: string;
+  excludeId?: string;
+  autoDefault?: boolean;
+}
+
+export default function AccountRadioPicker(props: AccountRadioPickerProps) {
+  const visible = () =>
+    props.accounts.filter(
+      (a) => !props.excludeId || a.id.toString() !== props.excludeId
+    );
+
+  createEffect(() => {
+    if (props.autoDefault === false) return;
+    if (props.value) return;
+    const first = visible()[0];
+    if (first) props.onChange(first.id.toString());
+  });
+
+  const buttonRefs: (HTMLButtonElement | undefined)[] = [];
+
+  const currentIndex = () => {
+    const list = visible();
+    const i = list.findIndex((a) => a.id.toString() === props.value);
+    return i >= 0 ? i : 0;
+  };
+
+  const selectByIndex = (idx: number) => {
+    const list = visible();
+    if (list.length === 0) return;
+    const wrapped = ((idx % list.length) + list.length) % list.length;
+    props.onChange(list[wrapped].id.toString());
+    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(visible().length - 1);
+        break;
+    }
+  };
+
+  return (
+    <Show
+      when={props.accounts.length > 0}
+      fallback={
+        <input
+          type="number"
+          value={props.value}
+          onInput={(e) => props.onChange(e.currentTarget.value)}
+          aria-label={props.ariaLabel}
+          placeholder="Account ID (financial-accounts module unavailable)"
+          class="w-full bg-zinc-900/60 border border-zinc-800/60 px-3 py-3 text-sm text-zinc-200 ks-hud-clip-button focus:outline-none focus:border-amber-500/50"
+        />
+      }
+    >
+      <div
+        role="radiogroup"
+        aria-label={props.ariaLabel}
+        tabIndex={-1}
+        class="grid max-sm:grid-cols-2 sm:grid-cols-3 gap-2"
+        onKeyDown={onKeyDown}
+      >
+        <For each={visible()}>
+          {(a, i) => {
+            const selected = () => props.value === a.id.toString();
+            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(a.id.toString())}
+                class="group flex items-center gap-2 rounded-lg border px-3 py-3 text-left text-sm transition-colors cursor-pointer ks-hud-clip-top-left-bottom-right"
+                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(),
+                }}
+              >
+                <AccountAvatar
+                  account={a}
+                  size={24}
+                  iconClass={selected() ? "text-amber-300" : "text-zinc-400"}
+                />
+                <span class="truncate">{a.name}</span>
+              </button>
+            );
+          }}
+        </For>
+      </div>
+    </Show>
+  );
+}

package/src/components/composite/FormAdvancedSection.tsx

@@ -0,0 +1,366 @@
+// The advanced-fields container of the transaction create/edit form: the Tax
+// type 4-way toggle + VAT breakdown preview, the EWT checkbox/rate/preview, and
+// the full Private-transaction panel (toggle, share-with-role buttons, per-member
+// checkbox list). Carved verbatim out of TransactionForm; the form still owns the
+// `viewMode === "advanced"` <Show> gate, so toggle behavior is unchanged. Props
+// are a verbatim subset of TransactionFormProps.
+
+import { For, Show } from "solid-js";
+import Lock from "lucide-solid/icons/lock";
+import FormField from "../base/FormField";
+import SegmentedFilter from "../base/SegmentedFilter";
+import { formatPHP } from "../../utils/formatPHP";
+import type { TransactionOrgMember, TransactionShareableRole } from "./TransactionForm";
+
+export interface FormAdvancedSectionProps {
+  amount: string;
+  category: string;
+  taxType: string;
+  setTaxType: (v: string) => void;
+  hasEwt: boolean;
+  setHasEwt: (v: boolean) => void;
+  ewtRate: string;
+  setEwtRate: (v: string) => void;
+  isPrivate: boolean;
+  setIsPrivate: (v: boolean) => void;
+  sharedWith: string[];
+  setSharedWith: (v: string[]) => void;
+  sharedRoleCodes: string[];
+  setSharedRoleCodes: (v: string[]) => void;
+  orgMembers: TransactionOrgMember[];
+  shareableRoles: TransactionShareableRole[];
+  canShare: boolean;
+}
+
+export default function FormAdvancedSection(props: FormAdvancedSectionProps) {
+  return (
+    <div
+      data-testid="advanced-fields-container"
+      class="rounded-lg border border-zinc-700/60 bg-zinc-900/40 p-3 space-y-3"
+    >
+      <div class="flex items-center gap-2 text-[10px] uppercase tracking-widest text-zinc-400 font-semibold">
+        <span>Advanced</span>
+      </div>
+
+      <div class="rounded-lg border border-zinc-800/50 bg-zinc-950/40 p-3">
+        <FormField label="Tax">
+          <SegmentedFilter
+            options={[
+              { value: "vat_inclusive", label: "VAT Incl." },
+              { value: "vat_exclusive", label: "VAT Excl." },
+              { value: "vat_exempt", label: "Exempt" },
+              { value: "non_vat", label: "Non-VAT" },
+            ]}
+            value={props.taxType}
+            onChange={props.setTaxType}
+          />
+        </FormField>
+        <Show
+          when={
+            props.amount &&
+            parseFloat(props.amount) > 0 &&
+            (props.taxType === "vat_inclusive" ||
+              props.taxType === "vat_exclusive")
+          }
+        >
+          {(() => {
+            const amt = parseFloat(props.amount);
+            const sub =
+              props.taxType === "vat_inclusive"
+                ? Math.round((amt / 1.12) * 100) / 100
+                : amt;
+            const vat =
+              props.taxType === "vat_inclusive"
+                ? Math.round((amt - sub) * 100) / 100
+                : Math.round(amt * 0.12 * 100) / 100;
+            const total = props.taxType === "vat_exclusive" ? sub + vat : amt;
+            return (
+              <div class="mt-2 text-xs text-zinc-500 space-y-0.5 border-t border-zinc-800/50 pt-2">
+                <div class="flex justify-between">
+                  <span>VATtable Sales</span>
+                  <span>{formatPHP(sub)}</span>
+                </div>
+                <div class="flex justify-between">
+                  <span>VAT (12%)</span>
+                  <span>{formatPHP(vat)}</span>
+                </div>
+                <div class="flex justify-between font-medium text-zinc-300">
+                  <span>Total</span>
+                  <span>{formatPHP(total)}</span>
+                </div>
+              </div>
+            );
+          })()}
+        </Show>
+
+        <Show
+          when={props.category === "expense" || props.category === "payable"}
+        >
+          <div class="mt-3 border-t border-zinc-800/50 pt-3">
+            <label class="flex items-center gap-2 text-xs text-zinc-300 cursor-pointer select-none">
+              <input
+                type="checkbox"
+                checked={props.hasEwt}
+                onChange={(e) => props.setHasEwt(e.currentTarget.checked)}
+                class="h-4 w-4 accent-amber-500 cursor-pointer"
+              />
+              <span>Has Expanded Withholding Tax</span>
+            </label>
+            <Show when={props.hasEwt}>
+              <div class="mt-2 space-y-2">
+                <FormField label="EWT rate (%)">
+                  <input
+                    type="number"
+                    step="0.01"
+                    min="0.01"
+                    max="100"
+                    value={props.ewtRate}
+                    onInput={(e) => props.setEwtRate(e.currentTarget.value)}
+                    class="w-full px-3 py-2 bg-zinc-900/50 border border-zinc-800 text-zinc-100 text-sm rounded-md focus:outline-none focus:border-amber-500/50"
+                    placeholder="e.g. 1, 2, 5, 10, 15"
+                  />
+                </FormField>
+                <Show
+                  when={
+                    props.amount &&
+                    parseFloat(props.amount) > 0 &&
+                    props.ewtRate &&
+                    parseFloat(props.ewtRate) > 0
+                  }
+                >
+                  {(() => {
+                    const amt = parseFloat(props.amount);
+                    const rate = parseFloat(props.ewtRate);
+                    const ewt = Math.round(amt * rate) / 100;
+                    return (
+                      <div class="text-xs text-zinc-500 border-t border-zinc-800/50 pt-2">
+                        <div class="flex justify-between">
+                          <span>EWT ({rate}%)</span>
+                          <span>{formatPHP(ewt)}</span>
+                        </div>
+                      </div>
+                    );
+                  })()}
+                </Show>
+              </div>
+            </Show>
+          </div>
+        </Show>
+      </div>
+
+      <div
+        class="rounded-lg border border-zinc-800/50 bg-zinc-950/40 p-4 relative"
+        classList={{ "opacity-60": !props.canShare }}
+        title={
+          props.canShare
+            ? undefined
+            : "Sharing private transactions requires the members.list_basic permission."
+        }
+      >
+        <div class="flex items-center justify-between min-h-[44px]">
+          <div class="flex items-center gap-2">
+            <Lock size={14} class="text-zinc-500" />
+            <div>
+              <span class="text-sm text-zinc-300">Private transaction</span>
+              <p class="text-[10px] text-zinc-600">
+                {props.canShare
+                  ? "Hidden from others unless shared"
+                  : "Locked — needs members.list_basic permission"}
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            disabled={!props.canShare}
+            aria-label="Toggle private transaction"
+            onClick={() => {
+              if (!props.canShare) return;
+              props.setIsPrivate(!props.isPrivate);
+            }}
+            class="ks-theme-toggle shrink-0"
+            classList={{ "cursor-not-allowed": !props.canShare }}
+          >
+            <span
+              class="ks-theme-toggle-track"
+              data-active={props.isPrivate ? "" : undefined}
+            >
+              <span class="ks-theme-toggle-icon ks-theme-toggle-icon-moon">
+                <Lock size={12} />
+              </span>
+              <span class="ks-theme-toggle-icon ks-theme-toggle-icon-sun">
+                <Lock size={12} />
+              </span>
+            </span>
+          </button>
+        </div>
+
+        <Show when={props.isPrivate && props.canShare}>
+          <div class="mt-4 pt-3 border-t border-zinc-800/50">
+            <p class="text-[10px] text-zinc-500 mb-3">
+              Always visible to:{" "}
+              <span class="text-zinc-400">
+                you (creator), org admins, superusers
+              </span>
+            </p>
+
+            <span class="text-xs text-zinc-500 block mb-2">
+              Share with role
+            </span>
+            <div class="flex gap-2 mb-3 flex-wrap">
+              <For each={props.shareableRoles}>
+                {(role) => {
+                  const members = () =>
+                    Array.isArray(props.orgMembers) ? props.orgMembers : [];
+                  const membersInRole = () =>
+                    members().filter((m) => m.role === role.code);
+                  const selected = () =>
+                    props.sharedRoleCodes.includes(role.code);
+                  return (
+                    <button
+                      type="button"
+                      onClick={() => {
+                        if (selected()) {
+                          props.setSharedRoleCodes(
+                            props.sharedRoleCodes.filter((c) => c !== role.code)
+                          );
+                        } else {
+                          const roleMemberIds = membersInRole().map(
+                            (m) => m.user_id
+                          );
+                          props.setSharedWith(
+                            props.sharedWith.filter(
+                              (id) => !roleMemberIds.includes(id)
+                            )
+                          );
+                          props.setSharedRoleCodes([
+                            ...props.sharedRoleCodes,
+                            role.code,
+                          ]);
+                        }
+                      }}
+                      class="px-3 py-2 text-xs rounded-lg border cursor-pointer min-h-[36px] capitalize transition-colors active:opacity-80"
+                      classList={{
+                        "border-amber-500/40 bg-amber-500/10 text-amber-400":
+                          selected(),
+                        "border-zinc-700 bg-zinc-800/50 text-zinc-400 hover:border-zinc-600":
+                          !selected(),
+                      }}
+                    >
+                      All {role.label}s
+                      <Show when={membersInRole().length > 0}>
+                        <span class="text-zinc-600 ml-1">
+                          ({membersInRole().length})
+                        </span>
+                      </Show>
+                    </button>
+                  );
+                }}
+              </For>
+            </div>
+
+            <span class="text-xs text-zinc-500 block mb-2">
+              Or select people
+            </span>
+            <div class="space-y-0.5 max-h-[150px] overflow-y-auto">
+              <For
+                each={(Array.isArray(props.orgMembers)
+                  ? props.orgMembers
+                  : []
+                ).filter((m) => m.role !== "admin")}
+              >
+                {(m) => {
+                  const coveringRole = () =>
+                    props.shareableRoles.find(
+                      (r) =>
+                        r.code === m.role &&
+                        props.sharedRoleCodes.includes(r.code)
+                    );
+                  const checked = () =>
+                    props.sharedWith.includes(m.user_id) || !!coveringRole();
+                  return (
+                    <label
+                      class="flex items-center gap-3 text-sm py-2 px-2 rounded-lg min-h-[40px] transition-colors"
+                      classList={{
+                        "text-zinc-300 cursor-pointer hover:bg-zinc-800/30 active:bg-zinc-800/50":
+                          !coveringRole(),
+                        "text-zinc-500 cursor-not-allowed bg-zinc-900/40":
+                          !!coveringRole(),
+                      }}
+                    >
+                      <div
+                        class="w-5 h-5 rounded border-2 flex items-center justify-center shrink-0 transition-colors"
+                        classList={{
+                          "border-amber-500 bg-amber-500":
+                            checked() && !coveringRole(),
+                          "border-amber-500/40 bg-amber-500/40":
+                            checked() && !!coveringRole(),
+                          "border-zinc-600 bg-transparent": !checked(),
+                        }}
+                      >
+                        <Show when={checked()}>
+                          <svg
+                            class="w-3 h-3 text-zinc-900"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            stroke-width="3"
+                          >
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              d="M5 13l4 4L19 7"
+                            />
+                          </svg>
+                        </Show>
+                      </div>
+                      <input
+                        type="checkbox"
+                        checked={checked()}
+                        disabled={!!coveringRole()}
+                        onChange={(e) => {
+                          if (coveringRole()) return;
+                          if (e.target.checked) {
+                            props.setSharedWith([
+                              ...props.sharedWith,
+                              m.user_id,
+                            ]);
+                          } else {
+                            props.setSharedWith(
+                              props.sharedWith.filter((id) => id !== m.user_id)
+                            );
+                          }
+                        }}
+                        class="sr-only"
+                      />
+                      <span class="flex-1">{m.name}</span>
+                      <Show
+                        when={coveringRole()}
+                        fallback={
+                          <span class="text-[10px] text-zinc-600 capitalize">
+                            {m.role}
+                          </span>
+                        }
+                      >
+                        <span class="text-[10px] text-amber-500/70">
+                          via All {coveringRole()!.label}s
+                        </span>
+                      </Show>
+                    </label>
+                  );
+                }}
+              </For>
+              <Show
+                when={
+                  !Array.isArray(props.orgMembers) ||
+                  props.orgMembers.length === 0
+                }
+              >
+                <p class="text-xs text-zinc-600 py-2">Loading members...</p>
+              </Show>
+            </div>
+          </div>
+        </Show>
+      </div>
+    </div>
+  );
+}