revotech-ui-kit 0.0.6-beta → 0.0.7-beta

package/src/components/atoms/dropdownMenu/dropdown-menu-item.ts

@@ -1,74 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-import {
-  property,
-  customElement,
-  queryAssignedElements,
-} from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-dropdown-menu-item')
-export class DropdownMenuItem extends LitElement {
-  @property({ type: String }) _id = '';
-
-  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';
-
-  private static _counter = 0;
-
-  static styles = [css``, TWStyles];
-
-  private 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${DropdownMenuItem._counter++}`;
-    } else {
-      this._id = `rtgcmdrxgxli${DropdownMenuItem._counter++}`;
-    }
-    return this._id;
-  }
-
-  @property({ attribute: 'data-value', type: String })
-  public get value() {
-    return this.textContent?.trim() || '';
-  }
-
-  @property({ type: Boolean }) selected = false;
-
-  private handleMouseEvent(e: Event) {
-    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>
-        `}`;
-  }
-}

package/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.ts

@@ -1,107 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-dropdown-menu-radio-item')
-export class DropdownMenuRadioItem extends LitElement {
-  @property({ type: String }) _id = '';
-
-  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';
-
-  private static _counter = 0;
-
-  static styles = [
-    css`
-      .icon-space {
-        width: 16px; /* Fixed width to reserve space for the check icon */
-        height: 16px;
-        display: inline-block;
-      }
-    `,
-    TWStyles,
-  ];
-
-  private 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${DropdownMenuRadioItem._counter++}`;
-    } else {
-      this._id = `rtgcmdrxgxli${DropdownMenuRadioItem._counter++}`;
-    }
-    return this._id;
-  }
-
-  @property({ attribute: 'data-value', type: String })
-  public get value() {
-    return this.textContent?.trim() || '';
-  }
-
-  @property({ type: Boolean }) selected = false;
-
-  private handleMouseEvent(e: Event) {
-    if (e.type === 'mouseover' || e.type === 'focus') {
-      this.selected = true;
-    }
-    if (e.type === 'mouseleave') {
-      this.selected = false;
-    }
-  }
-
-  @property({ type: Boolean }) checked = false; // Added `checked` state
-  @property({ type: Boolean }) disabled = false;
-
-  toggleChecked() {
-    this.checked = !this.checked; // Toggle the checked state
-  }
-
-  render() {
-    return 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',
-          this.disabled ? 'pointer-events-none opacity-50' : '',
-          this.className
-        )}"
-        @click=${this.toggleChecked}
-        @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}"
-      >
-        <span
-          class="icon-space absolute left-2 flex items-center justify-center"
-        >
-          ${this.checked
-            ? html`
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 15 15"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M9.875 7.5a2.375 2.375 0 1 1-4.75 0a2.375 2.375 0 0 1 4.75 0"
-                  />
-                </svg>
-              `
-            : nothing}
-        </span>
-        <slot></slot>
-      </div>
-    `;
-  }
-}

package/src/components/atoms/dropdownMenu/dropdown-menu-seperator.ts

@@ -1,44 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-dropdown-menu-separator')
-export class DropdownMenuSeparator extends LitElement {
-  @property({ type: String }) _id = '';
-
-  @property({ attribute: 'aria-hidden', type: String }) _hidden = '';
-
-  private static _counter = 0;
-
-  static styles = [css``, TWStyles];
-
-  private 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${DropdownMenuSeparator._counter++}`;
-    } else {
-      this._id = `rtgcmdrxlxs${DropdownMenuSeparator._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>
-        `}`;
-  }
-}

package/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.ts

@@ -1,17 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-
-@customElement('rtg-dropdown-menu-shortcut')
-export class DropdownMenuShortcut extends LitElement {
-  static styles = [css``, TWStyles];
-
-  render() {
-    return html`
-      <span class="${cn('ml-auto text-xs font-semibold', this.className)}">
-        <slot></slot>
-      </span>
-    `;
-  }
-}

package/src/components/atoms/dropdownMenu/dropdown-menu.atom.ts

@@ -1,84 +0,0 @@
-import { LitElement, html, css, nothing, PropertyValues } from 'lit';
-import {
-  property,
-  customElement,
-  state,
-  queryAssignedElements,
-} from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-import './dropdown-menu-content';
-import { DropdownMenuContent } from './dropdown-menu-content';
-import './dropdown-menu-item';
-
-@customElement('rtg-dropdown-menu')
-export class DropdownMenu extends LitElement {
-  static styles = [css``, TWStyles];
-
-  @state() isOpen = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener('click', this.handleClickOutside);
-  }
-
-  disconnectedCallback() {
-    document.removeEventListener('click', this.handleClickOutside);
-    super.disconnectedCallback();
-  }
-
-  toggleDropdown(e: MouseEvent) {
-    e.stopPropagation(); // Prevent closing immediately on button click
-    this.isOpen = !this.isOpen;
-  }
-
-  handleClickOutside = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-    // Check if the clicked element is outside the dropdown
-    if (!this.shadowRoot?.contains(target)) {
-      this.isOpen = false; // Close the dropdown
-    }
-  };
-
-  private get _content(): DropdownMenuContent | null {
-    const slot = this.shadowRoot?.querySelector('slot');
-    const children = slot?.assignedElements();
-    if (children) {
-      for (let index = 0; index < children.length; index++) {
-        if (children[index] instanceof DropdownMenuContent) {
-          return children[index] as DropdownMenuContent;
-        }
-      }
-    }
-
-    return null;
-  }
-
-  protected updated(_changedProperties: PropertyValues): void {
-    super.updated(_changedProperties);
-    const content = this._content;
-    if (content) {
-      content.dataset.state = this.isOpen ? 'open' : 'close';
-    }
-  }
-
-  render() {
-    return html`
-      <div >
-      <div>
-       <button data-ignore-outside-click class="inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground  hover:bg-secondary/80 h-8 px-4 py-2" @click="${
-         this.toggleDropdown
-       }">
-          open
-        <buttom>
-       </div>
-        <div
-          class="flex h-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground border shadow-md"
-           style="display: ${this.isOpen ? 'block' : 'none'};width:260px"
-        >
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}

