revotech-ui-kit 0.0.2 → 0.0.4-beta

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

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,204 @@
+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

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,136 @@
+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