revotech-ui-kit 0.0.4-beta → 0.0.5-beta

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

@@ -1,67 +0,0 @@
-var Button_1;
-import { __decorate } from "tslib";
-import { html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { cn, BaseElement } from '../../../helpers';
-import { buttonStyle } from './button.style';
-import { TWStyles } from '../../../styles';
-import { spread } from '@open-wc/lit-helpers';
-let Button = Button_1 = class Button extends BaseElement {
-    constructor() {
-        super(...arguments);
-        this.click = () => { };
-        this.disabled = false;
-        this.type = 'button';
-        this.variant = 'default';
-        this.size = 'default';
-    }
-    handleClick(e) {
-        e.stopPropagation();
-        if (!this.disabled) {
-            this.click();
-        }
-    }
-    getAttributesToExclude() {
-        return ['click', 'disabled', 'type', 'variant', 'size', 'data-testid'];
-    }
-    render() {
-        const attributes = this.getFilteredAttributes();
-        return html `
-      <button
-        type="${this.type}"
-        ?disabled="${this.disabled}"
-        class="${cn(Button_1.buttonVariants({
-            variant: this.variant,
-            size: this.size,
-            className: this.className,
-        }))}"
-        @click="${this.handleClick}"
-        ${spread(attributes)}
-      >
-        <slot></slot>
-      </button>
-    `;
-    }
-};
-Button.buttonVariants = buttonStyle;
-Button.styles = [css ``, TWStyles];
-__decorate([
-    property({ type: Function })
-], Button.prototype, "click", void 0);
-__decorate([
-    property({ type: Boolean })
-], Button.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String })
-], Button.prototype, "type", void 0);
-__decorate([
-    property({ type: String })
-], Button.prototype, "variant", void 0);
-__decorate([
-    property({ type: String })
-], Button.prototype, "size", void 0);
-Button = Button_1 = __decorate([
-    customElement('rtg-button')
-], Button);
-export { Button };
-//# sourceMappingURL=button.atom.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"button.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/button/button.atom.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAc,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGvC,IAAM,MAAM,cAAZ,MAAM,MAAO,SAAQ,WAAW;IAAhC;;QAGyB,UAAK,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QAClB,aAAQ,GAAG,KAAK,CAAC;QAClB,SAAI,GAAe,QAAQ,CAAC;QAC5B,YAAO,GAAkB,SAAS,CAAC;QACnC,SAAI,GAAe,SAAS,CAAC;IAoC3D,CAAC;IAhCS,WAAW,CAAC,CAAa;QAC/B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAES,sBAAsB;QAC9B,OAAO,CAAC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC;IACzE,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAEhD,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;qBACJ,IAAI,CAAC,QAAQ;iBACjB,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;kBACS,IAAI,CAAC,WAAW;UACxB,MAAM,CAAC,UAAU,CAAC;;;;KAIvB,CAAC;IACJ,CAAC;;AAzCM,qBAAc,GAAG,WAAW,AAAd,CAAe;AAQ7B,aAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AANJ;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;qCAAkB;AAClB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAoC;AACnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAA8B;AAP9C,MAAM;IADlB,aAAa,CAAC,YAAY,CAAC;GACf,MAAM,CA2ClB","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { cn, BaseElement } from '../../../helpers';\nimport { ButtonSize, ButtonType, ButtonVariant } from './button.type';\nimport { buttonStyle } from './button.style';\nimport { TWStyles } from '../../../styles';\nimport { spread } from '@open-wc/lit-helpers';\n\n@customElement('rtg-button')\nexport class Button extends BaseElement {\n  static buttonVariants = buttonStyle;\n\n  @property({ type: Function }) click = () => {};\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: String }) type: ButtonType = 'button';\n  @property({ type: String }) variant: ButtonVariant = 'default';\n  @property({ type: String }) size: ButtonSize = 'default';\n\n  static styles = [css``, TWStyles];\n\n  private handleClick(e: MouseEvent) {\n    e.stopPropagation();\n    if (!this.disabled) {\n      this.click();\n    }\n  }\n\n  protected getAttributesToExclude(): string[] {\n    return ['click', 'disabled', 'type', 'variant', 'size', 'data-testid'];\n  }\n\n  render() {\n    const attributes = this.getFilteredAttributes();\n\n    return html`\n      <button\n        type=\"${this.type}\"\n        ?disabled=\"${this.disabled}\"\n        class=\"${cn(\n          Button.buttonVariants({\n            variant: this.variant,\n            size: this.size,\n            className: this.className,\n          })\n        )}\"\n        @click=\"${this.handleClick}\"\n        ${spread(attributes)}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n"]}

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

