revotech-ui-kit 0.0.0

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

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { action } from '@storybook/addon-actions';
+import { html } from 'lit';
+import './button.atom';
+
+const meta: Meta = {
+  component: 'components/button',
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'default',
+        'destructive',
+        'outline',
+        'secondary',
+        'ghost',
+        'link',
+      ],
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['default', 'sm', 'lg', 'icon'],
+    },
+    disabled: { control: 'boolean' },
+    onClick: { action: 'button-click' },
+  },
+};
+export default meta;
+type Story = StoryObj;
+
+const logger = () => {
+  console.log('Btn Clicked!');
+};
+
+export const Default: Story = {
+  args: {
+    label: 'Default',
+    variant: 'default',
+    size: 'lg',
+    disabled: false,
+  },
+
+  render: ({ label, variant, size, disabled }) =>
+    html`<rtg-button
+      .onClick=${action('button-click')}
+      variant=${variant}
+      size=${size}
+      ?disabled=${disabled}
+    >
+      ${label}</rtg-button
+    >`,
+};
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary',
+    variant: 'default',
+    size: 'lg',
+    disabled: false,
+  },
+  render: ({ label, variant, size, disabled }) =>
+    html`<rtg-button
+      .onClick=${logger}
+      variant=${variant}
+      size=${size}
+      ?disabled=${disabled}
+      >${label}</rtg-button
+    > `,
+};
+
+export const Destructive: Story = {
+  args: {
+    label: 'Destructive',
+    variant: 'destructive',
+    size: 'lg',
+    disabled: false,
+  },
+  render: ({ label, variant, size, disabled }) =>
+    html`<rtg-button
+      .onClick=${logger}
+      variant=${variant}
+      size=${size}
+      ?disabled=${disabled}
+      >${label}</rtg-button
+    > `,
+};
+
+export const Outline: Story = {
+  args: {
+    label: 'Outline',
+    variant: 'outline',
+    size: 'lg',
+    disabled: false,
+  },
+  render: ({ label, variant, size, disabled }) =>
+    html`<rtg-button
+      .onClick=${logger}
+      variant=${variant}
+      size=${size}
+      ?disabled=${disabled}
+      >${label}</rtg-button
+    > `,
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+    label: 'Ghost',
+    size: 'lg',
+    disabled: false,
+  },
+  render: ({ label, variant, size, disabled }) =>
+    html`<rtg-button
+      .onClick=${logger}
+      variant=${variant}
+      size=${size}
+      ?disabled=${disabled}
+      >${label}</rtg-button
+    > `,
+};
+
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    label: 'Link',
+    size: 'lg',
+    disabled: false,
+  },
+  render: ({ label, variant, size, disabled }) =>
+    html`<rtg-button
+      .onClick=${logger}
+      variant=${variant}
+      size=${size}
+      ?disabled=${disabled}
+      >${label}</rtg-button
+    > `,
+};
+
+export const IconButton: Story = {
+  args: {
+    variant: 'outline',
+    size: 'icon',
+    disabled: false,
+  },
+  render: ({ variant, size }) =>
+    html`<rtg-button .onClick=${logger} variant=${variant} size=${size}>
+      <iconify-icon icon="mdi:home"></iconify-icon>
+    </rtg-button> `,
+};
+
+export const ButtonWithIcon: Story = {
+  args: {
+    label: 'Home Page',
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+  },
+  render: ({ variant, label, size, disabled }) =>
+    html`
+      <rtg-button varian=${variant} ?disabled=${disabled} size=${size}
+        ><iconify-icon class="mr-2" icon="mdi:home"></iconify-icon>
+        ${label}</rtg-button
+      >
+    `,
+};
+
+export const animationButton: Story = {
+  args: {
+    label: 'Home Page',
+    variant: 'default',
+    size: 'default',
+    disabled: true,
+  },
+  render: ({ variant, label, size, disabled }) =>
+    html`
+      <rtg-button varian=${variant} ?disabled=${disabled} size=${size}
+        ><iconify-icon class="mr-2 animate-spin" icon="mdi:home"></iconify-icon>
+        ${label}</rtg-button
+      >
+    `,
+};

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

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonStyle = cva(
+  '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',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-8 px-4 py-2',
+        sm: 'h-7 rounded-sm px-3 text-xs',
+        lg: 'h-9 rounded-sm px-8',
+        icon: 'h-8 w-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);

package/src/components/atoms/button/button.type.ts

@@ -0,0 +1,10 @@
+export type ButtonVariant =
+  | 'default'
+  | 'destructive'
+  | 'outline'
+  | 'secondary'
+  | 'ghost'
+  | 'link';
+export type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';
+
+export type ButtonType = 'button' | 'submit' | 'reset' | 'menu';

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

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

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

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

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

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

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

@@ -0,0 +1,42 @@
+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>
+        `}`;
+  }
+}