revotech-ui-kit 0.0.2 → 0.0.3-beta

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

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

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

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

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

@@ -0,0 +1,54 @@
+var CommandEmpty_1;
+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';
+let CommandEmpty = CommandEmpty_1 = class CommandEmpty extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = '';
+        this._hidden = 'true';
+    }
+    get identifier() {
+        var _a, _b;
+        if (this._id !== '') {
+            return this._id;
+        }
+        const parent = (_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div[rtgcmd-list]');
+        if (parent) {
+            this._id = `${parent.getAttribute('id')}e${CommandEmpty_1._counter++}`;
+        }
+        else {
+            this._id = `rtgcmdrxlxe${CommandEmpty_1._counter++}`;
+        }
+        return this._id;
+    }
+    render() {
+        return html `${this._hidden === 'true'
+            ? nothing
+            : html `
+          <div
+            class="${cn('py-6 text-center text-sm', this.className)}"
+            rtgcmd-empty
+            role="presentation"
+            id="${this.identifier}"
+          >
+            <slot></slot>
+          </div>
+        `}`;
+    }
+};
+CommandEmpty._counter = 0;
+CommandEmpty.styles = [css ``, TWStyles];
+__decorate([
+    property({ type: String })
+], CommandEmpty.prototype, "_id", void 0);
+__decorate([
+    property({ attribute: 'aria-hidden', type: String })
+], CommandEmpty.prototype, "_hidden", void 0);
+CommandEmpty = CommandEmpty_1 = __decorate([
+    customElement('rtg-command-empty')
+], CommandEmpty);
+export { CommandEmpty };
+//# sourceMappingURL=command-empty.atom.js.map

package/dist/src/components/atoms/command-empty/command-empty.atom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-empty.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/command-empty/command-empty.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;AAGpC,IAAM,YAAY,oBAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACuB,QAAG,GAAG,EAAE,CAAC;QAEiB,YAAO,GAAG,MAAM,CAAC;IAkCzE,CAAC;IA5BC,IAAY,UAAU;;QACpB,IAAI,IAAI,CAAC,GAAG,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,GAAG,CAAC;QAClB,CAAC;QACD,MAAM,MAAM,GACV,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,0CAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACpE,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,cAAY,CAAC,QAAQ,EAAE,EAAE,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,GAAG,GAAG,cAAc,cAAY,CAAC,QAAQ,EAAE,EAAE,CAAC;QACrD,CAAC;QACD,OAAO,IAAI,CAAC,GAAG,CAAC;IAClB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM;YACnC,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;qBAES,EAAE,CAAC,0BAA0B,EAAE,IAAI,CAAC,SAAS,CAAC;;;kBAGjD,IAAI,CAAC,UAAU;;;;SAIxB,EAAE,CAAC;IACV,CAAC;;AA/Bc,qBAAQ,GAAG,CAAC,AAAJ,CAAK;AAErB,mBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AANN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAU;AAEiB;IAArD,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAkB;AAH5D,YAAY;IADxB,aAAa,CAAC,mBAAmB,CAAC;GACtB,YAAY,CAqCxB","sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-command-empty')\nexport class CommandEmpty extends LitElement {\n  @property({ type: String }) _id = '';\n\n  @property({ attribute: 'aria-hidden', type: String }) _hidden = 'true';\n\n  private static _counter = 0;\n\n  static styles = [css``, TWStyles];\n\n  private get identifier() {\n    if (this._id !== '') {\n      return this._id;\n    }\n    const parent =\n      this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-list]');\n    if (parent) {\n      this._id = `${parent.getAttribute('id')}e${CommandEmpty._counter++}`;\n    } else {\n      this._id = `rtgcmdrxlxe${CommandEmpty._counter++}`;\n    }\n    return this._id;\n  }\n\n  render() {\n    return html`${this._hidden === 'true'\n      ? nothing\n      : html`\n          <div\n            class=\"${cn('py-6 text-center text-sm', this.className)}\"\n            rtgcmd-empty\n            role=\"presentation\"\n            id=\"${this.identifier}\"\n          >\n            <slot></slot>\n          </div>\n        `}`;\n  }\n}\n"]}

