@diwauhris/ui 1.0.0

package/lib/index69.cjs

@@ -0,0 +1,34 @@
+//#region src/ui-library/tokens/shadow.ts
+var shadow_exports = /* @__PURE__ */ require("./index2.cjs").__exportAll({ shadow: () => shadow });
+/**
+* DIWA Shadow Tokens
+*
+* Formalizes the three-tier shadow vocabulary identified in the Phase 9 audit.
+* Values are Tailwind utility class strings.
+*
+* Three tiers:
+*   inline    — no elevation (Cards without shadow, inputs, inline surfaces)
+*   floating  — anchored floating panels (Popover, Tooltip)
+*   overlay   — full-screen overlay panels (Modal, Dialog, Drawer)
+*
+* Button shadows are documented separately — they carry color-tinted shadows
+* that are component-specific and not candidates for centralization yet.
+*/
+var shadow = {
+	/** No shadow — inline surfaces */
+	none: "",
+	/** Anchored floating panels — shadow-lg */
+	floating: "shadow-lg",
+	/** Full-screen overlay panels — shadow-xl */
+	overlay: "shadow-xl"
+};
+//#endregion
+exports.shadow = shadow;
+Object.defineProperty(exports, "shadow_exports", {
+	enumerable: true,
+	get: function() {
+		return shadow_exports;
+	}
+});
+
+//# sourceMappingURL=index69.cjs.map

package/lib/index69.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index69.cjs","names":[],"sources":["../src/ui-library/tokens/shadow.ts"],"sourcesContent":["/**\n * DIWA Shadow Tokens\n *\n * Formalizes the three-tier shadow vocabulary identified in the Phase 9 audit.\n * Values are Tailwind utility class strings.\n *\n * Three tiers:\n *   inline    — no elevation (Cards without shadow, inputs, inline surfaces)\n *   floating  — anchored floating panels (Popover, Tooltip)\n *   overlay   — full-screen overlay panels (Modal, Dialog, Drawer)\n *\n * Button shadows are documented separately — they carry color-tinted shadows\n * that are component-specific and not candidates for centralization yet.\n */\n\nexport const shadow = {\n  /** No shadow — inline surfaces */\n  none:     '',\n  /** Anchored floating panels — shadow-lg */\n  floating: 'shadow-lg',\n  /** Full-screen overlay panels — shadow-xl */\n  overlay:  'shadow-xl',\n\n  // ── Button shadows — documented, not used directly ─────────────────────\n  // These are component-specific. Kept here for reference only.\n  // Wave 2 will decide whether to centralize button shadow tokens.\n  //\n  //   buttonPrimary: 'shadow-lg shadow-brand-blue/20'\n  //   buttonDanger:  'shadow-lg shadow-rose-100'\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,IAAa,SAAS;;CAEpB,MAAU;;CAEV,UAAU;;CAEV,SAAU;AAQZ"}

package/lib/index69.mjs

@@ -0,0 +1,29 @@
+import { __exportAll } from "./index2.mjs";
+//#region src/ui-library/tokens/shadow.ts
+var shadow_exports = /* @__PURE__ */ __exportAll({ shadow: () => shadow });
+/**
+* DIWA Shadow Tokens
+*
+* Formalizes the three-tier shadow vocabulary identified in the Phase 9 audit.
+* Values are Tailwind utility class strings.
+*
+* Three tiers:
+*   inline    — no elevation (Cards without shadow, inputs, inline surfaces)
+*   floating  — anchored floating panels (Popover, Tooltip)
+*   overlay   — full-screen overlay panels (Modal, Dialog, Drawer)
+*
+* Button shadows are documented separately — they carry color-tinted shadows
+* that are component-specific and not candidates for centralization yet.
+*/
+var shadow = {
+	/** No shadow — inline surfaces */
+	none: "",
+	/** Anchored floating panels — shadow-lg */
+	floating: "shadow-lg",
+	/** Full-screen overlay panels — shadow-xl */
+	overlay: "shadow-xl"
+};
+//#endregion
+export { shadow, shadow_exports };
+
+//# sourceMappingURL=index69.mjs.map

package/lib/index69.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index69.mjs","names":[],"sources":["../src/ui-library/tokens/shadow.ts"],"sourcesContent":["/**\n * DIWA Shadow Tokens\n *\n * Formalizes the three-tier shadow vocabulary identified in the Phase 9 audit.\n * Values are Tailwind utility class strings.\n *\n * Three tiers:\n *   inline    — no elevation (Cards without shadow, inputs, inline surfaces)\n *   floating  — anchored floating panels (Popover, Tooltip)\n *   overlay   — full-screen overlay panels (Modal, Dialog, Drawer)\n *\n * Button shadows are documented separately — they carry color-tinted shadows\n * that are component-specific and not candidates for centralization yet.\n */\n\nexport const shadow = {\n  /** No shadow — inline surfaces */\n  none:     '',\n  /** Anchored floating panels — shadow-lg */\n  floating: 'shadow-lg',\n  /** Full-screen overlay panels — shadow-xl */\n  overlay:  'shadow-xl',\n\n  // ── Button shadows — documented, not used directly ─────────────────────\n  // These are component-specific. Kept here for reference only.\n  // Wave 2 will decide whether to centralize button shadow tokens.\n  //\n  //   buttonPrimary: 'shadow-lg shadow-brand-blue/20'\n  //   buttonDanger:  'shadow-lg shadow-rose-100'\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;AAeA,IAAa,SAAS;;CAEpB,MAAU;;CAEV,UAAU;;CAEV,SAAU;AAQZ"}

package/lib/index7.cjs

@@ -0,0 +1,17 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/divider/Divider.tsx
+function Divider({ orientation = "horizontal", decorative = true, "aria-label": ariaLabel, className = "" }) {
+	const isHorizontal = orientation === "horizontal";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...decorative ? { "aria-hidden": true } : {
+			role: "separator",
+			"aria-label": ariaLabel,
+			"aria-orientation": orientation
+		},
+		className: [isHorizontal ? "w-full border-t border-slate-200" : "self-stretch border-l border-slate-200", className].filter(Boolean).join(" ")
+	});
+}
+//#endregion
+exports.Divider = Divider;
+
+//# sourceMappingURL=index7.cjs.map

