thailife-react 0.0.23 → 0.0.25

package/dist/cjs/index.js

@@ -0,0 +1,508 @@
+'use strict';
+
+var React = require('react');
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "/*! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.left-0{left:0}.left-3{left:.75rem}.right-3{right:.75rem}.top-1\\/2{top:50%}.top-full{top:100%}.z-10{z-index:10}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.ml-1{margin-left:.25rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-3{height:.75rem}.h-3\\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-\\[24px\\]{height:24px}.h-\\[40px\\]{height:40px}.h-\\[44px\\]{height:44px}.h-\\[56px\\]{height:56px}.max-h-60{max-height:15rem}.min-h-\\[44px\\]{min-height:44px}.w-3{width:.75rem}.w-3\\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-80{width:20rem}.w-\\[24px\\]{width:24px}.w-full{width:100%}.max-w-md{max-width:28rem}.-translate-y-1\\/2{--tw-translate-y:-50%}.-translate-y-1\\/2,.rotate-180{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))}.rotate-180{--tw-rotate:180deg}.transform{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))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.overflow-auto{overflow:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-none{border-style:none}.border-\\[\\#CBD4D9\\]{--tw-border-opacity:1;border-color:rgb(203 212 217/var(--tw-border-opacity))}.border-danger{--tw-border-opacity:1;border-color:rgb(255 17 0/var(--tw-border-opacity))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}.border-gray-400{--tw-border-opacity:1;border-color:rgb(156 163 175/var(--tw-border-opacity))}.border-primary{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}.bg-danger{--tw-bg-opacity:1;background-color:rgb(255 17 0/var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity:1;background-color:rgb(0 122 194/var(--tw-bg-opacity))}.bg-primary\\/10{background-color:rgba(0,122,194,.1)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pl-10{padding-left:2.5rem}.pl-12{padding-left:3rem}.pl-14{padding-left:3.5rem}.pr-10{padding-right:2.5rem}.pr-12{padding-right:3rem}.pr-14{padding-right:3.5rem}.pt-2{padding-top:.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\\[18px\\]{font-size:18px}.text-\\[22px\\]{font-size:22px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.text-\\[\\#393C3E\\]{--tw-text-opacity:1;color:rgb(57 60 62/var(--tw-text-opacity))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.text-danger{--tw-text-opacity:1;color:rgb(255 17 0/var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-primary{--tw-text-opacity:1;color:rgb(0 122 194/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-75{opacity:.75}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.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-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}@font-face{font-display:swap;font-family:DB_OZONE_X;font-style:normal;font-weight:400;src:url(../fonts/db_ozone_x/DB_Ozone_X.woff) format(\"woff\"),url(../fonts/db_ozone_x/DB_Ozone_X.ttf) format(\"truetype\")}@font-face{font-display:swap;font-family:DB_OZONE_X;font-style:normal;font-weight:500;src:url(../fonts/db_ozone_x/DB_Ozone_X_Med.woff) format(\"woff\"),url(../fonts/db_ozone_x/DB_Ozone_X_Med.ttf) format(\"truetype\")}@font-face{font-display:swap;font-family:DB_OZONE_X;font-style:normal;font-weight:700;src:url(../fonts/db_ozone_x/DB_Ozone_X_Bd.woff) format(\"woff\"),url(../fonts/db_ozone_x/DB_Ozone_X_Bd.ttf) format(\"truetype\")}body{color:#393c3e;font-family:DB_OZONE_X,sans-serif!important;font-size:22px;font-weight:400}.focus-within\\:border-2:focus-within{border-width:2px}.focus-within\\:border-primary:focus-within{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.hover\\:border-primary:hover{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.hover\\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.hover\\:bg-danger:hover{--tw-bg-opacity:1;background-color:rgb(255 17 0/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-primary:hover{--tw-bg-opacity:1;background-color:rgb(0 122 194/var(--tw-bg-opacity))}.hover\\:bg-primary\\/10:hover{background-color:rgba(0,122,194,.1)}.hover\\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}.hover\\:text-primary:hover{--tw-text-opacity:1;color:rgb(0 122 194/var(--tw-text-opacity))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.focus\\:border-2:focus{border-width:2px}.focus\\:border-danger:focus{--tw-border-opacity:1;border-color:rgb(255 17 0/var(--tw-border-opacity))}.focus\\:border-primary:focus{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.focus\\:bg-gray-100:focus{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2: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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\\:ring-offset-2:focus{--tw-ring-offset-width:2px}.active\\:bg-danger:active{--tw-bg-opacity:1;background-color:rgb(255 17 0/var(--tw-bg-opacity))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\\:border-primary{--tw-border-opacity:1;border-color:rgb(0 122 194/var(--tw-border-opacity))}.peer:focus-visible~.peer-focus-visible\\:ring-2{--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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-primary\\/60{--tw-ring-color:rgba(0,122,194,.6)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}";
+styleInject(css_248z);
+
+const Button = React.forwardRef(({ variant = 'primary', size = 'md', fullWidth = false, loading = false, disabled, className = '', children, type = 'button', onClick, }, ref) => {
+    const baseStyles = 'inline-flex items-center justify-center text-[22px] rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
+    const variants = {
+        primary: 'bg-primary text-white hover:bg-primary-600 active:bg-primary-700',
+        secondary: 'bg-secondary-500 text-white hover:bg-secondary-600 focus:ring-secondary-500 active:bg-secondary-700',
+        outline: 'border border-primary text-primary bg-primary/10 hover:bg-primary/10 focus:ring-primary-500 active:bg-primary-100',
+        ghost: 'text-primar hover:bg-primary-50 focus:ring-primary-500 active:bg-primary-100',
+        danger: 'bg-danger text-white hover:bg-danger active:bg-danger',
+    };
+    const sizes = {
+        sm: 'px-3 h-[40px] text-sm gap-1.5',
+        md: 'px-4 h-[44px] gap-2',
+        lg: 'px-6 h-[56px] gap-2.5',
+    };
+    const widthClass = fullWidth ? 'w-full' : '';
+    return (React.createElement("button", { ref: ref, type: type, disabled: disabled || loading, onClick: onClick, className: `${baseStyles} ${variants[variant]} ${sizes[size]} ${widthClass} ${className}` },
+        loading && (React.createElement("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" },
+            React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }))),
+        children));
+});
+Button.displayName = 'Button';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const Checkbox = React.forwardRef(function CheckboxItem(_a, ref) {
+    var { name, value, label, checked = false, disabled = false, onChange, className } = _a, props = __rest(_a, ["name", "value", "label", "checked", "disabled", "onChange", "className"]);
+    console.log("Checkbox rendering", { name, value, checked });
+    console.log("Input classes applied:", "hidden");
+    console.log("Span classes applied:", [
+        "w-5 h-5 flex items-center justify-center rounded border transition-all ",
+        "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-primary/60",
+        checked
+            ? "border-primary bg-primary"
+            : "border-gray-400 bg-white group-hover:border-primary",
+        disabled ? "" : "shadow-sm",
+    ].join(" "));
+    return (React.createElement("label", { className: `group inline-flex items-center gap-2 select-none ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}` },
+        React.createElement("input", Object.assign({ ref: ref, type: "checkbox", name: name, value: value, checked: checked, disabled: disabled, onChange: (e) => onChange(value, e.target.checked), className: "hidden", "aria-checked": checked }, props, { style: { display: 'none' } })),
+        React.createElement("span", { className: [
+                "w-5 h-5 flex items-center justify-center rounded border transition-all ",
+                "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-primary/60",
+                checked
+                    ? "border-primary bg-primary"
+                    : "border-gray-400 bg-white group-hover:border-primary",
+                disabled ? "" : "shadow-sm",
+            ].join(" "), role: "presentation" }, checked && (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-3.5 h-3.5 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false" },
+            React.createElement("polyline", { points: "20 6 9 17 4 12" })))),
+        label && (React.createElement("span", { className: `text-sm transition-colors ${checked ? "text-primary" : "text-gray-700"} ${className !== null && className !== void 0 ? className : ""}` }, label))));
+});
+Checkbox.displayName = "Checkbox";
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var dayjs_min$1 = {exports: {}};
+
+var dayjs_min = dayjs_min$1.exports;
+
+var hasRequiredDayjs_min;
+
+function requireDayjs_min () {
+	if (hasRequiredDayjs_min) return dayjs_min$1.exports;
+	hasRequiredDayjs_min = 1;
+	(function (module, exports) {
+		!function(t,e){module.exports=e();}(dayjs_min,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,true),this.parse(t),this.$x=this.$x||t.x||{},this[p]=true;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,false)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case "YY":return String(e.$y).slice(-2);case "YYYY":return b.s(e.$y,4,"0");case "M":return a+1;case "MM":return b.s(a+1,2,"0");case "MMM":return h(n.monthsShort,a,c,3);case "MMMM":return h(c,a);case "D":return e.$D;case "DD":return b.s(e.$D,2,"0");case "d":return String(e.$W);case "dd":return h(n.weekdaysMin,e.$W,o,2);case "ddd":return h(n.weekdaysShort,e.$W,o,3);case "dddd":return o[e.$W];case "H":return String(s);case "HH":return b.s(s,2,"0");case "h":return d(1);case "hh":return d(2);case "a":return $(s,u,true);case "A":return $(s,u,false);case "m":return String(u);case "mm":return b.s(u,2,"0");case "s":return String(e.$s);case "ss":return b.s(e.$s,2,"0");case "SSS":return b.s(e.$ms,3,"0");case "Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,true);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=true),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
+	} (dayjs_min$1));
+	return dayjs_min$1.exports;
+}
+
+var dayjs_minExports = requireDayjs_min();
+var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
+
+var localeData$2 = {exports: {}};
+
+var localeData$1 = localeData$2.exports;
+
+var hasRequiredLocaleData;
+
+function requireLocaleData () {
+	if (hasRequiredLocaleData) return localeData$2.exports;
+	hasRequiredLocaleData = 1;
+	(function (module, exports) {
+		!function(n,e){module.exports=e();}(localeData$1,(function(){return function(n,e,t){var r=e.prototype,o=function(n){return n&&(n.indexOf?n:n.s)},u=function(n,e,t,r,u){var i=n.name?n:n.$locale(),a=o(i[e]),s=o(i[t]),f=a||s.map((function(n){return n.slice(0,r)}));if(!u)return f;var d=i.weekStart;return f.map((function(n,e){return f[(e+(d||0))%7]}))},i=function(){return t.Ls[t.locale()]},a=function(n,e){return n.formats[e]||function(n){return n.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g,(function(n,e,t){return e||t.slice(1)}))}(n.formats[e.toUpperCase()])},s=function(){var n=this;return {months:function(e){return e?e.format("MMMM"):u(n,"months")},monthsShort:function(e){return e?e.format("MMM"):u(n,"monthsShort","months",3)},firstDayOfWeek:function(){return n.$locale().weekStart||0},weekdays:function(e){return e?e.format("dddd"):u(n,"weekdays")},weekdaysMin:function(e){return e?e.format("dd"):u(n,"weekdaysMin","weekdays",2)},weekdaysShort:function(e){return e?e.format("ddd"):u(n,"weekdaysShort","weekdays",3)},longDateFormat:function(e){return a(n.$locale(),e)},meridiem:this.$locale().meridiem,ordinal:this.$locale().ordinal}};r.localeData=function(){return s.bind(this)()},t.localeData=function(){var n=i();return {firstDayOfWeek:function(){return n.weekStart||0},weekdays:function(){return t.weekdays()},weekdaysShort:function(){return t.weekdaysShort()},weekdaysMin:function(){return t.weekdaysMin()},months:function(){return t.months()},monthsShort:function(){return t.monthsShort()},longDateFormat:function(e){return a(n,e)},meridiem:n.meridiem,ordinal:n.ordinal}},t.months=function(){return u(i(),"months")},t.monthsShort=function(){return u(i(),"monthsShort","months",3)},t.weekdays=function(n){return u(i(),"weekdays",null,null,n)},t.weekdaysShort=function(n){return u(i(),"weekdaysShort","weekdays",3,n)},t.weekdaysMin=function(n){return u(i(),"weekdaysMin","weekdays",2,n)};}})); 
+	} (localeData$2));
+	return localeData$2.exports;
+}
+
+var localeDataExports = requireLocaleData();
+var localeData = /*@__PURE__*/getDefaultExportFromCjs(localeDataExports);
+
+var buddhistEra$2 = {exports: {}};
+
+var buddhistEra$1 = buddhistEra$2.exports;
+
+var hasRequiredBuddhistEra;
+
+function requireBuddhistEra () {
+	if (hasRequiredBuddhistEra) return buddhistEra$2.exports;
+	hasRequiredBuddhistEra = 1;
+	(function (module, exports) {
+		!function(t,e){module.exports=e();}(buddhistEra$1,(function(){return function(t,e){var n=e.prototype,i=n.format;n.format=function(t){var e=this,n=(t||"YYYY-MM-DDTHH:mm:ssZ").replace(/(\[[^\]]+])|BBBB|BB/g,(function(t,n){var i,o=String(e.$y+543),f="BB"===t?[o.slice(-2),2]:[o,4];return n||(i=e.$utils()).s.apply(i,f.concat(["0"]))}));return i.bind(this)(n)};}})); 
+	} (buddhistEra$2));
+	return buddhistEra$2.exports;
+}
+
+var buddhistEraExports = requireBuddhistEra();
+var buddhistEra = /*@__PURE__*/getDefaultExportFromCjs(buddhistEraExports);
+
+var th$1 = {exports: {}};
+
+var th = th$1.exports;
+
+var hasRequiredTh;
+
+function requireTh () {
+	if (hasRequiredTh) return th$1.exports;
+	hasRequiredTh = 1;
+	(function (module, exports) {
+		!function(_,e){module.exports=e(requireDayjs_min());}(th,(function(_){function e(_){return _&&"object"==typeof _&&"default"in _?_:{default:_}}var t=e(_),d={name:"th",weekdays:"อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัสบดี_ศุกร์_เสาร์".split("_"),weekdaysShort:"อาทิตย์_จันทร์_อังคาร_พุธ_พฤหัส_ศุกร์_เสาร์".split("_"),weekdaysMin:"อา._จ._อ._พ._พฤ._ศ._ส.".split("_"),months:"มกราคม_กุมภาพันธ์_มีนาคม_เมษายน_พฤษภาคม_มิถุนายน_กรกฎาคม_สิงหาคม_กันยายน_ตุลาคม_พฤศจิกายน_ธันวาคม".split("_"),monthsShort:"ม.ค._ก.พ._มี.ค._เม.ย._พ.ค._มิ.ย._ก.ค._ส.ค._ก.ย._ต.ค._พ.ย._ธ.ค.".split("_"),formats:{LT:"H:mm",LTS:"H:mm:ss",L:"DD/MM/YYYY",LL:"D MMMM YYYY",LLL:"D MMMM YYYY เวลา H:mm",LLLL:"วันddddที่ D MMMM YYYY เวลา H:mm"},relativeTime:{future:"อีก %s",past:"%sที่แล้ว",s:"ไม่กี่วินาที",m:"1 นาที",mm:"%d นาที",h:"1 ชั่วโมง",hh:"%d ชั่วโมง",d:"1 วัน",dd:"%d วัน",M:"1 เดือน",MM:"%d เดือน",y:"1 ปี",yy:"%d ปี"},ordinal:function(_){return _+"."}};return t.default.locale(d,null,true),d})); 
+	} (th$1));
+	return th$1.exports;
+}
+
+requireTh();
+
+var en$1 = {exports: {}};
+
+var en = en$1.exports;
+
+var hasRequiredEn;
+
+function requireEn () {
+	if (hasRequiredEn) return en$1.exports;
+	hasRequiredEn = 1;
+	(function (module, exports) {
+		!function(e,n){module.exports=n();}(en,(function(){return {name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(e){var n=["th","st","nd","rd"],t=e%100;return "["+e+(n[(t-20)%10]||n[t]||n[0])+"]"}}})); 
+	} (en$1));
+	return en$1.exports;
+}
+
+requireEn();
+
+dayjs.extend(localeData);
+dayjs.extend(buddhistEra);
+const Datepicker = React.forwardRef(({ value, defaultValue, onChange, format = 'DD/MM/YYYY', locale = 'th', yearType = 'BE', placeholder, disabled = false, className = '', size = 'md', fullWidth = false, error, helperText, label, required = false, }, ref) => {
+    const [selectedDate, setSelectedDate] = React.useState(value || defaultValue || null);
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [currentMonth, setCurrentMonth] = React.useState(dayjs().locale(locale));
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setSelectedDate(value);
+        }
+    }, [value]);
+    React.useEffect(() => {
+        dayjs.locale(locale);
+        setCurrentMonth(prev => prev.locale(locale));
+    }, [locale]);
+    const handleDateSelect = (date) => {
+        setSelectedDate(date);
+        onChange === null || onChange === void 0 ? void 0 : onChange(date);
+        setIsOpen(false);
+    };
+    const formatDisplayValue = React.useMemo(() => {
+        return (date) => {
+            if (!date)
+                return '';
+            if (yearType === 'BE') {
+                return date.add(543, 'year').format(format);
+            }
+            return date.format(format);
+        };
+    }, [format, yearType]);
+    const parseInputValue = React.useMemo(() => {
+        return (input) => {
+            if (!input)
+                return null;
+            try {
+                let parsed = dayjs(input, format, locale);
+                if (yearType === 'BE' && parsed.isValid()) {
+                    parsed = parsed.subtract(543, 'year');
+                }
+                return parsed.isValid() ? parsed : null;
+            }
+            catch (_a) {
+                return null;
+            }
+        };
+    }, [format, locale, yearType]);
+    const handleInputChange = (e) => {
+        const inputValue = e.target.value;
+        const parsedDate = parseInputValue(inputValue);
+        setSelectedDate(parsedDate);
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsedDate);
+    };
+    const handleInputFocus = () => {
+        setIsOpen(true);
+    };
+    const renderCalendar = () => {
+        const daysInMonth = currentMonth.daysInMonth();
+        const firstDayOfMonth = currentMonth.startOf('month').day();
+        const monthKey = currentMonth.format('YYYY-MM');
+        const days = [];
+        // Previous month days
+        for (let i = 0; i < firstDayOfMonth; i++) {
+            const prevMonth = currentMonth.subtract(1, 'month');
+            const day = prevMonth.daysInMonth() - firstDayOfMonth + i + 1;
+            const date = prevMonth.date(day);
+            days.push(React.createElement("div", { key: `prev-${monthKey}-${i}`, className: "text-gray-400 px-2 text-center cursor-pointer hover:bg-gray-100 rounded-lg", onClick: () => handleDateSelect(date) }, day));
+        }
+        // Current month days
+        for (let day = 1; day <= daysInMonth; day++) {
+            const date = currentMonth.date(day);
+            const isSelected = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.isSame(date, 'day');
+            const isToday = date.isSame(dayjs(), 'day');
+            days.push(React.createElement("div", { key: `current-${monthKey}-${day}`, className: `w-[24px] h-[24px] flex items-center justify-center text-[18px] text-center cursor-pointer hover:bg-primary hover:text-white rounded-lg  ${isSelected ? 'bg-primary text-white ' : ''} ${isToday ? 'text-primary font-bold' : ''}`, onClick: () => handleDateSelect(date) }, day));
+        }
+        // Next month days
+        const remainingCells = 42 - days.length; // 6 rows * 7 days
+        for (let i = 1; i <= remainingCells; i++) {
+            const nextMonth = currentMonth.add(1, 'month');
+            const date = nextMonth.date(i);
+            days.push(React.createElement("div", { key: `next-${monthKey}-${i}`, className: "text-gray-400 px-2 text-center cursor-pointer  hover:bg-gray-100 rounded-lg", onClick: () => handleDateSelect(date) }, i));
+        }
+        return days;
+    };
+    const baseStyles = 'border h-[44px] text-[22px] rounded-lg focus:border-2 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer';
+    const sizes = {
+        sm: 'px-3 h-[40px] text-[22px]',
+        md: 'px-4 h-[44px] text-[22px]',
+        lg: 'px-5 h-[56px] text-[22px]',
+    };
+    const stateStyles = error
+        ? 'border-danger focus:border-danger'
+        : 'border-[#CBD4D9] focus:border-primary hover:border-primary';
+    const widthClass = fullWidth ? 'w-full' : '';
+    return (React.createElement("div", { className: fullWidth ? 'w-full' : '' },
+        label && (React.createElement("label", { className: "block text-2xl font-base text-[#393C3E]" },
+            label,
+            required && React.createElement("span", { className: "text-danger ml-1" }, "*"))),
+        React.createElement("div", { className: "relative" },
+            React.createElement("input", { ref: ref, type: "text", value: formatDisplayValue(selectedDate), onChange: handleInputChange, onFocus: handleInputFocus, placeholder: placeholder, disabled: disabled, className: `${className} ${baseStyles} ${sizes[size]} ${stateStyles} ${widthClass}` }),
+            React.createElement("div", { style: { right: '16px' }, className: 'absolute top-1/2 transform -translate-y-1/2 w-8 h-8 flex items-center justify-center cursor-pointer text-gray-500 hover:text-primary', onClick: () => setIsOpen(true) },
+                React.createElement("svg", { stroke: "currentColor", fill: "currentColor", "stroke-width": "0", viewBox: "0 0 256 256", height: "20px", width: "20px", xmlns: "http://www.w3.org/2000/svg" },
+                    React.createElement("path", { d: "M208,34H182V24a6,6,0,0,0-12,0V34H86V24a6,6,0,0,0-12,0V34H48A14,14,0,0,0,34,48V208a14,14,0,0,0,14,14H208a14,14,0,0,0,14-14V48A14,14,0,0,0,208,34ZM48,46H74V56a6,6,0,0,0,12,0V46h84V56a6,6,0,0,0,12,0V46h26a2,2,0,0,1,2,2V82H46V48A2,2,0,0,1,48,46ZM208,210H48a2,2,0,0,1-2-2V94H210V208A2,2,0,0,1,208,210Z" }))),
+            isOpen && (React.createElement("div", { className: "absolute top-full left-0 mt-1 bg-white border border-[#CBD4D9] rounded-lg z-10 w-80" },
+                React.createElement("div", { className: "p-4" },
+                    React.createElement("div", { className: "flex justify-between items-center mb-1" },
+                        React.createElement("button", { type: "button", onClick: () => setCurrentMonth(prev => prev.subtract(1, 'month')), className: "p-1 hover:bg-gray-100 rounded" },
+                            React.createElement("svg", { stroke: "currentColor", fill: "none", "stroke-width": "1.5", viewBox: "0 0 24 24", "aria-hidden": "true", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
+                                React.createElement("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 19.5 8.25 12l7.5-7.5" }))),
+                        React.createElement("div", { className: "font-base text-primary" }, yearType === "BE" ? currentMonth.add(543, 'year').format('MMMM YYYY') : currentMonth.format('MMMM YYYY')),
+                        React.createElement("button", { type: "button", onClick: () => setCurrentMonth(prev => prev.add(1, 'month')), className: "p-1 hover:bg-gray-100 rounded" },
+                            React.createElement("svg", { stroke: "currentColor", fill: "none", "stroke-width": "1.5", viewBox: "0 0 24 24", "aria-hidden": "true", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
+                                React.createElement("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "m8.25 4.5 7.5 7.5-7.5 7.5" })))),
+                    React.createElement("div", { className: "grid grid-cols-7 gap-1 mb-2" }, dayjs.localeData().weekdaysMin().map((day, index) => (React.createElement("div", { key: `${locale}-${day}-${index}`, className: `px-2 text-center  ${index === 0 ? 'text-danger' : 'text-gray-600'}` }, day)))),
+                    React.createElement("div", { className: "grid grid-cols-7 gap-1" }, renderCalendar()))))),
+        (error || helperText) && (React.createElement("p", { className: `mt-1 text-sm ${error ? 'text-danger' : 'text-gray-500'}` }, error || helperText))));
+});
+Datepicker.displayName = 'Datepicker';
+
+const Input = React.forwardRef(({ label, error, helperText, size = 'md', fullWidth = false, disabled, className = '', leftIcon, rightIcon, type = 'text', placeholder, value, defaultValue, onChange, onBlur, onFocus, name, id, required, readOnly, autoComplete, autoFocus, }, ref) => {
+    const baseStyles = 'border h-[44px] text-[22px] rounded-lg focus:border-2 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed';
+    const sizes = {
+        sm: 'px-3 h-[40px] text-[22px]',
+        md: 'px-4 h-[44px] text-[22px]',
+        lg: 'px-5 h-[56px] text-[22px]',
+    };
+    const iconPadding = {
+        sm: leftIcon ? 'pl-10' : rightIcon ? 'pr-10' : '',
+        md: leftIcon ? 'pl-12' : rightIcon ? 'pr-12' : '',
+        lg: leftIcon ? 'pl-14' : rightIcon ? 'pr-14' : '',
+    };
+    const stateStyles = error
+        ? 'border-danger focus:border-danger'
+        : 'border-[#CBD4D9] focus:border-primary hover:border-primary';
+    const widthClass = fullWidth ? 'w-full' : '';
+    return (React.createElement("div", { className: fullWidth ? 'w-full' : '' },
+        label && (React.createElement("label", { htmlFor: id, className: "block text-2xl font-base text-[#393C3E]" },
+            label,
+            required && React.createElement("span", { className: "text-danger ml-1" }, "*"))),
+        React.createElement("div", { className: "relative" },
+            leftIcon && (React.createElement("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" }, leftIcon)),
+            React.createElement("input", { ref: ref, type: type, id: id, name: name, disabled: disabled, readOnly: readOnly, required: required, autoComplete: autoComplete, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: onChange, onBlur: onBlur, onFocus: onFocus, className: `${className} ${baseStyles} ${sizes[size]} ${iconPadding[size]} ${stateStyles} ${widthClass} ` }),
+            rightIcon && (React.createElement("div", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" }, rightIcon))),
+        (error || helperText) && (React.createElement("p", { className: `mt-1 ${error ? 'text-danger' : 'text-gray-500'}` }, error || helperText))));
+});
+Input.displayName = 'Input';
+
+const Radio = React.forwardRef(function RadioItem(_a, ref) {
+    var { name, value, label, checked = false, disabled = false, onChange, className } = _a, props = __rest(_a, ["name", "value", "label", "checked", "disabled", "onChange", "className"]);
+    return (React.createElement("label", { className: `group inline-flex items-center gap-2 select-none ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}` },
+        React.createElement("input", Object.assign({ ref: ref, type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: (e) => onChange(value, e.target.checked), className: "hidden", "aria-checked": checked }, props, { style: { display: 'none' } })),
+        React.createElement("span", { className: [
+                "w-5 h-5 flex items-center justify-center rounded-full border transition-all ",
+                "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-primary/60",
+                checked
+                    ? "border-primary border-2"
+                    : "border-gray-400 bg-white group-hover:border-primary",
+                disabled ? "" : "shadow-sm",
+            ].join(" "), role: "presentation" }, checked && (React.createElement("span", { className: "w-3 h-3 bg-primary rounded-full", "aria-hidden": "true" }))),
+        label && (React.createElement("span", { className: `transition-colors ${checked ? "text-primary" : "text-gray-700"} ${className !== null && className !== void 0 ? className : ""}` }, label))));
+});
+Radio.displayName = "Radio";
+
+const Select = React.forwardRef(({ options, value, placeholder = 'Select an option', disabled = false, className = '', onChange, }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedValue, setSelectedValue] = React.useState(value || '');
+    const selectRef = React.useRef(null);
+    React.useEffect(() => {
+        setSelectedValue(value || '');
+    }, [value]);
+    const selectedOption = options.find(option => option.value === selectedValue);
+    const handleSelect = (option) => {
+        setSelectedValue(option.value);
+        setIsOpen(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
+    };
+    const handleClickOutside = (event) => {
+        if (selectRef.current && !selectRef.current.contains(event.target)) {
+            setIsOpen(false);
+        }
+    };
+    React.useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    return (React.createElement("div", { ref: ref, className: `relative ${className}` },
+        React.createElement("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `w-full px-4 h-[44px] text-left bg-white border border-gray-300 rounded-md focus:outline-none focus:border-2 focus:border-primary ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} flex items-center justify-between` },
+            React.createElement("div", { className: "flex items-center" },
+                (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.icon) && (React.createElement("span", { className: "mr-2" }, selectedOption.icon)),
+                React.createElement("span", { className: selectedOption ? 'text-gray-900' : 'text-gray-500' }, selectedOption ? selectedOption.label : placeholder)),
+            React.createElement("svg", { className: `w-5 h-5 text-gray-400 transition-transform ${isOpen ? 'transform rotate-180' : ''}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+                React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))),
+        isOpen && (React.createElement("div", { className: "absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto" }, options.map((option) => (React.createElement("button", { key: option.value, type: "button", onClick: () => handleSelect(option), className: `w-full px-4 py-2 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100 flex items-center ${option.value === selectedValue ? 'bg-blue-50 text-primary' : ''}` },
+            option.icon && React.createElement("span", { className: "mr-2" }, option.icon),
+            option.label)))))));
+});
+Select.displayName = 'Select';
+
+const Autocomplete = React.forwardRef(({ options, value, placeholder = 'Search...', disabled = false, className = '', mode = 'single', onChange, filterOptions, }, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [inputValue, setInputValue] = React.useState('');
+    const [selectedValues, setSelectedValues] = React.useState(Array.isArray(value) ? value : value ? [value] : []);
+    const [filteredOptions, setFilteredOptions] = React.useState(options);
+    const [isUserTyping, setIsUserTyping] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const defaultFilterOptions = React.useCallback((options, inputValue) => {
+        return options.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+    }, []);
+    const currentFilterOptions = filterOptions || defaultFilterOptions;
+    // Sync selected values and input value with prop changes
+    React.useEffect(() => {
+        if (value !== undefined) {
+            const newSelectedValues = Array.isArray(value) ? value : value ? [value] : [];
+            setSelectedValues(newSelectedValues);
+            // Only update input value if user is not actively typing
+            if (mode === 'single' && !isUserTyping) {
+                if (newSelectedValues.length > 0) {
+                    const selectedOption = options.find(option => option.value === newSelectedValues[0] || option.label === newSelectedValues[0]);
+                    setInputValue(selectedOption ? selectedOption.label : newSelectedValues[0]);
+                }
+                else {
+                    setInputValue('');
+                }
+            }
+        }
+    }, [value, options, mode, isUserTyping]);
+    React.useEffect(() => {
+        setFilteredOptions(currentFilterOptions(options, inputValue));
+    }, [options, inputValue, currentFilterOptions]);
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        setIsOpen(true);
+        setIsUserTyping(true);
+    };
+    const handleSelect = (option) => {
+        setIsUserTyping(false);
+        console.log('option', option);
+        if (mode === 'single') {
+            const newValue = option.value;
+            setSelectedValues([newValue]);
+            setInputValue(option.label);
+            setIsOpen(false);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+        else {
+            const newSelectedValues = selectedValues.includes(option.value)
+                ? selectedValues.filter(v => v !== option.value)
+                : [...selectedValues, option.value];
+            setSelectedValues(newSelectedValues);
+            setInputValue('');
+            onChange === null || onChange === void 0 ? void 0 : onChange(newSelectedValues);
+        }
+    };
+    const handleRemoveTag = (valueToRemove) => {
+        const newSelectedValues = selectedValues.filter(v => v !== valueToRemove);
+        setSelectedValues(newSelectedValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newSelectedValues);
+    };
+    const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsOpen(false);
+            setIsUserTyping(false);
+        }
+    };
+    React.useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    const selectedOptions = options.filter(option => selectedValues.includes(option.value));
+    return (React.createElement("div", { ref: ref, className: `relative ${className}` },
+        React.createElement("div", { ref: containerRef, className: `w-full min-h-[44px] bg-white border border-gray-300 rounded-lg focus-within:border-2 focus-within:border-primary ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-text'}` },
+            mode === 'multiple' && selectedOptions.length > 0 && (React.createElement("div", { className: "flex flex-wrap gap-1 p-2" }, selectedOptions.map(option => (React.createElement("span", { key: option.value, className: "inline-flex items-center px-2 text-sm bg-blue-100 text-blue-800 rounded-full" },
+                option.icon && React.createElement("span", { className: "mr-1" }, option.icon),
+                option.label,
+                React.createElement("button", { type: "button", onClick: () => handleRemoveTag(option.value), className: "ml-1 text-blue-600 hover:text-blue-800" }, "\u00D7")))))),
+            React.createElement("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, onFocus: () => setIsOpen(true), placeholder: mode === 'multiple' && selectedOptions.length > 0 ? '' : placeholder, disabled: disabled, className: `w-full px-4 text-left bg-transparent border-none outline-none focus:outline-none ${mode === 'multiple' && selectedOptions.length > 0 ? 'h-[44px] pt-2' : 'h-[44px]'}` })),
+        isOpen && filteredOptions.length > 0 && (React.createElement("div", { className: "absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto" }, filteredOptions.map((option) => (React.createElement("button", { key: option.value, type: "button", onMouseDown: (e) => {
+                e.preventDefault();
+                handleSelect(option);
+            }, className: `w-full px-4 py-2 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100 flex items-center ${selectedValues.includes(option.value) ? 'bg-blue-50 text-primary' : ''}` },
+            option.icon && React.createElement("span", { className: "mr-2" }, option.icon),
+            option.label)))))));
+});
+Autocomplete.displayName = 'Autocomplete';
+
+exports.Autocomplete = Autocomplete;
+exports.Button = Button;
+exports.Checkbox = Checkbox;
+exports.Datepicker = Datepicker;
+exports.Input = Input;
+exports.Radio = Radio;
+exports.Select = Select;
+//# sourceMappingURL=index.js.map