package/dist/src/components/atoms/command-group/command-group.atom.js

@@ -0,0 +1,71 @@
+var CommandGroup_1;
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { TWStyles } from '../../../styles';
+let CommandGroup = CommandGroup_1 = class CommandGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = '';
+        this._id = '';
+        this._hidden = '';
+    }
+    get identifier() {
+        var _a, _b;
+        if (this._id !== '') {
+            return this._id;
+        }
+        const parent = (_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div[rtgcmd-list]');
+        if (parent) {
+            this._id = `${parent.getAttribute('id')}g${CommandGroup_1._counter++}`;
+        }
+        else {
+            this._id = `rtgcmdrxlxg${CommandGroup_1._counter++}`;
+        }
+        return this._id;
+    }
+    render() {
+        const className = 'overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground';
+        return html `${this._hidden === 'true'
+            ? nothing
+            : html `
+          <div
+            class="${className}"
+            rtgcmd-group
+            role="presentation"
+            id="${this.identifier}"
+          >
+            <div
+              rtgcmd-group-heading
+              aria-hidden="true"
+              id="${this.identifier}h"
+            >
+              ${this.heading}
+            </div>
+            <div
+              rtgcmd-group-items
+              role="group"
+              aria-labelledby="${this.identifier}h"
+            >
+              <slot></slot>
+            </div>
+          </div>
+        `}`;
+    }
+};
+CommandGroup._counter = 0;
+CommandGroup.styles = [css ``, TWStyles];
+__decorate([
+    property({ type: String })
+], CommandGroup.prototype, "heading", void 0);
+__decorate([
+    property({ attribute: 'id', type: String })
+], CommandGroup.prototype, "_id", void 0);
+__decorate([
+    property({ attribute: 'aria-hidden', type: String })
+], CommandGroup.prototype, "_hidden", void 0);
+CommandGroup = CommandGroup_1 = __decorate([
+    customElement('rtg-command-group')
+], CommandGroup);
+export { CommandGroup };
+//# sourceMappingURL=command-group.atom.js.map

package/dist/src/components/atoms/command-group/command-group.atom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-group.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/command-group/command-group.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,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,YAAY,oBAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACuB,YAAO,GAAG,EAAE,CAAC;QAEI,QAAG,GAAG,EAAE,CAAC;QAEA,YAAO,GAAG,EAAE,CAAC;IAiDrE,CAAC;IA3CC,IAAY,UAAU;;QACpB,IAAI,IAAI,CAAC,GAAG,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,GAAG,CAAC;QAClB,CAAC;QACD,MAAM,MAAM,GACV,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,0CAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACpE,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,cAAY,CAAC,QAAQ,EAAE,EAAE,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,GAAG,GAAG,cAAc,cAAY,CAAC,QAAQ,EAAE,EAAE,CAAC;QACrD,CAAC;QACD,OAAO,IAAI,CAAC,GAAG,CAAC;IAClB,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GACb,kOAAkO,CAAC;QACrO,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM;YACnC,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;qBAES,SAAS;;;kBAGZ,IAAI,CAAC,UAAU;;;;;oBAKb,IAAI,CAAC,UAAU;;gBAEnB,IAAI,CAAC,OAAO;;;;;iCAKK,IAAI,CAAC,UAAU;;;;;SAKvC,EAAE,CAAC;IACV,CAAC;;AA9Cc,qBAAQ,GAAG,CAAC,AAAJ,CAAK;AAErB,mBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AARN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AAEI;IAA5C,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAU;AAEA;IAArD,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAc;AALxD,YAAY;IADxB,aAAa,CAAC,mBAAmB,CAAC;GACtB,YAAY,CAsDxB","sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-command-group')\nexport class CommandGroup extends LitElement {\n  @property({ type: String }) heading = '';\n\n  @property({ attribute: 'id', type: String }) _id = '';\n\n  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';\n\n  private static _counter = 0;\n\n  static styles = [css``, TWStyles];\n\n  private get identifier() {\n    if (this._id !== '') {\n      return this._id;\n    }\n    const parent =\n      this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-list]');\n    if (parent) {\n      this._id = `${parent.getAttribute('id')}g${CommandGroup._counter++}`;\n    } else {\n      this._id = `rtgcmdrxlxg${CommandGroup._counter++}`;\n    }\n    return this._id;\n  }\n\n  render() {\n    const className =\n      'overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground';\n    return html`${this._hidden === 'true'\n      ? nothing\n      : html`\n          <div\n            class=\"${className}\"\n            rtgcmd-group\n            role=\"presentation\"\n            id=\"${this.identifier}\"\n          >\n            <div\n              rtgcmd-group-heading\n              aria-hidden=\"true\"\n              id=\"${this.identifier}h\"\n            >\n              ${this.heading}\n            </div>\n            <div\n              rtgcmd-group-items\n              role=\"group\"\n              aria-labelledby=\"${this.identifier}h\"\n            >\n              <slot></slot>\n            </div>\n          </div>\n        `}`;\n  }\n}\n"]}