package/lib/index7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index7.cjs","names":[],"sources":["../src/ui-library/gallery/divider/Divider.tsx"],"sourcesContent":["/**\n * Divider — Design System Component\n *\n * A thin visual separator between content areas.\n *\n * Decorative usage (default, aria-hidden=\"true\"):\n *   Used purely for visual grouping. Screen readers skip it.\n *   This is the appropriate choice for most cases.\n *\n * Semantic usage (role=\"separator\"):\n *   Use when the separation is meaningful to AT users, e.g. between\n *   logically distinct regions where the boundary matters.\n *   Provide aria-label when context is needed.\n *\n * Orientation:\n *   - horizontal (default): full-width horizontal line, displayed as block.\n *   - vertical: full-height vertical line, displayed inline. The parent\n *     container must give it an explicit height or use flex/grid context.\n */\n\nexport interface DividerProps {\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * 'decorative' (default) — aria-hidden=\"true\". Use for visual-only separation.\n   * 'separator'            — role=\"separator\". Use when the boundary is semantically meaningful.\n   */\n  decorative?: boolean;\n  /** Optional accessible label when decorative=false */\n  'aria-label'?: string;\n  className?: string;\n}\n\nexport function Divider({\n  orientation = 'horizontal',\n  decorative = true,\n  'aria-label': ariaLabel,\n  className = '',\n}: DividerProps) {\n  const isHorizontal = orientation === 'horizontal';\n\n  const ariaProps = decorative\n    ? { 'aria-hidden': true as const }\n    : { role: 'separator' as const, 'aria-label': ariaLabel, 'aria-orientation': orientation };\n\n  return (\n    <div\n      {...ariaProps}\n      className={[\n        isHorizontal\n          ? 'w-full border-t border-slate-200'\n          : 'self-stretch border-l border-slate-200',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    />\n  );\n}\n"],"mappings":";;AAgCA,SAAgB,QAAQ,EACtB,cAAc,cACd,aAAa,MACb,cAAc,WACd,YAAY,MACG;CACf,MAAM,eAAe,gBAAgB;CAMrC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GANc,aACd,EAAE,eAAe,KAAc,IAC/B;GAAE,MAAM;GAAsB,cAAc;GAAW,oBAAoB;EAAY;EAKvF,WAAW,CACT,eACI,qCACA,0CACJ,SACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACZ,CAAA;AAEL"}

package/lib/index7.mjs

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/ui-library/gallery/divider/Divider.tsx
+function Divider({ orientation = "horizontal", decorative = true, "aria-label": ariaLabel, className = "" }) {
+	const isHorizontal = orientation === "horizontal";
+	return /* @__PURE__ */ jsx("div", {
+		...decorative ? { "aria-hidden": true } : {
+			role: "separator",
+			"aria-label": ariaLabel,
+			"aria-orientation": orientation
+		},
+		className: [isHorizontal ? "w-full border-t border-slate-200" : "self-stretch border-l border-slate-200", className].filter(Boolean).join(" ")
+	});
+}
+//#endregion
+export { Divider };
+
+//# sourceMappingURL=index7.mjs.map

