@stack-spot/portal-components 0.0.17 → 1.0.0-dev.1768482754546

package/dist/components/SelectionList.d.ts

@@ -0,0 +1,151 @@
+import { WithStyle } from '@stack-spot/portal-theme';
+import { ReactElement } from 'react';
+interface CustomLabel {
+    /**
+     * A unique identifier for this label. This is also used to read this label to screen readers.
+     */
+    id: string;
+    /**
+     * A custom label that can be made up of any React component.
+     */
+    element: React.ReactNode;
+}
+export interface Action {
+    /**
+     * The label of the action.
+     */
+    label: string | CustomLabel;
+    /**
+     * Function to run on a click.
+     */
+    onClick?: (event?: React.MouseEvent) => void;
+    /**
+     * URL to open on a click.
+     */
+    href?: string;
+    /**
+     * Target of the URL to open.
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * Language of the linked document.
+     */
+    lang?: React.AnchorHTMLAttributes<HTMLAnchorElement>['lang'];
+    /**
+     * Language of the destination URL.
+     */
+    hrefLang?: React.AnchorHTMLAttributes<HTMLAnchorElement>['hrefLang'];
+    /**
+     * The title of the action.
+     */
+    title?: string;
+}
+interface ItemWithIcon {
+    /**
+     * An Icon to appear at the left of the item.
+     */
+    icon?: React.ReactElement;
+    /**
+     * An Icon to appear at the right of the item.
+     */
+    iconRight?: React.ReactElement;
+}
+export interface ListAction extends ItemWithIcon, Action {
+    /**
+     * Whether or not this option is currently active.
+     */
+    active?: boolean;
+    /**
+     * Icon to render when this option is active.
+     */
+    iconActive?: React.ReactElement;
+    /**
+     * A class to be added to this item.
+     */
+    className?: string;
+    /**
+   * Defines the ARIA role of the element for accessibility purposes. Example: "button", "dialog", etc.
+   */
+    role?: string;
+}
+interface ListGroup {
+    /**
+     * If this group is rendered as a section with its items right below it or a collapsible, which requires a click to open a submenu.
+     */
+    type?: 'section' | 'collapsible';
+    /**
+     * The items of this group.
+     */
+    children: ListItem[];
+    /**
+    * A class to be added to this item.
+    */
+    className?: string;
+}
+interface ListSection extends ListGroup {
+    type: 'section';
+    /**
+     * The section's title.
+     */
+    label?: string;
+}
+interface ListCollapsible extends ListGroup, ItemWithIcon {
+    type?: 'collapsible';
+    /**
+     * The title of the collapsible menu.
+     */
+    label: string;
+}
+type ListItem = ListSection | ListCollapsible | ListAction;
+export interface SelectionListProps extends WithStyle {
+    /**
+     * The id of this selection list. This is important for accessibility. Be sure to link it to the aria-controls tag of the element who
+     * controls the visibility of this selection list.
+     */
+    id: string;
+    /**
+     * Whether or not the selection list is visible.
+     */
+    visible?: boolean;
+    /**
+     * The options in the selection list.
+     */
+    items: ListItem[];
+    /**
+     * Function to run when the selection list is hidden/closed.
+     */
+    onHide?: () => void;
+    /**
+     * The maximum height for the selection list.
+     * @default "300px"
+     */
+    maxHeight?: string;
+    /**
+     * A React element to render right before the items.
+     */
+    before?: ReactElement;
+    /**
+     * A React element to render right after the items.
+     */
+    after?: ReactElement;
+    /**
+     * Whether or not this list should be scrollable.
+     */
+    scroll?: boolean;
+    /**
+     * Show list as card
+     */
+    showListAsCard?: boolean;
+}
+/**
+ * Renders a component that allows the selection of one item. The list is show/hidden according to the prop `visible`.
+ *
+ * The items in this list can be grouped into multiple sections. Sections may be displayed on a column (section) or might replace the
+ * current list of options with another list of options (collapsible).
+ *
+ * This component implements keyboard controls and accessibility features.
+ * @param props the component's props {@link SelectionListProps}.
+ */
+export declare const SelectionList: ({ id, items, className, style, visible, maxHeight, onHide, before, after, scroll, showListAsCard, }: SelectionListProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectionList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAA;AAK/E,UAAU,WAAW;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,MAAM;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,WAAW,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjE;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,CAAC;IACrE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,YAAY;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAChC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;KAEC;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,SAAS;IACjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB;;MAEE;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAW1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAkID;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,GAAI,qGAE3B,kBAAkB,4CAiHpB,CAAA"}

package/dist/components/SelectionList.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, IconBox, Text } from '@citric/core';
+import { ArrowLeft, Check, ChevronRight } from '@citric/icons';
+import { IconButton } from '@citric/ui';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { styled } from 'styled-components';
+import { useAnchorTag } from '../context/anchor.js';
+import { useKeyboardControls } from '../hooks/keyboard.js';
+const ANIMATION_DURATION_MS = 300;
+const MAX_HEIGHT_TRANSITION = `max-height ease-in ${ANIMATION_DURATION_MS / 1000}s`;
+const SelectionBox = styled.div `
+  max-height: 0;
+  overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
+  overflow-x: hidden;
+  transition: ${MAX_HEIGHT_TRANSITION}, visibility 0s ${ANIMATION_DURATION_MS / 1000}s;
+  z-index: 1;
+  box-shadow: 4px 4px 48px #000;
+  border-radius: 0.5rem;
+  visibility: hidden;
+
+  .selection-list-content {
+    display: flex;
+    flex-direction: column;
+    border-radius: 0.5rem;
+    background-color: ${theme.color.light['300']};
+    padding-inline: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
+  }
+
+  .section-title, li > a {
+    height: 40px;
+    padding: 0 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  li > a {
+    gap: 4px;
+    transition: background-color 0.2s;
+    &:hover, &:focus {
+      background: ${theme.color.light['400']};
+    }
+    .label {
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  li.action {
+    background-color: ${({ $showListAsCard }) => $showListAsCard ? theme.color.light['400'] : ''};
+    border:  ${({ $showListAsCard }) => '1px solid' + $showListAsCard ? theme.color.light['500'] : 'transparent'};
+    border-radius: ${({ $showListAsCard }) => $showListAsCard ? '4px' : '0'};
+    margin-bottom: ${({ $showListAsCard }) => $showListAsCard ? '8px' : '0'};
+  }
+
+  li.section {
+    border-bottom: 2px solid;
+    border-bottom-color: ${({ $showListAsCard }) => $showListAsCard ? 'transparent' : theme.color.light['600']};
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &.visible {
+    max-height: ${({ $maxHeight }) => $maxHeight};
+    visibility: visible;
+    transition: ${MAX_HEIGHT_TRANSITION};
+  }
+`;
+function renderAction({ label, href, onClick, icon, iconRight, active, target, iconActive = _jsx(Check, {}), className = '', lang, hrefLang, title, role = 'link', }, { onClose, Link }) {
+    function handleClick(event) {
+        onClick?.(event);
+        onClose?.();
+    }
+    const isTextLabel = typeof label === 'string';
+    return (_jsx("li", { className: "action", title: title, children: _jsxs(Link, { href: href, onClick: handleClick, target: target, tabIndex: 0, "aria-current": active && 'page', className: className, lang: lang, hrefLang: hrefLang, role: role, children: [icon && _jsx(IconBox, { children: icon }), isTextLabel ? _jsx(Text, { appearance: "body2", className: "label", children: label }) : label.element, iconRight && _jsx(IconBox, { children: iconRight }), active && _jsx(IconBox, { children: iconActive })] }) }, isTextLabel ? label : label.id));
+}
+function renderCollapsible({ label, icon, iconRight, className = '', children }, { setCurrent, controllerId, Link }) {
+    function handleClick(ev) {
+        //accessibility: this will tell the screen reader the section was expanded before this link is removed from the DOM.
+        ev.target?.setAttribute?.('aria-expanded', 'true');
+        setCurrent({ items: children, label });
+    }
+    return (_jsx("li", { className: "collapsible", children: _jsxs(Link, { onClick: handleClick, tabIndex: 0, className: className, "aria-expanded": false, "aria-controls": controllerId, children: [icon && _jsx(IconBox, { children: icon }), _jsx(Text, { appearance: "body2", className: "label", children: label }), iconRight && _jsx(IconBox, { children: iconRight }), _jsx(IconBox, { children: _jsx(ChevronRight, {}) })] }) }, label));
+}
+function renderSection({ label, className = '', children }, options) {
+    return (_jsxs("li", { className: `${className} section`, children: [label && _jsx(Text, { appearance: "overheader2", colorScheme: "light.700", className: "section-title", children: label }), _jsx("ul", { children: children.map(i => renderItem(i, options)) })] }, label ?? children.map(c => c.label).join('-')));
+}
+function renderItem(item, options) {
+    if ('children' in item) {
+        return item.type === 'section' ? renderSection(item, options) : renderCollapsible(item, options);
+    }
+    return renderAction(item, options);
+}
+/**
+ * Renders a component that allows the selection of one item. The list is show/hidden according to the prop `visible`.
+ *
+ * The items in this list can be grouped into multiple sections. Sections may be displayed on a column (section) or might replace the
+ * current list of options with another list of options (collapsible).
+ *
+ * This component implements keyboard controls and accessibility features.
+ * @param props the component's props {@link SelectionListProps}.
+ */
+export const SelectionList = ({ id, items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll, showListAsCard, }) => {
+    const Link = useAnchorTag();
+    const t = useTranslate(dictionary);
+    const [current, setCurrent] = useState({ items });
+    const { keyboardControlledElement: wrapper, attachKeyboardListeners, detachKeyboardListeners } = useKeyboardControls({ onPressEscape: onHide, querySelectors: 'li.action a, li.collapsible a, button' });
+    const listItems = useMemo(() => current.items.map(i => renderItem(i, {
+        setCurrent: (next) => setCurrent({ ...next, parent: current }),
+        onClose: onHide,
+        controllerId: id,
+        Link,
+    })), [current]);
+    useEffect(() => {
+        const selectionBox = wrapper.current;
+        if (!selectionBox)
+            return;
+        const handleTransitionEnd = () => {
+            selectionBox.style.overflow = 'auto';
+        };
+        selectionBox.addEventListener('transitionend', handleTransitionEnd);
+        return () => {
+            selectionBox.removeEventListener('transitionend', handleTransitionEnd);
+        };
+    }, []);
+    const handleExpand = () => {
+        const selectionBox = wrapper.current;
+        if (selectionBox) {
+            selectionBox.style.overflow = 'hidden';
+        }
+    };
+    const hide = useCallback((event) => {
+        const target = event.target;
+        // if the element is not in the DOM anymore, we'll consider the click was inside the selection list
+        const isClickInsideSelectionList = !target?.isConnected || wrapper.current?.contains(target);
+        const isAction = target?.classList?.contains('action') || !!target?.closest('.action');
+        const isInsideTour = !!target?.closest('#___reactour');
+        if (!isInsideTour && (!isClickInsideSelectionList || isAction))
+            onHide?.();
+    }, []);
+    useEffect(() => {
+        handleExpand();
+        function removeListeners() {
+            detachKeyboardListeners();
+            document.removeEventListener('click', hide);
+        }
+        if (visible) {
+            setCurrent({ items });
+            attachKeyboardListeners();
+            if (onHide)
+                setTimeout(() => document.addEventListener('click', hide), 50);
+        }
+        else {
+            removeListeners();
+        }
+        return () => removeListeners();
+    }, [visible, items]);
+    return (_jsx(SelectionBox, { id: id, ref: wrapper, "$maxHeight": maxHeight, style: style, className: listToClass(['selection-list', visible ? 'visible' : undefined, className]), "$scroll": scroll, "aria-hidden": !visible, "$showListAsCard": showListAsCard, children: _jsxs("div", { className: "selection-list-content", children: [before, current.parent
+                    ? (_jsxs(Flex, { mt: 5, mb: 1, alignItems: "center", children: [_jsx(IconButton, { onClick: (ev) => {
+                                    // accessibility: this will tell the screen reader the section was collapsed before this button is removed from the DOM.
+                                    ev.target?.setAttribute?.('aria-expanded', 'false');
+                                    setCurrent(current.parent ?? { items });
+                                }, sx: { mr: 3 }, title: t.back, "aria-controls": id, "aria-expanded": true, children: _jsx(ArrowLeft, {}) }), _jsx(Text, { appearance: "microtext1", children: current.label })] }))
+                    : undefined, _jsxs("ul", { children: [listItems, after &&
+                            _jsx("li", { className: "action", children: after })] })] }) }));
+};
+const dictionary = {
+    en: {
+        back: 'Go back',
+    },
+    pt: {
+        back: 'Voltar',
+    },
+};
+//# sourceMappingURL=SelectionList.js.map

