revotech-ui-kit 0.0.10 → 0.0.14

package/dist/src/components/atoms/dialog/dialog-overly.js

@@ -1,20 +0,0 @@
-import { __decorate } from "tslib";
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-let DialogOverlay = class DialogOverlay extends LitElement {
-    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>
-    `;
-    }
-};
-DialogOverlay.styles = [css ``, TWStyles];
-DialogOverlay = __decorate([
-    customElement('rtg-dialog-overlay')
-], DialogOverlay);
-export { DialogOverlay };
-//# sourceMappingURL=dialog-overly.js.map

package/dist/src/components/atoms/dialog/dialog-overly.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-overly.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog-overly.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAGrD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAG3C,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,EAAE,CACT,yJAAyJ,EACzJ,IAAI,CAAC,SAAS,CACf;;KAEJ,CAAC;IACJ,CAAC;;AAXM,oBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,aAAa;IADzB,aAAa,CAAC,oBAAoB,CAAC;GACvB,aAAa,CAazB","sourcesContent":["import { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\nimport { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('rtg-dialog-overlay')\nexport class DialogOverlay extends LitElement {\n  static styles = [css``, TWStyles];\n\n  render() {\n    return html`\n      <div\n        class=\"${cn(\n          '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',\n          this.className\n        )}\"\n      ></div>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/dialog/dialog-trigger.d.ts

@@ -1,8 +0,0 @@
-import { LitElement, PropertyValueMap } from 'lit';
-export declare class DialogTrigger extends LitElement {
-    static styles: import("lit").CSSResult[];
-    private get _dialog();
-    handleClick: () => void;
-    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/components/atoms/dialog/dialog-trigger.js

@@ -1,53 +0,0 @@
-import { __decorate } from "tslib";
-import { TWStyles } from '../../../styles';
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { Dialog } from './dialog.atom';
-const STATE_OPEN = 'open';
-const STATE_CLOSED = 'closed';
-let DialogTrigger = class DialogTrigger extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.handleClick = () => {
-            const dialog = this._dialog;
-            if (dialog) {
-                dialog.dataset.state = STATE_OPEN;
-            }
-        };
-    }
-    get _dialog() {
-        let parent = this.parentElement;
-        while (parent) {
-            if (parent instanceof Dialog) {
-                return parent;
-            }
-            parent = parent.parentElement;
-        }
-        return parent;
-    }
-    firstUpdated(_changedProperties) {
-        super.firstUpdated(_changedProperties);
-        const slots = this.shadowRoot?.querySelector('slot');
-        const assignedElements = slots?.assignedElements({ flatten: true });
-        if (assignedElements && assignedElements.length > 0) {
-            //@ts-ignore
-            assignedElements[0].click = this.handleClick;
-        }
-        this.shadowRoot?.addEventListener('click', e => {
-            e.stopPropagation();
-        });
-    }
-    render() {
-        return html `
-      <div>
-        <slot></slot>
-      </div>
-    `;
-    }
-};
-DialogTrigger.styles = [css ``, TWStyles];
-DialogTrigger = __decorate([
-    customElement('rtg-dialog-trigger')
-], DialogTrigger);
-export { DialogTrigger };
-//# sourceMappingURL=dialog-trigger.js.map

