@seeqdev/qomponents 0.0.176 → 0.0.177

package/dist/SvgIcon/SvgIcon.types.d.ts

@@ -0,0 +1,75 @@
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+export declare const svgIconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success", "default"];
+export type SvgIconType = (typeof svgIconTypes)[number];
+/**
+ * Props for the SvgIcon component that renders SVG-based icons with various styling options.
+ * Extends TooltipComponentProps to support tooltip functionality on the icon.
+ * Similar to Icon component but specifically for SVG icons instead of font icons.
+ */
+export interface SvgIconProps extends TooltipComponentProps {
+    /**
+     * SVG icon identifier or class name to display.
+     * This should correspond to an available SVG icon in your icon system.
+     * Examples: 'fc-zoom', 'fc-delete', 'custom-arrow'.
+     */
+    icon: string;
+    /**
+     * Visual style type that determines the icon's color and appearance:
+     * - `default`: Uses automatic dark/light text colors based on theme
+     * - `theme`: Uses primary theme colors
+     * - `white`: Pure white color
+     * - `text`: Uses standard text color
+     * - `dark-gray`: Dark gray color
+     * - `darkish-gray`: Medium-dark gray color
+     * - `gray`: Standard gray color
+     * - `color`: Uses custom color specified in `color` prop
+     * - `info`: Blue informational color
+     * - `warning`: Yellow/orange warning color
+     * - `danger`: Red error/danger color
+     * - `success`: Green success color
+     * - `theme-light`: Lighter version of theme color
+     * - `inherit`: Inherits color from parent element
+     * @default 'default'
+     */
+    type?: SvgIconType;
+    /**
+     * Custom color value for the icon when `type` is set to 'color'.
+     * Can be any valid CSS color (hex, rgb, color names, etc.).
+     * This property is required when type is 'color'.
+     */
+    color?: string;
+    /**
+     * Callback function triggered when the icon is clicked.
+     * Receives the mouse event as a parameter. Use this to make icons interactive
+     * for actions like opening menus, triggering functions, or navigation.
+     */
+    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => any;
+    /**
+     * Additional CSS classes to apply to the SVG icon element.
+     * Use this to customize the icon's appearance, spacing, or behavior beyond built-in options.
+     */
+    extraClassNames?: string;
+    /**
+     * HTML ID attribute for the SVG icon element.
+     * Should be unique across the page for proper HTML semantics and accessibility.
+     */
+    id?: string;
+    /**
+     * Test ID attribute for the SVG icon element used in automated testing.
+     * Applied to the `data-testid` attribute for element selection in test suites.
+     */
+    testId?: string;
+    /**
+     * Custom identifier placed in the `data-customid` attribute on the icon element.
+     * Useful for identifying the specific icon in event handlers when multiple icons
+     * share the same click handler. Helps distinguish which icon was clicked.
+     */
+    customId?: string;
+    /**
+     * SVG viewBox attribute that defines the coordinate system and aspect ratio.
+     * Format: "min-x min-y width height" (e.g., "0 0 24 24").
+     * If not provided, uses the default viewBox from the SVG definition.
+     * Use this to crop or scale the icon's visible area.
+     */
+    viewBox?: string;
+}

package/dist/SvgIcon/SvgIcon.types.js

@@ -0,0 +1,3 @@
+import { iconTypes } from '../Icon/Icon.types';
+export const svgIconTypes = [...iconTypes, 'default'];
+//# sourceMappingURL=SvgIcon.types.js.map

package/dist/SvgIcon/SvgIcon.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SvgIcon.types.js","sourceRoot":"","sources":["../../src/SvgIcon/SvgIcon.types.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,GAAG,SAAS,EAAE,SAAS,CAAU,CAAC"}

package/dist/SvgIcon/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SvgIcon';

package/dist/SvgIcon/index.js

@@ -0,0 +1,2 @@
+export { default } from './SvgIcon';
+//# sourceMappingURL=index.js.map

package/dist/SvgIcon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/SvgIcon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TabsProps } from './Tabs.types';
+declare const Tabs: React.FunctionComponent<TabsProps>;
+export default Tabs;

