next-helios-fe 1.8.92 → 1.8.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.92",
+  "version": "1.8.94",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/calendar/calendar/index.tsx

@@ -2,13 +2,13 @@
 import React from "react";
 import Cl from "react-calendar";
 import "../../../styles";
-import dayjs from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 
 interface CalendarProps {
   options?: {
     enableSelectRange?: boolean;
-    disablePast?: boolean;
-    disableFuture?: boolean;
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
   };
   value?: any;
   onChange?: (date: any) => void;
@@ -23,10 +23,14 @@ export const Calendar: React.FC<CalendarProps> = ({
     <Cl
       selectRange={options?.enableSelectRange ?? false}
       minDate={
-        options?.disablePast ? dayjs().startOf("day").toDate() : undefined
+        options?.minDate
+          ? dayjs(options?.minDate).startOf("day").toDate()
+          : undefined
       }
       maxDate={
-        options?.disableFuture ? dayjs().endOf("day").toDate() : undefined
+        options?.maxDate
+          ? dayjs(options?.maxDate).startOf("day").toDate()
+          : undefined
       }
       value={value}
       onChange={onChange}

package/src/components/dialog/index.tsx

@@ -84,17 +84,25 @@ export const Dialog: React.FC<DialogProps> = ({
             <div className="flex justify-end gap-4">
               <button
                 type="button"
-                className={`disabled:text-disabled disabled:pointer-events-none ${actionVariant}`}
+                className={`flex gap-1 items-center disabled:text-disabled disabled:pointer-events-none ${actionVariant}`}
                 disabled={loading}
                 onClick={() => {
                   action.onClick && action.onClick();
                 }}
               >
-                {action.label}
+                {loading ? (
+                  <Icon
+                    icon="mingcute:loading-fill"
+                    className="animate-spin text-lg"
+                  />
+                ) : (
+                  action.label
+                )}
               </button>
               <button
                 type="button"
-                className="text-secondary hover:text-secondary-dark hover:underline"
+                className="text-secondary hover:text-secondary-dark hover:underline disabled:text-disabled disabled:pointer-events-none"
+                disabled={loading}
                 onClick={() => {
                   onClose && onClose();
                 }}

package/src/components/form/input/checkbox.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import { Tooltip } from "../../../components";
 import { Icon } from "@iconify/react";
 
@@ -11,6 +11,7 @@ export interface CheckboxProps
   };
   label?: string;
   description?: string;
+  indeterminate?: boolean;
   theme?: string;
 }
 
@@ -19,8 +20,15 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   label,
   description,
   theme,
+  indeterminate,
   ...rest
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current!.indeterminate = indeterminate ?? false;
+  }, [inputRef, indeterminate]);
+
   return (
     <label
       className={`group/checkbox flex items-center ${
@@ -36,8 +44,9 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         } ${options?.variant === "switch" && "hidden"}`}
       >
         <input
+          ref={inputRef}
           type="checkbox"
-          className={`border-default border rounded bg-secondary-bg cursor-pointer checked:bg-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
+          className={`border-default border rounded bg-secondary-bg cursor-pointer indeterminate:bg-primary indeterminate:hover:bg-primary checked:bg-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
             theme && "border-0"
           }`}
           style={{ backgroundColor: theme }}

package/src/components/form/input/date.tsx

@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { Tooltip, Dropdown, Calendar } from "../../../components";
 import { Icon } from "@iconify/react";
-import dayjs from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 
 export interface DateProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
@@ -10,6 +10,8 @@ export interface DateProps extends React.InputHTMLAttributes<HTMLInputElement> {
   options?: {
     buttonOnly?: boolean;
     enableSelectRange?: boolean;
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
     disablePast?: boolean;
     disableFuture?: boolean;
     width?: "full" | "fit";
@@ -284,8 +286,14 @@ export const Date: React.FC<DateProps> = ({
             <Calendar
               options={{
                 enableSelectRange: options?.enableSelectRange ?? false,
-                disablePast: options?.disablePast ?? false,
-                disableFuture: options?.disableFuture ?? false,
+                minDate:
+                  options?.minDate ?? options?.disablePast
+                    ? dayjs()
+                    : undefined,
+                maxDate:
+                  options?.maxDate ?? options?.disableFuture
+                    ? dayjs()
+                    : undefined,
               }}
               value={options?.enableSelectRange ? tempValue : tempValue[0]}
               onChange={(value) => {