revotech-ui-kit 0.0.0 → 0.0.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+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>;
+}