@pk-design/react-tailwind 1.5.4 → 1.7.0

package/dist/es/components/DataTable/DataTable.icons.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import SvgArrowDownWideNarrow from '../Icons/ArrowDownWideNarrow.svg.js';
+import SvgArrowDownNarrowWide from '../Icons/ArrowDownNarrowWide.svg.js';
+import SvgArrowDownAz from '../Icons/ArrowDownAZ.svg.js';
+import SvgArrowDownZa from '../Icons/ArrowDownZA.svg.js';
+import SvgArrowUpDown from '../Icons/ArrowUpDown.svg.js';
+
+const SortIconMap = {
+    '1': (jsx(SvgArrowDownNarrowWide, { className: "size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white" })),
+    asc: (jsx(SvgArrowDownAz, { className: "size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white" })),
+    '-1': (jsx(SvgArrowDownWideNarrow, { className: "size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white" })),
+    desc: (jsx(SvgArrowDownZa, { className: "size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white" })),
+};
+const getSortIcon = (sort) => sort ? (SortIconMap[sort]) : (jsx(SvgArrowUpDown, { className: "size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white" }));
+
+export { SortIconMap, getSortIcon };
+//# sourceMappingURL=DataTable.icons.js.map

package/dist/es/components/DataTable/DataTable.icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.icons.js","sources":["../../../../../src/components/DataTable/DataTable.icons.tsx"],"sourcesContent":["import type { SortIconKey, Sorting } from './DataTable.types'\nimport type { ReactNode } from 'react'\n/* Icons */\nimport ArrowDownWideNarrow from '../Icons/ArrowDownWideNarrow.svg'\nimport ArrowDownNarrowWide from '../Icons/ArrowDownNarrowWide.svg'\nimport ArrowDownAZ from '../Icons/ArrowDownAZ.svg'\nimport ArrowDownZA from '../Icons/ArrowDownZA.svg'\nimport ArrowUpDown from '../Icons/ArrowUpDown.svg'\n\nexport const SortIconMap: Record<SortIconKey, ReactNode> = {\n  '1': (\n    <ArrowDownNarrowWide className=\"size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white\" />\n  ),\n  asc: (\n    <ArrowDownAZ className=\"size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white\" />\n  ),\n  '-1': (\n    <ArrowDownWideNarrow className=\"size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white\" />\n  ),\n  desc: (\n    <ArrowDownZA className=\"size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white\" />\n  ),\n}\n\nexport const getSortIcon = (sort?: Sorting) =>\n  sort ? (\n    SortIconMap[sort as SortIconKey]\n  ) : (\n    <ArrowUpDown className=\"size-4 text-gray-400 shrink-0 group-hover:text-gray-800 dark:group-hover:text-white\" />\n  )\n"],"names":["_jsx","ArrowDownNarrowWide","ArrowDownAZ","ArrowDownWideNarrow","ArrowDownZA","ArrowUpDown"],"mappings":";;;;;;;AASO,MAAM,WAAW,GAAmC;IACzD,GAAG,GACDA,GAAA,CAACC,sBAAmB,IAAC,SAAS,EAAC,qFAAqF,EAAA,CAAG,CACxH;IACD,GAAG,GACDD,GAAA,CAACE,cAAW,IAAC,SAAS,EAAC,qFAAqF,EAAA,CAAG,CAChH;IACD,IAAI,GACFF,GAAA,CAACG,sBAAmB,IAAC,SAAS,EAAC,qFAAqF,EAAA,CAAG,CACxH;IACD,IAAI,GACFH,GAAA,CAACI,cAAW,IAAC,SAAS,EAAC,qFAAqF,EAAA,CAAG,CAChH;;AAGI,MAAM,WAAW,GAAG,CAAC,IAAc,KACxC,IAAI,IACF,WAAW,CAAC,IAAmB,CAAC,KAEhCJ,GAAA,CAACK,cAAW,EAAA,EAAC,SAAS,EAAC,qFAAqF,EAAA,CAAG;;;;"}

package/dist/es/components/DataTable/DataTable.js

