jcicl 1.1.5 → 1.2.2

package/Tabs/Tabs.d.ts

@@ -0,0 +1,42 @@
+export interface TabItem {
+    /** Text shown in the tab header. */
+    label: string;
+    /** Optional element rendered before the label (e.g. an icon). */
+    icon?: React.ReactNode;
+    /** Content rendered in the panel when this tab is active. */
+    content: React.ReactNode;
+}
+export type TabHeaderAlignment = 'left' | 'center' | 'right';
+export interface TabsProps {
+    /** Ordered list of tabs. The first tab is shown by default. */
+    tabs: TabItem[];
+    /** Initially active tab index when uncontrolled. Defaults to 0. */
+    defaultIndex?: number;
+    /** Active tab index. Provide together with onChange for controlled use. */
+    activeIndex?: number;
+    /** Called with the next index whenever a tab is selected. */
+    onChange?: (index: number) => void;
+    /**
+     * Opt-in URL persistence (uncontrolled mode only). When set, the active tab's
+     * label is stored in the URL query param of this name via the History API —
+     * no router/dependency required. Give each Tabs on a page a UNIQUE key so they
+     * don't collide; persistence is per browser window since each window has its
+     * own URL. Tab labels should be unique, since the active tab is stored by label.
+     */
+    persistKey?: string;
+    /** Horizontal alignment of the tab headers. Defaults to 'left'. */
+    tabHeaderAlignment?: TabHeaderAlignment;
+    /** Header label font size override (CSS length; number is treated as px). Defaults to 27px. */
+    headerFontSize?: string | number;
+    /** Extra class(es) merged onto each tab header button (consumer override). */
+    headerClassName?: string;
+    /** Inline style merged onto each tab header button (consumer override). */
+    headerStyle?: React.CSSProperties;
+}
+/**
+ * A horizontal tab layout: a header row of selectable tabs and a panel showing
+ * the active tab's content. Works uncontrolled (manages its own active tab,
+ * seeded by `defaultIndex`) or controlled (pass `activeIndex` plus `onChange`).
+ */
+export declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/Tabs/Tabs.js

