revotech-ui-kit 0.0.11 → 0.0.12

package/dist/src/components/atoms/popover/popover-content.js

@@ -1,62 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { popoverContentStyle } from './popover.style'; // Import the cva styles
-import { TWStyles } from '../../../styles';
-import { Popover } from './popover.atom';
-import { cn } from '../../../helpers';
-let PopoverContent = class PopoverContent extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.side = 'bottom';
-    }
-    get _popover() {
-        let parent = this.parentElement;
-        // Traverse up the DOM tree to find the parent `Popover`
-        while (parent && !(parent instanceof Popover)) {
-            parent = parent.parentElement;
-        }
-        return parent;
-    }
-    handleClickOutside(event) {
-        // Check if the click was outside the popover
-        const slot = this.shadowRoot?.querySelector('slot');
-        if (slot) {
-            const assignedElements = slot.assignedElements({ flatten: true });
-            console.log(assignedElements[0]);
-            if (!assignedElements[0]?.contains(event.target)) {
-                const popover = this._popover; // Get the parent popover
-                //@ts-ignore
-                popover.isOpen = false;
-            }
-        }
-    }
-    firstUpdated(_changedProperties) {
-        window.addEventListener('click', this.handleClickOutside.bind(this));
-    }
-    updated(_changedProperties) {
-        if (!this._popover?.isOpen) {
-            window.removeEventListener('click', this.handleClickOutside.bind(this));
-        }
-    }
-    render() {
-        const classes = popoverContentStyle({
-            state: 'open',
-            side: this.side,
-        });
-        return html `
-      <div class="${cn(classes)}">
-        <slot></slot>
-      </div>
-    `;
-    }
-};
-PopoverContent.styles = [css ``, TWStyles];
-__decorate([
-    property({ type: String })
-], PopoverContent.prototype, "side", void 0);
-PopoverContent = __decorate([
-    customElement('rtg-popover-content')
-], PopoverContent);
-export { PopoverContent };
-//# sourceMappingURL=popover-content.js.map

package/dist/src/components/atoms/popover/popover-content.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-content.js","sourceRoot":"","sources":["../../../../../src/components/atoms/popover/popover-content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC,CAAC,wBAAwB;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAG/B,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAWuB,SAAI,GAC9B,QAAQ,CAAC;IAqCb,CAAC;IA/CC,IAAI,QAAQ;QACV,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,wDAAwD;QACxD,OAAO,MAAM,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,EAAE,CAAC;YAC9C,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAIO,kBAAkB,CAAC,KAAiB;QAC1C,6CAA6C;QAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YAClE,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;YACjC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;gBACzD,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,yBAAyB;gBACxD,YAAY;gBACZ,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC;IAES,YAAY,CAAC,kBAAkC;QACvD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACvE,CAAC;IAES,OAAO,CAAC,kBAAkC;QAClD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC;YAC3B,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,mBAAmB,CAAC;YAClC,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,EAAE,CAAC,OAAO,CAAC;;;KAG1B,CAAC;IACJ,CAAC;;AA/CM,qBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAUN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAChB;AAZA,cAAc;IAD1B,aAAa,CAAC,qBAAqB,CAAC;GACxB,cAAc,CAiD1B","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { popoverContentStyle } from './popover.style'; // Import the cva styles\nimport { TWStyles } from '../../../styles';\nimport { Popover } from './popover.atom';\nimport { cn } from '../../../helpers';\n\n@customElement('rtg-popover-content')\nexport class PopoverContent extends LitElement {\n  static styles = [css``, TWStyles];\n  get _popover(): Popover | null {\n    let parent = this.parentElement;\n    // Traverse up the DOM tree to find the parent `Popover`\n    while (parent && !(parent instanceof Popover)) {\n      parent = parent.parentElement;\n    }\n    return parent;\n  }\n\n  @property({ type: String }) side: 'bottom' | 'left' | 'right' | 'top' =\n    'bottom';\n  private handleClickOutside(event: MouseEvent) {\n    // Check if the click was outside the popover\n    const slot = this.shadowRoot?.querySelector('slot');\n    if (slot) {\n      const assignedElements = slot.assignedElements({ flatten: true });\n      console.log(assignedElements[0]);\n      if (!assignedElements[0]?.contains(event.target as Node)) {\n        const popover = this._popover; // Get the parent popover\n        //@ts-ignore\n        popover.isOpen = false;\n      }\n    }\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    window.addEventListener('click', this.handleClickOutside.bind(this));\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if (!this._popover?.isOpen) {\n      window.removeEventListener('click', this.handleClickOutside.bind(this));\n    }\n  }\n\n  render() {\n    const classes = popoverContentStyle({\n      state: 'open',\n      side: this.side,\n    });\n\n    return html`\n      <div class=\"${cn(classes)}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/popover/popover-trigger.js