@@ -0,0 +1,108 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { Table, TableHead, TableHeaderCell, TableBody, EmptyTableRow, TableRow, TableCell, TableFoot } from '../Table/Table.js';
+import { buildClassName } from '../../utils/build-classname.js';
+import { TextContent } from '../TextContent/TextContent.js';
+import { Pagination } from '../Pagination/Pagination.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { get } from '../../utils/get.js';
+import { useRowSelection, updateSortQuery } from './DataTable.utils.js';
+import { getSortIcon } from './DataTable.icons.js';
+
+const DENSITY_CELL_CLASS = {
+    compact: 'px-2 py-1.5',
+    default: '',
+    spacious: 'px-4 py-4',
+};
+const autoSortItems = (items, column, sort) => {
+    const path = column.name;
+    return [...items].sort((a, b) => {
+        const valueA = get(a, path);
+        const valueB = get(b, path);
+        if (column.type === 'number') {
+            const nA = Number(valueA);
+            const nB = Number(valueB);
+            return sort === 'asc' || sort === '1' ? nA - nB : nB - nA;
+        }
+        if (column.type === 'date') {
+            const dA = new Date(valueA).getTime();
+            const dB = new Date(valueB).getTime();
+            return sort === 'asc' || sort === '1' ? dA - dB : dB - dA;
+        }
+        const sA = String(valueA).toLowerCase();
+        const sB = String(valueB).toLowerCase();
+        if (sA < sB)
+            return sort === 'asc' || sort === '1' ? -1 : 1;
+        if (sA > sB)
+            return sort === 'asc' || sort === '1' ? 1 : -1;
+        return 0;
+    });
+};
+function DataTable({ items, columns, sorting = {}, onSort, loading, pagination, setPagination = () => { }, emptyMessage = 'No data found', containerClass = '', wrapperClass = '', tableClass = '', headClass = '', footerRow, rowKey = 'id', onRowClick, rowClass, density = 'default', striped = false, layout = 'auto', selectable = false, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, stickyHeader = true, stickyPagination = true, paginationContainerClass, }) {
+    const internalSorting = useRef({});
+    const [sortedItems, setSortedItems] = useState(items);
+    useEffect(() => {
+        setSortedItems(items);
+    }, [items]);
+    const doAutoSort = (column) => {
+        internalSorting.current = updateSortQuery(internalSorting.current, column.name, column.type);
+        setSortedItems(autoSortItems(items, column, internalSorting.current[column.name]));
+    };
+    const handleSort = (column) => {
+        if (!column.sortable)
+            return;
+        onSort ? onSort(column) : doAutoSort(column);
+    };
+    const getKey = (item, idx) => {
+        var _a;
+        if (typeof rowKey === 'function')
+            return rowKey(item);
+        return (_a = item[rowKey]) !== null && _a !== void 0 ? _a : idx;
+    };
+    const getRowClass = (item, idx) => {
+        if (!rowClass)
+            return '';
+        if (typeof rowClass === 'function')
+            return rowClass(item, idx);
+        return rowClass;
+    };
+    const getCellClass = (column, item) => {
+        if (!column.cellClass)
+            return '';
+        if (typeof column.cellClass === 'function')
+            return column.cellClass(item);
+        return column.cellClass;
+    };
+    const { isSelected, toggleRow, toggleAll, allSelected, someSelected } = useRowSelection({
+        items: sortedItems,
+        getKey,
+        selectedRowKeys,
+        defaultSelectedRowKeys,
+        onSelectionChange,
+        isRowSelectable,
+    });
+    const densityCellClass = DENSITY_CELL_CLASS[density];
+    const colSize = columns.length + (selectable ? 1 : 0);
+    const wrapperHasOverflow = /\boverflow-(x-|y-)?(auto|hidden|scroll|visible|clip)\b/.test(wrapperClass);
+    return (jsxs("div", { className: buildClassName('w-full rounded-lg relative', containerClass), children: [jsx("div", { className: buildClassName(!wrapperHasOverflow && 'overflow-x-auto', 'rounded-lg border border-[var(--ui-border)]', wrapperClass, pagination && 'rounded-b-none border-b-0'), children: jsxs(Table, { className: buildClassName('relative w-full max-w-full h-fit', tableClass), layout: layout, children: [jsxs(TableHead, { className: headClass, children: [selectable && (jsx(TableHeaderCell, { className: buildClassName('bg-gray-50 dark:bg-gray-800 w-px', densityCellClass, stickyHeader && 'sticky top-0 z-20 shadow-[0_1px_2px_rgba(0,0,0,0.06)]'), children: jsx(Checkbox, { "aria-label": "Select all rows", checked: allSelected, ref: (el) => {
+                                            if (el)
+                                                el.indeterminate = someSelected;
+                                        }, onChange: toggleAll }) })), columns.map((column) => (jsx(TableHeaderCell, { align: column.headerAlign, style: { width: column.width || 'auto' }, className: buildClassName('bg-gray-50 dark:bg-gray-800', densityCellClass, stickyHeader && 'sticky top-0 z-20 shadow-[0_1px_2px_rgba(0,0,0,0.06)]', column.sticky === 'left' &&
+                                        'sticky left-0 z-30 shadow-[2px_0_6px_rgba(0,0,0,0.06)]', column.sticky === 'right' &&
+                                        'sticky right-0 z-30 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]', column.headerClass), children: jsxs(TextContent, { role: column.sortable ? 'button' : undefined, className: buildClassName('group', column.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none'), onClick: () => handleSort(column), children: [jsx(TextContent, { className: "shrink-0", children: column.label }), column.sortable ? getSortIcon(sorting[column.name]) : null] }) }, column.name)))] }), jsx(TableBody, { loading: loading, colSize: colSize, rowSize: (pagination === null || pagination === void 0 ? void 0 : pagination.limit) || 5, children: !loading && sortedItems.length === 0 ? (jsx(EmptyTableRow, { colSpan: colSize, children: emptyMessage })) : (sortedItems.map((item, idx) => {
+                                const key = getKey(item, idx);
+                                const rowSelectable = !isRowSelectable || isRowSelectable(item);
+                                return (jsxs(TableRow, { className: buildClassName('group', onRowClick && 'cursor-pointer', striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40', getRowClass(item, idx)), onClick: onRowClick ? () => onRowClick(item, idx) : undefined, children: [selectable && (jsx(TableCell, { className: buildClassName(densityCellClass, striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40'), children: jsx("span", { onClick: (e) => e.stopPropagation(), children: jsx(Checkbox, { "aria-label": "Select row", checked: isSelected(key), disabled: !rowSelectable, onChange: () => toggleRow(key) }) }) })), columns.map((column) => {
+                                            var _a;
+                                            return (jsx(TableCell, { align: column.align, className: buildClassName(densityCellClass, striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40', column.sticky === 'left' &&
+                                                    'sticky left-0 z-10 shadow-[2px_0_6px_rgba(0,0,0,0.06)]', column.sticky === 'right' &&
+                                                    'sticky right-0 z-10 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]', getCellClass(column, item)), children: column.render
+                                                    ? column.render(item)
+                                                    : ((_a = get(item, column.name)) !== null && _a !== void 0 ? _a : 'Not set') }, column.name));
+                                        })] }, key));
+                            })) }), footerRow && jsx(TableFoot, { children: footerRow })] }) }), pagination && (jsx(Pagination, { ...pagination, className: buildClassName('rounded-b-lg border border-[var(--ui-border)]', stickyPagination && 'sticky bottom-0 z-20 bg-white dark:bg-gray-800', paginationContainerClass), onChange: setPagination }))] }));
+}
+DataTable.displayName = 'DataTable';
+
+export { DataTable };
+//# sourceMappingURL=DataTable.js.map

package/dist/es/components/DataTable/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sources":["../../../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport {\n  EmptyTableRow,\n  Table,\n  TableBody,\n  TableCell,\n  TableFoot,\n  TableHead,\n  TableHeaderCell,\n  TableRow,\n} from '../Table'\nimport { buildClassName } from '../../utils/build-classname'\nimport type {\n  DataTableProps,\n  DataTableColumn,\n  DataTableDensity,\n  Sorting,\n  SortQuery,\n} from './DataTable.types'\nimport { TextContent } from '../TextContent'\nimport { Pagination } from '../Pagination'\nimport { Checkbox } from '../Checkbox'\nimport { get } from '../../utils/get'\nimport { updateSortQuery, useRowSelection } from './DataTable.utils'\nimport { getSortIcon } from './DataTable.icons'\n\nconst DENSITY_CELL_CLASS: Record<DataTableDensity, string> = {\n  compact: 'px-2 py-1.5',\n  default: '',\n  spacious: 'px-4 py-4',\n}\n\nconst autoSortItems = <T,>(items: T[], column: DataTableColumn<T>, sort: Sorting): T[] => {\n  const path = column.name\n  return [...items].sort((a, b) => {\n    const valueA = get(a as Record<string, any>, path)\n    const valueB = get(b as Record<string, any>, path)\n\n    if (column.type === 'number') {\n      const nA = Number(valueA)\n      const nB = Number(valueB)\n      return sort === 'asc' || sort === '1' ? nA - nB : nB - nA\n    }\n\n    if (column.type === 'date') {\n      const dA = new Date(valueA).getTime()\n      const dB = new Date(valueB).getTime()\n      return sort === 'asc' || sort === '1' ? dA - dB : dB - dA\n    }\n\n    const sA = String(valueA).toLowerCase()\n    const sB = String(valueB).toLowerCase()\n    if (sA < sB) return sort === 'asc' || sort === '1' ? -1 : 1\n    if (sA > sB) return sort === 'asc' || sort === '1' ? 1 : -1\n    return 0\n  })\n}\n\nexport function DataTable<T extends Record<string, any> = Record<string, any>>({\n  items,\n  columns,\n  sorting = {},\n  onSort,\n  loading,\n  pagination,\n  setPagination = () => {},\n  emptyMessage = 'No data found',\n  containerClass = '',\n  wrapperClass = '',\n  tableClass = '',\n  headClass = '',\n  footerRow,\n  rowKey = 'id',\n  onRowClick,\n  rowClass,\n  density = 'default',\n  striped = false,\n  layout = 'auto',\n  selectable = false,\n  selectedRowKeys,\n  defaultSelectedRowKeys,\n  onSelectionChange,\n  isRowSelectable,\n  stickyHeader = true,\n  stickyPagination = true,\n  paginationContainerClass,\n}: DataTableProps<T>) {\n  const internalSorting = useRef<SortQuery>({})\n  const [sortedItems, setSortedItems] = useState(items)\n\n  useEffect(() => {\n    setSortedItems(items)\n  }, [items])\n\n  const doAutoSort = (column: DataTableColumn<T>) => {\n    internalSorting.current = updateSortQuery(internalSorting.current, column.name, column.type)\n    setSortedItems(autoSortItems(items, column, internalSorting.current[column.name]))\n  }\n\n  const handleSort = (column: DataTableColumn<T>) => {\n    if (!column.sortable) return\n    onSort ? onSort(column) : doAutoSort(column)\n  }\n\n  const getKey = (item: T, idx: number): string | number => {\n    if (typeof rowKey === 'function') return rowKey(item)\n    return (item as any)[rowKey] ?? idx\n  }\n\n  const getRowClass = (item: T, idx: number): string => {\n    if (!rowClass) return ''\n    if (typeof rowClass === 'function') return rowClass(item, idx)\n    return rowClass\n  }\n\n  const getCellClass = (column: DataTableColumn<T>, item: T): string => {\n    if (!column.cellClass) return ''\n    if (typeof column.cellClass === 'function') return column.cellClass(item)\n    return column.cellClass\n  }\n\n  const { isSelected, toggleRow, toggleAll, allSelected, someSelected } = useRowSelection({\n    items: sortedItems,\n    getKey,\n    selectedRowKeys,\n    defaultSelectedRowKeys,\n    onSelectionChange,\n    isRowSelectable,\n  })\n\n  const densityCellClass = DENSITY_CELL_CLASS[density]\n  const colSize = columns.length + (selectable ? 1 : 0)\n  const wrapperHasOverflow = /\\boverflow-(x-|y-)?(auto|hidden|scroll|visible|clip)\\b/.test(\n    wrapperClass,\n  )\n\n  return (\n    <div className={buildClassName('w-full rounded-lg relative', containerClass)}>\n      <div\n        className={buildClassName(\n          !wrapperHasOverflow && 'overflow-x-auto',\n          'rounded-lg border border-[var(--ui-border)]',\n          wrapperClass,\n          pagination && 'rounded-b-none border-b-0',\n        )}\n      >\n        <Table\n          className={buildClassName('relative w-full max-w-full h-fit', tableClass)}\n          layout={layout}\n        >\n          <TableHead className={headClass}>\n            {selectable && (\n              <TableHeaderCell\n                className={buildClassName(\n                  'bg-gray-50 dark:bg-gray-800 w-px',\n                  densityCellClass,\n                  stickyHeader && 'sticky top-0 z-20 shadow-[0_1px_2px_rgba(0,0,0,0.06)]',\n                )}\n              >\n                <Checkbox\n                  aria-label=\"Select all rows\"\n                  checked={allSelected}\n                  ref={(el) => {\n                    if (el) el.indeterminate = someSelected\n                  }}\n                  onChange={toggleAll}\n                />\n              </TableHeaderCell>\n            )}\n            {columns.map((column) => (\n              <TableHeaderCell\n                key={column.name}\n                align={column.headerAlign}\n                style={{ width: column.width || 'auto' }}\n                className={buildClassName(\n                  'bg-gray-50 dark:bg-gray-800',\n                  densityCellClass,\n                  stickyHeader && 'sticky top-0 z-20 shadow-[0_1px_2px_rgba(0,0,0,0.06)]',\n                  column.sticky === 'left' &&\n                    'sticky left-0 z-30 shadow-[2px_0_6px_rgba(0,0,0,0.06)]',\n                  column.sticky === 'right' &&\n                    'sticky right-0 z-30 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]',\n                  column.headerClass,\n                )}\n              >\n                <TextContent\n                  role={column.sortable ? 'button' : undefined}\n                  className={buildClassName(\n                    'group',\n                    column.sortable && 'inline-flex items-center gap-2 cursor-pointer select-none',\n                  )}\n                  onClick={() => handleSort(column)}\n                >\n                  <TextContent className=\"shrink-0\">{column.label}</TextContent>\n                  {column.sortable ? getSortIcon(sorting[column.name]) : null}\n                </TextContent>\n              </TableHeaderCell>\n            ))}\n          </TableHead>\n\n          <TableBody loading={loading} colSize={colSize} rowSize={pagination?.limit || 5}>\n            {!loading && sortedItems.length === 0 ? (\n              <EmptyTableRow colSpan={colSize}>{emptyMessage}</EmptyTableRow>\n            ) : (\n              sortedItems.map((item, idx) => {\n                const key = getKey(item, idx)\n                const rowSelectable = !isRowSelectable || isRowSelectable(item)\n\n                return (\n                  <TableRow\n                    key={key}\n                    className={buildClassName(\n                      'group',\n                      onRowClick && 'cursor-pointer',\n                      striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40',\n                      getRowClass(item, idx),\n                    )}\n                    onClick={onRowClick ? () => onRowClick(item, idx) : undefined}\n                  >\n                    {selectable && (\n                      <TableCell\n                        className={buildClassName(\n                          densityCellClass,\n                          striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40',\n                        )}\n                      >\n                        <span onClick={(e) => e.stopPropagation()}>\n                          <Checkbox\n                            aria-label=\"Select row\"\n                            checked={isSelected(key)}\n                            disabled={!rowSelectable}\n                            onChange={() => toggleRow(key)}\n                          />\n                        </span>\n                      </TableCell>\n                    )}\n                    {columns.map((column) => (\n                      <TableCell\n                        key={column.name}\n                        align={column.align}\n                        className={buildClassName(\n                          densityCellClass,\n                          striped && idx % 2 === 1 && 'bg-gray-50 dark:bg-gray-800/40',\n                          column.sticky === 'left' &&\n                            'sticky left-0 z-10 shadow-[2px_0_6px_rgba(0,0,0,0.06)]',\n                          column.sticky === 'right' &&\n                            'sticky right-0 z-10 shadow-[-2px_0_6px_rgba(0,0,0,0.06)]',\n                          getCellClass(column, item),\n                        )}\n                      >\n                        {column.render\n                          ? column.render(item)\n                          : ((get(item, column.name) as any) ?? 'Not set')}\n                      </TableCell>\n                    ))}\n                  </TableRow>\n                )\n              })\n            )}\n          </TableBody>\n\n          {footerRow && <TableFoot>{footerRow}</TableFoot>}\n        </Table>\n      </div>\n\n      {pagination && (\n        <Pagination\n          {...pagination}\n          className={buildClassName(\n            'rounded-b-lg border border-[var(--ui-border)]',\n            stickyPagination && 'sticky bottom-0 z-20 bg-white dark:bg-gray-800',\n            paginationContainerClass,\n          )}\n          onChange={setPagination}\n        />\n      )}\n    </div>\n  )\n}\n\nDataTable.displayName = 'DataTable'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/es/components/DataTable/DataTable.utils.js

@@ -0,0 +1,83 @@
+import { useState, useMemo, useCallback } from 'react';
+
+/**
+ * Compute the next sorting direction for a column.
+ * - string: undefined → asc → desc → undefined
+ * - number/date: undefined → 1 → -1 → undefined
+ */
+const nextSortDirection = (prev, type = 'string') => {
+    if (type === 'string') {
+        if (!prev)
+            return 'asc';
+        if (prev === 'asc')
+            return 'desc';
+        return undefined;
+    }
+    // number / date
+    if (!prev)
+        return '1';
+    if (prev === '1')
+        return '-1';
+    return undefined;
+};
+/**
+ * Update the sort query object for a table column.
+ * Toggles sort direction, removing key when reset.
+ */
+const updateSortQuery = (sortQuery, name, type = 'string') => {
+    const next = nextSortDirection(sortQuery[name], type);
+    // Shallow clone once
+    const updated = { ...sortQuery };
+    if (next == null) {
+        delete updated[name];
+    }
+    else {
+        updated[name] = next;
+    }
+    return updated;
+};
+/**
+ * Shared row-selection state/behaviour used by DataTable and VirtualizedDataTable.
+ * Supports controlled (`selectedRowKeys`) and uncontrolled (`defaultSelectedRowKeys`) usage.
+ */
+const useRowSelection = ({ items, getKey, selectedRowKeys, defaultSelectedRowKeys = [], onSelectionChange, isRowSelectable, }) => {
+    const [internalKeys, setInternalKeys] = useState(defaultSelectedRowKeys);
+    const isControlled = selectedRowKeys !== undefined;
+    const keys = isControlled ? selectedRowKeys : internalKeys;
+    const keySet = useMemo(() => new Set(keys), [keys]);
+    const selectableEntries = useMemo(() => items
+        .map((item, idx) => ({ item, key: getKey(item, idx) }))
+        .filter(({ item }) => !isRowSelectable || isRowSelectable(item)), [items, getKey, isRowSelectable]);
+    const emit = useCallback((nextKeys) => {
+        if (!isControlled)
+            setInternalKeys(nextKeys);
+        const nextKeySet = new Set(nextKeys);
+        const nextItems = items.filter((item, idx) => nextKeySet.has(getKey(item, idx)));
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(nextKeys, nextItems);
+    }, [isControlled, items, getKey, onSelectionChange]);
+    const toggleRow = useCallback((key) => {
+        emit(keySet.has(key) ? keys.filter((k) => k !== key) : [...keys, key]);
+    }, [keys, keySet, emit]);
+    const allSelected = selectableEntries.length > 0 && selectableEntries.every(({ key }) => keySet.has(key));
+    const someSelected = !allSelected && selectableEntries.some(({ key }) => keySet.has(key));
+    const toggleAll = useCallback(() => {
+        const selectableKeySet = new Set(selectableEntries.map(({ key }) => key));
+        if (allSelected) {
+            emit(keys.filter((k) => !selectableKeySet.has(k)));
+        }
+        else {
+            emit(Array.from(new Set([...keys, ...selectableKeySet])));
+        }
+    }, [allSelected, selectableEntries, keys, emit]);
+    return {
+        selectedKeys: keys,
+        isSelected: (key) => keySet.has(key),
+        toggleRow,
+        toggleAll,
+        allSelected,
+        someSelected,
+    };
+};
+
+export { nextSortDirection, updateSortQuery, useRowSelection };
+//# sourceMappingURL=DataTable.utils.js.map

package/dist/es/components/DataTable/DataTable.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.utils.js","sources":["../../../../../src/components/DataTable/DataTable.utils.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\nimport type { DataValueType, Sorting, SortQuery } from './DataTable.types'\n\n/**\n * Compute the next sorting direction for a column.\n * - string: undefined → asc → desc → undefined\n * - number/date: undefined → 1 → -1 → undefined\n */\nexport const nextSortDirection = (\n  prev: Sorting | undefined,\n  type: 'string' | 'number' | 'date' = 'string',\n): Sorting | undefined => {\n  if (type === 'string') {\n    if (!prev) return 'asc'\n    if (prev === 'asc') return 'desc'\n    return undefined\n  }\n\n  // number / date\n  if (!prev) return '1'\n  if (prev === '1') return '-1'\n  return undefined\n}\n\n/**\n * Update the sort query object for a table column.\n * Toggles sort direction, removing key when reset.\n */\nexport const updateSortQuery = (\n  sortQuery: SortQuery,\n  name: string,\n  type: DataValueType = 'string',\n): SortQuery => {\n  const next = nextSortDirection(sortQuery[name], type)\n\n  // Shallow clone once\n  const updated = { ...sortQuery }\n\n  if (next == null) {\n    delete updated[name]\n  } else {\n    updated[name] = next\n  }\n\n  return updated\n}\n\n/** Options for {@link useRowSelection}. */\nexport interface UseRowSelectionOptions<T> {\n  items: T[]\n  getKey: (item: T, idx: number) => string | number\n  selectedRowKeys?: Array<string | number>\n  defaultSelectedRowKeys?: Array<string | number>\n  onSelectionChange?: (selectedRowKeys: Array<string | number>, selectedItems: T[]) => void\n  isRowSelectable?: (item: T) => boolean\n}\n\n/**\n * Shared row-selection state/behaviour used by DataTable and VirtualizedDataTable.\n * Supports controlled (`selectedRowKeys`) and uncontrolled (`defaultSelectedRowKeys`) usage.\n */\nexport const useRowSelection = <T>({\n  items,\n  getKey,\n  selectedRowKeys,\n  defaultSelectedRowKeys = [],\n  onSelectionChange,\n  isRowSelectable,\n}: UseRowSelectionOptions<T>) => {\n  const [internalKeys, setInternalKeys] = useState<Array<string | number>>(defaultSelectedRowKeys)\n  const isControlled = selectedRowKeys !== undefined\n  const keys = isControlled ? selectedRowKeys : internalKeys\n  const keySet = useMemo(() => new Set(keys), [keys])\n\n  const selectableEntries = useMemo(\n    () =>\n      items\n        .map((item, idx) => ({ item, key: getKey(item, idx) }))\n        .filter(({ item }) => !isRowSelectable || isRowSelectable(item)),\n    [items, getKey, isRowSelectable],\n  )\n\n  const emit = useCallback(\n    (nextKeys: Array<string | number>) => {\n      if (!isControlled) setInternalKeys(nextKeys)\n      const nextKeySet = new Set(nextKeys)\n      const nextItems = items.filter((item, idx) => nextKeySet.has(getKey(item, idx)))\n      onSelectionChange?.(nextKeys, nextItems)\n    },\n    [isControlled, items, getKey, onSelectionChange],\n  )\n\n  const toggleRow = useCallback(\n    (key: string | number) => {\n      emit(keySet.has(key) ? keys.filter((k) => k !== key) : [...keys, key])\n    },\n    [keys, keySet, emit],\n  )\n\n  const allSelected =\n    selectableEntries.length > 0 && selectableEntries.every(({ key }) => keySet.has(key))\n  const someSelected = !allSelected && selectableEntries.some(({ key }) => keySet.has(key))\n\n  const toggleAll = useCallback(() => {\n    const selectableKeySet = new Set(selectableEntries.map(({ key }) => key))\n    if (allSelected) {\n      emit(keys.filter((k) => !selectableKeySet.has(k)))\n    } else {\n      emit(Array.from(new Set([...keys, ...selectableKeySet])))\n    }\n  }, [allSelected, selectableEntries, keys, emit])\n\n  return {\n    selectedKeys: keys,\n    isSelected: (key: string | number) => keySet.has(key),\n    toggleRow,\n    toggleAll,\n    allSelected,\n    someSelected,\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/es/components/DetailedInformation/DetailedInformation.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+import { HeadingText } from '../HeadingText/HeadingText.js';
+
+const COLUMN_GRID_CLASS = {
+    1: 'grid-cols-1',
+    2: 'grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3',
+    3: 'grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-3',
+    4: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-3',
+};
+function CopyableValue({ text, children }) {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = async (e) => {
+        e.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(text);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            // Ignore clipboard error
+        }
+    };
+    return (jsxs("span", { className: "inline-flex items-center gap-1.5 group/copy", children: [jsx("span", { children: children }), jsx("button", { type: "button", onClick: handleCopy, className: "opacity-0 group-hover/copy:opacity-100 focus:opacity-100 transition-opacity p-0.5 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer", title: "Copy to clipboard", "aria-label": "Copy to clipboard", children: copied ? (jsx("svg", { className: "size-3.5 text-emerald-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) })) : (jsx("svg", { className: "size-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" }) })) })] }));
+}
+const DetailedInformation = forwardRef((props, ref) => {
+    const { className, title, subTitle, action, details = [], columns = 1, layout = 'horizontal', variant = 'flat', compact = false, bordered = false, divider = true, emptyValue = '- -', titleClass, detailsClass, labelClass, ...divProps } = props;
+    const isCard = variant === 'card';
+    const isBordered = bordered || variant === 'bordered' || isCard;
+    const hasTitles = title || subTitle || action;
+    const filteredDetails = details.filter((detail) => !detail.hidden);
+    const isMultiColumn = columns > 1;
+    return (jsxs("div", { ref: ref, className: buildClassName(isCard
+            ? compact
+                ? 'p-3 sm:p-4 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-[var(--ui-border)]'
+                : 'p-4 sm:p-6 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-[var(--ui-border)]'
+            : isBordered
+                ? compact
+                    ? 'p-3 sm:p-4 border border-[var(--ui-border)] rounded-2xl'
+                    : 'p-4 sm:p-6 border border-[var(--ui-border)] rounded-2xl'
+                : compact
+                    ? 'p-2 md:p-3'
+                    : 'p-3 md:p-4', className), ...divProps, children: [hasTitles && (jsxs("div", { className: "mb-4 flex items-start justify-between gap-4", children: [jsxs("div", { children: [title && (jsx(HeadingText.SubTitle2, { className: buildClassName(titleClass), children: title })), subTitle && (jsx("p", { className: "mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400 font-normal", children: subTitle }))] }), action && jsx("div", { className: "shrink-0 flex items-center", children: action })] })), filteredDetails.length ? (jsx("div", { className: buildClassName('border-[var(--ui-border-muted)]', hasTitles && !isMultiColumn && 'border-t pt-2', detailsClass), children: jsx("dl", { className: buildClassName(COLUMN_GRID_CLASS[columns] || COLUMN_GRID_CLASS[1], !isMultiColumn && divider && 'divide-y divide-[var(--ui-border-muted)]'), children: filteredDetails.map((detail, index) => {
+                        var _a;
+                        const itemFallback = (_a = detail.emptyValue) !== null && _a !== void 0 ? _a : emptyValue;
+                        const hasValue = detail.value !== undefined && detail.value !== null && detail.value !== '';
+                        const displayValue = hasValue ? detail.value : itemFallback;
+                        const copyText = typeof detail.value === 'string' || typeof detail.value === 'number'
+                            ? String(detail.value)
+                            : '';
+                        const isVertical = layout === 'vertical' || isMultiColumn;
+                        return (jsxs("div", { className: buildClassName(isMultiColumn && isCard
+                                ? compact
+                                    ? 'p-3 bg-white dark:bg-gray-900 rounded-xl border border-[var(--ui-border)] shadow-2xs flex flex-col gap-1'
+                                    : 'p-4 bg-white dark:bg-gray-900 rounded-xl border border-[var(--ui-border)] shadow-2xs flex flex-col gap-1'
+                                : isVertical
+                                    ? 'flex flex-col gap-1 py-2 px-1'
+                                    : 'grid grid-cols-3 gap-4 items-center py-2.5 px-1', compact && !isMultiColumn ? 'py-1.5' : ''), children: [jsxs("dt", { className: buildClassName('text-sm/6 font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1.5', labelClass, detail.labelClass), children: [detail.icon && jsx("span", { className: "shrink-0 text-gray-400", children: detail.icon }), jsx("span", { children: detail.label }), detail.helpText && (jsx("span", { className: "text-xs text-gray-400 font-normal cursor-help", title: detail.helpText, children: "(?)" }))] }), jsx("dd", { className: buildClassName('text-sm/6 text-gray-700 dark:text-gray-300', !isVertical && 'sm:col-span-2 sm:mt-0', detail.contentClass), children: detail.copyable && copyText ? (jsx(CopyableValue, { text: copyText, children: displayValue })) : (displayValue) })] }, detail.label || index));
+                    }) }) })) : null] }));
+});
+DetailedInformation.displayName = 'DetailedInformation';
+
+export { DetailedInformation };
+//# sourceMappingURL=DetailedInformation.js.map

package/dist/es/components/DetailedInformation/DetailedInformation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedInformation.js","sources":["../../../../../src/components/DetailedInformation/DetailedInformation.tsx"],"sourcesContent":["import { forwardRef, useState, type ReactNode } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { HeadingText } from '../HeadingText'\nimport type { Detail, DetailedInformationProps } from './DetailedInformation.types'\n\nconst COLUMN_GRID_CLASS: Record<number, string> = {\n  1: 'grid-cols-1',\n  2: 'grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3',\n  3: 'grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-3',\n  4: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-3',\n}\n\nfunction CopyableValue({ text, children }: { text: string; children: ReactNode }) {\n  const [copied, setCopied] = useState(false)\n\n  const handleCopy = async (e: React.MouseEvent) => {\n    e.stopPropagation()\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopied(true)\n      setTimeout(() => setCopied(false), 2000)\n    } catch {\n      // Ignore clipboard error\n    }\n  }\n\n  return (\n    <span className=\"inline-flex items-center gap-1.5 group/copy\">\n      <span>{children}</span>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        className=\"opacity-0 group-hover/copy:opacity-100 focus:opacity-100 transition-opacity p-0.5 text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-pointer\"\n        title=\"Copy to clipboard\"\n        aria-label=\"Copy to clipboard\"\n      >\n        {copied ? (\n          <svg\n            className=\"size-3.5 text-emerald-500\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 13l4 4L19 7\" />\n          </svg>\n        ) : (\n          <svg className=\"size-3.5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\"\n            />\n          </svg>\n        )}\n      </button>\n    </span>\n  )\n}\n\nexport const DetailedInformation = forwardRef<HTMLDivElement, DetailedInformationProps>(\n  (props, ref) => {\n    const {\n      className,\n      title,\n      subTitle,\n      action,\n      details = [],\n      columns = 1,\n      layout = 'horizontal',\n      variant = 'flat',\n      compact = false,\n      bordered = false,\n      divider = true,\n      emptyValue = '- -',\n      titleClass,\n      detailsClass,\n      labelClass,\n      ...divProps\n    } = props\n\n    const isCard = variant === 'card'\n    const isBordered = bordered || variant === 'bordered' || isCard\n    const hasTitles = title || subTitle || action\n    const filteredDetails = details.filter((detail) => !detail.hidden)\n    const isMultiColumn = columns > 1\n\n    return (\n      <div\n        ref={ref}\n        className={buildClassName(\n          isCard\n            ? compact\n              ? 'p-3 sm:p-4 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-[var(--ui-border)]'\n              : 'p-4 sm:p-6 bg-gray-50/60 dark:bg-gray-800/40 rounded-2xl border border-[var(--ui-border)]'\n            : isBordered\n              ? compact\n                ? 'p-3 sm:p-4 border border-[var(--ui-border)] rounded-2xl'\n                : 'p-4 sm:p-6 border border-[var(--ui-border)] rounded-2xl'\n              : compact\n                ? 'p-2 md:p-3'\n                : 'p-3 md:p-4',\n          className,\n        )}\n        {...divProps}\n      >\n        {hasTitles && (\n          <div className=\"mb-4 flex items-start justify-between gap-4\">\n            <div>\n              {title && (\n                <HeadingText.SubTitle2 className={buildClassName(titleClass)}>\n                  {title}\n                </HeadingText.SubTitle2>\n              )}\n              {subTitle && (\n                <p className=\"mt-1 max-w-2xl text-sm/6 text-gray-500 dark:text-gray-400 font-normal\">\n                  {subTitle}\n                </p>\n              )}\n            </div>\n            {action && <div className=\"shrink-0 flex items-center\">{action}</div>}\n          </div>\n        )}\n\n        {filteredDetails.length ? (\n          <div\n            className={buildClassName(\n              'border-[var(--ui-border-muted)]',\n              hasTitles && !isMultiColumn && 'border-t pt-2',\n              detailsClass,\n            )}\n          >\n            <dl\n              className={buildClassName(\n                COLUMN_GRID_CLASS[columns] || COLUMN_GRID_CLASS[1],\n                !isMultiColumn && divider && 'divide-y divide-[var(--ui-border-muted)]',\n              )}\n            >\n              {filteredDetails.map((detail, index) => {\n                const itemFallback = detail.emptyValue ?? emptyValue\n                const hasValue =\n                  detail.value !== undefined && detail.value !== null && detail.value !== ''\n                const displayValue = hasValue ? detail.value : itemFallback\n                const copyText =\n                  typeof detail.value === 'string' || typeof detail.value === 'number'\n                    ? String(detail.value)\n                    : ''\n\n                const isVertical = layout === 'vertical' || isMultiColumn\n\n                return (\n                  <div\n                    key={detail.label || index}\n                    className={buildClassName(\n                      isMultiColumn && isCard\n                        ? compact\n                          ? 'p-3 bg-white dark:bg-gray-900 rounded-xl border border-[var(--ui-border)] shadow-2xs flex flex-col gap-1'\n                          : 'p-4 bg-white dark:bg-gray-900 rounded-xl border border-[var(--ui-border)] shadow-2xs flex flex-col gap-1'\n                        : isVertical\n                          ? 'flex flex-col gap-1 py-2 px-1'\n                          : 'grid grid-cols-3 gap-4 items-center py-2.5 px-1',\n                      compact && !isMultiColumn ? 'py-1.5' : '',\n                    )}\n                  >\n                    <dt\n                      className={buildClassName(\n                        'text-sm/6 font-medium text-gray-900 dark:text-gray-100 flex items-center gap-1.5',\n                        labelClass,\n                        detail.labelClass,\n                      )}\n                    >\n                      {detail.icon && <span className=\"shrink-0 text-gray-400\">{detail.icon}</span>}\n                      <span>{detail.label}</span>\n                      {detail.helpText && (\n                        <span\n                          className=\"text-xs text-gray-400 font-normal cursor-help\"\n                          title={detail.helpText}\n                        >\n                          (?)\n                        </span>\n                      )}\n                    </dt>\n                    <dd\n                      className={buildClassName(\n                        'text-sm/6 text-gray-700 dark:text-gray-300',\n                        !isVertical && 'sm:col-span-2 sm:mt-0',\n                        detail.contentClass,\n                      )}\n                    >\n                      {detail.copyable && copyText ? (\n                        <CopyableValue text={copyText}>{displayValue}</CopyableValue>\n                      ) : (\n                        displayValue\n                      )}\n                    </dd>\n                  </div>\n                )\n              })}\n            </dl>\n          </div>\n        ) : null}\n      </div>\n    )\n  },\n)\n\nDetailedInformation.displayName = 'DetailedInformation'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/es/components/Dot/index.js

@@ -0,0 +1,10 @@
+import React__default from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const Dot = ({ as = 'span', className, ...props }) => React__default.createElement(as, {
+    className: buildClassName('inline-block rounded-full bg-gray-500 dark:bg-gray-300', 'w-1 h-1', className),
+    ...props,
+});
+
+export { Dot };
+//# sourceMappingURL=index.js.map

package/dist/es/components/Dot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Dot/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type JSX, type JSXElementConstructor } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\n\nexport const Dot: React.FC<\n  HTMLAttributes<HTMLElement> & {\n    as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>\n  }\n> = ({ as = 'span', className, ...props }) =>\n  React.createElement(as, {\n    className: buildClassName(\n      'inline-block rounded-full bg-gray-500 dark:bg-gray-300',\n      'w-1 h-1',\n      className,\n    ),\n    ...props,\n  })\n"],"names":["React"],"mappings":";;;MAGa,GAAG,GAIZ,CAAC,EAAE,EAAE,GAAG,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,KACvCA,cAAK,CAAC,aAAa,CAAC,EAAE,EAAE;IACtB,SAAS,EAAE,cAAc,CACvB,wDAAwD,EACxD,SAAS,EACT,SAAS,CACV;AACD,IAAA,GAAG,KAAK;AACT,CAAA;;;;"}

package/dist/es/components/Drawer/Drawer.js

@@ -0,0 +1,65 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react';
+import { buildClassName } from '../../utils/build-classname.js';
+import { Button } from '../Button/Button.js';
+import SvgChevronLeft from '../Icons/ChevronLeft.svg.js';
+import SvgX from '../Icons/X.svg.js';
+
+const alignmentMap = {
+    center: 'items-center justify-center h-full',
+    start: 'justify-start h-full',
+    end: 'justify-end h-full',
+    top: 'items-start justify-center w-full',
+    bottom: 'items-end justify-center h-full',
+};
+const panelAlignmentMap = {
+    center: 'data-[closed]:scale-95 rounded-2xl',
+    start: 'data-[closed]:-translate-x-1/2 rounded-r-2xl',
+    end: 'data-[closed]:translate-x-1/2 rounded-l-2xl',
+    top: 'data-[closed]:-translate-y-1/2 rounded-b-2xl',
+    bottom: 'data-[closed]:translate-y-full rounded-t-2xl md:rounded-t-3xl max-h-[88vh] max-h-[88dvh]',
+};
+const panelSizeMap = {
+    xs: 'max-w-xs',
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    full: 'w-full',
+};
+const Drawer = ({ isOpen, onClose = () => { }, closeOnOutsideClick = true, align = 'end', size = 'md', backdrop = true, title, description, children, footer, footerSticky = false, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, showCloseButton = true, dragHandle, }) => {
+    const showTitleSection = Boolean(title || description || showBackButton || showCloseButton);
+    const shouldShowDragHandle = dragHandle !== null && dragHandle !== void 0 ? dragHandle : align === 'bottom';
+    const [viewportHeight, setViewportHeight] = React__default.useState(null);
+    React__default.useEffect(() => {
+        if (!isOpen) {
+            setViewportHeight(null);
+            return;
+        }
+        const updateHeight = () => {
+            if (typeof window !== 'undefined' && window.visualViewport) {
+                setViewportHeight(window.visualViewport.height);
+            }
+        };
+        updateHeight();
+        const vv = typeof window !== 'undefined' ? window.visualViewport : null;
+        vv === null || vv === void 0 ? void 0 : vv.addEventListener('resize', updateHeight);
+        vv === null || vv === void 0 ? void 0 : vv.addEventListener('scroll', updateHeight);
+        return () => {
+            vv === null || vv === void 0 ? void 0 : vv.removeEventListener('resize', updateHeight);
+            vv === null || vv === void 0 ? void 0 : vv.removeEventListener('scroll', updateHeight);
+        };
+    }, [isOpen]);
+    const handleDialogClose = () => {
+        if (closeOnOutsideClick) {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    };
+    return (jsxs(Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: handleDialogClose, transition: true, children: [backdrop && (jsx(DialogBackdrop, { className: "fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity duration-200" })), jsx("div", { className: "fixed left-0 top-0 w-full", style: { height: viewportHeight ? `${viewportHeight}px` : '100dvh' }, children: jsx("div", { className: buildClassName('flex', alignmentMap[align]), children: jsxs(DialogPanel, { transition: true, className: buildClassName('w-full max-w-full bg-white dark:bg-gray-800 shadow-xl flex flex-col min-w-0', 'overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] duration-200 ease-out data-[closed]:opacity-0', panelAlignmentMap[align], panelSizeMap[size], panelClass), children: [shouldShowDragHandle && (jsx("div", { className: "w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 mx-auto my-2.5 shrink-0 cursor-grab", "data-testid": "drawer-drag-handle" })), showTitleSection && (jsxs("div", { className: buildClassName('space-y-1 py-3 px-4 md:px-6 flex flex-col border-b border-[var(--ui-border)] shrink-0', titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10'), children: [jsxs("div", { className: "flex items-center justify-between gap-3 min-w-0", children: [jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [showBackButton && (jsx(Button, { iconOnly: true, "aria-label": "Back", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, children: jsx(SvgChevronLeft, { className: "size-4" }) })), title && (jsx(DialogTitle, { as: "h3", className: buildClassName('text-lg font-semibold text-gray-900 dark:text-white truncate tracking-tight min-w-0', titleClass), children: title }))] }), showCloseButton && (jsx(Button, { iconOnly: true, "aria-label": "Close drawer", variant: "plain", theme: "secondary", size: "xs", onClick: onClose, className: "rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0", children: jsx(SvgX, { className: "size-4" }) }))] }), description && (jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal truncate', descriptionClass), children: description }))] })), jsx("div", { className: buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass), children: children }), footer && (jsx("div", { className: buildClassName('p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 shrink-0 min-w-0', footerSticky && 'sticky bottom-0 z-10'), children: footer }))] }) }) })] }));
+};
+Drawer.displayName = 'Drawer';
+
+export { Drawer };
+//# sourceMappingURL=Drawer.js.map

package/dist/es/components/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react'\nimport { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Button } from '../Button'\nimport ChevronLeftIcon from '../Icons/ChevronLeft.svg'\nimport XIcon from '../Icons/X.svg'\nimport type { AlignmentMap, DrawerProps, SizeMap } from './Drawer.types'\n\nconst alignmentMap: AlignmentMap = {\n  center: 'items-center justify-center h-full',\n  start: 'justify-start h-full',\n  end: 'justify-end h-full',\n  top: 'items-start justify-center w-full',\n  bottom: 'items-end justify-center h-full',\n}\n\nconst panelAlignmentMap: AlignmentMap = {\n  center: 'data-[closed]:scale-95 rounded-2xl',\n  start: 'data-[closed]:-translate-x-1/2 rounded-r-2xl',\n  end: 'data-[closed]:translate-x-1/2 rounded-l-2xl',\n  top: 'data-[closed]:-translate-y-1/2 rounded-b-2xl',\n  bottom:\n    'data-[closed]:translate-y-full rounded-t-2xl md:rounded-t-3xl max-h-[88vh] max-h-[88dvh]',\n}\n\nconst panelSizeMap: SizeMap = {\n  xs: 'max-w-xs',\n  sm: 'max-w-sm',\n  md: 'max-w-md',\n  lg: 'max-w-lg',\n  xl: 'max-w-xl',\n  '2xl': 'max-w-2xl',\n  full: 'w-full',\n}\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  isOpen,\n  onClose = () => {},\n  closeOnOutsideClick = true,\n  align = 'end',\n  size = 'md',\n  backdrop = true,\n  title,\n  description,\n  children,\n  footer,\n  footerSticky = false,\n  panelClass = '',\n  contentClass = '',\n  titleClass = '',\n  descriptionClass = '',\n  titleSticky = false,\n  showBackButton = false,\n  showCloseButton = true,\n  dragHandle,\n}) => {\n  const showTitleSection = Boolean(title || description || showBackButton || showCloseButton)\n  const shouldShowDragHandle = dragHandle ?? align === 'bottom'\n  const [viewportHeight, setViewportHeight] = React.useState<number | null>(null)\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      setViewportHeight(null)\n      return\n    }\n\n    const updateHeight = () => {\n      if (typeof window !== 'undefined' && window.visualViewport) {\n        setViewportHeight(window.visualViewport.height)\n      }\n    }\n\n    updateHeight()\n    const vv = typeof window !== 'undefined' ? window.visualViewport : null\n    vv?.addEventListener('resize', updateHeight)\n    vv?.addEventListener('scroll', updateHeight)\n\n    return () => {\n      vv?.removeEventListener('resize', updateHeight)\n      vv?.removeEventListener('scroll', updateHeight)\n    }\n  }, [isOpen])\n\n  const handleDialogClose = () => {\n    if (closeOnOutsideClick) {\n      onClose?.()\n    }\n  }\n\n  return (\n    <Dialog\n      open={isOpen}\n      as=\"div\"\n      className=\"relative z-50 focus:outline-none\"\n      onClose={handleDialogClose}\n      transition\n    >\n      {backdrop && (\n        <DialogBackdrop className=\"fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity duration-200\" />\n      )}\n\n      <div\n        className=\"fixed left-0 top-0 w-full\"\n        style={{ height: viewportHeight ? `${viewportHeight}px` : '100dvh' }}\n      >\n        <div className={buildClassName('flex', alignmentMap[align])}>\n          <DialogPanel\n            transition\n            className={buildClassName(\n              'w-full max-w-full bg-white dark:bg-gray-800 shadow-xl flex flex-col min-w-0',\n              'overflow-y-auto overflow-x-hidden overscroll-contain touch-pan-y [-webkit-overflow-scrolling:touch] duration-200 ease-out data-[closed]:opacity-0',\n              panelAlignmentMap[align],\n              panelSizeMap[size],\n              panelClass,\n            )}\n          >\n            {/* Top drag handle indicator for mobile bottom sheet */}\n            {shouldShowDragHandle && (\n              <div\n                className=\"w-12 h-1.5 rounded-full bg-gray-300 dark:bg-gray-600 mx-auto my-2.5 shrink-0 cursor-grab\"\n                data-testid=\"drawer-drag-handle\"\n              />\n            )}\n\n            {/* Header Section */}\n            {showTitleSection && (\n              <div\n                className={buildClassName(\n                  'space-y-1 py-3 px-4 md:px-6 flex flex-col border-b border-[var(--ui-border)] shrink-0',\n                  titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10',\n                )}\n              >\n                <div className=\"flex items-center justify-between gap-3 min-w-0\">\n                  <div className=\"flex items-center gap-2 min-w-0 flex-1\">\n                    {showBackButton && (\n                      <Button\n                        iconOnly\n                        aria-label=\"Back\"\n                        variant=\"plain\"\n                        theme=\"secondary\"\n                        size=\"xs\"\n                        onClick={onClose}\n                      >\n                        <ChevronLeftIcon className=\"size-4\" />\n                      </Button>\n                    )}\n                    {title && (\n                      <DialogTitle\n                        as=\"h3\"\n                        className={buildClassName(\n                          'text-lg font-semibold text-gray-900 dark:text-white truncate tracking-tight min-w-0',\n                          titleClass,\n                        )}\n                      >\n                        {title}\n                      </DialogTitle>\n                    )}\n                  </div>\n\n                  {showCloseButton && (\n                    <Button\n                      iconOnly\n                      aria-label=\"Close drawer\"\n                      variant=\"plain\"\n                      theme=\"secondary\"\n                      size=\"xs\"\n                      onClick={onClose}\n                      className=\"rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 shrink-0\"\n                    >\n                      <XIcon className=\"size-4\" />\n                    </Button>\n                  )}\n                </div>\n\n                {description && (\n                  <p\n                    className={buildClassName(\n                      'text-sm text-gray-500 dark:text-gray-400 font-normal truncate',\n                      descriptionClass,\n                    )}\n                  >\n                    {description}\n                  </p>\n                )}\n              </div>\n            )}\n\n            {/* Content Body */}\n            <div className={buildClassName('flex-1 p-4 md:p-6 space-y-4 min-w-0', contentClass)}>\n              {children}\n            </div>\n\n            {/* Footer Section */}\n            {footer && (\n              <div\n                className={buildClassName(\n                  'p-4 border-t border-[var(--ui-border-muted)] bg-white dark:bg-gray-800 shrink-0 min-w-0',\n                  footerSticky && 'sticky bottom-0 z-10',\n                )}\n              >\n                {footer}\n              </div>\n            )}\n          </DialogPanel>\n        </div>\n      </div>\n    </Dialog>\n  )\n}\n\nDrawer.displayName = 'Drawer'\n"],"names":["React","_jsxs","_jsx","ChevronLeftIcon","XIcon"],"mappings":"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"}

package/dist/es/components/Dropdown/Dropdown.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { Fragment, isValidElement, cloneElement } from 'react';
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const WIDTH_CLASS = {
+    auto: 'w-auto min-w-[120px]',
+    sm: 'w-44',
+    md: 'w-56',
+    lg: 'w-64',
+    xl: 'w-72',
+};
+const Dropdown = ({ triggerButton, renderTriggerButton, className, items, renderItem, itemsContainerClass, transition = true, anchor = 'bottom start', width = 'md', menuItemClass, onMenuClick, ...restProps }) => {
+    var _a, _b, _c, _d;
+    const widthClass = WIDTH_CLASS[width] || width || WIDTH_CLASS.md;
+    const { theme, variant, size, disabled } = restProps;
+    return (jsxs(Menu, { as: "div", className: "relative inline-block", children: [renderTriggerButton ? (jsx(MenuButton, { as: Fragment, children: (state) => {
+                    const rendered = renderTriggerButton(state);
+                    if (isValidElement(rendered) && className) {
+                        return cloneElement(rendered, {
+                            className: buildClassName(rendered.props.className, className),
+                        });
+                    }
+                    return rendered;
+                } })) : isValidElement(triggerButton) ? (jsx(MenuButton, { as: Fragment, children: cloneElement(triggerButton, {
+                    className: buildClassName(triggerButton.props.className, className),
+                    theme: (_a = triggerButton.props.theme) !== null && _a !== void 0 ? _a : theme,
+                    variant: (_b = triggerButton.props.variant) !== null && _b !== void 0 ? _b : variant,
+                    size: (_c = triggerButton.props.size) !== null && _c !== void 0 ? _c : size,
+                    disabled: (_d = triggerButton.props.disabled) !== null && _d !== void 0 ? _d : disabled,
+                }) })) : (jsx(MenuButton, { as: Fragment, children: triggerButton })), jsx(MenuItems, { transition: transition, anchor: anchor, className: buildClassName('origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50', 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', widthClass, itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxs(Fragment, { children: [item.groupTitle && (jsx("li", { className: "px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none", "data-testid": `dropdown-group-${item.id}`, children: item.groupTitle }, `group-${item.id}`)), jsx(MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled, active }) => (jsx("div", { onClick: () => {
+                                    var _a;
+                                    if (!disabled) {
+                                        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
+                                        onMenuClick === null || onMenuClick === void 0 ? void 0 : onMenuClick(item, idx);
+                                    }
+                                }, className: buildClassName('flex items-center justify-between gap-3 w-full px-2.5 py-1.5 rounded-lg text-sm transition-colors cursor-pointer select-none', item.danger
+                                    ? buildClassName('text-rose-600 dark:text-rose-400', active
+                                        ? 'bg-rose-50 dark:bg-rose-950/40'
+                                        : 'hover:bg-rose-50 dark:hover:bg-rose-950/40')
+                                    : buildClassName('text-gray-700 dark:text-gray-200', active
+                                        ? 'bg-gray-100 dark:bg-gray-700/80'
+                                        : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80'), disabled && 'opacity-40 cursor-not-allowed pointer-events-none', menuItemClass), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? (renderItem(item)) : (jsxs(Fragment$1, { children: [jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [item.icon && (jsx("span", { className: buildClassName('shrink-0', item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500'), children: item.icon })), jsxs("div", { className: "flex flex-col min-w-0", children: [item.label && jsx("span", { className: "font-medium truncate", children: item.label }), item.description && (jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 font-normal truncate", children: item.description }))] })] }), item.shortcut && (jsx("kbd", { className: "shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400", children: item.shortcut }))] })) })) }), item.divider && idx < items.length - 1 && (jsx("li", { className: "my-1 h-px bg-gray-200/80 dark:bg-gray-700/80", "data-testid": "dropdown-divider" }, `divider-${item.id}`))] }, item.id))) })] }));
+};
+Dropdown.displayName = 'Dropdown';
+
+export { Dropdown };
+//# sourceMappingURL=Dropdown.js.map

package/dist/es/components/Dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Fragment, cloneElement, isValidElement } from 'react'\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { DropdownItem, DropdownProps } from './Dropdown.types'\n\nconst WIDTH_CLASS: Record<string, string> = {\n  auto: 'w-auto min-w-[120px]',\n  sm: 'w-44',\n  md: 'w-56',\n  lg: 'w-64',\n  xl: 'w-72',\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n  triggerButton,\n  renderTriggerButton,\n  className,\n  items,\n  renderItem,\n  itemsContainerClass,\n  transition = true,\n  anchor = 'bottom start',\n  width = 'md',\n  menuItemClass,\n  onMenuClick,\n  ...restProps\n}: DropdownProps & Record<string, any>) => {\n  const widthClass = WIDTH_CLASS[width] || width || WIDTH_CLASS.md\n  const { theme, variant, size, disabled } = restProps\n\n  return (\n    <Menu as=\"div\" className=\"relative inline-block\">\n      {/* Trigger */}\n      {renderTriggerButton ? (\n        <MenuButton as={Fragment}>\n          {(state) => {\n            const rendered = renderTriggerButton(state)\n            if (isValidElement(rendered) && className) {\n              return cloneElement(rendered as React.ReactElement<any>, {\n                className: buildClassName((rendered.props as any).className, className),\n              })\n            }\n            return rendered as React.ReactElement\n          }}\n        </MenuButton>\n      ) : isValidElement(triggerButton) ? (\n        <MenuButton as={Fragment}>\n          {cloneElement(triggerButton as React.ReactElement<any>, {\n            className: buildClassName((triggerButton.props as any).className, className),\n            theme: (triggerButton.props as any).theme ?? theme,\n            variant: (triggerButton.props as any).variant ?? variant,\n            size: (triggerButton.props as any).size ?? size,\n            disabled: (triggerButton.props as any).disabled ?? disabled,\n          })}\n        </MenuButton>\n      ) : (\n        <MenuButton as={Fragment}>{triggerButton}</MenuButton>\n      )}\n\n      {/* Dropdown Panel */}\n      <MenuItems\n        transition={transition}\n        anchor={anchor}\n        className={buildClassName(\n          'origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50',\n          'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200',\n          'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0',\n          '[--anchor-gap:--spacing(1)]',\n          widthClass,\n          itemsContainerClass,\n        )}\n        data-testid=\"dropdown-items\"\n        as=\"ul\"\n      >\n        {items.map((item: DropdownItem, idx: number) => (\n          <Fragment key={item.id}>\n            {item.groupTitle && (\n              <li\n                key={`group-${item.id}`}\n                className=\"px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none\"\n                data-testid={`dropdown-group-${item.id}`}\n              >\n                {item.groupTitle}\n              </li>\n            )}\n            <MenuItem as=\"li\" disabled={item.disabled}>\n              {({ disabled, active }) => (\n                <div\n                  onClick={() => {\n                    if (!disabled) {\n                      item.onClick?.(item)\n                      onMenuClick?.(item, idx)\n                    }\n                  }}\n                  className={buildClassName(\n                    'flex items-center justify-between gap-3 w-full px-2.5 py-1.5 rounded-lg text-sm transition-colors cursor-pointer select-none',\n                    item.danger\n                      ? buildClassName(\n                          'text-rose-600 dark:text-rose-400',\n                          active\n                            ? 'bg-rose-50 dark:bg-rose-950/40'\n                            : 'hover:bg-rose-50 dark:hover:bg-rose-950/40',\n                        )\n                      : buildClassName(\n                          'text-gray-700 dark:text-gray-200',\n                          active\n                            ? 'bg-gray-100 dark:bg-gray-700/80'\n                            : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80',\n                        ),\n                    disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n                    menuItemClass,\n                  )}\n                  data-testid={`dropdown-item-${item.id}`}\n                >\n                  {renderItem ? (\n                    renderItem(item)\n                  ) : (\n                    <>\n                      <div className=\"flex items-center gap-2.5 min-w-0 flex-1\">\n                        {item.icon && (\n                          <span\n                            className={buildClassName(\n                              'shrink-0',\n                              item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500',\n                            )}\n                          >\n                            {item.icon}\n                          </span>\n                        )}\n                        <div className=\"flex flex-col min-w-0\">\n                          {item.label && <span className=\"font-medium truncate\">{item.label}</span>}\n                          {item.description && (\n                            <span className=\"text-xs text-gray-400 dark:text-gray-500 font-normal truncate\">\n                              {item.description}\n                            </span>\n                          )}\n                        </div>\n                      </div>\n                      {item.shortcut && (\n                        <kbd className=\"shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400\">\n                          {item.shortcut}\n                        </kbd>\n                      )}\n                    </>\n                  )}\n                </div>\n              )}\n            </MenuItem>\n            {item.divider && idx < items.length - 1 && (\n              <li\n                key={`divider-${item.id}`}\n                className=\"my-1 h-px bg-gray-200/80 dark:bg-gray-700/80\"\n                data-testid=\"dropdown-divider\"\n              />\n            )}\n          </Fragment>\n        ))}\n      </MenuItems>\n    </Menu>\n  )\n}\n\nDropdown.displayName = 'Dropdown'\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/es/components/EmptyState/index.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import SvgFolderPlus from '../Icons/FolderPlus.svg.js';
+import { HeadingText } from '../HeadingText/HeadingText.js';
+import { BodyText } from '../BodyText/BodyText.js';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const EmptyState = ({ title, description, className, action = null, }) => {
+    return (jsx("div", { className: buildClassName('w-full flex justify-center px-4 pt-16', className), children: jsxs("div", { className: "max-w-md flex flex-col items-center gap-4", children: [jsx(SvgFolderPlus, { className: "size-8 text-[var(--ui-text)]" }), jsx(HeadingText.SubTitle, { children: title }), description && (jsx(BodyText, { as: "p", className: "text-center", muted: true, small: true, children: description })), action] }) }));
+};
+
+export { EmptyState };
+//# sourceMappingURL=index.js.map

package/dist/es/components/EmptyState/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/EmptyState/index.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react'\nimport FolderPlusIcon from '../Icons/FolderPlus.svg'\nimport { HeadingText } from '../HeadingText'\nimport { BodyText } from '../BodyText'\nimport { buildClassName } from '../../utils/build-classname'\n\nexport interface EmptyStateProps {\n  title: string\n  description?: string\n  action?: ReactNode\n  className?: string\n}\n\nexport const EmptyState: React.FC<EmptyStateProps> = ({\n  title,\n  description,\n  className,\n  action = null,\n}) => {\n  return (\n    <div className={buildClassName('w-full flex justify-center px-4 pt-16', className)}>\n      <div className=\"max-w-md flex flex-col items-center gap-4\">\n        <FolderPlusIcon className=\"size-8 text-[var(--ui-text)]\" />\n        <HeadingText.SubTitle>{title}</HeadingText.SubTitle>\n        {description && (\n          <BodyText as=\"p\" className=\"text-center\" muted small>\n            {description}\n          </BodyText>\n        )}\n        {action}\n      </div>\n    </div>\n  )\n}\n"],"names":["_jsx","_jsxs","FolderPlusIcon"],"mappings":";;;;;;AAaO,MAAM,UAAU,GAA8B,CAAC,EACpD,KAAK,EACL,WAAW,EACX,SAAS,EACT,MAAM,GAAG,IAAI,GACd,KAAI;IACH,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,cAAc,CAAC,uCAAuC,EAAE,SAAS,CAAC,EAAA,QAAA,EAChFC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2CAA2C,EAAA,QAAA,EAAA,CACxDD,GAAA,CAACE,aAAc,EAAA,EAAC,SAAS,EAAC,8BAA8B,EAAA,CAAG,EAC3DF,GAAA,CAAC,WAAW,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAE,KAAK,EAAA,CAAwB,EACnD,WAAW,KACVA,GAAA,CAAC,QAAQ,EAAA,EAAC,EAAE,EAAC,GAAG,EAAC,SAAS,EAAC,aAAa,EAAC,KAAK,EAAA,IAAA,EAAC,KAAK,EAAA,IAAA,EAAA,QAAA,EACjD,WAAW,EAAA,CACH,CACZ,EACA,MAAM,CAAA,EAAA,CACH,EAAA,CACF;AAEV;;;;"}