package/dist/components/SelectionList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionList.js","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAgB,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAmB,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAiHvD,MAAM,qBAAqB,GAAG,GAAG,CAAA;AACjC,MAAM,qBAAqB,GAAG,sBAAsB,qBAAqB,GAAG,IAAI,GAAG,CAAA;AAkDnF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAsE;;gBAErF,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;;gBAE5C,qBAAqB,mBAAmB,qBAAqB,GAAG,IAAI;;;;;;;;;;wBAU5D,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;sBAC1B,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;;;;;;;;;;;;;;;oBAexD,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;wBAWpB,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;eACjF,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,WAAW,GAAG,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa;qBAC3F,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;qBACtD,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;;;;;2BAKhD,CAAC,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;kBAO5F,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,UAAU;;kBAE9B,qBAAqB;;CAEtC,CAAA;AAED,SAAS,YAAY,CAAC,EACpB,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,GAAG,KAAC,KAAK,KAAG,EAC7E,SAAS,GAAG,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,GAAG,MAAM,GACzC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAiB;IAC7C,SAAS,WAAW,CAAC,KAAuB;QAC1C,OAAO,EAAE,CAAC,KAAK,CAAC,CAAA;QAChB,OAAO,EAAE,EAAE,CAAA;IACb,CAAC;IAED,MAAM,WAAW,GAAG,OAAO,KAAK,KAAK,QAAQ,CAAA;IAE7C,OAAO,CACL,aAAyC,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,KAAK,YACtE,MAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,kBAAgB,MAAM,IAAI,MAAM,EACjG,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,aAC/D,IAAI,IAAI,KAAC,OAAO,cAAE,IAAI,GAAW,EACjC,WAAW,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,YAAE,KAAK,GAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EACvF,SAAS,IAAI,KAAC,OAAO,cAAE,SAAS,GAAW,EAC3C,MAAM,IAAI,KAAC,OAAO,cAAE,UAAU,GAAW,IACrC,IAPA,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAQlC,CACN,CAAA;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAC5D,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,IAAI,EAAiB;IAClE,SAAS,WAAW,CAAC,EAAoB;QACvC,oHAAoH;QACnH,EAAE,CAAC,MAAsB,EAAE,YAAY,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;QACnE,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAA;IACxC,CAAC;IACD,OAAO,CACL,aAAgB,SAAS,EAAC,aAAa,YACrC,MAAC,IAAI,IAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,mBAAiB,KAAK,mBAAiB,YAAY,aAC7G,IAAI,IAAI,KAAC,OAAO,cAAE,IAAI,GAAW,EAClC,KAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,SAAS,EAAC,OAAO,YAAE,KAAK,GAAQ,EACxD,SAAS,IAAI,KAAC,OAAO,cAAE,SAAS,GAAW,EAC5C,KAAC,OAAO,cAAC,KAAC,YAAY,KAAG,GAAU,IAC9B,IANA,KAAK,CAOT,CACN,CAAA;AACH,CAAC;AAED,SAAS,aAAa,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAe,EAAE,OAAsB;IAC7F,OAAO,CACL,cAAwD,SAAS,EAAE,GAAG,SAAS,UAAU,aACtF,KAAK,IAAI,KAAC,IAAI,IAAC,UAAU,EAAC,aAAa,EAAC,WAAW,EAAC,WAAW,EAAC,SAAS,EAAC,eAAe,YAAE,KAAK,GAAQ,EACzG,uBAAK,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,GAAM,KAF7C,KAAK,IAAI,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAGjD,CACN,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,IAAc,EAAE,OAAsB;IACxD,IAAI,UAAU,IAAI,IAAI,EAAE,CAAC;QACvB,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IAClG,CAAC;IACD,OAAO,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;AACpC,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,EAAE,SAAS,GAAG,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,GAC5F,EAAE,EAAE;IACvB,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAC3B,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAkB,EAAE,KAAK,EAAE,CAAC,CAAA;IAClE,MAAM,EAAE,yBAAyB,EAAE,OAAO,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,GAAG,mBAAmB,CAClH,EAAE,aAAa,EAAE,MAAM,EAAE,cAAc,EAAE,uCAAuC,EAAE,CACnF,CAAA;IAED,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CACrC,CAAC,EACD;QACE,UAAU,EAAE,CAAC,IAAqB,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;QAC/E,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,EAAE;QAChB,IAAI;KACL,CACF,CAAC,EACF,CAAC,OAAO,CAAC,CACV,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,OAAO,CAAC,OAAO,CAAA;QACpC,IAAI,CAAC,YAAY;YAAE,OAAM;QAEzB,MAAM,mBAAmB,GAAG,GAAG,EAAE;YAC/B,YAAY,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAA;QACtC,CAAC,CAAA;QAED,YAAY,CAAC,gBAAgB,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAA;QAEnE,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,mBAAmB,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAA;QACxE,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,MAAM,YAAY,GAAG,OAAO,CAAC,OAAO,CAAA;QACpC,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;QACxC,CAAC;IACH,CAAC,CAAA;IAED,MAAM,IAAI,GAAG,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QACxC,MAAM,MAAM,GAAI,KAAK,CAAC,MAA6B,CAAA;QACnD,mGAAmG;QACnG,MAAM,0BAA0B,GAAG,CAAC,MAAM,EAAE,WAAW,IAAI,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;QAC5F,MAAM,QAAQ,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;QACtF,MAAM,YAAY,GAAG,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,cAAc,CAAC,CAAA;QACtD,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,0BAA0B,IAAI,QAAQ,CAAC;YAAE,MAAM,EAAE,EAAE,CAAA;IAC5E,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,EAAE,CAAA;QACd,SAAS,eAAe;YACtB,uBAAuB,EAAE,CAAA;YACzB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,CAAA;QAC7C,CAAC;QACD,IAAI,OAAO,EAAE,CAAC;YACZ,UAAU,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;YACrB,uBAAuB,EAAE,CAAA;YACzB,IAAI,MAAM;gBAAE,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;QAC5E,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAA;QACnB,CAAC;QACD,OAAO,GAAG,EAAE,CAAC,eAAe,EAAE,CAAA;IAChC,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAA;IAEpB,OAAO,CACL,KAAC,YAAY,IACX,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,OAAO,gBACA,SAAS,EACrB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,WAAW,CAAC,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,aAC7E,MAAM,iBACF,CAAC,OAAO,qBACJ,cAAc,YAE/B,eAAK,SAAS,EAAC,wBAAwB,aACpC,MAAM,EACN,OAAO,CAAC,MAAM;oBACb,CAAC,CAAC,CACA,MAAC,IAAI,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,UAAU,EAAC,QAAQ,aACrC,KAAC,UAAU,IACT,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;oCACd,wHAAwH;oCACvH,EAAE,CAAC,MAAsB,EAAE,YAAY,EAAE,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;oCACpE,UAAU,CAAC,OAAO,CAAC,MAAM,IAAI,EAAE,KAAK,EAAE,CAAC,CAAA;gCACzC,CAAC,EACD,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EACb,KAAK,EAAE,CAAC,CAAC,IAAI,mBACE,EAAE,mBACF,IAAI,YAEnB,KAAC,SAAS,KAAG,GACF,EACb,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,YAAE,OAAO,CAAC,KAAK,GAAQ,IAC/C,CACR;oBACD,CAAC,CAAC,SAAS,EAEb,yBACG,SAAS,EACT,KAAK;4BACJ,aAAI,SAAS,EAAC,QAAQ,YACnB,KAAK,GACH,IAEJ,IACD,GACO,CAChB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,IAAI,EAAE,SAAS;KAChB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,QAAQ;KACf;CACmB,CAAA"}

