@empreint/ui 1.2.3 → 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';
@@ -11,6 +11,14 @@ import { SVGAttributes } from 'react';
 
 declare type AnyProps = Record<string, unknown>;
 
+export declare const Badge: ({ children, variant, className, ...rest }: BadgeProps) => JSX.Element;
+
+export declare type BadgeProps = ComponentProps<"span"> & {
+    variant?: BadgeVariant;
+};
+
+export declare type BadgeVariant = "solid" | "soft" | "outline";
+
 export declare const Breadcrumb: ({ children, className, ...rest }: ComponentProps<"nav">) => JSX.Element;
 
 export declare const BreadcrumbItem: ({ children, current, className, ...rest }: BreadcrumbItemProps) => JSX.Element;
@@ -91,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"> & {
@@ -160,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"> & {
@@ -240,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;
@@ -295,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;
@@ -382,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 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 TableCell: ({ className, ...rest }: ComponentProps<"td">) => JSX.Element;
+
+export declare const TableFooter: ({ className, ...rest }: ComponentProps<"tfoot">) => JSX.Element;
+
+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;
 
@@ -468,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;
@@ -498,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

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