@rufous/ui 0.1.84 → 0.1.85

package/dist/main.cjs

@@ -28749,6 +28749,7 @@ __export(main_exports, {
   SuspendUserIcon: () => suspendUserIcon_default,
   Switch: () => Switch,
   Tab: () => Tab,
+  TabPanel: () => TabPanel,
   Tabs: () => Tabs,
   TechnicalSkillsIcon: () => technicalSkillsIcon_default,
   TextField: () => TextField,
@@ -30644,10 +30645,25 @@ var MONTHS = [
   "November",
   "December"
 ];
+var MONTHS_SHORT = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
 var formatDisplay = (d, fmt = "MM/DD/YYYY") => {
   const mm = String(d.getMonth() + 1).padStart(2, "0");
   const dd = String(d.getDate()).padStart(2, "0");
   const yyyy = String(d.getFullYear());
+  const day = d.getDate();
   switch (fmt) {
     case "DD/MM/YYYY":
       return `${dd}/${mm}/${yyyy}`;
@@ -30659,13 +30675,49 @@ var formatDisplay = (d, fmt = "MM/DD/YYYY") => {
       return `${mm}-${dd}-${yyyy}`;
     case "YYYY/MM/DD":
       return `${yyyy}/${mm}/${dd}`;
+    case "DD MMM YYYY":
+      return `${dd} ${MONTHS_SHORT[d.getMonth()]} ${yyyy}`;
+    case "MMM DD, YYYY":
+      return `${MONTHS_SHORT[d.getMonth()]} ${dd}, ${yyyy}`;
+    case "DD MMMM YYYY":
+      return `${dd} ${MONTHS[d.getMonth()]} ${yyyy}`;
+    case "MMMM DD, YYYY":
+      return `${MONTHS[d.getMonth()]} ${dd}, ${yyyy}`;
     case "MM/DD/YYYY":
     default:
       return `${mm}/${dd}/${yyyy}`;
   }
 };
 var formatTimeDisplay = (h, m, ampm) => `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")} ${ampm}`;
+var parseMonthName = (name) => {
+  const lower = name.toLowerCase();
+  let idx = MONTHS.findIndex((m) => m.toLowerCase() === lower);
+  if (idx >= 0) return idx;
+  idx = MONTHS_SHORT.findIndex((m) => m.toLowerCase() === lower);
+  return idx;
+};
 var parseDisplay = (str, fmt = "MM/DD/YYYY") => {
+  if (fmt === "DD MMM YYYY" || fmt === "DD MMMM YYYY") {
+    const parts2 = str.split(" ");
+    if (parts2.length !== 3) return null;
+    const dd2 = parseInt(parts2[0], 10);
+    const mm2 = parseMonthName(parts2[1]);
+    const yyyy2 = parseInt(parts2[2], 10);
+    if (isNaN(dd2) || mm2 < 0 || isNaN(yyyy2) || yyyy2 < 1e3) return null;
+    const d2 = new Date(yyyy2, mm2, dd2);
+    return isNaN(d2.getTime()) ? null : d2;
+  }
+  if (fmt === "MMM DD, YYYY" || fmt === "MMMM DD, YYYY") {
+    const cleaned = str.replace(",", "");
+    const parts2 = cleaned.split(" ").filter(Boolean);
+    if (parts2.length !== 3) return null;
+    const mm2 = parseMonthName(parts2[0]);
+    const dd2 = parseInt(parts2[1], 10);
+    const yyyy2 = parseInt(parts2[2], 10);
+    if (mm2 < 0 || isNaN(dd2) || isNaN(yyyy2) || yyyy2 < 1e3) return null;
+    const d2 = new Date(yyyy2, mm2, dd2);
+    return isNaN(d2.getTime()) ? null : d2;
+  }
   const sep = str.includes("/") ? "/" : "-";
   const parts = str.split(sep);
   if (parts.length !== 3) return null;
@@ -30850,27 +30902,89 @@ var CalendarBody = ({
   dayCells,
   onDayClick,
   onPrev,
-  onNext
-}) => /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-date-picker__month-label" }, MONTHS[viewMonth], " ", viewYear), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__nav" }, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A"))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react19.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
-  if (day === null) return /* @__PURE__ */ import_react19.default.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
-  const cellDate = new Date(viewYear, viewMonth, day);
-  const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
-  const isToday = isSameDay(cellDate, todayDate);
-  return /* @__PURE__ */ import_react19.default.createElement(
+  onNext,
+  onMonthSelect,
+  onYearSelect
+}) => {
+  const [pickerView, setPickerView] = (0, import_react19.useState)("calendar");
+  const handleMonthClick = () => {
+    setPickerView(pickerView === "month" ? "calendar" : "month");
+  };
+  const handleYearClick = () => {
+    setPickerView(pickerView === "year" ? "calendar" : "year");
+  };
+  const handleMonthPick = (month) => {
+    onMonthSelect(month);
+    setPickerView("calendar");
+  };
+  const handleYearPick = (year) => {
+    onYearSelect(year);
+    setPickerView("calendar");
+  };
+  const currentYear = todayDate.getFullYear();
+  const yearStart = viewYear - 6;
+  const years = Array.from({ length: 16 }, (_, i) => yearStart + i);
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ import_react19.default.createElement(
+    "span",
+    {
+      className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
+      onClick: handleMonthClick
+    },
+    MONTHS[viewMonth]
+  ), /* @__PURE__ */ import_react19.default.createElement(
+    "span",
+    {
+      className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
+      onClick: handleYearClick
+    },
+    viewYear
+  )), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ import_react19.default.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ import_react19.default.createElement(
     "button",
     {
-      key: day,
+      key: m,
       type: "button",
       className: [
-        "rf-date-picker__day",
-        isSelected ? "rf-date-picker__day--selected" : "",
-        isToday && !isSelected ? "rf-date-picker__day--today" : ""
+        "rf-date-picker__month-cell",
+        idx === viewMonth ? "rf-date-picker__month-cell--selected" : "",
+        idx === todayDate.getMonth() && viewYear === currentYear ? "rf-date-picker__month-cell--current" : ""
       ].filter(Boolean).join(" "),
-      onClick: () => onDayClick(day)
+      onClick: () => handleMonthPick(idx)
     },
-    day
-  );
-})));
+    m
+  ))), pickerView === "year" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ import_react19.default.createElement(
+    "button",
+    {
+      key: y,
+      type: "button",
+      className: [
+        "rf-date-picker__year-cell",
+        y === viewYear ? "rf-date-picker__year-cell--selected" : "",
+        y === currentYear ? "rf-date-picker__year-cell--current" : ""
+      ].filter(Boolean).join(" "),
+      onClick: () => handleYearPick(y)
+    },
+    y
+  ))), pickerView === "calendar" && /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ import_react19.default.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
+    if (day === null) return /* @__PURE__ */ import_react19.default.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
+    const cellDate = new Date(viewYear, viewMonth, day);
+    const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
+    const isToday = isSameDay(cellDate, todayDate);
+    return /* @__PURE__ */ import_react19.default.createElement(
+      "button",
+      {
+        key: day,
+        type: "button",
+        className: [
+          "rf-date-picker__day",
+          isSelected ? "rf-date-picker__day--selected" : "",
+          isToday && !isSelected ? "rf-date-picker__day--today" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => onDayClick(day)
+      },
+      day
+    );
+  }))));
+};
 var DateField = ({
   label,
   value,
@@ -30928,7 +31042,9 @@ var DateField = ({
   const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
   const AMPMS = ["AM", "PM"];
   const containerRef = (0, import_react19.useRef)(null);
-  const inputId = (0, import_react19.useRef)(`rf-df-${Math.random().toString(36).substr(2, 9)}`).current;
+  const pickerRef = (0, import_react19.useRef)(null);
+  const [dropUp, setDropUp] = (0, import_react19.useState)(false);
+  const inputId = (0, import_react19.useRef)(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
   (0, import_react19.useEffect)(() => {
     if (value === void 0) return;
     if (!value) {
@@ -30960,6 +31076,13 @@ var DateField = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
+  (0, import_react19.useEffect)(() => {
+    if (!open || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const pickerHeight = 400;
+    setDropUp(spaceBelow < pickerHeight && rect.top > pickerHeight);
+  }, [open]);
   const commitDate = (0, import_react19.useCallback)((d, h, m, ap) => {
     setSelectedDate(d);
     if (!d) {
@@ -31152,9 +31275,11 @@ var DateField = ({
   ), open && !disabled && /* @__PURE__ */ import_react19.default.createElement(
     "div",
     {
+      ref: pickerRef,
       className: [
         "rf-date-picker",
-        isSideVariant ? "rf-date-picker--side" : ""
+        isSideVariant ? "rf-date-picker--side" : "",
+        dropUp ? "rf-date-picker--drop-up" : ""
       ].filter(Boolean).join(" "),
       onMouseDown: (e) => e.preventDefault()
     },
@@ -31168,7 +31293,9 @@ var DateField = ({
         dayCells,
         onDayClick: handleDayClick,
         onPrev: prevMonth,
-        onNext: nextMonth
+        onNext: nextMonth,
+        onMonthSelect: setViewMonth,
+        onYearSelect: setViewYear
       }
     ), type === "datetime" && /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ import_react19.default.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ import_react19.default.createElement(
       SpinnerPanel,
@@ -31240,7 +31367,7 @@ var MONTHS2 = [
   "November",
   "December"
 ];
-var MONTHS_SHORT = [
+var MONTHS_SHORT2 = [
   "Jan",
   "Feb",
   "Mar",
@@ -31277,14 +31404,14 @@ var dateToISO = (d) => {
   const dd = String(d.getDate()).padStart(2, "0");
   return `${y}-${mo}-${dd}`;
 };
-var formatShort = (d) => `${String(d.getDate()).padStart(2, "0")} ${MONTHS_SHORT[d.getMonth()]} ${d.getFullYear()}`;
+var formatShort = (d) => `${String(d.getDate()).padStart(2, "0")} ${MONTHS_SHORT2[d.getMonth()]} ${d.getFullYear()}`;
 var parseInputDate = (str) => {
   const s = str.trim();
   if (!s) return null;
   const shortMatch = s.match(/^(\d{1,2})\s+([A-Za-z]+)\s+(\d{4})$/);
   if (shortMatch) {
     const day = parseInt(shortMatch[1], 10);
-    const monthIdx = MONTHS_SHORT.findIndex((m) => m.toLowerCase() === shortMatch[2].toLowerCase());
+    const monthIdx = MONTHS_SHORT2.findIndex((m) => m.toLowerCase() === shortMatch[2].toLowerCase());
     const year = parseInt(shortMatch[3], 10);
     if (monthIdx !== -1 && day >= 1 && day <= 31 && year >= 1e3) {
       const d = new Date(year, monthIdx, day);
@@ -32312,8 +32439,11 @@ function DataGrid({
   actions,
   pageSize: initialPageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
-  title
+  title,
+  className,
+  sx
 }) {
+  const sxClass = useSx(sx);
   const [columnOverrides, setColumnOverrides] = (0, import_react22.useState)({});
   const resolvedColumns = (0, import_react22.useMemo)(() => {
     return initialColumnsProp.map((col) => {
@@ -32614,7 +32744,7 @@ function DataGrid({
     return offset2;
   };
   const hasActiveFilters = advancedFilters.some((f) => f.value);
-  return /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-root" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react22.default.createElement("h2", null, title), /* @__PURE__ */ import_react22.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react22.default.createElement(import_lucide_react2.Search, { size: 15 }), /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ import_react22.default.createElement("h2", null, title), /* @__PURE__ */ import_react22.default.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ import_react22.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react22.default.createElement(import_lucide_react2.Search, { size: 15 }), /* @__PURE__ */ import_react22.default.createElement(
     "input",
     {
       className: "dg-search",
@@ -34953,6 +35083,23 @@ var Box = React87.forwardRef(
     margin,
     width,
     height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    flex,
+    flexWrap,
+    flexGrow,
+    flexShrink,
+    overflow,
+    position: position2,
+    top,
+    right,
+    bottom,
+    left,
+    borderRadius,
+    bgcolor,
+    color: color2,
     className,
     style,
     sx,
@@ -34969,6 +35116,23 @@ var Box = React87.forwardRef(
       ...margin !== void 0 ? { margin: typeof margin === "number" ? `${margin}px` : margin } : {},
       ...width !== void 0 ? { width: typeof width === "number" ? `${width}px` : width } : {},
       ...height !== void 0 ? { height: typeof height === "number" ? `${height}px` : height } : {},
+      ...minWidth !== void 0 ? { minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth } : {},
+      ...maxWidth !== void 0 ? { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth } : {},
+      ...minHeight !== void 0 ? { minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight } : {},
+      ...maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : {},
+      ...flex !== void 0 ? { flex } : {},
+      ...flexWrap !== void 0 ? { flexWrap } : {},
+      ...flexGrow !== void 0 ? { flexGrow } : {},
+      ...flexShrink !== void 0 ? { flexShrink } : {},
+      ...overflow !== void 0 ? { overflow } : {},
+      ...position2 !== void 0 ? { position: position2 } : {},
+      ...top !== void 0 ? { top: typeof top === "number" ? `${top}px` : top } : {},
+      ...right !== void 0 ? { right: typeof right === "number" ? `${right}px` : right } : {},
+      ...bottom !== void 0 ? { bottom: typeof bottom === "number" ? `${bottom}px` : bottom } : {},
+      ...left !== void 0 ? { left: typeof left === "number" ? `${left}px` : left } : {},
+      ...borderRadius !== void 0 ? { borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius } : {},
+      ...bgcolor !== void 0 ? { backgroundColor: bgcolor } : {},
+      ...color2 !== void 0 ? { color: color2 } : {},
       ...style
     };
     const classes = ["rf-box", sxClass, className].filter(Boolean).join(" ");
@@ -34989,6 +35153,8 @@ var Stack2 = React88.forwardRef(
     divider,
     flexWrap,
     useFlexGap = true,
+    flex,
+    overflow,
     component: component2 = "div",
     children,
     className,
@@ -35004,6 +35170,8 @@ var Stack2 = React88.forwardRef(
       ...justifyContent !== void 0 ? { justifyContent } : {},
       ...flexWrap !== void 0 ? { flexWrap } : {},
       ...gapValue !== void 0 && useFlexGap ? { gap: gapValue } : {},
+      ...flex !== void 0 ? { flex } : {},
+      ...overflow !== void 0 ? { overflow } : {},
       ...style
     };
     const classes = ["rf-stack", sxClass, className].filter(Boolean).join(" ");
@@ -35492,6 +35660,30 @@ var Tabs = ({
   ));
 };
 Tabs.displayName = "Tabs";
+var TabPanel = ({
+  value,
+  activeValue,
+  children,
+  keepMounted = false,
+  className = "",
+  style,
+  sx
+}) => {
+  const sxClass = useSx(sx);
+  const isActive = value === activeValue;
+  if (!isActive && !keepMounted) return null;
+  return /* @__PURE__ */ import_react38.default.createElement(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: !isActive,
+      className: ["rf-tab-panel", sxClass, className].filter(Boolean).join(" "),
+      style
+    },
+    isActive && children
+  );
+};
+TabPanel.displayName = "TabPanel";
 
 // lib/Breadcrumbs/Breadcrumbs.tsx
 var import_react39 = __toESM(require("react"), 1);
@@ -36897,6 +37089,7 @@ ImageField.displayName = "ImageField";
   SuspendUserIcon,
   Switch,
   Tab,
+  TabPanel,
   Tabs,
   TechnicalSkillsIcon,
   TextField,

package/dist/main.css

@@ -1494,6 +1494,11 @@ pre {
   justify-content: space-between;
   padding: 18px 20px 12px;
 }
+.rf-date-picker__header-labels {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
 .rf-date-picker__month-label {
   font-size: 1rem;
   font-weight: 700;
@@ -1501,6 +1506,33 @@ pre {
   letter-spacing: -0.01em;
   cursor: pointer;
   user-select: none;
+  padding: 2px 6px;
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+.rf-date-picker__month-label:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__month-label--active {
+  background-color: rgba(164, 27, 6, 0.1);
+  color: #a41b06;
+}
+.rf-date-picker__year-label {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #555555;
+  cursor: pointer;
+  user-select: none;
+  padding: 2px 6px;
+  border-radius: 6px;
+  transition: background-color 0.15s ease;
+}
+.rf-date-picker__year-label:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__year-label--active {
+  background-color: rgba(164, 27, 6, 0.1);
+  color: #a41b06;
 }
 .rf-date-picker__nav {
   display: flex;
@@ -1884,6 +1916,83 @@ pre {
   color: rgba(0, 0, 0, 0.75);
   background-color: rgba(0, 0, 0, 0.05);
 }
+.rf-date-picker--drop-up {
+  top: auto;
+  bottom: calc(100% + 6px);
+  transform-origin: bottom left;
+}
+.rf-date-picker__month-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  padding: 8px 16px 12px;
+}
+.rf-date-picker__month-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 8px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #333333;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  outline: none;
+}
+.rf-date-picker__month-cell:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__month-cell--selected {
+  background-color: #a41b06;
+  color: #ffffff;
+  font-weight: 600;
+}
+.rf-date-picker__month-cell--selected:hover {
+  background-color: #8a1705;
+}
+.rf-date-picker__month-cell--current:not(.rf-date-picker__month-cell--selected) {
+  color: #a41b06;
+  font-weight: 600;
+}
+.rf-date-picker__year-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+  padding: 8px 16px 12px;
+}
+.rf-date-picker__year-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 4px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #333333;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.12s ease, color 0.12s ease;
+  outline: none;
+}
+.rf-date-picker__year-cell:hover {
+  background-color: rgba(164, 27, 6, 0.08);
+}
+.rf-date-picker__year-cell--selected {
+  background-color: #a41b06;
+  color: #ffffff;
+  font-weight: 600;
+}
+.rf-date-picker__year-cell--selected:hover {
+  background-color: #8a1705;
+}
+.rf-date-picker__year-cell--current:not(.rf-date-picker__year-cell--selected) {
+  color: #a41b06;
+  font-weight: 600;
+}
 
 /* lib/styles/date-range-field.css */
 .rf-date-range-field {
@@ -2345,6 +2454,16 @@ pre {
   padding-left: 0;
   margin-top: 0;
 }
+.rf-autocomplete.rf-text-field--disabled .rf-text-field__wrapper {
+  cursor: not-allowed;
+}
+.rf-autocomplete.rf-text-field--disabled .rf-autocomplete__tag {
+  opacity: 0.5;
+}
+.rf-autocomplete.rf-text-field--disabled .rf-autocomplete__endgroup {
+  opacity: 0.35;
+  pointer-events: none;
+}
 .rf-autocomplete__icon-btn {
   background: none;
   border: none;
@@ -2571,6 +2690,18 @@ pre {
 .rf-select.rf-text-field--disabled .rf-text-field__wrapper {
   cursor: not-allowed;
 }
+.rf-select.rf-text-field--disabled .rf-select__display {
+  color: var(--tf-disabled-color, rgba(0, 0, 0, 0.38));
+}
+.rf-select.rf-text-field--disabled .rf-select__arrow {
+  color: rgba(0, 0, 0, 0.2);
+}
+.rf-select.rf-text-field--disabled .rf-select__chip {
+  opacity: 0.5;
+}
+.rf-select.rf-text-field--disabled .rf-select__count {
+  opacity: 0.5;
+}
 .rf-select__display {
   display: flex;
   align-items: center;
@@ -4893,6 +5024,12 @@ pre {
   align-items: center;
   font-size: 1.25rem;
 }
+.rf-tab-panel {
+  width: 100%;
+}
+.rf-tab-panel[hidden] {
+  display: none;
+}
 
 /* lib/styles/breadcrumbs.css */
 .rf-breadcrumbs {
@@ -5800,9 +5937,10 @@ pre {
   outline-offset: 2px;
 }
 .rf-image-field--disabled {
-  opacity: 0.5;
+  opacity: 0.45;
   cursor: not-allowed;
   pointer-events: none;
+  filter: grayscale(60%);
 }
 
 /* lib/styles/text-field.css */
@@ -5900,10 +6038,28 @@ pre {
 .rf-text-field__input:focus {
   outline: none;
 }
+.rf-text-field--disabled {
+  pointer-events: none;
+}
+.rf-text-field--disabled .rf-text-field__wrapper {
+  cursor: not-allowed;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--disabled .rf-text-field__label {
+  color: var(--tf-disabled-color);
+}
+.rf-text-field--disabled .rf-text-field__adornment {
+  color: var(--tf-disabled-color);
+  opacity: 0.5;
+}
+.rf-text-field--disabled .rf-text-field__helper-text {
+  color: var(--tf-disabled-color);
+}
 .rf-text-field__input:disabled {
   opacity: 1;
   color: var(--tf-disabled-color);
-  cursor: default;
+  cursor: not-allowed;
 }
 .rf-text-field__input::placeholder {
   color: var(--tf-placeholder-color);
@@ -6007,7 +6163,10 @@ pre {
   border-width: 2px;
 }
 .rf-text-field--outlined.rf-text-field--disabled .rf-text-field__notch {
-  border-color: var(--tf-disabled-bg);
+  border-color: rgba(0, 0, 0, 0.15);
+}
+.rf-text-field--outlined.rf-text-field--disabled .rf-text-field__wrapper:hover .rf-text-field__notch {
+  border-color: rgba(0, 0, 0, 0.15);
 }
 .rf-text-field--filled .rf-text-field__wrapper {
   background-color: var(--tf-filled-bg);
@@ -6061,7 +6220,13 @@ pre {
   transform: translate(12px, 7px) scale(0.75);
 }
 .rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper {
-  background-color: rgba(0, 0, 0, 0.03);
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper:hover::before {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
 }
 .rf-text-field--filled.rf-text-field--disabled .rf-text-field__wrapper::before {
   border-bottom-style: dotted;
@@ -6111,6 +6276,9 @@ pre {
 .rf-text-field--standard.rf-text-field--disabled .rf-text-field__wrapper::before {
   border-bottom-style: dotted;
 }
+.rf-text-field--standard.rf-text-field--disabled .rf-text-field__wrapper:hover::before {
+  border-bottom: 1px dotted rgba(0, 0, 0, 0.42);
+}
 .rf-text-field--error .rf-text-field__label,
 .rf-text-field--error .rf-text-field__wrapper:focus-within .rf-text-field__label {
   color: var(--tf-error-color);
@@ -6217,6 +6385,13 @@ pre {
   margin-right: 10px;
   margin-left: 0;
 }
+.rf-text-field--compact.rf-text-field--disabled .rf-text-field__wrapper {
+  border-color: rgba(0, 0, 0, 0.12);
+  background-color: rgba(0, 0, 0, 0.04);
+}
+.rf-text-field--compact.rf-text-field--disabled .rf-text-field__wrapper:hover {
+  border-color: rgba(0, 0, 0, 0.12);
+}
 
 /* node_modules/jodit/es5/jodit.min.css */
 .jodit-ui-button-icon-text__icon {

package/dist/main.d.cts

@@ -549,7 +549,7 @@ interface AddressLookupProps {
  */
 declare const AddressLookup: ({ value, onChange, label, error, size, sx, layout, required, token, }: AddressLookupProps) => React__default.JSX.Element;
 
-type DateFormatString = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY" | "YYYY/MM/DD";
+type DateFormatString = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY" | "YYYY/MM/DD" | "DD MMM YYYY" | "MMM DD, YYYY" | "DD MMMM YYYY" | "MMMM DD, YYYY";
 interface DateFieldProps {
     /** Floating label */
     label?: string;
@@ -754,11 +754,13 @@ interface DataGridProps<T> {
     pageSize?: number;
     pageSizeOptions?: number[];
     title?: string;
+    className?: string;
+    sx?: SxProp;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title, className, sx, }: DataGridProps<T>): React__default.JSX.Element;
 
 interface MentionItem {
     id: string;
@@ -1120,6 +1122,23 @@ interface BoxProps extends React.HTMLAttributes<HTMLElement> {
     margin?: string | number;
     width?: string | number;
     height?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    flex?: string | number;
+    flexWrap?: string;
+    flexGrow?: number;
+    flexShrink?: number;
+    overflow?: string;
+    position?: string;
+    top?: string | number;
+    right?: string | number;
+    bottom?: string | number;
+    left?: string | number;
+    borderRadius?: string | number;
+    bgcolor?: string;
+    color?: string;
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;
@@ -1134,6 +1153,8 @@ interface StackProps extends React.HTMLAttributes<HTMLElement> {
     divider?: ReactNode;
     flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
     useFlexGap?: boolean;
+    flex?: string | number;
+    overflow?: string;
     component?: keyof React.JSX.IntrinsicElements;
     children: ReactNode;
     className?: string;
@@ -1282,6 +1303,16 @@ interface TabsProps {
     sx?: SxProp;
 }
 declare const Tabs: React__default.FC<TabsProps>;
+interface TabPanelProps {
+    value: string | number;
+    activeValue: string | number;
+    children: ReactNode;
+    keepMounted?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    sx?: SxProp;
+}
+declare const TabPanel: React__default.FC<TabPanelProps>;
 
 interface BreadcrumbsProps {
     separator?: ReactNode;
@@ -1555,4 +1586,4 @@ interface ImageFieldProps {
 }
 declare const ImageField: React__default.ForwardRefExoticComponent<ImageFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, type MentionItem, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RichTextEditor, type RichTextEditorProps, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, useRufousTheme };
+export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, type MentionItem, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RichTextEditor, type RichTextEditorProps, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, useRufousTheme };

package/dist/main.d.ts

@@ -549,7 +549,7 @@ interface AddressLookupProps {
  */
 declare const AddressLookup: ({ value, onChange, label, error, size, sx, layout, required, token, }: AddressLookupProps) => React__default.JSX.Element;
 
-type DateFormatString = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY" | "YYYY/MM/DD";
+type DateFormatString = "MM/DD/YYYY" | "DD/MM/YYYY" | "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY" | "YYYY/MM/DD" | "DD MMM YYYY" | "MMM DD, YYYY" | "DD MMMM YYYY" | "MMMM DD, YYYY";
 interface DateFieldProps {
     /** Floating label */
     label?: string;
@@ -754,11 +754,13 @@ interface DataGridProps<T> {
     pageSize?: number;
     pageSizeOptions?: number[];
     title?: string;
+    className?: string;
+    sx?: SxProp;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, pageSize: initialPageSize, pageSizeOptions, title, className, sx, }: DataGridProps<T>): React__default.JSX.Element;
 
 interface MentionItem {
     id: string;
@@ -1120,6 +1122,23 @@ interface BoxProps extends React.HTMLAttributes<HTMLElement> {
     margin?: string | number;
     width?: string | number;
     height?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+    flex?: string | number;
+    flexWrap?: string;
+    flexGrow?: number;
+    flexShrink?: number;
+    overflow?: string;
+    position?: string;
+    top?: string | number;
+    right?: string | number;
+    bottom?: string | number;
+    left?: string | number;
+    borderRadius?: string | number;
+    bgcolor?: string;
+    color?: string;
     className?: string;
     style?: CSSProperties;
     sx?: SxProp;
@@ -1134,6 +1153,8 @@ interface StackProps extends React.HTMLAttributes<HTMLElement> {
     divider?: ReactNode;
     flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
     useFlexGap?: boolean;
+    flex?: string | number;
+    overflow?: string;
     component?: keyof React.JSX.IntrinsicElements;
     children: ReactNode;
     className?: string;
@@ -1282,6 +1303,16 @@ interface TabsProps {
     sx?: SxProp;
 }
 declare const Tabs: React__default.FC<TabsProps>;
+interface TabPanelProps {
+    value: string | number;
+    activeValue: string | number;
+    children: ReactNode;
+    keepMounted?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    sx?: SxProp;
+}
+declare const TabPanel: React__default.FC<TabPanelProps>;
 
 interface BreadcrumbsProps {
     separator?: ReactNode;
@@ -1555,4 +1586,4 @@ interface ImageFieldProps {
 }
 declare const ImageField: React__default.ForwardRefExoticComponent<ImageFieldProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, type MentionItem, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RichTextEditor, type RichTextEditorProps, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, useRufousTheme };
+export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, type MentionItem, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, Paper, type PaperProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RichTextEditor, type RichTextEditorProps, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, useRufousTheme };

package/dist/main.js

@@ -1885,10 +1885,25 @@ var MONTHS = [
   "November",
   "December"
 ];
+var MONTHS_SHORT = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
 var formatDisplay = (d, fmt = "MM/DD/YYYY") => {
   const mm = String(d.getMonth() + 1).padStart(2, "0");
   const dd = String(d.getDate()).padStart(2, "0");
   const yyyy = String(d.getFullYear());
+  const day = d.getDate();
   switch (fmt) {
     case "DD/MM/YYYY":
       return `${dd}/${mm}/${yyyy}`;
@@ -1900,13 +1915,49 @@ var formatDisplay = (d, fmt = "MM/DD/YYYY") => {
       return `${mm}-${dd}-${yyyy}`;
     case "YYYY/MM/DD":
       return `${yyyy}/${mm}/${dd}`;
+    case "DD MMM YYYY":
+      return `${dd} ${MONTHS_SHORT[d.getMonth()]} ${yyyy}`;
+    case "MMM DD, YYYY":
+      return `${MONTHS_SHORT[d.getMonth()]} ${dd}, ${yyyy}`;
+    case "DD MMMM YYYY":
+      return `${dd} ${MONTHS[d.getMonth()]} ${yyyy}`;
+    case "MMMM DD, YYYY":
+      return `${MONTHS[d.getMonth()]} ${dd}, ${yyyy}`;
     case "MM/DD/YYYY":
     default:
       return `${mm}/${dd}/${yyyy}`;
   }
 };
 var formatTimeDisplay = (h, m, ampm) => `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")} ${ampm}`;
+var parseMonthName = (name) => {
+  const lower = name.toLowerCase();
+  let idx = MONTHS.findIndex((m) => m.toLowerCase() === lower);
+  if (idx >= 0) return idx;
+  idx = MONTHS_SHORT.findIndex((m) => m.toLowerCase() === lower);
+  return idx;
+};
 var parseDisplay = (str, fmt = "MM/DD/YYYY") => {
+  if (fmt === "DD MMM YYYY" || fmt === "DD MMMM YYYY") {
+    const parts2 = str.split(" ");
+    if (parts2.length !== 3) return null;
+    const dd2 = parseInt(parts2[0], 10);
+    const mm2 = parseMonthName(parts2[1]);
+    const yyyy2 = parseInt(parts2[2], 10);
+    if (isNaN(dd2) || mm2 < 0 || isNaN(yyyy2) || yyyy2 < 1e3) return null;
+    const d2 = new Date(yyyy2, mm2, dd2);
+    return isNaN(d2.getTime()) ? null : d2;
+  }
+  if (fmt === "MMM DD, YYYY" || fmt === "MMMM DD, YYYY") {
+    const cleaned = str.replace(",", "");
+    const parts2 = cleaned.split(" ").filter(Boolean);
+    if (parts2.length !== 3) return null;
+    const mm2 = parseMonthName(parts2[0]);
+    const dd2 = parseInt(parts2[1], 10);
+    const yyyy2 = parseInt(parts2[2], 10);
+    if (mm2 < 0 || isNaN(dd2) || isNaN(yyyy2) || yyyy2 < 1e3) return null;
+    const d2 = new Date(yyyy2, mm2, dd2);
+    return isNaN(d2.getTime()) ? null : d2;
+  }
   const sep = str.includes("/") ? "/" : "-";
   const parts = str.split(sep);
   if (parts.length !== 3) return null;
@@ -2091,27 +2142,89 @@ var CalendarBody = ({
   dayCells,
   onDayClick,
   onPrev,
-  onNext
-}) => /* @__PURE__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ React68.createElement("span", { className: "rf-date-picker__month-label" }, MONTHS[viewMonth], " ", viewYear), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__nav" }, /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A"))), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ React68.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
-  if (day === null) return /* @__PURE__ */ React68.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
-  const cellDate = new Date(viewYear, viewMonth, day);
-  const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
-  const isToday = isSameDay(cellDate, todayDate);
-  return /* @__PURE__ */ React68.createElement(
+  onNext,
+  onMonthSelect,
+  onYearSelect
+}) => {
+  const [pickerView, setPickerView] = useState5("calendar");
+  const handleMonthClick = () => {
+    setPickerView(pickerView === "month" ? "calendar" : "month");
+  };
+  const handleYearClick = () => {
+    setPickerView(pickerView === "year" ? "calendar" : "year");
+  };
+  const handleMonthPick = (month) => {
+    onMonthSelect(month);
+    setPickerView("calendar");
+  };
+  const handleYearPick = (year) => {
+    onYearSelect(year);
+    setPickerView("calendar");
+  };
+  const currentYear = todayDate.getFullYear();
+  const yearStart = viewYear - 6;
+  const years = Array.from({ length: 16 }, (_, i) => yearStart + i);
+  return /* @__PURE__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__header" }, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__header-labels" }, /* @__PURE__ */ React68.createElement(
+    "span",
+    {
+      className: `rf-date-picker__month-label ${pickerView === "month" ? "rf-date-picker__month-label--active" : ""}`,
+      onClick: handleMonthClick
+    },
+    MONTHS[viewMonth]
+  ), /* @__PURE__ */ React68.createElement(
+    "span",
+    {
+      className: `rf-date-picker__year-label ${pickerView === "year" ? "rf-date-picker__year-label--active" : ""}`,
+      onClick: handleYearClick
+    },
+    viewYear
+  )), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__nav" }, pickerView === "year" ? /* @__PURE__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear - 16), "aria-label": "Previous years" }, "\u2039"), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: () => onYearSelect(viewYear + 16), "aria-label": "Next years" }, "\u203A")) : /* @__PURE__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onPrev, "aria-label": "Previous month" }, "\u2039"), /* @__PURE__ */ React68.createElement("button", { type: "button", className: "rf-date-picker__nav-btn", onClick: onNext, "aria-label": "Next month" }, "\u203A")))), pickerView === "month" && /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__month-grid" }, MONTHS_SHORT.map((m, idx) => /* @__PURE__ */ React68.createElement(
     "button",
     {
-      key: day,
+      key: m,
       type: "button",
       className: [
-        "rf-date-picker__day",
-        isSelected ? "rf-date-picker__day--selected" : "",
-        isToday && !isSelected ? "rf-date-picker__day--today" : ""
+        "rf-date-picker__month-cell",
+        idx === viewMonth ? "rf-date-picker__month-cell--selected" : "",
+        idx === todayDate.getMonth() && viewYear === currentYear ? "rf-date-picker__month-cell--current" : ""
       ].filter(Boolean).join(" "),
-      onClick: () => onDayClick(day)
+      onClick: () => handleMonthPick(idx)
     },
-    day
-  );
-})));
+    m
+  ))), pickerView === "year" && /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__year-grid" }, years.map((y) => /* @__PURE__ */ React68.createElement(
+    "button",
+    {
+      key: y,
+      type: "button",
+      className: [
+        "rf-date-picker__year-cell",
+        y === viewYear ? "rf-date-picker__year-cell--selected" : "",
+        y === currentYear ? "rf-date-picker__year-cell--current" : ""
+      ].filter(Boolean).join(" "),
+      onClick: () => handleYearPick(y)
+    },
+    y
+  ))), pickerView === "calendar" && /* @__PURE__ */ React68.createElement(React68.Fragment, null, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__weekdays" }, WEEKDAYS.map((w) => /* @__PURE__ */ React68.createElement("div", { key: w, className: "rf-date-picker__weekday" }, w))), /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__grid" }, dayCells.map((day, idx) => {
+    if (day === null) return /* @__PURE__ */ React68.createElement("div", { key: `e-${idx}`, className: "rf-date-picker__day rf-date-picker__day--empty" });
+    const cellDate = new Date(viewYear, viewMonth, day);
+    const isSelected = selectedDate ? isSameDay(cellDate, selectedDate) : false;
+    const isToday = isSameDay(cellDate, todayDate);
+    return /* @__PURE__ */ React68.createElement(
+      "button",
+      {
+        key: day,
+        type: "button",
+        className: [
+          "rf-date-picker__day",
+          isSelected ? "rf-date-picker__day--selected" : "",
+          isToday && !isSelected ? "rf-date-picker__day--today" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => onDayClick(day)
+      },
+      day
+    );
+  }))));
+};
 var DateField = ({
   label,
   value,
@@ -2169,7 +2282,9 @@ var DateField = ({
   const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
   const AMPMS = ["AM", "PM"];
   const containerRef = useRef4(null);
-  const inputId = useRef4(`rf-df-${Math.random().toString(36).substr(2, 9)}`).current;
+  const pickerRef = useRef4(null);
+  const [dropUp, setDropUp] = useState5(false);
+  const inputId = useRef4(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
   useEffect4(() => {
     if (value === void 0) return;
     if (!value) {
@@ -2201,6 +2316,13 @@ var DateField = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
+  useEffect4(() => {
+    if (!open || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const pickerHeight = 400;
+    setDropUp(spaceBelow < pickerHeight && rect.top > pickerHeight);
+  }, [open]);
   const commitDate = useCallback((d, h, m, ap) => {
     setSelectedDate(d);
     if (!d) {
@@ -2393,9 +2515,11 @@ var DateField = ({
   ), open && !disabled && /* @__PURE__ */ React68.createElement(
     "div",
     {
+      ref: pickerRef,
       className: [
         "rf-date-picker",
-        isSideVariant ? "rf-date-picker--side" : ""
+        isSideVariant ? "rf-date-picker--side" : "",
+        dropUp ? "rf-date-picker--drop-up" : ""
       ].filter(Boolean).join(" "),
       onMouseDown: (e) => e.preventDefault()
     },
@@ -2409,7 +2533,9 @@ var DateField = ({
         dayCells,
         onDayClick: handleDayClick,
         onPrev: prevMonth,
-        onNext: nextMonth
+        onNext: nextMonth,
+        onMonthSelect: setViewMonth,
+        onYearSelect: setViewYear
       }
     ), type === "datetime" && /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__time-section" }, /* @__PURE__ */ React68.createElement("div", { className: "rf-date-picker__time-label" }, "Time"), /* @__PURE__ */ React68.createElement(
       SpinnerPanel,
@@ -2485,7 +2611,7 @@ var MONTHS2 = [
   "November",
   "December"
 ];
-var MONTHS_SHORT = [
+var MONTHS_SHORT2 = [
   "Jan",
   "Feb",
   "Mar",
@@ -2522,14 +2648,14 @@ var dateToISO = (d) => {
   const dd = String(d.getDate()).padStart(2, "0");
   return `${y}-${mo}-${dd}`;
 };
-var formatShort = (d) => `${String(d.getDate()).padStart(2, "0")} ${MONTHS_SHORT[d.getMonth()]} ${d.getFullYear()}`;
+var formatShort = (d) => `${String(d.getDate()).padStart(2, "0")} ${MONTHS_SHORT2[d.getMonth()]} ${d.getFullYear()}`;
 var parseInputDate = (str) => {
   const s = str.trim();
   if (!s) return null;
   const shortMatch = s.match(/^(\d{1,2})\s+([A-Za-z]+)\s+(\d{4})$/);
   if (shortMatch) {
     const day = parseInt(shortMatch[1], 10);
-    const monthIdx = MONTHS_SHORT.findIndex((m) => m.toLowerCase() === shortMatch[2].toLowerCase());
+    const monthIdx = MONTHS_SHORT2.findIndex((m) => m.toLowerCase() === shortMatch[2].toLowerCase());
     const year = parseInt(shortMatch[3], 10);
     if (monthIdx !== -1 && day >= 1 && day <= 31 && year >= 1e3) {
       const d = new Date(year, monthIdx, day);
@@ -3579,8 +3705,11 @@ function DataGrid({
   actions,
   pageSize: initialPageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
-  title
+  title,
+  className,
+  sx
 }) {
+  const sxClass = useSx(sx);
   const [columnOverrides, setColumnOverrides] = useState8({});
   const resolvedColumns = useMemo2(() => {
     return initialColumnsProp.map((col) => {
@@ -3881,7 +4010,7 @@ function DataGrid({
     return offset;
   };
   const hasActiveFilters = advancedFilters.some((f) => f.value);
-  return /* @__PURE__ */ React72.createElement("div", { className: "dg-root" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-header" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ React72.createElement("h2", null, title), /* @__PURE__ */ React72.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React72.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React72.createElement(Search, { size: 15 }), /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React72.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ React72.createElement("div", { className: "dg-header" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ React72.createElement("h2", null, title), /* @__PURE__ */ React72.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React72.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ React72.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React72.createElement(Search, { size: 15 }), /* @__PURE__ */ React72.createElement(
     "input",
     {
       className: "dg-search",
@@ -6241,6 +6370,23 @@ var Box = React87.forwardRef(
     margin,
     width,
     height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    flex,
+    flexWrap,
+    flexGrow,
+    flexShrink,
+    overflow,
+    position,
+    top,
+    right,
+    bottom,
+    left,
+    borderRadius,
+    bgcolor,
+    color,
     className,
     style,
     sx,
@@ -6257,6 +6403,23 @@ var Box = React87.forwardRef(
       ...margin !== void 0 ? { margin: typeof margin === "number" ? `${margin}px` : margin } : {},
       ...width !== void 0 ? { width: typeof width === "number" ? `${width}px` : width } : {},
       ...height !== void 0 ? { height: typeof height === "number" ? `${height}px` : height } : {},
+      ...minWidth !== void 0 ? { minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth } : {},
+      ...maxWidth !== void 0 ? { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth } : {},
+      ...minHeight !== void 0 ? { minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight } : {},
+      ...maxHeight !== void 0 ? { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : {},
+      ...flex !== void 0 ? { flex } : {},
+      ...flexWrap !== void 0 ? { flexWrap } : {},
+      ...flexGrow !== void 0 ? { flexGrow } : {},
+      ...flexShrink !== void 0 ? { flexShrink } : {},
+      ...overflow !== void 0 ? { overflow } : {},
+      ...position !== void 0 ? { position } : {},
+      ...top !== void 0 ? { top: typeof top === "number" ? `${top}px` : top } : {},
+      ...right !== void 0 ? { right: typeof right === "number" ? `${right}px` : right } : {},
+      ...bottom !== void 0 ? { bottom: typeof bottom === "number" ? `${bottom}px` : bottom } : {},
+      ...left !== void 0 ? { left: typeof left === "number" ? `${left}px` : left } : {},
+      ...borderRadius !== void 0 ? { borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius } : {},
+      ...bgcolor !== void 0 ? { backgroundColor: bgcolor } : {},
+      ...color !== void 0 ? { color } : {},
       ...style
     };
     const classes = ["rf-box", sxClass, className].filter(Boolean).join(" ");
@@ -6277,6 +6440,8 @@ var Stack = React88.forwardRef(
     divider,
     flexWrap,
     useFlexGap = true,
+    flex,
+    overflow,
     component = "div",
     children,
     className,
@@ -6292,6 +6457,8 @@ var Stack = React88.forwardRef(
       ...justifyContent !== void 0 ? { justifyContent } : {},
       ...flexWrap !== void 0 ? { flexWrap } : {},
       ...gapValue !== void 0 && useFlexGap ? { gap: gapValue } : {},
+      ...flex !== void 0 ? { flex } : {},
+      ...overflow !== void 0 ? { overflow } : {},
       ...style
     };
     const classes = ["rf-stack", sxClass, className].filter(Boolean).join(" ");
@@ -6788,6 +6955,30 @@ var Tabs = ({
   ));
 };
 Tabs.displayName = "Tabs";
+var TabPanel = ({
+  value,
+  activeValue,
+  children,
+  keepMounted = false,
+  className = "",
+  style,
+  sx
+}) => {
+  const sxClass = useSx(sx);
+  const isActive = value === activeValue;
+  if (!isActive && !keepMounted) return null;
+  return /* @__PURE__ */ React93.createElement(
+    "div",
+    {
+      role: "tabpanel",
+      hidden: !isActive,
+      className: ["rf-tab-panel", sxClass, className].filter(Boolean).join(" "),
+      style
+    },
+    isActive && children
+  );
+};
+TabPanel.displayName = "TabPanel";
 
 // lib/Breadcrumbs/Breadcrumbs.tsx
 import React94, {
@@ -8226,6 +8417,7 @@ export {
   suspendUserIcon_default as SuspendUserIcon,
   Switch,
   Tab,
+  TabPanel,
   Tabs,
   technicalSkillsIcon_default as TechnicalSkillsIcon,
   TextField,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.1.84",
+  "version": "0.1.85",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",