@sqrzro/ui 4.0.0-alpha.13 → 4.0.0-alpha.15

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 { StyleVariant } from '../../../utility/interfaces';
 export interface ButtonClassNames {
-    root: StylableButtonClassName;
+    root: string;
     icon: string;
 }
 export interface ButtonProps extends ClassNameProps<ButtonClassNames> {
@@ -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

@@ -8,10 +8,13 @@ export interface CollectionComponentProps<Item, Transformed, Filters = null> {
     readonly filterMap?: FilterMap<Filters>;
     readonly fn?: (config: ListFunctionConfig<Filters>) => Promise<Item[]> | Promise<Paginated<Item>>;
     readonly pageProps?: NextPageProps;
+    readonly renderFilters?: (props: {
+        map: FilterMap<Filters>;
+    }) => React.ReactElement;
     readonly transformer: (item: Item) => Transformed;
 }
 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, ...props }: CollectionProps<Item, Transformed, Filters>): 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

@@ -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

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

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { filterNull } from '@sqrzro/utility';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
 function DataTable({ classNameProps, classNames, data }) {
-    const componentClassNames = classNames || getClassNames('dataTable')?.(classNameProps);
-    return (_jsx("table", { className: tw('w-full', componentClassNames?.root), children: _jsx("tbody", { children: 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))) }) }));
+    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/List/index.d.ts

@@ -1,5 +1,6 @@
 import { CollectionComponentProps } from '../Collection';
 import type { ListItemObject } from '../interfaces';
+export type { ListClassNames } from '../ListClientComponent';
 export type ListProps<Item, Filters = null, Data extends object | null = null> = CollectionComponentProps<Item, ListItemObject<Data>, Filters>;
-declare function List<Item extends object, Filters, Data extends object | null = null>(props: ListProps<Item, Filters, Data>): React.ReactElement;
+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/ListClientComponent/index.d.ts

@@ -1,7 +1,11 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 import type { ListItemObject } from '../interfaces';
-export interface ListClientComponentProps<Data extends object | null = null> {
+export interface ListClassNames {
+    root: string;
+}
+export interface ListClientComponentProps<Data extends object | null = null> extends ClassNameProps<ListClassNames> {
     data: ListItemObject<Data>[];
     renderItem?: (props: ListItemObject<Data>) => React.ReactElement;
 }
-declare function ListClientComponent<Data extends object | null = null>({ data, renderItem, }: Readonly<ListClientComponentProps<Data>>): React.ReactElement;
+declare function ListClientComponent<Data extends object | null = null>({ classNameProps, classNames, data, renderItem, }: Readonly<ListClientComponentProps<Data>>): React.ReactElement;
 export default ListClientComponent;

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

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment } from 'react';
+import { getClassNames } from '../../../styles/classnames';
 import ListItem from '../ListItem';
 function ListClientComponent({ 
 // actions,
-data, renderItem = ListItem, }) {
-    return (_jsx("ul", { className: "", children: data.map((item) => (_jsx(Fragment, { children: renderItem({ /*actions,*/ ...item }) }, item.id))) }));
+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({ /*actions,*/ ...item }) }, item.id))) }));
 }
 export default ListClientComponent;

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;

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

@@ -1,7 +1,7 @@
 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';
@@ -17,12 +17,12 @@ function getLayout(layout) {
 function ListItem({ 
 // actions,
 classNames, classNameProps, description, href, id, isLoading, meta, secondary, tertiary, title, variant, }) {
-    const componentClassNames = classNames || getClassNames('listItem')?.(classNameProps);
+    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
+    return (_jsx("li", { className: tw('@container relative grid', componentClassNames?.root, 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 })] }) }) }));
+        ), 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: 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 })] }) }) }));
 }
 export default ListItem;

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/TableClientComponent/index.d.ts

@@ -1,4 +1,4 @@
-import { ClassNameProps, SelectableClassName } from '../../../styles/interfaces';
+import { ClassNameProps, SelectableClassName } from '../../../styles/classnames/interfaces';
 import type { TableColumnObject, TableItemObject } from '../interfaces';
 export interface TableClassNames {
     root: string;

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

@@ -2,15 +2,14 @@
 import { jsxs as _jsxs, jsx as _jsx } 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 { getClassNames } from '../../../styles/classnames';
 import filterColumns from '../utility/filter-columns';
 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);