@@ -1,50 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-import { Popover } from './popover.atom'; // Import the correct parent component
-let PopoverTrigger = class PopoverTrigger extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.handleClick = () => {
-            const popover = this._popover; // Get the parent popover
-            if (popover) {
-                popover.isOpen = !popover.isOpen;
-            }
-        };
-    }
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        const slots = this.shadowRoot?.querySelector('slot[name="trigger-button"]');
-        const assignedElements = slots?.assignedElements({ flatten: true });
-        if (assignedElements && assignedElements.length > 0) {
-            //@ts-ignore
-            assignedElements[0].click = this.handleClick;
-            // assignedElements[0].addEventListener('click', this.handleClick);
-        }
-        this.shadowRoot?.addEventListener('click', e => {
-            e.stopPropagation();
-        });
-    }
-    get _popover() {
-        let parent = this.parentElement;
-        // Traverse up the DOM tree to find the parent `Popover`
-        while (parent && !(parent instanceof Popover)) {
-            parent = parent.parentElement;
-        }
-        return parent;
-    }
-    render() {
-        return html `
-      <div style="width: fit-content;">
-        <slot name="trigger-button"></slot>
-      </div>
-    `;
-    }
-};
-PopoverTrigger.styles = [css ``, TWStyles];
-PopoverTrigger = __decorate([
-    customElement('rtg-popover-trigger') // Rename the custom element tag to avoid conflict
-], PopoverTrigger);
-export { PopoverTrigger };
-//# sourceMappingURL=popover-trigger.js.map

package/dist/src/components/atoms/popover/popover-trigger.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover-trigger.js","sourceRoot":"","sources":["../../../../../src/components/atoms/popover/popover-trigger.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,CAAC,sCAAsC;AAGzE,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAGL,gBAAW,GAAG,GAAG,EAAE;YACjB,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,yBAAyB;YACxD,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;IAmCJ,CAAC;IAjCW,YAAY,CAAC,kBAAkC;QACvD,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAC1C,6BAA6B,CACX,CAAC;QACrB,MAAM,gBAAgB,GAAG,KAAK,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACpE,IAAI,gBAAgB,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,YAAY;YACZ,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;YAC7C,mEAAmE;QACrE,CAAC;QAED,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAC7C,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,QAAQ;QACV,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,wDAAwD;QACxD,OAAO,MAAM,IAAI,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,EAAE,CAAC;YAC9C,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AAzCM,qBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,cAAc;IAD1B,aAAa,CAAC,qBAAqB,CAAC,CAAC,kDAAkD;GAC3E,cAAc,CA2C1B","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\nimport { Popover } from './popover.atom'; // Import the correct parent component\n\n@customElement('rtg-popover-trigger') // Rename the custom element tag to avoid conflict\nexport class PopoverTrigger extends LitElement {\n  static styles = [css``, TWStyles];\n\n  handleClick = () => {\n    const popover = this._popover; // Get the parent popover\n    if (popover) {\n      popover.isOpen = !popover.isOpen;\n    }\n  };\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties);\n    const slots = this.shadowRoot?.querySelector(\n      'slot[name=\"trigger-button\"]'\n    ) as HTMLSlotElement;\n    const assignedElements = slots?.assignedElements({ flatten: true });\n    if (assignedElements && assignedElements.length > 0) {\n      //@ts-ignore\n      assignedElements[0].click = this.handleClick;\n      // assignedElements[0].addEventListener('click', this.handleClick);\n    }\n\n    this.shadowRoot?.addEventListener('click', e => {\n      e.stopPropagation();\n    });\n  }\n\n  get _popover(): Popover | null {\n    let parent = this.parentElement;\n    // Traverse up the DOM tree to find the parent `Popover`\n    while (parent && !(parent instanceof Popover)) {\n      parent = parent.parentElement;\n    }\n    return parent;\n  }\n\n  render() {\n    return html`\n      <div style=\"width: fit-content;\">\n        <slot name=\"trigger-button\"></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/popover/popover.atom.js

@@ -1,40 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-let Popover = class Popover extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isOpen = false;
-    }
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        // Add event listener for clicks outside the popover
-    }
-    updated(_changedProperties) {
-        super.updated(_changedProperties);
-        // Remove event listener when the popover is closed
-    }
-    render() {
-        return html `
-      <div>
-        <slot
-          name="trigger"
-          @click="${() => (this.isOpen = !this.isOpen)}"
-        ></slot>
-        <div data-testid="popover-content-holder" ?hidden="${!this.isOpen}">
-          <slot name="content"></slot>
-        </div>
-      </div>
-    `;
-    }
-};
-Popover.styles = [css ``, TWStyles];
-__decorate([
-    state()
-], Popover.prototype, "isOpen", void 0);
-Popover = __decorate([
-    customElement('rtg-popover')
-], Popover);
-export { Popover };
-//# sourceMappingURL=popover.atom.js.map

