revotech-ui-kit 0.0.0 → 0.0.1

package/dist/src/assets/icons/arrows.icon.d.ts

@@ -0,0 +1 @@
+export declare function arrowsIcon(): import("lit-html").TemplateResult<2>;

package/dist/src/assets/icons/arrows.icon.js

@@ -0,0 +1,20 @@
+import { svg } from 'lit';
+export function arrowsIcon() {
+    return svg ` <svg
+  class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
+  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"
+>
+  <path d="m7 15 5 5 5-5"></path>
+  <path d="m7 9 5-5 5 5"></path>
+</svg>
+  `;
+}
+//# sourceMappingURL=arrows.icon.js.map

package/dist/src/assets/icons/arrows.icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrows.icon.js","sourceRoot":"","sources":["../../../../src/assets/icons/arrows.icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,UAAU,UAAU;IACxB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;GAeT,CAAC;AACJ,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport function arrowsIcon() {\n  return svg` <svg\n  class=\"shrink-0 size-3.5 text-gray-500 dark:text-neutral-500\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n>\n  <path d=\"m7 15 5 5 5-5\"></path>\n  <path d=\"m7 9 5-5 5 5\"></path>\n</svg>\n  `;\n}\n"]}

package/dist/src/assets/icons/index.d.ts

@@ -0,0 +1,3 @@
+export * from './arrows.icon';
+export * from './tick.icon';
+export * from './search.icon';

package/dist/src/assets/icons/index.js

@@ -0,0 +1,4 @@
+export * from './arrows.icon';
+export * from './tick.icon';
+export * from './search.icon';
+//# sourceMappingURL=index.js.map

package/dist/src/assets/icons/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/assets/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC","sourcesContent":["export * from './arrows.icon';\nexport * from './tick.icon';\nexport * from './search.icon';\n"]}

package/dist/src/assets/icons/search.icon.d.ts

@@ -0,0 +1 @@
+export declare function searchIcon(): import("lit-html").TemplateResult<2>;

package/dist/src/assets/icons/search.icon.js

@@ -0,0 +1,19 @@
+import { svg } from 'lit';
+export function searchIcon() {
+    return svg ` <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="lucide lucide-search h-4 w-4 shrink-0 opacity-50" > 
+  <circle cx="11" cy = "11" r = "8" > </circle>
+  <path d="m21 21-4.3-4.3"></path > 
+  </svg>
+  `;
+}
+//# sourceMappingURL=search.icon.js.map

package/dist/src/assets/icons/search.icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.icon.js","sourceRoot":"","sources":["../../../../src/assets/icons/search.icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,UAAU,UAAU;IACxB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;GAcT,CAAC;AACJ,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport function searchIcon() {\n  return svg` <svg \n    xmlns=\"http://www.w3.org/2000/svg\" \n    width = \"24\" \n    height = \"24\" \n    viewBox = \"0 0 24 24\" \n    fill = \"none\" \n    stroke = \"currentColor\" \n    stroke-width=\"2\" \n    stroke-linecap=\"round\" \n    stroke-linejoin=\"round\" \n    class=\"lucide lucide-search h-4 w-4 shrink-0 opacity-50\" > \n  <circle cx=\"11\" cy = \"11\" r = \"8\" > </circle>\n  <path d=\"m21 21-4.3-4.3\"></path > \n  </svg>\n  `;\n}\n"]}

package/dist/src/assets/icons/tick.icon.d.ts

@@ -0,0 +1 @@
+export declare function tickIcon(): import("lit-html").TemplateResult<2>;

package/dist/src/assets/icons/tick.icon.js

@@ -0,0 +1,20 @@
+import { svg } from 'lit';
+export function tickIcon() {
+    return svg `
+             <svg
+                class="shrink-0 size-3.5 text-blue-600 dark:text-blue-500"
+                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"
+              >
+                <path d="M20 6 9 17l-5-5"></path>
+              </svg>
+  `;
+}
+//# sourceMappingURL=tick.icon.js.map

package/dist/src/assets/icons/tick.icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tick.icon.js","sourceRoot":"","sources":["../../../../src/assets/icons/tick.icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,UAAU,QAAQ;IACtB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;GAeT,CAAC;AACJ,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport function tickIcon() {\n  return svg`\n             <svg\n                class=\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"24\"\n                height=\"24\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <path d=\"M20 6 9 17l-5-5\"></path>\n              </svg>\n  `;\n}\n"]}