@@ -1,204 +0,0 @@
-import { html } from 'lit';
-import './button.atom';
-import { expect, within, fn, waitFor, userEvent } from '@storybook/test';
-import { Button } from './button.atom';
-const meta = {
-    component: 'components/button',
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: {
-                type: 'select',
-            },
-            options: [
-                'default',
-                'destructive',
-                'outline',
-                'secondary',
-                'ghost',
-                'link',
-            ],
-            defaultValue: 'default',
-            description: 'Choose the visual style of the button.',
-            table: {
-                defaultValue: { summary: 'default' },
-            },
-        },
-        size: {
-            control: {
-                type: 'select',
-            },
-            options: ['default', 'sm', 'lg', 'icon'],
-            description: 'Choose the visual style of the button.',
-            defaultValue: 'default',
-            table: {
-                defaultValue: { summary: 'default' },
-            },
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Disable the button to prevent interactions.',
-            table: {
-                defaultValue: { summary: 'false' },
-            },
-        },
-        label: {
-            control: 'text',
-            description: 'The text displayed on the button. Can also be a function returning the label dynamically.',
-            type: 'string',
-            table: {
-                defaultValue: { summary: 'Button' },
-            },
-        },
-        icon: {
-            control: 'boolean',
-            description: 'Add an icon before the button text.',
-            table: {
-                defaultValue: { summary: 'false' },
-            },
-        },
-        animation: {
-            control: 'boolean',
-            description: 'Enable/disable icon animations.',
-            table: {
-                defaultValue: { summary: 'false' },
-            },
-            if: { arg: 'icon', neq: false },
-        },
-        click: {
-            action: '',
-            description: 'Triggered when the button is clicked. Receives the button instance as an argument.',
-            table: {
-                type: { summary: '(() => void)' },
-                defaultValue: { summary: '-' },
-            },
-        },
-    },
-};
-const testButtonBehavior = async (args, canvasElement, mockHandler) => {
-    const canvas = within(canvasElement);
-    const button = await waitFor(() => canvas.getByTestId('btn-id'));
-    if (button.shadowRoot) {
-        const innerButton = button.shadowRoot.querySelector('[data-testchild="children-id"]');
-        // 1. Test: Button should have correct type attribute
-        expect(innerButton).toHaveAttribute('type', 'button');
-        // 2. Test: Button should handle click events when not disabled
-        if (!args.disabled && innerButton) {
-            await userEvent.click(innerButton);
-            if (mockHandler) {
-                expect(mockHandler).toHaveBeenCalled();
-            }
-        }
-        // 3. Test: Button should not handle click events when disabled
-        if (args.disabled) {
-            expect(mockHandler).not.toHaveBeenCalled();
-        }
-        // 4. Test: Button should be disabled when the `disabled` prop is true
-        if (args.disabled) {
-            expect(innerButton).toBeDisabled();
-        }
-        else {
-            expect(innerButton).not.toBeDisabled();
-        }
-        // 5. Test: Button should apply the correct variant classes
-        const expectedClasses = Button.buttonVariants({
-            variant: args.variant,
-            size: args.size,
-            className: '',
-        });
-        expect(innerButton).toHaveClass(expectedClasses);
-        // 6. Test: Button should apply the correct size classes
-        const expectedSizeClasses = Button.buttonVariants({
-            variant: args.variant,
-            size: args.size,
-            className: '',
-        });
-        expect(innerButton).toHaveClass(expectedSizeClasses);
-    }
-};
-export default meta;
-const mockOnClickHandler = fn(event => {
-    console.log('Mock onClick handler called');
-});
-export const Buttons = {
-    args: {
-        label: 'Button',
-        variant: 'default',
-        size: 'default',
-        disabled: false,
-        icon: false,
-        animation: false,
-    },
-    render: ({ label, variant, size, disabled, icon, animation }) => {
-        console.log('disabled', disabled);
-        if (disabled == true)
-            return html `
-        <rtg-button
-          method="post"
-          .click=${mockOnClickHandler}
-          data-testid="btn-id"
-          data-testchild="children-id"
-          variant=${variant}
-          size=${size}
-          disabled=${true}
-        >
-          ${icon
-                ? html `<iconify-icon
-                class=${animation
-                    ? `${label ? 'mr-2 ' : ' '}animate-spin`
-                    : `${label ? 'mr-2 ' : ''}`}
-                icon="mdi:home"
-              ></iconify-icon>`
-                : ''}
-          ${label}</rtg-button
-        >
-      `;
-        else if (disabled == false)
-            return html `
-        <rtg-button
-          method="post"
-          .click=${mockOnClickHandler}
-          data-testid="btn-id"
-          data-testchild="children-id"
-          variant=${variant}
-          size=${size}
-          ?disabled=${false}
-        >
-          ${icon
-                ? html `<iconify-icon
-                class=${animation
-                    ? `${label ? 'mr-2 ' : ' '}animate-spin`
-                    : `${label ? 'mr-2 ' : ''}`}
-                icon="mdi:home"
-              ></iconify-icon>`
-                : ''}
-          ${label}</rtg-button
-        >
-      `;
-        else
-            return html `
-        <rtg-button
-          method="post"
-          .click=${mockOnClickHandler}
-          data-testid="btn-id"
-          data-testchild="children-id"
-          variant=${variant}
-          size=${size}
-        >
-          ${icon
-                ? html `<iconify-icon
-                class=${animation
-                    ? `${label ? 'mr-2 ' : ' '}animate-spin`
-                    : `${label ? 'mr-2 ' : ''}`}
-                icon="mdi:home"
-              ></iconify-icon>`
-                : ''}
-          ${label}</rtg-button
-        >
-      `;
-    },
-    play: async ({ args, canvasElement }) => {
-        await testButtonBehavior(args, canvasElement, mockOnClickHandler);
-    },
-};
-//# sourceMappingURL=button.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,IAAI,GAAS;IACjB,SAAS,EAAE,mBAAmB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE;gBACP,SAAS;gBACT,aAAa;gBACb,SAAS;gBACT,WAAW;gBACX,OAAO;gBACP,MAAM;aACP;YACD,YAAY,EAAE,SAAS;YACvB,WAAW,EAAE,wCAAwC;YACrD,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACrC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;YACD,OAAO,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC;YACxC,WAAW,EAAE,wCAAwC;YACrD,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACrC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EACT,2FAA2F;YAC7F,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aACpC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,qCAAqC;YAClD,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;YACD,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE;SAChC;QACD,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;YACV,WAAW,EACT,oFAAoF;YACtF,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,cAAc,EAAE;gBACjC,YAAY,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;aAC/B;SACF;KACF;CACF,CAAC;AAEF,MAAM,kBAAkB,GAAG,KAAK,EAC9B,IAAS,EACT,aAAkB,EAClB,WAAgB,EAChB,EAAE;IACF,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEjE,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;QACtB,MAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CACjD,gCAAgC,CACjC,CAAC;QAEF,qDAAqD;QACrD,MAAM,CAAC,WAAW,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAEtD,+DAA+D;QAC/D,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,WAAW,EAAE,CAAC;YAClC,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACnC,IAAI,WAAW,EAAE,CAAC;gBAChB,MAAM,CAAC,WAAW,CAAC,CAAC,gBAAgB,EAAE,CAAC;YACzC,CAAC;QACH,CAAC;QAED,+DAA+D;QAC/D,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;QAC7C,CAAC;QAED,sEAAsE;QACtE,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,CAAC,WAAW,CAAC,CAAC,YAAY,EAAE,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,YAAY,EAAE,CAAC;QACzC,CAAC;QAED,2DAA2D;QAC3D,MAAM,eAAe,GAAG,MAAM,CAAC,cAAc,CAAC;YAC5C,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,EAAE;SACd,CAAC,CAAC;QACH,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QAEjD,wDAAwD;QACxD,MAAM,mBAAmB,GAAG,MAAM,CAAC,cAAc,CAAC;YAChD,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,EAAE;SACd,CAAC,CAAC;QACH,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC;IACvD,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,kBAAkB,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE;IACpC,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;AAC7C,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,KAAK;KACjB;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;QAC9D,OAAO,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAClC,IAAI,QAAQ,IAAI,IAAI;YAClB,OAAO,IAAI,CAAA;;;mBAGE,kBAAkB;;;oBAGjB,OAAO;iBACV,IAAI;qBACA,IAAI;;YAEb,IAAI;gBACJ,CAAC,CAAC,IAAI,CAAA;wBACM,SAAS;oBACf,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,cAAc;oBACxC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;;+BAEd;gBACnB,CAAC,CAAC,EAAE;YACJ,KAAK;;OAEV,CAAC;aACC,IAAI,QAAQ,IAAI,KAAK;YACxB,OAAO,IAAI,CAAA;;;mBAGE,kBAAkB;;;oBAGjB,OAAO;iBACV,IAAI;sBACC,KAAK;;YAEf,IAAI;gBACJ,CAAC,CAAC,IAAI,CAAA;wBACM,SAAS;oBACf,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,cAAc;oBACxC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;;+BAEd;gBACnB,CAAC,CAAC,EAAE;YACJ,KAAK;;OAEV,CAAC;;YAEF,OAAO,IAAI,CAAA;;;mBAGE,kBAAkB;;;oBAGjB,OAAO;iBACV,IAAI;;YAET,IAAI;gBACJ,CAAC,CAAC,IAAI,CAAA;wBACM,SAAS;oBACf,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,cAAc;oBACxC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE;;+BAEd;gBACnB,CAAC,CAAC,EAAE;YACJ,KAAK;;OAEV,CAAC;IACN,CAAC;IACD,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE;QACtC,MAAM,kBAAkB,CAAC,IAAI,EAAE,aAAa,EAAE,kBAAkB,CAAC,CAAC;IACpE,CAAC;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport './button.atom';\nimport { expect, within, fn, waitFor, userEvent } from '@storybook/test';\nimport { Button } from './button.atom';\n\nconst meta: Meta = {\n  component: 'components/button',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: {\n        type: 'select',\n      },\n      options: [\n        'default',\n        'destructive',\n        'outline',\n        'secondary',\n        'ghost',\n        'link',\n      ],\n      defaultValue: 'default',\n      description: 'Choose the visual style of the button.',\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    size: {\n      control: {\n        type: 'select',\n      },\n      options: ['default', 'sm', 'lg', 'icon'],\n      description: 'Choose the visual style of the button.',\n      defaultValue: 'default',\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    disabled: {\n      control: 'boolean',\n      description: 'Disable the button to prevent interactions.',\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    label: {\n      control: 'text',\n      description:\n        'The text displayed on the button. Can also be a function returning the label dynamically.',\n      type: 'string',\n      table: {\n        defaultValue: { summary: 'Button' },\n      },\n    },\n    icon: {\n      control: 'boolean',\n      description: 'Add an icon before the button text.',\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n    animation: {\n      control: 'boolean',\n      description: 'Enable/disable icon animations.',\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n      if: { arg: 'icon', neq: false },\n    },\n    click: {\n      action: '',\n      description:\n        'Triggered when the button is clicked. Receives the button instance as an argument.',\n      table: {\n        type: { summary: '(() => void)' },\n        defaultValue: { summary: '-' },\n      },\n    },\n  },\n};\n\nconst testButtonBehavior = async (\n  args: any,\n  canvasElement: any,\n  mockHandler: any\n) => {\n  const canvas = within(canvasElement);\n  const button = await waitFor(() => canvas.getByTestId('btn-id'));\n\n  if (button.shadowRoot) {\n    const innerButton = button.shadowRoot.querySelector(\n      '[data-testchild=\"children-id\"]'\n    );\n\n    // 1. Test: Button should have correct type attribute\n    expect(innerButton).toHaveAttribute('type', 'button');\n\n    // 2. Test: Button should handle click events when not disabled\n    if (!args.disabled && innerButton) {\n      await userEvent.click(innerButton);\n      if (mockHandler) {\n        expect(mockHandler).toHaveBeenCalled();\n      }\n    }\n\n    // 3. Test: Button should not handle click events when disabled\n    if (args.disabled) {\n      expect(mockHandler).not.toHaveBeenCalled();\n    }\n\n    // 4. Test: Button should be disabled when the `disabled` prop is true\n    if (args.disabled) {\n      expect(innerButton).toBeDisabled();\n    } else {\n      expect(innerButton).not.toBeDisabled();\n    }\n\n    // 5. Test: Button should apply the correct variant classes\n    const expectedClasses = Button.buttonVariants({\n      variant: args.variant,\n      size: args.size,\n      className: '',\n    });\n    expect(innerButton).toHaveClass(expectedClasses);\n\n    // 6. Test: Button should apply the correct size classes\n    const expectedSizeClasses = Button.buttonVariants({\n      variant: args.variant,\n      size: args.size,\n      className: '',\n    });\n    expect(innerButton).toHaveClass(expectedSizeClasses);\n  }\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nconst mockOnClickHandler = fn(event => {\n  console.log('Mock onClick handler called');\n});\n\nexport const Buttons: Story = {\n  args: {\n    label: 'Button',\n    variant: 'default',\n    size: 'default',\n    disabled: false,\n    icon: false,\n    animation: false,\n  },\n  render: ({ label, variant, size, disabled, icon, animation }) => {\n    console.log('disabled', disabled);\n    if (disabled == true)\n      return html`\n        <rtg-button\n          method=\"post\"\n          .click=${mockOnClickHandler}\n          data-testid=\"btn-id\"\n          data-testchild=\"children-id\"\n          variant=${variant}\n          size=${size}\n          disabled=${true}\n        >\n          ${icon\n            ? html`<iconify-icon\n                class=${animation\n                  ? `${label ? 'mr-2 ' : ' '}animate-spin`\n                  : `${label ? 'mr-2 ' : ''}`}\n                icon=\"mdi:home\"\n              ></iconify-icon>`\n            : ''}\n          ${label}</rtg-button\n        >\n      `;\n    else if (disabled == false)\n      return html`\n        <rtg-button\n          method=\"post\"\n          .click=${mockOnClickHandler}\n          data-testid=\"btn-id\"\n          data-testchild=\"children-id\"\n          variant=${variant}\n          size=${size}\n          ?disabled=${false}\n        >\n          ${icon\n            ? html`<iconify-icon\n                class=${animation\n                  ? `${label ? 'mr-2 ' : ' '}animate-spin`\n                  : `${label ? 'mr-2 ' : ''}`}\n                icon=\"mdi:home\"\n              ></iconify-icon>`\n            : ''}\n          ${label}</rtg-button\n        >\n      `;\n    else\n      return html`\n        <rtg-button\n          method=\"post\"\n          .click=${mockOnClickHandler}\n          data-testid=\"btn-id\"\n          data-testchild=\"children-id\"\n          variant=${variant}\n          size=${size}\n        >\n          ${icon\n            ? html`<iconify-icon\n                class=${animation\n                  ? `${label ? 'mr-2 ' : ' '}animate-spin`\n                  : `${label ? 'mr-2 ' : ''}`}\n                icon=\"mdi:home\"\n              ></iconify-icon>`\n            : ''}\n          ${label}</rtg-button\n        >\n      `;\n  },\n  play: async ({ args, canvasElement }) => {\n    await testButtonBehavior(args, canvasElement, mockOnClickHandler);\n  },\n};\n"]}

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