@@ -0,0 +1,121 @@
+import { jsxs as h, jsx as v } from "react/jsx-runtime";
+import { useId as E, useState as S, useRef as T, useEffect as k } from "react";
+import { cn as y } from "../cn.js";
+const A = {
+  left: "justify-start",
+  center: "justify-between",
+  // spread headers across the full width
+  right: "justify-end"
+}, x = (e, i) => {
+  if (typeof window > "u") return null;
+  const r = new URLSearchParams(window.location.search).get(e);
+  if (r == null) return null;
+  const l = i.findIndex((d) => d.label === r);
+  return l >= 0 ? l : null;
+}, N = (e, i) => {
+  if (typeof window > "u") return;
+  const r = new URLSearchParams(window.location.search);
+  r.set(e, i), window.history.replaceState(
+    window.history.state,
+    "",
+    `${window.location.pathname}?${r}${window.location.hash}`
+  );
+}, M = ({
+  tabs: e,
+  defaultIndex: i = 0,
+  activeIndex: r,
+  onChange: l,
+  persistKey: d,
+  tabHeaderAlignment: j = "left",
+  headerFontSize: f,
+  headerClassName: $,
+  headerStyle: I
+}) => {
+  const s = E(), u = r !== void 0, o = !u && d, [g, b] = S(
+    () => (o ? x(o, e) : null) ?? i
+  ), L = u ? r : g, p = T(e);
+  if (p.current = e, k(() => {
+    if (!o) return;
+    const t = () => {
+      const n = x(o, p.current);
+      n != null && b(n);
+    };
+    return window.addEventListener("popstate", t), () => window.removeEventListener("popstate", t);
+  }, [o]), e.length === 0) return null;
+  const c = Math.min(Math.max(L, 0), e.length - 1), w = (t) => {
+    u || b(t), o && N(o, e[t].label), l == null || l(t);
+  }, P = {
+    ...f != null ? { fontSize: f } : {},
+    ...I
+  }, R = (t) => {
+    var m;
+    if (t.key !== "ArrowRight" && t.key !== "ArrowLeft") return;
+    t.preventDefault();
+    const n = t.key === "ArrowRight" ? 1 : -1, a = (c + n + e.length) % e.length;
+    w(a), (m = document.getElementById(`${s}-tab-${a}`)) == null || m.focus();
+  };
+  return /* @__PURE__ */ h("div", { className: "jcTabs flex w-full flex-col", children: [
+    /* @__PURE__ */ v(
+      "div",
+      {
+        role: "tablist",
+        className: y(
+          "jcTabList flex flex-wrap gap-1 border-b-2 border-jc-gray-2",
+          A[j]
+        ),
+        children: e.map((t, n) => {
+          const a = n === c;
+          return /* @__PURE__ */ h(
+            "button",
+            {
+              id: `${s}-tab-${n}`,
+              type: "button",
+              role: "tab",
+              "aria-selected": a,
+              "aria-controls": `${s}-panel-${n}`,
+              tabIndex: a ? 0 : -1,
+              "data-active": a,
+              onClick: () => w(n),
+              onKeyDown: R,
+              style: P,
+              className: y(
+                // The lib's CSS omits Tailwind preflight, so reset the native button
+                // border explicitly (none on top/sides) and keep only the bottom indicator.
+                "jcTab -mb-0.5 inline-flex cursor-pointer appearance-none items-center gap-2 bg-transparent px-5 py-3",
+                "border-solid border-t-0 border-x-0 border-b-[3px] border-b-[color:transparent]",
+                "text-[27px] font-normal text-jc-black transition-[color,border-color] duration-200",
+                // Active indicator + focus ring track the app's selected theme color
+                // (--jc-theme-color, injected by DefaultTemplate); jc-gold (#fab62d) is the
+                // fallback outside a themed app. Keep these strings literal — Tailwind only
+                // scans complete class strings, so the color can't be interpolated.
+                "data-[active=true]:font-semibold data-[active=true]:border-b-[color:var(--jc-theme-color,#fab62d)]",
+                "focus-visible:rounded-[4px] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--jc-theme-color,#fab62d)]",
+                $
+              ),
+              children: [
+                t.icon,
+                t.label
+              ]
+            },
+            n
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ v(
+      "div",
+      {
+        role: "tabpanel",
+        id: `${s}-panel-${c}`,
+        "aria-labelledby": `${s}-tab-${c}`,
+        tabIndex: 0,
+        className: "jcTabPanel pt-6",
+        children: e[c].content
+      }
+    )
+  ] });
+};
+export {
+  M as Tabs,
+  M as default
+};

package/Tabs/index.d.ts

@@ -0,0 +1 @@
+export { default, type TabsProps, type TabItem } from './Tabs';

package/Tabs/index.js

@@ -0,0 +1,4 @@
+import { Tabs as f } from "./Tabs.js";
+export {
+  f as default
+};

package/api.d.ts

@@ -1,11 +1,22 @@
 export interface ApiResponse<T> {
     success: boolean;
     data?: T | null;
-    error?: {
-        status: number;
-        statusText: string;
-        message: string;
-    };
+    error?: ApiError;
+}
+/**
+ * Error shape for a failed request. `message` is always a best-effort human-readable string
+ * (back-compat for `message`-only consumers). The remaining fields mirror an RFC 7807 / 9457
+ * ProblemDetails body when the server sends one — `errors` carries field-level validation
+ * messages (field key → messages), e.g. for surfacing inline form errors.
+ */
+export interface ApiError {
+    status: number;
+    statusText: string;
+    message: string;
+    detail?: string;
+    title?: string;
+    traceId?: string;
+    errors?: Record<string, string[]>;
 }
 /**
  * Base API client for JCIT applications.

package/api.js

@@ -1,70 +1,84 @@
-var T = Object.defineProperty;
-var h = (s, e, r) => e in s ? T(s, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : s[e] = r;
-var m = (s, e, r) => h(s, typeof e != "symbol" ? e + "" : e, r);
-class x {
+var E = Object.defineProperty;
+var w = (a, e, i) => e in a ? E(a, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : a[e] = i;
+var o = (a, e, i) => w(a, typeof e != "symbol" ? e + "" : e, i);
+import { firstProblemMessage as v } from "./problemDetails.js";
+class I {
   constructor(e) {
     // `protected` (not `private`): subclasses may need to read or override the URL
     // (e.g., versioned-API subclass that prepends '/v2'). Not `public`: external
     // code shouldn't be able to read or mutate the base URL after construction.
-    m(this, "baseUrl");
+    o(this, "baseUrl");
     if (!e)
       throw new Error(
         "BaseApiClient: baseUrl is required. Pass import.meta.env.VITE_API_BASE_URL or equivalent."
       );
     this.baseUrl = e.endsWith("/") ? e.slice(0, -1) : e;
   }
-  async request(e, r = "GET", n, a) {
-    const o = (a == null ? void 0 : a.timeoutMs) ?? 3e4, l = new AbortController(), d = setTimeout(() => l.abort(), o);
+  async request(e, i = "GET", l, c) {
+    const f = (c == null ? void 0 : c.timeoutMs) ?? 3e4, m = new AbortController(), T = setTimeout(() => m.abort(), f);
     try {
-      const f = {
-        method: r,
+      const g = {
+        method: i,
         headers: {
-          ...n !== void 0 ? { "Content-Type": "application/json" } : {},
-          ...a == null ? void 0 : a.headers
+          ...l !== void 0 ? { "Content-Type": "application/json" } : {},
+          ...c == null ? void 0 : c.headers
         },
         credentials: "include",
         // Required for Windows Authentication with CORS
-        signal: l.signal
+        signal: m.signal
       };
-      n !== void 0 && (f.body = JSON.stringify(n));
-      const t = await fetch(`${this.baseUrl}${e}`, f);
-      if (clearTimeout(d), !t.ok)
+      l !== void 0 && (g.body = JSON.stringify(l));
+      const r = await fetch(`${this.baseUrl}${e}`, g);
+      if (clearTimeout(T), !r.ok) {
+        const h = await r.text();
+        let t;
+        try {
+          t = h ? JSON.parse(h) : void 0;
+        } catch {
+          t = void 0;
+        }
+        const x = v(t == null ? void 0 : t.errors);
         return {
           success: !1,
           error: {
-            status: t.status,
-            statusText: t.statusText,
-            message: `HTTP ${t.status}: ${t.statusText}`
+            status: r.status,
+            statusText: r.statusText || (t == null ? void 0 : t.title) || "",
+            message: (t == null ? void 0 : t.message) || (t == null ? void 0 : t.detail) || (t == null ? void 0 : t.title) || x || `HTTP ${r.status}: ${r.statusText}`,
+            detail: t == null ? void 0 : t.detail,
+            title: t == null ? void 0 : t.title,
+            traceId: t == null ? void 0 : t.traceId,
+            errors: t == null ? void 0 : t.errors
           }
         };
-      if (t.status === 204)
+      }
+      if (r.status === 204)
         return {
           success: !0,
           data: void 0
         };
-      const c = await t.text();
-      if (!c || c === "null")
+      const s = await r.text();
+      if (!s || s === "null")
         return {
           success: !0,
           data: null
         };
-      let i;
+      let d;
       try {
-        i = JSON.parse(c);
+        d = JSON.parse(s);
       } catch {
-        i = c;
+        d = s;
       }
       return {
         success: !0,
-        data: i
+        data: d
       };
     } catch (u) {
-      return clearTimeout(d), u instanceof Error && u.name === "AbortError" ? {
+      return clearTimeout(T), u instanceof Error && u.name === "AbortError" ? {
         success: !1,
         error: {
           status: 0,
           statusText: "Timeout",
-          message: `Request timed out after ${o}ms`
+          message: `Request timed out after ${f}ms`
         }
       } : {
         success: !1,
@@ -78,5 +92,5 @@ class x {
   }
 }
 export {
-  x as BaseApiClient
+  I as BaseApiClient
 };