package/dist/Tabs/Tabs.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Content, List, Root, Trigger } from '@radix-ui/react-tabs';
+import Icon from '../Icon';
+const Tabs = ({ tabs, defaultActiveTab, activeTab, onTabSelect, extraClassNames, testId, id, stretchTabs = false, }) => {
+    const handleTabSelect = (tabId) => {
+        if (activeTab === tabId)
+            return;
+        onTabSelect && onTabSelect(tabId);
+    };
+    return (_jsxs(Root, { className: `tw:flex tw:flex-col tw:min-w-75 tw:max-w-full tw:flex-grow tw:focus-visible:outline-none ${extraClassNames || ''}`, defaultValue: defaultActiveTab, "data-testid": testId, id: id, value: activeTab, onValueChange: handleTabSelect, children: [_jsx(List, { className: `tw:flex tw:flex-row tw:flex-wrap tw:z-[1001]`, children: tabs.map(({ id, icon, label, tabExtraClassNames, testId: tabsTestId, disabled, tabLabelExtraClassNames = '' }, index) => (_jsx(Trigger, { className: `tw:bg-sq-white tw:dark:bg-sq-dark-background tw:h-sq-25 tw:focus-visible:outline-none tw:min-w-25 tw:px-4 tw:border-solid tw:flex tw:flex-1 tw:justify-center tw:items-center tw:border-r-[2px] tw:last:border-r-0 tw:border-sq-overlay tw:dark:border-gray-700 ${stretchTabs ? '' : 'tw:max-w-max tw:min-w-fit'} ${tabExtraClassNames || ''} ${activeTab === id
+                        ? 'tw:border-b-sq-theme-darker tw:dark:border-b-sq-theme-darker tw:border-b-[0.1875rem]'
+                        : 'tw:hover:bg-sq-light-gray tw:border-b-[0.0625rem] tw:hover:dark:bg-gray-700'}`, "data-testid": tabsTestId, disabled: disabled, value: id, children: _jsxs("span", { className: "tw:flex tw:items-center tw:overflow-hidden", children: [icon && (_jsx(Icon, { icon: icon, testId: `${id}_tab-icon`, extraClassNames: "tw:text-sq-15 tw:mr-sq-7 tw:flex-shrink-0" })), _jsx("span", { className: `tw:text-sq-13 tw:font-medium tw:whitespace-nowrap tw:overflow-hidden tw:text-ellipsis ${activeTab === id
+                                    ? 'tw:dark:text-sq-dark-text tw:text-gray-500'
+                                    : 'tw:dark:text-sq-theme-darker tw:text-sq-theme-dark'} ${tabLabelExtraClassNames}`, children: label })] }) }, `${label}-${id}-${index}`))) }), tabs.map((tab, index) => (_jsx(Content, { className: `tw:bg-sq-white tw:dark:bg-sq-dark-background tw:overflow-y-auto tw:-mt-sq-1 tw:border-t-[0.0625rem] tw:border-t-sq-overlay tw:dark:border-t-gray-700 tw:z-[500] tw:flex tw:flex-col tw:flex-grow tw:focus-visible:outline-none ${tab.tabContentExtraClassNames || ''}`, value: tab.id, children: tab.content }, `${tab.label}_${index}_content`)))] }));
+};
+export default Tabs;
+//# sourceMappingURL=Tabs.js.map