@@ -1,24 +0,0 @@
-import { cva } from 'class-variance-authority';
-export const buttonStyle = cva('inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', {
-    variants: {
-        variant: {
-            default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-            destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-            outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-            secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-            ghost: 'hover:bg-accent hover:text-accent-foreground',
-            link: 'text-primary underline-offset-4 hover:underline',
-        },
-        size: {
-            default: 'h-8 px-4 py-2',
-            sm: 'h-7 rounded-sm px-3 text-xs',
-            lg: 'h-9 rounded-sm px-8',
-            icon: 'h-8 w-8',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'default',
-    },
-});
-//# sourceMappingURL=button.style.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"button.style.js","sourceRoot":"","sources":["../../../../../src/components/atoms/button/button.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAC5B,qOAAqO,EACrO;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EACL,+DAA+D;YACjE,WAAW,EACT,8EAA8E;YAChF,OAAO,EACL,0FAA0F;YAC5F,SAAS,EACP,wEAAwE;YAC1E,KAAK,EAAE,8CAA8C;YACrD,IAAI,EAAE,iDAAiD;SACxD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,eAAe;YACxB,EAAE,EAAE,6BAA6B;YACjC,EAAE,EAAE,qBAAqB;YACzB,IAAI,EAAE,SAAS;SAChB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KAChB;CACF,CACF,CAAC","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const buttonStyle = cva(\n  'inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-8 px-4 py-2',\n        sm: 'h-7 rounded-sm px-3 text-xs',\n        lg: 'h-9 rounded-sm px-8',\n        icon: 'h-8 w-8',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n);\n"]}

package/dist/src/components/atoms/button/button.type.js

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

package/dist/src/components/atoms/button/button.type.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.type.js","sourceRoot":"","sources":["../../../../../src/components/atoms/button/button.type.ts"],"names":[],"mappings":"","sourcesContent":["export type ButtonVariant =\n  | 'default'\n  | 'destructive'\n  | 'outline'\n  | 'secondary'\n  | 'ghost'\n  | 'link';\nexport type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';\n\nexport type ButtonType = 'button' | 'submit' | 'reset' | 'menu';\n"]}

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

@@ -1,17 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-let CardContent = class CardContent extends LitElement {
-    render() {
-        return html ` 
-    <slot></slot>
-     `;
-    }
-};
-CardContent.styles = [css ``, TWStyles];
-CardContent = __decorate([
-    customElement('rtg-card-content')
-], CardContent);
-export { CardContent };
-//# sourceMappingURL=card-content.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"card-content.js","sourceRoot":"","sources":["../../../../../src/components/atoms/card/card-content.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAIzC,MAAM;QACJ,OAAO,IAAI,CAAA;;MAET,CAAC;IACL,CAAC;;AAPM,kBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,WAAW;IADvB,aAAa,CAAC,kBAAkB,CAAC;GACrB,WAAW,CASvB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-card-content')\nexport class CardContent extends LitElement {\n  static styles = [css``, TWStyles];\n\n\n  render() {\n    return html` \n    <slot></slot>\n     `;\n  }\n}\n"]}

package/dist/src/components/atoms/card/card-description.js

@@ -1,17 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-let CardDescription = class CardDescription extends LitElement {
-    render() {
-        return html `
-    <slot></slot>
-    `;
-    }
-};
-CardDescription.styles = [css ``, TWStyles];
-CardDescription = __decorate([
-    customElement('rtg-card-description')
-], CardDescription);
-export { CardDescription };
-//# sourceMappingURL=card-description.js.map

package/dist/src/components/atoms/card/card-description.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card-description.js","sourceRoot":"","sources":["../../../../../src/components/atoms/card/card-description.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAI7C,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AAPM,sBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,eAAe;IAD3B,aAAa,CAAC,sBAAsB,CAAC;GACzB,eAAe,CAS3B","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-card-description')\nexport class CardDescription extends LitElement {\n  static styles = [css``, TWStyles];\n\n\n  render() {\n    return html`\n    <slot></slot>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/card/card-footer.js

@@ -1,17 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-let CardFooter = class CardFooter extends LitElement {
-    render() {
-        return html `
-       <slot></slot> 
-    `;
-    }
-};
-CardFooter.styles = [css ``, TWStyles];
-CardFooter = __decorate([
-    customElement('rtg-card-footer')
-], CardFooter);
-export { CardFooter };
-//# sourceMappingURL=card-footer.js.map

package/dist/src/components/atoms/card/card-footer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card-footer.js","sourceRoot":"","sources":["../../../../../src/components/atoms/card/card-footer.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAIxC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AAPM,iBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,UAAU;IADtB,aAAa,CAAC,iBAAiB,CAAC;GACpB,UAAU,CAStB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-card-footer')\nexport class CardFooter extends LitElement {\n  static styles = [css``, TWStyles];\n\n\n  render() {\n    return html`\n       <slot></slot> \n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/card/card-header.js

@@ -1,17 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-let CardHeader = class CardHeader extends LitElement {
-    render() {
-        return html `
-    <slot></slot>
-   `;
-    }
-};
-CardHeader.styles = [css ``, TWStyles];
-CardHeader = __decorate([
-    customElement('rtg-card-header')
-], CardHeader);
-export { CardHeader };
-//# sourceMappingURL=card-header.js.map

package/dist/src/components/atoms/card/card-header.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card-header.js","sourceRoot":"","sources":["../../../../../src/components/atoms/card/card-header.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAIxC,MAAM;QACJ,OAAO,IAAI,CAAA;;IAEX,CAAC;IACH,CAAC;;AAPM,iBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,UAAU;IADtB,aAAa,CAAC,iBAAiB,CAAC;GACpB,UAAU,CAStB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-card-header')\nexport class CardHeader extends LitElement {\n  static styles = [css``, TWStyles];\n\n\n  render() {\n    return html`\n    <slot></slot>\n   `;\n  }\n}\n"]}

package/dist/src/components/atoms/card/card-title.js

@@ -1,17 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-let CardTitle = class CardTitle extends LitElement {
-    render() {
-        return html `
-    <slot></slot>
-    `;
-    }
-};
-CardTitle.styles = [css ``, TWStyles];
-CardTitle = __decorate([
-    customElement('rtg-card-title')
-], CardTitle);
-export { CardTitle };
-//# sourceMappingURL=card-title.js.map

package/dist/src/components/atoms/card/card-title.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"card-title.js","sourceRoot":"","sources":["../../../../../src/components/atoms/card/card-title.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAIvC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;;AAPM,gBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,SAAS;IADrB,aAAa,CAAC,gBAAgB,CAAC;GACnB,SAAS,CASrB","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-card-title')\nexport class CardTitle extends LitElement {\n  static styles = [css``, TWStyles];\n\n\n  render() {\n    return html`\n    <slot></slot>\n    `;\n  }\n}\n"]}

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