package/dist/src/components/atoms/dialog/dialog-trigger.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog-trigger.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog-trigger.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAoB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,UAAU,GAAG,MAAM,CAAC;AAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC;AAGvB,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAeL,gBAAW,GAAG,GAAG,EAAE;YACjB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;YAC5B,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,OAAO,CAAC,KAAK,GAAG,UAAU,CAAC;YACpC,CAAC;QACH,CAAC,CAAC;IAwBJ,CAAC;IAzCC,IAAY,OAAO;QACjB,IAAI,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;QAEhC,OAAO,MAAM,EAAE,CAAC;YACd,IAAI,MAAM,YAAY,MAAM,EAAE,CAAC;gBAC7B,OAAO,MAAM,CAAC;YAChB,CAAC;YACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;IAQS,YAAY,CACpB,kBAAqE;QAErE,KAAK,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAoB,CAAC;QACxE,MAAM,gBAAgB,GAAG,KAAK,EAAE,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACpE,IAAI,gBAAgB,IAAI,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,YAAY;YACZ,gBAAgB,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;QAC/C,CAAC;QAED,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAC7C,CAAC,CAAC,eAAe,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;;AA1CM,oBAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AADvB,aAAa;IADzB,aAAa,CAAC,oBAAoB,CAAC;GACvB,aAAa,CA4CzB","sourcesContent":["import { TWStyles } from '../../../styles';\nimport { css, html, LitElement, PropertyValueMap } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { Dialog } from './dialog.atom';\n\nconst STATE_OPEN = 'open';\nconst STATE_CLOSED = 'closed';\n\n@customElement('rtg-dialog-trigger')\nexport class DialogTrigger extends LitElement {\n  static styles = [css``, TWStyles];\n\n  private get _dialog(): Dialog | null {\n    let parent = this.parentElement;\n\n    while (parent) {\n      if (parent instanceof Dialog) {\n        return parent;\n      }\n      parent = parent.parentElement;\n    }\n    return parent;\n  }\n\n  handleClick = () => {\n    const dialog = this._dialog;\n    if (dialog) {\n      dialog.dataset.state = STATE_OPEN;\n    }\n  };\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>\n  ): void {\n    super.firstUpdated(_changedProperties);\n    const slots = this.shadowRoot?.querySelector('slot') as HTMLSlotElement;\n    const assignedElements = slots?.assignedElements({ flatten: true });\n    if (assignedElements && assignedElements.length > 0) {\n      //@ts-ignore\n      assignedElements[0].click = this.handleClick;\n    }\n\n    this.shadowRoot?.addEventListener('click', e => {\n      e.stopPropagation();\n    });\n  }\n\n  render() {\n    return html`\n      <div>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/dialog/dialog.atom.d.ts

@@ -1,8 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-export declare class Dialog extends LitElement {
-    static styles: import("lit").CSSResult[];
-    state: string;
-    private get _content();
-    protected updated(_changedProperties: PropertyValues): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/components/atoms/dialog/dialog.atom.js

@@ -1,78 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-import { DialogContent } from './dialog-content';
-const STATE_OPEN = 'open';
-const STATE_CLOSED = 'closed';
-let Dialog = class Dialog extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.state = STATE_CLOSED;
-    }
-    get _content() {
-        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];
-                }
-            }
-        }
-        return null;
-    }
-    updated(_changedProperties) {
-        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>
-    `;
-    }
-};
-Dialog.styles = [css ``, TWStyles];
-__decorate([
-    property({ attribute: 'data-state', type: String })
-], Dialog.prototype, "state", void 0);
-Dialog = __decorate([
-    customElement('rtg-dialog')
-], Dialog);
-export { Dialog };
-// @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>
-//     `;
-//   }
-// }
-//# sourceMappingURL=dialog.atom.js.map

package/dist/src/components/atoms/dialog/dialog.atom.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog.atom.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,MAAM,UAAU,GAAG,MAAM,CAAC;AAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC;AAGvB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAGgD,UAAK,GAAG,YAAY,CAAC;IAkC5E,CAAC;IAhCC,IAAY,QAAQ;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACpD,MAAM,QAAQ,GAAG,IAAI,EAAE,gBAAgB,EAAE,CAAC;QAC1C,IAAI,QAAQ,EAAE,CAAC;YACb,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;gBACrD,IAAI,QAAQ,CAAC,KAAK,CAAC,YAAY,aAAa,EAAE,CAAC;oBAC7C,OAAO,QAAQ,CAAC,KAAK,CAAkB,CAAC;gBAC1C,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAES,OAAO,CAAC,kBAAkC;QAClD,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAClC,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC9B,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACrC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,KAAK,UAAU;YACzB,CAAC,CAAC,IAAI,CAAA,4CAA4C;YAClD,CAAC,CAAC,OAAO;;;KAGd,CAAC;IACJ,CAAC;;AAnCM,aAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAEmB;IAApD,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAsB;AAH/D,MAAM;IADlB,aAAa,CAAC,YAAY,CAAC;GACf,MAAM,CAqClB;;AAED,qCAAqC;AACrC,gDAAgD;AAChD,uCAAuC;AAEvC,eAAe;AACf,mBAAmB;AACnB,YAAY;AACZ,uBAAuB;AACvB,iEAAiE;AACjE,2BAA2B;AAC3B,cAAc;AACd,UAAU;AACV,wBAAwB;AACxB,cAAc;AACd,SAAS;AACT,MAAM;AACN,IAAI;AAEJ,2CAA2C;AAC3C,sDAAsD;AACtD,uCAAuC;AAEvC,eAAe;AACf,mBAAmB;AACnB,2EAA2E;AAC3E,wBAAwB;AACxB,aAAa;AACb,SAAS;AACT,MAAM;AACN,IAAI","sourcesContent":["import { LitElement, html, css, nothing, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TWStyles } from '../../../styles';\nimport { DialogContent } from './dialog-content';\n\nconst STATE_OPEN = 'open';\nconst STATE_CLOSED = 'closed';\n\n@customElement('rtg-dialog')\nexport class Dialog extends LitElement {\n  static styles = [css``, TWStyles];\n\n  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;\n\n  private get _content(): DialogContent | null {\n    const slot = this.shadowRoot?.querySelector('slot');\n    const children = slot?.assignedElements();\n    if (children) {\n      for (let index = 0; index < children.length; index++) {\n        if (children[index] instanceof DialogContent) {\n          return children[index] as DialogContent;\n        }\n      }\n    }\n\n    return null;\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    super.updated(_changedProperties);\n    const content = this._content;\n    if (content) {\n      content.dataset.state = this.state;\n    }\n  }\n\n  render() {\n    return html`\n      <div rtgdlg-root>\n        ${this.state === STATE_OPEN\n          ? html` <rtg-dialog-overlay></rtg-dialog-overlay>`\n          : nothing}\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n// @customElement('rtg-dialog-title')\n// export class DialogTitle extends LitElement {\n//   static styles = [css``, TWStyles];\n\n//   render() {\n//     return html`\n//       <h2\n//         class=\"${cn(\n//           'text-lg font-semibold leading-none tracking-tight',\n//           this.className\n//         )}\"\n//       >\n//         <slot></slot>\n//       </h2>\n//     `;\n//   }\n// }\n\n// @customElement('rtg-dialog-description')\n// export class DialogDescription extends LitElement {\n//   static styles = [css``, TWStyles];\n\n//   render() {\n//     return html`\n//       <p class=\"${cn('text-sm text-muted-foreground', this.className)}\">\n//         <slot></slot>\n//       </p>\n//     `;\n//   }\n// }\n"]}

package/dist/src/components/atoms/dialog/dialog.stories.d.ts

@@ -1,16 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-import '../input/input.atom';
-import './dialog.atom';
-import './dialog-close';
-import './dialog-content';
-import './dialog-footer';
-import './dialog-header';
-import './dialog-overly';
-import './dialog-trigger';
-import '../input/input.atom';
-import '../button/button.atom';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const ConfirmationDialog: Story;
-export declare const ModalForm: Story;

package/dist/src/components/atoms/dialog/dialog.stories.js

@@ -1,88 +0,0 @@
-import { html } from 'lit';
-import '../input/input.atom';
-import './dialog.atom';
-import './dialog-close';
-import './dialog-content';
-import './dialog-footer';
-import './dialog-header';
-import './dialog-overly';
-import './dialog-trigger';
-import '../input/input.atom';
-import '../button/button.atom';
-const meta = {
-    component: 'components/dialog',
-};
-export default meta;
-export const ConfirmationDialog = {
-    render: () => html `<div class="flex flex-nowrap">
-        <div class="flex flex-wrap space-x-4 gap-5 mx-3">
-        <rtg-dialog>
-        <rtg-dialog-trigger>
-          <rtg-button>Open Dialog</rtg-button>
-        </rtg-dialog-trigger>
-        <rtg-dialog-content>
-          <rtg-dialog-header title="Are you absolutely sure?" description="This action cannot be undone. This will permanently delete your
-          content.">
-            <rtg-dialog-title>Are you absolutely sure?</rtg-dialog-title>
-            <rtg-dialog-description>
-              This action cannot be undone. This will permanently delete your
-              content.</rtg-dialog-description
-            >
-          </rtg-dialog-header>
-          <rtg-dialog-footer>
-            <div class="flex w-full justify-between space-x-1">
-              <rtg-dialog-close><rtg-button variant="secondary">Close</rtg-button></rtg-dialog-close>
-              <div class="justify-end">
-                <rtg-button variant="destructive">Delete</rtg-button>
-                <rtg-button>Cancel</rtg-button>
-              </div>
-          </div>
-        </rtg-dialog-content>
-      </rtg-dialog>
-      </div>
-  </div>`,
-};
-export const ModalForm = {
-    render: () => html `
-    <rtg-dialog>
-    <rtg-dialog-trigger>
-      <rtg-button variant="outline">Edit Profile</rtg-button>
-    </rtg-dialog-trigger>
-    <rtg-dialog-content class="sm:max-w-[425px]">
-      <rtg-dialog-header title="Edit Profile" description="Make changes to your profile here. Click save when you're done.">
-        <!-- <rtg-dialog-title>Edit Profile</rtg-dialog-title>
-        <rtg-dialog-description>
-          Make changes to your profile here. Click save when you're done.</rtg-dialog-description
-        > -->
-      </rtg-dialog-header>
-      <div class="grid gap-4 py-4">
-        <div class="grid grid-cols-4 items-center gap-4">
-          <rtg-label for="name" class="text-right">
-            Name
-          </rtg-label>
-          <rtg-input
-            id="name"
-            defaultValue="Pedro Duarte"
-            style="width:280px"
-          >
-          </rtg-input>
-        </div>
-        <div class="grid grid-cols-4 items-center gap-4">
-          <rtg-label for="username" class="text-right">
-            Username
-          </rtg-label>
-          <rtg-input
-            id="username"
-            defaultValue="@peduarte"
-            style="width:280px"
-          >
-          </rtg-input>
-        </div>
-      </div>
-      <rtg-dialog-footer>
-        <rtg-button>Save changes</rtg-button>
-    </rtg-dialog-content>
-  </rtg-dialog>
-    `,
-};
-//# sourceMappingURL=dialog.stories.js.map

package/dist/src/components/atoms/dialog/dialog.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialog.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dialog/dialog.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AACzB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,MAAM,IAAI,GAAS;IACjB,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BC;CACR,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwCf;CACJ,CAAC","sourcesContent":["import { html } from 'lit';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport '../input/input.atom';\nimport './dialog.atom';\nimport './dialog-close';\nimport './dialog-content';\nimport './dialog-footer';\nimport './dialog-header';\nimport './dialog-overly';\nimport './dialog-trigger';\nimport '../input/input.atom';\nimport '../button/button.atom';\nconst meta: Meta = {\n  component: 'components/dialog',\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const ConfirmationDialog: Story = {\n  render: () =>\n    html`<div class=\"flex flex-nowrap\">\n        <div class=\"flex flex-wrap space-x-4 gap-5 mx-3\">\n        <rtg-dialog>\n        <rtg-dialog-trigger>\n          <rtg-button>Open Dialog</rtg-button>\n        </rtg-dialog-trigger>\n        <rtg-dialog-content>\n          <rtg-dialog-header title=\"Are you absolutely sure?\" description=\"This action cannot be undone. This will permanently delete your\n          content.\">\n            <rtg-dialog-title>Are you absolutely sure?</rtg-dialog-title>\n            <rtg-dialog-description>\n              This action cannot be undone. This will permanently delete your\n              content.</rtg-dialog-description\n            >\n          </rtg-dialog-header>\n          <rtg-dialog-footer>\n            <div class=\"flex w-full justify-between space-x-1\">\n              <rtg-dialog-close><rtg-button variant=\"secondary\">Close</rtg-button></rtg-dialog-close>\n              <div class=\"justify-end\">\n                <rtg-button variant=\"destructive\">Delete</rtg-button>\n                <rtg-button>Cancel</rtg-button>\n              </div>\n          </div>\n        </rtg-dialog-content>\n      </rtg-dialog>\n      </div>\n  </div>`,\n};\n\nexport const ModalForm: Story = {\n  render: () => html`\n    <rtg-dialog>\n    <rtg-dialog-trigger>\n      <rtg-button variant=\"outline\">Edit Profile</rtg-button>\n    </rtg-dialog-trigger>\n    <rtg-dialog-content class=\"sm:max-w-[425px]\">\n      <rtg-dialog-header title=\"Edit Profile\" description=\"Make changes to your profile here. Click save when you're done.\">\n        <!-- <rtg-dialog-title>Edit Profile</rtg-dialog-title>\n        <rtg-dialog-description>\n          Make changes to your profile here. Click save when you're done.</rtg-dialog-description\n        > -->\n      </rtg-dialog-header>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <rtg-label for=\"name\" class=\"text-right\">\n            Name\n          </rtg-label>\n          <rtg-input\n            id=\"name\"\n            defaultValue=\"Pedro Duarte\"\n            style=\"width:280px\"\n          >\n          </rtg-input>\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <rtg-label for=\"username\" class=\"text-right\">\n            Username\n          </rtg-label>\n          <rtg-input\n            id=\"username\"\n            defaultValue=\"@peduarte\"\n            style=\"width:280px\"\n          >\n          </rtg-input>\n        </div>\n      </div>\n      <rtg-dialog-footer>\n        <rtg-button>Save changes</rtg-button>\n    </rtg-dialog-content>\n  </rtg-dialog>\n    `,\n};\n"]}

package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.d.ts

@@ -1,15 +0,0 @@
-import { LitElement } from 'lit';
-export declare class DropdownMenuCheckboxItem extends LitElement {
-    _id: string;
-    _hidden: string;
-    private static _counter;
-    static styles: import("lit").CSSResult[];
-    private get identifier();
-    get value(): string;
-    selected: boolean;
-    private handleMouseEvent;
-    checked: boolean;
-    disabled: boolean;
-    toggleChecked(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.js

@@ -1,115 +0,0 @@
-var DropdownMenuCheckboxItem_1;
-import { __decorate } from "tslib";
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { cn } from '../../../helpers';
-import { TWStyles } from '../../../styles';
-let DropdownMenuCheckboxItem = DropdownMenuCheckboxItem_1 = class DropdownMenuCheckboxItem extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._id = '';
-        this._hidden = '';
-        this.selected = false;
-        this.checked = false;
-        this.disabled = 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${DropdownMenuCheckboxItem_1._counter++}`;
-        }
-        else {
-            this._id = `rtgcmdrxgxli${DropdownMenuCheckboxItem_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;
-        }
-    }
-    toggleChecked() {
-        this.checked = !this.checked;
-    }
-    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"
-                  viewBox="0 0 24 24"
-                  width="16px"
-                  height="16px"
-                >
-                  <path
-                    d="M 19.28125 5.28125 L 9 15.5625 L 4.71875 11.28125 L 3.28125 12.71875 L 8.28125 17.71875 L 9 18.40625 L 9.71875 17.71875 L 20.71875 6.71875 Z"
-                  />
-                </svg>
-              `
-            : nothing}
-        </span>
-        <slot></slot>
-      </div>
-    `;
-    }
-};
-DropdownMenuCheckboxItem._counter = 0;
-DropdownMenuCheckboxItem.styles = [
-    css `
-      .icon-space {
-        width: 16px; /* Fixed width to reserve space for the check icon */
-        height: 16px;
-        display: inline-block;
-      }
-    `,
-    TWStyles,
-];
-__decorate([
-    property({ type: String })
-], DropdownMenuCheckboxItem.prototype, "_id", void 0);
-__decorate([
-    property({ attribute: 'aria-hidden', type: String })
-], DropdownMenuCheckboxItem.prototype, "_hidden", void 0);
-__decorate([
-    property({ attribute: 'data-value', type: String })
-], DropdownMenuCheckboxItem.prototype, "value", null);
-__decorate([
-    property({ type: Boolean })
-], DropdownMenuCheckboxItem.prototype, "selected", void 0);
-__decorate([
-    property({ type: Boolean })
-], DropdownMenuCheckboxItem.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean })
-], DropdownMenuCheckboxItem.prototype, "disabled", void 0);
-DropdownMenuCheckboxItem = DropdownMenuCheckboxItem_1 = __decorate([
-    customElement('rtg-dropdown-menu-checkbox-item')
-], DropdownMenuCheckboxItem);
-export { DropdownMenuCheckboxItem };
-//# sourceMappingURL=dropdown-menu-checkbox-Item.js.map

