npm - @hyddenlabs/hydn-ui - Versions diffs - 0.3.5 → 0.3.7 - Mend

@hyddenlabs/hydn-ui 0.3.5 → 0.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/components/data-display/data-grid/data-grid.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAS/D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAK7D,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;~~AAkB9C~~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~~2CA4vBlB~~;~~kBAzxBQ~~,QAAQ;;;~~AA6xBjB~~,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"data-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-display/data-grid/data-grid.js CHANGED Viewed

@@ -12,6 +12,7 @@ import Badge from "../badge/badge.js";
 import Text from "../../typography/text/text.js";
 import useTable from "../data-table/use-table.js";
 import EmptyState from "../empty-state/empty-state.js";
+import StatusIndicator from "../status-indicator/status-indicator.js";
 import { Link } from "react-router-dom";
 const INTERACTIVE_TAGS = /* @__PURE__ */ new Set(["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA", "LABEL"]);
 function isInteractiveElement(element, container) {
@@ -257,20 +258,7 @@ function DataGrid({
     if (column.statusDotMap) {
       const stringValue = String(value);
       const dotConfig = column.statusDotMap[stringValue] || column.statusDotMap["*"] || { color: "neutral" };
-      const dotColor = dotConfig.color || "neutral";
-      const dotColorClasses = {
-        primary: "bg-primary",
-        accent: "bg-accent",
-        neutral: "bg-muted-foreground",
-        success: "bg-success",
-        warning: "bg-warning",
-        error: "bg-error",
-        info: "bg-info"
-      };
-      return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 min-w-0", children: [
-        /* @__PURE__ */ jsx("span", { className: `size-2 rounded-full shrink-0 ${dotColorClasses[dotColor]}` }),
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: dotConfig.label || stringValue })
-      ] });
+      return /* @__PURE__ */ jsx(StatusIndicator, { variant: dotConfig.color || "neutral", children: dotConfig.label || stringValue });
     }
     if (column.renderAsBadges) {
       if (Array.isArray(value)) {

package/dist/components/data-display/data-grid/data-grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-grid.js","sources":["../../../../src/components/data-display/data-grid/data-grid.tsx"],"sourcesContent":["import { ReactNode, useState, useEffect, useRef } from 'react';\nimport { Icon } from '../../system/icon/icon';\nimport IconButton from '../../forms/button/icon-button';\nimport Input from '../../forms/input/input';\nimport InputGroup from '../../forms/input-group/input-group';\n\nimport Checkbox from '../../forms/checkbox/checkbox';\nimport Button from '../../forms/button/button';\nimport Tooltip from '../../feedback/tooltip/tooltip';\nimport type { ButtonProps } from '../../forms/button/button';\nimport Stack from '../../layout/stack/stack';\nimport Badge from '../badge/badge';\nimport Text from '../../typography/text/text';\nimport { useTable, UseTableOptions } from '../data-table/use-table';\nimport { Size } from '@/theme/size-tokens';\nimport { ColorVariant } from '@/theme/tokens';\nimport EmptyState from '../empty-state/empty-state';\nimport { Link } from 'react-router-dom';\n\n/** Interactive element tags that should not trigger onRowClick callback /\nconst INTERACTIVE_TAGS = new Set(['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'LABEL']);\n\n/* Check if an element or any of its ancestors (up to container) is interactive - used for onRowClick only /\nfunction isInteractiveElement(element: HTMLElement \| null, container: HTMLElement \| null): boolean {\n let current = element;\n while (current && current !== container) {\n if (INTERACTIVE_TAGS.has(current.tagName)) return true;\n if (current.getAttribute('role') === 'button') return true;\n current = current.parentElement;\n }\n return false;\n}\n\nexport type DataGridAction<T> = {\n /* Icon name for the action button /\n icon: string;\n /* Size of the icon /\n iconSize?: Size;\n /* Color variant for the icon /\n iconColor?: ColorVariant;\n /* Icon to display on hover (optional) /\n hoverIcon?: string;\n /* Accessible label for the action (shown in tooltip or screen readers) /\n label: string;\n /* Tooltip text to display on hover. If not provided, label will be used for aria-label only. /\n tooltip?: string;\n /* Callback when the action is clicked /\n onClick: (row: T, index: number) => void;\n /* Visual variant for the action button /\n variant?: 'primary' \| 'accent' \| 'neutral' \| 'success' \| 'warning' \| 'error' \| 'info';\n};\n\nexport type DataGridActionItem<T> = DataGridAction<T> \| ReactNode;\n\nexport type DataGridColumnDef<T> = {\n /* Key of the data property to display in this column /\n key: keyof T;\n /* Column header label /\n label: string;\n /* Whether this column can be sorted /\n sortable?: boolean;\n /* CSS width class or value for the column (e.g., 'w-48', '200px', 'flex-1') /\n width?: string;\n /\n Minimum width in pixels for the column. When set:\n * - Column truncates but never shrinks below this width\n * - Column auto-hides if container can't fit it at this width\n * - No need to also set hidePriority (though you can for explicit hide ordering)\n \n @example minWidth: 120 // Hide if email would be squished below 120px\n /\n minWidth?: number;\n /\n Maximum width in pixels for the column. Prevents column from growing too wide.\n * Use for columns like status/role that don't need much space.\n \n @example maxWidth: 100 // Cap role column at 100px\n /\n maxWidth?: number;\n /* Text alignment for cells in this column /\n align?: 'left' \| 'center' \| 'right';\n /* Whether text should wrap instead of truncating (useful for long strings) /\n wrapText?: boolean;\n /* Optional priority for responsive hiding. Lower values hide first when container width shrinks. Columns without hidePriority or minWidth are never hidden. /\n hidePriority?: number;\n /* Whether to show this column's label in mobile/vertical layout (default: true) /\n showLabelOnMobile?: boolean;\n /* Custom render function for cell content (use as escape hatch when config options don't cover your use case) /\n render?: (value: T[keyof T], row: T, index: number) => ReactNode;\n\n // Config-driven rendering options (preferred over custom render)\n /* Pre-built formatter for common data types /\n format?: 'date' \| 'currency' \| 'number' \| 'percent';\n /* Options for Intl formatters (NumberFormat or DateTimeFormat) /\n formatOptions?: Intl.NumberFormatOptions \| Intl.DateTimeFormatOptions;\n /* Map values to badge variants. Unmatched values render with 'neutral' variant. Use '' key to override the default fallback. /\n badgeMap?: {\n [key: string]: { variant?: ColorVariant; label?: string };\n };\n /** Map values to status dot colors. Renders text with a colored dot to the left. Lighter alternative to badges for status indicators. /\n statusDotMap?: {\n [key: string]: { color?: ColorVariant; label?: string };\n };\n /\n Render cell values as badges. When the value is an array, each item is rendered\n * as an individual badge; for scalar values, the value is wrapped in a single badge.\n /\n renderAsBadges?: boolean;\n /* Variant for badge rendering /\n badgeVariant?: ColorVariant;\n /* Size for badge rendering /\n componentSize?: 'sm' \| 'md' \| 'lg';\n /* Fallback value to display when cell value is null, undefined, or empty string /\n fallback?: string;\n};\n\nexport type DataGridProps<T> = {\n /* Array of data objects to display in the grid /\n data: T[];\n /* Column definitions specifying how to render each column /\n columns: DataGridColumnDef<T>[];\n /* Additional CSS classes to apply /\n className?: string;\n\n // Styling options\n /* Whether to apply striped row styling (alternating background) /\n striped?: boolean;\n /* Whether rows have hover effects /\n hoverable?: boolean;\n /* Whether to use compact spacing for dense data /\n compact?: boolean;\n\n // Features\n /* Whether columns can be sorted (can be overridden per column) /\n sortable?: boolean;\n /* Whether to enable client-side pagination /\n paginated?: boolean;\n /* Number of rows per page when pagination is enabled /\n pageSize?: number;\n /* Whether to show checkboxes for row selection /\n selectable?: boolean;\n /* Whether to enable search/filter functionality /\n searchable?: boolean;\n /* Specific keys to search within. If not provided, searches all fields. /\n searchKeys?: (keyof T)[];\n /* Placeholder text for the search input /\n searchPlaceholder?: string;\n /* Callback when search query changes /\n onSearchChange?: (query: string) => void;\n\n // Actions - either array of action configs/components OR function returning actions/render\n /* Action buttons, function returning actions based on row data, or custom render function for the actions column /\n actions?: DataGridActionItem<T>[] \| ((row: T, index: number) => DataGridActionItem<T>[] \| ReactNode);\n /* Label for the actions column header /\n actionsLabel?: string;\n\n // Row link - makes entire row clickable for navigation\n /* Function returning href for row navigation. When provided, entire row becomes a link. /\n rowHref?: (row: T, index: number) => string \| undefined;\n\n // Callbacks\n /* Callback when a row is clicked (if rowHref not provided) /\n onRowClick?: (row: T, index: number) => void;\n /* Callback when row selection changes (provides array of selected row indices) /\n onSelectionChange?: (selectedIndices: number[]) => void;\n\n // Empty state\n emptyState?: {\n /* Message to display when there is no data /\n title?: string;\n /* Description to display when there is no data /\n description?: string;\n /* Text for the button in the empty state /\n buttonText?: string;\n /* Click handler for the button in the empty state /\n onButtonClick?: () => void;\n };\n\n // Initial state\n /* Initial sort configuration /\n initialSort?: { key: keyof T; direction: 'asc' \| 'desc' };\n /* Title displayed above the grid (left side of header) /\n title?: string;\n /* Header actions displayed above the grid (right side of header). /\n headerActions?: HeaderAction[];\n};\n\nexport type HeaderAction = {\n /* Button text; if omitted and `icon` provided, button will be icon-only /\n label?: string;\n /* Icon name to render inside the button (maps to library `Icon`) /\n icon?: string;\n /* Accessible label for screen readers. Required for icon-only buttons (when label is omitted). /\n ariaLabel?: string;\n /* Click handler invoked when the button is clicked /\n onClick?: () => void;\n /* Button variant (maps to Button `variant` prop) /\n variant?: ButtonProps['variant'];\n /* Button style (maps to Button `style` prop) /\n style?: ButtonProps['style'];\n /* Button size (maps to Button `size` prop) /\n size?: ButtonProps['size'];\n /* Additional className forwarded to the Button /\n className?: string;\n};\n\n/* Breakpoint width (in px) below which we switch to vertical/mobile layout /\nconst MOBILE_BREAKPOINT = 640;\n\n/\n DataGrid - Responsive data display component with Vercel-style layout\n \n Features:\n * - Generic typed data and columns (same API as DataTable)\n * - Responsive layout: horizontal rows on desktop, vertical card-like on mobile\n * - Clickable rows via rowHref with interactive elements taking priority\n * - Client-side sorting, pagination, selection, and search\n * - Custom cell rendering with DataGridCell for multi-element stacking\n \n @example\n * ```tsx\n * <DataGrid\n * data={deployments}\n * columns={[\n * {\n * key: 'name',\n * label: 'Deployment',\n * render: (value, row) => (\n * <DataGridCell>\n * <Text weight=\"medium\">{row.name}</Text>\n * <Text size=\"sm\" variant=\"muted\">{row.url}</Text>\n * </DataGridCell>\n * )\n * },\n * { key: 'status', label: 'Status', badgeMap: { ready: { variant: 'success' } } },\n * { key: 'createdAt', label: 'Created', format: 'date' }\n * ]}\n * rowHref={(row) => `/deployments/${row.id}`}\n * hoverable\n * />\n * ```\n /\nfunction DataGrid<T>({\n data,\n columns,\n className = '',\n striped = false,\n hoverable = true,\n compact = false,\n sortable = true,\n paginated = false,\n pageSize = 10,\n selectable = false,\n searchable = false,\n searchKeys,\n searchPlaceholder = 'Search...',\n onSearchChange,\n actions,\n actionsLabel = 'Actions',\n rowHref,\n onRowClick,\n onSelectionChange,\n emptyState = {\n title: 'No data available',\n description: undefined,\n buttonText: undefined,\n onButtonClick: undefined\n },\n headerActions,\n title,\n initialSort\n}: DataGridProps<T>) {\n // Search state\n const [searchQuery, setSearchQuery] = useState('');\n\n // Layout state (desktop vs mobile)\n const [isMobile, setIsMobile] = useState(false);\n\n const handleSearchChange = (value: string) => {\n setSearchQuery(value);\n if (onSearchChange) {\n onSearchChange(value);\n }\n };\n\n // Container ref for responsive behavior\n const containerRef = useRef<HTMLDivElement>(null);\n const [visibleColumns, setVisibleColumns] = useState<DataGridColumnDef<T>[]>(() => columns);\n\n // Calculate minimum width needed for actions column based on max actions in any row\n const calculateActionsMinWidth = (): number => {\n if (!actions) return 0;\n\n let maxActionCount = 0;\n\n if (Array.isArray(actions)) {\n // Static actions - all rows have the same actions\n maxActionCount = actions.length;\n } else {\n // Dynamic actions - need to check all rows\n data.forEach((row, index) => {\n const result = actions(row, index);\n if (Array.isArray(result)) {\n maxActionCount = Math.max(maxActionCount, result.length);\n } else {\n // Custom render - assume it needs reasonable space (equivalent to 2 actions)\n maxActionCount = Math.max(maxActionCount, 2);\n }\n });\n }\n\n if (maxActionCount === 0) {\n // No actions, but we still need some minimum space in case actions appear\n return 60;\n }\n\n // Each action button takes ~36px (icon + button padding)\n // Stack spacing between actions is 8px (spacing=\"sm\")\n // Formula: (actionWidth count) + (gap * (count - 1)) + extraPadding\n const actionWidth = 24;\n const gapWidth = 8;\n const extraPadding = 16; // breathing room\n\n return actionWidth * maxActionCount + gapWidth * Math.max(0, maxActionCount - 1) + extraPadding;\n };\n\n const actionsMinWidth = calculateActionsMinWidth();\n\n // ResizeObserver to handle responsive column hiding and mobile layout\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n // Check if any columns have hidePriority or minWidth set (both make columns hideable)\n const hasHideableColumns = columns.some((col) => col.hidePriority !== undefined \|\| col.minWidth !== undefined);\n\n const updateLayout = () => {\n const containerWidth = container.offsetWidth;\n\n // Check if we should switch to mobile layout\n const nowMobile = containerWidth < MOBILE_BREAKPOINT;\n setIsMobile(nowMobile);\n\n // In mobile/vertical layout, show all columns (they stack vertically)\n // Only apply responsive hiding in desktop/horizontal mode\n if (nowMobile \|\| !hasHideableColumns) {\n setVisibleColumns(columns);\n return;\n }\n\n // Columns are hideable if they have hidePriority OR minWidth\n const isHideable = (col: DataGridColumnDef<T>) => col.hidePriority !== undefined \|\| col.minWidth !== undefined;\n\n // Separate columns into hideable and non-hideable\n const hideableColumns = columns\n .map((col, index) => ({ col, originalIndex: index }))\n .filter(({ col }) => isHideable(col))\n .sort((a, b) => {\n // Sort by hidePriority if both have it (lower hides first)\n const aPriority = a.col.hidePriority;\n const bPriority = b.col.hidePriority;\n\n if (aPriority !== undefined && bPriority !== undefined) {\n if (aPriority !== bPriority) return aPriority - bPriority;\n }\n // Columns with explicit hidePriority hide before minWidth-only columns\n if (aPriority !== undefined && bPriority === undefined) return -1;\n if (aPriority === undefined && bPriority !== undefined) return 1;\n\n // For minWidth-only columns, larger minWidth hides first (needs more space)\n const aMin = a.col.minWidth ?? 0;\n const bMin = b.col.minWidth ?? 0;\n if (aMin !== bMin) return bMin - aMin;\n\n // Finally, later columns hide first (preserve leading columns)\n return b.originalIndex - a.originalIndex;\n });\n\n const nonHideableColumns = columns.filter((col) => !isHideable(col));\n\n // Estimate column width - use minWidth if set, otherwise parse width or default\n const estimateColumnWidth = (col: DataGridColumnDef<T>): number => {\n // Use minWidth if explicitly set (this is the minimum space the column needs)\n if (col.minWidth) return col.minWidth;\n\n if (col.width) {\n const match = col.width.match(/(\\d+)/);\n if (match) {\n const num = parseInt(match[1], 10);\n if (col.width.includes('px')) return num;\n return num * 4;\n }\n }\n return 150;\n };\n\n // Calculate horizontal padding (px-3 = 24px total, px-4 = 32px total)\n const horizontalPadding = compact ? 24 : 32;\n // Grid gap is 16px (gap-4) between each column\n const gridGap = 16;\n\n // Start with non-hideable columns\n let currentWidth = nonHideableColumns.reduce((sum, col) => sum + estimateColumnWidth(col), 0);\n let totalColumns = nonHideableColumns.length;\n\n // Account for selection and actions columns\n if (selectable) {\n currentWidth += 48;\n totalColumns += 1;\n }\n if (actions) {\n currentWidth += actionsMinWidth;\n totalColumns += 1;\n }\n\n // Add hideable columns until we run out of space\n const columnsToShow: DataGridColumnDef<T>[] = [...nonHideableColumns];\n\n for (const { col } of hideableColumns) {\n const colWidth = estimateColumnWidth(col);\n const newTotalColumns = totalColumns + 1;\n // Calculate total gaps needed with the new column (N columns = N-1 gaps)\n const totalGaps = Math.max(0, newTotalColumns - 1) * gridGap;\n const totalWidthNeeded = currentWidth + colWidth + totalGaps + horizontalPadding;\n\n if (totalWidthNeeded <= containerWidth) {\n columnsToShow.push(col);\n currentWidth += colWidth;\n totalColumns = newTotalColumns;\n }\n }\n\n // Restore original column order\n const orderedVisibleColumns = columns.filter((col) => columnsToShow.includes(col));\n setVisibleColumns(orderedVisibleColumns);\n };\n\n // Call once on mount\n updateLayout();\n\n // Set up observer\n const observer = new ResizeObserver(() => {\n updateLayout();\n });\n\n observer.observe(container);\n\n return () => {\n observer.disconnect();\n };\n }, [columns, selectable, actions, actionsMinWidth, compact, data]);\n\n // Use table hook for state management\n const effectiveSearchKeys = searchKeys \|\| visibleColumns.map((col) => col.key);\n\n const tableOptions: UseTableOptions<T> = {\n data,\n initialSort,\n pageSize,\n searchQuery,\n searchKeys: effectiveSearchKeys\n };\n\n const {\n currentData,\n sortedData,\n filteredData,\n sortConfig,\n handleSort,\n currentPage,\n totalPages,\n nextPage,\n prevPage,\n canNextPage,\n canPrevPage,\n selectedRows,\n toggleRow,\n toggleAll,\n isRowSelected,\n isAllSelected\n } = useTable(tableOptions);\n\n // Display data (paginated uses currentData, non-paginated uses sortedData)\n const displayData = paginated ? currentData : sortedData;\n\n // Header title and actions\n const hasHeader = Boolean(\n (title && String(title).length > 0) \|\|\n (Array.isArray(headerActions) ? headerActions.length > 0 : headerActions) \|\|\n searchable\n );\n\n // Selection handlers\n const handleToggleRow = (index: number) => {\n toggleRow(index);\n if (onSelectionChange) {\n const newSelection = new Set(selectedRows);\n if (newSelection.has(index)) {\n newSelection.delete(index);\n } else {\n newSelection.add(index);\n }\n onSelectionChange(Array.from(newSelection));\n }\n };\n\n const handleToggleAll = () => {\n toggleAll();\n if (onSelectionChange) {\n if (isAllSelected) {\n onSelectionChange([]);\n } else {\n const startIndex = (currentPage - 1) * pageSize;\n const allIndices = displayData.map((_, idx) => startIndex + idx);\n onSelectionChange(allIndices);\n }\n }\n };\n\n // Format value based on column configuration\n const formatValue = (value: unknown, column: DataGridColumnDef<T>): string => {\n if (value == null) return '';\n\n switch (column.format) {\n case 'date': {\n const dateValue = value instanceof Date ? value : new Date(value as string \| number);\n return new Intl.DateTimeFormat('en-US', column.formatOptions as Intl.DateTimeFormatOptions).format(dateValue);\n }\n\n case 'currency':\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n ...column.formatOptions\n } as Intl.NumberFormatOptions).format(Number(value));\n\n case 'number':\n return new Intl.NumberFormat('en-US', column.formatOptions as Intl.NumberFormatOptions).format(Number(value));\n\n case 'percent':\n return new Intl.NumberFormat('en-US', {\n style: 'percent',\n ...column.formatOptions\n } as Intl.NumberFormatOptions).format(Number(value));\n\n default:\n return String(value);\n }\n };\n\n const renderCellContent = (value: unknown, column: DataGridColumnDef<T>, row: T, rowIndex: number): ReactNode => {\n const isEmpty = value == null \|\| value === '';\n\n if (isEmpty && column.fallback !== undefined) {\n return column.fallback;\n }\n\n if (column.render) {\n return column.render(value as T[keyof T], row, rowIndex);\n }\n\n if (column.badgeMap) {\n const stringValue = String(value);\n const badgeConfig = column.badgeMap[stringValue] \|\| column.badgeMap[''] \|\| { variant: 'neutral' };\n\n return (\n <Badge variant={badgeConfig.variant \|\| 'neutral'} size={column.componentSize \|\| 'md'}>\n {badgeConfig.label \|\| stringValue}\n </Badge>\n );\n }\n\n if (column.statusDotMap) {\n const stringValue = String(value);\n const dotConfig = column.statusDotMap[stringValue] \|\| column.statusDotMap[''] \|\| { color: 'neutral' };\n const dotColor = dotConfig.color \|\| 'neutral';\n\n // Map color variants to Tailwind background classes\n const dotColorClasses: Record<ColorVariant, string> = {\n primary: 'bg-primary',\n accent: 'bg-accent',\n neutral: 'bg-muted-foreground',\n success: 'bg-success',\n warning: 'bg-warning',\n error: 'bg-error',\n info: 'bg-info'\n };\n\n return (\n <span className=\"inline-flex items-center gap-2 min-w-0\">\n <span className={`size-2 rounded-full shrink-0 ${dotColorClasses[dotColor]}`} />\n <span className=\"truncate\">{dotConfig.label \|\| stringValue}</span>\n </span>\n );\n }\n\n if (column.renderAsBadges) {\n if (Array.isArray(value)) {\n if (value.length === 0 && column.fallback !== undefined) {\n return column.fallback;\n }\n\n return (\n <Stack direction=\"horizontal\" spacing=\"xs\" wrap>\n {value.map((item, idx) => (\n <Badge key={idx} variant={column.badgeVariant \|\| 'neutral'} size={column.componentSize \|\| 'md'}>\n {String(item)}\n </Badge>\n ))}\n </Stack>\n );\n } else {\n return (\n <Badge variant={column.badgeVariant \|\| 'neutral'} size={column.componentSize \|\| 'md'}>\n {String(value)}\n </Badge>\n );\n }\n }\n\n if (column.format) {\n return formatValue(value, column);\n }\n\n return String(value ?? '');\n };\n\n // Render sort indicator\n const renderSortIcon = (columnKey: keyof T) => {\n if (!sortable) return null;\n\n const isSorted = sortConfig?.key === columnKey;\n\n if (!isSorted) {\n return <Icon name=\"selector\" size=\"xs\" color=\"neutral\" />;\n }\n\n if (sortConfig?.direction === 'asc') {\n return <Icon name=\"chevron-up\" size=\"xs\" color=\"primary\" />;\n }\n\n return <Icon name=\"chevron-down\" size=\"xs\" color=\"primary\" />;\n };\n\n // Render actions for a row\n const renderActions = (row: T, actualIndex: number) => {\n if (!actions) return null;\n\n let rowActions: DataGridActionItem<T>[] \| ReactNode;\n\n if (Array.isArray(actions)) {\n rowActions = actions;\n } else {\n const result = actions(row, actualIndex);\n if (Array.isArray(result)) {\n rowActions = result;\n } else {\n return <div data-interactive>{result}</div>;\n }\n }\n\n return (\n <Stack direction=\"horizontal\" spacing=\"sm\" data-interactive>\n {(rowActions as DataGridActionItem<T>[]).map((action, actionIndex) => {\n if (action && typeof action === 'object' && 'onClick' in action) {\n const actionConfig = action as DataGridAction<T>;\n const button = (\n <IconButton\n key={actionIndex}\n icon={actionConfig.icon}\n iconSize={actionConfig.iconSize \|\| 'md'}\n buttonStyle=\"ghost\"\n variant={actionConfig.variant \|\| 'neutral'}\n iconColor={actionConfig.iconColor}\n hoverIcon={actionConfig.hoverIcon}\n ariaLabel={actionConfig.label}\n onClick={() => actionConfig.onClick(row, actualIndex)}\n noPadding\n />\n );\n\n return actionConfig.tooltip ? (\n <Tooltip key={actionIndex} content={actionConfig.tooltip}>\n {button}\n </Tooltip>\n ) : (\n button\n );\n } else {\n return (\n <div key={actionIndex} data-interactive>\n {action as ReactNode}\n </div>\n );\n }\n })}\n </Stack>\n );\n };\n\n // Row padding classes\n const rowPadding = compact ? 'py-2 px-3' : 'py-3 px-4';\n\n // Build grid template columns for desktop layout\n const buildGridTemplateColumns = () => {\n const parts: string[] = [];\n\n // Selection checkbox column - fixed width for consistency across rows\n if (selectable) {\n parts.push('24px');\n }\n\n // Data columns\n visibleColumns.forEach((col) => {\n if (col.width) {\n // Explicit width (Tailwind class won't work in grid-template-columns)\n // Try to extract pixel value or use minmax\n const widthMatch = col.width.match(/(\\d+)px/);\n if (widthMatch) {\n parts.push(`${widthMatch[1]}px`);\n } else {\n parts.push('1fr');\n }\n } else if (col.minWidth && col.maxWidth) {\n // Both min and max - constrained range\n parts.push(`minmax(${col.minWidth}px, ${col.maxWidth}px)`);\n } else if (col.minWidth) {\n // Min only - can grow but not shrink below\n parts.push(`minmax(${col.minWidth}px, 1fr)`);\n } else if (col.maxWidth) {\n // Max only - can shrink but not grow beyond\n parts.push(`minmax(auto, ${col.maxWidth}px)`);\n } else {\n parts.push('1fr');\n }\n });\n\n // Actions column - dynamically sized based on max actions across all rows\n // Allows growing to max-content to accommodate multiple action buttons\n if (actions) {\n parts.push(`minmax(${actionsMinWidth}px, max-content)`);\n }\n\n return parts.join(' ');\n };\n\n const gridTemplateColumns = !isMobile ? buildGridTemplateColumns() : undefined;\n\n // Render a single row\n const renderRow = (row: T, rowIndex: number) => {\n const actualIndex = paginated ? (currentPage - 1) * pageSize + rowIndex : rowIndex;\n const isSelected = isRowSelected(actualIndex);\n const href = rowHref?.(row, actualIndex);\n const hasHref = Boolean(href);\n const hasOnRowClick = Boolean(onRowClick);\n const isClickable = hasHref \|\| hasOnRowClick;\n\n // Row styling - add relative for Link overlay positioning\n const rowClasses = [\n 'relative',\n 'border-b border-border/50',\n striped && rowIndex % 2 === 1 ? 'bg-muted/30' : '',\n hoverable && isClickable ? 'hover:bg-muted/50 transition-colors' : '',\n isSelected ? 'bg-primary/5' : ''\n ]\n .filter(Boolean)\n .join(' ');\n\n // Desktop layout: CSS Grid for consistent column widths\n // Mobile layout: vertical flex\n const layoutClasses = isMobile ? 'flex flex-col gap-3' : 'grid items-center gap-4';\n\n // Grid style for desktop layout\n const rowStyle = !isMobile && gridTemplateColumns ? { gridTemplateColumns } : undefined;\n\n // Props for onRowClick (when no href) - handlers are on the row div\n // Uses isInteractiveElement check to avoid triggering on links/buttons\n const rowClickProps =\n !hasHref && hasOnRowClick\n ? {\n onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n // Don't trigger if clicked on an interactive element (links, buttons, etc.)\n if (isInteractiveElement(e.target as HTMLElement, e.currentTarget)) {\n return;\n }\n onRowClick?.(row, actualIndex);\n },\n onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n onRowClick?.(row, actualIndex);\n }\n },\n role: 'button' as const,\n tabIndex: 0,\n className: 'cursor-pointer'\n }\n : {};\n\n return (\n <div\n key={actualIndex}\n className={`${layoutClasses} ${rowPadding} ${rowClasses} ${rowClickProps.className \|\| ''}`}\n style={rowStyle}\n onClick={rowClickProps.onClick}\n onKeyDown={rowClickProps.onKeyDown}\n role={rowClickProps.role}\n tabIndex={rowClickProps.tabIndex}\n >\n {/* Row link overlay - positioned behind content /}\n {hasHref && href && (\n <Link to={href} className=\"absolute inset-0 z-1\" aria-label={`View details`} tabIndex={0} />\n )}\n\n {/ Selection checkbox - above link layer /}\n {selectable && (\n <div className={`relative z-10 ${isMobile ? '' : 'shrink-0'}`}>\n <Checkbox\n checked={isSelected}\n onChange={() => handleToggleRow(actualIndex)}\n ariaLabel={`Select row ${actualIndex + 1}`}\n />\n </div>\n )}\n\n {/ Data cells - pointer-events-none lets clicks pass through to link layer /}\n {/ Interactive elements inside (links, buttons) keep their default pointer-events /}\n {visibleColumns.map((column) => {\n const value = row[column.key];\n const content = renderCellContent(value, column, row, actualIndex);\n const showLabel = isMobile && column.showLabelOnMobile !== false;\n\n // Alignment\n const alignClass =\n column.align === 'center' ? 'text-center' : column.align === 'right' ? 'text-right' : 'text-left';\n\n // Only disable pointer events when we have a link overlay\n const pointerClass = hasHref\n ? 'pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto [&_input]:pointer-events-auto [&_select]:pointer-events-auto [&_textarea]:pointer-events-auto [&_label]:pointer-events-auto [&_[data-interactive]]:pointer-events-auto'\n : '';\n\n return (\n <div\n key={String(column.key)}\n className={`${alignClass} ${isMobile ? 'flex flex-col gap-0.5' : 'min-w-0 overflow-hidden'} ${pointerClass}`}\n >\n {showLabel && (\n <Text size=\"xs\" variant=\"muted\" className=\"uppercase tracking-wide\">\n {column.label}\n </Text>\n )}\n <div className={column.wrapText ? '' : 'truncate'}>{content}</div>\n </div>\n );\n })}\n\n {/ Actions - above link layer /}\n {actions && (\n <div className={`relative z-10 shrink-0 ${isMobile ? 'flex justify-end pt-1' : 'justify-self-end'}`}>\n {renderActions(row, actualIndex)}\n </div>\n )}\n </div>\n );\n };\n\n return (\n <div ref={containerRef} className={`overflow-hidden ${className}`}>\n {/ Header with title, search, actions /}\n {hasHeader && (\n <div className=\"mb-3\">\n {searchable ? (\n <div className=\"flex flex-col gap-3\">\n {title && <h2 className=\"text-lg font-semibold text-foreground\">{title}</h2>}\n <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:justify-between\">\n <div className=\"flex-1 sm:max-w-md\">\n <InputGroup prefix={<Icon name=\"search\" size=\"sm\" />} className=\"w-full\">\n <Input\n type=\"text\"\n value={searchQuery}\n onChange={(e) => handleSearchChange(e.target.value)}\n placeholder={searchPlaceholder}\n />\n </InputGroup>\n </div>\n\n {Array.isArray(headerActions) && headerActions.length > 0 && (\n <div className=\"flex items-center gap-2 flex-wrap sm:flex-nowrap ml-auto\">\n {headerActions.map((act, idx) => (\n <Button\n key={idx}\n onClick={act.onClick}\n variant={act.variant}\n style={act.style}\n size={act.size}\n className={act.className}\n ariaLabel={act.ariaLabel \|\| (!act.label && act.icon ? 'Action' : undefined)}\n >\n {act.icon ? <Icon name={act.icon} size=\"sm\" /> : null}\n {act.label}\n </Button>\n ))}\n </div>\n )}\n </div>\n </div>\n ) : (\n <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3\">\n <div className=\"flex-1\">\n {title && <h2 className=\"text-lg font-semibold text-foreground\">{title}</h2>}\n </div>\n\n {Array.isArray(headerActions) && headerActions.length > 0 && (\n <div className=\"flex items-center gap-2 flex-wrap sm:flex-nowrap\">\n {headerActions.map((act, idx) => (\n <Button\n key={idx}\n onClick={act.onClick}\n variant={act.variant}\n style={act.style}\n size={act.size}\n className={act.className}\n ariaLabel={act.ariaLabel \|\| (!act.label && act.icon ? 'Action' : undefined)}\n >\n {act.icon ? <Icon name={act.icon} size=\"sm\" /> : null}\n {act.label}\n </Button>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n )}\n\n {/ Empty states /}\n {data.length === 0 ? (\n <div className=\"border border-border rounded-lg\">\n <EmptyState\n title={emptyState.title}\n description={emptyState.description}\n buttonText={emptyState.buttonText}\n onButtonClick={emptyState.onButtonClick}\n />\n </div>\n ) : filteredData.length === 0 && searchQuery.trim() ? (\n <div className=\"border border-border rounded-lg\">\n <EmptyState\n title=\"No results found\"\n description={`No items match \"${searchQuery}\". Try adjusting your search.`}\n />\n </div>\n ) : (\n <>\n {/ Column headers (desktop only) /}\n {!isMobile && (\n <div\n className={`grid items-center gap-4 ${rowPadding} border-b border-border bg-muted/30`}\n style={gridTemplateColumns ? { gridTemplateColumns } : undefined}\n >\n {selectable && (\n <div>\n <Checkbox checked={isAllSelected} onChange={handleToggleAll} ariaLabel=\"Select all rows\" />\n </div>\n )}\n\n {visibleColumns.map((column) => {\n const alignClass =\n column.align === 'center' ? 'text-center' : column.align === 'right' ? 'text-right' : 'text-left';\n\n return (\n <div key={String(column.key)} className={`min-w-0 ${alignClass}`}>\n {column.sortable !== false && sortable ? (\n <button\n onClick={() => handleSort(column.key)}\n className=\"flex items-center gap-1 hover:text-foreground transition-colors font-medium text-sm text-muted-foreground\"\n type=\"button\"\n >\n {column.label}\n {renderSortIcon(column.key)}\n </button>\n ) : (\n <Text size=\"sm\" variant=\"muted\" weight=\"medium\">\n {column.label}\n </Text>\n )}\n </div>\n );\n })}\n\n {actions && (\n <div className=\"justify-self-end\">\n <Text size=\"sm\" variant=\"muted\" weight=\"medium\">\n {actionsLabel}\n </Text>\n </div>\n )}\n </div>\n )}\n\n {/ Select all checkbox (mobile) /}\n {isMobile && selectable && (\n <div className={`flex items-center gap-2 ${rowPadding} border-b border-border`}>\n <Checkbox checked={isAllSelected} onChange={handleToggleAll} ariaLabel=\"Select all rows\" />\n <Text size=\"sm\" variant=\"muted\">\n Select all\n </Text>\n </div>\n )}\n\n {/ Rows /}\n <div className=\"divide-y divide-border/50\">{displayData.map((row, idx) => renderRow(row, idx))}</div>\n\n {/ Pagination controls */}\n {paginated && totalPages > 1 && (\n <div className=\"flex items-center justify-between px-4 py-3 border-t border-border\">\n <div className=\"text-sm text-muted-foreground\">\n Page {currentPage} of {totalPages} ({filteredData.length} {searchQuery.trim() ? 'filtered' : 'total'}{' '}\n rows\n {searchQuery.trim() && data.length !== filteredData.length ? ` of ${data.length}` : ''})\n </div>\n <div className=\"flex gap-2\">\n <Button size=\"sm\" style=\"outline\" onClick={prevPage} disabled={!canPrevPage}>\n Previous\n </Button>\n <Button size=\"sm\" style=\"outline\" onClick={nextPage} disabled={!canNextPage}>\n Next\n </Button>\n </div>\n </div>\n )}\n </>\n )}\n </div>\n );\n}\n\nDataGrid.displayName = 'DataGrid';\n\nexport default DataGrid;\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"data-grid.js","sources":["../../../../src/components/data-display/data-grid/data-grid.tsx"],"sourcesContent":["import { ReactNode, useState, useEffect, useRef } from 'react';\nimport { Icon } from '../../system/icon/icon';\nimport IconButton from '../../forms/button/icon-button';\nimport Input from '../../forms/input/input';\nimport InputGroup from '../../forms/input-group/input-group';\n\nimport Checkbox from '../../forms/checkbox/checkbox';\nimport Button from '../../forms/button/button';\nimport Tooltip from '../../feedback/tooltip/tooltip';\nimport type { ButtonProps } from '../../forms/button/button';\nimport Stack from '../../layout/stack/stack';\nimport Badge from '../badge/badge';\nimport Text from '../../typography/text/text';\nimport { useTable, UseTableOptions } from '../data-table/use-table';\nimport { Size } from '@/theme/size-tokens';\nimport { ColorVariant } from '@/theme/tokens';\nimport EmptyState from '../empty-state/empty-state';\nimport StatusIndicator from '../status-indicator/status-indicator';\nimport { Link } from 'react-router-dom';\n\n/** Interactive element tags that should not trigger onRowClick callback /\nconst INTERACTIVE_TAGS = new Set(['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'LABEL']);\n\n/* Check if an element or any of its ancestors (up to container) is interactive - used for onRowClick only /\nfunction isInteractiveElement(element: HTMLElement \| null, container: HTMLElement \| null): boolean {\n let current = element;\n while (current && current !== container) {\n if (INTERACTIVE_TAGS.has(current.tagName)) return true;\n if (current.getAttribute('role') === 'button') return true;\n current = current.parentElement;\n }\n return false;\n}\n\nexport type DataGridAction<T> = {\n /* Icon name for the action button /\n icon: string;\n /* Size of the icon /\n iconSize?: Size;\n /* Color variant for the icon /\n iconColor?: ColorVariant;\n /* Icon to display on hover (optional) /\n hoverIcon?: string;\n /* Accessible label for the action (shown in tooltip or screen readers) /\n label: string;\n /* Tooltip text to display on hover. If not provided, label will be used for aria-label only. /\n tooltip?: string;\n /* Callback when the action is clicked /\n onClick: (row: T, index: number) => void;\n /* Visual variant for the action button /\n variant?: 'primary' \| 'accent' \| 'neutral' \| 'success' \| 'warning' \| 'error' \| 'info';\n};\n\nexport type DataGridActionItem<T> = DataGridAction<T> \| ReactNode;\n\nexport type DataGridColumnDef<T> = {\n /* Key of the data property to display in this column /\n key: keyof T;\n /* Column header label /\n label: string;\n /* Whether this column can be sorted /\n sortable?: boolean;\n /* CSS width class or value for the column (e.g., 'w-48', '200px', 'flex-1') /\n width?: string;\n /\n Minimum width in pixels for the column. When set:\n * - Column truncates but never shrinks below this width\n * - Column auto-hides if container can't fit it at this width\n * - No need to also set hidePriority (though you can for explicit hide ordering)\n \n @example minWidth: 120 // Hide if email would be squished below 120px\n /\n minWidth?: number;\n /\n Maximum width in pixels for the column. Prevents column from growing too wide.\n * Use for columns like status/role that don't need much space.\n \n @example maxWidth: 100 // Cap role column at 100px\n /\n maxWidth?: number;\n /* Text alignment for cells in this column /\n align?: 'left' \| 'center' \| 'right';\n /* Whether text should wrap instead of truncating (useful for long strings) /\n wrapText?: boolean;\n /* Optional priority for responsive hiding. Lower values hide first when container width shrinks. Columns without hidePriority or minWidth are never hidden. /\n hidePriority?: number;\n /* Whether to show this column's label in mobile/vertical layout (default: true) /\n showLabelOnMobile?: boolean;\n /* Custom render function for cell content (use as escape hatch when config options don't cover your use case) /\n render?: (value: T[keyof T], row: T, index: number) => ReactNode;\n\n // Config-driven rendering options (preferred over custom render)\n /* Pre-built formatter for common data types /\n format?: 'date' \| 'currency' \| 'number' \| 'percent';\n /* Options for Intl formatters (NumberFormat or DateTimeFormat) /\n formatOptions?: Intl.NumberFormatOptions \| Intl.DateTimeFormatOptions;\n /* Map values to badge variants. Unmatched values render with 'neutral' variant. Use '' key to override the default fallback. /\n badgeMap?: {\n [key: string]: { variant?: ColorVariant; label?: string };\n };\n /** Map values to status dot colors. Renders text with a colored dot to the left. Lighter alternative to badges for status indicators. /\n statusDotMap?: {\n [key: string]: { color?: ColorVariant; label?: string };\n };\n /\n Render cell values as badges. When the value is an array, each item is rendered\n * as an individual badge; for scalar values, the value is wrapped in a single badge.\n /\n renderAsBadges?: boolean;\n /* Variant for badge rendering /\n badgeVariant?: ColorVariant;\n /* Size for badge rendering /\n componentSize?: 'sm' \| 'md' \| 'lg';\n /* Fallback value to display when cell value is null, undefined, or empty string /\n fallback?: string;\n};\n\nexport type DataGridProps<T> = {\n /* Array of data objects to display in the grid /\n data: T[];\n /* Column definitions specifying how to render each column /\n columns: DataGridColumnDef<T>[];\n /* Additional CSS classes to apply /\n className?: string;\n\n // Styling options\n /* Whether to apply striped row styling (alternating background) /\n striped?: boolean;\n /* Whether rows have hover effects /\n hoverable?: boolean;\n /* Whether to use compact spacing for dense data /\n compact?: boolean;\n\n // Features\n /* Whether columns can be sorted (can be overridden per column) /\n sortable?: boolean;\n /* Whether to enable client-side pagination /\n paginated?: boolean;\n /* Number of rows per page when pagination is enabled /\n pageSize?: number;\n /* Whether to show checkboxes for row selection /\n selectable?: boolean;\n /* Whether to enable search/filter functionality /\n searchable?: boolean;\n /* Specific keys to search within. If not provided, searches all fields. /\n searchKeys?: (keyof T)[];\n /* Placeholder text for the search input /\n searchPlaceholder?: string;\n /* Callback when search query changes /\n onSearchChange?: (query: string) => void;\n\n // Actions - either array of action configs/components OR function returning actions/render\n /* Action buttons, function returning actions based on row data, or custom render function for the actions column /\n actions?: DataGridActionItem<T>[] \| ((row: T, index: number) => DataGridActionItem<T>[] \| ReactNode);\n /* Label for the actions column header /\n actionsLabel?: string;\n\n // Row link - makes entire row clickable for navigation\n /* Function returning href for row navigation. When provided, entire row becomes a link. /\n rowHref?: (row: T, index: number) => string \| undefined;\n\n // Callbacks\n /* Callback when a row is clicked (if rowHref not provided) /\n onRowClick?: (row: T, index: number) => void;\n /* Callback when row selection changes (provides array of selected row indices) /\n onSelectionChange?: (selectedIndices: number[]) => void;\n\n // Empty state\n emptyState?: {\n /* Message to display when there is no data /\n title?: string;\n /* Description to display when there is no data /\n description?: string;\n /* Text for the button in the empty state /\n buttonText?: string;\n /* Click handler for the button in the empty state /\n onButtonClick?: () => void;\n };\n\n // Initial state\n /* Initial sort configuration /\n initialSort?: { key: keyof T; direction: 'asc' \| 'desc' };\n /* Title displayed above the grid (left side of header) /\n title?: string;\n /* Header actions displayed above the grid (right side of header). /\n headerActions?: HeaderAction[];\n};\n\nexport type HeaderAction = {\n /* Button text; if omitted and `icon` provided, button will be icon-only /\n label?: string;\n /* Icon name to render inside the button (maps to library `Icon`) /\n icon?: string;\n /* Accessible label for screen readers. Required for icon-only buttons (when label is omitted). /\n ariaLabel?: string;\n /* Click handler invoked when the button is clicked /\n onClick?: () => void;\n /* Button variant (maps to Button `variant` prop) /\n variant?: ButtonProps['variant'];\n /* Button style (maps to Button `style` prop) /\n style?: ButtonProps['style'];\n /* Button size (maps to Button `size` prop) /\n size?: ButtonProps['size'];\n /* Additional className forwarded to the Button /\n className?: string;\n};\n\n/* Breakpoint width (in px) below which we switch to vertical/mobile layout /\nconst MOBILE_BREAKPOINT = 640;\n\n/\n DataGrid - Responsive data display component with Vercel-style layout\n \n Features:\n * - Generic typed data and columns (same API as DataTable)\n * - Responsive layout: horizontal rows on desktop, vertical card-like on mobile\n * - Clickable rows via rowHref with interactive elements taking priority\n * - Client-side sorting, pagination, selection, and search\n * - Custom cell rendering with DataGridCell for multi-element stacking\n \n @example\n * ```tsx\n * <DataGrid\n * data={deployments}\n * columns={[\n * {\n * key: 'name',\n * label: 'Deployment',\n * render: (value, row) => (\n * <DataGridCell>\n * <Text weight=\"medium\">{row.name}</Text>\n * <Text size=\"sm\" variant=\"muted\">{row.url}</Text>\n * </DataGridCell>\n * )\n * },\n * { key: 'status', label: 'Status', badgeMap: { ready: { variant: 'success' } } },\n * { key: 'createdAt', label: 'Created', format: 'date' }\n * ]}\n * rowHref={(row) => `/deployments/${row.id}`}\n * hoverable\n * />\n * ```\n /\nfunction DataGrid<T>({\n data,\n columns,\n className = '',\n striped = false,\n hoverable = true,\n compact = false,\n sortable = true,\n paginated = false,\n pageSize = 10,\n selectable = false,\n searchable = false,\n searchKeys,\n searchPlaceholder = 'Search...',\n onSearchChange,\n actions,\n actionsLabel = 'Actions',\n rowHref,\n onRowClick,\n onSelectionChange,\n emptyState = {\n title: 'No data available',\n description: undefined,\n buttonText: undefined,\n onButtonClick: undefined\n },\n headerActions,\n title,\n initialSort\n}: DataGridProps<T>) {\n // Search state\n const [searchQuery, setSearchQuery] = useState('');\n\n // Layout state (desktop vs mobile)\n const [isMobile, setIsMobile] = useState(false);\n\n const handleSearchChange = (value: string) => {\n setSearchQuery(value);\n if (onSearchChange) {\n onSearchChange(value);\n }\n };\n\n // Container ref for responsive behavior\n const containerRef = useRef<HTMLDivElement>(null);\n const [visibleColumns, setVisibleColumns] = useState<DataGridColumnDef<T>[]>(() => columns);\n\n // Calculate minimum width needed for actions column based on max actions in any row\n const calculateActionsMinWidth = (): number => {\n if (!actions) return 0;\n\n let maxActionCount = 0;\n\n if (Array.isArray(actions)) {\n // Static actions - all rows have the same actions\n maxActionCount = actions.length;\n } else {\n // Dynamic actions - need to check all rows\n data.forEach((row, index) => {\n const result = actions(row, index);\n if (Array.isArray(result)) {\n maxActionCount = Math.max(maxActionCount, result.length);\n } else {\n // Custom render - assume it needs reasonable space (equivalent to 2 actions)\n maxActionCount = Math.max(maxActionCount, 2);\n }\n });\n }\n\n if (maxActionCount === 0) {\n // No actions, but we still need some minimum space in case actions appear\n return 60;\n }\n\n // Each action button takes ~36px (icon + button padding)\n // Stack spacing between actions is 8px (spacing=\"sm\")\n // Formula: (actionWidth count) + (gap * (count - 1)) + extraPadding\n const actionWidth = 24;\n const gapWidth = 8;\n const extraPadding = 16; // breathing room\n\n return actionWidth * maxActionCount + gapWidth * Math.max(0, maxActionCount - 1) + extraPadding;\n };\n\n const actionsMinWidth = calculateActionsMinWidth();\n\n // ResizeObserver to handle responsive column hiding and mobile layout\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n\n // Check if any columns have hidePriority or minWidth set (both make columns hideable)\n const hasHideableColumns = columns.some((col) => col.hidePriority !== undefined \|\| col.minWidth !== undefined);\n\n const updateLayout = () => {\n const containerWidth = container.offsetWidth;\n\n // Check if we should switch to mobile layout\n const nowMobile = containerWidth < MOBILE_BREAKPOINT;\n setIsMobile(nowMobile);\n\n // In mobile/vertical layout, show all columns (they stack vertically)\n // Only apply responsive hiding in desktop/horizontal mode\n if (nowMobile \|\| !hasHideableColumns) {\n setVisibleColumns(columns);\n return;\n }\n\n // Columns are hideable if they have hidePriority OR minWidth\n const isHideable = (col: DataGridColumnDef<T>) => col.hidePriority !== undefined \|\| col.minWidth !== undefined;\n\n // Separate columns into hideable and non-hideable\n const hideableColumns = columns\n .map((col, index) => ({ col, originalIndex: index }))\n .filter(({ col }) => isHideable(col))\n .sort((a, b) => {\n // Sort by hidePriority if both have it (lower hides first)\n const aPriority = a.col.hidePriority;\n const bPriority = b.col.hidePriority;\n\n if (aPriority !== undefined && bPriority !== undefined) {\n if (aPriority !== bPriority) return aPriority - bPriority;\n }\n // Columns with explicit hidePriority hide before minWidth-only columns\n if (aPriority !== undefined && bPriority === undefined) return -1;\n if (aPriority === undefined && bPriority !== undefined) return 1;\n\n // For minWidth-only columns, larger minWidth hides first (needs more space)\n const aMin = a.col.minWidth ?? 0;\n const bMin = b.col.minWidth ?? 0;\n if (aMin !== bMin) return bMin - aMin;\n\n // Finally, later columns hide first (preserve leading columns)\n return b.originalIndex - a.originalIndex;\n });\n\n const nonHideableColumns = columns.filter((col) => !isHideable(col));\n\n // Estimate column width - use minWidth if set, otherwise parse width or default\n const estimateColumnWidth = (col: DataGridColumnDef<T>): number => {\n // Use minWidth if explicitly set (this is the minimum space the column needs)\n if (col.minWidth) return col.minWidth;\n\n if (col.width) {\n const match = col.width.match(/(\\d+)/);\n if (match) {\n const num = parseInt(match[1], 10);\n if (col.width.includes('px')) return num;\n return num * 4;\n }\n }\n return 150;\n };\n\n // Calculate horizontal padding (px-3 = 24px total, px-4 = 32px total)\n const horizontalPadding = compact ? 24 : 32;\n // Grid gap is 16px (gap-4) between each column\n const gridGap = 16;\n\n // Start with non-hideable columns\n let currentWidth = nonHideableColumns.reduce((sum, col) => sum + estimateColumnWidth(col), 0);\n let totalColumns = nonHideableColumns.length;\n\n // Account for selection and actions columns\n if (selectable) {\n currentWidth += 48;\n totalColumns += 1;\n }\n if (actions) {\n currentWidth += actionsMinWidth;\n totalColumns += 1;\n }\n\n // Add hideable columns until we run out of space\n const columnsToShow: DataGridColumnDef<T>[] = [...nonHideableColumns];\n\n for (const { col } of hideableColumns) {\n const colWidth = estimateColumnWidth(col);\n const newTotalColumns = totalColumns + 1;\n // Calculate total gaps needed with the new column (N columns = N-1 gaps)\n const totalGaps = Math.max(0, newTotalColumns - 1) * gridGap;\n const totalWidthNeeded = currentWidth + colWidth + totalGaps + horizontalPadding;\n\n if (totalWidthNeeded <= containerWidth) {\n columnsToShow.push(col);\n currentWidth += colWidth;\n totalColumns = newTotalColumns;\n }\n }\n\n // Restore original column order\n const orderedVisibleColumns = columns.filter((col) => columnsToShow.includes(col));\n setVisibleColumns(orderedVisibleColumns);\n };\n\n // Call once on mount\n updateLayout();\n\n // Set up observer\n const observer = new ResizeObserver(() => {\n updateLayout();\n });\n\n observer.observe(container);\n\n return () => {\n observer.disconnect();\n };\n }, [columns, selectable, actions, actionsMinWidth, compact, data]);\n\n // Use table hook for state management\n const effectiveSearchKeys = searchKeys \|\| visibleColumns.map((col) => col.key);\n\n const tableOptions: UseTableOptions<T> = {\n data,\n initialSort,\n pageSize,\n searchQuery,\n searchKeys: effectiveSearchKeys\n };\n\n const {\n currentData,\n sortedData,\n filteredData,\n sortConfig,\n handleSort,\n currentPage,\n totalPages,\n nextPage,\n prevPage,\n canNextPage,\n canPrevPage,\n selectedRows,\n toggleRow,\n toggleAll,\n isRowSelected,\n isAllSelected\n } = useTable(tableOptions);\n\n // Display data (paginated uses currentData, non-paginated uses sortedData)\n const displayData = paginated ? currentData : sortedData;\n\n // Header title and actions\n const hasHeader = Boolean(\n (title && String(title).length > 0) \|\|\n (Array.isArray(headerActions) ? headerActions.length > 0 : headerActions) \|\|\n searchable\n );\n\n // Selection handlers\n const handleToggleRow = (index: number) => {\n toggleRow(index);\n if (onSelectionChange) {\n const newSelection = new Set(selectedRows);\n if (newSelection.has(index)) {\n newSelection.delete(index);\n } else {\n newSelection.add(index);\n }\n onSelectionChange(Array.from(newSelection));\n }\n };\n\n const handleToggleAll = () => {\n toggleAll();\n if (onSelectionChange) {\n if (isAllSelected) {\n onSelectionChange([]);\n } else {\n const startIndex = (currentPage - 1) * pageSize;\n const allIndices = displayData.map((_, idx) => startIndex + idx);\n onSelectionChange(allIndices);\n }\n }\n };\n\n // Format value based on column configuration\n const formatValue = (value: unknown, column: DataGridColumnDef<T>): string => {\n if (value == null) return '';\n\n switch (column.format) {\n case 'date': {\n const dateValue = value instanceof Date ? value : new Date(value as string \| number);\n return new Intl.DateTimeFormat('en-US', column.formatOptions as Intl.DateTimeFormatOptions).format(dateValue);\n }\n\n case 'currency':\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n ...column.formatOptions\n } as Intl.NumberFormatOptions).format(Number(value));\n\n case 'number':\n return new Intl.NumberFormat('en-US', column.formatOptions as Intl.NumberFormatOptions).format(Number(value));\n\n case 'percent':\n return new Intl.NumberFormat('en-US', {\n style: 'percent',\n ...column.formatOptions\n } as Intl.NumberFormatOptions).format(Number(value));\n\n default:\n return String(value);\n }\n };\n\n const renderCellContent = (value: unknown, column: DataGridColumnDef<T>, row: T, rowIndex: number): ReactNode => {\n const isEmpty = value == null \|\| value === '';\n\n if (isEmpty && column.fallback !== undefined) {\n return column.fallback;\n }\n\n if (column.render) {\n return column.render(value as T[keyof T], row, rowIndex);\n }\n\n if (column.badgeMap) {\n const stringValue = String(value);\n const badgeConfig = column.badgeMap[stringValue] \|\| column.badgeMap[''] \|\| { variant: 'neutral' };\n\n return (\n <Badge variant={badgeConfig.variant \|\| 'neutral'} size={column.componentSize \|\| 'md'}>\n {badgeConfig.label \|\| stringValue}\n </Badge>\n );\n }\n\n if (column.statusDotMap) {\n const stringValue = String(value);\n const dotConfig = column.statusDotMap[stringValue] \|\| column.statusDotMap[''] \|\| { color: 'neutral' };\n\n return <StatusIndicator variant={dotConfig.color \|\| 'neutral'}>{dotConfig.label \|\| stringValue}</StatusIndicator>;\n }\n\n if (column.renderAsBadges) {\n if (Array.isArray(value)) {\n if (value.length === 0 && column.fallback !== undefined) {\n return column.fallback;\n }\n\n return (\n <Stack direction=\"horizontal\" spacing=\"xs\" wrap>\n {value.map((item, idx) => (\n <Badge key={idx} variant={column.badgeVariant \|\| 'neutral'} size={column.componentSize \|\| 'md'}>\n {String(item)}\n </Badge>\n ))}\n </Stack>\n );\n } else {\n return (\n <Badge variant={column.badgeVariant \|\| 'neutral'} size={column.componentSize \|\| 'md'}>\n {String(value)}\n </Badge>\n );\n }\n }\n\n if (column.format) {\n return formatValue(value, column);\n }\n\n return String(value ?? '');\n };\n\n // Render sort indicator\n const renderSortIcon = (columnKey: keyof T) => {\n if (!sortable) return null;\n\n const isSorted = sortConfig?.key === columnKey;\n\n if (!isSorted) {\n return <Icon name=\"selector\" size=\"xs\" color=\"neutral\" />;\n }\n\n if (sortConfig?.direction === 'asc') {\n return <Icon name=\"chevron-up\" size=\"xs\" color=\"primary\" />;\n }\n\n return <Icon name=\"chevron-down\" size=\"xs\" color=\"primary\" />;\n };\n\n // Render actions for a row\n const renderActions = (row: T, actualIndex: number) => {\n if (!actions) return null;\n\n let rowActions: DataGridActionItem<T>[] \| ReactNode;\n\n if (Array.isArray(actions)) {\n rowActions = actions;\n } else {\n const result = actions(row, actualIndex);\n if (Array.isArray(result)) {\n rowActions = result;\n } else {\n return <div data-interactive>{result}</div>;\n }\n }\n\n return (\n <Stack direction=\"horizontal\" spacing=\"sm\" data-interactive>\n {(rowActions as DataGridActionItem<T>[]).map((action, actionIndex) => {\n if (action && typeof action === 'object' && 'onClick' in action) {\n const actionConfig = action as DataGridAction<T>;\n const button = (\n <IconButton\n key={actionIndex}\n icon={actionConfig.icon}\n iconSize={actionConfig.iconSize \|\| 'md'}\n buttonStyle=\"ghost\"\n variant={actionConfig.variant \|\| 'neutral'}\n iconColor={actionConfig.iconColor}\n hoverIcon={actionConfig.hoverIcon}\n ariaLabel={actionConfig.label}\n onClick={() => actionConfig.onClick(row, actualIndex)}\n noPadding\n />\n );\n\n return actionConfig.tooltip ? (\n <Tooltip key={actionIndex} content={actionConfig.tooltip}>\n {button}\n </Tooltip>\n ) : (\n button\n );\n } else {\n return (\n <div key={actionIndex} data-interactive>\n {action as ReactNode}\n </div>\n );\n }\n })}\n </Stack>\n );\n };\n\n // Row padding classes\n const rowPadding = compact ? 'py-2 px-3' : 'py-3 px-4';\n\n // Build grid template columns for desktop layout\n const buildGridTemplateColumns = () => {\n const parts: string[] = [];\n\n // Selection checkbox column - fixed width for consistency across rows\n if (selectable) {\n parts.push('24px');\n }\n\n // Data columns\n visibleColumns.forEach((col) => {\n if (col.width) {\n // Explicit width (Tailwind class won't work in grid-template-columns)\n // Try to extract pixel value or use minmax\n const widthMatch = col.width.match(/(\\d+)px/);\n if (widthMatch) {\n parts.push(`${widthMatch[1]}px`);\n } else {\n parts.push('1fr');\n }\n } else if (col.minWidth && col.maxWidth) {\n // Both min and max - constrained range\n parts.push(`minmax(${col.minWidth}px, ${col.maxWidth}px)`);\n } else if (col.minWidth) {\n // Min only - can grow but not shrink below\n parts.push(`minmax(${col.minWidth}px, 1fr)`);\n } else if (col.maxWidth) {\n // Max only - can shrink but not grow beyond\n parts.push(`minmax(auto, ${col.maxWidth}px)`);\n } else {\n parts.push('1fr');\n }\n });\n\n // Actions column - dynamically sized based on max actions across all rows\n // Allows growing to max-content to accommodate multiple action buttons\n if (actions) {\n parts.push(`minmax(${actionsMinWidth}px, max-content)`);\n }\n\n return parts.join(' ');\n };\n\n const gridTemplateColumns = !isMobile ? buildGridTemplateColumns() : undefined;\n\n // Render a single row\n const renderRow = (row: T, rowIndex: number) => {\n const actualIndex = paginated ? (currentPage - 1) * pageSize + rowIndex : rowIndex;\n const isSelected = isRowSelected(actualIndex);\n const href = rowHref?.(row, actualIndex);\n const hasHref = Boolean(href);\n const hasOnRowClick = Boolean(onRowClick);\n const isClickable = hasHref \|\| hasOnRowClick;\n\n // Row styling - add relative for Link overlay positioning\n const rowClasses = [\n 'relative',\n 'border-b border-border/50',\n striped && rowIndex % 2 === 1 ? 'bg-muted/30' : '',\n hoverable && isClickable ? 'hover:bg-muted/50 transition-colors' : '',\n isSelected ? 'bg-primary/5' : ''\n ]\n .filter(Boolean)\n .join(' ');\n\n // Desktop layout: CSS Grid for consistent column widths\n // Mobile layout: vertical flex\n const layoutClasses = isMobile ? 'flex flex-col gap-3' : 'grid items-center gap-4';\n\n // Grid style for desktop layout\n const rowStyle = !isMobile && gridTemplateColumns ? { gridTemplateColumns } : undefined;\n\n // Props for onRowClick (when no href) - handlers are on the row div\n // Uses isInteractiveElement check to avoid triggering on links/buttons\n const rowClickProps =\n !hasHref && hasOnRowClick\n ? {\n onClick: (e: React.MouseEvent<HTMLDivElement>) => {\n // Don't trigger if clicked on an interactive element (links, buttons, etc.)\n if (isInteractiveElement(e.target as HTMLElement, e.currentTarget)) {\n return;\n }\n onRowClick?.(row, actualIndex);\n },\n onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n onRowClick?.(row, actualIndex);\n }\n },\n role: 'button' as const,\n tabIndex: 0,\n className: 'cursor-pointer'\n }\n : {};\n\n return (\n <div\n key={actualIndex}\n className={`${layoutClasses} ${rowPadding} ${rowClasses} ${rowClickProps.className \|\| ''}`}\n style={rowStyle}\n onClick={rowClickProps.onClick}\n onKeyDown={rowClickProps.onKeyDown}\n role={rowClickProps.role}\n tabIndex={rowClickProps.tabIndex}\n >\n {/* Row link overlay - positioned behind content /}\n {hasHref && href && (\n <Link to={href} className=\"absolute inset-0 z-1\" aria-label={`View details`} tabIndex={0} />\n )}\n\n {/ Selection checkbox - above link layer /}\n {selectable && (\n <div className={`relative z-10 ${isMobile ? '' : 'shrink-0'}`}>\n <Checkbox\n checked={isSelected}\n onChange={() => handleToggleRow(actualIndex)}\n ariaLabel={`Select row ${actualIndex + 1}`}\n />\n </div>\n )}\n\n {/ Data cells - pointer-events-none lets clicks pass through to link layer /}\n {/ Interactive elements inside (links, buttons) keep their default pointer-events /}\n {visibleColumns.map((column) => {\n const value = row[column.key];\n const content = renderCellContent(value, column, row, actualIndex);\n const showLabel = isMobile && column.showLabelOnMobile !== false;\n\n // Alignment\n const alignClass =\n column.align === 'center' ? 'text-center' : column.align === 'right' ? 'text-right' : 'text-left';\n\n // Only disable pointer events when we have a link overlay\n const pointerClass = hasHref\n ? 'pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto [&_input]:pointer-events-auto [&_select]:pointer-events-auto [&_textarea]:pointer-events-auto [&_label]:pointer-events-auto [&_[data-interactive]]:pointer-events-auto'\n : '';\n\n return (\n <div\n key={String(column.key)}\n className={`${alignClass} ${isMobile ? 'flex flex-col gap-0.5' : 'min-w-0 overflow-hidden'} ${pointerClass}`}\n >\n {showLabel && (\n <Text size=\"xs\" variant=\"muted\" className=\"uppercase tracking-wide\">\n {column.label}\n </Text>\n )}\n <div className={column.wrapText ? '' : 'truncate'}>{content}</div>\n </div>\n );\n })}\n\n {/ Actions - above link layer /}\n {actions && (\n <div className={`relative z-10 shrink-0 ${isMobile ? 'flex justify-end pt-1' : 'justify-self-end'}`}>\n {renderActions(row, actualIndex)}\n </div>\n )}\n </div>\n );\n };\n\n return (\n <div ref={containerRef} className={`overflow-hidden ${className}`}>\n {/ Header with title, search, actions /}\n {hasHeader && (\n <div className=\"mb-3\">\n {searchable ? (\n <div className=\"flex flex-col gap-3\">\n {title && <h2 className=\"text-lg font-semibold text-foreground\">{title}</h2>}\n <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:justify-between\">\n <div className=\"flex-1 sm:max-w-md\">\n <InputGroup prefix={<Icon name=\"search\" size=\"sm\" />} className=\"w-full\">\n <Input\n type=\"text\"\n value={searchQuery}\n onChange={(e) => handleSearchChange(e.target.value)}\n placeholder={searchPlaceholder}\n />\n </InputGroup>\n </div>\n\n {Array.isArray(headerActions) && headerActions.length > 0 && (\n <div className=\"flex items-center gap-2 flex-wrap sm:flex-nowrap ml-auto\">\n {headerActions.map((act, idx) => (\n <Button\n key={idx}\n onClick={act.onClick}\n variant={act.variant}\n style={act.style}\n size={act.size}\n className={act.className}\n ariaLabel={act.ariaLabel \|\| (!act.label && act.icon ? 'Action' : undefined)}\n >\n {act.icon ? <Icon name={act.icon} size=\"sm\" /> : null}\n {act.label}\n </Button>\n ))}\n </div>\n )}\n </div>\n </div>\n ) : (\n <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3\">\n <div className=\"flex-1\">\n {title && <h2 className=\"text-lg font-semibold text-foreground\">{title}</h2>}\n </div>\n\n {Array.isArray(headerActions) && headerActions.length > 0 && (\n <div className=\"flex items-center gap-2 flex-wrap sm:flex-nowrap\">\n {headerActions.map((act, idx) => (\n <Button\n key={idx}\n onClick={act.onClick}\n variant={act.variant}\n style={act.style}\n size={act.size}\n className={act.className}\n ariaLabel={act.ariaLabel \|\| (!act.label && act.icon ? 'Action' : undefined)}\n >\n {act.icon ? <Icon name={act.icon} size=\"sm\" /> : null}\n {act.label}\n </Button>\n ))}\n </div>\n )}\n </div>\n )}\n </div>\n )}\n\n {/ Empty states /}\n {data.length === 0 ? (\n <div className=\"border border-border rounded-lg\">\n <EmptyState\n title={emptyState.title}\n description={emptyState.description}\n buttonText={emptyState.buttonText}\n onButtonClick={emptyState.onButtonClick}\n />\n </div>\n ) : filteredData.length === 0 && searchQuery.trim() ? (\n <div className=\"border border-border rounded-lg\">\n <EmptyState\n title=\"No results found\"\n description={`No items match \"${searchQuery}\". Try adjusting your search.`}\n />\n </div>\n ) : (\n <>\n {/ Column headers (desktop only) /}\n {!isMobile && (\n <div\n className={`grid items-center gap-4 ${rowPadding} border-b border-border bg-muted/30`}\n style={gridTemplateColumns ? { gridTemplateColumns } : undefined}\n >\n {selectable && (\n <div>\n <Checkbox checked={isAllSelected} onChange={handleToggleAll} ariaLabel=\"Select all rows\" />\n </div>\n )}\n\n {visibleColumns.map((column) => {\n const alignClass =\n column.align === 'center' ? 'text-center' : column.align === 'right' ? 'text-right' : 'text-left';\n\n return (\n <div key={String(column.key)} className={`min-w-0 ${alignClass}`}>\n {column.sortable !== false && sortable ? (\n <button\n onClick={() => handleSort(column.key)}\n className=\"flex items-center gap-1 hover:text-foreground transition-colors font-medium text-sm text-muted-foreground\"\n type=\"button\"\n >\n {column.label}\n {renderSortIcon(column.key)}\n </button>\n ) : (\n <Text size=\"sm\" variant=\"muted\" weight=\"medium\">\n {column.label}\n </Text>\n )}\n </div>\n );\n })}\n\n {actions && (\n <div className=\"justify-self-end\">\n <Text size=\"sm\" variant=\"muted\" weight=\"medium\">\n {actionsLabel}\n </Text>\n </div>\n )}\n </div>\n )}\n\n {/ Select all checkbox (mobile) /}\n {isMobile && selectable && (\n <div className={`flex items-center gap-2 ${rowPadding} border-b border-border`}>\n <Checkbox checked={isAllSelected} onChange={handleToggleAll} ariaLabel=\"Select all rows\" />\n <Text size=\"sm\" variant=\"muted\">\n Select all\n </Text>\n </div>\n )}\n\n {/ Rows /}\n <div className=\"divide-y divide-border/50\">{displayData.map((row, idx) => renderRow(row, idx))}</div>\n\n {/ Pagination controls */}\n {paginated && totalPages > 1 && (\n <div className=\"flex items-center justify-between px-4 py-3 border-t border-border\">\n <div className=\"text-sm text-muted-foreground\">\n Page {currentPage} of {totalPages} ({filteredData.length} {searchQuery.trim() ? 'filtered' : 'total'}{' '}\n rows\n {searchQuery.trim() && data.length !== filteredData.length ? ` of ${data.length}` : ''})\n </div>\n <div className=\"flex gap-2\">\n <Button size=\"sm\" style=\"outline\" onClick={prevPage} disabled={!canPrevPage}>\n Previous\n </Button>\n <Button size=\"sm\" style=\"outline\" onClick={nextPage} disabled={!canNextPage}>\n Next\n </Button>\n </div>\n </div>\n )}\n </>\n )}\n </div>\n );\n}\n\nDataGrid.displayName = 'DataGrid';\n\nexport default DataGrid;\n"],"names":[],"mappings":"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"}

package/dist/components/data-display/status-indicator/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export { default, default as StatusIndicator } from './status-indicator';
+export type { StatusIndicatorProps } from './status-indicator';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-display/status-indicator/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/status-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACzE,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/data-display/status-indicator/status-indicator.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { ColorVariant } from '../../../theme/tokens';
+export type StatusIndicatorProps = HTMLAttributes<HTMLSpanElement> & {
+    /** The color variant for the status dot */
+    variant?: ColorVariant;
+    /** The text or content to display next to the indicator dot */
+    children: ReactNode;
+    /** Optional CSS classes to apply to the container */
+    className?: string;
+    /** Size of the status dot. Defaults to 'md' */
+    size?: 'sm' | 'md' | 'lg';
+};
+/**
+ * StatusIndicator displays a colored dot with text, commonly used for
+ * displaying status information like "Active", "Pending", "Inactive", etc.
+ *
+ * @example
+ * <StatusIndicator variant="success">Active</StatusIndicator>
+ * <StatusIndicator variant="warning">Pending</StatusIndicator>
+ * <StatusIndicator variant="error">Inactive</StatusIndicator>
+ */
+export default function StatusIndicator({ variant, children, className, size, ...rest }: StatusIndicatorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=status-indicator.d.ts.map

package/dist/components/data-display/status-indicator/status-indicator.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"status-indicator.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/status-indicator/status-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,eAAe,CAAC,GAAG;IACnE,2CAA2C;IAC3C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAmB,EACnB,QAAQ,EACR,SAAc,EACd,IAAW,EACX,GAAG,IAAI,EACR,EAAE,oBAAoB,2CAyBtB"}

package/dist/components/data-display/status-indicator/status-indicator.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function StatusIndicator({
+  variant = "neutral",
+  children,
+  className = "",
+  size = "md",
+  ...rest
+}) {
+  const dotColorClasses = {
+    primary: "bg-primary",
+    accent: "bg-accent",
+    neutral: "bg-muted-foreground",
+    success: "bg-success",
+    warning: "bg-warning",
+    error: "bg-error",
+    info: "bg-info"
+  };
+  const dotSizeClasses = {
+    sm: "size-1.5",
+    md: "size-2",
+    lg: "size-2.5"
+  };
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-2 min-w-0 ${className}`, ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: `${dotSizeClasses[size]} rounded-full shrink-0 ${dotColorClasses[variant]}` }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children })
+  ] });
+}
+export {
+  StatusIndicator as default
+};
+//# sourceMappingURL=status-indicator.js.map

package/dist/components/data-display/status-indicator/status-indicator.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"status-indicator.js","sources":["../../../../src/components/data-display/status-indicator/status-indicator.tsx"],"sourcesContent":["import { ReactNode, HTMLAttributes } from 'react';\nimport { ColorVariant } from '@/theme/tokens';\n\nexport type StatusIndicatorProps = HTMLAttributes<HTMLSpanElement> & {\n /** The color variant for the status dot */\n variant?: ColorVariant;\n /** The text or content to display next to the indicator dot */\n children: ReactNode;\n /** Optional CSS classes to apply to the container */\n className?: string;\n /** Size of the status dot. Defaults to 'md' */\n size?: 'sm' | 'md' | 'lg';\n};\n\n/**\n * StatusIndicator displays a colored dot with text, commonly used for\n * displaying status information like \"Active\", \"Pending\", \"Inactive\", etc.\n *\n * @example\n * <StatusIndicator variant=\"success\">Active</StatusIndicator>\n * <StatusIndicator variant=\"warning\">Pending</StatusIndicator>\n * <StatusIndicator variant=\"error\">Inactive</StatusIndicator>\n */\nexport default function StatusIndicator({\n variant = 'neutral',\n children,\n className = '',\n size = 'md',\n ...rest\n}: StatusIndicatorProps) {\n // Map color variants to Tailwind background classes\n const dotColorClasses: Record<ColorVariant, string> = {\n primary: 'bg-primary',\n accent: 'bg-accent',\n neutral: 'bg-muted-foreground',\n success: 'bg-success',\n warning: 'bg-warning',\n error: 'bg-error',\n info: 'bg-info'\n };\n\n // Map size to Tailwind size classes\n const dotSizeClasses = {\n sm: 'size-1.5',\n md: 'size-2',\n lg: 'size-2.5'\n };\n\n return (\n \n \n {children}\n \n );\n}\n"],"names":[],"mappings":";AAuBA,SAAwB,gBAAgB;AAAA,EACtC,UAAU;AAAA,EACV;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,GAAG;AACL,GAAyB;AAEvB,QAAM,kBAAgD;AAAA,IACpD,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAIR,QAAM,iBAAiB;AAAA,IACrB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAGN,8BACG,QAAA,EAAK,WAAW,0CAA0C,SAAS,IAAK,GAAG,MAC1E,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,GAAG,eAAe,IAAI,CAAC,0BAA0B,gBAAgB,OAAO,CAAC,GAAA,CAAI;AAAA,IAC9F,oBAAC,QAAA,EAAK,WAAU,YAAY,SAAA,CAAS;AAAA,EAAA,GACvC;AAEJ;"}

package/dist/components/forms/checkbox/checkbox.js CHANGED Viewed

@@ -28,7 +28,7 @@ function Checkbox({
       "aria-describedby": ariaDescribedby,
       id,
       name,
-      className: `h-5 w-5 sm:h-4 sm:w-4 rounded border-2 bg-background text-primary-foreground transition-all duration-200 ease-in-out focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 checked:bg-primary checked:border-primary checked:hover:bg-primary/90 hover:border-primary/50 hover:shadow-sm cursor-pointer accent-primary ${validationClasses[validationState]} ${className}`
+      className: `h-5 w-5 sm:h-4 sm:w-4 rounded border-2 bg-background text-primary-foreground transition-all duration-200 ease-in-out focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 checked:bg-primary checked:border-primary checked:hover:bg-primary/90 hover:border-primary/50 hover:shadow-sm cursor-pointer accent-primary ${validationClasses[validationState]} ${className}`
     }
   );
 }

package/dist/components/forms/checkbox/checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sources":["../../../../src/components/forms/checkbox/checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { ValidationState } from '../../../theme/size-tokens';\n\nexport type CheckboxProps = {\n /** Checked state (controlled) /\n checked?: boolean;\n /* Change event handler for controlled checkbox /\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /* Disables checkbox interaction and applies disabled styling /\n disabled?: boolean;\n /* Additional CSS classes applied to the checkbox /\n className?: string;\n /* Accessible label for screen readers /\n ariaLabel?: string;\n /* HTML id attribute for the checkbox /\n id?: string;\n /* HTML name attribute for form submission /\n name?: string;\n /* Visual validation state affecting border and focus ring color /\n validationState?: ValidationState;\n /* Associates the checkbox with descriptive text (e.g., helper or error messages) /\n 'aria-describedby'?: string;\n};\n\n/\n Accessible Checkbox component\n */\nfunction Checkbox({\n checked,\n onChange,\n disabled = false,\n className = '',\n ariaLabel,\n id,\n name,\n validationState = 'neutral',\n 'aria-describedby': ariaDescribedby\n}: Readonly<CheckboxProps>) {\n const validationClasses = {\n neutral: 'border-input focus:ring-ring',\n error: 'border-error focus:ring-error',\n success: 'border-success focus:ring-success',\n warning: 'border-warning focus:ring-warning'\n };\n\n return (\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-invalid={validationState === 'error'}\n aria-describedby={ariaDescribedby}\n id={id}\n name={name}\n className={`h-5 w-5 sm:h-4 sm:w-4 rounded border-2 bg-background text-primary-foreground transition-all duration-200 ease-in-out focus:~~outline~~-~~none~~ disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 checked:bg-primary checked:border-primary checked:hover:bg-primary/90 hover:border-primary/50 hover:shadow-sm cursor-pointer accent-primary ${validationClasses[validationState]} ${className}`}\n />\n );\n}\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":[],"mappings":";AA2BA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,oBAAoB;AACtB,GAA4B;AAC1B,QAAM,oBAAoB;AAAA,IACxB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAGX,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,gBAAc,oBAAoB;AAAA,MAClC,oBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,WAAW,~~4VAA4V~~,kBAAkB,eAAe,CAAC,IAAI,SAAS;AAAA,IAAA;AAAA,EAAA;~~AAG5Z~~;AAEA,SAAS,cAAc;"}
1	+ {"version":3,"file":"checkbox.js","sources":["../../../../src/components/forms/checkbox/checkbox.tsx"],"sourcesContent":["import React from 'react';\nimport { ValidationState } from '../../../theme/size-tokens';\n\nexport type CheckboxProps = {\n /** Checked state (controlled) /\n checked?: boolean;\n /* Change event handler for controlled checkbox /\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n /* Disables checkbox interaction and applies disabled styling /\n disabled?: boolean;\n /* Additional CSS classes applied to the checkbox /\n className?: string;\n /* Accessible label for screen readers /\n ariaLabel?: string;\n /* HTML id attribute for the checkbox /\n id?: string;\n /* HTML name attribute for form submission /\n name?: string;\n /* Visual validation state affecting border and focus ring color /\n validationState?: ValidationState;\n /* Associates the checkbox with descriptive text (e.g., helper or error messages) /\n 'aria-describedby'?: string;\n};\n\n/\n Accessible Checkbox component\n */\nfunction Checkbox({\n checked,\n onChange,\n disabled = false,\n className = '',\n ariaLabel,\n id,\n name,\n validationState = 'neutral',\n 'aria-describedby': ariaDescribedby\n}: Readonly<CheckboxProps>) {\n const validationClasses = {\n neutral: 'border-input focus:ring-ring',\n error: 'border-error focus:ring-error',\n success: 'border-success focus:ring-success',\n warning: 'border-warning focus:ring-warning'\n };\n\n return (\n <input\n type=\"checkbox\"\n checked={checked}\n onChange={onChange}\n disabled={disabled}\n aria-label={ariaLabel}\n aria-invalid={validationState === 'error'}\n aria-describedby={ariaDescribedby}\n id={id}\n name={name}\n className={`h-5 w-5 sm:h-4 sm:w-4 rounded border-2 bg-background text-primary-foreground transition-all duration-200 ease-in-out focus:ring-primary focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50 checked:bg-primary checked:border-primary checked:hover:bg-primary/90 hover:border-primary/50 hover:shadow-sm cursor-pointer accent-primary ${validationClasses[validationState]} ${className}`}\n />\n );\n}\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":[],"mappings":";AA2BA,SAAS,SAAS;AAAA,EAChB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,oBAAoB;AACtB,GAA4B;AAC1B,QAAM,oBAAoB;AAAA,IACxB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAGX,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,gBAAc,oBAAoB;AAAA,MAClC,oBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,WAAW,gXAAgX,kBAAkB,eAAe,CAAC,IAAI,SAAS;AAAA,IAAA;AAAA,EAAA;AAGhb;AAEA,SAAS,cAAc;"}

package/dist/components/forms/form-grid/form-grid-row.d.ts ADDED Viewed

@@ -0,0 +1,44 @@
+import { FormGridColumn, FormGridRowData } from './form-grid';
+import { InteractiveSize, ValidationState } from '../../../theme/size-tokens';
+export type FormGridRowProps = {
+    /** Row data */
+    row: FormGridRowData;
+    /** Column definitions */
+    columns: FormGridColumn[];
+    /** Current nesting depth (0 = root) */
+    depth: number;
+    /** Maximum allowed nesting depth */
+    maxDepth: number;
+    /** Whether in mobile layout mode */
+    isMobile: boolean;
+    /** Size variant for form controls */
+    size: InteractiveSize;
+    /** Whether sub-rows are allowed (manual add button) */
+    allowSubRows: boolean;
+    /** Auto sub-row callback (when provided, sub-rows are auto-managed, no manual button) */
+    autoSubRow?: (row: FormGridRowData) => boolean;
+    /** Whether the row is disabled */
+    disabled: boolean;
+    /** Label for add sub-row button */
+    addSubRowLabel: string;
+    /** Callback when a field value changes */
+    onValueChange: (rowId: string, key: string, value: unknown) => void;
+    /** Callback to add a sub-row */
+    onAddSubRow: (parentId: string) => void;
+    /** Callback to remove this row */
+    onRemove: (id: string) => void;
+    /** Whether this row can be removed */
+    canRemove: boolean;
+    /** Validation states for fields */
+    validationStates?: Record<string, ValidationState>;
+};
+/**
+ * FormGridRow - Recursive row component for FormGrid
+ * Handles rendering of field controls and nested sub-rows
+ */
+declare function FormGridRow({ row, columns, depth, maxDepth, isMobile, size, allowSubRows, autoSubRow, disabled, addSubRowLabel, onValueChange, onAddSubRow, onRemove, canRemove, validationStates }: Readonly<FormGridRowProps>): import("react/jsx-runtime").JSX.Element;
+declare namespace FormGridRow {
+    var displayName: string;
+}
+export default FormGridRow;
+//# sourceMappingURL=form-grid-row.d.ts.map

package/dist/components/forms/form-grid/form-grid-row.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"form-grid-row.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-grid/form-grid-row.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAInF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,eAAe;IACf,GAAG,EAAE,eAAe,CAAC;IACrB,yBAAyB;IACzB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,IAAI,EAAE,eAAe,CAAC;IACtB,uDAAuD;IACvD,YAAY,EAAE,OAAO,CAAC;IACtB,yFAAyF;IACzF,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,OAAO,CAAC;IAC/C,kCAAkC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,cAAc,EAAE,MAAM,CAAC;IACvB,0CAA0C;IAC1C,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpE,gCAAgC;IAChC,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,kCAAkC;IAClC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,sCAAsC;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;CACpD,CAAC;AAmDF;;;GAGG;AACH,iBAAS,WAAW,CAAC,EACnB,GAAG,EACH,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,cAAc,EACd,aAAa,EACb,WAAW,EACX,QAAQ,EACR,SAAS,EACT,gBAAqB,EACtB,EAAE,QAAQ,CAAC,gBAAgB,CAAC,2CAmN5B;kBAnOQ,WAAW;;;AAuOpB,eAAe,WAAW,CAAC"}