package/dist/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,IAAI,MAAM,SAAS,CAAC;AAE3B,MAAM,IAAI,GAAuC,CAAC,EAChD,IAAI,EACJ,gBAAgB,EAChB,SAAS,EACT,WAAW,EACX,eAAe,EACf,MAAM,EACN,EAAE,EACF,WAAW,GAAG,KAAK,GACpB,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE;QACxC,IAAI,SAAS,KAAK,KAAK;YAAE,OAAO;QAChC,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,4FACT,eAAe,IAAI,EACrB,EAAE,EACF,YAAY,EAAE,gBAAgB,iBACjB,MAAM,EACnB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,eAAe,aAC9B,KAAC,IAAI,IAAC,SAAS,EAAE,8CAA8C,YAC5D,IAAI,CAAC,GAAG,CACP,CACE,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,uBAAuB,GAAG,EAAE,EAAE,EACnG,KAAK,EACL,EAAE,CAAC,CACH,KAAC,OAAO,IACN,SAAS,EAAE,mQACT,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,2BACrB,IAAI,kBAAkB,IAAI,EAAE,IAC1B,SAAS,KAAK,EAAE;wBACd,CAAC,CAAC,sFAAsF;wBACxF,CAAC,CAAC,6EACN,EAAE,iBACW,UAAU,EACvB,QAAQ,EAAE,QAAQ,EAElB,KAAK,EAAE,EAAE,YACT,gBAAM,SAAS,EAAC,4CAA4C,aACzD,IAAI,IAAI,CACP,KAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,GAAG,EAAE,WAAW,EACxB,eAAe,EAAC,2CAA2C,GAC3D,CACH,EACD,eACE,SAAS,EAAE,yFACT,SAAS,KAAK,EAAE;oCACd,CAAC,CAAC,4CAA4C;oCAC9C,CAAC,CAAC,oDACN,IAAI,uBAAuB,EAAE,YAC5B,KAAK,GACD,IACF,IAlBF,GAAG,KAAK,IAAI,EAAE,IAAI,KAAK,EAAE,CAmBtB,CACX,CACF,GACI,EACN,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,KAAC,OAAO,IACN,SAAS,EAAE,kOACT,GAAG,CAAC,yBAAyB,IAAI,EACnC,EAAE,EAEF,KAAK,EAAE,GAAG,CAAC,EAAE,YACZ,GAAG,CAAC,OAAO,IAFP,GAAG,GAAG,CAAC,KAAK,IAAI,KAAK,UAAU,CAG5B,CACX,CAAC,IACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllTabsVariants: () => import("react/jsx-runtime").JSX.Element;

package/dist/Tabs/Tabs.stories.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Tabs from './Tabs';
+import Button from '../Button';
+export default {
+    title: 'Tabs',
+};
+const renderData = () => (_jsxs("div", { className: "tw:text-sq-text-color tw:dark:text-sq-white", children: [_jsx("p", { className: "tw:mb-5 tw:text-sq-15 tw:leading-normal", children: "This is a data tab to show details about your data. You can make changes to your account" }), _jsx(Button, { variant: "outline", label: "Save data" })] }));
+const renderTools = () => (_jsxs("div", { className: "tw:text-sq-text-color tw:dark:text-sq-white", children: [_jsx("p", { className: "tw:mb-5 tw:text-sq-15 tw:leading-normal", children: "Make changes to your account here. Click save when you're done." }), _jsx(Button, { variant: "outline", label: "Save tools" })] }));
+const renderJournal = () => (_jsxs("div", { className: "tw:text-sq-text-color tw:dark:text-sq-white", children: [_jsx("p", { className: "tw:mb-5 tw:text-sq-15 tw:leading-normal", children: "Make changes to your account here. Click save when you're done." }), _jsx(Button, { variant: "outline", label: "Save journal" })] }));
+const tabsList = [
+    {
+        id: 'data',
+        label: 'Data',
+        icon: 'fc-data',
+        content: renderData(),
+    },
+    {
+        id: 'tools',
+        label: 'Tools',
+        icon: 'fc-gears-2',
+        content: renderTools(),
+    },
+    {
+        id: 'journal',
+        label: 'Journal',
+        icon: 'fc-workbook-lock',
+        content: renderJournal(),
+    },
+];
+const extraTabsList = [
+    {
+        id: 'data',
+        label: 'Data',
+        icon: 'fc-data',
+        content: renderData(),
+    },
+    {
+        id: 'tools',
+        label: 'Tools',
+        icon: 'fc-gears-2',
+        content: renderTools(),
+    },
+    {
+        id: 'journal',
+        label: 'Journal',
+        icon: 'fc-workbook-lock',
+        content: renderJournal(),
+    },
+    {
+        id: 'journal2',
+        label: 'Journal',
+        icon: 'fc-workbook-lock',
+        disabled: true,
+        content: renderJournal(),
+    },
+    {
+        id: 'data3',
+        label: 'Data 2',
+        icon: 'fc-data',
+        disabled: true,
+        content: renderData(),
+    },
+];
+const colors = ['topic', 'analysis', 'datalab', 'vantage'];
+export const AllTabsVariants = () => {
+    const [activeTab, setActiveTab] = React.useState('data');
+    const renderAllVariations = (color) => (_jsxs("div", { children: [_jsx("div", { className: "tw:p-4", children: _jsx(Tabs, { stretchTabs: true, activeTab: activeTab, onTabSelect: setActiveTab, defaultActiveTab: "data", tabs: tabsList }) }), _jsx("div", { className: "tw:p-4", children: _jsx(Tabs, { activeTab: activeTab, onTabSelect: (tabId) => setActiveTab(tabId), defaultActiveTab: "tool", tabs: extraTabsList.map((tab) => ({ ...tab, icon: undefined, tabExtraClassNames: 'tw:max-w-max' })) }) }), _jsxs("div", { className: "tw:p-4 tw-dark tw:bg-sq-dark-background ", children: [_jsxs("p", { className: "tw:text-sq-theme-dark tw:mb-8", children: [color[0].toUpperCase() + color.slice(1), " Dark mode"] }), _jsx(Tabs, { activeTab: activeTab, onTabSelect: (tabId) => setActiveTab(tabId), defaultActiveTab: "tools", tabs: tabsList.map((tab) => ({ ...tab, icon: undefined })) })] })] }, color + '_wrapper'));
+    return (_jsx("div", { className: "tw:grid tw:grid-cols-4 tw:gap-4", children: colors.map((color) => {
+            return (_jsxs("div", { className: `color_${color}`, children: [_jsxs("b", { children: [color[0].toUpperCase() + color.slice(1), " Colors"] }), renderAllVariations(color)] }, color));
+        }) }));
+};
+//# sourceMappingURL=Tabs.stories.js.map

