periplo-ui 3.22.2 → 3.24.0

package/dist/components/Combobox/Combobox.d.ts

@@ -2,7 +2,7 @@ export type ComboboxProps<T> = {
     /** Unique identifier for the combobox */
     id?: string;
     /** Array of options to display in the combobox */
-    options: T[];
+    options: Array<T>;
     /** Currently selected value */
     value?: string;
     /** Callback fired when selection changes */
@@ -36,7 +36,7 @@ export type ComboboxProps<T> = {
     /** Whether the combobox has an error */
     error?: boolean | string;
     /** Custom function to filter options based on search term */
-    filterOptions?: (options: T[], searchTerm: string) => T[];
+    filterOptions?: (options: Array<T>, searchTerm: string) => Array<T>;
 };
 /**
  * A searchable combobox component with support for custom rendering, keyboard navigation, and search filtering.

package/dist/components/Combobox/Combobox.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { CaretUpDown, Check } from '@phosphor-icons/react';
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
-import { PopoverRoot, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
 import { useState, useMemo } from 'react';
 import { cn } from '../../lib/utils.js';
 import { Button, buttonVariants } from '../Button/Button.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../Command/Command.js';
+import { PopoverRoot, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
 
 const Combobox = ({
   id,
@@ -89,7 +89,7 @@ const Combobox = ({
                   className: `mr-2 h-4 w-4 ${value === optionValue ? "opacity-100" : "opacity-0"}`
                 }
               ),
-              getOptionLabel(option)
+              /* @__PURE__ */ jsx("span", { className: "block truncate", children: getOptionLabel(option) })
             ] }) }, optionValue);
           }) })
         ] }) })

