@rovula/ui 0.1.0 → 0.1.1

package/dist/components/PasswordInput/PasswordInput.stories.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PasswordInput from "./PasswordInput";
+const meta = {
+    title: "Components/PasswordInput",
+    component: PasswordInput,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--base-bg-2))]", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Password",
+        placeholder: "Enter your password",
+        fullwidth: true,
+    },
+    render: (args) => (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(PasswordInput, Object.assign({ id: "1", size: "lg" }, args)), _jsx(PasswordInput, Object.assign({ id: "2", size: "md" }, args)), _jsx(PasswordInput, Object.assign({ id: "3", size: "sm" }, args))] })),
+};
+export const WithHelperText = {
+    args: {
+        label: "Password",
+        placeholder: "Enter your password",
+        helperText: "Must be at least 8 characters",
+        fullwidth: true,
+    },
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsx(PasswordInput, Object.assign({ id: "1", size: "md" }, args)) })),
+};
+export const WithError = {
+    args: {
+        label: "Password",
+        placeholder: "Enter your password",
+        error: true,
+        errorMessage: "Password is required",
+        fullwidth: true,
+    },
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsx(PasswordInput, Object.assign({ id: "1", size: "md" }, args)) })),
+};
+export const Disabled = {
+    args: {
+        label: "Password",
+        value: "secret123",
+        disabled: true,
+        fullwidth: true,
+    },
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsx(PasswordInput, Object.assign({ id: "1", size: "md" }, args)) })),
+};
+export const CustomIcons = {
+    args: {
+        label: "Password",
+        placeholder: "Enter your password",
+        fullwidth: true,
+    },
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsx(PasswordInput, Object.assign({}, args, { id: "1", hideIcon: _jsx("span", { className: "text-sm", children: "\uD83D\uDC41" }), showIcon: _jsx("span", { className: "text-sm", children: "\uD83D\uDE48" }) })) })),
+};
+export const WithoutToggle = {
+    args: {
+        label: "Password",
+        placeholder: "Enter your password",
+        showToggle: false,
+        fullwidth: true,
+    },
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsx(PasswordInput, Object.assign({ id: "1", size: "md" }, args)) })),
+};

package/dist/components/PasswordInput/index.js

@@ -0,0 +1 @@
+export { default } from "./PasswordInput";

package/dist/esm/bundle.css

@@ -566,6 +566,9 @@ input[type=number] {
 .pointer-events-auto{
   pointer-events: auto;
 }
+.visible{
+  visibility: visible;
+}
 .static{
   position: static;
 }
@@ -657,6 +660,12 @@ input[type=number] {
 .top-full{
   top: 100%;
 }
+.-z-10{
+  z-index: -10;
+}
+.-z-\[5\]{
+  z-index: -5;
+}
 .z-0{
   z-index: 0;
 }
@@ -868,6 +877,9 @@ input[type=number] {
 .h-60{
   height: 15rem;
 }
+.h-\[200vh\]{
+  height: 200vh;
+}
 .h-\[24px\]{
   height: 24px;
 }
@@ -892,6 +904,12 @@ input[type=number] {
 .h-\[64px\]{
   height: 64px;
 }
+.h-\[var\(--footer-height\)\]{
+  height: var(--footer-height);
+}
+.h-\[var\(--footer-height-simple\)\]{
+  height: var(--footer-height-simple);
+}
 .h-\[var\(--navbar-height\)\]{
   height: var(--navbar-height);
 }
@@ -911,12 +929,18 @@ input[type=number] {
 .max-h-60{
   max-height: 15rem;
 }
+.max-h-\[80vh\]{
+  max-height: 80vh;
+}
 .max-h-screen{
   max-height: 100vh;
 }
 .min-h-10{
   min-height: 2.5rem;
 }
+.min-h-screen{
+  min-height: 100vh;
+}
 .w-1\/2{
   width: 50%;
 }
@@ -941,6 +965,9 @@ input[type=number] {
 .w-6{
   width: 1.5rem;
 }
+.w-64{
+  width: 16rem;
+}
 .w-8{
   width: 2rem;
 }
@@ -1110,6 +1137,9 @@ input[type=number] {
 .grid-cols-9{
   grid-template-columns: repeat(9, minmax(0, 1fr));
 }
+.grid-cols-\[repeat\(auto-fill\2c minmax\(140px\2c 1fr\)\)\]{
+  grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
+}
 .flex-row{
   flex-direction: row;
 }
@@ -1170,6 +1200,10 @@ input[type=number] {
 .gap-\[2px\]{
   gap: 2px;
 }
+.gap-x-\[var\(--footer-gap\)\]{
+  -moz-column-gap: var(--footer-gap);
+       column-gap: var(--footer-gap);
+}
 .gap-x-\[var\(--navbar-gap\)\]{
   -moz-column-gap: var(--navbar-gap);
        column-gap: var(--navbar-gap);
@@ -1323,6 +1357,9 @@ input[type=number] {
 .border-t{
   border-top-width: 1px;
 }
+.border-t-2{
+  border-top-width: 2px;
+}
 .border-solid{
   border-style: solid;
 }
@@ -1543,6 +1580,9 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-right-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
+.border-t-\[var\(--footer-border-color\)\]{
+  border-top-color: var(--footer-border-color);
+}
 .border-t-secondary{
   --tw-border-opacity: 1;
   border-top-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -1562,6 +1602,9 @@ input[type=number] {
 .bg-\[var\(--dropdown-menu-seperator-bg\)\]{
   background-color: var(--dropdown-menu-seperator-bg);
 }
+.bg-\[var\(--footer-bg-color\)\]{
+  background-color: var(--footer-bg-color);
+}
 .bg-action-button-icon-active{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -2907,6 +2950,9 @@ input[type=number] {
 .fill-warning{
   fill: color-mix(in srgb, var(--state-color-warning-default) calc(100% * 1), transparent);
 }
+.stroke-current{
+  stroke: currentColor;
+}
 .stroke-input-default-stroke{
   stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
 }
@@ -3109,6 +3155,9 @@ input[type=number] {
 .align-middle{
   vertical-align: middle;
 }
+.font-mono{
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
 .font-poppins{
   font-family: Poppins, sans-serif;
 }
@@ -3313,6 +3362,9 @@ input[type=number] {
 .text-\[var\(--dropdown-menu-selected-text\)\]{
   color: var(--dropdown-menu-selected-text);
 }
+.text-\[var\(--footer-text-color\)\]{
+  color: var(--footer-text-color);
+}
 .text-\[var\(--loading-process-color\)\]{
   color: var(--loading-process-color);
 }
@@ -3618,6 +3670,10 @@ input[type=number] {
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-\[var\(--navbar-shadow-scrolled\)\]{
+  --tw-shadow-color: var(--navbar-shadow-scrolled);
+  --tw-shadow: var(--tw-shadow-colored);
+}
 .outline-none{
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -3690,6 +3746,11 @@ input[type=number] {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-shadow{
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .transition-transform{
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -4126,6 +4187,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-gray-50:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
 .hover\:bg-input-active-stroke\/10:hover{
   background-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 0.1), transparent);
 }