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

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

@@ -0,0 +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;
+export default ActionButton;

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

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from '../../../components/buttons/Button';
+import ConfirmableButton from '../../../components/buttons/ConfirmableButton';
+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 }) }));
+}
+export default ActionButton;

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

@@ -0,0 +1,65 @@
+import type { ClassNameProps, StylableButtonClassName } from '../../../styles/interfaces';
+import { ButtonVariant } from '../../../utility/interfaces';
+export interface ButtonClassNames {
+    root: StylableButtonClassName;
+    icon: string;
+}
+export interface ButtonProps extends ClassNameProps<ButtonClassNames> {
+    /** Probably the button text, but could be any HTML element or React component */
+    readonly children: React.ReactNode;
+    /** Lets you associate the Button to forms anywhere in the document */
+    readonly form?: string;
+    /** If true, the Button content will be hidden visually without hiding it from screen readers */
+    readonly hasAssistiveLabel?: boolean;
+    /** If specified, the Button will be created as a Link element. */
+    readonly href?: string;
+    /** An optional icon to display alongside the button text */
+    readonly icon?: React.ReactNode;
+    /** An optional id to assign to the button element */
+    readonly id?: string;
+    /** If true, the Button will be greyed out and non-interactive */
+    readonly isDisabled?: boolean;
+    /** If true, the button will stretch to the full width of its container */
+    readonly isFullWidth?: boolean;
+    /** If true, the Button will show a loading indicator, and be non-interactive */
+    readonly isLoading?: boolean;
+    /** If true, and the Button has a `href` prop, it will open the link in a new window/tab */
+    readonly isNewWindow?: boolean;
+    /** If true, the Button will be rendered as a text link. It will still act as a button. */
+    readonly isText?: boolean;
+    /** 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>;
+    /** If specified, a Popover component can be anchored to the target element with this ID */
+    readonly popoverTarget?: string;
+    readonly scroll?: boolean;
+    readonly style?: React.CSSProperties;
+    /** The type of button. Button's with a type of `submit` will submit a parent form */
+    readonly type?: 'button' | 'submit';
+    /** 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;
+}
+/**
+ * Either a `Link` component or a `button` element, depending on whether a `href` prop is specified.
+ *
+ * As a `Link`, it provides navigation between pages, and as a `button` it will handle the
+ * `onClick` function when clicked (if one is specified).
+ *
+ * ## Using href & onClick
+ *
+ * Although it is possible to omit both the `href` and `onClick` props, there will
+ * be nearly zero situations where this would be useful. It is also possible to include both props.
+ * This will create a `Link` component, and handle the `onClick` function before navigation. Calling
+ * `e.preventDefault()` in the `onClick` function will prevent the navigation from occurring.
+ *
+ * ## ClassNames
+ *
+ * | Name | Description | Type |
+ * | ---- | ----------- | ---- |
+ * | root | The button element | `StylableButtonClassName` |
+ */
+declare function Button({ children, classNames, classNameProps, form, hasAssistiveLabel, href, icon, id, isDisabled, isFullWidth, isLoading, isNewWindow, isText, name, onClick, popoverTarget, scroll, style, type, value, variant, }: ButtonProps): React.ReactElement;
+export default Button;

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

@@ -0,0 +1,50 @@
+'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;
+}
+/**
+ * Either a `Link` component or a `button` element, depending on whether a `href` prop is specified.
+ *
+ * As a `Link`, it provides navigation between pages, and as a `button` it will handle the
+ * `onClick` function when clicked (if one is specified).
+ *
+ * ## Using href & onClick
+ *
+ * Although it is possible to omit both the `href` and `onClick` props, there will
+ * be nearly zero situations where this would be useful. It is also possible to include both props.
+ * This will create a `Link` component, and handle the `onClick` function before navigation. Calling
+ * `e.preventDefault()` in the `onClick` function will prevent the navigation from occurring.
+ *
+ * ## ClassNames
+ *
+ * | Name | Description | Type |
+ * | ---- | ----------- | ---- |
+ * | root | The button element | `StylableButtonClassName` |
+ */
+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));
+    /*
+     *  Link uses classNames, whereas button uses className. This is because Link can also be used
+     *  headless in other applications, and so should have consistency.
+     */
+    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 })] })] }));
+}
+export default Button;

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

