@sunggang/ui-lib 0.3.50 → 0.3.52

package/index.esm.css

@@ -719,9 +719,15 @@ video {
 .right-2 {
   right: 0.5rem;
 }
+.right-3 {
+  right: 0.75rem;
+}
 .top-0 {
   top: 0px;
 }
+.top-1\/2 {
+  top: 50%;
+}
 .top-2\/4 {
   top: 50%;
 }
@@ -988,6 +994,9 @@ video {
 .max-h-\[90vh\] {
   max-height: 90vh;
 }
+.min-h-96 {
+  min-height: 24rem;
+}
 .min-h-\[6rem\] {
   min-height: 6rem;
 }
@@ -1000,6 +1009,9 @@ video {
 .w-12 {
   width: 3rem;
 }
+.w-16 {
+  width: 4rem;
+}
 .w-24 {
   width: 6rem;
 }
@@ -1137,6 +1149,10 @@ video {
   --tw-translate-x: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-translate-y-full {
   --tw-translate-y: -100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1937,6 +1953,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity, 1));
 }
+.text-\[\#121417\] {
+  --tw-text-opacity: 1;
+  color: rgb(18 20 23 / var(--tw-text-opacity, 1));
+}
 .text-\[\#171A1F\] {
   --tw-text-opacity: 1;
   color: rgb(23 26 31 / var(--tw-text-opacity, 1));
@@ -1953,6 +1973,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(51 51 51 / var(--tw-text-opacity, 1));
 }
+.text-\[\#4788FF\] {
+  --tw-text-opacity: 1;
+  color: rgb(71 136 255 / var(--tw-text-opacity, 1));
+}
 .text-\[\#5A5A5A\] {
   --tw-text-opacity: 1;
   color: rgb(90 90 90 / var(--tw-text-opacity, 1));
@@ -1977,6 +2001,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(176 176 176 / var(--tw-text-opacity, 1));
 }
+.text-\[\#B4B4B4\] {
+  --tw-text-opacity: 1;
+  color: rgb(180 180 180 / var(--tw-text-opacity, 1));
+}
 .text-\[\#E73700\] {
   --tw-text-opacity: 1;
   color: rgb(231 55 0 / var(--tw-text-opacity, 1));
@@ -2528,6 +2556,11 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-green-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
@@ -2975,6 +3008,10 @@ video {
   cursor: not-allowed;
 }
 
+.disabled\:opacity-30:disabled {
+  opacity: 0.3;
+}
+
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
@@ -3046,11 +3083,21 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.data-\[state\=checked\]\:translate-x-7[data-state="checked"] {
+  --tw-translate-x: 1.75rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
   --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.data-\[state\=unchecked\]\:translate-x-1[data-state="unchecked"] {
+  --tw-translate-x: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .data-\[state\=checked\]\:bg-\[\#169796BF\][data-state="checked"] {
   background-color: #169796BF;
 }
@@ -3251,6 +3298,26 @@ video {
   }
 }
 
+.\[\&\:\:-webkit-calendar-picker-indicator\]\:absolute::-webkit-calendar-picker-indicator {
+  position: absolute;
+}
+
+.\[\&\:\:-webkit-calendar-picker-indicator\]\:h-full::-webkit-calendar-picker-indicator {
+  height: 100%;
+}
+
+.\[\&\:\:-webkit-calendar-picker-indicator\]\:w-full::-webkit-calendar-picker-indicator {
+  width: 100%;
+}
+
+.\[\&\:\:-webkit-calendar-picker-indicator\]\:cursor-pointer::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+}
+
+.\[\&\:\:-webkit-calendar-picker-indicator\]\:opacity-0::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
 .\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
   border-top-right-radius: calc(var(--radius) - 2px);
   border-bottom-right-radius: calc(var(--radius) - 2px);

package/index.esm2.js

@@ -48660,6 +48660,14 @@ var Time = function(param) {
             input.value = "".concat(date, "T").concat(hour, ":00");
         }
     };
+    var handleContainerClick = function() {
+        // 觸發 input 的 focus 和 click 事件來打開 datepicker
+        var input = document.getElementById((item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.name));
+        if (input) {
+            input.focus();
+            input.click();
+        }
+    };
     var step = (item === null || item === void 0 ? void 0 : item.step) ? {
         step: item === null || item === void 0 ? void 0 : item.step
     } : {};
@@ -48677,19 +48685,34 @@ var Time = function(param) {
             /*#__PURE__*/ jsxs("div", {
                 className: "relative",
                 children: [
-                    /*#__PURE__*/ jsx("input", _object_spread$c(_object_spread_props$8(_object_spread$c({
-                        className: [
-                            (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#0f172a]",
-                            "customTime border border-solid border-[#B4B4B4] px-3 py-2 rounded-2xl w-full text-[16px]"
-                        ].join(" "),
-                        type: (item === null || item === void 0 ? void 0 : item.type) || "time",
-                        placeholder: "ex: 16:00"
-                    }, register(item === null || item === void 0 ? void 0 : item.name, _object_spread$c({}, item === null || item === void 0 ? void 0 : item.validateOption))), {
-                        style: item === null || item === void 0 ? void 0 : item.style,
-                        disabled: item === null || item === void 0 ? void 0 : item.disabled,
-                        id: item === null || item === void 0 ? void 0 : item.id,
-                        max: "2037-12-31T23:59"
-                    }), step, onInput)),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "relative cursor-pointer",
+                        onClick: handleContainerClick,
+                        children: [
+                            /*#__PURE__*/ jsx("input", _object_spread$c(_object_spread_props$8(_object_spread$c({
+                                className: [
+                                    (item === null || item === void 0 ? void 0 : item.disable) || (item === null || item === void 0 ? void 0 : item.disabled) ? "text-[#B0B0B0] bg-[#e5e7eb] cursor-not-allowed" : "bg-white text-[#0f172a]",
+                                    "customTime border border-solid border-[#B4B4B4] px-3 py-2 rounded-2xl w-full text-[16px] cursor-pointer",
+                                    // 隱藏原生的 datepicker icon
+                                    "[&::-webkit-calendar-picker-indicator]:opacity-0 [&::-webkit-calendar-picker-indicator]:absolute [&::-webkit-calendar-picker-indicator]:w-full [&::-webkit-calendar-picker-indicator]:h-full [&::-webkit-calendar-picker-indicator]:cursor-pointer"
+                                ].join(" "),
+                                type: (item === null || item === void 0 ? void 0 : item.type) || "time",
+                                placeholder: "ex: 16:00"
+                            }, register(item === null || item === void 0 ? void 0 : item.name, _object_spread$c({}, item === null || item === void 0 ? void 0 : item.validateOption))), {
+                                style: item === null || item === void 0 ? void 0 : item.style,
+                                disabled: item === null || item === void 0 ? void 0 : item.disabled,
+                                id: (item === null || item === void 0 ? void 0 : item.id) || (item === null || item === void 0 ? void 0 : item.name),
+                                max: "2037-12-31T23:59"
+                            }), step, onInput)),
+                            (item === null || item === void 0 ? void 0 : item.icon) && /*#__PURE__*/ jsx("div", {
+                                className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none",
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    icon: item.icon,
+                                    className: "w-5 h-5 text-[#B4B4B4]"
+                                })
+                            })
+                        ]
+                    }),
                     validateMsg(errors, item) && /*#__PURE__*/ jsxs("div", {
                         className: "pt-1 text-xs text-[#EF5533]",
                         children: [
@@ -48964,12 +48987,12 @@ var FieldLabel = function(param) {
     });
 };
 var Fields = function(param) {
-    var formConfig = param.formConfig;
+    var formConfig = param.formConfig, _param_fieldsClass = param.fieldsClass, fieldsClass = _param_fieldsClass === void 0 ? "gap-2" : _param_fieldsClass;
     return !!(formConfig === null || formConfig === void 0 ? void 0 : formConfig.length) && (formConfig === null || formConfig === void 0 ? void 0 : formConfig.map(function(item, index) {
         return /*#__PURE__*/ jsx(StyleField, {
             children: /*#__PURE__*/ jsx("div", {
                 className: [
-                    item[0].type === "ckEditor" ? "" : "flex gap-2 items-start flex-wrap lg:flex-nowrap",
+                    item[0].type === "ckEditor" ? "" : "flex items-start flex-wrap lg:flex-nowrap ".concat(fieldsClass),
                     "justify-start"
                 ].join(" "),
                 children: /*#__PURE__*/ jsx(Row, {
@@ -49191,15 +49214,23 @@ var BaseSwitch = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
     var sizeClass = {
         small: {
             root: "h-4 w-7",
-            thumb: "h-3 w-3 data-[state=checked]:translate-x-3"
+            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"
+            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__*/ jsxs("div", {
@@ -49215,18 +49246,27 @@ var BaseSwitch = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
                 control: control,
                 render: function(param) {
                     var field = param.field;
-                    return /*#__PURE__*/ jsx(SwitchPrimitives.Root, _object_spread_props$7(_object_spread$b({
-                        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", bgColor, sizeClass[size].root, "data-[state=unchecked]:bg-input")
-                    }, 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__*/ 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", sizeClass[size].thumb)
-                        })
-                    }));
+                    return /*#__PURE__*/ jsxs("div", {
+                        className: "inline-flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(SwitchPrimitives.Root, _object_spread_props$7(_object_spread$b({
+                                className: cn("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-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50", bgColor, sizeClass[size].root, "data-[state=unchecked]:bg-input")
+                            }, 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__*/ jsx(SwitchPrimitives.Thumb, {
+                                    className: cn("pointer-events-none block rounded-full bg-background 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__*/ jsx("span", {
+                                className: 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
+                            })
+                        ]
+                    });
                 }
             })
         ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.3.50",
+  "version": "0.3.52",
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",

package/src/lib/Form/index.d.ts

@@ -54,8 +54,9 @@ export declare const Textarea: React.FC<FormType>;
 export declare const FieldLabel: ({ item }: {
     item: any;
 }) => import("react/jsx-runtime").JSX.Element | null;
-export declare const Fields: ({ formConfig }: {
+export declare const Fields: ({ formConfig, fieldsClass }: {
     formConfig: any;
+    fieldsClass?: string | undefined;
 }) => any;
 export declare const CustomUploadField: ({ item }: {
     item: any;

package/src/lib/Form/types.d.ts

@@ -65,6 +65,8 @@ export interface FormItem {
     onlyHour?: boolean;
     color?: string;
     size?: 'small' | 'medium' | 'large' | string;
+    labelRight?: string;
+    labelRightClassName?: string;
     checkboxLabel?: string;
     checkboxLabelClass?: string;
     muiProps?: {

package/src/lib/Pagination/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type PaginationProps = {
+    page: number;
+    pageSize: number;
+    total: number;
+    onChange: (page: number) => void;
+    siblingCount?: number;
+    color?: 'blue' | 'green' | 'purple' | 'red' | 'orange' | 'gray' | 'black';
+    size?: 'sm' | 'md' | 'lg';
+};
+export declare const Pagination: React.FC<PaginationProps>;
+export default Pagination;