package/dist/components/StatusCircle.d.ts

@@ -0,0 +1,24 @@
+export type Status = 'success' | 'warning' | 'danger' | 'unknown' | 'progress';
+interface Props {
+    /** The status of the component which determines its color */
+    status?: Status;
+    /** Tooltip text to be displayed on hover */
+    tooltip?: string;
+}
+interface WithTooltip {
+    /** Tooltip text to be displayed on hover */
+    tooltip?: string;
+    /** Additional class names for the component */
+    className?: string;
+    /** Inline styles for the component */
+    style?: React.CSSProperties;
+}
+/**
+ * Renders a component that displays a colored circle based on the status.
+ * It also supports an optional tooltip.
+ *
+ * @param props the component's props {@link Props}.
+ */
+export declare const StatusCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<WithTooltip, Props>> & string & Omit<({ tooltip, className, style }: WithTooltip) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export {};
+//# sourceMappingURL=StatusCircle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusCircle.d.ts","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE9E,UAAU,KAAK;IACb,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAsBD,UAAU,WAAW;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAYD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,4LAXiC,WAAW,4FAgBpE,CAAA"}

package/dist/components/StatusCircle.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getColor } from '@citric/core/dist/utils/theme.js';
+import { Tooltip } from '@citric/ui';
+import styled from 'styled-components';
+const statusToColor = {
+    success: 'success.500',
+    warning: 'warning.500',
+    danger: 'danger.500',
+    progress: 'secondary.500',
+    unknown: 'light.contrastText',
+};
+/**
+ * Get the color corresponding to the status.
+ *
+ * @param {Theme} theme - The theme object.
+ * @param {Status} [status] - The status of the component.
+ * @returns {string} The color corresponding to the status.
+ */
+function getColorFromStatus(theme, status) {
+    const colorName = status && status in statusToColor ? statusToColor[status] : statusToColor.unknown;
+    return getColor(theme, colorName);
+}
+/**
+ * CircleWithTooltip component that displays a circle with an optional tooltip.
+ *
+ * @param props the component's props {@link WithTooltip}.
+ */
+const CircleWithTooltip = ({ tooltip, className, style }) => {
+    const circle = _jsx("div", { style: style, className: className });
+    return tooltip && tooltip.length ? _jsx(Tooltip, { text: tooltip, children: circle }) : circle;
+};
+/**
+ * Renders a component that displays a colored circle based on the status.
+ * It also supports an optional tooltip.
+ *
+ * @param props the component's props {@link Props}.
+ */
+export const StatusCircle = styled(CircleWithTooltip) `
+  background-color: ${({ status, theme }) => getColorFromStatus(theme, status)};
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+`;
+//# sourceMappingURL=StatusCircle.js.map

