@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/components/data-display/data-table/data-table.js

@@ -0,0 +1,404 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Icon } from "../../system/icon/icon.js";
+import IconButton from "../../forms/button/icon-button.js";
+import Input from "../../forms/input/input.js";
+import InputGroup from "../../forms/input-group/input-group.js";
+import { Table, TableHeader, TableRow, TableHeadCell, TableBody, TableCell } from "../table/table.js";
+import Checkbox from "../../forms/checkbox/checkbox.js";
+import Button from "../../forms/button/button.js";
+import Tooltip from "../../feedback/tooltip/tooltip.js";
+import Stack from "../../layout/stack/stack.js";
+import Badge from "../badge/badge.js";
+import useTable from "./use-table.js";
+import EmptyState from "../empty-state/empty-state.js";
+function DataTable({
+  data,
+  columns,
+  className = "",
+  striped = true,
+  bordered = false,
+  hoverable = true,
+  compact = false,
+  stickyHeader = false,
+  sortable = true,
+  paginated = false,
+  pageSize = 10,
+  selectable = false,
+  searchable = false,
+  searchKeys,
+  searchPlaceholder = "Search...",
+  onSearchChange,
+  actions,
+  actionsLabel = "Actions",
+  actionsWidth = "w-32",
+  actionsJustify = "end",
+  onRowClick,
+  onSelectionChange,
+  emptyState = {
+    title: "No data available",
+    description: void 0,
+    buttonText: void 0,
+    onButtonClick: void 0
+  },
+  headerActions,
+  title,
+  initialSort
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const handleSearchChange = (value) => {
+    setSearchQuery(value);
+    if (onSearchChange) {
+      onSearchChange(value);
+    }
+  };
+  const tableContainerRef = useRef(null);
+  const [visibleColumns, setVisibleColumns] = useState(() => columns);
+  useEffect(() => {
+    const container = tableContainerRef.current;
+    if (!container) return;
+    const hasHideableColumns = columns.some((col) => col.hidePriority !== void 0);
+    const updateVisibleColumns = () => {
+      if (!hasHideableColumns) {
+        setVisibleColumns(columns);
+        return;
+      }
+      const containerWidth = container.offsetWidth;
+      const hideableColumns = columns.map((col, index) => ({ col, originalIndex: index })).filter(({ col }) => col.hidePriority !== void 0).sort((a, b) => {
+        if (a.col.hidePriority !== b.col.hidePriority) {
+          return (a.col.hidePriority ?? 0) - (b.col.hidePriority ?? 0);
+        }
+        return a.originalIndex - b.originalIndex;
+      });
+      const nonHideableColumns = columns.filter((col) => col.hidePriority === void 0);
+      const estimateColumnWidth = (col) => {
+        if (col.width) {
+          const match = col.width.match(/(\d+)/);
+          if (match) {
+            const num = parseInt(match[1], 10);
+            if (col.width.includes("px")) return num;
+            return num * 4;
+          }
+        }
+        return 150;
+      };
+      let currentWidth = nonHideableColumns.reduce((sum, col) => sum + estimateColumnWidth(col), 0);
+      if (selectable) currentWidth += 48;
+      if (actions) currentWidth += 128;
+      const columnsToShow = [...nonHideableColumns];
+      for (const { col } of hideableColumns) {
+        const colWidth = estimateColumnWidth(col);
+        if (currentWidth + colWidth <= containerWidth - 32) {
+          columnsToShow.push(col);
+          currentWidth += colWidth;
+        }
+      }
+      const orderedVisibleColumns = columns.filter((col) => columnsToShow.includes(col));
+      setVisibleColumns(orderedVisibleColumns);
+    };
+    updateVisibleColumns();
+    const observer = new ResizeObserver(() => {
+      updateVisibleColumns();
+    });
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+    };
+  }, [columns, selectable, actions]);
+  const effectiveSearchKeys = searchKeys || visibleColumns.map((col) => col.key);
+  const tableOptions = {
+    data,
+    initialSort,
+    pageSize,
+    searchQuery,
+    searchKeys: effectiveSearchKeys
+  };
+  const {
+    currentData,
+    sortedData,
+    filteredData,
+    sortConfig,
+    handleSort,
+    currentPage,
+    totalPages,
+    nextPage,
+    prevPage,
+    canNextPage,
+    canPrevPage,
+    selectedRows,
+    toggleRow,
+    toggleAll,
+    isRowSelected,
+    isAllSelected
+  } = useTable(tableOptions);
+  const displayData = paginated ? currentData : sortedData;
+  const hasHeader = Boolean(title && String(title).length > 0 || headerActions || searchable);
+  const handleToggleRow = (index) => {
+    toggleRow(index);
+    if (onSelectionChange) {
+      const newSelection = new Set(selectedRows);
+      if (newSelection.has(index)) {
+        newSelection.delete(index);
+      } else {
+        newSelection.add(index);
+      }
+      onSelectionChange(Array.from(newSelection));
+    }
+  };
+  const handleToggleAll = () => {
+    toggleAll();
+    if (onSelectionChange) {
+      if (isAllSelected) {
+        onSelectionChange([]);
+      } else {
+        const startIndex = (currentPage - 1) * pageSize;
+        const allIndices = displayData.map((_, idx) => startIndex + idx);
+        onSelectionChange(allIndices);
+      }
+    }
+  };
+  const formatValue = (value, column) => {
+    if (value == null) return "";
+    switch (column.format) {
+      case "date": {
+        const dateValue = value instanceof Date ? value : new Date(value);
+        return new Intl.DateTimeFormat("en-US", column.formatOptions).format(dateValue);
+      }
+      case "currency":
+        return new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: "USD",
+          ...column.formatOptions
+        }).format(Number(value));
+      case "number":
+        return new Intl.NumberFormat("en-US", column.formatOptions).format(Number(value));
+      case "percent":
+        return new Intl.NumberFormat("en-US", {
+          style: "percent",
+          ...column.formatOptions
+        }).format(Number(value));
+      default:
+        return String(value);
+    }
+  };
+  const renderCellContent = (value, column, row, rowIndex) => {
+    const isEmpty = value == null || value === "";
+    if (isEmpty && column.fallback !== void 0) {
+      return column.fallback;
+    }
+    if (column.render) {
+      return column.render(value, row, rowIndex);
+    }
+    if (column.badgeMap) {
+      const stringValue = String(value);
+      const badgeConfig = column.badgeMap[stringValue] || column.badgeMap["*"] || { variant: "neutral" };
+      return /* @__PURE__ */ jsx(Badge, { variant: badgeConfig.variant || "neutral", size: column.componentSize || "md", children: badgeConfig.label || stringValue });
+    }
+    if (column.renderAsBadges) {
+      if (Array.isArray(value)) {
+        if (value.length === 0 && column.fallback !== void 0) {
+          return column.fallback;
+        }
+        return /* @__PURE__ */ jsx(Stack, { direction: "horizontal", spacing: "xs", wrap: true, children: value.map((item, idx) => /* @__PURE__ */ jsx(Badge, { variant: column.badgeVariant || "neutral", size: column.componentSize || "md", children: String(item) }, idx)) });
+      } else {
+        return /* @__PURE__ */ jsx(Badge, { variant: column.badgeVariant || "neutral", size: column.componentSize || "md", children: String(value) });
+      }
+    }
+    if (column.format) {
+      return formatValue(value, column);
+    }
+    return String(value ?? "");
+  };
+  const renderSortIcon = (columnKey) => {
+    if (!sortable) return null;
+    const isSorted = sortConfig?.key === columnKey;
+    if (!isSorted) {
+      return /* @__PURE__ */ jsx(Icon, { name: "selector", size: "xs", color: "neutral" });
+    }
+    if (sortConfig?.direction === "asc") {
+      return /* @__PURE__ */ jsx(Icon, { name: "chevron-up", size: "xs", color: "primary" });
+    }
+    return /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "xs", color: "primary" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    hasHeader && /* @__PURE__ */ jsx("div", { className: "mb-3", children: searchable ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: title }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 sm:max-w-md", children: /* @__PURE__ */ jsx(InputGroup, { prefix: /* @__PURE__ */ jsx(Icon, { name: "search", size: "sm" }), className: "w-full", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "text",
+            value: searchQuery,
+            onChange: (e) => handleSearchChange(e.target.value),
+            placeholder: searchPlaceholder
+          }
+        ) }) }),
+        Array.isArray(headerActions) && headerActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap sm:flex-nowrap ml-auto", children: headerActions.map((act, idx) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: act.onClick,
+            variant: act.variant,
+            style: act.style,
+            size: act.size,
+            className: act.className,
+            ariaLabel: act.label && act.icon && !act.label ? act.label : void 0,
+            children: [
+              act.icon ? /* @__PURE__ */ jsx(Icon, { name: act.icon, size: "sm" }) : null,
+              act.label
+            ]
+          },
+          idx
+        )) })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: title }) }),
+      Array.isArray(headerActions) && headerActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap sm:flex-nowrap", children: headerActions.map((act, idx) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: act.onClick,
+          variant: act.variant,
+          style: act.style,
+          size: act.size,
+          className: act.className,
+          ariaLabel: act.label && act.icon && !act.label ? act.label : void 0,
+          children: [
+            act.icon ? /* @__PURE__ */ jsx(Icon, { name: act.icon, size: "sm" }) : null,
+            act.label
+          ]
+        },
+        idx
+      )) })
+    ] }) }),
+    data.length === 0 ? /* @__PURE__ */ jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: emptyState.title,
+        description: emptyState.description,
+        buttonText: emptyState.buttonText,
+        onButtonClick: emptyState.onButtonClick
+      }
+    ) }) : filteredData.length === 0 && searchQuery.trim() ? /* @__PURE__ */ jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No results found",
+        description: `No items match "${searchQuery}". Try adjusting your search.`
+      }
+    ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { ref: tableContainerRef, className: `${stickyHeader ? "overflow-auto max-h-150" : ""} overflow-x-auto`, children: /* @__PURE__ */ jsxs(Table, { striped, bordered, hoverable, compact, children: [
+        /* @__PURE__ */ jsx(TableHeader, { className: stickyHeader ? "sticky top-0 z-10 bg-background shadow-sm" : "", children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          selectable && /* @__PURE__ */ jsx(TableHeadCell, { className: "w-12", children: /* @__PURE__ */ jsx(Checkbox, { checked: isAllSelected, onChange: handleToggleAll, ariaLabel: "Select all rows" }) }),
+          visibleColumns.map((column) => /* @__PURE__ */ jsx(
+            TableHeadCell,
+            {
+              align: column.align,
+              className: column.width ? `w-[${column.width}]` : "",
+              children: column.sortable !== false && sortable ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handleSort(column.key),
+                  className: "flex items-center gap-1 hover:text-foreground transition-colors font-medium",
+                  type: "button",
+                  children: [
+                    column.label,
+                    renderSortIcon(column.key)
+                  ]
+                }
+              ) : column.label
+            },
+            String(column.key)
+          )),
+          actions && /* @__PURE__ */ jsx(TableHeadCell, { align: "center", className: actionsWidth, children: actionsLabel })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: displayData.map((row, rowIndex) => {
+          const actualIndex = paginated ? (currentPage - 1) * pageSize + rowIndex : rowIndex;
+          const isSelected = isRowSelected(actualIndex);
+          return /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              selected: isSelected,
+              onClick: onRowClick ? () => onRowClick(row, actualIndex) : void 0,
+              className: onRowClick ? "cursor-pointer" : "",
+              children: [
+                selectable && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onChange: () => handleToggleRow(actualIndex),
+                    ariaLabel: `Select row ${actualIndex + 1}`
+                  }
+                ) }),
+                visibleColumns.map((column) => {
+                  const value = row[column.key];
+                  const content = renderCellContent(value, column, row, actualIndex);
+                  return /* @__PURE__ */ jsx(TableCell, { align: column.align, wrapText: column.wrapText, children: content }, String(column.key));
+                }),
+                actions && /* @__PURE__ */ jsx(TableCell, { align: "center", onClick: (e) => e.stopPropagation(), children: (() => {
+                  let rowActions;
+                  if (Array.isArray(actions)) {
+                    rowActions = actions;
+                  } else {
+                    const result = actions(row, actualIndex);
+                    if (Array.isArray(result)) {
+                      rowActions = result;
+                    } else {
+                      return result;
+                    }
+                  }
+                  return /* @__PURE__ */ jsx(Stack, { direction: "horizontal", spacing: "md", justify: actionsJustify, children: rowActions.map((action, actionIndex) => {
+                    if (action && typeof action === "object" && "onClick" in action) {
+                      const actionConfig = action;
+                      const button = /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          icon: actionConfig.icon,
+                          iconSize: actionConfig.iconSize || "md",
+                          buttonStyle: "ghost",
+                          variant: actionConfig.variant || "neutral",
+                          iconColor: actionConfig.iconColor,
+                          hoverIcon: actionConfig.hoverIcon,
+                          ariaLabel: actionConfig.label,
+                          onClick: () => actionConfig.onClick(row, actualIndex),
+                          noPadding: true
+                        },
+                        actionIndex
+                      );
+                      return actionConfig.tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: actionConfig.tooltip, children: button }, actionIndex) : button;
+                    } else {
+                      return /* @__PURE__ */ jsx("div", { children: action }, actionIndex);
+                    }
+                  }) });
+                })() })
+              ]
+            },
+            actualIndex
+          );
+        }) })
+      ] }) }),
+      paginated && totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-border", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+          "Page ",
+          currentPage,
+          " of ",
+          totalPages,
+          " (",
+          filteredData.length,
+          " ",
+          searchQuery.trim() ? "filtered" : "total",
+          " ",
+          "rows",
+          searchQuery.trim() && data.length !== filteredData.length ? ` of ${data.length}` : "",
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { size: "sm", style: "outline", onClick: prevPage, disabled: !canPrevPage, children: "Previous" }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", style: "outline", onClick: nextPage, disabled: !canNextPage, children: "Next" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+DataTable.displayName = "DataTable";
+export {
+  DataTable as default
+};
+//# sourceMappingURL=data-table.js.map

