@stack-spot/citric-react 0.1.0

package/dist/components/Table.d.ts

@@ -0,0 +1,106 @@
+import { HTMLExtension } from '../types.js';
+export interface BaseTableProps {
+    /**
+     * The overall table's appearance. Includes a default configuration for every other styling related prop.
+     *
+     * @default 'spaced'
+     */
+    appearance?: 'stripped' | 'spaced';
+    /**
+     * Whether or not to color each row a different color. Only valid when appearance is "spaced".
+     *
+     * @default false
+     */
+    stripped?: boolean;
+    /**
+     * If true, there's no spacing between rows. Only valid when appearance is "spaced".
+     *
+     * @default false
+     */
+    compressed?: boolean;
+    /**
+     * Shows an outer border for the whole table.
+     *
+     * @default "true if appearance is 'stripped', false otherwise"
+     */
+    showBorders?: boolean;
+    /**
+     * Shows borders in each of the rows.
+     *
+     * @default false
+     */
+    showRowBorders?: boolean;
+    /**
+     * Shows borders in the header.
+     *
+     * @default "false if appearance is 'stripped', true otherwise"
+     */
+    showHeaderBorders?: boolean;
+    /**
+     * Whether or not the table borders are rounded.
+     *
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Whether or not each row in the table have rounded borders.
+     *
+     * @default "false if appearance is 'stripped', true otherwise"
+     */
+    roundedRows?: boolean;
+    /**
+     * If true, all headers are uppercase.
+     *
+     * @default false
+     */
+    uppercaseHeader?: boolean;
+    /**
+     * Allows rows to act as accordions. To create an accordion row, use `<tbody>` to group two `<tr>` elements, where the first is the actual
+     * row and the second is the collapsible content of the row. The row with the collapsible content must be defined as `<Tr accordion>`.
+     *
+     * @default false
+     */
+    accordionRows?: boolean;
+}
+export type SortingDirection = 'asc' | 'desc';
+interface BaseThProps {
+    /**
+     * Which is the current direction of the sorting? Only relevant if 'onSort' is set.
+     *
+     * @default 'desc'
+     */
+    direction?: SortingDirection;
+    /**
+     * What to do when the header is clicked (sorting).
+     */
+    onSort?: (value: SortingDirection | undefined) => void;
+}
+interface BaseTrProps {
+    /**
+     * True if this table is an accordion, false otherwise.
+     *
+     * @default false
+     */
+    accordion?: boolean;
+    /**
+     * If the next row is an accordion, what should make it expand or contract? A click on a button in the last column or a click anywhere in
+     * the row?
+     *
+     * @default 'button'
+     */
+    accordionTrigger?: 'button' | 'row';
+    /**
+     * Sets the maximum height of this accordion. Only valid if `accordion` is true.
+     *
+     * @default '200px'
+     */
+    accordionMaxHeight?: string;
+}
+export type TableProps = HTMLExtension<'table', BaseTableProps>;
+export type ThProps = HTMLExtension<'th', BaseThProps>;
+export type TrProps = HTMLExtension<'tr', BaseTrProps>;
+export declare const Table: ({ appearance, stripped, compressed, showBorders, showHeaderBorders, showRowBorders, rounded, roundedRows, uppercaseHeader, className, children, accordionRows, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Th: ({ direction, onSort, children, className, ...props }: ThProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tr: ({ accordion, accordionTrigger, accordionMaxHeight, children, className, style, onClick, ...props }: TrProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAIxC,MAAM,WAAW,cAAc;IAC7B;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,CAAA;AAE7C,UAAU,WAAW;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,KAAK,IAAI,CAAC;CACxD;AAED,UAAU,WAAW;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACpC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,EAAE,cAAc,CAAC,CAAA;AAC/D,MAAM,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;AACtD,MAAM,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,EAAE,WAAW,CAAC,CAAA;AAEtD,eAAO,MAAM,KAAK,GAAI,2KAGnB,UAAU,4CAkBZ,CAAA;AAED,eAAO,MAAM,EAAE,GAAI,sDAAsD,OAAO,4CA0B/E,CAAA;AAED,eAAO,MAAM,EAAE,GAAI,oGAAoG,OAAO,4CA0C7H,CAAA"}

package/dist/components/Table.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useEffect, useRef } from 'react';
+import { applyCSSVariable } from '../utils/css.js';
+import { CitricComponent } from './CitricComponent.js';
+export const Table = ({ appearance, stripped, compressed, showBorders, showHeaderBorders, showRowBorders, rounded, roundedRows, uppercaseHeader, className, children, accordionRows, ...props }) => {
+    const classes = listToClass([
+        className,
+        stripped && 'stripped',
+        compressed && 'compressed',
+        showBorders && 'bordered',
+        showHeaderBorders === false && 'borderless-header',
+        showRowBorders && 'bordered-rows',
+        rounded === false && 'square',
+        roundedRows === false && 'square-rows',
+        uppercaseHeader && 'uppercase-header',
+        accordionRows && 'accordion-rows',
+    ]);
+    return (_jsx(CitricComponent, { tag: "table", component: "table", "data-appearance": appearance, className: classes, ...props, children: children }));
+};
+export const Th = ({ direction, onSort, children, className, ...props }) => {
+    const t = useTranslate(dictionary);
+    let tip;
+    const label = typeof children === 'string' ? children : undefined;
+    if (onSort && !direction)
+        tip = label ? `${label}. ${t.sortAscending}` : t.sortAscending;
+    if (onSort && direction === 'asc')
+        tip = label ? `${label}. ${t.sortDescending}` : t.sortDescending;
+    if (onSort && direction === 'desc')
+        tip = label ? `${label}. ${t.sortNone}` : t.sortNone;
+    function handleSort() {
+        if (!direction)
+            onSort?.('asc');
+        else if (direction === 'asc')
+            onSort?.('desc');
+        else
+            onSort?.(undefined);
+    }
+    return (_jsx("th", { className: listToClass([onSort && 'sortable', direction, className]), onClick: onSort ? handleSort : undefined, onKeyDown: onSort ? (e => e.key === 'Enter' && handleSort()) : undefined, "aria-label": tip, tabIndex: onSort ? 0 : undefined, ...props, children: children }));
+};
+export const Tr = ({ accordion, accordionTrigger, accordionMaxHeight, children, className, style, onClick, ...props }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (!accordion)
+            return;
+        const checkbox = ref.current?.closest('tbody')?.querySelector('td:last-child input[aria-controls]');
+        if (checkbox instanceof HTMLElement) {
+            const onChange = (e) => {
+                if (!ref.current || !(e.target instanceof HTMLInputElement))
+                    return;
+                if (e.target.checked) {
+                    ref.current.setAttribute('aria-hidden', 'false');
+                    ref.current.removeAttribute('inert');
+                }
+                else {
+                    ref.current.setAttribute('aria-hidden', 'true');
+                    ref.current.setAttribute('inert', 'true');
+                }
+            };
+            checkbox.addEventListener('change', onChange);
+            return () => checkbox.removeEventListener('change', onChange);
+        }
+    }, [ref.current]);
+    return (_jsx("tr", { ref: ref, ...props, className: listToClass([className, accordion && 'accordion', accordionTrigger === 'row' && 'clickable']), onClick: accordionTrigger === 'row'
+            ? (e) => {
+                const checkbox = ref.current?.querySelector('td:last-child input[aria-controls]');
+                if (checkbox instanceof HTMLInputElement && e.target !== checkbox)
+                    checkbox.click();
+                onClick?.(e);
+            }
+            : onClick, style: applyCSSVariable(style, 'max-height', accordionMaxHeight), "aria-hidden": accordion, ...(accordion ? { inert: 'true' } : {}), children: children }));
+};
+const dictionary = {
+    en: {
+        sortAscending: 'Click to sort in ascending order.',
+        sortDescending: 'Click to sort in descending order.',
+        sortNone: 'Click to remove sorting.',
+    },
+    pt: {
+        sortAscending: 'Clique para ordenar em ordem crescente.',
+        sortDescending: 'Clique para ordenar em ordem decrescente.',
+        sortNone: 'Clique para remover a ordenação.',
+    },
+};
+//# sourceMappingURL=Table.js.map

package/dist/components/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"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"}