package/dist/components/StatusCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusCircle.js","sourceRoot":"","sources":["../../src/components/StatusCircle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAatC,MAAM,aAAa,GAA0B;IAC3C,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,oBAAoB;CAC9B,CAAA;AAED;;;;;;GAMG;AACH,SAAS,kBAAkB,CAAC,KAAY,EAAE,MAAe;IACvD,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAA;IACnG,OAAO,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;AACnC,CAAC;AAWD;;;;GAIG;AACH,MAAM,iBAAiB,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAe,EAAE,EAAE;IACvE,MAAM,MAAM,GAAG,cAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,GAAQ,CAAA;IAC9D,OAAO,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,OAAO,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAA;AACxF,CAAC,CAAA;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAO;sBACtC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,kBAAkB,CAAC,KAAY,EAAE,MAAM,CAAC;;;;CAIpF,CAAA"}

package/dist/components/Stepper/Navigation.d.ts

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { ButtonProps } from '@citric/core/dist/Button.js';
+export interface StepperNavigationProps extends ButtonProps {
+    /**
+     * Prop used to pass specific text to the next button.
+     */
+    nextButtonText?: string;
+    /**
+     * Function that is rendered when pressing the skip button.
+     */
+    onSkip?: () => void;
+    /**
+     * Boolean that is used as a conditional to appear the skip button.
+     */
+    canSkip?: boolean;
+    /**
+     * Boolean that is used as a conditional to appear the loading icon in next button.
+     */
+    isLoading?: boolean;
+    /**
+     * Function that is rendered when pressing the back button.
+     */
+    onGoBack?: () => void;
+    /**
+     * Function that is rendered when pressing the next button.
+     */
+    onSubmit?: () => void;
+}
+/**
+ * Renders a component that represents the stepper component's navigation buttons, containing the button options (back, skip, and next).
+ *
+ * The component stepper wraps this component.
+ */
+export declare const StepperNavigation: FC<Omit<StepperNavigationProps, 'children'>>;
+//# sourceMappingURL=Navigation.d.ts.map

