revotech-ui-kit 0.0.2 → 0.0.3-beta

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.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.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 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.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.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.js

@@ -0,0 +1,47 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { TWStyles } from '../../../styles';
+let ComboBoxInput = class ComboBoxInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.handleClick = () => { };
+        this.handleKeyDown = () => { };
+    }
+    render() {
+        return html `
+      <input
+        class="inline-flex justify-between items-center w-full h-10 px-4 py-2 whitespace-nowrap rounded-md 
+        text-sm font-medium border border-input cursor-pointer 
+        ring-offset-background 
+        transition-colors disabled:pointer-events-none 
+        disabled:opacity-50 
+        bg-background hover:bg-accent 
+        hover:text-accent-foreground 
+        outline-none"
+        role="combobox"
+        aria-expanded="false"
+        readonly="true"
+        .value=${this.value}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      />
+    `;
+    }
+};
+ComboBoxInput.styles = [css ``, TWStyles];
+__decorate([
+    property({ type: String })
+], ComboBoxInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Function })
+], ComboBoxInput.prototype, "handleClick", void 0);
+__decorate([
+    property({ type: Function })
+], ComboBoxInput.prototype, "handleKeyDown", void 0);
+ComboBoxInput = __decorate([
+    customElement('combo-box-input')
+], ComboBoxInput);
+export { ComboBoxInput };
+//# sourceMappingURL=combo-box-input.js.map

