@seeqdev/qomponents 0.0.169 → 0.0.171

package/README.md

@@ -1,136 +1,136 @@
-<!-- markdownlint-disable-next-line -->
-<p align="center">
-  <img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
-</p>
-<h1 align="center">qomponents</h1>
-
-
-Seeq qomponents are a collection of UI components, including a Button, a TextField, an Icon, as well as a Tooltip
-React component (more coming soon!)
-
-These components are used by Seeq's application and are made publicly available for Developers who want to expand
-the Seeq eco-system with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
-experience. Every component comes fully styled (and with dark mode support).
-
-## Installation
-
-Seeq qomponents are available on npm.
-
-**npm:**
-
-```sh
-npm install @seeqdev/qomponents
-```
-
-**yarn:**
-
-```sh
-yarn add @seeqdev/qomponents
-```
-
-## Getting started with Seeq qomponents
-
-Prefer a more complete example? <br/>Checkout the example folder provided.
-It includes a ready to run example application. Start with the readme in the example folder to get up and running!
-
-Here is an example of a basic app using the `Button` component:
-
-```jsx
-import * as React from 'react';
-import {Button} from '@seeqdev/qomponents';
-
-function App() {
-  return <Button variant="theme" label="Seeq Rocks" />;
-}
-```
-
-To make sure all styles are properly applied be sure to include the qomponents css file in your main css file.
-
-```css
-@import '@seeqdev/qomponents/dist/styles.css';
-```
-
-<b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
-available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use this
-property to provide only width, margins and padding. This will ensure for a smooth upgrade experience when
-Seeq's look and feel changes.
-<br />
-<b>Tip:</b>: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
-TextArea, as well as Select.
-
-## Frequently asked questions
-
-<h3>1) I use webpack and I get a strange error once I added qomponents to my package.json!</h3>
-
-Webpack needs a little help :)  
-Add the following to the <code>rules</code> array in your <code>webpack.config</code>
-
-```
-  {
-    test: /@?(seeqdev).*\.(ts|js)x?$/, 
-    loader:'babel-loader'
-  },
-  {
-    test: /\.(woff|woff2|eot|ttf|otf)$/i,
-    type: 'asset/resource',
-  }
-```
-
-If you're using webpack + scss be sure to include a <code>~</code> as part of the css import path:
-
-```
-@import '~@seeqdev/qomponents/dist/styles.css';
-@import '~@fortawesome/fontawesome-free/css/all.css';
-```
-
-<h3>2) How do I get my Button to be green?</h3>
-
-The colors of your qomponents are controlled by the "theme". </br>
-If you do not provide a theme your qomponents will use the default blue or also known as Topic-based theme.
-Themes are applied by adding the class of the desired theme to a wrapper of your application. The theme class can
-also be applied to the body tag.
-
-```html
-
-<div class="color_analysis">
-  ... your application here
-</div>
-
-```
-
-There are 3 themes available:
-
-| Theme    | Color  | Class          | Example                |
-|:---------|:-------|:---------------|:-----------------------|
-| Topic    | blue   | color_topic    | class="color_topic"    |
-| Analysis | green  | color_analysis | class="color_analysis" |
-| DataLab  | orange | color_datalab  | class="color_datalab"  |
-
-<h3>3) How do I use Fontawesome Icons?</h3>
-Before you can use Fontawesome icons you must install FontAwesome.
-
-```
-npm install --save @fortawesome/fontawesome-free
-```
-
-Once it's installed simply import the required css files. To import all variations of FontAwesome's Icons you can
-add the following import to your main css file:
-
-```
-@import "@fortawesome/fontawesome-free/css/all.css";
-```
-
-If your project only uses Classic Solid or (Sharp Solids, or any other one kind) it's better to import only the
-required css for that Icon type to keep your packages size small.<br/> Note: if you don't import "all" like shown above
-be sure to include <code>fontawesome.css</code> in addition to whatever Icon style you require.
-
-For Example:
-
-```
-@import "@fortawesome/fontawesome-free/css/fontawesome.css";
-@import "@fortawesome/fontawesome-free/css/solid.css";
-```
-
-<h3>4) How can I see all the props that are available?</h3>
-Take a look at the <code>.types.d.ts</code> files that can be found in the <code>dist/{component name}/</code>
+<!-- markdownlint-disable-next-line -->
+<p align="center">
+  <img width="150" src="https://seeq.com/sites/default/files/seeq-content/seeq-logo-blue-web-33h.svg" alt="Seeq logo">
+</p>
+<h1 align="center">qomponents</h1>
+
+
+Seeq qomponents are a collection of UI components, including a Button, a TextField, an Icon, as well as a Tooltip
+React component (more coming soon!)
+
+These components are used by Seeq's application and are made publicly available for Developers who want to expand
+the Seeq eco-system with their own plugins and add-ons without having to worry about creating a cohesive Seeq UX
+experience. Every component comes fully styled (and with dark mode support).
+
+## Installation
+
+Seeq qomponents are available on npm.
+
+**npm:**
+
+```sh
+npm install @seeqdev/qomponents
+```
+
+**yarn:**
+
+```sh
+yarn add @seeqdev/qomponents
+```
+
+## Getting started with Seeq qomponents
+
+Prefer a more complete example? <br/>Checkout the example folder provided.
+It includes a ready to run example application. Start with the readme in the example folder to get up and running!
+
+Here is an example of a basic app using the `Button` component:
+
+```jsx
+import * as React from 'react';
+import {Button} from '@seeqdev/qomponents';
+
+function App() {
+  return <Button variant="theme" label="Seeq Rocks" />;
+}
+```
+
+To make sure all styles are properly applied be sure to include the qomponents css file in your main css file.
+
+```css
+@import '@seeqdev/qomponents/dist/styles.css';
+```
+
+<b>A note on CSS:</b> Seeq's qomponents come fully styled and ready to use. While it is tempting to use the
+available <i>extraClassNames</i> property to provide yet additional styling we strongly advise you to use this
+property to provide only width, margins and padding. This will ensure for a smooth upgrade experience when
+Seeq's look and feel changes.
+<br />
+<b>Tip:</b>: to indicate missing or wrong user input use the <i>showError</i> property available on TextField,
+TextArea, as well as Select.
+
+## Frequently asked questions
+
+<h3>1) I use webpack and I get a strange error once I added qomponents to my package.json!</h3>
+
+Webpack needs a little help :)  
+Add the following to the <code>rules</code> array in your <code>webpack.config</code>
+
+```
+  {
+    test: /@?(seeqdev).*\.(ts|js)x?$/, 
+    loader:'babel-loader'
+  },
+  {
+    test: /\.(woff|woff2|eot|ttf|otf)$/i,
+    type: 'asset/resource',
+  }
+```
+
+If you're using webpack + scss be sure to include a <code>~</code> as part of the css import path:
+
+```
+@import '~@seeqdev/qomponents/dist/styles.css';
+@import '~@fortawesome/fontawesome-free/css/all.css';
+```
+
+<h3>2) How do I get my Button to be green?</h3>
+
+The colors of your qomponents are controlled by the "theme". </br>
+If you do not provide a theme your qomponents will use the default blue or also known as Topic-based theme.
+Themes are applied by adding the class of the desired theme to a wrapper of your application. The theme class can
+also be applied to the body tag.
+
+```html
+
+<div class="color_analysis">
+  ... your application here
+</div>
+
+```
+
+There are 3 themes available:
+
+| Theme    | Color  | Class          | Example                |
+|:---------|:-------|:---------------|:-----------------------|
+| Topic    | blue   | color_topic    | class="color_topic"    |
+| Analysis | green  | color_analysis | class="color_analysis" |
+| DataLab  | orange | color_datalab  | class="color_datalab"  |
+
+<h3>3) How do I use Fontawesome Icons?</h3>
+Before you can use Fontawesome icons you must install FontAwesome.
+
+```
+npm install --save @fortawesome/fontawesome-free
+```
+
+Once it's installed simply import the required css files. To import all variations of FontAwesome's Icons you can
+add the following import to your main css file:
+
+```
+@import "@fortawesome/fontawesome-free/css/all.css";
+```
+
+If your project only uses Classic Solid or (Sharp Solids, or any other one kind) it's better to import only the
+required css for that Icon type to keep your packages size small.<br/> Note: if you don't import "all" like shown above
+be sure to include <code>fontawesome.css</code> in addition to whatever Icon style you require.
+
+For Example:
+
+```
+@import "@fortawesome/fontawesome-free/css/fontawesome.css";
+@import "@fortawesome/fontawesome-free/css/solid.css";
+```
+
+<h3>4) How can I see all the props that are available?</h3>
+Take a look at the <code>.types.d.ts</code> files that can be found in the <code>dist/{component name}/</code>
 folder. This file contains all available properties including some descriptive text that tells you more about them.