package/lib/index7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index7.mjs","names":[],"sources":["../src/ui-library/gallery/divider/Divider.tsx"],"sourcesContent":["/**\n * Divider — Design System Component\n *\n * A thin visual separator between content areas.\n *\n * Decorative usage (default, aria-hidden=\"true\"):\n *   Used purely for visual grouping. Screen readers skip it.\n *   This is the appropriate choice for most cases.\n *\n * Semantic usage (role=\"separator\"):\n *   Use when the separation is meaningful to AT users, e.g. between\n *   logically distinct regions where the boundary matters.\n *   Provide aria-label when context is needed.\n *\n * Orientation:\n *   - horizontal (default): full-width horizontal line, displayed as block.\n *   - vertical: full-height vertical line, displayed inline. The parent\n *     container must give it an explicit height or use flex/grid context.\n */\n\nexport interface DividerProps {\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * 'decorative' (default) — aria-hidden=\"true\". Use for visual-only separation.\n   * 'separator'            — role=\"separator\". Use when the boundary is semantically meaningful.\n   */\n  decorative?: boolean;\n  /** Optional accessible label when decorative=false */\n  'aria-label'?: string;\n  className?: string;\n}\n\nexport function Divider({\n  orientation = 'horizontal',\n  decorative = true,\n  'aria-label': ariaLabel,\n  className = '',\n}: DividerProps) {\n  const isHorizontal = orientation === 'horizontal';\n\n  const ariaProps = decorative\n    ? { 'aria-hidden': true as const }\n    : { role: 'separator' as const, 'aria-label': ariaLabel, 'aria-orientation': orientation };\n\n  return (\n    <div\n      {...ariaProps}\n      className={[\n        isHorizontal\n          ? 'w-full border-t border-slate-200'\n          : 'self-stretch border-l border-slate-200',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    />\n  );\n}\n"],"mappings":";;AAgCA,SAAgB,QAAQ,EACtB,cAAc,cACd,aAAa,MACb,cAAc,WACd,YAAY,MACG;CACf,MAAM,eAAe,gBAAgB;CAMrC,OACE,oBAAC,OAAD;EACE,GANc,aACd,EAAE,eAAe,KAAc,IAC/B;GAAE,MAAM;GAAsB,cAAc;GAAW,oBAAoB;EAAY;EAKvF,WAAW,CACT,eACI,qCACA,0CACJ,SACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACZ,CAAA;AAEL"}

package/lib/index8.cjs

@@ -0,0 +1,86 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region src/ui-library/gallery/avatar/Avatar.tsx
+/**
+* Avatar — Design System Component
+*
+* Circular identity tile displaying either an image or an initials fallback.
+* Purely presentational — no user model, no API calls, no feature-module deps.
+*
+* Renders:
+*   1. <img> when `src` is provided and loads successfully
+*   2. Initials text when `src` is absent or fails to load
+*   3. "?" when name is absent or empty
+*
+* Accessibility:
+*   - With src: <img> has alt={name} (or alt="" if decorative)
+*   - Initials fallback: aria-label={name} on the container
+*   - role="img" is applied in both cases so screen readers
+*     can announce the avatar as an image regardless of rendering path
+*
+* Usage:
+*   <Avatar name="Juan dela Cruz" />
+*   <Avatar name="Maria Santos" src="/photos/maria.jpg" />
+*   <Avatar name="Jose Reyes" size="lg" />
+*   <Avatar name="Ana Gonzalez" color="#0369A1" />
+*/
+var SIZE_CLASSES = {
+	xs: "h-6 w-6 text-[9px]",
+	sm: "h-8 w-8 text-[11px]",
+	md: "h-10 w-10 text-sm",
+	lg: "h-12 w-12 text-base",
+	xl: "h-16 w-16 text-lg"
+};
+function getInitials(name) {
+	if (!name || !name.trim()) return "?";
+	const parts = name.trim().split(/\s+/);
+	if (parts.length === 1) return (parts[0] ?? "").charAt(0).toUpperCase();
+	return ((parts[0] ?? "").charAt(0) + (parts[parts.length - 1] ?? "").charAt(0)).toUpperCase();
+}
+var PALETTE = [
+	"#0B2545",
+	"#0F4C81",
+	"#0369A1",
+	"#1E3A8A",
+	"#0D9488",
+	"#0F766E",
+	"#B45309",
+	"#C2410C",
+	"#BE185D"
+];
+function deriveColor(name) {
+	if (!name) return PALETTE[0];
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+	return PALETTE[Math.abs(hash) % PALETTE.length];
+}
+function Avatar({ name, src, size = "md", color, className = "" }) {
+	const [imgError, setImgError] = (0, react.useState)(false);
+	const showImage = !!src && !imgError;
+	const bg = color ?? deriveColor(name);
+	const initials = getInitials(name);
+	const label = name || "Unknown";
+	const baseClass = [
+		"inline-flex items-center justify-center rounded-full shrink-0",
+		"font-bold text-white select-none overflow-hidden",
+		SIZE_CLASSES[size],
+		className
+	].filter(Boolean).join(" ");
+	if (showImage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src,
+		alt: label,
+		className: [baseClass, "object-cover"].join(" "),
+		onError: () => setImgError(true)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "img",
+		"aria-label": label,
+		className: baseClass,
+		style: { backgroundColor: bg },
+		children: initials
+	});
+}
+//#endregion
+exports.Avatar = Avatar;
+
+//# sourceMappingURL=index8.cjs.map