package/dist/components/Stepper/Navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Navigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAc,MAAM,OAAO,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAItD,MAAM,WAAW,sBAAuB,SAAQ,WAAW;IACzD;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAOD;;;;GAIG;AAEH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,CAqCvE,CAAA"}

package/dist/components/Stepper/Navigation.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, Text } from '@citric/core';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useContext } from 'react';
+import { styled } from 'styled-components';
+import { useLoadingComponent } from '../../context/loading.js';
+import { StepperContext } from './Stepper.js';
+const Wrapper = styled(Flex) `
+  width: 100%;
+  justify-content: space-between;
+`;
+/**
+ * Renders a component that represents the stepper component's navigation buttons, containing the button options (back, skip, and next).
+ *
+ * The component stepper wraps this component.
+ */
+export const StepperNavigation = ({ nextButtonText, onSkip, onGoBack, canSkip = false, isLoading, disabled, onSubmit }) => {
+    const t = useTranslate(dictionary);
+    const { goToNextStep, goToPreviousStep } = useContext(StepperContext);
+    const Loading = useLoadingComponent();
+    return (_jsxs(Wrapper, { children: [_jsx(Button, { appearance: "contained", colorScheme: "inverse", onClick: () => {
+                    onGoBack && onGoBack();
+                    goToPreviousStep();
+                }, children: t.back }), _jsxs(Flex, { children: [canSkip && (_jsx(Button, { appearance: "text", colorScheme: "inverse", onClick: () => {
+                            onSkip && onSkip();
+                            goToNextStep();
+                        }, children: t.skip })), _jsxs(Button, { type: "submit", onClick: onSubmit, sx: { position: 'relative' }, disabled: isLoading || disabled, children: [_jsx(Text, { as: "span", sx: { visibility: isLoading ? 'hidden' : 'visible' }, children: nextButtonText ?? t.next }), isLoading && Loading] })] })] }));
+};
+const dictionary = {
+    en: {
+        back: 'Back',
+        skip: 'Skip',
+        next: 'Next',
+    },
+    pt: {
+        back: 'Voltar',
+        skip: 'Pular',
+        next: 'Próximo',
+    },
+};
+//# sourceMappingURL=Navigation.js.map

