@mozaic-ds/web-components 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/stories/tabs/Tabs.stories.js

@@ -0,0 +1,121 @@
+import { within, expect } from 'storybook/test';
+export default {
+    title: 'Navigation/Tabs',
+    tags: ['autodocs', 'new'],
+    parameters: {
+        docs: {
+            description: {
+                component: 'Tabs are a navigation component that allows users to switch between different sections within the same context. They help organize content efficiently by displaying only one section at a time, reducing clutter and improving accessibility. Tabs can include icons, labels, and notification badges to provide additional context. They are commonly used in dashboards, product management, and settings interfaces.',
+            },
+        },
+    },
+    argTypes: {
+        activeindex: {
+            description: 'Index of the currently selected tab',
+            control: { type: 'number', min: 0 },
+        },
+        centered: {
+            description: 'centered tab element',
+            control: { type: 'boolean' },
+        },
+    },
+};
+// --- Template Function
+const Template = ({ activeindex = 0, centered = 'false' }) => {
+    const wrapper = document.createElement('div');
+    const tabs = document.createElement('mc-tabs');
+    tabs.setAttribute('activeindex', String(activeindex));
+    tabs.setAttribute('centered', centered || '');
+    for (let i = 0; i < 4; i++) {
+        const tab = document.createElement('mc-tab');
+        tab.setAttribute('slot', 'tab');
+        tab.setAttribute('index', String(i));
+        tab.setAttribute('tag', 'button');
+        tab.innerText = `Tab ${i + 1}`;
+        if (String(i) === String(3))
+            tab.setAttribute('disabled', 'true');
+        if (i === activeindex)
+            tab.setAttribute('selected', 'true');
+        tab.addEventListener('click', () => {
+            tabs.setAttribute('activeindex', String(i));
+            // Update other tab selection
+            const allTabs = tabs.querySelectorAll('mc-tab');
+            allTabs.forEach((el, idx) => {
+                if (i === idx) {
+                    el.setAttribute('selected', 'true');
+                }
+                else {
+                    el.removeAttribute('selected');
+                }
+            });
+        });
+        tabs.appendChild(tab);
+    }
+    wrapper.appendChild(tabs);
+    return wrapper;
+};
+// --- Default story
+export const Default = Template.bind({});
+Default.args = {
+    activeIndex: 0,
+    centered: false,
+};
+Default.play = async ({ canvasElement }) => {
+    const tabs = canvasElement.querySelector('mc-tabs');
+    const tabItems = tabs?.querySelectorAll('mc-tab');
+    expect(tabItems?.length).toBe(4);
+    const selected = Array.from(tabItems).filter((tab) => tab.getAttribute('selected') === 'true');
+    expect(selected.length).toBe(1);
+    expect(selected[0].innerText).toBe('Tab 1');
+};
+// --- Centered story
+export const Centered = Template.bind({});
+Centered.args = {
+    activeIndex: 1,
+    centered: true,
+};
+const IconTemplate = ({ activeindex = 0, centered = 'false' }) => {
+    const wrapper = document.createElement('div');
+    const tabs = document.createElement('mc-tabs');
+    tabs.setAttribute('activeindex', String(activeindex));
+    tabs.setAttribute('centered', centered || '');
+    for (let i = 0; i < 4; i++) {
+        const tab = document.createElement('mc-tab');
+        tab.setAttribute('slot', 'tab');
+        tab.setAttribute('index', String(i));
+        tab.setAttribute('tag', 'button');
+        tab.setAttribute('hasiconslot', 'true');
+        if (i === 3)
+            tab.setAttribute('disabled', 'true');
+        if (i === activeindex)
+            tab.setAttribute('selected', 'true');
+        const icon = document.createElement('chevron-right-32');
+        icon.setAttribute('slot', 'icon');
+        icon.setAttribute('style', 'height: 100%');
+        tab.appendChild(icon);
+        const label = document.createElement('span');
+        label.innerText = `Tab ${i + 1}`;
+        tab.appendChild(icon);
+        tab.appendChild(label);
+        tab.addEventListener('click', () => {
+            tabs.setAttribute('activeindex', String(i));
+            const allTabs = tabs.querySelectorAll('mc-tab');
+            allTabs.forEach((el, idx) => {
+                if (i === idx) {
+                    el.setAttribute('selected', 'true');
+                }
+                else {
+                    el.removeAttribute('selected');
+                }
+            });
+        });
+        tabs.appendChild(tab);
+    }
+    wrapper.appendChild(tabs);
+    return wrapper;
+};
+export const WithIcons = IconTemplate.bind({});
+WithIcons.args = {
+    activeIndex: 0,
+    centered: false,
+};