package/lib/index8.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index8.cjs","names":[],"sources":["../src/ui-library/gallery/avatar/Avatar.tsx"],"sourcesContent":["/**\n * Avatar — Design System Component\n *\n * Circular identity tile displaying either an image or an initials fallback.\n * Purely presentational — no user model, no API calls, no feature-module deps.\n *\n * Renders:\n *   1. <img> when `src` is provided and loads successfully\n *   2. Initials text when `src` is absent or fails to load\n *   3. \"?\" when name is absent or empty\n *\n * Accessibility:\n *   - With src: <img> has alt={name} (or alt=\"\" if decorative)\n *   - Initials fallback: aria-label={name} on the container\n *   - role=\"img\" is applied in both cases so screen readers\n *     can announce the avatar as an image regardless of rendering path\n *\n * Usage:\n *   <Avatar name=\"Juan dela Cruz\" />\n *   <Avatar name=\"Maria Santos\" src=\"/photos/maria.jpg\" />\n *   <Avatar name=\"Jose Reyes\" size=\"lg\" />\n *   <Avatar name=\"Ana Gonzalez\" color=\"#0369A1\" />\n */\n\nimport { useState } from 'react';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface AvatarProps {\n  /** Display name — used for initials generation and aria-label. */\n  name?: string;\n  /** Optional image source. Falls back to initials when absent or on error. */\n  src?: string | null;\n  /** Size preset. Default: 'md' (40px) */\n  size?: AvatarSize;\n  /**\n   * Background color for the initials fallback.\n   * Overrides the automatic deterministic color derived from `name`.\n   * Pass a valid CSS color value.\n   */\n  color?: string;\n  /** Additional className on the root element. */\n  className?: string;\n}\n\n// ── Size config ───────────────────────────────────────────────────────────\n\nconst SIZE_CLASSES: Record<AvatarSize, string> = {\n  xs: 'h-6 w-6 text-[9px]',\n  sm: 'h-8 w-8 text-[11px]',\n  md: 'h-10 w-10 text-sm',\n  lg: 'h-12 w-12 text-base',\n  xl: 'h-16 w-16 text-lg',\n};\n\n// ── Initials helper ───────────────────────────────────────────────────────\n\nfunction getInitials(name?: string): string {\n  if (!name || !name.trim()) return '?';\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 1) return (parts[0] ?? '').charAt(0).toUpperCase();\n  return ((parts[0] ?? '').charAt(0) + (parts[parts.length - 1] ?? '').charAt(0)).toUpperCase();\n}\n\n// ── Color helper ──────────────────────────────────────────────────────────\n\nconst PALETTE = [\n  '#0B2545', '#0F4C81', '#0369A1',\n  '#1E3A8A', '#0D9488', '#0F766E',\n  '#B45309', '#C2410C', '#BE185D',\n];\n\nfunction deriveColor(name?: string): string {\n  if (!name) return PALETTE[0]!;\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) {\n    hash = name.charCodeAt(i) + ((hash << 5) - hash);\n  }\n  return PALETTE[Math.abs(hash) % PALETTE.length]!;\n}\n\n// ── Avatar ────────────────────────────────────────────────────────────────\n\nexport function Avatar({ name, src, size = 'md', color, className = '' }: AvatarProps) {\n  const [imgError, setImgError] = useState(false);\n  const showImage = !!src && !imgError;\n  const bg = color ?? deriveColor(name);\n  const initials = getInitials(name);\n  const label = name || 'Unknown';\n\n  const baseClass = [\n    'inline-flex items-center justify-center rounded-full shrink-0',\n    'font-bold text-white select-none overflow-hidden',\n    SIZE_CLASSES[size],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (showImage) {\n    return (\n      <img\n        src={src!}\n        alt={label}\n        className={[baseClass, 'object-cover'].join(' ')}\n        onError={() => setImgError(true)}\n      />\n    );\n  }\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={label}\n      className={baseClass}\n      style={{ backgroundColor: bg }}\n    >\n      {initials}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,IAAM,eAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,SAAS,YAAY,MAAuB;CAC1C,IAAI,CAAC,QAAQ,CAAC,KAAK,KAAK,GAAG,OAAO;CAClC,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK;CACrC,IAAI,MAAM,WAAW,GAAG,QAAQ,MAAM,MAAM,GAAA,CAAI,OAAO,CAAC,CAAC,CAAC,YAAY;CACtE,SAAS,MAAM,MAAM,GAAA,CAAI,OAAO,CAAC,KAAK,MAAM,MAAM,SAAS,MAAM,GAAA,CAAI,OAAO,CAAC,EAAA,CAAG,YAAY;AAC9F;AAIA,IAAM,UAAU;CACd;CAAW;CAAW;CACtB;CAAW;CAAW;CACtB;CAAW;CAAW;AACxB;AAEA,SAAS,YAAY,MAAuB;CAC1C,IAAI,CAAC,MAAM,OAAO,QAAQ;CAC1B,IAAI,OAAO;CACX,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAC/B,OAAO,KAAK,WAAW,CAAC,MAAM,QAAQ,KAAK;CAE7C,OAAO,QAAQ,KAAK,IAAI,IAAI,IAAI,QAAQ;AAC1C;AAIA,SAAgB,OAAO,EAAE,MAAM,KAAK,OAAO,MAAM,OAAO,YAAY,MAAmB;CACrF,MAAM,CAAC,UAAU,gBAAA,GAAe,MAAA,SAAA,CAAS,KAAK;CAC9C,MAAM,YAAY,CAAC,CAAC,OAAO,CAAC;CAC5B,MAAM,KAAK,SAAS,YAAY,IAAI;CACpC,MAAM,WAAW,YAAY,IAAI;CACjC,MAAM,QAAQ,QAAQ;CAEtB,MAAM,YAAY;EAChB;EACA;EACA,aAAa;EACb;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,IAAI,WACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACO;EACL,KAAK;EACL,WAAW,CAAC,WAAW,cAAc,CAAC,CAAC,KAAK,GAAG;EAC/C,eAAe,YAAY,IAAI;CAChC,CAAA;CAIL,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW;EACX,OAAO,EAAE,iBAAiB,GAAG;EAE5B,UAAA;CACE,CAAA;AAET"}

