@sqrzro/ui 4.0.0-alpha.6 → 4.0.0-alpha.61

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 Link from '../../../components/utility/Link';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+import Link from '../../elements/Link';
+import PaginationLink from '../PaginationLink';
 function Pagination({ classNames, classNameProps, gapLabel = '•••', limit, nextLabel, page, previousLabel, total, }) {
-    const componentClassNames = classNames || getClassNames('pagination')?.(classNameProps);
+    const componentClassNames = useClassNames('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,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/context';
+import Link from '../../elements/Link';
+function PaginationLink({ classNameProps, classNames, href, isCurrent, label, }) {
+    const componentClassNames = useClassNames('pagination', { props: classNameProps, states: { isHighlighted: isCurrent } }, classNames);
+    return (_jsx(Link, { className: componentClassNames?.link, href: href, children: label }));
+}
+export default PaginationLink;

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

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

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

@@ -1,13 +1,7 @@
 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 }));
+function Table({ columns, ...props }) {
+    return (_jsx(Collection, { ...props, render: (data) => _jsx(TableClientComponent, { columns: columns, data: data }), transformer: props.transformer }));
 }
 export default Table;

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

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

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

@@ -1,30 +1,15 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { toggleArrayItem } from '@sqrzro/utility';
-import { useSearchParams } from 'next/navigation';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useSelected from '../../../hooks/useSelected';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+import isRightAligned from '../utility/is-right-aligned';
+import TableRow from '../TableRow';
 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))) })] }) }));
+function TableClientComponent({ classNameProps, classNames, columns, data, }) {
+    const componentClassNames = useClassNames('table', { props: classNameProps }, classNames);
+    const { checkSelected, isAllSelected, onSelect, onSelectAll } = useSelected(data);
+    const hasActions = data.some((item) => item.actions?.length);
+    return (_jsx("div", { className: componentClassNames?.root, children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { children: [data[0].isSelectable ? (_jsx("th", { className: componentClassNames?.head, children: _jsx(Switch, { name: "all", onChange: onSelectAll, value: isAllSelected }) })) : null, columns.map((column) => (_jsx("th", { className: tw(componentClassNames?.head, isRightAligned(column.type) ? 'text-right' : null), children: column.title }, column.id)))] }) }), _jsx("tbody", { children: data.map((item) => (_jsx(TableRow, { columns: columns, data: item, hasActions: hasActions, isSelected: checkSelected(item.id), onSelect: onSelect }, item.id))) })] }) }));
 }
 export default TableClientComponent;

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

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

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

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterNull } from '@sqrzro/utility';
+import Switch from '../../../forms/components/Switch';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+import isRightAligned from '../utility/is-right-aligned';
+import renderCell from '../utility/render-cell';
+import ListItemMenu from '../ListItemMenu';
+function TableRow({ classNameProps, classNames, columns, data, hasActions, isSelected, onSelect, }) {
+    const componentClassNames = useClassNames('table', { props: { ...classNameProps, isSelected } }, classNames);
+    const filteredActions = filterNull(data.actions || []);
+    return (_jsxs("tr", { className: componentClassNames?.row, children: [data.isSelectable ? (_jsx("td", { className: tw(componentClassNames?.cell, 'w-10'), children: _jsx(Switch, { name: data.id, onChange: onSelect, value: isSelected }) })) : null, columns.map((column) => (_jsx("td", { className: tw(componentClassNames?.cell, isRightAligned(column.type) ? 'text-right' : null), children: renderCell(column, data.row[column.id]) }, column.id))), hasActions ? (_jsx("td", { className: tw(componentClassNames?.cell, 'w-10'), children: _jsx("div", { className: componentClassNames?.actions, children: _jsx(ListItemMenu, { actions: filteredActions, data: data.$data, isDisabled: !filteredActions.length }) }) })) : null] }));
+}
+export default TableRow;

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