package/dist/Accordion/Accordion.d.ts

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

package/dist/Accordion/Accordion.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Root, Item, Trigger, Content } from '@radix-ui/react-accordion';
+const Accordion = ({ accordionItems, defaultValue, value, onItemSelect, disabled, extraClassNames, testId, }) => {
+    return (_jsx(Root, { className: `tw-rounded-md tw-w-full focus-visible:tw-outline-none ${extraClassNames || ''}`, type: "single", defaultValue: defaultValue, value: value, collapsible: true, "data-testid": testId, onValueChange: (_value) => onItemSelect(_value), children: accordionItems.map((item) => (_jsxs(Item, { className: `tw-bg-transparent tw-p-0 tw-flex tw-flex-col tw-w-full`, disabled: disabled, value: item.value, children: [_jsx(Trigger, { disabled: disabled, className: `tw-w-full tw-cursor-default focus-visible:tw-outline-none`, children: item.trigger }), _jsx(Content, { className: `data-[state=open]:tw-animate-slideDown data-[state=closed]:tw-animate-slideUp tw-overflow-hidden focus-visible:tw-outline-none ${item.contentClassNames || ''}`, children: item.content })] }, item.value))) }));
+};
+export default Accordion;
+//# sourceMappingURL=Accordion.js.map

package/dist/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAGzE,MAAM,SAAS,GAA4C,CAAC,EAC1D,cAAc,EACd,YAAY,EACZ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,MAAM,GACP,EAAE,EAAE;IACH,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,yDAAyD,eAAe,IAAI,EAAE,EAAE,EAC3F,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,EACZ,WAAW,uBACE,MAAM,EACnB,aAAa,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,YAC9C,cAAc,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC5B,MAAC,IAAI,IACH,SAAS,EAAE,wDAAwD,EAEnE,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,aACjB,KAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,2DAA2D,YAChG,IAAI,CAAC,OAAO,GACL,EACV,KAAC,OAAO,IACN,SAAS,EAAE,kIACT,IAAI,CAAC,iBAAiB,IAAI,EAC5B,EAAE,YACD,IAAI,CAAC,OAAO,GACL,KAXL,IAAI,CAAC,KAAK,CAYV,CACR,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/Accordion/Accordion.stories.d.ts

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

