@sunggang/ui-lib 0.4.24 → 0.4.25

package/DataTable.cjs.js

@@ -167,7 +167,7 @@ var DropdownMenuItem = /*#__PURE__*/ React__namespace.forwardRef(function(_param
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx(DropdownMenuPrimitive__namespace.Item, _object_spread$1({
         ref: ref,
-        className: utils.cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className)
+        className: utils.cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 dark:focus:bg-slate-800 dark:focus:text-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className)
     }, props));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive__namespace.Item.displayName;
@@ -179,7 +179,7 @@ var DropdownMenuCheckboxItem = /*#__PURE__*/ React__namespace.forwardRef(functio
     ]);
     return /*#__PURE__*/ jsxRuntime.jsxs(DropdownMenuPrimitive__namespace.CheckboxItem, _object_spread_props(_object_spread$1({
         ref: ref,
-        className: utils.cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+        className: utils.cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 dark:focus:bg-slate-800 dark:focus:text-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
         checked: checked
     }, props), {
         children: [

package/DataTable.esm.js

@@ -143,7 +143,7 @@ var DropdownMenuItem = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     ]);
     return /*#__PURE__*/ jsx(DropdownMenuPrimitive.Item, _object_spread$1({
         ref: ref,
-        className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className)
+        className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 dark:focus:bg-slate-800 dark:focus:text-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className)
     }, props));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
@@ -155,7 +155,7 @@ var DropdownMenuCheckboxItem = /*#__PURE__*/ React.forwardRef(function(_param, r
     ]);
     return /*#__PURE__*/ jsxs(DropdownMenuPrimitive.CheckboxItem, _object_spread_props(_object_spread$1({
         ref: ref,
-        className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+        className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 dark:focus:bg-slate-800 dark:focus:text-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
         checked: checked
     }, props), {
         children: [

package/Modal.cjs.js

@@ -161,7 +161,8 @@ var Modal = function(param) {
         })
     });
 };
+var Modal$1 = Modal;
 
 exports.ErrorContent = ErrorContent;
-exports.Modal = Modal;
+exports.Modal = Modal$1;
 exports.v4 = v4;

package/Modal.esm.js

@@ -159,5 +159,6 @@ var Modal = function(param) {
         })
     });
 };
+var Modal$1 = Modal;
 
-export { ErrorContent as E, Modal as M, v4 as v };
+export { ErrorContent as E, Modal$1 as M, v4 as v };

package/baseSwitch.cjs.js

@@ -23561,5 +23561,4 @@ exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
 exports.Textarea = Textarea;
-exports.useInjectGlobalCSS = useInjectGlobalCSS;
 exports.validateMsg = validateMsg;

package/baseSwitch.esm.js

@@ -23514,4 +23514,4 @@ var BaseSwitch = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     });
 });
 
-export { BaseSwitch as B, City as C, FieldLabel as F, Row as R, Select as S, Textarea as T, SelectGroup as a, SelectValue as b, SelectTrigger as c, SelectContent as d, SelectLabel as e, SelectItem as f, SelectSeparator as g, SelectScrollUpButton as h, SelectScrollDownButton as i, Fields as j, CustomUploadField as k, Form as l, useInjectGlobalCSS as u, validateMsg as v };
+export { BaseSwitch as B, City as C, FieldLabel as F, Row as R, Select as S, Textarea as T, SelectGroup as a, SelectValue as b, SelectTrigger as c, SelectContent as d, SelectLabel as e, SelectItem as f, SelectSeparator as g, SelectScrollUpButton as h, SelectScrollDownButton as i, Fields as j, CustomUploadField as k, Form as l, validateMsg as v };

package/index.cjs.css

