@rovula/ui 0.0.7 → 0.0.9

package/dist/components/TextInput/TextInput.js

@@ -21,13 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef } from "react";
+import { forwardRef, useImperativeHandle, useRef, } from "react";
 import { helperTextVariant, iconVariant, iconWrapperVariant, inputVariant, labelVariant, } from "./TextInput.styles";
 import { twMerge } from "tailwind-merge";
 import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
 var TextInput = forwardRef(function (_a, ref) {
-    var _b;
-    var id = _a.id, label = _a.label, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.rounded, rounded = _d === void 0 ? "normal" : _d, _e = _a.variant, variant = _e === void 0 ? "outline" : _e, _f = _a.type, type = _f === void 0 ? "text" : _f, helperText = _a.helperText, errorMessage = _a.errorMessage, _g = _a.fullwidth, fullwidth = _g === void 0 ? false : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.error, error = _j === void 0 ? false : _j, _k = _a.required, required = _k === void 0 ? true : _k, _l = _a.hasClearIcon, hasClearIcon = _l === void 0 ? true : _l, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "hasClearIcon"]);
+    var id = _a.id, label = _a.label, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.rounded, rounded = _c === void 0 ? "normal" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, _e = _a.type, type = _e === void 0 ? "text" : _e, helperText = _a.helperText, errorMessage = _a.errorMessage, _f = _a.fullwidth, fullwidth = _f === void 0 ? true : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? true : _j, _k = _a.hasClearIcon, hasClearIcon = _k === void 0 ? true : _k, endIcon = _a.endIcon, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "hasClearIcon", "endIcon"]);
     var inputRef = useRef(null);
     var _id = id || "".concat(type, "-").concat(label, "-input");
     var inputClassname = inputVariant({
@@ -43,7 +42,6 @@ var TextInput = forwardRef(function (_a, ref) {
         size: size,
         disabled: disabled,
         error: error,
-        isFloating: (_b = !!props.value) !== null && _b !== void 0 ? _b : false,
     });
     var helperTextClassname = helperTextVariant({ size: size, error: error, disabled: disabled });
     var iconWrapperClassname = iconWrapperVariant({ size: size });
@@ -56,6 +54,6 @@ var TextInput = forwardRef(function (_a, ref) {
             inputRef.current.value = "";
         }
     };
-    return (_jsxs("div", { className: "flex flex-col ".concat(fullwidth ? "w-full" : ""), children: [_jsxs("div", { className: "relative", children: [_jsx("input", __assign({}, props, { ref: inputRef, type: type, id: _id, disabled: disabled, className: twMerge(inputClassname, props.className) })), hasClearIcon && (_jsx("div", { className: iconWrapperClassname, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), _jsxs("label", { htmlFor: _id, className: labelClassname, children: [label, " ", required && _jsx("span", { className: "text-error", children: "*" })] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }), " ", errorMessage || helperText] }))] }));
+    return (_jsxs("div", { className: "inline-flex flex-col ".concat(fullwidth ? "w-full" : ""), children: [_jsxs("div", { className: "relative", children: [_jsx("input", __assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: twMerge(inputClassname, props.className) })), hasClearIcon && (_jsx("div", { className: iconWrapperClassname, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), endIcon, _jsxs("label", { htmlFor: _id, className: labelClassname, children: [label, " ", required && _jsx("span", { className: "text-error", children: "*" })] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }), " ", errorMessage || helperText] }))] }));
 });
 export default TextInput;

package/dist/components/TextInput/TextInput.stories.js

@@ -34,6 +34,6 @@ export var Default = {
     render: function (args) {
         console.log("args ", args);
         var props = __assign({}, args);
-        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, __assign({ id: "1", placeholder: "placeholder", size: "lg" }, args)), _jsx(TextInput, __assign({ id: "2", placeholder: "placeholder", size: "md" }, args)), _jsx(TextInput, __assign({ id: "3", placeholder: "placeholder", size: "sm" }, args))] }));
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, __assign({ id: "1", size: "lg" }, args)), _jsx(TextInput, __assign({ id: "2", size: "md" }, args)), _jsx(TextInput, __assign({ id: "3", size: "sm" }, args))] }));
     },
 };

