@diwauhris/ui 1.0.0

package/README.md

@@ -0,0 +1,75 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+
+```

package/lib/assets/ui.css

@@ -0,0 +1,154 @@
+.react-calendar {
+  width: 350px;
+  max-width: 100%;
+  background: white;
+  border: 1px solid #a0a096;
+  font-family: 'Arial', 'Helvetica', sans-serif;
+  line-height: 1.125em;
+}
+
+.react-calendar--doubleView {
+  width: 700px;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer {
+  display: flex;
+  margin: -0.5em;
+}
+
+.react-calendar--doubleView .react-calendar__viewContainer > * {
+  width: 50%;
+  margin: 0.5em;
+}
+
+.react-calendar,
+.react-calendar *,
+.react-calendar *:before,
+.react-calendar *:after {
+  box-sizing: border-box;
+}
+
+.react-calendar button {
+  margin: 0;
+  border: 0;
+  outline: none;
+}
+
+.react-calendar button:enabled:hover {
+  cursor: pointer;
+}
+
+.react-calendar__navigation {
+  display: flex;
+  height: 44px;
+  margin-bottom: 1em;
+}
+
+.react-calendar__navigation button {
+  min-width: 44px;
+  background: none;
+}
+
+.react-calendar__navigation button:disabled {
+  background-color: #f0f0f0;
+}
+
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus {
+  background-color: #e6e6e6;
+}
+
+.react-calendar__month-view__weekdays {
+  text-align: center;
+  text-transform: uppercase;
+  font: inherit;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+
+.react-calendar__month-view__weekdays__weekday {
+  padding: 0.5em;
+}
+
+.react-calendar__month-view__weekNumbers .react-calendar__tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: inherit;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+
+.react-calendar__month-view__days__day--weekend {
+  color: #d10000;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth,
+.react-calendar__decade-view__years__year--neighboringDecade,
+.react-calendar__century-view__decades__decade--neighboringCentury {
+  color: #757575;
+}
+
+.react-calendar__year-view .react-calendar__tile,
+.react-calendar__decade-view .react-calendar__tile,
+.react-calendar__century-view .react-calendar__tile {
+  padding: 2em 0.5em;
+}
+
+.react-calendar__tile {
+  max-width: 100%;
+  padding: 10px 6.6667px;
+  background: none;
+  text-align: center;
+  font: inherit;
+  font-size: 0.833em;
+}
+
+.react-calendar__tile:disabled {
+  background-color: #f0f0f0;
+  color: #ababab;
+}
+
+.react-calendar__month-view__days__day--neighboringMonth:disabled,
+.react-calendar__decade-view__years__year--neighboringDecade:disabled,
+.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
+  color: #cdcdcd;
+}
+
+.react-calendar__tile:enabled:hover,
+.react-calendar__tile:enabled:focus {
+  background-color: #e6e6e6;
+}
+
+.react-calendar__tile--now {
+  background: #ffff76;
+}
+
+.react-calendar__tile--now:enabled:hover,
+.react-calendar__tile--now:enabled:focus {
+  background: #ffffa9;
+}
+
+.react-calendar__tile--hasActive {
+  background: #76baff;
+}
+
+.react-calendar__tile--hasActive:enabled:hover,
+.react-calendar__tile--hasActive:enabled:focus {
+  background: #a9d4ff;
+}
+
+.react-calendar__tile--active {
+  background: #006edc;
+  color: white;
+}
+
+.react-calendar__tile--active:enabled:hover,
+.react-calendar__tile--active:enabled:focus {
+  background: #1087ff;
+}
+
+.react-calendar--selectRange .react-calendar__tile--hover {
+  background-color: #e6e6e6;
+}
+/*$vite$:1*/

package/lib/index.cjs

@@ -0,0 +1,183 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Button = require("./index3.cjs");
+const require_IconButton = require("./index4.cjs");
+const require_Badge = require("./index5.cjs");
+const require_Spinner = require("./index6.cjs");
+const require_Divider = require("./index7.cjs");
+const require_Avatar = require("./index8.cjs");
+const require_Section = require("./index9.cjs");
+const require_PageHeader = require("./index10.cjs");
+const require_Toolbar = require("./index11.cjs");
+const require_FieldContext = require("./index12.cjs");
+const require_Field = require("./index13.cjs");
+const require_FieldInput = require("./index15.cjs");
+const require_Input = require("./index17.cjs");
+const require_Textarea = require("./index18.cjs");
+const require_Select = require("./index19.cjs");
+const require_Checkbox = require("./index20.cjs");
+const require_RadioGroup = require("./index21.cjs");
+const require_Switch = require("./index22.cjs");
+const require_Combobox = require("./index23.cjs");
+const require_DatePicker = require("./index25.cjs");
+const require_OtpInput = require("./index26.cjs");
+const require_FileUpload = require("./index27.cjs");
+const require_FilterChip = require("./index28.cjs");
+const require_SegmentedControl = require("./index29.cjs");
+const require_ValidationSummary = require("./index30.cjs");
+const require_Alert = require("./index31.cjs");
+const require_ErrorBanner = require("./index32.cjs");
+const require_Progress = require("./index33.cjs");
+const require_Skeleton = require("./index34.cjs");
+const require_StatusBadge = require("./index35.cjs");
+const require_typography = require("./index36.cjs");
+const require_Modal = require("./index37.cjs");
+const require_Dialog = require("./index38.cjs");
+const require_Drawer = require("./index39.cjs");
+const require_Popover = require("./index40.cjs");
+const require_Tooltip = require("./index41.cjs");
+const require_ConfirmDialog = require("./index42.cjs");
+const require_dimension = require("./index43.cjs");
+const require_radius = require("./index44.cjs");
+const require_ConfirmAction = require("./index45.cjs");
+const require_CommandPalette = require("./index46.cjs");
+const require_Breadcrumb = require("./index47.cjs");
+const require_Tabs = require("./index48.cjs");
+const require_Pagination = require("./index49.cjs");
+const require_Stepper = require("./index50.cjs");
+const require_Sidebar = require("./index51.cjs");
+const require_Dropdown = require("./index52.cjs");
+const require_Menu = require("./index53.cjs");
+const require_Card = require("./index54.cjs");
+const require_Accordion = require("./index55.cjs");
+const require_DescriptionList = require("./index56.cjs");
+const require_ActivityFeed = require("./index57.cjs");
+const require_ApprovalTimeline = require("./index58.cjs");
+const require_Timeline = require("./index59.cjs");
+const require_EmptyState = require("./index60.cjs");
+const require_EmployeeCard = require("./index61.cjs");
+const require_TreeView = require("./index62.cjs");
+const require_Kanban = require("./index63.cjs");
+const require_PermissionMatrix = require("./index64.cjs");
+const require_Calendar = require("./index65.cjs");
+const require_Charts = require("./index66.cjs");
+const require_statusActions = require("./index67.cjs");
+const require_colors = require("./index68.cjs");
+const require_shadow = require("./index69.cjs");
+exports.Accordion = require_Accordion.Accordion;
+exports.AccordionContent = require_Accordion.AccordionContent;
+exports.AccordionItem = require_Accordion.AccordionItem;
+exports.AccordionTrigger = require_Accordion.AccordionTrigger;
+exports.ActivityFeed = require_ActivityFeed.ActivityFeed;
+exports.Alert = require_Alert.Alert;
+exports.ApprovalTimeline = require_ApprovalTimeline.ApprovalTimeline;
+exports.Avatar = require_Avatar.Avatar;
+exports.Badge = require_Badge.Badge;
+exports.BarChart = require_Charts.BarChart;
+exports.Breadcrumb = require_Breadcrumb.Breadcrumb;
+exports.Button = require_Button.Button;
+exports.Calendar = require_Calendar.Calendar;
+exports.Card = require_Card.Card;
+exports.CardContent = require_Card.CardContent;
+exports.CardFooter = require_Card.CardFooter;
+exports.CardHeader = require_Card.CardHeader;
+exports.Checkbox = require_Checkbox.Checkbox;
+exports.Combobox = require_Combobox.Combobox;
+exports.CommandPalette = require_CommandPalette.CommandPalette;
+exports.ConfirmAction = require_ConfirmAction.ConfirmAction;
+exports.ConfirmDialog = require_ConfirmDialog.ConfirmDialog;
+exports.DatePicker = require_DatePicker.DatePicker;
+exports.DescriptionItem = require_DescriptionList.DescriptionItem;
+exports.DescriptionList = require_DescriptionList.DescriptionList;
+exports.Dialog = require_Dialog.Dialog;
+exports.DialogBody = require_Dialog.DialogBody;
+exports.DialogFooter = require_Dialog.DialogFooter;
+exports.Divider = require_Divider.Divider;
+exports.Drawer = require_Drawer.Drawer;
+exports.Dropdown = require_Dropdown.Dropdown;
+exports.EmployeeCard = require_EmployeeCard.EmployeeCard;
+exports.EmptyState = require_EmptyState.EmptyState;
+exports.ErrorBanner = require_ErrorBanner.ErrorBanner;
+exports.Field = require_Field.Field;
+exports.FieldContext = require_FieldContext.FieldContext;
+exports.FieldInput = require_FieldInput.FieldInput;
+exports.FileUpload = require_FileUpload.FileUpload;
+exports.FilterChip = require_FilterChip.FilterChip;
+exports.IconButton = require_IconButton.IconButton;
+exports.Input = require_Input.Input;
+exports.Kanban = require_Kanban.Kanban;
+exports.LineChart = require_Charts.LineChart;
+exports.Menu = require_Menu.Menu;
+exports.Modal = require_Modal.default;
+exports.OtpInput = require_OtpInput.OtpInput;
+exports.PageHeader = require_PageHeader.PageHeader;
+exports.Pagination = require_Pagination.Pagination;
+exports.PermissionMatrix = require_PermissionMatrix.PermissionMatrix;
+exports.Popover = require_Popover.Popover;
+exports.PopoverContent = require_Popover.PopoverContent;
+exports.PopoverTrigger = require_Popover.PopoverTrigger;
+exports.Progress = require_Progress.Progress;
+exports.RadioGroup = require_RadioGroup.RadioGroup;
+exports.RadioItem = require_RadioGroup.RadioItem;
+exports.Section = require_Section.Section;
+exports.SegmentedControl = require_SegmentedControl.SegmentedControl;
+exports.Select = require_Select.Select;
+exports.SidebarGroup = require_Sidebar.SidebarGroup;
+exports.SidebarItem = require_Sidebar.SidebarItem;
+exports.SidebarNav = require_Sidebar.SidebarNav;
+exports.SidebarSection = require_Sidebar.SidebarSection;
+exports.Skeleton = require_Skeleton.Skeleton;
+exports.SkeletonAvatar = require_Skeleton.SkeletonAvatar;
+exports.SkeletonCard = require_Skeleton.SkeletonCard;
+exports.SkeletonTableRow = require_Skeleton.SkeletonTableRow;
+exports.SkeletonText = require_Skeleton.SkeletonText;
+exports.Spinner = require_Spinner.Spinner;
+exports.StatusBadge = require_StatusBadge.StatusBadge;
+exports.Stepper = require_Stepper.Stepper;
+exports.Switch = require_Switch.Switch;
+exports.Tab = require_Tabs.Tab;
+exports.TabList = require_Tabs.TabList;
+exports.TabPanel = require_Tabs.TabPanel;
+exports.TabPanels = require_Tabs.TabPanels;
+exports.Tabs = require_Tabs.Tabs;
+exports.Textarea = require_Textarea.Textarea;
+exports.Timeline = require_Timeline.Timeline;
+exports.TimelineEmptyState = require_Timeline.TimelineEmptyState;
+exports.TimelineFooter = require_Timeline.TimelineFooter;
+exports.TimelineItem = require_Timeline.TimelineItem;
+exports.TimelineValueCard = require_Timeline.TimelineValueCard;
+exports.Toolbar = require_Toolbar.Toolbar;
+exports.Tooltip = require_Tooltip.Tooltip;
+exports.TreeView = require_TreeView.TreeView;
+exports.ValidationSummary = require_ValidationSummary.ValidationSummary;
+Object.defineProperty(exports, "colors", {
+	enumerable: true,
+	get: function() {
+		return require_colors.colors_exports;
+	}
+});
+Object.defineProperty(exports, "dimension", {
+	enumerable: true,
+	get: function() {
+		return require_dimension.dimension_exports;
+	}
+});
+Object.defineProperty(exports, "radius", {
+	enumerable: true,
+	get: function() {
+		return require_radius.radius_exports;
+	}
+});
+Object.defineProperty(exports, "shadow", {
+	enumerable: true,
+	get: function() {
+		return require_shadow.shadow_exports;
+	}
+});
+exports.statusMenuItems = require_statusActions.statusMenuItems;
+Object.defineProperty(exports, "typography", {
+	enumerable: true,
+	get: function() {
+		return require_typography.typography_exports;
+	}
+});
+exports.useFieldContext = require_FieldContext.useFieldContext;

package/lib/index.mjs

@@ -0,0 +1,65 @@
+import { Button } from "./index3.mjs";
+import { IconButton } from "./index4.mjs";
+import { Badge } from "./index5.mjs";
+import { Spinner } from "./index6.mjs";
+import { Divider } from "./index7.mjs";
+import { Avatar } from "./index8.mjs";
+import { Section } from "./index9.mjs";
+import { PageHeader } from "./index10.mjs";
+import { Toolbar } from "./index11.mjs";
+import { FieldContext, useFieldContext } from "./index12.mjs";
+import { Field } from "./index13.mjs";
+import { FieldInput } from "./index15.mjs";
+import { Input } from "./index17.mjs";
+import { Textarea } from "./index18.mjs";
+import { Select } from "./index19.mjs";
+import { Checkbox } from "./index20.mjs";
+import { RadioGroup, RadioItem } from "./index21.mjs";
+import { Switch } from "./index22.mjs";
+import { Combobox } from "./index23.mjs";
+import { DatePicker } from "./index25.mjs";
+import { OtpInput } from "./index26.mjs";
+import { FileUpload } from "./index27.mjs";
+import { FilterChip } from "./index28.mjs";
+import { SegmentedControl } from "./index29.mjs";
+import { ValidationSummary } from "./index30.mjs";
+import { Alert } from "./index31.mjs";
+import { ErrorBanner } from "./index32.mjs";
+import { Progress } from "./index33.mjs";
+import { Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText } from "./index34.mjs";
+import { StatusBadge } from "./index35.mjs";
+import { typography_exports } from "./index36.mjs";
+import Modal from "./index37.mjs";
+import { Dialog, DialogBody, DialogFooter } from "./index38.mjs";
+import { Drawer } from "./index39.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "./index40.mjs";
+import { Tooltip } from "./index41.mjs";
+import { ConfirmDialog } from "./index42.mjs";
+import { dimension_exports } from "./index43.mjs";
+import { radius_exports } from "./index44.mjs";
+import { ConfirmAction } from "./index45.mjs";
+import { CommandPalette } from "./index46.mjs";
+import { Breadcrumb } from "./index47.mjs";
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from "./index48.mjs";
+import { Pagination } from "./index49.mjs";
+import { Stepper } from "./index50.mjs";
+import { SidebarGroup, SidebarItem, SidebarNav, SidebarSection } from "./index51.mjs";
+import { Dropdown } from "./index52.mjs";
+import { Menu } from "./index53.mjs";
+import { Card, CardContent, CardFooter, CardHeader } from "./index54.mjs";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./index55.mjs";
+import { DescriptionItem, DescriptionList } from "./index56.mjs";
+import { ActivityFeed } from "./index57.mjs";
+import { ApprovalTimeline } from "./index58.mjs";
+import { Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard } from "./index59.mjs";
+import { EmptyState } from "./index60.mjs";
+import { EmployeeCard } from "./index61.mjs";
+import { TreeView } from "./index62.mjs";
+import { Kanban } from "./index63.mjs";
+import { PermissionMatrix } from "./index64.mjs";
+import { Calendar } from "./index65.mjs";
+import { BarChart, LineChart } from "./index66.mjs";
+import { statusMenuItems } from "./index67.mjs";
+import { colors_exports } from "./index68.mjs";
+import { shadow_exports } from "./index69.mjs";
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityFeed, Alert, ApprovalTimeline, Avatar, Badge, BarChart, Breadcrumb, Button, Calendar, Card, CardContent, CardFooter, CardHeader, Checkbox, Combobox, CommandPalette, ConfirmAction, ConfirmDialog, DatePicker, DescriptionItem, DescriptionList, Dialog, DialogBody, DialogFooter, Divider, Drawer, Dropdown, EmployeeCard, EmptyState, ErrorBanner, Field, FieldContext, FieldInput, FileUpload, FilterChip, IconButton, Input, Kanban, LineChart, Menu, Modal, OtpInput, PageHeader, Pagination, PermissionMatrix, Popover, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioItem, Section, SegmentedControl, Select, SidebarGroup, SidebarItem, SidebarNav, SidebarSection, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonTableRow, SkeletonText, Spinner, StatusBadge, Stepper, Switch, Tab, TabList, TabPanel, TabPanels, Tabs, Textarea, Timeline, TimelineEmptyState, TimelineFooter, TimelineItem, TimelineValueCard, Toolbar, Tooltip, TreeView, ValidationSummary, colors_exports as colors, dimension_exports as dimension, radius_exports as radius, shadow_exports as shadow, statusMenuItems, typography_exports as typography, useFieldContext };

package/lib/index10.cjs

@@ -0,0 +1,33 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/page-header/PageHeader.tsx
+function PageHeader({ title, subtitle, icon, actions, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-start gap-4",
+				children: [icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-brand-blue text-white shadow-lg shadow-brand-blue/20",
+					children: icon
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-l-4 border-brand-blue pl-4",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
+						className: "font-heading text-3xl font-bold tracking-tight text-slate-900",
+						children: title
+					}), subtitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "mt-1 max-w-4xl text-base font-medium leading-relaxed text-slate-500",
+						children: subtitle
+					})]
+				})]
+			}), actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex shrink-0 flex-wrap items-center gap-2",
+				children: actions
+			})]
+		})
+	});
+}
+//#endregion
+exports.PageHeader = PageHeader;
+
+//# sourceMappingURL=index10.cjs.map

package/lib/index10.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index10.cjs","names":[],"sources":["../src/ui-library/gallery/page-header/PageHeader.tsx"],"sourcesContent":["/**\n * PageHeader — Design System Component\n *\n * Standard page title area. Used at the top of list and detail pages.\n * Matches the production PageHeader in shared/components/ui.tsx.\n *\n * Renders:\n *   - Optional icon badge (indigo square)\n *   - Required title as <h1>\n *   - Optional subtitle as <p>\n *   - Optional actions slot (top-right on desktop, stacked below on mobile)\n *\n * Accessibility:\n *   - title renders as <h1>. Each page should have exactly one <h1>.\n *   - The icon badge is decorative — mark the icon aria-hidden=\"true\" at the call site.\n *   - No ARIA role on the container — the <h1> alone establishes page context.\n *\n * Usage:\n *   <PageHeader\n *     icon={<Building2 size={20} aria-hidden=\"true\" />}\n *     title=\"Company Structure\"\n *     subtitle=\"Manage departments and reporting relationships.\"\n *     actions={<button className={btnPrimary}>Add Department</button>}\n *   />\n */\n\nimport type { ReactNode } from 'react';\n\nexport interface PageHeaderProps {\n  /** Page heading. Rendered as <h1>. Required. */\n  title: string;\n  /** Optional description below the heading. Rendered as <p>. */\n  subtitle?: string;\n  /**\n   * Optional icon rendered inside an indigo badge.\n   * Mark the icon aria-hidden=\"true\" — the heading provides the accessible name.\n   */\n  icon?: ReactNode;\n  /**\n   * Optional action buttons or links.\n   * Rendered top-right on desktop, stacked below the title on mobile.\n   */\n  actions?: ReactNode;\n  /** Additional class on the root container. */\n  className?: string;\n}\n\nexport function PageHeader({ title, subtitle, icon, actions, className = '' }: PageHeaderProps) {\n  return (\n    <div className={className}>\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        {/* Left: icon + title + subtitle */}\n        <div className=\"flex items-start gap-4\">\n          {icon && (\n            <div className=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-brand-blue text-white shadow-lg shadow-brand-blue/20\">\n              {icon}\n            </div>\n          )}\n          <div className=\"border-l-4 border-brand-blue pl-4\">\n            <h1 className=\"font-heading text-3xl font-bold tracking-tight text-slate-900\">{title}</h1>\n            {subtitle && (\n              <p className=\"mt-1 max-w-4xl text-base font-medium leading-relaxed text-slate-500\">\n                {subtitle}\n              </p>\n            )}\n          </div>\n        </div>\n\n        {/* Right: actions */}\n        {actions && (\n          <div className=\"flex shrink-0 flex-wrap items-center gap-2\">\n            {actions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;AA+CA,SAAgB,WAAW,EAAE,OAAO,UAAU,MAAM,SAAS,YAAY,MAAuB;CAC9F,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAgB;EACd,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CAEE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA,GAEP,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,MAAD;MAAI,WAAU;MAAiE,UAAA;KAAU,CAAA,GACxF,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;MAAG,WAAU;MACV,UAAA;KACA,CAAA,CAEF;IACF,CAAA,CAAA;GAGJ,CAAA,GAAA,WACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA,CAEJ;;CACF,CAAA;AAET"}

package/lib/index10.mjs

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/page-header/PageHeader.tsx
+function PageHeader({ title, subtitle, icon, actions, className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-4",
+				children: [icon && /* @__PURE__ */ jsx("div", {
+					className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-brand-blue text-white shadow-lg shadow-brand-blue/20",
+					children: icon
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "border-l-4 border-brand-blue pl-4",
+					children: [/* @__PURE__ */ jsx("h1", {
+						className: "font-heading text-3xl font-bold tracking-tight text-slate-900",
+						children: title
+					}), subtitle && /* @__PURE__ */ jsx("p", {
+						className: "mt-1 max-w-4xl text-base font-medium leading-relaxed text-slate-500",
+						children: subtitle
+					})]
+				})]
+			}), actions && /* @__PURE__ */ jsx("div", {
+				className: "flex shrink-0 flex-wrap items-center gap-2",
+				children: actions
+			})]
+		})
+	});
+}
+//#endregion
+export { PageHeader };
+
+//# sourceMappingURL=index10.mjs.map

package/lib/index10.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index10.mjs","names":[],"sources":["../src/ui-library/gallery/page-header/PageHeader.tsx"],"sourcesContent":["/**\n * PageHeader — Design System Component\n *\n * Standard page title area. Used at the top of list and detail pages.\n * Matches the production PageHeader in shared/components/ui.tsx.\n *\n * Renders:\n *   - Optional icon badge (indigo square)\n *   - Required title as <h1>\n *   - Optional subtitle as <p>\n *   - Optional actions slot (top-right on desktop, stacked below on mobile)\n *\n * Accessibility:\n *   - title renders as <h1>. Each page should have exactly one <h1>.\n *   - The icon badge is decorative — mark the icon aria-hidden=\"true\" at the call site.\n *   - No ARIA role on the container — the <h1> alone establishes page context.\n *\n * Usage:\n *   <PageHeader\n *     icon={<Building2 size={20} aria-hidden=\"true\" />}\n *     title=\"Company Structure\"\n *     subtitle=\"Manage departments and reporting relationships.\"\n *     actions={<button className={btnPrimary}>Add Department</button>}\n *   />\n */\n\nimport type { ReactNode } from 'react';\n\nexport interface PageHeaderProps {\n  /** Page heading. Rendered as <h1>. Required. */\n  title: string;\n  /** Optional description below the heading. Rendered as <p>. */\n  subtitle?: string;\n  /**\n   * Optional icon rendered inside an indigo badge.\n   * Mark the icon aria-hidden=\"true\" — the heading provides the accessible name.\n   */\n  icon?: ReactNode;\n  /**\n   * Optional action buttons or links.\n   * Rendered top-right on desktop, stacked below the title on mobile.\n   */\n  actions?: ReactNode;\n  /** Additional class on the root container. */\n  className?: string;\n}\n\nexport function PageHeader({ title, subtitle, icon, actions, className = '' }: PageHeaderProps) {\n  return (\n    <div className={className}>\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n        {/* Left: icon + title + subtitle */}\n        <div className=\"flex items-start gap-4\">\n          {icon && (\n            <div className=\"flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-brand-blue text-white shadow-lg shadow-brand-blue/20\">\n              {icon}\n            </div>\n          )}\n          <div className=\"border-l-4 border-brand-blue pl-4\">\n            <h1 className=\"font-heading text-3xl font-bold tracking-tight text-slate-900\">{title}</h1>\n            {subtitle && (\n              <p className=\"mt-1 max-w-4xl text-base font-medium leading-relaxed text-slate-500\">\n                {subtitle}\n              </p>\n            )}\n          </div>\n        </div>\n\n        {/* Right: actions */}\n        {actions && (\n          <div className=\"flex shrink-0 flex-wrap items-center gap-2\">\n            {actions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;AA+CA,SAAgB,WAAW,EAAE,OAAO,UAAU,MAAM,SAAS,YAAY,MAAuB;CAC9F,OACE,oBAAC,OAAD;EAAgB;EACd,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CAEE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,QACC,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA;IACE,CAAA,GAEP,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,MAAD;MAAI,WAAU;MAAiE,UAAA;KAAU,CAAA,GACxF,YACC,oBAAC,KAAD;MAAG,WAAU;MACV,UAAA;KACA,CAAA,CAEF;IACF,CAAA,CAAA;GAGJ,CAAA,GAAA,WACC,oBAAC,OAAD;IAAK,WAAU;IACZ,UAAA;GACE,CAAA,CAEJ;;CACF,CAAA;AAET"}

package/lib/index11.cjs

@@ -0,0 +1,16 @@
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/ui-library/gallery/toolbar/Toolbar.tsx
+function Toolbar({ left, right, className = "" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: [
+			"w-full flex flex-wrap items-center justify-between gap-4",
+			"bg-white p-2 border border-slate-100 rounded-2xl shadow-sm",
+			className
+		].filter(Boolean).join(" "),
+		children: [left, right]
+	});
+}
+//#endregion
+exports.Toolbar = Toolbar;
+
+//# sourceMappingURL=index11.cjs.map

package/lib/index11.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index11.cjs","names":[],"sources":["../src/ui-library/gallery/toolbar/Toolbar.tsx"],"sourcesContent":["/**\n * Toolbar — Design System Component\n *\n * Two-slot horizontal layout container for filter controls and actions.\n * Purely presentational — owns only the outer white pill layout.\n *\n * Left slot:  filter dropdowns, segmented controls, pill buttons\n * Right slot: search input, primary action button (optional)\n *\n * Usage:\n *   <Toolbar\n *     left={<FilterControls />}\n *     right={<SearchInput />}\n *   />\n */\n\nimport type { ReactNode } from 'react';\n\nexport interface ToolbarProps {\n  /** Left slot — typically filter controls or dropdown triggers. */\n  left: ReactNode;\n  /** Right slot — typically a search input or primary action button. */\n  right?: ReactNode;\n  /** Additional class on the outer container. */\n  className?: string;\n}\n\nexport function Toolbar({ left, right, className = '' }: ToolbarProps) {\n  return (\n    <div\n      className={[\n        'w-full flex flex-wrap items-center justify-between gap-4',\n        'bg-white p-2 border border-slate-100 rounded-2xl shadow-sm',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {left}\n      {right}\n    </div>\n  );\n}\n"],"mappings":";;AA2BA,SAAgB,QAAQ,EAAE,MAAM,OAAO,YAAY,MAAoB;CACrE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,WAAW;GACT;GACA;GACA;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAPb,UAAA,CASG,MACA,KACE;;AAET"}

package/lib/index11.mjs

@@ -0,0 +1,16 @@
+import { jsxs } from "react/jsx-runtime";
+//#region src/ui-library/gallery/toolbar/Toolbar.tsx
+function Toolbar({ left, right, className = "" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			"w-full flex flex-wrap items-center justify-between gap-4",
+			"bg-white p-2 border border-slate-100 rounded-2xl shadow-sm",
+			className
+		].filter(Boolean).join(" "),
+		children: [left, right]
+	});
+}
+//#endregion
+export { Toolbar };
+
+//# sourceMappingURL=index11.mjs.map

package/lib/index11.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index11.mjs","names":[],"sources":["../src/ui-library/gallery/toolbar/Toolbar.tsx"],"sourcesContent":["/**\n * Toolbar — Design System Component\n *\n * Two-slot horizontal layout container for filter controls and actions.\n * Purely presentational — owns only the outer white pill layout.\n *\n * Left slot:  filter dropdowns, segmented controls, pill buttons\n * Right slot: search input, primary action button (optional)\n *\n * Usage:\n *   <Toolbar\n *     left={<FilterControls />}\n *     right={<SearchInput />}\n *   />\n */\n\nimport type { ReactNode } from 'react';\n\nexport interface ToolbarProps {\n  /** Left slot — typically filter controls or dropdown triggers. */\n  left: ReactNode;\n  /** Right slot — typically a search input or primary action button. */\n  right?: ReactNode;\n  /** Additional class on the outer container. */\n  className?: string;\n}\n\nexport function Toolbar({ left, right, className = '' }: ToolbarProps) {\n  return (\n    <div\n      className={[\n        'w-full flex flex-wrap items-center justify-between gap-4',\n        'bg-white p-2 border border-slate-100 rounded-2xl shadow-sm',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {left}\n      {right}\n    </div>\n  );\n}\n"],"mappings":";;AA2BA,SAAgB,QAAQ,EAAE,MAAM,OAAO,YAAY,MAAoB;CACrE,OACE,qBAAC,OAAD;EACE,WAAW;GACT;GACA;GACA;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAPb,UAAA,CASG,MACA,KACE;;AAET"}

package/lib/index12.cjs

@@ -0,0 +1,16 @@
+let react = require("react");
+//#region src/ui-library/gallery/field/FieldContext.ts
+/**
+* FieldContext — Gallery-native version.
+* Copied from shared/components/FieldContext.ts.
+*/
+var FieldContext = (0, react.createContext)(null);
+/** Returns the nearest Field's context, or null when used outside a Field. */
+function useFieldContext() {
+	return (0, react.use)(FieldContext);
+}
+//#endregion
+exports.FieldContext = FieldContext;
+exports.useFieldContext = useFieldContext;
+
+//# sourceMappingURL=index12.cjs.map

package/lib/index12.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index12.cjs","names":[],"sources":["../src/ui-library/gallery/field/FieldContext.ts"],"sourcesContent":["/**\n * FieldContext — Gallery-native version.\n * Copied from shared/components/FieldContext.ts.\n */\nimport { createContext, use } from 'react';\n\nexport interface FieldContextValue {\n  inputId: string;\n  errorId: string;\n  required: boolean;\n  invalid: boolean;\n}\n\nexport const FieldContext = createContext<FieldContextValue | null>(null);\n\n/** Returns the nearest Field's context, or null when used outside a Field. */\nexport function useFieldContext(): FieldContextValue | null {\n  return use(FieldContext);\n}\n"],"mappings":";;;;;;AAaA,IAAa,gBAAA,GAAe,MAAA,cAAA,CAAwC,IAAI;;AAGxE,SAAgB,kBAA4C;CAC1D,QAAA,GAAO,MAAA,IAAA,CAAI,YAAY;AACzB"}

package/lib/index12.mjs

@@ -0,0 +1,15 @@
+import { createContext, use } from "react";
+//#region src/ui-library/gallery/field/FieldContext.ts
+/**
+* FieldContext — Gallery-native version.
+* Copied from shared/components/FieldContext.ts.
+*/
+var FieldContext = createContext(null);
+/** Returns the nearest Field's context, or null when used outside a Field. */
+function useFieldContext() {
+	return use(FieldContext);
+}
+//#endregion
+export { FieldContext, useFieldContext };
+
+//# sourceMappingURL=index12.mjs.map

package/lib/index12.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index12.mjs","names":[],"sources":["../src/ui-library/gallery/field/FieldContext.ts"],"sourcesContent":["/**\n * FieldContext — Gallery-native version.\n * Copied from shared/components/FieldContext.ts.\n */\nimport { createContext, use } from 'react';\n\nexport interface FieldContextValue {\n  inputId: string;\n  errorId: string;\n  required: boolean;\n  invalid: boolean;\n}\n\nexport const FieldContext = createContext<FieldContextValue | null>(null);\n\n/** Returns the nearest Field's context, or null when used outside a Field. */\nexport function useFieldContext(): FieldContextValue | null {\n  return use(FieldContext);\n}\n"],"mappings":";;;;;;AAaA,IAAa,eAAe,cAAwC,IAAI;;AAGxE,SAAgB,kBAA4C;CAC1D,OAAO,IAAI,YAAY;AACzB"}