@@ -0,0 +1,7 @@
+import type { ConfirmableObject } from '../../../utility/interfaces';
+import type { ButtonProps } from '../Button';
+export type ConfirmableButtonProps = ButtonProps & {
+    confirmable: ConfirmableObject;
+};
+declare function ConfirmableButton({ confirmable, ...buttonProps }: Readonly<ConfirmableButtonProps>): React.ReactElement;
+export default ConfirmableButton;

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

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import Button from '../Button';
+function ConfirmableButton({ confirmable, ...buttonProps }) {
+    // const { handle, modalProps } = useConfirmable<HTMLButtonElement>({
+    //     isLoading,
+    //     onBeforeConfirm,
+    //     onConfirm: (event) => onClick?.(event),
+    // });
+    return (_jsx(Fragment, { children: _jsx(Button, { ...buttonProps, icon: confirmable.icon, isLoading: confirmable.isLoading }) }));
+}
+export default ConfirmableButton;

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

@@ -0,0 +1,5 @@
+import type { ButtonClassNames, ButtonProps } from '../Button';
+export type TextButtonClassNames = ButtonClassNames;
+export type TextButtonProps = Omit<ButtonProps, 'isText'>;
+declare function TextButton(props: TextButtonProps): React.ReactElement;
+export default TextButton;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from '../Button';
+function TextButton(props) {
+    return _jsx(Button, { ...props, isText: true });
+}
+export default TextButton;

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

@@ -0,0 +1,15 @@
+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> {
+    readonly data?: Item[] | Paginated<Item>;
+    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 transformer: (item: Item) => Transformed;
+}
+declare function Collection<Item extends object, Transformed, Filters>({ filterMap, ...props }: CollectionProps<Item, Transformed, Filters>): React.ReactElement;
+export default Collection;

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, Suspense } from 'react';
+import Loader from '../../../components/utility/Loader';
+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');
+    const awaitedParams = pageProps?.params ? await pageProps.params : null;
+    const awaitedSearchParams = pageProps?.searchParams ? await pageProps.searchParams : null;
+    async function getResponse() {
+        if (typeof data !== 'undefined') {
+            return data;
+        }
+        if (typeof fn === 'undefined') {
+            throw new Error('ListComponent: Either `data` or `fn` must be provided.');
+        }
+        const filters = parseFilters(awaitedSearchParams, filterMap);
+        const page = parsePage(awaitedSearchParams);
+        return fn({ 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;
+    if (!dynamicData.length) {
+        return _jsx(EmptyMessage, { ...componentEmptyMessageProps });
+    }
+    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 }) })] }));
+}
+export default Collection;

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

