@trinityui/design-system 2.3.1 → 2.10.1

package/dist/components/BulkActionDock/types.d.ts

@@ -0,0 +1,71 @@
+/**
+ * @fileoverview Types for BulkActionDock — floating dock that appears when
+ * users select rows in a DataTable (or similar list).
+ */
+import type { ReactNode } from 'react';
+import type { SxProps, Theme } from '@mui/material';
+/**
+ * A single action button shown in the dock.
+ *
+ * Variants:
+ *   - default — primary action button
+ *   - subtle — quieter outlined button (e.g. "Export")
+ *   - destructive — error-tinted (e.g. "Delete")
+ */
+export interface BulkAction {
+    /** Stable id for analytics + tests. */
+    id: string;
+    /** Button label. */
+    label: string;
+    /** Optional leading icon (react-feather component). */
+    icon?: ReactNode;
+    /** Called when the action button is clicked. Receives the selected ids. */
+    onClick: (selectedIds: ReadonlyArray<string>) => void;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Visual treatment. Default `default`. */
+    variant?: 'default' | 'subtle' | 'destructive';
+}
+/**
+ * Position of the dock relative to its container.
+ *
+ * - `bottom-center` (default) — common chrome pattern; floats above table
+ * - `bottom-right` — for layouts where the right side is more discoverable
+ * - `inline` — sits in document flow instead of fixed-positioning (use when the
+ *   parent already manages absolute layout, e.g. inside a custom sheet)
+ */
+export type BulkActionDockPosition = 'bottom-center' | 'bottom-right' | 'inline';
+/**
+ * Props for BulkActionDock.
+ *
+ * Standard pattern: render this directly under a DataTable, controlled by the
+ * table's selection state. The dock auto-hides when `selectedIds.length === 0`
+ * unless `alwaysVisible` is set.
+ */
+export interface BulkActionDockProps {
+    /** Currently selected row ids. Drives count display and is forwarded to each action handler. */
+    selectedIds: ReadonlyArray<string>;
+    /** Bulk actions exposed in the dock. Order = display order. Keep to 1-4 for readability. */
+    actions: ReadonlyArray<BulkAction>;
+    /** Custom label override. Default `"{count} selected"`. */
+    selectionLabel?: (count: number) => string;
+    /** Called when the X clear button is clicked. */
+    onClearSelection?: () => void;
+    /** Position of the dock. Default `bottom-center`. */
+    position?: BulkActionDockPosition;
+    /** Force dock visibility even when no rows are selected. Default `false`. */
+    alwaysVisible?: boolean;
+    /** Width of the dock (px). Default `auto` — sizes to content. */
+    width?: number | string;
+    /** Maximum dock width before content wraps / scrolls. Default `720`. */
+    maxWidth?: number | string;
+    /** Optional left slot — typically a status indicator or summary chip. */
+    leadingSlot?: ReactNode;
+    /** Optional trailing slot rendered before the clear button. */
+    trailingSlot?: ReactNode;
+    /** sx for the root dock container. */
+    sx?: SxProps<Theme>;
+    /** Accessible label override for the dock region. Falls back to "Bulk actions". */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/BulkActionDock/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/BulkActionDock/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD;;;;;;;GAOG;AACH,MAAM,WAAW,UAAU;IACzB,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2EAA2E;IAC3E,OAAO,EAAE,CAAC,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACtD,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,aAAa,CAAC;CAChD;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,sBAAsB,GAAG,eAAe,GAAG,cAAc,GAAG,QAAQ,CAAC;AAEjF;;;;;;GAMG;AACH,MAAM,WAAW,mBAAmB;IAClC,gGAAgG;IAChG,WAAW,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACnC,4FAA4F;IAC5F,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACnC,2DAA2D;IAC3D,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,iDAAiD;IACjD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,sBAAsB,CAAC;IAClC,6EAA6E;IAC7E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,yEAAyE;IACzE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,sCAAsC;IACtC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/DateRangePicker/DateRangePicker.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @fileoverview DateRangePicker — compact two-date range input with calendar popover.
+ *
+ * Built from MUI primitives (no @mui/x-date-pickers dependency). Designed for
+ * dashboard filter bars where space is tight and quick presets are essential.
+ *
+ * @module components/DateRangePicker
+ * @example
+ * ```tsx
+ *  import { DateRangePicker, type DateRange } from '@trinityui/design-system';
+ *  const [range, setRange] = useState<DateRange>({ start: null, end: null });
+ *
+ *  <DateRangePicker value={range} onChange={setRange} label="Reporting period" />
+ * ```
+ */
+import * as React from 'react';
+import type { DateRangePickerProps } from './types';
+export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default DateRangePicker;
+//# sourceMappingURL=DateRangePicker.d.ts.map

package/dist/components/DateRangePicker/DateRangePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqB/B,OAAO,KAAK,EAEV,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAySjB,eAAO,MAAM,eAAe,6FA+T1B,CAAC;AAEH,eAAe,eAAe,CAAC"}

package/dist/components/DateRangePicker/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ * DateRangePicker barrel.
+ *
+ * PUBLIC API: Import from '@trinityui/design-system' instead.
+ */
+export { DateRangePicker, default as DateRangePickerDefault, } from './DateRangePicker';
+export type { DateRange, DateRangePickerProps, DateRangePickerSize, DateRangePreset, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DateRangePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,eAAe,EACf,OAAO,IAAI,sBAAsB,GAClC,MAAM,mBAAmB,CAAC;AAE3B,YAAY,EACV,SAAS,EACT,oBAAoB,EACpB,mBAAmB,EACnB,eAAe,GAChB,MAAM,SAAS,CAAC"}

package/dist/components/DateRangePicker/types.d.ts

@@ -0,0 +1,72 @@
+/**
+ * @fileoverview Types for DateRangePicker — compact two-date range input with calendar popover.
+ */
+import type { SxProps, Theme } from '@mui/material';
+/**
+ * A simple range tuple. Either end can be `null` while the user is mid-selection.
+ */
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/**
+ * Pre-defined quick-pick options shown in the popover sidebar.
+ */
+export interface DateRangePreset {
+    /** Display label (e.g. "Last 7 days") */
+    label: string;
+    /** Resolver that returns the start/end pair for "today". */
+    getRange: (today: Date) => DateRange;
+}
+/**
+ * Visual sizing.
+ */
+export type DateRangePickerSize = 'small' | 'medium';
+/**
+ * Props for DateRangePicker.
+ */
+export interface DateRangePickerProps {
+    /** The currently selected range. */
+    value: DateRange;
+    /** Called when the user commits a new range. */
+    onChange: (value: DateRange) => void;
+    /**
+     * Pre-defined quick-pick presets shown alongside the calendar.
+     * If omitted, sensible defaults are provided (Today / Last 7 / Last 30 / This month / Last month).
+     */
+    presets?: DateRangePreset[];
+    /** Optional minimum selectable date. */
+    minDate?: Date;
+    /** Optional maximum selectable date. Defaults to the user's "today". */
+    maxDate?: Date;
+    /** Field label rendered above the trigger. */
+    label?: string;
+    /** Placeholder shown when no range is selected. Default `"Select date range"`. */
+    placeholder?: string;
+    /** Input size. Default `medium`. */
+    size?: DateRangePickerSize;
+    /** Mark the field as disabled. */
+    disabled?: boolean;
+    /** Mark the field as required. */
+    required?: boolean;
+    /** Error message; renders the input in error state. */
+    error?: string;
+    /** Helper text shown below when there's no error. */
+    helperText?: string;
+    /** Display the dates using this format string. Default `"MMM d, yyyy"`. */
+    format?: 'short' | 'medium' | 'long' | 'iso';
+    /** Locale used for month names and day-of-week labels. Default the browser's. */
+    locale?: string;
+    /**
+     * Number of months rendered side-by-side. Default `2`.
+     * Use `1` for tighter layouts.
+     */
+    numberOfMonths?: 1 | 2;
+    /** sx overrides for the root container. */
+    sx?: SxProps<Theme>;
+    /** Field id for label association. */
+    id?: string;
+    /** Accessible label override for the trigger button. */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/DateRangePicker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,4DAA4D;IAC5D,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,SAAS,CAAC;CACtC;AAED;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,oCAAoC;IACpC,KAAK,EAAE,SAAS,CAAC;IACjB,gDAAgD;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,wCAAwC;IACxC,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,wEAAwE;IACxE,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,KAAK,CAAC;IAC7C,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACvB,2CAA2C;IAC3C,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/EntityDetailPanel/EntityDetailPanel.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @fileoverview EntityDetailPanel — right-side drawer for full entity detail.
+ *
+ * Visual: sticky header with title + subtitle + status pill + actions,
+ * optional tab strip, scrollable body with one tab's content visible,
+ * optional sticky footer slot.
+ *
+ * Field sections render as a 2-column grid (label left, value right) at
+ * desktop width; collapse to single column on narrow viewports.
+ *
+ * @module components/EntityDetailPanel
+ */
+import * as React from 'react';
+import type { EntityDetailPanelProps } from './types';
+export declare const EntityDetailPanel: React.ForwardRefExoticComponent<EntityDetailPanelProps & React.RefAttributes<HTMLDivElement>>;
+export default EntityDetailPanel;
+//# sourceMappingURL=EntityDetailPanel.d.ts.map

package/dist/components/EntityDetailPanel/EntityDetailPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityDetailPanel.d.ts","sourceRoot":"","sources":["../../../src/components/EntityDetailPanel/EntityDetailPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,KAAK,EACV,sBAAsB,EAKvB,MAAM,SAAS,CAAC;AA0KjB,eAAO,MAAM,iBAAiB,+FAkO5B,CAAC;AAEH,eAAe,iBAAiB,CAAC"}

package/dist/components/EntityDetailPanel/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ * EntityDetailPanel barrel.
+ *
+ * PUBLIC API: Import from '@trinityui/design-system' instead.
+ */
+export { EntityDetailPanel, default as EntityDetailPanelDefault, } from './EntityDetailPanel';
+export type { EntityDetailPanelProps, EntityDetailTab, EntityFieldSection, EntityField, EntityStatus, EntityStatusVariant, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/EntityDetailPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EntityDetailPanel/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EACL,iBAAiB,EACjB,OAAO,IAAI,wBAAwB,GACpC,MAAM,qBAAqB,CAAC;AAE7B,YAAY,EACV,sBAAsB,EACtB,eAAe,EACf,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,mBAAmB,GACpB,MAAM,SAAS,CAAC"}

package/dist/components/EntityDetailPanel/types.d.ts

@@ -0,0 +1,108 @@
+/**
+ * @fileoverview Types for EntityDetailPanel — right-side drawer showing
+ * full detail for a single entity (subject, study, site, document, etc.).
+ */
+import type { ReactNode } from 'react';
+import type { SxProps, Theme } from '@mui/material';
+/**
+ * A field/value pair rendered in a section.
+ *
+ * Trinity convention: `label` is short (1-3 words) and value is short-ish
+ * (a status chip, a number, a name). Long-form content belongs in the
+ * tab content slot, not in a field list.
+ */
+export interface EntityField {
+    /** Stable id for React keys. */
+    id: string;
+    /** Field name. Short. */
+    label: ReactNode;
+    /** Field value. Plain text or rendered chip / link / etc. */
+    value: ReactNode;
+    /** Optional tooltip or helper text shown beside the label. */
+    helperText?: string;
+    /** When true, render full-width (label above value). Default false. */
+    fullWidth?: boolean;
+}
+/**
+ * A grouped section of fields rendered inside a tab.
+ */
+export interface EntityFieldSection {
+    /** Stable id. */
+    id: string;
+    /** Section heading. */
+    title: ReactNode;
+    /** Field rows. */
+    fields: ReadonlyArray<EntityField>;
+    /** Optional section action — typically an edit button. */
+    action?: ReactNode;
+}
+/**
+ * A tab definition. The body of each tab is content-flexible — pass field
+ * sections via `fieldSections` for the standard label/value layout, or
+ * pass a custom `content` slot for full layout control.
+ */
+export interface EntityDetailTab {
+    /** Stable id. Used as React key and as the tab value. */
+    id: string;
+    /** Tab label. */
+    label: ReactNode;
+    /** Optional count badge to show beside the label. */
+    count?: number;
+    /** Optional icon shown left of the label. */
+    icon?: ReactNode;
+    /** Field sections to render inside this tab. */
+    fieldSections?: ReadonlyArray<EntityFieldSection>;
+    /** Custom content (overrides `fieldSections` if both supplied). */
+    content?: ReactNode;
+}
+/**
+ * Status pill displayed in the header below the title.
+ *
+ * Color maps via:
+ *   - `success` → palette.success.main
+ *   - `warning` → palette.warning.main
+ *   - `error`   → palette.error.main
+ *   - `info`    → palette.info.main
+ *   - `neutral` → palette.text.disabled (muted)
+ */
+export type EntityStatusVariant = 'success' | 'warning' | 'error' | 'info' | 'neutral';
+export interface EntityStatus {
+    label: ReactNode;
+    variant?: EntityStatusVariant;
+}
+/**
+ * Props for EntityDetailPanel.
+ */
+export interface EntityDetailPanelProps {
+    /** Open state. Controlled. */
+    open: boolean;
+    /** Close handler. */
+    onClose: () => void;
+    /** Entity title — primary identifier (e.g. "Subject 042"). */
+    title: ReactNode;
+    /** Secondary label below title (e.g. "TX-204 · Site 022"). */
+    subtitle?: ReactNode;
+    /** Optional status pill. */
+    status?: EntityStatus;
+    /** Optional leading slot — typically an Avatar. */
+    leadingSlot?: ReactNode;
+    /** Optional header action slot (e.g. Edit button). */
+    headerActions?: ReactNode;
+    /** Tabs to render. Pass at least one. */
+    tabs: ReadonlyArray<EntityDetailTab>;
+    /** Currently active tab id. Defaults to the first tab. */
+    activeTabId?: string;
+    /** Called when the active tab changes. */
+    onTabChange?: (id: string) => void;
+    /** Footer slot — typically related-entity chips or "View audit" link. */
+    footer?: ReactNode;
+    /** Drawer width. Default 520. */
+    width?: number | string;
+    /** Hide tab strip (single-tab panels). Default false — auto-hides if tabs.length === 1. */
+    hideTabs?: boolean;
+    /** sx for the drawer paper. */
+    paperSx?: SxProps<Theme>;
+    /** Accessible label override. */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/EntityDetailPanel/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/EntityDetailPanel/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,gCAAgC;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,yBAAyB;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,KAAK,EAAE,SAAS,CAAC;IACjB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,iBAAiB;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,uBAAuB;IACvB,KAAK,EAAE,SAAS,CAAC;IACjB,kBAAkB;IAClB,MAAM,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACnC,0DAA0D;IAC1D,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gDAAgD;IAChD,aAAa,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAClD,mEAAmE;IACnE,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,mBAAmB,GAC3B,SAAS,GACT,SAAS,GACT,OAAO,GACP,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,8BAA8B;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,qBAAqB;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8DAA8D;IAC9D,KAAK,EAAE,SAAS,CAAC;IACjB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,sDAAsD;IACtD,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yCAAyC;IACzC,IAAI,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IACrC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACzB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/GanttView/GanttView.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @fileoverview GanttView — horizontal timeline with task bars.
+ *
+ * Layout: 2-column grid. Left column is a fixed-width task list; right column
+ * is a horizontally-scrollable timeline. Both columns share row heights so
+ * each bar visually aligns to its label row.
+ *
+ * Time math: a single horizontal coordinate per task is computed from
+ * `(taskStart - rangeStart) / msPerTick * tickWidth`. No external date lib
+ * needed — Date arithmetic is sufficient for day/week/month/quarter grids.
+ *
+ * Dependencies: rendered as SVG paths in an overlay layer above the bars.
+ * Each arrow goes from one task's right edge to the dependent's left edge
+ * via an L-shaped elbow (right → down → right).
+ *
+ * @module components/GanttView
+ */
+import * as React from 'react';
+import type { GanttViewProps } from './types';
+/**
+ * Render task list + timeline as a synchronized two-pane layout.
+ */
+export declare const GanttView: React.ForwardRefExoticComponent<GanttViewProps & React.RefAttributes<HTMLDivElement>>;
+export default GanttView;
+//# sourceMappingURL=GanttView.d.ts.map

package/dist/components/GanttView/GanttView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GanttView.d.ts","sourceRoot":"","sources":["../../../src/components/GanttView/GanttView.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EACV,cAAc,EAKf,MAAM,SAAS,CAAC;AA2IjB;;GAEG;AACH,eAAO,MAAM,SAAS,uFAwmBrB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/GanttView/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ * GanttView barrel.
+ *
+ * PUBLIC API: Import from '@trinityui/design-system' instead.
+ */
+export { GanttView, default as GanttViewDefault } from './GanttView';
+export type { GanttViewProps, GanttTask, GanttGroup, GanttGranularity, GanttSeverity, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/GanttView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GanttView/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAErE,YAAY,EACV,cAAc,EACd,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,aAAa,GACd,MAAM,SAAS,CAAC"}

package/dist/components/GanttView/types.d.ts

@@ -0,0 +1,110 @@
+/**
+ * @fileoverview Types for GanttView — horizontal timeline with task bars,
+ * groupings, milestones, dependencies, and today line.
+ */
+import type { ReactNode } from 'react';
+import type { SxProps, Theme } from '@mui/material';
+/**
+ * Severity for task bars + milestones.
+ *
+ * Maps to `theme.palette.<severity>.main`.
+ *   - `success` — completed / on track
+ *   - `warning` — at-risk / approaching threshold
+ *   - `error`   — off-track / overdue
+ *   - `info`    — informational / neutral
+ *   - `neutral` — pending / not started
+ */
+export type GanttSeverity = 'success' | 'warning' | 'error' | 'info' | 'neutral';
+/**
+ * A single task rendered as a horizontal bar.
+ */
+export interface GanttTask {
+    /** Stable id. */
+    id: string;
+    /** Display label in the left-hand task list. */
+    label: ReactNode;
+    /** Optional secondary text shown under the label. */
+    description?: ReactNode;
+    /** Start (inclusive). Date or ISO string. */
+    start: Date | string;
+    /** End (exclusive). Date or ISO string. */
+    end: Date | string;
+    /** Optional severity (drives bar color). Default `info`. */
+    severity?: GanttSeverity;
+    /** Optional completion 0..1 — when set, shows a darker fill from start to that fraction. */
+    progress?: number;
+    /** Optional ids of tasks this depends on — renders arrow from each dependency's end to this task's start. */
+    dependsOn?: ReadonlyArray<string>;
+    /** Optional assignee — rendered as short text on the bar. */
+    assignee?: string;
+    /** Marked as a milestone — renders as a diamond marker instead of a bar (uses `start` only). */
+    milestone?: boolean;
+    /** Disabled — dim out the bar. */
+    disabled?: boolean;
+}
+/**
+ * Optional grouping — render a group header row above its children.
+ *
+ * Groups span the full date range of their children (or the explicit
+ * `start`/`end` if provided). Clicking the chevron collapses the group.
+ */
+export interface GanttGroup {
+    /** Stable id. */
+    id: string;
+    /** Group label. */
+    label: ReactNode;
+    /** Members. */
+    tasks: ReadonlyArray<GanttTask>;
+    /** Optional explicit start (overrides auto-derived span). */
+    start?: Date | string;
+    /** Optional explicit end (overrides auto-derived span). */
+    end?: Date | string;
+    /** When true, group is collapsed (members hidden). Default false. */
+    collapsed?: boolean;
+}
+/**
+ * Timeline tick granularity.
+ *
+ * Drives header label format + vertical grid spacing.
+ */
+export type GanttGranularity = 'day' | 'week' | 'month' | 'quarter';
+/**
+ * Props for GanttView.
+ */
+export interface GanttViewProps {
+    /** Tasks (top-level — use \`groups\` to render hierarchical structure). */
+    tasks?: ReadonlyArray<GanttTask>;
+    /** Optional groups — group header + member tasks. Mutually exclusive with top-level \`tasks\`. */
+    groups?: ReadonlyArray<GanttGroup>;
+    /** Timeline start. Defaults to earliest task start (rounded down to granularity). */
+    rangeStart?: Date | string;
+    /** Timeline end. Defaults to latest task end (rounded up to granularity). */
+    rangeEnd?: Date | string;
+    /** Header granularity. Default `week`. */
+    granularity?: GanttGranularity;
+    /** Pixel width per granularity tick. Default 80. */
+    tickWidth?: number;
+    /** Row height. Default 36. */
+    rowHeight?: number;
+    /** Left-side label column width. Default 220. */
+    labelColumnWidth?: number;
+    /** Maximum visible height before vertical scroll engages. Default 480. */
+    maxHeight?: number | string;
+    /** Show today line (vertical dashed). Default true. */
+    showToday?: boolean;
+    /** Currently selected task id. */
+    selectedId?: string;
+    /** Called when a task or milestone is clicked. */
+    onSelect?: (task: GanttTask) => void;
+    /** Called when a group chevron is clicked. */
+    onGroupToggle?: (group: GanttGroup) => void;
+    /** Render custom task content (overrides default label rendering inside the bar). */
+    renderTaskBar?: (task: GanttTask) => ReactNode;
+    /** Hide the dependency arrows. Default false (arrows drawn when `dependsOn` is set). */
+    hideDependencies?: boolean;
+    /** sx for the root container. */
+    sx?: SxProps<Theme>;
+    /** Accessible label override. Default "Gantt timeline". */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/GanttView/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/GanttView/types.ts"],"names":[],"mappings":"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"}

package/dist/components/GaugeCard/GaugeCard.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @fileoverview GaugeCard — KPI card with arc gauge visualization.
+ *
+ * Visual: 220° arc (speedometer style) sweeping from 7 o'clock to 5 o'clock,
+ * with the value text + label below. Track is rendered with semantic border
+ * color; the fill arc uses the severity color from `theme.palette`.
+ *
+ * Why SVG and not Highcharts: a single gauge can be drawn in ~5 path lines
+ * with no chart dependency. Avoids bundle bloat for a primitive that's used
+ * in many KPI dashboard tiles.
+ *
+ * @module components/GaugeCard
+ * @example
+ * ```tsx
+ *  <GaugeCard
+ *    label="Protocol adherence"
+ *    value={87.2}
+ *    unit="%"
+ *    precision={1}
+ *    target={90}
+ *    thresholds={[
+ *      { from: 0,  to: 70, severity: 'error' },
+ *      { from: 70, to: 90, severity: 'warning' },
+ *      { from: 90, to: 100, severity: 'success' },
+ *    ]}
+ *    caption="vs 84.1% last period"
+ *  />
+ * ```
+ */
+import * as React from 'react';
+import type { GaugeCardProps } from './types';
+export declare const GaugeCard: React.ForwardRefExoticComponent<GaugeCardProps & React.RefAttributes<HTMLDivElement>>;
+export default GaugeCard;
+//# sourceMappingURL=GaugeCard.d.ts.map

package/dist/components/GaugeCard/GaugeCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GaugeCard.d.ts","sourceRoot":"","sources":["../../../src/components/GaugeCard/GaugeCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EACV,cAAc,EAIf,MAAM,SAAS,CAAC;AAoNjB,eAAO,MAAM,SAAS,uFAgLrB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/GaugeCard/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @internal
+ * GaugeCard barrel.
+ *
+ * PUBLIC API: Import from '@trinityui/design-system' instead.
+ */
+export { GaugeCard, default as GaugeCardDefault } from './GaugeCard';
+export type { GaugeCardProps, GaugeSeverity, GaugeSize, GaugeThreshold, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/GaugeCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GaugeCard/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAErE,YAAY,EACV,cAAc,EACd,aAAa,EACb,SAAS,EACT,cAAc,GACf,MAAM,SAAS,CAAC"}

package/dist/components/GaugeCard/types.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @fileoverview Types for GaugeCard — composite chart card with arc gauge
+ * visualization, value, label, optional target line, and severity coloring.
+ */
+import type { ReactNode } from 'react';
+import type { SxProps, Theme } from '@mui/material';
+/**
+ * Severity drives the gauge arc color + optional value text color.
+ *
+ * Map to `theme.palette.<severity>.main`:
+ *   - `success` → green (good metrics, on-target)
+ *   - `warning` → amber (approaching threshold)
+ *   - `error`   → red (out of range)
+ *   - `info`    → blue (neutral / informational)
+ *   - `neutral` → muted gray
+ */
+export type GaugeSeverity = 'success' | 'warning' | 'error' | 'info' | 'neutral';
+/**
+ * Gauge size preset.
+ *
+ * - `sm` — 100px diameter — for grid tiles or compact dashboards
+ * - `md` — 160px diameter (default) — standard KPI card
+ * - `lg` — 220px diameter — hero metric on detail pages
+ */
+export type GaugeSize = 'sm' | 'md' | 'lg';
+/**
+ * Optional severity threshold for auto-coloring.
+ *
+ * When supplied, GaugeCard picks the matching severity based on which range
+ * the current `value` falls in. Mutually exclusive with explicit `severity`.
+ */
+export interface GaugeThreshold {
+    /** Inclusive lower bound. */
+    from: number;
+    /** Exclusive upper bound. */
+    to: number;
+    /** Severity applied when value is in [from, to). */
+    severity: GaugeSeverity;
+}
+/**
+ * Props for GaugeCard.
+ *
+ * Computes the arc gauge from `value` (normalized against `min`/`max`).
+ * The arc sweeps from 220° (bottom-left) to 320° (bottom-right) — i.e. a
+ * standard 220° span — giving a visually balanced "speedometer" look.
+ */
+export interface GaugeCardProps {
+    /** Metric label (e.g. "Protocol adherence"). */
+    label: ReactNode;
+    /** Current value. Clamped to [min, max] before rendering. */
+    value: number;
+    /** Lower bound. Default 0. */
+    min?: number;
+    /** Upper bound. Default 100. */
+    max?: number;
+    /** Optional target line (rendered as a tick on the arc). */
+    target?: number;
+    /** Value suffix (e.g. "%"). */
+    unit?: string;
+    /** Number of decimal places to render. Default 0. */
+    precision?: number;
+    /** Severity (drives arc color). Mutually exclusive with `thresholds`. */
+    severity?: GaugeSeverity;
+    /** Auto-color the gauge based on which threshold range `value` falls in. */
+    thresholds?: ReadonlyArray<GaugeThreshold>;
+    /** Optional sub-text below the value (e.g. previous period comparison). */
+    caption?: ReactNode;
+    /** Optional eyebrow text above the label (e.g. "Q2 2026"). */
+    eyebrow?: ReactNode;
+    /** Optional trailing slot (e.g. action menu or info tooltip). */
+    headerSlot?: ReactNode;
+    /** Optional footer slot below the gauge. */
+    footerSlot?: ReactNode;
+    /** Render the card without a Paper surround (for embedding in custom shells). Default false. */
+    bare?: boolean;
+    /** Gauge size. Default `md`. */
+    size?: GaugeSize;
+    /** Loading state — renders a skeleton arc. Default false. */
+    loading?: boolean;
+    /** sx for the root container. */
+    sx?: SxProps<Theme>;
+    /** Accessible label override. Falls back to `${label}: ${value}${unit}`. */
+    ariaLabel?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/GaugeCard/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/GaugeCard/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEjF;;;;;;GAMG;AACH,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;;;;GAKG;AACH,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,oDAAoD;IACpD,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC3C,2EAA2E;IAC3E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iEAAiE;IACjE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gGAAgG;IAChG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gCAAgC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}