package/dist/stories/tags/Tags.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Informative: StoryFn;
+//# sourceMappingURL=Tags.stories.d.ts.map

package/dist/stories/tags/Tags.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/tags/Tags.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAoBrD,IAAI;AAlBT,wBAkBU;AAYV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}

package/dist/stories/tags/Tags.stories.js

@@ -0,0 +1,35 @@
+export default {
+    title: 'Indicators/Tag/Informative',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Text label displayed inside the tag',
+        },
+        id: {
+            control: 'text',
+            description: 'ID of the tag (optional)',
+        },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+            description: 'Size of the tag',
+        },
+    },
+};
+const createInformativeTag = (args) => {
+    const tag = document.createElement('mc-tag');
+    if (args.label)
+        tag.setAttribute('label', args.label);
+    if (args.id)
+        tag.setAttribute('id', args.id);
+    if (args.size)
+        tag.setAttribute('size', args.size);
+    return tag;
+};
+export const Informative = (args) => createInformativeTag(args);
+Informative.args = {
+    id: 'tag-informative',
+    label: 'Static Tag',
+    size: 'm',
+};

package/dist/stories/tags/TagsContextualised.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Contextualised: StoryFn;
+//# sourceMappingURL=TagsContextualised.stories.d.ts.map

package/dist/stories/tags/TagsContextualised.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsContextualised.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/tags/TagsContextualised.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAyBrD,IAAI;AAtBT,wBAsBU;AAiBV,eAAO,MAAM,cAAc,EAAE,OAAiD,CAAC"}

package/dist/stories/tags/TagsContextualised.stories.js

@@ -0,0 +1,51 @@
+import { expect, waitFor } from 'storybook/test';
+export default {
+    title: 'Indicators/Tag/Contextualised',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Text label displayed inside the tag',
+        },
+        contextualisedNumber: {
+            control: 'number',
+            description: 'Number badge displayed on the tag',
+        },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+            description: 'Size of the tag',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the tag',
+        },
+    },
+};
+const createContextualisedTag = (args) => {
+    const tag = document.createElement('mc-tag-contextualised');
+    if (args.label)
+        tag.setAttribute('label', args.label);
+    if (args.contextualisedNumber)
+        tag.setAttribute('contextualisednumber', args.contextualisedNumber.toString());
+    if (args.size)
+        tag.setAttribute('size', args.size);
+    if (args.disabled)
+        tag.setAttribute('disabled', 'true');
+    return tag;
+};
+export const Contextualised = (args) => createContextualisedTag(args);
+Contextualised.args = {
+    label: 'Notifications',
+    contextualisedNumber: 8,
+    size: 'm',
+};
+Contextualised.play = async ({ canvasElement }) => {
+    const tagEl = await waitFor(() => canvasElement.querySelector('mc-tag-contextualised'));
+    expect(tagEl?.getAttribute('contextualisednumber')).toBe('8');
+    const shadow = tagEl?.shadowRoot;
+    const badge = shadow?.querySelector('.mc-number-badge');
+    const label = shadow?.querySelector('.mc-tag__label');
+    expect(badge?.textContent?.trim()).toBe('8');
+    expect(label?.textContent?.trim()).toBe('Notifications');
+};

package/dist/stories/tags/TagsInteractive.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Interactive: StoryFn;
+//# sourceMappingURL=TagsInteractive.stories.d.ts.map

package/dist/stories/tags/TagsInteractive.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInteractive.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/tags/TagsInteractive.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA8BrD,IAAI;AA1BT,wBA0BU;AAeV,eAAO,MAAM,WAAW,EAAE,OAA8C,CAAC"}

package/dist/stories/tags/TagsInteractive.stories.js

@@ -0,0 +1,55 @@
+import { userEvent, expect } from 'storybook/test';
+import { action } from 'storybook/actions';
+export default {
+    title: 'Indicators/Tag/Interactive',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Text label displayed inside the tag',
+        },
+        id: {
+            control: 'text',
+            description: 'ID of the tag (optional)',
+        },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+            description: 'Size of the tag',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the tag',
+        },
+        onClick: {
+            action: 'clicked',
+            table: { category: 'Events' },
+        },
+    },
+};
+const createInteractiveTag = (args) => {
+    const tag = document.createElement('mc-tag-interactive');
+    if (args.label)
+        tag.setAttribute('label', args.label);
+    if (args.id)
+        tag.setAttribute('id', args.id);
+    if (args.size)
+        tag.setAttribute('size', args.size);
+    if (args.disabled)
+        tag.setAttribute('disabled', 'true');
+    tag.addEventListener('click', action('clicked'));
+    return tag;
+};
+export const Interactive = (args) => createInteractiveTag(args);
+Interactive.args = {
+    id: 'tag-interactive',
+    label: 'Click me',
+    size: 'm',
+};
+Interactive.play = async ({ canvasElement }) => {
+    const button = canvasElement
+        .querySelector('mc-tag-interactive')
+        ?.shadowRoot?.querySelector('button');
+    expect(button).not.toBeNull();
+    await userEvent.click(button);
+};