package/dist/components/Tabs/TabController.d.ts

@@ -0,0 +1,11 @@
+import { ValueController } from '../../utils/ValueController.js';
+export declare class TabController<Key extends string> extends ValueController<Key> {
+    private tabOrder;
+    constructor(tabOrder: Key[], value: Key);
+    private getCurrentIndex;
+    hasNext(): boolean;
+    hasPrevious(): boolean;
+    next(): boolean;
+    previous(): boolean;
+}
+//# sourceMappingURL=TabController.d.ts.map

package/dist/components/Tabs/TabController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabController.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,qBAAa,aAAa,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,eAAe,CAAC,GAAG,CAAC;IACzE,OAAO,CAAC,QAAQ,CAAO;gBAEX,QAAQ,EAAE,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG;IAKvC,OAAO,CAAC,eAAe;IAIvB,OAAO,IAAI,OAAO;IAKlB,WAAW,IAAI,OAAO;IAKtB,IAAI,IAAI,OAAO;IAQf,QAAQ,IAAI,OAAO;CAOpB"}

package/dist/components/Tabs/TabController.js

@@ -0,0 +1,39 @@
+import { ValueController } from '../../utils/ValueController.js';
+export class TabController extends ValueController {
+    constructor(tabOrder, value) {
+        super(value);
+        Object.defineProperty(this, "tabOrder", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.tabOrder = tabOrder;
+    }
+    getCurrentIndex() {
+        return this.tabOrder.findIndex(t => t === this.value);
+    }
+    hasNext() {
+        const current = this.getCurrentIndex();
+        return current > -1 && current + 1 < this.tabOrder.length;
+    }
+    hasPrevious() {
+        const current = this.getCurrentIndex();
+        return current > -1 && current - 1 >= 0;
+    }
+    next() {
+        if (this.hasNext()) {
+            this.setValue(this.tabOrder[this.getCurrentIndex() + 1]);
+            return true;
+        }
+        return false;
+    }
+    previous() {
+        if (this.hasPrevious()) {
+            this.setValue(this.tabOrder[this.getCurrentIndex() - 1]);
+            return true;
+        }
+        return false;
+    }
+}
+//# sourceMappingURL=TabController.js.map

package/dist/components/Tabs/TabController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabController.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAE7D,MAAM,OAAO,aAAkC,SAAQ,eAAoB;IAGzE,YAAY,QAAe,EAAE,KAAU;QACrC,KAAK,CAAC,KAAK,CAAC,CAAA;QAHN;;;;;WAAe;QAIrB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAC1B,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAA;IACvD,CAAC;IAED,OAAO;QACL,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACtC,OAAO,OAAO,GAAG,CAAC,CAAC,IAAI,OAAO,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAA;IAC3D,CAAC;IAED,WAAW;QACT,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QACtC,OAAO,OAAO,GAAG,CAAC,CAAC,IAAI,OAAO,GAAG,CAAC,IAAI,CAAC,CAAA;IACzC,CAAC;IAED,IAAI;QACF,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACxD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;IAED,QAAQ;QACN,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;YACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC,CAAC,CAAA;YACxD,OAAO,IAAI,CAAA;QACb,CAAC;QACD,OAAO,KAAK,CAAA;IACd,CAAC;CACF"}

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,5 @@
+import { TabController } from './TabController.js';
+import { TabsProps } from './types.js';
+export declare function Tabs<Key extends string>({ tabs, value, onChange, controller: ctrl, ...props }: TabsProps<Key>): import("react/jsx-runtime").JSX.Element;
+export declare function useTabController<Key extends string = string>(): TabController<Key> | undefined;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAKnC,wBAAgB,IAAI,CAAC,GAAG,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,GAAG,CAAC,2CAsC7G;AAED,wBAAgB,gBAAgB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,KAAK,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS,CAE9F"}

package/dist/components/Tabs/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslate } from '@stack-spot/portal-translate';
+import { createContext, Suspense, useContext, useEffect, useMemo, useState } from 'react';
+import { CitricComponent } from '../CitricComponent.js';
+import { ErrorBoundary } from '../ErrorBoundary.js';
+import { ProgressCircular } from '../ProgressCircular.js';
+import { Center } from '../layout.js';
+import { TabController } from './TabController.js';
+import { findSelectedIndex } from './utils.js';
+const ctx = createContext(undefined);
+export function Tabs({ tabs, value, onChange, controller: ctrl, ...props }) {
+    const controller = useMemo(() => ctrl ?? new TabController(tabs.map(t => t.key), value || tabs[0]?.key), []);
+    const t = useTranslate(dictionary);
+    const [selectedIndex, setSelectedIndex] = useState(findSelectedIndex(tabs, controller.getValue()));
+    useEffect(() => {
+        if (value)
+            controller.setValue(value);
+    }, [value]);
+    useEffect(() => controller.onChange((v) => {
+        setSelectedIndex(findSelectedIndex(tabs, v));
+        onChange?.(v);
+    }), [tabs]);
+    const nav = useMemo(() => tabs.map(({ key, label, disabled }, index) => (_jsxs("label", { children: [_jsx("input", { type: "radio", role: "tab", checked: index === selectedIndex, onChange: () => controller.setValue(key), disabled: disabled }), label || key] }, key))), [tabs, selectedIndex]);
+    return (_jsx(ctx.Provider, { value: controller, children: _jsxs(CitricComponent, { tag: "div", component: "tabs", ...props, children: [_jsx("nav", { children: nav }), _jsx("section", { children: _jsx(ErrorBoundary, { message: t.error, children: _jsx(Suspense, { fallback: _jsx(Center, { style: { padding: '20px' }, children: _jsx(ProgressCircular, {}) }), children: selectedIndex === -1 ? null : tabs[selectedIndex]?.content }) }, selectedIndex) })] }) }));
+}
+export function useTabController() {
+    return useContext(ctx);
+}
+const dictionary = {
+    en: {
+        error: 'Error while loading the tab.',
+    },
+    pt: {
+        error: 'Ocorreu um erro ao carregar a aba.',
+    },
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Tabs/types.d.ts

@@ -0,0 +1,46 @@
+import { HTMLExtension, WithColorPalette, WithColorScheme } from '../../types.js';
+import { TabController } from './TabController.js';
+export interface Tab<Key extends string> {
+    /**
+     * A unique identifier for the tab.
+     */
+    key: Key;
+    /**
+     * The tab's label. Will be the "key" if not provided.
+     */
+    label?: string;
+    /**
+     * The tab's content. This can be a suspended component.
+     *
+     * Attention: consider using React's lazy loading to render the tab view.
+     */
+    content: React.ReactNode;
+    /**
+     * Whether or not this tab is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+}
+export interface BaseTabsProps<Key extends string> extends WithColorScheme, WithColorPalette {
+    /**
+     * The tabs to render.
+     */
+    tabs: Tab<Key>[];
+    /**
+     * The key of the current tab. Use this only if you intend to control the tabs from the outside.
+     */
+    value?: Key;
+    /**
+     * What to do when the tab changes. Use this only if you intend to control the tabs from the outside.
+     *
+     * @param key the key of the selected tab.
+     */
+    onChange?: (key: Key) => void;
+    /**
+     * A tab-controller, useful if you want to control the tabs outside the component context.
+     */
+    controller?: TabController<Key>;
+}
+export type TabsProps<Key extends string> = HTMLExtension<'div', BaseTabsProps<Key>, 'children' | 'value' | 'onChange'>;
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Tabs/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,WAAW,GAAG,CAAC,GAAG,SAAS,MAAM;IACrC;;OAEG;IACH,GAAG,EAAE,GAAG,CAAC;IACT;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa,CAAC,GAAG,SAAS,MAAM,CAAE,SAAQ,eAAe,EAAE,gBAAgB;IAC1F;;OAEG;IACH,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;CACjC;AAED,MAAM,MAAM,SAAS,CAAC,GAAG,SAAS,MAAM,IAAI,aAAa,CAAC,KAAK,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC,CAAA"}

package/dist/components/Tabs/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/Tabs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":""}

package/dist/components/Tabs/utils.d.ts

@@ -0,0 +1,3 @@
+import { Tab } from './types.js';
+export declare function findSelectedIndex<Key extends string>(tabs: Tab<Key>[], selectedTabKey: Key): number;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/Tabs/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA;AAE7B,wBAAgB,iBAAiB,CAAC,GAAG,SAAS,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,cAAc,EAAE,GAAG,UAG1F"}

package/dist/components/Tabs/utils.js

@@ -0,0 +1,5 @@
+export function findSelectedIndex(tabs, selectedTabKey) {
+    const index = tabs.findIndex(t => t.key === selectedTabKey);
+    return index === -1 ? 0 : index;
+}
+//# sourceMappingURL=utils.js.map

package/dist/components/Tabs/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Tabs/utils.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,iBAAiB,CAAqB,IAAgB,EAAE,cAAmB;IACzF,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,cAAc,CAAC,CAAA;IAC3D,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;AACjC,CAAC"}

package/dist/components/Text.d.ts

@@ -0,0 +1,27 @@
+import { HTMLExtension, TextAppearance, WithColor } from '../types.js';
+type SupportedTags = 'span' | 'small' | 'p' | `h${1 | 2 | 3 | 4 | 5 | 6}` | 'pre';
+export interface BaseTextProps<T extends SupportedTags = SupportedTags> extends WithColor {
+    /**
+     * If "tag" is not defined, it will be based on the value of "appearance".
+     * If neither "appearance" or "tag" are defined, the tag will be "p".
+     */
+    tag?: T;
+    /**
+     * If "appearance" is not defined, it will be based on the value of "tag".
+     * If neither "appearance" or "tag" are defined, the appearance will be inherited from the parent HTML element.
+     */
+    appearance?: TextAppearance;
+    /**
+     * Add default margins to the text.
+     *
+     * @default false
+     */
+    showMargins?: boolean;
+}
+export type TextProps<T extends SupportedTags> = HTMLExtension<T, BaseTextProps<T>>;
+export declare function Text<T extends SupportedTags>({ tag, appearance, color, showMargins, style, className, children, ...props }: TextProps<T>): import("react").DetailedReactHTMLElement<{
+    className: string;
+    style: import("react").CSSProperties | undefined;
+} & Omit<TextProps<T>, "style" | "color" | "appearance" | "tag" | "className" | "children" | "showMargins">, HTMLSpanElement>;
+export {};
+//# sourceMappingURL=Text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAGnE,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,GAAG,IAAI,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,GAAC,CAAC,EAAE,GAAG,KAAK,CAAA;AAEvE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,SAAS;IACvF;;;OAGG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;IACR;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,IAAI,aAAa,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,CAAA;AAoCnF,wBAAgB,IAAI,CAAC,CAAC,SAAS,aAAa,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC;;;8HAYxI"}

package/dist/components/Text.js

@@ -0,0 +1,45 @@
+import { listToClass } from '@stack-spot/portal-theme';
+import { createElement } from 'react';
+import { applyColor, applyTextAppearance } from '../utils/css.js';
+const tagToAppearance = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    span: undefined,
+    small: 'microtext1',
+    p: 'body2',
+    pre: 'code2',
+};
+const appearanceToTag = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    body1: 'p',
+    body2: 'p',
+    code1: 'pre',
+    code2: 'pre',
+    display1: 'h1',
+    microtext1: 'small',
+    overheader1: 'p',
+    overheader2: 'p',
+    subtitle1: 'p',
+    subtitle2: 'p',
+    subtitle3: 'p',
+    subtitle4: 'p',
+};
+export function Text({ tag, appearance, color, showMargins, style, className, children, ...props }) {
+    const renderedTag = tag || appearanceToTag[appearance || 'body2'];
+    const renderedAppearance = appearance || (tag ? tagToAppearance[tag] : undefined);
+    return createElement(renderedTag, {
+        className: applyTextAppearance(listToClass([className, showMargins && 'text-with-margins']), renderedAppearance),
+        style: applyColor(style, color),
+        ...props,
+    }, children);
+}
+//# sourceMappingURL=Text.js.map

