@sqrzro/ui 4.0.0-alpha.4 → 4.0.0-alpha.41

package/dist/addon/config.d.ts

@@ -0,0 +1,5 @@
+import { AppConfig } from '@sqrzro/config';
+import type { NodePgDatabase } from 'drizzle-orm/node-postgres';
+import type { UIAddonConfigObject, BaseUIAddonConfigObject } from './interfaces';
+export declare function setConfig(db: NodePgDatabase, appConfig: AppConfig, cfg?: Partial<BaseUIAddonConfigObject>): void;
+export declare function getConfig(): UIAddonConfigObject;

package/dist/addon/config.js

@@ -0,0 +1,12 @@
+import { MissingConfigError } from '@sqrzro/addons';
+import applyDefaults from './defaults';
+let config = null;
+export function setConfig(db, appConfig, cfg) {
+    config = { ...applyDefaults(cfg), db, app: appConfig };
+}
+export function getConfig() {
+    if (!config) {
+        throw new MissingConfigError('ui');
+    }
+    return config;
+}

package/dist/addon/defaults.d.ts

@@ -0,0 +1,3 @@
+import type { BaseUIAddonConfigObject } from './interfaces';
+declare function applyDefaults(config?: Partial<BaseUIAddonConfigObject>): BaseUIAddonConfigObject;
+export default applyDefaults;

package/dist/addon/defaults.js

@@ -0,0 +1,6 @@
+import { deepMerge } from '@sqrzro/utility';
+const defaults = {};
+function applyDefaults(config) {
+    return deepMerge(defaults, config || {});
+}
+export default applyDefaults;

package/dist/addon/index.d.ts

@@ -0,0 +1,5 @@
+import type { AddonRegisterFunction } from '@sqrzro/addons';
+import { BaseUIAddonConfigObject } from './interfaces';
+export * from './interfaces';
+declare const withUI: AddonRegisterFunction<BaseUIAddonConfigObject>;
+export default withUI;

package/dist/addon/index.js

@@ -0,0 +1,8 @@
+import { setConfig } from './config';
+export * from './interfaces';
+const withUI = (config) => ({
+    register: (db, appConfig) => {
+        setConfig(db, appConfig, config);
+    },
+});
+export default withUI;

package/dist/addon/interfaces.d.ts

@@ -0,0 +1,8 @@
+import { AppConfig } from '@sqrzro/config';
+import type { NodePgDatabase } from 'drizzle-orm/node-postgres';
+export interface BaseUIAddonConfigObject {
+}
+export interface UIAddonConfigObject extends BaseUIAddonConfigObject {
+    app: AppConfig;
+    db: NodePgDatabase;
+}

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

@@ -1,7 +1,9 @@
-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 { ButtonClassNames } from '../../../components/buttons/Button';
+import { ActionComponentProps } from '../../../components/utility/Action';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+export interface ActionButtonProps<Data, Response> extends ClassNameProps<ButtonClassNames>, Omit<ActionComponentProps<Data, Response>, 'children'> {
+    children?: React.ReactNode;
+    label?: React.ReactNode;
+}
+declare function ActionButton<Data, Response>({ classNameProps, isSubmittable, ...props }: ActionButtonProps<Data, Response>): 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({ classNameProps, isSubmittable, ...props }) {
+    return (_jsx(Action, { ...props, render: (renderProps) => isSubmittable ? (_jsx(FormSubmit, { ...renderProps, classNameProps: classNameProps })) : (_jsx(Button, { ...renderProps, classNameProps: classNameProps })) }));
 }
 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

@@ -1,16 +1,10 @@
 'use client';
 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 { useClassNames } from '../../../styles/context';
