revotech-ui-kit 0.0.0 → 0.0.1-beta-01

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

@@ -1,62 +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-checkbox')
-export class Checkbox extends LitElement {
-  @property({ type: Boolean }) disabled = false;
-
-  @property({ type: Boolean }) checked = false;
-
-  static styles = [css``, TWStyles];
-
-  private _onClick(e: Event) {
-    if (e.defaultPrevented) return;
-    this.checked = !this.checked;
-  }
-
-  public click() {
-    this.checked = !this.checked;
-  }
-
-  //
-  render() {
-    return html`
-      <button
-        type="button"
-        role="checkbox"
-        aria-checked="${this.checked}"
-        data-state="${this.checked ? 'checked' : 'unchecked'}"
-        value="on"
-        ?disabled=${this.disabled}
-        @click="${this._onClick}"
-        class="${cn(
-          'peer h-4 w-4 align-middle shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-          this.className
-        )}"
-      >
-        ${this.checked
-          ? html`<span
-              data-state="checked"
-              class="flex items-center justify-center text-current"
-              style="pointer-events: none;"
-              ><svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="3"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="h-4 w-4"
-              >
-                <polyline points="20 6 9 17 4 12"></polyline></svg
-            ></span>`
-          : nothing}
-      </button>
-    `;
-  }
-}

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

@@ -1,42 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/web-components';
-import { html } from 'lit';
-import './checkbox.atom';
-
-export default {
-  title: 'Components/Checkbox',
-  component: 'rtg-checkbox',
-  tags: ['autodocs'],
-  argTypes: {
-    disabled: { control: 'boolean' },
-    checked: { control: 'boolean' },
-  },
-} as Meta;
-
-const Template: StoryFn = (args: any) =>
-  html` <rtg-checkbox
-      id="terms"
-      ?disabled=${args.disabled}
-      ?checked=${args.checked}
-    ></rtg-checkbox>
-    <rtg-label for="terms">${args.label}</rtg-label>`;
-
-export const Default = Template.bind({});
-Default.args = {
-  disabled: false,
-  checked: false,
-  label: 'Accept terms and conditions',
-};
-
-export const Checked = Template.bind({});
-Checked.args = {
-  disabled: false,
-  checked: true,
-  label: 'Checked',
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  checked: false,
-  label: 'Disabled',
-};

package/src/components/atoms/command-empty/command-empty.atom.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-command-empty')
-export class CommandEmpty extends LitElement {
-  @property({ type: String }) _id = '';
-
-  @property({ attribute: 'aria-hidden', type: String }) _hidden = 'true';
-
-  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')}e${CommandEmpty._counter++}`;
-    } else {
-      this._id = `rtgcmdrxlxe${CommandEmpty._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>
-        `}`;
-  }
-}

package/src/components/atoms/command-group/command-group.atom.ts

@@ -1,60 +0,0 @@
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { TWStyles } from '@/styles';
-
-@customElement('rtg-command-group')
-export class CommandGroup extends LitElement {
-  @property({ type: String }) heading = '';
-
-  @property({ attribute: 'id', 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')}g${CommandGroup._counter++}`;
-    } else {
-      this._id = `rtgcmdrxlxg${CommandGroup._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>
-        `}`;
-  }
-}

package/src/components/atoms/command-item/command-item.atom.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-command-item')
-export class CommandItem 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${CommandItem._counter++}`;
-    } else {
-      this._id = `rtgcmdrxgxli${CommandItem._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/command-list/command-list.atom.ts

@@ -1,37 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { cn } from '@/helpers';
-import { TWStyles } from '@/styles';
-
-@customElement('rtg-command-list')
-export class CommandList extends LitElement {
-  static styles = [css``, TWStyles];
-
-  private 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>
-    `;
-  }
-}

package/src/components/atoms/command-separator/command-separator.atom.ts