@@ -3516,6 +3516,10 @@ video {
 .focus\:bg-accent:focus {
   background-color: hsl(var(--accent));
 }
+.focus\:bg-slate-100:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
+}
 .focus\:text-\[\#fff\]:focus {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -3523,6 +3527,10 @@ video {
 .focus\:text-accent-foreground:focus {
   color: hsl(var(--accent-foreground));
 }
+.focus\:text-slate-900:focus {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -3793,6 +3801,14 @@ video {
 .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
   --tw-enter-translate-y: 0.5rem;
 }
+.dark\:focus\:bg-slate-800:focus:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
+}
+.dark\:focus\:text-slate-100:focus:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
+}
 @media (min-width: 640px) {
 
   .sm\:mx-4 {

package/index.cjs.js

@@ -14,8 +14,6 @@ var react = require('@iconify/react');
 var reactDayPicker = require('react-day-picker');
 var zhTW = require('date-fns/locale/zh-TW');
 var PopoverPrimitive = require('@radix-ui/react-popover');
-var reactDateRange = require('react-date-range');
-var locales = require('react-date-range/dist/locale/index.js');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var reactIcons = require('@radix-ui/react-icons');
 var inputOtp = require('input-otp');
@@ -64,7 +62,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
 var zhTW__default = /*#__PURE__*/_interopDefaultLegacy(zhTW);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
-var locales__namespace = /*#__PURE__*/_interopNamespace(locales);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 
 function _define_property$7(obj, key, value) {
@@ -605,15 +602,15 @@ function DateRangePicker(param) {
     });
 }
 
-function _array_like_to_array$2(arr, len) {
+function _array_like_to_array$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$2(arr) {
+function _array_with_holes$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$2(arr, i) {
+function _iterable_to_array_limit$1(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -637,23 +634,23 @@ function _iterable_to_array_limit$2(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$2() {
+function _non_iterable_rest$1() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$2(arr, i) {
-    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
+function _sliced_to_array$1(arr, i) {
+    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
 }
-function _unsupported_iterable_to_array$2(o, minLen) {
+function _unsupported_iterable_to_array$1(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$1(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
 }
 var SingleDatePicker = function(param) {
     var disable = param.disable, onChange = param.onChange;
-    var _useState = _sliced_to_array$2(React.useState(), 2), date = _useState[0], setDate = _useState[1];
+    var _useState = _sliced_to_array$1(React.useState(), 2), date = _useState[0], setDate = _useState[1];
     var handleDate = function(newDate) {
         if (newDate) {
             setDate(newDate);
@@ -693,164 +690,6 @@ var SingleDatePicker = function(param) {
     });
 };
 
-/**
- * React Date Range CSS styles as string constants
- * This allows the component to inject styles dynamically without requiring external CSS imports
- */ // React Date Range main styles
-var REACT_DATE_RANGE_STYLES_CSS = ".rdrCalendarWrapper {\n  box-sizing: border-box;\n  background: #ffffff;\n  display: inline-flex;\n  flex-direction: column;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.rdrDateDisplay {\n  display: flex;\n  justify-content: space-between;\n}\n\n.rdrDateDisplayItem {\n  flex: 1 1;\n  width: 0;\n  text-align: center;\n  color: inherit;\n}\n\n.rdrDateDisplayItem + .rdrDateDisplayItem {\n  margin-left: 0.833em;\n}\n\n.rdrDateDisplayItem input {\n  text-align: inherit;\n}\n\n.rdrDateDisplayItem input:disabled {\n  cursor: default;\n}\n\n.rdrDateDisplayItemActive {\n}\n\n.rdrMonthAndYearWrapper {\n  box-sizing: inherit;\n  display: flex;\n  justify-content: space-between;\n}\n\n.rdrMonthAndYearPickers {\n  flex: 1 1 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.rdrMonthPicker {\n}\n\n.rdrYearPicker {\n}\n\n.rdrNextPrevButton {\n  box-sizing: inherit;\n  cursor: pointer;\n  outline: none;\n}\n\n.rdrPprevButton {\n}\n\n.rdrNextButton {\n}\n\n.rdrMonths {\n  display: flex;\n}\n\n.rdrMonthsVertical {\n  flex-direction: column;\n}\n\n.rdrMonthsHorizontal > div > div > div {\n  display: flex;\n  flex-direction: row;\n}\n\n.rdrMonth {\n  width: 27.667em;\n}\n\n.rdrWeekDays {\n  display: flex;\n}\n\n.rdrWeekDay {\n  flex-basis: calc(100% / 7);\n  box-sizing: inherit;\n  text-align: center;\n}\n\n.rdrDays {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.rdrDateDisplayWrapper {\n}\n\n.rdrMonthName {\n}\n\n.rdrInfiniteMonths {\n  overflow: auto;\n}\n\n.rdrDateRangeWrapper {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.rdrDateInput {\n  position: relative;\n}\n\n.rdrDateInput input {\n  outline: none;\n}\n\n.rdrDateInput .rdrWarning {\n  position: absolute;\n  font-size: 1.6em;\n  line-height: 1.6em;\n  top: 0;\n  right: 0.25em;\n  color: #ff0000;\n}\n\n.rdrDay {\n  box-sizing: inherit;\n  width: calc(100% / 7);\n  position: relative;\n  font: inherit;\n  cursor: pointer;\n}\n\n.rdrDayNumber {\n  display: block;\n  position: relative;\n}\n\n.rdrDayNumber span {\n  color: #1d2429;\n}\n\n.rdrDayDisabled {\n  cursor: not-allowed;\n}\n\n@supports (-ms-ime-align: auto) {\n  .rdrDay {\n    flex-basis: 14.285% !important;\n  }\n}\n\n.rdrSelected,\n.rdrInRange,\n.rdrStartEdge,\n.rdrEndEdge {\n  pointer-events: none;\n}\n\n.rdrInRange {\n}\n\n.rdrDayStartPreview,\n.rdrDayInPreview,\n.rdrDayEndPreview {\n  pointer-events: none;\n}\n\n.rdrDayHovered {\n}\n\n.rdrDayActive {\n}\n\n.rdrDateRangePickerWrapper {\n  display: inline-flex;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.rdrDefinedRangesWrapper {\n}\n\n.rdrStaticRanges {\n  display: flex;\n  flex-direction: column;\n}\n\n.rdrStaticRange {\n  font-size: inherit;\n}\n\n.rdrStaticRangeLabel {\n}\n\n.rdrInputRanges {\n}\n\n.rdrInputRange {\n  display: flex;\n}\n\n.rdrInputRangeInput {\n}";
-// React Date Range theme (default) styles
-var REACT_DATE_RANGE_THEME_CSS = ".rdrCalendarWrapper{\n  color: #000000;\n  font-size: 12px;\n}\n\n.rdrDateDisplayWrapper{\n  background-color: rgb(239, 242, 247);\n}\n\n.rdrDateDisplay{\n  margin: 0.833em;\n}\n\n.rdrDateDisplayItem{\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);\n  border: 1px solid transparent;\n}\n\n.rdrDateDisplayItem input{\n    cursor: pointer;\n    height: 2.5em;\n    line-height: 2.5em;\n    border: 0px;\n    background: transparent;\n    width: 100%;\n    color: #849095;\n  }\n\n.rdrDateDisplayItemActive{\n  border-color: currentColor;\n}\n\n.rdrDateDisplayItemActive input{\n    color: #7d888d\n  }\n\n.rdrMonthAndYearWrapper {\n  align-items: center;\n  height: 60px;\n  padding-top: 10px;\n}\n\n.rdrMonthAndYearPickers{\n  font-weight: 600;\n}\n\n.rdrMonthAndYearPickers select{\n    -moz-appearance: none;\n         appearance: none;\n    -webkit-appearance: none;\n    border: 0;\n    background: transparent;\n    padding: 10px 30px 10px 10px;\n    border-radius: 4px;\n    outline: 0;\n    color: #3e484f;\n    background: url(\"data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>\") no-repeat;\n    background-position: right 8px center;\n    cursor: pointer;\n    text-align: center\n  }\n\n.rdrMonthAndYearPickers select:hover{\n      background-color: rgba(0,0,0,0.07);\n    }\n\n.rdrMonthPicker, .rdrYearPicker{\n  margin: 0 5px\n}\n\n.rdrNextPrevButton {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: 0 0.833em;\n  padding: 0;\n  border: 0;\n  border-radius: 5px;\n  background: #EFF2F7\n}\n\n.rdrNextPrevButton:hover{\n    background: #E1E7F0;\n  }\n\n.rdrNextPrevButton i {\n    display: block;\n    width: 0;\n    height: 0;\n    padding: 0;\n    text-align: center;\n    border-style: solid;\n    margin: auto;\n    transform: translate(-3px, 0px);\n  }\n\n.rdrPprevButton i {\n    border-width: 4px 6px 4px 4px;\n    border-color: transparent rgb(52, 73, 94) transparent transparent;\n    transform: translate(-3px, 0px);\n  }\n\n.rdrNextButton i {\n    margin: 0 0 0 7px;\n    border-width: 4px 4px 4px 6px;\n    border-color: transparent transparent transparent rgb(52, 73, 94);\n    transform: translate(3px, 0px);\n  }\n\n.rdrWeekDays {\n  padding: 0 0.833em;\n}\n\n.rdrMonth{\n  padding: 0 0.833em 1.666em 0.833em;\n}\n\n.rdrMonth .rdrWeekDays {\n    padding: 0;\n  }\n\n.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{\n  display: none;\n}\n\n.rdrWeekDay {\n  font-weight: 400;\n  line-height: 2.667em;\n  color: rgb(132, 144, 149);\n}\n\n.rdrDay {\n  background: transparent;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border: 0;\n  padding: 0;\n  line-height: 3.000em;\n  height: 3.000em;\n  text-align: center;\n  color: #1d2429\n}\n\n.rdrDay:focus {\n    outline: 0;\n  }\n\n.rdrDayNumber {\n  outline: 0;\n  font-weight: 300;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  top: 5px;\n  bottom: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.rdrDayToday .rdrDayNumber span{\n  font-weight: 500\n}\n\n.rdrDayToday .rdrDayNumber span:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    left: 50%;\n    transform: translate(-50%, 0);\n    width: 18px;\n    height: 2px;\n    border-radius: 2px;\n    background: #3d91ff;\n  }\n\n.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{\n      background: #fff;\n    }\n\n.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{\n          color: rgba(255, 255, 255, 0.85);\n        }\n\n.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{\n  background: currentColor;\n  position: absolute;\n  top: 5px;\n  left: 0;\n  right: 0;\n  bottom: 5px;\n}\n\n.rdrSelected{\n  left: 2px;\n  right: 2px;\n}\n\n.rdrInRange{}\n\n.rdrStartEdge{\n  border-top-left-radius: 1.042em;\n  border-bottom-left-radius: 1.042em;\n  left: 2px;\n}\n\n.rdrEndEdge{\n  border-top-right-radius: 1.042em;\n  border-bottom-right-radius: 1.042em;\n  right: 2px;\n}\n\n.rdrSelected{\n  border-radius: 1.042em;\n}\n\n.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{\n    border-top-left-radius: 1.042em;\n    border-bottom-left-radius: 1.042em;\n    left: 2px;\n  }\n\n.rdrDayEndOfMonth .rdrInRange,  .rdrDayEndOfMonth .rdrStartEdge,  .rdrDayEndOfWeek .rdrInRange,  .rdrDayEndOfWeek .rdrStartEdge{\n    border-top-right-radius: 1.042em;\n    border-bottom-right-radius: 1.042em;\n    right: 2px;\n  }\n\n.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{\n    border-top-left-radius: 1.333em;\n    border-bottom-left-radius: 1.333em;\n    border-left-width: 1px;\n    left: 0px;\n  }\n\n.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{\n   border-top-right-radius: 1.333em;\n   border-bottom-right-radius: 1.333em;\n   border-right-width: 1px;\n   right: 0px;\n }\n\n.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{\n  background: rgba(255, 255, 255, 0.09);\n  position: absolute;\n  top: 3px;\n  left: 0px;\n  right: 0px;\n  bottom: 3px;\n  pointer-events: none;\n  border: 0px solid currentColor;\n  z-index: 1;\n}\n\n.rdrDayStartPreview{\n  border-top-width: 1px;\n  border-left-width: 1px;\n  border-bottom-width: 1px;\n  border-top-left-radius: 1.333em;\n  border-bottom-left-radius: 1.333em;\n  left: 0px;\n}\n\n.rdrDayInPreview{\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n.rdrDayEndPreview{\n  border-top-width: 1px;\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n  border-top-right-radius: 1.333em;\n  border-bottom-right-radius: 1.333em;\n  right: 2px;\n  right: 0px;\n}\n\n.rdrDefinedRangesWrapper{\n  font-size: 12px;\n  width: 226px;\n  border-right: solid 1px #eff2f7;\n  background: #fff;\n}\n\n.rdrDefinedRangesWrapper .rdrStaticRangeSelected{\n    color: currentColor;\n    font-weight: 600;\n  }\n\n.rdrStaticRange{\n  border: 0;\n  cursor: pointer;\n  display: block;\n  outline: 0;\n  border-bottom: 1px solid #eff2f7;\n  padding: 0;\n  background: #fff\n}\n\n.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{\n      background: #eff2f7;\n    }\n\n.rdrStaticRangeLabel{\n  display: block;\n  outline: 0;\n  line-height: 18px;\n  padding: 10px 20px;\n  text-align: left;\n}\n\n.rdrInputRanges{\n  padding: 10px 0;\n}\n\n.rdrInputRange{\n  align-items: center;\n  padding: 5px 20px;\n}\n\n.rdrInputRangeInput{\n  width: 30px;\n  height: 30px;\n  line-height: 30px;\n  border-radius: 4px;\n  text-align: center;\n  border: solid 1px rgb(222, 231, 235);\n  margin-right: 10px;\n  color: rgb(108, 118, 122)\n}\n\n.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{\n    border-color: rgb(180, 191, 196);\n    outline: 0;\n    color: #333;\n  }\n\n.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{\n  content: '';\n  border: 1px solid currentColor;\n  border-radius: 1.333em;\n  position: absolute;\n  top: -2px;\n  bottom: -2px;\n  left: 0px;\n  right: 0px;\n  background: transparent;\n}\n\n.rdrDayPassive{\n  pointer-events: none;\n}\n\n.rdrDayPassive .rdrDayNumber span{\n    color: #d5dce0;\n  }\n\n.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{\n    display: none;\n  }\n\n.rdrDayDisabled {\n  background-color: rgb(248, 248, 248);\n}\n\n.rdrDayDisabled .rdrDayNumber span{\n    color: #aeb9bf;\n  }\n\n.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{\n    filter: grayscale(100%) opacity(60%);\n  }\n\n.rdrMonthName{\n  text-align: left;\n  font-weight: 600;\n  color: #849095;\n  padding: 0.833em;\n}";
-// Combined CSS (styles + theme)
-var REACT_DATE_RANGE_COMBINED_CSS = REACT_DATE_RANGE_STYLES_CSS + "\n\n" + REACT_DATE_RANGE_THEME_CSS;
-
-function _array_like_to_array$1(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes$1(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit$1(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest$1() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array$1(arr, i) {
-    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
-}
-function _unsupported_iterable_to_array$1(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$1(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
-}
-var ReactDateRange = function(param) {
-    var className = param.className, item = param.item, onChange = param.onChange, dates = param.dates, date = param.date;
-    // 動態注入 React Date Range CSS，避免外部專案需要手動 import CSS
-    baseSwitch.useInjectGlobalCSS(REACT_DATE_RANGE_COMBINED_CSS, "react-date-range-styles");
-    var _useState = _sliced_to_array$1(React.useState("zhTW"), 1), locale = _useState[0];
-    var _useState1 = _sliced_to_array$1(React.useState(null), 2), calendarData = _useState1[0], setCalendarData = _useState1[1];
-    var _useState2 = _sliced_to_array$1(React.useState({
-        startDate: new Date(),
-        endDate: dateFns.addDays(new Date(), 7),
-        key: "selection"
-    }), 2), range = _useState2[0], setRange = _useState2[1];
-    var _useState3 = _sliced_to_array$1(React.useState(false), 2), open = _useState3[0], setOpen = _useState3[1];
-    var refOne = React.useRef(null);
-    var hideOnEscape = function(e) {
-        if (e.key === "Escape") {
-            setOpen(false);
-        }
-    };
-    var hideOnClickOutside = function(e) {
-        if (refOne.current && !refOne.current.contains(e.target)) {
-            setOpen(false);
-        }
-    };
-    React.useEffect(function() {
-        setCalendarData(date || null);
-    }, [
-        date
-    ]);
-    React.useEffect(function() {
-        if (!dates) return;
-        setRange(dates);
-    }, [
-        dates
-    ]);
-    React.useEffect(function() {
-        document.addEventListener("keydown", hideOnEscape, true);
-        document.addEventListener("click", hideOnClickOutside, true);
-        return function() {
-            document.removeEventListener("keydown", hideOnEscape, true);
-            document.removeEventListener("click", hideOnClickOutside, true);
-        };
-    }, []);
-    var formatDates = function() {
-        if (!range) return;
-        var startDate = range.startDate, endDate = range.endDate;
-        return "".concat(dateFns.format(startDate, "yyyy-MM-dd"), " ~ ").concat(dateFns.format(endDate, "yyyy-MM-dd"));
-    };
-    var formatDate = calendarData ? dateFns.format(calendarData, (item === null || item === void 0 ? void 0 : item.dateDisplayFormat) || "yyyy-MM-dd") : "";
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: [
-            className,
-            "relative"
-        ].join(" "),
-        children: [
-            (item === null || item === void 0 ? void 0 : item.label) && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: "text-gray-700 font-medium mb-2 h-6",
-                children: item === null || item === void 0 ? void 0 : item.label
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx("input", {
-                className: "border-solid border rounded p-2 h-10 w-full timePicker border-gray-300",
-                name: item === null || item === void 0 ? void 0 : item.name,
-                onClick: function() {
-                    return setOpen(function(openState) {
-                        return !openState;
-                    });
-                },
-                placeholder: item === null || item === void 0 ? void 0 : item.placeholder,
-                value: (item === null || item === void 0 ? void 0 : item.type) === "date" ? formatDate : formatDates(),
-                autoComplete: "off"
-            }),
-            open && /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "absolute top-[72px] left-0 z-50 shadow-md",
-                ref: refOne,
-                children: [
-                    open && (item === null || item === void 0 ? void 0 : item.type) === "date" && /*#__PURE__*/ jsxRuntime.jsx(reactDateRange.Calendar, {
-                        data: calendarData,
-                        locale: locales__namespace[locale],
-                        dateDisplayFormat: item === null || item === void 0 ? void 0 : item.dateDisplayFormat,
-                        onChange: function(value) {
-                            setCalendarData(value);
-                            if (onChange) onChange(value);
-                            setOpen(false);
-                        }
-                    }),
-                    open && (item === null || item === void 0 ? void 0 : item.type) === "dateRange" && /*#__PURE__*/ jsxRuntime.jsx(reactDateRange.DateRange, {
-                        editableDateInputs: true,
-                        onChange: function(value) {
-                            setRange(value.selection);
-                            if (onChange) onChange(value.selection);
-                        },
-                        ranges: [
-                            range
-                        ],
-                        locale: locales__namespace[locale],
-                        dateDisplayFormat: "yyyy.MM.dd"
-                    })
-                ]
-            })
-        ]
-    });
-};
-
 function _define_property$4(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -2163,7 +2002,6 @@ exports.InputOTPGroup = InputOTPGroup;
 exports.InputOTPSeparator = InputOTPSeparator;
 exports.InputOTPSlot = InputOTPSlot;
 exports.InputOTPs = InputOTPs;
-exports.ReactDateRange = ReactDateRange;
 exports.Regex = Regex;
 exports.SingleDatePicker = SingleDatePicker;
 exports.Spin = Spin;

package/index.esm.css

@@ -3516,6 +3516,10 @@ video {
 .focus\:bg-accent:focus {
   background-color: hsl(var(--accent));
 }
+.focus\:bg-slate-100:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
+}
 .focus\:text-\[\#fff\]:focus {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -3523,6 +3527,10 @@ video {
 .focus\:text-accent-foreground:focus {
   color: hsl(var(--accent-foreground));
 }
+.focus\:text-slate-900:focus {
+  --tw-text-opacity: 1;
+  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
+}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -3793,6 +3801,14 @@ video {
 .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
   --tw-enter-translate-y: 0.5rem;
 }
+.dark\:focus\:bg-slate-800:focus:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
+}
+.dark\:focus\:text-slate-100:focus:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
+}
 @media (min-width: 640px) {
 
   .sm\:mx-4 {

package/index.esm.js

@@ -2,19 +2,16 @@ import { b as buttonVariants, B as Button } from './input.esm.js';
 export { B as Button, I as Input, b as buttonVariants } from './input.esm.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect, useMemo, createContext, useContext, useCallback, forwardRef } from 'react';
+import React__default, { useState, useEffect, useMemo, createContext, useContext, useCallback, forwardRef, useRef } from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { c as cn } from './utils.esm.js';
-import { u as useInjectGlobalCSS } from './baseSwitch.esm.js';
 export { B as BaseSwitch, S as Select, d as SelectContent, a as SelectGroup, f as SelectItem, e as SelectLabel, i as SelectScrollDownButton, h as SelectScrollUpButton, g as SelectSeparator, c as SelectTrigger, b as SelectValue, v as validateMsg } from './baseSwitch.esm.js';
-import { format, addDays } from 'date-fns';
+import { format } from 'date-fns';
 import { Calendar as Calendar$1 } from 'lucide-react';
 import { Icon } from '@iconify/react';
 import { DayPicker } from 'react-day-picker';
 import zhTW from 'date-fns/locale/zh-TW';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { Calendar as Calendar$2, DateRange } from 'react-date-range';
-import * as locales from 'react-date-range/dist/locale/index.js';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
 import { OTPInput, OTPInputContext } from 'input-otp';
@@ -576,15 +573,15 @@ function DateRangePicker(param) {
     });
 }
 
-function _array_like_to_array$2(arr, len) {
+function _array_like_to_array$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$2(arr) {
+function _array_with_holes$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$2(arr, i) {
+function _iterable_to_array_limit$1(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -608,23 +605,23 @@ function _iterable_to_array_limit$2(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$2() {
+function _non_iterable_rest$1() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$2(arr, i) {
-    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
+function _sliced_to_array$1(arr, i) {
+    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
 }
-function _unsupported_iterable_to_array$2(o, minLen) {
+function _unsupported_iterable_to_array$1(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$1(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
 }
 var SingleDatePicker = function(param) {
     var disable = param.disable, onChange = param.onChange;
-    var _useState = _sliced_to_array$2(useState(), 2), date = _useState[0], setDate = _useState[1];
+    var _useState = _sliced_to_array$1(useState(), 2), date = _useState[0], setDate = _useState[1];
     var handleDate = function(newDate) {
         if (newDate) {
             setDate(newDate);
@@ -664,164 +661,6 @@ var SingleDatePicker = function(param) {
     });
 };
 
-/**
- * React Date Range CSS styles as string constants
- * This allows the component to inject styles dynamically without requiring external CSS imports
- */ // React Date Range main styles
-var REACT_DATE_RANGE_STYLES_CSS = ".rdrCalendarWrapper {\n  box-sizing: border-box;\n  background: #ffffff;\n  display: inline-flex;\n  flex-direction: column;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.rdrDateDisplay {\n  display: flex;\n  justify-content: space-between;\n}\n\n.rdrDateDisplayItem {\n  flex: 1 1;\n  width: 0;\n  text-align: center;\n  color: inherit;\n}\n\n.rdrDateDisplayItem + .rdrDateDisplayItem {\n  margin-left: 0.833em;\n}\n\n.rdrDateDisplayItem input {\n  text-align: inherit;\n}\n\n.rdrDateDisplayItem input:disabled {\n  cursor: default;\n}\n\n.rdrDateDisplayItemActive {\n}\n\n.rdrMonthAndYearWrapper {\n  box-sizing: inherit;\n  display: flex;\n  justify-content: space-between;\n}\n\n.rdrMonthAndYearPickers {\n  flex: 1 1 auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.rdrMonthPicker {\n}\n\n.rdrYearPicker {\n}\n\n.rdrNextPrevButton {\n  box-sizing: inherit;\n  cursor: pointer;\n  outline: none;\n}\n\n.rdrPprevButton {\n}\n\n.rdrNextButton {\n}\n\n.rdrMonths {\n  display: flex;\n}\n\n.rdrMonthsVertical {\n  flex-direction: column;\n}\n\n.rdrMonthsHorizontal > div > div > div {\n  display: flex;\n  flex-direction: row;\n}\n\n.rdrMonth {\n  width: 27.667em;\n}\n\n.rdrWeekDays {\n  display: flex;\n}\n\n.rdrWeekDay {\n  flex-basis: calc(100% / 7);\n  box-sizing: inherit;\n  text-align: center;\n}\n\n.rdrDays {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.rdrDateDisplayWrapper {\n}\n\n.rdrMonthName {\n}\n\n.rdrInfiniteMonths {\n  overflow: auto;\n}\n\n.rdrDateRangeWrapper {\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.rdrDateInput {\n  position: relative;\n}\n\n.rdrDateInput input {\n  outline: none;\n}\n\n.rdrDateInput .rdrWarning {\n  position: absolute;\n  font-size: 1.6em;\n  line-height: 1.6em;\n  top: 0;\n  right: 0.25em;\n  color: #ff0000;\n}\n\n.rdrDay {\n  box-sizing: inherit;\n  width: calc(100% / 7);\n  position: relative;\n  font: inherit;\n  cursor: pointer;\n}\n\n.rdrDayNumber {\n  display: block;\n  position: relative;\n}\n\n.rdrDayNumber span {\n  color: #1d2429;\n}\n\n.rdrDayDisabled {\n  cursor: not-allowed;\n}\n\n@supports (-ms-ime-align: auto) {\n  .rdrDay {\n    flex-basis: 14.285% !important;\n  }\n}\n\n.rdrSelected,\n.rdrInRange,\n.rdrStartEdge,\n.rdrEndEdge {\n  pointer-events: none;\n}\n\n.rdrInRange {\n}\n\n.rdrDayStartPreview,\n.rdrDayInPreview,\n.rdrDayEndPreview {\n  pointer-events: none;\n}\n\n.rdrDayHovered {\n}\n\n.rdrDayActive {\n}\n\n.rdrDateRangePickerWrapper {\n  display: inline-flex;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.rdrDefinedRangesWrapper {\n}\n\n.rdrStaticRanges {\n  display: flex;\n  flex-direction: column;\n}\n\n.rdrStaticRange {\n  font-size: inherit;\n}\n\n.rdrStaticRangeLabel {\n}\n\n.rdrInputRanges {\n}\n\n.rdrInputRange {\n  display: flex;\n}\n\n.rdrInputRangeInput {\n}";
-// React Date Range theme (default) styles
-var REACT_DATE_RANGE_THEME_CSS = ".rdrCalendarWrapper{\n  color: #000000;\n  font-size: 12px;\n}\n\n.rdrDateDisplayWrapper{\n  background-color: rgb(239, 242, 247);\n}\n\n.rdrDateDisplay{\n  margin: 0.833em;\n}\n\n.rdrDateDisplayItem{\n  border-radius: 4px;\n  background-color: rgb(255, 255, 255);\n  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);\n  border: 1px solid transparent;\n}\n\n.rdrDateDisplayItem input{\n    cursor: pointer;\n    height: 2.5em;\n    line-height: 2.5em;\n    border: 0px;\n    background: transparent;\n    width: 100%;\n    color: #849095;\n  }\n\n.rdrDateDisplayItemActive{\n  border-color: currentColor;\n}\n\n.rdrDateDisplayItemActive input{\n    color: #7d888d\n  }\n\n.rdrMonthAndYearWrapper {\n  align-items: center;\n  height: 60px;\n  padding-top: 10px;\n}\n\n.rdrMonthAndYearPickers{\n  font-weight: 600;\n}\n\n.rdrMonthAndYearPickers select{\n    -moz-appearance: none;\n         appearance: none;\n    -webkit-appearance: none;\n    border: 0;\n    background: transparent;\n    padding: 10px 30px 10px 10px;\n    border-radius: 4px;\n    outline: 0;\n    color: #3e484f;\n    background: url(\"data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>\") no-repeat;\n    background-position: right 8px center;\n    cursor: pointer;\n    text-align: center\n  }\n\n.rdrMonthAndYearPickers select:hover{\n      background-color: rgba(0,0,0,0.07);\n    }\n\n.rdrMonthPicker, .rdrYearPicker{\n  margin: 0 5px\n}\n\n.rdrNextPrevButton {\n  display: block;\n  width: 24px;\n  height: 24px;\n  margin: 0 0.833em;\n  padding: 0;\n  border: 0;\n  border-radius: 5px;\n  background: #EFF2F7\n}\n\n.rdrNextPrevButton:hover{\n    background: #E1E7F0;\n  }\n\n.rdrNextPrevButton i {\n    display: block;\n    width: 0;\n    height: 0;\n    padding: 0;\n    text-align: center;\n    border-style: solid;\n    margin: auto;\n    transform: translate(-3px, 0px);\n  }\n\n.rdrPprevButton i {\n    border-width: 4px 6px 4px 4px;\n    border-color: transparent rgb(52, 73, 94) transparent transparent;\n    transform: translate(-3px, 0px);\n  }\n\n.rdrNextButton i {\n    margin: 0 0 0 7px;\n    border-width: 4px 4px 4px 6px;\n    border-color: transparent transparent transparent rgb(52, 73, 94);\n    transform: translate(3px, 0px);\n  }\n\n.rdrWeekDays {\n  padding: 0 0.833em;\n}\n\n.rdrMonth{\n  padding: 0 0.833em 1.666em 0.833em;\n}\n\n.rdrMonth .rdrWeekDays {\n    padding: 0;\n  }\n\n.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{\n  display: none;\n}\n\n.rdrWeekDay {\n  font-weight: 400;\n  line-height: 2.667em;\n  color: rgb(132, 144, 149);\n}\n\n.rdrDay {\n  background: transparent;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  border: 0;\n  padding: 0;\n  line-height: 3.000em;\n  height: 3.000em;\n  text-align: center;\n  color: #1d2429\n}\n\n.rdrDay:focus {\n    outline: 0;\n  }\n\n.rdrDayNumber {\n  outline: 0;\n  font-weight: 300;\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  top: 5px;\n  bottom: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.rdrDayToday .rdrDayNumber span{\n  font-weight: 500\n}\n\n.rdrDayToday .rdrDayNumber span:after{\n    content: '';\n    position: absolute;\n    bottom: 4px;\n    left: 50%;\n    transform: translate(-50%, 0);\n    width: 18px;\n    height: 2px;\n    border-radius: 2px;\n    background: #3d91ff;\n  }\n\n.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{\n      background: #fff;\n    }\n\n.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{\n          color: rgba(255, 255, 255, 0.85);\n        }\n\n.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{\n  background: currentColor;\n  position: absolute;\n  top: 5px;\n  left: 0;\n  right: 0;\n  bottom: 5px;\n}\n\n.rdrSelected{\n  left: 2px;\n  right: 2px;\n}\n\n.rdrInRange{}\n\n.rdrStartEdge{\n  border-top-left-radius: 1.042em;\n  border-bottom-left-radius: 1.042em;\n  left: 2px;\n}\n\n.rdrEndEdge{\n  border-top-right-radius: 1.042em;\n  border-bottom-right-radius: 1.042em;\n  right: 2px;\n}\n\n.rdrSelected{\n  border-radius: 1.042em;\n}\n\n.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{\n    border-top-left-radius: 1.042em;\n    border-bottom-left-radius: 1.042em;\n    left: 2px;\n  }\n\n.rdrDayEndOfMonth .rdrInRange,  .rdrDayEndOfMonth .rdrStartEdge,  .rdrDayEndOfWeek .rdrInRange,  .rdrDayEndOfWeek .rdrStartEdge{\n    border-top-right-radius: 1.042em;\n    border-bottom-right-radius: 1.042em;\n    right: 2px;\n  }\n\n.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{\n    border-top-left-radius: 1.333em;\n    border-bottom-left-radius: 1.333em;\n    border-left-width: 1px;\n    left: 0px;\n  }\n\n.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{\n   border-top-right-radius: 1.333em;\n   border-bottom-right-radius: 1.333em;\n   border-right-width: 1px;\n   right: 0px;\n }\n\n.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{\n  background: rgba(255, 255, 255, 0.09);\n  position: absolute;\n  top: 3px;\n  left: 0px;\n  right: 0px;\n  bottom: 3px;\n  pointer-events: none;\n  border: 0px solid currentColor;\n  z-index: 1;\n}\n\n.rdrDayStartPreview{\n  border-top-width: 1px;\n  border-left-width: 1px;\n  border-bottom-width: 1px;\n  border-top-left-radius: 1.333em;\n  border-bottom-left-radius: 1.333em;\n  left: 0px;\n}\n\n.rdrDayInPreview{\n  border-top-width: 1px;\n  border-bottom-width: 1px;\n}\n\n.rdrDayEndPreview{\n  border-top-width: 1px;\n  border-right-width: 1px;\n  border-bottom-width: 1px;\n  border-top-right-radius: 1.333em;\n  border-bottom-right-radius: 1.333em;\n  right: 2px;\n  right: 0px;\n}\n\n.rdrDefinedRangesWrapper{\n  font-size: 12px;\n  width: 226px;\n  border-right: solid 1px #eff2f7;\n  background: #fff;\n}\n\n.rdrDefinedRangesWrapper .rdrStaticRangeSelected{\n    color: currentColor;\n    font-weight: 600;\n  }\n\n.rdrStaticRange{\n  border: 0;\n  cursor: pointer;\n  display: block;\n  outline: 0;\n  border-bottom: 1px solid #eff2f7;\n  padding: 0;\n  background: #fff\n}\n\n.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{\n      background: #eff2f7;\n    }\n\n.rdrStaticRangeLabel{\n  display: block;\n  outline: 0;\n  line-height: 18px;\n  padding: 10px 20px;\n  text-align: left;\n}\n\n.rdrInputRanges{\n  padding: 10px 0;\n}\n\n.rdrInputRange{\n  align-items: center;\n  padding: 5px 20px;\n}\n\n.rdrInputRangeInput{\n  width: 30px;\n  height: 30px;\n  line-height: 30px;\n  border-radius: 4px;\n  text-align: center;\n  border: solid 1px rgb(222, 231, 235);\n  margin-right: 10px;\n  color: rgb(108, 118, 122)\n}\n\n.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{\n    border-color: rgb(180, 191, 196);\n    outline: 0;\n    color: #333;\n  }\n\n.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{\n  content: '';\n  border: 1px solid currentColor;\n  border-radius: 1.333em;\n  position: absolute;\n  top: -2px;\n  bottom: -2px;\n  left: 0px;\n  right: 0px;\n  background: transparent;\n}\n\n.rdrDayPassive{\n  pointer-events: none;\n}\n\n.rdrDayPassive .rdrDayNumber span{\n    color: #d5dce0;\n  }\n\n.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{\n    display: none;\n  }\n\n.rdrDayDisabled {\n  background-color: rgb(248, 248, 248);\n}\n\n.rdrDayDisabled .rdrDayNumber span{\n    color: #aeb9bf;\n  }\n\n.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{\n    filter: grayscale(100%) opacity(60%);\n  }\n\n.rdrMonthName{\n  text-align: left;\n  font-weight: 600;\n  color: #849095;\n  padding: 0.833em;\n}";
-// Combined CSS (styles + theme)
-var REACT_DATE_RANGE_COMBINED_CSS = REACT_DATE_RANGE_STYLES_CSS + "\n\n" + REACT_DATE_RANGE_THEME_CSS;
-
-function _array_like_to_array$1(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes$1(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit$1(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest$1() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array$1(arr, i) {
-    return _array_with_holes$1(arr) || _iterable_to_array_limit$1(arr, i) || _unsupported_iterable_to_array$1(arr, i) || _non_iterable_rest$1();
-}
-function _unsupported_iterable_to_array$1(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$1(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
-}
-var ReactDateRange = function(param) {
-    var className = param.className, item = param.item, onChange = param.onChange, dates = param.dates, date = param.date;
-    // 動態注入 React Date Range CSS，避免外部專案需要手動 import CSS
-    useInjectGlobalCSS(REACT_DATE_RANGE_COMBINED_CSS, "react-date-range-styles");
-    var _useState = _sliced_to_array$1(useState("zhTW"), 1), locale = _useState[0];
-    var _useState1 = _sliced_to_array$1(useState(null), 2), calendarData = _useState1[0], setCalendarData = _useState1[1];
-    var _useState2 = _sliced_to_array$1(useState({
-        startDate: new Date(),
-        endDate: addDays(new Date(), 7),
-        key: "selection"
-    }), 2), range = _useState2[0], setRange = _useState2[1];
-    var _useState3 = _sliced_to_array$1(useState(false), 2), open = _useState3[0], setOpen = _useState3[1];
-    var refOne = useRef(null);
-    var hideOnEscape = function(e) {
-        if (e.key === "Escape") {
-            setOpen(false);
-        }
-    };
-    var hideOnClickOutside = function(e) {
-        if (refOne.current && !refOne.current.contains(e.target)) {
-            setOpen(false);
-        }
-    };
-    useEffect(function() {
-        setCalendarData(date || null);
-    }, [
-        date
-    ]);
-    useEffect(function() {
-        if (!dates) return;
-        setRange(dates);
-    }, [
-        dates
-    ]);
-    useEffect(function() {
-        document.addEventListener("keydown", hideOnEscape, true);
-        document.addEventListener("click", hideOnClickOutside, true);
-        return function() {
-            document.removeEventListener("keydown", hideOnEscape, true);
-            document.removeEventListener("click", hideOnClickOutside, true);
-        };
-    }, []);
-    var formatDates = function() {
-        if (!range) return;
-        var startDate = range.startDate, endDate = range.endDate;
-        return "".concat(format(startDate, "yyyy-MM-dd"), " ~ ").concat(format(endDate, "yyyy-MM-dd"));
-    };
-    var formatDate = calendarData ? format(calendarData, (item === null || item === void 0 ? void 0 : item.dateDisplayFormat) || "yyyy-MM-dd") : "";
-    return /*#__PURE__*/ jsxs("div", {
-        className: [
-            className,
-            "relative"
-        ].join(" "),
-        children: [
-            (item === null || item === void 0 ? void 0 : item.label) && /*#__PURE__*/ jsx("div", {
-                className: "text-gray-700 font-medium mb-2 h-6",
-                children: item === null || item === void 0 ? void 0 : item.label
-            }),
-            /*#__PURE__*/ jsx("input", {
-                className: "border-solid border rounded p-2 h-10 w-full timePicker border-gray-300",
-                name: item === null || item === void 0 ? void 0 : item.name,
-                onClick: function() {
-                    return setOpen(function(openState) {
-                        return !openState;
-                    });
-                },
-                placeholder: item === null || item === void 0 ? void 0 : item.placeholder,
-                value: (item === null || item === void 0 ? void 0 : item.type) === "date" ? formatDate : formatDates(),
-                autoComplete: "off"
-            }),
-            open && /*#__PURE__*/ jsxs("div", {
-                className: "absolute top-[72px] left-0 z-50 shadow-md",
-                ref: refOne,
-                children: [
-                    open && (item === null || item === void 0 ? void 0 : item.type) === "date" && /*#__PURE__*/ jsx(Calendar$2, {
-                        data: calendarData,
-                        locale: locales[locale],
-                        dateDisplayFormat: item === null || item === void 0 ? void 0 : item.dateDisplayFormat,
-                        onChange: function(value) {
-                            setCalendarData(value);
-                            if (onChange) onChange(value);
-                            setOpen(false);
-                        }
-                    }),
-                    open && (item === null || item === void 0 ? void 0 : item.type) === "dateRange" && /*#__PURE__*/ jsx(DateRange, {
-                        editableDateInputs: true,
-                        onChange: function(value) {
-                            setRange(value.selection);
-                            if (onChange) onChange(value.selection);
-                        },
-                        ranges: [
-                            range
-                        ],
-                        locale: locales[locale],
-                        dateDisplayFormat: "yyyy.MM.dd"
-                    })
-                ]
-            })
-        ]
-    });
-};
-
 function _define_property$4(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -2109,4 +1948,4 @@ var InputOTPs = function(param) {
     });
 };
 
-export { Checkbox, DateRangePicker, Drawer, DropDown, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputOTPs, ReactDateRange, Regex, SingleDatePicker, Spin, Switch, verifyId, verifyTaiwanIdIntermediateString, verifyTaxId };
+export { Checkbox, DateRangePicker, Drawer, DropDown, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputOTPs, Regex, SingleDatePicker, Spin, Switch, verifyId, verifyTaiwanIdIntermediateString, verifyTaxId };

package/package.json

@@ -1,6 +1,11 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.4.24",
+  "version": "0.4.25",
+  "sideEffects": [
+    "*.css",
+    "./src/style.css",
+    "./dist/*.css"
+  ],
   "main": "./index.cjs.js",
   "module": "./index.esm.js",
   "types": "./dist/src/index.d.ts",
@@ -11,9 +16,6 @@
       "default": "./index.cjs.js"
     },
     "./style.css": "./dist/index.esm.css",
-    "./styles": "./dist/index.esm.css",
-    "./index.esm.css": "./dist/index.esm.css",
-    "./dist/index.esm.css": "./dist/index.esm.css",
     "./FormProvider": {
       "module": "./FormProvider.esm.js",
       "import": "./FormProvider.cjs.mjs",
@@ -54,6 +56,16 @@
       "import": "./Tabs.cjs.mjs",
       "default": "./Tabs.cjs.js"
     },
+    "./ReactDateRangeCSS": {
+      "import": "./dist/ReactDateRangeCSS.esm.js",
+      "require": "./dist/ReactDateRangeCSS.cjs.js",
+      "types": "./dist/ReactDateRangeCSS.esm.d.ts"
+    },
+    "./ReactDateRange": {
+      "import": "./dist/ReactDateRange.esm.js",
+      "require": "./dist/ReactDateRange.cjs.js",
+      "types": "./dist/ReactDateRange.esm.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "dependencies": {

package/src/ReactDateRange.d.ts

@@ -0,0 +1 @@
+export * from './components/ui/reactDateRange';

package/src/ReactDateRangeCSS.d.ts

@@ -0,0 +1 @@
+export { REACT_DATE_RANGE_STYLES_CSS } from './components/ui/react-date-range-css';

package/src/index.d.ts

@@ -6,7 +6,6 @@ export * from './components/ui/baseSwitch';
 export * from './components/ui/select';
 export * from './components/ui/dateRangePicker';
 export * from './components/ui/singlePicker';
-export * from './components/ui/reactDateRange';
 export * from './components/ui/checkbox';
 export * from './components/ui/inputOtp';
 export * from './lib/Function';