package/lib/index8.mjs

@@ -0,0 +1,86 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/ui-library/gallery/avatar/Avatar.tsx
+/**
+* Avatar — Design System Component
+*
+* Circular identity tile displaying either an image or an initials fallback.
+* Purely presentational — no user model, no API calls, no feature-module deps.
+*
+* Renders:
+*   1. <img> when `src` is provided and loads successfully
+*   2. Initials text when `src` is absent or fails to load
+*   3. "?" when name is absent or empty
+*
+* Accessibility:
+*   - With src: <img> has alt={name} (or alt="" if decorative)
+*   - Initials fallback: aria-label={name} on the container
+*   - role="img" is applied in both cases so screen readers
+*     can announce the avatar as an image regardless of rendering path
+*
+* Usage:
+*   <Avatar name="Juan dela Cruz" />
+*   <Avatar name="Maria Santos" src="/photos/maria.jpg" />
+*   <Avatar name="Jose Reyes" size="lg" />
+*   <Avatar name="Ana Gonzalez" color="#0369A1" />
+*/
+var SIZE_CLASSES = {
+	xs: "h-6 w-6 text-[9px]",
+	sm: "h-8 w-8 text-[11px]",
+	md: "h-10 w-10 text-sm",
+	lg: "h-12 w-12 text-base",
+	xl: "h-16 w-16 text-lg"
+};
+function getInitials(name) {
+	if (!name || !name.trim()) return "?";
+	const parts = name.trim().split(/\s+/);
+	if (parts.length === 1) return (parts[0] ?? "").charAt(0).toUpperCase();
+	return ((parts[0] ?? "").charAt(0) + (parts[parts.length - 1] ?? "").charAt(0)).toUpperCase();
+}
+var PALETTE = [
+	"#0B2545",
+	"#0F4C81",
+	"#0369A1",
+	"#1E3A8A",
+	"#0D9488",
+	"#0F766E",
+	"#B45309",
+	"#C2410C",
+	"#BE185D"
+];
+function deriveColor(name) {
+	if (!name) return PALETTE[0];
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+	return PALETTE[Math.abs(hash) % PALETTE.length];
+}
+function Avatar({ name, src, size = "md", color, className = "" }) {
+	const [imgError, setImgError] = useState(false);
+	const showImage = !!src && !imgError;
+	const bg = color ?? deriveColor(name);
+	const initials = getInitials(name);
+	const label = name || "Unknown";
+	const baseClass = [
+		"inline-flex items-center justify-center rounded-full shrink-0",
+		"font-bold text-white select-none overflow-hidden",
+		SIZE_CLASSES[size],
+		className
+	].filter(Boolean).join(" ");
+	if (showImage) return /* @__PURE__ */ jsx("img", {
+		src,
+		alt: label,
+		className: [baseClass, "object-cover"].join(" "),
+		onError: () => setImgError(true)
+	});
+	return /* @__PURE__ */ jsx("div", {
+		role: "img",
+		"aria-label": label,
+		className: baseClass,
+		style: { backgroundColor: bg },
+		children: initials
+	});
+}
+//#endregion
+export { Avatar };
+
+//# sourceMappingURL=index8.mjs.map

