revotech-ui-kit 0.0.7-beta → 0.0.10

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

@@ -0,0 +1,211 @@
+import { html } from 'lit';
+// eslint-disable-next-line import/extensions
+import './dropdown-menu-content';
+import './dropdown-menu-group';
+import './dropdown-menu-item';
+import './dropdown-menu-seperator';
+import './dropdown-menu.atom';
+import '../button/button.atom';
+import './dropdown-menu-checkbox-Item';
+import './dropdown-menu-radio-item';
+import './dropdown-menu-shortcut';
+export default {
+    component: 'components/atoms/dropdownMenu',
+    tags: ['autodocs'],
+};
+//type Story = StoryObj;
+const TemplateDropdownMenu = () => html `
+    <rtg-dropdown-menu class="w-full max-w-md">
+      <rtg-dropdown-menu-content>
+        <rtg-dropdown-menu-shortcut style="margin-left:8px"
+          >My Account</rtg-dropdown-menu-shortcut
+        >
+        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
+        <rtg-dropdown-menu-group>
+          <rtg-dropdown-menu-item>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="mr-2 h-4 w-4"
+            >
+              <rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
+              <line x1="16" x2="16" y1="2" y2="6"></line>
+              <line x1="8" x2="8" y1="2" y2="6"></line>
+              <line x1="3" x2="21" y1="10" y2="10"></line>
+            </svg>
+            <span>Calendar</span>
+          </rtg-dropdown-menu-item>
+          <rtg-dropdown-menu-item>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="mr-2 h-4 w-4"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
+              <line x1="9" x2="9.01" y1="9" y2="9"></line>
+              <line x1="15" x2="15.01" y1="9" y2="9"></line>
+            </svg>
+            <span>Search Emoji</span>
+          </rtg-dropdown-menu-item>
+          <rtg-dropdown-menu-item>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="mr-2 h-4 w-4"
+            >
+              <rect width="16" height="20" x="4" y="2" rx="2"></rect>
+              <line x1="8" x2="16" y1="6" y2="6"></line>
+              <line x1="16" x2="16" y1="14" y2="18"></line>
+              <path d="M16 10h.01"></path>
+              <path d="M12 10h.01"></path>
+              <path d="M8 10h.01"></path>
+              <path d="M12 14h.01"></path>
+              <path d="M8 14h.01"></path>
+              <path d="M12 18h.01"></path>
+              <path d="M8 18h.01"></path>
+            </svg>
+            <span>Calculator</span>
+          </rtg-dropdown-menu-item>
+        </rtg-dropdown-menu-group>
+
+        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
+        <rtg-dropdown-menu-group>
+          <rtg-dropdown-menu-item
+            onclick="javascript:alert('Profile Clicked!')"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="mr-2 h-4 w-4"
+            >
+              <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
+              <circle cx="12" cy="7" r="4"></circle>
+            </svg>
+            <span>Profile</span>
+            <span class="ml-auto text-xs tracking-widest text-muted-foreground"
+              >⌘P</span
+            >
+          </rtg-dropdown-menu-item>
+          <rtg-dropdown-menu-item>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="mr-2 h-4 w-4"
+            >
+              <rect width="20" height="14" x="2" y="5" rx="2"></rect>
+              <line x1="2" x2="22" y1="10" y2="10"></line>
+            </svg>
+            <span>Billing</span
+            ><span class="ml-auto text-xs tracking-widest text-muted-foreground"
+              >⌘B</span
+            >
+          </rtg-dropdown-menu-item>
+          <rtg-dropdown-menu-item>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="mr-2 h-4 w-4"
+            >
+              <path
+                d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
+              ></path>
+              <circle cx="12" cy="12" r="3"></circle>
+            </svg>
+            <span>Settings</span>
+            <span class="ml-auto text-xs tracking-widest text-muted-foreground">
+              ⌘S</span
+            >
+          </rtg-dropdown-menu-item>
+        </rtg-dropdown-menu-group></rtg-dropdown-menu-content
+      >
+    </rtg-dropdown-menu>
+  `;
+export const DropdownMenu = TemplateDropdownMenu.bind({});
+const TemplateDropdownMenuCheckbox = () => html `
+    <rtg-dropdown-menu class="w-full max-w-md">
+      <rtg-dropdown-menu-content>
+        <rtg-dropdown-menu-shortcut style="margin-left:8px"
+          >My Account</rtg-dropdown-menu-shortcut
+        >
+        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
+        <rtg-dropdown-menu-group>
+          <rtg-dropdown-menu-checkbox-item>
+            <span style="margin-left:24px">Profile</span>
+          </rtg-dropdown-menu-checkbox-item>
+          <rtg-dropdown-menu-checkbox-item>
+            <span style="margin-left:24px">Billing</span>
+          </rtg-dropdown-menu-checkbox-item>
+          <rtg-dropdown-menu-checkbox-item>
+            <span style="margin-left:24px">Settings</span>
+          </rtg-dropdown-menu-checkbox-item>
+        </rtg-dropdown-menu-group>
+      </rtg-dropdown-menu-content>
+    </rtg-dropdown-menu>
+  `;
+export const DropdownMenuCheckbox = TemplateDropdownMenuCheckbox.bind({});
+const TemplateDropdownMenuRadio = () => html `
+    <rtg-dropdown-menu class="w-full max-w-md">
+      <rtg-dropdown-menu-content>
+        <rtg-dropdown-menu-shortcut style="margin-left:8px"
+          >My Account</rtg-dropdown-menu-shortcut
+        >
+        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>
+        <rtg-dropdown-menu-group>
+          <rtg-dropdown-menu-radio-item>
+            <span style="margin-left:24px">Profile</span>
+          </rtg-dropdown-menu-radio-item>
+          <rtg-dropdown-menu-radio-item>
+            <span style="margin-left:24px">Billing</span>
+          </rtg-dropdown-menu-radio-item>
+          <rtg-dropdown-menu-radio-item>
+            <span style="margin-left:24px">Settings</span>
+          </rtg-dropdown-menu-radio-item>
+        </rtg-dropdown-menu-group>
+      </rtg-dropdown-menu-content>
+    </rtg-dropdown-menu>
+  `;
+export const DropdownMenuRadio = TemplateDropdownMenuRadio.bind({});
+//# sourceMappingURL=dropdownMenu.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdownMenu.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dropdownMenu/dropdownMenu.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,6CAA6C;AAC7C,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,2BAA2B,CAAC;AACnC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,+BAA+B,CAAC;AACvC,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAGlC,eAAe;IACb,SAAS,EAAE,+BAA+B;IAC1C,IAAI,EAAE,CAAC,UAAU,CAAC;CACX,CAAC;AAEV,wBAAwB;AAExB,MAAM,oBAAoB,GAAY,GAAG,EAAE,CACzC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoJH,CAAC;AACJ,MAAM,CAAC,MAAM,YAAY,GAAG,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1D,MAAM,4BAA4B,GAAY,GAAG,EAAE,CACjD,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;GAoBH,CAAC;AAEJ,MAAM,CAAC,MAAM,oBAAoB,GAAG,4BAA4B,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1E,MAAM,yBAAyB,GAAY,GAAG,EAAE,CAC9C,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;GAoBH,CAAC;AACJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\n// eslint-disable-next-line import/extensions\nimport './dropdown-menu-content';\nimport './dropdown-menu-group';\nimport './dropdown-menu-item';\nimport './dropdown-menu-seperator';\nimport './dropdown-menu.atom';\nimport '../button/button.atom';\nimport './dropdown-menu-checkbox-Item';\nimport './dropdown-menu-radio-item';\nimport './dropdown-menu-shortcut';\nimport { Meta, StoryObj, StoryFn } from '@storybook/web-components';\n\nexport default {\n  component: 'components/atoms/dropdownMenu',\n  tags: ['autodocs'],\n} as Meta;\n\n//type Story = StoryObj;\n\nconst TemplateDropdownMenu: StoryFn = () =>\n  html`\n    <rtg-dropdown-menu class=\"w-full max-w-md\">\n      <rtg-dropdown-menu-content>\n        <rtg-dropdown-menu-shortcut style=\"margin-left:8px\"\n          >My Account</rtg-dropdown-menu-shortcut\n        >\n        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>\n        <rtg-dropdown-menu-group>\n          <rtg-dropdown-menu-item>\n            <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=\"mr-2 h-4 w-4\"\n            >\n              <rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\"></rect>\n              <line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\"></line>\n              <line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\"></line>\n              <line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\"></line>\n            </svg>\n            <span>Calendar</span>\n          </rtg-dropdown-menu-item>\n          <rtg-dropdown-menu-item>\n            <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=\"mr-2 h-4 w-4\"\n            >\n              <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n              <path d=\"M8 14s1.5 2 4 2 4-2 4-2\"></path>\n              <line x1=\"9\" x2=\"9.01\" y1=\"9\" y2=\"9\"></line>\n              <line x1=\"15\" x2=\"15.01\" y1=\"9\" y2=\"9\"></line>\n            </svg>\n            <span>Search Emoji</span>\n          </rtg-dropdown-menu-item>\n          <rtg-dropdown-menu-item>\n            <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=\"mr-2 h-4 w-4\"\n            >\n              <rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"></rect>\n              <line x1=\"8\" x2=\"16\" y1=\"6\" y2=\"6\"></line>\n              <line x1=\"16\" x2=\"16\" y1=\"14\" y2=\"18\"></line>\n              <path d=\"M16 10h.01\"></path>\n              <path d=\"M12 10h.01\"></path>\n              <path d=\"M8 10h.01\"></path>\n              <path d=\"M12 14h.01\"></path>\n              <path d=\"M8 14h.01\"></path>\n              <path d=\"M12 18h.01\"></path>\n              <path d=\"M8 18h.01\"></path>\n            </svg>\n            <span>Calculator</span>\n          </rtg-dropdown-menu-item>\n        </rtg-dropdown-menu-group>\n\n        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>\n        <rtg-dropdown-menu-group>\n          <rtg-dropdown-menu-item\n            onclick=\"javascript:alert('Profile Clicked!')\"\n          >\n            <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=\"mr-2 h-4 w-4\"\n            >\n              <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n              <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n            </svg>\n            <span>Profile</span>\n            <span class=\"ml-auto text-xs tracking-widest text-muted-foreground\"\n              >⌘P</span\n            >\n          </rtg-dropdown-menu-item>\n          <rtg-dropdown-menu-item>\n            <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=\"mr-2 h-4 w-4\"\n            >\n              <rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"></rect>\n              <line x1=\"2\" x2=\"22\" y1=\"10\" y2=\"10\"></line>\n            </svg>\n            <span>Billing</span\n            ><span class=\"ml-auto text-xs tracking-widest text-muted-foreground\"\n              >⌘B</span\n            >\n          </rtg-dropdown-menu-item>\n          <rtg-dropdown-menu-item>\n            <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=\"mr-2 h-4 w-4\"\n            >\n              <path\n                d=\"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z\"\n              ></path>\n              <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n            </svg>\n            <span>Settings</span>\n            <span class=\"ml-auto text-xs tracking-widest text-muted-foreground\">\n              ⌘S</span\n            >\n          </rtg-dropdown-menu-item>\n        </rtg-dropdown-menu-group></rtg-dropdown-menu-content\n      >\n    </rtg-dropdown-menu>\n  `;\nexport const DropdownMenu = TemplateDropdownMenu.bind({});\n\nconst TemplateDropdownMenuCheckbox: StoryFn = () =>\n  html`\n    <rtg-dropdown-menu class=\"w-full max-w-md\">\n      <rtg-dropdown-menu-content>\n        <rtg-dropdown-menu-shortcut style=\"margin-left:8px\"\n          >My Account</rtg-dropdown-menu-shortcut\n        >\n        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>\n        <rtg-dropdown-menu-group>\n          <rtg-dropdown-menu-checkbox-item>\n            <span style=\"margin-left:24px\">Profile</span>\n          </rtg-dropdown-menu-checkbox-item>\n          <rtg-dropdown-menu-checkbox-item>\n            <span style=\"margin-left:24px\">Billing</span>\n          </rtg-dropdown-menu-checkbox-item>\n          <rtg-dropdown-menu-checkbox-item>\n            <span style=\"margin-left:24px\">Settings</span>\n          </rtg-dropdown-menu-checkbox-item>\n        </rtg-dropdown-menu-group>\n      </rtg-dropdown-menu-content>\n    </rtg-dropdown-menu>\n  `;\n\nexport const DropdownMenuCheckbox = TemplateDropdownMenuCheckbox.bind({});\n\nconst TemplateDropdownMenuRadio: StoryFn = () =>\n  html`\n    <rtg-dropdown-menu class=\"w-full max-w-md\">\n      <rtg-dropdown-menu-content>\n        <rtg-dropdown-menu-shortcut style=\"margin-left:8px\"\n          >My Account</rtg-dropdown-menu-shortcut\n        >\n        <rtg-dropdown-menu-separator></rtg-dropdown-menu-separator>\n        <rtg-dropdown-menu-group>\n          <rtg-dropdown-menu-radio-item>\n            <span style=\"margin-left:24px\">Profile</span>\n          </rtg-dropdown-menu-radio-item>\n          <rtg-dropdown-menu-radio-item>\n            <span style=\"margin-left:24px\">Billing</span>\n          </rtg-dropdown-menu-radio-item>\n          <rtg-dropdown-menu-radio-item>\n            <span style=\"margin-left:24px\">Settings</span>\n          </rtg-dropdown-menu-radio-item>\n        </rtg-dropdown-menu-group>\n      </rtg-dropdown-menu-content>\n    </rtg-dropdown-menu>\n  `;\nexport const DropdownMenuRadio = TemplateDropdownMenuRadio.bind({});\n"]}

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