package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-menu-checkbox-Item.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\n\n@customElement('rtg-dropdown-menu-checkbox-item')\nexport class DropdownMenuCheckboxItem 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 = [\n    css`\n      .icon-space {\n        width: 16px; /* Fixed width to reserve space for the check icon */\n        height: 16px;\n        display: inline-block;\n      }\n    `,\n    TWStyles,\n  ];\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(\n        'id'\n      )}li${DropdownMenuCheckboxItem._counter++}`;\n    } else {\n      this._id = `rtgcmdrxgxli${DropdownMenuCheckboxItem._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  @property({ type: Boolean }) checked = false;\n  @property({ type: Boolean }) disabled = false;\n\n  toggleChecked() {\n    this.checked = !this.checked;\n  }\n\n  render() {\n    return 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',\n          this.disabled ? 'pointer-events-none opacity-50' : '',\n          this.className\n        )}\"\n        @click=${this.toggleChecked}\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        <span\n          class=\"icon-space absolute left-2 flex items-center justify-center\"\n        >\n          ${this.checked\n            ? html`\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  width=\"16px\"\n                  height=\"16px\"\n                >\n                  <path\n                    d=\"M 19.28125 5.28125 L 9 15.5625 L 4.71875 11.28125 L 3.28125 12.71875 L 8.28125 17.71875 L 9 18.40625 L 9.71875 17.71875 L 20.71875 6.71875 Z\"\n                  />\n                </svg>\n              `\n            : nothing}\n        </span>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.d.ts

@@ -1,13 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-import { DropdownMenu } from './dropdown-menu.atom';
-export declare class DropdownMenuContent extends LitElement {
-    static styles: import("lit").CSSResult[];
-    state: string;
-    isOpen: boolean;
-    get _dropdownMenu(): DropdownMenu | null;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changedProps: PropertyValues): void;
-    handleClickOutside(event: MouseEvent): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.js

@@ -1,80 +0,0 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-import { DropdownMenu } from './dropdown-menu.atom';
-import { STATE_CLOSED } from '../popover/popover.types';
-let DropdownMenuContent = class DropdownMenuContent extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.state = STATE_CLOSED;
-        this.isOpen = false;
-    }
-    get _dropdownMenu() {
-        let parent = this.parentElement;
-        // Traverse up the DOM tree to find the parent `Popover`
-        while (parent && !(parent instanceof DropdownMenu)) {
-            parent = parent.parentElement;
-        }
-        return parent;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.isOpen) {
-            document.addEventListener('mousedown', this.handleClickOutside);
-        }
-    }
-    disconnectedCallback() {
-        document.removeEventListener('mousedown', this.handleClickOutside);
-        super.disconnectedCallback();
-    }
-    updated(changedProps) {
-        super.updated(changedProps);
-        // Check if the state is 'open'
-        if (this.state === 'open') {
-            this.isOpen = true;
-        }
-        else {
-            this.isOpen = false;
-        }
-        if (changedProps.has('isOpen')) {
-            if (this.isOpen) {
-                document.addEventListener('mousedown', this.handleClickOutside);
-            }
-            else {
-                document.removeEventListener('mousedown', this.handleClickOutside);
-            }
-        }
-    }
-    handleClickOutside(event) {
-        const dropdownMenu = this.shadowRoot?.querySelector('rtg-dropdown-menu-content');
-        const dropdownButton = this.shadowRoot?.querySelector('button'); // Ensure this targets your open button
-        if (dropdownMenu &&
-            !dropdownMenu.contains(event.target) &&
-            !dropdownButton?.contains(event.target)) {
-            this.isOpen = false; // Only close if the click is outside both the menu and button
-        }
-    }
-    render() {
-        return html `
-      <div
-        class="max-h-[300px] overflow-y-auto overflow-x-hidden"
-        style="display: ${this.isOpen ? 'block' : 'none'}"
-      >
-        <slot></slot>
-      </div>
-    `;
-    }
-};
-DropdownMenuContent.styles = [css ``, TWStyles];
-__decorate([
-    property({ attribute: 'data-state', type: String })
-], DropdownMenuContent.prototype, "state", void 0);
-__decorate([
-    state()
-], DropdownMenuContent.prototype, "isOpen", void 0);
-DropdownMenuContent = __decorate([
-    customElement('rtg-dropdown-menu-content')
-], DropdownMenuContent);
-export { DropdownMenuContent };
-//# sourceMappingURL=dropdown-menu-content.js.map