package/dist/src/components/atoms/command-item/command-item.atom.js

@@ -0,0 +1,80 @@
+var CommandItem_1;
+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';
+let CommandItem = CommandItem_1 = class CommandItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = '';
+        this._hidden = '';
+        this.selected = false;
+    }
+    get identifier() {
+        var _a, _b;
+        if (this._id !== '') {
+            return this._id;
+        }
+        const parent = (_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div[rtgcmd-group]');
+        if (parent) {
+            this._id = `${parent.getAttribute('id')}li${CommandItem_1._counter++}`;
+        }
+        else {
+            this._id = `rtgcmdrxgxli${CommandItem_1._counter++}`;
+        }
+        return this._id;
+    }
+    get value() {
+        var _a;
+        return ((_a = this.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+    }
+    handleMouseEvent(e) {
+        if (e.type === 'mouseover' || e.type === 'focus') {
+            this.selected = true;
+        }
+        if (e.type === 'mouseleave') {
+            this.selected = false;
+        }
+    }
+    render() {
+        return html ` ${this._hidden === 'true'
+            ? nothing
+            : html `
+          <div
+            class="${cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', this.className)}"
+            @mouseover="${this.handleMouseEvent}"
+            @mouseleave="${this.handleMouseEvent}"
+            @focus="${this.handleMouseEvent}"
+            rtgcmd-item
+            role="option"
+            aria-selected="${this.selected}"
+            data-selected="${this.selected}"
+            data-value="${this.value}"
+            id="${this.identifier}"
+            aria-hidden="${this.hidden}"
+          >
+            <slot></slot>
+          </div>
+        `}`;
+    }
+};
+CommandItem._counter = 0;
+CommandItem.styles = [css ``, TWStyles];
+__decorate([
+    property({ type: String })
+], CommandItem.prototype, "_id", void 0);
+__decorate([
+    property({ attribute: 'aria-hidden', type: String })
+], CommandItem.prototype, "_hidden", void 0);
+__decorate([
+    property({ attribute: 'data-value', type: String })
+], CommandItem.prototype, "value", null);
+__decorate([
+    property({ type: Boolean })
+], CommandItem.prototype, "selected", void 0);
+CommandItem = CommandItem_1 = __decorate([
+    customElement('rtg-command-item')
+], CommandItem);
+export { CommandItem };
+//# sourceMappingURL=command-item.atom.js.map

package/dist/src/components/atoms/command-item/command-item.atom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-item.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/command-item/command-item.atom.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EACL,QAAQ,EACR,aAAa,GAEd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,WAAW,mBAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QACuB,QAAG,GAAG,EAAE,CAAC;QAEiB,YAAO,GAAG,EAAE,CAAC;QAyBtC,aAAQ,GAAG,KAAK,CAAC;IAmChD,CAAC;IAtDC,IAAY,UAAU;;QACpB,IAAI,IAAI,CAAC,GAAG,KAAK,EAAE,EAAE,CAAC;YACpB,OAAO,IAAI,CAAC,GAAG,CAAC;QAClB,CAAC;QACD,MAAM,MAAM,GACV,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,0CAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;QACrE,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,GAAG,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,aAAW,CAAC,QAAQ,EAAE,EAAE,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,GAAG,GAAG,eAAe,aAAW,CAAC,QAAQ,EAAE,EAAE,CAAC;QACrD,CAAC;QACD,OAAO,IAAI,CAAC,GAAG,CAAC;IAClB,CAAC;IAGD,IAAW,KAAK;;QACd,OAAO,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,EAAE,KAAI,EAAE,CAAC;IACxC,CAAC;IAIO,gBAAgB,CAAC,CAAQ;QAC/B,IAAI,CAAC,CAAC,IAAI,KAAK,WAAW,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACjD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,CAAC;QACD,IAAI,CAAC,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;YAC5B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM;YACpC,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;qBAES,EAAE,CACT,+NAA+N,EAC/N,IAAI,CAAC,SAAS,CACf;0BACa,IAAI,CAAC,gBAAgB;2BACpB,IAAI,CAAC,gBAAgB;sBAC1B,IAAI,CAAC,gBAAgB;;;6BAGd,IAAI,CAAC,QAAQ;6BACb,IAAI,CAAC,QAAQ;0BAChB,IAAI,CAAC,KAAK;kBAClB,IAAI,CAAC,UAAU;2BACN,IAAI,CAAC,MAAM;;;;SAI7B,EAAE,CAAC;IACV,CAAC;;AAzDc,oBAAQ,GAAG,CAAC,AAAJ,CAAK;AAErB,kBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AANN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAU;AAEiB;IAArD,QAAQ,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AAqBnE;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAGnD;AAE4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AA5BnC,WAAW;IADvB,aAAa,CAAC,kBAAkB,CAAC;GACrB,WAAW,CA+DvB","sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport {\n  property,\n  customElement,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-command-item')\nexport class CommandItem extends LitElement {\n  @property({ type: String }) _id = '';\n\n  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';\n\n  private static _counter = 0;\n\n  static styles = [css``, TWStyles];\n\n  private get identifier() {\n    if (this._id !== '') {\n      return this._id;\n    }\n    const parent =\n      this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-group]');\n    if (parent) {\n      this._id = `${parent.getAttribute('id')}li${CommandItem._counter++}`;\n    } else {\n      this._id = `rtgcmdrxgxli${CommandItem._counter++}`;\n    }\n    return this._id;\n  }\n\n  @property({ attribute: 'data-value', type: String })\n  public get value() {\n    return this.textContent?.trim() || '';\n  }\n\n  @property({ type: Boolean }) selected = false;\n\n  private handleMouseEvent(e: Event) {\n    if (e.type === 'mouseover' || e.type === 'focus') {\n      this.selected = true;\n    }\n    if (e.type === 'mouseleave') {\n      this.selected = false;\n    }\n  }\n\n  render() {\n    return html` ${this._hidden === 'true'\n      ? nothing\n      : html`\n          <div\n            class=\"${cn(\n              'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n              this.className\n            )}\"\n            @mouseover=\"${this.handleMouseEvent}\"\n            @mouseleave=\"${this.handleMouseEvent}\"\n            @focus=\"${this.handleMouseEvent}\"\n            rtgcmd-item\n            role=\"option\"\n            aria-selected=\"${this.selected}\"\n            data-selected=\"${this.selected}\"\n            data-value=\"${this.value}\"\n            id=\"${this.identifier}\"\n            aria-hidden=\"${this.hidden}\"\n          >\n            <slot></slot>\n          </div>\n        `}`;\n  }\n}\n"]}