package/dist/src/components/atoms/popover/popover.atom.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/popover/popover.atom.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGI,WAAM,GAAY,KAAK,CAAC;IAyBnC,CAAC;IAvBW,YAAY,CAAC,kBAAkC;QACvD,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,oDAAoD;IACtD,CAAC;IAES,OAAO,CAAC,kBAAkC;QAClD,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAClC,mDAAmD;IACrD,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;oBAIK,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;;6DAEO,CAAC,IAAI,CAAC,MAAM;;;;KAIpE,CAAC;IACJ,CAAC;;AA1BM,cAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAEzB;IAAR,KAAK,EAAE;uCAAyB;AAHtB,OAAO;IADnB,aAAa,CAAC,aAAa,CAAC;GAChB,OAAO,CA4BnB","sourcesContent":["import { LitElement, html, css, PropertyValues } from 'lit';\nimport { customElement, state } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-popover')\nexport class Popover extends LitElement {\n  static styles = [css``, TWStyles];\n\n  @state() isOpen: boolean = false;\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties);\n    // Add event listener for clicks outside the popover\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    super.updated(_changedProperties);\n    // Remove event listener when the popover is closed\n  }\n\n  render() {\n    return html`\n      <div>\n        <slot\n          name=\"trigger\"\n          @click=\"${() => (this.isOpen = !this.isOpen)}\"\n        ></slot>\n        <div data-testid=\"popover-content-holder\" ?hidden=\"${!this.isOpen}\">\n          <slot name=\"content\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/popover/popover.stories.js

@@ -1,69 +0,0 @@
-import { html } from 'lit';
-import './popover.atom';
-import './popover-trigger';
-import './popover-content';
-import '../button/button.atom';
-import '../label/label.atom';
-import '../input/input.atom';
-import { expect, within, userEvent } from '@storybook/test';
-// Create a test to ensure the popover opens and closes correctly
-const testPopoverBehavior = async (args, canvasElement) => {
-    const canvas = within(canvasElement);
-    // Click on the trigger button to open the popover
-    const trigger = await canvas.getByText(args.triggerLabel);
-    await userEvent.click(trigger);
-    // Ensure the popover content is visible
-    const popoverContent = await canvas.getByTestId('popover-content');
-    expect(popoverContent).toBeVisible();
-    // Click inside the popover content, it should remain open
-    await userEvent.click(popoverContent);
-    expect(popoverContent).toBeVisible();
-    // Click outside the popover, it should close
-    await userEvent.click(document.body); // Trigger a click outside
-    await new Promise(r => setTimeout(r, 100)); // Wait for state update
-    // Check if popover content is hidden
-    const hiddenPopoverContent = canvas.queryByTestId('popover-content-holder');
-    expect(hiddenPopoverContent).toBeNull();
-};
-export default {
-    title: 'components/atoms/popover',
-    component: 'rtg-popover',
-    tags: ['autodocs'],
-    argTypes: {
-        triggerLabel: { control: 'text', defaultValue: 'Click me' },
-        popoverContent: {
-            control: 'text',
-            defaultValue: 'This is the content inside the popover.',
-        },
-    },
-};
-const Template = (args) => html `
-  <rtg-popover>
-    <!-- Trigger to open/close the popover -->
-    <rtg-popover-trigger slot="trigger">
-      <rtg-button variant="outline" slot="trigger-button"
-        >${args.triggerLabel}</rtg-button
-      >
-    </rtg-popover-trigger>
-
-    <!-- Popover content that will be shown or hidden -->
-    <rtg-popover-content
-      data-side="bottom"
-      data-testid="popover-content"
-      slot="content"
-    >
-      <div>
-        <p>${args.popoverContent}</p>
-      </div>
-    </rtg-popover-content>
-  </rtg-popover>
-`;
-export const Default = Template.bind({});
-Default.args = {
-    triggerLabel: 'Click me',
-    popoverContent: 'This is the content inside the popover.',
-};
-Default.play = async ({ canvasElement }) => {
-    await testPopoverBehavior(Default.args, canvasElement);
-};
-//# sourceMappingURL=popover.stories.js.map

