revotech-ui-kit 0.0.11 → 0.0.14

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/card/card.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryFn, StoryObj } from '@storybook/web-components';\nimport { expect, within, fn, waitFor, userEvent } from '@storybook/test';\nimport './card.atom';\n\nexport default {\n  component: 'components/card',\n  tags: ['autodocs'],\n} as Meta;\n\ntype Story = StoryObj;\n\nconst testCardBehavior = async (args: any, canvasElement: HTMLElement) => {\n  const canvas = within(canvasElement);\n  const card = await waitFor(() => canvas.getByTestId('card-id'));\n  const cardHeader = await waitFor(() => canvas.getByTestId('card-header-id'));\n  const cardTitle = await waitFor(() => canvas.getByTestId('card-title-id'));\n  const cardDescription = await waitFor(() =>\n    canvas.getByTestId('card-description-id')\n  );\n  const cardContent = await waitFor(() =>\n    canvas.getByTestId('card-content-id')\n  );\n  const cardFooter = await waitFor(() => canvas.getByTestId('card-footer-id'));\n  expect(card).toBeVisible();\n  expect(cardHeader).toBeVisible();\n  expect(cardTitle).toBeVisible();\n  expect(cardDescription).toBeVisible();\n  expect(cardContent).toBeVisible();\n  expect(cardFooter).toBeVisible();\n\n  if (card.shadowRoot) {\n    const cardItem = await card.shadowRoot.getElementById('rtg-card-id');\n    expect(cardItem).toHaveClass(\n      'rounded-lg border bg-card text-card-foreground shadow-sm p-6'\n    );\n  }\n  if (cardTitle) {\n    expect(cardTitle.textContent).toContain('Create project');\n    expect(cardTitle.tagName.toLowerCase()).toEqual('cardtitle');\n  }\n  if (cardDescription) {\n    expect(cardDescription.textContent).toContain(\n      'Deploy your new project in one-click.'\n    );\n    expect(cardDescription.tagName.toLowerCase()).toEqual('carddescription');\n  }\n};\n\nexport const Cards: Story = {\n  name: 'Cards',\n  render: () => html`\n    <rtg-card data-testid=\"card-id\">\n      <CardHeader data-testid=\"card-header-id\">\n        <CardTitle data-testid=\"card-title-id\">\n          <h3>Create project</h3>\n        </CardTitle>\n        <CardDescription data-testid=\"card-description-id\">\n          <p class=\"text-sm text-muted-foreground\">\n            Deploy your new project in one-click.\n          </p>\n        </CardDescription>\n      </CardHeader>\n      <CardContent data-testid=\"card-content-id\">\n        <form class=\"pt-4\">\n          <div class=\"grid w-full items-center gap-4\">\n            <div class=\"flex flex-col space-y-1.5\">\n              <label\n                class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                for=\"name\"\n                >Name</label\n              ><input\n                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\"\n                id=\"name\"\n                placeholder=\"Name of your project\"\n              />\n            </div>\n            <div class=\"flex flex-col space-y-1.5\">\n              <label\n                class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                for=\"framework\"\n                >Framework</label\n              ><button\n                type=\"button\"\n                role=\"combobox\"\n                aria-controls=\"radix-:r2b:\"\n                aria-expanded=\"false\"\n                aria-autocomplete=\"none\"\n                dir=\"ltr\"\n                data-state=\"closed\"\n                data-placeholder=\"\"\n                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\"\n                id=\"framework\"\n              >\n                <span style=\"pointer-events: none;\">Select</span\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-chevron-down h-4 w-4 opacity-50\"\n                  aria-hidden=\"true\"\n                >\n                  <path d=\"m6 9 6 6 6-6\"></path>\n                </svg></button\n              ><select\n                aria-hidden=\"true\"\n                tabindex=\"-1\"\n                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;\"\n              >\n                <option value=\"\"></option>\n                <option value=\"next\">Next.js</option>\n                <option value=\"sveltekit\">SvelteKit</option>\n                <option value=\"astro\">Astro</option>\n                <option value=\"nuxt\">Nuxt.js</option>\n              </select>\n            </div>\n          </div>\n        </form>\n      </CardContent>\n      <CardFooter data-testid=\"card-footer-id\">\n        <div class=\"items-center pt-4 flex justify-between\">\n          <button\n            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\"\n          >\n            Cancel\n          </button>\n          <button\n            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\"\n          >\n            Deploy\n          </button>\n        </div>\n      </CardFooter>\n    </rtg-card>\n  `,\n  play: async ({ args, canvasElement }) => {\n    try {\n      await testCardBehavior(args, canvasElement);\n    } catch (error) {\n      console.error('An error occurred during the play function:', error);\n    }\n  },\n};\n"]}

