@sunggang/ui-lib 0.4.26 → 0.4.27

package/ReactDateRange.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/ReactDateRange";

package/ReactDateRange.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./ReactDateRange.cjs.js').default;

package/ReactDateRange.cjs.js

@@ -0,0 +1,181 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDateRange = require('react-date-range');
+var locales = require('react-date-range/dist/locale/index.js');
+var dateFns = require('date-fns');
+var reactDateRangeCss = require('./react-date-range-css.cjs.js');
+var useInjectCSS = require('./useInjectCSS.cjs.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var locales__namespace = /*#__PURE__*/_interopNamespace(locales);
+
+function _array_like_to_array(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(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(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() {
+    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(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(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(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
+    useInjectCSS.useInjectGlobalCSS(reactDateRangeCss.REACT_DATE_RANGE_COMBINED_CSS, "react-date-range-styles");
+    var _useState = _sliced_to_array(React.useState("zhTW"), 1), locale = _useState[0];
+    var _useState1 = _sliced_to_array(React.useState(null), 2), calendarData = _useState1[0], setCalendarData = _useState1[1];
+    var _useState2 = _sliced_to_array(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(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"
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+exports.ReactDateRange = ReactDateRange;

package/ReactDateRange.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './ReactDateRange.cjs.js';
+export { _default as default } from './ReactDateRange.cjs.default.js';

package/ReactDateRange.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/ReactDateRange";

package/ReactDateRange.esm.js

@@ -0,0 +1,157 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { Calendar, DateRange } from 'react-date-range';
+import * as locales from 'react-date-range/dist/locale/index.js';
+import { addDays, format } from 'date-fns';
+import { R as REACT_DATE_RANGE_COMBINED_CSS } from './react-date-range-css.esm.js';
+import { u as useInjectGlobalCSS } from './useInjectCSS.esm.js';
+
+function _array_like_to_array(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(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(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() {
+    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(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(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(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(useState("zhTW"), 1), locale = _useState[0];
+    var _useState1 = _sliced_to_array(useState(null), 2), calendarData = _useState1[0], setCalendarData = _useState1[1];
+    var _useState2 = _sliced_to_array(useState({
+        startDate: new Date(),
+        endDate: addDays(new Date(), 7),
+        key: "selection"
+    }), 2), range = _useState2[0], setRange = _useState2[1];
+    var _useState3 = _sliced_to_array(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, {
+                        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"
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+export { ReactDateRange };

package/ReactDateRangeCSS.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/ReactDateRangeCSS";

package/ReactDateRangeCSS.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./ReactDateRangeCSS.cjs.js').default;

package/ReactDateRangeCSS.cjs.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDateRangeCss = require('./react-date-range-css.cjs.js');
+
+
+
+exports.REACT_DATE_RANGE_STYLES_CSS = reactDateRangeCss.REACT_DATE_RANGE_STYLES_CSS;

package/ReactDateRangeCSS.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './ReactDateRangeCSS.cjs.js';
+export { _default as default } from './ReactDateRangeCSS.cjs.default.js';

package/ReactDateRangeCSS.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/ReactDateRangeCSS";

package/ReactDateRangeCSS.esm.js

@@ -0,0 +1 @@
+export { a as REACT_DATE_RANGE_STYLES_CSS } from './react-date-range-css.esm.js';

package/baseSwitch.cjs2.js

@@ -0,0 +1,169 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var SwitchPrimitives = require('@radix-ui/react-switch');
+var utils = require('./utils.cjs.js');
+var index_esm = require('./index.esm.cjs.js');
+var FieldLabel = require('./FieldLabel.cjs.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var SwitchPrimitives__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitives);
+
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+function _object_destructuring_empty(o) {
+    if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
+    return o;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+var BaseSwitch = /*#__PURE__*/ React__namespace.forwardRef(function(_param, ref) {
+    var props = _extends({}, _object_destructuring_empty(_param));
+    var control = index_esm.useFormContext().control;
+    var item = props.item;
+    var size = (item === null || item === void 0 ? void 0 : item.size) || "large";
+    var bgColor = (item === null || item === void 0 ? void 0 : item.color) === "blue" ? "data-[state=checked]:bg-blue-500" : (item === null || item === void 0 ? void 0 : item.color) === "red" ? "data-[state=checked]:bg-red-500" : (item === null || item === void 0 ? void 0 : item.color) === "green" ? "data-[state=checked]:bg-green-500" : (item === null || item === void 0 ? void 0 : item.color) === "yellow" ? "data-[state=checked]:bg-yellow-500" : "data-[state=checked]:bg-blue-500";
+    var sizeClass = {
+        small: {
+            root: "h-4 w-7",
+            thumb: "h-3 w-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0"
+        },
+        medium: {
+            root: "h-5 w-9",
+            thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+        },
+        large: {
+            root: "h-6 w-11",
+            thumb: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        },
+        xl: {
+            root: "h-7 w-12",
+            thumb: "h-5 w-5 data-[state=checked]:translate-x-5"
+        },
+        xxl: {
+            root: "h-9 w-16",
+            thumb: "h-7 w-7 data-[state=checked]:translate-x-7"
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: [
+            (item === null || item === void 0 ? void 0 : item.className) || "h-24 w-full"
+        ].join(" "),
+        children: [
+            (item === null || item === void 0 ? void 0 : item.closeLabel) ? null : /*#__PURE__*/ jsxRuntime.jsx(FieldLabel.FieldLabel, {
+                item: item
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(index_esm.Controller, {
+                name: (item === null || item === void 0 ? void 0 : item.name) || "",
+                control: control,
+                render: function(param) {
+                    var field = param.field;
+                    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "inline-flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(SwitchPrimitives__namespace.Root, _object_spread_props(_object_spread({
+                                className: utils.cn("ui-switch-root", "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=unchecked]:bg-gray-200", bgColor, sizeClass[size].root)
+                            }, props), {
+                                ref: ref,
+                                checked: field.value,
+                                onCheckedChange: field.onChange,
+                                id: item === null || item === void 0 ? void 0 : item.id,
+                                disabled: item === null || item === void 0 ? void 0 : item.disable,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(SwitchPrimitives__namespace.Thumb, {
+                                    className: utils.cn("ui-switch-thumb", "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform", "data-[state=unchecked]:translate-x-1", sizeClass[size].thumb)
+                                })
+                            })),
+                            (item === null || item === void 0 ? void 0 : item.labelRight) && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                className: utils.cn("text-sm text-gray-700", item === null || item === void 0 ? void 0 : item.labelRightClassName),
+                                children: item === null || item === void 0 ? void 0 : item.labelRight
+                            })
+                        ]
+                    });
+                }
+            })
+        ]
+    });
+});
+
+exports.BaseSwitch = BaseSwitch;