@kahitsan/ksui 0.40.0 → 0.40.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.40.0",
+  "version": "0.40.2",
   "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/FormField.test.tsx

@@ -0,0 +1,23 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@solidjs/testing-library";
+import FormField from "./FormField";
+
+describe("FormField", () => {
+  it("associates optional id with its label", () => {
+    const { getByLabelText } = render(() => (
+      <FormField label="Amount" id="amount-field">
+        <input id="amount-field" />
+      </FormField>
+    ));
+    expect(getByLabelText("Amount").id).toBe("amount-field");
+  });
+
+  it("preserves unlabeled-control compatibility when id is omitted", () => {
+    const { getByText } = render(() => (
+      <FormField label="Notes">
+        <textarea />
+      </FormField>
+    ));
+    expect(getByText("Notes")).toBeTruthy();
+  });
+});

package/src/components/base/FormField.tsx

@@ -6,10 +6,10 @@
 import { Show } from "solid-js";
 import type { JSX } from "solid-js";
 
-export default function FormField(props: { label: string; children: JSX.Element; hint?: string }) {
+export default function FormField(props: { label: string; id?: string; children: JSX.Element; hint?: string }) {
   return (
     <div>
-      <label class="block text-xs text-[var(--ks-fg-subtle,#71717a)] mb-1">{props.label}</label>
+      <label for={props.id} class="block text-xs text-[var(--ks-fg-subtle,#71717a)] mb-1">{props.label}</label>
       {props.children}
       <Show when={props.hint}>
         <p class="text-[10px] text-[var(--ks-fg-subtle,#71717a)] mt-1">{props.hint}</p>

package/src/utils/formatShortDate.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { formatShortDate } from "./formatShortDate";
+
+describe("formatShortDate", () => {
+  it("preserves date-only values across runtime timezone defaults", () => {
+    expect(formatShortDate("2026-09-10")).toBe("Sep 10, 2026");
+  });
+
+  it("uses the date component from full ISO values", () => {
+    expect(formatShortDate("2026-09-10T00:00:00.000Z")).toBe("Sep 10, 2026");
+  });
+
+  it("returns a placeholder for missing or malformed values", () => {
+    expect(formatShortDate(null)).toBe("—");
+    expect(formatShortDate("not-a-date")).toBe("—");
+  });
+});

package/src/utils/formatShortDate.ts

@@ -1,17 +1,21 @@
 // Short-date formatter for plugin remotes.
 //
 // Renders a YYYY-MM-DD (or full ISO) date string as the en-PH short form
-// (e.g. "Jan 5, 2026"). Hilinga is an Asia/Manila product, so the date part is
-// anchored at local midnight ("T00:00:00") to avoid the UTC drift that
-// toISOString would introduce. Returns an em-dash placeholder for a missing
-// value. Pure helper, no DOM, no fetch.
-
+// (e.g. "Jan 5, 2026"). Date-only values are parsed as calendar components
+// so runtime timezone defaults cannot shift their displayed day. Hilinga is an
+// Asia/Manila product, so formatting uses the canonical Manila timezone.
+// Returns an em-dash placeholder for a missing value. Pure helper, no DOM, no fetch.
 export function formatShortDate(dateStr: string | null | undefined): string {
   if (!dateStr) return "—";
   const datePart = dateStr.includes("T") ? dateStr.split("T")[0] : dateStr;
-  return new Date(datePart + "T00:00:00").toLocaleDateString("en-PH", {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(datePart);
+  if (!match) return "—";
+  const [, year, month, day] = match;
+  const date = new Date(Number(year), Number(month) - 1, Number(day));
+  return new Intl.DateTimeFormat("en-PH", {
+    timeZone: "Asia/Manila",
     year: "numeric",
     month: "short",
     day: "numeric",
-  });
+  }).format(date);
 }