@@ -1,42 +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-command-separator')
-export class CommandSeparator 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${CommandSeparator._counter++}`;
-    } else {
-      this._id = `rtgcmdrxlxs${CommandSeparator._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/dialog/dialog.atom.ts

@@ -1,301 +0,0 @@
-/* eslint-disable no-use-before-define */
-import {
-  LitElement,
-  html,
-  css,
-  PropertyValueMap,
-  nothing,
-  PropertyValues,
-} from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { cn } from '@/helpers';
-import { TWStyles } from '@/styles';
-
-const STATE_OPEN = 'open';
-const STATE_CLOSED = 'closed';
-
-@customElement('rtg-dialog')
-export class Dialog extends LitElement {
-  static styles = [css``, TWStyles];
-
-  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
-
-  private get _content(): DialogContent | 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 DialogContent) {
-          return children[index] as DialogContent;
-        }
-      }
-    }
-
-    return null;
-  }
-
-  protected updated(_changedProperties: PropertyValues): void {
-    super.updated(_changedProperties);
-    const content = this._content;
-    if (content) {
-      content.dataset.state = this.state;
-    }
-  }
-
-  render() {
-    return html`
-      <div rtgdlg-root>
-        ${this.state === STATE_OPEN
-          ? html` <rtg-dialog-overlay></rtg-dialog-overlay>`
-          : nothing}
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-@customElement('rtg-dialog-content')
-export class DialogContent extends LitElement {
-  static styles = [css``, TWStyles];
-
-  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;
-
-  private get _dialog(): Dialog | null {
-    let parent = this.parentElement;
-
-    while (parent) {
-      if (parent instanceof Dialog) {
-        return parent;
-      }
-      parent = parent.parentElement;
-    }
-    return parent;
-  }
-
-  private handleCloseButtonClick = () => {
-    const dialog = this._dialog;
-    if (dialog) {
-      dialog.dataset.state = STATE_CLOSED;
-    }
-  };
-
-  render() {
-    return html`${this.state === STATE_OPEN
-      ? html`
-          <div
-            class="${cn(
-              'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-              this.className
-            )}"
-            rtgdlg-content
-          >
-            <slot></slot>
-            <button
-              type="button"
-              @click="${this.handleCloseButtonClick}"
-              class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
-            >
-              <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="h-4 w-4"
-              >
-                <path d="M18 6 6 18"></path>
-                <path d="m6 6 12 12"></path></svg
-              ><span class="sr-only">Close</span>
-            </button>
-          </div>
-        `
-      : nothing}`;
-  }
-}
-
-@customElement('rtg-dialog-overlay')
-export class DialogOverlay extends LitElement {
-  static styles = [css``, TWStyles];
-
-  render() {
-    return html`
-      <div
-        class="${cn(
-          'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-          this.className
-        )}"
-      ></div>
-    `;
-  }
-}
-
-@customElement('rtg-dialog-header')
-export class DialogHeader extends LitElement {
-  static styles = [css``, TWStyles];
-
-  @property({ attribute: 'title', type: String }) _title = '';
-
-  @property({ type: String }) description = '';
-
-  render() {
-    return html`
-      <div
-        class="${cn(
-          'flex flex-col space-y-1.5 text-center sm:text-left',
-          this.className
-        )}"
-      >
-        <h2
-          class="${cn(
-            'text-lg font-semibold leading-none tracking-tight',
-            this.className
-          )}"
-        >
-          ${this._title}
-        </h2>
-        <p class="${cn('text-sm text-muted-foreground', this.className)}">
-          ${this.description}
-        </p>
-      </div>
-    `;
-  }
-}
-
-@customElement('rtg-dialog-footer')
-export class DialogFooter extends LitElement {
-  static styles = [css``, TWStyles];
-
-  render() {
-    return html`
-      <div
-        class="${cn(
-          'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-          this.className
-        )}"
-      >
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-// @customElement('rtg-dialog-title')
-// export class DialogTitle extends LitElement {
-//   static styles = [css``, TWStyles];
-
-//   render() {
-//     return html`
-//       <h2
-//         class="${cn(
-//           'text-lg font-semibold leading-none tracking-tight',
-//           this.className
-//         )}"
-//       >
-//         <slot></slot>
-//       </h2>
-//     `;
-//   }
-// }
-
-// @customElement('rtg-dialog-description')
-// export class DialogDescription extends LitElement {
-//   static styles = [css``, TWStyles];
-
-//   render() {
-//     return html`
-//       <p class="${cn('text-sm text-muted-foreground', this.className)}">
-//         <slot></slot>
-//       </p>
-//     `;
-//   }
-// }
-
-@customElement('rtg-dialog-trigger')
-export class DialogTrigger extends LitElement {
-  static styles = [css``, TWStyles];
-
-  private get _dialog(): Dialog | null {
-    let parent = this.parentElement;
-
-    while (parent) {
-      if (parent instanceof Dialog) {
-        return parent;
-      }
-      parent = parent.parentElement;
-    }
-    return parent;
-  }
-
-  protected firstUpdated(
-    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
-  ): void {
-    super.firstUpdated(_changedProperties);
-    const slot = this.shadowRoot?.querySelector('slot');
-    const children = slot?.assignedElements();
-    if (children && children.length > 0) {
-      const button = children[0];
-
-      button.addEventListener('click', () => {
-        const dialog = this._dialog;
-        if (dialog) {
-          dialog.dataset.state = STATE_OPEN;
-        }
-      });
-    }
-  }
-
-  render() {
-    return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-@customElement('rtg-dialog-close')
-export class DialogClose extends LitElement {
-  static styles = [css``, TWStyles];
-
-  private get _dialog(): Dialog | null {
-    let parent = this.parentElement;
-
-    while (parent) {
-      if (parent instanceof Dialog) {
-        return parent;
-      }
-      parent = parent.parentElement;
-    }
-    return parent;
-  }
-
-  protected firstUpdated(
-    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
-  ): void {
-    super.firstUpdated(_changedProperties);
-    const slot = this.shadowRoot?.querySelector('slot');
-    const children = slot?.assignedElements();
-    if (children && children.length > 0) {
-      const button = children[0];
-
-      button.addEventListener('click', () => {
-        const dialog = this._dialog;
-        if (dialog) {
-          dialog.dataset.state = STATE_CLOSED;
-        }
-      });
-    }
-  }
-
-  render() {
-    return html`
-      <div>
-        <slot></slot>
-      </div>
-    `;
-  }
-}

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

@@ -1,34 +0,0 @@
-/* eslint-disable lit/no-value-attribute */
-import { LitElement, html, css } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '@/helpers';
-import { TWStyles } from '@/styles';
-import { InputType } from './input.type';
-
-@customElement('rtg-input')
-export class Input extends LitElement {
-  @property({ type: Boolean }) disabled = false;
-
-  @property({ type: String }) type: InputType = 'text';
-
-  @property({ type: String }) placeholder = '';
-
-  @property({ type: String }) defaultValue = '';
-
-  static styles = [css``, TWStyles];
-
-  render() {
-    return html`
-      <input
-        type="${this.type}"
-        placeholder="${this.placeholder}"
-        ?disabled=${this.disabled}
-        class="${cn(
-          'flex h-8 w-full rounded-sm border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-          this.className
-        )}"
-        value="${this.defaultValue}"
-      />
-    `;
-  }
-}