@duro-app/ui 0.23.0 → 0.24.0

package/src/components/Table/Table.stories.tsx

@@ -9,6 +9,8 @@ import {Button} from '../Button/Button'
 import {ActionBar} from '../ActionBar/ActionBar'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 
+import {flexRender, createColumnHelper, useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, type SortingState, type ColumnFiltersState} from '@tanstack/react-table'
+
 const meta: Meta = {
   title: 'Components/Table',
   argTypes: {
@@ -426,3 +428,347 @@ export const AllVariants: Story = {
     await expect(tables.length).toBe(4)
   },
 }
+
+
+// --- Sorting: demonstrates click-to-sort with hover indicators ---
+
+function SortingDemo() {
+  const data = [
+    {name: 'Traefik', role: 'Reverse Proxy', port: 443, uptime: '14d 3h'},
+    {name: 'Pi-hole', role: 'DNS Filter', port: 80, uptime: '14d 3h'},
+    {name: 'Grafana', role: 'Monitoring', port: 3000, uptime: '7d 12h'},
+    {name: 'Portainer', role: 'Container Mgmt', port: 9000, uptime: '2d 5h'},
+    {name: 'Nginx', role: 'Web Server', port: 8080, uptime: '30d 1h'},
+  ]
+
+  const cols = [
+    createColumnHelper<typeof data[0]>().accessor('name', {header: 'Name', enableSorting: true}),
+    createColumnHelper<typeof data[0]>().accessor('role', {header: 'Role', enableSorting: true}),
+    createColumnHelper<typeof data[0]>().accessor('port', {header: 'Port', enableSorting: true}),
+    createColumnHelper<typeof data[0]>().accessor('uptime', {header: 'Uptime', enableSorting: true}),
+  ]
+
+  const [sorting, setSorting] = useState<SortingState>([])
+
+  const table = useReactTable({
+    data,
+    columns: cols,
+    state: {sorting},
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  })
+
+  return (
+    <Table.Root>
+      <Table.Header>
+        {table.getHeaderGroups().map((hg) => (
+          <Table.Row key={hg.id}>
+            {hg.headers.map((header) => (
+              <Table.HeaderCell key={header.id}>
+                <html.span
+                  style={fullFeaturedStyles.headerContent}
+                  onClick={header.column.getToggleSortingHandler()}
+                >
+                  {flexRender(header.column.columnDef.header, header.getContext())}
+                  <Table.SortIndicator column={header.column} />
+                </html.span>
+              </Table.HeaderCell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Header>
+      <Table.Body>
+        {table.getRowModel().rows.map((row) => (
+          <Table.Row key={row.id}>
+            {row.getVisibleCells().map((cell) => (
+              <Table.Cell key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </Table.Cell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  )
+}
+
+export const Sorting: Story = {
+  render: () => <SortingDemo />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+    await expect(canvas.getAllByRole('columnheader').length).toBe(4)
+  },
+}
+
+// --- Pagination: demonstrates page navigation ---
+
+function PaginationDemo() {
+  const data = generateUsers(35)
+
+  const cols = [
+    createColumnHelper<User>().accessor('name', {header: 'Name'}),
+    createColumnHelper<User>().accessor('role', {header: 'Role'}),
+    createColumnHelper<User>().accessor('email', {header: 'Email'}),
+  ]
+
+  const [pagination, setPagination] = useState({pageIndex: 0, pageSize: 10})
+
+  const table = useReactTable({
+    data,
+    columns: cols,
+    state: {pagination},
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  })
+
+  return (
+    <html.div style={fullFeaturedStyles.wrapper}>
+      <Table.Root>
+        <Table.Header>
+          {table.getHeaderGroups().map((hg) => (
+            <Table.Row key={hg.id}>
+              {hg.headers.map((header) => (
+                <Table.HeaderCell key={header.id}>
+                  {flexRender(header.column.columnDef.header, header.getContext())}
+                </Table.HeaderCell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Header>
+        <Table.Body>
+          {table.getRowModel().rows.map((row) => (
+            <Table.Row key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <Table.Cell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+      <Table.Pagination table={table} />
+    </html.div>
+  )
+}
+
+export const WithPagination: Story = {
+  render: () => <PaginationDemo />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByText('1 / 4')).toBeInTheDocument()
+    await expect(canvas.getByText('Next')).toBeInTheDocument()
+  },
+}
+
+// --- Filtering: demonstrates column filter inputs ---
+
+function FilteringDemo() {
+  const data = generateUsers(20)
+
+  const cols = [
+    createColumnHelper<User>().accessor('name', {header: 'Name', enableColumnFilter: true}),
+    createColumnHelper<User>().accessor('role', {header: 'Role', enableColumnFilter: false}),
+    createColumnHelper<User>().accessor('status', {header: 'Status', enableColumnFilter: false}),
+    createColumnHelper<User>().accessor('email', {header: 'Email', enableColumnFilter: true}),
+  ]
+
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+
+  const table = useReactTable({
+    data,
+    columns: cols,
+    state: {columnFilters},
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+  })
+
+  return (
+    <Table.Root>
+      <Table.Header>
+        {table.getHeaderGroups().map((hg) => (
+          <Table.Row key={hg.id}>
+            {hg.headers.map((header) => (
+              <Table.HeaderCell key={header.id}>
+                {flexRender(header.column.columnDef.header, header.getContext())}
+                {header.column.getCanFilter() && (
+                  <Table.ColumnFilter
+                    column={header.column}
+                    placeholder={`Filter ${header.column.id}...`}
+                  />
+                )}
+              </Table.HeaderCell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Header>
+      <Table.Body>
+        {table.getRowModel().rows.map((row) => (
+          <Table.Row key={row.id}>
+            {row.getVisibleCells().map((cell) => (
+              <Table.Cell key={cell.id}>
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </Table.Cell>
+            ))}
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  )
+}
+
+export const WithFiltering: Story = {
+  render: () => <FilteringDemo />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+    await expect(canvas.getByPlaceholderText('Filter name...')).toBeInTheDocument()
+    await expect(canvas.getByPlaceholderText('Filter email...')).toBeInTheDocument()
+  },
+}
+
+
+// --- FullFeatured: useDataTable with pagination, sorting, and filtering ---
+
+interface User {
+  name: string
+  role: string
+  status: string
+  email: string
+}
+
+const firstNames = [
+  'Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Hank',
+  'Iris', 'Jack', 'Karen', 'Leo', 'Mona', 'Nick', 'Olivia', 'Paul',
+  'Quinn', 'Rita', 'Sam', 'Tina', 'Uma', 'Vince', 'Wendy', 'Xander',
+  'Yara', 'Zach',
+]
+const lastNames = [
+  'Adams', 'Brown', 'Clark', 'Davis', 'Evans', 'Foster', 'Garcia',
+  'Hill', 'Ito', 'Jones', 'Kim', 'Lee', 'Moore', 'Nash', 'Owen',
+  'Patel', 'Quinn', 'Reed', 'Smith', 'Tran', 'Ueda', 'Voss', 'Wang',
+  'Xu', 'Yang', 'Zhang',
+]
+const roles = ['Admin', 'Editor', 'Viewer', 'Moderator', 'Analyst']
+const statuses = ['Active', 'Inactive', 'Pending', 'Suspended']
+
+function generateUsers(count: number): User[] {
+  return Array.from({length: count}, (_, i) => {
+    const first = firstNames[i % firstNames.length]
+    const last = lastNames[(i * 7) % lastNames.length]
+    return {
+      name: `${first} ${last}`,
+      role: roles[i % roles.length],
+      status: statuses[i % statuses.length],
+      email: `${first.toLowerCase()}.${last.toLowerCase()}@example.com`,
+    }
+  })
+}
+
+const fakeUsers = generateUsers(50)
+
+const columnHelper = createColumnHelper<User>()
+
+const fullFeaturedColumns = [
+  columnHelper.accessor('name', {
+    header: 'Name',
+    enableSorting: true,
+    enableColumnFilter: true,
+  }),
+  columnHelper.accessor('role', {
+    header: 'Role',
+    enableSorting: true,
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor('status', {
+    header: 'Status',
+    enableSorting: true,
+    enableColumnFilter: false,
+  }),
+  columnHelper.accessor('email', {
+    header: 'Email',
+    enableSorting: true,
+    enableColumnFilter: true,
+  }),
+]
+
+const fullFeaturedStyles = css.create({
+  wrapper: {display: 'flex', flexDirection: 'column', gap: 0},
+  headerContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    cursor: 'pointer',
+    userSelect: 'none',
+  },
+})
+
+function FullFeaturedDemo() {
+  const table = useDataTable(fakeUsers, fullFeaturedColumns, {
+    pagination: {pageSize: 10},
+    enableSorting: true,
+    enableFiltering: true,
+  })
+
+  return (
+    <html.div style={fullFeaturedStyles.wrapper}>
+      <Table.Root>
+        <Table.Header>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <Table.Row key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <Table.HeaderCell key={header.id}>
+                  <html.div
+                    style={fullFeaturedStyles.headerContent}
+                    onClick={header.column.getToggleSortingHandler()}
+                  >
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                    <Table.SortIndicator column={header.column} />
+                  </html.div>
+                  {(header.column.id === 'name' || header.column.id === 'email') && (
+                    <Table.ColumnFilter
+                      column={header.column}
+                      placeholder={`Filter ${header.column.id}...`}
+                    />
+                  )}
+                </Table.HeaderCell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Header>
+        <Table.Body>
+          {table.getRowModel().rows.map((row) => (
+            <Table.Row key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <Table.Cell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+      <Table.Pagination table={table} />
+    </html.div>
+  )
+}
+
+export const FullFeatured: Story = {
+  render: () => <FullFeaturedDemo />,
+  play: async ({canvas}) => {
+    await expect(canvas.getByRole('table')).toBeInTheDocument()
+
+    // Should render 10 body rows (pageSize) + 1 header row
+    const rows = canvas.getAllByRole('row')
+    await expect(rows.length).toBe(11)
+
+    // All 4 column headers present
+    const columnHeaders = canvas.getAllByRole('columnheader')
+    await expect(columnHeaders.length).toBe(4)
+
+    // Pagination is visible (50 rows / 10 per page = 5 pages)
+    await expect(canvas.getByText('1 / 5')).toBeInTheDocument()
+    await expect(canvas.getByText('Next')).toBeInTheDocument()
+    await expect(canvas.getByText('Previous')).toBeInTheDocument()
+  },
+}

package/src/components/Table/Table.tsx

@@ -1,6 +1,9 @@
 import {type ReactNode, type MutableRefObject, createContext, useContext, useRef, Children, isValidElement} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
+import {Pagination} from './Pagination'
+import {SortIndicator} from './SortIndicator'
+import {ColumnFilter} from './ColumnFilter'
 
 // --- Types ---
 
@@ -12,7 +15,7 @@ export type TableSize = 'sm' | 'md'
 interface TableContextValue {
   variant: TableVariant
   size: TableSize
-  /** Mutable ref: header Row writes inferred template, body Rows read it */
+  /** Mutable ref: header Row writes inferred template, Root reads it */
   inferredTemplateRef: MutableRefObject<string | null>
 }
 
@@ -28,6 +31,10 @@ function useTable() {
 
 const HeaderContext = createContext(false)
 
+// --- Template context: set after first render pass ---
+
+const TemplateContext = createContext<string | null>(null)
+
 // --- Root ---
 
 interface RootProps {
@@ -36,12 +43,49 @@ interface RootProps {
   size?: TableSize
 }
 
+/**
+ * Scans the React tree for HeaderCell elements to extract width props.
+ * Returns a grid-template-columns string.
+ */
+function extractTemplate(children: ReactNode): string {
+  const widths: string[] = []
+
+  function walk(node: ReactNode) {
+    Children.forEach(node, (child) => {
+      if (!isValidElement(child)) return
+      const props = child.props as Record<string, any>
+      // Check if this looks like a HeaderCell (has width prop or is inside Header)
+      const displayName = (child.type as any)?.name || (child.type as any)?.displayName || ''
+      if (displayName === 'HeaderCell' || child.type === HeaderCell) {
+        widths.push(props.width || '1fr')
+      } else if (props.children) {
+        walk(props.children)
+      }
+    })
+  }
+
+  walk(children)
+  return widths.length > 0 ? widths.join(' ') : ''
+}
+
 function Root({children, variant = 'default', size = 'md'}: RootProps) {
   const inferredTemplateRef = useRef<string | null>(null)
 
+  // Extract template from HeaderCell children synchronously
+  const template = extractTemplate(children)
+  if (template) {
+    inferredTemplateRef.current = template
+  }
+
   return (
     <TableContext.Provider value={{variant, size, inferredTemplateRef}}>
-      <html.div role="table" style={styles.root}>
+      <html.div
+        role="table"
+        style={[
+          styles.root,
+          template ? styles.gridColumns(template) : undefined,
+        ]}
+      >
         {children}
       </html.div>
     </TableContext.Provider>
@@ -68,7 +112,7 @@ function Body({children}: {children: ReactNode}) {
 
   return (
     <HeaderContext.Provider value={false}>
-      <html.div role="rowgroup">
+      <html.div role="rowgroup" style={styles.body}>
         {childArray.map((child, index) => {
           if (variant === 'striped') {
             return (
@@ -89,35 +133,17 @@ const RowIndexContext = createContext<number>(-1)
 // --- Row ---
 
 function Row({children}: {children: ReactNode}) {
-  const {variant, inferredTemplateRef} = useTable()
+  const {variant} = useTable()
   const isHeader = useContext(HeaderContext)
   const rowIndex = useContext(RowIndexContext)
   const isEvenRow = rowIndex >= 0 && rowIndex % 2 === 1
   const childArray = Children.toArray(children)
 
-  let template: string
-
-  if (isHeader) {
-    // Build template from HeaderCell width props
-    const widths: string[] = []
-    Children.forEach(children, (child) => {
-      if (isValidElement(child)) {
-        const props = child.props as {width?: string}
-        widths.push(props.width || '1fr')
-      }
-    })
-    template = widths.join(' ')
-    inferredTemplateRef.current = template
-  } else {
-    template = inferredTemplateRef.current ?? `repeat(${childArray.length}, 1fr)`
-  }
-
   return (
     <html.div
       role="row"
       style={[
         styles.row,
-        styles.gridColumns(template),
         !isHeader && styles.bodyRow,
         !isHeader && variant === 'striped' && isEvenRow && styles.stripedEven,
       ]}
@@ -143,7 +169,7 @@ function HeaderCell({
   'aria-label': ariaLabel,
 }: {
   children?: ReactNode
-  /** Column width: CSS value like '40px', '2fr', 'auto'. Defaults to '1fr'. */
+  /** Column width: CSS value like '40px', '2fr', 'max-content'. Defaults to '1fr'. */
   width?: string
   'aria-label'?: string
 }) {
@@ -198,4 +224,7 @@ export const Table = {
   Row,
   HeaderCell,
   Cell,
+  Pagination,
+  SortIndicator,
+  ColumnFilter,
 }

package/src/components/Table/styles.css.ts

@@ -4,8 +4,9 @@ import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 
 export const styles = css.create({
-  // Root
+  // Root — the single grid container for the entire table
   root: {
+    display: 'grid',
     borderWidth: 1,
     borderStyle: 'solid',
     borderColor: colors.border,
@@ -18,19 +19,28 @@ export const styles = css.create({
 
   // Header group
   header: {
+    display: 'grid',
+    gridColumn: '1 / -1',
+    gridTemplateColumns: 'subgrid',
     backgroundColor: colors.bgCard,
   },
 
-  // Row
+  // Body group
+  body: {
+    display: 'grid',
+    gridColumn: '1 / -1',
+    gridTemplateColumns: 'subgrid',
+  },
+
+  // Row — spans all columns, uses subgrid to share parent tracks
   row: {
     display: 'grid',
+    gridColumn: '1 / -1',
+    gridTemplateColumns: 'subgrid',
     borderBottomWidth: 1,
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
   },
-  rowLastChild: {
-    borderBottomWidth: 0,
-  },
   bodyRow: {
     backgroundColor: {
       default: 'transparent',
@@ -90,7 +100,7 @@ export const styles = css.create({
     borderRightWidth: 0,
   },
 
-  // Dynamic styles — simple identifier params only (StyleX constraint)
+  // Dynamic: grid columns applied on Root
   gridColumns: (template: string) => ({
     gridTemplateColumns: template,
   }),

package/src/components/Table/useDataTable.ts

@@ -0,0 +1,113 @@
+import {useState} from 'react'
+import {
+  useReactTable,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  type ColumnDef,
+  type SortingState,
+  type ColumnFiltersState,
+  type PaginationState,
+  type RowSelectionState,
+  type TableOptions,
+  type Table,
+} from '@tanstack/react-table'
+
+export interface UseDataTableOptions<TData> {
+  /** Initial pagination state */
+  pagination?: {pageSize?: number; pageIndex?: number}
+  /** Enable sorting on columns that don't explicitly disable it */
+  enableSorting?: boolean
+  /** Enable column filtering */
+  enableFiltering?: boolean
+  /** Enable row selection (checkbox) */
+  enableRowSelection?: boolean | ((row: any) => boolean)
+  /** Callback when row selection changes */
+  onRowSelectionChange?: (selection: RowSelectionState) => void
+}
+
+/**
+ * Thin wrapper around TanStack's useReactTable.
+ * Pre-configures row models for pagination, sorting, and filtering.
+ * Returns the full TanStack table instance.
+ *
+ * @example
+ * ```tsx
+ * const table = useDataTable(users, columns, {
+ *   pagination: { pageSize: 20 },
+ *   enableSorting: true,
+ *   enableFiltering: true,
+ * })
+ * ```
+ */
+export function useDataTable<TData>(
+  data: TData[],
+  columns: ColumnDef<TData, any>[],
+  options: UseDataTableOptions<TData> = {},
+): Table<TData> {
+  const {
+    pagination: paginationInit,
+    enableSorting = false,
+    enableFiltering = false,
+    enableRowSelection = false,
+    onRowSelectionChange: onSelectionChangeProp,
+  } = options
+
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: paginationInit?.pageIndex ?? 0,
+    pageSize: paginationInit?.pageSize ?? 10,
+  })
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({})
+
+  const handleRowSelectionChange = (updater: any) => {
+    setRowSelection(updater)
+    if (onSelectionChangeProp) {
+      const next = typeof updater === 'function' ? updater(rowSelection) : updater
+      onSelectionChangeProp(next)
+    }
+  }
+
+  const tableOptions: TableOptions<TData> = {
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+
+    // Sorting
+    ...(enableSorting && {
+      getSortedRowModel: getSortedRowModel(),
+      onSortingChange: setSorting,
+      state: {sorting},
+    }),
+
+    // Filtering
+    ...(enableFiltering && {
+      getFilteredRowModel: getFilteredRowModel(),
+      onColumnFiltersChange: setColumnFilters,
+    }),
+
+    // Pagination
+    ...(paginationInit && {
+      getPaginationRowModel: getPaginationRowModel(),
+      onPaginationChange: setPagination,
+    }),
+
+    // Row selection
+    ...(enableRowSelection && {
+      enableRowSelection: typeof enableRowSelection === 'function' ? enableRowSelection : true,
+      onRowSelectionChange: handleRowSelectionChange,
+    }),
+
+    // Merge all state
+    state: {
+      ...(enableSorting && {sorting}),
+      ...(enableFiltering && {columnFilters}),
+      ...(paginationInit && {pagination}),
+      ...(enableRowSelection && {rowSelection}),
+    },
+  }
+
+  return useReactTable(tableOptions)
+}

package/src/docs/helpers.tsx

@@ -64,7 +64,7 @@ export function TypeScaleTable({rows, label}: TypeScaleTableProps) {
   return (
     <html.div>
       {label && <html.h3 style={styles.label}>{label}</html.h3>}
-      <Table.Root columns={4} variant="striped" size="sm">
+      <Table.Root variant="striped" size="sm">
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Step</Table.HeaderCell>
@@ -106,7 +106,7 @@ export function TokenTable({tokens, label}: TokenTableProps) {
   return (
     <html.div>
       {label && <html.h3 style={styles.label}>{label}</html.h3>}
-      <Table.Root columns={3} variant="striped" size="sm">
+      <Table.Root variant="striped" size="sm">
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Token</Table.HeaderCell>

package/src/index.ts

@@ -8,6 +8,7 @@ export {Alert, type AlertVariant} from './components/Alert/Alert'
 export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
 export {Button, type ButtonVariant, type ButtonSize} from './components/Button/Button'
+export {ButtonGroup} from './components/ButtonGroup/ButtonGroup'
 export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
@@ -41,6 +42,8 @@ export {
   type StatusIconVariant,
 } from './components/StatusIcon/StatusIcon'
 export {Table, type TableVariant, type TableSize} from './components/Table/Table'
+// TanStack Table: consumers install @tanstack/react-table directly and use
+// Table.Pagination, Table.SortIndicator, Table.ColumnFilter for styled integration
 export {Tabs} from './components/Tabs/Tabs'
 export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
 export {ThemeProvider, type ThemeName} from './components/ThemeProvider/ThemeProvider'