@grupor5/raya 0.2.49 → 0.2.50

package/dist/index.js

@@ -4133,13 +4133,21 @@ function DatePickerWithRange({
     ] })
   ] });
 }
+function applyDateMask(raw) {
+  const digits = raw.replace(/\D/g, "").slice(0, 8);
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 4) return digits.slice(0, 2) + "/" + digits.slice(2);
+  return digits.slice(0, 2) + "/" + digits.slice(2, 4) + "/" + digits.slice(4);
+}
 function DatePickerSingle({
   className,
   date,
   onDateChange,
   label,
   placeholder = "dd/mm/aa",
-  error
+  error,
+  minDate,
+  maxDate
 }) {
   const [month, setMonth] = React30__namespace.useState(date || /* @__PURE__ */ new Date());
   const [open, setOpen] = React30__namespace.useState(false);
@@ -4148,7 +4156,20 @@ function DatePickerSingle({
     setInputValue(date ? dateFns.format(date, "dd/MM/yyyy") : "");
   }, [date]);
   const handleInputChange = (e) => {
-    setInputValue(e.target.value);
+    setInputValue(applyDateMask(e.target.value));
+  };
+  const isDateInRange = (d) => {
+    if (minDate) {
+      const min = new Date(minDate);
+      min.setHours(0, 0, 0, 0);
+      if (d < min) return false;
+    }
+    if (maxDate) {
+      const max = new Date(maxDate);
+      max.setHours(23, 59, 59, 999);
+      if (d > max) return false;
+    }
+    return true;
   };
   const handleInputBlur = () => {
     if (inputValue === "") {
@@ -4157,7 +4178,7 @@ function DatePickerSingle({
     }
     if (inputValue.length !== 10) return;
     const parsed = dateFns.parse(inputValue, "dd/MM/yyyy", /* @__PURE__ */ new Date());
-    if (dateFns.isValid(parsed)) {
+    if (dateFns.isValid(parsed) && isDateInRange(parsed)) {
       onDateChange(parsed);
       setMonth(parsed);
     }
@@ -4167,6 +4188,12 @@ function DatePickerSingle({
     if (selected) setMonth(selected);
     setOpen(false);
   };
+  const disabledMatcher = React30__namespace.useMemo(() => {
+    const matchers = [];
+    if (minDate) matchers.push({ before: minDate });
+    if (maxDate) matchers.push({ after: maxDate });
+    return matchers.length > 0 ? matchers : void 0;
+  }, [minDate, maxDate]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-1", className), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-body-xs font-normal text-neutral-900", children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -4202,7 +4229,8 @@ function DatePickerSingle({
             selected: date,
             onSelect: handleSelect,
             month,
-            onMonthChange: setMonth
+            onMonthChange: setMonth,
+            disabled: disabledMatcher
           }
         ) })
       ] })
@@ -4420,8 +4448,8 @@ var ProgressBar = React30__namespace.default.forwardRef(
                 label ? "justify-between" : "justify-end"
               ),
               children: [
-                label && /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-progress-bar-label font-normal", children: label }),
-                showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-progress-bar-label font-normal", children: [
+                label && /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "truncate min-w-0 text-progress-bar-label font-normal", children: label }),
+                showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-progress-bar-label font-normal", children: [
                   Math.round(progress),
                   "%"
                 ] })

package/dist/index.mjs

@@ -4102,13 +4102,21 @@ function DatePickerWithRange({
     ] })
   ] });
 }
