@123usmanhaider321/ui 0.1.0 → 0.1.8

package/dist/components/ui/Calendar/index.js

@@ -0,0 +1,142 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { getDaysInMonth, months, daysOfWeek } from "./calendar-utils.js";
+import { cn } from "../../../lib/utils.js";
+import Tooltip from "../Tooltip.js";
+const Calendar = ({
+  value,
+  onChange,
+  className,
+  minDate,
+  maxDate,
+  disabledDates,
+  minDateMessage = "Date is before minimum allowed date",
+  maxDateMessage = "Date is after maximum allowed date",
+  disabledDateMessage = "Date is unavailable",
+  defaultMonth
+}) => {
+  const [currentMonth, setCurrentMonth] = useState(value || defaultMonth || /* @__PURE__ */ new Date());
+  useEffect(() => {
+    if (value) {
+      setCurrentMonth(value);
+    } else if (defaultMonth) {
+      setCurrentMonth(defaultMonth);
+    }
+  }, [value, defaultMonth]);
+  const days = getDaysInMonth(currentMonth);
+  const prevMonth = () => {
+    setCurrentMonth(
+      new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
+    );
+  };
+  const nextMonth = () => {
+    setCurrentMonth(
+      new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)
+    );
+  };
+  const handleDateClick = (date) => {
+    if (isDateDisabled(date)) return;
+    if (onChange) {
+      onChange(date);
+    }
+  };
+  const isSelected = (date) => {
+    if (!value) return false;
+    return date.getDate() === value.getDate() && date.getMonth() === value.getMonth() && date.getFullYear() === value.getFullYear();
+  };
+  const isToday = (date) => {
+    const today = /* @__PURE__ */ new Date();
+    return date.getDate() === today.getDate() && date.getMonth() === today.getMonth() && date.getFullYear() === today.getFullYear();
+  };
+  const getDisabledReason = (date) => {
+    if (minDate && date < new Date(minDate.setHours(0, 0, 0, 0))) {
+      return minDateMessage;
+    }
+    if (maxDate && date > new Date(maxDate.setHours(23, 59, 59, 999))) {
+      return maxDateMessage;
+    }
+    if (disabledDates && disabledDates(date)) {
+      return disabledDateMessage;
+    }
+    return null;
+  };
+  const isDateDisabled = (date) => {
+    return !!getDisabledReason(date);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("p-4 bg-white rounded-lg shadow-sm border border-stroke w-full max-w-[320px]", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: prevMonth,
+          className: "p-1 hover:bg-grey-100 rounded-full transition-colors",
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5 text-gray-600" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "font-semibold text-gray-900", children: [
+        months[currentMonth.getMonth()],
+        " ",
+        currentMonth.getFullYear()
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: nextMonth,
+          className: "p-1 hover:bg-grey-100 rounded-full transition-colors",
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5 text-gray-600" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 mb-2", children: daysOfWeek.map((day) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "text-center text-xs font-medium text-grey-500 py-1",
+        children: day
+      },
+      day
+    )) }),
+    /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        className: "grid grid-cols-7 gap-1 overflow-hidden",
+        initial: { height: "auto" },
+        animate: { height: "auto" },
+        transition: { duration: 0.2, ease: "easeInOut" },
+        children: days.map((dayObj, index) => {
+          if (!dayObj.cwMonth) {
+            return /* @__PURE__ */ jsx("div", { className: "w-full h-9" }, index);
+          }
+          const disabledReason = getDisabledReason(dayObj.date);
+          const disabled = !!disabledReason;
+          const dateButton = /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleDateClick(dayObj.date),
+              disabled,
+              className: cn(
+                "p-2 text-sm rounded-md transition-colors relative flex items-center justify-center h-9 w-full mx-auto",
+                disabled && !isSelected(dayObj.date) && "opacity-30 cursor-not-allowed hover:bg-transparent",
+                disabled && isSelected(dayObj.date) && "cursor-not-allowed opacity-80",
+                isSelected(dayObj.date) && "bg-primaryx-500 text-white hover:bg-primaryx-600",
+                !disabled && !isSelected(dayObj.date) && isToday(dayObj.date) && "border border-primaryx-500 text-primaryx-500",
+                !disabled && !isSelected(dayObj.date) && "hover:bg-grey-100"
+              ),
+              children: dayObj.date.getDate()
+            }
+          );
+          return /* @__PURE__ */ jsx("div", { className: "w-full flex justify-center", children: disabled ? /* @__PURE__ */ jsx(Tooltip, { content: disabledReason, children: dateButton }) : dateButton }, index);
+        })
+      }
+    )
+  ] });
+};
+const Calendar$1 = memo(Calendar);
+export {
+  Calendar$1 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ui/Calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/ui/Calendar/index.tsx"],"sourcesContent":["import { useState, useEffect, memo } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\r\nimport { daysOfWeek, getDaysInMonth, months } from \"./calendar-utils\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport Tooltip from \"../Tooltip\";\r\n\r\ninterface CalendarProps {\r\n    value?: Date | null;\r\n    onChange?: (date: Date) => void;\r\n    className?: string;\r\n    minDate?: Date;\r\n    maxDate?: Date;\r\n    disabledDates?: (date: Date) => boolean;\r\n    minDateMessage?: string;\r\n    maxDateMessage?: string;\r\n    disabledDateMessage?: string;\r\n    defaultMonth?: Date;\r\n}\r\n\r\nconst Calendar = ({\r\n    value,\r\n    onChange,\r\n    className,\r\n    minDate,\r\n    maxDate,\r\n    disabledDates,\r\n    minDateMessage = \"Date is before minimum allowed date\",\r\n    maxDateMessage = \"Date is after maximum allowed date\",\r\n    disabledDateMessage = \"Date is unavailable\",\r\n    defaultMonth\r\n}: CalendarProps) => {\r\n    const [currentMonth, setCurrentMonth] = useState(value || defaultMonth || new Date());\r\n\r\n    // Update view if value changes externally\r\n    useEffect(() => {\r\n        if (value) {\r\n            setCurrentMonth(value);\r\n        } else if (defaultMonth) {\r\n            setCurrentMonth(defaultMonth);\r\n        }\r\n    }, [value, defaultMonth]);\r\n\r\n    const days = getDaysInMonth(currentMonth);\r\n\r\n    const prevMonth = () => {\r\n        setCurrentMonth(\r\n            new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)\r\n        );\r\n    };\r\n\r\n    const nextMonth = () => {\r\n        setCurrentMonth(\r\n            new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)\r\n        );\r\n    };\r\n\r\n    const handleDateClick = (date: Date) => {\r\n        if (isDateDisabled(date)) return;\r\n        if (onChange) {\r\n            onChange(date);\r\n        }\r\n    };\r\n\r\n    const isSelected = (date: Date) => {\r\n        if (!value) return false;\r\n        return (\r\n            date.getDate() === value.getDate() &&\r\n            date.getMonth() === value.getMonth() &&\r\n            date.getFullYear() === value.getFullYear()\r\n        );\r\n    };\r\n\r\n    const isToday = (date: Date) => {\r\n        const today = new Date();\r\n        return (\r\n            date.getDate() === today.getDate() &&\r\n            date.getMonth() === today.getMonth() &&\r\n            date.getFullYear() === today.getFullYear()\r\n        );\r\n    };\r\n\r\n    // Returns a string reason if disabled, otherwise null\r\n    const getDisabledReason = (date: Date): string | null => {\r\n        if (minDate && date < new Date(minDate.setHours(0, 0, 0, 0))) {\r\n            return minDateMessage;\r\n        }\r\n        if (maxDate && date > new Date(maxDate.setHours(23, 59, 59, 999))) {\r\n            return maxDateMessage;\r\n        }\r\n        if (disabledDates && disabledDates(date)) {\r\n            return disabledDateMessage;\r\n        }\r\n        return null;\r\n    };\r\n\r\n    const isDateDisabled = (date: Date) => {\r\n        return !!getDisabledReason(date);\r\n    };\r\n\r\n    return (\r\n        <div className={cn(\"p-4 bg-white rounded-lg shadow-sm border border-stroke w-full max-w-[320px]\", className)}>\r\n            {/* Header */}\r\n            <div className=\"flex items-center justify-between mb-4\">\r\n                <button\r\n                    type=\"button\"\r\n                    onClick={prevMonth}\r\n                    className=\"p-1 hover:bg-grey-100 rounded-full transition-colors\"\r\n                >\r\n                    <ChevronLeft className=\"w-5 h-5 text-gray-600\" />\r\n                </button>\r\n                <div className=\"font-semibold text-gray-900\">\r\n                    {months[currentMonth.getMonth()]} {currentMonth.getFullYear()}\r\n                </div>\r\n                <button\r\n                    type=\"button\"\r\n                    onClick={nextMonth}\r\n                    className=\"p-1 hover:bg-grey-100 rounded-full transition-colors\"\r\n                >\r\n                    <ChevronRight className=\"w-5 h-5 text-gray-600\" />\r\n                </button>\r\n            </div>\r\n\r\n            {/* Days of Week */}\r\n            <div className=\"grid grid-cols-7 mb-2\">\r\n                {daysOfWeek.map((day) => (\r\n                    <div\r\n                        key={day}\r\n                        className=\"text-center text-xs font-medium text-grey-500 py-1\"\r\n                    >\r\n                        {day}\r\n                    </div>\r\n                ))}\r\n            </div>\r\n\r\n            {/* Dates Grid */}\r\n            <motion.div\r\n                className=\"grid grid-cols-7 gap-1 overflow-hidden\"\r\n                initial={{ height: 'auto' }}\r\n                animate={{ height: 'auto' }}\r\n                transition={{ duration: 0.2, ease: \"easeInOut\" }}\r\n            >\r\n                {days.map((dayObj, index) => {\r\n                    if (!dayObj.cwMonth) {\r\n                        return <div key={index} className=\"w-full h-9\" />;\r\n                    }\r\n\r\n                    const disabledReason = getDisabledReason(dayObj.date);\r\n                    const disabled = !!disabledReason;\r\n\r\n                    const dateButton = (\r\n                        <button\r\n                            type=\"button\"\r\n                            onClick={() => handleDateClick(dayObj.date)}\r\n                            disabled={disabled}\r\n                            className={cn(\r\n                                \"p-2 text-sm rounded-md transition-colors relative flex items-center justify-center h-9 w-full mx-auto\",\r\n                                disabled && !isSelected(dayObj.date) && \"opacity-30 cursor-not-allowed hover:bg-transparent\",\r\n                                disabled && isSelected(dayObj.date) && \"cursor-not-allowed opacity-80\",\r\n\r\n                                isSelected(dayObj.date) && \"bg-primaryx-500 text-white hover:bg-primaryx-600\",\r\n                                !disabled && !isSelected(dayObj.date) && isToday(dayObj.date) && \"border border-primaryx-500 text-primaryx-500\",\r\n                                !disabled && !isSelected(dayObj.date) && \"hover:bg-grey-100\"\r\n                            )}\r\n                        >\r\n                            {dayObj.date.getDate()}\r\n                        </button>\r\n                    );\r\n\r\n                    return (\r\n                        <div key={index} className=\"w-full flex justify-center\">\r\n                            {disabled ? (\r\n                                <Tooltip content={disabledReason}>\r\n                                    {dateButton}\r\n                                </Tooltip>\r\n                            ) : (\r\n                                dateButton\r\n                            )}\r\n                        </div>\r\n                    );\r\n                })}\r\n            </motion.div>\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default memo(Calendar);\r\n"],"names":[],"mappings":"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"}

