@sqrzro/ui 4.0.0-alpha.2 → 4.0.0-alpha.20

package/dist/components/buttons/ActionButton/index.d.ts

@@ -1,7 +1,7 @@
-import type { Action } from '../../../utility/interfaces';
-type ActionButtonProps = Omit<Action, 'label'> & {
-    readonly children?: React.ReactNode;
-    readonly label?: React.ReactNode;
-};
-declare function ActionButton(props: ActionButtonProps): React.ReactElement;
+import { ActionComponentProps } from '../../../components/utility/Action';
+export interface ActionButtonProps<Data extends object | null = null> extends Omit<ActionComponentProps<Data>, 'children'> {
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+}
+declare function ActionButton<Data extends object | null = null>({ isSubmittable, ...props }: ActionButtonProps<Data>): React.ReactElement;
 export default ActionButton;

package/dist/components/buttons/ActionButton/index.js

@@ -1,33 +1,9 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import Button from '../../../components/buttons/Button';
-import ConfirmableButton from '../../../components/buttons/ConfirmableButton';
+import Action from '../../../components/utility/Action';
 import FormSubmit from '../../../forms/components/FormSubmit';
-import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
-import { Suspense } from 'react';
-function ActionButtonComponent({ action, children, confirmable, href, icon, isDisabled, isLoading, isSubmittable, label, onClick, variant, }) {
-    const { setSearchParamsHref } = useSearchParamsHref();
-    function handleClick() {
-        onClick?.();
-        if (action) {
-            setSearchParamsHref({ action });
-        }
-    }
-    const componentProps = {
-        children: children ?? label,
-        href,
-        icon,
-        isDisabled: Boolean(isDisabled || isLoading),
-        isLoading: isLoading && (isSubmittable || variant === 'primary'),
-        onClick: handleClick,
-        variant,
-    };
-    if (confirmable) {
-        return _jsx(ConfirmableButton, { ...componentProps, confirmable: confirmable });
-    }
-    return isSubmittable ? _jsx(FormSubmit, { ...componentProps }) : _jsx(Button, { ...componentProps });
-}
-function ActionButton(props) {
-    return (_jsx(Suspense, { children: _jsx(ActionButtonComponent, { ...props }) }));
+function ActionButton({ isSubmittable, ...props }) {
+    return _jsx(Action, { ...props, render: isSubmittable ? FormSubmit : Button });
 }
 export default ActionButton;

package/dist/components/buttons/Button/index.d.ts

@@ -1,7 +1,7 @@
-import type { ClassNameProps, StylableButtonClassName } from '../../../styles/interfaces';
-import { ButtonVariant } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ActionEvent, StyleVariant } from '../../../utility/interfaces';
 export interface ButtonClassNames {
-    root: StylableButtonClassName;
+    root: string;
     icon: string;
 }
 export interface ButtonProps extends ClassNameProps<ButtonClassNames> {
@@ -30,7 +30,7 @@ export interface ButtonProps extends ClassNameProps<ButtonClassNames> {
     /** Used in situations where the button needs to be identified by name */
     readonly name?: string;
     /** An event handler for when the button is clicked */
-    readonly onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    readonly onClick?: (event?: ActionEvent) => void;
     /** If specified, a Popover component can be anchored to the target element with this ID */
     readonly popoverTarget?: string;
     readonly scroll?: boolean;
@@ -40,7 +40,7 @@ export interface ButtonProps extends ClassNameProps<ButtonClassNames> {
     /** Used in situations where a button value needs to be submitted with a form */
     readonly value?: string;
     /** A set of predefined variants that can be passed to the classNames config to customize the button's appearance */
-    readonly variant?: ButtonVariant;
+    readonly variant?: StyleVariant[] | StyleVariant;
 }
 /**
  * Either a `Link` component or a `button` element, depending on whether a `href` prop is specified.

package/dist/components/buttons/Button/index.js

@@ -3,14 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import Link from '../../../components/utility/Link';
 import Loader from '../../../components/utility/Loader';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
-function getVariantClassName(className, variant) {
-    if (!className || !variant) {
-        return null;
-    }
-    return className[variant] || null;
-}
+import { getClassNames } from '../../../styles/classnames';
+import applyVariants from '../../../styles/classnames/apply-variants';
+import tw from '../../../styles/classnames/tw';
 /**
  * Either a `Link` component or a `button` element, depending on whether a `href` prop is specified.
  *
@@ -32,12 +27,8 @@ function getVariantClassName(className, variant) {
  */
 function Button({ children, classNames, classNameProps, form, hasAssistiveLabel, href, icon, id, isDisabled, isFullWidth, isLoading, isNewWindow, isText, name, onClick, popoverTarget, scroll, style, type, value, variant, }) {
     const ref = useRef(null);
-    const componentClassNames = classNames ||
-        getClassNames(isText ? 'textButton' : 'button')?.({
-            ...(classNameProps || {}),
-            hasAssistiveLabel,
-        });
-    const className = tw('flex cursor-pointer items-center justify-center whitespace-nowrap', isDisabled || isLoading ? 'pointer-events-none opacity-30' : null, isFullWidth ? 'w-full' : null, componentClassNames?.root?.default, getVariantClassName(componentClassNames?.root, variant));
+    const componentClassNames = getClassNames(isText ? 'textButton' : 'button', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
+    const className = tw('flex cursor-pointer items-center justify-center whitespace-nowrap', isDisabled || isLoading ? 'pointer-events-none opacity-30' : null, isFullWidth ? 'w-full' : null, componentClassNames?.root);
     /*
      *  Link uses classNames, whereas button uses className. This is because Link can also be used
      *  headless in other applications, and so should have consistency.

package/dist/components/collections/Collection/index.d.ts

@@ -2,14 +2,20 @@ import type { FilterMap } from '../../../filters/interfaces';
 import type { NextPageProps } from '../../../utility/interfaces';
 import type { EmptyMessageProps } from '../EmptyMessage';
 import type { ListFunctionConfig, Paginated } from '../interfaces';
-export interface CollectionProps<Item, Transformed, Filters = null> {
+export interface CollectionComponentProps<Item, Transformed, Filters = null> {
     readonly data?: Item[] | Paginated<Item>;
+    readonly defaultFilters?: Partial<Filters>;
     readonly emptyMessageProps?: EmptyMessageProps;
     readonly filterMap?: FilterMap<Filters>;
     readonly fn?: (config: ListFunctionConfig<Filters>) => Promise<Item[]> | Promise<Paginated<Item>>;
     readonly pageProps?: NextPageProps;
-    readonly render: (data: Transformed[]) => React.ReactElement;
+    readonly renderFilters?: (props: {
+        map: FilterMap<Filters>;
+    }) => React.ReactElement;
     readonly transformer: (item: Item) => Transformed;
 }
-declare function Collection<Item extends object, Transformed, Filters>({ filterMap, ...props }: CollectionProps<Item, Transformed, Filters>): React.ReactElement;
+export interface CollectionProps<Item, Transformed, Filters = null> extends CollectionComponentProps<Item, Transformed, Filters> {
+    readonly render: (data: Transformed[]) => React.ReactElement;
+}
+declare function Collection<Item extends object, Transformed, Filters>({ filterMap, renderFilters, ...props }: CollectionProps<Item, Transformed, Filters>): React.ReactElement;
 export default Collection;

package/dist/components/collections/Collection/index.js

@@ -10,7 +10,7 @@ import EmptyMessage from '../EmptyMessage';
 import Pagination from '../Pagination';
 import isPaginated from '../utility/is-paginated';
 import { messages } from '../lang';
-async function CollectionComponent({ data, emptyMessageProps, filterMap, fn, pageProps, render, transformer, }) {
+async function CollectionComponent({ data, defaultFilters, emptyMessageProps, filterMap, fn, pageProps, render, transformer, }) {
     const EmptyIcon = getIcon('collection.empty');
     const awaitedParams = pageProps?.params ? await pageProps.params : null;
     const awaitedSearchParams = pageProps?.searchParams ? await pageProps.searchParams : null;
@@ -23,7 +23,7 @@ async function CollectionComponent({ data, emptyMessageProps, filterMap, fn, pag
         }
         const filters = parseFilters(awaitedSearchParams, filterMap);
         const page = parsePage(awaitedSearchParams);
-        return fn({ filters, page, params: awaitedParams });
+        return fn({ filters: { ...defaultFilters, ...filters }, page, params: awaitedParams });
     }
     const response = await getResponse();
     const dynamicData = (isPaginated(response) ? response.data : response).map(transformer);
@@ -39,7 +39,7 @@ async function CollectionComponent({ data, emptyMessageProps, filterMap, fn, pag
     }
     return (_jsxs(Fragment, { children: [render(dynamicData), isPaginated(response) ? (_jsx(Pagination, { ...response.meta, nextLabel: "Next \u2192", previousLabel: "\u2190 Previous" })) : null] }));
 }
-function Collection({ filterMap, ...props }) {
-    return (_jsxs(Fragment, { children: [filterMap ? _jsx(FilterBar, { map: filterMap }) : null, _jsx(Suspense, { fallback: _jsx("div", { className: "flex justify-center p-16", children: _jsx(Loader, {}) }), children: _jsx(CollectionComponent, { ...props, filterMap: filterMap }) })] }));
+function Collection({ filterMap, renderFilters = FilterBar, ...props }) {
+    return (_jsxs(Fragment, { children: [filterMap ? renderFilters({ map: filterMap }) : null, _jsx(Suspense, { fallback: _jsx("div", { className: "flex justify-center p-16", children: _jsx(Loader, {}) }), children: _jsx(CollectionComponent, { ...props, filterMap: filterMap }) })] }));
 }
 export default Collection;

package/dist/components/collections/DataTable/index.d.ts

@@ -0,0 +1,14 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { DataTableObject } from '../interfaces';
+export interface DataTableClassNames {
+    root: string;
+    row: string;
+    cell: string;
+    label: string;
+    value: string;
+}
+export interface DataTableProps extends ClassNameProps<DataTableClassNames> {
+    readonly data: (DataTableObject | null)[];
+}
+declare function DataTable({ classNameProps, classNames, data }: DataTableProps): React.ReactElement;
+export default DataTable;

package/dist/components/collections/DataTable/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterNull } from '@sqrzro/utility';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
+function DataTable({ classNameProps, classNames, data }) {
+    const componentClassNames = getClassNames('dataTable', { props: classNameProps }, classNames);
+    return (_jsx("table", { className: tw('w-full', componentClassNames?.root), children: _jsx("tbody", { children: filterNull(data).map(({ label, value }, index) => (_jsxs("tr", { className: componentClassNames?.row, children: [_jsx("th", { className: tw(componentClassNames?.cell, componentClassNames?.label), children: label }), _jsx("td", { className: tw(componentClassNames?.cell, componentClassNames?.value), children: value })] }, index))) }) }));
+}
+export default DataTable;

package/dist/components/collections/EmptyMessage/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, StylableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces';
 import { StyleVariant } from '../../../utility/interfaces';
 import type { EmptyMessageActionProps } from '../EmptyMessageAction';
 export interface EmptyMessageClassNames {

package/dist/components/collections/EmptyMessage/index.js

@@ -1,7 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
 import EmptyMessageAction from '../EmptyMessageAction';
 export const DEFAULT_TITLE = 'No results found';
 export const DEFAULT_CHILDREN = 'If you think this is an error, please contact the site administrator.';
@@ -11,7 +10,7 @@ export const DEFAULT_CHILDREN = 'If you think this is an error, please contact t
  * component to be used for any situation where a standout message is required.
  */
 function EmptyMessage({ action, children = DEFAULT_CHILDREN, classNameProps, classNames, icon, title = DEFAULT_TITLE, variant, }) {
-    const componentClassNames = classNames || getClassNames('emptyMessage')?.(classNameProps);
-    return (_jsxs("section", { className: tw(componentClassNames?.root?.default, variant ? componentClassNames?.root?.[variant] : null), children: [icon ? (_jsx("div", { className: tw(componentClassNames?.icon?.default, variant ? componentClassNames?.icon?.[variant] : null), children: icon })) : null, _jsx("h2", { className: tw(componentClassNames?.title?.default, variant ? componentClassNames?.title?.[variant] : null), children: title }), _jsx("div", { className: tw(componentClassNames?.description), children: children }), action ? (_jsx("div", { className: tw(componentClassNames?.action), children: _jsx(EmptyMessageAction, { action: action }) })) : null] }));
+    const componentClassNames = getClassNames('emptyMessage', { props: classNameProps }, classNames);
+    return (_jsxs("section", { className: componentClassNames?.root, children: [icon ? _jsx("div", { className: componentClassNames?.icon, children: icon }) : null, _jsx("h2", { className: componentClassNames?.title, children: title }), _jsx("div", { className: componentClassNames?.description, children: children }), action ? (_jsx("div", { className: componentClassNames?.action, children: _jsx(EmptyMessageAction, { action: action }) })) : null] }));
 }
 export default EmptyMessage;

package/dist/components/collections/EmptyMessageAction/index.d.ts

@@ -1,6 +1,6 @@
-import { Action } from '../../../utility/interfaces';
+import { ActionObject } from '../../../utility/interfaces';
 export interface EmptyMessageActionProps {
-    action: Action | React.ReactElement;
+    action: ActionObject | React.ReactElement;
 }
 declare function EmptyMessageAction({ action }: Readonly<EmptyMessageActionProps>): React.ReactElement;
 export default EmptyMessageAction;

package/dist/components/collections/EmptyMessageAction/index.js

@@ -13,7 +13,7 @@ function EmptyMessageAction({ action }) {
             action.onClick();
         }
     }
-    const href = action.action ? getSearchParamsHref('action', action.action) : action.href;
+    const href = action.searchParams ? getSearchParamsHref(action.searchParams) : action.href;
     return (_jsx(Button, { href: href, isDisabled: Boolean(action.isDisabled), onClick: handleClick, variant: "primary", children: action.label }));
 }
 export default EmptyMessageAction;

package/dist/components/collections/List/index.d.ts

@@ -1,6 +1,8 @@
-import { CollectionProps } from '../Collection';
+import { CollectionComponentProps } from '../Collection';
 import type { ListItemObject } from '../interfaces';
-export interface ListProps<Item, Filters = null, Data extends object | null = null> extends Omit<CollectionProps<Item, ListItemObject<Data>, Filters>, 'render'> {
+export interface ListClassNames {
+    root: string;
 }
-declare function List<Item extends object, Filters, Data extends object | null = null>(props: ListProps<Item, Filters, Data>): React.ReactElement;
+export type ListProps<Item, Filters = null, Data extends object | null = null> = CollectionComponentProps<Item, ListItemObject<Data>, Filters>;
+declare function List<Item extends object, Filters = null, Data extends object | null = null>(props: ListProps<Item, Filters, Data>): React.ReactElement;
 export default List;

package/dist/components/collections/List/index.js

@@ -1,13 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { getClassNames } from '../../../styles/classnames';
 import Collection from '../Collection';
-import ListClientComponent from '../ListClientComponent';
+import ListItem from '../ListItem';
 function defaultTransformer(item) {
     return {
         id: 'id' in item ? String(item.id) : JSON.stringify(item),
         title: 'title' in item ? String(item.title) : '',
     };
 }
+function ListComponent({ classNameProps, classNames, data, renderItem = ListItem, }) {
+    const componentClassNames = getClassNames('list', { props: classNameProps }, classNames);
+    return (_jsx("ul", { className: componentClassNames?.root, children: data.map((item) => (_jsx(Fragment, { children: renderItem(item) }, item.id))) }));
+}
 function List(props) {
-    return (_jsx(Collection, { ...props, render: (data) => _jsx(ListClientComponent, { data: data }), transformer: props.transformer ?? defaultTransformer }));
+    return (_jsx(Collection, { ...props, render: (data) => _jsx(ListComponent, { data: data }), transformer: props.transformer ?? defaultTransformer }));
 }
 export default List;

package/dist/components/collections/ListItem/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, StylableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces';
 import type { ListItemObject } from '../interfaces';
 export interface ListItemClassNames {
     description: string;
@@ -10,5 +10,5 @@ export interface ListItemClassNames {
 }
 export interface ListItemProps<Data extends object | null = null> extends ClassNameProps<ListItemClassNames>, ListItemObject<Data> {
 }
-declare function ListItem<Data extends object | null = null>({ classNames, classNameProps, description, href, id, isLoading, meta, secondary, tertiary, title, variant, }: Readonly<ListItemProps<Data>>): React.ReactElement;
+declare function ListItem<Data extends object | null = null>({ $data, actions, classNames, classNameProps, description, href, id, isLoading, meta, secondary, tertiary, title, variant, }: Readonly<ListItemProps<Data>>): React.ReactElement;
 export default ListItem;

package/dist/components/collections/ListItem/index.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// import type { MenuAction } from '../../elements/MenuItem';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 import Link from '../../../components/utility/Link';
 import ListItemSecondary from '../ListItemSecondary';
 import ListItemMeta from '../ListItemMeta';
+import ListItemMenu from '../ListItemMenu';
 const colMap = {
     1: 'grid-cols-1',
     2: 'grid-cols-1 @lg:grid-cols-[1fr_1fr]',
@@ -14,15 +14,11 @@ function getLayout(layout) {
     const count = layout.filter(Boolean).length;
     return colMap[count];
 }
-function ListItem({ 
-// actions,
-classNames, classNameProps, description, href, id, isLoading, meta, secondary, tertiary, title, variant, }) {
-    const componentClassNames = classNames || getClassNames('listItem')?.(classNameProps);
+function ListItem({ $data, actions, classNames, classNameProps, description, href, id, isLoading, meta, secondary, tertiary, title, variant, }) {
+    const componentClassNames = getClassNames('listItem', { props: classNameProps }, classNames);
     const hasPrimary = Boolean(title || description || meta);
     const hasSecondary = Boolean(secondary);
     const hasTertiary = Boolean(tertiary);
-    return (_jsx("li", { className: tw('@container relative grid', componentClassNames?.root?.default, variant ? componentClassNames?.root?.[variant] : null, isLoading ? 'pointer-events-none animate-pulse' : null
-        // typeof actions === 'function' ? 'grid-cols-[1fr_auto] gap-4' : 'grid-cols-1'
-        ), children: _jsx("article", { className: "contents", children: _jsxs("div", { className: tw('grid gap-x-6 gap-y-4', getLayout([hasPrimary, hasSecondary, hasTertiary])), children: [_jsxs("div", { className: componentClassNames?.primary, children: [title ? (_jsx("h2", { className: tw(componentClassNames?.title?.default, variant ? componentClassNames?.title?.[variant] : null), children: href ? (_jsx(Link, { className: "hover:text-link", href: href, children: title })) : (title) })) : null, description ? (_jsx("div", { className: componentClassNames?.description, children: description })) : null, _jsx(ListItemMeta, { classNameProps: classNameProps, data: meta?.data, id: id })] }), tertiary ? (_jsx("div", { className: componentClassNames?.tertiary, children: tertiary })) : null, _jsx(ListItemSecondary, { classNameProps: classNameProps, classNames: classNames, data: secondary?.data, variant: variant })] }) }) }));
+    return (_jsx("li", { className: tw('@container relative grid', componentClassNames?.root, isLoading ? 'pointer-events-none animate-pulse' : null, actions ? 'grid-cols-[1fr_auto] gap-4' : 'grid-cols-1'), children: _jsxs("article", { className: "contents", children: [_jsxs("div", { className: tw('grid gap-x-6 gap-y-4', getLayout([hasPrimary, hasSecondary, hasTertiary])), children: [_jsxs("div", { className: componentClassNames?.primary, children: [title ? (_jsx("h2", { className: componentClassNames?.title, children: href ? (_jsx(Link, { className: "hover:text-link", href: href, children: title })) : (title) })) : null, description ? (_jsx("div", { className: componentClassNames?.description, children: description })) : null, _jsx(ListItemMeta, { classNameProps: classNameProps, data: meta })] }), tertiary ? (_jsx("div", { className: componentClassNames?.tertiary, children: tertiary })) : null, _jsx(ListItemSecondary, { classNameProps: classNameProps, classNames: classNames, data: secondary?.data, variant: variant })] }), actions ? _jsx(ListItemMenu, { actions: actions, data: $data }) : null] }) }));
 }
 export default ListItem;

package/dist/components/collections/ListItemMenu/index.d.ts

@@ -0,0 +1,7 @@
+import type { ActionObject } from '../../../utility/interfaces';
+interface ListItemMenuProps<Data extends object | null = null> {
+    actions: ActionObject<Data>[];
+    data?: Data;
+}
+declare function ListItemMenu<Data extends object | null = null>({ actions, data, }: ListItemMenuProps<Data>): React.ReactElement;
+export default ListItemMenu;

package/dist/components/collections/ListItemMenu/index.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Menu from '../../../components/utility/Menu';
+function ListItemMenu({ actions, data, }) {
+    return _jsx(Menu, { actions: actions, data: data, label: "\u2022\u2022\u2022" });
+}
+export default ListItemMenu;

package/dist/components/collections/ListItemMeta/index.d.ts

@@ -1,11 +1,13 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
-import type { ListItemObject } from '../interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { DataTableObject } from '../interfaces';
 export interface ListItemMetaClassNames {
     root: string;
     row: string;
     title: string;
     value: string;
 }
-export type ListItemMetaProps = ClassNameProps<ListItemMetaClassNames> & ListItemObject['meta'];
-declare function ListItemMeta({ classNameProps, classNames, id, data, }: Readonly<ListItemMetaProps>): React.ReactElement | null;
+export type ListItemMetaProps = ClassNameProps<ListItemMetaClassNames> & {
+    data?: React.ReactNode[] | (DataTableObject | null)[];
+};
+declare function ListItemMeta({ classNameProps, classNames, data, }: Readonly<ListItemMetaProps>): React.ReactElement | null;
 export default ListItemMeta;

package/dist/components/collections/ListItemMeta/index.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { isValidElement } from 'react';
 import { filterNull } from '@sqrzro/utility';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import DataTable from '../DataTable';
+import isDataTableArray from '../utility/is-data-table-array';
 function getKey(item) {
     if (isValidElement(item)) {
         return item.key || '-';
@@ -12,11 +13,15 @@ function getKey(item) {
     }
     return String(item);
 }
-function ListItemMeta({ classNameProps, classNames, id, data, }) {
-    const componentClassNames = classNames || getClassNames('listItemMeta')?.(classNameProps);
-    if (!data) {
+function ListItemMeta({ classNameProps, classNames, data, }) {
+    const componentClassNames = getClassNames('listItemMeta', { props: classNameProps }, classNames);
+    if (!data?.length) {
         return null;
     }
-    return Array.isArray(data) ? (_jsx("ul", { className: tw(componentClassNames?.root), children: filterNull(data).map((item) => (_jsx("li", { className: "whitespace-nowrap", children: item }, getKey(item)))) })) : (_jsx("table", { className: "w-full", children: _jsx("tbody", { children: Object.entries(data).map(([key, value]) => (_jsxs("tr", { className: componentClassNames?.row, children: [_jsx("th", { className: componentClassNames?.title, children: key }), _jsx("td", { className: componentClassNames?.value, children: value || '-' })] }, key))) }) }));
+    const filteredData = filterNull(data);
+    if (isDataTableArray(filteredData)) {
+        return _jsx(DataTable, { data: filteredData });
+    }
+    return (_jsx("ul", { className: componentClassNames?.root, children: filteredData.map((item) => (_jsx("li", { className: "whitespace-nowrap", children: item }, getKey(item)))) }));
 }
 export default ListItemMeta;

package/dist/components/collections/ListItemSecondary/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { ListItemClassNames } from '../ListItem';
 import type { ListItemObject } from '../interfaces';
 export type ListItemSecondaryProps = ClassNameProps<ListItemClassNames> & ListItemObject['secondary'];

package/dist/components/collections/ListItemSecondary/index.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from 'react';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
 import ListItemMeta from '../ListItemMeta';
 function ListItemSecondary({ classNameProps, classNames, data, variant, }) {
-    const componentClassNames = classNames || getClassNames('listItem')?.(classNameProps);
+    const componentClassNames = getClassNames('listItem', { props: classNameProps }, classNames);
     if (!data) {
         return null;
     }
     if (isValidElement(data)) {
         return _jsx("div", { className: componentClassNames?.secondary, children: data });
     }
-    return (_jsxs("div", { className: componentClassNames?.secondary, children: [data.title ? (_jsx("p", { className: tw(componentClassNames?.title?.default, variant ? componentClassNames?.title?.[variant] : null), children: data.title })) : null, data.description ? (_jsx("div", { className: componentClassNames?.description, children: data.description })) : null, _jsx(ListItemMeta, { classNameProps: { ...classNameProps, isSecondary: true }, data: data.meta?.data, id: "secondary" })] }));
+    return (_jsxs("div", { className: componentClassNames?.secondary, children: [data.title ? _jsx("p", { className: componentClassNames?.title, children: data.title }) : null, data.description ? (_jsx("div", { className: componentClassNames?.description, children: data.description })) : null, _jsx(ListItemMeta, { classNameProps: { ...classNameProps, isSecondary: true }, data: data.meta })] }));
 }
 export default ListItemSecondary;

package/dist/components/collections/Pagination/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps, HighlightableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/classnames/interfaces';
 export interface PaginationClassNames {
     gap: string;
     item: string;

package/dist/components/collections/Pagination/index.js

@@ -1,17 +1,16 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import usePagination from '../../../hooks/usePagination';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 import Link from '../../../components/utility/Link';
+import PaginationLink from '../PaginationLink';
 function Pagination({ classNames, classNameProps, gapLabel = '•••', limit, nextLabel, page, previousLabel, total, }) {
-    const componentClassNames = classNames || getClassNames('pagination')?.(classNameProps);
+    const componentClassNames = getClassNames('pagination', { props: classNameProps }, classNames);
     const { links, nextLink, pageCount, previousLink } = usePagination({ limit, page, total });
     if (pageCount <= 1) {
         return null;
     }
-    return (_jsxs("nav", { className: tw(componentClassNames?.root), children: [previousLabel ? (_jsx(Link, { className: tw(componentClassNames?.navigation, page <= 1 ? 'pointer-events-none opacity-30' : null), href: previousLink, children: previousLabel })) : null, _jsx("ul", { className: tw(componentClassNames?.list), children: links.map((link, index) => (_jsx("li", { className: componentClassNames?.item, children: link ? (_jsx(Link, { className: tw(componentClassNames?.link?.default, link.label === page.toString()
-                            ? componentClassNames?.link?.highlighted
-                            : null), href: link.href, children: link.label })) : (_jsx("span", { className: tw(componentClassNames?.gap), children: gapLabel })) }, index))) }), nextLabel ? (_jsx(Link, { className: tw(componentClassNames?.navigation, page >= pageCount ? 'pointer-events-none opacity-30' : null), href: nextLink, children: nextLabel })) : null] }));
+    return (_jsxs("nav", { className: componentClassNames?.root, children: [previousLabel ? (_jsx(Link, { className: tw(componentClassNames?.navigation, page <= 1 ? 'pointer-events-none opacity-30' : null), href: previousLink, children: previousLabel })) : null, _jsx("ul", { className: componentClassNames?.list, children: links.map((link, index) => (_jsx("li", { className: componentClassNames?.item, children: link ? (_jsx(PaginationLink, { ...link, isCurrent: link.label === page.toString() })) : (_jsx("span", { className: componentClassNames?.gap, children: gapLabel })) }, index))) }), nextLabel ? (_jsx(Link, { className: tw(componentClassNames?.navigation, page >= pageCount ? 'pointer-events-none opacity-30' : null), href: nextLink, children: nextLabel })) : null] }));
 }
 export default Pagination;

package/dist/components/collections/PaginationLink/index.d.ts

@@ -0,0 +1,9 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { PaginationClassNames } from '../Pagination';
+interface PaginationLinkProps extends ClassNameProps<PaginationClassNames> {
+    href: string;
+    isCurrent: boolean;
+    label: string;
+}
+declare function PaginationLink({ classNameProps, classNames, href, isCurrent, label, }: PaginationLinkProps): React.ReactElement;
+export default PaginationLink;

package/dist/components/collections/PaginationLink/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Link from '../../../components/utility/Link';
+import { getClassNames } from '../../../styles/classnames';
+function PaginationLink({ classNameProps, classNames, href, isCurrent, label, }) {
+    const componentClassNames = getClassNames('pagination', { props: classNameProps, states: { isHighlighted: isCurrent } }, classNames);
+    return (_jsx(Link, { className: componentClassNames?.link, href: href, children: label }));
+}
+export default PaginationLink;

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

@@ -1,9 +1,9 @@
-import { CollectionProps } from '../Collection';
+import { CollectionComponentProps } from '../Collection';
 import type { TableColumnObject, TableItemObject } from '../interfaces';
 export type { TableClassNames } from '../TableClientComponent';
-export interface TableProps<Item, Filters = null> extends CollectionProps<Item, TableItemObject, Filters> {
+export interface TableProps<Item, Filters = null, Data extends object | null = null> extends CollectionComponentProps<Item, TableItemObject<Data>, Filters> {
     readonly columns: TableColumnObject[];
     readonly isSelectable?: boolean;
 }
-declare function Table<Item extends object, Filters>({ columns, isSelectable, ...props }: TableProps<Item, Filters>): React.ReactElement;
+declare function Table<Item extends object, Filters = null, Data extends object | null = null>({ columns, isSelectable, ...props }: TableProps<Item, Filters, Data>): React.ReactElement;
 export default Table;

package/dist/components/collections/Table/index.js

@@ -4,7 +4,7 @@ import TableClientComponent from '../TableClientComponent';
 function defaultTransformer(item) {
     return {
         id: 'id' in item ? String(item.id) : JSON.stringify(item),
-        ...item,
+        row: { ...item },
     };
 }
 function Table({ columns, isSelectable, ...props }) {

package/dist/components/collections/TableClientComponent/index.d.ts

@@ -1,14 +1,14 @@
-import { ClassNameProps, SelectableClassName } from '../../../styles/interfaces';
+import { ClassNameProps, SelectableClassName } from '../../../styles/classnames/interfaces';
 import type { TableColumnObject, TableItemObject } from '../interfaces';
 export interface TableClassNames {
     root: string;
     row: SelectableClassName;
     cell: string;
 }
-interface TableClientComponentProps extends ClassNameProps<TableClassNames> {
+interface TableClientComponentProps<Data extends object | null = null> extends ClassNameProps<TableClassNames> {
     readonly columns: TableColumnObject[];
-    readonly data: TableItemObject[];
+    readonly data: TableItemObject<Data>[];
     readonly isSelectable?: boolean;
 }
-declare function TableClientComponent({ classNameProps, classNames, columns, data, isSelectable, }: Readonly<TableClientComponentProps>): React.ReactElement;
+declare function TableClientComponent<Data extends object | null = null>({ classNameProps, classNames, columns, data, isSelectable, }: Readonly<TableClientComponentProps<Data>>): React.ReactElement;
 export default TableClientComponent;

package/dist/components/collections/TableClientComponent/index.js

@@ -1,19 +1,16 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { toggleArrayItem } from '@sqrzro/utility';
 import { useSearchParams } from 'next/navigation';
-import Switch from '../../../forms/components/Switch';
 import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
-import filterColumns from '../utility/filter-columns';
+import { getClassNames } from '../../../styles/classnames';
 import getSelectedFromSearchParams from '../utility/get-selected-from-search-params';
 import setSelectedToSearchParams from '../utility/set-selected-to-search-params';
+import TableRow from '../TableRow';
 function TableClientComponent({ classNameProps, classNames, columns, data, isSelectable, }) {
-    const componentClassNames = classNames || getClassNames('table')?.(classNameProps);
+    const componentClassNames = getClassNames('table', { props: classNameProps }, classNames);
     const { setSearchParamsHref } = useSearchParamsHref();
     const searchParams = useSearchParams();
-    const filteredColumns = filterColumns(columns, isSelectable);
     const selected = getSelectedFromSearchParams(searchParams);
     function handleSelect(event) {
         const value = toggleArrayItem(selected, event.target.name);
@@ -23,8 +20,6 @@ function TableClientComponent({ classNameProps, classNames, columns, data, isSel
         const value = selected.length === data.length ? [] : data.map((item) => item.id);
         setSearchParamsHref({ selected: setSelectedToSearchParams(value) });
     }
-    return (_jsx("div", { className: componentClassNames?.root, children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsx("tr", { children: filteredColumns.map((column) => (_jsx("th", { children: column.type === 'selectable' ? (_jsxs("button", { name: column.id, onClick: handleSelectAll, children: ["Select All ", selected.includes(column.id) ? '✓' : ''] })) : (column.title) }, column.id))) }) }), _jsx("tbody", { children: data.map((item) => (_jsx("tr", { className: tw(componentClassNames?.row?.default, selected.includes(item.id)
-                            ? componentClassNames?.row?.selected
-                            : null), children: filteredColumns.map((column) => (_jsx("td", { className: tw(componentClassNames?.cell, column.type === 'selectable' ? 'w-1' : null), children: column.type === 'selectable' ? (_jsx(Switch, { name: item.id, onChange: handleSelect, value: selected.includes(item.id) })) : (item[column.id]) }, column.id))) }, item.id))) })] }) }));
+    return (_jsx("div", { className: componentClassNames?.root, children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { children: [data[0].isSelectable ? (_jsx("th", { children: _jsx("button", { onClick: handleSelectAll, children: "Select All" }) })) : null, columns.map((column) => (_jsx("th", { children: column.title }, column.id)))] }) }), _jsx("tbody", { children: data.map((item) => (_jsx(TableRow, { columns: columns, data: item, isSelected: selected.includes(item.id), onSelect: handleSelect }, item.id))) })] }) }));
 }
 export default TableClientComponent;

package/dist/components/collections/TableRow/index.d.ts

@@ -0,0 +1,13 @@
+import type { InputEvent } from '../../../forms/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { TableClassNames } from '../TableClientComponent';
+import type { TableColumnObject, TableItemObject } from '../interfaces';
+interface TableRowProps<Data extends object | null = null> extends ClassNameProps<TableClassNames> {
+    columns: TableColumnObject[];
+    data: TableItemObject<Data>;
+    isSelectable?: boolean;
+    isSelected: boolean;
+    onSelect: (event: InputEvent<boolean>) => void;
+}
+declare function TableRow<Data extends object | null = null>({ classNameProps, classNames, columns, data, isSelected, onSelect, }: TableRowProps<Data>): React.ReactElement;
+export default TableRow;

package/dist/components/collections/TableRow/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Switch from '../../../forms/components/Switch';
+import { getClassNames } from '../../../styles/classnames';
+import ListItemMenu from '../ListItemMenu';
+function TableRow({ classNameProps, classNames, columns, data, isSelected, onSelect, }) {
+    const componentClassNames = getClassNames('table', { props: classNameProps, states: { isSelected } }, classNames);
+    return (_jsxs("tr", { className: componentClassNames?.row, children: [data.isSelectable ? (_jsx("td", { children: _jsx(Switch, { name: data.id, onChange: onSelect, value: isSelected }) })) : null, columns.map((column) => (_jsx("td", { className: componentClassNames?.cell, children: data.row[column.id] }, column.id))), data.actions ? (_jsx("td", { children: _jsx(ListItemMenu, { actions: data.actions, data: data.$data }) })) : null] }));
+}
+export default TableRow;