package/dist/components/TextInput/TextInput.styles.js

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 export var inputVariant = cva([
     "border-0 outline-none",
-    "p-1 flex",
+    "p-1 flex w-auto box-border",
     "peer text-black placeholder:text-transparent",
 ], {
     variants: {
@@ -17,7 +17,7 @@ export var inputVariant = cva([
         },
         variant: {
             flat: "",
-            outline: "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-2 focus:ring-inset focus:ring-input-active",
+            outline: "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-1 focus:ring-inset focus:ring-input-stroke-active",
             underline: "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
         },
         fullwidth: {
@@ -27,7 +27,7 @@ export var inputVariant = cva([
             true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
         },
         error: {
-            true: "ring-error",
+            true: "ring-error focus:ring-error",
         },
         hasClearIcon: {
             true: "",
@@ -65,21 +65,24 @@ export var inputVariant = cva([
     },
 });
 export var labelVariant = cva([
-    "absolute block transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+    "absolute block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
 ], {
     variants: {
         size: {
             sm: [
-                "left-3 top-2 typography-small1 peer-focus:-top-1.5 peer-focus:typography-label2",
-                "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label2",
+                "left-3 -top-1.5 typography-label2 bg-input-label-background",
+                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label2",
             ],
             md: [
-                "left-3 top-2 typography-subtitile4 peer-focus:-top-1.5 peer-focus:typography-label1",
-                "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+                "left-3 -top-1.5 typography-label1 bg-input-label-background",
+                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
             lg: [
-                "left-4 top-4 typography-subtitile1 peer-focus:-top-1.5 peer-focus:typography-label1",
-                "bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1",
+                "left-4 -top-1.5 typography-label1 bg-input-label-background",
+                "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
         disabled: {
@@ -88,22 +91,11 @@ export var labelVariant = cva([
         error: {
             true: "ring-error",
         },
-        isFloating: {
-            true: "-top-1.5 typography-label1 bg-input-label-background",
-        },
     },
-    compoundVariants: [
-        {
-            size: "sm",
-            isFloating: true,
-            class: "-top-1.5 typography-label2 bg-input-label-background",
-        },
-    ],
     defaultVariants: {
         size: "md",
         disabled: false,
         error: false,
-        isFloating: false,
     },
 });
 export var helperTextVariant = cva(["text-small1 flex flex-row items-center gap-1"], {

package/dist/esm/bundle.css

@@ -671,11 +671,8 @@ video {
 .right-0 {
   right: 0px;
 }
-.top-2 {
-  top: 0.5rem;
-}
-.top-4 {
-  top: 1rem;
+.z-10 {
+  z-index: 10;
 }
 .z-50 {
   z-index: 50;
@@ -703,6 +700,9 @@ video {
 .mt-\[6px\] {
   margin-top: 6px;
 }
+.box-border {
+  box-sizing: border-box;
+}
 .block {
   display: block;
 }
@@ -733,18 +733,36 @@ video {
   width: 1.25rem;
   height: 1.25rem;
 }
+.size-6 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.size-\[14px\] {
+  width: 14px;
+  height: 14px;
+}
+.max-h-60 {
+  max-height: 15rem;
+}
 .w-\[200px\] {
   width: 200px;
 }
 .w-\[400px\] {
   width: 400px;
 }
+.w-auto {
+  width: auto;
+}
 .w-full {
   width: 100%;
 }
 .max-w-3xl {
   max-width: 48rem;
 }
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .cursor-pointer {
   cursor: pointer;
 }
@@ -795,6 +813,9 @@ video {
 .overflow-x-auto {
   overflow-x: auto;
 }
+.overflow-y-auto {
+  overflow-y: auto;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -816,6 +837,9 @@ video {
 .rounded-lg {
   border-radius: 0.5rem;
 }
+.rounded-md {
+  border-radius: 0.375rem;
+}
 .rounded-none {
   border-radius: 0px;
 }
@@ -838,6 +862,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(var(--error-100) / var(--tw-border-opacity));
 }
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
 .border-info {
   --tw-border-opacity: 1;
   border-color: rgb(var(--info-default) / var(--tw-border-opacity));
@@ -873,6 +901,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--error-100) / var(--tw-bg-opacity));
 }
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
 .bg-info {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--info-default) / var(--tw-bg-opacity));
@@ -908,12 +940,25 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--warning-default) / var(--tw-bg-opacity));
 }
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
 .fill-error {
   fill: rgb(var(--error-100) / 1);
 }
 .fill-input-stroke-active {
   fill: rgb(var(--input-active-stroke-color) / 1);
 }
+.fill-input-text {
+  fill: rgb(var(--input-default-text-color) / 1);
+}
+.fill-input-text-active {
+  fill: rgb(var(--input-active-text-color) / 1);
+}
+.fill-input-text-disabled {
+  fill: rgb(var(--input-disabled-text-color) / 1);
+}
 .p-1 {
   padding: 0.25rem;
 }
@@ -946,6 +991,10 @@ video {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-14 {
+  padding-top: 3.5rem;
+  padding-bottom: 3.5rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -954,6 +1003,18 @@ video {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.pe-\[30px\] {
+  padding-inline-end: 30px;
+}
+.pe-\[40px\] {
+  padding-inline-end: 40px;
+}
+.pe-\[48px\] {
+  padding-inline-end: 48px;
+}
+.text-center {
+  text-align: center;
+}
 .align-middle {
   vertical-align: middle;
 }
@@ -1170,6 +1231,11 @@ video {
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --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);
+}
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1197,6 +1263,9 @@ video {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(var(--input-disabled-stroke-color) / var(--tw-ring-opacity));
 }
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1348,6 +1417,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--error-120) / var(--tw-bg-opacity));
 }
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
 .hover\:bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--info-100)) / var(--tw-bg-opacity));
@@ -1400,19 +1473,75 @@ video {
 .focus\:pe-8:focus {
   padding-inline-end: 2rem;
 }
-.focus\:ring-2:focus {
+.focus\:ring-1:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 .focus\:ring-inset:focus {
   --tw-ring-inset: inset;
 }
+.focus\:ring-error:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--error-100) / var(--tw-ring-opacity));
+}
+.focus\:ring-input-stroke-active:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(var(--input-active-stroke-color) / var(--tw-ring-opacity));
+}
 .active\:scale-\[98\%\]:active {
   --tw-scale-x: 98%;
   --tw-scale-y: 98%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2 {
+  top: 0.5rem;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:top-2 {
+  top: 0.5rem;
+}
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-4 {
+  top: 1rem;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:top-4 {
+  top: 1rem;
+}
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:bg-transparent {
+  background-color: transparent;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:bg-transparent {
+  background-color: transparent;
+}
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1 {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1 {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4 {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-small1 {
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:typography-small1 {
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+}
 .peer:focus ~ .peer-focus\:-top-1 {
   top: -0.25rem;
 }
@@ -1440,32 +1569,6 @@ video {
   line-height: 10px;
   font-weight: 400;
 }
-.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:-top-1\.5 {
-  top: -0.375rem;
-}
-.peer:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:-top-1\.5 {
-  top: -0.375rem;
-}
-.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:typography-label1 {
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: 400;
-}
-.peer:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:typography-label1 {
-  font-size: 12px;
-  line-height: 12px;
-  font-weight: 400;
-}
-.peer:not(:-moz-placeholder-shown) ~ .peer-\[\:not\(\:-moz-placeholder-shown\)\]\:typography-label2 {
-  font-size: 10px;
-  line-height: 10px;
-  font-weight: 400;
-}
-.peer:not(:placeholder-shown) ~ .peer-\[\:not\(\:placeholder-shown\)\]\:typography-label2 {
-  font-size: 10px;
-  line-height: 10px;
-  font-weight: 400;
-}
 .aria-disabled\:pointer-events-none[aria-disabled="true"] {
   pointer-events: none;
 }

package/dist/esm/bundle.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{twMerge as a}from"tailwind-merge";import{cva as o}from"class-variance-authority";import*as n from"react";import{forwardRef as i,useRef as l,useImperativeHandle as s,useState as d}from"react";var c=function(){return c=Object.assign||function(e){for(var r,t=1,a=arguments.length;t<a;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e},c.apply(this,arguments)};function u(e,r){var t={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(e);o<a.length;o++)r.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(e,a[o])&&(t[a[o]]=e[a[o]])}return t}"function"==typeof SuppressedError&&SuppressedError;var p=o(["gap-2 font-bold text-white hover:bg-opacity-90 active:scale-[98%]"],{variants:{color:{primary:"bg-primary border-primary text-primary hover:bg-primary-80",secondary:"border-secondary bg-secondary-100 text-secondary-foreground hover:bg-secondary-120",tertiary:"border-tertiary-120 bg-tertiary-120 text-tertiary-120 hover:bg-tertiary-100",success:"border-success bg-success text-success  hover:bg-success-120",info:"border-info bg-info text-info hover:bg-info-100",warning:"border-warning bg-warning text-warning hover:bg-warning-100 hover:border-warning-100",error:"border-error bg-error text-error hover:bg-error-120 hover:border-error-120"},size:{sm:"px-3 py-1 text-sm rounded-[--btn-rounded-sm]",md:"px-4 py-2 text-sm rounded-[--btn-rounded-md]",lg:"px-6 py-4 text-base rounded-[--btn-rounded-lg]"},variant:{solid:"border",outline:"border bg-transparent hover:bg-opacity-20",flat:"bg-transparent hover:bg-opacity-20",link:"bg-transparent underline underline-offset-4 hover:bg-transparent hover:text-opacity-80"},disabled:{true:"pointer-events-none border-transparent bg-secondary-110 text-secondary-130"},fullwidth:{true:"w-full"}},compoundVariants:[{variant:["flat","link"],disabled:!0,class:"border-transparent bg-transparent"},{variant:"solid",color:"primary",class:"text-primary-foreground"},{variant:"solid",color:"secondary",class:"text-secondary-foreground"},{variant:"solid",disabled:!0,color:"secondary",class:"text-white"},{variant:"solid",color:"tertiary",class:"text-tertiary-foreground"},{variant:"solid",color:"success",class:"text-success-foreground"},{variant:"solid",color:"info",class:"text-info-foreground"},{variant:"solid",color:"warning",class:"text-warning-foreground"},{variant:"solid",color:"error",class:"text-error-foreground"}],defaultVariants:{size:"md",color:"primary",variant:"solid",fullwidth:!0}}),b=function(o){var n=o.size,i=void 0===n?"md":n,l=o.color,s=void 0===l?"primary":l,d=o.variant,b=void 0===d?"solid":d,f=o.title,g=o.children,h=o.startIcon,v=o.endIcon,m=o.disabled,y=void 0!==m&&m,x=o.fullwidth,w=void 0!==x&&x,z=o.isLoading,N=void 0!==z&&z,k=o.className,I=u(o,["size","color","variant","title","children","startIcon","endIcon","disabled","fullwidth","isLoading","className"]),O=y||N;return e("button",c({type:"button"},I,{"aria-disabled":O||void 0,tabIndex:O?-1:0,className:a(p({size:i,color:s,variant:b,disabled:y,fullwidth:w}),k),disabled:O,children:r(t,{children:[h,g||f,v]})}))},f=function(t){var a=t.columns,o=t.data;return r("table",{className:"table",children:[e("thead",{children:e("tr",{children:a.map((function(r,t){return e("th",{children:r.header},t)}))})}),e("tbody",{children:o.map((function(r,t){return e("tr",{children:a.map((function(t,a){return e("td",{children:r[t.accessor]},a)}))},t)}))})]})},g=o(["border-0 outline-none","p-1 flex","peer text-black placeholder:text-transparent"],{variants:{size:{sm:"p-2 px-3 typography-small1",md:"py-2 px-3 typography-subtitile4",lg:"p-4 typography-subtitile1"},rounded:{none:"rounded-none",normal:"rounded-xl",full:"rounded-full"},variant:{flat:"",outline:"ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-2 focus:ring-inset focus:ring-input-active",underline:"border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke"},fullwidth:{true:"w-full"},disabled:{true:"text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled"},error:{true:"ring-error"},hasClearIcon:{true:""}},compoundVariants:[{variant:"underline",className:"rounded-none"},{hasClearIcon:!0,size:"sm",class:"focus:pe-6"},{hasClearIcon:!0,size:"md",class:"focus:pe-8"},{hasClearIcon:!0,size:"lg",class:"focus:pe-10"}],defaultVariants:{size:"md",variant:"outline",rounded:"normal",fullwidth:!1,disabled:!1,error:!1,hasClearIcon:!1}}),h=o(["absolute block transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background"],{variants:{size:{sm:["left-3 top-2 typography-small1 peer-focus:-top-1.5 peer-focus:typography-label2","bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label2"],md:["left-3 top-2 typography-subtitile4 peer-focus:-top-1.5 peer-focus:typography-label1","bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1"],lg:["left-4 top-4 typography-subtitile1 peer-focus:-top-1.5 peer-focus:typography-label1","bg-input-label-background peer-[:not(:placeholder-shown)]:-top-1.5 peer-[:not(:placeholder-shown)]:typography-label1"]},disabled:{true:"text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled"},error:{true:"ring-error"},isFloating:{true:"-top-1.5 typography-label1 bg-input-label-background"}},compoundVariants:[{size:"sm",isFloating:!0,class:"-top-1.5 typography-label2 bg-input-label-background"}],defaultVariants:{size:"md",disabled:!1,error:!1,isFloating:!1}}),v=o(["text-small1 flex flex-row items-center gap-1"],{variants:{size:{sm:"mt-1",md:"mt-[6px]",lg:"mt-[6px]"},disabled:{true:"text-input-text-disabled"},error:{true:"text-error",false:"text-input-text"}},defaultVariants:{size:"md",disabled:!1,error:!1}}),m=o(["absolute inset-y-0 right-0 items-center justify-center hidden peer-focus:flex"],{variants:{size:{sm:"mr-2",md:"mr-3",lg:"mr-4"}},defaultVariants:{size:"md"}}),y=o(["cursor-pointer z-50 fill-input-stroke-active hover:fill-input-text"],{variants:{size:{sm:"size-3",md:"size-4",lg:"size-5"}},defaultVariants:{size:"md"}});const x=n.forwardRef((function({title:e,titleId:r,...t},a){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:a,"aria-labelledby":r},t),e?n.createElement("title",{id:r},e):null,n.createElement("path",{fillRule:"evenodd",d:"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",clipRule:"evenodd"}))}));const w=n.forwardRef((function({title:e,titleId:r,...t},a){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:a,"aria-labelledby":r},t),e?n.createElement("title",{id:r},e):null,n.createElement("path",{fillRule:"evenodd",d:"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm2.78-4.22a.75.75 0 0 1-1.06 0L8 9.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 0 1 1.06-1.06L8 6.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L9.06 8l1.72 1.72a.75.75 0 0 1 0 1.06Z",clipRule:"evenodd"}))}));var z=i((function(t,o){var n,i=t.id,d=t.label,p=t.size,b=void 0===p?"md":p,f=t.rounded,z=void 0===f?"normal":f,N=t.variant,k=void 0===N?"outline":N,I=t.type,O=void 0===I?"text":I,C=t.helperText,j=t.errorMessage,E=t.fullwidth,V=void 0!==E&&E,M=t.disabled,D=void 0!==M&&M,F=t.error,L=void 0!==F&&F,R=t.required,S=void 0===R||R,T=t.hasClearIcon,Z=void 0===T||T,P=u(t,["id","label","size","rounded","variant","type","helperText","errorMessage","fullwidth","disabled","error","required","hasClearIcon"]),A=l(null),H=i||"".concat(O,"-").concat(d,"-input"),q=g({size:b,rounded:z,variant:k,fullwidth:V,disabled:D,error:L,hasClearIcon:Z}),B=h({size:b,disabled:D,error:L,isFloating:null!==(n=!!P.value)&&void 0!==n&&n}),U=v({size:b,error:L,disabled:D}),Y=m({size:b}),G=y({size:b});s(o,(function(){return{clearInput:J}}));var J=function(){A.current&&(A.current.value="")};return r("div",{className:"flex flex-col ".concat(V?"w-full":""),children:[r("div",{className:"relative",children:[e("input",c({},P,{ref:A,type:O,id:H,disabled:D,className:a(q,P.className)})),Z&&e("div",{className:Y,children:e(w,{type:"button",className:G,onMouseDown:J})}),r("label",{htmlFor:H,className:B,children:[d," ",S&&e("span",{className:"text-error",children:"*"})]})]}),(j||C)&&r("span",{className:U,children:[e(x,{width:16,height:16,className:L?"fill-error":""})," ",j||C]})]})})),N=function(r){var t=r.variant,a=void 0===t?"body1":t,o=r.tag,n=void 0===o?"p":o,i=r.children,l=r.className,s=r.color,d=r.style;return e(n,{className:"typography-".concat(a," text-").concat(s," ").concat(l),style:d,children:i})},k=function(t){var a=t.tabs,o=t.initialTab,n=d(void 0===o?0:o),i=n[0],l=n[1];return r("div",{className:"tabs",children:[e("div",{className:"tab-buttons",children:a.map((function(r,t){return e("button",{className:t===i?"active":"",onClick:function(){return l(t)},children:r.label},t)}))}),e("div",{className:"tab-content",children:a[i].content})]})},I=function(e){return String(e).length>10?e/1e3:e},O=function(e){var r=new Date(e);return r.setHours(0,0,0,0),r},C=function(e){var r=new Date(e);return r.setHours(23,59,59,999),r},j=function(){var e=O(new Date);return{startTime:e,endTime:C(e)}},E=function(e){var r=Date.UTC(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds());return I(r)};export{b as Button,f as Table,k as Tabs,N as Text,z as TextInput,C as getEndDateOfDay,O as getStartDateOfDay,j as getStartEndTimestampOfDay,E as getTimestampUTC,I as resloveTimestamp};
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{twMerge as a}from"tailwind-merge";import{cva as n}from"class-variance-authority";import*as o from"react";import{forwardRef as i,useRef as l,useImperativeHandle as s,useState as d,useEffect as c,useCallback as u,useMemo as p}from"react";var b=function(){return b=Object.assign||function(e){for(var r,t=1,a=arguments.length;t<a;t++)for(var n in r=arguments[t])Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);return e},b.apply(this,arguments)};function f(e,r){var t={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(a=Object.getOwnPropertySymbols(e);n<a.length;n++)r.indexOf(a[n])<0&&Object.prototype.propertyIsEnumerable.call(e,a[n])&&(t[a[n]]=e[a[n]])}return t}"function"==typeof SuppressedError&&SuppressedError;var v=n(["gap-2 font-bold text-white hover:bg-opacity-90 active:scale-[98%]"],{variants:{color:{primary:"bg-primary border-primary text-primary hover:bg-primary-80",secondary:"border-secondary bg-secondary-100 text-secondary-foreground hover:bg-secondary-120",tertiary:"border-tertiary-120 bg-tertiary-120 text-tertiary-120 hover:bg-tertiary-100",success:"border-success bg-success text-success  hover:bg-success-120",info:"border-info bg-info text-info hover:bg-info-100",warning:"border-warning bg-warning text-warning hover:bg-warning-100 hover:border-warning-100",error:"border-error bg-error text-error hover:bg-error-120 hover:border-error-120"},size:{sm:"px-3 py-1 text-sm rounded-[--btn-rounded-sm]",md:"px-4 py-2 text-sm rounded-[--btn-rounded-md]",lg:"px-6 py-4 text-base rounded-[--btn-rounded-lg]"},variant:{solid:"border",outline:"border bg-transparent hover:bg-opacity-20",flat:"bg-transparent hover:bg-opacity-20",link:"bg-transparent underline underline-offset-4 hover:bg-transparent hover:text-opacity-80"},disabled:{true:"pointer-events-none border-transparent bg-secondary-110 text-secondary-130"},fullwidth:{true:"w-full"}},compoundVariants:[{variant:["flat","link"],disabled:!0,class:"border-transparent bg-transparent"},{variant:"solid",color:"primary",class:"text-primary-foreground"},{variant:"solid",color:"secondary",class:"text-secondary-foreground"},{variant:"solid",disabled:!0,color:"secondary",class:"text-white"},{variant:"solid",color:"tertiary",class:"text-tertiary-foreground"},{variant:"solid",color:"success",class:"text-success-foreground"},{variant:"solid",color:"info",class:"text-info-foreground"},{variant:"solid",color:"warning",class:"text-warning-foreground"},{variant:"solid",color:"error",class:"text-error-foreground"}],defaultVariants:{size:"md",color:"primary",variant:"solid",fullwidth:!0}}),h=function(n){var o=n.size,i=void 0===o?"md":o,l=n.color,s=void 0===l?"primary":l,d=n.variant,c=void 0===d?"solid":d,u=n.title,p=n.children,h=n.startIcon,g=n.endIcon,m=n.disabled,y=void 0!==m&&m,x=n.fullwidth,w=void 0!==x&&x,z=n.isLoading,N=void 0!==z&&z,I=n.className,C=f(n,["size","color","variant","title","children","startIcon","endIcon","disabled","fullwidth","isLoading","className"]),k=y||N;return e("button",b({type:"button"},C,{"aria-disabled":k||void 0,tabIndex:k?-1:0,className:a(v({size:i,color:s,variant:c,disabled:y,fullwidth:w}),I),disabled:k,children:r(t,{children:[h,p||u,g]})}))},g=function(t){var a=t.columns,n=t.data;return r("table",{className:"table",children:[e("thead",{children:e("tr",{children:a.map((function(r,t){return e("th",{children:r.header},t)}))})}),e("tbody",{children:n.map((function(r,t){return e("tr",{children:a.map((function(t,a){return e("td",{children:r[t.accessor]},a)}))},t)}))})]})},m=n(["border-0 outline-none","p-1 flex w-auto box-border","peer text-black placeholder:text-transparent"],{variants:{size:{sm:"p-2 px-3 typography-small1",md:"py-2 px-3 typography-subtitile4",lg:"p-4 typography-subtitile1"},rounded:{none:"rounded-none",normal:"rounded-xl",full:"rounded-full"},variant:{flat:"",outline:"ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-1 focus:ring-inset focus:ring-input-stroke-active",underline:"border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke"},fullwidth:{true:"w-full"},disabled:{true:"text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled"},error:{true:"ring-error focus:ring-error"},hasClearIcon:{true:""}},compoundVariants:[{variant:"underline",className:"rounded-none"},{hasClearIcon:!0,size:"sm",class:"focus:pe-6"},{hasClearIcon:!0,size:"md",class:"focus:pe-8"},{hasClearIcon:!0,size:"lg",class:"focus:pe-10"}],defaultVariants:{size:"md",variant:"outline",rounded:"normal",fullwidth:!1,disabled:!1,error:!1,hasClearIcon:!1}}),y=n(["absolute block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background"],{variants:{size:{sm:["left-3 -top-1.5 typography-label2 bg-input-label-background","peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent","peer-focus:-top-1.5 peer-focus:typography-label2"],md:["left-3 -top-1.5 typography-label1 bg-input-label-background","peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent","peer-focus:-top-1.5 peer-focus:typography-label1"],lg:["left-4 -top-1.5 typography-label1 bg-input-label-background","peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent","peer-focus:-top-1.5 peer-focus:typography-label1"]},disabled:{true:"text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled"},error:{true:"ring-error"}},defaultVariants:{size:"md",disabled:!1,error:!1}}),x=n(["text-small1 flex flex-row items-center gap-1"],{variants:{size:{sm:"mt-1",md:"mt-[6px]",lg:"mt-[6px]"},disabled:{true:"text-input-text-disabled"},error:{true:"text-error",false:"text-input-text"}},defaultVariants:{size:"md",disabled:!1,error:!1}}),w=n(["absolute inset-y-0 right-0 items-center justify-center hidden peer-focus:flex"],{variants:{size:{sm:"mr-2",md:"mr-3",lg:"mr-4"}},defaultVariants:{size:"md"}}),z=n(["cursor-pointer z-50 fill-input-stroke-active hover:fill-input-text"],{variants:{size:{sm:"size-3",md:"size-4",lg:"size-5"}},defaultVariants:{size:"md"}});const N=o.forwardRef((function({title:e,titleId:r,...t},a){return o.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:a,"aria-labelledby":r},t),e?o.createElement("title",{id:r},e):null,o.createElement("path",{fillRule:"evenodd",d:"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z",clipRule:"evenodd"}))}));const I=o.forwardRef((function({title:e,titleId:r,...t},a){return o.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:a,"aria-labelledby":r},t),e?o.createElement("title",{id:r},e):null,o.createElement("path",{fillRule:"evenodd",d:"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z",clipRule:"evenodd"}))}));const C=o.forwardRef((function({title:e,titleId:r,...t},a){return o.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:a,"aria-labelledby":r},t),e?o.createElement("title",{id:r},e):null,o.createElement("path",{fillRule:"evenodd",d:"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm2.78-4.22a.75.75 0 0 1-1.06 0L8 9.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 0 1 1.06-1.06L8 6.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L9.06 8l1.72 1.72a.75.75 0 0 1 0 1.06Z",clipRule:"evenodd"}))}));var k=i((function(t,n){var o=t.id,i=t.label,d=t.size,c=void 0===d?"md":d,u=t.rounded,p=void 0===u?"normal":u,v=t.variant,h=void 0===v?"outline":v,g=t.type,N=void 0===g?"text":g,k=t.helperText,O=t.errorMessage,M=t.fullwidth,j=void 0===M||M,E=t.disabled,T=void 0!==E&&E,V=t.error,L=void 0!==V&&V,R=t.required,S=void 0===R||R,D=t.hasClearIcon,F=void 0===D||D,Z=t.endIcon,q=f(t,["id","label","size","rounded","variant","type","helperText","errorMessage","fullwidth","disabled","error","required","hasClearIcon","endIcon"]),B=l(null),P=o||"".concat(N,"-").concat(i,"-input"),A=m({size:c,rounded:p,variant:h,fullwidth:j,disabled:T,error:L,hasClearIcon:F}),H=y({size:c,disabled:T,error:L}),U=x({size:c,error:L,disabled:T}),Y=w({size:c}),G=z({size:c});s(n,(function(){return{clearInput:J}}));var J=function(){B.current&&(B.current.value="")};return r("div",{className:"inline-flex flex-col ".concat(j?"w-full":""),children:[r("div",{className:"relative",children:[e("input",b({},q,{placeholder:" ",ref:B,type:N,id:P,disabled:T,className:a(A,q.className)})),F&&e("div",{className:Y,children:e(C,{type:"button",className:G,onMouseDown:J})}),Z,r("label",{htmlFor:P,className:H,children:[i," ",S&&e("span",{className:"text-error",children:"*"})]})]}),(O||k)&&r("span",{className:U,children:[e(I,{width:16,height:16,className:L?"fill-error":""})," ",O||k]})]})})),O=function(r){var t=r.variant,a=void 0===t?"body1":t,n=r.tag,o=void 0===n?"p":n,i=r.children,l=r.className,s=r.color,d=r.style;return e(o,{className:"typography-".concat(a," text-").concat(s," ").concat(l),style:d,children:i})},M=function(t){var a=t.tabs,n=t.initialTab,o=d(void 0===n?0:n),i=o[0],l=o[1];return r("div",{className:"tabs",children:[e("div",{className:"tab-buttons",children:a.map((function(r,t){return e("button",{className:t===i?"active":"",onClick:function(){return l(t)},children:r.label},t)}))}),e("div",{className:"tab-content",children:a[i].content})]})},j=n(["absolute inset-y-0 right-0 flex items-center justify-center"],{variants:{size:{sm:"mr-2",md:"mr-3",lg:"mr-4"}},defaultVariants:{size:"md"}}),E=n(["transition-all"],{variants:{size:{sm:"size-[14px]",md:"size-5",lg:"size-6"},disabled:{true:"fill-input-text-disabled",false:"fill-input-text"},isFocus:{true:"fill-input-text-active rotate-180",false:""}},defaultVariants:{size:"md",disabled:!1,isFocus:!1}}),T=n([],{variants:{size:{sm:"pe-[30px]",md:"pe-[40px]",lg:"pe-[48px]"}},defaultVariants:{size:"md"}}),V=function(t){var a=t.id,n=t.options,o=t.value,i=t.label,l=t.size,s=void 0===l?"md":l,v=t.rounded,h=void 0===v?"normal":v,g=t.variant,m=void 0===g?"outline":g,y=t.helperText,x=t.errorMessage,w=t.fullwidth,z=void 0===w||w,I=t.disabled,C=void 0!==I&&I,O=t.error,M=void 0!==O&&O,V=t.filterMode,L=void 0!==V&&V,R=t.required,S=void 0===R||R,D=t.onChangeText,F=t.onSelect,Z=f(t,["id","options","value","label","size","rounded","variant","helperText","errorMessage","fullwidth","disabled","error","filterMode","required","onChangeText","onSelect"]),q=a||"".concat(i,"-select"),B=d(!1),P=B[0],A=B[1],H=d(null),U=H[0],Y=H[1],G=d(""),J=G[0],K=G[1];c((function(){o&&!U&&Y(o)}),[o,U]);var Q=u((function(e){null==D||D(e),K(e.target.value)}),[D]),W=u((function(e){Y(e),K(e.label),null==F||F(e)}),[F]),X=p((function(){return n.filter((function(e){var r;return!L||(null===(r=e.label)||void 0===r?void 0:r.toLowerCase().includes(null==J?void 0:J.toLowerCase()))}))}),[n,L,J]);return r("div",{className:"relative ".concat(z?"w-full":""),children:[e(k,b({},Z,{readOnly:!L,value:J,onChange:Q,label:i,placeholder:" ",type:"text",rounded:h,variant:m,helperText:y,errorMessage:x,fullwidth:z,error:M,required:S,id:q,disabled:C,hasClearIcon:!1,size:s,className:T({size:s}),onFocus:function(){return A(!0)},onBlur:function(){return A(!1)},endIcon:e("div",{className:j({size:s}),children:e(N,{className:E({size:s,isFocus:P})})})})),P&&r("ul",{className:"absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-md z-10 max-h-60 overflow-y-auto",children:[X.map((function(r){return e("li",{onMouseDown:function(){return W(r)},className:"px-4 py-2 hover:bg-gray-100 cursor-pointer ".concat((null==U?void 0:U.value)===r.value?" bg-gray-200":""),children:r.label},r.value)})),0===X.length&&e("li",{className:"px-4 py-14 text-center text-input-text",children:"Not found"})]})]})},L=function(e){return String(e).length>10?e/1e3:e},R=function(e){var r=new Date(e);return r.setHours(0,0,0,0),r},S=function(e){var r=new Date(e);return r.setHours(23,59,59,999),r},D=function(){var e=R(new Date);return{startTime:e,endTime:S(e)}},F=function(e){var r=Date.UTC(e.getFullYear(),e.getMonth(),e.getDate(),e.getHours(),e.getMinutes(),e.getSeconds());return L(r)};export{h as Button,V as Dropdown,g as Table,M as Tabs,O as Text,k as TextInput,S as getEndDateOfDay,R as getStartDateOfDay,D as getStartEndTimestampOfDay,F as getTimestampUTC,L as resloveTimestamp};
 //# sourceMappingURL=bundle.js.map