package/dist/src/components/atoms/popover/popover.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/popover/popover.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5D,iEAAiE;AACjE,MAAM,mBAAmB,GAAG,KAAK,EAAE,IAAS,EAAE,aAAkB,EAAE,EAAE;IAClE,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAErC,kDAAkD;IAClD,MAAM,OAAO,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1D,MAAM,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAE/B,wCAAwC;IACxC,MAAM,cAAc,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACnE,MAAM,CAAC,cAAc,CAAC,CAAC,WAAW,EAAE,CAAC;IAErC,0DAA0D;IAC1D,MAAM,SAAS,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;IACtC,MAAM,CAAC,cAAc,CAAC,CAAC,WAAW,EAAE,CAAC;IAErC,6CAA6C;IAC7C,MAAM,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,0BAA0B;IAChE,MAAM,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,wBAAwB;IAEpE,qCAAqC;IACrC,MAAM,oBAAoB,GAAG,MAAM,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IAC5E,MAAM,CAAC,oBAAoB,CAAC,CAAC,QAAQ,EAAE,CAAC;AAC1C,CAAC,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE;QAC3D,cAAc,EAAE;YACd,OAAO,EAAE,MAAM;YACf,YAAY,EAAE,yCAAyC;SACxD;KACF;CACM,CAAC;AAEV,MAAM,QAAQ,GAAY,CAAC,IAAS,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;WAKlC,IAAI,CAAC,YAAY;;;;;;;;;;;aAWf,IAAI,CAAC,cAAc;;;;CAI/B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,YAAY,EAAE,UAAU;IACxB,cAAc,EAAE,yCAAyC;CAC1D,CAAC;AACF,OAAO,CAAC,IAAI,GAAG,KAAK,EAAE,EAAE,aAAa,EAAE,EAAE,EAAE;IACzC,MAAM,mBAAmB,CAAC,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;AACzD,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\nimport { Meta, StoryFn } from '@storybook/web-components';\nimport './popover.atom';\nimport './popover-trigger';\nimport './popover-content';\nimport '../button/button.atom';\nimport '../label/label.atom';\nimport '../input/input.atom';\n\nimport { expect, within, userEvent } from '@storybook/test';\n\n// Create a test to ensure the popover opens and closes correctly\nconst testPopoverBehavior = async (args: any, canvasElement: any) => {\n  const canvas = within(canvasElement);\n\n  // Click on the trigger button to open the popover\n  const trigger = await canvas.getByText(args.triggerLabel);\n  await userEvent.click(trigger);\n\n  // Ensure the popover content is visible\n  const popoverContent = await canvas.getByTestId('popover-content');\n  expect(popoverContent).toBeVisible();\n\n  // Click inside the popover content, it should remain open\n  await userEvent.click(popoverContent);\n  expect(popoverContent).toBeVisible();\n\n  // Click outside the popover, it should close\n  await userEvent.click(document.body); // Trigger a click outside\n  await new Promise(r => setTimeout(r, 100)); // Wait for state update\n\n  // Check if popover content is hidden\n  const hiddenPopoverContent = canvas.queryByTestId('popover-content-holder');\n  expect(hiddenPopoverContent).toBeNull();\n};\n\nexport default {\n  title: 'components/atoms/popover',\n  component: 'rtg-popover',\n  tags: ['autodocs'],\n  argTypes: {\n    triggerLabel: { control: 'text', defaultValue: 'Click me' },\n    popoverContent: {\n      control: 'text',\n      defaultValue: 'This is the content inside the popover.',\n    },\n  },\n} as Meta;\n\nconst Template: StoryFn = (args: any) => html`\n  <rtg-popover>\n    <!-- Trigger to open/close the popover -->\n    <rtg-popover-trigger slot=\"trigger\">\n      <rtg-button variant=\"outline\" slot=\"trigger-button\"\n        >${args.triggerLabel}</rtg-button\n      >\n    </rtg-popover-trigger>\n\n    <!-- Popover content that will be shown or hidden -->\n    <rtg-popover-content\n      data-side=\"bottom\"\n      data-testid=\"popover-content\"\n      slot=\"content\"\n    >\n      <div>\n        <p>${args.popoverContent}</p>\n      </div>\n    </rtg-popover-content>\n  </rtg-popover>\n`;\n\nexport const Default = Template.bind({});\nDefault.args = {\n  triggerLabel: 'Click me',\n  popoverContent: 'This is the content inside the popover.',\n};\nDefault.play = async ({ canvasElement }) => {\n  await testPopoverBehavior(Default.args, canvasElement);\n};\n"]}

package/dist/src/components/atoms/popover/popover.style.js

@@ -1,21 +0,0 @@
-import { cva } from 'class-variance-authority';
-export const popoverRootStyle = cva('rtgpop-root');
-export const popoverContentStyle = cva('z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none transition-transform transition-opacity', {
-    variants: {
-        state: {
-            open: 'opacity-100 scale-100 duration-500', // 0.5 seconds for the transition
-            closed: 'opacity-0 scale-95 duration-500', // 0.5 seconds for the transition
-        },
-        side: {
-            bottom: 'translate-y-0',
-            left: 'translate-x-0',
-            right: 'translate-x-0',
-            top: 'translate-y-0',
-        },
-    },
-    defaultVariants: {
-        state: 'closed',
-        side: 'bottom',
-    },
-});
-//# sourceMappingURL=popover.style.js.map