@@ -0,0 +1,2 @@
+export declare const dropdownMenuRootStyle: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const dropdownMenuContentStyle: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -0,0 +1,4 @@
+import { cva } from 'class-variance-authority';
+export const dropdownMenuRootStyle = cva('rtgcmd-root');
+export const dropdownMenuContentStyle = cva('max-h-[300px] overflow-y-auto overflow-x-hidden');
+//# sourceMappingURL=dropdownMenu.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdownMenu.style.js","sourceRoot":"","sources":["../../../../../src/components/atoms/dropdownMenu/dropdownMenu.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC,aAAa,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CACzC,iDAAiD,CAClD,CAAC","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const dropdownMenuRootStyle = cva('rtgcmd-root');\n\nexport const dropdownMenuContentStyle = cva(\n  'max-h-[300px] overflow-y-auto overflow-x-hidden'\n);\n"]}

package/dist/src/components/atoms/index.d.ts

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

package/dist/src/components/atoms/index.js

@@ -0,0 +1,14 @@
+export * from './button/button.atom';
+export * from './checkbox/checkbox.atom';
+export * from './dialog/dialog.atom';
+export * from './input/input.atom';
+export * from './label/label.atom';
+export * from './command-empty/command-empty.atom';
+export * from './command-group/command-group.atom';
+export * from './command-item/command-item.atom';
+export * from './command-list/command-list.atom';
+export * from './command-separator/command-separator.atom';
+export * from './card/card.atom';
+export * from './popover/popover.atom';
+export * from './alert/alert.atom';
+//# sourceMappingURL=index.js.map