package/dist/src/components/atoms/combo-box/combo-box-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box-input.js","sourceRoot":"","sources":["../../../../../src/components/atoms/combo-box/combo-box-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACuB,UAAK,GAAG,EAAE,CAAC;QACT,gBAAW,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QACvB,kBAAa,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;IAwBzD,CAAC;IApBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;iBAaE,IAAI,CAAC,KAAK;iBACV,IAAI,CAAC,WAAW;mBACd,IAAI,CAAC,aAAa;;KAEhC,CAAC;IACJ,CAAC;;AArBM,oBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAJN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAY;AACT;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;kDAAwB;AACvB;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;oDAA0B;AAH5C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA2BzB","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\n\n@customElement('combo-box-input')\nexport class ComboBoxInput extends LitElement {\n  @property({ type: String }) value = '';\n  @property({ type: Function }) handleClick = () => {};\n  @property({ type: Function }) handleKeyDown = () => {};\n\n  static styles = [css``, TWStyles];\n\n  render() {\n    return html`\n      <input\n        class=\"inline-flex justify-between items-center w-full h-10 px-4 py-2 whitespace-nowrap rounded-md \n        text-sm font-medium border border-input cursor-pointer \n        ring-offset-background \n        transition-colors disabled:pointer-events-none \n        disabled:opacity-50 \n        bg-background hover:bg-accent \n        hover:text-accent-foreground \n        outline-none\"\n        role=\"combobox\"\n        aria-expanded=\"false\"\n        readonly=\"true\"\n        .value=${this.value}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      />\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/combo-box/combo-box-item.js

@@ -0,0 +1,85 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { tickIcon } from '../../../assets/icons';
+import { TWStyles } from '../../../styles';
+let ComboBoxItem = class ComboBoxItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.key = '';
+        this.searchText = '';
+        this.value = '';
+        this.tabindex = 0;
+        this.isSelected = false;
+        this.class = '';
+        this.onSelect = () => { };
+    }
+    render() {
+        console.log('this', this.class);
+        return html `
+      <div
+        key="${this.key}"
+        class="flex items-center cursor-pointer py-2 px-4 w-full text-sm text-gray-800 
+        rounded-lg 
+        hover:bg-gray-100
+        focus:outline-none 
+        focus:bg-gray-100 
+        dark:bg-neutral-900 
+        dark:hover:bg-neutral-800 
+        dark:text-neutral-200 
+        dark:focus:bg-neutral-800
+        ${this.class}
+        "
+        tabindex="${this.tabindex}"
+        aria-selected="${this.isSelected}"
+        data-selected="${this.isSelected}"
+        data-hs-combo-box-output-item=""
+        role="option"
+        @click="${this.onSelect}"
+      >
+        <span
+          class="${this.isSelected
+            ? 'visible'
+            : 'invisible'} hs-combo-box-selected:block mr-2"
+        >
+          ${tickIcon()}
+        </span>
+        <div class="flex justify-between items-center w-full">
+          <span
+            data-hs-combo-box-search-text="${this.searchText}"
+            data-hs-combo-box-value="${this.value}"
+          >
+            ${this.searchText}
+          </span>
+        </div>
+      </div>
+    `;
+    }
+};
+ComboBoxItem.styles = [css ``, TWStyles];
+__decorate([
+    property({ type: String })
+], ComboBoxItem.prototype, "key", void 0);
+__decorate([
+    property({ type: String })
+], ComboBoxItem.prototype, "searchText", void 0);
+__decorate([
+    property({ type: String })
+], ComboBoxItem.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], ComboBoxItem.prototype, "tabindex", void 0);
+__decorate([
+    property({ type: Boolean })
+], ComboBoxItem.prototype, "isSelected", void 0);
+__decorate([
+    property({ type: String })
+], ComboBoxItem.prototype, "class", void 0);
+__decorate([
+    property({ type: Function })
+], ComboBoxItem.prototype, "onSelect", void 0);
+ComboBoxItem = __decorate([
+    customElement('combo-box-item')
+], ComboBoxItem);
+export { ComboBoxItem };
+//# sourceMappingURL=combo-box-item.js.map

package/dist/src/components/atoms/combo-box/combo-box-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box-item.js","sourceRoot":"","sources":["../../../../../src/components/atoms/combo-box/combo-box-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACuB,QAAG,GAAG,EAAE,CAAC;QACT,eAAU,GAAG,EAAE,CAAC;QAChB,UAAK,GAAG,EAAE,CAAC;QACX,aAAQ,GAAG,CAAC,CAAC;QACZ,eAAU,GAAG,KAAK,CAAC;QACpB,UAAK,GAAG,EAAE,CAAC;QACT,aAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;IA6CpD,CAAC;IAzCC,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAChC,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,GAAG;;;;;;;;;;UAUb,IAAI,CAAC,KAAK;;oBAEA,IAAI,CAAC,QAAQ;yBACR,IAAI,CAAC,UAAU;yBACf,IAAI,CAAC,UAAU;;;kBAGtB,IAAI,CAAC,QAAQ;;;mBAGZ,IAAI,CAAC,UAAU;YACtB,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,WAAW;;YAEb,QAAQ,EAAE;;;;6CAIuB,IAAI,CAAC,UAAU;uCACrB,IAAI,CAAC,KAAK;;cAEnC,IAAI,CAAC,UAAU;;;;KAIxB,CAAC;IACJ,CAAC;;AA1CM,mBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AARN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAU;AACT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAc;AACZ;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAoB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAY;AACT;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;8CAAqB;AAPvC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAoDxB","sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tickIcon } from '../../../assets/icons';\nimport { TWStyles } from '../../../styles';\n\n@customElement('combo-box-item')\nexport class ComboBoxItem extends LitElement {\n  @property({ type: String }) key = '';\n  @property({ type: String }) searchText = '';\n  @property({ type: String }) value = '';\n  @property({ type: Number }) tabindex = 0;\n  @property({ type: Boolean }) isSelected = false;\n  @property({ type: String }) class = '';\n  @property({ type: Function }) onSelect = () => {};\n\n  static styles = [css``, TWStyles];\n\n  render() {\n    console.log('this', this.class);\n    return html`\n      <div\n        key=\"${this.key}\"\n        class=\"flex items-center cursor-pointer py-2 px-4 w-full text-sm text-gray-800 \n        rounded-lg \n        hover:bg-gray-100\n        focus:outline-none \n        focus:bg-gray-100 \n        dark:bg-neutral-900 \n        dark:hover:bg-neutral-800 \n        dark:text-neutral-200 \n        dark:focus:bg-neutral-800\n        ${this.class}\n        \"\n        tabindex=\"${this.tabindex}\"\n        aria-selected=\"${this.isSelected}\"\n        data-selected=\"${this.isSelected}\"\n        data-hs-combo-box-output-item=\"\"\n        role=\"option\"\n        @click=\"${this.onSelect}\"\n      >\n        <span\n          class=\"${this.isSelected\n            ? 'visible'\n            : 'invisible'} hs-combo-box-selected:block mr-2\"\n        >\n          ${tickIcon()}\n        </span>\n        <div class=\"flex justify-between items-center w-full\">\n          <span\n            data-hs-combo-box-search-text=\"${this.searchText}\"\n            data-hs-combo-box-value=\"${this.value}\"\n          >\n            ${this.searchText}\n          </span>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/combo-box/combo-box-list.js

@@ -0,0 +1,67 @@
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { searchIcon } from '../../../assets/icons';
+import { TWStyles } from '../../../styles';
+import { STATE_CLOSED, STATE_OPEN } from '../popover/popover.types';
+import { ComboBox } from './combo-box.atom';
+let ComboBoxList = class ComboBoxList extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.state = STATE_CLOSED;
+        this.isOpen = false;
+    }
+    get _popover() {
+        let parent = this.parentElement;
+        // Traverse up the DOM tree to find the parent `Popover`
+        while (parent && !(parent instanceof ComboBox)) {
+            parent = parent.parentElement;
+        }
+        return parent;
+    }
+    render() {
+        console.log('this.state', this.state);
+        // @keydown="${this.handleKeyDown}"
+        //   @input="${this.handleSearch}"
+        //   @keydown="${this.handleKeyDown}"
+        return html `
+      <div
+        class="absolute z-50 w-full max-h-72 p-1 bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700"
+        data-hs-combo-box-output=""
+        style="display: ${this.state === STATE_OPEN
+            ? 'block'
+            : 'none'}; top:115%"
+      >
+        <div
+          class="flex items-center justify-center px-3 border-b border-gray-300 mb-1"
+        >
+          ${searchIcon()}
+          <input
+            type="text"
+            class="w-full px-2 py-2 rounded focus:outline-none"
+            placeholder="Search..."
+            autocomplete="off"
+            autocorrect="off"
+            spellcheck="false"
+            aria-autocomplete="list"
+            aria-expanded="true"
+            role="combobox"
+          />
+        </div>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+ComboBoxList.styles = [css ``, TWStyles];
+__decorate([
+    property({ attribute: 'data-state', type: String })
+], ComboBoxList.prototype, "state", void 0);
+__decorate([
+    state()
+], ComboBoxList.prototype, "isOpen", void 0);
+ComboBoxList = __decorate([
+    customElement('combo-box-list')
+], ComboBoxList);
+export { ComboBoxList };
+//# sourceMappingURL=combo-box-list.js.map

package/dist/src/components/atoms/combo-box/combo-box-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box-list.js","sourceRoot":"","sources":["../../../../../src/components/atoms/combo-box/combo-box-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGrC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAEgD,UAAK,GAAG,YAAY,CAAC;QAEjE,WAAM,GAAG,KAAK,CAAC;IA4C1B,CAAC;IA3CC,IAAI,QAAQ;QACV,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAChC,wDAAwD;QACxD,OAAO,MAAM,IAAI,CAAC,CAAC,MAAM,YAAY,QAAQ,CAAC,EAAE,CAAC;YAC/C,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAED,MAAM;QACJ,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,mCAAmC;QAEnC,kCAAkC;QAClC,qCAAqC;QACrC,OAAO,IAAI,CAAA;;;;0BAIW,IAAI,CAAC,KAAK,KAAK,UAAU;YACzC,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,MAAM;;;;;YAKN,UAAU,EAAE;;;;;;;;;;;;;;;KAenB,CAAC;IACJ,CAAC;;AA9CM,mBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AACmB;IAApD,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAsB;AAEjE;IAAR,KAAK,EAAE;4CAAgB;AAJb,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAgDxB","sourcesContent":["import { LitElement, PropertyValues, css, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { searchIcon } from '../../../assets/icons';\nimport { TWStyles } from '../../../styles';\nimport { STATE_CLOSED, STATE_OPEN } from '../popover/popover.types';\nimport { ComboBox } from './combo-box.atom';\n\n@customElement('combo-box-list')\nexport class ComboBoxList extends LitElement {\n  static styles = [css``, TWStyles];\n  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;\n\n  @state() isOpen = false;\n  get _popover(): ComboBox | null {\n    let parent = this.parentElement;\n    // Traverse up the DOM tree to find the parent `Popover`\n    while (parent && !(parent instanceof ComboBox)) {\n      parent = parent.parentElement;\n    }\n    return parent;\n  }\n\n  render() {\n    console.log('this.state', this.state);\n    // @keydown=\"${this.handleKeyDown}\"\n\n    //   @input=\"${this.handleSearch}\"\n    //   @keydown=\"${this.handleKeyDown}\"\n    return html`\n      <div\n        class=\"absolute z-50 w-full max-h-72 p-1 bg-white border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700\"\n        data-hs-combo-box-output=\"\"\n        style=\"display: ${this.state === STATE_OPEN\n          ? 'block'\n          : 'none'}; top:115%\"\n      >\n        <div\n          class=\"flex items-center justify-center px-3 border-b border-gray-300 mb-1\"\n        >\n          ${searchIcon()}\n          <input\n            type=\"text\"\n            class=\"w-full px-2 py-2 rounded focus:outline-none\"\n            placeholder=\"Search...\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\"\n            aria-autocomplete=\"list\"\n            aria-expanded=\"true\"\n            role=\"combobox\"\n          />\n        </div>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}