revotech-ui-kit 0.0.11 → 0.0.14

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

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

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

@@ -1,12 +0,0 @@
-import { LitElement } from 'lit';
-export declare class ComboBoxItem extends LitElement {
-    key: string;
-    searchText: string;
-    value: string;
-    tabindex: number;
-    isSelected: boolean;
-    class: string;
-    onSelect: () => void;
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-}

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

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

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

@@ -1,9 +0,0 @@
-import { LitElement } from 'lit';
-import { ComboBox } from './combo-box.atom';
-export declare class ComboBoxList extends LitElement {
-    static styles: import("lit").CSSResult[];
-    state: string;
-    isOpen: boolean;
-    get _popover(): ComboBox | null;
-    render(): import("lit-html").TemplateResult<1>;
-}

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

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

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

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

@@ -1,23 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-import './combo-box-input';
-import './combo-box-item';
-declare class ComboBox extends LitElement {
-    static styles: import("lit").CSSResult[];
-    isOpen: boolean;
-    selectedValue: string;
-    searchTerm: string;
-    focusedIndex: number;
-    filteredItems: string[];
-    label: string;
-    items: never[];
-    protected firstUpdated(_changedProperties: PropertyValues): void;
-    toggleDropdown(): void;
-    selectItem(event: Event): void;
-    handleInputClick(): void;
-    handleSearch(event: Event): void;
-    handleKeyDown(event: KeyboardEvent): void;
-    handleMouseOver(event: Event, index: number): void;
-    updateFocus(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}
-export { ComboBox };

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

@@ -1,199 +0,0 @@
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-import { arrowsIcon, searchIcon } from '../../../assets/icons';
-import './combo-box-input';
-import './combo-box-item';
-let ComboBox = class ComboBox extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.isOpen = false;
-        this.selectedValue = '';
-        this.searchTerm = '';
-        this.focusedIndex = -1;
-        this.filteredItems = [];
-        this.label = 'Select an item';
-        this.items = [];
-    }
-    firstUpdated(_changedProperties) {
-        if (this.items && this.items.length > 0)
-            this.filteredItems = this.items.filter((item) => item.toLowerCase().includes(this.searchTerm));
-    }
-    toggleDropdown() {
-        this.isOpen = !this.isOpen;
-        this.focusedIndex = -1;
-    }
-    selectItem(event) {
-        const target = event.target;
-        if (target instanceof HTMLElement) {
-            const closestItem = target.closest('combo-box-item');
-            if (closestItem) {
-                this.selectedValue =
-                    closestItem.getAttribute('data-hs-combo-box-value') || '';
-                this.isOpen = false;
-            }
-            else {
-                console.log('No valid combo-box-item found');
-            }
-        }
-        else {
-            console.log('Event target is not an HTMLElement');
-        }
-    }
-    handleInputClick() {
-        this.toggleDropdown();
-    }
-    handleSearch(event) {
-        const input = event.target;
-        this.searchTerm = input.value;
-        this.filteredItems = this.items.filter((item) => item.toLowerCase().includes(this.searchTerm));
-    }
-    handleKeyDown(event) {
-        const filteredLength = this.filteredItems.length;
-        switch (event.key) {
-            case 'ArrowDown':
-                event.preventDefault();
-                this.focusedIndex = (this.focusedIndex + 1) % filteredLength;
-                break;
-            case 'ArrowUp':
-                event.preventDefault();
-                this.focusedIndex =
-                    (this.focusedIndex - 1 + filteredLength) % filteredLength;
-                break;
-            case 'Enter':
-                if (this.focusedIndex >= 0 && this.focusedIndex < filteredLength) {
-                    this.selectedValue = this.filteredItems[this.focusedIndex];
-                    this.isOpen = false;
-                }
-                break;
-            default:
-                break;
-        }
-    }
-    handleMouseOver(event, index) {
-        event.preventDefault();
-        this.focusedIndex = index;
-    }
-    updateFocus() {
-        if (!this.shadowRoot)
-            return;
-        const items = this.shadowRoot.querySelectorAll('combo-box-item');
-        items.forEach((item, index) => {
-            if (index === this.focusedIndex) {
-                item.classList.add('bg-gray-100');
-            }
-            else {
-                item.classList.remove('bg-gray-100');
-            }
-        });
-    }
-    render() {
-        return html `
-      <div class="relative" data-hs-combo-box="">
-        <div class="relative">
-          <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=${this.isOpen}
-            readonly
-            .value=${this.selectedValue || this.label}
-            @click="${this.handleInputClick}"
-            @keydown="${this.handleKeyDown}"
-          />
-          <div
-            class="absolute top-1/2 end-3 -translate-y-1/2 cursor-pointer"
-            aria-expanded=${this.isOpen}
-            data-hs-combo-box-toggle=""
-            @click="${this.toggleDropdown}"
-          >
-            ${arrowsIcon()}
-          </div>
-        </div>
-        <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"
-          style="display: ${this.isOpen ? 'block' : 'none'}; top:115%"
-          data-hs-combo-box-output=""
-          @keydown="${this.handleKeyDown}"
-        >
-          <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"
-              role="combobox"
-              @input="${this.handleSearch}"
-              @keydown="${this.handleKeyDown}"
-            />
-          </div>
-          ${this.filteredItems.length === 0
-            ? html `
-                <div
-                  class="py-6 text-center text-sm"
-                  cmdk-empty=""
-                  role="presentation"
-                >
-                  No item found.
-                </div>
-              `
-            : html `
-                ${this.filteredItems.map((item, index) => {
-                return html `
-                    <combo-box-item
-                      .searchText=${item}
-                      .value=${item}
-                      data-hs-combo-box-value=${item}
-                      tabIndex=${index}
-                      @click="${(event) => this.selectItem(event)}"
-                      @mouseover="${(event) => this.handleMouseOver(event, index)}"
-                      ?isSelected=${item === this.selectedValue}
-                    ></combo-box-item>
-                  `;
-            })}
-              `}
-        </div>
-      </div>
-    `;
-    }
-};
-ComboBox.styles = [css ``, TWStyles];
-__decorate([
-    state()
-], ComboBox.prototype, "isOpen", void 0);
-__decorate([
-    state()
-], ComboBox.prototype, "selectedValue", void 0);
-__decorate([
-    state()
-], ComboBox.prototype, "searchTerm", void 0);
-__decorate([
-    state()
-], ComboBox.prototype, "focusedIndex", void 0);
-__decorate([
-    state()
-], ComboBox.prototype, "filteredItems", void 0);
-__decorate([
-    property({ type: String })
-], ComboBox.prototype, "label", void 0);
-__decorate([
-    property({ type: Array })
-], ComboBox.prototype, "items", void 0);
-ComboBox = __decorate([
-    customElement('rtg-combo-box')
-], ComboBox);
-export { ComboBox };
-//# sourceMappingURL=combo-box.atom.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"combo-box.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/combo-box/combo-box.atom.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,mBAAmB,CAAC;AAC3B,OAAO,kBAAkB,CAAC;AAG1B,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGW,WAAM,GAAG,KAAK,CAAC;QACf,kBAAa,GAAG,EAAE,CAAC;QACnB,eAAU,GAAG,EAAE,CAAC;QAChB,iBAAY,GAAG,CAAC,CAAC,CAAC;QAClB,kBAAa,GAAa,EAAE,CAAC;QACV,UAAK,GAAW,gBAAgB,CAAC;QAClC,UAAK,GAAG,EAAE,CAAC;IAuKxC,CAAC;IAtKW,YAAY,CAAC,kBAAkC;QACvD,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;YACrC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAY,EAAE,EAAE,CACtD,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAC7C,CAAC;IACN,CAAC;IACD,cAAc;QACZ,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;IACzB,CAAC;IAED,UAAU,CAAC,KAAY;QACrB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,IAAI,MAAM,YAAY,WAAW,EAAE,CAAC;YAClC,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAChC,gBAAgB,CACK,CAAC;YACxB,IAAI,WAAW,EAAE,CAAC;gBAChB,IAAI,CAAC,aAAa;oBAChB,WAAW,CAAC,YAAY,CAAC,yBAAyB,CAAC,IAAI,EAAE,CAAC;gBAC5D,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACtB,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,GAAG,CAAC,oCAAoC,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY,CAAC,KAAY;QACvB,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC;QAC9B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAY,EAAE,EAAE,CACtD,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,CAC7C,CAAC;IACJ,CAAC;IAED,aAAa,CAAC,KAAoB;QAChC,MAAM,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC;QAEjD,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC;gBAC7D,MAAM;YACR,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,YAAY;oBACf,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,GAAG,cAAc,CAAC,GAAG,cAAc,CAAC;gBAC5D,MAAM;YACR,KAAK,OAAO;gBACV,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,GAAG,cAAc,EAAE,CAAC;oBACjE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;oBAC3D,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACtB,CAAC;gBACD,MAAM;YACR;gBACE,MAAM;QACV,CAAC;IACH,CAAC;IAED,eAAe,CAAC,KAAY,EAAE,KAAa;QACzC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC5B,CAAC;IAED,WAAW;QACT,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAE7B,MAAM,KAAK,GACT,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAc,gBAAgB,CAAC,CAAC;QAClE,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC5B,IAAI,KAAK,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;gBAChC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;YACpC,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;4BAaa,IAAI,CAAC,MAAM;;qBAElB,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,KAAK;sBAC/B,IAAI,CAAC,gBAAgB;wBACnB,IAAI,CAAC,aAAa;;;;4BAId,IAAI,CAAC,MAAM;;sBAEjB,IAAI,CAAC,cAAc;;cAE3B,UAAU,EAAE;;;;;4BAKE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;;sBAEpC,IAAI,CAAC,aAAa;;;;;cAK1B,UAAU,EAAE;;;;;;;;;;wBAUF,IAAI,CAAC,YAAY;0BACf,IAAI,CAAC,aAAa;;;YAGhC,IAAI,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC;YAC/B,CAAC,CAAC,IAAI,CAAA;;;;;;;;eAQH;YACH,CAAC,CAAC,IAAI,CAAA;kBACA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACvC,OAAO,IAAI,CAAA;;oCAEO,IAAI;+BACT,IAAI;gDACa,IAAI;iCACnB,KAAK;gCACN,CAAC,KAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;oCACpC,CAAC,KAAY,EAAE,EAAE,CAC7B,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC;oCACtB,IAAI,KAAK,IAAI,CAAC,aAAa;;mBAE5C,CAAC;YACJ,CAAC,CAAC;eACH;;;KAGV,CAAC;IACJ,CAAC;;AA9KM,eAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAEzB;IAAR,KAAK,EAAE;wCAAgB;AACf;IAAR,KAAK,EAAE;+CAAoB;AACnB;IAAR,KAAK,EAAE;4CAAiB;AAChB;IAAR,KAAK,EAAE;8CAAmB;AAClB;IAAR,KAAK,EAAE;+CAA8B;AACV;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAkC;AAClC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uCAAY;AATlC,QAAQ;IADb,aAAa,CAAC,eAAe,CAAC;GACzB,QAAQ,CAgLb;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC","sourcesContent":["import { css, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\nimport { arrowsIcon, searchIcon } from '../../../assets/icons';\nimport './combo-box-input';\nimport './combo-box-item';\n\n@customElement('rtg-combo-box')\nclass ComboBox extends LitElement {\n  static styles = [css``, TWStyles];\n\n  @state() isOpen = false;\n  @state() selectedValue = '';\n  @state() searchTerm = '';\n  @state() focusedIndex = -1;\n  @state() filteredItems: string[] = [];\n  @property({ type: String }) label: string = 'Select an item';\n  @property({ type: Array }) items = [];\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    if (this.items && this.items.length > 0)\n      this.filteredItems = this.items.filter((item: string) =>\n        item.toLowerCase().includes(this.searchTerm)\n      );\n  }\n  toggleDropdown() {\n    this.isOpen = !this.isOpen;\n    this.focusedIndex = -1;\n  }\n\n  selectItem(event: Event) {\n    const target = event.target as EventTarget;\n    if (target instanceof HTMLElement) {\n      const closestItem = target.closest(\n        'combo-box-item'\n      ) as HTMLElement | null;\n      if (closestItem) {\n        this.selectedValue =\n          closestItem.getAttribute('data-hs-combo-box-value') || '';\n        this.isOpen = false;\n      } else {\n        console.log('No valid combo-box-item found');\n      }\n    } else {\n      console.log('Event target is not an HTMLElement');\n    }\n  }\n\n  handleInputClick() {\n    this.toggleDropdown();\n  }\n\n  handleSearch(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.searchTerm = input.value;\n    this.filteredItems = this.items.filter((item: string) =>\n      item.toLowerCase().includes(this.searchTerm)\n    );\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    const filteredLength = this.filteredItems.length;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this.focusedIndex = (this.focusedIndex + 1) % filteredLength;\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusedIndex =\n          (this.focusedIndex - 1 + filteredLength) % filteredLength;\n        break;\n      case 'Enter':\n        if (this.focusedIndex >= 0 && this.focusedIndex < filteredLength) {\n          this.selectedValue = this.filteredItems[this.focusedIndex];\n          this.isOpen = false;\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  handleMouseOver(event: Event, index: number) {\n    event.preventDefault();\n    this.focusedIndex = index;\n  }\n\n  updateFocus() {\n    if (!this.shadowRoot) return;\n\n    const items =\n      this.shadowRoot.querySelectorAll<HTMLElement>('combo-box-item');\n    items.forEach((item, index) => {\n      if (index === this.focusedIndex) {\n        item.classList.add('bg-gray-100');\n      } else {\n        item.classList.remove('bg-gray-100');\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <div class=\"relative\" data-hs-combo-box=\"\">\n        <div class=\"relative\">\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=${this.isOpen}\n            readonly\n            .value=${this.selectedValue || this.label}\n            @click=\"${this.handleInputClick}\"\n            @keydown=\"${this.handleKeyDown}\"\n          />\n          <div\n            class=\"absolute top-1/2 end-3 -translate-y-1/2 cursor-pointer\"\n            aria-expanded=${this.isOpen}\n            data-hs-combo-box-toggle=\"\"\n            @click=\"${this.toggleDropdown}\"\n          >\n            ${arrowsIcon()}\n          </div>\n        </div>\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          style=\"display: ${this.isOpen ? 'block' : 'none'}; top:115%\"\n          data-hs-combo-box-output=\"\"\n          @keydown=\"${this.handleKeyDown}\"\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              role=\"combobox\"\n              @input=\"${this.handleSearch}\"\n              @keydown=\"${this.handleKeyDown}\"\n            />\n          </div>\n          ${this.filteredItems.length === 0\n            ? html`\n                <div\n                  class=\"py-6 text-center text-sm\"\n                  cmdk-empty=\"\"\n                  role=\"presentation\"\n                >\n                  No item found.\n                </div>\n              `\n            : html`\n                ${this.filteredItems.map((item, index) => {\n                  return html`\n                    <combo-box-item\n                      .searchText=${item}\n                      .value=${item}\n                      data-hs-combo-box-value=${item}\n                      tabIndex=${index}\n                      @click=\"${(event: Event) => this.selectItem(event)}\"\n                      @mouseover=\"${(event: Event) =>\n                        this.handleMouseOver(event, index)}\"\n                      ?isSelected=${item === this.selectedValue}\n                    ></combo-box-item>\n                  `;\n                })}\n              `}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport { ComboBox };\n"]}

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

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import './combo-box.atom';
-import './combo-box-list';
-import './combo-box-item';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const basicComboBox: Story;
-export declare const emptyComboBox: Story;

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