package/lib/index8.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index8.mjs","names":[],"sources":["../src/ui-library/gallery/avatar/Avatar.tsx"],"sourcesContent":["/**\n * Avatar — Design System Component\n *\n * Circular identity tile displaying either an image or an initials fallback.\n * Purely presentational — no user model, no API calls, no feature-module deps.\n *\n * Renders:\n *   1. <img> when `src` is provided and loads successfully\n *   2. Initials text when `src` is absent or fails to load\n *   3. \"?\" when name is absent or empty\n *\n * Accessibility:\n *   - With src: <img> has alt={name} (or alt=\"\" if decorative)\n *   - Initials fallback: aria-label={name} on the container\n *   - role=\"img\" is applied in both cases so screen readers\n *     can announce the avatar as an image regardless of rendering path\n *\n * Usage:\n *   <Avatar name=\"Juan dela Cruz\" />\n *   <Avatar name=\"Maria Santos\" src=\"/photos/maria.jpg\" />\n *   <Avatar name=\"Jose Reyes\" size=\"lg\" />\n *   <Avatar name=\"Ana Gonzalez\" color=\"#0369A1\" />\n */\n\nimport { useState } from 'react';\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface AvatarProps {\n  /** Display name — used for initials generation and aria-label. */\n  name?: string;\n  /** Optional image source. Falls back to initials when absent or on error. */\n  src?: string | null;\n  /** Size preset. Default: 'md' (40px) */\n  size?: AvatarSize;\n  /**\n   * Background color for the initials fallback.\n   * Overrides the automatic deterministic color derived from `name`.\n   * Pass a valid CSS color value.\n   */\n  color?: string;\n  /** Additional className on the root element. */\n  className?: string;\n}\n\n// ── Size config ───────────────────────────────────────────────────────────\n\nconst SIZE_CLASSES: Record<AvatarSize, string> = {\n  xs: 'h-6 w-6 text-[9px]',\n  sm: 'h-8 w-8 text-[11px]',\n  md: 'h-10 w-10 text-sm',\n  lg: 'h-12 w-12 text-base',\n  xl: 'h-16 w-16 text-lg',\n};\n\n// ── Initials helper ───────────────────────────────────────────────────────\n\nfunction getInitials(name?: string): string {\n  if (!name || !name.trim()) return '?';\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 1) return (parts[0] ?? '').charAt(0).toUpperCase();\n  return ((parts[0] ?? '').charAt(0) + (parts[parts.length - 1] ?? '').charAt(0)).toUpperCase();\n}\n\n// ── Color helper ──────────────────────────────────────────────────────────\n\nconst PALETTE = [\n  '#0B2545', '#0F4C81', '#0369A1',\n  '#1E3A8A', '#0D9488', '#0F766E',\n  '#B45309', '#C2410C', '#BE185D',\n];\n\nfunction deriveColor(name?: string): string {\n  if (!name) return PALETTE[0]!;\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) {\n    hash = name.charCodeAt(i) + ((hash << 5) - hash);\n  }\n  return PALETTE[Math.abs(hash) % PALETTE.length]!;\n}\n\n// ── Avatar ────────────────────────────────────────────────────────────────\n\nexport function Avatar({ name, src, size = 'md', color, className = '' }: AvatarProps) {\n  const [imgError, setImgError] = useState(false);\n  const showImage = !!src && !imgError;\n  const bg = color ?? deriveColor(name);\n  const initials = getInitials(name);\n  const label = name || 'Unknown';\n\n  const baseClass = [\n    'inline-flex items-center justify-center rounded-full shrink-0',\n    'font-bold text-white select-none overflow-hidden',\n    SIZE_CLASSES[size],\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (showImage) {\n    return (\n      <img\n        src={src!}\n        alt={label}\n        className={[baseClass, 'object-cover'].join(' ')}\n        onError={() => setImgError(true)}\n      />\n    );\n  }\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={label}\n      className={baseClass}\n      style={{ backgroundColor: bg }}\n    >\n      {initials}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,IAAM,eAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAIA,SAAS,YAAY,MAAuB;CAC1C,IAAI,CAAC,QAAQ,CAAC,KAAK,KAAK,GAAG,OAAO;CAClC,MAAM,QAAQ,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK;CACrC,IAAI,MAAM,WAAW,GAAG,QAAQ,MAAM,MAAM,GAAA,CAAI,OAAO,CAAC,CAAC,CAAC,YAAY;CACtE,SAAS,MAAM,MAAM,GAAA,CAAI,OAAO,CAAC,KAAK,MAAM,MAAM,SAAS,MAAM,GAAA,CAAI,OAAO,CAAC,EAAA,CAAG,YAAY;AAC9F;AAIA,IAAM,UAAU;CACd;CAAW;CAAW;CACtB;CAAW;CAAW;CACtB;CAAW;CAAW;AACxB;AAEA,SAAS,YAAY,MAAuB;CAC1C,IAAI,CAAC,MAAM,OAAO,QAAQ;CAC1B,IAAI,OAAO;CACX,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAC/B,OAAO,KAAK,WAAW,CAAC,MAAM,QAAQ,KAAK;CAE7C,OAAO,QAAQ,KAAK,IAAI,IAAI,IAAI,QAAQ;AAC1C;AAIA,SAAgB,OAAO,EAAE,MAAM,KAAK,OAAO,MAAM,OAAO,YAAY,MAAmB;CACrF,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,YAAY,CAAC,CAAC,OAAO,CAAC;CAC5B,MAAM,KAAK,SAAS,YAAY,IAAI;CACpC,MAAM,WAAW,YAAY,IAAI;CACjC,MAAM,QAAQ,QAAQ;CAEtB,MAAM,YAAY;EAChB;EACA;EACA,aAAa;EACb;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,IAAI,WACF,OACE,oBAAC,OAAD;EACO;EACL,KAAK;EACL,WAAW,CAAC,WAAW,cAAc,CAAC,CAAC,KAAK,GAAG;EAC/C,eAAe,YAAY,IAAI;CAChC,CAAA;CAIL,OACE,oBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,WAAW;EACX,OAAO,EAAE,iBAAiB,GAAG;EAE5B,UAAA;CACE,CAAA;AAET"}