@@ -0,0 +1,26 @@
+import type { ClassNameProps, StylableClassName } from '../../../styles/interfaces';
+import { StyleVariant } from '../../../utility/interfaces';
+import type { EmptyMessageActionProps } from '../EmptyMessageAction';
+export interface EmptyMessageClassNames {
+    root: StylableClassName;
+    description: string;
+    icon: StylableClassName;
+    title: StylableClassName;
+    action: string;
+}
+export interface EmptyMessageProps extends ClassNameProps<EmptyMessageClassNames> {
+    action?: EmptyMessageActionProps['action'] | null;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    title?: string;
+    variant?: StyleVariant | null;
+}
+export declare const DEFAULT_TITLE = "No results found";
+export declare const DEFAULT_CHILDREN = "If you think this is an error, please contact the site administrator.";
+/**
+ * By default, `EmptyMessage` simply displays a message to the user when no results have been found
+ * in a particular list. However, the `title` and `description` can be customised, allowing the
+ * component to be used for any situation where a standout message is required.
+ */
+declare function EmptyMessage({ action, children, classNameProps, classNames, icon, title, variant, }: Readonly<EmptyMessageProps>): React.ReactElement;
+export default EmptyMessage;

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

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+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.';
+/**
+ * By default, `EmptyMessage` simply displays a message to the user when no results have been found
+ * in a particular list. However, the `title` and `description` can be customised, allowing the
+ * 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] }));
+}
+export default EmptyMessage;

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

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

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import Button from '../../../components/buttons/Button';
+import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
+function EmptyMessageAction({ action }) {
+    const { getSearchParamsHref } = useSearchParamsHref();
+    if (isValidElement(action)) {
+        return action;
+    }
+    function handleClick() {
+        if ('onClick' in action && typeof action.onClick === 'function') {
+            action.onClick();
+        }
+    }
+    const href = action.action ? getSearchParamsHref('action', action.action) : 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

@@ -0,0 +1,6 @@
+import { CollectionProps } 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'> {
+}
+declare function List<Item extends object, Filters, Data extends object | null = null>(props: ListProps<Item, Filters, Data>): React.ReactElement;
+export default List;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Collection from '../Collection';
+import ListClientComponent from '../ListClientComponent';
+function defaultTransformer(item) {
+    return {
+        id: 'id' in item ? String(item.id) : JSON.stringify(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 }));
+}
+export default List;

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+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))) }));
+}
+export default ListClientComponent;

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

@@ -0,0 +1,14 @@
+import type { ClassNameProps, StylableClassName } from '../../../styles/interfaces';
+import type { ListItemObject } from '../interfaces';
+export interface ListItemClassNames {
+    description: string;
+    primary: string;
+    root: StylableClassName;
+    secondary: string;
+    tertiary: string;
+    title: StylableClassName;
+}
+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;
+export default ListItem;

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

@@ -0,0 +1,28 @@
+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 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 })] }) }) }));
+}
+export default ListItem;

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

@@ -0,0 +1,11 @@
+import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ListItemObject } 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 default ListItemMeta;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import { filterNull } from '@sqrzro/utility';
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+function getKey(item) {
+    if (isValidElement(item)) {
+        return item.key || '-';
+    }
+    if (typeof item === 'object') {
+        return JSON.stringify(item);
+    }
+    return String(item);
+}
+function ListItemMeta({ classNameProps, classNames, id, data, }) {
+    const componentClassNames = classNames || getClassNames('listItemMeta')?.(classNameProps);
+    if (!data) {
+        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))) }) }));
+}
+export default ListItemMeta;

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

@@ -0,0 +1,6 @@
+import type { ClassNameProps } from '../../../styles/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 default ListItemSecondary;

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

@@ -0,0 +1,16 @@
+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 ListItemMeta from '../ListItemMeta';
+function ListItemSecondary({ classNameProps, classNames, data, variant, }) {
+    const componentClassNames = classNames || getClassNames('listItem')?.(classNameProps);
+    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" })] }));
+}
+export default ListItemSecondary;

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

@@ -0,0 +1,19 @@
+import type { ClassNameProps, HighlightableClassName } from '../../../styles/interfaces';
+export interface PaginationClassNames {
+    gap: string;
+    item: string;
+    link: HighlightableClassName;
+    list: string;
+    navigation: string;
+    root: string;
+}
+export interface PaginationProps extends ClassNameProps<PaginationClassNames> {
+    gapLabel?: string;
+    limit: number;
+    nextLabel?: string;
+    page: number;
+    previousLabel?: string;
+    total: number;
+}
+declare function Pagination({ classNames, classNameProps, gapLabel, limit, nextLabel, page, previousLabel, total, }: Readonly<PaginationProps>): React.ReactElement | null;
+export default Pagination;

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

@@ -0,0 +1,17 @@
+'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 Link from '../../../components/utility/Link';
+function Pagination({ classNames, classNameProps, gapLabel = '•••', limit, nextLabel, page, previousLabel, total, }) {
+    const componentClassNames = classNames || getClassNames('pagination')?.(classNameProps);
+    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] }));
+}
+export default Pagination;

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

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

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Collection from '../Collection';
+import TableClientComponent from '../TableClientComponent';
+function defaultTransformer(item) {
+    return {
+        id: 'id' in item ? String(item.id) : JSON.stringify(item),
+        ...item,
+    };
+}
+function Table({ columns, isSelectable, ...props }) {
+    return (_jsx(Collection, { ...props, render: (data) => (_jsx(TableClientComponent, { columns: columns, data: data, isSelectable: isSelectable })), transformer: props.transformer ?? defaultTransformer }));
+}
+export default Table;

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

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

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

@@ -0,0 +1,30 @@
+'use client';
+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 filterColumns from '../utility/filter-columns';
+import getSelectedFromSearchParams from '../utility/get-selected-from-search-params';
+import setSelectedToSearchParams from '../utility/set-selected-to-search-params';
+function TableClientComponent({ classNameProps, classNames, columns, data, isSelectable, }) {
+    const componentClassNames = classNames || getClassNames('table')?.(classNameProps);
+    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);
+        setSearchParamsHref({ selected: setSelectedToSearchParams(value) });
+    }
+    function handleSelectAll() {
+        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))) })] }) }));
+}
+export default TableClientComponent;