package/dist/components/data-display/data-table/data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.js","sources":["../../../../src/components/data-display/data-table/data-table.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 { Table, TableHeader, TableBody, TableRow, TableHeadCell, TableCell } from '../table/table';\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 { useTable, UseTableOptions } from './use-table';\nimport { Size } from '@/theme/size-tokens';\nimport { ColorVariant } from '@/theme/tokens';\nimport EmptyState from '../empty-state/empty-state';\n\nexport type DataTableAction<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 DataTableActionItem<T> = DataTableAction<T> | ReactNode;\n\nexport type ColumnDef<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 */\n  width?: string;\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 are never hidden. */\n  hidePriority?: number;\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  /**\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 DataTableProps<T> = {\n  /** Array of data objects to display in the table */\n  data: T[];\n  /** Column definitions specifying how to render each column */\n  columns: ColumnDef<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 to show borders around the table */\n  bordered?: boolean;\n  /** Whether rows have hover effects */\n  hoverable?: boolean;\n  /** Whether to use compact spacing for dense data */\n  compact?: boolean;\n  /** Whether the table header should stick to the top on scroll */\n  stickyHeader?: 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?: DataTableActionItem<T>[] | ((row: T, index: number) => DataTableActionItem<T>[] | ReactNode);\n  /** Label for the actions column header */\n  actionsLabel?: string;\n  /** CSS width class for the actions column */\n  actionsWidth?: string;\n  /** Alignment for actions in the cell: 'start'|'center'|'end' (defaults to 'end') */\n  actionsJustify?: 'start' | 'center' | 'end';\n\n  // Callbacks\n  /** Callback when a row is clicked */\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 table (left side of header) */\n  title?: string;\n  /** Header actions displayed above the table (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  /** 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/**\n * DataTable - High-level data-driven table component\n *\n * Features:\n * - Generic typed data and columns\n * - Client-side sorting\n * - Client-side pagination\n * - Row selection with checkboxes\n * - Custom cell rendering\n * - Flexible actions: simple array config OR custom render function\n * - Empty state handling\n * - Sticky headers\n * - Click handlers\n *\n * Built on top of low-level Table primitives.\n *\n * @example\n * ```tsx\n * // Simple: Pass array of action configs (recommended)\n * <DataTable\n *   data={users}\n *   columns={columns}\n *   title=\"Users\"\n *   headerActions={<Button onClick={handleCreate}>New</Button>}\n *   actions={[\n *     {\n *       icon: \"edit\",\n *       label: 'Edit user',\n *       onClick: (row, index) => handleEdit(row, index),\n *       variant: 'neutral'\n *     },\n *     {\n *       icon: \"trash\",\n *       label: 'Delete user',\n *       onClick: (row, index) => handleDelete(row, index),\n *       variant: 'error'\n *     }\n *   ]}\n * />\n *\n * // Dynamic: Return different actions based on row data\n * <DataTable\n *   data={users}\n *   columns={columns}\n *   actions={(row) => [\n *     {\n *       icon: \"edit\",\n *       label: 'Edit user',\n *       onClick: (r, i) => handleEdit(r, i),\n *       variant: 'neutral'\n *     },\n *     // Conditionally include delete action\n *     ...(!row.isDefault ? [{\n *       icon: \"trash\",\n *       label: 'Delete user',\n *       onClick: (r, i) => handleDelete(r, i),\n *       variant: 'error'\n *     }] : [])\n *   ]}\n * />\n *\n * // Advanced: Custom render function for full control\n * <DataTable\n *   data={users}\n *   columns={columns}\n *   actions={(row, index) => (\n *     <DataTableActions\n *       row={row}\n *       index={index}\n *       onEdit={handleEdit}\n *       onDelete={handleDelete}\n *     />\n *   )}\n * />\n * ```\n */\nfunction DataTable<T>({\n  data,\n  columns,\n  className = '',\n  striped = true,\n  bordered = false,\n  hoverable = true,\n  compact = false,\n  stickyHeader = 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  actionsWidth = 'w-32',\n  actionsJustify = 'end',\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}: DataTableProps<T>) {\n  // Search state\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const handleSearchChange = (value: string) => {\n    setSearchQuery(value);\n    if (onSearchChange) {\n      onSearchChange(value);\n    }\n  };\n\n  // Responsive column hiding state\n  const tableContainerRef = useRef<HTMLDivElement>(null);\n  const [visibleColumns, setVisibleColumns] = useState<ColumnDef<T>[]>(() => columns);\n\n  // ResizeObserver to handle responsive column hiding\n  useEffect(() => {\n    const container = tableContainerRef.current;\n    if (!container) return;\n\n    // Check if any columns have hidePriority set\n    const hasHideableColumns = columns.some((col) => col.hidePriority !== undefined);\n\n    const updateVisibleColumns = () => {\n      if (!hasHideableColumns) {\n        setVisibleColumns(columns);\n        return;\n      }\n\n      const containerWidth = container.offsetWidth;\n\n      // Separate columns into hideable and non-hideable\n      const hideableColumns = columns\n        .map((col, index) => ({ col, originalIndex: index }))\n        .filter(({ col }) => col.hidePriority !== undefined)\n        .sort((a, b) => {\n          // Sort by hidePriority (lower hides first), then by original index for stability\n          if (a.col.hidePriority !== b.col.hidePriority) {\n            return (a.col.hidePriority ?? 0) - (b.col.hidePriority ?? 0);\n          }\n          return a.originalIndex - b.originalIndex;\n        });\n\n      const nonHideableColumns = columns.filter((col) => col.hidePriority === undefined);\n\n      // Calculate minimum width needed for non-hideable columns\n      // Use a simple heuristic: estimate 150px per column if no width specified\n      const estimateColumnWidth = (col: ColumnDef<T>): number => {\n        if (col.width) {\n          // Try to extract numeric value from width string (e.g., \"200px\" -> 200, \"w-32\" -> 128)\n          const match = col.width.match(/(\\d+)/);\n          if (match) {\n            const num = parseInt(match[1], 10);\n            // If it looks like a pixel value, use it; otherwise treat as Tailwind units\n            if (col.width.includes('px')) return num;\n            // Tailwind w-32 = 8rem = 128px (assuming 1rem = 16px)\n            return num * 4;\n          }\n        }\n        return 150; // Default estimate\n      };\n\n      let currentWidth = nonHideableColumns.reduce((sum, col) => sum + estimateColumnWidth(col), 0);\n\n      // Account for selection and actions columns\n      if (selectable) currentWidth += 48; // w-12 checkbox column\n      if (actions) currentWidth += 128; // default actions width\n\n      // Add hideable columns until we run out of space\n      const columnsToShow: ColumnDef<T>[] = [...nonHideableColumns];\n\n      for (const { col } of hideableColumns) {\n        const colWidth = estimateColumnWidth(col);\n        if (currentWidth + colWidth <= containerWidth - 32) {\n          // 32px buffer for padding/scrollbar\n          columnsToShow.push(col);\n          currentWidth += colWidth;\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 to set initial state\n    updateVisibleColumns();\n\n    // Set up observer for future changes\n    const observer = new ResizeObserver(() => {\n      updateVisibleColumns();\n    });\n\n    observer.observe(container);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [columns, selectable, actions]);\n\n  // Use table hook for state management\n  // If searchKeys not explicitly provided, derive from visible columns\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((title && String(title).length > 0) || headerActions || searchable);\n\n  // Notify parent of selection changes\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: ColumnDef<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: ColumnDef<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      // Try exact match, then fallback ('*'), then default\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.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        // Render single badge for scalar values\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 icon\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  // If there is no data we still render the header (so header actions\n  // like \"Add\" remain visible). The empty state will be rendered below\n  // the header further down in the JSX.\n\n  return (\n    <div className={className}>\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.label && act.icon && !act.label ? act.label : 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.label && act.icon && !act.label ? act.label : 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 data or no results after filtering */}\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          <div ref={tableContainerRef} className={`${stickyHeader ? 'overflow-auto max-h-150' : ''} overflow-x-auto`}>\n            <Table striped={striped} bordered={bordered} hoverable={hoverable} compact={compact}>\n              <TableHeader className={stickyHeader ? 'sticky top-0 z-10 bg-background shadow-sm' : ''}>\n                <TableRow>\n                  {/* Selection column */}\n                  {selectable && (\n                    <TableHeadCell className=\"w-12\">\n                      <Checkbox checked={isAllSelected} onChange={handleToggleAll} ariaLabel=\"Select all rows\" />\n                    </TableHeadCell>\n                  )}\n\n                  {/* Data columns */}\n                  {visibleColumns.map((column) => (\n                    <TableHeadCell\n                      key={String(column.key)}\n                      align={column.align}\n                      className={column.width ? `w-[${column.width}]` : ''}\n                    >\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\"\n                          type=\"button\"\n                        >\n                          {column.label}\n                          {renderSortIcon(column.key)}\n                        </button>\n                      ) : (\n                        column.label\n                      )}\n                    </TableHeadCell>\n                  ))}\n\n                  {/* Actions column */}\n                  {actions && (\n                    <TableHeadCell align=\"center\" className={actionsWidth}>\n                      {actionsLabel}\n                    </TableHeadCell>\n                  )}\n                </TableRow>\n              </TableHeader>\n\n              <TableBody>\n                {displayData.map((row, rowIndex) => {\n                  const actualIndex = paginated ? (currentPage - 1) * pageSize + rowIndex : rowIndex;\n                  const isSelected = isRowSelected(actualIndex);\n\n                  return (\n                    <TableRow\n                      key={actualIndex}\n                      selected={isSelected}\n                      onClick={onRowClick ? () => onRowClick(row, actualIndex) : undefined}\n                      className={onRowClick ? 'cursor-pointer' : ''}\n                    >\n                      {/* Selection cell */}\n                      {selectable && (\n                        <TableCell onClick={(e) => e.stopPropagation()}>\n                          <Checkbox\n                            checked={isSelected}\n                            onChange={() => handleToggleRow(actualIndex)}\n                            ariaLabel={`Select row ${actualIndex + 1}`}\n                          />\n                        </TableCell>\n                      )}\n\n                      {/* Data cells */}\n                      {visibleColumns.map((column) => {\n                        const value = row[column.key];\n                        const content = renderCellContent(value, column, row, actualIndex);\n\n                        return (\n                          <TableCell key={String(column.key)} align={column.align} wrapText={column.wrapText}>\n                            {content}\n                          </TableCell>\n                        );\n                      })}\n\n                      {actions && (\n                        <TableCell align=\"center\" onClick={(e) => e.stopPropagation()}>\n                          {(() => {\n                            let rowActions: DataTableActionItem<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 result;\n                              }\n                            }\n\n                            return (\n                              <Stack direction=\"horizontal\" spacing=\"md\" justify={actionsJustify}>\n                                {(rowActions as DataTableActionItem<T>[]).map((action, actionIndex) => {\n                                  if (action && typeof action === 'object' && 'onClick' in action) {\n                                    const actionConfig = action as DataTableAction<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 <div key={actionIndex}>{action as ReactNode}</div>;\n                                  }\n                                })}\n                              </Stack>\n                            );\n                          })()}\n                        </TableCell>\n                      )}\n                    </TableRow>\n                  );\n                })}\n              </TableBody>\n            </Table>\n          </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\nDataTable.displayName = 'DataTable';\n\nexport default DataTable;\n"],"names":[],"mappings":"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"}