@@ -1,86 +0,0 @@
-import { html } from 'lit';
-import './combo-box.atom';
-import './combo-box-list';
-import './combo-box-item';
-const frameworks = [
-    {
-        value: 'next.js',
-        label: 'Next.js',
-    },
-    {
-        value: 'sveltekit',
-        label: 'SvelteKit',
-    },
-    {
-        value: 'nuxt.js',
-        label: 'Nuxt.js',
-    },
-    {
-        value: 'remix',
-        label: 'Remix',
-    },
-    {
-        value: 'astro',
-        label: 'Astro',
-    },
-];
-const meta = {
-    component: 'components/combo-box',
-    tags: ['autodocs'],
-    argTypes: {
-        items: {
-            control: 'select',
-            description: 'An array of items to display in the dropdown menu. Each item should be a string representing the option text.',
-            table: {
-                defaultValue: { summary: '["Option 1", "Option 2", "Option 3"]' },
-            },
-        },
-        label: {
-            control: 'text',
-            description: 'The text displayed on the dropdown. This text is shown to users when the dropdown is closed.',
-            type: 'string',
-            table: {
-                defaultValue: { summary: 'Select an item' },
-            },
-        },
-    },
-};
-export default meta;
-// Base story
-export const basicComboBox = {
-    name: 'Basic Usage',
-    args: {
-        items: ['Argentina', 'Brazil', 'China', 'USA', 'Italy', 'Iran', 'UAE'],
-        label: 'Select an item',
-    },
-    render: ({ label, items }) => {
-        return html `
-      <rtg-combo-box label="${label}" .items=${items}>
-        <combo-box-list>
-          ${frameworks.map((item, index) => html `
-              <combo-box-item
-                .searchText="${item.label}"
-                .value="${item.value}"
-                data-hs-combo-box-value="${item.value}"
-                tabIndex="${index}"
-              ></combo-box-item>
-            `)}
-        </combo-box-list>
-      </rtg-combo-box>
-    `;
-    },
-};
-// Story for empty items array
-export const emptyComboBox = {
-    name: 'Empty Items',
-    args: {
-        items: [],
-        label: 'Select an item',
-    },
-    render: ({ label, items }) => {
-        return html `
-      <rtg-combo-box label=${label}" .items=${items}> </rtg-combo-box>
-    `;
-    },
-};
-//# sourceMappingURL=combo-box.stories.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"combo-box.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/combo-box/combo-box.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,UAAU,GAAG;IACjB;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,WAAW;KACnB;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;KACf;IACD;QACE,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;KACf;CACF,CAAC;AAEF,MAAM,IAAI,GAAS;IACjB,SAAS,EAAE,sBAAsB;IACjC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;YACjB,WAAW,EACT,+GAA+G;YACjH,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,sCAAsC,EAAE;aAClE;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EACT,8FAA8F;YAChG,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE;aAC5C;SACF;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,aAAa;AACb,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,CAAC,WAAW,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC;QACtE,KAAK,EAAE,gBAAgB;KACxB;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;QAC3B,OAAO,IAAI,CAAA;8BACe,KAAK,YAAY,KAAK;;YAExC,UAAU,CAAC,GAAG,CACd,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;+BAEF,IAAI,CAAC,KAAK;0BACf,IAAI,CAAC,KAAK;2CACO,IAAI,CAAC,KAAK;4BACzB,KAAK;;aAEpB,CACF;;;KAGN,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,8BAA8B;AAC9B,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,gBAAgB;KACxB;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;QAC3B,OAAO,IAAI,CAAA;6BACc,KAAK,YAAY,KAAK;KAC9C,CAAC;IACJ,CAAC;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport { expect, within, userEvent, waitFor, fn } from '@storybook/test';\nimport './combo-box.atom';\nimport './combo-box-list';\nimport './combo-box-item';\n\nconst frameworks = [\n  {\n    value: 'next.js',\n    label: 'Next.js',\n  },\n  {\n    value: 'sveltekit',\n    label: 'SvelteKit',\n  },\n  {\n    value: 'nuxt.js',\n    label: 'Nuxt.js',\n  },\n  {\n    value: 'remix',\n    label: 'Remix',\n  },\n  {\n    value: 'astro',\n    label: 'Astro',\n  },\n];\n\nconst meta: Meta = {\n  component: 'components/combo-box',\n  tags: ['autodocs'],\n  argTypes: {\n    items: {\n      control: 'select',\n      description:\n        'An array of items to display in the dropdown menu. Each item should be a string representing the option text.',\n      table: {\n        defaultValue: { summary: '[\"Option 1\", \"Option 2\", \"Option 3\"]' },\n      },\n    },\n    label: {\n      control: 'text',\n      description:\n        'The text displayed on the dropdown. This text is shown to users when the dropdown is closed.',\n      type: 'string',\n      table: {\n        defaultValue: { summary: 'Select an item' },\n      },\n    },\n  },\n};\nexport default meta;\ntype Story = StoryObj;\n// Base story\nexport const basicComboBox: Story = {\n  name: 'Basic Usage',\n  args: {\n    items: ['Argentina', 'Brazil', 'China', 'USA', 'Italy', 'Iran', 'UAE'],\n    label: 'Select an item',\n  },\n  render: ({ label, items }) => {\n    return html`\n      <rtg-combo-box label=\"${label}\" .items=${items}>\n        <combo-box-list>\n          ${frameworks.map(\n            (item, index) => html`\n              <combo-box-item\n                .searchText=\"${item.label}\"\n                .value=\"${item.value}\"\n                data-hs-combo-box-value=\"${item.value}\"\n                tabIndex=\"${index}\"\n              ></combo-box-item>\n            `\n          )}\n        </combo-box-list>\n      </rtg-combo-box>\n    `;\n  },\n};\n\n// Story for empty items array\nexport const emptyComboBox: Story = {\n  name: 'Empty Items',\n  args: {\n    items: [],\n    label: 'Select an item',\n  },\n  render: ({ label, items }) => {\n    return html`\n      <rtg-combo-box label=${label}\" .items=${items}> </rtg-combo-box>\n    `;\n  },\n};\n"]}

package/dist/src/components/atoms/command-empty/command-empty.atom.d.ts

@@ -1,9 +0,0 @@
-import { LitElement } from 'lit';
-export declare class CommandEmpty extends LitElement {
-    _id: string;
-    _hidden: string;
-    private static _counter;
-    static styles: import("lit").CSSResult[];
-    private get identifier();
-    render(): import("lit-html").TemplateResult<1>;
-}