@empreint/ui 1.3.0 → 1.5.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from 'react';
 import { ElementType } from 'react';
 import { HTMLAttributes } from 'react';
-import { JSX } from 'react/jsx-runtime';
+import { JSX } from 'react';
 import { JSXElementConstructor } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
@@ -99,11 +99,6 @@ export declare type CollapsibleTriggerProps = ComponentProps<"button"> & {
     icon?: ElementType;
 };
 
-export declare type Column = {
-    name: string;
-    label: string;
-};
-
 export declare const Container: ({ children, size, className, ...rest }: ContainerProps) => JSX.Element;
 
 export declare type ContainerProps = ComponentProps<"div"> & {
@@ -168,6 +163,25 @@ export declare type DropzoneRemoveProps = HTMLAttributes<HTMLElement> & {
     children: ReactElement;
 };
 
+export declare type Filter = {
+    id: string;
+    column: string;
+    operator: string;
+    value: string;
+};
+
+export declare const FilterAdd: ({ className, children, "aria-label": ariaLabel, ...rest }: ComponentProps<"button">) => JSX.Element;
+
+export declare const FilterHeader: ({ className, ...rest }: ComponentProps<"div">) => JSX.Element;
+
+export declare type FilterInput = Partial<Omit<Filter, "id">>;
+
+export declare const FilterRemove: ({ className, children, "aria-label": ariaLabel, ...rest }: ComponentProps<"button">) => JSX.Element;
+
+export declare const FilterRow: ({ className, ...rest }: ComponentProps<"fieldset">) => JSX.Element;
+
+export declare const Filters: ({ className, ...rest }: ComponentProps<"div">) => JSX.Element;
+
 export declare const Flex: ({ children, direction, justify, align, wrap, gap, inline, className, ...rest }: FlexProps) => JSX.Element;
 
 export declare type FlexProps = ComponentProps<"div"> & {
@@ -248,10 +262,6 @@ export declare type ModalTriggerProps = HTMLAttributes<HTMLElement> & {
     children: ReactElement;
 };
 
-export declare type ObjectLiteral<T = Primitive> = {
-    [field: string]: T;
-};
-
 declare type Option_2 = {
     label: ReactNode;
     value: string;
@@ -303,8 +313,6 @@ export declare type PopoverTriggerProps = HTMLAttributes<HTMLElement> & {
     children: ReactElement;
 };
 
-export declare type Primitive = string | number | boolean | undefined | null;
-
 export declare const RadioGroup: ({ children, onChange, defaultValue, orientation, className, ...rest }: RadioGroupProps) => JSX.Element;
 
 export declare const RadioGroupItem: ({ children, value, className, ...rest }: RadioGroupItemProps) => JSX.Element;
@@ -390,30 +398,51 @@ export declare type SlotProps = HTMLAttributes<HTMLElement> & {
     ref?: Ref<HTMLElement>;
 };
 
+export declare type SortDirection = "ascending" | "descending";
+
+export declare type SortState<T> = {
+    key: keyof T;
+    direction: SortDirection;
+};
+
 export declare type Step = {
     name: string;
     title: string;
 };
 
-export declare const Table: <T extends ObjectLiteral>({ className, columns, records, uniqueKey, renderHeader, renderFooter, renderColumnsCell, renderRecordsCell, renderRecordsEmptyCell, renderNoRecords, ...rest }: TableProps<T>) => JSX.Element;
+export declare const Table: ({ className, layout, ...rest }: TableProps) => JSX.Element;
+
+export declare const TableBody: ({ className, ...rest }: ComponentProps<"tbody">) => JSX.Element;
+
+export declare const TableCell: ({ className, ...rest }: ComponentProps<"td">) => JSX.Element;
+
+export declare const TableFooter: ({ className, ...rest }: ComponentProps<"tfoot">) => JSX.Element;
 
-export declare type TableProps<T extends ObjectLiteral> = Omit<ComponentProps<"div">, "children"> & {
-    columns: Column[];
-    records: T[];
-    uniqueKey?: string;
-    renderHeader?: () => ReactNode;
-    renderFooter?: () => ReactNode;
-    renderColumnsCell?: (column: Column, key: string) => ReactNode;
-    renderRecordsCell?: (cell: Primitive, key: string) => ReactNode;
-    renderRecordsEmptyCell?: (key: string) => ReactNode;
-    renderNoRecords?: () => ReactNode;
+export declare const TableHeader: ({ className, ...rest }: ComponentProps<"thead">) => JSX.Element;
+
+export declare const TableHeaderCell: ({ className, scope, sort, ...rest }: TableHeaderCellProps) => JSX.Element;
+
+export declare type TableHeaderCellProps = ComponentProps<"th"> & {
+    scope?: "col" | "row";
+    sort?: SortDirection;
 };
 
-export declare const TableTd: ({ children, className, ...rest }: ComponentProps<"td">) => JSX.Element;
+export declare type TableProps = ComponentProps<"table"> & {
+    layout?: "auto" | "fixed";
+};
 
-export declare const TableTh: ({ children, className, ...rest }: ComponentProps<"th">) => JSX.Element;
+export declare const TableRow: ({ className, separator, ...rest }: TableRowProps) => JSX.Element;
 
-export declare const TableTr: ({ children, className, ...rest }: ComponentProps<"tr">) => JSX.Element;
+export declare type TableRowProps = ComponentProps<"tr"> & {
+    separator?: boolean;
+};
+
+export declare const TableSortTrigger: ({ className, direction, icon: Icon, children, ...rest }: TableSortTriggerProps) => JSX.Element;
+
+export declare type TableSortTriggerProps = ComponentProps<"button"> & {
+    direction?: SortDirection;
+    icon?: ElementType;
+};
 
 export declare const Tabs: ({ children, defaultValue, onChange, className, ...rest }: TabsProps) => JSX.Element;
 
@@ -476,6 +505,14 @@ export declare type useDisclosureOptions = {
     closeOnOutsideClick?: boolean;
 };
 
+export declare const useFilters: (initial?: FilterInput[]) => {
+    filters: Filter[];
+    addFilter: (filter?: FilterInput) => void;
+    updateFilter: (id: string, patch: FilterInput) => void;
+    removeFilter: (id: string) => void;
+    reset: () => void;
+};
+
 export declare const useMatchDevice: (UA: string) => Device;
 
 export declare const useMatchResolution: (UA: string, breakpoints?: Breakpoints) => MatchResolution;
@@ -506,6 +543,12 @@ export declare type usePaginationProps = {
 
 export declare const useScrollTo: (target: RefObject<HTMLElement | null>) => ScrollEvents;
 
+export declare const useSort: <T>(initial?: SortState<T> | null) => {
+    sort: SortState<T> | null;
+    toggle: (key: keyof T) => void;
+    sortData: (data: T[]) => T[];
+};
+
 export declare const useVisible: (target: RefObject<HTMLElement | null>) => boolean;
 
 export declare const useWizard: ({ totalSteps, step }: useWizardOptions) => {

package/dist/index.js

@@ -9,33 +9,36 @@ import { Chip as u } from "./components/chip/chip.js";
 import { useBreadcrumb as d } from "./hooks/use-breadcrumb/use-breadcrumb.js";
 import { useOutsideAlerter as f } from "./hooks/use-outside-alerter/use-outside-alerter.js";
 import { useDisclosure as p } from "./hooks/use-disclosure/use-disclosure.js";
-import { useMatchDevice as m } from "./hooks/use-match-device/use-match-device.js";
-import { defaultBreakpoints as h, useMatchResolution as g } from "./hooks/use-match-resolution/use-match-resolution.js";
-import { usePagination as _ } from "./hooks/use-pagination/use-pagination.js";
-import { useScrollTo as v } from "./hooks/use-scroll-to/use-scroll-to.js";
-import { useVisible as y } from "./hooks/use-visible/use-visible.js";
-import { useWizard as b } from "./hooks/use-wizard/use-wizard.js";
-import { Collapsible as x, CollapsibleContent as S, CollapsibleItem as C, CollapsibleTrigger as w } from "./components/collapsible/collapsible.js";
-import { Container as T } from "./components/container/container.js";
-import { Slot as E } from "./components/slot/slot.js";
-import { DropdownMenu as D, DropdownMenuContent as O, DropdownMenuIcon as k, DropdownMenuItem as A, DropdownMenuTrigger as j } from "./components/dropdown-menu/dropdown-menu.js";
-import { Dropzone as M, DropzoneArea as N, DropzoneEmpty as P, DropzoneLabel as F, DropzonePreview as I, DropzoneRemove as L } from "./components/dropzone/dropzone.js";
-import { Flex as R } from "./components/flex/flex.js";
-import { Grid as z } from "./components/grid/grid.js";
-import { Input as B, InputField as V, InputLabel as H, InputMessage as U } from "./components/input/input.js";
-import { LanguageSelector as W } from "./components/language-selector/language-selector.js";
-import { List as G, ListItem as K } from "./components/list/list.js";
-import { Loader as q, LoaderSpinner as J } from "./components/loader/loader.js";
-import { Modal as Y, ModalBody as X, ModalClose as Z, ModalContent as Q, ModalFooter as $, ModalHeader as ee, ModalOverlay as te, ModalTrigger as ne } from "./components/modal/modal.js";
-import { Pagination as re, PaginationFirst as ie, PaginationItems as ae, PaginationLast as oe, PaginationNext as se, PaginationPrevious as ce } from "./components/pagination/pagination.js";
-import { Popover as le, PopoverContent as ue, PopoverTrigger as de } from "./components/popover/popover.js";
-import { RadioGroup as fe, RadioGroupItem as pe } from "./components/radio-group/radio-group.js";
-import { Select as me, SelectContent as he, SelectItem as ge, SelectTrigger as _e } from "./components/select/select.js";
-import { Separator as ve } from "./components/separator/separator.js";
-import { Sidebar as ye, SidebarGroup as be, SidebarHeader as xe, SidebarItem as Se, SidebarLink as Ce } from "./components/sidebar/sidebar.js";
-import { Table as we, TableTd as Te, TableTh as Ee, TableTr as De } from "./components/table/table.js";
-import { Tabs as Oe, TabsContent as ke, TabsItem as Ae, TabsItems as je } from "./components/tabs/tabs.js";
-import { Text as Me } from "./components/text/text.js";
-import { Title as Ne } from "./components/title/title.js";
-import { Wizard as Pe, WizardFinalize as Fe, WizardFooter as Ie, WizardHeader as Le, WizardIndicator as Re, WizardNext as ze, WizardPrevious as Be, WizardStep as Ve, WizardTitle as He } from "./components/wizard/wizard.js";
-export { e as Badge, t as Breadcrumb, n as BreadcrumbItem, r as BreadcrumbSeparator, i as Button, a as Card, o as CardBody, s as CardFooter, c as CardHeader, l as Checkbox, u as Chip, x as Collapsible, S as CollapsibleContent, C as CollapsibleItem, w as CollapsibleTrigger, T as Container, D as DropdownMenu, O as DropdownMenuContent, k as DropdownMenuIcon, A as DropdownMenuItem, j as DropdownMenuTrigger, M as Dropzone, N as DropzoneArea, P as DropzoneEmpty, F as DropzoneLabel, I as DropzonePreview, L as DropzoneRemove, R as Flex, z as Grid, B as Input, V as InputField, H as InputLabel, U as InputMessage, W as LanguageSelector, G as List, K as ListItem, q as Loader, J as LoaderSpinner, Y as Modal, X as ModalBody, Z as ModalClose, Q as ModalContent, $ as ModalFooter, ee as ModalHeader, te as ModalOverlay, ne as ModalTrigger, re as Pagination, ie as PaginationFirst, ae as PaginationItems, oe as PaginationLast, se as PaginationNext, ce as PaginationPrevious, le as Popover, ue as PopoverContent, de as PopoverTrigger, fe as RadioGroup, pe as RadioGroupItem, me as Select, he as SelectContent, ge as SelectItem, _e as SelectTrigger, ve as Separator, ye as Sidebar, be as SidebarGroup, xe as SidebarHeader, Se as SidebarItem, Ce as SidebarLink, E as Slot, we as Table, Te as TableTd, Ee as TableTh, De as TableTr, Oe as Tabs, ke as TabsContent, Ae as TabsItem, je as TabsItems, Me as Text, Ne as Title, Pe as Wizard, Fe as WizardFinalize, Ie as WizardFooter, Le as WizardHeader, Re as WizardIndicator, ze as WizardNext, Be as WizardPrevious, Ve as WizardStep, He as WizardTitle, h as defaultBreakpoints, d as useBreadcrumb, p as useDisclosure, m as useMatchDevice, g as useMatchResolution, f as useOutsideAlerter, _ as usePagination, v as useScrollTo, y as useVisible, b as useWizard };
+import { useFilters as m } from "./hooks/use-filters/use-filters.js";
+import { useMatchDevice as h } from "./hooks/use-match-device/use-match-device.js";
+import { defaultBreakpoints as g, useMatchResolution as _ } from "./hooks/use-match-resolution/use-match-resolution.js";
+import { usePagination as v } from "./hooks/use-pagination/use-pagination.js";
+import { useScrollTo as y } from "./hooks/use-scroll-to/use-scroll-to.js";
+import { useSort as b } from "./hooks/use-sort/use-sort.js";
+import { useVisible as x } from "./hooks/use-visible/use-visible.js";
+import { useWizard as S } from "./hooks/use-wizard/use-wizard.js";
+import { Collapsible as C, CollapsibleContent as w, CollapsibleItem as T, CollapsibleTrigger as E } from "./components/collapsible/collapsible.js";
+import { Container as D } from "./components/container/container.js";
+import { Slot as O } from "./components/slot/slot.js";
+import { DropdownMenu as k, DropdownMenuContent as A, DropdownMenuIcon as j, DropdownMenuItem as M, DropdownMenuTrigger as N } from "./components/dropdown-menu/dropdown-menu.js";
+import { Dropzone as P, DropzoneArea as F, DropzoneEmpty as I, DropzoneLabel as L, DropzonePreview as R, DropzoneRemove as z } from "./components/dropzone/dropzone.js";
+import { FilterAdd as B, FilterHeader as V, FilterRemove as H, FilterRow as U, Filters as W } from "./components/filters/filters.js";
+import { Flex as G } from "./components/flex/flex.js";
+import { Grid as K } from "./components/grid/grid.js";
+import { Input as q, InputField as J, InputLabel as Y, InputMessage as X } from "./components/input/input.js";
+import { LanguageSelector as Z } from "./components/language-selector/language-selector.js";
+import { List as Q, ListItem as $ } from "./components/list/list.js";
+import { Loader as ee, LoaderSpinner as te } from "./components/loader/loader.js";
+import { Modal as ne, ModalBody as re, ModalClose as ie, ModalContent as ae, ModalFooter as oe, ModalHeader as se, ModalOverlay as ce, ModalTrigger as le } from "./components/modal/modal.js";
+import { Pagination as ue, PaginationFirst as de, PaginationItems as fe, PaginationLast as pe, PaginationNext as me, PaginationPrevious as he } from "./components/pagination/pagination.js";
+import { Popover as ge, PopoverContent as _e, PopoverTrigger as ve } from "./components/popover/popover.js";
+import { RadioGroup as ye, RadioGroupItem as be } from "./components/radio-group/radio-group.js";
+import { Select as xe, SelectContent as Se, SelectItem as Ce, SelectTrigger as we } from "./components/select/select.js";
+import { Separator as Te } from "./components/separator/separator.js";
+import { Sidebar as Ee, SidebarGroup as De, SidebarHeader as Oe, SidebarItem as ke, SidebarLink as Ae } from "./components/sidebar/sidebar.js";
+import { Table as je, TableBody as Me, TableCell as Ne, TableFooter as Pe, TableHeader as Fe, TableHeaderCell as Ie, TableRow as Le, TableSortTrigger as Re } from "./components/table/table.js";
+import { Tabs as ze, TabsContent as Be, TabsItem as Ve, TabsItems as He } from "./components/tabs/tabs.js";
+import { Text as Ue } from "./components/text/text.js";
+import { Title as We } from "./components/title/title.js";
+import { Wizard as Ge, WizardFinalize as Ke, WizardFooter as qe, WizardHeader as Je, WizardIndicator as Ye, WizardNext as Xe, WizardPrevious as Ze, WizardStep as Qe, WizardTitle as $e } from "./components/wizard/wizard.js";
+export { e as Badge, t as Breadcrumb, n as BreadcrumbItem, r as BreadcrumbSeparator, i as Button, a as Card, o as CardBody, s as CardFooter, c as CardHeader, l as Checkbox, u as Chip, C as Collapsible, w as CollapsibleContent, T as CollapsibleItem, E as CollapsibleTrigger, D as Container, k as DropdownMenu, A as DropdownMenuContent, j as DropdownMenuIcon, M as DropdownMenuItem, N as DropdownMenuTrigger, P as Dropzone, F as DropzoneArea, I as DropzoneEmpty, L as DropzoneLabel, R as DropzonePreview, z as DropzoneRemove, B as FilterAdd, V as FilterHeader, H as FilterRemove, U as FilterRow, W as Filters, G as Flex, K as Grid, q as Input, J as InputField, Y as InputLabel, X as InputMessage, Z as LanguageSelector, Q as List, $ as ListItem, ee as Loader, te as LoaderSpinner, ne as Modal, re as ModalBody, ie as ModalClose, ae as ModalContent, oe as ModalFooter, se as ModalHeader, ce as ModalOverlay, le as ModalTrigger, ue as Pagination, de as PaginationFirst, fe as PaginationItems, pe as PaginationLast, me as PaginationNext, he as PaginationPrevious, ge as Popover, _e as PopoverContent, ve as PopoverTrigger, ye as RadioGroup, be as RadioGroupItem, xe as Select, Se as SelectContent, Ce as SelectItem, we as SelectTrigger, Te as Separator, Ee as Sidebar, De as SidebarGroup, Oe as SidebarHeader, ke as SidebarItem, Ae as SidebarLink, O as Slot, je as Table, Me as TableBody, Ne as TableCell, Pe as TableFooter, Fe as TableHeader, Ie as TableHeaderCell, Le as TableRow, Re as TableSortTrigger, ze as Tabs, Be as TabsContent, Ve as TabsItem, He as TabsItems, Ue as Text, We as Title, Ge as Wizard, Ke as WizardFinalize, qe as WizardFooter, Je as WizardHeader, Ye as WizardIndicator, Xe as WizardNext, Ze as WizardPrevious, Qe as WizardStep, $e as WizardTitle, g as defaultBreakpoints, d as useBreadcrumb, p as useDisclosure, m as useFilters, h as useMatchDevice, _ as useMatchResolution, f as useOutsideAlerter, v as usePagination, y as useScrollTo, b as useSort, x as useVisible, S as useWizard };