package/dist/src/components/atoms/command-list/command-list.atom.js

@@ -0,0 +1,36 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { cn } from '../../../helpers';
+import { TWStyles } from '../../../styles';
+let CommandList = class CommandList extends LitElement {
+    get identifier() {
+        var _a, _b;
+        const parent = (_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div[rtgcmd-root]');
+        if (parent) {
+            return `${parent.getAttribute('id')}l`;
+        }
+        return `rtgcmdrxl`;
+    }
+    render() {
+        return html `
+      <div
+        class="${cn('max-h-[300px] overflow-y-auto overflow-x-hidden', this.className)}"
+        role="listbox"
+        id="${this.identifier}"
+        style="--rtgcmd-list-height: 265.0px;"
+        rtgcmd-list
+      >
+        <div>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+CommandList.styles = [css ``, TWStyles];
+CommandList = __decorate([
+    customElement('rtg-command-list')
+], CommandList);
+export { CommandList };
+//# sourceMappingURL=command-list.atom.js.map

package/dist/src/components/atoms/command-list/command-list.atom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-list.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/command-list/command-list.atom.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGpC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAGzC,IAAY,UAAU;;QACpB,MAAM,MAAM,GACV,MAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,UAAU,0CAAE,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACpE,IAAI,MAAM,EAAE,CAAC;YACX,OAAO,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;QACzC,CAAC;QACD,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,EAAE,CACT,iDAAiD,EACjD,IAAI,CAAC,SAAS,CACf;;cAEK,IAAI,CAAC,UAAU;;;;;;;;KAQxB,CAAC;IACJ,CAAC;;AA5BM,kBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,WAAW;IADvB,aAAa,CAAC,kBAAkB,CAAC;GACrB,WAAW,CA8BvB","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-command-list')\nexport class CommandList extends LitElement {\n  static styles = [css``, TWStyles];\n\n  private get identifier() {\n    const parent =\n      this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-root]');\n    if (parent) {\n      return `${parent.getAttribute('id')}l`;\n    }\n    return `rtgcmdrxl`;\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"${cn(\n          'max-h-[300px] overflow-y-auto overflow-x-hidden',\n          this.className\n        )}\"\n        role=\"listbox\"\n        id=\"${this.identifier}\"\n        style=\"--rtgcmd-list-height: 265.0px;\"\n        rtgcmd-list\n      >\n        <div>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/command-separator/command-separator.atom.js

@@ -0,0 +1,52 @@
+var CommandSeparator_1;
+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';
+let CommandSeparator = CommandSeparator_1 = class CommandSeparator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = '';
+        this._hidden = '';
+    }
+    get identifier() {
+        var _a, _b;
+        if (this._id !== '') {
+            return this._id;
+        }
+        const parent = (_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('div[rtgcmd-list]');
+        if (parent) {
+            this._id = `${parent.getAttribute('id')}s${CommandSeparator_1._counter++}`;
+        }
+        else {
+            this._id = `rtgcmdrxlxs${CommandSeparator_1._counter++}`;
+        }
+        return this._id;
+    }
+    render() {
+        return html `${this._hidden === 'true'
+            ? nothing
+            : html `
+          <div
+            class="${cn('-mx-1 h-px bg-border', this.className)}"
+            rtgcmd-separator
+            role="separator"
+            id="${this.identifier}"
+          ></div>
+        `}`;
+    }
+};
+CommandSeparator._counter = 0;
+CommandSeparator.styles = [css ``, TWStyles];
+__decorate([
+    property({ type: String })
+], CommandSeparator.prototype, "_id", void 0);
+__decorate([
+    property({ attribute: 'aria-hidden', type: String })
+], CommandSeparator.prototype, "_hidden", void 0);
+CommandSeparator = CommandSeparator_1 = __decorate([
+    customElement('rtg-command-separator')
+], CommandSeparator);
+export { CommandSeparator };
+//# sourceMappingURL=command-separator.atom.js.map