package/src/components/atoms/dropdownMenu/dropdownMenu.stories.ts

@@ -1,220 +0,0 @@
-import { html } from 'lit';
-// eslint-disable-next-line import/extensions
-import './dropdown-menu-content';
-import './dropdown-menu-group';
-import './dropdown-menu-item';
-import './dropdown-menu-seperator';
-import './dropdown-menu.atom';
-import '../button/button.atom';
-import './dropdown-menu-checkbox-Item';
-import './dropdown-menu-radio-item';
-import './dropdown-menu-shortcut';
-import { Meta, StoryObj, StoryFn } from '@storybook/web-components';
-
-export default {
-  component: 'components/atoms/dropdownMenu',
-  tags: ['autodocs'],
-} as Meta;
-
-//type Story = StoryObj;
-
-const TemplateDropdownMenu: StoryFn = () =>
-  html`
-    <rtg-dropdown-menu class="w-full max-w-md">
-      <rtg-dropdown-menu-content>
-        <rtg-dropdown-menu-shortcut style="margin-left:8px"
-          >My Account</rtg-dropdown-menu-shortcut
-        >
-        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
-        <rtg-dropdown-menu-group>
-          <rtg-dropdown-menu-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-dropdown-menu-item>
-          <rtg-dropdown-menu-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-dropdown-menu-item>
-          <rtg-dropdown-menu-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-dropdown-menu-item>
-        </rtg-dropdown-menu-group>
-
-        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
-        <rtg-dropdown-menu-group>
-          <rtg-dropdown-menu-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-dropdown-menu-item>
-          <rtg-dropdown-menu-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-dropdown-menu-item>
-          <rtg-dropdown-menu-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-dropdown-menu-item>
-        </rtg-dropdown-menu-group></rtg-dropdown-menu-content
-      >
-    </rtg-dropdown-menu>
-  `;
-export const DropdownMenu = TemplateDropdownMenu.bind({});
-
-const TemplateDropdownMenuCheckbox: StoryFn = () =>
-  html`
-    <rtg-dropdown-menu class="w-full max-w-md">
-      <rtg-dropdown-menu-content>
-        <rtg-dropdown-menu-shortcut style="margin-left:8px"
-          >My Account</rtg-dropdown-menu-shortcut
-        >
-        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
-        <rtg-dropdown-menu-group>
-          <rtg-dropdown-menu-checkbox-item>
-            <span style="margin-left:24px">Profile</span>
-          </rtg-dropdown-menu-checkbox-item>
-          <rtg-dropdown-menu-checkbox-item>
-            <span style="margin-left:24px">Billing</span>
-          </rtg-dropdown-menu-checkbox-item>
-          <rtg-dropdown-menu-checkbox-item>
-            <span style="margin-left:24px">Settings</span>
-          </rtg-dropdown-menu-checkbox-item>
-        </rtg-dropdown-menu-group>
-      </rtg-dropdown-menu-content>
-    </rtg-dropdown-menu>
-  `;
-
-export const DropdownMenuCheckbox = TemplateDropdownMenuCheckbox.bind({});
-
-const TemplateDropdownMenuRadio: StoryFn = () =>
-  html`
-    <rtg-dropdown-menu class="w-full max-w-md">
-      <rtg-dropdown-menu-content>
-        <rtg-dropdown-menu-shortcut style="margin-left:8px"
-          >My Account</rtg-dropdown-menu-shortcut
-        >
-        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
-        <rtg-dropdown-menu-group>
-          <rtg-dropdown-menu-radio-item>
-            <span style="margin-left:24px">Profile</span>
-          </rtg-dropdown-menu-radio-item>
-          <rtg-dropdown-menu-radio-item>
-            <span style="margin-left:24px">Billing</span>
-          </rtg-dropdown-menu-radio-item>
-          <rtg-dropdown-menu-radio-item>
-            <span style="margin-left:24px">Settings</span>
-          </rtg-dropdown-menu-radio-item>
-        </rtg-dropdown-menu-group>
-      </rtg-dropdown-menu-content>
-    </rtg-dropdown-menu>
-  `;
-export const DropdownMenuRadio = TemplateDropdownMenuRadio.bind({});

