revotech-ui-kit 0.0.7-beta → 0.0.11

package/dist/src/components/command/command.js

@@ -0,0 +1,402 @@
+var CommandGroup_1, CommandSeparator_1, CommandEmpty_1, CommandItem_1;
+import { __decorate } from "tslib";
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement, queryAssignedElements, } from 'lit/decorators.js';
+import { cn } from '../../helpers';
+import { TWStyles } from '../../styles';
+let Command = class Command extends LitElement {
+    render() {
+        return html `
+      <div
+        class="${cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground border shadow-md', this.className)}"
+        id="rtgcmdr1"
+        rtgcmd-root
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+Command.styles = [css ``, TWStyles];
+__decorate([
+    queryAssignedElements({ selector: 'input[rtgcmd-input]' })
+], Command.prototype, "_input", void 0);
+Command = __decorate([
+    customElement('rtg-command')
+], Command);
+export { Command };
+let CommandList = class CommandList extends LitElement {
+    get identifier() {
+        const parent = this.parentElement?.shadowRoot?.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 };
+let CommandGroup = CommandGroup_1 = class CommandGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.heading = '';
+        this._id = '';
+        this._hidden = '';
+    }
+    get identifier() {
+        if (this._id !== '') {
+            return this._id;
+        }
+        const parent = this.parentElement?.shadowRoot?.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() {
+        // eslint-disable-next-line lit/attribute-value-entities
+        const c = '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="${c}"
+            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 };
+let CommandSeparator = CommandSeparator_1 = class CommandSeparator extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = '';
+        this._hidden = '';
+    }
+    get identifier() {
+        if (this._id !== '') {
+            return this._id;
+        }
+        const parent = this.parentElement?.shadowRoot?.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 };
+let CommandEmpty = CommandEmpty_1 = class CommandEmpty extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = '';
+        this._hidden = 'true';
+    }
+    get identifier() {
+        if (this._id !== '') {
+            return this._id;
+        }
+        const parent = this.parentElement?.shadowRoot?.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 };
+let CommandItem = CommandItem_1 = class CommandItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._id = '';
+        this._hidden = '';
+        this.selected = false;
+    }
+    get identifier() {
+        if (this._id !== '') {
+            return this._id;
+        }
+        const parent = this.parentElement?.shadowRoot?.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() {
+        return this.textContent?.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 };
+let CommandInput = class CommandInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.placeholder = 'Type a command or search...';
+        this._value = '';
+    }
+    get identifier() {
+        const parent = this.parentElement?.shadowRoot?.querySelector('div[rtgcmd-root]');
+        if (parent) {
+            return `${parent.getAttribute('id')}i`;
+        }
+        return `rtgcmdrxi`;
+    }
+    filterItems() {
+        const parent = this.parentElement;
+        if (parent) {
+            let isEmpty = true;
+            const groups = parent.querySelectorAll('rtg-command-list > rtg-command-group');
+            if (groups) {
+                groups.forEach(group => {
+                    let hidden = true;
+                    const items = group.querySelectorAll('rtg-command-item');
+                    if (items) {
+                        items.forEach(item => {
+                            const value = item?.value || '';
+                            if (value.toLowerCase().includes(this._value.toLowerCase())) {
+                                hidden = false;
+                                isEmpty = false;
+                                item.setAttribute('aria-hidden', 'false');
+                            }
+                            else {
+                                item.setAttribute('aria-hidden', 'true');
+                            }
+                        });
+                    }
+                    group.setAttribute('aria-hidden', hidden ? 'true' : 'false');
+                    let separator = group.previousElementSibling;
+                    if (separator) {
+                        separator.setAttribute('aria-hidden', hidden ||
+                            separator.previousElementSibling?.getAttribute('aria-hidden') === 'true'
+                            ? 'true'
+                            : 'false');
+                    }
+                    separator = group.nextElementSibling;
+                    if (separator) {
+                        separator.setAttribute('aria-hidden', hidden ||
+                            separator.nextElementSibling?.getAttribute('aria-hidden') ===
+                                'true'
+                            ? 'true'
+                            : 'false');
+                    }
+                });
+            }
+            const empty = parent.querySelector('rtg-command-empty');
+            if (empty) {
+                empty.setAttribute('aria-hidden', isEmpty ? 'false' : 'true');
+            }
+        }
+    }
+    handleChange(e) {
+        const input = e.target;
+        if (input) {
+            this._value = input.value;
+            this.filterItems();
+        }
+    }
+    render() {
+        return html `
+      <div
+        class="${cn('flex items-center border-b px-3', this.className)}"
+        name="rtgcmd-input-container"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="mr-2 h-4 w-4 shrink-0 opacity-50"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.3-4.3"></path>
+        </svg>
+        <input
+          class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+          placeholder="${this.placeholder}"
+          rtgcmd-input
+          @input="${this.handleChange}"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+          aria-autocomplete="list"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls=":r1oe:"
+          aria-labelledby=":r1of:"
+          id="${this.identifier}"
+          type="text"
+          data-value="${this._value}"
+        />
+      </div>
+    `;
+    }
+};
+CommandInput.styles = [css ``, TWStyles];
+__decorate([
+    property({ type: String })
+], CommandInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'value', type: String })
+], CommandInput.prototype, "_value", void 0);
+CommandInput = __decorate([
+    customElement('rtg-command-input')
+], CommandInput);
+export { CommandInput };
+//# sourceMappingURL=command.js.map

package/dist/src/components/command/command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.js","sourceRoot":"","sources":["../../../../src/components/command/command.ts"],"names":[],"mappings":"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","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')\nexport class Command extends LitElement {\n  static styles = [css``, TWStyles];\n\n  @queryAssignedElements({ selector: 'input[rtgcmd-input]' })\n  _input!: Array<HTMLElement>;\n\n  render() {\n    return html`\n      <div\n        class=\"${cn(\n          'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground border shadow-md',\n          this.className\n        )}\"\n        id=\"rtgcmdr1\"\n        rtgcmd-root\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\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\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    // eslint-disable-next-line lit/attribute-value-entities\n    const c =\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=\"${c}\"\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\n@customElement('rtg-command-separator')\nexport class CommandSeparator 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-list]');\n    if (parent) {\n      this._id = `${parent.getAttribute('id')}s${CommandSeparator._counter++}`;\n    } else {\n      this._id = `rtgcmdrxlxs${CommandSeparator._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('-mx-1 h-px bg-border', this.className)}\"\n            rtgcmd-separator\n            role=\"separator\"\n            id=\"${this.identifier}\"\n          ></div>\n        `}`;\n  }\n}\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\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\n@customElement('rtg-command-input')\nexport class CommandInput extends LitElement {\n  @property({ type: String }) placeholder = 'Type a command or search...';\n\n  @property({ attribute: 'value', type: String }) _value = '';\n\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')}i`;\n    }\n    return `rtgcmdrxi`;\n  }\n\n  private filterItems() {\n    const parent = this.parentElement;\n    if (parent) {\n      let isEmpty = true;\n      const groups = parent.querySelectorAll(\n        'rtg-command-list > rtg-command-group'\n      );\n      if (groups) {\n        groups.forEach(group => {\n          let hidden = true;\n          const items = group.querySelectorAll('rtg-command-item');\n          if (items) {\n            items.forEach(item => {\n              const value = (item as CommandItem)?.value || '';\n              if (value.toLowerCase().includes(this._value.toLowerCase())) {\n                hidden = false;\n                isEmpty = false;\n                item.setAttribute('aria-hidden', 'false');\n              } else {\n                item.setAttribute('aria-hidden', 'true');\n              }\n            });\n          }\n          group.setAttribute('aria-hidden', hidden ? 'true' : 'false');\n          let separator = group.previousElementSibling as CommandSeparator;\n          if (separator) {\n            separator.setAttribute(\n              'aria-hidden',\n              hidden ||\n                separator.previousElementSibling?.getAttribute(\n                  'aria-hidden'\n                ) === 'true'\n                ? 'true'\n                : 'false'\n            );\n          }\n          separator = group.nextElementSibling as CommandSeparator;\n          if (separator) {\n            separator.setAttribute(\n              'aria-hidden',\n              hidden ||\n                separator.nextElementSibling?.getAttribute('aria-hidden') ===\n                  'true'\n                ? 'true'\n                : 'false'\n            );\n          }\n        });\n      }\n\n      const empty = parent.querySelector('rtg-command-empty');\n      if (empty) {\n        empty.setAttribute('aria-hidden', isEmpty ? 'false' : 'true');\n      }\n    }\n  }\n\n  private handleChange(e: Event) {\n    const input = e.target as HTMLInputElement;\n    if (input) {\n      this._value = input.value;\n      this.filterItems();\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"${cn('flex items-center border-b px-3', this.className)}\"\n        name=\"rtgcmd-input-container\"\n      >\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=\"mr-2 h-4 w-4 shrink-0 opacity-50\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n          <path d=\"m21 21-4.3-4.3\"></path>\n        </svg>\n        <input\n          class=\"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\"\n          placeholder=\"${this.placeholder}\"\n          rtgcmd-input\n          @input=\"${this.handleChange}\"\n          autocomplete=\"off\"\n          autocorrect=\"off\"\n          spellcheck=\"false\"\n          aria-autocomplete=\"list\"\n          role=\"combobox\"\n          aria-expanded=\"true\"\n          aria-controls=\":r1oe:\"\n          aria-labelledby=\":r1of:\"\n          id=\"${this.identifier}\"\n          type=\"text\"\n          data-value=\"${this._value}\"\n        />\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/components/command/command.stories.d.ts

@@ -0,0 +1,5 @@
+import './command';
+import { Meta } from '@storybook/web-components';
+declare const _default: Meta;
+export default _default;
+export declare const Default: () => import("lit-html").TemplateResult<1>;

package/dist/src/components/command/command.stories.js

@@ -0,0 +1,153 @@
+import { html } from 'lit';
+// eslint-disable-next-line import/extensions
+import './command';
+export default {
+    title: 'Components/command',
+    component: 'rtg-command',
+    tags: ['autodocs'],
+};
+export const Default = () => html `
+  <rtg-command class="w-full max-w-md">
+    <rtg-command-input placeholder="Search ...."></rtg-command-input>
+    <rtg-command-list>
+      <rtg-command-empty>No items found!</rtg-command-empty>
+      <rtg-command-group heading="Suggestions">
+        <rtg-command-item>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="mr-2 h-4 w-4"
+          >
+            <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
+            <line x1="16" x2="16" y1="2" y2="6"></line>
+            <line x1="8" x2="8" y1="2" y2="6"></line>
+            <line x1="3" x2="21" y1="10" y2="10"></line>
+          </svg>
+          <span>Calendar</span>
+        </rtg-command-item>
+        <rtg-command-item>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="mr-2 h-4 w-4"
+          >
+            <circle cx="12" cy="12" r="10"></circle>
+            <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
+            <line x1="9" x2="9.01" y1="9" y2="9"></line>
+            <line x1="15" x2="15.01" y1="9" y2="9"></line>
+          </svg>
+          <span>Search Emoji</span>
+        </rtg-command-item>
+        <rtg-command-item>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="mr-2 h-4 w-4"
+          >
+            <rect width="16" height="20" x="4" y="2" rx="2"></rect>
+            <line x1="8" x2="16" y1="6" y2="6"></line>
+            <line x1="16" x2="16" y1="14" y2="18"></line>
+            <path d="M16 10h.01"></path>
+            <path d="M12 10h.01"></path>
+            <path d="M8 10h.01"></path>
+            <path d="M12 14h.01"></path>
+            <path d="M8 14h.01"></path>
+            <path d="M12 18h.01"></path>
+            <path d="M8 18h.01"></path>
+          </svg>
+          <span>Calculator</span>
+        </rtg-command-item>
+      </rtg-command-group>
+      <rtg-command-separator></rtg-command-separator>
+      <rtg-command-group heading="Settings">
+        <rtg-command-item onclick="javascript:alert('Profile Clicked!')">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="mr-2 h-4 w-4"
+          >
+            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
+            <circle cx="12" cy="7" r="4"></circle>
+          </svg>
+          <span>Profile</span>
+          <span class="ml-auto text-xs tracking-widest text-muted-foreground"
+            >⌘P</span
+          >
+        </rtg-command-item>
+        <rtg-command-item>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="mr-2 h-4 w-4"
+          >
+            <rect width="20" height="14" x="2" y="5" rx="2"></rect>
+            <line x1="2" x2="22" y1="10" y2="10"></line>
+          </svg>
+          <span>Billing</span
+          ><span class="ml-auto text-xs tracking-widest text-muted-foreground"
+            >⌘B</span
+          >
+        </rtg-command-item>
+        <rtg-command-item>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="mr-2 h-4 w-4"
+          >
+            <path
+              d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+            ></path>
+            <circle cx="12" cy="12" r="3"></circle>
+          </svg>
+          <span>Settings</span>
+          <span class="ml-auto text-xs tracking-widest text-muted-foreground">
+            ⌘S</span
+          >
+        </rtg-command-item>
+      </rtg-command-group></rtg-command-list
+    >
+  </rtg-command>
+`;
+//# sourceMappingURL=command.stories.js.map

package/dist/src/components/command/command.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command.stories.js","sourceRoot":"","sources":["../../../../src/components/command/command.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,6CAA6C;AAC7C,OAAO,WAAW,CAAC;AAGnB,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;CACX,CAAC;AACV,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+IhC,CAAC","sourcesContent":["import { html } from 'lit';\n// eslint-disable-next-line import/extensions\nimport './command';\nimport { Meta } from '@storybook/web-components';\n\nexport default {\n  title: 'Components/command',\n  component: 'rtg-command',\n  tags: ['autodocs'],\n} as Meta;\nexport const Default = () => html`\n  <rtg-command class=\"w-full max-w-md\">\n    <rtg-command-input placeholder=\"Search ....\"></rtg-command-input>\n    <rtg-command-list>\n      <rtg-command-empty>No items found!</rtg-command-empty>\n      <rtg-command-group heading=\"Suggestions\">\n        <rtg-command-item>\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=\"mr-2 h-4 w-4\"\n          >\n            <rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\"></rect>\n            <line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\"></line>\n            <line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\"></line>\n            <line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\"></line>\n          </svg>\n          <span>Calendar</span>\n        </rtg-command-item>\n        <rtg-command-item>\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=\"mr-2 h-4 w-4\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <path d=\"M8 14s1.5 2 4 2 4-2 4-2\"></path>\n            <line x1=\"9\" x2=\"9.01\" y1=\"9\" y2=\"9\"></line>\n            <line x1=\"15\" x2=\"15.01\" y1=\"9\" y2=\"9\"></line>\n          </svg>\n          <span>Search Emoji</span>\n        </rtg-command-item>\n        <rtg-command-item>\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=\"mr-2 h-4 w-4\"\n          >\n            <rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"></rect>\n            <line x1=\"8\" x2=\"16\" y1=\"6\" y2=\"6\"></line>\n            <line x1=\"16\" x2=\"16\" y1=\"14\" y2=\"18\"></line>\n            <path d=\"M16 10h.01\"></path>\n            <path d=\"M12 10h.01\"></path>\n            <path d=\"M8 10h.01\"></path>\n            <path d=\"M12 14h.01\"></path>\n            <path d=\"M8 14h.01\"></path>\n            <path d=\"M12 18h.01\"></path>\n            <path d=\"M8 18h.01\"></path>\n          </svg>\n          <span>Calculator</span>\n        </rtg-command-item>\n      </rtg-command-group>\n      <rtg-command-separator></rtg-command-separator>\n      <rtg-command-group heading=\"Settings\">\n        <rtg-command-item onclick=\"javascript:alert('Profile Clicked!')\">\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=\"mr-2 h-4 w-4\"\n          >\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n          </svg>\n          <span>Profile</span>\n          <span class=\"ml-auto text-xs tracking-widest text-muted-foreground\"\n            >⌘P</span\n          >\n        </rtg-command-item>\n        <rtg-command-item>\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=\"mr-2 h-4 w-4\"\n          >\n            <rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"></rect>\n            <line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\"></line>\n          </svg>\n          <span>Billing</span\n          ><span class=\"ml-auto text-xs tracking-widest text-muted-foreground\"\n            >⌘B</span\n          >\n        </rtg-command-item>\n        <rtg-command-item>\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=\"mr-2 h-4 w-4\"\n          >\n            <path\n              d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"\n            ></path>\n            <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n          </svg>\n          <span>Settings</span>\n          <span class=\"ml-auto text-xs tracking-widest text-muted-foreground\">\n            ⌘S</span\n          >\n        </rtg-command-item>\n      </rtg-command-group></rtg-command-list\n    >\n  </rtg-command>\n`;\n"]}

package/dist/src/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './atoms';
+export * from './molecules';

package/dist/src/components/index.js

@@ -0,0 +1,3 @@
+export * from './atoms';
+export * from './molecules';
+//# sourceMappingURL=index.js.map

package/dist/src/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC","sourcesContent":["export * from './atoms';\nexport * from './molecules';\n"]}

package/dist/src/components/molecules/command/command.molecules.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+export declare class Command extends LitElement {
+    static styles: import("lit").CSSResult[];
+    _input: Array<HTMLElement>;
+    render(): import("lit-html").TemplateResult<1>;
+}