package/lib/index9.cjs

@@ -0,0 +1,29 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/section/Section.tsx
+function Section({ title, description, actions, level = 2, children, className = "" }) {
+	const Tag = `h${level}`;
+	const headingClass = level === 1 ? "text-2xl font-bold text-slate-900" : level === 2 ? "text-lg font-bold text-slate-900" : "text-base font-bold text-slate-800";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: `space-y-4 ${className}`,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-start justify-between gap-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Tag, {
+					className: headingClass,
+					children: title
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-0.5 text-sm font-medium text-slate-500 leading-relaxed",
+					children: description
+				})]
+			}), actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children: actions
+			})]
+		}), children]
+	});
+}
+//#endregion
+exports.Section = Section;
+
+//# sourceMappingURL=index9.cjs.map

package/lib/index9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index9.cjs","names":[],"sources":["../src/ui-library/gallery/section/Section.tsx"],"sourcesContent":["/**\n * Section — Design System Component\n *\n * A named content grouping block with an optional description and actions.\n * Intentionally lightweight — wraps content in a semantic <section> element\n * with a heading of the appropriate level.\n *\n * <Section title=\"Personal Information\" description=\"Employee contact details\">\n *   ...content...\n * </Section>\n *\n * <Section\n *   title=\"Government IDs\"\n *   level={3}\n *   actions={<Button size=\"sm\">Edit</Button>}\n * >\n *   ...content...\n * </Section>\n */\n\nimport type { ReactNode } from 'react';\n\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface SectionProps {\n  /** Section heading text */\n  title: string;\n  /** Optional short description below the heading */\n  description?: string;\n  /** Optional actions (buttons, links) rendered in the heading row */\n  actions?: ReactNode;\n  /** Heading element level. Defaults to 2. */\n  level?: HeadingLevel;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function Section({\n  title,\n  description,\n  actions,\n  level = 2,\n  children,\n  className = '',\n}: SectionProps) {\n  const Tag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n  const headingClass =\n    level === 1\n      ? 'text-2xl font-bold text-slate-900'\n      : level === 2\n        ? 'text-lg font-bold text-slate-900'\n        : 'text-base font-bold text-slate-800';\n\n  return (\n    <section className={`space-y-4 ${className}`}>\n      {/* Header row */}\n      <div className=\"flex items-start justify-between gap-4\">\n        <div className=\"min-w-0\">\n          <Tag className={headingClass}>{title}</Tag>\n          {description && (\n            <p className=\"mt-0.5 text-sm font-medium text-slate-500 leading-relaxed\">\n              {description}\n            </p>\n          )}\n        </div>\n        {actions && (\n          <div className=\"flex shrink-0 items-center gap-2\">\n            {actions}\n          </div>\n        )}\n      </div>\n\n      {/* Content */}\n      {children}\n    </section>\n  );\n}\n"],"mappings":";;AAqCA,SAAgB,QAAQ,EACtB,OACA,aACA,SACA,QAAQ,GACR,UACA,YAAY,MACG;CACf,MAAM,MAAM,IAAI;CAEhB,MAAM,eACJ,UAAU,IACN,sCACA,UAAU,IACR,qCACA;CAER,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,WAAD;EAAS,WAAW,aAAa;EAAjC,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KAAK,WAAW;KAAe,UAAA;IAAW,CAAA,GACzC,eACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KAAG,WAAU;KACV,UAAA;IACA,CAAA,CAEF;GACJ,CAAA,GAAA,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA,CAEJ;EAGJ,CAAA,GAAA,QACM;;AAEb"}

package/lib/index9.mjs

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/section/Section.tsx
+function Section({ title, description, actions, level = 2, children, className = "" }) {
+	const Tag = `h${level}`;
+	const headingClass = level === 1 ? "text-2xl font-bold text-slate-900" : level === 2 ? "text-lg font-bold text-slate-900" : "text-base font-bold text-slate-800";
+	return /* @__PURE__ */ jsxs("section", {
+		className: `space-y-4 ${className}`,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-start justify-between gap-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ jsx(Tag, {
+					className: headingClass,
+					children: title
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-sm font-medium text-slate-500 leading-relaxed",
+					children: description
+				})]
+			}), actions && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children: actions
+			})]
+		}), children]
+	});
+}
+//#endregion
+export { Section };
+
+//# sourceMappingURL=index9.mjs.map

