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

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

@@ -0,0 +1,57 @@
+import type { Action, StyleVariant } from '../../utility/interfaces';
+export interface CollectionFunctionConfig<Filters = null> {
+    filters?: Partial<Filters> | null;
+    params?: Record<string, string> | null;
+    page?: number | null;
+}
+export type ListFunctionConfig<Filters = null> = CollectionFunctionConfig<Filters>;
+export interface ListItemObject<Data extends object | null = null> {
+    $data?: Data;
+    actions?: Action[];
+    description?: React.ReactNode | null;
+    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;
+        variant?: StyleVariant | 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 interface TableColumnObject {
+    isSortable?: boolean;
+    id: string;
+    title?: string;
+    type?: TableColumnType;
+}
+export interface Paginated<T> {
+    data: T[];
+    meta: {
+        limit: number;
+        page: number;
+        total: number;
+    };
+}

package/dist/components/collections/interfaces.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+export declare const messages: {
+    EMPTY_FILTER_DESCRIPTION: string;
+    EMPTY_FILTER_TITLE: string;
+};

package/dist/components/collections/lang.js

@@ -0,0 +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_TITLE: 'No results match the current filters',
+};

package/dist/components/collections/utility/filter-columns.d.ts

@@ -0,0 +1,3 @@
+import type { TableColumnObject } from '../interfaces';
+declare function filterColumns(columns: TableColumnObject[], isSelectable?: boolean): TableColumnObject[];
+export default filterColumns;

package/dist/components/collections/utility/filter-columns.js

@@ -0,0 +1,8 @@
+function filterColumns(columns, isSelectable) {
+    const filtered = columns.filter((column) => column.type !== 'id');
+    if (isSelectable) {
+        return [{ id: 'select', type: 'selectable' }, ...filtered];
+    }
+    return filtered;
+}
+export default filterColumns;

package/dist/components/collections/utility/get-selected-from-search-params.d.ts

@@ -0,0 +1,2 @@
+declare function getSelectedFromSearchParams(searchParams: URLSearchParams): string[];
+export default getSelectedFromSearchParams;

package/dist/components/collections/utility/get-selected-from-search-params.js

@@ -0,0 +1,5 @@
+function getSelectedFromSearchParams(searchParams) {
+    const selected = searchParams.get('selected');
+    return selected ? selected.split('|') : [];
+}
+export default getSelectedFromSearchParams;

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

@@ -0,0 +1,3 @@
+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-paginated.js

@@ -0,0 +1,4 @@
+function isPaginated(response) {
+    return typeof response === 'object' && 'data' in response && 'meta' in response;
+}
+export default isPaginated;

package/dist/components/collections/utility/set-selected-to-search-params.d.ts

@@ -0,0 +1,2 @@
+declare function setSelectedToSearchParams(selected: string[]): string;
+export default setSelectedToSearchParams;

package/dist/components/collections/utility/set-selected-to-search-params.js

@@ -0,0 +1,4 @@
+function setSelectedToSearchParams(selected) {
+    return selected.join('|');
+}
+export default setSelectedToSearchParams;

package/dist/components/index.d.ts

@@ -0,0 +1,16 @@
+export * from './collections/interfaces';
+export { default as ActionButton } from './buttons/ActionButton';
+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 { 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 { RootLayoutProps } from './utility/RootLayout';
+export { default as RootLayout } from './utility/RootLayout';

package/dist/components/index.js

@@ -0,0 +1,9 @@
+export * from './collections/interfaces';
+export { default as ActionButton } from './buttons/ActionButton';
+export { default as List } from './collections/List';
+export { default as Table } from './collections/Table';
+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 RootLayout } from './utility/RootLayout';

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

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

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