@@ -1,51 +1,58 @@
-import type { Action, StyleVariant } from '../../utility/interfaces';
-export interface CollectionFunctionConfig<Filters = null> {
-    filters?: Partial<Filters> | null;
+import type { ActionObject, DataObject, ReferenceObject, StyleVariant } from '../../utility/interfaces';
+export type CollectionFunctionConfig<Filters = undefined> = {
     params?: Record<string, string> | null;
     page?: number | null;
-}
-export type ListFunctionConfig<Filters = null> = CollectionFunctionConfig<Filters>;
-export interface ListItemObject<Data extends object | null = null> {
+    filters?: Filters extends undefined ? never : Partial<Filters> | null;
+};
+export type ListFunctionConfig<Filters = undefined> = CollectionFunctionConfig<Filters>;
+export interface ListItemObject<Data, Response> {
     $data?: Data;
-    actions?: Action[];
-    description?: React.ReactNode | null;
+    actions?: (ActionObject<Data, Response> | 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;
-    };
-    permission?: string;
-    secondary?: {
-        data?: React.ReactElement | {
-            description?: string;
-            meta?: {
-                data?: React.ReactNode[] | Record<string, React.ReactNode>;
-                id: string;
-            };
-            title?: string;
-        } | null;
+    isSelectable?: boolean;
+    meta?: React.ReactNode[] | (DataObject | null)[];
+    secondary?: React.ReactElement | {
+        description?: React.ReactNode;
+        meta?: React.ReactNode[] | (DataObject | null)[];
+        title?: React.ReactNode;
         variant?: StyleVariant | null;
-    };
+    } | null;
     tertiary?: React.ReactNode;
     title?: React.ReactNode;
     variant?: StyleVariant | null;
 }
-export type TableFunctionConfig<Filters = null> = CollectionFunctionConfig<Filters>;
-export interface TableItemObject {
-    [key: string]: React.ReactNode;
-    id: string;
-}
-export type TableColumnType = 'date' | 'decimal' | 'id' | 'link' | 'money' | 'number' | 'percentage' | 'reference' | 'selectable' | 'string';
+export type TableFunctionConfig<Filters = undefined> = CollectionFunctionConfig<Filters>;
+export type TableColumnTypeMap = {
+    date: Date;
+    datetime: Date;
+    decimal: number;
+    link: string;
+    money: number;
+    number: number;
+    percentage: number;
+    points: number;
+    raw: React.ReactNode;
+    reference: ReferenceObject;
+    string: string;
+    time: Date;
+};
 export interface TableColumnObject {
     isSortable?: boolean;
     id: string;
     title?: string;
-    type?: TableColumnType;
+    type: keyof TableColumnTypeMap;
+}
+export type TableRowFromColumns<T extends readonly TableColumnObject[]> = {
+    [K in T[number] as K['id']]: TableColumnTypeMap[K['type']];
+};
+export interface TableItemObject<Columns extends readonly TableColumnObject[], Data, Response> {
+    $data?: Data;
+    actions?: (ActionObject<Data, Response> | null)[];
+    id: string;
+    isSelectable?: boolean;
+    row: TableRowFromColumns<Columns>;
 }
 export interface Paginated<T> {
     data: T[];

package/dist/components/collections/lang.js

@@ -1,4 +1,4 @@
 export const messages = {
-    EMPTY_FILTER_DESCRIPTION: 'Try adjusting the filters above. If you think this is a mistake, please contact your site administrator.',
+    EMPTY_FILTER_DESCRIPTION: 'Try adjusting the filters above.',
     EMPTY_FILTER_TITLE: 'No results match the current filters',
 };

package/dist/components/collections/utility/is-paginated.d.ts

@@ -1,3 +1,3 @@
-import type { Paginated } from "../interfaces";
+import type { Paginated } from '../interfaces';
 declare function isPaginated<Item>(response: Item[] | Paginated<Item>): response is Paginated<Item>;
 export default isPaginated;

package/dist/components/collections/utility/is-right-aligned.d.ts

@@ -0,0 +1,3 @@
+import { TableColumnTypeMap } from '../interfaces';
+declare function isRightAligned(type?: keyof TableColumnTypeMap): boolean;
+export default isRightAligned;

package/dist/components/collections/utility/is-right-aligned.js

@@ -0,0 +1,11 @@
+const RIGHT_ALIGNED_TYPES = [
+    'decimal',
+    'money',
+    'number',
+    'percentage',
+    'points',
+];
+function isRightAligned(type) {
+    return Boolean(type && RIGHT_ALIGNED_TYPES.includes(type));
+}
+export default isRightAligned;

package/dist/components/collections/utility/normalize-href.d.ts

@@ -0,0 +1,2 @@
+declare function normalizeHref(href: string, pathname: string): string;
+export default normalizeHref;

package/dist/components/collections/utility/normalize-href.js

@@ -0,0 +1,8 @@
+import { joinURL } from '@sqrzro/utility';
+function normalizeHref(href, pathname) {
+    if (href.startsWith('./')) {
+        return joinURL(pathname, href.slice(2));
+    }
+    return joinURL(href);
+}
+export default normalizeHref;

package/dist/components/collections/utility/render-cell.d.ts

@@ -0,0 +1,5 @@
+import type { TableColumnTypeMap } from '../interfaces';
+declare function renderCell<K extends keyof TableColumnTypeMap>(column: {
+    type: K;
+}, value: TableColumnTypeMap[K]): React.ReactNode;
+export default renderCell;

package/dist/components/collections/utility/render-cell.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatDate, formatDatetime, formatMoney, formatPoints, formatTime } from '@sqrzro/utility';
+import { usePathname } from 'next/navigation';
+import Link from '../../../components/elements/Link';
+import Reference from '../../../components/elements/Reference';
+import normalizeHref from './normalize-href';
+function renderDefault(value) {
+    return value;
+}
+function renderLink(value, pathname) {
+    const match = value.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+    return match ? _jsx(Link, { href: normalizeHref(match[2], pathname), children: match[1] }) : value;
+}
+const renderers = {
+    date: (value) => formatDate(value),
+    datetime: (value) => formatDatetime(value),
+    decimal: (value) => value.toFixed(2),
+    link: (value, pathname) => renderLink(value, pathname),
+    money: (value) => formatMoney(value),
+    number: (value) => renderDefault(value),
+    percentage: (value) => `${value.toFixed(2)}%`,
+    points: (value) => formatPoints(value),
+    raw: (value) => renderDefault(value),
+    reference: (value) => _jsx(Reference, { ...value }),
+    string: (value) => renderDefault(value),
+    time: (value) => formatTime(value),
+};
+function renderCell(column, value) {
+    const pathname = usePathname();
+    return renderers[column.type](value, pathname);
+}
+export default renderCell;

package/dist/components/elements/Badge/index.d.ts

@@ -0,0 +1,12 @@
+import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces';
+import type { StyleVariant } from '../../../utility/interfaces';
+export interface BadgeClassNames {
+    root: StylableClassName;
+    dot: StylableClassName;
+}
+export interface BadgeProps extends ClassNameProps<BadgeClassNames> {
+    children: React.ReactNode;
+    variant?: StyleVariant[] | StyleVariant | null;
+}
+declare function Badge({ classNameProps, classNames, children, variant }: BadgeProps): React.ReactElement;
+export default Badge;

package/dist/components/elements/Badge/index.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/context';
+import applyVariants from '../../../styles/classnames/utility/apply-variants';
+function Badge({ classNameProps, classNames, children, variant }) {
+    const componentClassNames = useClassNames('badge', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
+    return (_jsxs("strong", { className: componentClassNames?.root, children: [_jsx("svg", { "aria-hidden": "true", className: componentClassNames?.dot, viewBox: "0 0 6 6", children: _jsx("circle", { cx: "3", cy: "3", r: "3" }) }), children] }));
+}
+export default Badge;

package/dist/components/elements/ContentLink/index.d.ts

@@ -0,0 +1,4 @@
+import type { LinkProps } from '../Link';
+export type ContentLinkProps = LinkProps;
+declare function ContentLink({ className, ...props }: ContentLinkProps): React.ReactElement;
+export default ContentLink;

package/dist/components/elements/ContentLink/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import tw from '../../../styles/classnames/utility/tw';
+import Link from '../Link';
+function ContentLink({ className, ...props }) {
+    return _jsx(Link, { ...props, className: tw('text-link', className) });
+}
+export default ContentLink;

package/dist/components/elements/InfoPanel/index.d.ts

@@ -0,0 +1,11 @@
+import type { ClassNameProps, StylableClassName } from '../../../styles/classnames/interfaces';
+import type { StyleVariant } from '../../../utility/interfaces';
+export interface InfoPanelClassNames {
+    root: StylableClassName;
+}
+export interface InfoPanelProps extends ClassNameProps<InfoPanelClassNames> {
+    children: React.ReactNode;
+    variant?: StyleVariant[] | StyleVariant | null;
+}
+declare function InfoPanel({ classNameProps, classNames, children, variant, }: InfoPanelProps): React.ReactElement;
+export default InfoPanel;

package/dist/components/elements/InfoPanel/index.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/context';
+import applyVariants from '../../../styles/classnames/utility/apply-variants';
+function InfoPanel({ classNameProps, classNames, children, variant, }) {
+    const componentClassNames = useClassNames('infoPanel', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
+    return _jsx("aside", { className: componentClassNames?.root, children: children });
+}
+export default InfoPanel;

package/dist/components/{utility → elements}/Link/index.d.ts

@@ -1,4 +1,4 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
 interface DataProps {
     'data-test-id'?: string;
 }
@@ -10,10 +10,11 @@ export interface LinkProps extends ClassNameProps<LinkClassNames>, DataProps {
     children: React.ReactNode;
     href?: string | null;
     id?: string;
+    isDownload?: boolean;
     isNewWindow?: boolean;
     onClick?: React.MouseEventHandler<HTMLAnchorElement>;
     scroll?: boolean;
     style?: React.CSSProperties;
 }
-declare function Link({ children, className, classNames, classNameProps, isNewWindow, href, id, onClick, scroll, style, ...dataProps }: Readonly<LinkProps>): React.ReactElement;
+declare function Link({ children, className, classNames, classNameProps, isDownload, isNewWindow, href, id, onClick, scroll, style, ...dataProps }: Readonly<LinkProps>): React.ReactElement;
 export default Link;

package/dist/components/{utility → elements}/Link/index.js

@@ -1,24 +1,25 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { joinURL } from '@sqrzro/utility';
 import NextLink from 'next/link';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 function normalizeHref(href) {
-    if (!href) {
-        return '';
-    }
     if (href.startsWith('#')) {
         return href;
     }
-    return /^\//u.exec(href) ? href : `/${href}`;
+    return joinURL(href);
 }
-function Link({ children, className, classNames, classNameProps, isNewWindow, href = '/', id, onClick, scroll, style, ...dataProps }) {
-    const componentClassNames = classNames || getClassNames('link')?.(classNameProps);
+function Link({ children, className, classNames, classNameProps, isDownload, isNewWindow, href = '/', id, onClick, scroll, style, ...dataProps }) {
+    const componentClassNames = useClassNames('link', { props: classNameProps }, classNames);
+    const downloadProps = isDownload ? { download: true } : {};
     const newWindowProps = isNewWindow
         ? { rel: 'noopener noreferrer', target: '_blank' }
         : {};
     const props = {
-        ...newWindowProps,
         ...dataProps,
+        ...downloadProps,
+        ...newWindowProps,
         className: tw(componentClassNames?.root, className),
         id,
         onClick,

package/dist/components/elements/Menu/index.d.ts

@@ -0,0 +1,19 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ActionObject } from '../../../utility/interfaces';
+import { PopoverProps } from '../../utility/Popover';
+export interface MenuClassNames {
+    root: string;
+    list: string;
+    item: string;
+    link: string;
+}
+export interface MenuProps<Data, Response> extends ClassNameProps<MenuClassNames> {
+    actions: (ActionObject<Data, Response> | null)[];
+    align?: PopoverProps['align'];
+    data?: Data;
+    isDisabled?: boolean;
+    label: React.ReactNode;
+    vAlign?: PopoverProps['vAlign'];
+}
+declare function Menu<Data, Response>({ actions, align, classNameProps, classNames, data, isDisabled, label, vAlign, }: MenuProps<Data, Response>): React.ReactElement;
+export default Menu;

package/dist/components/elements/Menu/index.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterNull } from '@sqrzro/utility';
+import Button from '../../../components/buttons/Button';
+import usePopover from '../../../hooks/usePopover';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+import Action from '../../utility/Action';
+import Popover from '../../utility/Popover';
+import MenuItem from '../MenuItem';
+function Menu({ actions, align, classNameProps, classNames, data, isDisabled, label, vAlign, }) {
+    const componentClassNames = useClassNames('menu', { props: classNameProps }, classNames);
+    const { controlProps, ref, targetProps } = usePopover();
+    const filteredActions = filterNull(actions);
+    return (_jsxs("div", { className: tw('relative', componentClassNames?.root), ref: ref, children: [_jsx(Button, { ...controlProps, classNameProps: classNameProps, isDisabled: isDisabled, children: label }), _jsx(Popover, { ...targetProps, align: align, classNameProps: classNameProps, vAlign: vAlign, children: _jsx("ul", { className: componentClassNames?.list, children: filteredActions.map((item, index) => (_jsx("li", { className: componentClassNames?.item, children: _jsx(Action, { ...item, data: data, render: (props) => (_jsx(MenuItem, { ...props, classNameProps: classNameProps })) }) }, index))) }) })] }));
+}
+export default Menu;

package/dist/components/elements/MenuItem/index.d.ts

@@ -0,0 +1,9 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ActionComponentProps } from '../../utility/Action';
+import type { MenuClassNames } from '../Menu';
+interface MenuItemProps<Data, Response> extends ClassNameProps<MenuClassNames>, ActionComponentProps<Data, Response> {
+    isDownload?: boolean;
+    isNewWindow?: boolean;
+}
+declare function MenuItem<Data, Response>({ children, classNameProps, classNames, href, isDownload, isLoading, isNewWindow, onClick, }: MenuItemProps<Data, Response>): React.ReactElement;
+export default MenuItem;

package/dist/components/elements/MenuItem/index.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/context';
+import Link from '../Link';
+function MenuItem({ children, classNameProps, classNames, href, isDownload, isLoading, isNewWindow, onClick, }) {
+    const componentClassNames = useClassNames('menu', { props: classNameProps }, classNames);
+    if (href) {
+        return (_jsx(Link, { className: componentClassNames?.link, href: href, isDownload: isDownload, isNewWindow: isNewWindow, onClick: onClick, children: children }));
+    }
+    return (_jsxs("button", { className: componentClassNames?.link, onClick: onClick, type: "button", children: [children, " ", isLoading && '...'] }));
+}
+export default MenuItem;

package/dist/components/elements/Page/index.d.ts

@@ -0,0 +1,19 @@
+import type { NavigationObject } from '../../../navigation/interfaces';
+import type { NextPageProps } from '../../../utility/interfaces';
+type Fn = (params?: Promise<Record<string, string>> | null) => Promise<any>;
+type FnReturn<T extends Fn> = T extends (...args: any[]) => Promise<infer R> ? R : never;
+interface PageTemplateProps {
+    children: React.ReactNode;
+    tabs: NavigationObject[] | null;
+    title: React.ReactNode;
+}
+export type PageProps<T extends Fn | undefined = undefined> = {
+    readonly fn?: T;
+    readonly children: React.ReactNode | ((data: T extends Fn ? FnReturn<T> : null, pageProps?: NextPageProps) => React.ReactNode);
+    readonly pageProps?: NextPageProps;
+    readonly tabs?: NavigationObject[] | ((data: T extends Fn ? FnReturn<T> : null, pageProps?: NextPageProps) => NavigationObject[] | null);
+    readonly template?: (props: PageTemplateProps) => React.ReactElement;
+    readonly title?: React.ReactNode | ((data: T extends Fn ? FnReturn<T> : null, pageProps?: NextPageProps) => React.ReactNode);
+};
+declare function Page<T extends Fn | undefined = undefined>(props: PageProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Page;

package/dist/components/elements/Page/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+async function PageComponent(props) {
+    const data = props.fn ? await props.fn(props.pageProps?.params) : null;
+    const children = typeof props.children === 'function'
+        ? props.children(data, props.pageProps)
+        : props.children;
+    const tabs = typeof props.tabs === 'function' ? props.tabs(data, props.pageProps) : props.tabs;
+    const title = typeof props.title === 'function' ? props.title(data, props.pageProps) : props.title;
+    if (props.template) {
+        return props.template({ children, tabs: tabs ?? null, title });
+    }
+    return children;
+}
+function Page(props) {
+    return (_jsx(Suspense, { fallback: props.template?.({ children: null, tabs: null, title: '•••' }), children: _jsx(PageComponent, { ...props }) }));
+}
+export default Page;

package/dist/components/elements/Reference/index.d.ts

@@ -0,0 +1,9 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ReferenceObject } from '../../../utility/interfaces';
+export interface ReferenceClassNames {
+    root: string;
+    reference: string;
+}
+export type ReferenceProps = ClassNameProps<ReferenceClassNames> & ReferenceObject;
+declare function Reference({ classNameProps, classNames, id, name, path, reference, }: Readonly<ReferenceProps>): React.ReactElement | string | null;
+export default Reference;

package/dist/components/elements/Reference/index.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { joinURL } from '@sqrzro/utility';
+import { useClassNames } from '../../../styles/context';
+import Link from '../Link';
+function Reference({ classNameProps, classNames, id, name, path, reference, }) {
+    const componentClassNames = useClassNames('reference', { props: classNameProps }, classNames);
+    if (!reference) {
+        return name;
+    }
+    if (id && path) {
+        return (_jsxs(Link, { className: componentClassNames?.root, href: joinURL(path, id), children: [name, _jsx("small", { className: componentClassNames?.reference, children: reference })] }));
+    }
+    return (_jsxs("span", { className: componentClassNames?.root, children: [name, _jsx("small", { className: componentClassNames?.reference, children: reference })] }));
+}
+export default Reference;