package/dist/components/data-display/data-table/index.d.ts

@@ -0,0 +1,5 @@
+export { default as DataTable } from './data-table';
+export { useTable } from './use-table';
+export type { ColumnDef, DataTableProps, DataTableAction, DataTableActionItem } from './data-table';
+export type { SortDirection, SortConfig, UseTableOptions, UseTableReturn } from './use-table';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/data-display/data-table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACpG,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/data-display/data-table/use-table.d.ts

@@ -0,0 +1,42 @@
+export type SortDirection = 'asc' | 'desc' | null;
+export type SortConfig<T> = {
+    key: keyof T;
+    direction: SortDirection;
+} | null;
+export type UseTableOptions<T> = {
+    data: T[];
+    initialSort?: {
+        key: keyof T;
+        direction: 'asc' | 'desc';
+    };
+    pageSize?: number;
+    searchQuery?: string;
+    searchKeys?: (keyof T)[];
+};
+export type UseTableReturn<T> = {
+    currentData: T[];
+    sortedData: T[];
+    filteredData: T[];
+    sortConfig: SortConfig<T>;
+    handleSort: (key: keyof T) => void;
+    currentPage: number;
+    totalPages: number;
+    setCurrentPage: (page: number) => void;
+    nextPage: () => void;
+    prevPage: () => void;
+    canNextPage: boolean;
+    canPrevPage: boolean;
+    selectedRows: Set<number>;
+    toggleRow: (index: number) => void;
+    toggleAll: () => void;
+    isRowSelected: (index: number) => boolean;
+    isAllSelected: boolean;
+    clearSelection: () => void;
+};
+/**
+ * useTable Hook - Client-side table state management
+ * Handles filtering, sorting, pagination, and selection
+ */
+export declare function useTable<T>({ data, initialSort, pageSize, searchQuery, searchKeys }: UseTableOptions<T>): UseTableReturn<T>;
+export default useTable;
+//# sourceMappingURL=use-table.d.ts.map

package/dist/components/data-display/data-table/use-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-table/use-table.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IAC1B,GAAG,EAAE,MAAM,CAAC,CAAC;IACb,SAAS,EAAE,aAAa,CAAC;CAC1B,GAAG,IAAI,CAAC;AAET,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI;IAC/B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,WAAW,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC,CAAC;QAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAA;KAAE,CAAC;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI;IAE9B,WAAW,EAAE,CAAC,EAAE,CAAC;IACjB,UAAU,EAAE,CAAC,EAAE,CAAC;IAChB,YAAY,EAAE,CAAC,EAAE,CAAC;IAGlB,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAC1B,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAGnC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IAGrB,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1B,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC1C,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC1B,IAAI,EACJ,WAAW,EACX,QAAa,EACb,WAAgB,EAChB,UAAU,EACX,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CA8IxC;AAED,eAAe,QAAQ,CAAC"}