@@ -23,8 +22,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: _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(TableRow, { columns: filteredColumns, 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,12 @@
+import type { InputEvent } from '../../../forms/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { TableClassNames } from '../TableClientComponent';
+import type { TableColumnObject, TableItemObject } from '../interfaces';
+interface TableRowProps extends ClassNameProps<TableClassNames> {
+    columns: TableColumnObject[];
+    data: TableItemObject;
+    isSelected: boolean;
+    onSelect: (event: InputEvent<boolean>) => void;
+}
+declare function TableRow({ classNameProps, classNames, columns, data, isSelected, onSelect, }: TableRowProps): React.ReactElement;
+export default TableRow;

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

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

package/dist/components/collections/interfaces.d.ts

@@ -8,26 +8,19 @@ export type ListFunctionConfig<Filters = null> = CollectionFunctionConfig<Filter
 export interface ListItemObject<Data extends object | null = null> {
     $data?: Data;
     actions?: Action[];
-    description?: React.ReactNode | null;
+    description?: React.ReactNode;
     href?: string;
     id: string;
-    isMinimal?: boolean;
     image?: string | null;
     imageHref?: string | null;
     isLoading?: boolean;
-    meta?: {
-        data?: React.ReactNode[] | Record<string, React.ReactNode>;
-        id: string;
-    };
+    meta?: React.ReactNode[] | (DataTableObject | null)[];
     permission?: string;
     secondary?: {
         data?: React.ReactElement | {
-            description?: string;
-            meta?: {
-                data?: React.ReactNode[] | Record<string, React.ReactNode>;
-                id: string;
-            };
-            title?: string;
+            description?: React.ReactNode;
+            meta?: React.ReactNode[] | (DataTableObject | null)[];
+            title?: React.ReactNode;
         } | null;
         variant?: StyleVariant | null;
     };

package/dist/components/collections/utility/is-data-table-array.d.ts

@@ -0,0 +1,3 @@
+import type { DataTableObject } from '../interfaces';
+declare function isDataTableArray(item: unknown): item is DataTableObject[];
+export default isDataTableArray;

package/dist/components/collections/utility/is-data-table-array.js

@@ -0,0 +1,5 @@
+import isDataTableObject from './is-data-table-object';
+function isDataTableArray(item) {
+    return Array.isArray(item) && item.every(isDataTableObject);
+}
+export default isDataTableArray;

package/dist/components/collections/utility/is-data-table-object.d.ts

@@ -0,0 +1,3 @@
+import type { DataTableObject } from '../interfaces';
+declare function isDataTableObject(item: unknown): item is DataTableObject;
+export default isDataTableObject;

package/dist/components/collections/utility/is-data-table-object.js

@@ -0,0 +1,4 @@
+function isDataTableObject(item) {
+    return typeof item === 'object' && item !== null && 'label' in item && 'value' in item;
+}
+export default isDataTableObject;

package/dist/components/errors/AppError/index.d.ts

@@ -0,0 +1,19 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { Action } from '../../../utility/interfaces';
+export interface AppErrorClassNames {
+    root: string;
+    panel: string;
+    title: string;
+    description: string;
+    action: string;
+}
+export interface AppErrorProps extends ClassNameProps<AppErrorClassNames> {
+    action?: Action;
+    description: React.ReactNode;
+    error: Error & {
+        digest?: string;
+    };
+    title: React.ReactNode;
+}
+declare function AppError({ action, classNameProps, classNames, description, error, title, }: Readonly<AppErrorProps>): React.ReactElement;
+export default AppError;

package/dist/components/errors/AppError/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ActionButton from '../../../components/buttons/ActionButton';
+import { getClassNames } from '../../../styles/classnames';
+function AppError({ action, classNameProps, classNames, description, error, title, }) {
+    const componentClassNames = getClassNames('appError', { props: classNameProps }, classNames);
+    return (_jsx("div", { className: componentClassNames?.root, children: _jsxs("section", { className: componentClassNames?.panel, children: [_jsx("h2", { className: componentClassNames?.title, children: title }), _jsxs("div", { className: componentClassNames?.description, children: [description, error?.digest ? _jsxs("small", { children: ["Error code: ", error.digest] }) : null] }), action ? (_jsx("footer", { className: componentClassNames?.action, children: _jsx(ActionButton, { ...action }) })) : null] }) }));
+}
+export default AppError;

package/dist/components/errors/AppForbiddenError/index.d.ts

@@ -0,0 +1,7 @@
+import type { AppErrorProps } from '../AppError';
+export interface AppForbiddenErrorProps extends Omit<AppErrorProps, 'action' | 'description' | 'title'> {
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+}
+declare function AppForbiddenError({ description, title, ...props }: AppForbiddenErrorProps): React.ReactElement;
+export default AppForbiddenError;

package/dist/components/errors/AppForbiddenError/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AppError from '../AppError';
+function AppForbiddenError({ description = 'You do not have permission to access this resource. If you think this is a mistake, please contact your site administrator.', title = 'Forbidden', ...props }) {
+    return (_jsx(AppError, { ...props, action: { href: '/', label: 'Go to Homepage' }, description: description, title: title }));
+}
+export default AppForbiddenError;

package/dist/components/errors/AppNotFoundError/index.d.ts

@@ -0,0 +1,7 @@
+import type { AppErrorProps } from '../AppError';
+export interface AppNotFoundErrorProps extends Omit<AppErrorProps, 'action' | 'description' | 'title'> {
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+}
+declare function AppNotFoundError({ description, title, ...props }: AppNotFoundErrorProps): React.ReactElement;
+export default AppNotFoundError;

package/dist/components/errors/AppNotFoundError/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AppError from '../AppError';
+function AppNotFoundError({ description = 'The requested resource could not be found. This might be because it has been moved or deleted. If you think this is a mistake, please contact your site administrator.', title = 'Not Found', ...props }) {
+    return (_jsx(AppError, { ...props, action: { href: '/', label: 'Go to Homepage' }, description: description, title: title }));
+}
+export default AppNotFoundError;

package/dist/components/errors/AppServerError/index.d.ts

@@ -0,0 +1,8 @@
+import type { AppErrorProps } from '../AppError';
+interface AppServerErrorProps extends Omit<AppErrorProps, 'action' | 'description' | 'title'> {
+    description?: React.ReactNode;
+    reset: () => void;
+    title?: React.ReactNode;
+}
+declare function AppServerError({ description, reset, title, ...props }: AppServerErrorProps): React.ReactElement;
+export default AppServerError;

package/dist/components/errors/AppServerError/index.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import AppError from '../AppError';
+const WAIT_TIME = 500;
+function AppServerError({ description = 'The server encountered an error and could not complete your request. If the problem persists, please contact your site administrator.', reset, title = 'Something Went Wrong', ...props }) {
+    const [isResetting, setIsResetting] = useState(false);
+    function handleReset() {
+        setIsResetting(true);
+        setTimeout(() => {
+            reset();
+            setIsResetting(false);
+        }, WAIT_TIME);
+    }
+    return (_jsx(AppError, { ...props, action: { isDisabled: isResetting, onClick: handleReset, label: 'Try Again' }, description: description, title: title }));
+}
+export default AppServerError;

package/dist/components/index.d.ts

@@ -9,6 +9,12 @@ export type { ListProps } from './collections/List';
 export { default as List } from './collections/List';
 export type { TableProps } from './collections/Table';
 export { default as Table } from './collections/Table';
+export type { AppErrorProps } from './errors/AppError';
+export { default as AppError } from './errors/AppError';
+export type { AppForbiddenErrorProps } from './errors/AppForbiddenError';
+export { default as AppForbiddenError } from './errors/AppForbiddenError';
+export type { AppNotFoundErrorProps } from './errors/AppNotFoundError';
+export { default as AppNotFoundError } from './errors/AppNotFoundError';
 export type { ConfirmModalProps } from './modals/ConfirmModal';
 export { default as ConfirmModal } from './modals/ConfirmModal';
 export type { ModalProps } from './modals/Modal';

package/dist/components/index.js

@@ -4,6 +4,9 @@ export { default as Button } from './buttons/Button';
 export { default as DataTable } from './collections/DataTable';
 export { default as List } from './collections/List';
 export { default as Table } from './collections/Table';
+export { default as AppError } from './errors/AppError';
+export { default as AppForbiddenError } from './errors/AppForbiddenError';
+export { default as AppNotFoundError } from './errors/AppNotFoundError';
 export { default as ConfirmModal } from './modals/ConfirmModal';
 export { default as Modal } from './modals/Modal';
 export { default as ModalLauncher } from './modals/ModalLauncher';