package/dist/stories/tags/TagsRemovable.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Removable: StoryFn;
+//# sourceMappingURL=TagsRemovable.stories.d.ts.map

package/dist/stories/tags/TagsRemovable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsRemovable.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/tags/TagsRemovable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBA8BrD,IAAI;AA1BT,wBA0BU;AAgBV,eAAO,MAAM,SAAS,EAAE,OAA4C,CAAC"}

package/dist/stories/tags/TagsRemovable.stories.js

@@ -0,0 +1,56 @@
+import { userEvent, expect } from 'storybook/test';
+import { action } from 'storybook/actions';
+export default {
+    title: 'Indicators/Tag/Removable',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Text label displayed inside the tag',
+        },
+        id: {
+            control: 'text',
+            description: 'ID of the tag (required)',
+        },
+        removableLabel: {
+            control: 'text',
+            description: 'Accessible label for the remove button',
+        },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+            description: 'Size of the tag',
+        },
+        'remove-tag': {
+            action: 'remove-tag',
+            table: { category: 'Events' },
+        },
+    },
+};
+const createRemovableTag = (args) => {
+    const tag = document.createElement('mc-tag-removable');
+    if (args.label)
+        tag.setAttribute('label', args.label);
+    if (args.id)
+        tag.setAttribute('id', args.id);
+    if (args.size)
+        tag.setAttribute('size', args.size);
+    if (args.removableLabel)
+        tag.setAttribute('removablelabel', args.removableLabel);
+    tag.addEventListener('remove-tag', action('remove-tag'));
+    return tag;
+};
+export const Removable = (args) => createRemovableTag(args);
+Removable.args = {
+    id: 'tag-vue',
+    label: 'Tag label',
+    removableLabel: 'Remove Vue tag',
+    size: 'm',
+};
+Removable.play = async ({ canvasElement }) => {
+    const btn = canvasElement
+        .querySelector('mc-tag-removable')
+        ?.shadowRoot?.querySelector('button');
+    expect(btn).not.toBeNull();
+    await userEvent.click(btn);
+};

package/dist/stories/tags/TagsSelectable.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryFn } from '@storybook/html-vite';
+declare const _default: Meta;
+export default _default;
+export declare const Default: StoryFn;
+//# sourceMappingURL=TagsSelectable.stories.d.ts.map

package/dist/stories/tags/TagsSelectable.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsSelectable.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/tags/TagsSelectable.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;wBAsCrD,IAAI;AAlCT,wBAkCU;AAiBV,eAAO,MAAM,OAAO,EAAE,OAA6C,CAAC"}

package/dist/stories/tags/TagsSelectable.stories.js

@@ -0,0 +1,70 @@
+import { userEvent, expect } from 'storybook/test';
+import { action } from 'storybook/actions';
+export default {
+    title: 'Indicators/Tag/Selectable',
+    tags: ['autodocs', 'beta'],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Text label displayed inside the tag',
+        },
+        id: {
+            control: 'text',
+            description: 'ID of the tag (required)',
+        },
+        name: {
+            control: 'text',
+            description: 'Form name (used for selectable)',
+        },
+        checked: {
+            control: 'boolean',
+            description: 'Checked state of the tag',
+        },
+        size: {
+            control: 'select',
+            options: ['s', 'm', 'l'],
+            description: 'Size of the tag',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the tag',
+        },
+        'update:checked': {
+            action: 'update:checked',
+            table: { category: 'Events' },
+        },
+    },
+};
+const createSelectableTag = (args) => {
+    const tag = document.createElement('mc-tag-selectable');
+    if (args.label)
+        tag.setAttribute('label', args.label);
+    if (args.id)
+        tag.setAttribute('id', args.id);
+    if (args.name)
+        tag.setAttribute('name', args.name);
+    if (args.size)
+        tag.setAttribute('size', args.size);
+    if (args.disabled)
+        tag.setAttribute('disabled', 'true');
+    if (args.checked)
+        tag.setAttribute('checked', 'true');
+    tag.addEventListener('update:checked', action('update:checked'));
+    return tag;
+};
+export const Default = (args) => createSelectableTag(args);
+Default.args = {
+    id: 'tag1',
+    name: 'filters',
+    label: 'Tag label',
+    checked: true,
+    size: 'm',
+};
+Default.play = async ({ canvasElement }) => {
+    const input = canvasElement
+        .querySelector('mc-tag-selectable')
+        ?.shadowRoot?.querySelector('input');
+    expect(input?.checked).toBe(true);
+    await userEvent.click(input);
+    expect(input?.checked).toBe(false);
+};