package/dist/src/components/atoms/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './button/button.atom';\nexport * from './checkbox/checkbox.atom';\nexport * from './dialog/dialog.atom';\nexport * from './input/input.atom';\nexport * from './label/label.atom';\nexport * from './command-empty/command-empty.atom';\nexport * from './command-group/command-group.atom';\nexport * from './command-item/command-item.atom';\nexport * from './command-list/command-list.atom';\nexport * from './command-separator/command-separator.atom';\nexport * from './card/card.atom';\nexport * from './popover/popover.atom';\nexport * from './alert/alert.atom';\n"]}

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

@@ -0,0 +1,21 @@
+import { PropertyValues } from 'lit';
+import * as inputType from './input.type';
+import { BaseElement } from '../../../helpers';
+export declare class Input extends BaseElement {
+    constructor();
+    disabled: boolean;
+    type: inputType.InputType;
+    placeholder: string;
+    defaultValue: string;
+    value: string;
+    static styles: import("lit").CSSResult[];
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    handleInputChange(event: Event): void;
+    protected getAttributesToExclude(): string[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rtg-input': Input;
+    }
+}

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { Meta, StoryFn } from '@storybook/web-components';
+import './input.atom';
+import '../label/label.atom';
+import '../button/button.atom';
+declare const _default: Meta;
+export default _default;
+export declare const Input: StoryFn;
+export declare const SpecificInput: StoryFn;