package/dist/src/components/atoms/alert/alert-description.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+export declare class AlertDescription extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/components/atoms/alert/alert-description.js

@@ -0,0 +1,18 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let AlertDescription = class AlertDescription extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+AlertDescription.styles = css `
+    :host {
+      display: block;
+    }
+  `;
+AlertDescription = __decorate([
+    customElement('rtg-alert-description')
+], AlertDescription);
+export { AlertDescription };
+//# sourceMappingURL=alert-description.js.map

package/dist/src/components/atoms/alert/alert-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-description.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert-description.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAO9C,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AARM,uBAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIX;AALS,gBAAgB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,gBAAgB,CAU5B","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('rtg-alert-description')\nexport class AlertDescription extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n    }\n  `;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n"]}

package/dist/src/components/atoms/alert/alert-title.d.ts

@@ -0,0 +1,5 @@
+import { LitElement } from 'lit';
+export declare class AlertTitle extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/components/atoms/alert/alert-title.js

@@ -0,0 +1,20 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let AlertTitle = class AlertTitle extends LitElement {
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+AlertTitle.styles = css `
+    :host {
+      display: block;
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+  `;
+AlertTitle = __decorate([
+    customElement('rtg-alert-title')
+], AlertTitle);
+export { AlertTitle };
+//# sourceMappingURL=alert-title.js.map

package/dist/src/components/atoms/alert/alert-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-title.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert-title.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IASxC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAVM,iBAAM,GAAG,GAAG,CAAA;;;;;;GAMlB,AANY,CAMX;AAPS,UAAU;IADtB,aAAa,CAAC,iBAAiB,CAAC;GACpB,UAAU,CAYtB","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('rtg-alert-title')\nexport class AlertTitle extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      font-weight: bold;\n      margin-bottom: 0.5rem;\n    }\n  `;\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n"]}

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

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+import { AlertTitle } from './alert-title';
+import { AlertDescription } from './alert-description';
+declare class Alert extends LitElement {
+    static styles: import("lit").CSSResult[];
+    static alertVairants: (props?: ({
+        variant?: "error" | "success" | "warning" | "info" | null | undefined;
+        size?: "small" | "default" | "large" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    variant: 'success' | 'error' | 'warning' | 'info';
+    size: 'default' | 'large' | 'small';
+    private get alertClasses();
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { Alert, AlertDescription, AlertTitle };

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

@@ -0,0 +1,55 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { customElement } from 'lit/decorators.js';
+import { alertStyle } from './alert.styles';
+import { TWStyles } from '../../../styles';
+import { AlertTitle } from './alert-title';
+import { AlertDescription } from './alert-description';
+let Alert = class Alert extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'info';
+        this.size = 'default';
+    }
+    get alertClasses() {
+        return alertStyle({ variant: this.variant, size: this.size });
+    }
+    render() {
+        return html `
+      <div class="alert ${this.alertClasses}">
+        <slot name="title"></slot>
+        <slot name="description"></slot>
+      </div>
+    `;
+    }
+};
+Alert.styles = [
+    css `
+      :host {
+        display: block;
+        margin-bottom: 1rem;
+      }
+      .alert {
+        border: 1px solid transparent;
+        border-radius: 0.375rem;
+      }
+      .title {
+        font-weight: bold;
+        margin-bottom: 0.5rem;
+      }
+    `,
+    TWStyles,
+];
+Alert.alertVairants = alertStyle;
+__decorate([
+    property({ type: String })
+], Alert.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], Alert.prototype, "size", void 0);
+Alert = __decorate([
+    customElement('rtg-alert')
+], Alert);
+export { Alert, AlertDescription, AlertTitle };
+//# sourceMappingURL=alert.atom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert.atom.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAoB8B,YAAO,GAItB,MAAM,CAAC;QACQ,SAAI,GAAkC,SAAS,CAAC;IAc9E,CAAC;IAZC,IAAY,YAAY;QACtB,OAAO,UAAU,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,YAAY;;;;KAItC,CAAC;IACJ,CAAC;;AArCM,YAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;KAaF;IACD,QAAQ;CACT,AAhBY,CAgBX;AACK,mBAAa,GAAG,UAAU,AAAb,CAAc;AAEN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAIP;AACQ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAiD;AAzBxE,KAAK;IADV,aAAa,CAAC,WAAW,CAAC;GACrB,KAAK,CAuCV;AAED,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from 'lit/decorators.js';\nimport { alertStyle } from './alert.styles';\nimport { TWStyles } from '../../../styles';\nimport { AlertTitle } from './alert-title';\nimport { AlertDescription } from './alert-description';\n\n@customElement('rtg-alert')\nclass Alert extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        margin-bottom: 1rem;\n      }\n      .alert {\n        border: 1px solid transparent;\n        border-radius: 0.375rem;\n      }\n      .title {\n        font-weight: bold;\n        margin-bottom: 0.5rem;\n      }\n    `,\n    TWStyles,\n  ];\n  static alertVairants = alertStyle;\n\n  @property({ type: String }) variant:\n    | 'success'\n    | 'error'\n    | 'warning'\n    | 'info' = 'info';\n  @property({ type: String }) size: 'default' | 'large' | 'small' = 'default';\n\n  private get alertClasses() {\n    return alertStyle({ variant: this.variant, size: this.size });\n  }\n\n  render() {\n    return html`\n      <div class=\"alert ${this.alertClasses}\">\n        <slot name=\"title\"></slot>\n        <slot name=\"description\"></slot>\n      </div>\n    `;\n  }\n}\n\nexport { Alert, AlertDescription, AlertTitle };\n"]}

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import './alert.atom';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj;
+export declare const AlertStory: Story;

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

@@ -0,0 +1,62 @@
+import { html } from 'lit';
+import './alert.atom';
+import { Alert as AlertComponent } from './alert.atom';
+import { expect, within, waitFor } from '@storybook/test';
+const testAlertBehavior = async (args, canvasElement) => {
+    const canvas = within(canvasElement);
+    // 1. Test:Alert exits
+    const alert = await waitFor(() => canvas.getByTestId('alert-id'));
+    //2. Test: Alert should have correct variant
+    expect(alert).toHaveAttribute('variant', args.variant);
+    //3. Test: Alert should have correct size
+    expect(alert).toHaveAttribute('size', args.size);
+    if (alert.shadowRoot) {
+        const innerDiv = alert.shadowRoot.querySelector('div');
+        //4. Test: Alert should have correct class
+        const expectedClasses = AlertComponent.alertVairants({
+            variant: args.variant,
+            size: args.size,
+        });
+        expect(innerDiv).toHaveClass(`alert ${expectedClasses}`);
+    }
+};
+export default {
+    title: 'components/atoms/alert',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['success', 'error', 'warning', 'info'],
+        },
+        size: {
+            control: 'select',
+            options: ['default', 'large', 'small'],
+        },
+        title: {
+            control: 'text',
+        },
+        message: {
+            control: 'text',
+        },
+    },
+};
+export const AlertStory = {
+    args: {
+        variant: 'info',
+        size: 'default',
+        title: 'Information',
+        message: 'This is an information message.',
+    },
+    render: ({ variant, size, message, title }) => html `
+    <rtg-alert data-testid="alert-id" variant=${variant} size=${size}>
+      <rtg-alert-title slot="title">${title}</rtg-alert-title>
+      <rtg-alert-description slot="description"
+        >${message}</rtg-alert-description
+      >
+    </rtg-alert>
+  `,
+    play: async ({ args, canvasElement }) => {
+        await testAlertBehavior(args, canvasElement);
+    },
+};
+//# sourceMappingURL=alert.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,iBAAiB,GAAG,KAAK,EAAE,IAAS,EAAE,aAAkB,EAAE,EAAE;IAChE,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IACrC,sBAAsB;IACtB,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;IAElE,4CAA4C;IAC5C,MAAM,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAEvD,yCAAyC;IACzC,MAAM,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;QACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACvD,0CAA0C;QAC1C,MAAM,eAAe,GAAG,cAAc,CAAC,aAAa,CAAC;YACnD,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;QACH,MAAM,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,SAAS,eAAe,EAAE,CAAC,CAAC;IAC3D,CAAC;AACH,CAAC,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC;SACjD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;SACvC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;SAChB;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;SAChB;KACF;CACM,CAAC;AAIV,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,iCAAiC;KAC3C;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;gDACL,OAAO,SAAS,IAAI;sCAC9B,KAAK;;WAEhC,OAAO;;;GAGf;IACD,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE;QACtC,MAAM,iBAAiB,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;IAC/C,CAAC;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport './alert.atom';\nimport { Alert as AlertComponent } from './alert.atom';\n\nimport { expect, within, waitFor } from '@storybook/test';\n\nconst testAlertBehavior = async (args: any, canvasElement: any) => {\n  const canvas = within(canvasElement);\n  // 1. Test:Alert exits\n  const alert = await waitFor(() => canvas.getByTestId('alert-id'));\n\n  //2. Test: Alert should have correct variant\n  expect(alert).toHaveAttribute('variant', args.variant);\n\n  //3. Test: Alert should have correct size\n  expect(alert).toHaveAttribute('size', args.size);\n  if (alert.shadowRoot) {\n    const innerDiv = alert.shadowRoot.querySelector('div');\n    //4. Test: Alert should have correct class\n    const expectedClasses = AlertComponent.alertVairants({\n      variant: args.variant,\n      size: args.size,\n    });\n    expect(innerDiv).toHaveClass(`alert ${expectedClasses}`);\n  }\n};\n\nexport default {\n  title: 'components/atoms/alert',\n  tags: ['autodocs'],\n\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['success', 'error', 'warning', 'info'],\n    },\n    size: {\n      control: 'select',\n      options: ['default', 'large', 'small'],\n    },\n    title: {\n      control: 'text',\n    },\n    message: {\n      control: 'text',\n    },\n  },\n} as Meta;\n\ntype Story = StoryObj;\n\nexport const AlertStory: Story = {\n  args: {\n    variant: 'info',\n    size: 'default',\n    title: 'Information',\n    message: 'This is an information message.',\n  },\n  render: ({ variant, size, message, title }) => html`\n    <rtg-alert data-testid=\"alert-id\" variant=${variant} size=${size}>\n      <rtg-alert-title slot=\"title\">${title}</rtg-alert-title>\n      <rtg-alert-description slot=\"description\"\n        >${message}</rtg-alert-description\n      >\n    </rtg-alert>\n  `,\n  play: async ({ args, canvasElement }) => {\n    await testAlertBehavior(args, canvasElement);\n  },\n};\n"]}