package/lib/index9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index9.mjs","names":[],"sources":["../src/ui-library/gallery/section/Section.tsx"],"sourcesContent":["/**\n * Section — Design System Component\n *\n * A named content grouping block with an optional description and actions.\n * Intentionally lightweight — wraps content in a semantic <section> element\n * with a heading of the appropriate level.\n *\n * <Section title=\"Personal Information\" description=\"Employee contact details\">\n *   ...content...\n * </Section>\n *\n * <Section\n *   title=\"Government IDs\"\n *   level={3}\n *   actions={<Button size=\"sm\">Edit</Button>}\n * >\n *   ...content...\n * </Section>\n */\n\nimport type { ReactNode } from 'react';\n\ntype HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\nexport interface SectionProps {\n  /** Section heading text */\n  title: string;\n  /** Optional short description below the heading */\n  description?: string;\n  /** Optional actions (buttons, links) rendered in the heading row */\n  actions?: ReactNode;\n  /** Heading element level. Defaults to 2. */\n  level?: HeadingLevel;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function Section({\n  title,\n  description,\n  actions,\n  level = 2,\n  children,\n  className = '',\n}: SectionProps) {\n  const Tag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n  const headingClass =\n    level === 1\n      ? 'text-2xl font-bold text-slate-900'\n      : level === 2\n        ? 'text-lg font-bold text-slate-900'\n        : 'text-base font-bold text-slate-800';\n\n  return (\n    <section className={`space-y-4 ${className}`}>\n      {/* Header row */}\n      <div className=\"flex items-start justify-between gap-4\">\n        <div className=\"min-w-0\">\n          <Tag className={headingClass}>{title}</Tag>\n          {description && (\n            <p className=\"mt-0.5 text-sm font-medium text-slate-500 leading-relaxed\">\n              {description}\n            </p>\n          )}\n        </div>\n        {actions && (\n          <div className=\"flex shrink-0 items-center gap-2\">\n            {actions}\n          </div>\n        )}\n      </div>\n\n      {/* Content */}\n      {children}\n    </section>\n  );\n}\n"],"mappings":";;AAqCA,SAAgB,QAAQ,EACtB,OACA,aACA,SACA,QAAQ,GACR,UACA,YAAY,MACG;CACf,MAAM,MAAM,IAAI;CAEhB,MAAM,eACJ,UAAU,IACN,sCACA,UAAU,IACR,qCACA;CAER,OACE,qBAAC,WAAD;EAAS,WAAW,aAAa;EAAjC,UAAA,CAEE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,KAAD;KAAK,WAAW;KAAe,UAAA;IAAW,CAAA,GACzC,eACC,oBAAC,KAAD;KAAG,WAAU;KACV,UAAA;IACA,CAAA,CAEF;GACJ,CAAA,GAAA,WACC,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA,CAEJ;EAGJ,CAAA,GAAA,QACM;;AAEb"}

package/lib/types/index.d.ts

@@ -0,0 +1 @@
+export {}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@diwauhris/ui",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
+  "keywords": ["react", "components", "ui", "design-system", "tailwindcss", "diwa", "uhris"],
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.mjs",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.mjs",
+      "require": "./lib/index.cjs",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "tsc -b && vite build --config vite.lib.config.ts",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@fontsource-variable/libre-franklin": "^5.3.0",
+    "@fontsource/barlow": "^5.3.0",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "autoprefixer": "^10.5.2",
+    "clsx": "^2.1.1",
+    "d3": "^7.9.0",
+    "date-fns": "^4.4.0",
+    "lucide-react": "^1.17.0",
+    "postcss": "^8.5.15",
+    "react": "^19.2.8",
+    "react-calendar": "^6.0.1",
+    "react-dom": "^19.2.8",
+    "react-router-dom": "^7.17.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^3.4.17"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/d3": "^7.4.3",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.4",
+    "eslint": "^10.8.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "globals": "^17.7.0",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^8.2.0",
+    "vite-plugin-dts": "^5.0.3"
+  }
+}