package/dist/Accordion/Accordion.stories.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import Accordion from './Accordion';
+import { QTip } from '../Tooltip/Qtip';
+import Icon from '../Icon';
+import Tabs from '../Tabs';
+import Button from '../Button';
+export default {
+    title: 'Accordion',
+};
+const Trigger = ({ label }) => (_jsxs("div", { className: "tw-flex tw-justify-start tw-items-center tw-border-b tw-px-2 tw-text-sq-color-dark", children: [_jsx(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-color-dark tw-mr-[0.5rem] tw-text-[0.75rem]", type: "text" }), label] }));
+const TriggerSecond = ({ label }) => (_jsxs("div", { className: "tw-flex tw-justify-between tw-items-center tw-border-b tw-px-2 tw-text-sq-color-dark tw-py-2", children: [label, _jsx(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw-text-sq-color-dark tw-mr-[0.5rem] tw-text-[0.75rem]", type: "text" })] }));
+const renderData = () => (_jsxs("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white", children: [_jsx("p", { className: "tw-mb-5 tw-text-[0.9375rem] 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-color-gray dark:tw-text-sq-white", children: [_jsx("p", { className: "tw-mb-5 tw-text-[0.9375rem] 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-color-gray dark:tw-text-sq-white", children: [_jsx("p", { className: "tw-mb-5 tw-text-[0.9375rem] 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(),
+    },
+];
+export const AllAccordionVariants = () => {
+    const [activeTab, setActiveTab] = React.useState('data');
+    const [value, setValue] = React.useState('oranges');
+    const accordionItems = [
+        {
+            value: 'oranges',
+            id: 'oranges',
+            itemTestId: 'oranges',
+            trigger: _jsx(Trigger, { label: "Oranges" }),
+            content: (_jsx("div", { className: "tw-p-2 tw-text-[0.8125rem] dark:tw-text-sq-white", children: "Oranges are the fruit of the citrus species Citrus \u00D7 sinensis in the family Rutaceae. They are also called sweet oranges to distinguish them from the related Citrus \u00D7 aurantium, referred to as bitter oranges. They are round and orange, and usually have a sour or bitter taste. Oranges are a good source of vitamin C." })),
+        },
+        {
+            value: 'apples',
+            id: 'apples',
+            itemTestId: 'apples',
+            trigger: _jsx(Trigger, { label: "Apples" }),
+            content: (_jsx("div", { children: _jsx("div", { className: "tw-p-4", children: _jsx(Tabs, { stretchTabs: true, activeTab: activeTab, onTabSelect: setActiveTab, defaultActiveTab: "data", tabs: tabsList }) }) })),
+        },
+        {
+            value: 'bananas',
+            id: 'bananas',
+            trigger: _jsx(Trigger, { label: "Bananas" }),
+            itemTestId: 'bananas',
+            content: (_jsx("div", { children: "A banana is an elongated, edible fruit \u2013 botanically a berry \u2013 produced by several kinds of large herbaceous flowering plants in the genus Musa. In some countries, bananas used for cooking may be called \"plantains\", distinguishing them from dessert bananas. The fruit is variable in size, color, and firmness, but is usually elongated and curved, with soft flesh rich in starch covered with a rind, which may be green, yellow, red, purple, or brown when ripe." })),
+        },
+        {
+            value: 'pineapples',
+            id: 'pineapples',
+            trigger: _jsx(Trigger, { label: "Pineapples" }),
+            itemTestId: 'pineapples',
+            content: (_jsx("div", { children: "The pineapple is a tropical plant with an edible fruit and the most economically significant plant in the family Bromeliaceae. The pineapple is indigenous to South America, where it has been cultivated for many centuries. The introduction of the pineapple to Europe in the 17th century made it a significant cultural icon of luxury. Since the 1820s, pineapple has been commercially grown in greenhouses and many tropical plantations." })),
+        },
+    ];
+    const allAccordions = (isDark) => (_jsx("div", { className: isDark ? 'tw-dark tw-bg-sq-dark-background' : '', children: _jsx("div", { className: "tw-p-5 ", children: _jsx(Accordion, { accordionItems: isDark
+                    ? accordionItems
+                    : accordionItems.map((item) => ({ ...item, trigger: _jsx(TriggerSecond, { label: item.value.toUpperCase() }) })), value: value, testId: "basic-accordion1", onItemSelect: (value) => setValue(value) }) }) }));
+    const renderAllVariations = (isDark) => _jsx("div", { className: "tw-p-4", children: allAccordions(isDark) });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [_jsx(QTip, {}), _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()] })] }), _jsxs("div", { className: "tw-dark tw-bg-sq-dark-background tw-grid tw-grid-cols-4 tw-gap-4 tw-py-4", children: [_jsxs("div", { className: "color_topic dark:tw-text-sq-white tw-text-center", children: [_jsx("b", { children: "Topic Colors" }), renderAllVariations(true)] }), _jsxs("div", { className: "color_analysis dark:tw-text-sq-white tw-text-center", children: [_jsx("b", { children: "Analysis Colors" }), renderAllVariations(true)] }), _jsxs("div", { className: "color_datalab dark:tw-text-sq-white tw-text-center", children: [_jsx("b", { children: "Datalab Colors" }), renderAllVariations(true)] }), _jsxs("div", { className: "color_vantage dark:tw-text-sq-white tw-text-center", children: [_jsx("b", { children: "Vantage Colors" }), renderAllVariations(true)] })] })] }));
+};
+//# sourceMappingURL=Accordion.stories.js.map

package/dist/Accordion/Accordion.stories.js.map

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

package/dist/Accordion/Accordion.test.d.ts

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

package/dist/Accordion/Accordion.test.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Accordion from './Accordion';
+describe('Accordion', () => {
+    const mockOnItemSelect = jest.fn();
+    class Context {
+        testId = 'buttonTestId';
+        label = 'button label';
+        props = {
+            accordionItems: [
+                {
+                    id: 'item1',
+                    value: 'item1',
+                    trigger: 'Item 1',
+                    content: 'Content 1',
+                },
+                {
+                    id: 'item2',
+                    value: 'item2',
+                    trigger: 'Item 2',
+                    content: 'Content 2',
+                },
+            ],
+            defaultValue: 'item1',
+            value: 'item1',
+            onItemSelect: (key) => mockOnItemSelect(key),
+            disabled: false,
+            extraClassNames: 'extra-class',
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderAccordion = (props) => render(_jsx(Accordion, { ...props }));
+    it('renders accordion items', () => {
+        renderAccordion(tc.props);
+        expect(screen.getByText('Item 1')).toBeInTheDocument();
+        expect(screen.getByText('Item 2')).toBeInTheDocument();
+    });
+    it('renders accordion content', () => {
+        renderAccordion(tc.props);
+        expect(screen.getByText('Content 1')).toBeInTheDocument();
+        expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    });
+    it('calls onItemSelect when an item is selected', async () => {
+        renderAccordion(tc.props);
+        await userEvent.click(screen.getByText('Item 2'));
+        expect(mockOnItemSelect).toHaveBeenCalledWith('item2');
+    });
+});
+//# sourceMappingURL=Accordion.test.js.map

package/dist/Accordion/Accordion.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.test.js","sourceRoot":"","sources":["../../src/Accordion/Accordion.test.tsx"],"names":[],"mappings":";AACA,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,OAAO,SAAS,MAAM,aAAa,CAAC;AAGpC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IACnC,MAAM,OAAO;QACX,MAAM,GAAG,cAAc,CAAC;QACxB,KAAK,GAAG,cAAc,CAAC;QACvB,KAAK,GAAmB;YACtB,cAAc,EAAE;gBACd;oBACE,EAAE,EAAE,OAAO;oBACX,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,QAAQ;oBACjB,OAAO,EAAE,WAAW;iBACrB;gBACD;oBACE,EAAE,EAAE,OAAO;oBACX,KAAK,EAAE,OAAO;oBACd,OAAO,EAAE,QAAQ;oBACjB,OAAO,EAAE,WAAW;iBACrB;aACF;YACD,YAAY,EAAE,OAAO;YACrB,KAAK,EAAE,OAAO;YACd,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC;YAC5C,QAAQ,EAAE,KAAK;YACf,eAAe,EAAE,aAAa;YAC9B,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;KACH;IAED,IAAI,EAAW,CAAC;IAChB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,GAAG,IAAI,OAAO,EAAE,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,MAAM,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC,CAAC;IAEpF,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QAC1B,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACvD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QAC1B,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC1D,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,eAAe,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QAC1B,MAAM,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;QAClD,MAAM,CAAC,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/Accordion/Accordion.types.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+export interface AccordionProps {
+    /**
+     * Additional CSS classes to apply to the accordion container.
+     * Use this to customize the styling of the entire accordion component.
+     */
+    extraClassNames?: string;
+    /**
+     * The value of the accordion item that should be expanded by default when the component first renders.
+     * Only used when the accordion is in uncontrolled mode (when you don't manage the state externally).
+     * Should match the `value` of one of the items in `accordionItems`.
+     */
+    defaultValue?: string;
+    /**
+     * The value of the currently selected/expanded accordion item.
+     * This should match the `value` property of one of the items in `accordionItems`.
+     * Use this when you want to control which item is expanded from a parent component.
+     */
+    value: string;
+    /**
+     * When true, disables the entire accordion component, preventing any user interaction.
+     * Individual items can still be disabled independently using their own `disabled` property.
+     */
+    disabled?: boolean;
+    /**
+     * Array of accordion items to render. Each item represents a collapsible section
+     * with a clickable header (trigger) and expandable content area.
+     */
+    accordionItems: AccordionItem[];
+    /**
+     * Test ID attribute for the accordion container element.
+     * Used for automated testing and element selection in test suites.
+     */
+    testId?: string;
+    /**
+     * Callback function triggered when a user clicks on an accordion item header.
+     * Receives the `value` of the selected item as a parameter.
+     * Use this to handle accordion state changes and update the `value` prop accordingly.
+     */
+    onItemSelect: (key: string) => void;
+}
+interface AccordionItem {
+    /**
+     * Unique identifier for the accordion item.
+     * This value is used to determine which item is currently expanded and
+     * is passed to the `onItemSelect` callback when the item is clicked.
+     */
+    value: string;
+    /**
+     * The content displayed in the clickable header/trigger area of the accordion item.
+     * This is what users click to expand or collapse the item.
+     * Can be any React element (text, icons, buttons, etc.).
+     */
+    trigger: React.ReactNode;
+    /**
+     * The content displayed when the accordion item is expanded.
+     * This is the collapsible content area that shows/hides when the trigger is clicked.
+     * Can contain any React elements including forms, lists, text, or other components.
+     */
+    content: React.ReactNode;
+    /**
+     * Test ID attribute for this specific accordion item.
+     * Used for automated testing to uniquely identify and interact with this item.
+     * Applied to the item's container element.
+     */
+    itemTestId?: string;
+    /**
+     * HTML ID attribute for the accordion item's container element.
+     * Useful for accessibility, linking, or custom styling via CSS selectors.
+     * Should be unique across the entire page.
+     */
+    id?: string;
+    /**
+     * When true, disables this specific accordion item, preventing user interaction.
+     * The item will appear visually disabled and clicking on it will have no effect.
+     * This overrides the parent accordion's disabled state for this individual item.
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes to apply specifically to this item's content area.
+     * Use this to customize the styling of the expandable content section.
+     * Does not affect the trigger/header styling.
+     */
+    contentClassNames?: string;
+}
+export {};

package/dist/Accordion/Accordion.types.js

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

package/dist/Accordion/Accordion.types.js.map

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

package/dist/Accordion/index.d.ts

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

package/dist/Accordion/index.js

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

package/dist/Accordion/index.js.map

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

package/dist/Alert/Alert.d.ts

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

package/dist/Alert/Alert.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '../styles.css';
+import Icon from '../Icon';
+const baseClasses = 'tw-mx-auto tw-p-4 tw-leading-normal tw-outline-none tw-py-2 tw-px-3 tw-rounded-[10px] tw-w-full tw-relative' +
+    ' tw-border-solid tw-border tw-text-sm tw-flex tw-flex-col tw-justify-center tw-items-center';
+const darkTheme = 'dark:tw-bg-sq-colored-hover-dark dark:tw-text-sq-dark-text';
+const lightTheme = 'tw-text-sq-text-color tw-bg-sq-colored-hover';
+const errorClasses = 'tw-border-sq-danger-color';
+const borderColorClasses = 'tw-border-sq-color-dark';
+/**
+ * Alert.
+ */
+export const Alert = ({ children, dismissible = true, onClose, show = true, variant, testId = 'alert-id', id, extraClassNames, ...tooltipProps }) => {
+    const appliedTheme = {
+        theme: `${lightTheme} ${darkTheme}`,
+        danger: 'tw-text-sq-text-color tw-bg-sq-danger-color',
+        warning: 'tw-bg-sq-bg-warning-color tw-text-sq-text-color',
+        gray: 'tw-bg-sq-light-gray tw-text-sq-text-color dark:tw-bg-sq-worksheetspanel-gray-dark dark:tw-text-sq-dark-text',
+    };
+    const appliedBorderTheme = {
+        theme: borderColorClasses,
+        danger: errorClasses,
+        warning: 'tw-border-none',
+        gray: 'tw-border-sq-darkish-gray',
+    };
+    const appliedClasses = `${baseClasses} ${appliedTheme[variant]} ${extraClassNames} ${appliedBorderTheme[variant]}`;
+    if (!show) {
+        return _jsx("div", {});
+    }
+    return (_jsxs("div", { "data-testid": testId, id: id, className: appliedClasses, children: [children, dismissible && (_jsx(Icon, { icon: "fc-delete", type: variant.match(/danger|warning/) ? 'color' : 'theme', color: variant.match(/danger|warning/) ? 'inherit' : undefined, extraClassNames: `tw-self-end tw-text-[0.6875rem] tw-cursor-pointer tw-absolute tw-right-[10px] tw-top-[10px] ${variant.match(/danger|warning|gray/) ? 'tw-text-sq-text-color dark:tw-text-sq-dark-text' : ''}`, testId: `${testId}-close-btn`, onClick: onClose, ...tooltipProps }))] }));
+};
+//# sourceMappingURL=Alert.js.map

package/dist/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":";AACA,OAAO,eAAe,CAAC;AACvB,OAAO,IAAI,MAAM,SAAS,CAAC;AAG3B,MAAM,WAAW,GACf,6GAA6G;IAC7G,6FAA6F,CAAC;AAEhG,MAAM,SAAS,GAAG,4DAA4D,CAAC;AAC/E,MAAM,UAAU,GAAG,8CAA8C,CAAC;AAElE,MAAM,YAAY,GAAG,2BAA2B,CAAC;AAEjD,MAAM,kBAAkB,GAAG,yBAAyB,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAwC,CAAC,EACzD,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,OAAO,EACP,IAAI,GAAG,IAAI,EACX,OAAO,EACP,MAAM,GAAG,UAAU,EACnB,EAAE,EACF,eAAe,EACf,GAAG,YAAY,EAChB,EAAE,EAAE;IACH,MAAM,YAAY,GAA0C;QAC1D,KAAK,EAAE,GAAG,UAAU,IAAI,SAAS,EAAE;QACnC,MAAM,EAAE,6CAA6C;QACrD,OAAO,EAAE,iDAAiD;QAC1D,IAAI,EAAE,6GAA6G;KACpH,CAAC;IACF,MAAM,kBAAkB,GAA0C;QAChE,KAAK,EAAE,kBAAkB;QACzB,MAAM,EAAE,YAAY;QACpB,OAAO,EAAE,gBAAgB;QACzB,IAAI,EAAE,2BAA2B;KAClC,CAAC;IACF,MAAM,cAAc,GAAG,GAAG,WAAW,IAAI,YAAY,CAAC,OAAO,CAAC,IAAI,eAAe,IAAI,kBAAkB,CAAC,OAAO,CAAC,EAAE,CAAC;IAEnH,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,eAAO,CAAC;IACjB,CAAC;IACD,OAAO,CACL,8BAAkB,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,aACxD,QAAQ,EACR,WAAW,IAAI,CACd,KAAC,IAAI,IACH,IAAI,EAAC,WAAW,EAChB,IAAI,EAAE,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EACzD,KAAK,EAAE,OAAO,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC9D,eAAe,EAAE,+FACf,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,iDAAiD,CAAC,CAAC,CAAC,EAC7F,EAAE,EACF,MAAM,EAAE,GAAG,MAAM,YAAY,EAC7B,OAAO,EAAE,OAAO,KACZ,YAAY,GAChB,CACH,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/Alert/Alert.stories.d.ts

@@ -0,0 +1,5 @@
+export declare const ThemedAlert: any;
+export declare const WarningAlert: any;
+export declare const DangerAlert: any;
+export declare const GrayAlert: any;
+export declare const AllAlertsVariants: () => import("react/jsx-runtime").JSX.Element;