@@ -0,0 +1,23 @@
+'use client';
+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 }) {
+    const [confirmText, setConfirmText] = useState('');
+    function handleChange(event) {
+        setConfirmText(event.target.value?.toUpperCase() || '');
+    }
+    return (_jsxs(Modal, { ...modalProps, actions: [
+            { label: 'Cancel', variant: 'link' },
+            ...(confirmable.actions || []),
+            {
+                isDisabled: Boolean(confirmable.confirmText &&
+                    confirmText !== confirmable.confirmText.toUpperCase()),
+                label: confirmable.submitLabel || 'Confirm',
+                onClick: confirmable.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] }));
+}
+export default ConfirmModal;

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

@@ -0,0 +1,19 @@
+import type { ClassNameProps } from '../../../styles/interfaces';
+import { Action } from '../../../utility/interfaces';
+export interface ModalClassNames {
+    actions: string;
+    content: string;
+    icon: string;
+    panel: string;
+    root: string;
+    title: string;
+}
+export interface ModalProps extends ClassNameProps<ModalClassNames> {
+    actions?: Action[];
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    isLoading?: boolean;
+    title?: string;
+}
+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

@@ -0,0 +1,17 @@
+'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 ModalActions from '../ModalActions';
+function Modal({ actions, children, classNames, classNameProps, icon, isLoading, title, }) {
+    const componentClassNames = classNames || getClassNames('modal')?.(classNameProps);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.showModal();
+        }
+    }, []);
+    return (_jsx("dialog", { ref: ref, className: tw('m-0 h-full max-h-none w-full max-w-none bg-transparent p-0', componentClassNames?.root), children: _jsxs("div", { className: componentClassNames?.panel, children: [title ? (_jsxs("h3", { className: componentClassNames?.title, children: [icon ? _jsx("span", { className: componentClassNames?.icon, children: icon }) : null, _jsx("span", { children: title })] })) : null, _jsx("div", { className: componentClassNames?.content, children: children }), actions ? (_jsx(ModalActions, { actions: actions, classNameProps: classNameProps, isLoading: isLoading })) : null] }) }));
+}
+export default Modal;

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

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

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ActionList from '../../../components/utility/ActionList';
+import { getClassNames } from '../../../styles/config';
+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 }) }));
+}
+export default ModalActions;

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

@@ -0,0 +1,5 @@
+export interface ModalLauncherProps {
+    readonly data: Record<string, React.ReactElement>;
+}
+declare function ModalLauncher(props: ModalLauncherProps): React.ReactElement;
+export default ModalLauncher;

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

@@ -0,0 +1,14 @@
+/* eslint-disable react/no-multi-comp */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { useSearchParams } from 'next/navigation';
+function ModalLauncherComponent({ data }) {
+    const searchParams = useSearchParams();
+    const action = searchParams.get('action');
+    return action && action in data ? data[action] : null;
+}
+function ModalLauncher(props) {
+    return (_jsx(Suspense, { children: _jsx(ModalLauncherComponent, { ...props }) }));
+}
+export default ModalLauncher;

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { filterNull } from '@sqrzro/utility';
+import ActionButton from '../../../components/buttons/ActionButton';
+import { getClassNames } from '../../../styles/config';
+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))) }));
+}
+export default ActionList;

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

@@ -0,0 +1,8 @@
+export interface AssistiveProps {
+    children: React.ReactNode;
+}
+/**
+ * Assistive
+ */
+declare function Assistive({ children }: Readonly<AssistiveProps>): React.ReactElement;
+export default Assistive;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Assistive
+ */
+function Assistive({ children }) {
+    return _jsx("span", { className: "sr-only", children: children });
+}
+export default Assistive;

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

@@ -0,0 +1,6 @@
+import type { RegisteredClassNames } from '../../../styles/config';
+export interface ClassNamesProps {
+    data: RegisteredClassNames;
+}
+declare function ClassNames({ data }: Readonly<ClassNamesProps>): null;
+export default ClassNames;

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

@@ -0,0 +1,7 @@
+'use client';
+import { registerClassNames } from '../../../styles/config';
+function ClassNames({ data }) {
+    registerClassNames(data);
+    return null;
+}
+export default ClassNames;

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

@@ -0,0 +1,9 @@
+import type { ClassNameProps } from '../../../styles/interfaces';
+export interface ContainerClassNames {
+    root: string;
+}
+export interface ContainerProps extends ClassNameProps<ContainerClassNames> {
+    children: React.ReactNode;
+}
+declare function Container({ children, classNameProps, classNames, }: Readonly<ContainerProps>): React.ReactElement;
+export default Container;

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

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

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

