@stack-spot/citric-react 0.1.0

package/dist/components/Accordion.d.ts

@@ -0,0 +1,33 @@
+import { HTMLExtension } from '../types.js';
+export interface BaseAccordionProps {
+    /**
+     * A unique id for this accordion.
+     */
+    id?: string;
+    /**
+     * The Accordion's appearance. If unset, the appearance is customizable.
+     */
+    appearance?: 'card';
+    /**
+     * Controls the expansion state of the accordion.
+     */
+    expanded?: boolean;
+    /**
+     * Controls the expansion state of the accordion. Called when the accordion is expanded or collapsed.
+     */
+    onChange?: (expanded: boolean) => void;
+    /**
+     * The header for the accordion, i.e. the part that is always rendered. You can use either a simple title or a custom set of components,
+     * in the second case, you may pass a function that receives the "expand/collapse" button as parameter.
+     */
+    header: React.ReactNode | ((expandButton: React.ReactElement) => React.ReactNode);
+    /**
+     * The maximum height for the accordion.
+     *
+     * @default 300
+     */
+    maxHeight?: number;
+}
+export type AccordionProps = HTMLExtension<'div', BaseAccordionProps, 'onChange'>;
+export declare const Accordion: ({ id, appearance, expanded, onChange, header, maxHeight, className, style, children, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAIxC,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,MAAM,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClF;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,KAAK,EAAE,kBAAkB,EAAE,UAAU,CAAC,CAAA;AAEjF,eAAO,MAAM,SAAS,GACpB,iGAAuG,cAAc,4CAkCtH,CAAA"}

package/dist/components/Accordion.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useEffect, useMemo, useState } from 'react';
+import { applyCSSVariable } from '../utils/css.js';
+import { CitricComponent } from './CitricComponent.js';
+export const Accordion = ({ id, appearance, expanded, onChange, header, maxHeight = 300, className, style, children, ...props }) => {
+    const [ariaHidden, setAriaHidden] = useState(!expanded);
+    const accordionId = useMemo(() => id || `${Math.random()}`, [id]);
+    useEffect(() => {
+        setAriaHidden(!expanded);
+    }, [expanded]);
+    const expandBtn = _jsx("input", { type: "checkbox", checked: expanded, onChange: () => {
+            setAriaHidden(!ariaHidden);
+            onChange?.(!expanded);
+        }, onKeyDown: e => e.key === 'Enter' && e.target.click?.(), "aria-controls": accordionId });
+    const headerContent = typeof header === 'function' ? header(expandBtn) : _jsxs("label", { children: [header, expandBtn] });
+    return (_jsxs(CitricComponent, { tag: "div", component: "accordion", className: listToClass([appearance, className]), style: applyCSSVariable(style, 'max-height', `${maxHeight}px`), ...props, children: [_jsx("header", { children: headerContent }), _jsx("section", { id: accordionId, "aria-hidden": ariaHidden, ...(ariaHidden ? { inert: 'true' } : {}), children: appearance === 'card' ? _jsx("div", { className: "content", children: children }) : children })] }));
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAkCnD,MAAM,CAAC,MAAM,SAAS,GAAG,CACvB,EAAE,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EACrH,EAAE;IACF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;IACvD,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAEjE,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,SAAS,GAAG,gBAChB,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,GAAG,EAAE;YACb,aAAa,CAAC,CAAC,UAAU,CAAC,CAAA;YAC1B,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAA;QACvB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAK,CAAC,CAAC,MAAsB,CAAC,KAAK,EAAE,EAAE,mBACzD,WAAW,GAC1B,CAAA;IACF,MAAM,aAAa,GAAG,OAAO,MAAM,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,4BAAQ,MAAM,EAAE,SAAS,IAAS,CAAA;IAC3G,OAAO,CACL,MAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,WAAW,EACrB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAC/C,KAAK,EAAE,gBAAgB,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,IAAI,CAAC,KAC1D,KAAK,aAET,2BAAS,aAAa,GAAU,EAChC,kBAAS,EAAE,EAAE,WAAW,iBAAe,UAAU,KAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YACzF,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,SAAS,YAAE,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,GACrE,IACM,CACnB,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Alert.d.ts

@@ -0,0 +1,11 @@
+import { HTMLExtension } from '../types.js';
+export interface BaseAlertProps {
+    /**
+     * Type of the message.
+     * @default 'warning'
+     */
+    type?: 'error' | 'info' | 'warning';
+}
+export type AlertProps = HTMLExtension<'div', BaseAlertProps>;
+export declare const Alert: ({ type, className, children, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAGxC,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,CAAA;AAE7D,eAAO,MAAM,KAAK,GAAI,yCAAyC,UAAU,4CACwD,CAAA"}

package/dist/components/Alert.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { CitricComponent } from './CitricComponent.js';
+export const Alert = ({ type, className, children, ...props }) => _jsx(CitricComponent, { tag: "div", component: "alert", className: listToClass([type, className]), ...props, children: children });
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/components/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAYnD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE,CAC3E,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,YAAG,QAAQ,GAAmB,CAAA"}

package/dist/components/AsyncContent.d.ts

@@ -0,0 +1,30 @@
+import { MutableRefObject } from 'react';
+interface Props {
+    /**
+     * Whether or not to show the loading feedback.
+     */
+    loading: boolean;
+    /**
+     * A javascript error. Used to show error feedbacks.
+     */
+    error?: any;
+    /**
+     * If provided, this element will receive focus as soon as the content is loaded and has no errors.
+     * Can be either a React Ref Object or a query selector.
+     */
+    autofocus?: string | MutableRefObject<HTMLElement>;
+    /**
+     * The content to show if it's not loading or has errors.
+     */
+    children: React.ReactNode;
+}
+/**
+ * Renders a component that provides user feedback on async requests.
+ * It renders either a loading component, an error component (which is received as prop)
+ * or the received children props.
+ *
+ * @param options the props for rendering the component: {@link Props}.
+ */
+export declare const AsyncContent: ({ loading, error, autofocus, children }: Props) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};
+//# sourceMappingURL=AsyncContent.d.ts.map

package/dist/components/AsyncContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncContent.d.ts","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,OAAO,CAAA;AAKpE,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;GAMG;AAEH,eAAO,MAAM,YAAY,GAAI,yCAAyC,KAAK,iIAoB1E,CAAA"}

package/dist/components/AsyncContent.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect } from 'react';
+import { useCitricController } from '../context/hooks.js';
+import { ErrorMessage } from './ErrorMessage.js';
+import { LoadingPanel } from './LoadingPanel.js';
+/**
+ * Renders a component that provides user feedback on async requests.
+ * It renders either a loading component, an error component (which is received as prop)
+ * or the received children props.
+ *
+ * @param options the props for rendering the component: {@link Props}.
+ */
+export const AsyncContent = ({ loading, error, autofocus, children }) => {
+    const citric = useCitricController();
+    useEffect(() => {
+        if (error) {
+            citric?.onError?.(error);
+            // eslint-disable-next-line no-console
+            console.error(error);
+        }
+    }, [error]);
+    useLayoutEffect(() => {
+        if (!loading && !error) {
+            typeof autofocus === 'string' ? document.querySelector(autofocus)?.focus?.() : autofocus?.current?.focus();
+        }
+    }, [loading, error]);
+    if (loading)
+        return _jsx(LoadingPanel, {});
+    if (error)
+        return citric?.renderError ? citric.renderError(error) : _jsx(ErrorMessage, { error: error });
+    return children;
+};
+//# sourceMappingURL=AsyncContent.js.map

package/dist/components/AsyncContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncContent.js","sourceRoot":"","sources":["../../src/components/AsyncContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAoB,SAAS,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAsB7C;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC7E,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IAEpC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;YACxB,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACvB,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAE,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAiB,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA;QAC7H,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,IAAI,OAAO;QAAE,OAAO,KAAC,YAAY,KAAG,CAAA;IACpC,IAAI,KAAK;QAAE,OAAO,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,CAAA;IAClG,OAAO,QAAQ,CAAA;AACjB,CAAC,CAAA"}

package/dist/components/Avatar.d.ts

@@ -0,0 +1,22 @@
+import { HTMLExtension, WithColorPalette } from '../types.js';
+export interface BaseAvatarProps extends WithColorPalette {
+    /**
+     * @default 'lg'
+     */
+    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * This name will be reduced to a maximum of 2 capital letters (first letter of each word).
+     */
+    name?: string;
+    /**
+     * @default 'circle'
+     */
+    appearance?: 'square' | 'circle';
+    /**
+     * If instead of the name you want to use an image, this should be the image's url.
+     */
+    image?: string;
+}
+export type AvatarProps = HTMLExtension<'div', BaseAvatarProps, 'children'>;
+export declare const Avatar: ({ size, name, appearance, className, image, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAG1D,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACvD;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,WAAW,GAAG,aAAa,CAAC,KAAK,EAAE,eAAe,EAAE,UAAU,CAAC,CAAA;AAE3E,eAAO,MAAM,MAAM,GAAI,wDAAwD,WAAW,4CAQzF,CAAA"}

package/dist/components/Avatar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { CitricComponent } from './CitricComponent.js';
+export const Avatar = ({ size, name, appearance, className, image, ...props }) => {
+    const parts = name?.split(' ') ?? [''];
+    const acronym = parts.length >= 2 ? `${parts[0][0]}${parts[1][0]}` : parts[0][0];
+    return (_jsx(CitricComponent, { tag: "div", component: "avatar", className: listToClass([size, appearance, className]), ...props, children: image ? _jsx("img", { src: image }) : acronym }));
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../src/components/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAuBnD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE;IAC5F,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;IACtC,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAChF,OAAO,CACL,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,YAC3G,KAAK,CAAC,CAAC,CAAC,cAAK,GAAG,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,OAAO,GACtB,CACnB,CAAA;AACH,CAAC,CAAA"}

package/dist/components/AvatarGroup.d.ts

@@ -0,0 +1,25 @@
+import { HTMLExtension, WithColorPalette } from '../types.js';
+export interface BaseAvatarGroupProps extends WithColorPalette {
+    /**
+     * @default 'lg'
+     */
+    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * @default 'circle'
+     */
+    appearance?: 'square' | 'circle';
+    /**
+     * The avatars in the group. Use "image" for rendering images instead of the avatar.
+     */
+    items: {
+        name?: string;
+        image?: string;
+    }[];
+    /**
+     * A maximum number of avatars to show in the group.
+     **/
+    maxItems?: number;
+}
+export type AvatarGroupProps = HTMLExtension<'div', BaseAvatarGroupProps, 'children'>;
+export declare const AvatarGroup: ({ size, items, appearance, maxItems, className, ...props }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AvatarGroup.d.ts.map

package/dist/components/AvatarGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.d.ts","sourceRoot":"","sources":["../../src/components/AvatarGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAI1D,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC5D;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;OAEG;IACH,KAAK,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC3C;;QAEI;IACJ,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,gBAAgB,GAAG,aAAa,CAAC,KAAK,EAAE,oBAAoB,EAAE,UAAU,CAAC,CAAA;AAErF,eAAO,MAAM,WAAW,GAAI,4DAA4D,gBAAgB,4CAavG,CAAA"}

package/dist/components/AvatarGroup.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { Avatar } from './Avatar.js';
+import { CitricComponent } from './CitricComponent.js';
+export const AvatarGroup = ({ size, items, appearance, maxItems, className, ...props }) => {
+    const avatars = items.map(({ name, image }) => _jsx(Avatar, { name: name, image: image }, name), [items]);
+    return (_jsx(CitricComponent, { tag: "div", component: "avatar-group", className: listToClass([size, appearance, className]), "data-max-items": maxItems, ...props, children: avatars }));
+};
+//# sourceMappingURL=AvatarGroup.js.map

package/dist/components/AvatarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../src/components/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAuBnD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE;IAC1G,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAC,MAAM,IAAY,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAA9B,IAAI,CAA8B,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IACxG,OAAO,CACL,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,oBACrC,QAAQ,KACpB,KAAK,YAER,OAAO,GACQ,CACnB,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Badge.d.ts

@@ -0,0 +1,18 @@
+import { HTMLExtension, WithColorPalette } from '../types.js';
+type ValidTags = 'a' | 'button' | 'li' | 'div' | 'span';
+export interface BaseBadgeProps<T extends ValidTags = ValidTags> extends WithColorPalette {
+    /**
+     * @default 'div'
+     */
+    tag?: T;
+    /**
+     * Determines how round the corners are.
+     *
+     * @default 'circle'
+     */
+    appearance?: 'square' | 'circle';
+}
+export type BadgeProps<T extends ValidTags> = HTMLExtension<T, BaseBadgeProps<T>>;
+export declare function Badge<T extends ValidTags>({ tag, appearance, className, children, ...props }: BadgeProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAG1D,KAAK,SAAS,GAAG,GAAG,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAA;AAEvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS,CAAE,SAAQ,gBAAgB;IACvF;;OAEG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;;OAIG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAClC;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,SAAS,IAAI,aAAa,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AAEjF,wBAAgB,KAAK,CAAC,CAAC,SAAS,SAAS,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,2CAM3G"}

package/dist/components/Badge.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { CitricComponent } from './CitricComponent.js';
+export function Badge({ tag, appearance, className, children, ...props }) {
+    return (_jsx(CitricComponent, { tag: tag || 'div', component: "badge", className: listToClass([appearance, className]), ...props, children: children }));
+}
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAmBnD,MAAM,UAAU,KAAK,CAAsB,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB;IAC1G,OAAO,CACL,KAAC,eAAe,IAAC,GAAG,EAAE,GAAG,IAAI,KAAK,EAAE,SAAS,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,KAAM,KAAY,YACpH,QAAQ,GACO,CACnB,CAAA;AACH,CAAC"}

package/dist/components/Blockquote.d.ts

@@ -0,0 +1,5 @@
+import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types.js';
+export type BaseBlockquoteProps = WithColorScheme & WithColorPalette;
+export type BlockquoteProps = HTMLExtension<'blockquote', BaseBlockquoteProps>;
+export declare const Blockquote: ({ children, ...props }: BlockquoteProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Blockquote.d.ts.map

package/dist/components/Blockquote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Blockquote.d.ts","sourceRoot":"","sources":["../../src/components/Blockquote.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG3E,MAAM,MAAM,mBAAmB,GAAG,eAAe,GAAG,gBAAgB,CAAA;AAEpE,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAA;AAE9E,eAAO,MAAM,UAAU,GAAI,wBAAwB,eAAe,4CACgC,CAAA"}

package/dist/components/Blockquote.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CitricComponent } from './CitricComponent.js';
+export const Blockquote = ({ children, ...props }) => _jsx(CitricComponent, { tag: "blockquote", component: "blockquote", ...props, children: children });
+//# sourceMappingURL=Blockquote.js.map

package/dist/components/Blockquote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Blockquote.js","sourceRoot":"","sources":["../../src/components/Blockquote.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAMnD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE,CACpE,KAAC,eAAe,IAAC,GAAG,EAAC,YAAY,EAAC,SAAS,EAAC,YAAY,KAAK,KAAK,YAAG,QAAQ,GAAmB,CAAA"}

package/dist/components/Breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import { HTMLExtension } from '../types.js';
+interface BreadCrumbItem {
+    label: string;
+    href?: string;
+}
+export interface BaseBreadcrumbProps {
+    items: BreadCrumbItem[];
+}
+export type BreadcrumbProps = HTMLExtension<'nav', BaseBreadcrumbProps, 'children'>;
+export declare const Breadcrumb: ({ items, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/components/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../src/components/Breadcrumb.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAGxC,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC,KAAK,EAAE,mBAAmB,EAAE,UAAU,CAAC,CAAA;AAEnF,eAAO,MAAM,UAAU,GAAI,qBAAqB,eAAe,4CAQ9D,CAAA"}

package/dist/components/Breadcrumb.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CitricComponent } from './CitricComponent.js';
+export const Breadcrumb = ({ items, ...props }) => {
+    const children = useMemo(() => items.map((item, index) => item.href ? _jsx("li", { children: _jsx("a", { href: item.href, children: item.label }) }, index) : _jsx("li", { children: item.label }, index)), [items]);
+    return _jsx(CitricComponent, { tag: "nav", component: "breadcrumb", ...props, children: _jsx("ul", { children: children }) });
+};
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../src/components/Breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAanD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE;IACjE,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CACb,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAgB,YAAG,IAAI,EAAE,IAAI,CAAC,IAAI,YAAG,IAAI,CAAC,KAAK,GAAK,IAA3C,KAAK,CAA2C,CAAC,CAAC,CAAC,uBAAiB,IAAI,CAAC,KAAK,IAAlB,KAAK,CAAmB,CAC3H,EACD,CAAC,KAAK,CAAC,CACR,CAAA;IACD,OAAO,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,YAAY,KAAK,KAAK,YAAE,uBAAK,QAAQ,GAAM,GAAkB,CAAA;AAC3G,CAAC,CAAA"}

package/dist/components/Button.d.ts

@@ -0,0 +1,42 @@
+import { HTMLExtension, WithColorScheme } from '../types.js';
+export interface BaseButtonProps extends WithColorScheme {
+    /**
+     * - contained for buttons with background;
+     * - outlined for transparent buttons with borders;
+     * - text for buttons with no borders or background.
+     * @default 'contained'
+     */
+    appearance?: 'outlined' | 'text' | 'contained';
+    /**
+     * Size of the button.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Animated text to show on when the button is clicked.
+     */
+    feedback?: string;
+    /**
+     * Whether or not to show a loading feedback instead of the button's content.
+     *
+     * Buttons in the loading state are also disabled.
+     */
+    loading?: boolean;
+    /**
+     * Function to run when the button is clicked. If this function returns a promise, the button will automatically show a loading feedback
+     * until the promise completes.
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => any;
+    /**
+     * Whether or not a click in this button should generate analytics data.
+     *
+     * This only takes effect if there's a CitricController in React's context. The value of `analytics` is passed to the function
+     * `onClickButton` of the controller.
+     *
+     * @default false
+     */
+    analytics?: boolean;
+}
+export type ButtonProps = HTMLExtension<'button', BaseButtonProps, 'onClick'>;
+export declare const Button: ({ appearance, size, feedback, loading, disabled, onClick, className, children, type, analytics, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAIzD,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,GAAG,CAAC;IAC1E;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,WAAW,GAAG,aAAa,CAAC,QAAQ,EAAE,eAAe,EAAE,SAAS,CAAC,CAAA;AAE7E,eAAO,MAAM,MAAM,GACjB,4GAAuH,WAAW,4CAsCnI,CAAA"}

package/dist/components/Button.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useState } from 'react';
+import { useCitricController } from '../context/hooks.js';
+import { CitricComponent } from './CitricComponent.js';
+import { ProgressCircular } from './ProgressCircular.js';
+export const Button = ({ appearance, size, feedback, loading, disabled, onClick, className, children, type = 'button', analytics, ...props }) => {
+    const citric = useCitricController();
+    const [waiting, setWaiting] = useState(false);
+    const busy = loading || waiting;
+    async function handleClick(e) {
+        const result = onClick?.(e);
+        citric?.onClickButton?.(e, analytics ?? false);
+        if (result instanceof Promise) {
+            setWaiting(true);
+            try {
+                await result;
+            }
+            catch { /* empty */ }
+            setWaiting(false);
+        }
+    }
+    return (_jsxs(CitricComponent, { tag: "button", component: "button", className: listToClass([size, appearance, className]), "data-feedback": feedback, onClick: handleClick, "aria-busy": busy, disabled: disabled || busy, type: type, ...props, children: [busy ? _jsx("div", { children: children }) : children, busy && (_jsx("div", { className: "loader", children: _jsx(ProgressCircular, { size: "sm" }) }))] }));
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AA2CrD,MAAM,CAAC,MAAM,MAAM,GAAG,CACpB,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,GAAG,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAe,EAClI,EAAE;IACF,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAA;IACpC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,IAAI,GAAG,OAAO,IAAI,OAAO,CAAA;IAE/B,KAAK,UAAU,WAAW,CAAC,CAAkD;QAC3E,MAAM,MAAM,GAAG,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QAC3B,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,CAAA;QAC9C,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;YAC9B,UAAU,CAAC,IAAI,CAAC,CAAA;YAChB,IAAI,CAAC;gBACH,MAAM,MAAM,CAAA;YACd,CAAC;YAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;YACvB,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC;IACH,CAAC;IAED,OAAO,CACL,MAAC,eAAe,IACd,GAAG,EAAC,QAAQ,EACZ,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAE,WAAW,CAAC,CAAC,IAAI,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,mBACtC,QAAQ,EACvB,OAAO,EAAE,WAAW,eACT,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,IAAI,EAC1B,IAAI,EAAE,IAAI,KACN,KAAK,aAER,IAAI,CAAC,CAAC,CAAC,wBAAM,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,EACvC,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,gBAAgB,IAAC,IAAI,EAAC,IAAI,GAAG,GAC1B,CACP,IACe,CACnB,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Card.d.ts

@@ -0,0 +1,19 @@
+import { HTMLExtension, WithColorScheme } from '../types.js';
+export interface BaseCardProps extends WithColorScheme {
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * The size of the card.
+     *
+     * @default 'md'
+     */
+    size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * The background color level. The main color will depend on the "colorScheme", which is "light" by default.
+     *
+     * @default 300
+     */
+    bgLevel?: 300 | 400 | 500 | 600;
+}
+export type CardProps = HTMLExtension<'div', BaseCardProps>;
+export declare const Card: ({ onClick, size, bgLevel, className, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Card.d.ts.map

package/dist/components/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAGzD,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC5D;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD;;;;OAIG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,CAAA;AAE3D,eAAO,MAAM,IAAI,GAAI,2DAA2D,SAAS,4CASxF,CAAA"}

package/dist/components/Card.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { CitricComponent } from './CitricComponent.js';
+export const Card = ({ onClick, size, bgLevel, className, children, ...props }) => (_jsx(CitricComponent, { tag: "div", component: "card", className: listToClass([onClick && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]), ...props, children: children }));
+//# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAoBnD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CAC5F,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,MAAM,EAChB,SAAS,EAAE,WAAW,CAAC,CAAC,OAAO,IAAI,WAAW,EAAE,IAAI,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,KACzF,KAAK,YAER,QAAQ,GACO,CACnB,CAAA"}

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,14 @@
+import { HTMLExtension, WithColorScheme } from '../types.js';
+export interface BaseCheckboxProps extends WithColorScheme {
+    /**
+     * "checkbox" for common check boxes, "switch" for toggles.
+     * @default 'checkbox'
+     */
+    appearance?: 'checkbox' | 'switch';
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    children?: React.ReactNode;
+}
+export type CheckboxProps = HTMLExtension<'input', BaseCheckboxProps, 'type' | 'onChange' | 'value'>;
+export declare const Checkbox: ({ appearance, value, onChange, colorScheme, children, className, style, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/components/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAGzD,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,OAAO,EAAE,iBAAiB,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC,CAAA;AAEpG,eAAO,MAAM,QAAQ,GACnB,oFAAiG,aAAa,4CAkB/G,CAAA"}

package/dist/components/Checkbox.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CitricComponent } from './CitricComponent.js';
+export const Checkbox = ({ appearance = 'checkbox', value, onChange, colorScheme, children, className, style, ...props }) => {
+    const handleChange = onChange ? () => onChange(!value) : undefined;
+    return children ? (_jsxs(CitricComponent, { tag: "label", component: `${appearance}-row`, colorScheme: colorScheme, style: style, className: className, children: [_jsx("input", { type: "checkbox", checked: value, onChange: handleChange, ...props }), children] })) : _jsx(CitricComponent, { tag: "input", type: "checkbox", component: appearance, checked: value, onChange: handleChange, className: className, style: style, ...props });
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAenD,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,EAAE,UAAU,GAAG,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAiB,EAC9G,EAAE;IACF,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAClE,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,UAAU,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,aACvH,gBAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,KAAM,KAAK,GAAI,EAC3E,QAAQ,IACO,CACnB,CAAC,CAAC,CAAC,KAAC,eAAe,IAClB,GAAG,EAAC,OAAO,EACX,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,KACR,KAAK,GACT,CAAA;AACJ,CAAC,CAAA"}

package/dist/components/CheckboxGroup.d.ts

@@ -0,0 +1,53 @@
+import { HTMLExtension, WithColorScheme } from '../types.js';
+export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
+    /**
+     * "checkbox" for common check boxes, "switch" for toggles.
+     * @default 'checkbox'
+     */
+    appearance?: 'checkbox' | 'switch';
+    /**
+     * The field name.
+     */
+    name?: string;
+    /**
+     * All items corresponding to the selected checkboxes.
+     */
+    value: T[];
+    /**
+     * All the items (checkboxes) to render.
+     */
+    options: T[];
+    /**
+     * Called whenever the selected checkboxes changes.
+     * @param value the currently selected items.
+     */
+    onChange: (value: T[]) => void;
+    /**
+     * A function to render the item label.
+     * @example
+     * `(option) => option.name`
+     * @default "the item's toString() result."
+     * @param option the item to render.
+     * @returns a React Node to render.
+     */
+    renderLabel?: (option: T) => React.ReactNode;
+    /**
+     * A function to render the item value, a unique identifier for the option.
+     * @example
+     * `(option) => option.id`
+     * @default "if the item is a string or a number, the stringified item. Otherwise, undefined."
+     * @param option the item to compute a key for.
+     * @returns a string key.
+     */
+    renderKey?: (option: T) => string | number | undefined;
+    /**
+     * If this function returns true for the item, this option is disabled.
+     * @default "nothing is disabled"
+     * @param option the item to calculate "disabled" for.
+     * @returns true if the item should be disabled, false otherwise.
+     */
+    isDisabled?: (option: T) => boolean;
+}
+export type CheckboxGroupProps<T> = HTMLExtension<'div', BaseCheckboxGroupProps<T>, 'onChange'>;
+export declare function CheckboxGroup<T>({ appearance, name, value, options, onChange, renderLabel, renderKey, isDisabled, colorScheme, style, ...props }: CheckboxGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CheckboxGroup.d.ts.map

package/dist/components/CheckboxGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAKzD,MAAM,WAAW,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,eAAe;IACtE;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,CAAC,EAAE,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC/B;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAC;CACrC;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI,aAAa,CAAC,KAAK,EAAE,sBAAsB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAA;AAE/F,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAC/B,UAAuB,EACvB,IAAI,EACJ,KAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAgC,EAChC,SAA4B,EAC5B,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAqBvB"}

package/dist/components/CheckboxGroup.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isNil } from 'lodash';
+import { useMemo } from 'react';
+import { defaultRenderKey, defaultRenderLabel } from '../utils/options.js';
+import { CitricComponent } from './CitricComponent.js';
+import { Column } from './layout.js';
+export function CheckboxGroup({ appearance = 'checkbox', name, value = [], options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, isDisabled, colorScheme, style, ...props }) {
+    const items = useMemo(() => {
+        const valueKeys = value.map(renderKey);
+        return options.map((o) => {
+            const key = renderKey(o);
+            return (_jsxs(CitricComponent, { tag: "label", component: `${appearance}-row`, colorScheme: colorScheme, children: [_jsx("input", { type: "checkbox", name: name, value: key, checked: value.includes(o) || (!isNil(key) && valueKeys.includes(key)), onChange: (e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? [])), disabled: isDisabled?.(o) }), renderLabel(o)] }, key));
+        });
+    }, [options, value, name, colorScheme, appearance]);
+    return _jsx(Column, { ...props, style: { gap: '8px', ...style }, children: items });
+}
+//# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/CheckboxGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAA;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAA;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAsDjC,MAAM,UAAU,aAAa,CAAI,EAC/B,UAAU,GAAG,UAAU,EACvB,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACc;IACtB,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QACtC,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACvB,MAAM,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;YACxB,OAAO,CACL,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,UAAU,MAAM,EAAY,WAAW,EAAE,WAAW,aAC7F,gBACE,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,GAAG,EACV,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EACtE,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,EAChH,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,GACzB,EACD,WAAW,CAAC,CAAC,CAAC,KATiD,GAAG,CAUnD,CACnB,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,CAAA;IACnD,OAAO,KAAC,MAAM,OAAK,KAAK,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,YAAG,KAAK,GAAU,CAAA;AAC7E,CAAC"}

package/dist/components/Circle.d.ts

@@ -0,0 +1,18 @@
+import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types.js';
+export interface BaseCircleProps extends WithColorPalette, WithColorScheme {
+    /**
+     * Whether or not to show borders.
+     *
+     * @default false
+     */
+    showBorders?: boolean;
+    /**
+     * The size of the circle.
+     *
+     * @default 'xs'
+     */
+    size?: 'xxs' | 'xs' | 'sm' | 'lg' | 'xl' | 'xxl';
+}
+export type CircleProps = HTMLExtension<'div', BaseCircleProps>;
+export declare const Circle: ({ showBorders, className, size, children, ...props }: CircleProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Circle.d.ts.map

package/dist/components/Circle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../src/components/Circle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG3E,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,eAAe;IACxE;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CAClD;AAED,MAAM,MAAM,WAAW,GAAG,aAAa,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;AAE/D,eAAO,MAAM,MAAM,GAAI,sDAAsD,WAAW,4CAIvF,CAAA"}