package/dist/components/ui/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    onCheckedChange?: (checked: boolean) => void;
+    filled?: boolean;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox };

package/dist/components/ui/Checkbox.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { cn } from "../../lib/utils.js";
+import { Check } from "lucide-react";
+const Checkbox = React__default.forwardRef(
+  ({ className, checked, onCheckedChange, onChange, filled = true, ...props }, ref) => {
+    const handleChange = (e) => {
+      onChange == null ? void 0 : onChange(e);
+      onCheckedChange == null ? void 0 : onCheckedChange(e.target.checked);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center shrink-0", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          className: cn("peer sr-only", className),
+          ref,
+          checked,
+          onChange: handleChange,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex items-center justify-center w-4 h-4 rounded transition-all duration-200",
+            checked ? `border border-primaryx-500 ${filled ? "bg-primaryx-500" : ""}` : "input-border bg-white group-hover:border-primaryx-300",
+            "peer-focus-visible:ring-2 peer-focus-visible:ring-primaryx-500 peer-focus-visible:ring-offset-2"
+          ),
+          children: /* @__PURE__ */ jsx(
+            Check,
+            {
+              className: cn(
+                "w-3 h-3 transition-all duration-200",
+                checked ? `opacity-100 scale-100 ${filled ? "text-white" : "text-primaryx-500"}` : "opacity-0 scale-0"
+              ),
+              strokeWidth: 3
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/ui/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/ui/Checkbox.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Check } from \"lucide-react\";\r\n\r\nexport interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {\r\n    label?: string;\r\n    onCheckedChange?: (checked: boolean) => void;\r\n    filled?: boolean;\r\n}\r\n\r\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\r\n    ({ className, checked, onCheckedChange, onChange, filled = true, ...props }, ref) => {\r\n        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n            onChange?.(e);\r\n            onCheckedChange?.(e.target.checked);\r\n        };\r\n\r\n        return (\r\n            <div className=\"relative flex items-center justify-center shrink-0\">\r\n                <input\r\n                    type=\"checkbox\"\r\n                    className={cn(\"peer sr-only\", className)}\r\n                    ref={ref}\r\n                    checked={checked}\r\n                    onChange={handleChange}\r\n                    {...props}\r\n                />\r\n                <div\r\n                    className={cn(\r\n                        \"flex items-center justify-center w-4 h-4 rounded transition-all duration-200\",\r\n                        checked\r\n                            ? `border border-primaryx-500 ${filled ? 'bg-primaryx-500' : ''}`\r\n                            : \"input-border bg-white group-hover:border-primaryx-300\",\r\n                        \"peer-focus-visible:ring-2 peer-focus-visible:ring-primaryx-500 peer-focus-visible:ring-offset-2\"\r\n                    )}\r\n                >\r\n                    <Check\r\n                        className={cn(\r\n                            \"w-3 h-3 transition-all duration-200\",\r\n                            checked ? `opacity-100 scale-100 ${filled ? \"text-white\" : \"text-primaryx-500\"}` : \"opacity-0 scale-0\",\r\n                        )}\r\n                        strokeWidth={3}\r\n                    />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n);\r\nCheckbox.displayName = \"Checkbox\";\r\n\r\nexport { Checkbox };\r\n"],"names":["React"],"mappings":";;;;AAUA,MAAM,WAAWA,eAAM;AAAA,EACnB,CAAC,EAAE,WAAW,SAAS,iBAAiB,UAAU,SAAS,MAAM,GAAG,MAAA,GAAS,QAAQ;AACjF,UAAM,eAAe,CAAC,MAA2C;AAC7D,2CAAW;AACX,yDAAkB,EAAE,OAAO;AAAA,IAC/B;AAEA,WACI,qBAAC,OAAA,EAAI,WAAU,sDACX,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,WAAW,GAAG,gBAAgB,SAAS;AAAA,UACvC;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACT,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAER;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW;AAAA,YACP;AAAA,YACA,UACM,8BAA8B,SAAS,oBAAoB,EAAE,KAC7D;AAAA,YACN;AAAA,UAAA;AAAA,UAGJ,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAW;AAAA,gBACP;AAAA,gBACA,UAAU,yBAAyB,SAAS,eAAe,mBAAmB,KAAK;AAAA,cAAA;AAAA,cAEvF,aAAa;AAAA,YAAA;AAAA,UAAA;AAAA,QACjB;AAAA,MAAA;AAAA,IACJ,GACJ;AAAA,EAER;AACJ;AACA,SAAS,cAAc;"}

package/dist/components/ui/DatePicker/index.d.ts

@@ -0,0 +1,15 @@
+interface DatePickerProps {
+    value?: Date | null;
+    onChange: (date: Date | null) => void;
+    placeholder?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+    inputClassName?: string;
+    position?: 'top' | 'bottom' | 'auto';
+    defaultMonth?: Date;
+}
+declare const DatePicker: ({ value, onChange, placeholder, minDate, maxDate, disabled, error, className, inputClassName, position, defaultMonth }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export default DatePicker;

package/dist/components/ui/DatePicker/index.js

@@ -0,0 +1,188 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Calendar } from "lucide-react";
+import { AnimatePresence, motion } from "framer-motion";
+import Calendar$1 from "../Calendar/index.js";
+import dayjs from "../../../node_modules/dayjs/dayjs.min.js";
+import { IMaskInput, IMask } from "react-imask";
+import customParseFormat from "../../../node_modules/dayjs/plugin/customParseFormat.js";
+dayjs.extend(customParseFormat);
+const DatePicker = ({
+  value,
+  onChange,
+  placeholder = "Select date",
+  minDate,
+  maxDate,
+  disabled = false,
+  error,
+  className = "",
+  inputClassName = "",
+  position = "auto",
+  defaultMonth
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0, position: "bottom" });
+  const containerRef = useRef(null);
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      var _a, _b;
+      const target = event.target;
+      const isClickInsideContainer = (_a = containerRef.current) == null ? void 0 : _a.contains(target);
+      const isClickInsidePopover = (_b = popoverRef.current) == null ? void 0 : _b.contains(target);
+      if (!isClickInsideContainer && !isClickInsidePopover) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      window.addEventListener("scroll", updatePosition, true);
+      window.addEventListener("resize", updatePosition);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isOpen]);
+  const updatePosition = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      let position2 = "bottom";
+      if (spaceBelow < 350 && spaceAbove > 350) {
+        position2 = "top";
+      }
+      setCoords({
+        top: position2 === "bottom" ? rect.bottom + window.scrollY + 8 : rect.top + window.scrollY - 8,
+        left: rect.left + window.scrollX,
+        position: position2
+      });
+    }
+  };
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+    }
+  }, [isOpen, position]);
+  const [inputValue, setInputValue] = useState("");
+  useEffect(() => {
+    if (value) {
+      setInputValue(dayjs(value).format("DD/MM/YYYY"));
+    } else {
+      setInputValue("");
+    }
+  }, [value]);
+  const handleDateSelect = (date) => {
+    onChange(date);
+    setIsOpen(false);
+  };
+  const toggleOpen = () => {
+    if (!disabled) {
+      if (!isOpen) {
+        updatePosition();
+      }
+      setIsOpen(!isOpen);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative w-full ${className}`, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: triggerRef,
+        className: `w-full h-10 px-3 flex items-center justify-between bg-white rounded-lg ease-in-out focus-within:ring-2 focus-within:ring-primaryx-500/20 focus-within:border-primaryx-500 transition-all duration-200 ${disabled ? "bg-grey-50 cursor-not-allowed opacity-60" : ""} ${error ? "ring-1 ring-error-500 text-error-900" : "input-border text-grey-700"} ${inputClassName}`,
+        onClick: () => {
+          if (!isOpen && !disabled) toggleOpen();
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            IMaskInput,
+            {
+              mask: "d/m/Y",
+              blocks: {
+                d: {
+                  mask: IMask.MaskedRange,
+                  from: 1,
+                  to: 31,
+                  maxLength: 2
+                },
+                m: {
+                  mask: IMask.MaskedRange,
+                  from: 1,
+                  to: 12,
+                  maxLength: 2
+                },
+                Y: {
+                  mask: IMask.MaskedRange,
+                  from: 1900,
+                  to: 2999,
+                  maxLength: 4
+                }
+              },
+              value: inputValue,
+              onAccept: (value2) => {
+                setInputValue(value2);
+                if (!value2) {
+                  onChange(null);
+                } else {
+                  const date = dayjs(value2, "DD/MM/YYYY", true);
+                  if (date.isValid()) {
+                    onChange(date.toDate());
+                  }
+                }
+              },
+              placeholder: "DD/MM/YYYY",
+              lazy: false,
+              disabled,
+              className: "imask-input w-full h-full bg-transparent border-none outline-none focus:border-none focus:outline-none focus:border-none! focus:outline-none! focus:ring-0 focus:ring-0! ring-0 text-sm placeholder-grey-400 px-0"
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: (e) => {
+            e.stopPropagation();
+            toggleOpen();
+          }, className: "focus:outline-none", children: /* @__PURE__ */ jsx(Calendar, { className: `w-4 h-4 ${!value ? "text-grey-400" : "text-grey-600"}` }) })
+        ]
+      }
+    ),
+    typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          ref: popoverRef,
+          initial: { opacity: 0, y: coords.position === "bottom" ? -10 : 10, scale: 0.95 },
+          animate: { opacity: 1, y: 0, scale: 1 },
+          exit: { opacity: 0, y: coords.position === "bottom" ? -10 : 10, scale: 0.95 },
+          transition: { duration: 0.15 },
+          style: {
+            position: "absolute",
+            top: coords.top,
+            left: coords.left,
+            zIndex: 99999,
+            // Ensure it's above modals
+            transformOrigin: coords.position === "bottom" ? "top left" : "bottom left"
+          },
+          className: `p-1 w-max ${coords.position === "top" ? "-translate-y-full" : ""}`,
+          children: /* @__PURE__ */ jsx("div", { className: coords.position === "top" ? "mb-2" : "", children: /* @__PURE__ */ jsx(
+            Calendar$1,
+            {
+              value,
+              defaultMonth,
+              onChange: handleDateSelect,
+              className: "w-max shadow-xl border-grey-200 bg-white rounded-lg",
+              minDate,
+              maxDate
+            }
+          ) })
+        }
+      ) }),
+      document.body
+    )
+  ] });
+};
+export {
+  DatePicker as default
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ui/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/ui/DatePicker/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\r\nimport { createPortal } from \"react-dom\";\r\nimport { Calendar as CalendarIcon } from \"lucide-react\";\r\nimport { AnimatePresence, motion } from \"framer-motion\";\r\nimport Calendar from \"@/components/ui/Calendar\";\r\nimport dayjs from \"dayjs\";\r\nimport { IMaskInput, IMask } from 'react-imask';\r\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\r\n\r\ndayjs.extend(customParseFormat);\r\n\r\ninterface DatePickerProps {\r\n    value?: Date | null;\r\n    onChange: (date: Date | null) => void;\r\n    placeholder?: string;\r\n    minDate?: Date;\r\n    maxDate?: Date;\r\n    disabled?: boolean;\r\n    error?: string;\r\n    className?: string;\r\n    inputClassName?: string;\r\n    position?: 'top' | 'bottom' | 'auto';\r\n    defaultMonth?: Date;\r\n}\r\n\r\nconst DatePicker = ({\r\n    value,\r\n    onChange,\r\n    placeholder = \"Select date\",\r\n    minDate,\r\n    maxDate,\r\n    disabled = false,\r\n    error,\r\n    className = \"\",\r\n    inputClassName = \"\",\r\n    position = \"auto\",\r\n    defaultMonth\r\n}: DatePickerProps) => {\r\n    const [isOpen, setIsOpen] = useState(false);\r\n    const [coords, setCoords] = useState<{ top: number; left: number; position: 'top' | 'bottom' }>({ top: 0, left: 0, position: 'bottom' });\r\n    const containerRef = useRef<HTMLDivElement>(null);\r\n    const triggerRef = useRef<HTMLButtonElement>(null);\r\n    const popoverRef = useRef<HTMLDivElement>(null);\r\n\r\n    // Close when clicking outside\r\n    useEffect(() => {\r\n        const handleClickOutside = (event: MouseEvent) => {\r\n            const target = event.target as Node;\r\n            const isClickInsideContainer = containerRef.current?.contains(target);\r\n            const isClickInsidePopover = popoverRef.current?.contains(target);\r\n\r\n            if (!isClickInsideContainer && !isClickInsidePopover) {\r\n                setIsOpen(false);\r\n            }\r\n        };\r\n\r\n        if (isOpen) {\r\n            document.addEventListener('mousedown', handleClickOutside);\r\n            window.addEventListener('scroll', updatePosition, true);\r\n            window.addEventListener('resize', updatePosition);\r\n        }\r\n\r\n        return () => {\r\n            document.removeEventListener('mousedown', handleClickOutside);\r\n            window.removeEventListener('scroll', updatePosition, true);\r\n            window.removeEventListener('resize', updatePosition);\r\n        };\r\n    }, [isOpen]);\r\n\r\n    const updatePosition = () => {\r\n        if (triggerRef.current) {\r\n            const rect = triggerRef.current.getBoundingClientRect();\r\n            const spaceBelow = window.innerHeight - rect.bottom;\r\n            const spaceAbove = rect.top;\r\n\r\n            // Prefer bottom, unless limited space\r\n            let position: 'top' | 'bottom' = 'bottom';\r\n            if (spaceBelow < 350 && spaceAbove > 350) {\r\n                position = 'top';\r\n            }\r\n\r\n            setCoords({\r\n                top: position === 'bottom' ? rect.bottom + window.scrollY + 8 : rect.top + window.scrollY - 8,\r\n                left: rect.left + window.scrollX,\r\n                position\r\n            });\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        if (isOpen) {\r\n            updatePosition();\r\n        }\r\n    }, [isOpen, position]);\r\n\r\n    const [inputValue, setInputValue] = useState(\"\");\r\n\r\n    useEffect(() => {\r\n        if (value) {\r\n            setInputValue(dayjs(value).format('DD/MM/YYYY'));\r\n        } else {\r\n            setInputValue(\"\");\r\n        }\r\n    }, [value]);\r\n\r\n    const handleInputBlur = () => {\r\n        if (value) {\r\n            setInputValue(dayjs(value).format('DD/MM/YYYY'));\r\n        } else {\r\n            setInputValue(\"\");\r\n        }\r\n    };\r\n\r\n    const handleDateSelect = (date: Date) => {\r\n        onChange(date);\r\n        setIsOpen(false);\r\n    };\r\n\r\n    const toggleOpen = () => {\r\n        if (!disabled) {\r\n            if (!isOpen) {\r\n                updatePosition();\r\n            }\r\n            setIsOpen(!isOpen);\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div ref={containerRef} className={`relative w-full ${className}`}>\r\n            <div\r\n                ref={triggerRef as any}\r\n                className={`w-full h-10 px-3 flex items-center justify-between bg-white rounded-lg ease-in-out focus-within:ring-2 focus-within:ring-primaryx-500/20 focus-within:border-primaryx-500 transition-all duration-200 ${disabled ? 'bg-grey-50 cursor-not-allowed opacity-60' : ''\r\n                    } ${error\r\n                        ? 'ring-1 ring-error-500 text-error-900'\r\n                        : 'input-border text-grey-700'\r\n                    } ${inputClassName}`}\r\n                onClick={() => {\r\n                    if (!isOpen && !disabled) toggleOpen();\r\n                }}\r\n            >\r\n                <IMaskInput\r\n                    mask=\"d/m/Y\"\r\n                    blocks={{\r\n                        d: {\r\n                            mask: IMask.MaskedRange,\r\n                            from: 1,\r\n                            to: 31,\r\n                            maxLength: 2,\r\n                        },\r\n                        m: {\r\n                            mask: IMask.MaskedRange,\r\n                            from: 1,\r\n                            to: 12,\r\n                            maxLength: 2,\r\n                        },\r\n                        Y: {\r\n                            mask: IMask.MaskedRange,\r\n                            from: 1900,\r\n                            to: 2999,\r\n                            maxLength: 4,\r\n                        }\r\n                    }}\r\n                    value={inputValue}\r\n                    onAccept={(value: string) => {\r\n                        setInputValue(value);\r\n                        if (!value) {\r\n                            onChange(null);\r\n                        } else {\r\n                            const date = dayjs(value, 'DD/MM/YYYY', true);\r\n                            if (date.isValid()) {\r\n                                onChange(date.toDate());\r\n                            }\r\n                        }\r\n                    }}\r\n                    placeholder={\"DD/MM/YYYY\"}\r\n                    lazy={false}\r\n                    disabled={disabled}\r\n                    className=\"imask-input w-full h-full bg-transparent border-none outline-none focus:border-none focus:outline-none focus:border-none! focus:outline-none! focus:ring-0 focus:ring-0! ring-0 text-sm placeholder-grey-400 px-0\"\r\n                />\r\n                <button type=\"button\" onClick={(e) => { e.stopPropagation(); toggleOpen(); }} className=\"focus:outline-none\">\r\n                    <CalendarIcon className={`w-4 h-4 ${!value ? \"text-grey-400\" : \"text-grey-600\"}`} />\r\n                </button>\r\n            </div>\r\n\r\n            {typeof document !== 'undefined' && createPortal(\r\n                <AnimatePresence>\r\n                    {isOpen && (\r\n                        <motion.div\r\n                            ref={popoverRef}\r\n                            initial={{ opacity: 0, y: coords.position === 'bottom' ? -10 : 10, scale: 0.95 }}\r\n                            animate={{ opacity: 1, y: 0, scale: 1 }}\r\n                            exit={{ opacity: 0, y: coords.position === 'bottom' ? -10 : 10, scale: 0.95 }}\r\n                            transition={{ duration: 0.15 }}\r\n                            style={{\r\n                                position: 'absolute',\r\n                                top: coords.top,\r\n                                left: coords.left,\r\n                                zIndex: 99999, // Ensure it's above modals\r\n                                transformOrigin: coords.position === 'bottom' ? 'top left' : 'bottom left'\r\n                            }}\r\n                            className={`p-1 w-max ${coords.position === 'top' ? '-translate-y-full' : ''}`}\r\n                        >\r\n                            <div className={coords.position === 'top' ? 'mb-2' : ''}>\r\n                                <Calendar\r\n                                    value={value}\r\n                                    defaultMonth={defaultMonth}\r\n                                    onChange={handleDateSelect}\r\n                                    className=\"w-max shadow-xl border-grey-200 bg-white rounded-lg\"\r\n                                    minDate={minDate}\r\n                                    maxDate={maxDate}\r\n                                />\r\n                            </div>\r\n                        </motion.div>\r\n                    )}\r\n                </AnimatePresence>,\r\n                document.body\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default DatePicker;\r\n"],"names":["position","value","CalendarIcon","Calendar"],"mappings":"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"}

package/dist/components/ui/FormInput.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface FormInputProps {
+    label?: string;
+    icon?: LucideIcon;
+    type: string;
+    placeholder: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement> | string) => void;
+    onBlur?: () => void;
+    error?: string;
+    showPasswordToggle?: boolean;
+    required?: boolean;
+    description?: string;
+    disabled?: boolean;
+    min?: number;
+    isTextArea?: boolean;
+    className?: string;
+    inputCon?: string;
+    inputClassName?: string;
+    animated?: boolean;
+    autoFocus?: boolean;
+    tooltip?: string;
+    suffix?: string;
+}
+declare const _default: React.MemoExoticComponent<({ label, icon: Icon, type, placeholder, value, onChange, onBlur, error, showPasswordToggle, required, description, disabled, min, isTextArea, className, inputCon, inputClassName, animated, autoFocus, tooltip, suffix, }: FormInputProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/components/ui/FormInput.js

@@ -0,0 +1,129 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React__default, { memo, useState, useRef } from "react";
+import { Info } from "lucide-react";
+import { FontAwesomeIcon } from "../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
+import { faEyeSlash, faEye } from "../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { cn } from "../../utils/utils.js";
+import InputErrorMessage from "./InputErrorMessage.js";
+import Tooltip from "./Tooltip.js";
+import RichTextEditor from "./RichTextEditor.js";
+const FormInput = ({
+  label,
+  icon: Icon,
+  type,
+  placeholder,
+  value,
+  onChange,
+  onBlur,
+  error,
+  showPasswordToggle = false,
+  required = false,
+  description,
+  disabled,
+  min,
+  isTextArea = false,
+  className = "",
+  inputCon = "",
+  inputClassName = "",
+  animated = false,
+  autoFocus = false,
+  tooltip,
+  suffix
+}) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const inputType = showPasswordToggle && showPassword ? "text" : type;
+  const [richTextEditorFocus, setRichTextEditorFocus] = useState(false);
+  useRef(null);
+  const localInputRef = useRef(null);
+  const [isMounted, setIsMounted] = useState(false);
+  React__default.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  React__default.useEffect(() => {
+    if (autoFocus && localInputRef.current) {
+      localInputRef.current.focus();
+    }
+  }, [autoFocus]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: `text-sm space-y-2 ${className} ${animated ? "group" : ""}`, children: [
+    label && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-gray-700 block", children: [
+        label,
+        " ",
+        required && /* @__PURE__ */ jsx("span", { className: "text-error-500", children: "*" })
+      ] }),
+      tooltip && /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "top", children: /* @__PURE__ */ jsx(Info, { className: "h-4 w-4 text-grey-700 hover:text-grey-800 cursor-default transition-colors" }) })
+    ] }) }),
+    isTextArea ? /* @__PURE__ */ jsx("div", { className: "relative space-y-1", children: /* @__PURE__ */ jsx(
+      RichTextEditor,
+      {
+        value: value || "",
+        onChange,
+        placeholder,
+        error: !!error,
+        onBlur
+      }
+    ) }) : /* @__PURE__ */ jsxs("div", { className: cn(
+      "relative",
+      animated ? "bg-white rounded-xl px-3 py-2 transition-all duration-200 hover:shadow-sm focus-within:shadow-md overflow-hidden" : "",
+      animated && error ? "ring-2 ring-error-500" : "",
+      inputCon,
+      error && "rounded-xl"
+    ), children: [
+      Icon && /* @__PURE__ */ jsx(Icon, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: localInputRef,
+          type: inputType,
+          placeholder,
+          value,
+          onChange,
+          onKeyDown: (e) => {
+            if (type === "number" && ["e", "E", "+", "-", "."].includes(e.key)) {
+              e.preventDefault();
+            }
+          },
+          onWheel: (e) => type === "number" && e.currentTarget.blur(),
+          onBlur: () => {
+            if (typeof value === "string" && type !== "password") {
+              const trimmed = (value == null ? void 0 : value.trim()) || "";
+              if (trimmed !== value) {
+                onChange({ target: { value: trimmed } });
+              }
+            }
+            if (onBlur) onBlur();
+          },
+          disabled,
+          min,
+          required,
+          className: cn(
+            animated ? `w-full text-[26px] font-medium placeholder-gray-400 outline-none border-gray-300 hover:border-gray-400 focus:outline-none focus:ring-0 p-0 bg-transparent transition-colors duration-200 text-grey-900 cursor-text` : `text-sm w-full ${Icon ? "pl-10" : "pl-3"} py-2 border ${error ? "!border-error-500" : "border-gray-300 hover:border-gray-400"} rounded-lg focus:ring-2 focus:ring-primaryx-500/20 focus:border-primaryx-500 transition-all duration-200 text-gray-900 placeholder-gray-400 bg-white ${showPasswordToggle ? "pr-10" : "pr-3"} ${suffix ? "pr-12" : ""} ${disabled ? "bg-grey-50 cursor-not-allowed" : ""}`,
+            inputClassName
+          )
+        }
+      ),
+      suffix && /* @__PURE__ */ jsx("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-md text-gray-900 pointer-events-none uppercase", children: suffix }),
+      showPasswordToggle && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword((prev) => !prev),
+          className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-sm text-grey-500 hover:text-grey-700 focus:outline-none",
+          children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: showPassword ? faEyeSlash : faEye })
+        }
+      ),
+      animated && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 h-0.5 overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-grey-300 rounded-full" }),
+        /* @__PURE__ */ jsx("div", { className: `absolute inset-0 rounded-full transform origin-left transition-transform duration-300 ease-out ${error ? "" : "bg-primaryx-500 group-hover:scale-x-100 scale-x-0"}` }),
+        /* @__PURE__ */ jsx("div", { className: `absolute inset-0 rounded-full transform origin-left transition-transform duration-300 ease-out ${error ? "" : "bg-primaryx-500 group-focus-within:scale-x-100 scale-x-0"}` })
+      ] })
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-xs text-grey-500", children: description }),
+    /* @__PURE__ */ jsx(InputErrorMessage, { error: error || "" })
+  ] }) });
+};
+const FormInput$1 = memo(FormInput);
+export {
+  FormInput$1 as default
+};
+//# sourceMappingURL=FormInput.js.map