@@ -0,0 +1,19 @@
+import type { ClassNameProps } from '../../../styles/interfaces';
+interface DataProps {
+    'data-test-id'?: string;
+}
+export interface LinkClassNames {
+    root: string;
+}
+export interface LinkProps extends ClassNameProps<LinkClassNames>, DataProps {
+    className?: string;
+    children: React.ReactNode;
+    href?: string | null;
+    id?: string;
+    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;
+export default Link;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NextLink from 'next/link';
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+function normalizeHref(href) {
+    if (!href) {
+        return '';
+    }
+    if (href.startsWith('#')) {
+        return href;
+    }
+    return /^\//u.exec(href) ? href : `/${href}`;
+}
+function Link({ children, className, classNames, classNameProps, isNewWindow, href = '/', id, onClick, scroll, style, ...dataProps }) {
+    const componentClassNames = classNames || getClassNames('link')?.(classNameProps);
+    const newWindowProps = isNewWindow
+        ? { rel: 'noopener noreferrer', target: '_blank' }
+        : {};
+    const props = {
+        ...newWindowProps,
+        ...dataProps,
+        className: tw(componentClassNames?.root, className),
+        id,
+        onClick,
+        scroll,
+        style,
+    };
+    if (!href || /^http/u.exec(href) || /^mailto:/u.exec(href) || /^tel:/u.exec(href)) {
+        return (_jsx("a", { ...props, href: href ?? undefined, children: children }));
+    }
+    return (_jsx(NextLink, { ...props, href: normalizeHref(href), children: children }));
+}
+export default Link;

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

@@ -0,0 +1,8 @@
+import type { ClassNameProps, SizableClassName } from '../../../styles/interfaces';
+export interface LoaderClassNames {
+    root?: SizableClassName;
+    inner?: SizableClassName;
+}
+export type LoaderProps = ClassNameProps<LoaderClassNames>;
+declare function Loader({ classNameProps, classNames }: Readonly<LoaderProps>): React.ReactElement;
+export default Loader;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+import Assistive from '../Assistive';
+function Loader({ classNameProps, classNames }) {
+    const componentClassNames = classNames || getClassNames('loader')?.(classNameProps);
+    return (_jsxs("div", { className: tw(componentClassNames?.root?.default), children: [_jsx("div", { className: tw(componentClassNames?.inner?.default) }), _jsx(Assistive, { children: "Loading..." })] }));
+}
+export default Loader;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { NavigationObject } from '../../../navigation/interfaces';
+import type { NextPageProps } from '../../../utility/interfaces';
+interface PageTemplateProps {
+    children: React.ReactNode;
+    tabs: NavigationObject[] | null;
+    title: React.ReactNode;
+}
+export interface PageProps<T> {
+    readonly children: React.ReactNode | ((data: T) => React.ReactNode);
+    readonly fn?: (params?: Promise<Record<string, string>> | null) => Promise<T>;
+    readonly pageProps?: NextPageProps;
+    readonly tabs?: NavigationObject[] | ((data: T) => NavigationObject[] | null);
+    readonly template?: (props: PageTemplateProps) => React.ReactElement;
+    readonly title?: React.ReactNode | ((data: T) => React.ReactNode);
+}
+declare function Page<T>(props: PageProps<T>): React.ReactElement;
+export default Page;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+function getChildren(props, data) {
+    if (typeof props.children === 'function') {
+        return data ? props.children(data) : null;
+    }
+    return props.children;
+}
+function getTabs(props, data) {
+    if (typeof props.tabs === 'function') {
+        return data ? props.tabs(data) : null;
+    }
+    return props.tabs ?? null;
+}
+function getTitle(props, data) {
+    if (typeof props.title === 'function') {
+        return data ? props.title(data) : null;
+    }
+    return props.title;
+}
+async function PageComponent(props) {
+    const data = props.fn ? await props.fn(props.pageProps?.params) : null;
+    const children = getChildren(props, data);
+    const tabs = getTabs(props, data);
+    const title = getTitle(props, data);
+    if (props.template) {
+        return props.template({ children, tabs, 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/utility/Popover/index.d.ts

@@ -0,0 +1,14 @@
+import type { ClassNameProps, FocusableClassName } from '../../../styles/interfaces';
+export interface PopoverClassNames {
+    root: FocusableClassName;
+    scroll: string;
+}
+export interface PopoverProps extends ClassNameProps<PopoverClassNames> {
+    align?: 'center' | 'left' | 'right';
+    children: React.ReactNode;
+    isOpen?: boolean;
+    isScrollable?: boolean;
+    vAlign?: 'top' | 'bottom';
+}
+declare function Popover({ align: initialAlign, children, classNames, classNameProps, isOpen, isScrollable, vAlign: initialVAlign, }: Readonly<PopoverProps>): React.ReactElement;
+export default Popover;

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

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { getClassNames } from '../../../styles/config';
+import tw from '../../../styles/tw';
+const HORIZONTAL_THRESHOLD = 40;
+const VERTICAL_THRESHOLD = 40;
+function getPositionStyles(align = 'left', vAlign = 'top') {
+    if (align === 'left') {
+        return vAlign === 'top'
+            ? 'left-0 origin-bottom-left bottom-full'
+            : 'left-0 origin-top-left  top-full';
+    }
+    if (align === 'right') {
+        return vAlign === 'top'
+            ? 'right-0 origin-bottom-right bottom-full'
+            : 'right-0 origin-top-right top-full';
+    }
+    // If neither left or right, assume it is center
+    return vAlign === 'top'
+        ? 'left-1/2 -translate-x-1/2 origin-bottom bottom-full'
+        : 'left-1/2 -translate-x-1/2 origin-top top-full';
+}
+function Popover({ align: initialAlign = 'left', children, classNames, classNameProps, isOpen, isScrollable, vAlign: initialVAlign = 'bottom', }) {
+    const componentClassNames = classNames || getClassNames('popover')?.(classNameProps);
+    const [align, setAlign] = useState(initialAlign);
+    const [vAlign, setVAlign] = useState(initialVAlign);
+    const ref = useRef(null);
+    const shadowRef = useRef(null);
+    function initShadow() {
+        if (shadowRef.current) {
+            return;
+        }
+        shadowRef.current = document.createElement('div');
+        shadowRef.current.classList = ref.current?.classList.value || '';
+        shadowRef.current.style.height = `${ref.current?.offsetHeight}px`;
+        shadowRef.current.style.width = `${ref.current?.offsetWidth}px`;
+        shadowRef.current.style.pointerEvents = 'none';
+        ref.current?.parentElement?.appendChild(shadowRef.current);
+    }
+    function handleResize() {
+        const rect = shadowRef.current?.getBoundingClientRect();
+        if ((rect?.right || 0) > window.innerWidth - HORIZONTAL_THRESHOLD) {
+            setAlign('right');
+        }
+        else {
+            setAlign(initialAlign);
+        }
+        if ((rect?.bottom || 0) > window.innerHeight - VERTICAL_THRESHOLD &&
+            (rect?.top || 0) - (rect?.height || 0) > VERTICAL_THRESHOLD) {
+            setVAlign('top');
+        }
+        else {
+            setVAlign(initialVAlign);
+        }
+    }
+    useEffect(() => {
+        setTimeout(() => {
+            initShadow();
+            handleResize();
+        }, 1);
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleResize);
+        };
+    }, []);
+    return (_jsx("div", { ref: ref, className: tw('absolute', getPositionStyles(align, vAlign), componentClassNames?.root?.default, isOpen ? componentClassNames?.root?.focused : null), style: { display: isOpen ? 'block' : 'none' }, children: isScrollable ? (_jsx("div", { className: componentClassNames?.scroll, children: children })) : (children) }));
+}
+export default Popover;

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

@@ -0,0 +1,12 @@
+import { type RegisteredClassNames } from '../../../styles/config';
+import type { ClassNameProps } from '../../../styles/interfaces';
+export interface RootLayoutClassNames {
+    root: string;
+    content: string;
+}
+export interface RootLayoutProps extends ClassNameProps<RootLayoutClassNames> {
+    readonly children: React.ReactNode;
+    readonly classNameConfig?: RegisteredClassNames;
+}
+declare function RootLayout({ children, classNameConfig, classNameProps, classNames, }: RootLayoutProps): React.ReactElement;
+export default RootLayout;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassNames, registerClassNames } from '../../../styles/config';
+import ClassNames from '../ClassNames';
+import Toaster from '../Toaster';
+function RootLayout({ children, classNameConfig, classNameProps, classNames, }) {
+    if (classNameConfig) {
+        registerClassNames(classNameConfig);
+    }
+    const componentClassNames = classNames || getClassNames('rootLayout')?.(classNameProps);
+    return (_jsxs("html", { lang: "en", children: [_jsx("head", { children: _jsx("link", { href: "/images/favicon.svg", rel: "icon" }) }), _jsxs("body", { className: componentClassNames?.root, 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))",
+                        } }), classNameConfig ? _jsx(ClassNames, { data: classNameConfig }) : null, _jsx("div", { className: componentClassNames?.content, children: children }), _jsx(Toaster, {})] })] }));
+}
+export default RootLayout;

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

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

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

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClassNames } from '../../../styles/config';
+function Toast({ children, classNames, classNameProps, }) {
+    const componentClassNames = classNames || getClassNames('toast')?.(classNameProps);
+    if (!children) {
+        return null;
+    }
+    return _jsx("dialog", { open: true, children: children });
+}
+export default Toast;

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

@@ -0,0 +1,8 @@
+import type { ToastProps } from '../Toast';
+interface ToasterProps {
+    channel?: string;
+    duration?: number;
+    render?: (props: ToastProps) => React.ReactElement | null;
+}
+declare function Toaster(props: Readonly<ToasterProps>): React.ReactElement | null;
+export default Toaster;