package/dist/src/components/atoms/checkbox/checkbox.atom.d.ts

@@ -1,13 +0,0 @@
-import { LitElement } from 'lit';
-import { CheckboxProperties } from './checkbox.type';
-export declare class Checkbox extends LitElement implements CheckboxProperties {
-    disabled: boolean;
-    checked: boolean;
-    type: string;
-    value: string;
-    required: boolean;
-    static styles: import("lit").CSSResult[];
-    private _onClick;
-    click(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

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

@@ -1,87 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-import { checkboxStyles, iconStyles } from './checkbox.style';
-let Checkbox = class Checkbox extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.disabled = false;
-        this.checked = false;
-        this.type = 'text';
-        this.value = '';
-        this.required = false;
-    }
-    _onClick(e) {
-        if (e.defaultPrevented)
-            return;
-        this.checked = !this.checked;
-        this.required = !this.required;
-        // Dispatch a custom change event when the state changes
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
-    }
-    click() {
-        this.checked = !this.checked;
-        this.required = !this.required;
-    }
-    render() {
-        const additionalProps = { ...this.dataset }; // Example of additional props
-        return html `
-      <button
-        data-testid="checkbox-atom"
-        type="button"
-        role="checkbox"
-        aria-checked="${this.checked || this.value === 'on'}"
-        data-state="${this.checked || this.value === 'on'
-            ? 'checked'
-            : 'unchecked'}"
-        value="${this.value}"
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        @click="${this._onClick}"
-        class="${cn(checkboxStyles, this.className)}"
-        ${Object.entries(additionalProps).map(([key, value]) => html ` ${key}="${value}" `)}
-      >
-        ${this.checked || this.value === 'on'
-            ? html `<span data-state="checked" class="${iconStyles}"
-              ><svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-4 w-4"
-              >
-                <polyline points="20 6 9 17 4 12"></polyline></svg
-            ></span>`
-            : nothing}
-      </button>
-    `;
-    }
-};
-Checkbox.styles = [css ``, TWStyles];
-__decorate([
-    property({ type: Boolean })
-], Checkbox.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean })
-], Checkbox.prototype, "checked", void 0);
-__decorate([
-    property({ type: String })
-], Checkbox.prototype, "type", void 0);
-__decorate([
-    property({ type: String })
-], Checkbox.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean })
-], Checkbox.prototype, "required", void 0);
-Checkbox = __decorate([
-    customElement('rtg-checkbox')
-], Checkbox);
-export { Checkbox };
-//# sourceMappingURL=checkbox.atom.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/checkbox/checkbox.atom.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAIvD,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QACwB,aAAQ,GAAG,KAAK,CAAC;QAEjB,YAAO,GAAG,KAAK,CAAC;QAEjB,SAAI,GAAG,MAAM,CAAC;QAEd,UAAK,GAAG,EAAE,CAAC;QAEV,aAAQ,GAAG,KAAK,CAAC;IA0DhD,CAAC;IAtDS,QAAQ,CAAC,CAAQ;QACvB,IAAI,CAAC,CAAC,gBAAgB;YAAE,OAAO;QAC/B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAE/B,wDAAwD;QACxD,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7E,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,8BAA8B;QAC3E,OAAO,IAAI,CAAA;;;;;wBAKS,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;sBACrC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;YAC/C,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,WAAW;iBACN,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;oBACb,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,QAAQ;iBACd,EAAE,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC;UACzC,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,GAAG,CACnC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA,IAAI,GAAG,KAAK,KAAK,IAAI,CAC5C;;UAEC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;YACnC,CAAC,CAAC,IAAI,CAAA,qCAAqC,UAAU;;;;;;;;;;;;;;qBAc1C;YACX,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAvDM,eAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAVL;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AAEjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAiB;AAEjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAe;AAEd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAY;AAEV;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAkB;AATnC,QAAQ;IADpB,aAAa,CAAC,cAAc,CAAC;GACjB,QAAQ,CAmEpB","sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\nimport { checkboxStyles, iconStyles } from './checkbox.style';\nimport { CheckboxProperties } from './checkbox.type';\n\n@customElement('rtg-checkbox')\nexport class Checkbox extends LitElement implements CheckboxProperties {\n  @property({ type: Boolean }) disabled = false;\n\n  @property({ type: Boolean }) checked = false;\n\n  @property({ type: String }) type = 'text';\n\n  @property({ type: String }) value = '';\n\n  @property({ type: Boolean }) required = false;\n\n  static styles = [css``, TWStyles];\n\n  private _onClick(e: Event) {\n    if (e.defaultPrevented) return;\n    this.checked = !this.checked;\n    this.required = !this.required;\n\n    // Dispatch a custom change event when the state changes\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n  }\n\n  public click() {\n    this.checked = !this.checked;\n    this.required = !this.required;\n  }\n\n  render() {\n    const additionalProps = { ...this.dataset }; // Example of additional props\n    return html`\n      <button\n        data-testid=\"checkbox-atom\"\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked=\"${this.checked || this.value === 'on'}\"\n        data-state=\"${this.checked || this.value === 'on'\n          ? 'checked'\n          : 'unchecked'}\"\n        value=\"${this.value}\"\n        ?required=${this.required}\n        ?disabled=${this.disabled}\n        @click=\"${this._onClick}\"\n        class=\"${cn(checkboxStyles, this.className)}\"\n        ${Object.entries(additionalProps).map(\n          ([key, value]) => html` ${key}=\"${value}\" `\n        )}\n      >\n        ${this.checked || this.value === 'on'\n          ? html`<span data-state=\"checked\" class=\"${iconStyles}\"\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=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                class=\"h-4 w-4\"\n              >\n                <polyline points=\"20 6 9 17 4 12\"></polyline></svg\n            ></span>`\n          : nothing}\n      </button>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/checkbox/checkbox.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/web-components';
-import './checkbox.atom';
-import '../button/button.atom';
-declare const _default: Meta;
-export default _default;
-export declare const CheckboxWithReuired: StoryFn;
-export declare const Checkbox: StoryFn;
-export declare const CheckboxWithValue: StoryFn;

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

