@sunggang/ui-lib 0.0.4 → 0.0.6

package/index.esm.js

@@ -1,5 +1,9 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import React, { useMemo, useRef, useReducer, useEffect, useCallback, forwardRef, useImperativeHandle, Fragment, useState } from 'react';
+import * as React from 'react';
+import React__default, { useMemo, useRef, useReducer, useEffect, useCallback, forwardRef, useImperativeHandle, Fragment, useState } from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 var styles = {};
 
@@ -1929,7 +1933,7 @@ function _iterableToArray$1(iter) {
 function _arrayWithoutHoles$1(arr) {
     if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
 }
-function ownKeys$3(object, enumerableOnly) {
+function ownKeys$4(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -1942,9 +1946,9 @@ function ownKeys$3(object, enumerableOnly) {
 function _objectSpread$1(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = null != arguments[i] ? arguments[i] : {};
-        i % 2 ? ownKeys$3(Object(source), !0).forEach(function(key) {
+        i % 2 ? ownKeys$4(Object(source), !0).forEach(function(key) {
             _defineProperty$1(target, key, source[key]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function(key) {
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -2338,7 +2342,7 @@ function _iterableToArrayLimit(arr, i) {
 function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function ownKeys$2(object, enumerableOnly) {
+function ownKeys$3(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -2351,9 +2355,9 @@ function ownKeys$2(object, enumerableOnly) {
 function _objectSpread(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = null != arguments[i] ? arguments[i] : {};
-        i % 2 ? ownKeys$2(Object(source), !0).forEach(function(key) {
+        i % 2 ? ownKeys$3(Object(source), !0).forEach(function(key) {
             _defineProperty(target, key, source[key]);
-        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function(key) {
+        }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -2422,7 +2426,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }, [
         open
     ]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
-    return /*#__PURE__*/ React.createElement(Fragment, null, children(_objectSpread(_objectSpread({}, props), {}, {
+    return /*#__PURE__*/ React__default.createElement(Fragment, null, children(_objectSpread(_objectSpread({}, props), {}, {
         open: open
     })));
 });
@@ -3290,188 +3294,6 @@ function v4(options, buf, offset) {
     return stringify(rnds);
 }
 
-function _array_like_to_array$2(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) {
-    if (Array.isArray(arr)) return arr;
-}
-function _define_property$1(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 _iterable_to_array_limit$2(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$2() {
-    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 _object_spread$1(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$1(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function ownKeys$1(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$1(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$1(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-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 _unsupported_iterable_to_array$2(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2(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);
-}
-var DropImage = function(param) {
-    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls;
-    var _useState = _sliced_to_array$2(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
-    var _useDropzone = useDropzone({
-        accept: {
-            "image/png": [
-                ".png"
-            ],
-            "image/jpeg": [
-                ".jpg",
-                ".jpeg"
-            ]
-        },
-        maxFiles: 10,
-        maxSize: 5000000,
-        onDrop: function(dropFiles) {
-            var newFiles = [];
-            setFiles(dropFiles);
-            dropFiles.forEach(function(dropFile) {
-                Object.assign(dropFile, {
-                    preview: URL.createObjectURL(dropFile),
-                    uuid: v4()
-                });
-                newFiles.push(dropFile);
-                setPreviewFiles(newFiles);
-            });
-        }
-    }), getRootProps = _useDropzone.getRootProps, getInputProps = _useDropzone.getInputProps; _useDropzone.isDragActive; _useDropzone.isDragAccept; _useDropzone.isDragReject;
-    return /*#__PURE__*/ jsxs("section", {
-        className: "w-full",
-        children: [
-            /*#__PURE__*/ jsxs("div", _object_spread_props$1(_object_spread$1({}, getRootProps({
-                className: "dropzone"
-            })), {
-                children: [
-                    /*#__PURE__*/ jsx("input", _object_spread$1({}, getInputProps())),
-                    /*#__PURE__*/ jsx("div", {
-                        className: "flex justify-between",
-                        children: /*#__PURE__*/ jsx("div", {
-                            className: "w-full bg-gray-light rounded-lg",
-                            children: /*#__PURE__*/ jsx("div", {
-                                className: "border-2 border-dashed border-gray-400 rounded-lg bg-gray-100",
-                                children: /*#__PURE__*/ jsxs("div", {
-                                    className: "flex items-center flex-col h-48 justify-center",
-                                    children: [
-                                        /*#__PURE__*/ jsx("p", {
-                                            className: "font-normal text-sm text-gray-400 py-4",
-                                            children: "圖片僅支援 png、jpg、jpeg"
-                                        }),
-                                        /*#__PURE__*/ jsx("h5", {
-                                            className: "mb-2 text-xl font-bold tracking-tight text-gray-700",
-                                            children: "拖曳圖片至此"
-                                        })
-                                    ]
-                                })
-                            })
-                        })
-                    })
-                ]
-            })),
-            preview && /*#__PURE__*/ jsx("div", {
-                className: "flex pt-2 gap-2",
-                children: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) ? previewFiles.length > 0 ? previewFiles.map(function(item) {
-                    return /*#__PURE__*/ jsx("div", {
-                        children: /*#__PURE__*/ jsx("img", {
-                            className: "w-24 h-24 object-cover",
-                            src: item === null || item === void 0 ? void 0 : item.preview,
-                            alt: ""
-                        })
-                    }, item === null || item === void 0 ? void 0 : item.uuid);
-                }) : null : imageUrls && imageUrls.length ? imageUrls.map(function(item) {
-                    return /*#__PURE__*/ jsx("div", {
-                        children: /*#__PURE__*/ jsx("img", {
-                            className: "w-24 h-24 object-cover",
-                            src: item === null || item === void 0 ? void 0 : item.url,
-                            alt: ""
-                        })
-                    }, item === null || item === void 0 ? void 0 : item.url);
-                }) : null
-            })
-        ]
-    });
-};
-
 function _assert_this_initialized(self) {
     if (self === void 0) {
         throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
@@ -3497,7 +3319,7 @@ function _create_class(Constructor, protoProps, staticProps) {
     if (staticProps) _defineProperties(Constructor, staticProps);
     return Constructor;
 }
-function _define_property(obj, key, value) {
+function _define_property$2(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
             value: value,
@@ -3536,7 +3358,7 @@ function _instanceof(left, right) {
         return left instanceof right;
     }
 }
-function _object_spread(target) {
+function _object_spread$2(target) {
     for(var i = 1; i < arguments.length; i++){
         var source = arguments[i] != null ? arguments[i] : {};
         var ownKeys = Object.keys(source);
@@ -3546,12 +3368,12 @@ function _object_spread(target) {
             }));
         }
         ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
+            _define_property$2(target, key, source[key]);
         });
     }
     return target;
 }
-function ownKeys(object, enumerableOnly) {
+function ownKeys$2(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -3564,12 +3386,12 @@ function ownKeys(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props(target, source) {
+function _object_spread_props$2(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys(Object(source)).forEach(function(key) {
+        ownKeys$2(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -3677,8 +3499,8 @@ var defaultIconTransformations = Object.freeze({
     vFlip: false,
     hFlip: false
 });
-var defaultIconProps = Object.freeze(_object_spread({}, defaultIconDimensions, defaultIconTransformations));
-var defaultExtendedIconProps = Object.freeze(_object_spread_props(_object_spread({}, defaultIconProps), {
+var defaultIconProps = Object.freeze(_object_spread$2({}, defaultIconDimensions, defaultIconTransformations));
+var defaultExtendedIconProps = Object.freeze(_object_spread_props$2(_object_spread$2({}, defaultIconProps), {
     body: "",
     hidden: false
 }));
@@ -3766,7 +3588,7 @@ function parseIconSet(data, callback) {
     }
     return names;
 }
-var optionalPropertyDefaults = _object_spread({
+var optionalPropertyDefaults = _object_spread$2({
     provider: "",
     aliases: {},
     not_found: {}
@@ -3835,7 +3657,7 @@ function addIconSet(storage, data) {
 function addIconToStorage(storage, name, icon) {
     try {
         if (typeof icon.body === "string") {
-            storage.icons[name] = _object_spread({}, icon);
+            storage.icons[name] = _object_spread$2({}, icon);
             return true;
         }
     } catch (err) {}
@@ -3898,7 +3720,7 @@ var defaultIconSizeCustomisations = Object.freeze({
     width: null,
     height: null
 });
-var defaultIconCustomisations = Object.freeze(_object_spread({}, defaultIconSizeCustomisations, defaultIconTransformations));
+var defaultIconCustomisations = Object.freeze(_object_spread$2({}, defaultIconSizeCustomisations, defaultIconTransformations));
 var unitsSplit = /(-?[0-9.]*[0-9]+[0-9.]*)/g;
 var unitsTest = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
 function calculateSize(size, ratio, precision) {
@@ -3941,8 +3763,8 @@ var isUnsetKeyword = function(value) {
     return value === "unset" || value === "undefined" || value === "none";
 };
 function iconToSVG(icon, customisations) {
-    var fullIcon = _object_spread({}, defaultIconProps, icon);
-    var fullCustomisations = _object_spread({}, defaultIconCustomisations, customisations);
+    var fullIcon = _object_spread$2({}, defaultIconProps, icon);
+    var fullCustomisations = _object_spread$2({}, defaultIconCustomisations, customisations);
     var box = {
         left: fullIcon.left,
         top: fullIcon.top,
@@ -4564,7 +4386,7 @@ function sendQuery(config, payload, query, done) {
 }
 // src/index.ts
 function initRedundancy(cfg) {
-    var config = _object_spread({}, defaultConfig, cfg);
+    var config = _object_spread$2({}, defaultConfig, cfg);
     var queries = [];
     function cleanup() {
         queries = queries.filter(function(item) {
@@ -4926,7 +4748,7 @@ var loadIcons = function(icons, callback) {
     return callback ? storeCallback(callback, sortedIcons, sources) : emptyCallback;
 };
 function mergeCustomisations(defaults, item) {
-    var result = _object_spread({}, defaults);
+    var result = _object_spread$2({}, defaults);
     for(var key in item){
         var value = item[key];
         var valueType = typeof value === "undefined" ? "undefined" : _type_of(value);
@@ -5021,7 +4843,7 @@ function cleanUpInnerHTML(html) {
     }
     return policy ? policy.createHTML(html) : html;
 }
-var defaultExtendedIconCustomisations = _object_spread_props(_object_spread({}, defaultIconCustomisations), {
+var defaultExtendedIconCustomisations = _object_spread_props$2(_object_spread$2({}, defaultIconCustomisations), {
     inline: false
 });
 /**
@@ -5062,7 +4884,7 @@ for(var prefix in propsToAddTo){
 }
 /**
  * Default values for customisations for inline icon
- */ var inlineDefaults = _object_spread_props(_object_spread({}, defaultExtendedIconCustomisations), {
+ */ var inlineDefaults = _object_spread_props$2(_object_spread$2({}, defaultExtendedIconCustomisations), {
     inline: true
 });
 /**
@@ -5087,7 +4909,7 @@ ref) {
     var style = {};
     var customStyle = props.style || {};
     // Create SVG component properties
-    var componentProps = _object_spread_props(_object_spread({}, mode === "svg" ? svgDefaults : {}), {
+    var componentProps = _object_spread_props$2(_object_spread$2({}, mode === "svg" ? svgDefaults : {}), {
         ref: ref
     });
     // Get element properties
@@ -5153,7 +4975,7 @@ ref) {
     }
     if (mode === "svg") {
         // Add style
-        componentProps.style = _object_spread({}, style, customStyle);
+        componentProps.style = _object_spread$2({}, style, customStyle);
         // Add icon stuff
         Object.assign(componentProps, renderAttribs);
         // Counter for ids based on "id" property to render icons consistently on server and client
@@ -5169,23 +4991,23 @@ ref) {
                 return id + "ID" + localCounter++;
             } : "iconifyReact"))
         };
-        return React.createElement("svg", componentProps);
+        return React__default.createElement("svg", componentProps);
     }
     // Render <span> with style
     var body = icon.body, width = icon.width, height = icon.height;
     var useMask = mode === "mask" || (mode === "bg" ? false : body.indexOf("currentColor") !== -1);
     // Generate SVG
-    var html = iconToHTML(body, _object_spread_props(_object_spread({}, renderAttribs), {
+    var html = iconToHTML(body, _object_spread_props$2(_object_spread$2({}, renderAttribs), {
         width: width + "",
         height: height + ""
     }));
     // Generate style
-    componentProps.style = _object_spread(_object_spread_props(_object_spread({}, style), {
+    componentProps.style = _object_spread$2(_object_spread_props$2(_object_spread$2({}, style), {
         "--svg": svgToURL(html),
         "width": fixSize(renderAttribs.width),
         "height": fixSize(renderAttribs.height)
     }), commonProps, useMask ? monotoneProps : coloredProps, customStyle);
-    return React.createElement("span", componentProps);
+    return React__default.createElement("span", componentProps);
 };
 /**
  * Initialise stuff
@@ -5387,45 +5209,237 @@ var IconComponent = /*#__PURE__*/ function(_React_Component) {
                 var icon = this.state.icon;
                 if (icon === null) {
                     // Render placeholder
-                    return props.children ? props.children : React.createElement("span", {});
+                    return props.children ? props.children : React__default.createElement("span", {});
                 }
                 // Add classes
                 var newProps = props;
                 if (icon.classes) {
-                    newProps = _object_spread_props(_object_spread({}, props), {
+                    newProps = _object_spread_props$2(_object_spread$2({}, props), {
                         className: (typeof props.className === "string" ? props.className + " " : "") + icon.classes.join(" ")
                     });
                 }
                 // Render icon
-                return render(_object_spread({}, defaultIconProps, icon.data), newProps, props._inline, props._ref);
+                return render(_object_spread$2({}, defaultIconProps, icon.data), newProps, props._inline, props._ref);
             }
         }
     ]);
     return IconComponent;
-}(React.Component);
+}(React__default.Component);
 /**
  * Block icon
  *
  * @param props - Component properties
- */ var Icon = React.forwardRef(function Icon(props, ref) {
-    var newProps = _object_spread_props(_object_spread({}, props), {
+ */ var Icon = React__default.forwardRef(function Icon(props, ref) {
+    var newProps = _object_spread_props$2(_object_spread$2({}, props), {
         _ref: ref,
         _inline: false
     });
-    return React.createElement(IconComponent, newProps);
+    return React__default.createElement(IconComponent, newProps);
 });
 /**
  * Inline icon (has negative verticalAlign that makes it behave like icon font)
  *
  * @param props - Component properties
- */ React.forwardRef(function InlineIcon(props, ref) {
-    var newProps = _object_spread_props(_object_spread({}, props), {
+ */ React__default.forwardRef(function InlineIcon(props, ref) {
+    var newProps = _object_spread_props$2(_object_spread$2({}, props), {
         _ref: ref,
         _inline: true
     });
-    return React.createElement(IconComponent, newProps);
+    return React__default.createElement(IconComponent, newProps);
 });
 
+function _array_like_to_array$2(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) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property$1(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 _iterable_to_array_limit$2(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$2() {
+    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 _object_spread$1(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$1(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys$1(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$1(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys$1(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+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 _unsupported_iterable_to_array$2(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$2(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);
+}
+var DropImage = function(param) {
+    var _param_preview = param.preview, preview = _param_preview === void 0 ? true : _param_preview, setFiles = param.setFiles, imageUrls = param.imageUrls;
+    var _useState = _sliced_to_array$2(useState([]), 2), previewFiles = _useState[0], setPreviewFiles = _useState[1];
+    var _useDropzone = useDropzone({
+        accept: {
+            "image/png": [
+                ".png"
+            ],
+            "image/jpeg": [
+                ".jpg",
+                ".jpeg"
+            ]
+        },
+        maxFiles: 10,
+        maxSize: 5000000,
+        onDrop: function(dropFiles) {
+            var newFiles = [];
+            setFiles(dropFiles);
+            dropFiles.forEach(function(dropFile) {
+                Object.assign(dropFile, {
+                    preview: URL.createObjectURL(dropFile),
+                    uuid: v4()
+                });
+                newFiles.push(dropFile);
+                setPreviewFiles(newFiles);
+            });
+        }
+    }), getRootProps = _useDropzone.getRootProps, getInputProps = _useDropzone.getInputProps; _useDropzone.isDragActive; _useDropzone.isDragAccept; _useDropzone.isDragReject;
+    return /*#__PURE__*/ jsxs("section", {
+        className: "w-full",
+        children: [
+            /*#__PURE__*/ jsxs("div", _object_spread_props$1(_object_spread$1({}, getRootProps({
+                className: "dropzone"
+            })), {
+                children: [
+                    /*#__PURE__*/ jsx("input", _object_spread$1({}, getInputProps())),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex justify-between",
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: "w-full bg-gray-light rounded-lg",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "border-2 border-dashed border-gray-400 rounded-lg bg-gray-100",
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "flex justify-center py-8",
+                                        children: /*#__PURE__*/ jsx(Icon, {
+                                            icon: "material-symbols:upload",
+                                            width: "2.5rem",
+                                            height: "2.5rem"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "flex items-center flex-col justify-center",
+                                        children: [
+                                            /*#__PURE__*/ jsx("p", {
+                                                className: "font-normal text-sm text-gray-400 pb-4",
+                                                children: "圖片僅支援 png、jpg、jpeg"
+                                            }),
+                                            /*#__PURE__*/ jsx("h5", {
+                                                className: "mb-2 text-xl font-bold tracking-tight text-gray-700 pb-4",
+                                                children: "拖曳圖片至此"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })),
+            preview && /*#__PURE__*/ jsx("div", {
+                className: "flex pt-2 gap-2",
+                children: (previewFiles === null || previewFiles === void 0 ? void 0 : previewFiles.length) ? previewFiles.length > 0 ? previewFiles.map(function(item) {
+                    return /*#__PURE__*/ jsx("div", {
+                        children: /*#__PURE__*/ jsx("img", {
+                            className: "w-24 h-24 object-cover",
+                            src: item === null || item === void 0 ? void 0 : item.preview,
+                            alt: ""
+                        })
+                    }, item === null || item === void 0 ? void 0 : item.uuid);
+                }) : null : imageUrls && imageUrls.length ? imageUrls.map(function(item) {
+                    return /*#__PURE__*/ jsx("div", {
+                        children: /*#__PURE__*/ jsx("img", {
+                            className: "w-24 h-24 object-cover",
+                            src: item === null || item === void 0 ? void 0 : item.url,
+                            alt: ""
+                        })
+                    }, item === null || item === void 0 ? void 0 : item.url);
+                }) : null
+            })
+        ]
+    });
+};
+
 var ModalContent = function(param) {
     var title = param.title, setModal = param.setModal, children = param.children, onClick = param.onClick, _param_notice = param.notice, notice = _param_notice === void 0 ? false : _param_notice;
     return /*#__PURE__*/ jsxs("form", {
@@ -5752,4 +5766,105 @@ var CustomUpload = function(param) {
     });
 };
 
-export { CustomUpload, DropImage, Spin, UiLibrary };
+function cn() {
+    for(var _len = arguments.length, inputs = new Array(_len), _key = 0; _key < _len; _key++){
+        inputs[_key] = arguments[_key];
+    }
+    return twMerge(clsx(inputs));
+}
+
+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 _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;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+var Switch = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
+    var className = _param.className, props = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ jsx(SwitchPrimitives.Root, _object_spread_props(_object_spread({
+        className: cn("peer inline-flex h-5 w-9 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-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className)
+    }, props), {
+        ref: ref,
+        children: /*#__PURE__*/ jsx(SwitchPrimitives.Thumb, {
+            className: cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0")
+        })
+    }));
+});
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { CustomUpload, DropImage, Spin, Switch, UiLibrary };

package/package.json

@@ -1,6 +1,13 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.0.4",
+  "version": "0.0.6",
+  "dependencies": {
+    "@radix-ui/react-switch": "^1.0.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss-animate": "^1.0.7"
+  },
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js"

package/src/components/ui/switch.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Switch;

package/src/index.d.ts

@@ -2,3 +2,4 @@ export * from './lib/uiLibrary';
 export * from './lib/Spin';
 export * from './lib/DropImage';
 export * from './lib/UploadImage/CustomUpload';
+export * from './components/ui/switch';

package/src/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;