package/dist/Tabs/Tabs.stories.js.map

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

package/dist/Tabs/Tabs.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Tabs/Tabs.test.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Tabs from './Tabs';
+const renderData = () => (_jsxs("div", { className: "tw:text-sq-text-color tw:dark:text-sq-white", children: [_jsx("p", { className: "tw:mb-5 tw:text-sq-15 tw:leading-normal", children: "This is a data tab to show details about your data. You can make changes to your account" }), _jsx("button", { children: "save data" })] }));
+const renderTools = () => (_jsxs("div", { className: "tw:text-sq-text-color tw:dark:text-sq-white", children: [_jsx("p", { className: "tw:mb-5 tw:text-sq-15 tw:leading-normal", children: "Make changes to your account here. Click save when you're done." }), _jsx("button", { children: "save tools" })] }));
+const renderJournal = () => (_jsxs("div", { className: "tw:text-sq-text-color tw:dark:text-sq-white", children: [_jsx("p", { className: "tw:mb-5 tw:text-sq-15 tw:leading-normal", children: "Make changes to your account here. Click save when you're done." }), _jsx("button", { children: "save journal" })] }));
+const tabsList = [
+    {
+        id: 'data',
+        label: 'Data',
+        icon: 'fc-data',
+        content: renderData(),
+    },
+    {
+        id: 'tools',
+        label: 'Tools',
+        icon: 'fc-gears-2',
+        content: renderTools(),
+    },
+    {
+        id: 'journal',
+        label: 'Journal',
+        icon: 'fc-workbook-lock',
+        content: renderJournal(),
+    },
+];
+const mockTabsClick = jest.fn();
+const SampleComponent = (props) => {
+    const [activeTab, setActiveTab] = React.useState('data');
+    return (_jsx(Tabs, { ...props, activeTab: activeTab, onTabSelect: (tabId) => {
+            setActiveTab(tabId);
+            mockTabsClick(tabId);
+        } }));
+};
+describe('Tabs', () => {
+    class Context {
+        props = {
+            tabs: tabsList,
+            defaultActiveTab: 'data',
+            activeTab: 'data',
+            id: 'tabs-table',
+            onTabSelect: jest.fn(),
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderTabs = (props) => render(_jsx(SampleComponent, { ...props }));
+    it('renders Tabs label with correct content based on default active tab', () => {
+        renderTabs(tc.props);
+        expect(screen.getByText('Data')).toBeInTheDocument();
+        expect(screen.getByText('Tools')).toBeInTheDocument();
+        expect(screen.getByText('Journal')).toBeInTheDocument();
+        expect(screen.getByTestId('journal_tab-icon')).toBeInTheDocument();
+        expect(screen.getByText('save data')).toBeInTheDocument();
+        expect(screen.queryByText('save tools')).not.toBeInTheDocument();
+        expect(screen.queryByText('save journals')).not.toBeInTheDocument();
+    });
+    it('renders correct content after tab is selected', async () => {
+        renderTabs(tc.props);
+        expect(screen.getByText('save data')).toBeInTheDocument();
+        await userEvent.click(screen.getByText('Tools'));
+        expect(mockTabsClick).toHaveBeenCalled();
+        expect(screen.getByText('save tools')).toBeInTheDocument();
+    });
+    it('does not render icon if it is not provided', async () => {
+        renderTabs({ ...tc.props, tabs: tc.props.tabs.map((tab) => ({ ...tab, icon: undefined })) });
+        expect(screen.queryByText('journal_tab-icon')).not.toBeInTheDocument();
+    });
+    it('calls the onTabSelect callback when a new tab is clicked', async () => {
+        mockTabsClick.mockClear();
+        renderTabs(tc.props);
+        await userEvent.click(screen.getByText('Journal'));
+        expect(mockTabsClick).toBeCalledWith('journal');
+        expect(mockTabsClick).toBeCalledTimes(1);
+        mockTabsClick.mockClear();
+        await userEvent.click(screen.getByText('Tools'));
+        expect(mockTabsClick).toBeCalledWith('tools');
+        expect(mockTabsClick).toBeCalledTimes(1);
+    });
+});
+//# sourceMappingURL=Tabs.test.js.map

package/dist/Tabs/Tabs.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.test.js","sourceRoot":"","sources":["../../src/Tabs/Tabs.test.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,IAAI,MAAM,QAAQ,CAAC;AAG1B,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CACvB,eAAK,SAAS,EAAC,6CAA6C,aAC1D,YAAG,SAAS,EAAC,yCAAyC,yGAElD,EACJ,yCAA0B,IACtB,CACP,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,eAAK,SAAS,EAAC,6CAA6C,aAC1D,YAAG,SAAS,EAAC,yCAAyC,gFAElD,EACJ,0CAA2B,IACvB,CACP,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,CAC1B,eAAK,SAAS,EAAC,6CAA6C,aAC1D,YAAG,SAAS,EAAC,yCAAyC,gFAElD,EACJ,4CAA6B,IACzB,CACP,CAAC;AAEF,MAAM,QAAQ,GAAG;IACf;QACE,EAAE,EAAE,MAAM;QACV,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,SAAS;QACf,OAAO,EAAE,UAAU,EAAE;KACtB;IACD;QACE,EAAE,EAAE,OAAO;QACX,KAAK,EAAE,OAAO;QACd,IAAI,EAAE,YAAY;QAClB,OAAO,EAAE,WAAW,EAAE;KACvB;IACD;QACE,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,kBAAkB;QACxB,OAAO,EAAE,aAAa,EAAE;KACzB;CACF,CAAC;AAEF,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;AAEhC,MAAM,eAAe,GAAG,CAAC,KAAgB,EAAE,EAAE;IAC3C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IACzD,OAAO,CACL,KAAC,IAAI,OACC,KAAK,EACT,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;YACrB,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,aAAa,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE;IACpB,MAAM,OAAO;QACX,KAAK,GAAc;YACjB,IAAI,EAAE,QAAQ;YACd,gBAAgB,EAAE,MAAM;YACxB,SAAS,EAAE,MAAM;YACjB,EAAE,EAAE,YAAY;YAChB,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE;SACvB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,MAAM,CAAC,KAAC,eAAe,OAAK,KAAK,GAAI,CAAC,CAAC;IAEhF,EAAE,CAAC,qEAAqE,EAAE,GAAG,EAAE;QAC7E,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACrB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACrD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACtD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACxD,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAEnE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC1D,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,KAAK,IAAI,EAAE;QAC7D,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACrB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC1D,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QACjD,MAAM,CAAC,aAAa,CAAC,CAAC,gBAAgB,EAAE,CAAC;QACzC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,UAAU,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAC7F,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;IACzE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0DAA0D,EAAE,KAAK,IAAI,EAAE;QACxE,aAAa,CAAC,SAAS,EAAE,CAAC;QAC1B,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACrB,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;QACnD,MAAM,CAAC,aAAa,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;QAChD,MAAM,CAAC,aAAa,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACzC,aAAa,CAAC,SAAS,EAAE,CAAC;QAC1B,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QACjD,MAAM,CAAC,aAAa,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAC9C,MAAM,CAAC,aAAa,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,100 @@
+import React from 'react';
+/**
+ * Props for the Tabs component that creates a tabbed interface for organizing content.
+ */
+export interface TabsProps {
+    /**
+     * Additional CSS classes to apply to the tabs container.
+     * Use this to customize the overall appearance and layout of the tab component.
+     */
+    extraClassNames?: string;
+    /**
+     * ID of the tab that should be active when the component first loads.
+     * Only used for uncontrolled tabs where the component manages its own active state.
+     * Should match the `id` of one of the tabs in the `tabs` array.
+     */
+    defaultActiveTab?: string;
+    /**
+     * ID of the currently active tab for controlled component behavior.
+     * When provided, the component becomes controlled and you must handle tab changes
+     * via the `onTabSelect` callback to update this value.
+     */
+    activeTab?: string;
+    /**
+     * When true, enables smooth transitions when switching between tabs.
+     * Provides visual animation effects during tab content changes.
+     */
+    transition?: boolean;
+    /**
+     * Callback function triggered when a user selects a different tab.
+     * Receives the ID of the newly selected tab. Use this to handle tab changes
+     * and update the `activeTab` prop in controlled mode.
+     */
+    onTabSelect?: (tabId: string) => void;
+    /**
+     * HTML ID attribute for the tabs container element.
+     * Should be unique across the page for proper HTML semantics and accessibility.
+     */
+    id?: string;
+    /**
+     * Test ID attribute for the tabs container used in automated testing.
+     * Applied to the main tabs component for test targeting and interaction.
+     */
+    testId?: string;
+    /**
+     * When true, makes the tab headers stretch to fill the full width of the container.
+     * Each tab header will take equal width. When false, tabs size based on their content.
+     */
+    stretchTabs?: boolean;
+    /**
+     * Array of tab configurations that define the available tabs and their content.
+     * Each tab represents a separate page or section within the tabbed interface.
+     */
+    tabs: {
+        /**
+         * Display text for the tab header.
+         * This is what users see and click on to switch tabs.
+         */
+        label: string;
+        /**
+         * Unique identifier for this tab.
+         * Used for tracking the active tab and in callbacks. Must be unique within the tabs array.
+         */
+        id: string;
+        /**
+         * React content to display when this tab is selected.
+         * Can be any React element including complex layouts, forms, or other components.
+         */
+        content: React.JSX.Element;
+        /**
+         * Icon class name to display next to the tab label.
+         * Typically uses FontAwesome classes for visual enhancement of the tab header.
+         */
+        icon?: string;
+        /**
+         * Test ID attribute for this specific tab header used in automated testing.
+         * Helps identify and interact with individual tabs in test suites.
+         */
+        testId?: string;
+        /**
+         * Additional CSS classes to apply to this tab's header element.
+         * Use this to customize individual tab appearance beyond global styling.
+         */
+        tabExtraClassNames?: string;
+        /**
+         * When true, disables this tab preventing user interaction.
+         * Disabled tabs appear visually dimmed and cannot be selected.
+         */
+        disabled?: boolean;
+        /**
+         * Additional CSS classes to apply to this tab's content area.
+         * Use this to customize the styling of the content when this tab is active.
+         */
+        tabContentExtraClassNames?: string;
+        /**
+         * Additional CSS classes to apply to this tab's label.
+         * Use this to customize the styling of the label.
+         */
+        tabLabelExtraClassNames?: string;
+    }[];
+}

package/dist/Tabs/Tabs.types.js

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

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

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

package/dist/Tabs/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Tabs';

package/dist/Tabs/index.js

@@ -0,0 +1,2 @@
+export { default } from './Tabs';
+//# sourceMappingURL=index.js.map

package/dist/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

package/dist/TextArea/TextArea.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextAreaProps } from './TextArea.types';
+import '../styles.css';
+/**
+ * TextArea.
+ */
+export declare const TextArea: React.FunctionComponent<TextAreaProps>;

package/dist/TextArea/TextArea.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef, useEffect } from 'react';
+import '../styles.css';
+const baseClasses = 'tw:leading-normal tw:outline-none tw:py-1 tw:px-3 tw:rounded-md tw:w-full' +
+    ' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray  tw:disabled:dark:bg-sq-dark-disabled-gray' +
+    ' tw:disabled:cursor-not-allowed tw:p-1 tw:border-solid tw:border tw:text-sm';
+const darkTheme = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text ' +
+    'tw:dark:placeholder-sq-dark-text/30  tw:disabled:dark:text-sq-dark-text/30';
+const lightTheme = 'tw:text-sq-text-color tw:placeholder-gray-400  tw:disabled:text-sq-darkish-gray';
+const errorClasses = 'tw:border-sq-danger';
+const borderColorClasses = [
+    'tw:border-sq-disabled-gray',
+    'tw:dark:border-sq-dark-disabled-gray',
+    'tw:dark:focus:border-sq-theme-darker',
+    'tw:dark:active:border-sq-theme-darker',
+    'tw:focus:border-sq-theme-dark',
+    'tw:active:border-sq-theme-dark',
+].join(' ');
+/**
+ * TextArea.
+ */
+export const TextArea = React.forwardRef(({ readonly = false, disabled = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, onSelectionChange, id, name, rows = 3, cols = undefined, value, placeholder, showError, extraClassNames, testId, autoFocus = false, }, ref) => {
+    const appliedClasses = `${baseClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${showError ? errorClasses : borderColorClasses}`;
+    const textareaRef = useRef(null);
+    // Handle selection change events
+    useEffect(() => {
+        if (!onSelectionChange || !textareaRef.current) {
+            return;
+        }
+        const textarea = textareaRef.current;
+        const handleSelectionChange = (e) => {
+            onSelectionChange(e);
+        };
+        // Add event listeners for selection changes
+        textarea.addEventListener('selectionchange', handleSelectionChange);
+        // Also listen for mouse and keyboard events that change selection
+        textarea.addEventListener('mouseup', handleSelectionChange);
+        textarea.addEventListener('keyup', handleSelectionChange);
+        return () => {
+            textarea.removeEventListener('selectionchange', handleSelectionChange);
+            textarea.removeEventListener('mouseup', handleSelectionChange);
+            textarea.removeEventListener('keyup', handleSelectionChange);
+        };
+    }, [onSelectionChange]);
+    return (_jsx("textarea", { ref: (element) => {
+            textareaRef.current = element;
+            if (typeof ref === 'function') {
+                ref(element);
+            }
+            else if (ref) {
+                ref.current = element;
+            }
+        }, "data-testid": testId, name: name, id: id, value: value, className: appliedClasses, placeholder: placeholder, disabled: disabled, readOnly: readonly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onKeyUp: onKeyUp, rows: rows, cols: cols, autoFocus: autoFocus }));
+});
+//# sourceMappingURL=TextArea.js.map