@@ -1,25 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { CardTitle } from './card-title';
-import { CardHeader } from './card-header';
-import { CardFooter } from './card-footer';
-import { CardDescription } from './card-description';
-import { CardContent } from './card-content';
-import { TWStyles } from '../../../styles';
-let Card = class Card extends LitElement {
-    render() {
-        return html `<div
-      class="rounded-lg border bg-card text-card-foreground shadow-sm p-6"
-      id="rtg-card-id"
-    >
-      <slot></slot>
-    </div>`;
-    }
-};
-Card.styles = [css ``, TWStyles];
-Card = __decorate([
-    customElement('rtg-card')
-], Card);
-export { Card, CardTitle, CardHeader, CardFooter, CardDescription, CardContent, };
-//# sourceMappingURL=card.atom.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"card.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/card/card.atom.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,UAAU;IAG3B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;WAKJ,CAAC;IACV,CAAC;;AATM,WAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAD9B,IAAI;IADT,aAAa,CAAC,UAAU,CAAC;GACpB,IAAI,CAWT;AAED,OAAO,EACL,IAAI,EACJ,SAAS,EACT,UAAU,EACV,UAAU,EACV,eAAe,EACf,WAAW,GACZ,CAAC","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { CardTitle } from './card-title';\nimport { CardHeader } from './card-header';\nimport { CardFooter } from './card-footer';\nimport { CardDescription } from './card-description';\nimport { CardContent } from './card-content';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-card')\nclass Card extends LitElement {\n  static styles = [css``, TWStyles];\n\n  render() {\n    return html`<div\n      class=\"rounded-lg border bg-card text-card-foreground shadow-sm p-6\"\n      id=\"rtg-card-id\"\n    >\n      <slot></slot>\n    </div>`;\n  }\n}\n\nexport {\n  Card,\n  CardTitle,\n  CardHeader,\n  CardFooter,\n  CardDescription,\n  CardContent,\n};\n"]}

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