@@ -1,244 +0,0 @@
-import { html } from 'lit';
-import './checkbox.atom';
-import { expect, within, waitFor, fn } from '@storybook/test';
-import '../button/button.atom';
-const allowedTypes = ['checkbox'];
-export default {
-    component: 'components/checkbox',
-    tags: ['autodocs'],
-};
-const mockOnClickHandler = fn(event => {
-    alert('submit data!');
-});
-const testCheckboxBehavior = async (args, canvasElement) => {
-    const canvas = within(canvasElement);
-    const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));
-    if (checkbox.shadowRoot) {
-        const innerCheckbox = checkbox.shadowRoot.querySelector('[data-testid="checkbox-atom"]');
-        // 1. Test: Checkbox should have correct Role attribute
-        expect(innerCheckbox).toHaveRole('checkbox');
-        // 2. Test: Checkbox should have the correct `checked` state based on args
-        if (args.checked) {
-            expect(innerCheckbox).toBeChecked();
-        }
-        else {
-            expect(innerCheckbox).not.toBeChecked();
-        }
-        // 3. Test: Checkbox should be disabled when the `disabled` prop is true
-        if (args.disabled) {
-            expect(innerCheckbox).toBeDisabled();
-        }
-        else {
-            expect(innerCheckbox).not.toBeDisabled();
-        }
-        // 4. Test: Label should have correct `for` attribute linking to the checkbox
-        const label = await waitFor(() => canvas.getByText(args.label));
-        expect(label).toBeInTheDocument();
-        expect(label).toHaveAttribute('for', checkbox.getAttribute('id'));
-    }
-};
-const testCheckboxWithRequiredBehavior = async (args, canvasElement) => {
-    const canvas = within(canvasElement);
-    const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));
-    const button = await waitFor(() => canvas.getByTestId('btn-id'));
-    if (checkbox.shadowRoot) {
-        const innerCheckbox = checkbox.shadowRoot.querySelector('[data-testid="checkbox-atom"]');
-        // Test: Checkbox should have the correct required attribute
-        if (args.required) {
-            expect(innerCheckbox).toHaveAttribute('required');
-        }
-        else {
-            expect(innerCheckbox).not.toHaveAttribute('required');
-        }
-        // Test: Button should be disabled when checkbox is unchecked and required is true
-        if (args.required && !args.checked) {
-            expect(button).toBeDisabled();
-        }
-        else if (args.required && args.checked) {
-            expect(button).not.toBeDisabled();
-        }
-        // Additional tests for the checked state
-        if (args.checked) {
-            expect(innerCheckbox).toBeChecked();
-        }
-        else {
-            expect(innerCheckbox).not.toBeChecked();
-        }
-        // Additional tests for the disabled state
-        if (args.disabled) {
-            expect(innerCheckbox).toBeDisabled();
-        }
-        else {
-            expect(innerCheckbox).not.toBeDisabled();
-        }
-    }
-};
-const testCheckboxWithValueBehavior = async (args, canvasElement) => {
-    const canvas = within(canvasElement);
-    const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));
-    if (checkbox.shadowRoot) {
-        const innerCheckbox = checkbox.shadowRoot.querySelector('[data-testid="checkbox-atom"]');
-        // Test: Checkbox should have the correct value attribute
-        expect(innerCheckbox).toHaveAttribute('value', args.value);
-        // Additional tests for disabled state if needed
-        if (args.disabled) {
-            expect(innerCheckbox).toBeDisabled();
-        }
-        else {
-            expect(innerCheckbox).not.toBeDisabled();
-        }
-    }
-};
-const TemplatewithChecked = ({ disabled, checked, label }) => html `
-    <div style="display:flex">
-      <rtg-checkbox
-        id="terms"
-        data-testid="checkbox-id"
-        ?disabled=${disabled}
-        ?checked=${checked}
-      ></rtg-checkbox>
-      <rtg-label style="margin:2px 0px 0px 4px" for="terms">${label}</rtg-label>
-    </div>
-  `;
-const TemplatewithRequired = ({ disabled, checked, label, required, }) => html `
-    <div style="display: flex; flex-direction: column;">
-      <div style="display:flex">
-        <rtg-checkbox
-          id="terms"
-          data-testid="checkbox-id"
-          ?disabled=${disabled}
-          ?checked=${checked}
-          ?required=${required}
-          @click=${(e) => {
-    const checkbox = e.target;
-    const button = document.querySelector('rtg-button');
-    if (button) {
-        button.disabled = required ? !checkbox.checked : false;
-    }
-}}
-        ></rtg-checkbox>
-        <rtg-label style="margin:2px 0px 0px 4px" for="terms"
-          >${label}</rtg-label
-        >
-      </div>
-      <div style="margin-top:16px">
-        <rtg-button
-          variant="default"
-          size="default"
-          data-testid="btn-id"
-          ?disabled=${required ? !checked : false}
-          .click=${mockOnClickHandler}
-          >Submit</rtg-button
-        >
-      </div>
-    </div>
-  `;
-const TemplateWithVlaue = ({ disabled, label, value }) => html `
-    <div style="display:flex">
-      <rtg-checkbox
-        id="terms"
-        data-testid="checkbox-id"
-        value=${value}
-        ?disabled=${disabled}
-      ></rtg-checkbox>
-      <rtg-label style="margin:2px 0px 0px 4px" for="terms">${label}</rtg-label>
-    </div>
-  `;
-export const CheckboxWithReuired = TemplatewithRequired.bind({});
-CheckboxWithReuired.args = {
-    disabled: false,
-    checked: false,
-    required: false,
-    label: 'Accept terms and conditions',
-};
-CheckboxWithReuired.parameters = {
-    docs: {
-        source: {
-            transform: (code, storyContext) => {
-                const args = storyContext.args;
-                // Handling boolean attributes: if true, render without value, if false, omit the attribute
-                const updatedCode = code
-                    .replace(/disabled=""/g, 'disabled=true')
-                    .replace(/checked=""/g, 'checked=true')
-                    .replace(/required=""/g, 'required=true')
-                    .replace(/disabled="false"/g, '')
-                    .replace(/checked="false"/g, '')
-                    .replace(/required="false"/g, '');
-                return updatedCode;
-            },
-        },
-    },
-};
-CheckboxWithReuired.argTypes = {
-    disabled: {
-        control: 'boolean',
-        description: 'Determines whether the checkbox is disabled (unclickable).',
-        table: {
-            defaultValue: { summary: 'false' },
-        },
-        docs: {
-            source: {
-                code: (args) => (args.disabled ? true : ''),
-            },
-        },
-    },
-    checked: {
-        control: 'boolean',
-        description: 'Specifies whether the checkbox is checked by default.',
-        table: {
-            defaultValue: { summary: 'false' },
-        },
-    },
-    required: {
-        control: 'boolean',
-        description: 'Marks the checkbox as a required field. When true, the checkbox must be checked for form submission, and related actions such as enabling a submit button are dependent on this state.',
-        table: {
-            defaultValue: { summary: 'false' },
-        },
-    },
-    label: {
-        control: 'text',
-        description: 'The text displayed next to the checkbox, describing its purpose.',
-    },
-};
-CheckboxWithReuired.play = async ({ args, canvasElement }) => {
-    await testCheckboxWithRequiredBehavior(args, canvasElement);
-};
-export const Checkbox = TemplatewithChecked.bind({});
-Checkbox.args = {
-    disabled: false,
-    checked: false,
-    label: 'Accept terms and conditions',
-};
-Checkbox.argTypes = {
-    disabled: {
-        control: 'boolean',
-    },
-    checked: {
-        control: 'boolean',
-    },
-    label: {
-        control: 'text',
-    },
-};
-Checkbox.play = async ({ args, canvasElement }) => {
-    await testCheckboxBehavior(args, canvasElement);
-};
-export const CheckboxWithValue = TemplateWithVlaue.bind({});
-CheckboxWithValue.args = {
-    disabled: false,
-    value: 'off',
-    label: 'Accept terms and conditions',
-};
-CheckboxWithValue.argTypes = {
-    disabled: { control: 'boolean' },
-    value: {
-        control: { type: 'select' },
-        options: ['on', 'off'],
-    },
-    label: { control: 'text' },
-};
-CheckboxWithValue.play = async ({ args, canvasElement }) => {
-    await testCheckboxWithValueBehavior(args, canvasElement);
-};
-//# sourceMappingURL=checkbox.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/checkbox/checkbox.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn, StoryContext } from '@storybook/web-components';\nimport { html } from 'lit';\nimport './checkbox.atom';\nimport { expect, within, userEvent, waitFor, fn } from '@storybook/test';\nimport {\n  CheckboxArgs,\n  CheckboxWithRequiredArgs,\n  CheckboxWithValueArgs,\n} from './checkbox.type';\nimport '../button/button.atom';\n\nconst allowedTypes = ['checkbox'];\n\nexport default {\n  component: 'components/checkbox',\n  tags: ['autodocs'],\n} as Meta;\n\nconst mockOnClickHandler = fn(event => {\n  alert('submit data!');\n});\n\nconst testCheckboxBehavior = async (\n  args: CheckboxArgs,\n  canvasElement: HTMLElement\n) => {\n  const canvas = within(canvasElement);\n  const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));\n\n  if (checkbox.shadowRoot) {\n    const innerCheckbox = checkbox.shadowRoot.querySelector(\n      '[data-testid=\"checkbox-atom\"]'\n    );\n\n    // 1. Test: Checkbox should have correct Role attribute\n    expect(innerCheckbox).toHaveRole('checkbox');\n\n    // 2. Test: Checkbox should have the correct `checked` state based on args\n    if (args.checked) {\n      expect(innerCheckbox).toBeChecked();\n    } else {\n      expect(innerCheckbox).not.toBeChecked();\n    }\n\n    // 3. Test: Checkbox should be disabled when the `disabled` prop is true\n    if (args.disabled) {\n      expect(innerCheckbox).toBeDisabled();\n    } else {\n      expect(innerCheckbox).not.toBeDisabled();\n    }\n\n    // 4. Test: Label should have correct `for` attribute linking to the checkbox\n    const label = await waitFor(() => canvas.getByText(args.label));\n    expect(label).toBeInTheDocument();\n    expect(label).toHaveAttribute('for', checkbox.getAttribute('id'));\n  }\n};\n\nconst testCheckboxWithRequiredBehavior = async (\n  args: CheckboxWithRequiredArgs,\n  canvasElement: HTMLElement\n) => {\n  const canvas = within(canvasElement);\n  const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));\n  const button = await waitFor(() => canvas.getByTestId('btn-id'));\n\n  if (checkbox.shadowRoot) {\n    const innerCheckbox = checkbox.shadowRoot.querySelector(\n      '[data-testid=\"checkbox-atom\"]'\n    );\n\n    // Test: Checkbox should have the correct required attribute\n    if (args.required) {\n      expect(innerCheckbox).toHaveAttribute('required');\n    } else {\n      expect(innerCheckbox).not.toHaveAttribute('required');\n    }\n\n    // Test: Button should be disabled when checkbox is unchecked and required is true\n    if (args.required && !args.checked) {\n      expect(button).toBeDisabled();\n    } else if (args.required && args.checked) {\n      expect(button).not.toBeDisabled();\n    }\n\n    // Additional tests for the checked state\n    if (args.checked) {\n      expect(innerCheckbox).toBeChecked();\n    } else {\n      expect(innerCheckbox).not.toBeChecked();\n    }\n\n    // Additional tests for the disabled state\n    if (args.disabled) {\n      expect(innerCheckbox).toBeDisabled();\n    } else {\n      expect(innerCheckbox).not.toBeDisabled();\n    }\n  }\n};\n\nconst testCheckboxWithValueBehavior = async (\n  args: CheckboxWithValueArgs,\n  canvasElement: HTMLElement\n) => {\n  const canvas = within(canvasElement);\n  const checkbox = await waitFor(() => canvas.getByTestId('checkbox-id'));\n\n  if (checkbox.shadowRoot) {\n    const innerCheckbox = checkbox.shadowRoot.querySelector(\n      '[data-testid=\"checkbox-atom\"]'\n    );\n\n    // Test: Checkbox should have the correct value attribute\n    expect(innerCheckbox).toHaveAttribute('value', args.value);\n\n    // Additional tests for disabled state if needed\n    if (args.disabled) {\n      expect(innerCheckbox).toBeDisabled();\n    } else {\n      expect(innerCheckbox).not.toBeDisabled();\n    }\n  }\n};\n\nconst TemplatewithChecked: StoryFn = ({ disabled, checked, label }) =>\n  html`\n    <div style=\"display:flex\">\n      <rtg-checkbox\n        id=\"terms\"\n        data-testid=\"checkbox-id\"\n        ?disabled=${disabled}\n        ?checked=${checked}\n      ></rtg-checkbox>\n      <rtg-label style=\"margin:2px 0px 0px 4px\" for=\"terms\">${label}</rtg-label>\n    </div>\n  `;\n\nconst TemplatewithRequired: StoryFn = ({\n  disabled,\n  checked,\n  label,\n  required,\n}) =>\n  html`\n    <div style=\"display: flex; flex-direction: column;\">\n      <div style=\"display:flex\">\n        <rtg-checkbox\n          id=\"terms\"\n          data-testid=\"checkbox-id\"\n          ?disabled=${disabled}\n          ?checked=${checked}\n          ?required=${required}\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        ></rtg-checkbox>\n        <rtg-label style=\"margin:2px 0px 0px 4px\" for=\"terms\"\n          >${label}</rtg-label\n        >\n      </div>\n      <div style=\"margin-top:16px\">\n        <rtg-button\n          variant=\"default\"\n          size=\"default\"\n          data-testid=\"btn-id\"\n          ?disabled=${required ? !checked : false}\n          .click=${mockOnClickHandler}\n          >Submit</rtg-button\n        >\n      </div>\n    </div>\n  `;\n\nconst TemplateWithVlaue: StoryFn = ({ disabled, label, value }) =>\n  html`\n    <div style=\"display:flex\">\n      <rtg-checkbox\n        id=\"terms\"\n        data-testid=\"checkbox-id\"\n        value=${value}\n        ?disabled=${disabled}\n      ></rtg-checkbox>\n      <rtg-label style=\"margin:2px 0px 0px 4px\" for=\"terms\">${label}</rtg-label>\n    </div>\n  `;\n\nexport const CheckboxWithReuired = TemplatewithRequired.bind({});\nCheckboxWithReuired.args = {\n  disabled: false,\n  checked: false,\n  required: false,\n  label: 'Accept terms and conditions',\n};\n\nCheckboxWithReuired.parameters = {\n  docs: {\n    source: {\n      transform: (code: string, storyContext: StoryContext) => {\n        const args = storyContext.args;\n\n        // Handling boolean attributes: if true, render without value, if false, omit the attribute\n        const updatedCode = code\n          .replace(/disabled=\"\"/g, 'disabled=true')\n          .replace(/checked=\"\"/g, 'checked=true')\n          .replace(/required=\"\"/g, 'required=true')\n          .replace(/disabled=\"false\"/g, '')\n          .replace(/checked=\"false\"/g, '')\n          .replace(/required=\"false\"/g, '');\n\n        return updatedCode;\n      },\n    },\n  },\n};\n\nCheckboxWithReuired.argTypes = {\n  disabled: {\n    control: 'boolean',\n    description: 'Determines whether the checkbox is disabled (unclickable).',\n    table: {\n      defaultValue: { summary: 'false' },\n    },\n    docs: {\n      source: {\n        code: (args: { disabled: boolean }) => (args.disabled ? true : ''),\n      },\n    },\n  },\n  checked: {\n    control: 'boolean',\n    description: 'Specifies whether the checkbox is checked by default.',\n    table: {\n      defaultValue: { summary: 'false' },\n    },\n  },\n  required: {\n    control: 'boolean',\n    description:\n      'Marks the checkbox as a required field. When true, the checkbox must be checked for form submission, and related actions such as enabling a submit button are dependent on this state.',\n    table: {\n      defaultValue: { summary: 'false' },\n    },\n  },\n  label: {\n    control: 'text',\n    description:\n      'The text displayed next to the checkbox, describing its purpose.',\n  },\n};\n\nCheckboxWithReuired.play = async ({ args, canvasElement }) => {\n  await testCheckboxWithRequiredBehavior(\n    args as CheckboxWithRequiredArgs,\n    canvasElement\n  );\n};\n\nexport const Checkbox = TemplatewithChecked.bind({});\nCheckbox.args = {\n  disabled: false,\n  checked: false,\n  label: 'Accept terms and conditions',\n};\n\nCheckbox.argTypes = {\n  disabled: {\n    control: 'boolean',\n  },\n  checked: {\n    control: 'boolean',\n  },\n  label: {\n    control: 'text',\n  },\n};\n\nCheckbox.play = async ({ args, canvasElement }) => {\n  await testCheckboxBehavior(args as CheckboxArgs, canvasElement);\n};\n\nexport const CheckboxWithValue = TemplateWithVlaue.bind({});\nCheckboxWithValue.args = {\n  disabled: false,\n  value: 'off',\n  label: 'Accept terms and conditions',\n};\n\nCheckboxWithValue.argTypes = {\n  disabled: { control: 'boolean' },\n  value: {\n    control: { type: 'select' },\n    options: ['on', 'off'],\n  },\n  label: { control: 'text' },\n};\n\nCheckboxWithValue.play = async ({ args, canvasElement }) => {\n  await testCheckboxWithValueBehavior(\n    args as CheckboxWithValueArgs,\n    canvasElement\n  );\n};\n"]}

