@sqrzro/ui 4.0.0-alpha.25 → 4.0.0-alpha.27

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

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

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

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Button from '../../../components/buttons/Button';
 import Action from '../../../components/utility/Action';
 import FormSubmit from '../../../forms/components/FormSubmit';
-function ActionButton({ isSubmittable, ...props }) {
-    return _jsx(Action, { ...props, render: isSubmittable ? FormSubmit : Button });
+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.js

@@ -1,10 +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 { getClassNames } from '../../../styles/classnames';
 import applyVariants from '../../../styles/classnames/apply-variants';
 import tw from '../../../styles/classnames/tw';
+import Link from '../../elements/Link';
 /**
  * Either a `Link` component or a `button` element, depending on whether a `href` prop is specified.
  *

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

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

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

@@ -2,8 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { filterNull } from '@sqrzro/utility';
 import { getClassNames } from '../../../styles/classnames';
 import tw from '../../../styles/classnames/tw';
-function DataTable({ classNameProps, classNames, data }) {
+function DataTable({ classNameProps, classNames, data, }) {
     const componentClassNames = getClassNames('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/List/index.d.ts

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import type { ClassNameProps } from '../../../styles/classnames/interfaces';
-import type { DataTableObject } from '../interfaces';
+import type { DataObject } from '../../../utility/interfaces';
 export interface ListItemMetaClassNames {
     root: string;
     row: string;
@@ -7,7 +7,7 @@ export interface ListItemMetaClassNames {
     value: string;
 }
 export type ListItemMetaProps = ClassNameProps<ListItemMetaClassNames> & {
-    data?: React.ReactNode[] | (DataTableObject | null)[];
+    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

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { isValidElement } from 'react';
 import { filterNull } from '@sqrzro/utility';
 import { getClassNames } from '../../../styles/classnames';
+import isDataTableArray from '../../../utility/is-data-object-array';
 import DataTable from '../DataTable';
-import isDataTableArray from '../utility/is-data-table-array';
 function getKey(item) {
     if (isValidElement(item)) {
         return item.key || '-';

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import usePagination from '../../../hooks/usePagination';
 import { getClassNames } from '../../../styles/classnames';
 import tw from '../../../styles/classnames/tw';
-import Link from '../../../components/utility/Link';
+import Link from '../../elements/Link';
 import PaginationLink from '../PaginationLink';
 function Pagination({ classNames, classNameProps, gapLabel = '•••', limit, nextLabel, page, previousLabel, total, }) {
     const componentClassNames = getClassNames('pagination', { props: classNameProps }, classNames);

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

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

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

@@ -1,4 +1,4 @@
-import type { ActionObject, StyleVariant } from '../../utility/interfaces';
+import type { ActionObject, DataObject, StyleVariant } from '../../utility/interfaces';
 export interface CollectionFunctionConfig<Filters = null> {
     filters?: Partial<Filters> | null;
     params?: Record<string, string> | null;
@@ -14,12 +14,12 @@ export interface ListItemObject<Data extends object | null = null> {
     image?: string | null;
     imageHref?: string | null;
     isLoading?: boolean;
-    meta?: React.ReactNode[] | (DataTableObject | null)[];
+    meta?: React.ReactNode[] | (DataObject | null)[];
     permission?: string;
     secondary?: {
         data?: React.ReactElement | {
             description?: React.ReactNode;
-            meta?: React.ReactNode[] | (DataTableObject | null)[];
+            meta?: React.ReactNode[] | (DataObject | null)[];
             title?: React.ReactNode;
         } | null;
         variant?: StyleVariant | null;
@@ -53,7 +53,3 @@ export interface Paginated<T> {
         total: number;
     };
 }
-export interface DataTableObject {
-    label: React.ReactNode;
-    value: React.ReactNode;
-}

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,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/classnames';
+import applyVariants from '../../../styles/classnames/apply-variants';
+function Badge({ classNameProps, classNames, children, variant }) {
+    const componentClassNames = getClassNames('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/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,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/classnames';
+import applyVariants from '../../../styles/classnames/apply-variants';
+function InfoPanel({ classNameProps, classNames, children, variant, }) {
+    const componentClassNames = getClassNames('infoPanel', { props: { ...classNameProps, ...applyVariants(variant) } }, classNames);
+    return _jsx("aside", { className: componentClassNames?.root, children: children });
+}
+export default InfoPanel;

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

@@ -0,0 +1,18 @@
+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 extends object | null = null> extends ClassNameProps<MenuClassNames> {
+    actions: (ActionObject<Data> | null)[];
+    align?: PopoverProps['align'];
+    data?: Data;
+    label: React.ReactNode;
+    vAlign?: PopoverProps['vAlign'];
+}
+declare function Menu<Data extends object | null = null>({ actions, align, classNameProps, classNames, data, label, vAlign, }: MenuProps<Data>): React.ReactElement;
+export default Menu;

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

@@ -0,0 +1,20 @@
+'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 useClickOutside from '../../../hooks/useClickOutside';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
+import Action from '../../utility/Action';
+import Popover from '../../utility/Popover';
+import MenuItem from '../MenuItem';
+function Menu({ actions, align, classNameProps, classNames, data, label, vAlign, }) {
+    const componentClassNames = getClassNames('menu', { props: classNameProps }, classNames);
+    const [isOpen, setIsOpen, ref] = useClickOutside();
+    function toggleIsOpen() {
+        setIsOpen(!isOpen);
+    }
+    const filteredActions = filterNull(actions);
+    return (_jsxs("div", { className: tw('relative', componentClassNames?.root), ref: ref, children: [_jsx(Button, { classNameProps: classNameProps, onClick: toggleIsOpen, children: label }), _jsx(Popover, { align: align, classNameProps: classNameProps, isOpen: isOpen, 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,7 @@
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { ActionComponentProps } from '../../utility/Action';
+import type { MenuClassNames } from '../Menu';
+interface MenuItemProps<Data extends object | null = null> extends ClassNameProps<MenuClassNames>, ActionComponentProps<Data> {
+}
+declare function MenuItem<Data extends object | null = null>({ children, classNameProps, classNames, href, onClick, }: MenuItemProps<Data>): React.ReactElement;
+export default MenuItem;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/classnames';
+import Link from '../Link';
+function MenuItem({ children, classNameProps, classNames, href, onClick, }) {
+    const componentClassNames = getClassNames('menu', { props: classNameProps }, classNames);
+    if (href) {
+        return (_jsx(Link, { className: componentClassNames?.link, href: href, onClick: onClick, children: children }));
+    }
+    return (_jsx("button", { className: componentClassNames?.link, onClick: onClick, type: "button", children: children }));
+}
+export default MenuItem;

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

@@ -0,0 +1,13 @@
+import type { DataObject } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+export interface SummaryClassNames {
+    root: string;
+    item: string;
+    label: string;
+    value: string;
+}
+export interface SummaryProps extends ClassNameProps<SummaryClassNames> {
+    data: (DataObject | null)[];
+}
+declare function Summary({ classNameProps, classNames, data, }: Readonly<SummaryProps>): React.ReactElement | null;
+export default Summary;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterNull } from '@sqrzro/utility';
+import { getClassNames } from '../../../styles/classnames';
+import tw from '../../../styles/classnames/tw';
+const colMap = {
+    1: 'grid-cols-1',
+    2: 'grid-cols-2',
+    3: 'grid-cols-3',
+    4: 'grid-cols-4',
+    5: 'grid-cols-5',
+    6: 'grid-cols-6',
+};
+function Summary({ classNameProps, classNames, data, }) {
+    const componentClassNames = getClassNames('summary', { props: classNameProps }, classNames);
+    const filtered = filterNull(data);
+    if (!filtered.length) {
+        return null;
+    }
+    return (_jsx("dl", { className: tw(componentClassNames?.root, colMap[Object.keys(filtered).length]), children: filtered.map(({ label, value }, index) => (_jsxs("div", { className: componentClassNames?.item, children: [_jsx("dt", { className: componentClassNames?.label, children: label }), _jsx("dd", { className: componentClassNames?.value, children: value })] }, index))) }));
+}
+export default Summary;

package/dist/components/index.d.ts

@@ -9,6 +9,20 @@ export type { ListProps } from './collections/List';
 export { default as List } from './collections/List';
 export type { TableProps } from './collections/Table';
 export { default as Table } from './collections/Table';
+export type { BadgeProps } from './elements/Badge';
+export { default as Badge } from './elements/Badge';
+export type { InfoPanelProps } from './elements/InfoPanel';
+export { default as InfoPanel } from './elements/InfoPanel';
+export type { LinkProps } from './elements/Link';
+export { default as Link } from './elements/Link';
+export type { MenuProps } from './elements/Menu';
+export { default as Menu } from './elements/Menu';
+export type { PageProps } from './elements/Page';
+export { default as Page } from './elements/Page';
+export type { ReferenceProps } from './elements/Reference';
+export { default as Reference } from './elements/Reference';
+export type { SummaryProps } from './elements/Summary';
+export { default as Summary } from './elements/Summary';
 export type { AppErrorProps } from './errors/AppError';
 export { default as AppError } from './errors/AppError';
 export type { AppForbiddenErrorProps } from './errors/AppForbiddenError';
@@ -21,15 +35,7 @@ export type { ModalLauncherProps } from './modals/ModalLauncher';
 export { default as ModalLauncher } from './modals/ModalLauncher';
 export type { ContainerProps } from './utility/Container';
 export { default as Container } from './utility/Container';
-export type { LinkProps } from './utility/Link';
-export { default as Link } from './utility/Link';
-export type { MenuProps } from './utility/Menu';
-export { default as Menu } from './utility/Menu';
-export type { PageProps } from './utility/Page';
-export { default as Page } from './utility/Page';
 export type { PopoverProps } from './utility/Popover';
 export { default as Popover } from './utility/Popover';
-export type { ReferenceProps } from './utility/Reference';
-export { default as Reference } from './utility/Reference';
 export type { RootLayoutProps } from './utility/RootLayout';
 export { default as RootLayout } from './utility/RootLayout';

package/dist/components/index.js

@@ -4,15 +4,18 @@ export { default as Button } from './buttons/Button';
 export { default as DataTable } from './collections/DataTable';
 export { default as List } from './collections/List';
 export { default as Table } from './collections/Table';
+export { default as Badge } from './elements/Badge';
+export { default as InfoPanel } from './elements/InfoPanel';
+export { default as Link } from './elements/Link';
+export { default as Menu } from './elements/Menu';
+export { default as Page } from './elements/Page';
+export { default as Reference } from './elements/Reference';
+export { default as Summary } from './elements/Summary';
 export { default as AppError } from './errors/AppError';
 export { default as AppForbiddenError } from './errors/AppForbiddenError';
 export { default as AppNotFoundError } from './errors/AppNotFoundError';
 export { default as Modal } from './modals/Modal';
 export { default as ModalLauncher } from './modals/ModalLauncher';
 export { default as Container } from './utility/Container';
-export { default as Link } from './utility/Link';
-export { default as Menu } from './utility/Menu';
-export { default as Page } from './utility/Page';
 export { default as Popover } from './utility/Popover';
-export { default as Reference } from './utility/Reference';
 export { default as RootLayout } from './utility/RootLayout';

package/dist/navigation/components/AppNavigationItem/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from '../../../components/elements/Link';
+import MenuItem from '../../../components/elements/MenuItem';
 import Action from '../../../components/utility/Action';
-import Link from '../../../components/utility/Link';
-import MenuItem from '../../../components/utility/MenuItem';
 import Popover from '../../../components/utility/Popover';
 import usePopover from '../../../hooks/usePopover';
 import { getClassNames } from '../../../styles/classnames';

package/dist/styles/classnames/apply-variants.d.ts

@@ -1,3 +1,3 @@
 import type { StyleVariant } from '../../utility/interfaces';
-declare function applyVariants(variants?: StyleVariant[] | StyleVariant): Record<string, boolean>;
+declare function applyVariants(variants?: StyleVariant[] | StyleVariant | null): Record<string, boolean>;
 export default applyVariants;

package/dist/styles/classnames/config.d.ts

@@ -7,14 +7,18 @@ import type { ListItemClassNames } from '../../components/collections/ListItem';
 import type { ListItemMetaClassNames } from '../../components/collections/ListItemMeta';
 import type { PaginationClassNames } from '../../components/collections/Pagination';
 import type { TableClassNames } from '../../components/collections/Table';
+import type { BadgeClassNames } from '../../components/elements/Badge';
+import type { InfoPanelClassNames } from '../../components/elements/InfoPanel';
+import type { LinkClassNames } from '../../components/elements/Link';
+import type { MenuClassNames } from '../../components/elements/Menu';
+import type { ReferenceClassNames } from '../../components/elements/Reference';
+import type { SummaryClassNames } from '../../components/elements/Summary';
 import type { AppErrorClassNames } from '../../components/errors/AppError';
 import type { ModalClassNames } from '../../components/modals/Modal';
 import type { ActionListClassNames } from '../../components/utility/ActionList';
 import type { ContainerClassNames } from '../../components/utility/Container';
-import type { LinkClassNames } from '../../components/utility/Link';
 import type { LoaderClassNames } from '../../components/utility/Loader';
 import type { PopoverClassNames } from '../../components/utility/Popover';
-import type { ReferenceClassNames } from '../../components/utility/Reference';
 import type { RootLayoutClassNames } from '../../components/utility/RootLayout';
 import type { ToastClassNames } from '../../components/utility/Toast';
 import type { FilterBarClassNames } from '../../filters/components/FilterBar';
@@ -37,6 +41,7 @@ export interface RegisteredClassNames {
     actionList?: ComponentClassNames<ActionListClassNames>;
     appError?: ComponentClassNames<AppErrorClassNames>;
     appNavigation?: ComponentClassNames<AppNavigationClassNames>;
+    badge?: ComponentClassNames<BadgeClassNames>;
     button?: ComponentClassNames<ButtonClassNames>;
     container?: ComponentClassNames<ContainerClassNames>;
     csvInput?: ComponentClassNames<CSVInputClassNames>;
@@ -50,11 +55,13 @@ export interface RegisteredClassNames {
     filterPanel?: ComponentClassNames<FilterPanelClassNames>;
     form?: ComponentClassNames<FormClassNames>;
     formField?: ComponentClassNames<FormFieldClassNames>;
+    infoPanel?: ComponentClassNames<InfoPanelClassNames>;
     link?: ComponentClassNames<LinkClassNames>;
     list?: ComponentClassNames<ListClassNames>;
     listItem?: ComponentClassNames<ListItemClassNames>;
     listItemMeta?: ComponentClassNames<ListItemMetaClassNames>;
     loader?: ComponentClassNames<LoaderClassNames>;
+    menu?: ComponentClassNames<MenuClassNames>;
     modal?: ComponentClassNames<ModalClassNames>;
     pagination?: ComponentClassNames<PaginationClassNames>;
     passwordInput?: ComponentClassNames<PasswordInputClassNames>;
@@ -62,6 +69,7 @@ export interface RegisteredClassNames {
     reference?: ComponentClassNames<ReferenceClassNames>;
     rootLayout?: ComponentClassNames<RootLayoutClassNames>;
     staticTextInput?: ComponentClassNames<StaticTextInputClassNames>;
+    summary?: ComponentClassNames<SummaryClassNames>;
     switch?: ComponentClassNames<SwitchClassNames>;
     table?: ComponentClassNames<TableClassNames>;
     tabs?: ComponentClassNames<TabsClassNames>;

package/dist/styles/styles.css

@@ -29,6 +29,7 @@
 
     input[type=number] {
         -moz-appearance: textfield;
+        appearance: textfield;
     }
 
     small {

package/dist/utility/interfaces.d.ts

@@ -6,6 +6,22 @@ export interface AppConfigObject {
     };
     navigation: NavigationObject[];
 }
+export type ActionEvent = React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>;
+export interface ActionObject<Data extends object | null = null> {
+    action?: (data: Data) => Promise<void>;
+    confirmable?: ConfirmableObject;
+    data?: Data;
+    details?: React.ReactNode;
+    href?: string;
+    icon?: React.ReactNode;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isSubmittable?: boolean;
+    label: React.ReactNode;
+    onClick?: (event?: ActionEvent) => void;
+    searchParams?: Record<string, string>;
+    variant?: StyleVariant[] | StyleVariant;
+}
 export interface ConfirmableObject {
     actions?: Omit<ActionObject, 'confirmable'>[];
     confirmText?: string;
@@ -21,30 +37,14 @@ export interface ConfirmableObject {
     submitLabel?: string;
     title?: React.ReactNode;
 }
-export type ActionEvent = React.MouseEvent<HTMLAnchorElement> | React.MouseEvent<HTMLButtonElement>;
-export interface ActionObject<Data extends object | null = null> {
-    action?: (data: Data) => Promise<void>;
-    confirmable?: ConfirmableObject;
-    data?: Data;
-    details?: React.ReactNode;
-    href?: string;
-    icon?: React.ReactNode;
-    isDisabled?: boolean;
-    isLoading?: boolean;
-    isSubmittable?: boolean;
+export interface DataObject {
     label: React.ReactNode;
-    onClick?: (event?: ActionEvent) => void;
-    searchParams?: Record<string, string>;
-    variant?: StyleVariant[] | StyleVariant;
+    value: React.ReactNode;
 }
 export interface NextLayoutProps {
     children: React.ReactNode;
     params?: Promise<Record<string, string>> | null;
 }
-export interface AwaitedNextPageProps {
-    params?: Record<string, string> | null;
-    searchParams?: Record<string, string> | null;
-}
 export interface NextPageProps {
     params?: Promise<Record<string, string>> | null;
     searchParams?: Promise<Record<string, string>> | null;

package/dist/utility/is-data-object-array.d.ts

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

package/dist/utility/is-data-object-array.js

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

package/dist/utility/is-data-object.d.ts

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

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.25",
+  "version": "4.0.0-alpha.27",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",
@@ -45,29 +45,29 @@
     "clsx": "^2.1.1",
     "next": "^16.1.6",
     "react": "^19.2.4",
-    "react-dom": "^19.2.1",
-    "tailwind-merge": "^3.4.0",
+    "react-dom": "^19.2.4",
+    "tailwind-merge": "^3.5.0",
     "use-deep-compare-effect": "^1.8.1",
-    "@sqrzro/utility": "^4.0.0-alpha.9"
+    "@sqrzro/utility": "^4.0.0-alpha.10"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^10.1.7",
-    "@storybook/addon-docs": "^10.1.7",
-    "@storybook/nextjs": "^10.1.7",
-    "@testing-library/react": "^16.3.0",
+    "@storybook/addon-a11y": "^10.2.14",
+    "@storybook/addon-docs": "^10.2.14",
+    "@storybook/nextjs": "^10.2.14",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "concurrently": "^9.2.1",
     "cpx": "^1.5.0",
-    "next-router-mock": "^1.0.4",
-    "prettier": "^3.7.4",
-    "rimraf": "^6.1.2",
-    "storybook": "^10.1.7",
+    "next-router-mock": "^1.0.5",
+    "prettier": "^3.8.1",
+    "rimraf": "^6.1.3",
+    "storybook": "^10.2.14",
     "tsc-alias": "^1.8.16",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "@sqrzro/prettier-config": "^4.0.0-alpha.1"
+    "@sqrzro/prettier-config": "^4.0.0-alpha.2"
   },
   "scripts": {
     "build": "pnpm clean && tsc -p tsconfig.build.json && tsc-alias && pnpm build:css",

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-import type { ActionObject } from '../../../utility/interfaces';
-import { PopoverProps } from '../Popover';
-export interface MenuProps<Data extends object | null = null> {
-    actions: (ActionObject<Data> | null)[];
-    align?: PopoverProps['align'];
-    data?: Data;
-    label: React.ReactNode;
-    vAlign?: PopoverProps['vAlign'];
-}
-declare function Menu<Data extends object | null = null>({ actions, align, data, label, vAlign, }: MenuProps<Data>): React.ReactElement;
-export default Menu;

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

@@ -1,17 +0,0 @@
-'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 useClickOutside from '../../../hooks/useClickOutside';
-import Action from '../Action';
-import MenuItem from '../MenuItem';
-import Popover from '../Popover';
-function Menu({ actions, align, data, label, vAlign, }) {
-    const [isOpen, setIsOpen, ref] = useClickOutside();
-    function toggleIsOpen() {
-        setIsOpen(!isOpen);
-    }
-    const filteredActions = filterNull(actions);
-    return (_jsxs("div", { className: "relative", ref: ref, children: [_jsx(Button, { onClick: toggleIsOpen, children: label }), _jsx(Popover, { align: align, isOpen: isOpen, vAlign: vAlign, children: _jsx("ul", { children: filteredActions.map((item, index) => (_jsx("li", { children: _jsx(Action, { ...item, data: data, render: MenuItem }) }, index))) }) })] }));
-}
-export default Menu;

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

@@ -1,4 +0,0 @@
-import type { ActionComponentProps } from '../Action';
-type MenuItemProps<Data extends object | null = null> = ActionComponentProps<Data>;
-declare function MenuItem<Data extends object | null = null>({ children, href, onClick, }: MenuItemProps<Data>): React.ReactElement;
-export default MenuItem;

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

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Link from '../Link';
-function MenuItem({ children, href, onClick, }) {
-    if (href) {
-        return (_jsx(Link, { href: href, onClick: onClick, children: children }));
-    }
-    return (_jsx("button", { onClick: onClick, type: "button", children: children }));
-}
-export default MenuItem;