package/dist/components/Stepper/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/components/Stepper/Navigation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACjD,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAM,UAAU,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AA6B1C,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAG3B,CAAA;AAED;;;;GAIG;AAEH,MAAM,CAAC,MAAM,iBAAiB,GAAiD,CAC7E,EAAE,cAAc,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IACrE,MAAM,OAAO,GAAG,mBAAmB,EAAE,CAAA;IAErC,OAAO,CACL,MAAC,OAAO,eACN,KAAC,MAAM,IACL,UAAU,EAAC,WAAW,EACtB,WAAW,EAAC,SAAS,EACrB,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,IAAI,QAAQ,EAAE,CAAA;oBACtB,gBAAgB,EAAE,CAAA;gBACpB,CAAC,YAEA,CAAC,CAAC,IAAI,GACA,EACT,MAAC,IAAI,eACF,OAAO,IAAI,CACV,KAAC,MAAM,IACL,UAAU,EAAC,MAAM,EACjB,WAAW,EAAC,SAAS,EACrB,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,IAAI,MAAM,EAAE,CAAA;4BAClB,YAAY,EAAE,CAAA;wBAChB,CAAC,YAEA,CAAC,CAAC,IAAI,GACA,CACV,EACD,MAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,SAAS,IAAI,QAAQ,aACpG,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,YAAG,cAAc,IAAI,CAAC,CAAC,IAAI,GAAQ,EACtG,SAAS,IAAI,OAAO,IACd,IACJ,IACC,CACX,CAAA;AAAA,CAAC,CAAA;AAEJ,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,SAAS;KAChB;CACmB,CAAA"}