package/dist/src/components/atoms/popover/popover.style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.style.js","sourceRoot":"","sources":["../../../../../src/components/atoms/popover/popover.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC,aAAa,CAAC,CAAC;AAEnD,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CACpC,mIAAmI,EACnI;IACE,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,oCAAoC,EAAE,iCAAiC;YAC7E,MAAM,EAAE,iCAAiC,EAAE,iCAAiC;SAC7E;QACD,IAAI,EAAE;YACJ,MAAM,EAAE,eAAe;YACvB,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,eAAe;YACtB,GAAG,EAAE,eAAe;SACrB;KACF;IACD,eAAe,EAAE;QACf,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,QAAQ;KACf;CACF,CACF,CAAC","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const popoverRootStyle = cva('rtgpop-root');\n\nexport const popoverContentStyle = cva(\n  'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none transition-transform transition-opacity',\n  {\n    variants: {\n      state: {\n        open: 'opacity-100 scale-100 duration-500', // 0.5 seconds for the transition\n        closed: 'opacity-0 scale-95 duration-500', // 0.5 seconds for the transition\n      },\n      side: {\n        bottom: 'translate-y-0',\n        left: 'translate-x-0',\n        right: 'translate-x-0',\n        top: 'translate-y-0',\n      },\n    },\n    defaultVariants: {\n      state: 'closed',\n      side: 'bottom',\n    },\n  }\n);\n"]}

package/dist/src/components/atoms/popover/popover.types.js

@@ -1,4 +0,0 @@
-// popoverConstants.ts
-export const STATE_OPEN = 'open';
-export const STATE_CLOSED = 'closed';
-//# sourceMappingURL=popover.types.js.map

package/dist/src/components/atoms/popover/popover.types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"popover.types.js","sourceRoot":"","sources":["../../../../../src/components/atoms/popover/popover.types.ts"],"names":[],"mappings":"AAAA,sBAAsB;AACtB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC;AACjC,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC","sourcesContent":["// popoverConstants.ts\nexport const STATE_OPEN = 'open';\nexport const STATE_CLOSED = 'closed';\n"]}

package/dist/src/components/atoms/toggle/defs.js

@@ -1,30 +0,0 @@
-/**
- * Toggle size.
- */
-export var TOGGLE_SIZE;
-(function (TOGGLE_SIZE) {
-    /**
-     * Small size
-     */
-    TOGGLE_SIZE["SMALL"] = "sm";
-    /**
-     * medium size
-     */
-    TOGGLE_SIZE["MEDIUM"] = "md";
-    /**
-     * Large size
-     */
-    TOGGLE_SIZE["LARGE"] = "lg";
-})(TOGGLE_SIZE || (TOGGLE_SIZE = {}));
-export var TOGGLE_VARIANT;
-(function (TOGGLE_VARIANT) {
-    /**
-     * Default variant
-     */
-    TOGGLE_VARIANT["DEFAULT"] = "default";
-    /**
-     * Outline variant
-     */
-    TOGGLE_VARIANT["OUTLINE"] = "outline";
-})(TOGGLE_VARIANT || (TOGGLE_VARIANT = {}));
-//# sourceMappingURL=defs.js.map

package/dist/src/components/atoms/toggle/defs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.js","sourceRoot":"","sources":["../../../../../src/components/atoms/toggle/defs.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAN,IAAY,WAaX;AAbD,WAAY,WAAW;IACrB;;OAEG;IACH,2BAAY,CAAA;IACZ;;OAEG;IACH,4BAAa,CAAA;IACb;;OAEG;IACH,2BAAY,CAAA;AACd,CAAC,EAbW,WAAW,KAAX,WAAW,QAatB;AAED,MAAM,CAAN,IAAY,cASX;AATD,WAAY,cAAc;IACxB;;OAEG;IACH,qCAAmB,CAAA;IACnB;;OAEG;IACH,qCAAmB,CAAA;AACrB,CAAC,EATW,cAAc,KAAd,cAAc,QASzB","sourcesContent":["/**\n * Toggle size.\n */\n\nexport enum TOGGLE_SIZE {\n  /**\n   * Small size\n   */\n  SMALL = 'sm',\n  /**\n   * medium size\n   */\n  MEDIUM = 'md',\n  /**\n   * Large size\n   */\n  LARGE = 'lg',\n}\n\nexport enum TOGGLE_VARIANT {\n  /**\n   * Default variant\n   */\n  DEFAULT = 'default',\n  /**\n   * Outline variant\n   */\n  OUTLINE = 'outline',\n}\n"]}

package/dist/src/components/atoms/toggle/toggle.atom.js

@@ -1,72 +0,0 @@
-var Toggle_1;
-import { __decorate } from "tslib";
-import { html } from 'lit-element';
-import { customElement, property } from 'lit/decorators.js';
-import { TOGGLE_SIZE, TOGGLE_VARIANT } from './defs';
-import { TWStyles } from '../../../styles';
-import { toggleStyle } from './toggle.style';
-import { BaseElement, cn } from '../../../helpers';
-import { spread } from '@open-wc/lit-helpers';
-export { TOGGLE_SIZE, TOGGLE_VARIANT };
-let Toggle = Toggle_1 = class Toggle extends BaseElement {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.checked = false;
-        this.required = false;
-        this.variant = TOGGLE_VARIANT.DEFAULT;
-        this.size = TOGGLE_SIZE.SMALL;
-    }
-    getAttributesToExclude() {
-        return ['disabled', 'checked', 'variant', 'size', 'required'];
-    }
-    toggle() {
-        if (!this.disabled) {
-            this.checked = !this.checked;
-        }
-    }
-    render() {
-        const attributes = this.getFilteredAttributes();
-        return html `
-      <button
-        type="button"
-        class="${cn(Toggle_1.toggleVariants({
-            variant: this.variant,
-            size: this.size,
-            className: this.className,
-        }))}"
-        aria-pressed=${this.checked}
-        data-state="${this.checked ? 'on' : 'off'}"
-        aria-label="Toggle bold"
-        @click=${this.toggle}
-        ?disabled=${this.disabled}
-        ?required=${this.required}
-        ${spread(attributes)}
-      >
-        <slot></slot>
-      </button>
-    `;
-    }
-};
-Toggle.styles = [TWStyles];
-Toggle.toggleVariants = toggleStyle;
-__decorate([
-    property({ attribute: true, type: Boolean, reflect: true })
-], Toggle.prototype, "disabled", void 0);
-__decorate([
-    property({ attribute: true, type: Boolean, reflect: true })
-], Toggle.prototype, "checked", void 0);
-__decorate([
-    property({ attribute: true, type: Boolean, reflect: true })
-], Toggle.prototype, "required", void 0);
-__decorate([
-    property({ attribute: true, type: String })
-], Toggle.prototype, "variant", void 0);
-__decorate([
-    property({ attribute: true, type: String })
-], Toggle.prototype, "size", void 0);
-Toggle = Toggle_1 = __decorate([
-    customElement('rtg-toggle')
-], Toggle);
-export { Toggle };
-//# sourceMappingURL=toggle.atom.js.map

package/dist/src/components/atoms/toggle/toggle.atom.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/toggle/toggle.atom.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AAGvC,IAAM,MAAM,cAAZ,MAAM,MAAO,SAAQ,WAAW;IAAhC;;QAC+D,aAAQ,GAAG,KAAK,CAAC;QACjB,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QACjC,YAAO,GAClD,cAAc,CAAC,OAAO,CAAC;QACoB,SAAI,GAC/C,WAAW,CAAC,KAAK,CAAC;IAqCtB,CAAC;IAjCW,sBAAsB;QAC9B,OAAO,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC;IAChE,CAAC;IAED,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC/B,CAAC;IACH,CAAC;IACD,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAChD,OAAO,IAAI,CAAA;;;iBAGE,EAAE,CACT,QAAM,CAAC,cAAc,CAAC;YACpB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CACH;uBACc,IAAI,CAAC,OAAO;sBACb,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;;iBAEhC,IAAI,CAAC,MAAM;oBACR,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;UACvB,MAAM,CAAC,UAAU,CAAC;;;;KAIvB,CAAC;IACJ,CAAC;;AAlCM,aAAM,GAAG,CAAC,QAAQ,CAAC,AAAb,CAAc;AACpB,qBAAc,GAAG,WAAW,AAAd,CAAe;AATyB;IAA5D,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAkB;AACjB;IAA5D,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAiB;AAChB;IAA5D,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAkB;AACjC;IAA5C,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACnB;AACoB;IAA5C,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACxB;AAPhB,MAAM;IADX,aAAa,CAAC,YAAY,CAAC;GACtB,MAAM,CA4CX;AAED,OAAO,EAAE,MAAM,EAAE,CAAC","sourcesContent":["import { html } from 'lit-element';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TOGGLE_SIZE, TOGGLE_VARIANT } from './defs';\nimport { TWStyles } from '../../../styles';\nimport { toggleStyle } from './toggle.style';\nimport { BaseElement, cn } from '../../../helpers';\nimport { spread } from '@open-wc/lit-helpers';\n\nexport { TOGGLE_SIZE, TOGGLE_VARIANT };\n\n@customElement('rtg-toggle')\nclass Toggle extends BaseElement {\n  @property({ attribute: true, type: Boolean, reflect: true }) disabled = false;\n  @property({ attribute: true, type: Boolean, reflect: true }) checked = false;\n  @property({ attribute: true, type: Boolean, reflect: true }) required = false;\n  @property({ attribute: true, type: String }) variant: TOGGLE_VARIANT =\n    TOGGLE_VARIANT.DEFAULT;\n  @property({ attribute: true, type: String }) size: TOGGLE_SIZE =\n    TOGGLE_SIZE.SMALL;\n\n  static styles = [TWStyles];\n  static toggleVariants = toggleStyle;\n  protected getAttributesToExclude(): string[] {\n    return ['disabled', 'checked', 'variant', 'size', 'required'];\n  }\n\n  toggle() {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n    }\n  }\n  render() {\n    const attributes = this.getFilteredAttributes();\n    return html`\n      <button\n        type=\"button\"\n        class=\"${cn(\n          Toggle.toggleVariants({\n            variant: this.variant,\n            size: this.size,\n            className: this.className,\n          })\n        )}\"\n        aria-pressed=${this.checked}\n        data-state=\"${this.checked ? 'on' : 'off'}\"\n        aria-label=\"Toggle bold\"\n        @click=${this.toggle}\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ${spread(attributes)}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\nexport { Toggle };\n"]}

package/dist/src/components/atoms/toggle/toggle.stories.js

@@ -1,189 +0,0 @@
-import { html } from 'lit';
-import { expect, within, waitFor, userEvent } from '@storybook/test';
-import { Toggle, TOGGLE_SIZE, TOGGLE_VARIANT } from './toggle.atom';
-// import '../button';
-const meta = {
-    component: 'Toggle',
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: {
-                type: 'select',
-            },
-            options: Object.values(TOGGLE_VARIANT),
-            defaultValue: 'DEFAULT',
-            description: 'Choose the visual style of the toggle.',
-            table: {
-                defaultValue: { summary: 'DEFAULT' },
-            },
-        },
-        size: {
-            control: {
-                type: 'select',
-            },
-            options: Object.values(TOGGLE_SIZE),
-            description: 'Choose the size of the toggle.',
-            defaultValue: 'SMALL',
-            table: {
-                defaultValue: { summary: 'SMALL' },
-            },
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Disable the toggle to prevent interactions.',
-            table: {
-                defaultValue: { summary: 'false' },
-            },
-        },
-        checked: {
-            control: 'boolean',
-            description: 'Set the initial checked state of the toggle.',
-            table: {
-                defaultValue: { summary: 'false' },
-            },
-        },
-        required: {
-            control: 'boolean',
-            description: 'Mark the toggle as required.',
-            table: {
-                defaultValue: { summary: 'false' },
-            },
-        },
-    },
-};
-const testToggleBehavior = async (args, canvasElement, mockHandler) => {
-    const canvas = within(canvasElement);
-    const toggle = await waitFor(() => canvas.getByTestId('toggle-id'));
-    if (toggle.shadowRoot) {
-        const innerToggle = toggle.shadowRoot.querySelector('[data-testchild="children-id"]');
-        expect(innerToggle).toHaveAttribute('type', 'button');
-        // Test toggle state
-        if (args.checked) {
-            expect(innerToggle).toBeChecked();
-        }
-        else {
-            expect(innerToggle).not.toBeChecked();
-        }
-        // Test toggle click behavior
-        if (!args.disabled && innerToggle) {
-            await userEvent.click(innerToggle);
-            if (mockHandler) {
-                expect(mockHandler).toHaveBeenCalled();
-            }
-        }
-        // Test toggle disabled state
-        if (args.disabled) {
-            expect(innerToggle).toBeDisabled();
-        }
-        else {
-            expect(innerToggle).not.toBeDisabled();
-        }
-        // Test toggle variant classes
-        const expectedClasses = Toggle.toggleVariants({
-            variant: args.variant,
-            size: args.size,
-            className: '',
-        });
-        expect(innerToggle).toHaveClass(expectedClasses);
-        // Test toggle size classes
-        const expectedSizeClasses = Toggle.toggleVariants({
-            variant: args.variant,
-            size: args.size,
-            className: '',
-        });
-        expect(innerToggle).toHaveClass(expectedSizeClasses);
-    }
-};
-export default meta;
-export const Toggles = {
-    args: {
-        variant: 'DEFAULT',
-        size: 'SMALL',
-        disabled: false,
-        checked: false,
-        required: false,
-    },
-    render: ({ variant, size, disabled, checked, required }) => html `
-    <rtg-toggle
-      ?disabled=${disabled}
-      ?checked=${checked}
-      ?required=${required}
-      .variant=${variant}
-      .size=${size}
-      data-testid="toggle-id"
-      data-testchild="children-id"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        class="lucide lucide-bold h-4 w-4"
-      >
-        <path d="M14 12a4 4 0 0 0 0-8H6v8"></path>
-        <path d="M15 20a4 4 0 0 0 0-8H6v8Z"></path>
-      </svg>
-    </rtg-toggle>
-  `,
-    play: async ({ args, canvasElement }) => {
-        await testToggleBehavior(args, canvasElement, null);
-    },
-};
-export const RequiredToggle = {
-    name: 'Required Toggle',
-    args: {
-        variant: 'DEFAULT',
-        size: 'SMALL',
-        disabled: false,
-        checked: false,
-        required: true,
-    },
-    render: ({ variant, size, disabled, checked, required }) => html `
-    <div>
-      <rtg-toggle
-        ?disabled=${disabled}
-        ?checked=${checked}
-        ?required=${required}
-        .variant=${variant}
-        .size=${size}
-        data-testid="toggle-id"
-        data-testchild="children-id"
-        @click=${(e) => {
-        const checkbox = e.target;
-        const button = document.querySelector('rtg-button');
-        if (button) {
-            button.disabled = required ? !checkbox.checked : false;
-        }
-    }}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="lucide lucide-italic h-4 w-4"
-        >
-          <line x1="19" x2="10" y1="4" y2="4"></line>
-          <line x1="14" x2="5" y1="20" y2="20"></line>
-          <line x1="15" x2="9" y1="4" y2="20"></line>
-        </svg>
-      </rtg-toggle>
-    </div>
-
-    <rtg-button ?disabled=${required && !checked}> send </rtg-button>
-  `,
-    play: async ({ args, canvasElement }) => {
-        await testToggleBehavior(args, canvasElement, null);
-    },
-};
-//# sourceMappingURL=toggle.stories.js.map

package/dist/src/components/atoms/toggle/toggle.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"toggle.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/toggle/toggle.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\nimport { expect, within, waitFor, userEvent } from '@storybook/test';\nimport { Toggle, TOGGLE_SIZE, TOGGLE_VARIANT } from './toggle.atom';\n// import '../button';\n\nconst meta: Meta = {\n  component: 'Toggle',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: {\n        type: 'select',\n      },\n      options: Object.values(TOGGLE_VARIANT),\n      defaultValue: 'DEFAULT',\n      description: 'Choose the visual style of the toggle.',\n      table: {\n        defaultValue: { summary: 'DEFAULT' },\n      },\n    },\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: Object.values(TOGGLE_SIZE),\n      description: 'Choose the size of the toggle.',\n      defaultValue: 'SMALL',\n      table: {\n        defaultValue: { summary: 'SMALL' },\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Disable the toggle to prevent interactions.',\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    checked: {\n      control: 'boolean',\n      description: 'Set the initial checked state of the toggle.',\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    required: {\n      control: 'boolean',\n      description: 'Mark the toggle as required.',\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n};\n\nconst testToggleBehavior = async (\n  args: any,\n  canvasElement: any,\n  mockHandler: any\n) => {\n  const canvas = within(canvasElement);\n  const toggle = await waitFor(() => canvas.getByTestId('toggle-id'));\n  if (toggle.shadowRoot) {\n    const innerToggle = toggle.shadowRoot.querySelector(\n      '[data-testchild=\"children-id\"]'\n    );\n    expect(innerToggle).toHaveAttribute('type', 'button');\n    // Test toggle state\n    if (args.checked) {\n      expect(innerToggle).toBeChecked();\n    } else {\n      expect(innerToggle).not.toBeChecked();\n    }\n\n    // Test toggle click behavior\n    if (!args.disabled && innerToggle) {\n      await userEvent.click(innerToggle);\n      if (mockHandler) {\n        expect(mockHandler).toHaveBeenCalled();\n      }\n    }\n\n    // Test toggle disabled state\n    if (args.disabled) {\n      expect(innerToggle).toBeDisabled();\n    } else {\n      expect(innerToggle).not.toBeDisabled();\n    }\n\n    // Test toggle variant classes\n    const expectedClasses = Toggle.toggleVariants({\n      variant: args.variant,\n      size: args.size,\n      className: '',\n    });\n    expect(innerToggle).toHaveClass(expectedClasses);\n    // Test toggle size classes\n    const expectedSizeClasses = Toggle.toggleVariants({\n      variant: args.variant,\n      size: args.size,\n      className: '',\n    });\n    expect(innerToggle).toHaveClass(expectedSizeClasses);\n  }\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Toggles: Story = {\n  args: {\n    variant: 'DEFAULT',\n    size: 'SMALL',\n    disabled: false,\n    checked: false,\n    required: false,\n  },\n  render: ({ variant, size, disabled, checked, required }) => html`\n    <rtg-toggle\n      ?disabled=${disabled}\n      ?checked=${checked}\n      ?required=${required}\n      .variant=${variant}\n      .size=${size}\n      data-testid=\"toggle-id\"\n      data-testchild=\"children-id\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        width=\"24\"\n        height=\"24\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"lucide lucide-bold h-4 w-4\"\n      >\n        <path d=\"M14 12a4 4 0 0 0 0-8H6v8\"></path>\n        <path d=\"M15 20a4 4 0 0 0 0-8H6v8Z\"></path>\n      </svg>\n    </rtg-toggle>\n  `,\n  play: async ({ args, canvasElement }) => {\n    await testToggleBehavior(args, canvasElement, null);\n  },\n};\n\nexport const RequiredToggle: Story = {\n  name: 'Required Toggle',\n  args: {\n    variant: 'DEFAULT',\n    size: 'SMALL',\n    disabled: false,\n    checked: false,\n    required: true,\n  },\n  render: ({ variant, size, disabled, checked, required }) => html`\n    <div>\n      <rtg-toggle\n        ?disabled=${disabled}\n        ?checked=${checked}\n        ?required=${required}\n        .variant=${variant}\n        .size=${size}\n        data-testid=\"toggle-id\"\n        data-testchild=\"children-id\"\n        @click=${(e: Event) => {\n          const checkbox = e.target as HTMLInputElement;\n          const button = document.querySelector(\n            'rtg-button'\n          ) as unknown as HTMLButtonElement;\n          if (button) {\n            button.disabled = required ? !checkbox.checked : false;\n          }\n        }}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"lucide lucide-italic h-4 w-4\"\n        >\n          <line x1=\"19\" x2=\"10\" y1=\"4\" y2=\"4\"></line>\n          <line x1=\"14\" x2=\"5\" y1=\"20\" y2=\"20\"></line>\n          <line x1=\"15\" x2=\"9\" y1=\"4\" y2=\"20\"></line>\n        </svg>\n      </rtg-toggle>\n    </div>\n\n    <rtg-button ?disabled=${required && !checked}> send </rtg-button>\n  `,\n  play: async ({ args, canvasElement }) => {\n    await testToggleBehavior(args, canvasElement, null);\n  },\n};\n"]}

package/dist/src/components/atoms/toggle/toggle.style.js

@@ -1,19 +0,0 @@
-import { cva } from 'class-variance-authority';
-export const toggleStyle = cva('inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground bg-transparent h-10 px-3', {
-    variants: {
-        variant: {
-            default: ` hover:bg-muted hover:text-muted-foreground`,
-            outline: ` border border-input hover:bg-accent hover:text-accent-foreground`,
-        },
-        size: {
-            sm: 'h-9 px-2.5',
-            md: 'h-10 px-3',
-            lg: 'h-11 px-5',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'sm',
-    },
-});
-//# sourceMappingURL=toggle.style.js.map