package/dist/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { CaretUpDown, Check } from '@phosphor-icons/react'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\nimport { useMemo, useState } from 'react'\nimport { cn } from '../../lib/utils'\nimport { Button, buttonVariants } from '../Button'\n\nexport type ComboboxProps<T> = {\n  /** Unique identifier for the combobox */\n  id?: string\n  /** Array of options to display in the combobox */\n  options: T[]\n  /** Currently selected value */\n  value?: string\n  /** Callback fired when selection changes */\n  onChange: (value: string) => void\n  /** Function to get the unique identifier from an option. */\n  getOptionValue: (option: T) => string\n  /** Function to get the display text from an option. */\n  getOptionLabel: (option: T) => string\n  /** Custom render function for options. If not provided, defaults to showing a checkmark and label */\n  renderOption?: (option: T, isSelected: boolean) => React.ReactNode\n  /** Placeholder text shown when no option is selected */\n  placeholder?: string\n  /** Placeholder text for the search input field */\n  searchPlaceholder?: string\n  /** Message shown when no options match the search query */\n  emptyMessage?: string\n  /** Additional CSS classes to apply to the combobox trigger */\n  className?: string\n  /** Whether the combobox is disabled */\n  disabled?: boolean\n  /** Maximum height of the options list. Can be any valid CSS height value */\n  maxHeight?: string | number\n  /** Whether the selection can be cleared by selecting the same option again */\n  clearable?: boolean\n  /** Whether to close the dropdown when an option is selected */\n  closeOnSelect?: boolean\n  /** Whether the combobox is in a loading state */\n  loading?: boolean\n  /** Message to show when in loading state */\n  loadingPlaceholder?: string\n  /** Whether the combobox has an error */\n  error?: boolean | string\n  /** Custom function to filter options based on search term */\n  filterOptions?: (options: T[], searchTerm: string) => T[]\n}\n\n/**\n * A searchable combobox component with support for custom rendering, keyboard navigation, and search filtering.\n *\n * @example\n * ```tsx\n * interface User {\n *   id: string\n *   name: string\n *   email: string\n * }\n *\n * <Combobox<User>\n *   options={users}\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n * />\n * ```\n *\n * @example Custom filtering\n * ```tsx\n * <Combobox<User>\n *   options={users}\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n *   filterOptions={(options, searchTerm) =>\n *     options.filter(user =>\n *       user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n *       user.email.toLowerCase().includes(searchTerm.toLowerCase())\n *     )\n *   }\n * />\n * ```\n */\nexport const Combobox = <T extends object>({\n  id,\n  options,\n  value,\n  onChange,\n  getOptionValue,\n  getOptionLabel,\n  placeholder = 'Select...',\n  searchPlaceholder = 'Search...',\n  emptyMessage = 'No results found.',\n  className = 'w-60',\n  disabled = false,\n  maxHeight = '300px',\n  renderOption,\n  clearable = false,\n  closeOnSelect = true,\n  loading = false,\n  loadingPlaceholder = 'Cargando...',\n  error = false,\n  filterOptions,\n}: ComboboxProps<T>) => {\n  const [open, setOpen] = useState(false)\n  const [searchTerm, setSearchTerm] = useState('')\n\n  const selectedOption = options.find((option) => getOptionValue(option) === value)\n\n  const filteredOptions = useMemo(() => {\n    if (!filterOptions) {\n      return options.filter((option) => getOptionLabel(option).toLowerCase().includes(searchTerm.toLowerCase()))\n    }\n\n    return searchTerm ? filterOptions(options, searchTerm) : options\n  }, [filterOptions, options, searchTerm, getOptionLabel])\n\n  const handleSelect = (currentValue: string) => {\n    const newValue = clearable && currentValue === value ? '' : currentValue\n    onChange(newValue)\n    if (closeOnSelect) {\n      setOpen(false)\n    }\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-1\">\n      <PopoverRoot open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            type=\"button\"\n            disabled={disabled}\n            variant=\"text\"\n            className={cn(\n              buttonVariants({ variant: 'input' }),\n              'flex h-10 w-full justify-between rounded-lg',\n              open && 'border-neutral-950',\n              disabled && 'cursor-not-allowed',\n              error && 'border-error-400 focus-visible:border-error-700',\n              className,\n            )}\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n          >\n            <span className={cn('block truncate', !selectedOption && 'text-neutral-300')}>\n              {selectedOption ? getOptionLabel(selectedOption) : placeholder}\n            </span>\n            <CaretUpDown className=\"h-4 w-4 shrink-0 opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\">\n          <Command shouldFilter={false}>\n            <CommandInput\n              placeholder={searchPlaceholder}\n              disabled={loading}\n              value={searchTerm}\n              onValueChange={setSearchTerm}\n            />\n            <CommandList style={{ maxHeight }}>\n              {loading ? (\n                <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">\n                  {loadingPlaceholder}\n                </div>\n              ) : (\n                <>\n                  {filteredOptions.length === 0 && <CommandEmpty>{emptyMessage}</CommandEmpty>}\n                  <CommandGroup>\n                    {filteredOptions.map((option) => {\n                      const optionValue = getOptionValue(option)\n                      return (\n                        <CommandItem key={optionValue} value={optionValue} onSelect={handleSelect}>\n                          {renderOption ? (\n                            renderOption(option, value === optionValue)\n                          ) : (\n                            <>\n                              <Check\n                                className={`mr-2 h-4 w-4 ${value === optionValue ? 'opacity-100' : 'opacity-0'}`}\n                              />\n                              {getOptionLabel(option)}\n                            </>\n                          )}\n                        </CommandItem>\n                      )\n                    })}\n                  </CommandGroup>\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </PopoverRoot>\n      {typeof error === 'string' && <span className=\"text-sm text-error-500\">{error}</span>}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import { CaretUpDown, Check } from '@phosphor-icons/react'\nimport { useMemo, useState } from 'react'\n\nimport { cn } from '../../lib/utils'\nimport { Button, buttonVariants } from '../Button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../Command'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../Popover'\n\nexport type ComboboxProps<T> = {\n  /** Unique identifier for the combobox */\n  id?: string\n  /** Array of options to display in the combobox */\n  options: Array<T>\n  /** Currently selected value */\n  value?: string\n  /** Callback fired when selection changes */\n  onChange: (value: string) => void\n  /** Function to get the unique identifier from an option. */\n  getOptionValue: (option: T) => string\n  /** Function to get the display text from an option. */\n  getOptionLabel: (option: T) => string\n  /** Custom render function for options. If not provided, defaults to showing a checkmark and label */\n  renderOption?: (option: T, isSelected: boolean) => React.ReactNode\n  /** Placeholder text shown when no option is selected */\n  placeholder?: string\n  /** Placeholder text for the search input field */\n  searchPlaceholder?: string\n  /** Message shown when no options match the search query */\n  emptyMessage?: string\n  /** Additional CSS classes to apply to the combobox trigger */\n  className?: string\n  /** Whether the combobox is disabled */\n  disabled?: boolean\n  /** Maximum height of the options list. Can be any valid CSS height value */\n  maxHeight?: string | number\n  /** Whether the selection can be cleared by selecting the same option again */\n  clearable?: boolean\n  /** Whether to close the dropdown when an option is selected */\n  closeOnSelect?: boolean\n  /** Whether the combobox is in a loading state */\n  loading?: boolean\n  /** Message to show when in loading state */\n  loadingPlaceholder?: string\n  /** Whether the combobox has an error */\n  error?: boolean | string\n  /** Custom function to filter options based on search term */\n  filterOptions?: (options: Array<T>, searchTerm: string) => Array<T>\n}\n\n/**\n * A searchable combobox component with support for custom rendering, keyboard navigation, and search filtering.\n *\n * @example\n * ```tsx\n * interface User {\n *   id: string\n *   name: string\n *   email: string\n * }\n *\n * <Combobox<User>\n *   options={users}\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n * />\n * ```\n *\n * @example Custom filtering\n * ```tsx\n * <Combobox<User>\n *   options={users}\n *   value={selectedUserId}\n *   onChange={setSelectedUserId}\n *   getOptionValue={(user) => user.id}\n *   getOptionLabel={(user) => user.name}\n *   filterOptions={(options, searchTerm) =>\n *     options.filter(user =>\n *       user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||\n *       user.email.toLowerCase().includes(searchTerm.toLowerCase())\n *     )\n *   }\n * />\n * ```\n */\nexport const Combobox = <T extends object>({\n  id,\n  options,\n  value,\n  onChange,\n  getOptionValue,\n  getOptionLabel,\n  placeholder = 'Select...',\n  searchPlaceholder = 'Search...',\n  emptyMessage = 'No results found.',\n  className = 'w-60',\n  disabled = false,\n  maxHeight = '300px',\n  renderOption,\n  clearable = false,\n  closeOnSelect = true,\n  loading = false,\n  loadingPlaceholder = 'Cargando...',\n  error = false,\n  filterOptions,\n}: ComboboxProps<T>) => {\n  const [open, setOpen] = useState(false)\n  const [searchTerm, setSearchTerm] = useState('')\n\n  const selectedOption = options.find((option) => getOptionValue(option) === value)\n\n  const filteredOptions = useMemo(() => {\n    if (!filterOptions) {\n      return options.filter((option) => getOptionLabel(option).toLowerCase().includes(searchTerm.toLowerCase()))\n    }\n\n    return searchTerm ? filterOptions(options, searchTerm) : options\n  }, [filterOptions, options, searchTerm, getOptionLabel])\n\n  const handleSelect = (currentValue: string) => {\n    const newValue = clearable && currentValue === value ? '' : currentValue\n    onChange(newValue)\n    if (closeOnSelect) {\n      setOpen(false)\n    }\n  }\n\n  return (\n    <div className=\"flex w-full flex-col gap-1\">\n      <PopoverRoot open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            id={id}\n            type=\"button\"\n            disabled={disabled}\n            variant=\"text\"\n            className={cn(\n              buttonVariants({ variant: 'input' }),\n              'flex h-10 w-full justify-between rounded-lg',\n              open && 'border-neutral-950',\n              disabled && 'cursor-not-allowed',\n              error && 'border-error-400 focus-visible:border-error-700',\n              className,\n            )}\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n          >\n            <span className={cn('block truncate', !selectedOption && 'text-neutral-300')}>\n              {selectedOption ? getOptionLabel(selectedOption) : placeholder}\n            </span>\n            <CaretUpDown className=\"h-4 w-4 shrink-0 opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\">\n          <Command shouldFilter={false}>\n            <CommandInput\n              placeholder={searchPlaceholder}\n              disabled={loading}\n              value={searchTerm}\n              onValueChange={setSearchTerm}\n            />\n            <CommandList style={{ maxHeight }}>\n              {loading ? (\n                <div className=\"text-muted-foreground flex items-center justify-center py-6 text-sm\">\n                  {loadingPlaceholder}\n                </div>\n              ) : (\n                <>\n                  {filteredOptions.length === 0 && <CommandEmpty>{emptyMessage}</CommandEmpty>}\n                  <CommandGroup>\n                    {filteredOptions.map((option) => {\n                      const optionValue = getOptionValue(option)\n                      return (\n                        <CommandItem key={optionValue} value={optionValue} onSelect={handleSelect}>\n                          {renderOption ? (\n                            renderOption(option, value === optionValue)\n                          ) : (\n                            <>\n                              <Check\n                                className={`mr-2 h-4 w-4 ${value === optionValue ? 'opacity-100' : 'opacity-0'}`}\n                              />\n                              <span className=\"block truncate\">{getOptionLabel(option)}</span>\n                            </>\n                          )}\n                        </CommandItem>\n                      )\n                    })}\n                  </CommandGroup>\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </PopoverRoot>\n      {typeof error === 'string' && <span className=\"text-sm text-error-500\">{error}</span>}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/DataTable/DataTable.js

@@ -27,7 +27,9 @@ function DataTable({
   labels = {
     columnVisibilityButton: "Hide columns",
     filters: "Filters",
-    moreFilters: "More filters"
+    moreFilters: "More filters",
+    noOptionsTitle: "No data available",
+    noOptionsDescription: "Try adjusting your filters or search criteria"
   },
   className,
   tableClassName
@@ -161,7 +163,8 @@ function DataTable({
             pageSize,
             getRowId,
             rowSelection,
-            isSelectionStarted: selection?.isSelectionStarted ?? false
+            isSelectionStarted: selection?.isSelectionStarted ?? false,
+            labels
           }
         )
       ] }) }) }),

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-dynamic-delete */\n'use client'\n\nimport {\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n  VisibilityState,\n  Row,\n  PaginationState,\n  Updater,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table as TableComponent, TableHeader, TableHead, TableRow } from '../Table'\nimport { Typography } from '../Typography'\n\nimport { DataTableBody } from './components/DataTableBody'\nimport { DataTablePagination } from './components/DataTablePagination'\nimport { DataTableRowSelector } from './components/DataTableRowSelector'\nimport { DataTableSelectHeader } from './components/DataTableSelectHeader'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { useSelection } from './hooks/useSelection'\nimport { DataTableProps } from './types'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n */\nexport function DataTable<TData extends object>({\n  columns: userColumns,\n  data,\n  getRowId = (row: TData) => (row as { id: string }).id,\n  showColumnVisibilityControls = true,\n  isLoading = false,\n  pagination,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels = {\n    columnVisibilityButton: 'Hide columns',\n    filters: 'Filters',\n    moreFilters: 'More filters',\n  },\n  className,\n  tableClassName,\n}: DataTableProps<TData>) {\n  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n  const [pageIndex, setPageIndex] = React.useState(0)\n\n  const isBackendPagination = pagination !== undefined && 'onPageChange' in pagination\n\n  const total = isBackendPagination ? pagination.total : data.length\n  const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length)\n  const totalPages = Math.ceil(total / pageSize)\n\n  const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({\n    data,\n    getRowId,\n    selection,\n  })\n\n  const rowSelection = React.useMemo(\n    () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),\n    [selectedIds],\n  )\n\n  const SelectColumnHeader = React.useCallback(\n    () => (\n      <DataTableSelectHeader\n        isBackendPagination={isBackendPagination}\n        selectedIds={selectedIds}\n        data={data}\n        handleSelectAll={handleSelectAll}\n        isLoading={isLoading}\n      />\n    ),\n    [isBackendPagination, selectedIds, data, handleSelectAll, isLoading],\n  )\n\n  const SelectColumnCell = React.useCallback(\n    ({ row }: { row: Row<TData> }) => (\n      <DataTableRowSelector row={row} selectedIds={selectedIds} getRowId={getRowId} handleRowSelect={handleRowSelect} />\n    ),\n    [selectedIds, getRowId, handleRowSelect],\n  )\n\n  const tableColumns = React.useMemo(() => {\n    const baseColumns = [...userColumns]\n    if (selection !== undefined) {\n      const selectColumn = {\n        id: 'select',\n        size: 50,\n        cell: SelectColumnCell,\n        header: SelectColumnHeader,\n      }\n      baseColumns.unshift(selectColumn)\n    }\n    return baseColumns\n  }, [userColumns, selection, SelectColumnCell, SelectColumnHeader])\n\n  const toolbarSelectionProps = React.useMemo(() => {\n    if (isBackendPagination && selection) {\n      return {\n        isSelectionStarted: selection.isSelectionStarted,\n        onSelectionStart: selection.onSelectionStart,\n        onSelectionCancel: selection.onSelectionCancel,\n        selectionSummary: selection.labels?.selectionSummary,\n        labels: selection.labels,\n      }\n    }\n    return undefined\n  }, [isBackendPagination, selection])\n\n  const currentPage = isBackendPagination ? pagination.currentPage : pageIndex + 1\n  const handlePageChange = isBackendPagination ? pagination.onPageChange : (page: number) => setPageIndex(page - 1)\n\n  const tablePaginationState = React.useMemo(() => {\n    if (!pagination) {\n      return undefined\n    }\n    return {\n      pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n      pageSize,\n    }\n  }, [pagination, isBackendPagination, pageIndex, pageSize])\n\n  const tableGetPaginationRowModel = React.useMemo(() => {\n    return pagination && !isBackendPagination ? getPaginationRowModel() : undefined\n  }, [pagination, isBackendPagination])\n\n  const tableOnPaginationChange = React.useCallback(\n    (updater: Updater<PaginationState>) => {\n      if (typeof updater === 'function') {\n        const newState = updater({ pageIndex, pageSize })\n        setPageIndex(newState.pageIndex)\n      }\n    },\n    [pageIndex, pageSize, setPageIndex],\n  )\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: tableGetPaginationRowModel,\n    onColumnVisibilityChange: setColumnVisibility,\n    enableRowSelection: !!selection,\n    getRowId: getRowId,\n    state: {\n      columnVisibility,\n      rowSelection,\n      pagination: tablePaginationState,\n    },\n    manualPagination: isBackendPagination,\n    onPaginationChange: isBackendPagination ? undefined : tableOnPaginationChange,\n  })\n\n  return (\n    <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n      <DataTableToolbar\n        table={table}\n        showColumnVisibilityControls={showColumnVisibilityControls}\n        primaryFilters={primaryFilters}\n        secondaryFilters={secondaryFilters}\n        activePrimaryFiltersCount={activePrimaryFiltersCount}\n        activeSecondaryFiltersCount={activeSecondaryFiltersCount}\n        labels={labels}\n        selection={toolbarSelectionProps}\n      />\n\n      <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n        <div className=\"min-h-0 flex-1 overflow-auto\">\n          <div className=\"h-full overflow-auto\">\n            <TableComponent className=\"w-full overscroll-contain\" tableClassName={cn('table-fixed ', tableClassName)}>\n              <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => (\n                      <TableHead\n                        key={header.id}\n                        className=\"whitespace-normal\"\n                        style={{ width: header.column.columnDef.size }}\n                      >\n                        <Typography weight=\"medium\">\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(header.column.columnDef.header, header.getContext())}\n                        </Typography>\n                      </TableHead>\n                    ))}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <DataTableBody\n                table={table}\n                isLoading={isLoading}\n                pageSize={pageSize}\n                getRowId={getRowId}\n                rowSelection={rowSelection}\n                isSelectionStarted={selection?.isSelectionStarted ?? false}\n              />\n            </TableComponent>\n          </div>\n        </div>\n        {!!pagination && (\n          <div className=\"border-t px-4 py-2\">\n            <DataTablePagination\n              table={table}\n              total={total}\n              pageSize={pageSize}\n              currentPage={currentPage}\n              totalPages={totalPages}\n              onPageChange={handlePageChange}\n              isLoading={pagination.isLoading}\n              labels={pagination.labels}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiCO;AAAyC;AACrC;AACT;AACmD;AACpB;AACnB;AACZ;AACA;AACA;AAC4B;AACE;AAC9B;AACS;AACiB;AACf;AACI;AACf;AACA;AAEF;AACE;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAAuE;AACrE;AACA;AACA;AAGF;AAA2B;AAC+C;AAC5D;AAGd;AAAiC;AAE7B;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AAAA;AACF;AAEiE;AAGrE;AAA+B;AAEqF;AAE3E;AAGzC;AACE;AACA;AACE;AAAqB;AACf;AACE;AACA;AACE;AAEV;AAAgC;AAElC;AAAO;AAGT;AACE;AACE;AAAO;AACyB;AACF;AACC;AACO;AAClB;AACpB;AAEF;AAAO;AAGT;AACA;AAEA;AACE;AACE;AAAO;AAET;AAAO;AACyD;AAC9D;AACF;AAGF;AACE;AAAsE;AAGxE;AAAsC;AAElC;AACE;AACA;AAA+B;AACjC;AACF;AACkC;AAGpC;AAA4B;AAC1B;AACS;AACwB;AACV;AACG;AACJ;AACtB;AACO;AACL;AACA;AACY;AACd;AACkB;AACoC;AAGxD;AAEI;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AAAA;AACb;AAGE;AAGM;AAIQ;AAAC;AAAA;AAEW;AACmC;AAM7C;AAAA;AARY;AAatB;AACA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACqD;AAAA;AACvD;AAGN;AAGI;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACc;AACQ;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */\n/* eslint-disable @typescript-eslint/no-dynamic-delete */\n'use client'\n\nimport {\n  flexRender,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n  VisibilityState,\n  Row,\n  PaginationState,\n  Updater,\n} from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table as TableComponent, TableHeader, TableHead, TableRow } from '../Table'\nimport { Typography } from '../Typography'\n\nimport { DataTableBody } from './components/DataTableBody'\nimport { DataTablePagination } from './components/DataTablePagination'\nimport { DataTableRowSelector } from './components/DataTableRowSelector'\nimport { DataTableSelectHeader } from './components/DataTableSelectHeader'\nimport { DataTableToolbar } from './components/DataTableToolbar'\nimport { useSelection } from './hooks/useSelection'\nimport { DataTableProps } from './types'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * A feature-rich data table component built on top of TanStack Table.\n * Provides sorting, filtering, pagination, and column visibility controls.\n */\nexport function DataTable<TData extends object>({\n  columns: userColumns,\n  data,\n  getRowId = (row: TData) => (row as { id: string }).id,\n  showColumnVisibilityControls = true,\n  isLoading = false,\n  pagination,\n  primaryFilters,\n  secondaryFilters,\n  activePrimaryFiltersCount = 0,\n  activeSecondaryFiltersCount = 0,\n  selection,\n  labels = {\n    columnVisibilityButton: 'Hide columns',\n    filters: 'Filters',\n    moreFilters: 'More filters',\n    noOptionsTitle: 'No data available',\n    noOptionsDescription: 'Try adjusting your filters or search criteria',\n  },\n  className,\n  tableClassName,\n}: DataTableProps<TData>) {\n  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})\n  const [pageIndex, setPageIndex] = React.useState(0)\n\n  const isBackendPagination = pagination !== undefined && 'onPageChange' in pagination\n\n  const total = isBackendPagination ? pagination.total : data.length\n  const pageSize = pagination?.pageSize ?? (isLoading ? 10 : data.length)\n  const totalPages = Math.ceil(total / pageSize)\n\n  const { selectedIds, handleRowSelect, handleSelectAll } = useSelection({\n    data,\n    getRowId,\n    selection,\n  })\n\n  const rowSelection = React.useMemo(\n    () => Object.fromEntries(Array.from(selectedIds).map((id) => [id, true])),\n    [selectedIds],\n  )\n\n  const SelectColumnHeader = React.useCallback(\n    () => (\n      <DataTableSelectHeader\n        isBackendPagination={isBackendPagination}\n        selectedIds={selectedIds}\n        data={data}\n        handleSelectAll={handleSelectAll}\n        isLoading={isLoading}\n      />\n    ),\n    [isBackendPagination, selectedIds, data, handleSelectAll, isLoading],\n  )\n\n  const SelectColumnCell = React.useCallback(\n    ({ row }: { row: Row<TData> }) => (\n      <DataTableRowSelector row={row} selectedIds={selectedIds} getRowId={getRowId} handleRowSelect={handleRowSelect} />\n    ),\n    [selectedIds, getRowId, handleRowSelect],\n  )\n\n  const tableColumns = React.useMemo(() => {\n    const baseColumns = [...userColumns]\n    if (selection !== undefined) {\n      const selectColumn = {\n        id: 'select',\n        size: 50,\n        cell: SelectColumnCell,\n        header: SelectColumnHeader,\n      }\n      baseColumns.unshift(selectColumn)\n    }\n    return baseColumns\n  }, [userColumns, selection, SelectColumnCell, SelectColumnHeader])\n\n  const toolbarSelectionProps = React.useMemo(() => {\n    if (isBackendPagination && selection) {\n      return {\n        isSelectionStarted: selection.isSelectionStarted,\n        onSelectionStart: selection.onSelectionStart,\n        onSelectionCancel: selection.onSelectionCancel,\n        selectionSummary: selection.labels?.selectionSummary,\n        labels: selection.labels,\n      }\n    }\n    return undefined\n  }, [isBackendPagination, selection])\n\n  const currentPage = isBackendPagination ? pagination.currentPage : pageIndex + 1\n  const handlePageChange = isBackendPagination ? pagination.onPageChange : (page: number) => setPageIndex(page - 1)\n\n  const tablePaginationState = React.useMemo(() => {\n    if (!pagination) {\n      return undefined\n    }\n    return {\n      pageIndex: isBackendPagination ? pagination.currentPage - 1 : pageIndex,\n      pageSize,\n    }\n  }, [pagination, isBackendPagination, pageIndex, pageSize])\n\n  const tableGetPaginationRowModel = React.useMemo(() => {\n    return pagination && !isBackendPagination ? getPaginationRowModel() : undefined\n  }, [pagination, isBackendPagination])\n\n  const tableOnPaginationChange = React.useCallback(\n    (updater: Updater<PaginationState>) => {\n      if (typeof updater === 'function') {\n        const newState = updater({ pageIndex, pageSize })\n        setPageIndex(newState.pageIndex)\n      }\n    },\n    [pageIndex, pageSize, setPageIndex],\n  )\n\n  const table = useReactTable({\n    data,\n    columns: tableColumns,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: tableGetPaginationRowModel,\n    onColumnVisibilityChange: setColumnVisibility,\n    enableRowSelection: !!selection,\n    getRowId: getRowId,\n    state: {\n      columnVisibility,\n      rowSelection,\n      pagination: tablePaginationState,\n    },\n    manualPagination: isBackendPagination,\n    onPaginationChange: isBackendPagination ? undefined : tableOnPaginationChange,\n  })\n\n  return (\n    <div className={cn('flex h-full min-h-0 w-full flex-1 flex-col gap-2 overflow-hidden', className)}>\n      <DataTableToolbar\n        table={table}\n        showColumnVisibilityControls={showColumnVisibilityControls}\n        primaryFilters={primaryFilters}\n        secondaryFilters={secondaryFilters}\n        activePrimaryFiltersCount={activePrimaryFiltersCount}\n        activeSecondaryFiltersCount={activeSecondaryFiltersCount}\n        labels={labels}\n        selection={toolbarSelectionProps}\n      />\n\n      <div className=\"flex min-h-0 flex-1 flex-col rounded-md border bg-white\">\n        <div className=\"min-h-0 flex-1 overflow-auto\">\n          <div className=\"h-full overflow-auto\">\n            <TableComponent className=\"w-full overscroll-contain\" tableClassName={cn('table-fixed ', tableClassName)}>\n              <TableHeader className=\"sticky top-0 z-10 bg-neutral-50\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => (\n                      <TableHead\n                        key={header.id}\n                        className=\"whitespace-normal\"\n                        style={{ width: header.column.columnDef.size }}\n                      >\n                        <Typography weight=\"medium\">\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(header.column.columnDef.header, header.getContext())}\n                        </Typography>\n                      </TableHead>\n                    ))}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <DataTableBody\n                table={table}\n                isLoading={isLoading}\n                pageSize={pageSize}\n                getRowId={getRowId}\n                rowSelection={rowSelection}\n                isSelectionStarted={selection?.isSelectionStarted ?? false}\n                labels={labels}\n              />\n            </TableComponent>\n          </div>\n        </div>\n        {!!pagination && (\n          <div className=\"border-t px-4 py-2\">\n            <DataTablePagination\n              table={table}\n              total={total}\n              pageSize={pageSize}\n              currentPage={currentPage}\n              totalPages={totalPages}\n              onPageChange={handlePageChange}\n              isLoading={pagination.isLoading}\n              labels={pagination.labels}\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiCO;AAAyC;AACrC;AACT;AACmD;AACpB;AACnB;AACZ;AACA;AACA;AAC4B;AACE;AAC9B;AACS;AACiB;AACf;AACI;AACG;AACM;AACxB;AACA;AAEF;AACE;AACA;AAEA;AAEA;AACA;AACA;AAEA;AAAuE;AACrE;AACA;AACA;AAGF;AAA2B;AAC+C;AAC5D;AAGd;AAAiC;AAE7B;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AAAA;AACF;AAEiE;AAGrE;AAA+B;AAEqF;AAE3E;AAGzC;AACE;AACA;AACE;AAAqB;AACf;AACE;AACA;AACE;AAEV;AAAgC;AAElC;AAAO;AAGT;AACE;AACE;AAAO;AACyB;AACF;AACC;AACO;AAClB;AACpB;AAEF;AAAO;AAGT;AACA;AAEA;AACE;AACE;AAAO;AAET;AAAO;AACyD;AAC9D;AACF;AAGF;AACE;AAAsE;AAGxE;AAAsC;AAElC;AACE;AACA;AAA+B;AACjC;AACF;AACkC;AAGpC;AAA4B;AAC1B;AACS;AACwB;AACV;AACG;AACJ;AACtB;AACO;AACL;AACA;AACY;AACd;AACkB;AACoC;AAGxD;AAEI;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AACW;AAAA;AACb;AAGE;AAGM;AAIQ;AAAC;AAAA;AAEW;AACmC;AAM7C;AAAA;AARY;AAatB;AACA;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACqD;AACrD;AAAA;AACF;AAGN;AAGI;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACc;AACQ;AACH;AAAA;AAEvB;AAEJ;AAGN;;"}