package/src/components/atoms/dropdownMenu/dropdownMenu.style.ts

@@ -1,7 +0,0 @@
-import { cva } from 'class-variance-authority';
-
-export const dropdownMenuRootStyle = cva('rtgcmd-root');
-
-export const dropdownMenuContentStyle = cva(
-  'max-h-[300px] overflow-y-auto overflow-x-hidden'
-);

package/src/components/atoms/index.ts

@@ -1,13 +0,0 @@
-export * from './button/button.atom';
-export * from './checkbox/checkbox.atom';
-export * from './dialog/dialog.atom';
-export * from './input/input.atom';
-export * from './label/label.atom';
-export * from './command-empty/command-empty.atom';
-export * from './command-group/command-group.atom';
-export * from './command-item/command-item.atom';
-export * from './command-list/command-list.atom';
-export * from './command-separator/command-separator.atom';
-export * from './card/card.atom';
-export * from './popover/popover.atom';
-export * from './alert/alert.atom';

package/src/components/atoms/input/input.atom.ts

@@ -1,88 +0,0 @@
-/* eslint-disable lit/no-value-attribute */
-import { LitElement, html, css, PropertyValues } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-import { InputType } from './input.type';
-import { inputStyles } from './input.styles';
-import { BaseElement } from '../../../helpers';
-import { spread } from '@open-wc/lit-helpers';
-
-@customElement('rtg-input')
-export class Input extends BaseElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    // Initialize value with defaultValue if provided
-    this.value = this.value || this.defaultValue;
-  }
-
-  @property({ type: Boolean }) disabled = false;
-
-  @property({ type: String }) type: InputType = 'text';
-
-  @property({ type: String }) placeholder = '';
-
-  @property({ type: String }) defaultValue = '';
-
-  // Make value a reactive property
-  @property({ type: String }) value = '';
-
-  static styles = [
-    css`
-      :root {
-        --input-border-radius: inherit;
-        --input-padding: inherit;
-      }
-      .input-base {
-        border-radius: var(--input-border-radius) !important;
-        padding-top: var(--input-padding) !important;
-        padding-bottom: var(--input-padding) !important;
-      }
-    `,
-    TWStyles,
-  ];
-
-  protected firstUpdated(_changedProperties: PropertyValues): void {
-    const variables = ['--input-border-radius', '--input-padding'];
-
-    this.applyCustomClass(variables, 'input', 'input-base');
-
-    // Reflect the initial value (if defaultValue was provided)
-    if (this.type !== 'file' && this.defaultValue) {
-      this.value = this.defaultValue;
-    }
-  }
-
-  handleInputChange(event: Event) {
-    const inputElement = event.target as HTMLInputElement;
-
-    if (inputElement.type === 'file') {
-      // Handle file input separately
-      this.value = inputElement.files ? inputElement.files[0].name : '';
-    } else {
-      this.value = inputElement.value;
-    }
-  }
-
-  protected getAttributesToExclude(): string[] {
-    return ['disabled', 'type', 'placeholder', 'value', 'data-testid'];
-  }
-
-  render() {
-    const attributes = this.getFilteredAttributes();
-    console.log('attributes', this.className);
-    return html`
-      <input
-        type="${this.type}"
-        placeholder="${this.placeholder}"
-        ?disabled=${this.disabled}
-        class="${cn(inputStyles, this.className)}"
-        .value=${this.type !== 'file' ? this.value : ''}
-        @change="${this.handleInputChange}"
-        ${spread(attributes)}
-      />
-    `;
-  }
-}