package/dist/stories/textarea/Textarea.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * A textarea is used for multi-line text input, sharing appearance and states with text inputs.
  *

package/dist/stories/textarea/Textarea.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/textarea/Textarea.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;;GAKG;wBA2CE,IAAI;AAzCT,wBAyCU;AAmBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAO1C,eAAO,MAAM,QAAQ,SAAoB,CAAC"}
+{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/textarea/Textarea.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBA2CE,IAAI;AAzCT,wBAyCU;AAmBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAOzC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAO1C,eAAO,MAAM,QAAQ,SAAoB,CAAC"}

package/dist/stories/textarea/Textarea.stories.js

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { userEvent, expect } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { userEvent, expect } from 'storybook/test';
 /**
  * A textarea is used for multi-line text input, sharing appearance and states with text inputs.
  *

package/dist/stories/textinput/Textinput.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * Inputs are used to create input fields with text on a single line. Their states depend on the user interaction or the context.
  *

package/dist/stories/textinput/Textinput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/textinput/Textinput.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;;GAKG;wBAmEE,IAAI;AAlET,wBAkEU;AAuBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AA4BzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,QAAQ,SAAoB,CAAC"}
+{"version":3,"file":"Textinput.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/textinput/Textinput.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;GAKG;wBAmEE,IAAI;AAlET,wBAkEU;AAuBV,eAAO,MAAM,OAAO,SAAoB,CAAC;AA4BzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,QAAQ,SAAoB,CAAC"}

package/dist/stories/textinput/Textinput.stories.js

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { userEvent, expect } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { userEvent, expect } from 'storybook/test';
 /**
  * Inputs are used to create input fields with text on a single line. Their states depend on the user interaction or the context.
  *

package/dist/stories/toggle/Toggle.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * A toggle is used to choose between two possibilities and when the user needs instant feedback.
  * It is commonly used to show or hide content and act as an "on/off" switch.

package/dist/stories/toggle/Toggle.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/toggle/Toggle.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;;;GAMG;wBA2BE,IAAI;AAzBT,wBAyBU;AAaV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAQzC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAO1C,eAAO,MAAM,KAAK,SAAoB,CAAC"}
+{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/toggle/Toggle.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBA2BE,IAAI;AAzBT,wBAyBU;AAaV,eAAO,MAAM,OAAO,SAAoB,CAAC;AAUzC,eAAO,MAAM,OAAO,SAAoB,CAAC;AAQzC,eAAO,MAAM,QAAQ,SAAoB,CAAC;AAO1C,eAAO,MAAM,KAAK,SAAoB,CAAC"}

package/dist/stories/toggle/Toggle.stories.js

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { userEvent, expect } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { userEvent, expect } from 'storybook/test';
 /**
  * A toggle is used to choose between two possibilities and when the user needs instant feedback.
  * It is commonly used to show or hide content and act as an "on/off" switch.

package/dist/stories/toggle-group/Toggle-group.stories.d.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/html';
+import type { StoryFn, Meta } from '@storybook/html-vite';
 /**
  * Toggle Groups are used to manage multiple toggle switches within a group.
  * They allow users to choose multiple options using toggles, typically for preference or feature settings.

package/dist/stories/toggle-group/Toggle-group.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle-group.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/toggle-group/Toggle-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAGrD;;;;;;GAMG;wBA+BE,IAAI;AA7BT,wBA6BU;AAaV,eAAO,MAAM,OAAO,SAAoB,CAAC;AA8BzC,eAAO,MAAM,UAAU,SAAoB,CAAC;AAkB5C,eAAO,MAAM,YAAY,SAAoB,CAAC"}
+{"version":3,"file":"Toggle-group.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/toggle-group/Toggle-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG1D;;;;;;GAMG;wBA+BE,IAAI;AA7BT,wBA6BU;AAaV,eAAO,MAAM,OAAO,SAAoB,CAAC;AA8BzC,eAAO,MAAM,UAAU,SAAoB,CAAC;AAkB5C,eAAO,MAAM,YAAY,SAAoB,CAAC"}

package/dist/stories/toggle-group/Toggle-group.stories.js

@@ -1,5 +1,5 @@
-import { action } from '@storybook/addon-actions';
-import { userEvent, expect } from '@storybook/test';
+import { action } from 'storybook/actions';
+import { userEvent, expect } from 'storybook/test';
 /**
  * Toggle Groups are used to manage multiple toggle switches within a group.
  * They allow users to choose multiple options using toggles, typically for preference or feature settings.

package/dist/symbol-b05a6e2b.js

@@ -0,0 +1,2 @@
+import{a as n,c as t}from"./array-5b770a93.js";import{w as o,a as i,p as e,t as l}from"./path-1b5da959.js";function u(n){this._context=n}function r(n){return new u(n)}function c(n){return n[0]}function a(n){return n[1]}function s(i,e){var l=t(!0),u=null,s=r,f=null,h=o(p);function p(t){var o,r,c,a=(t=n(t)).length,p=!1;for(null==u&&(f=s(c=h())),o=0;o<=a;++o)!(o<a&&l(r=t[o],o,t))===p&&((p=!p)?f.lineStart():f.lineEnd()),p&&f.point(+i(r,o,t),+e(r,o,t));if(c)return f=null,c+""||null}return i="function"==typeof i?i:void 0===i?c:t(i),e="function"==typeof e?e:void 0===e?a:t(e),p.x=function(n){return arguments.length?(i="function"==typeof n?n:t(+n),p):i},p.y=function(n){return arguments.length?(e="function"==typeof n?n:t(+n),p):e},p.defined=function(n){return arguments.length?(l="function"==typeof n?n:t(!!n),p):l},p.curve=function(n){return arguments.length?(s=n,null!=u&&(f=s(u)),p):s},p.context=function(n){return arguments.length?(null==n?u=f=null:f=s(u=n),p):u},p}u.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){(this._line||0!==this._line&&1===this._point)&&this._context.closePath(),this._line=1-this._line},point:function(n,t){switch(n=+n,t=+t,this._point){case 0:this._point=1,this._line?this._context.lineTo(n,t):this._context.moveTo(n,t);break;case 1:this._point=2;default:this._context.lineTo(n,t)}}};var f={draw(n,t){const o=i(t/e);n.moveTo(o,0),n.arc(0,0,o,0,l)}};const h=i(1/3),p=2*h;var _={draw(n,t){const o=i(t/p),e=o*h;n.moveTo(0,-o),n.lineTo(e,0),n.lineTo(0,o),n.lineTo(-e,0),n.closePath()}},d={draw(n,t){const o=i(t),e=-o/2;n.rect(e,e,o,o)}};const y=i(3);var v={draw(n,t){const o=-i(t/(3*y));n.moveTo(0,2*o),n.lineTo(-y*o,-o),n.lineTo(y*o,-o),n.closePath()}};function T(n,i){let e=null,l=o(u);function u(){let t;if(e||(e=t=l()),n.apply(this,arguments).draw(e,+i.apply(this,arguments)),t)return e=null,t+""||null}return n="function"==typeof n?n:t(n||f),i="function"==typeof i?i:t(void 0===i?64:+i),u.type=function(o){return arguments.length?(n="function"==typeof o?o:t(o),u):n},u.size=function(n){return arguments.length?(i="function"==typeof n?n:t(+n),u):i},u.context=function(n){return arguments.length?(e=null==n?null:n,u):e},u}export{T as S,v as a,f as b,_ as c,s as l,d as s};
+//# sourceMappingURL=symbol-b05a6e2b.js.map

package/dist/symbol-b05a6e2b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"symbol-b05a6e2b.js","sources":["../node_modules/d3-shape/src/curve/linear.js","../node_modules/d3-shape/src/point.js","../node_modules/d3-shape/src/line.js","../node_modules/d3-shape/src/symbol/circle.js","../node_modules/d3-shape/src/symbol/diamond.js","../node_modules/d3-shape/src/symbol/square.js","../node_modules/d3-shape/src/symbol/triangle.js","../node_modules/d3-shape/src/symbol.js"],"sourcesContent":["function Linear(context) {\n  this._context = context;\n}\n\nLinear.prototype = {\n  areaStart: function() {\n    this._line = 0;\n  },\n  areaEnd: function() {\n    this._line = NaN;\n  },\n  lineStart: function() {\n    this._point = 0;\n  },\n  lineEnd: function() {\n    if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();\n    this._line = 1 - this._line;\n  },\n  point: function(x, y) {\n    x = +x, y = +y;\n    switch (this._point) {\n      case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;\n      case 1: this._point = 2; // falls through\n      default: this._context.lineTo(x, y); break;\n    }\n  }\n};\n\nexport default function(context) {\n  return new Linear(context);\n}\n","export function x(p) {\n  return p[0];\n}\n\nexport function y(p) {\n  return p[1];\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport curveLinear from \"./curve/linear.js\";\nimport {withPath} from \"./path.js\";\nimport {x as pointX, y as pointY} from \"./point.js\";\n\nexport default function(x, y) {\n  var defined = constant(true),\n      context = null,\n      curve = curveLinear,\n      output = null,\n      path = withPath(line);\n\n  x = typeof x === \"function\" ? x : (x === undefined) ? pointX : constant(x);\n  y = typeof y === \"function\" ? y : (y === undefined) ? pointY : constant(y);\n\n  function line(data) {\n    var i,\n        n = (data = array(data)).length,\n        d,\n        defined0 = false,\n        buffer;\n\n    if (context == null) output = curve(buffer = path());\n\n    for (i = 0; i <= n; ++i) {\n      if (!(i < n && defined(d = data[i], i, data)) === defined0) {\n        if (defined0 = !defined0) output.lineStart();\n        else output.lineEnd();\n      }\n      if (defined0) output.point(+x(d, i, data), +y(d, i, data));\n    }\n\n    if (buffer) return output = null, buffer + \"\" || null;\n  }\n\n  line.x = function(_) {\n    return arguments.length ? (x = typeof _ === \"function\" ? _ : constant(+_), line) : x;\n  };\n\n  line.y = function(_) {\n    return arguments.length ? (y = typeof _ === \"function\" ? _ : constant(+_), line) : y;\n  };\n\n  line.defined = function(_) {\n    return arguments.length ? (defined = typeof _ === \"function\" ? _ : constant(!!_), line) : defined;\n  };\n\n  line.curve = function(_) {\n    return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;\n  };\n\n  line.context = function(_) {\n    return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;\n  };\n\n  return line;\n}\n","import {pi, sqrt, tau} from \"../math.js\";\n\nexport default {\n  draw(context, size) {\n    const r = sqrt(size / pi);\n    context.moveTo(r, 0);\n    context.arc(0, 0, r, 0, tau);\n  }\n};\n","import {sqrt} from \"../math.js\";\n\nconst tan30 = sqrt(1 / 3);\nconst tan30_2 = tan30 * 2;\n\nexport default {\n  draw(context, size) {\n    const y = sqrt(size / tan30_2);\n    const x = y * tan30;\n    context.moveTo(0, -y);\n    context.lineTo(x, 0);\n    context.lineTo(0, y);\n    context.lineTo(-x, 0);\n    context.closePath();\n  }\n};\n","import {sqrt} from \"../math.js\";\n\nexport default {\n  draw(context, size) {\n    const w = sqrt(size);\n    const x = -w / 2;\n    context.rect(x, x, w, w);\n  }\n};\n","import {sqrt} from \"../math.js\";\n\nconst sqrt3 = sqrt(3);\n\nexport default {\n  draw(context, size) {\n    const y = -sqrt(size / (sqrt3 * 3));\n    context.moveTo(0, y * 2);\n    context.lineTo(-sqrt3 * y, -y);\n    context.lineTo(sqrt3 * y, -y);\n    context.closePath();\n  }\n};\n","import constant from \"./constant.js\";\nimport {withPath} from \"./path.js\";\nimport asterisk from \"./symbol/asterisk.js\";\nimport circle from \"./symbol/circle.js\";\nimport cross from \"./symbol/cross.js\";\nimport diamond from \"./symbol/diamond.js\";\nimport diamond2 from \"./symbol/diamond2.js\";\nimport plus from \"./symbol/plus.js\";\nimport square from \"./symbol/square.js\";\nimport square2 from \"./symbol/square2.js\";\nimport star from \"./symbol/star.js\";\nimport triangle from \"./symbol/triangle.js\";\nimport triangle2 from \"./symbol/triangle2.js\";\nimport wye from \"./symbol/wye.js\";\nimport times from \"./symbol/times.js\";\n\n// These symbols are designed to be filled.\nexport const symbolsFill = [\n  circle,\n  cross,\n  diamond,\n  square,\n  star,\n  triangle,\n  wye\n];\n\n// These symbols are designed to be stroked (with a width of 1.5px and round caps).\nexport const symbolsStroke = [\n  circle,\n  plus,\n  times,\n  triangle2,\n  asterisk,\n  square2,\n  diamond2\n];\n\nexport default function Symbol(type, size) {\n  let context = null,\n      path = withPath(symbol);\n\n  type = typeof type === \"function\" ? type : constant(type || circle);\n  size = typeof size === \"function\" ? size : constant(size === undefined ? 64 : +size);\n\n  function symbol() {\n    let buffer;\n    if (!context) context = buffer = path();\n    type.apply(this, arguments).draw(context, +size.apply(this, arguments));\n    if (buffer) return context = null, buffer + \"\" || null;\n  }\n\n  symbol.type = function(_) {\n    return arguments.length ? (type = typeof _ === \"function\" ? _ : constant(_), symbol) : type;\n  };\n\n  symbol.size = function(_) {\n    return arguments.length ? (size = typeof _ === \"function\" ? _ : constant(+_), symbol) : size;\n  };\n\n  symbol.context = function(_) {\n    return arguments.length ? (context = _ == null ? null : _, symbol) : context;\n  };\n\n  return symbol;\n}\n"],"names":["Linear","context","this","_context","curveLinear","x","p","y","line","defined","constant","curve","output","path","withPath","data","i","d","buffer","n","array","length","defined0","lineStart","lineEnd","point","undefined","pointX","pointY","_","arguments","prototype","areaStart","_line","areaEnd","NaN","_point","closePath","lineTo","moveTo","symbolCircle","draw","size","r","sqrt","pi","arc","tau","tan30","tan30_2","symbolDiamond","symbolSquare","w","rect","sqrt3","symbolTriangle","Symbol","type","symbol","apply","circle"],"mappings":"2GAAA,SAASA,EAAOC,GACdC,KAAKC,SAAWF,CAClB,CA0Be,SAAQG,EAACH,GACtB,OAAO,IAAID,EAAOC,EACpB,CC9BO,SAASI,EAAEC,GAChB,OAAOA,EAAE,EACX,CAEO,SAASC,EAAED,GAChB,OAAOA,EAAE,EACX,CCAe,SAAAE,EAASH,EAAGE,GACzB,IAAIE,EAAUC,GAAS,GACnBT,EAAU,KACVU,EAAQP,EACRQ,EAAS,KACTC,EAAOC,EAASN,GAKpB,SAASA,EAAKO,GACZ,IAAIC,EAEAC,EAEAC,EAHAC,GAAKJ,EAAOK,EAAML,IAAOM,OAEzBC,GAAW,EAKf,IAFe,MAAXrB,IAAiBW,EAASD,EAAMO,EAASL,MAExCG,EAAI,EAAGA,GAAKG,IAAKH,IACdA,EAAIG,GAAKV,EAAQQ,EAAIF,EAAKC,GAAIA,EAAGD,MAAWO,KAC5CA,GAAYA,GAAUV,EAAOW,YAC5BX,EAAOY,WAEVF,GAAUV,EAAOa,OAAOpB,EAAEY,EAAGD,EAAGD,IAAQR,EAAEU,EAAGD,EAAGD,IAGtD,GAAIG,EAAQ,OAAON,EAAS,KAAMM,EAAS,IAAM,IAClD,CAsBD,OA3CAb,EAAiB,mBAANA,EAAmBA,OAAWqB,IAANrB,EAAmBsB,EAASjB,EAASL,GACxEE,EAAiB,mBAANA,EAAmBA,OAAWmB,IAANnB,EAAmBqB,EAASlB,EAASH,GAsBxEC,EAAKH,EAAI,SAASwB,GAChB,OAAOC,UAAUT,QAAUhB,EAAiB,mBAANwB,EAAmBA,EAAInB,GAAUmB,GAAIrB,GAAQH,CACvF,EAEEG,EAAKD,EAAI,SAASsB,GAChB,OAAOC,UAAUT,QAAUd,EAAiB,mBAANsB,EAAmBA,EAAInB,GAAUmB,GAAIrB,GAAQD,CACvF,EAEEC,EAAKC,QAAU,SAASoB,GACtB,OAAOC,UAAUT,QAAUZ,EAAuB,mBAANoB,EAAmBA,EAAInB,IAAWmB,GAAIrB,GAAQC,CAC9F,EAEED,EAAKG,MAAQ,SAASkB,GACpB,OAAOC,UAAUT,QAAUV,EAAQkB,EAAc,MAAX5B,IAAoBW,EAASD,EAAMV,IAAWO,GAAQG,CAChG,EAEEH,EAAKP,QAAU,SAAS4B,GACtB,OAAOC,UAAUT,QAAe,MAALQ,EAAY5B,EAAUW,EAAS,KAAOA,EAASD,EAAMV,EAAU4B,GAAIrB,GAAQP,CAC1G,EAESO,CACT,CFrDAR,EAAO+B,UAAY,CACjBC,UAAW,WACT9B,KAAK+B,MAAQ,CACd,EACDC,QAAS,WACPhC,KAAK+B,MAAQE,GACd,EACDZ,UAAW,WACTrB,KAAKkC,OAAS,CACf,EACDZ,QAAS,YACHtB,KAAK+B,OAAyB,IAAf/B,KAAK+B,OAA+B,IAAhB/B,KAAKkC,SAAelC,KAAKC,SAASkC,YACzEnC,KAAK+B,MAAQ,EAAI/B,KAAK+B,KACvB,EACDR,MAAO,SAASpB,EAAGE,GAEjB,OADAF,GAAKA,EAAGE,GAAKA,EACLL,KAAKkC,QACX,KAAK,EAAGlC,KAAKkC,OAAS,EAAGlC,KAAK+B,MAAQ/B,KAAKC,SAASmC,OAAOjC,EAAGE,GAAKL,KAAKC,SAASoC,OAAOlC,EAAGE,GAAI,MAC/F,KAAK,EAAGL,KAAKkC,OAAS,EACtB,QAASlC,KAAKC,SAASmC,OAAOjC,EAAGE,GAEpC,GGvBH,IAAeiC,EAAA,CACb,IAAAC,CAAKxC,EAASyC,GACZ,MAAMC,EAAIC,EAAKF,EAAOG,GACtB5C,EAAQsC,OAAOI,EAAG,GAClB1C,EAAQ6C,IAAI,EAAG,EAAGH,EAAG,EAAGI,EACzB,GCLH,MAAMC,EAAQJ,EAAK,EAAI,GACjBK,EAAkB,EAARD,EAEhB,IAAeE,EAAA,CACb,IAAAT,CAAKxC,EAASyC,GACZ,MAAMnC,EAAIqC,EAAKF,EAAOO,GAChB5C,EAAIE,EAAIyC,EACd/C,EAAQsC,OAAO,GAAIhC,GACnBN,EAAQqC,OAAOjC,EAAG,GAClBJ,EAAQqC,OAAO,EAAG/B,GAClBN,EAAQqC,QAAQjC,EAAG,GACnBJ,EAAQoC,WACT,GCZYc,EAAA,CACb,IAAAV,CAAKxC,EAASyC,GACZ,MAAMU,EAAIR,EAAKF,GACTrC,GAAK+C,EAAI,EACfnD,EAAQoD,KAAKhD,EAAGA,EAAG+C,EAAGA,EACvB,GCLH,MAAME,EAAQV,EAAK,GAEnB,IAAeW,EAAA,CACb,IAAAd,CAAKxC,EAASyC,GACZ,MAAMnC,GAAKqC,EAAKF,GAAgB,EAARY,IACxBrD,EAAQsC,OAAO,EAAO,EAAJhC,GAClBN,EAAQqC,QAAQgB,EAAQ/C,GAAIA,GAC5BN,EAAQqC,OAAOgB,EAAQ/C,GAAIA,GAC3BN,EAAQoC,WACT,GC2BY,SAASmB,EAAOC,EAAMf,GACnC,IAAIzC,EAAU,KACVY,EAAOC,EAAS4C,GAKpB,SAASA,IACP,IAAIxC,EAGJ,GAFKjB,IAASA,EAAUiB,EAASL,KACjC4C,EAAKE,MAAMzD,KAAM4B,WAAWW,KAAKxC,GAAUyC,EAAKiB,MAAMzD,KAAM4B,YACxDZ,EAAQ,OAAOjB,EAAU,KAAMiB,EAAS,IAAM,IACnD,CAcD,OAtBAuC,EAAuB,mBAATA,EAAsBA,EAAO/C,EAAS+C,GAAQG,GAC5DlB,EAAuB,mBAATA,EAAsBA,EAAOhC,OAAkBgB,IAATgB,EAAqB,IAAMA,GAS/EgB,EAAOD,KAAO,SAAS5B,GACrB,OAAOC,UAAUT,QAAUoC,EAAoB,mBAAN5B,EAAmBA,EAAInB,EAASmB,GAAI6B,GAAUD,CAC3F,EAEEC,EAAOhB,KAAO,SAASb,GACrB,OAAOC,UAAUT,QAAUqB,EAAoB,mBAANb,EAAmBA,EAAInB,GAAUmB,GAAI6B,GAAUhB,CAC5F,EAEEgB,EAAOzD,QAAU,SAAS4B,GACxB,OAAOC,UAAUT,QAAUpB,EAAe,MAAL4B,EAAY,KAAOA,EAAG6B,GAAUzD,CACzE,EAESyD,CACT"}