@stack-spot/citric-react 0.22.0 → 0.23.0

package/dist/components/Card.d.ts

@@ -1,11 +1,12 @@
 import { WithColorScheme } from '../types.js';
-export interface BaseCardProps extends WithColorScheme {
+type SupportedTags = 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'section' | 'article' | 'a' | 'button';
+export interface BaseCardProps<T extends SupportedTags = SupportedTags> extends WithColorScheme {
     /**
      * HTML tag to render.
      *
      * @default 'div'
      */
-    tag?: 'div' | 'header' | 'ul' | 'ol' | 'dl' | 'section' | 'article';
+    tag?: T;
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
     /**
      * The size of the card.
@@ -20,6 +21,16 @@ export interface BaseCardProps extends WithColorScheme {
      */
     bgLevel?: 300 | 400 | 500 | 600;
 }
-export type CardProps = React.JSX.IntrinsicElements['div'] & BaseCardProps;
-export declare const Card: ({ tag, onClick, size, bgLevel, className, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export type CardProps<T extends SupportedTags> = (T extends 'a' ? React.JSX.IntrinsicElements['a'] : (T extends 'button' ? React.JSX.IntrinsicElements['button'] : React.JSX.IntrinsicElements['div'])) & BaseCardProps;
+/**
+ * Renders a box with padding, border and background-color. If the card is focusable or has an onClick listener, hover events are also
+ * present.
+ *
+ * @example
+ * ```
+ * <Card>The card content</Card>
+ * ```
+ */
+export declare const Card: <T extends SupportedTags>({ tag, onClick, size, bgLevel, className, children, ...props }: CardProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=Card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI1C,MAAM,WAAW,aAAc,SAAQ,eAAe;IACpD;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC;IACpE,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,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,aAAa,CAAA;AAE1E,eAAO,MAAM,IAAI,mEAAoF,SAAS,4CAU5G,CAAA"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI1C,KAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,GAAG,GAAG,QAAQ,CAAA;AAEnG,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,eAAe;IAC7F;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,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;AAGD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,CAC/C,CAAC,SAAS,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,GAAG,CACjD,CAAC,SAAS,QAAQ,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,GACxD,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAA;AAE1D;;;;;;;;GAQG;AACH,eAAO,MAAM,IAAI,GACD,CAAC,SAAS,aAAa,kEAA0E,SAAS,CAAC,CAAC,CAAC,4CAc5H,CAAA"}

package/dist/components/Card.js

@@ -2,5 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
-export const Card = withRef(({ tag = 'div', onClick, size, bgLevel, className, children, ...props }) => (_jsx(CitricComponent, { tag: tag, component: "card", onClick: onClick, className: listToClass([onClick && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]), ...props, children: children })));
+/**
+ * Renders a box with padding, border and background-color. If the card is focusable or has an onClick listener, hover events are also
+ * present.
+ *
+ * @example
+ * ```
+ * <Card>The card content</Card>
+ * ```
+ */
+export const Card = withRef(function Card({ tag = 'div', onClick, size, bgLevel, className, children, ...props }) {
+    const clickable = onClick || props.tabIndex === 0 || tag === 'button' || tag === 'a';
+    return (_jsx(CitricComponent, { tag: tag, component: "card", onClick: onClick, className: listToClass([clickable && 'clickable', size, bgLevel && `bg-${bgLevel}`, className]), ...props, children: children }));
+});
 //# sourceMappingURL=Card.js.map

package/dist/components/Card.js.map

@@ -1 +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,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA0BnD,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,EAAE,GAAG,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAa,EAAE,EAAE,CAAC,CACjH,KAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,OAAO,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,CAAC,CAAA"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAgCnD;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,OAAO,CACzB,SAAS,IAAI,CAA0B,EAAE,GAAG,GAAG,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB;IACzH,MAAM,SAAS,GAAG,OAAO,IAAI,KAAK,CAAC,QAAQ,KAAK,CAAC,IAAI,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,GAAG,CAAA;IACpF,OAAO,CACL,KAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,IAAI,WAAW,EAAE,IAAI,EAAE,OAAO,IAAI,MAAM,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC,KAC3F,KAAK,YAER,QAAQ,GACO,CACnB,CAAA;AACH,CAAC,CACF,CAAA"}

package/dist/components/Checkbox.d.ts

@@ -10,5 +10,19 @@ export interface BaseCheckboxProps extends WithColorScheme {
     children?: React.ReactNode;
 }
 export type CheckboxProps = ControlledInput & BaseCheckboxProps;
+/**
+ * Renders a simple checkbox. If you want to render multiple checkboxes to control the value of multi-selectable field, prefer using the
+ * component `CheckboxGroup`.
+ *
+ * Attention: the prop `onChange` receives a boolean (current value) instead of the event.
+ *
+ * A checkbox can also be a switch! Just change the property "appearance".
+ *
+ * @example
+ * ```
+ * const [value, setValue] = useState(false)
+ * return <Checkbox value={value} setValue={setValue}>This is the checkbox label</Checkbox>
+ * ```
+ */
 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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI3D,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,eAAe,GAAG,iBAAiB,CAAA;AAE/D,eAAO,MAAM,QAAQ,uFAC8E,aAAa,4CAkB9G,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI3D,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,eAAe,GAAG,iBAAiB,CAAA;AAE/D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,uFAC8E,aAAa,4CAkB9G,CAAA"}

package/dist/components/Checkbox.js

@@ -1,6 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
+/**
+ * Renders a simple checkbox. If you want to render multiple checkboxes to control the value of multi-selectable field, prefer using the
+ * component `CheckboxGroup`.
+ *
+ * Attention: the prop `onChange` receives a boolean (current value) instead of the event.
+ *
+ * A checkbox can also be a switch! Just change the property "appearance".
+ *
+ * @example
+ * ```
+ * const [value, setValue] = useState(false)
+ * return <Checkbox value={value} setValue={setValue}>This is the checkbox label</Checkbox>
+ * ```
+ */
 export const Checkbox = withRef(({ 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 });

package/dist/components/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAenD,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,CAC9B,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,CAAC,CAAA"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAenD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,CAC9B,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,CAAC,CAAA"}

package/dist/components/CheckboxGroup.d.ts

@@ -63,7 +63,26 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
     isDisabled?: (option: T) => boolean;
 }
 export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseCheckboxGroupProps<T>;
-declare function _CheckboxGroup<T>({ appearance, name, value, options, onChange, renderLabel, renderKey, renderItem, isDisabled, colorScheme, style, ...props }: CheckboxGroupProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare const CheckboxGroup: typeof _CheckboxGroup;
-export {};
+/**
+ * Renders a list of checkbox for multi-selection. One checkbox is rendered for each option.
+ *
+ * This component can be heavily customized via its properties. Check the storybook for complex examples.
+ *
+ * Tip: if you need to implement features like "search" and "select all", use the hook `useCheckboxGroupControls`.
+ *
+ * @example
+ *
+ * ```
+ * const options = useMemo(() => [
+ *   { id: 1, name: 'Option 1' },
+ *   { id: 2, name: 'Option 2' },
+ *   { id: 3, name: 'Option 3' },
+ * ], [])
+ *
+ * const [value, setValue] = useState<typeof options>([])
+ *
+ * return <CheckboxGroup options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
+ * ```
+ */
+export declare const CheckboxGroup: <T>({ appearance, name, value, options, onChange, renderLabel, renderKey, renderItem, isDisabled, colorScheme, style, ...props }: CheckboxGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CheckboxGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,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;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;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,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAA;AAEjI,iBAAS,cAAc,CAAC,CAAC,EAAE,EACzB,UAAuB,EACvB,IAAI,EACJ,KAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAgC,EAChC,SAA4B,EAC5B,UAAU,EACV,UAAU,EACV,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,CAAC,CAAC,2CAwBvB;AAED,eAAO,MAAM,aAAa,uBAA0B,CAAA"}
+{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAM1C,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;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7C;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;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,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,CAAA;AAEjI;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa,GACD,CAAC,gIAarB,kBAAkB,CAAC,CAAC,CAAC,4CAyBzB,CAAA"}

package/dist/components/CheckboxGroup.js

@@ -5,7 +5,28 @@ import { defaultRenderKey, defaultRenderLabel } from '../utils/options.js';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
 import { Column } from './layout.js';
-function _CheckboxGroup({ appearance = 'checkbox', name, value = [], options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, renderItem, isDisabled, colorScheme, style, ...props }) {
+/**
+ * Renders a list of checkbox for multi-selection. One checkbox is rendered for each option.
+ *
+ * This component can be heavily customized via its properties. Check the storybook for complex examples.
+ *
+ * Tip: if you need to implement features like "search" and "select all", use the hook `useCheckboxGroupControls`.
+ *
+ * @example
+ *
+ * ```
+ * const options = useMemo(() => [
+ *   { id: 1, name: 'Option 1' },
+ *   { id: 2, name: 'Option 2' },
+ *   { id: 3, name: 'Option 3' },
+ * ], [])
+ *
+ * const [value, setValue] = useState<typeof options>([])
+ *
+ * return <CheckboxGroup options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
+ * ```
+ */
+export const CheckboxGroup = withRef(function CheckboxGroup({ appearance = 'checkbox', name, value = [], options, onChange, renderLabel = defaultRenderLabel, renderKey = defaultRenderKey, renderItem, isDisabled, colorScheme, style, ...props }) {
     const items = useMemo(() => {
         const valueKeys = value.map(renderKey);
         return options.map((o) => {
@@ -15,6 +36,5 @@ function _CheckboxGroup({ appearance = 'checkbox', name, value = [], options, on
         });
     }, [options, value, name, colorScheme, appearance]);
     return _jsx(Column, { ...props, style: { gap: '8px', ...style }, children: items });
-}
-export const CheckboxGroup = withRef(_CheckboxGroup);
+});
 //# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/CheckboxGroup.js.map

@@ -1 +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,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAoEjC,SAAS,cAAc,CAAI,EACzB,UAAU,GAAG,UAAU,EACvB,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,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,MAAM,QAAQ,GAAG,KAAC,eAAe,IAC/B,GAAG,EAAC,OAAO,EACX,SAAS,EAAE,UAAU,EACrB,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,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5C,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,UAAU,MAAM,EAAY,WAAW,EAAE,WAAW,aAC5F,QAAQ,EACR,WAAW,CAAC,CAAC,CAAC,KAFiD,GAAG,CAGnD,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;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAC,cAAc,CAAC,CAAA"}
+{"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,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAoEjC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAClC,SAAS,aAAa,CAAI,EACxB,UAAU,GAAG,UAAU,EACvB,IAAI,EACJ,KAAK,GAAG,EAAE,EACV,OAAO,EACP,QAAQ,EACR,WAAW,GAAG,kBAAkB,EAChC,SAAS,GAAG,gBAAgB,EAC5B,UAAU,EACV,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,MAAM,QAAQ,GAAG,KAAC,eAAe,IAC/B,GAAG,EAAC,OAAO,EACX,SAAS,EAAE,UAAU,EACrB,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,CAAA;YACF,OAAO,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5C,MAAC,eAAe,IAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAE,GAAG,UAAU,MAAM,EAAY,WAAW,EAAE,WAAW,aAC5F,QAAQ,EACR,WAAW,CAAC,CAAC,CAAC,KAFiD,GAAG,CAGnD,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,CACF,CAAA"}

package/dist/components/Circle.d.ts

@@ -9,10 +9,26 @@ export interface BaseCircleProps extends WithColorPalette, WithColorScheme {
     /**
      * The size of the circle.
      *
+     * - xxs: 8px;
+     * - xs: 12px;
+     * - sm: 18px;
+     * - md: 27px;
+     * - lg: 40px;
+     * - xl: 60px;
+     * - xxl: 90px.
+     *
      * @default 'xs'
      */
     size?: 'xxs' | 'xs' | 'sm' | 'lg' | 'xl' | 'xxl';
 }
 export type CircleProps = React.JSX.IntrinsicElements['div'] & BaseCircleProps;
+/**
+ * Renders a simple circle. If the circle has any children, it gets cropped by the circle borders. The content of the circle is centered.
+ *
+ * @example
+ * ```
+ * <Circle colorScheme="success" />
+ * ```
+ */
 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

@@ -1 +1 @@
-{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../src/components/Circle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI5D,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,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAA;AAE9E,eAAO,MAAM,MAAM,yDAAkE,WAAW,4CAI9F,CAAA"}
+{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../src/components/Circle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI5D,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,eAAe;IACxE;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;CAClD;AAED,MAAM,MAAM,WAAW,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,eAAe,CAAA;AAE9E;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,yDAAkE,WAAW,4CAI9F,CAAA"}

package/dist/components/Circle.js

@@ -2,5 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
+/**
+ * Renders a simple circle. If the circle has any children, it gets cropped by the circle borders. The content of the circle is centered.
+ *
+ * @example
+ * ```
+ * <Circle colorScheme="success" />
+ * ```
+ */
 export const Circle = withRef(({ showBorders, className, size, children, ...props }) => (_jsx(CitricComponent, { tag: "div", component: "circle", className: listToClass([className, showBorders && 'bordered', size]), ...props, children: children })));
 //# sourceMappingURL=Circle.js.map

package/dist/components/Circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Circle.js","sourceRoot":"","sources":["../../src/components/Circle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAmBnD,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACnG,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,WAAW,IAAI,UAAU,EAAE,IAAI,CAAC,CAAC,KAAM,KAAK,YAC1H,QAAQ,GACO,CACnB,CAAC,CAAA"}
+{"version":3,"file":"Circle.js","sourceRoot":"","sources":["../../src/components/Circle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA2BnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CACnG,KAAC,eAAe,IAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,WAAW,IAAI,UAAU,EAAE,IAAI,CAAC,CAAC,KAAM,KAAK,YAC1H,QAAQ,GACO,CACnB,CAAC,CAAA"}

package/dist/components/CitricComponent.d.ts

@@ -13,6 +13,20 @@ interface CitricComponentType {
     } & BaseCitricProps & T): React.ReactNode;
 }
 export declare function asCitricProps({ colorScheme, colorPalette, component, ...props }: BaseCitricProps & Record<string, any>): Record<string, any>;
+/**
+ * Renders any tag or component with the appearance of a Citric Component.
+ *
+ * @example
+ * An anchor that looks like a card.
+ * ```
+ * <CitricComponent tag="a" component="card" href="https://www.google.com" target="_blank">This is a card link</CitricComponent>
+ * ```
+ *
+ * Suppose we have a component called "MyComponent" that accepts the property "myProp". We can make it look like a citric component:
+ * ```
+ * <CitricComponent render={MyComponent} component="card" myProp="my value" />
+ * ```
+ */
 export declare const CitricComponent: CitricComponentType;
 export {};
 //# sourceMappingURL=CitricComponent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CitricComponent.d.ts","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAC3H,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,cAAc,GAClI,mBAAmB,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAClI,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,gBAAgB,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GACjI,QAAQ,CAAA;AAEV,UAAU,eAAgB,SAAQ,eAAe,EAAE,gBAAgB;IACjE,SAAS,EAAE,mBAAmB,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC;CACX;AAED,UAAU,mBAAmB;IAC3B,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,EAAE,KAAK,EAAE;QAAE,GAAG,EAAE,CAAC,CAAA;KAAE,GAAG,eAAe,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACzH,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG,eAAe,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CACxG;AAED,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAKtH;AAGD,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAA"}
+{"version":3,"file":"CitricComponent.d.ts","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAC3H,cAAc,GAAG,SAAS,GAAG,aAAa,GAAG,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,GAAG,cAAc,GAClI,mBAAmB,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,YAAY,GAClI,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,GAAG,gBAAgB,GAAG,aAAa,GAAG,SAAS,GAAG,MAAM,GACjI,QAAQ,CAAA;AAEV,UAAU,eAAgB,SAAQ,eAAe,EAAE,gBAAgB;IACjE,SAAS,EAAE,mBAAmB,CAAC;IAC/B,GAAG,CAAC,EAAE,GAAG,CAAC;CACX;AAED,UAAU,mBAAmB;IAC3B,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,EAAE,KAAK,EAAE;QAAE,GAAG,EAAE,CAAC,CAAA;KAAE,GAAG,eAAe,GAAG,GAAG,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACzH,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE;QAAE,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG,eAAe,GAAG,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CACxG;AAED,wBAAgB,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAKtH;AAED;;;;;;;;;;;;;GAaG;AAEH,eAAO,MAAM,eAAe,EAAE,mBAK7B,CAAA"}

package/dist/components/CitricComponent.js

@@ -7,6 +7,20 @@ export function asCitricProps({ colorScheme, colorPalette, component, ...props }
         citricProps['data-color-palette'] = colorPalette;
     return citricProps;
 }
+/**
+ * Renders any tag or component with the appearance of a Citric Component.
+ *
+ * @example
+ * An anchor that looks like a card.
+ * ```
+ * <CitricComponent tag="a" component="card" href="https://www.google.com" target="_blank">This is a card link</CitricComponent>
+ * ```
+ *
+ * Suppose we have a component called "MyComponent" that accepts the property "myProp". We can make it look like a citric component:
+ * ```
+ * <CitricComponent render={MyComponent} component="card" myProp="my value" />
+ * ```
+ */
 // eslint-disable-next-line react/display-name
 export const CitricComponent = forwardRef((props, ref) => {
     const { tag, render, ...citricProps } = asCitricProps(props);

package/dist/components/CitricComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"CitricComponent.js","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAmBjD,MAAM,UAAU,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyC;IACrH,MAAM,WAAW,GAAwB,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,CAAA;IAC/E,IAAI,WAAW;QAAE,WAAW,CAAC,mBAAmB,CAAC,GAAG,WAAW,CAAA;IAC/D,IAAI,YAAY;QAAE,WAAW,CAAC,oBAAoB,CAAC,GAAG,YAAY,CAAA;IAClE,OAAO,WAAW,CAAA;AACpB,CAAC;AAED,8CAA8C;AAC9C,MAAM,CAAC,MAAM,eAAe,GAAwB,UAAU,CAC5D,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAA;IAC5D,OAAO,aAAa,CAAC,GAAG,IAAI,MAAM,EAAE,EAAE,GAAG,WAAW,EAAE,GAAG,EAAE,CAAC,CAAA;AAC9D,CAAC,CACF,CAAA"}
+{"version":3,"file":"CitricComponent.js","sourceRoot":"","sources":["../../src/components/CitricComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAmBjD,MAAM,UAAU,aAAa,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAyC;IACrH,MAAM,WAAW,GAAwB,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,CAAA;IAC/E,IAAI,WAAW;QAAE,WAAW,CAAC,mBAAmB,CAAC,GAAG,WAAW,CAAA;IAC/D,IAAI,YAAY;QAAE,WAAW,CAAC,oBAAoB,CAAC,GAAG,YAAY,CAAA;IAClE,OAAO,WAAW,CAAA;AACpB,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,8CAA8C;AAC9C,MAAM,CAAC,MAAM,eAAe,GAAwB,UAAU,CAC5D,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAA;IAC5D,OAAO,aAAa,CAAC,GAAG,IAAI,MAAM,EAAE,EAAE,GAAG,WAAW,EAAE,GAAG,EAAE,CAAC,CAAA;AAC9D,CAAC,CACF,CAAA"}

package/dist/components/Divider.d.ts

@@ -10,5 +10,8 @@ export interface BaseDividerProps extends WithColorScheme {
     size?: 'sm' | 'md' | 'lg';
 }
 export type DividerProps = React.JSX.IntrinsicElements['hr'] & BaseDividerProps;
-export declare const Divider: ({ size, direction, className, children, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a divider (hr). "size" determines how thick the ruler is and "direction" places it on the vertical or horizontal axis.
+ */
+export declare const Divider: ({ size, direction, className, ...props }: DividerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Divider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/components/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI1C,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,gBAAgB,CAAA;AAE/E,eAAO,MAAM,OAAO,uDAAgE,YAAY,4CAI9F,CAAA"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../src/components/Divider.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI1C,MAAM,WAAW,gBAAiB,SAAQ,eAAe;IACvD;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,gBAAgB,CAAA;AAE/E;;GAEG;AACH,eAAO,MAAM,OAAO,6CAAsD,YAAY,4CAErF,CAAA"}

package/dist/components/Divider.js

@@ -2,5 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
-export const Divider = withRef(({ size, direction, className, children, ...props }) => (_jsx(CitricComponent, { tag: "hr", component: "divider", className: listToClass([className, size, direction]), ...props, children: children })));
+/**
+ * Renders a divider (hr). "size" determines how thick the ruler is and "direction" places it on the vertical or horizontal axis.
+ */
+export const Divider = withRef(({ size, direction, className, ...props }) => _jsx(CitricComponent, { tag: "hr", component: "divider", className: listToClass([className, size, direction]), ...props }));
 //# sourceMappingURL=Divider.js.map

package/dist/components/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../src/components/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAenD,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE,CAAC,CACnG,KAAC,eAAe,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,YAC1G,QAAQ,GACO,CACnB,CAAC,CAAA"}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../src/components/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAenD;;GAEG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE,CACxF,KAAC,eAAe,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAC,SAAS,EAAC,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,KAAM,KAAK,GAAI,CAClH,CAAA"}

package/dist/components/ErrorBoundary.d.ts

@@ -14,6 +14,19 @@ interface Props {
 }
 /**
  * An Error Boundary that renders an error feedback instead of its content if any of its children throws.
+ *
+ * You can customize the appearance of the error through the function `renderError` of a CitricController.
+ *
+ * Errors can be watched through the function `onError` of a CitricController.
+ *
+ * Attention: if you're using React Suspense, consider using the component "FallbackBoundary" instead.
+ *
+ * @example
+ * ```
+ * <ErrorBoundary>
+ *   {content}
+ * </ErrorBoundary>
+ * ```
  */
 export declare class ErrorBoundary extends Component<Props, State> {
     static contextType: import("react").Context<import("../index.js").CitricController | undefined>;

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAGxD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC/D;AAED;;GAEG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACxD,MAAM,CAAC,WAAW,qEAAgB;IAC1B,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,aAAa,CAAC,CAAA;gBAE5C,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG;;;IAI1C,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IAM5C,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC;IAM7C,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,aAAa;IAQrB,MAAM;CAGP"}
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAGxD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,UAAU,KAAK;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;CAC/D;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACxD,MAAM,CAAC,WAAW,qEAAgB;IAC1B,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,OAAO,aAAa,CAAC,CAAA;gBAE5C,KAAK,EAAE,KAAK;IAKxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,GAAG;;;IAI1C,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG;IAM5C,kBAAkB,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC;IAM7C,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,aAAa;IAQrB,MAAM;CAGP"}

package/dist/components/ErrorBoundary.js

@@ -4,6 +4,19 @@ import { CitricContext } from '../context/CitricContext.js';
 import { ErrorMessage } from './ErrorMessage.js';
 /**
  * An Error Boundary that renders an error feedback instead of its content if any of its children throws.
+ *
+ * You can customize the appearance of the error through the function `renderError` of a CitricController.
+ *
+ * Errors can be watched through the function `onError` of a CitricController.
+ *
+ * Attention: if you're using React Suspense, consider using the component "FallbackBoundary" instead.
+ *
+ * @example
+ * ```
+ * <ErrorBoundary>
+ *   {content}
+ * </ErrorBoundary>
+ * ```
  */
 export class ErrorBoundary extends Component {
     constructor(props) {

package/dist/components/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAgB7C;;GAEG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAuB;IAIxD,YAAY,KAAY;QACtB,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;IACjB,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAU;QACxC,OAAO,EAAE,KAAK,EAAE,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,KAAU,EAAE,SAAc;QAC1C,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAC9B,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IACjC,CAAC;IAED,kBAAkB,CAAC,SAA0B;QAC3C,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ,EAAE,CAAC;YACnE,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;QACnB,CAAC;IACH,CAAC;IAEO,mBAAmB;QACzB,OAAO,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IACtD,CAAC;IAEO,aAAa;QACnB,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,UAAU;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACzF,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC;YACvD,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI;YACjE,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAChC,CAAC;IAGD,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IACtE,CAAC;;AAtCM;;;;WAAc,aAAa;GAAA"}
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../src/components/ErrorBoundary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAgB7C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,OAAO,aAAc,SAAQ,SAAuB;IAIxD,YAAY,KAAY;QACtB,KAAK,CAAC,KAAK,CAAC,CAAA;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;IACjB,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAU;QACxC,OAAO,EAAE,KAAK,EAAE,CAAA;IAClB,CAAC;IAED,iBAAiB,CAAC,KAAU,EAAE,SAAc;QAC1C,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAC9B,sCAAsC;QACtC,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IACjC,CAAC;IAED,kBAAkB,CAAC,SAA0B;QAC3C,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ,EAAE,CAAC;YACnE,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;QACnB,CAAC;IACH,CAAC;IAEO,mBAAmB;QACzB,OAAO,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IACtD,CAAC;IAEO,aAAa;QACnB,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,UAAU;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QACzF,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC;YACvD,CAAC,CAAC,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI;YACjE,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAA;IAChC,CAAC;IAGD,MAAM;QACJ,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IACtE,CAAC;;AAtCM;;;;WAAc,aAAa;GAAA"}

package/dist/components/ErrorMessage.js

@@ -3,5 +3,5 @@ import { Icon } from '@stack-spot/citric-icons';
 import { theme } from '@stack-spot/portal-theme';
 import { Row } from './layout.js';
 import { Text } from './Text.js';
-export const ErrorMessage = ({ error }) => (_jsxs(Row, { gap: "18px", p: "20px", justifyContent: "center", children: [_jsx(Icon, { icon: "TimesCircle", size: "xl", style: { color: theme.color.danger[500] } }), _jsx(Text, { style: { margin: '80px' }, children: error.message || `${error}` })] }));
+export const ErrorMessage = ({ error }) => (_jsxs(Row, { gap: "18px", p: "20px", justifyContent: "center", children: [_jsx(Icon, { icon: "TimesCircle", size: "xl", style: { color: theme.color.danger[500] } }), _jsx(Text, { children: error.message || `${error}` })] }));
 //# sourceMappingURL=ErrorMessage.js.map

package/dist/components/ErrorMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../src/components/ErrorMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAkB,EAAE,EAAE,CAAC,CACzD,MAAC,GAAG,IAAC,GAAG,EAAC,MAAM,EAAC,CAAC,EAAC,MAAM,EAAC,cAAc,EAAC,QAAQ,aAC9C,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,GAAI,EAChF,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,YAAG,KAAK,CAAC,OAAO,IAAI,GAAG,KAAK,EAAE,GAAQ,IACjE,CACP,CAAA"}
+{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../src/components/ErrorMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAkB,EAAE,EAAE,CAAC,CACzD,MAAC,GAAG,IAAC,GAAG,EAAC,MAAM,EAAC,CAAC,EAAC,MAAM,EAAC,cAAc,EAAC,QAAQ,aAC9C,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,GAAI,EAChF,KAAC,IAAI,cAAE,KAAK,CAAC,OAAO,IAAI,GAAG,KAAK,EAAE,GAAQ,IACtC,CACP,CAAA"}

package/dist/components/FallbackBoundary.d.ts

@@ -6,7 +6,18 @@ interface Props {
     children: React.ReactNode;
 }
 /**
- * Fallbacks for errors and loadings (suspense).
+ * A Boundary that renders an error feedback if a child throws an error or a loading feedback if it suspends.
+ *
+ * You can customize the appearance of the loading and error views through a CitricController.
+ *
+ * Errors can be watched through the function `onError` of a CitricController.
+ *
+ * @example
+ * ```
+ * <FallbackBoundary>
+ *   {content}
+ * </FallbackBoundary>
+ * ```
  */
 export declare const FallbackBoundary: ({ children, message }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"FallbackBoundary.d.ts","sourceRoot":"","sources":["../../src/components/FallbackBoundary.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAQD;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,uBAAuB,KAAK,4CAM5D,CAAA"}
+{"version":3,"file":"FallbackBoundary.d.ts","sourceRoot":"","sources":["../../src/components/FallbackBoundary.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAQD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,gBAAgB,GAAI,uBAAuB,KAAK,4CAM5D,CAAA"}

package/dist/components/FallbackBoundary.js

@@ -5,7 +5,18 @@ import { Center } from './layout.js';
 import { ProgressCircular } from './ProgressCircular.js';
 const loading = (_jsx(Center, { flex: 1, p: "80px", "data-test-hint": "loading", children: _jsx(ProgressCircular, {}) }));
 /**
- * Fallbacks for errors and loadings (suspense).
+ * A Boundary that renders an error feedback if a child throws an error or a loading feedback if it suspends.
+ *
+ * You can customize the appearance of the loading and error views through a CitricController.
+ *
+ * Errors can be watched through the function `onError` of a CitricController.
+ *
+ * @example
+ * ```
+ * <FallbackBoundary>
+ *   {content}
+ * </FallbackBoundary>
+ * ```
  */
 export const FallbackBoundary = ({ children, message }) => (_jsx(ErrorBoundary, { message: message, children: _jsx(Suspense, { fallback: loading, children: children }) }));
 //# sourceMappingURL=FallbackBoundary.js.map

package/dist/components/FallbackBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"FallbackBoundary.js","sourceRoot":"","sources":["../../src/components/FallbackBoundary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAUrD,MAAM,OAAO,GAAG,CACd,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAC,MAAM,oBAAgB,SAAS,YAChD,KAAC,gBAAgB,KAAG,GACb,CACV,CAAA;AAED;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAChE,KAAC,aAAa,IAAC,OAAO,EAAE,OAAO,YAC7B,KAAC,QAAQ,IAAC,QAAQ,EAAE,OAAO,YACxB,QAAQ,GACA,GACG,CACjB,CAAA"}
+{"version":3,"file":"FallbackBoundary.js","sourceRoot":"","sources":["../../src/components/FallbackBoundary.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAUrD,MAAM,OAAO,GAAG,CACd,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAC,MAAM,oBAAgB,SAAS,YAChD,KAAC,gBAAgB,KAAG,GACb,CACV,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAChE,KAAC,aAAa,IAAC,OAAO,EAAE,OAAO,YAC7B,KAAC,QAAQ,IAAC,QAAQ,EAAE,OAAO,YACxB,QAAQ,GACA,GACG,CACjB,CAAA"}

package/dist/components/Favorite.d.ts

@@ -23,6 +23,18 @@ export interface BaseFavoriteProps {
     loading?: boolean;
 }
 export type FavoriteProps = Omit<ControlledInput, 'size'> & BaseFavoriteProps;
+/**
+ * Renders a checkbox with the appearance of a favorite button. If unchecked, the stroke of a star is rendered, when checked, a filled
+ * yellow star is rendered.
+ *
+ * You can also set a loading state to indicate the component is busy.
+ *
+ * @example
+ * ```
+ * const { isFavorite, setFavorite, isLoading } = useRemoteFavoriteStatus()
+ * return <Favorite value={isFavorite} onChange={setFavorite} loading={isLoading} />
+ * ```
+ */
 export declare const Favorite: ({ value, size, appearance, onChange, loading, disabled, className, ...props }: FavoriteProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Favorite.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Favorite.d.ts","sourceRoot":"","sources":["../../src/components/Favorite.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI1C,KAAK,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEtD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;IACzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG,iBAAiB,CAAA;AAE7E,eAAO,MAAM,QAAQ,kFAA2F,aAAa,4CAY5H,CAAA"}
+{"version":3,"file":"Favorite.d.ts","sourceRoot":"","sources":["../../src/components/Favorite.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAI1C,KAAK,kBAAkB,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEtD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,CAAC;IACzC;;;;OAIG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG,iBAAiB,CAAA;AAE7E;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,QAAQ,kFAA2F,aAAa,4CAY5H,CAAA"}

package/dist/components/Favorite.js

@@ -2,5 +2,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
+/**
+ * Renders a checkbox with the appearance of a favorite button. If unchecked, the stroke of a star is rendered, when checked, a filled
+ * yellow star is rendered.
+ *
+ * You can also set a loading state to indicate the component is busy.
+ *
+ * @example
+ * ```
+ * const { isFavorite, setFavorite, isLoading } = useRemoteFavoriteStatus()
+ * return <Favorite value={isFavorite} onChange={setFavorite} loading={isLoading} />
+ * ```
+ */
 export const Favorite = withRef(({ value, size, appearance, onChange, loading, disabled, className, ...props }) => _jsx(CitricComponent, { tag: "input", type: "checkbox", component: "favorite", className: listToClass([appearance, size, className]), checked: !!value, onChange: () => onChange(!value), "aria-busy": loading, disabled: loading || disabled, ...props }));
 //# sourceMappingURL=Favorite.js.map

package/dist/components/Favorite.js.map

@@ -1 +1 @@
-{"version":3,"file":"Favorite.js","sourceRoot":"","sources":["../../src/components/Favorite.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA6BnD,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CAC/H,KAAC,eAAe,IACd,GAAG,EAAC,OAAO,EACX,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,EACrD,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,eACrB,OAAO,EAClB,QAAQ,EAAE,OAAO,IAAI,QAAQ,KACzB,KAAK,GACT,CACH,CAAA"}
+{"version":3,"file":"Favorite.js","sourceRoot":"","sources":["../../src/components/Favorite.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AA6BnD;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CAC/H,KAAC,eAAe,IACd,GAAG,EAAC,OAAO,EACX,IAAI,EAAC,UAAU,EACf,SAAS,EAAC,UAAU,EACpB,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,EACrD,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,eACrB,OAAO,EAClB,QAAQ,EAAE,OAAO,IAAI,QAAQ,KACzB,KAAK,GACT,CACH,CAAA"}

package/dist/components/FieldGroup.d.ts

@@ -15,5 +15,18 @@ export interface BaseFieldGroupProps {
     fullWidth?: boolean;
 }
 export type FieldGroupProps = React.JSX.IntrinsicElements['div'] & BaseFieldGroupProps;
+/**
+ * A FieldGroup is used to concatenate an input with other UI elements, like icons and buttons.
+ *
+ * @example
+ * A search field, with a search icon and a button to submit the search.
+ * ```
+ * <FieldGroup>
+ *   <Icon icon="Search" />
+ *   <Input type="search" />
+ *   <Button colorScheme="light">Submit</Button>
+ * </FieldGroup>
+ * ```
+ */
 export declare const FieldGroup: ({ auto, fullWidth, className, children, ...props }: FieldGroupProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FieldGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../src/components/FieldGroup.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,mBAAmB,CAAA;AAEtF,eAAO,MAAM,UAAU,uDAAuE,eAAe,4CAS3G,CAAA"}
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../src/components/FieldGroup.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,mBAAmB;IAClC;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,mBAAmB,CAAA;AAEtF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,uDAAuE,eAAe,4CAS3G,CAAA"}

package/dist/components/FieldGroup.js

@@ -2,5 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { listToClass } from '@stack-spot/portal-theme';
 import { withRef } from '../utils/react.js';
 import { CitricComponent } from './CitricComponent.js';
+/**
+ * A FieldGroup is used to concatenate an input with other UI elements, like icons and buttons.
+ *
+ * @example
+ * A search field, with a search icon and a button to submit the search.
+ * ```
+ * <FieldGroup>
+ *   <Icon icon="Search" />
+ *   <Input type="search" />
+ *   <Button colorScheme="light">Submit</Button>
+ * </FieldGroup>
+ * ```
+ */
 export const FieldGroup = withRef(({ auto = true, fullWidth, className, children, ...props }) => (_jsx(CitricComponent, { tag: "div", component: "field-group", className: listToClass([className, auto && 'auto', fullWidth && 'full-width']), ...props, children: children })));
 //# sourceMappingURL=FieldGroup.js.map

package/dist/components/FieldGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../src/components/FieldGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAqBnD,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE,CAAC,CAChH,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,aAAa,EACvB,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,EAAE,SAAS,IAAI,YAAY,CAAC,CAAC,KAC1E,KAAK,YAER,QAAQ,GACO,CACnB,CAAC,CAAA"}
+{"version":3,"file":"FieldGroup.js","sourceRoot":"","sources":["../../src/components/FieldGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAqBnD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB,EAAE,EAAE,CAAC,CAChH,KAAC,eAAe,IACd,GAAG,EAAC,KAAK,EACT,SAAS,EAAC,aAAa,EACvB,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,IAAI,IAAI,MAAM,EAAE,SAAS,IAAI,YAAY,CAAC,CAAC,KAC1E,KAAK,YAER,QAAQ,GACO,CACnB,CAAC,CAAA"}