package/dist/components/DataTable/components/DataTableBody.d.ts

@@ -7,6 +7,10 @@ type DataTableBodyProps<TData> = {
     readonly getRowId: RowIdentifierFn<TData>;
     readonly rowSelection: Record<string, boolean>;
     readonly isSelectionStarted: boolean;
+    readonly labels?: {
+        noOptionsTitle?: string;
+        noOptionsDescription?: string;
+    };
 };
-export declare function DataTableBody<TData>({ table, isLoading, pageSize, getRowId, rowSelection, isSelectionStarted, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableBody<TData>({ table, isLoading, pageSize, getRowId, rowSelection, isSelectionStarted, labels, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DataTable/components/DataTableBody.js

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { flexRender } from '@tanstack/react-table';
 import { Skeleton } from '../../Skeleton/Skeleton.js';
 import { TableBody, TableRow, TableCell } from '../../Table/Table.js';
@@ -17,7 +17,8 @@ function DataTableBody({
   pageSize,
   getRowId,
   rowSelection,
-  isSelectionStarted
+  isSelectionStarted,
+  labels
 }) {
   if (isLoading) {
     return /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: pageSize }).map((_unused, index) => /* @__PURE__ */ jsx(TableRow, { children: table.getAllColumns().filter((column) => column.getIsVisible()).map((column) => {
@@ -39,7 +40,12 @@ function DataTableBody({
   }
   const rows = table.getRowModel().rows;
   if (!rows.length) {
-    return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: table.getAllColumns().length, className: "h-[200px] text-center", children: /* @__PURE__ */ jsx(Typography, { color: "neutral", children: "No data available" }) }) }) });
+    const visibleColumns = table.getAllColumns().filter((col) => col.getIsVisible());
+    return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { className: "h-full", children: /* @__PURE__ */ jsx(TableCell, { colSpan: visibleColumns.length, className: "h-full p-0", children: /* @__PURE__ */ jsxs("div", { className: "mt-20 flex h-full w-full flex-col items-center justify-center", children: [
+      /* @__PURE__ */ jsx("img", { className: "mb-6 w-[200px] md:w-[300px]", src: "/table-empty-state.svg", alt: "No data available" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "title-md", weight: "semibold", className: "text-center", children: labels?.noOptionsTitle }),
+      /* @__PURE__ */ jsx(Typography, { variant: "title-sm", className: "text-center opacity-80", children: labels?.noOptionsDescription })
+    ] }) }) }) });
   }
   return /* @__PURE__ */ jsx(TableBody, { children: rows.map((row) => {
     const rowId = getRowId(row.original);

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { RowIdentifierFn } from '../types'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableBodyProps<TData> = {\n  readonly table: Table<TData>\n  readonly isLoading?: boolean\n  readonly pageSize: number\n  readonly getRowId: RowIdentifierFn<TData>\n  readonly rowSelection: Record<string, boolean>\n  readonly isSelectionStarted: boolean\n}\n\ntype TableRowProps<TData> = {\n  readonly row: Row<TData>\n  readonly isSelectable: boolean\n  readonly isSelected: boolean\n  readonly isSelectionStarted: boolean\n  readonly getRowId: (row: TData) => string\n  readonly handleRowSelect: (checked: boolean, row: TData) => void\n}\n\nfunction TableRowComponent<TData>({\n  row,\n  isSelected,\n}: Readonly<Omit<TableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>>) {\n  return (\n    <TableRow data-selected={isSelected}>\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n          <Typography>\n            {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n          </Typography>\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  pageSize,\n  getRowId,\n  rowSelection,\n  isSelectionStarted,\n}: DataTableBodyProps<TData>) {\n  if (isLoading) {\n    return (\n      <TableBody>\n        {Array.from({ length: pageSize }).map((_unused, index) => (\n          <TableRow key={`skeleton-row-${String(index)}`}>\n            {table\n              .getAllColumns()\n              .filter((column) => column.getIsVisible())\n              .map((column) => {\n                let skeletonClass = 'h-[20px] w-full'\n                if (column.id === 'actions') skeletonClass = 'h-8 w-8 shrink-0'\n                else if (column.id === 'select') skeletonClass = 'h-5 w-5 shrink-0'\n\n                let justifyClass = 'justify-center'\n                if (column.id === 'actions') justifyClass = 'justify-end'\n                else if (column.id === 'select') justifyClass = 'justify-start'\n\n                return (\n                  <TableCell\n                    key={`skeleton-cell-${String(index)}-${column.id}`}\n                    style={{ width: column.columnDef.size }}\n                  >\n                    <div className={cn('flex items-center', justifyClass)}>\n                      <Skeleton className={cn(skeletonClass)} />\n                    </div>\n                  </TableCell>\n                )\n              })}\n          </TableRow>\n        ))}\n      </TableBody>\n    )\n  }\n\n  const rows = table.getRowModel().rows\n\n  if (!rows.length) {\n    return (\n      <TableBody>\n        <TableRow>\n          <TableCell colSpan={table.getAllColumns().length} className=\"h-[200px] text-center\">\n            <Typography color=\"neutral\">No data available</Typography>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  return (\n    <TableBody>\n      {rows.map((row) => {\n        const rowId = getRowId(row.original)\n        const isSelected = rowSelection[rowId] ?? false\n        return (\n          <TableRowComponent key={rowId} row={row} isSelected={isSelected} isSelectionStarted={isSelectionStarted} />\n        )\n      })}\n    </TableBody>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AA2BA,SAAS,iBAAyB,CAAA;AAAA,EAChC,GAAA;AAAA,EACA;AACF,CAA0F,EAAA;AACxF,EAAA,2BACG,QAAS,EAAA,EAAA,eAAA,EAAe,UACtB,EAAA,QAAA,EAAA,GAAA,CAAI,iBAAkB,CAAA,GAAA,CAAI,CAAC,IAAA,yBACzB,SAAwB,EAAA,EAAA,KAAA,EAAO,EAAE,KAAO,EAAA,IAAA,CAAK,OAAO,SAAU,CAAA,IAAA,EAC7D,EAAA,QAAA,kBAAA,GAAA,CAAC,cACE,QAAK,EAAA,IAAA,CAAA,MAAA,CAAO,UAAU,IAAQ,IAAA,UAAA,CAAW,KAAK,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA,IAAA,CAAK,YAAY,CAAA,EACzF,KAHc,IAAK,CAAA,EAIrB,CACD,CACH,EAAA,CAAA;AAEJ;AAEO,SAAS,aAAqB,CAAA;AAAA,EACnC,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAA8B,EAAA;AAC5B,EAAA,IAAI,SAAW,EAAA;AACb,IACE,uBAAA,GAAA,CAAC,SACE,EAAA,EAAA,QAAA,EAAA,KAAA,CAAM,IAAK,CAAA,EAAE,MAAQ,EAAA,QAAA,EAAU,CAAA,CAAE,GAAI,CAAA,CAAC,OAAS,EAAA,KAAA,qBAC7C,GAAA,CAAA,QAAA,EAAA,EACE,QACE,EAAA,KAAA,CAAA,aAAA,EACA,CAAA,MAAA,CAAO,CAAC,MAAA,KAAW,MAAO,CAAA,YAAA,EAAc,CAAA,CACxC,GAAI,CAAA,CAAC,MAAW,KAAA;AACf,MAAA,IAAI,aAAgB,GAAA,iBAAA;AACpB,MAAI,IAAA,MAAA,CAAO,EAAO,KAAA,SAAA,EAA2B,aAAA,GAAA,kBAAA;AAAA,WACpC,IAAA,MAAA,CAAO,EAAO,KAAA,QAAA,EAA0B,aAAA,GAAA,kBAAA;AAEjD,MAAA,IAAI,YAAe,GAAA,gBAAA;AACnB,MAAI,IAAA,MAAA,CAAO,EAAO,KAAA,SAAA,EAA0B,YAAA,GAAA,aAAA;AAAA,WACnC,IAAA,MAAA,CAAO,EAAO,KAAA,QAAA,EAAyB,YAAA,GAAA,eAAA;AAEhD,MACE,uBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UAEC,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,UAAU,IAAK,EAAA;AAAA,UAEtC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,EAAA,CAAG,mBAAqB,EAAA,YAAY,CAClD,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,aAAa,GAAG,CAC1C,EAAA;AAAA,SAAA;AAAA,QALK,iBAAiB,MAAO,CAAA,KAAK,CAAC,CAAA,CAAA,EAAI,OAAO,EAAE,CAAA;AAAA,OAMlD;AAAA,KAEH,KAvBU,CAAgB,aAAA,EAAA,MAAA,CAAO,KAAK,CAAC,CAAA,CAwB5C,CACD,CACH,EAAA,CAAA;AAAA;AAIJ,EAAM,MAAA,IAAA,GAAO,KAAM,CAAA,WAAA,EAAc,CAAA,IAAA;AAEjC,EAAI,IAAA,CAAC,KAAK,MAAQ,EAAA;AAChB,IACE,uBAAA,GAAA,CAAC,aACC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EACC,8BAAC,SAAU,EAAA,EAAA,OAAA,EAAS,MAAM,aAAc,EAAA,CAAE,QAAQ,SAAU,EAAA,uBAAA,EAC1D,8BAAC,UAAW,EAAA,EAAA,KAAA,EAAM,WAAU,QAAiB,EAAA,mBAAA,EAAA,CAAA,EAC/C,GACF,CACF,EAAA,CAAA;AAAA;AAIJ,EAAA,uBACG,GAAA,CAAA,SAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACjB,IAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,GAAA,CAAI,QAAQ,CAAA;AACnC,IAAM,MAAA,UAAA,GAAa,YAAa,CAAA,KAAK,CAAK,IAAA,KAAA;AAC1C,IAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EAA8B,GAAU,EAAA,UAAA,EAAwB,sBAAzC,KAAiF,CAAA;AAAA,GAE5G,CACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DataTableBody.js","sources":["../../../../src/components/DataTable/components/DataTableBody.tsx"],"sourcesContent":["import { Table, flexRender, Row } from '@tanstack/react-table'\n\nimport { Skeleton } from '../../Skeleton'\nimport { TableBody, TableCell, TableRow } from '../../Table'\nimport { Typography } from '../../Typography'\nimport { RowIdentifierFn } from '../types'\n\nimport { cn } from '@/lib/utils'\n\ntype DataTableBodyProps<TData> = {\n  readonly table: Table<TData>\n  readonly isLoading?: boolean\n  readonly pageSize: number\n  readonly getRowId: RowIdentifierFn<TData>\n  readonly rowSelection: Record<string, boolean>\n  readonly isSelectionStarted: boolean\n  readonly labels?: {\n    noOptionsTitle?: string\n    noOptionsDescription?: string\n  }\n}\n\ntype TableRowProps<TData> = {\n  readonly row: Row<TData>\n  readonly isSelectable: boolean\n  readonly isSelected: boolean\n  readonly isSelectionStarted: boolean\n  readonly getRowId: (row: TData) => string\n  readonly handleRowSelect: (checked: boolean, row: TData) => void\n}\n\nfunction TableRowComponent<TData>({\n  row,\n  isSelected,\n}: Readonly<Omit<TableRowProps<TData>, 'isSelectable' | 'getRowId' | 'handleRowSelect'>>) {\n  return (\n    <TableRow data-selected={isSelected}>\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id} style={{ width: cell.column.columnDef.size }}>\n          <Typography>\n            {cell.column.columnDef.cell && flexRender(cell.column.columnDef.cell, cell.getContext())}\n          </Typography>\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTableBody<TData>({\n  table,\n  isLoading,\n  pageSize,\n  getRowId,\n  rowSelection,\n  isSelectionStarted,\n  labels,\n}: DataTableBodyProps<TData>) {\n  if (isLoading) {\n    return (\n      <TableBody>\n        {Array.from({ length: pageSize }).map((_unused, index) => (\n          <TableRow key={`skeleton-row-${String(index)}`}>\n            {table\n              .getAllColumns()\n              .filter((column) => column.getIsVisible())\n              .map((column) => {\n                let skeletonClass = 'h-[20px] w-full'\n                if (column.id === 'actions') skeletonClass = 'h-8 w-8 shrink-0'\n                else if (column.id === 'select') skeletonClass = 'h-5 w-5 shrink-0'\n\n                let justifyClass = 'justify-center'\n                if (column.id === 'actions') justifyClass = 'justify-end'\n                else if (column.id === 'select') justifyClass = 'justify-start'\n\n                return (\n                  <TableCell\n                    key={`skeleton-cell-${String(index)}-${column.id}`}\n                    style={{ width: column.columnDef.size }}\n                  >\n                    <div className={cn('flex items-center', justifyClass)}>\n                      <Skeleton className={cn(skeletonClass)} />\n                    </div>\n                  </TableCell>\n                )\n              })}\n          </TableRow>\n        ))}\n      </TableBody>\n    )\n  }\n\n  const rows = table.getRowModel().rows\n\n  if (!rows.length) {\n    const visibleColumns = table.getAllColumns().filter((col) => col.getIsVisible())\n\n    return (\n      <TableBody>\n        <TableRow className=\"h-full\">\n          <TableCell colSpan={visibleColumns.length} className=\"h-full p-0\">\n            <div className=\"mt-20 flex h-full w-full flex-col items-center justify-center\">\n              <img className=\"mb-6 w-[200px] md:w-[300px]\" src=\"/table-empty-state.svg\" alt=\"No data available\" />\n              <Typography variant=\"title-md\" weight=\"semibold\" className=\"text-center\">\n                {labels?.noOptionsTitle}\n              </Typography>\n              <Typography variant=\"title-sm\" className=\"text-center opacity-80\">\n                {labels?.noOptionsDescription}\n              </Typography>\n            </div>\n          </TableCell>\n        </TableRow>\n      </TableBody>\n    )\n  }\n\n  return (\n    <TableBody>\n      {rows.map((row) => {\n        const rowId = getRowId(row.original)\n        const isSelected = rowSelection[rowId] ?? false\n        return (\n          <TableRowComponent key={rowId} row={row} isSelected={isSelected} isSelectionStarted={isSelectionStarted} />\n        )\n      })}\n    </TableBody>\n  )\n}\n"],"names":[],"mappings":";;;;;;;AA+BA,SAAS,iBAAyB,CAAA;AAAA,EAChC,GAAA;AAAA,EACA;AACF,CAA0F,EAAA;AACxF,EAAA,2BACG,QAAS,EAAA,EAAA,eAAA,EAAe,UACtB,EAAA,QAAA,EAAA,GAAA,CAAI,iBAAkB,CAAA,GAAA,CAAI,CAAC,IAAA,yBACzB,SAAwB,EAAA,EAAA,KAAA,EAAO,EAAE,KAAO,EAAA,IAAA,CAAK,OAAO,SAAU,CAAA,IAAA,EAC7D,EAAA,QAAA,kBAAA,GAAA,CAAC,cACE,QAAK,EAAA,IAAA,CAAA,MAAA,CAAO,UAAU,IAAQ,IAAA,UAAA,CAAW,KAAK,MAAO,CAAA,SAAA,CAAU,IAAM,EAAA,IAAA,CAAK,YAAY,CAAA,EACzF,KAHc,IAAK,CAAA,EAIrB,CACD,CACH,EAAA,CAAA;AAEJ;AAEO,SAAS,aAAqB,CAAA;AAAA,EACnC,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAA8B,EAAA;AAC5B,EAAA,IAAI,SAAW,EAAA;AACb,IACE,uBAAA,GAAA,CAAC,SACE,EAAA,EAAA,QAAA,EAAA,KAAA,CAAM,IAAK,CAAA,EAAE,MAAQ,EAAA,QAAA,EAAU,CAAA,CAAE,GAAI,CAAA,CAAC,OAAS,EAAA,KAAA,qBAC7C,GAAA,CAAA,QAAA,EAAA,EACE,QACE,EAAA,KAAA,CAAA,aAAA,EACA,CAAA,MAAA,CAAO,CAAC,MAAA,KAAW,MAAO,CAAA,YAAA,EAAc,CAAA,CACxC,GAAI,CAAA,CAAC,MAAW,KAAA;AACf,MAAA,IAAI,aAAgB,GAAA,iBAAA;AACpB,MAAI,IAAA,MAAA,CAAO,EAAO,KAAA,SAAA,EAA2B,aAAA,GAAA,kBAAA;AAAA,WACpC,IAAA,MAAA,CAAO,EAAO,KAAA,QAAA,EAA0B,aAAA,GAAA,kBAAA;AAEjD,MAAA,IAAI,YAAe,GAAA,gBAAA;AACnB,MAAI,IAAA,MAAA,CAAO,EAAO,KAAA,SAAA,EAA0B,YAAA,GAAA,aAAA;AAAA,WACnC,IAAA,MAAA,CAAO,EAAO,KAAA,QAAA,EAAyB,YAAA,GAAA,eAAA;AAEhD,MACE,uBAAA,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UAEC,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,UAAU,IAAK,EAAA;AAAA,UAEtC,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,EAAA,CAAG,mBAAqB,EAAA,YAAY,CAClD,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,aAAa,GAAG,CAC1C,EAAA;AAAA,SAAA;AAAA,QALK,iBAAiB,MAAO,CAAA,KAAK,CAAC,CAAA,CAAA,EAAI,OAAO,EAAE,CAAA;AAAA,OAMlD;AAAA,KAEH,KAvBU,CAAgB,aAAA,EAAA,MAAA,CAAO,KAAK,CAAC,CAAA,CAwB5C,CACD,CACH,EAAA,CAAA;AAAA;AAIJ,EAAM,MAAA,IAAA,GAAO,KAAM,CAAA,WAAA,EAAc,CAAA,IAAA;AAEjC,EAAI,IAAA,CAAC,KAAK,MAAQ,EAAA;AAChB,IAAM,MAAA,cAAA,GAAiB,MAAM,aAAc,EAAA,CAAE,OAAO,CAAC,GAAA,KAAQ,GAAI,CAAA,YAAA,EAAc,CAAA;AAE/E,IAAA,2BACG,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAS,EAAA,EAAA,SAAA,EAAU,UAClB,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA,EAAU,OAAS,EAAA,cAAA,CAAe,QAAQ,SAAU,EAAA,YAAA,EACnD,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,WAAU,+DACb,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAI,SAAU,EAAA,6BAAA,EAA8B,GAAI,EAAA,wBAAA,EAAyB,KAAI,mBAAoB,EAAA,CAAA;AAAA,sBAClG,GAAA,CAAC,cAAW,OAAQ,EAAA,UAAA,EAAW,QAAO,UAAW,EAAA,SAAA,EAAU,aACxD,EAAA,QAAA,EAAA,MAAA,EAAQ,cACX,EAAA,CAAA;AAAA,0BACC,UAAW,EAAA,EAAA,OAAA,EAAQ,YAAW,SAAU,EAAA,wBAAA,EACtC,kBAAQ,oBACX,EAAA;AAAA,KACF,EAAA,CAAA,EACF,GACF,CACF,EAAA,CAAA;AAAA;AAIJ,EAAA,uBACG,GAAA,CAAA,SAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA;AACjB,IAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,GAAA,CAAI,QAAQ,CAAA;AACnC,IAAM,MAAA,UAAA,GAAa,YAAa,CAAA,KAAK,CAAK,IAAA,KAAA;AAC1C,IAAA,uBACG,GAAA,CAAA,iBAAA,EAAA,EAA8B,GAAU,EAAA,UAAA,EAAwB,sBAAzC,KAAiF,CAAA;AAAA,GAE5G,CACH,EAAA,CAAA;AAEJ;;;;"}

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

@@ -123,6 +123,10 @@ export type DataTableProps<TData> = {
     filters?: string
     /** Text for the more filters button when both primary and secondary filters are present (default: "More filters") */
     moreFilters?: string
+    /** Text for the no options message (default: "No data available") */
+    noOptionsTitle?: string
+    /** Text for the no options description (default: "Try adjusting your filters or search criteria") */
+    noOptionsDescription?: string
   }
   /** Optional className for the table container */
   readonly className?: string

package/dist/components/Progress/Progress.d.ts

@@ -1,4 +1,85 @@
-import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
-declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import * as React from 'react';
+declare const progressVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    radius?: "none" | "sm" | "md" | "lg" | "full" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ProgressProps = {
+    /**
+     * The variant of the progress bar.
+     * 'default': A standard progress bar that requires a `value` prop.
+     * 'fake': A progress bar that simulates progress over a given `duration`.
+     * 'indeterminate': A progress bar for when the progress is unknown.
+     * @default 'default'
+     */
+    variant?: 'default' | 'fake' | 'indeterminate';
+    /**
+     * The color of the progress indicator. Should be a Tailwind CSS background color class.
+     * @default 'bg-accent'
+     */
+    indicatorColor?: string;
+    /**
+     * The total duration of the fake progress in milliseconds.
+     * Only used when `variant` is 'fake'.
+     * @default 10000
+     */
+    duration?: number;
+    /**
+     * A callback function to be called when the fake progress is complete.
+     * Only used when `variant` is 'fake'.
+     */
+    onComplete?: () => void;
+    /**
+     * Whether to start the fake progress automatically.
+     * Only used when `variant` is 'fake'.
+     * @default true
+     */
+    autoStart?: boolean;
+    /**
+     * The border radius of the progress bar and indicator.
+     * @default 'full'
+     */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+} & React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & VariantProps<typeof progressVariants>;
+declare const Progress: React.ForwardRefExoticComponent<{
+    /**
+     * The variant of the progress bar.
+     * 'default': A standard progress bar that requires a `value` prop.
+     * 'fake': A progress bar that simulates progress over a given `duration`.
+     * 'indeterminate': A progress bar for when the progress is unknown.
+     * @default 'default'
+     */
+    variant?: "default" | "fake" | "indeterminate";
+    /**
+     * The color of the progress indicator. Should be a Tailwind CSS background color class.
+     * @default 'bg-accent'
+     */
+    indicatorColor?: string;
+    /**
+     * The total duration of the fake progress in milliseconds.
+     * Only used when `variant` is 'fake'.
+     * @default 10000
+     */
+    duration?: number;
+    /**
+     * A callback function to be called when the fake progress is complete.
+     * Only used when `variant` is 'fake'.
+     */
+    onComplete?: () => void;
+    /**
+     * Whether to start the fake progress automatically.
+     * Only used when `variant` is 'fake'.
+     * @default true
+     */
+    autoStart?: boolean;
+    /**
+     * The border radius of the progress bar and indicator.
+     * @default 'full'
+     */
+    radius?: "none" | "sm" | "md" | "lg" | "full";
+} & Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    radius?: "none" | "sm" | "md" | "lg" | "full" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 export { Progress };

package/dist/components/Progress/Progress.js

@@ -1,23 +1,78 @@
 import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { useFakeProgress } from './hooks/useFakeProgress.js';
 import { cn } from '../../lib/utils.js';
 
-const Progress = React.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
-  ProgressPrimitive.Root,
-  {
-    ref,
-    className: cn("relative h-4 w-full overflow-hidden rounded-full bg-background-300", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      ProgressPrimitive.Indicator,
+const progressVariants = cva("relative w-full overflow-hidden bg-background-300", {
+  variants: {
+    size: {
+      sm: "h-2",
+      md: "h-4",
+      lg: "h-6"
+    },
+    radius: {
+      none: "rounded-none",
+      sm: "rounded-sm",
+      md: "rounded-md",
+      lg: "rounded-lg",
+      full: "rounded-full"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+const Progress = React.forwardRef(
+  ({
+    className,
+    value,
+    variant = "default",
+    size,
+    indicatorColor = "bg-accent",
+    duration = 1e4,
+    onComplete,
+    autoStart = true,
+    radius = "full",
+    ...props
+  }, ref) => {
+    const { progress: fakeProgressValue } = useFakeProgress({
+      duration,
+      onComplete,
+      autoStart: variant === "fake" ? autoStart : false
+    });
+    const progressValue = variant === "fake" ? fakeProgressValue : value;
+    return /* @__PURE__ */ jsx(
+      ProgressPrimitive.Root,
       {
-        className: "h-full w-full flex-1 bg-accent transition-all",
-        style: { transform: `translateX(-${100 - (value ?? 0)}%)` }
+        ref,
+        className: cn(progressVariants({ size, radius }), className),
+        ...props,
+        value: progressValue,
+        children: variant === "indeterminate" ? /* @__PURE__ */ jsx(
+          ProgressPrimitive.Indicator,
+          {
+            className: cn(
+              progressVariants({ radius }),
+              "animate-indeterminate h-full w-full flex-1 bg-primary",
+              indicatorColor
+            ),
+            style: {
+              transform: "translateX(-50%)"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
+          ProgressPrimitive.Indicator,
+          {
+            className: cn(progressVariants({ radius }), "h-full w-full flex-1 transition-all", indicatorColor),
+            style: { transform: `translateX(-${(100 - (progressValue ?? 0)).toString()}%)` }
+          }
+        )
       }
-    )
+    );
   }
-));
+);
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 export { Progress };

package/dist/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\n\nimport { cn } from '@/lib/utils'\n\nconst Progress = React.forwardRef<\n  React.ComponentRef<typeof ProgressPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>\n>(({ className, value, ...props }, ref) => (\n  <ProgressPrimitive.Root\n    ref={ref}\n    className={cn('relative h-4 w-full overflow-hidden rounded-full bg-background-300', className)}\n    {...props}\n  >\n    <ProgressPrimitive.Indicator\n      className=\"h-full w-full flex-1 bg-accent transition-all\"\n      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}\n    />\n  </ProgressPrimitive.Root>\n))\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n"],"names":[],"mappings":";;;;;AAKM,MAAA,QAAA,GAAW,KAAM,CAAA,UAAA,CAGrB,CAAC,EAAE,WAAW,KAAO,EAAA,GAAG,KAAM,EAAA,EAAG,GACjC,qBAAA,GAAA;AAAA,EAAC,iBAAkB,CAAA,IAAA;AAAA,EAAlB;AAAA,IACC,GAAA;AAAA,IACA,SAAA,EAAW,EAAG,CAAA,oEAAA,EAAsE,SAAS,CAAA;AAAA,IAC5F,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA;AAAA,MAAC,iBAAkB,CAAA,SAAA;AAAA,MAAlB;AAAA,QACC,SAAU,EAAA,+CAAA;AAAA,QACV,OAAO,EAAE,SAAA,EAAW,eAAe,GAAO,IAAA,KAAA,IAAS,EAAE,CAAK,EAAA,CAAA;AAAA;AAAA;AAC5D;AACF,CACD;AACD,QAAS,CAAA,WAAA,GAAc,kBAAkB,IAAK,CAAA,WAAA;;;;"}
+{"version":3,"file":"Progress.js","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as ProgressPrimitive from '@radix-ui/react-progress'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFakeProgress } from '@/components/Progress/hooks/useFakeProgress'\nimport { cn } from '@/lib/utils'\n\nconst progressVariants = cva('relative w-full overflow-hidden bg-background-300', {\n  variants: {\n    size: {\n      sm: 'h-2',\n      md: 'h-4',\n      lg: 'h-6',\n    },\n    radius: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      full: 'rounded-full',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nexport type ProgressProps = {\n  /**\n   * The variant of the progress bar.\n   * 'default': A standard progress bar that requires a `value` prop.\n   * 'fake': A progress bar that simulates progress over a given `duration`.\n   * 'indeterminate': A progress bar for when the progress is unknown.\n   * @default 'default'\n   */\n  variant?: 'default' | 'fake' | 'indeterminate'\n  /**\n   * The color of the progress indicator. Should be a Tailwind CSS background color class.\n   * @default 'bg-accent'\n   */\n  indicatorColor?: string\n  /**\n   * The total duration of the fake progress in milliseconds.\n   * Only used when `variant` is 'fake'.\n   * @default 10000\n   */\n  duration?: number\n  /**\n   * A callback function to be called when the fake progress is complete.\n   * Only used when `variant` is 'fake'.\n   */\n  onComplete?: () => void\n  /**\n   * Whether to start the fake progress automatically.\n   * Only used when `variant` is 'fake'.\n   * @default true\n   */\n  autoStart?: boolean\n  /**\n   * The border radius of the progress bar and indicator.\n   * @default 'full'\n   */\n  radius?: 'none' | 'sm' | 'md' | 'lg' | 'full'\n} & React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> &\n  VariantProps<typeof progressVariants>\n\nconst Progress = React.forwardRef<React.ComponentRef<typeof ProgressPrimitive.Root>, ProgressProps>(\n  (\n    {\n      className,\n      value,\n      variant = 'default',\n      size,\n      indicatorColor = 'bg-accent',\n      duration = 10000,\n      onComplete,\n      autoStart = true,\n      radius = 'full',\n      ...props\n    },\n    ref,\n  ) => {\n    const { progress: fakeProgressValue } = useFakeProgress({\n      duration,\n      onComplete,\n      autoStart: variant === 'fake' ? autoStart : false,\n    })\n\n    const progressValue = variant === 'fake' ? fakeProgressValue : value\n\n    return (\n      <ProgressPrimitive.Root\n        ref={ref}\n        className={cn(progressVariants({ size, radius }), className)}\n        {...props}\n        value={progressValue}\n      >\n        {variant === 'indeterminate' ? (\n          <ProgressPrimitive.Indicator\n            className={cn(\n              progressVariants({ radius }),\n              'animate-indeterminate h-full w-full flex-1 bg-primary',\n              indicatorColor,\n            )}\n            style={{\n              transform: 'translateX(-50%)',\n            }}\n          />\n        ) : (\n          <ProgressPrimitive.Indicator\n            className={cn(progressVariants({ radius }), 'h-full w-full flex-1 transition-all', indicatorColor)}\n            style={{ transform: `translateX(-${(100 - (progressValue ?? 0)).toString()}%)` }}\n          />\n        )}\n      </ProgressPrimitive.Root>\n    )\n  },\n)\nProgress.displayName = ProgressPrimitive.Root.displayName\n\nexport { Progress }\n"],"names":[],"mappings":";;;;;;;AAOA,MAAM,gBAAA,GAAmB,IAAI,mDAAqD,EAAA;AAAA,EAChF,QAAU,EAAA;AAAA,IACR,IAAM,EAAA;AAAA,MACJ,EAAI,EAAA,KAAA;AAAA,MACJ,EAAI,EAAA,KAAA;AAAA,MACJ,EAAI,EAAA;AAAA,KACN;AAAA,IACA,MAAQ,EAAA;AAAA,MACN,IAAM,EAAA,cAAA;AAAA,MACN,EAAI,EAAA,YAAA;AAAA,MACJ,EAAI,EAAA,YAAA;AAAA,MACJ,EAAI,EAAA,YAAA;AAAA,MACJ,IAAM,EAAA;AAAA;AACR,GACF;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA;AAAA;AAEV,CAAC,CAAA;AAyCD,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EACrB,CACE;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,IACA,cAAiB,GAAA,WAAA;AAAA,IACjB,QAAW,GAAA,GAAA;AAAA,IACX,UAAA;AAAA,IACA,SAAY,GAAA,IAAA;AAAA,IACZ,MAAS,GAAA,MAAA;AAAA,IACT,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,EAAE,QAAA,EAAU,iBAAkB,EAAA,GAAI,eAAgB,CAAA;AAAA,MACtD,QAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA,EAAW,OAAY,KAAA,MAAA,GAAS,SAAY,GAAA;AAAA,KAC7C,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,OAAY,KAAA,MAAA,GAAS,iBAAoB,GAAA,KAAA;AAE/D,IACE,uBAAA,GAAA;AAAA,MAAC,iBAAkB,CAAA,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,GAAG,gBAAiB,CAAA,EAAE,MAAM,MAAO,EAAC,GAAG,SAAS,CAAA;AAAA,QAC1D,GAAG,KAAA;AAAA,QACJ,KAAO,EAAA,aAAA;AAAA,QAEN,sBAAY,eACX,mBAAA,GAAA;AAAA,UAAC,iBAAkB,CAAA,SAAA;AAAA,UAAlB;AAAA,YACC,SAAW,EAAA,EAAA;AAAA,cACT,gBAAA,CAAiB,EAAE,MAAA,EAAQ,CAAA;AAAA,cAC3B,uDAAA;AAAA,cACA;AAAA,aACF;AAAA,YACA,KAAO,EAAA;AAAA,cACL,SAAW,EAAA;AAAA;AACb;AAAA,SAGF,mBAAA,GAAA;AAAA,UAAC,iBAAkB,CAAA,SAAA;AAAA,UAAlB;AAAA,YACC,SAAA,EAAW,GAAG,gBAAiB,CAAA,EAAE,QAAQ,CAAA,EAAG,uCAAuC,cAAc,CAAA;AAAA,YACjG,KAAA,EAAO,EAAE,SAAW,EAAA,CAAA,YAAA,EAAA,CAAgB,OAAO,aAAiB,IAAA,CAAA,CAAA,EAAI,QAAS,EAAC,CAAK,EAAA,CAAA;AAAA;AAAA;AACjF;AAAA,KAEJ;AAAA;AAGN;AACA,QAAS,CAAA,WAAA,GAAc,kBAAkB,IAAK,CAAA,WAAA;;;;"}

package/dist/components/Progress/hooks/useFakeProgress.d.ts

@@ -0,0 +1,40 @@
+type UseFakeProgressOptions = {
+    /**
+     * The total duration of the fake progress in milliseconds.
+     * @default 3000
+     */
+    duration?: number;
+    /**
+     * A callback function to be called when the progress is complete.
+     */
+    onComplete?: () => void;
+    /**
+     * Whether to start the progress automatically.
+     * @default true
+     */
+    autoStart?: boolean;
+};
+type UseFakeProgressReturn = {
+    /**
+     * The current progress value (0-100).
+     */
+    progress: number;
+    /**
+     * Whether the progress is complete.
+     */
+    isComplete: boolean;
+    /**
+     * Whether the progress is currently running.
+     */
+    isRunning: boolean;
+    /**
+     * A function to start the progress.
+     */
+    start: () => void;
+    /**
+     * A function to reset the progress.
+     */
+    reset: () => void;
+};
+export declare const useFakeProgress: ({ duration, onComplete, autoStart, }?: UseFakeProgressOptions) => UseFakeProgressReturn;
+export {};

package/dist/components/Progress/hooks/useFakeProgress.js

@@ -0,0 +1,75 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+const useFakeProgress = ({
+  duration = 3e3,
+  onComplete,
+  autoStart = true
+} = {}) => {
+  const [progress, setProgress] = useState(0);
+  const [isComplete, setIsComplete] = useState(false);
+  const [isRunning, setIsRunning] = useState(false);
+  const animationRef = useRef(0);
+  const startTimeRef = useRef(0);
+  const calculateRealisticProgress = useCallback((elapsed, total) => {
+    const normalizedTime = Math.min(elapsed / total, 1);
+    const easedTime = 1 - (1 - normalizedTime) ** 3;
+    const progress2 = easedTime * 99.9;
+    return progress2;
+  }, []);
+  const updateProgress = useCallback(() => {
+    if (!startTimeRef.current) {
+      startTimeRef.current = Date.now();
+    }
+    const currentTime = Date.now();
+    const elapsed = currentTime - startTimeRef.current;
+    if (elapsed >= duration) {
+      setProgress(100);
+      setIsComplete(true);
+      setIsRunning(false);
+      onComplete?.();
+      return;
+    }
+    const newProgress = calculateRealisticProgress(elapsed, duration);
+    setProgress(newProgress);
+    animationRef.current = requestAnimationFrame(updateProgress);
+  }, [duration, calculateRealisticProgress, onComplete]);
+  const start = useCallback(() => {
+    setProgress(0);
+    setIsComplete(false);
+    setIsRunning(true);
+    startTimeRef.current = 0;
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+    }
+    animationRef.current = requestAnimationFrame(updateProgress);
+  }, [updateProgress]);
+  const reset = useCallback(() => {
+    setProgress(0);
+    setIsComplete(false);
+    setIsRunning(false);
+    startTimeRef.current = 0;
+    if (animationRef.current) {
+      cancelAnimationFrame(animationRef.current);
+    }
+  }, []);
+  useEffect(() => {
+    if (autoStart) {
+      start();
+    }
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+      }
+    };
+  }, [start, autoStart]);
+  return {
+    progress,
+    isComplete,
+    isRunning,
+    start,
+    reset
+  };
+};
+
+export { useFakeProgress };
+//# sourceMappingURL=useFakeProgress.js.map

package/dist/components/Progress/hooks/useFakeProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFakeProgress.js","sources":["../../../../src/components/Progress/hooks/useFakeProgress.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\n\ntype UseFakeProgressOptions = {\n  /**\n   * The total duration of the fake progress in milliseconds.\n   * @default 3000\n   */\n  duration?: number\n  /**\n   * A callback function to be called when the progress is complete.\n   */\n  onComplete?: () => void\n  /**\n   * Whether to start the progress automatically.\n   * @default true\n   */\n  autoStart?: boolean\n}\n\ntype UseFakeProgressReturn = {\n  /**\n   * The current progress value (0-100).\n   */\n  progress: number\n  /**\n   * Whether the progress is complete.\n   */\n  isComplete: boolean\n  /**\n   * Whether the progress is currently running.\n   */\n  isRunning: boolean\n  /**\n   * A function to start the progress.\n   */\n  start: () => void\n  /**\n   * A function to reset the progress.\n   */\n  reset: () => void\n}\n\nexport const useFakeProgress = ({\n  duration = 3000,\n  onComplete,\n  autoStart = true,\n}: UseFakeProgressOptions = {}): UseFakeProgressReturn => {\n  const [progress, setProgress] = useState<number>(0)\n  const [isComplete, setIsComplete] = useState<boolean>(false)\n  const [isRunning, setIsRunning] = useState<boolean>(false)\n\n  const animationRef = useRef<number>(0)\n  const startTimeRef = useRef<number>(0)\n\n  const calculateRealisticProgress = useCallback((elapsed: number, total: number): number => {\n    const normalizedTime = Math.min(elapsed / total, 1)\n\n    const easedTime = 1 - (1 - normalizedTime) ** 3\n\n    const progress = easedTime * 99.9\n\n    return progress\n  }, [])\n\n  const updateProgress = useCallback(() => {\n    if (!startTimeRef.current) {\n      startTimeRef.current = Date.now()\n    }\n\n    const currentTime = Date.now()\n    const elapsed = currentTime - startTimeRef.current\n\n    if (elapsed >= duration) {\n      setProgress(100)\n      setIsComplete(true)\n      setIsRunning(false)\n      onComplete?.()\n      return\n    }\n\n    const newProgress = calculateRealisticProgress(elapsed, duration)\n    setProgress(newProgress)\n\n    animationRef.current = requestAnimationFrame(updateProgress)\n  }, [duration, calculateRealisticProgress, onComplete])\n\n  const start = useCallback(() => {\n    setProgress(0)\n    setIsComplete(false)\n    setIsRunning(true)\n    startTimeRef.current = 0\n\n    if (animationRef.current) {\n      cancelAnimationFrame(animationRef.current)\n    }\n\n    animationRef.current = requestAnimationFrame(updateProgress)\n  }, [updateProgress])\n\n  const reset = useCallback(() => {\n    setProgress(0)\n    setIsComplete(false)\n    setIsRunning(false)\n    startTimeRef.current = 0\n\n    if (animationRef.current) {\n      cancelAnimationFrame(animationRef.current)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (autoStart) {\n      start()\n    }\n\n    return () => {\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n      }\n    }\n  }, [start, autoStart])\n\n  return {\n    progress,\n    isComplete,\n    isRunning,\n    start,\n    reset,\n  }\n}\n"],"names":["progress"],"mappings":"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"}

package/dist/components/Table/Table.d.ts

@@ -2,15 +2,18 @@ import * as React from 'react';
 /**
  * Props for the Table component
  */
-interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+type TableProps = {
     /** Additional className for the table element */
     tableClassName?: string;
-}
+} & React.HTMLAttributes<HTMLTableElement>;
 /**
  * A reusable table component that provides a consistent styling and structure
  * for displaying tabular data.
  */
-declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+declare const Table: React.ForwardRefExoticComponent<{
+    /** Additional className for the table element */
+    tableClassName?: string;
+} & React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
 /**
  * TableHeader component for grouping header cells
  */

package/dist/components/Table/Table.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { cn } from '../../lib/utils.js';
 import * as React from 'react';
+import { cn } from '../../lib/utils.js';
 
-const Table = React.forwardRef(({ className, tableClassName, ...props }, ref) => /* @__PURE__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-sm", tableClassName), ...props }));
+const Table = React.forwardRef(({ tableClassName, ...props }, ref) => /* @__PURE__ */ jsx("table", { ref, className: cn("w-full caption-bottom text-sm", tableClassName), ...props }));
 Table.displayName = "Table";
 const TableHeader = React.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })

package/dist/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { cn } from '../../lib/utils'\nimport * as React from 'react'\n\n/**\n * Props for the Table component\n */\ninterface TableProps extends React.HTMLAttributes<HTMLTableElement> {\n  /** Additional className for the table element */\n  tableClassName?: string\n}\n\n/**\n * A reusable table component that provides a consistent styling and structure\n * for displaying tabular data.\n */\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(({ className, tableClassName, ...props }, ref) => (\n  <table ref={ref} className={cn('w-full caption-bottom text-sm', tableClassName)} {...props} />\n))\nTable.displayName = 'Table'\n\n/**\n * TableHeader component for grouping header cells\n */\nconst TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />,\n)\nTableHeader.displayName = 'TableHeader'\n\n/**\n * TableBody component for grouping table rows\n */\nconst TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />\n  ),\n)\nTableBody.displayName = 'TableBody'\n\n/**\n * TableFooter component for grouping footer cells\n */\nconst TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <tfoot ref={ref} className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)} {...props} />\n  ),\n)\nTableFooter.displayName = 'TableFooter'\n\n/**\n * TableRow component for table rows with hover and selection states\n */\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <tr\n      ref={ref}\n      className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)}\n      {...props}\n    />\n  ),\n)\nTableRow.displayName = 'TableRow'\n\n/**\n * TableHead component for table header cells\n */\nconst TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(\n  ({ className, ...props }, ref) => (\n    <th\n      ref={ref}\n      className={cn('text-muted-foreground h-12 px-4 text-left align-middle font-medium', className)}\n      {...props}\n    />\n  ),\n)\nTableHead.displayName = 'TableHead'\n\n/**\n * TableCell component for table data cells\n */\nconst TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(\n  ({ className, ...props }, ref) => <td ref={ref} className={cn('p-4 align-middle', className)} {...props} />,\n)\nTableCell.displayName = 'TableCell'\n\n/**\n * TableCaption component for table captions\n */\nconst TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(\n  ({ className, ...props }, ref) => (\n    <caption ref={ref} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />\n  ),\n)\nTableCaption.displayName = 'TableCaption'\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TableProps }\n"],"names":[],"mappings":";;;;AAeM,MAAA,KAAA,GAAQ,MAAM,UAAyC,CAAA,CAAC,EAAE,SAAW,EAAA,cAAA,EAAgB,GAAG,KAAM,EAAA,EAAG,wBACpG,GAAA,CAAA,OAAA,EAAA,EAAM,KAAU,SAAW,EAAA,EAAA,CAAG,iCAAiC,cAAc,CAAA,EAAI,GAAG,KAAA,EAAO,CAC7F;AACD,KAAA,CAAM,WAAc,GAAA,OAAA;AAKpB,MAAM,cAAc,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAQ,qBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,iBAAA,EAAmB,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAC7G;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;AAK1B,MAAM,YAAY,KAAM,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,4BAAA,EAA8B,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAExF;AACA,SAAA,CAAU,WAAc,GAAA,WAAA;AAKxB,MAAM,cAAc,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,yDAAA,EAA2D,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAErH;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;AAK1B,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAG,CAAA,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG;AAAA;AAAA;AAGV;AACA,QAAA,CAAS,WAAc,GAAA,UAAA;AAKvB,MAAM,YAAY,KAAM,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAG,CAAA,oEAAA,EAAsE,SAAS,CAAA;AAAA,MAC5F,GAAG;AAAA;AAAA;AAGV;AACA,SAAA,CAAU,WAAc,GAAA,WAAA;AAKxB,MAAM,YAAY,KAAM,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAQ,qBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,kBAAA,EAAoB,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAC3G;AACA,SAAA,CAAU,WAAc,GAAA,WAAA;AAKxB,MAAM,eAAe,KAAM,CAAA,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA,CAAC,SAAQ,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,oCAAA,EAAsC,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAElG;AACA,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}
+{"version":3,"file":"Table.js","sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../lib/utils'\n\n/**\n * Props for the Table component\n */\ntype TableProps = {\n  /** Additional className for the table element */\n  tableClassName?: string\n} & React.HTMLAttributes<HTMLTableElement>\n\n/**\n * A reusable table component that provides a consistent styling and structure\n * for displaying tabular data.\n */\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(({ tableClassName, ...props }, ref) => (\n  <table ref={ref} className={cn('w-full caption-bottom text-sm', tableClassName)} {...props} />\n))\nTable.displayName = 'Table'\n\n/**\n * TableHeader component for grouping header cells\n */\nconst TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />,\n)\nTableHeader.displayName = 'TableHeader'\n\n/**\n * TableBody component for grouping table rows\n */\nconst TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />\n  ),\n)\nTableBody.displayName = 'TableBody'\n\n/**\n * TableFooter component for grouping footer cells\n */\nconst TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <tfoot ref={ref} className={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)} {...props} />\n  ),\n)\nTableFooter.displayName = 'TableFooter'\n\n/**\n * TableRow component for table rows with hover and selection states\n */\nconst TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <tr\n      ref={ref}\n      className={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)}\n      {...props}\n    />\n  ),\n)\nTableRow.displayName = 'TableRow'\n\n/**\n * TableHead component for table header cells\n */\nconst TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(\n  ({ className, ...props }, ref) => (\n    <th\n      ref={ref}\n      className={cn('text-muted-foreground h-12 px-4 text-left align-middle font-medium', className)}\n      {...props}\n    />\n  ),\n)\nTableHead.displayName = 'TableHead'\n\n/**\n * TableCell component for table data cells\n */\nconst TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(\n  ({ className, ...props }, ref) => <td ref={ref} className={cn('p-4 align-middle', className)} {...props} />,\n)\nTableCell.displayName = 'TableCell'\n\n/**\n * TableCaption component for table captions\n */\nconst TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(\n  ({ className, ...props }, ref) => (\n    <caption ref={ref} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />\n  ),\n)\nTableCaption.displayName = 'TableCaption'\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TableProps }\n"],"names":[],"mappings":";;;;AAgBM,MAAA,KAAA,GAAQ,MAAM,UAAyC,CAAA,CAAC,EAAE,cAAgB,EAAA,GAAG,OAAS,EAAA,GAAA,yBACzF,OAAM,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,+BAAA,EAAiC,cAAc,CAAI,EAAA,GAAG,OAAO,CAC7F;AACD,KAAA,CAAM,WAAc,GAAA,OAAA;AAKpB,MAAM,cAAc,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAQ,qBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,iBAAA,EAAmB,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAC7G;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;AAK1B,MAAM,YAAY,KAAM,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,4BAAA,EAA8B,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAExF;AACA,SAAA,CAAU,WAAc,GAAA,WAAA;AAKxB,MAAM,cAAc,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA,CAAC,OAAM,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,yDAAA,EAA2D,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAErH;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;AAK1B,MAAM,WAAW,KAAM,CAAA,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAG,CAAA,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG;AAAA;AAAA;AAGV;AACA,QAAA,CAAS,WAAc,GAAA,UAAA;AAKvB,MAAM,YAAY,KAAM,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAG,CAAA,oEAAA,EAAsE,SAAS,CAAA;AAAA,MAC5F,GAAG;AAAA;AAAA;AAGV;AACA,SAAA,CAAU,WAAc,GAAA,WAAA;AAKxB,MAAM,YAAY,KAAM,CAAA,UAAA;AAAA,EACtB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GAAQ,qBAAA,GAAA,CAAC,IAAG,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,kBAAA,EAAoB,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAC3G;AACA,SAAA,CAAU,WAAc,GAAA,WAAA;AAKxB,MAAM,eAAe,KAAM,CAAA,UAAA;AAAA,EACzB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,IAAS,GACxB,qBAAA,GAAA,CAAC,SAAQ,EAAA,EAAA,GAAA,EAAU,WAAW,EAAG,CAAA,oCAAA,EAAsC,SAAS,CAAA,EAAI,GAAG,KAAO,EAAA;AAElG;AACA,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}