package/dist/TextArea/TextArea.js.map

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

package/dist/TextArea/TextArea.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllTextAreas: () => import("react/jsx-runtime").JSX.Element;

package/dist/TextArea/TextArea.stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TextArea } from './TextArea';
+export default {
+    title: 'TextArea',
+};
+export const AllTextAreas = () => {
+    const renderAllVariations = () => (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tw:p-4 light", children: [_jsx("div", { className: "tw:p-4", children: _jsx(TextArea, { value: "Short text provided." }) }), _jsx("div", { className: "tw:p-4", children: _jsx(TextArea, { value: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio morbi quis commodo odio aenean. Lectus sit amet est placerat in egestas erat. Dui nunc mattis enim ut tellus. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Nibh mauris cursus mattis molestie a. Aenean vel elit scelerisque mauris pellentesque. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Tortor dignissim convallis aenean et tortor at risus. Vitae congue mauris rhoncus aenean vel elit scelerisque. Tellus id interdum velit laoreet id donec ultrices. Ac turpis egestas maecenas pharetra. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Consequat interdum varius sit amet mattis. Lacus laoreet non curabitur gravida arcu ac tortor. Vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae elementum. Odio ut enim blandit volutpat maecenas volutpat." }) }), _jsx("div", { className: "tw:p-4", children: _jsx(TextArea, { placeholder: "placeholder text" }) }), _jsx("div", { className: "tw:p-4", children: _jsx(TextArea, { placeholder: "with error", showError: true }) }), _jsx("div", { className: "tw:p-4", children: _jsx(TextArea, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() }) }), _jsx("div", { className: "tw:p-4", children: _jsx(TextArea, { value: "disabled", disabled: true }) })] }), _jsxs("div", { className: "tw:p-4 tw-dark tw:bg-sq-dark-background", children: [_jsx("div", { className: "tw:p-4", children: _jsx(TextArea, { value: "value provided" }) }), _jsx("div", { className: "tw:p-4", children: _jsx(TextArea, { placeholder: "placeholder text" }) }), _jsx("div", { className: "tw:p-4", children: _jsx(TextArea, { placeholder: "with error", showError: true }) }), _jsx("div", { className: "tw:p-4", children: _jsx(TextArea, { value: "read-only", readonly: true, onFocus: (e) => e.currentTarget.select() }) }), _jsx("div", { className: "tw:p-4", children: _jsx(TextArea, { value: "disabled", disabled: true }) })] })] }));
+    return (_jsxs("div", { className: "tw:grid tw:grid-cols-4 tw:gap-4", children: [_jsxs("div", { className: "color_topic", children: [_jsx("b", { children: "Topic Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_analysis", children: [_jsx("b", { children: "Analysis Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_datalab", children: [_jsx("b", { children: "Datalab Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_vantage", children: [_jsx("b", { children: "Vantage Colors" }), renderAllVariations()] })] }));
+};
+//# sourceMappingURL=TextArea.stories.js.map

package/dist/TextArea/TextArea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.stories.js","sourceRoot":"","sources":["../../src/TextArea/TextArea.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,eAAe;IACb,KAAK,EAAE,UAAU;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CAChC,8BACE,eAAK,SAAS,EAAC,cAAc,aAC3B,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IAAC,KAAK,EAAC,sBAAsB,GAAG,GACrC,EACN,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IAAC,KAAK,EAAC,q7BAAq7B,GAAG,GACp8B,EACN,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IAAC,WAAW,EAAC,kBAAkB,GAAG,GACvC,EACN,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,GAClD,EACN,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,EAAE,GAAI,GACpF,EACN,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,GAAI,GACzC,IACF,EAEN,eAAK,SAAS,EAAC,yCAAyC,aACtD,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,GAC/B,EACN,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IAAC,WAAW,EAAC,kBAAkB,GAAG,GACvC,EACN,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IAAC,WAAW,EAAC,YAAY,EAAC,SAAS,EAAE,IAAI,GAAI,GAClD,EACN,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IAAC,KAAK,EAAC,WAAW,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,MAAM,EAAE,GAAI,GACpF,EACN,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,IAAI,GAAI,GACzC,IACF,IACL,CACJ,CAAC;IACF,OAAO,CACL,eAAK,SAAS,EAAC,iCAAiC,aAC9C,eAAK,SAAS,EAAC,aAAa,aAC1B,uCAAmB,EAClB,mBAAmB,EAAE,IAClB,EAEN,eAAK,SAAS,EAAC,gBAAgB,aAC7B,0CAAsB,EACrB,mBAAmB,EAAE,IAClB,EAEN,eAAK,SAAS,EAAC,eAAe,aAC5B,yCAAqB,EACpB,mBAAmB,EAAE,IAClB,EAEN,eAAK,SAAS,EAAC,eAAe,aAC5B,yCAAqB,EACpB,mBAAmB,EAAE,IAClB,IACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/TextArea/TextArea.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';