package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dropdown-menu-content.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dropdownMenu/dropdown-menu-content.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, PropertyValues, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { cn } from '../../../helpers';\nimport { TWStyles } from '../../../styles';\nimport { DropdownMenu } from './dropdown-menu.atom';\nimport { dropdownMenuContentStyle } from './dropdownMenu.style';\nimport { STATE_CLOSED, STATE_OPEN } from '../popover/popover.types';\n\n@customElement('rtg-dropdown-menu-content')\nexport class DropdownMenuContent extends LitElement {\n  static styles = [css``, TWStyles];\n  @property({ attribute: 'data-state', type: String }) state = STATE_CLOSED;\n  @state() isOpen = false;\n\n  get _dropdownMenu(): DropdownMenu | null {\n    let parent = this.parentElement;\n    // Traverse up the DOM tree to find the parent `Popover`\n    while (parent && !(parent instanceof DropdownMenu)) {\n      parent = parent.parentElement;\n    }\n    return parent;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.isOpen) {\n      document.addEventListener('mousedown', this.handleClickOutside);\n    }\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('mousedown', this.handleClickOutside);\n    super.disconnectedCallback();\n  }\n\n  updated(changedProps: PropertyValues) {\n    super.updated(changedProps);\n    // Check if the state is 'open'\n    if (this.state === 'open') {\n      this.isOpen = true;\n    } else {\n      this.isOpen = false;\n    }\n\n    if (changedProps.has('isOpen')) {\n      if (this.isOpen) {\n        document.addEventListener('mousedown', this.handleClickOutside);\n      } else {\n        document.removeEventListener('mousedown', this.handleClickOutside);\n      }\n    }\n  }\n\n  handleClickOutside(event: MouseEvent) {\n    const dropdownMenu = this.shadowRoot?.querySelector(\n      'rtg-dropdown-menu-content'\n    );\n    const dropdownButton = this.shadowRoot?.querySelector('button'); // Ensure this targets your open button\n\n    if (\n      dropdownMenu &&\n      !dropdownMenu.contains(event.target as Node) &&\n      !dropdownButton?.contains(event.target as Node)\n    ) {\n      this.isOpen = false; // Only close if the click is outside both the menu and button\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"max-h-[300px] overflow-y-auto overflow-x-hidden\"\n        style=\"display: ${this.isOpen ? 'block' : 'none'}\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/src/components/atoms/dropdownMenu/dropdown-menu-group.d.ts

@@ -1,10 +0,0 @@
-import { LitElement } from 'lit';
-export declare class DropdownMenuGroup extends LitElement {
-    heading: string;
-    _id: string;
-    _hidden: string;
-    private static _counter;
-    static styles: import("lit").CSSResult[];
-    private get identifier();
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/components/atoms/dropdownMenu/dropdown-menu-group.js

@@ -1,70 +0,0 @@
-var DropdownMenuGroup_1;
-import { __decorate } from "tslib";
-import { LitElement, html, css, nothing } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
-import { TWStyles } from '../../../styles';
-let DropdownMenuGroup = DropdownMenuGroup_1 = class DropdownMenuGroup 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${DropdownMenuGroup_1._counter++}`;
-        }
-        else {
-            this._id = `rtgcmdrxlxg${DropdownMenuGroup_1._counter++}`;
-        }
-        return this._id;
-    }
-    render() {
-        const className = 'overflow-hidden p-1 text-foreground [&_[rtgcmd-group-heading]]:px-2 [&_[rtgcmd-group-heading]]:py-1.5 [&_[rtgcmd-group-heading]]:text-xs [&_[rtgcmd-group-heading]]:font-medium [&_[rtgcmd-group-heading]]:text-muted-foreground';
-        return html `${this._hidden === 'true'
-            ? nothing
-            : html `
-          <div
-            class="${className}"
-            rtgcmd-group
-            role="presentation"
-            id="${this.identifier}"
-          >
-            <div
-              rtgcmd-group-heading
-              aria-hidden="true"
-              id="${this.identifier}h"
-            >
-              ${this.heading}
-            </div>
-            <div
-              rtgcmd-group-items
-              role="group"
-              aria-labelledby="${this.identifier}h"
-            >
-              <slot></slot>
-            </div>
-          </div>
-        `}`;
-    }
-};
-DropdownMenuGroup._counter = 0;
-DropdownMenuGroup.styles = [css ``, TWStyles];
-__decorate([
-    property({ type: String })
-], DropdownMenuGroup.prototype, "heading", void 0);
-__decorate([
-    property({ attribute: 'id', type: String })
-], DropdownMenuGroup.prototype, "_id", void 0);
-__decorate([
-    property({ attribute: 'aria-hidden', type: String })
-], DropdownMenuGroup.prototype, "_hidden", void 0);
-DropdownMenuGroup = DropdownMenuGroup_1 = __decorate([
-    customElement('rtg-dropdown-menu-group')
-], DropdownMenuGroup);
-export { DropdownMenuGroup };
-//# sourceMappingURL=dropdown-menu-group.js.map