package/dist/components/Toaster/Toaster.d.ts

@@ -11,18 +11,18 @@ export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-le
 /**
  * Configuration for toast action buttons
  */
-export interface ToastAction {
+export type ToastAction = {
     /** Label text for the action button */
     label: string;
     /** onClick handler for the action button */
     onClick: () => void;
     /** Optional style object for the button */
     style?: React.CSSProperties;
-}
+};
 /**
  * Options for customizing toast appearance and behavior
  */
-export interface ToastOptions {
+export type ToastOptions = {
     /** Optional description text below the main message */
     description?: React.ReactNode;
     /** Duration in milliseconds to show the toast */
@@ -45,18 +45,20 @@ export interface ToastOptions {
     dismissible?: boolean;
     /** Custom CSS classes */
     className?: string;
-}
+    /** Whether to show the close button at the toast */
+    closeButton?: boolean;
+};
 /**
  * Props for the Toaster component
  */
-export interface ToasterProps extends Omit<SonnerProps, 'richColors' | 'expand' | 'gap' | 'dir' | 'invert'> {
+export type ToasterProps = {
     /** Number of visible toasts */
     visibleToasts?: number;
     /** Position of toasts */
     position?: ToastPosition;
     /** Show close button on toasts, dismissable has to be true */
     closeButton?: boolean;
-}
+} & Omit<SonnerProps, 'richColors' | 'expand' | 'gap' | 'dir' | 'invert'>;
 /**
  * Toast notification component with customizable styles and behaviors
  * @example
@@ -70,6 +72,7 @@ export interface ToasterProps extends Omit<SonnerProps, 'richColors' | 'expand'
  */
 declare const Toaster: ({ visibleToasts, position, closeButton, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
 declare const toast: ((message: React.ReactNode, options?: ToastOptions) => string | number) & {
+    info: (message: React.ReactNode, options?: ToastOptions) => string | number;
     success: (message: React.ReactNode, options?: ToastOptions) => string | number;
     error: (message: React.ReactNode, options?: ToastOptions) => string | number;
     warning: (message: React.ReactNode, options?: ToastOptions) => string | number;
@@ -85,6 +88,7 @@ declare const toast: ((message: React.ReactNode, options?: ToastOptions) => stri
         icon?: React.ReactNode;
         className?: string;
         dismissible?: boolean;
+        closeButton?: boolean;
     }) => (string & {
         unwrap: () => Promise<T>;
     }) | (number & {

package/dist/components/Toaster/Toaster.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { cn } from '../../lib/utils.js';
 import { CheckCircle, Warning, XCircle } from '@phosphor-icons/react';
 import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
 import { buttonVariants } from '../Button/Button.js';
+import { cn } from '../../lib/utils.js';
 
 const Toaster = ({ visibleToasts = 3, position = "bottom-right", closeButton = false, ...props }) => {
   return /* @__PURE__ */ jsx(
@@ -63,6 +63,7 @@ const Toaster = ({ visibleToasts = 3, position = "bottom-right", closeButton = f
   );
 };
 const toast = Object.assign((message, options) => toast$1(message, options), {
+  info: (message, options) => toast$1.info(message, options),
   success: (message, options) => toast$1.success(message, options),
   error: (message, options) => toast$1.error(message, options),
   warning: (message, options) => toast$1.warning(message, options),

package/dist/components/Toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sources":["../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client'\n\nimport { cn } from '@/lib/utils'\nimport { CheckCircle, Warning, XCircle } from '@phosphor-icons/react'\nimport { Toaster as Sonner, toast as sonnerToast, ToasterProps as SonnerProps } from 'sonner'\nimport { buttonVariants } from '../Button'\n\n/**\n * Toast message type options\n */\nexport type ToastType = 'success' | 'error' | 'warning' | 'loading' | 'default'\n\n/**\n * Toast position options\n * @default 'bottom-right'\n */\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\n/**\n * Configuration for toast action buttons\n */\nexport interface ToastAction {\n  /** Label text for the action button */\n  label: string\n  /** onClick handler for the action button */\n  onClick: () => void\n  /** Optional style object for the button */\n  style?: React.CSSProperties\n}\n\n/**\n * Options for customizing toast appearance and behavior\n */\nexport interface ToastOptions {\n  /** Optional description text below the main message */\n  description?: React.ReactNode\n  /** Duration in milliseconds to show the toast */\n  duration?: number\n  /** Custom icon element */\n  icon?: React.ReactNode\n  /** Position of the toast on screen */\n  position?: ToastPosition\n  /** ID for programmatically managing the toast */\n  id?: string | number\n  /** Action button configuration */\n  action?: ToastAction\n  /** Cancel button configuration */\n  cancel?: ToastAction\n  /** Callback when toast is dismissed */\n  onDismiss?: () => void\n  /** Callback when toast auto-closes */\n  onAutoClose?: () => void\n  /** Whether the toast can be dismissed */\n  dismissible?: boolean\n  /** Custom CSS classes */\n  className?: string\n}\n\n/**\n * Props for the Toaster component\n */\nexport interface ToasterProps extends Omit<SonnerProps, 'richColors' | 'expand' | 'gap' | 'dir' | 'invert'> {\n  /** Number of visible toasts */\n  visibleToasts?: number\n  /** Position of toasts */\n  position?: ToastPosition\n  /** Show close button on toasts, dismissable has to be true */\n  closeButton?: boolean\n}\n\n/**\n * Toast notification component with customizable styles and behaviors\n * @example\n * ```tsx\n * <Toaster\n *   theme=\"light\"\n *   visibleToasts={3}\n *   position=\"bottom-right\"\n * />\n * ```\n */\nconst Toaster = ({ visibleToasts = 3, position = 'bottom-right', closeButton = false, ...props }: ToasterProps) => {\n  return (\n    <Sonner\n      className=\"toaster group\"\n      theme=\"light\"\n      richColors={false}\n      expand={false}\n      visibleToasts={visibleToasts}\n      position={position}\n      closeButton={closeButton}\n      dir=\"ltr\"\n      invert={false}\n      toastOptions={{\n        unstyled: true,\n        classNames: {\n          toast: cn(\n            'group toast-group flex w-full min-w-[300px] items-center gap-4 px-6 py-3 rounded-lg border text-sm border-1.5 bg-white shadow-toast',\n            // Default/Info variant\n            'data-[type=default]:bg-white data-[type=default]:text-black data-[type=default]:border-black',\n            // Success variant (green background)\n            'data-[type=success]:bg-success-100 data-[type=success]:text-success-800 data-[type=success]:border-success-500',\n            // Error variant (red background)\n            'data-[type=error]:bg-red-100 data-[type=error]:text-red-800 data-[type=error]:border-red-500',\n            // Warning variant (primary background)\n            'data-[type=warning]:bg-primary-100 data-[type=warning]:text-accent-900 data-[type=warning]:border-primary-500',\n            // Secondary variant\n            'data-[variant=secondary]:bg-neutral-950 data-[variant=secondary]:text-neutral-foreground data-[variant=secondary]:border-neutral-500',\n          ),\n          closeButton: cn(\n            'right-0 top-3 left-auto',\n            'p-0 opacity-50 transition-opacity hover:opacity-100 !border-none !bg-transparent',\n            '[&_svg]:h-4 [&_svg]:w-4',\n          ),\n          actionButton: cn(\n            buttonVariants({\n              variant: 'primary',\n              size: 'sm',\n            }),\n          ),\n          cancelButton: cn(\n            buttonVariants({\n              variant: 'ghost',\n              size: 'sm',\n            }),\n          ),\n        },\n      }}\n      icons={{\n        success: <CheckCircle size={24} />,\n        warning: <Warning size={24} />,\n        error: <XCircle size={24} />,\n      }}\n      {...props}\n    />\n  )\n}\n\nconst toast = Object.assign((message: React.ReactNode, options?: ToastOptions) => sonnerToast(message, options), {\n  success: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.success(message, options),\n  error: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.error(message, options),\n  warning: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.warning(message, options),\n  loading: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.loading(message, options),\n  promise: <T,>(\n    promise: Promise<T>,\n    opts: {\n      loading: React.ReactNode\n      success: React.ReactNode | ((data: T) => React.ReactNode)\n      error: React.ReactNode | ((error: Error) => React.ReactNode)\n      duration?: number\n      description?: React.ReactNode\n      position?: ToastPosition\n      id?: string\n      icon?: React.ReactNode\n      className?: string\n      dismissible?: boolean\n    },\n  ) => sonnerToast.promise(promise, opts),\n  dismiss: (toastId: string | number) => sonnerToast.dismiss(toastId),\n  custom: (render: (id: string | number) => React.ReactElement, options?: ToastOptions) =>\n    sonnerToast.custom(render, options),\n})\n\nexport { Toaster, toast }\n"],"names":[],"mappings":";;;;;;;AAiFM;AACJ;AACE;AAAC;AAAA;AACW;AACJ;AACM;AACJ;AACR;AACA;AACA;AACI;AACI;AACM;AACF;AACE;AACH;AACL;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AACF;AACa;AACX;AACA;AACA;AACF;AACc;AACG;AACJ;AACH;AACP;AACH;AACc;AACG;AACJ;AACH;AACP;AACH;AACF;AACF;AACO;AAC2B;AACJ;AACF;AAC5B;AACI;AAAA;AAGV;AAEM;AAA2G;AACZ;AACJ;AACI;AACA;AAe7D;AAC4B;AAGpE;;"}
+{"version":3,"file":"Toaster.js","sources":["../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client'\n\nimport { CheckCircle, Warning, XCircle } from '@phosphor-icons/react'\nimport { Toaster as Sonner, toast as sonnerToast, ToasterProps as SonnerProps } from 'sonner'\n\nimport { buttonVariants } from '../Button'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Toast message type options\n */\nexport type ToastType = 'success' | 'error' | 'warning' | 'loading' | 'default'\n\n/**\n * Toast position options\n * @default 'bottom-right'\n */\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\n/**\n * Configuration for toast action buttons\n */\nexport type ToastAction = {\n  /** Label text for the action button */\n  label: string\n  /** onClick handler for the action button */\n  onClick: () => void\n  /** Optional style object for the button */\n  style?: React.CSSProperties\n}\n\n/**\n * Options for customizing toast appearance and behavior\n */\nexport type ToastOptions = {\n  /** Optional description text below the main message */\n  description?: React.ReactNode\n  /** Duration in milliseconds to show the toast */\n  duration?: number\n  /** Custom icon element */\n  icon?: React.ReactNode\n  /** Position of the toast on screen */\n  position?: ToastPosition\n  /** ID for programmatically managing the toast */\n  id?: string | number\n  /** Action button configuration */\n  action?: ToastAction\n  /** Cancel button configuration */\n  cancel?: ToastAction\n  /** Callback when toast is dismissed */\n  onDismiss?: () => void\n  /** Callback when toast auto-closes */\n  onAutoClose?: () => void\n  /** Whether the toast can be dismissed */\n  dismissible?: boolean\n  /** Custom CSS classes */\n  className?: string\n  /** Whether to show the close button at the toast */\n  closeButton?: boolean\n}\n\n/**\n * Props for the Toaster component\n */\nexport type ToasterProps = {\n  /** Number of visible toasts */\n  visibleToasts?: number\n  /** Position of toasts */\n  position?: ToastPosition\n  /** Show close button on toasts, dismissable has to be true */\n  closeButton?: boolean\n} & Omit<SonnerProps, 'richColors' | 'expand' | 'gap' | 'dir' | 'invert'>\n\n/**\n * Toast notification component with customizable styles and behaviors\n * @example\n * ```tsx\n * <Toaster\n *   theme=\"light\"\n *   visibleToasts={3}\n *   position=\"bottom-right\"\n * />\n * ```\n */\nconst Toaster = ({ visibleToasts = 3, position = 'bottom-right', closeButton = false, ...props }: ToasterProps) => {\n  return (\n    <Sonner\n      className=\"toaster group\"\n      theme=\"light\"\n      richColors={false}\n      expand={false}\n      visibleToasts={visibleToasts}\n      position={position}\n      closeButton={closeButton}\n      dir=\"ltr\"\n      invert={false}\n      toastOptions={{\n        unstyled: true,\n        classNames: {\n          toast: cn(\n            'group toast-group flex w-full min-w-[300px] items-center gap-4 px-6 py-3 rounded-lg border text-sm border-1.5 bg-white shadow-toast',\n            // Default/Info variant\n            'data-[type=default]:bg-white data-[type=default]:text-black data-[type=default]:border-black',\n            // Success variant (green background)\n            'data-[type=success]:bg-success-100 data-[type=success]:text-success-800 data-[type=success]:border-success-500',\n            // Error variant (red background)\n            'data-[type=error]:bg-red-100 data-[type=error]:text-red-800 data-[type=error]:border-red-500',\n            // Warning variant (primary background)\n            'data-[type=warning]:bg-primary-100 data-[type=warning]:text-accent-900 data-[type=warning]:border-primary-500',\n            // Secondary variant\n            'data-[variant=secondary]:bg-neutral-950 data-[variant=secondary]:text-neutral-foreground data-[variant=secondary]:border-neutral-500',\n          ),\n          closeButton: cn(\n            'right-0 top-3 left-auto',\n            'p-0 opacity-50 transition-opacity hover:opacity-100 !border-none !bg-transparent',\n            '[&_svg]:h-4 [&_svg]:w-4',\n          ),\n          actionButton: cn(\n            buttonVariants({\n              variant: 'primary',\n              size: 'sm',\n            }),\n          ),\n          cancelButton: cn(\n            buttonVariants({\n              variant: 'ghost',\n              size: 'sm',\n            }),\n          ),\n        },\n      }}\n      icons={{\n        success: <CheckCircle size={24} />,\n        warning: <Warning size={24} />,\n        error: <XCircle size={24} />,\n      }}\n      {...props}\n    />\n  )\n}\n\nconst toast = Object.assign((message: React.ReactNode, options?: ToastOptions) => sonnerToast(message, options), {\n  info: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.info(message, options),\n  success: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.success(message, options),\n  error: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.error(message, options),\n  warning: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.warning(message, options),\n  loading: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.loading(message, options),\n  promise: <T,>(\n    promise: Promise<T>,\n    opts: {\n      loading: React.ReactNode\n      success: React.ReactNode | ((data: T) => React.ReactNode)\n      error: React.ReactNode | ((error: Error) => React.ReactNode)\n      duration?: number\n      description?: React.ReactNode\n      position?: ToastPosition\n      id?: string\n      icon?: React.ReactNode\n      className?: string\n      dismissible?: boolean\n      closeButton?: boolean\n    },\n  ) => sonnerToast.promise(promise, opts),\n  dismiss: (toastId: string | number) => sonnerToast.dismiss(toastId),\n  custom: (render: (id: string | number) => React.ReactElement, options?: ToastOptions) =>\n    sonnerToast.custom(render, options),\n})\n\nexport { Toaster, toast }\n"],"names":[],"mappings":";;;;;;;AAqFM;AACJ;AACE;AAAC;AAAA;AACW;AACJ;AACM;AACJ;AACR;AACA;AACA;AACI;AACI;AACM;AACF;AACE;AACH;AACL;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AACF;AACa;AACX;AACA;AACA;AACF;AACc;AACG;AACJ;AACH;AACP;AACH;AACc;AACG;AACJ;AACH;AACP;AACH;AACF;AACF;AACO;AAC2B;AACJ;AACF;AAC5B;AACI;AAAA;AAGV;AAEM;AAA2G;AAClB;AACM;AACJ;AACI;AACA;AAgB7D;AAC4B;AAGpE;;"}

package/dist/table-empty-state.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 221">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #070707;
+      }
+
+      .cls-2 {
+        fill: #050505;
+      }
+
+      .cls-3 {
+        fill: #010101;
+      }
+
+      .cls-4 {
+        fill: #030303;
+      }
+
+      .cls-5 {
+        fill: #020101;
+      }
+
+      .cls-6 {
+        fill: #ef7d00;
+      }
+
+      .cls-7 {
+        fill: #020202;
+      }
+
+      .cls-8 {
+        fill: #020100;
+      }
+
+      .cls-9 {
+        fill: #040404;
+      }
+
+      .cls-10 {
+        fill: #040303;
+      }
+
+      .cls-11 {
+        fill: #020201;
+      }
+
+      .cls-12 {
+        fill: #010100;
+      }
+
+      .cls-13 {
+        fill: #ed7d30;
+      }
+    </style>
+  </defs>
+  <path class="cls-6" d="M239.13,173.06c-1,.36-6.41,2.5-7.41,2.87-.3-.7-18.58-95.42-18.63-95.38-.64.46-6.75-14.66-6.94-14.44-41.44-1.48-139-9.37-140.14-9.48,1.1.19,5.73-10.54,8.23-14.74,1.37-2.3,3.33-3.32,5.97-3.48,8.09-.49,46.32.68,49.08.8,2.85.12,4.47,1.25,5.54,3.84,1.2,2.92,1.81,6.04,3.06,8.94,1.3,3.02,3.31,4.9,6.85,5.06,3.82.17,103.45.71,104.22.63,3.77-.41,5.72,1.68,7.1,4.51.77,1.58.94,3.24.48,5.11-.43,1.76-17.31,105.18-17.42,105.78Z"/>
+  <path d="M133.38,144.85c.02,1.25-.24,2.43-.75,3.58-.89,1.99-2.5,2.23-3.72.45-1.7-2.46-2.13-5.28-2-8.19.04-.89-.01-1.8.32-2.67.44-1.14,1.12-1.86,2.43-1.88,1.32-.02,2.14.81,2.48,1.85.71,2.22,1.21,4.5,1.24,6.86Z"/>
+  <path d="M91.72,145.01c.04.78.1,1.55-.17,2.31-.77,2.15-2.37,2.49-3.92.83-1.54-1.65-2.51-7.47-1.6-9.54.34-.78.75-1.57,1.69-1.58,1.13-.01,2.2.29,2.69,1.51.73,1.84,1.21,3.74,1.31,5.73.01.25,0,.49,0,.74Z"/>
+  <path class="cls-13" d="M234.98,196.82c.05-2.91-2.48-15.37-2.77-18.11-.03-.32,5.47-2.13,6.38-2.44-.54,4.49-3.25,18.14-3.61,20.55Z"/>
+  <path class="cls-3" d="M80.79,122.95c.87-.68,1.81-1.12,2.89-1.19.29-.02.69.01.81.41.12.41-.2.51-.48.71-4.63,3.22-8.09,7.24-8.89,13.07-.07.53-.11,1.4-.74,1.36-.68-.04-.73-.86-.73-1.49.01-2.85,1.43-8.45,7.14-12.88Z"/>
+  <path class="cls-7" d="M136.58,119.58c3.09.67,5.83,2.02,8.03,4.35,1.86,1.96,2.89,4.33,3.43,6.95.1.48.37,1.11-.2,1.31-.71.25-.8-.55-1-.98-1.25-2.73-2.44-5.52-4.77-7.52-1.63-1.4-3.45-2.6-5.64-3.03-.41-.08-.85-.09-.97-.57-.08-.31.3-.46,1.13-.5Z"/>
+  <path class="cls-4" d="M247.86,171.3c-.29.01-1.2-1.14-1.66-1.78-.26-.35.25-.68.51-.89,1.79-1.37,3.08-3.16,4.18-5.08.36-.62.58-.59,1.09-.29,1.73,1.01,1.74,1.03.59,2.73-1.06,1.56-2.24,3.02-3.54,4.38-.33.35-.76.61-1.17.93Z"/>
+  <path class="cls-7" d="M255.66,152.05c.23.33-.14,5.64-.8,8.58-.18.81-.47.71-1.07.44-1.1-.5-1.71-1.18-1.31-2.46.61-1.91.39-3.91.48-5.86.03-.79.15-1.16,1.01-1,.52.09,1.16.15,1.69.31Z"/>
+  <path class="cls-7" d="M255.41,147.59c.03.48.17,1.12-.41,1.13-.82,0-2.08.09-2.17-1.04-.18-2.27-.73-4.42-1.39-6.59-.3-1,.83-1.38,1.52-1.57.58-.16.6.3.72.64.86,2.43,1.61,4.81,1.74,7.43Z"/>
+  <path class="cls-5" d="M245.62,56.58c-.08.78-.14,7.47-.29,9.8-.06.96-.84,1.12-1.61,1.16-.84.04-1.03-.56-1.04-1.22-.04-2.01.75-8.49.83-8.92.24-1.21.45-1.29,2.12-.83Z"/>
+  <path class="cls-7" d="M253.65,33.97c.63-.6,1.81.69.72,2.05-1.59,1.98-3.4,3.8-4.66,6.03-.15.27-.23.44-.61.2-.61-.39-1.48-.67-.93-1.71.56-1.07,1.39-1.93,2.15-2.84,1.23-1.48,1.97-2.23,3.34-3.72Z"/>
+  <path class="cls-4" d="M245.76,131.66c-.22-.3-.12-.71.2-.89,1.66-.93,1.72-.84,2.87.91.86,1.3,1.68,2.63,2.56,3.91.35.51.38.82-.19,1.19-1.85,1.18-1.27,1.33-2.45-.49-1-1.54-1.91-3.14-2.99-4.62Z"/>
+  <path class="cls-11" d="M250.7,82.88c-.54-.54-.49-.8-.21-1.29.37-.4.7-.87,1.35-.83.93,2.1,4.5,4.71,6.49,4.3.4-.08.51.68.34,1.08-.19.43-.25,1.04-1,.92-3.34-.53-6.28-3.33-6.97-4.18Z"/>
+  <path class="cls-9" d="M266.43,73.45c3.19.79,5.38,1.5,6.76,4.68.13.29.31.78.04.89-.52.21-1.32.79-1.74-.04-1.06-2.08-2.93-2.81-5-3.32-1.14-.28-1.43-.84-1.08-1.92.09-.27.27-.45,1.03-.29Z"/>
+  <path class="cls-7" d="M246.3,44.39c1.54.63,1.73,1.52,1.28,2.88-.56,1.7-.9,3.48-1.21,5.25-.21,1.2-1.13.99-1.71.8-.29-.1-.31-.74-.25-1.09.41-2.66,1.04-5.27,1.9-7.84Z"/>
+  <path class="cls-10" d="M254.65,72.99c.52-.06,4.59-.43,6.27-.4.62.01,1.52.32,1.36,1.28-.13.78-.24,1.08-1.19.99-1.79-.17-4.56-.06-6.77.5-.64-.15-.9-2.11.33-2.38Z"/>
+  <path class="cls-1" d="M261.62,87.67c-.5-.3-.93-1.8.5-1.47,1.11.25,3.8.03,4.8-.32,1.23-.42,1.18,1.15.74,1.47-1.03.77-4.79,1.05-6.04.32Z"/>
+  <path class="cls-9" d="M264.12,25.93c-2.2,2.05-4.27,3.88-6.16,5.91-.16.17-.41.47-.7.24-.33-.27-.98-.7-.48-1.21,1.97-2.01,4.14-3.78,6.7-5.02.12-.06.9-.22.64.08Z"/>
+  <path class="cls-2" d="M273.93,82.12c.02,1.61-1.55,3.85-2.94,4.39-.5.2-1.54-1.25-.72-1.73.9-.53,1.64-1.16,1.88-2.29.16-.74.97-.65,1.55-.74.26-.04.22.27.23.37Z"/>
+  <path class="cls-9" d="M287.08,17.86c.92-1.15,1.66-2.25.83-3.55-.44-.69-1.48-.94-2.36-.64-1.75.6-1.36,2.05-1.39,3.51-.06-.91-.52-1.53-1.15-2.09-3.21-2.91-8.61-3.71-12.43-1.82-.88.43-1.69.98-1.71,2.05-.01,1.07.79,1.64,1.63,2.15,1.45.89,3.09,1.25,5.03,1.64-.8.37-1.31.6-1.81.85-1.71.88-3.44,1.75-4.64,3.34-1.07,1.41-.71,2.43.95,2.95,2.36.74,4.62.14,6.87-.5,1.12-.32,2.21-.76,3.33-1.15.14.48-.14.7-.29.98-.86,1.63-1.71,3.26-2.1,5.08-.08.39-.17.9.34,1.06.44.14.62-.3.82-.6.88-1.34,1.42-2.85,2.04-4.32.72-1.7.82-3.84,3.15-4.47-.75,2.78-1.46,5.61-2.8,8.22-.76,1.49-1.81,2.72-3.41,3.41-.64.27-1.79.03-2.06-.63-.54-1.33-.45-2.49.17-3.97.1-.24.52-.62.05-.84-.35-.16-.64.15-.89.45-1.17,1.41-1.03,4.13.31,5.59.74.81,1.6,1.09,2.64.65,1.55-.66,2.75-1.73,3.68-3.14,1.42-2.15,2.06-4.58,2.61-7.04.32-1.41.5-2.84.82-4.68.52,1.46,1.48,2.26,2.7,1.86,1.05-.35,1.58-1.09,1.56-2.36-.03-1.55-1.07-1.91-2.5-1.96ZM282.2,17.31c-.81.18-1.04.28-1.79-.34-1.25-1.04-2.83-1.37-4.38-1.71-.34-.08-.83-.14-.91.35-.08.5.41.5.75.62,1.31.45,2.73.65,4.23,1.63-1.2.44-3.7,1.51-9.26-1.61-1.07-.6.05-1.41.52-1.62,3.15-1.41,6.43-1.45,9.34.29.84.5,1.16.84,1.78,1.59.41.49.26.68-.28.8Z"/>
+  <path class="cls-8" d="M244.74,127.73c-1.05.98-1.73.54-2.39-.52-1.12-1.81-2.28-3.6-3.49-5.34-.57-.81-.06-1.11.51-1.38.51-.24.98-.85,1.59.12,1.27,2.04,2.54,4.1,4.08,5.97.43.52.06.84-.3,1.15Z"/>
+  <path d="M113.43,167.47c-.67-1.2-1.64-2.05-3.14-2.02-1.2.03-2.18.51-2.78,1.53-1.6,2.72-.94,7.4,1.32,9.59,1.45,1.41,3.55,1.32,4.57-.31.74-1.18,1.28-2.49,1.23-3.95-.06-1.7-.37-3.35-1.2-4.85ZM112.69,172.39c.05.97-.19,1.88-.68,2.79-.54.99-1.17.88-1.89.34-.77-.59-1.31-1.4-1.59-2.3-.35-1.13-.62-2.29-.55-3.51.06-.93-.1-1.92,1.21-2.19,1.02-.21,2.11.19,2.64,1.29.54,1.1,1.04,2.25.86,3.58Z"/>
+  <path class="cls-12" d="M250.93,73.72c.71-.19.97,1.73.46,1.96-.2.05-3.14,1.05-3.05,1.21.14.22.76.99,1.07,1.51.5.84-.26,1.19-.73,1.45-.56.32-1.08-.35-1.33-.55-.09-.07-1.19-1.46-1.19-1.46,0,0-3.38,3.05-4.31,4.26-.26.35-.72.85-1.41.26-.49-.42-1.25-.54-.41-1.64,1.28-1.68,3.75-3.82,5.49-4.88,0,0-1.16-3.1-1.53-4.19-.13-.38-.04-.77.63-.98.48-.15.98-.32,1.23.45.32,1.02,1.4,3.5,1.62,3.56.16.04,2.52-.67,3.47-.94Z"/>
+  <path class="cls-8" d="M233.99,93.32c.68-2.64,1.62-5.22,2.93-7.65.23-.43.46-.43.88-.2,1.49.81,1.44.76.76,2.34-.83,1.91-1.78,3.8-1.95,5.93-.04.52-.32.83-.8.6-.6-.29-1.78.45-1.81-1.01Z"/>
+  <path class="cls-8" d="M235.56,109.8c.38-.02.7-.03.83.48.54,2.22,1.14,4.42,2.16,6.5.49,1-.67,1.2-1.28,1.4-.51.17-.66.01-.88-.38-1.15-2.11-1.77-4.39-2.37-6.69-.22-.85.36-1.32,1.55-1.31Z"/>
+  <path class="cls-8" d="M233.11,102.49c.08-1.06.08-2.14.26-3.18.22-1.32,1.31-.53,1.98-.63.76-.11.5.57.45.96-.26,2.04-.22,4.09-.09,6.13.09,1.44-1.11.87-1.7,1.16-.75.37-.56-.38-.65-.76-.27-1.21-.2-2.45-.24-3.68Z"/>
+  <path d="M243.01,171.12c.42-.23.6-.18.91.15,1.69,1.77,1.63,1.87-.62,2.97-1.54.76-8.88,3.68-9.47,3.86-1.49.46-1.49.48-1.31,2.09.27,2.45,2.86,13.42,2.45,16.64-.1,1.96-.13,3.92-.55,5.86-.9,4.19-3.39,6.68-7.55,7.58-3.29.71-167.95-2.68-168.6-3.04-.26-.14-1.6-2.15.41-2.42,3.08-.41,152.55,3.74,167.16,2.32,5.17-.5,5.81-5.56,5.67-9.27-.23-6.22-17.1-104.9-18.21-108.94-1.36-4.93-2.65-9.89-4.77-14.55-1.55-3.4-3.79-6.24-7.75-7.14-1.05-.24-169.21-8.43-173.79-8.29-4.32.13-7.6,4.36-8.17,6.34-1.05,3.67-.48,6.54-.13,10.26.42,4.44,20.34,99.72,21.29,103.63,1.33,5.51,2.18,9.9,3.72,15.19.1.33.1,1.82-.42,2.05-.6.26-1.31-1.36-1.47-1.68-1.49-2.99-1.94-5.26-2.67-8.5-1.61-7.08-21.74-99.46-22.72-104.89-.81-4.53-1.36-9.11-.84-13.69.27-2.3.71-7.5,4.56-9.62,3.13-1.73,3.07-3.24,11.15-3.06,5.41.12,161.17,8.09,164.79,7.99,3.31-.09,6.34.74,9.26,2.16,3.26,1.77,4.91,4.83,6.44,8,.92,2.46,1.87,4.91,2.74,7.4,2.91,8.27,17.26,91.54,17.48,93.87.09.94.48,1.14,1.29.73.91-.47,8.54-3.36,9.72-4Z"/>
+</svg>

package/package.json

@@ -2,7 +2,7 @@
   "name": "periplo-ui",
   "description": "IATI UI library",
   "private": false,
-  "version": "3.22.2",
+  "version": "3.24.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",