+function applyDateMask(raw) {
+  const digits = raw.replace(/\D/g, "").slice(0, 8);
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 4) return digits.slice(0, 2) + "/" + digits.slice(2);
+  return digits.slice(0, 2) + "/" + digits.slice(2, 4) + "/" + digits.slice(4);
+}
 function DatePickerSingle({
   className,
   date,
   onDateChange,
   label,
   placeholder = "dd/mm/aa",
-  error
+  error,
+  minDate,
+  maxDate
 }) {
   const [month, setMonth] = React30.useState(date || /* @__PURE__ */ new Date());
   const [open, setOpen] = React30.useState(false);
@@ -4117,7 +4125,20 @@ function DatePickerSingle({
     setInputValue(date ? format(date, "dd/MM/yyyy") : "");
   }, [date]);
   const handleInputChange = (e) => {
-    setInputValue(e.target.value);
+    setInputValue(applyDateMask(e.target.value));
+  };
+  const isDateInRange = (d) => {
+    if (minDate) {
+      const min = new Date(minDate);
+      min.setHours(0, 0, 0, 0);
+      if (d < min) return false;
+    }
+    if (maxDate) {
+      const max = new Date(maxDate);
+      max.setHours(23, 59, 59, 999);
+      if (d > max) return false;
+    }
+    return true;
   };
   const handleInputBlur = () => {
     if (inputValue === "") {
@@ -4126,7 +4147,7 @@ function DatePickerSingle({
     }
     if (inputValue.length !== 10) return;
     const parsed = parse(inputValue, "dd/MM/yyyy", /* @__PURE__ */ new Date());
-    if (isValid(parsed)) {
+    if (isValid(parsed) && isDateInRange(parsed)) {
       onDateChange(parsed);
       setMonth(parsed);
     }
@@ -4136,6 +4157,12 @@ function DatePickerSingle({
     if (selected) setMonth(selected);
     setOpen(false);
   };
+  const disabledMatcher = React30.useMemo(() => {
+    const matchers = [];
+    if (minDate) matchers.push({ before: minDate });
+    if (maxDate) matchers.push({ after: maxDate });
+    return matchers.length > 0 ? matchers : void 0;
+  }, [minDate, maxDate]);
   return /* @__PURE__ */ jsxs("div", { className: cn("grid gap-1", className), children: [
     label && /* @__PURE__ */ jsx("label", { className: "text-body-xs font-normal text-neutral-900", children: label }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -4171,7 +4198,8 @@ function DatePickerSingle({
             selected: date,
             onSelect: handleSelect,
             month,
-            onMonthChange: setMonth
+            onMonthChange: setMonth,
+            disabled: disabledMatcher
           }
         ) })
       ] })
@@ -4389,8 +4417,8 @@ var ProgressBar = React30__default.forwardRef(
                 label ? "justify-between" : "justify-end"
               ),
               children: [
-                label && /* @__PURE__ */ jsx(Label, { className: "text-progress-bar-label font-normal", children: label }),
-                showPercentage && /* @__PURE__ */ jsxs("span", { className: "text-progress-bar-label font-normal", children: [
+                label && /* @__PURE__ */ jsx(Label, { className: "truncate min-w-0 text-progress-bar-label font-normal", children: label }),
+                showPercentage && /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-progress-bar-label font-normal", children: [
                   Math.round(progress),
                   "%"
                 ] })

package/dist/molecules/date-picker/index.d.mts

@@ -16,7 +16,9 @@ interface DatePickerSingleProps {
     label?: string;
     placeholder?: string;
     error?: string | boolean;
+    minDate?: Date;
+    maxDate?: Date;
 }
-declare function DatePickerSingle({ className, date, onDateChange, label, placeholder, error, }: DatePickerSingleProps): react_jsx_runtime.JSX.Element;
+declare function DatePickerSingle({ className, date, onDateChange, label, placeholder, error, minDate, maxDate, }: DatePickerSingleProps): react_jsx_runtime.JSX.Element;
 
 export { DatePickerSingle, type DatePickerSingleProps, DatePickerWithRange, type DatePickerWithRangeProps };

package/dist/molecules/date-picker/index.d.ts

@@ -16,7 +16,9 @@ interface DatePickerSingleProps {
     label?: string;
     placeholder?: string;
     error?: string | boolean;
+    minDate?: Date;
+    maxDate?: Date;
 }
-declare function DatePickerSingle({ className, date, onDateChange, label, placeholder, error, }: DatePickerSingleProps): react_jsx_runtime.JSX.Element;
+declare function DatePickerSingle({ className, date, onDateChange, label, placeholder, error, minDate, maxDate, }: DatePickerSingleProps): react_jsx_runtime.JSX.Element;
 
 export { DatePickerSingle, type DatePickerSingleProps, DatePickerWithRange, type DatePickerWithRangeProps };

package/dist/molecules/date-picker/index.js

@@ -778,13 +778,21 @@ function DatePickerWithRange({
     ] })
   ] });
 }
+function applyDateMask(raw) {
+  const digits = raw.replace(/\D/g, "").slice(0, 8);
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 4) return digits.slice(0, 2) + "/" + digits.slice(2);
+  return digits.slice(0, 2) + "/" + digits.slice(2, 4) + "/" + digits.slice(4);
+}
 function DatePickerSingle({
   className,
   date,
   onDateChange,
   label,
   placeholder = "dd/mm/aa",
-  error
+  error,
+  minDate,
+  maxDate
 }) {
   const [month, setMonth] = React2__namespace.useState(date || /* @__PURE__ */ new Date());
   const [open, setOpen] = React2__namespace.useState(false);
@@ -793,7 +801,20 @@ function DatePickerSingle({
     setInputValue(date ? dateFns.format(date, "dd/MM/yyyy") : "");
   }, [date]);
   const handleInputChange = (e) => {
-    setInputValue(e.target.value);
+    setInputValue(applyDateMask(e.target.value));
+  };
+  const isDateInRange = (d) => {
+    if (minDate) {
+      const min = new Date(minDate);
+      min.setHours(0, 0, 0, 0);
+      if (d < min) return false;
+    }
+    if (maxDate) {
+      const max = new Date(maxDate);
+      max.setHours(23, 59, 59, 999);
+      if (d > max) return false;
+    }
+    return true;
   };
   const handleInputBlur = () => {
     if (inputValue === "") {
@@ -802,7 +823,7 @@ function DatePickerSingle({
     }
     if (inputValue.length !== 10) return;
     const parsed = dateFns.parse(inputValue, "dd/MM/yyyy", /* @__PURE__ */ new Date());
-    if (dateFns.isValid(parsed)) {
+    if (dateFns.isValid(parsed) && isDateInRange(parsed)) {
       onDateChange(parsed);
       setMonth(parsed);
     }
@@ -812,6 +833,12 @@ function DatePickerSingle({
     if (selected) setMonth(selected);
     setOpen(false);
   };
+  const disabledMatcher = React2__namespace.useMemo(() => {
+    const matchers = [];
+    if (minDate) matchers.push({ before: minDate });
+    if (maxDate) matchers.push({ after: maxDate });
+    return matchers.length > 0 ? matchers : void 0;
+  }, [minDate, maxDate]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-1", className), children: [
     label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-body-xs font-normal text-neutral-900", children: label }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -847,7 +874,8 @@ function DatePickerSingle({
             selected: date,
             onSelect: handleSelect,
             month,
-            onMonthChange: setMonth
+            onMonthChange: setMonth,
+            disabled: disabledMatcher
           }
         ) })
       ] })