package/dist/src/components/atoms/checkbox/checkbox.style.d.ts

@@ -1,2 +0,0 @@
-export declare const checkboxStyles = "peer h-4 w-4 align-middle shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground";
-export declare const iconStyles = "flex items-center justify-center text-current pointer-events-none";

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

@@ -1,3 +0,0 @@
-export const checkboxStyles = 'peer h-4 w-4 align-middle shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground';
-export const iconStyles = 'flex items-center justify-center text-current pointer-events-none';
-//# sourceMappingURL=checkbox.style.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.style.js","sourceRoot":"","sources":["../../../../../src/components/atoms/checkbox/checkbox.style.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GACzB,iSAAiS,CAAC;AAEpS,MAAM,CAAC,MAAM,UAAU,GACrB,mEAAmE,CAAC","sourcesContent":["export const checkboxStyles =\n  'peer h-4 w-4 align-middle shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground';\n\nexport const iconStyles =\n  'flex items-center justify-center text-current pointer-events-none';\n"]}

package/dist/src/components/atoms/checkbox/checkbox.type.d.ts

@@ -1,21 +0,0 @@
-export type CheckboxProperties = {
-    disabled: boolean;
-    checked: boolean;
-};
-export type CheckboxArgs = {
-    disabled: boolean;
-    checked: boolean;
-    label: string;
-};
-export type CheckboxWithRequiredArgs = {
-    disabled: boolean;
-    checked: boolean;
-    required: boolean;
-    label: string;
-    value?: string;
-};
-export type CheckboxWithValueArgs = {
-    disabled: boolean;
-    value: string;
-    label: string;
-};

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"checkbox.type.js","sourceRoot":"","sources":["../../../../../src/components/atoms/checkbox/checkbox.type.ts"],"names":[],"mappings":"","sourcesContent":["export type CheckboxProperties = {\n  disabled: boolean;\n  checked: boolean;\n};\n\nexport type CheckboxArgs = {\n  disabled: boolean;\n  checked: boolean;\n  label: string;\n};\n\nexport type CheckboxWithRequiredArgs = {\n  disabled: boolean;\n  checked: boolean;\n  required: boolean;\n  label: string;\n  value?: string;\n};\n\nexport type CheckboxWithValueArgs = {\n  disabled: boolean;\n  value: string;\n  label: string;\n};\n"]}

package/dist/src/components/atoms/combo-box/combo-box-input.d.ts

@@ -1,8 +0,0 @@
-import { LitElement } from 'lit';
-export declare class ComboBoxInput extends LitElement {
-    value: string;
-    handleClick: () => void;
-    handleKeyDown: () => void;
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-}