package/dist/src/components/atoms/alert/alert.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const alertStyle: (props?: ({
+    variant?: "error" | "success" | "warning" | "info" | null | undefined;
+    size?: "small" | "default" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/src/components/atoms/alert/alert.styles.js

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+export const alertStyle = cva('p-4 rounded-sm text-sm font-medium', {
+    variants: {
+        variant: {
+            success: 'bg-green-100 text-green-800 border-green-200',
+            error: 'bg-red-100 text-red-800 border-red-200',
+            warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',
+            info: 'bg-blue-100 text-blue-800 border-blue-200',
+        },
+        size: {
+            small: 'text-sm',
+            default: 'text-base',
+            large: 'text-xl',
+        },
+    },
+    defaultVariants: {
+        variant: 'info',
+        size: 'default',
+    },
+});
+//# sourceMappingURL=alert.styles.js.map

package/dist/src/components/atoms/alert/alert.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.styles.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,oCAAoC,EAAE;IAClE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,8CAA8C;YACvD,KAAK,EAAE,wCAAwC;YAC/C,OAAO,EAAE,iDAAiD;YAC1D,IAAI,EAAE,2CAA2C;SAClD;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,WAAW;YACpB,KAAK,EAAE,SAAS;SACjB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,SAAS;KAChB;CACF,CAAC,CAAC","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const alertStyle = cva('p-4 rounded-sm text-sm font-medium', {\n  variants: {\n    variant: {\n      success: 'bg-green-100 text-green-800 border-green-200',\n      error: 'bg-red-100 text-red-800 border-red-200',\n      warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',\n      info: 'bg-blue-100 text-blue-800 border-blue-200',\n    },\n    size: {\n      small: 'text-sm',\n      default: 'text-base',\n      large: 'text-xl',\n    },\n  },\n  defaultVariants: {\n    variant: 'info',\n    size: 'default',\n  },\n});\n"]}

package/dist/src/components/atoms/alert/alert.types.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/atoms/alert/alert.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=alert.types.js.map

package/dist/src/components/atoms/alert/alert.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.types.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert.types.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}

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

@@ -0,0 +1,16 @@
+import { BaseElement } from '../../../helpers';
+import * as badgeType from './badge.type';
+export declare class Badge extends BaseElement {
+    static badgeVariants: (props?: ({
+        variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+    variant: badgeType.BadgeVariant;
+    static styles: import("lit").CSSResult[];
+    protected getAttributesToExclude(): string[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-badge': Badge;
+    }
+}

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

@@ -0,0 +1,43 @@
+var Badge_1;
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { cn, BaseElement } from '../../../helpers';
+import { badgeStyle } from './badge.style';
+import { TWStyles } from '../../../styles';
+import { spread } from '@open-wc/lit-helpers';
+let Badge = Badge_1 = class Badge extends BaseElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'default';
+    }
+    getAttributesToExclude() {
+        return ['variant'];
+    }
+    render() {
+        const attributes = this.getFilteredAttributes();
+        return html `
+      <div
+        id="rtg-badge-id"
+        class="
+        ${cn(Badge_1.badgeVariants({
+            variant: this.variant,
+            className: this.className,
+        }))}"
+        ${spread(attributes)}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+Badge.badgeVariants = badgeStyle;
+Badge.styles = [css ``, TWStyles];
+__decorate([
+    property({ type: String })
+], Badge.prototype, "variant", void 0);
+Badge = Badge_1 = __decorate([
+    customElement('rtg-badge')
+], Badge);
+export { Badge };
+//# sourceMappingURL=badge.atom.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/badge/badge.atom.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGvC,IAAM,KAAK,aAAX,MAAM,KAAM,SAAQ,WAAW;IAA/B;;QAGuB,YAAO,GAAiB,SAAS,CAAC;IA2BhE,CAAC;IAvBW,sBAAsB;QAC9B,OAAO,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAEhD,OAAO,IAAI,CAAA;;;;UAIL,EAAE,CACF,OAAK,CAAC,aAAa,CAAC;YAClB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CACH;UACC,MAAM,CAAC,UAAU,CAAC;;;;KAIvB,CAAC;IACJ,CAAC;;AA5BM,mBAAa,GAAG,UAAU,AAAb,CAAc;AAI3B,YAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAFN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAmC;AAHnD,KAAK;IADjB,aAAa,CAAC,WAAW,CAAC;GACd,KAAK,CA8BjB","sourcesContent":["import { html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { cn, BaseElement } from '../../../helpers';\nimport { badgeStyle } from './badge.style';\nimport { BadgeVariant } from './badge.type';\nimport { TWStyles } from '../../../styles';\nimport { spread } from '@open-wc/lit-helpers';\n\n@customElement('rtg-badge')\nexport class Badge extends BaseElement {\n  static badgeVariants = badgeStyle;\n\n  @property({ type: String }) variant: BadgeVariant = 'default';\n\n  static styles = [css``, TWStyles];\n\n  protected getAttributesToExclude(): string[] {\n    return ['variant'];\n  }\n\n  render() {\n    const attributes = this.getFilteredAttributes();\n\n    return html`\n      <div\n        id=\"rtg-badge-id\"\n        class=\"\n        ${cn(\n          Badge.badgeVariants({\n            variant: this.variant,\n            className: this.className,\n          })\n        )}\"\n        ${spread(attributes)}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rtg-badge': Badge;\n  }\n}\n"]}

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import './badge.atom';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Badge: Story;

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

@@ -0,0 +1,110 @@
+import { html } from 'lit';
+import './badge.atom';
+import { expect, within, waitFor, userEvent } from '@storybook/test';
+const meta = {
+    component: 'components/badge',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: {
+                type: 'select',
+            },
+            description: 'Choose the visual style of the badge.',
+            table: {
+                defaultValue: { summary: 'default' },
+            },
+            options: [
+                'default',
+                'destructive',
+                'outline',
+                'secondary',
+                'ghost',
+                'link',
+            ],
+        },
+        label: {
+            control: 'text',
+            description: ' The text displayed on the button. Can also be a function returning the label dynamically.',
+            table: {
+                defaultValue: { summary: '' },
+            },
+        },
+    },
+};
+const testBadgeBehavior = async (args, canvasElement) => {
+    const canvas = within(canvasElement);
+    const badge = await waitFor(() => canvas.getByTestId('badge-id'));
+    expect(badge).toBeVisible();
+    if (badge.shadowRoot) {
+        const badgeItem = await badge.shadowRoot.getElementById('rtg-badge-id');
+        if (badgeItem) {
+            expect(badgeItem).toHaveClass('inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent rounded-full');
+            switch (args.variant) {
+                case 'default':
+                    expect(badgeItem).toHaveClass('bg-primary');
+                    expect(badgeItem).toHaveClass('text-primary-foreground');
+                    break;
+                case 'destructive':
+                    expect(badgeItem).toHaveClass('bg-destructive');
+                    expect(badgeItem).toHaveClass('text-destructive-foreground');
+                    break;
+                case 'outline':
+                    expect(badgeItem).toHaveClass('border');
+                    expect(badgeItem).toHaveClass('border-input');
+                    expect(badgeItem).toHaveClass('bg-background');
+                    expect(badgeItem).toHaveClass('shadow-sm');
+                    expect(badgeItem).toHaveClass('hover:bg-accent');
+                    expect(badgeItem).toHaveClass('hover:text-accent-foreground');
+                    break;
+                case 'secondary':
+                    expect(badgeItem).toHaveClass('bg-secondary');
+                    expect(badgeItem).toHaveClass('text-secondary-foreground');
+                    break;
+                case 'ghost':
+                    expect(badgeItem).toHaveClass('hover:bg-accent');
+                    expect(badgeItem).toHaveClass('hover:text-accent-foreground');
+                    break;
+                case 'link':
+                    expect(badgeItem).toHaveClass('text-primary');
+                    expect(badgeItem).toHaveClass('underline');
+                    break;
+            }
+            await userEvent.hover(badgeItem);
+            switch (args.variant) {
+                case 'outline':
+                    expect(badgeItem).toHaveClass('hover:bg-accent');
+                    expect(badgeItem).toHaveClass('hover:text-accent-foreground');
+                    break;
+                case 'ghost':
+                    expect(badgeItem).toHaveClass('bg-accent');
+                    expect(badgeItem).toHaveClass('text-accent-foreground');
+                    break;
+                case 'link':
+                    expect(badgeItem).toHaveClass('text-primary');
+                    expect(badgeItem).toHaveClass('underline');
+                    break;
+                default:
+                    break;
+            }
+            const focusedBadge = canvas.getByTestId('badge-id');
+            console.log(focusedBadge.textContent, args.label);
+            expect(focusedBadge.textContent).toContain(args.label);
+        }
+    }
+};
+export default meta;
+export const Badge = {
+    args: {
+        variant: 'default',
+        label: 'badge',
+    },
+    render: ({ variant, label }) => html `
+    <rtg-badge data-testid="badge-id" variant=${variant}>
+      <p>${label}</p>
+    </rtg-badge>
+  `,
+    play: async ({ args, canvasElement }) => {
+        await testBadgeBehavior(args, canvasElement);
+    },
+};
+//# sourceMappingURL=badge.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/badge/badge.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport './badge.atom';\nimport { expect, within, waitFor, userEvent } from '@storybook/test';\n\nconst meta: Meta = {\n  component: 'components/badge',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: {\n        type: 'select',\n      },\n      description: 'Choose the visual style of the badge.',\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n      options: [\n        'default',\n        'destructive',\n        'outline',\n        'secondary',\n        'ghost',\n        'link',\n      ],\n    },\n    label: {\n      control: 'text',\n      description:\n        ' The text displayed on the button. Can also be a function returning the label dynamically.',\n      table: {\n        defaultValue: { summary: '' },\n      },\n    },\n  },\n};\n\nconst testBadgeBehavior = async (args: any, canvasElement: any) => {\n  const canvas = within(canvasElement);\n  const badge = await waitFor(() => canvas.getByTestId('badge-id'));\n  expect(badge).toBeVisible();\n  if (badge.shadowRoot) {\n    const badgeItem = await badge.shadowRoot.getElementById('rtg-badge-id');\n    if (badgeItem) {\n      expect(badgeItem).toHaveClass(\n        'inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent rounded-full'\n      );\n      switch (args.variant) {\n        case 'default':\n          expect(badgeItem).toHaveClass('bg-primary');\n          expect(badgeItem).toHaveClass('text-primary-foreground');\n          break;\n        case 'destructive':\n          expect(badgeItem).toHaveClass('bg-destructive');\n          expect(badgeItem).toHaveClass('text-destructive-foreground');\n          break;\n        case 'outline':\n          expect(badgeItem).toHaveClass('border');\n          expect(badgeItem).toHaveClass('border-input');\n          expect(badgeItem).toHaveClass('bg-background');\n          expect(badgeItem).toHaveClass('shadow-sm');\n          expect(badgeItem).toHaveClass('hover:bg-accent');\n          expect(badgeItem).toHaveClass('hover:text-accent-foreground');\n          break;\n        case 'secondary':\n          expect(badgeItem).toHaveClass('bg-secondary');\n          expect(badgeItem).toHaveClass('text-secondary-foreground');\n          break;\n        case 'ghost':\n          expect(badgeItem).toHaveClass('hover:bg-accent');\n          expect(badgeItem).toHaveClass('hover:text-accent-foreground');\n          break;\n        case 'link':\n          expect(badgeItem).toHaveClass('text-primary');\n          expect(badgeItem).toHaveClass('underline');\n          break;\n      }\n      await userEvent.hover(badgeItem);\n      switch (args.variant) {\n        case 'outline':\n          expect(badgeItem).toHaveClass('hover:bg-accent');\n          expect(badgeItem).toHaveClass('hover:text-accent-foreground');\n          break;\n        case 'ghost':\n          expect(badgeItem).toHaveClass('bg-accent');\n          expect(badgeItem).toHaveClass('text-accent-foreground');\n          break;\n        case 'link':\n          expect(badgeItem).toHaveClass('text-primary');\n          expect(badgeItem).toHaveClass('underline');\n          break;\n        default:\n          break;\n      }\n      const focusedBadge = canvas.getByTestId('badge-id');\n      console.log(focusedBadge.textContent, args.label);\n      expect(focusedBadge.textContent).toContain(args.label);\n    }\n  }\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Badge: Story = {\n  args: {\n    variant: 'default',\n    label: 'badge',\n  },\n  render: ({ variant, label }) => html`\n    <rtg-badge data-testid=\"badge-id\" variant=${variant}>\n      <p>${label}</p>\n    </rtg-badge>\n  `,\n  play: async ({ args, canvasElement }) => {\n    await testBadgeBehavior(args, canvasElement);\n  },\n};\n"]}

package/dist/src/components/atoms/badge/badge.style.d.ts

@@ -0,0 +1,3 @@
+export declare const badgeStyle: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/src/components/atoms/badge/badge.style.js

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority';
+export const badgeStyle = cva('inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent rounded-full', {
+    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',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+//# sourceMappingURL=badge.style.js.map

package/dist/src/components/atoms/badge/badge.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.style.js","sourceRoot":"","sources":["../../../../../src/components/atoms/badge/badge.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,2LAA2L,EAC3L;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EACL,+DAA+D;YACjE,WAAW,EACT,8EAA8E;YAChF,OAAO,EACL,0FAA0F;YAC5F,SAAS,EACP,wEAAwE;YAC1E,KAAK,EAAE,8CAA8C;YACrD,IAAI,EAAE,iDAAiD;SACxD;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const badgeStyle = cva(\n  'inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent rounded-full',\n  {\n    variants: {\n      variant: {\n        default:\n          'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n);\n"]}

package/dist/src/components/atoms/badge/badge.type.d.ts

@@ -0,0 +1 @@
+export type BadgeVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';

package/dist/src/components/atoms/badge/badge.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=badge.type.js.map

package/dist/src/components/atoms/badge/badge.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.type.js","sourceRoot":"","sources":["../../../../../src/components/atoms/badge/badge.type.ts"],"names":[],"mappings":"","sourcesContent":["export type BadgeVariant =\n  | 'default'\n  | 'destructive'\n  | 'outline'\n  | 'secondary'\n  | 'ghost'\n  | 'link';\n"]}