+import applyVariants from '../../../styles/classnames/utility/apply-variants';
+import tw from '../../../styles/classnames/utility/tw';
+import Link from '../../elements/Link';
 /**
  * Either a `Link` component or a `button` element, depending on whether a `href` prop is specified.
  *
@@ -32,12 +26,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 = useClassNames(isText ? 'textButton' : 'button', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
+    const className = tw('relative 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.
@@ -45,6 +35,6 @@ function Button({ children, classNames, classNameProps, form, hasAssistiveLabel,
     if (href) {
         return (_jsx(Link, { className: className, href: href, id: id, isNewWindow: isNewWindow, onClick: onClick, scroll: scroll, style: style, children: _jsxs("span", { className: "flex items-center gap-2", children: [icon ? (_jsx("span", { className: tw('flex-none', componentClassNames?.icon), children: icon })) : null, _jsx("span", { className: tw(hasAssistiveLabel ? 'sr-only' : null), children: children })] }) }));
     }
-    return (_jsxs("button", { ref: ref, className: className, disabled: isDisabled || isLoading || false, form: form, id: id, name: name, onClick: onClick, popoverTarget: popoverTarget, style: style, type: type === 'submit' ? 'submit' : 'button', value: value, children: [isLoading ? (_jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-2/4 -translate-y-2/4", children: _jsx(Loader, {}) })) : null, _jsxs("span", { className: "flex items-center gap-2", children: [icon ? (_jsx("span", { className: tw('flex-none', componentClassNames?.icon), children: icon })) : null, _jsx("span", { className: tw(hasAssistiveLabel ? 'sr-only' : null), children: children })] })] }));
+    return (_jsxs("button", { ref: ref, className: className, disabled: isDisabled || isLoading || false, form: form, id: id, name: name, onClick: onClick, popoverTarget: popoverTarget, style: style, type: type === 'submit' ? 'submit' : 'button', value: value, children: [isLoading ? (_jsx("div", { className: "absolute left-1/2 top-1/2 -translate-x-2/4 -translate-y-2/4", children: "\u2022\u2022\u2022" })) : null, _jsxs("span", { className: "flex items-center gap-2", children: [icon ? (_jsx("span", { className: tw('flex-none', componentClassNames?.icon), children: icon })) : null, _jsx("span", { className: tw(hasAssistiveLabel ? 'sr-only' : null, isLoading ? 'text-transparent' : null), children: children })] })] }));
 }
 export default Button;

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> {
     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> extends CollectionComponentProps<Item, Transformed, Filters> {
+    readonly render: (data: Transformed[]) => React.ReactElement;
+}
+declare function Collection<Item, Transformed, Filters>({ filterMap, renderFilters, ...props }: CollectionProps<Item, Transformed, Filters>): React.ReactElement;
 export default Collection;

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

@@ -5,13 +5,11 @@ import FilterBar from '../../../filters/components/FilterBar';
 import checkHasFilters from '../../../filters/utility/check-has-filters';
 import parseFilters from '../../../filters/utility/parse-filters';
 import parsePage from '../../../filters/utility/parse-page';
-import { getIcon } from '../../../styles/icons';
 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, }) {
-    const EmptyIcon = getIcon('collection.empty');
+async function CollectionComponent({ data, defaultFilters, emptyMessageProps, filterMap, fn, pageProps, render, transformer, }) {
     const awaitedParams = pageProps?.params ? await pageProps.params : null;
     const awaitedSearchParams = pageProps?.searchParams ? await pageProps.searchParams : null;
     async function getResponse() {
@@ -23,14 +21,17 @@ 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);
     const componentEmptyMessageProps = checkHasFilters(awaitedSearchParams)
         ? {
             children: messages.EMPTY_FILTER_DESCRIPTION,
-            icon: EmptyIcon ? _jsx(EmptyIcon, {}) : null,
             title: messages.EMPTY_FILTER_TITLE,
         }
         : emptyMessageProps;
@@ -39,7 +40,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 { DataObject } from '../../../utility/interfaces';
+export interface DataTableClassNames {
+    root: string;
+    row: string;
+    cell: string;
+    label: string;
+    value: string;
+}
+export interface DataTableProps extends ClassNameProps<DataTableClassNames> {
+    readonly data: (DataObject | null)[];
+}
+declare function DataTable({ classNameProps, classNames, data, }: DataTableProps): React.ReactElement | null;
+export default DataTable;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterNull } from '@sqrzro/utility';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+function DataTable({ classNameProps, classNames, data, }) {
+    const componentClassNames = useClassNames('dataTable', { props: classNameProps }, classNames);
+    const filtered = filterNull(data);
+    if (!filtered.length) {
+        return null;
+    }
+    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,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { useClassNames, useIcon } from '../../../styles/context';
+import applyVariants from '../../../styles/classnames/utility/apply-variants';
 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 +11,9 @@ 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 = useClassNames('emptyMessage', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
+    const DefaultIcon = useIcon('collection.empty');
+    const iconComponent = icon ?? (DefaultIcon ? _jsx(DefaultIcon, {}) : null);
+    return (_jsxs("section", { className: componentClassNames?.root, children: [iconComponent ? (_jsx("div", { className: componentClassNames?.icon, children: iconComponent })) : 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 { SimpleActionObject } from '../../../utility/interfaces';
 export interface EmptyMessageActionProps {
-    action: Action | React.ReactElement;
+    action: SimpleActionObject | 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 type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { CollectionComponentProps } from '../Collection';
+import type { ListClassNames } from '../ListClientComponent';
 import type { ListItemObject } from '../interfaces';
-export interface ListProps<Item, Filters = null, Data extends object | null = null> extends Omit<CollectionProps<Item, ListItemObject<Data>, Filters>, 'render'> {
-}
-declare function List<Item extends object, Filters, Data extends object | null = null>(props: ListProps<Item, Filters, Data>): React.ReactElement;
+export type { ListClassNames } from '../ListClientComponent';
+export type ListProps<Item, Filters, Data, Response> = ClassNameProps<ListClassNames> & CollectionComponentProps<Item, ListItemObject<Data, Response>, Filters>;
+declare function List<Item, Filters, Data, Response>({ classNameProps, classNames, ...props }: ListProps<Item, Filters, Data, Response>): React.ReactElement;
 export default List;

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

@@ -7,7 +7,7 @@ function defaultTransformer(item) {
         title: 'title' in item ? String(item.title) : '',
     };
 }
-function List(props) {
-    return (_jsx(Collection, { ...props, render: (data) => _jsx(ListClientComponent, { data: data }), transformer: props.transformer ?? defaultTransformer }));
+function List({ classNameProps, classNames, ...props }) {
+    return (_jsx(Collection, { ...props, render: (data) => (_jsx(ListClientComponent, { classNameProps: classNameProps, classNames: classNames, data: data })), transformer: props.transformer ?? defaultTransformer }));
 }
 export default List;

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

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

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

@@ -1,9 +1,12 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment } from 'react';
+import useSelected from '../../../hooks/useSelected';
+import { useClassNames } from '../../../styles/context';
 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))) }));
+function ListClientComponent({ classNameProps, classNames, data, }) {
+    const componentClassNames = useClassNames('list', { props: classNameProps }, classNames);
+    const { checkSelected, onSelect } = useSelected(data);
+    const hasActions = data.some((item) => item.actions?.length);
+    return (_jsx("ul", { className: componentClassNames?.root, children: data.map((item) => (_jsx(ListItem, { classNameProps: classNameProps, classNames: classNames, data: item, hasActions: hasActions, isSelected: checkSelected(item.id), onSelect: onSelect }, item.id))) }));
 }
 export default ListClientComponent;

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

@@ -1,14 +1,21 @@
-import type { ClassNameProps, StylableClassName } from '../../../styles/interfaces';
+import type { InputEvent } from '../../../forms/interfaces';
+import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces';
 import type { ListItemObject } from '../interfaces';
 export interface ListItemClassNames {
+    actions: string;
     description: string;
     primary: string;
     root: StylableClassName;
     secondary: string;
+    select: string;
     tertiary: string;
     title: StylableClassName;
 }
-export interface ListItemProps<Data extends object | null = null> extends ClassNameProps<ListItemClassNames>, ListItemObject<Data> {
+export interface ListItemProps<Data, Response> extends ClassNameProps<ListItemClassNames> {
+    data: ListItemObject<Data, Response>;
+    hasActions: boolean;
+    isSelected: boolean;
+    onSelect: (event: InputEvent<boolean>) => void;
 }
-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, Response>({ classNameProps, classNames, data, hasActions, isSelected, onSelect, }: Readonly<ListItemProps<Data, Response>>): React.ReactElement;
 export default ListItem;

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

@@ -1,28 +1,20 @@
+'use client';
 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 Link from '../../../components/utility/Link';
+import { filterNull } from '@sqrzro/utility';
+import { usePathname } from 'next/navigation';
+import Switch from '../../../forms/components/Switch';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+import Link from '../../elements/Link';
+import normalizeHref from '../utility/normalize-href';
 import ListItemSecondary from '../ListItemSecondary';
 import ListItemMeta from '../ListItemMeta';
-const colMap = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 @lg:grid-cols-[1fr_1fr]',
-    3: 'grid-cols-1 @lg:grid-cols-[3fr_1fr_2fr] @2xl:grid-cols-[2fr_1fr_1fr]',
-};
-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);
-    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 })] }) }) }));
+import ListItemMenu from '../ListItemMenu';
+function ListItem({ classNameProps, classNames, data, hasActions, isSelected, onSelect, }) {
+    const pathname = usePathname();
+    const componentClassNames = useClassNames('listItem', { props: { ...classNameProps, isSelected } }, classNames);
+    const filteredActions = filterNull(data.actions || []);
+    //filteredActions.length ? 'grid-cols-[1fr_auto] gap-4' : 'grid-cols-1'
+    return (_jsx("li", { className: tw('relative grid', componentClassNames?.root), children: _jsx("article", { className: "contents", children: _jsxs("div", { className: "grid gap-6 has-[>:nth-child(2)]:grid-cols-[max-content_auto]", children: [data.isSelectable ? (_jsx("div", { className: componentClassNames?.select, children: _jsx(Switch, { name: data.id, onChange: onSelect, value: isSelected }) })) : null, _jsxs("div", { className: "grid gap-6 has-[>:nth-child(2)]:grid-cols-[auto_max-content]", children: [_jsxs("div", { className: 'grid grid-cols-1 gap-6 has-[>:nth-child(2)]:grid-cols-[1fr_1fr] has-[>:nth-child(3)]:grid-cols-[2fr_1fr_1fr]', children: [_jsxs("div", { className: componentClassNames?.primary, children: [data.title ? (_jsx("h2", { className: componentClassNames?.title, children: data.href ? (_jsx(Link, { className: "hover:text-link", href: normalizeHref(data.href, pathname), children: data.title })) : (data.title) })) : null, data.description ? (_jsx("div", { className: componentClassNames?.description, children: data.description })) : null, _jsx(ListItemMeta, { classNameProps: classNameProps, data: data.meta })] }), data.tertiary ? (_jsx("div", { className: componentClassNames?.tertiary, children: data.tertiary })) : null, _jsx(ListItemSecondary, { classNameProps: classNameProps, classNames: classNames, data: data.secondary })] }), hasActions ? (_jsx("div", { className: componentClassNames?.actions, children: _jsx(ListItemMenu, { actions: filteredActions, data: data.$data, isDisabled: !filteredActions.length }) })) : null] })] }) }) }));
 }
 export default ListItem;

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

@@ -0,0 +1,8 @@
+import type { ActionObject } from '../../../utility/interfaces';
+interface ListItemMenuProps<Data, Response> {
+    actions: ActionObject<Data, Response>[];
+    data?: Data;
+    isDisabled?: boolean;
+}
+declare function ListItemMenu<Data, Response>(props: ListItemMenuProps<Data, Response>): 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 '../../elements/Menu';
+function ListItemMenu(props) {
+    return _jsx(Menu, { ...props, align: "right", 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 { DataObject } from '../../../utility/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[] | (DataObject | 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,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+'use client';
+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 { useClassNames } from '../../../styles/context';
+import isDataTableArray from '../../../utility/is-data-object-array';
+import DataTable from '../DataTable';
 function getKey(item) {
     if (isValidElement(item)) {
         return item.key || '-';
@@ -12,11 +14,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 = useClassNames('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,6 +1,8 @@
-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'];
-declare function ListItemSecondary({ classNameProps, classNames, data, variant, }: Readonly<ListItemSecondaryProps>): React.ReactElement | null;
+export type ListItemSecondaryProps<Data, Response> = ClassNameProps<ListItemClassNames> & {
+    data: ListItemObject<Data, Response>['secondary'];
+};
+declare function ListItemSecondary<Data, Response>({ classNameProps, classNames, data, }: Readonly<ListItemSecondaryProps<Data, Response>>): React.ReactElement | null;
 export default ListItemSecondary;

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

@@ -1,16 +1,16 @@
+'use client';
 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 { useClassNames } from '../../../styles/context';
 import ListItemMeta from '../ListItemMeta';
-function ListItemSecondary({ classNameProps, classNames, data, variant, }) {
-    const componentClassNames = classNames || getClassNames('listItem')?.(classNameProps);
+function ListItemSecondary({ classNameProps, classNames, data, }) {
+    const componentClassNames = useClassNames('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;