package/dist/components/Stepper/Step.d.ts

@@ -0,0 +1,18 @@
+import { FC, PropsWithChildren } from 'react';
+export interface StepProps extends PropsWithChildren {
+    /**
+     * Name given to the step.
+     */
+    name: string;
+    /**
+     * Title given to the step.
+     */
+    title: string;
+}
+/**
+ * Renders a component that represents the body of a step within the stepper component.
+ *
+ * The component stepper wraps this component.
+ */
+export declare const Step: FC<StepProps>;
+//# sourceMappingURL=Step.d.ts.map

package/dist/components/Stepper/Step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Step.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAG7C,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAMD;;;;GAIG;AAEH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAI9B,CAAA"}

package/dist/components/Stepper/Step.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@citric/core';
+import { styled } from 'styled-components';
+const Wrapper = styled(Box) `
+  width: 100%;
+`;
+/**
+ * Renders a component that represents the body of a step within the stepper component.
+ *
+ * The component stepper wraps this component.
+ */
+export const Step = ({ children }) => (_jsx(Wrapper, { children: children }));
+//# sourceMappingURL=Step.js.map

package/dist/components/Stepper/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../../src/components/Stepper/Step.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAA;AAElC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAa1C,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE1B,CAAA;AAED;;;;GAIG;AAEH,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACnD,KAAC,OAAO,cACL,QAAQ,GACD,CACX,CAAA"}

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,45 @@
+import { FC, ReactElement } from 'react';
+import { StepProps } from './Step.js';
+export interface StepperContextProps {
+    /**
+     * Informs the index of the active step.
+     */
+    activeIndex: number;
+    /**
+     * Informs data for all steps.
+     * @default 0
+     */
+    stepsData: Record<string, any>;
+    /**
+     * Saves data for a given steps.
+     */
+    setStepData: (name: string, data: any) => void;
+    /**
+     * Takes data from a given step.
+     */
+    getStepData: (name: string) => any | null | undefined;
+    /**
+     * Navigate to the next step.
+     */
+    goToNextStep: () => void;
+    /**
+     * Navigate to the previous step.
+     */
+    goToPreviousStep: () => void;
+    /**
+     * Navigate to the provided step.
+     */
+    goToStep: (step: number) => void;
+}
+declare const StepperContext: import("react").Context<StepperContextProps>;
+export interface StepperProps {
+    children: ReactElement<StepProps>[];
+}
+/**
+ * Renders a component that provides an interface of steps for creating some content.
+ *
+ * The component wraps the Step component.
+ */
+declare const Stepper: FC<StepperProps>;
+export { StepperContext, Stepper };
+//# sourceMappingURL=Stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,YAAY,EAA2B,MAAM,OAAO,CAAA;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElC,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,GAAG,GAAG,IAAI,GAAG,SAAS,CAAC;IACtD;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAED,QAAA,MAAM,cAAc,8CAQlB,CAAA;AAEF,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;CACrC;AAWD;;;;GAIG;AAEH,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CA2C7B,CAAA;AACD,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,CAAA"}