chesai-ui 0.16.11 → 0.16.13

package/dist/components/button-group/index.mjs

@@ -1,71 +1,71 @@
 import { jsx as C } from "react/jsx-runtime";
 import { clsx as a } from "clsx";
-import i from "react";
+import l from "react";
 const N = {
   none: "gap-0",
   xs: "gap-px",
   sm: "gap-0.5",
   md: "gap-1",
   lg: "gap-2"
-}, y = (d, u, r, l, s, o) => {
-  const n = d === 0, e = d === u - 1, t = u === 1;
-  if (r === "sharp") return "!rounded-none";
-  if (s && o) {
+}, y = (d, u, n, s, i, o) => {
+  const r = d === 0, e = d === u - 1, t = u === 1;
+  if (n === "sharp") return "!rounded-none";
+  if (i && o) {
     if (o === "full") return "!rounded-[30px]";
     if (o === "minimal") return "!rounded-xl";
     if (o === "sharp") return "!rounded-none";
   }
   if (t) {
-    if (r === "full") return "!rounded-[30px]";
-    if (r === "minimal") return "!rounded-xl";
+    if (n === "full") return "!rounded-[30px]";
+    if (n === "minimal") return "!rounded-xl";
   }
-  if (l) {
-    if (r === "full")
-      return n ? "!rounded-l-[30px] !rounded-r-md" : e ? "!rounded-l-md !rounded-r-[30px]" : "!rounded-md";
-    if (r === "minimal")
-      return n ? "!rounded-l-xl !rounded-r-md" : e ? "!rounded-l-md !rounded-r-xl" : "!rounded-md";
+  if (s) {
+    if (n === "full")
+      return r ? "!rounded-s-[30px] !rounded-e-md" : e ? "!rounded-s-md !rounded-e-[30px]" : "!rounded-md";
+    if (n === "minimal")
+      return r ? "!rounded-s-xl !rounded-e-md" : e ? "!rounded-s-md !rounded-e-xl" : "!rounded-md";
   } else {
-    if (r === "full")
-      return n ? "!rounded-l-[30px] !rounded-r-none" : e ? "!rounded-l-none !rounded-r-[30px]" : "!rounded-none";
-    if (r === "minimal")
-      return n ? "!rounded-l-xl !rounded-r-none" : e ? "!rounded-l-none !rounded-r-xl" : "!rounded-none";
+    if (n === "full")
+      return r ? "!rounded-s-[30px] !rounded-e-none" : e ? "!rounded-s-none !rounded-e-[30px]" : "!rounded-none";
+    if (n === "minimal")
+      return r ? "!rounded-s-xl !rounded-e-none" : e ? "!rounded-s-none !rounded-e-xl" : "!rounded-none";
   }
   return "";
 }, A = ({
   children: d,
   className: u,
-  shape: r = "full",
-  gap: l = "none",
-  activeShape: s = "full",
+  shape: n = "full",
+  gap: s = "none",
+  activeShape: i = "full",
   ...o
 }) => {
-  const n = i.Children.toArray(d).filter(
-    i.isValidElement
-  ), e = l !== "none";
+  const r = l.Children.toArray(d).filter(
+    l.isValidElement
+  ), e = s !== "none";
   return /* @__PURE__ */ C(
     "fieldset",
     {
       className: a(
         "inline-flex items-center border-none p-0 m-0",
-        N[l],
+        N[s],
         u
       ),
       ...o,
-      children: n.map((t, f) => {
+      children: r.map((t, f) => {
         const p = f === 0, m = t.props, c = m.isActive, x = y(
           f,
-          n.length,
-          r,
+          r.length,
+          n,
           e,
           c,
-          s
+          i
         ), g = a(
           m.className,
           x,
-          !p && !e && "-ml-px",
+          !p && !e && "-ms-px",
           "focus:z-10"
         );
-        return i.cloneElement(t, {
+        return l.cloneElement(t, {
           className: g,
           shape: "sharp"
         });

package/dist/components/date-picker/calendar.mjs

@@ -1,16 +1,16 @@
 import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { useVirtualizer as te } from "@tanstack/react-virtual";
-import { cva as re } from "class-variance-authority";
+import { useVirtualizer as oe } from "@tanstack/react-virtual";
+import { cva as ae } from "class-variance-authority";
 import { clsx as c } from "clsx";
-import { format as w } from "date-fns";
-import { AnimatePresence as ne, motion as v } from "framer-motion";
-import { ChevronDown as I, ChevronLeft as oe, ChevronRight as ae } from "lucide-react";
-import V, { useState as R, memo as N, useRef as A, useEffect as se } from "react";
-import ie from "use-ripple-hook";
-import { ElasticScrollArea as O } from "../elastic-scroll-area/index.mjs";
-import { IconButton as S } from "../icon-button/index.mjs";
-import { useCalendar as le } from "../../hooks/use-calender.mjs";
-const ce = re(
+import { format as D } from "date-fns";
+import { AnimatePresence as se, motion as M } from "framer-motion";
+import { ChevronDown as S, ChevronLeft as ie, ChevronRight as le } from "lucide-react";
+import A, { useState as k, useEffect as O, memo as z, useRef as _ } from "react";
+import ce from "use-ripple-hook";
+import { ElasticScrollArea as B } from "../elastic-scroll-area/index.mjs";
+import { IconButton as V } from "../icon-button/index.mjs";
+import { useCalendar as fe } from "../../hooks/use-calender.mjs";
+const de = ae(
   "overflow-hidden select-none p-4 text-on-surface relative transition-colors duration-300",
   {
     variants: {
@@ -29,12 +29,12 @@ const ce = re(
       variant: "default"
     }
   }
-), C = {
+), E = {
   full: "rounded-full",
   minimal: "rounded-lg",
   sharp: "rounded-none"
-}, fe = (n) => {
-  const f = C[n];
+}, me = (n) => {
+  const f = E[n];
   return c(
     "relative z-10 w-10 h-10 flex items-center justify-center text-sm focus:outline-none overflow-hidden",
     "transition-colors duration-200",
@@ -44,13 +44,12 @@ const ce = re(
     "after:transition-[opacity,transform] after:duration-200 after:ease-out",
     "hover:after:opacity-100 hover:after:scale-100"
   );
-}, de = {
-  // FIX: Explicitly type transition object
+}, ue = {
   type: "spring",
   stiffness: 300,
   damping: 30,
   mass: 1
-}, me = {
+}, he = {
   enter: (n) => ({
     x: n > 0 ? "100%" : "-100%",
     opacity: 1
@@ -60,7 +59,7 @@ const ce = re(
     x: n < 0 ? "100%" : "-100%",
     opacity: 1
   })
-}, _ = N(
+}, L = z(
   ({
     day: n,
     isCurrentMonth: f,
@@ -72,9 +71,8 @@ const ce = re(
     onClick: l,
     itemShape: m = "full"
   }) => {
-    const d = A(null), [, t] = ie({
+    const d = _(null), [, t] = ce({
       ref: d,
-      // FIX: Cast ref
       color: "var(--color-ripple-dark)",
       duration: 400
     });
@@ -85,35 +83,35 @@ const ce = re(
         onPointerDown: t,
         onClick: l,
         className: c(
-          fe(m),
+          me(m),
           a || s || i ? "bg-primary text-on-primary font-bold shadow-sm" : h && !x ? "border border-primary text-primary font-bold" : "text-on-surface"
         ),
-        children: w(n, "d")
+        children: D(n, "d")
       }
-    ) : /* @__PURE__ */ e("div", { className: "w-10 h-10 flex items-center justify-center text-on-surface-variant/30 text-sm", children: w(n, "d") });
+    ) : /* @__PURE__ */ e("div", { className: "w-10 h-10 flex items-center justify-center text-on-surface-variant/30 text-sm", children: D(n, "d") });
   }
 );
-_.displayName = "DayButton";
-const b = 3, B = N(
+L.displayName = "DayButton";
+const v = 3, T = z(
   ({
     currentYear: n,
     onSelectYear: f,
     itemShape: h = "full"
   }) => {
-    const a = A(null), s = V.useMemo(
+    const a = _(null), s = A.useMemo(
       () => Array.from({ length: 400 }, (d, t) => 1900 + t),
       []
-    ), i = Math.ceil(s.length / b), x = s.indexOf(n), l = x !== -1 ? Math.floor(x / b) : 0, m = te({
+    ), i = Math.ceil(s.length / v), x = s.indexOf(n), l = x !== -1 ? Math.floor(x / v) : 0, m = oe({
       count: i,
       getScrollElement: () => a.current,
       estimateSize: () => 60,
       overscan: 3,
       initialOffset: l * 60
     });
-    return se(() => {
+    return O(() => {
       l !== -1 && m.scrollToIndex(l, { align: "center" });
     }, [l, m]), /* @__PURE__ */ e(
-      O,
+      B,
       {
         ref: a,
         className: "h-full w-full",
@@ -127,14 +125,14 @@ const b = 3, B = N(
               position: "relative"
             },
             children: m.getVirtualItems().map((d) => {
-              const t = d.index * b, y = s.slice(
+              const t = d.index * v, y = s.slice(
                 t,
-                t + b
+                t + v
               );
               return /* @__PURE__ */ e(
                 "div",
                 {
-                  className: "absolute top-0 left-0 w-full flex justify-between px-2",
+                  className: "absolute top-0 inset-x-0 w-full flex justify-between px-2",
                   style: {
                     height: `${d.size}px`,
                     transform: `translateY(${d.start}px)`,
@@ -150,7 +148,7 @@ const b = 3, B = N(
                         onClick: () => f(p),
                         className: c(
                           "w-[88px] h-10 flex items-center justify-center text-sm font-medium transition-colors duration-200 border border-transparent focus:outline-none",
-                          C[h],
+                          E[h],
                           g ? "bg-primary text-on-primary font-bold shadow-sm" : "text-on-surface hover:bg-surface-container-highest hover:border-outline-variant/30"
                         ),
                         children: p
@@ -168,13 +166,13 @@ const b = 3, B = N(
     );
   }
 );
-B.displayName = "YearPicker";
-const L = N(
+T.displayName = "YearPicker";
+const $ = z(
   ({
     currentMonthIndex: n,
     onSelectMonth: f,
     itemShape: h = "full"
-  }) => /* @__PURE__ */ e(O, { className: "h-full", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-4 p-4 min-h-full content-center", children: [
+  }) => /* @__PURE__ */ e(B, { className: "h-full", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-3 gap-4 p-4 min-h-full content-center", children: [
     "Jan",
     "Feb",
     "Mar",
@@ -193,7 +191,7 @@ const L = N(
       onClick: () => f(i),
       className: c(
         "h-12 text-sm font-medium transition-colors duration-200 border border-transparent focus:outline-none",
-        C[h],
+        E[h],
         i === n ? "bg-primary text-on-primary font-bold shadow-sm" : "text-on-surface hover:bg-surface-container-highest hover:border-outline-variant"
       ),
       children: s
@@ -201,8 +199,8 @@ const L = N(
     s
   )) }) })
 );
-L.displayName = "MonthPicker";
-const ue = V.forwardRef(
+$.displayName = "MonthPicker";
+const pe = A.forwardRef(
   ({
     className: n,
     shape: f,
@@ -214,27 +212,33 @@ const ue = V.forwardRef(
     onRangeSelect: l,
     ...m
   }, d) => {
-    const [t, y] = R("days"), [p, g] = R(0), {
-      cursorDate: T,
-      daysInMonth: $,
-      weekdays: J,
-      getDayProps: H,
-      nextMonth: F,
-      prevMonth: U,
-      nextYear: W,
-      prevYear: q,
-      selectYear: G,
-      selectMonth: K,
-      currentMonthName: Q,
-      currentMonthIndex: X,
-      currentYear: M
-    } = le(i instanceof Date ? i : /* @__PURE__ */ new Date(), i, s), k = () => {
-      g(1), t === "years" ? W() : F();
-    }, D = () => {
-      g(-1), t === "years" ? q() : U();
-    }, z = 50, Z = (r, o) => {
-      t === "days" && (o.offset.x < -z ? k() : o.offset.x > z && D());
-    }, ee = (r) => {
+    const [t, y] = k("days"), [p, g] = k(0), [w, J] = k(!1);
+    O(() => {
+      typeof document < "u" && J(
+        document.documentElement.dir === "rtl" || document.documentElement.classList.contains("rtl")
+      );
+    }, []);
+    const {
+      cursorDate: H,
+      daysInMonth: F,
+      weekdays: U,
+      getDayProps: W,
+      nextMonth: q,
+      prevMonth: G,
+      nextYear: K,
+      prevYear: Q,
+      selectYear: X,
+      selectMonth: Z,
+      currentMonthName: ee,
+      currentMonthIndex: te,
+      currentYear: R
+    } = fe(i instanceof Date ? i : /* @__PURE__ */ new Date(), i, s), N = () => {
+      g(w ? -1 : 1), t === "years" ? K() : q();
+    }, C = () => {
+      g(w ? 1 : -1), t === "years" ? Q() : G();
+    }, b = 50, re = (r, o) => {
+      t === "days" && (w ? o.offset.x < -b ? C() : o.offset.x > b && N() : o.offset.x < -b ? N() : o.offset.x > b && C());
+    }, ne = (r) => {
       if (s === "single")
         x?.(r);
       else {
@@ -246,7 +250,7 @@ const ue = V.forwardRef(
       "div",
       {
         ref: d,
-        className: c(ce({ shape: f, variant: h, className: n })),
+        className: c(de({ shape: f, variant: h, className: n })),
         ...m,
         children: [
           /* @__PURE__ */ u("div", { className: "flex items-center justify-between h-12 px-2 mb-4 relative z-20", children: [
@@ -261,9 +265,9 @@ const ue = V.forwardRef(
                     t === "months" ? "bg-secondary-container text-on-secondary-container" : "text-on-surface hover:bg-surface-container-highest"
                   ),
                   children: [
-                    /* @__PURE__ */ e("span", { children: Q }),
+                    /* @__PURE__ */ e("span", { children: ee }),
                     /* @__PURE__ */ e(
-                      I,
+                      S,
                       {
                         className: c(
                           "w-4 h-4 transition-transform duration-200",
@@ -284,9 +288,9 @@ const ue = V.forwardRef(
                     t === "years" ? "bg-secondary-container text-on-secondary-container" : "text-on-surface hover:bg-surface-container-highest"
                   ),
                   children: [
-                    /* @__PURE__ */ e("span", { children: M }),
+                    /* @__PURE__ */ e("span", { children: R }),
                     /* @__PURE__ */ e(
-                      I,
+                      S,
                       {
                         className: c(
                           "w-4 h-4 transition-transform duration-200",
@@ -307,47 +311,47 @@ const ue = V.forwardRef(
                 ),
                 children: [
                   /* @__PURE__ */ e(
-                    S,
+                    V,
                     {
                       variant: "ghost",
                       size: "sm",
                       shape: "full",
-                      onClick: D,
-                      children: /* @__PURE__ */ e(oe, { className: "w-5 h-5 text-on-surface-variant" })
+                      onClick: C,
+                      children: /* @__PURE__ */ e(ie, { className: "w-5 h-5 text-on-surface-variant rtl:rotate-180" })
                     }
                   ),
                   /* @__PURE__ */ e(
-                    S,
+                    V,
                     {
                       variant: "ghost",
                       size: "sm",
                       shape: "full",
-                      onClick: k,
-                      children: /* @__PURE__ */ e(ae, { className: "w-5 h-5 text-on-surface-variant" })
+                      onClick: N,
+                      children: /* @__PURE__ */ e(le, { className: "w-5 h-5 text-on-surface-variant rtl:rotate-180" })
                     }
                   )
                 ]
               }
             )
           ] }),
-          /* @__PURE__ */ e("div", { className: "relative h-[312px] overflow-hidden", children: /* @__PURE__ */ u(ne, { mode: "popLayout", custom: p, initial: !1, children: [
+          /* @__PURE__ */ e("div", { className: "relative h-[312px] overflow-hidden", children: /* @__PURE__ */ u(se, { mode: "popLayout", custom: p, initial: !1, children: [
             t === "days" && /* @__PURE__ */ u(
-              v.div,
+              M.div,
               {
                 custom: p,
-                variants: me,
+                variants: he,
                 initial: "enter",
                 animate: "center",
                 exit: "exit",
-                transition: de,
+                transition: ue,
                 drag: "x",
                 dragConstraints: { left: 0, right: 0 },
                 dragElastic: 0.2,
-                onDragEnd: Z,
+                onDragEnd: re,
                 style: { willChange: "transform" },
                 className: "absolute inset-0 flex flex-col w-full h-full touch-pan-y",
                 children: [
-                  /* @__PURE__ */ e("div", { className: "grid grid-cols-7 mb-2 shrink-0", children: J.map((r, o) => /* @__PURE__ */ e(
+                  /* @__PURE__ */ e("div", { className: "grid grid-cols-7 mb-2 shrink-0", children: U.map((r, o) => /* @__PURE__ */ e(
                     "div",
                     {
                       className: "h-8 flex items-center justify-center text-on-surface-variant text-xs font-medium",
@@ -355,24 +359,24 @@ const ue = V.forwardRef(
                     },
                     o
                   )) }),
-                  /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-y-1", children: $.map((r, o) => {
-                    const E = H(r), { isRangeStart: P, isRangeEnd: Y, isInRange: j } = E;
+                  /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-y-1", children: F.map((r, o) => {
+                    const I = W(r), { isRangeStart: P, isRangeEnd: Y, isInRange: j } = I;
                     return /* @__PURE__ */ e(
                       "div",
                       {
                         className: c(
                           "relative flex items-center justify-center w-full h-10 p-0",
                           (j || P || Y) && "before:absolute before:inset-y-0 before:bg-primary/10 before:z-0",
-                          P && "before:left-1/2 before:right-0 before:rounded-l-full",
-                          Y && "before:left-0 before:right-1/2 before:rounded-r-full",
-                          j && "before:left-0 before:right-0"
+                          P && "before:start-1/2 before:end-0 before:rounded-s-full",
+                          Y && "before:start-0 before:end-1/2 before:rounded-e-full",
+                          j && "before:start-0 before:end-0"
                         ),
                         children: /* @__PURE__ */ e(
-                          _,
+                          L,
                           {
                             day: r,
-                            ...E,
-                            onClick: () => ee(r),
+                            ...I,
+                            onClick: () => ne(r),
                             itemShape: a
                           }
                         )
@@ -382,10 +386,10 @@ const ue = V.forwardRef(
                   }) })
                 ]
               },
-              w(T, "yyyy-MM")
+              D(H, "yyyy-MM")
             ),
             t === "months" && /* @__PURE__ */ e(
-              v.div,
+              M.div,
               {
                 initial: { opacity: 0, scale: 0.9 },
                 animate: { opacity: 1, scale: 1 },
@@ -393,11 +397,11 @@ const ue = V.forwardRef(
                 transition: { duration: 0.2 },
                 className: "absolute inset-0 z-10",
                 children: /* @__PURE__ */ e(
-                  L,
+                  $,
                   {
-                    currentMonthIndex: X,
+                    currentMonthIndex: te,
                     onSelectMonth: (r) => {
-                      K(r), y("days");
+                      Z(r), y("days");
                     },
                     itemShape: a
                   }
@@ -406,7 +410,7 @@ const ue = V.forwardRef(
               "months"
             ),
             t === "years" && /* @__PURE__ */ e(
-              v.div,
+              M.div,
               {
                 initial: { opacity: 0, scale: 0.9 },
                 animate: { opacity: 1, scale: 1 },
@@ -414,11 +418,11 @@ const ue = V.forwardRef(
                 transition: { duration: 0.2 },
                 className: "absolute inset-0 z-10",
                 children: /* @__PURE__ */ e(
-                  B,
+                  T,
                   {
-                    currentYear: M,
+                    currentYear: R,
                     onSelectYear: (r) => {
-                      G(r), y("days");
+                      X(r), y("days");
                     },
                     itemShape: a
                   }
@@ -432,7 +436,7 @@ const ue = V.forwardRef(
     );
   }
 );
-ue.displayName = "Calendar";
+pe.displayName = "Calendar";
 export {
-  ue as Calendar
+  pe as Calendar
 };

package/dist/components/date-picker/date-picker.mjs

@@ -178,12 +178,12 @@ const z = {
           isFocused: f,
           isErrored: g
         }),
-        "w-full justify-start text-left font-normal text-on-surface",
+        "w-full justify-start text-start font-normal text-on-surface",
         !T && "text-on-surface-variant/50",
         I?.inputWrapper
       ),
       children: [
-        /* @__PURE__ */ e(O, { className: "mr-2 h-4 w-4 opacity-50 shrink-0" }),
+        /* @__PURE__ */ e(O, { className: "me-2 h-4 w-4 opacity-50 shrink-0" }),
         /* @__PURE__ */ e("span", { className: "truncate", children: A })
       ]
     }
@@ -194,7 +194,7 @@ const z = {
         "label",
         {
           className: s(
-            "ml-1 text-sm font-medium",
+            "ms-1 text-sm font-medium",
             g ? "text-error" : "text-on-surface-variant"
           ),
           children: c
@@ -236,7 +236,7 @@ const z = {
       "label",
       {
         className: s(
-          "ml-1 text-sm font-medium",
+          "ms-1 text-sm font-medium",
           g ? "text-error" : "text-on-surface-variant"
         ),
         children: c