package/dist/components/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/components/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAyB9D,MAAM,eAAe,GAAsD;IACzE,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,SAAS;IACf,KAAK,EAAE,YAAY;IACnB,CAAC,EAAE,OAAO;IACV,GAAG,EAAE,OAAO;CACb,CAAA;AAED,MAAM,eAAe,GAA0C;IAC7D,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,IAAI;IACd,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,GAAG;IAChB,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;IACd,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,UAAU,IAAI,CAA0B,EAAE,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgB;IACvI,MAAM,WAAW,GAAG,GAAG,IAAI,eAAe,CAAC,UAAU,IAAI,OAAO,CAAC,CAAA;IACjE,MAAM,kBAAkB,GAAG,UAAU,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;IACjF,OAAO,aAAa,CAClB,WAAW,EACX;QACE,SAAS,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC,SAAS,EAAE,WAAW,IAAI,mBAAmB,CAAC,CAAC,EAAE,kBAAkB,CAAC;QAChH,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC;QAC/B,GAAG,KAAK;KACT,EACD,QAAQ,CACT,CAAA;AACH,CAAC"}

package/dist/components/Textarea.d.ts

@@ -0,0 +1,8 @@
+import { HTMLExtension, WithColorScheme } from '../types.js';
+export interface BaseTextareaProps extends WithColorScheme {
+    value?: string;
+    onChange?: (value: string) => void;
+}
+export type TextareaProps = HTMLExtension<'textarea', BaseTextareaProps, 'onChange'>;
+export declare const Textarea: ({ value, onChange, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAGzD,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAA;AAEpF,eAAO,MAAM,QAAQ,GAAI,+BAA+B,aAAa,4CACwD,CAAA"}

package/dist/components/Textarea.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CitricComponent } from './CitricComponent.js';
+export const Textarea = ({ value, onChange, ...props }) => _jsx(CitricComponent, { tag: "textarea", component: "textarea", value: value, onChange: e => onChange?.(e.target.value), ...props });
+//# sourceMappingURL=Textarea.js.map

package/dist/components/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/components/Textarea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AASnD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CACvE,KAAC,eAAe,IAAC,GAAG,EAAC,UAAU,EAAC,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,KAAM,KAAK,GAAI,CAAA"}

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,25 @@
+import { HTMLExtension, WithColorPalette, WithColorScheme } from '../types.js';
+import { BaseOverlayProps } from './Overlay/types.js';
+export interface BaseTooltipProps extends Omit<BaseOverlayProps<'div'>, 'tag' | 'onRenderChild' | 'reference'>, WithColorPalette, WithColorScheme {
+    /**
+     * Whether or not to show the tooltip's arrow.
+     *
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * The unique id of the HTML element to be created to show the tooltip. If not provided, a random number will be used.
+     */
+    tooltipId?: string;
+    /**
+     * Makes the tooltip text compact, centering it better when it's a single line.
+     *
+     * Effectively, it makes the line height equals to 1 and applies a slightly larger padding.
+     *
+     * @default true
+     */
+    compact?: boolean;
+}
+export type TooltipProps = HTMLExtension<'div', BaseTooltipProps, 'children' | 'content'>;
+export declare const Tooltip: ({ tooltipId, children, showArrow, compact, attributes, colorScheme, colorPalette, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAElD,MAAM,WAAW,gBAAiB,SAChC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,WAAW,CAAC,EAAE,gBAAgB,EAAE,eAAe;IACvG;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC,KAAK,EAAE,gBAAgB,EAAE,UAAU,GAAG,SAAS,CAAC,CAAA;AAEzF,eAAO,MAAM,OAAO,GAClB,8FAA4G,YAAY,4CAqBzH,CAAA"}

package/dist/components/Tooltip.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { listToClass } from '@stack-spot/portal-theme';
+import { useRef } from 'react';
+import { Overlay } from './Overlay/index.js';
+export const Tooltip = ({ tooltipId, children, showArrow = true, compact = true, attributes, colorScheme, colorPalette, ...props }) => {
+    const id = useRef(tooltipId || `${Math.random()}`);
+    return (_jsx(Overlay, { attributes: {
+            className: listToClass([attributes?.className, showArrow && 'with-arrow', compact && 'compact']),
+            style: { margin: '6px', ...attributes?.style },
+            role: 'tooltip',
+            id: id.current,
+            'data-citric': 'tooltip',
+            'data-color-scheme': colorScheme,
+            'data-color-palette': colorPalette,
+            ...attributes,
+        }, onRenderChild: e => e.setAttribute('aria-describedby', id.current), ...props, children: children }));
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AA2BnC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,GAAG,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EACxH,EAAE;IACF,MAAM,EAAE,GAAG,MAAM,CAAC,SAAS,IAAI,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAA;IAClD,OAAO,CACL,KAAC,OAAO,IACN,UAAU,EAAE;YACV,SAAS,EAAE,WAAW,CAAC,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,IAAI,YAAY,EAAE,OAAO,IAAI,SAAS,CAAC,CAAC;YAChG,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,KAAK,EAAE;YAC9C,IAAI,EAAE,SAAS;YACf,EAAE,EAAE,EAAE,CAAC,OAAO;YACd,aAAa,EAAE,SAAS;YACxB,mBAAmB,EAAE,WAAW;YAChC,oBAAoB,EAAE,YAAY;YAClC,GAAG,UAAU;SACd,EACD,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,kBAAkB,EAAE,EAAE,CAAC,OAAO,CAAC,KAC9D,KAAK,YAER,QAAQ,GACD,CACX,CAAA;AACH,CAAC,CAAA"}

package/dist/components/layout.d.ts

@@ -0,0 +1,46 @@
+import { HTMLExtension, WithStyleShortcuts } from '../types.js';
+export declare const layout: {
+    center: string;
+    row: string;
+    column: string;
+};
+export interface BaseLayoutProps<T extends keyof React.JSX.IntrinsicElements> extends WithStyleShortcuts {
+    /**
+     * HTML tag to render.
+     *
+     * @default 'div'
+     */
+    tag?: T;
+}
+export interface BaseRowProps<T extends keyof React.JSX.IntrinsicElements> extends BaseLayoutProps<T> {
+    /**
+     * Whether or not to center items horizontally.
+     *
+     * @default true
+     */
+    center?: boolean;
+}
+export interface BaseColumnProps<T extends keyof React.JSX.IntrinsicElements> extends BaseLayoutProps<T> {
+    /**
+     * Whether or not to center items vertically.
+     *
+     * @default false
+     */
+    center?: boolean;
+}
+export type CenterProps<T extends keyof React.JSX.IntrinsicElements> = HTMLExtension<T, BaseLayoutProps<T>>;
+export type RowProps<T extends keyof React.JSX.IntrinsicElements> = HTMLExtension<T, BaseRowProps<T>>;
+export type ColumnProps<T extends keyof React.JSX.IntrinsicElements> = HTMLExtension<T, BaseColumnProps<T>>;
+export declare function Center<T extends keyof React.JSX.IntrinsicElements = 'div'>({ tag, className, ...props }: CenterProps<T>): import("react").ReactElement<{
+    style: Partial<import("react").CSSProperties>;
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare function Row<T extends keyof React.JSX.IntrinsicElements = 'div'>({ tag, className, center, ...props }: RowProps<T>): import("react").ReactElement<{
+    style: Partial<import("react").CSSProperties>;
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare function Column<T extends keyof React.JSX.IntrinsicElements = 'div'>({ tag, className, center, ...props }: ColumnProps<T>): import("react").ReactElement<{
+    style: Partial<import("react").CSSProperties>;
+    className: string;
+}, string | import("react").JSXElementConstructor<any>>;
+//# sourceMappingURL=layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/components/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAG5D,eAAO,MAAM,MAAM;;;;CAIlB,CAAA;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAE,SAAQ,kBAAkB;IACtG;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACnG;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACtG;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,IAAI,aAAa,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAA;AAC3G,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,IAAI,aAAa,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAA;AACrG,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,IAAI,aAAa,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAA;AAE3G,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAEvH;AAED,wBAAgB,GAAG,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC;;;wDAEzH;AAED,wBAAgB,MAAM,CAAC,CAAC,SAAS,MAAM,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;;;wDAE/H"}