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

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,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterNull } from '@sqrzro/utility';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
+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 = useClassNames('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/errors/AppError/index.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/index.d.ts

@@ -1,18 +1,47 @@
 export * from './collections/interfaces';
+export type { ActionButtonProps } from './buttons/ActionButton';
 export { default as ActionButton } from './buttons/ActionButton';
+export type { AppBodyProps } from './utility/AppBody';
+export { default as AppBody } from './utility/AppBody';
+export type { ButtonProps } from './buttons/Button';
+export { default as Button } from './buttons/Button';
+export type { DataTableProps } from './collections/DataTable';
+export { default as DataTable } from './collections/DataTable';
+export type { DefinitionListProps } from './collections/DefinitionList';
+export { default as DefinitionList } from './collections/DefinitionList';
+export type { EmptyMessageProps } from './collections/EmptyMessage';
+export { default as EmptyMessage } from './collections/EmptyMessage';
 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 { ContentLinkProps } from './elements/ContentLink';
+export { default as ContentLink } from './elements/ContentLink';
+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';
+export { default as AppForbiddenError } from './errors/AppForbiddenError';
+export type { AppNotFoundErrorProps } from './errors/AppNotFoundError';
+export { default as AppNotFoundError } from './errors/AppNotFoundError';
+export type { ModalProps } from './modals/Modal';
+export { default as Modal } from './modals/Modal';
 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 { 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 { RootLayoutProps } from './utility/RootLayout';
-export { default as RootLayout } from './utility/RootLayout';

package/dist/components/index.js

@@ -1,10 +1,24 @@
 export * from './collections/interfaces';
 export { default as ActionButton } from './buttons/ActionButton';
+export { default as AppBody } from './utility/AppBody';
+export { default as Button } from './buttons/Button';
+export { default as DataTable } from './collections/DataTable';
+export { default as DefinitionList } from './collections/DefinitionList';
+export { default as EmptyMessage } from './collections/EmptyMessage';
 export { default as List } from './collections/List';
 export { default as Table } from './collections/Table';
+export { default as ContentLink } from './elements/ContentLink';
+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 Page } from './utility/Page';
 export { default as Popover } from './utility/Popover';
-export { default as RootLayout } from './utility/RootLayout';

package/dist/components/modals/ConfirmModal/index.d.ts

@@ -1,7 +1,9 @@
 import { ConfirmableObject } from '../../../utility/interfaces';
 import type { ModalProps } from '../Modal';
-export type ConfirmModalProps = Omit<ModalProps, 'children' | 'icon' | 'title'> & {
-    confirmable: ConfirmableObject;
+export type ConfirmModalProps<Data, Response> = Omit<ModalProps, 'children' | 'icon' | 'title'> & {
+    confirmable: ConfirmableObject<Data, Response>;
+    onCancel: () => void;
+    onConfirm: () => void;
 };
-declare function ConfirmModal({ confirmable, ...modalProps }: Readonly<ConfirmModalProps>): React.ReactElement;
+declare function ConfirmModal<Data, Response>({ confirmable, onCancel, onConfirm, ...modalProps }: Readonly<ConfirmModalProps<Data, Response>>): React.ReactElement;
 export default ConfirmModal;

package/dist/components/modals/ConfirmModal/index.js

@@ -3,19 +3,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useState } from 'react';
 import TextInput from '../../../forms/components/TextInput';
 import Modal from '../Modal';
-function ConfirmModal({ confirmable, ...modalProps }) {
+function ConfirmModal({ confirmable, onCancel, onConfirm, ...modalProps }) {
     const [confirmText, setConfirmText] = useState('');
     function handleChange(event) {
         setConfirmText(event.target.value?.toUpperCase() || '');
     }
     return (_jsxs(Modal, { ...modalProps, actions: [
-            { label: 'Cancel', variant: 'link' },
+            { label: 'Cancel', onClick: onCancel },
             ...(confirmable.actions || []),
             {
                 isDisabled: Boolean(confirmable.confirmText &&
                     confirmText !== confirmable.confirmText.toUpperCase()),
                 label: confirmable.submitLabel || 'Confirm',
-                onClick: confirmable.onConfirm,
+                onClick: onConfirm,
                 variant: 'primary',
             },
         ], title: confirmable.title || 'Are you sure?', children: [confirmable.description || 'This action cannot be undone.', confirmable.confirmText ? (_jsxs(Fragment, { children: [_jsxs("p", { children: ["Please type ", _jsx("strong", { children: confirmable.confirmText.toUpperCase() }), " to confirm"] }), _jsx(TextInput, { name: "confirm", onChange: handleChange, value: confirmText })] })) : null] }));

package/dist/components/modals/Modal/index.d.ts

@@ -1,5 +1,5 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
-import { Action } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { SimpleActionObject } from '../../../utility/interfaces';
 export interface ModalClassNames {
     actions: string;
     content: string;
@@ -9,11 +9,11 @@ export interface ModalClassNames {
     title: string;
 }
 export interface ModalProps extends ClassNameProps<ModalClassNames> {
-    actions?: Action[];
+    actions?: SimpleActionObject[];
     children: React.ReactNode;
     icon?: React.ReactNode;
     isLoading?: boolean;
-    title?: string;
+    title?: React.ReactNode;
 }
 declare function Modal({ actions, children, classNames, classNameProps, icon, isLoading, title, }: Readonly<ModalProps>): React.ReactElement | null;
 export default Modal;

package/dist/components/modals/Modal/index.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-import { getClassNames } from '../../../styles/config';
-import tw from '../../../styles/tw';
+import { useClassNames } from '../../../styles/context';
+import tw from '../../../styles/classnames/utility/tw';
 import ModalActions from '../ModalActions';
 function Modal({ actions, children, classNames, classNameProps, icon, isLoading, title, }) {
-    const componentClassNames = classNames || getClassNames('modal')?.(classNameProps);
+    const componentClassNames = useClassNames('modal', { props: classNameProps }, classNames);
     const ref = useRef(null);
     useEffect(() => {
         if (ref.current) {

package/dist/components/modals/ModalActions/index.d.ts

@@ -1,8 +1,8 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
-import { Action } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { SimpleActionObject } from '../../../utility/interfaces';
 import type { ModalClassNames } from '../Modal';
 export interface ModalActionsProps extends ClassNameProps<ModalClassNames> {
-    actions: (Action | null)[];
+    actions: (SimpleActionObject | null)[];
     isLoading?: boolean;
 }
 declare function ModalActions({ actions, classNameProps, classNames, isLoading, }: Readonly<ModalActionsProps>): React.ReactElement;

package/dist/components/modals/ModalActions/index.js

@@ -1,8 +1,9 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import ActionList from '../../../components/utility/ActionList';
-import { getClassNames } from '../../../styles/config';
+import { useClassNames } from '../../../styles/context';
 function ModalActions({ actions, classNameProps, classNames, isLoading, }) {
-    const componentClassNames = classNames || getClassNames('modal')?.(classNameProps);
-    return (_jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: actions, classNameProps: { ...(classNameProps || {}), isModal: true }, isLoading: isLoading }) }));
+    const componentClassNames = useClassNames('modal', { props: classNameProps }, classNames);
+    return (_jsx("footer", { className: componentClassNames?.actions, children: _jsx(ActionList, { actions: actions, classNameProps: { ...classNameProps, isModal: true }, isLoading: isLoading }) }));
 }
 export default ModalActions;

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

@@ -0,0 +1,11 @@
+import type { ActionObject } from '../../../utility/interfaces';
+export interface ActionProps<Data, Response> extends Omit<ActionObject<Data, Response>, 'details' | 'label'> {
+    readonly children?: React.ReactNode;
+    readonly label?: React.ReactNode;
+    readonly render: (props: ActionComponentProps<Data, Response>) => React.ReactElement;
+}
+export interface ActionComponentProps<Data, Response> extends Pick<ActionProps<Data, Response>, 'action' | 'confirmable' | 'data' | 'href' | 'icon' | 'isDisabled' | 'isLoading' | 'isSubmittable' | 'onClick' | 'onSuccess' | 'searchParams' | 'variant'> {
+    children: React.ReactNode;
+}
+declare function Action<Data, Response>(props: ActionProps<Data, Response>): React.ReactElement;
+export default Action;

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

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import useSearchParamsHref from '../../../hooks/useSearchParamsHref';
+import useServerAction from '../../../hooks/useServerAction';
+import Confirmable from '../Confirmable';
+function ActionComponent({ action, children, confirmable, data, href, icon, isDisabled, isLoading, isSubmittable, label, onClick, onSuccess, refreshOnSuccess, redirectOnSuccess, searchParams, render, variant, }) {
+    const { setSearchParamsHref } = useSearchParamsHref();
+    async function handleAction() {
+        return action?.(data);
+    }
+    const serverActionOptions = {
+        onSuccess,
+        refreshOnSuccess,
+        redirectOnSuccess,
+    };
+    const { handleClick: handleActionClick, isLoading: isActionLoading } = useServerAction(handleAction, serverActionOptions);
+    function handleClick() {
+        if (action) {
+            handleActionClick();
+        }
+        else {
+            onClick?.();
+        }
+        if (searchParams) {
+            setSearchParamsHref(searchParams);
+        }
+    }
+    const componentProps = {
+        children: children ?? label,
+        href,
+        icon,
+        isDisabled: Boolean(isDisabled || isLoading || isActionLoading),
+        isLoading: isLoading || isActionLoading,
+        isSubmittable: Boolean(isSubmittable),
+        onClick: handleClick,
+        onSuccess,
+        variant,
+    };
+    if (confirmable) {
+        return (_jsx(Confirmable, { confirmable: confirmable, renderProps: componentProps, render: render }));
+    }
+    return render(componentProps);
+}
+function Action(props) {
+    return (_jsx(Suspense, { children: _jsx(ActionComponent, { ...props }) }));
+}
+export default Action;

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

@@ -1,12 +1,12 @@
-import type { ClassNameProps } from '../../../styles/interfaces';
-import { Action } from '../../../utility/interfaces';
+import type { ClassNameProps } from '../../../styles/classnames/interfaces';
+import { ActionObject } from '../../../utility/interfaces';
 export interface ActionListClassNames {
     root: string;
     item: string;
 }
-export interface ActionListProps extends ClassNameProps<ActionListClassNames> {
-    actions: (Action | null)[];
+export interface ActionListProps<Data, Response> extends ClassNameProps<ActionListClassNames> {
+    actions: (ActionObject<Data, Response> | null)[];
     isLoading?: boolean;
 }
-declare function ActionList({ actions, classNameProps, classNames, isLoading, }: Readonly<ActionListProps>): React.ReactElement;
+declare function ActionList<Data, Response>({ actions, classNameProps, classNames, isLoading, }: Readonly<ActionListProps<Data, Response>>): React.ReactElement;
 export default ActionList;

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

@@ -1,9 +1,11 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { filterNull } from '@sqrzro/utility';
 import ActionButton from '../../../components/buttons/ActionButton';
-import { getClassNames } from '../../../styles/config';
+import { useClassNames } from '../../../styles/context';
 function ActionList({ actions, classNameProps, classNames, isLoading, }) {
-    const componentClassNames = classNames || getClassNames('actionList')?.(classNameProps);
-    return (_jsx("ul", { className: componentClassNames?.root, children: filterNull(actions).map((action, index) => (_jsx("li", { className: componentClassNames?.item, children: _jsx(ActionButton, { ...action, isLoading: Boolean(isLoading || action.isDisabled) }) }, index))) }));
+    const componentClassNames = useClassNames('actionList', { props: classNameProps }, classNames);
+    const filteredActions = filterNull(actions);
+    return (_jsx("ul", { className: componentClassNames?.root, children: filteredActions.map((action, index) => (_jsx("li", { className: componentClassNames?.item, children: _jsx(ActionButton, { ...action, isLoading: Boolean(isLoading || action.isLoading) }) }, index))) }));
 }
 export default ActionList;

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

@@ -0,0 +1,5 @@
+export interface AppBodyProps {
+    readonly children: React.ReactNode;
+}
+declare function AppBody({ children }: AppBodyProps): React.ReactElement;
+export default AppBody;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import Toaster from '../../../components/utility/Toaster';
+function AppBody({ children }) {
+    return (_jsxs(Fragment, { children: [_jsx("script", { dangerouslySetInnerHTML: {
+                    __html: "(function(d){var v=d.createElement('div'),t=d.createElement('style'),s=v.style;s.overflowY='scroll';s.width='50';s.height='50';d.body.append(v);t.innerHTML='body:has([data-modal][open]){padding-right:'+(v.offsetWidth-v.clientWidth)+'px}';d.body.append(t);v.remove()}(document))",
+                } }), _jsxs("div", { className: "flex min-h-screen flex-col", children: [children, _jsx(Toaster, {})] })] }));
+}
+export default AppBody;

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

@@ -0,0 +1,32 @@
+import { ClassNameProps } from '../../../styles/classnames/interfaces';
+export interface CalendarClassNames {
+    root: string;
+    header: string;
+    title: string;
+    navigation: string;
+    month: string;
+    control: string;
+    head: string;
+    day: string;
+}
+interface BaseCalendarProps extends ClassNameProps<CalendarClassNames> {
+    disabledDates?: Date[] | ((date: Date) => boolean);
+}
+interface CalendarPropsWithoutRange extends BaseCalendarProps {
+    isRange?: false;
+    onChange?: (date: Date | null) => void;
+    value?: Date | null;
+}
+interface CalendarPropsWithRange extends BaseCalendarProps {
+    isRange: true;
+    onChange?: (date: [Date, Date] | null) => void;
+    value?: [Date, Date] | null;
+}
+export interface CalendarProps extends BaseCalendarProps {
+    isRange?: boolean;
+    onChange?: ((date: Date | null) => void) | ((date: [Date, Date] | null) => void);
+    value?: Date | [Date, Date] | null;
+}
+declare function Calendar(props: CalendarPropsWithRange): React.ReactElement;
+declare function Calendar(props: CalendarPropsWithoutRange): React.ReactElement;
+export default Calendar;

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

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import tw from '../../../styles/classnames/utility/tw';
+import getDays from '../../../utility/get-days';
+import getDateState from '../../../utility/get-date-state';
+import getWeeks from '../../../utility/get-weeks';
+import CalendarDay from '../CalendarDay';
+import { useClassNames, useIcon } from '../../../styles/context';
+function sortDates(dates) {
+    return dates[0] > dates[1] ? [dates[1], dates[0]] : [dates[0], dates[1]];
+}
+function makeValidDate(date) {
+    if (date.toString() === 'Invalid Date') {
+        return new Date();
+    }
+    return new Date(date);
+}
+function getActiveDate(value) {
+    if (!value || (Array.isArray(value) && !value.length)) {
+        return new Date();
+    }
+    return makeValidDate(Array.isArray(value) ? value[0] : value);
+}
+function Calendar({ classNameProps, classNames, isRange, onChange, value, }) {
+    const componentClassNames = useClassNames('calendar', { props: classNameProps }, classNames);
+    const NextIcon = useIcon('calendar.next');
+    const PreviousIcon = useIcon('calendar.previous');
+    const [date, setDate] = useState(getActiveDate(value));
+    /*
+     * `pendingValue` is used when the BaseCalendar takes a date range, to select the first date in
+     * the range without affecting the onChange handlers or anything higher up the chain. Only when
+     * the second date has been selected will the handlers fire.
+     */
+    const [pendingValue, setPendingValue] = useState(null);
+    function handleMonth(offset) {
+        const newDate = new Date(date);
+        newDate.setDate(1);
+        newDate.setMonth(date.getMonth() + offset);
+        setDate(newDate);
+    }
+    function handlePrevious() {
+        handleMonth(-1);
+    }
+    function handleNext() {
+        handleMonth(1);
+    }
+    function handleChange(date) {
+        if (!onChange) {
+            return;
+        }
+        if (!isRange) {
+            onChange(date);
+            return;
+        }
+        if (pendingValue) {
+            onChange(sortDates([pendingValue, date]));
+            setPendingValue(null);
+            return;
+        }
+        onChange(null);
+        setPendingValue(date);
+    }
+    return (_jsxs("div", { className: componentClassNames?.root, children: [_jsxs("div", { className: componentClassNames?.header, children: [_jsx("p", { className: componentClassNames?.title, children: new Intl.DateTimeFormat('en-GB', { month: 'long', year: 'numeric' }).format(date) }), _jsx("button", { className: componentClassNames?.navigation, onClick: handlePrevious, type: "button", children: PreviousIcon ? (_jsxs(Fragment, { children: [_jsx(PreviousIcon, {}), _jsx("span", { className: "sr-only", children: "Previous" })] })) : ('Previous') }), _jsx("button", { className: componentClassNames?.navigation, onClick: handleNext, type: "button", children: NextIcon ? (_jsxs(Fragment, { children: [_jsx(NextIcon, {}), _jsx("span", { className: "sr-only", children: "Next" })] })) : ('Next') })] }), _jsxs("table", { className: tw('w-full', componentClassNames?.month), children: [_jsx("thead", { children: _jsx("tr", { children: getDays().map((item) => (_jsx("th", { className: componentClassNames?.head, children: item }, item))) }) }), _jsx("tbody", { children: getWeeks(date).map((days) => (_jsx("tr", { children: days.map((day, index) => (_jsx(CalendarDay, { date: day, state: getDateState(day, pendingValue, value), onClick: handleChange }, day ? day.toString() : index))) }, days.map((d) => d?.toString()).join('-')))) })] })] }));
+}
+export default Calendar;

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

@@ -0,0 +1,11 @@
+import { ClassNameProps } from '../../../styles/classnames/interfaces';
+import type { DateState } from '../../../utility/get-date-state';
+import type { CalendarClassNames } from '../Calendar';
+interface CalendarDayProps extends ClassNameProps<CalendarClassNames> {
+    date: Date | null;
+    onClick?: (date: Date) => void;
+    isDisabled?: boolean;
+    state: DateState;
+}
+declare function CalendarDay({ classNames, classNameProps, date, isDisabled, onClick, state, }: Readonly<CalendarDayProps>): React.ReactElement;
+export default CalendarDay;

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

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useClassNames } from '../../../styles/context';
+function CalendarDay({ classNames, classNameProps, date, isDisabled, onClick, state, }) {
+    const componentClassNames = useClassNames('calendar', {
+        props: {
+            ...classNameProps,
+            ...state,
+        },
+    }, classNames);
+    if (date === null) {
+        return _jsx("td", { className: componentClassNames?.day });
+    }
+    function handleClick() {
+        if (onClick && date instanceof Date) {
+            onClick(date);
+        }
+    }
+    const day = new Intl.DateTimeFormat('en-GB', { day: 'numeric' }).format(date);
+    return (_jsx("td", { className: componentClassNames?.day, children: _jsx("button", { className: componentClassNames?.control, disabled: isDisabled, onClick: handleClick, type: "button", children: _jsx("span", { children: day }) }) }));
+}
+export default CalendarDay;

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

@@ -0,0 +1,9 @@
+import { ButtonProps } from '../../../components/buttons/Button';
+import type { ConfirmableObject } from '../../../utility/interfaces';
+export interface ConfirmableProps<Data, Response> {
+    confirmable: ConfirmableObject<Data, Response>;
+    renderProps: ButtonProps;
+    render: (props: ButtonProps) => React.ReactElement;
+}
+declare function Confirmable<Data, Response>({ confirmable, renderProps, render, }: Readonly<ConfirmableProps<Data, Response>>): React.ReactElement;
+export default Confirmable;

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

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import useConfirmable from '../../../hooks/useConfirmable';
+import ConfirmModal from '../../modals/ConfirmModal';
+function Confirmable({ confirmable, renderProps, render, }) {
+    const { handle, isOpen, modalProps } = useConfirmable({
+        isLoading: renderProps.isLoading,
+        onConfirm: (event) => renderProps.onClick?.(event),
+        refreshOnSuccess: true,
+    });
+    return (_jsxs(Fragment, { children: [render({ ...renderProps, isLoading: renderProps.isLoading, onClick: handle }), isOpen ? _jsx(ConfirmModal, { confirmable: confirmable, ...modalProps }) : null] }));
+}
+export default Confirmable;

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

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

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

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getClassNames } from '../../../styles/config';
+import { useClassNames } from '../../../styles/context';
 function Container({ children, classNameProps, classNames, }) {
-    const componentClassNames = classNames || getClassNames('container')?.(classNameProps);
+    const componentClassNames = useClassNames('container', { props: classNameProps }, classNames);
     return _jsx("div", { className: componentClassNames?.root, children: children });
 }
 export default Container;

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

@@ -1,4 +1,4 @@
-import type { ClassNameProps, SizableClassName } from '../../../styles/interfaces';
+import type { ClassNameProps, SizableClassName } from '../../../styles/classnames/interfaces';
 export interface LoaderClassNames {
     root?: SizableClassName;
     inner?: SizableClassName;