package/dist/molecules/date-picker/index.mjs

@@ -756,13 +756,21 @@ function DatePickerWithRange({
     ] })
   ] });
 }
+function applyDateMask(raw) {
+  const digits = raw.replace(/\D/g, "").slice(0, 8);
+  if (digits.length <= 2) return digits;
+  if (digits.length <= 4) return digits.slice(0, 2) + "/" + digits.slice(2);
+  return digits.slice(0, 2) + "/" + digits.slice(2, 4) + "/" + digits.slice(4);
+}
 function DatePickerSingle({
   className,
   date,
   onDateChange,
   label,
   placeholder = "dd/mm/aa",
-  error
+  error,
+  minDate,
+  maxDate
 }) {
   const [month, setMonth] = React2.useState(date || /* @__PURE__ */ new Date());
   const [open, setOpen] = React2.useState(false);
@@ -771,7 +779,20 @@ function DatePickerSingle({
     setInputValue(date ? format(date, "dd/MM/yyyy") : "");
   }, [date]);
   const handleInputChange = (e) => {
-    setInputValue(e.target.value);
+    setInputValue(applyDateMask(e.target.value));
+  };
+  const isDateInRange = (d) => {
+    if (minDate) {
+      const min = new Date(minDate);
+      min.setHours(0, 0, 0, 0);
+      if (d < min) return false;
+    }
+    if (maxDate) {
+      const max = new Date(maxDate);
+      max.setHours(23, 59, 59, 999);
+      if (d > max) return false;
+    }
+    return true;
   };
   const handleInputBlur = () => {
     if (inputValue === "") {
@@ -780,7 +801,7 @@ function DatePickerSingle({
     }
     if (inputValue.length !== 10) return;
     const parsed = parse(inputValue, "dd/MM/yyyy", /* @__PURE__ */ new Date());
-    if (isValid(parsed)) {
+    if (isValid(parsed) && isDateInRange(parsed)) {
       onDateChange(parsed);
       setMonth(parsed);
     }
@@ -790,6 +811,12 @@ function DatePickerSingle({
     if (selected) setMonth(selected);
     setOpen(false);
   };
+  const disabledMatcher = React2.useMemo(() => {
+    const matchers = [];
+    if (minDate) matchers.push({ before: minDate });
+    if (maxDate) matchers.push({ after: maxDate });
+    return matchers.length > 0 ? matchers : void 0;
+  }, [minDate, maxDate]);
   return /* @__PURE__ */ jsxs("div", { className: cn("grid gap-1", className), children: [
     label && /* @__PURE__ */ jsx("label", { className: "text-body-xs font-normal text-neutral-900", children: label }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -825,7 +852,8 @@ function DatePickerSingle({
             selected: date,
             onSelect: handleSelect,
             month,
-            onMonthChange: setMonth
+            onMonthChange: setMonth,
+            disabled: disabledMatcher
           }
         ) })
       ] })

package/dist/molecules/file-upload/index.js

@@ -406,8 +406,8 @@ var ProgressBar = React4__namespace.default.forwardRef(
                 label ? "justify-between" : "justify-end"
               ),
               children: [
-                label && /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-progress-bar-label font-normal", children: label }),
-                showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-progress-bar-label font-normal", children: [
+                label && /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "truncate min-w-0 text-progress-bar-label font-normal", children: label }),
+                showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-progress-bar-label font-normal", children: [
                   Math.round(progress),
                   "%"
                 ] })

package/dist/molecules/file-upload/index.mjs

@@ -384,8 +384,8 @@ var ProgressBar = React4__default.forwardRef(
                 label ? "justify-between" : "justify-end"
               ),
               children: [
-                label && /* @__PURE__ */ jsx(Label, { className: "text-progress-bar-label font-normal", children: label }),
-                showPercentage && /* @__PURE__ */ jsxs("span", { className: "text-progress-bar-label font-normal", children: [
+                label && /* @__PURE__ */ jsx(Label, { className: "truncate min-w-0 text-progress-bar-label font-normal", children: label }),
+                showPercentage && /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-progress-bar-label font-normal", children: [
                   Math.round(progress),
                   "%"
                 ] })

package/dist/molecules/progress-bar/index.js

@@ -141,8 +141,8 @@ var ProgressBar = React__namespace.default.forwardRef(
                 label ? "justify-between" : "justify-end"
               ),
               children: [
-                label && /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-progress-bar-label font-normal", children: label }),
-                showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-progress-bar-label font-normal", children: [
+                label && /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "truncate min-w-0 text-progress-bar-label font-normal", children: label }),
+                showPercentage && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "shrink-0 text-progress-bar-label font-normal", children: [
                   Math.round(progress),
                   "%"
                 ] })

package/dist/molecules/progress-bar/index.mjs

@@ -119,8 +119,8 @@ var ProgressBar = React__default.forwardRef(
                 label ? "justify-between" : "justify-end"
               ),
               children: [
-                label && /* @__PURE__ */ jsx(Label, { className: "text-progress-bar-label font-normal", children: label }),
-                showPercentage && /* @__PURE__ */ jsxs("span", { className: "text-progress-bar-label font-normal", children: [
+                label && /* @__PURE__ */ jsx(Label, { className: "truncate min-w-0 text-progress-bar-label font-normal", children: label }),
+                showPercentage && /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-progress-bar-label font-normal", children: [
                   Math.round(progress),
                   "%"
                 ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grupor5/raya",
-  "version": "0.2.49",
+  "version": "0.2.50",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",