@@ -1,136 +0,0 @@
-import { html } from 'lit';
-import { expect, within, waitFor } from '@storybook/test';
-import './card.atom';
-export default {
-    component: 'components/card',
-    tags: ['autodocs'],
-};
-const testCardBehavior = async (args, canvasElement) => {
-    const canvas = within(canvasElement);
-    const card = await waitFor(() => canvas.getByTestId('card-id'));
-    const cardHeader = await waitFor(() => canvas.getByTestId('card-header-id'));
-    const cardTitle = await waitFor(() => canvas.getByTestId('card-title-id'));
-    const cardDescription = await waitFor(() => canvas.getByTestId('card-description-id'));
-    const cardContent = await waitFor(() => canvas.getByTestId('card-content-id'));
-    const cardFooter = await waitFor(() => canvas.getByTestId('card-footer-id'));
-    expect(card).toBeVisible();
-    expect(cardHeader).toBeVisible();
-    expect(cardTitle).toBeVisible();
-    expect(cardDescription).toBeVisible();
-    expect(cardContent).toBeVisible();
-    expect(cardFooter).toBeVisible();
-    if (card.shadowRoot) {
-        const cardItem = await card.shadowRoot.getElementById('rtg-card-id');
-        expect(cardItem).toHaveClass('rounded-lg border bg-card text-card-foreground shadow-sm p-6');
-    }
-    if (cardTitle) {
-        expect(cardTitle.textContent).toContain('Create project');
-        expect(cardTitle.tagName.toLowerCase()).toEqual('cardtitle');
-    }
-    if (cardDescription) {
-        expect(cardDescription.textContent).toContain('Deploy your new project in one-click.');
-        expect(cardDescription.tagName.toLowerCase()).toEqual('carddescription');
-    }
-};
-export const Cards = {
-    name: 'Cards',
-    render: () => html `
-    <rtg-card data-testid="card-id">
-      <CardHeader data-testid="card-header-id">
-        <CardTitle data-testid="card-title-id">
-          <h3>Create project</h3>
-        </CardTitle>
-        <CardDescription data-testid="card-description-id">
-          <p class="text-sm text-muted-foreground">
-            Deploy your new project in one-click.
-          </p>
-        </CardDescription>
-      </CardHeader>
-      <CardContent data-testid="card-content-id">
-        <form class="pt-4">
-          <div class="grid w-full items-center gap-4">
-            <div class="flex flex-col space-y-1.5">
-              <label
-                class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                for="name"
-                >Name</label
-              ><input
-                class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                id="name"
-                placeholder="Name of your project"
-              />
-            </div>
-            <div class="flex flex-col space-y-1.5">
-              <label
-                class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                for="framework"
-                >Framework</label
-              ><button
-                type="button"
-                role="combobox"
-                aria-controls="radix-:r2b:"
-                aria-expanded="false"
-                aria-autocomplete="none"
-                dir="ltr"
-                data-state="closed"
-                data-placeholder=""
-                class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&amp;>span]:line-clamp-1"
-                id="framework"
-              >
-                <span style="pointer-events: none;">Select</span
-                ><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-chevron-down h-4 w-4 opacity-50"
-                  aria-hidden="true"
-                >
-                  <path d="m6 9 6 6 6-6"></path>
-                </svg></button
-              ><select
-                aria-hidden="true"
-                tabindex="-1"
-                style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;"
-              >
-                <option value=""></option>
-                <option value="next">Next.js</option>
-                <option value="sveltekit">SvelteKit</option>
-                <option value="astro">Astro</option>
-                <option value="nuxt">Nuxt.js</option>
-              </select>
-            </div>
-          </div>
-        </form>
-      </CardContent>
-      <CardFooter data-testid="card-footer-id">
-        <div class="items-center pt-4 flex justify-between">
-          <button
-            class="inline-flex items-center justify-center whitespace-nowrap 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 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
-          >
-            Cancel
-          </button>
-          <button
-            class="inline-flex items-center justify-center whitespace-nowrap 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 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
-          >
-            Deploy
-          </button>
-        </div>
-      </CardFooter>
-    </rtg-card>
-  `,
-    play: async ({ args, canvasElement }) => {
-        try {
-            await testCardBehavior(args, canvasElement);
-        }
-        catch (error) {
-            console.error('An error occurred during the play function:', error);
-        }
-    },
-};
-//# sourceMappingURL=card.stories.js.map