@sunggang/ui-lib 0.1.16 → 0.1.18

package/index.esm.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -179,6 +179,7 @@ textarea {
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
   padding: 0; /* 3 */
@@ -199,9 +200,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */
@@ -514,6 +515,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -564,6 +569,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
 }
 .container {
   width: 100%;
@@ -735,6 +744,9 @@ video {
 .h-56 {
   height: 14rem;
 }
+.h-6 {
+  height: 1.5rem;
+}
 .h-7 {
   height: 1.75rem;
 }
@@ -762,6 +774,9 @@ video {
 .w-4 {
   width: 1rem;
 }
+.w-6 {
+  width: 1.5rem;
+}
 .w-64 {
   width: 16rem;
 }
@@ -786,6 +801,10 @@ video {
 .w-auto {
   width: auto;
 }
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
 .w-full {
   width: 100%;
 }
@@ -831,6 +850,9 @@ video {
 .flex-col {
   flex-direction: column;
 }
+.items-end {
+  align-items: flex-end;
+}
 .items-center {
   align-items: center;
 }
@@ -1158,6 +1180,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
+.text-\[\#000\] {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
 .text-\[\#171A1F\] {
   --tw-text-opacity: 1;
   color: rgb(23 26 31 / var(--tw-text-opacity));

package/index.esm2.js

@@ -4,7 +4,7 @@ import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { addDays, format } from 'date-fns';
+import { format } from 'date-fns';
 import { Calendar as Calendar$1 } from 'lucide-react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
@@ -6261,7 +6261,7 @@ function _unsupported_iterable_to_array$1(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$1(o, minLen);
 }
 var CustomUpload = function(param) {
-    var className = param.className, children = param.children, file = param.file, setFile = param.setFile, imageUrl = param.imageUrl;
+    var className = param.className, children = param.children, file = param.file, setFile = param.setFile, imageUrl = param.imageUrl, setImageUrl = param.setImageUrl;
     var imageMimeType = /image\/(png|jpg|jpeg)/i;
     var DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = 5120000; // 5000 KB
     var _useState = _sliced_to_array$1(useState(null), 2), modal = _useState[0], setModal = _useState[1];
@@ -6270,6 +6270,10 @@ var CustomUpload = function(param) {
         var _hiddenFileInput_current;
         (_hiddenFileInput_current = hiddenFileInput.current) === null || _hiddenFileInput_current === void 0 ? void 0 : _hiddenFileInput_current.click();
     };
+    var handleRemove = function() {
+        setFile(null);
+        setImageUrl(null);
+    };
     var handleImageChange = function(event) {
         var _event_target_files, _currentFile_type;
         var currentFile = (_event_target_files = event.target.files) === null || _event_target_files === void 0 ? void 0 : _event_target_files[0];
@@ -6304,27 +6308,44 @@ var CustomUpload = function(param) {
         }
         setFile(currentFile);
     };
-    return /*#__PURE__*/ jsxs(Fragment$1, {
+    return /*#__PURE__*/ jsxs("div", {
+        className: [
+            "w-fit",
+            className
+        ].join(" "),
         children: [
-            /*#__PURE__*/ jsxs("button", {
-                className: className ? [
-                    className
-                ].join(" ") : "",
+            /*#__PURE__*/ jsx("div", {
+                className: "mb-2",
+                children: /*#__PURE__*/ jsxs("button", {
+                    type: "button",
+                    onClick: handleImageClick,
+                    children: [
+                        children || /*#__PURE__*/ jsx(BaseTemplate, {
+                            file: file,
+                            imageUrl: imageUrl
+                        }),
+                        /*#__PURE__*/ jsx("input", {
+                            type: "file",
+                            ref: hiddenFileInput,
+                            accept: ".png, .jpg, .jpeg",
+                            onChange: handleImageChange,
+                            className: "hidden"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx("button", {
                 type: "button",
-                onClick: handleImageClick,
-                children: [
-                    children || /*#__PURE__*/ jsx(BaseTemplate, {
-                        file: file,
-                        imageUrl: imageUrl
-                    }),
-                    /*#__PURE__*/ jsx("input", {
-                        type: "file",
-                        ref: hiddenFileInput,
-                        accept: ".png, .jpg, .jpeg",
-                        onChange: handleImageChange,
-                        className: "hidden"
-                    })
-                ]
+                className: [
+                    "w-6 h-6 text-[#000]",
+                    file || imageUrl ? "visible" : "invisible"
+                ].join(" "),
+                onClick: handleRemove,
+                children: /*#__PURE__*/ jsx(Icon, {
+                    icon: "mingcute:delete-2-line",
+                    width: "100%",
+                    height: "100%"
+                })
             }),
             modal && /*#__PURE__*/ jsx(Modal, {
                 modal: modal,
@@ -6810,10 +6831,10 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 function DateRangePicker(param) {
-    var className = param.className, disable = param.disable, onChange = param.onChange;
+    var className = param.className, disable = param.disable, onChange = param.onChange, dates = param.dates;
     var _useState = _sliced_to_array(useState({
-        from: new Date(2024, 0, 20),
-        to: addDays(new Date(2024, 0, 20), 20)
+        from: (dates === null || dates === void 0 ? void 0 : dates.from) || undefined,
+        to: (dates === null || dates === void 0 ? void 0 : dates.to) || undefined
     }), 2), date = _useState[0], setDate = _useState[1];
     var handleDateChange = function(newDate) {
         if (newDate) {
@@ -6843,7 +6864,7 @@ function DateRangePicker(param) {
                                     format(date.to, "yyyy-MM-dd")
                                 ]
                             }) : format(date.from, "yyyy-MM-dd") : /*#__PURE__*/ jsx("span", {
-                                children: "Pick a date"
+                                children: "請選擇日期"
                             })
                         ]
                     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "dependencies": {
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slot": "^1.0.2",

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
     variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;

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

@@ -1,10 +1,15 @@
 import { DateRange } from 'react-day-picker';
+interface DateRangeType {
+    from: Date | undefined;
+    to: Date | undefined;
+}
 interface DateRangePickerProps {
     className?: string;
     disable?: boolean;
     onChange?: (date: DateRange) => void;
+    dates?: DateRangeType;
 }
-declare function DateRangePicker({ className, disable, onChange, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function DateRangePicker({ className, disable, onChange, dates, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DateRangePicker {
     var displayName: string;
 }

package/src/lib/UploadImage/BaseTemplate.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 interface BaseTemplateProps {
     file?: File | null;
-    imageUrl?: string;
+    imageUrl?: any;
 }
 declare const BaseTemplate: FC<BaseTemplateProps>;
 export default BaseTemplate;

package/src/lib/UploadImage/CustomUpload.d.ts

@@ -4,7 +4,8 @@ interface CustomUploadProps {
     children?: React.ReactNode;
     file?: File | null;
     setFile?: any;
-    imageUrl?: string;
+    imageUrl?: any;
+    setImageUrl?: any;
 }
 export declare const CustomUpload: React.FC<CustomUploadProps>;
 export default CustomUpload;