chesai-ui 0.16.13 → 0.16.14

package/dist/components/card/index.d.ts

@@ -25,6 +25,9 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     elevation?: "none" | 1 | 2 | 3 | 4 | 5;
     enableRipple?: boolean;
     glass?: boolean;
+    animatedGradientBorder?: boolean;
+    gradientColors?: string[];
+    gradientWidth?: number;
 }
 export declare const CardGroup: React.ForwardRefExoticComponent<CardGroupProps & React.RefAttributes<HTMLDivElement>>;
 export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card/index.mjs

@@ -1,10 +1,10 @@
-import { jsx as v } from "react/jsx-runtime";
-import { cva as w } from "class-variance-authority";
-import { clsx as m } from "clsx";
+import { jsx as m, jsxs as x, Fragment as R } from "react/jsx-runtime";
+import { cva as A } from "class-variance-authority";
+import { clsx as g } from "clsx";
 import * as o from "react";
 import { twMerge as h } from "tailwind-merge";
-import y from "use-ripple-hook";
-const N = w(
+import F from "use-ripple-hook";
+const M = A(
   "transition-all duration-300 ease-out relative z-0 overflow-hidden",
   {
     variants: {
@@ -179,13 +179,13 @@ const N = w(
       glass: !1
     }
   }
-), E = {
+), V = {
   none: "gap-0",
   xs: "gap-0.5",
   sm: "gap-1",
   md: "gap-2",
   lg: "gap-4"
-}, k = (n, s, r, t) => {
+}, j = (n, s, r, t) => {
   const e = n === 0, a = n === s - 1, i = s === 1;
   if (r === "sharp") return "!rounded-none";
   if (i) {
@@ -204,7 +204,7 @@ const N = w(
       return e ? "!rounded-l-xl !rounded-r-sm" : a ? "!rounded-l-sm !rounded-r-xl" : "!rounded-l-sm !rounded-r-sm";
   }
   return "";
-}, C = o.forwardRef(
+}, B = o.forwardRef(
   ({
     className: n,
     children: s,
@@ -213,36 +213,36 @@ const N = w(
     gap: e = "xs",
     ...a
   }, i) => {
-    const c = o.Children.toArray(s).filter(
+    const l = o.Children.toArray(s).filter(
       o.isValidElement
     );
-    return /* @__PURE__ */ v(
+    return /* @__PURE__ */ m(
       "div",
       {
         ref: i,
         role: "group",
         "data-slot": "card-group",
         className: h(
-          m(
+          g(
             "flex",
             t === "vertical" ? "flex-col" : "flex-row",
-            E[e],
+            V[e],
             n
           )
         ),
         ...a,
-        children: c.map((l, u) => {
-          const d = k(
+        children: l.map((d, u) => {
+          const c = j(
             u,
-            c.length,
+            l.length,
             r,
             t
           ), f = e === "none" && u > 0 ? t === "vertical" ? "-mt-px" : "-ml-px" : "";
-          return o.cloneElement(l, {
+          return o.cloneElement(d, {
             className: h(
-              m(
-                l.props.className,
-                d,
+              g(
+                d.props.className,
+                c,
                 f,
                 "focus-visible:z-10"
               )
@@ -253,8 +253,8 @@ const N = w(
     );
   }
 );
-C.displayName = "CardGroup";
-const R = o.forwardRef(
+B.displayName = "CardGroup";
+const O = o.forwardRef(
   ({
     className: n,
     shape: s,
@@ -263,48 +263,79 @@ const R = o.forwardRef(
     bordered: e,
     elevation: a,
     enableRipple: i,
-    hoverEffect: c,
-    glass: l,
-    onPointerDown: u,
-    ...d
-  }, f) => {
+    hoverEffect: l,
+    glass: d,
+    animatedGradientBorder: u,
+    gradientColors: c,
+    gradientWidth: f = 2,
+    onPointerDown: y,
+    children: w,
+    ...N
+  }, k) => {
     const b = o.useRef(null);
-    o.useImperativeHandle(f, () => b.current);
-    const p = r === "high-contrast" || r === "tertiary" ? "var(--color-ripple-dark)" : "var(--color-ripple-light)", [, x] = y({
+    o.useImperativeHandle(k, () => b.current);
+    const E = r === "high-contrast" || r === "tertiary" ? "var(--color-ripple-dark)" : "var(--color-ripple-light)", [, C] = F({
       ref: b,
-      color: p,
+      color: E,
       duration: 600,
       disabled: !i
-    });
-    return /* @__PURE__ */ v(
+    }), G = ["#4285F4", "#EA4335", "#FBBC05", "#34A853"], v = c && c.length > 0 ? c : G, z = [...v, ...v].join(", ");
+    return /* @__PURE__ */ x(
       "div",
       {
         ref: b,
         className: h(
-          m(
-            N({
+          g(
+            M({
               shape: s,
               variant: r,
               padding: t,
               bordered: e,
               elevation: a,
-              hoverEffect: c,
-              glass: l
+              hoverEffect: l,
+              glass: d
             }),
             n
           )
         ),
-        onPointerDown: (g) => {
-          i && x(g), u?.(g);
+        onPointerDown: (p) => {
+          i && C(p), y?.(p);
         },
-        ...d
+        ...N,
+        children: [
+          u && /* @__PURE__ */ x(R, { children: [
+            /* @__PURE__ */ m("style", { children: `
+                @keyframes card-border-gradient-animation {
+                  0% { background-position: 0% 50%; }
+                  100% { background-position: 100% 50%; }
+                }
+              ` }),
+            /* @__PURE__ */ m(
+              "div",
+              {
+                className: "absolute inset-0 rounded-[inherit] pointer-events-none z-10",
+                style: {
+                  padding: `${f}px`,
+                  background: `linear-gradient(90deg, ${z})`,
+                  backgroundSize: "200% 100%",
+                  animation: "card-border-gradient-animation 4s linear infinite",
+                  WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+                  WebkitMaskComposite: "xor",
+                  mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+                  maskComposite: "exclude"
+                }
+              }
+            )
+          ] }),
+          w
+        ]
       }
     );
   }
 );
-R.displayName = "Card";
+O.displayName = "Card";
 export {
-  R as Card,
-  C as CardGroup,
-  N as cardVariants
+  O as Card,
+  B as CardGroup,
+  M as cardVariants
 };

package/dist/components/full-calendar/index.mjs

@@ -1,28 +1,29 @@
-import { jsx as e, jsxs as f, Fragment as $ } from "react/jsx-runtime";
-import { clsx as h } from "clsx";
-import { format as m, startOfWeek as g, endOfWeek as K, differenceInDays as A, startOfDay as b, addDays as I, addWeeks as _, startOfMonth as x, addMonths as H, startOfYear as M, addYears as Q } from "date-fns";
-import { ChevronLeft as q, ChevronRight as G, Printer as J } from "lucide-react";
-import y, { useMemo as k, useEffect as U } from "react";
+import { jsx as e, jsxs as p, Fragment as A } from "react/jsx-runtime";
+import { clsx as u } from "clsx";
+import { format as m, startOfWeek as g, endOfWeek as I, differenceInDays as _, startOfDay as b, addDays as H, addWeeks as Q, startOfMonth as x, addMonths as q, startOfYear as M, addYears as G } from "date-fns";
+import { ChevronRight as k, ChevronLeft as C, Printer as J } from "lucide-react";
+import y, { useMemo as N, useEffect as U } from "react";
 import { createPortal as X } from "react-dom";
 import { Button as Z } from "../button/index.mjs";
 import { IconButton as w } from "../icon-button/index.mjs";
 import { Select as ee } from "../select/index.mjs";
 import { Typography as te } from "../typography/index.mjs";
 import { TooltipProvider as re, TooltipTrigger as ae, Tooltip as ne } from "../tooltip/index.mjs";
-import { useFullCalendar as v, PrintModeContext as C, PrintOverrideProvider as ie, FullCalendarProvider as oe } from "./calendar-context.mjs";
-import { MonthView as le } from "./month-view.mjs";
-import { TimelineView as se } from "./timeline-view.mjs";
-import { YearView as de } from "./year-view.mjs";
-import { EventPopover as ce } from "./event-popover.mjs";
-import { PrintPreviewDialog as me } from "./print-preview-dialog.mjs";
-import { getCalendarBgClasses as N, getCalendarStickyBgClasses as fe } from "./utils.mjs";
-import { useMediaQuery as pe } from "@uidotdev/usehooks";
-import { Calendar as ue } from "../date-picker/calendar.mjs";
-const he = () => {
-  const { currentDate: t, view: n } = v(), l = y.useContext(C), c = y.useMemo(() => {
+import { useLayout as ie } from "../../context/layout-context.mjs";
+import { useFullCalendar as v, PrintModeContext as S, PrintOverrideProvider as oe, FullCalendarProvider as le } from "./calendar-context.mjs";
+import { MonthView as se } from "./month-view.mjs";
+import { TimelineView as de } from "./timeline-view.mjs";
+import { YearView as ce } from "./year-view.mjs";
+import { EventPopover as me } from "./event-popover.mjs";
+import { PrintPreviewDialog as pe } from "./print-preview-dialog.mjs";
+import { getCalendarSidePanelBgClasses as fe, getCalendarBgClasses as D, getCalendarStickyBgClasses as he } from "./utils.mjs";
+import { useMediaQuery as ue } from "@uidotdev/usehooks";
+import { Calendar as ye } from "../date-picker/calendar.mjs";
+const ve = () => {
+  const { currentDate: t, view: n } = v(), l = y.useContext(S), c = y.useMemo(() => {
     if (n === "day") return m(t, "MMMM d, yyyy");
     if (n === "week") {
-      const r = g(t), o = K(t);
+      const r = g(t), o = I(t);
       return `${m(r, "MMM d, yyyy")} - ${m(o, "MMM d, yyyy")}`;
     }
     return n === "month" ? m(t, "MMMM yyyy") : n === "year" ? m(t, "yyyy") : m(t, "MMMM yyyy");
@@ -30,59 +31,59 @@ const he = () => {
   return /* @__PURE__ */ e(
     "div",
     {
-      className: h(
+      className: u(
         "w-full text-center py-4 font-bold text-2xl shrink-0",
         l ? "bg-white text-black border-b border-black/20" : "bg-surface text-on-surface border-b border-outline-variant/30"
       ),
       children: c
     }
   );
-}, ye = ({
+}, we = ({
   isPreview: t = !1,
   printWidth: n,
   printHeight: l,
   scale: c = 1
 }) => {
-  const { printSettings: r } = v(), o = k(() => {
+  const { printSettings: r } = v(), o = N(() => {
     if (r.view !== "auto") return r.view;
-    const i = A(r.rangeEnd, r.rangeStart) + 1;
+    const i = _(r.rangeEnd, r.rangeStart) + 1;
     return i <= 1 ? "day" : i <= 7 ? "week" : "month";
-  }, [r.view, r.rangeStart, r.rangeEnd]), p = k(() => {
+  }, [r.view, r.rangeStart, r.rangeEnd]), f = N(() => {
     const i = b(r.rangeStart), d = b(r.rangeEnd), s = [];
     if (o === "day") {
       let a = i;
       for (; a <= d; )
-        s.push(a), a = I(a, 1);
+        s.push(a), a = H(a, 1);
     } else if (o === "week") {
       let a = g(i);
-      const u = g(d);
-      for (; a <= u; )
-        s.push(a), a = _(a, 1);
+      const h = g(d);
+      for (; a <= h; )
+        s.push(a), a = Q(a, 1);
     } else if (o === "month") {
       let a = x(i);
-      const u = x(d);
-      for (; a <= u; )
-        s.push(a), a = H(a, 1);
+      const h = x(d);
+      for (; a <= h; )
+        s.push(a), a = q(a, 1);
     } else if (o === "year") {
       let a = M(i);
-      const u = M(d);
-      for (; a <= u; )
-        s.push(a), a = Q(a, 1);
+      const h = M(d);
+      for (; a <= h; )
+        s.push(a), a = G(a, 1);
     }
     return s.length > 0 ? s : [i];
   }, [r.rangeStart, r.rangeEnd, o]);
   return /* @__PURE__ */ e(
     "div",
     {
-      className: h(
+      className: u(
         "flex flex-col w-full",
         t && "items-center origin-top gap-8"
       ),
       style: t ? { transform: `scale(${c})`, transformOrigin: "top center" } : {},
-      children: p.map((i, d) => /* @__PURE__ */ e(
+      children: f.map((i, d) => /* @__PURE__ */ e(
         "div",
         {
-          className: h(
+          className: u(
             "print-page-container bg-white text-black",
             t && "shadow-2xl border border-outline-variant/30 shrink-0"
           ),
@@ -100,14 +101,14 @@ const he = () => {
             fontSize: r.fontSize === "small" ? "0.85rem" : r.fontSize === "smallest" ? "0.7rem" : "1rem",
             filter: r.colorStyle === "bw" ? "grayscale(100%)" : "none"
           },
-          children: /* @__PURE__ */ f(
-            ie,
+          children: /* @__PURE__ */ p(
+            oe,
             {
               overrideDate: i,
               overrideView: o,
               children: [
-                /* @__PURE__ */ e(he, {}),
-                /* @__PURE__ */ e(P, {})
+                /* @__PURE__ */ e(ve, {}),
+                /* @__PURE__ */ e(z, {})
               ]
             }
           )
@@ -116,8 +117,8 @@ const he = () => {
       ))
     }
   );
-}, D = y.forwardRef(({ className: t, children: n, ...l }, c) => {
-  const { setPrintPreviewOpen: r, printSettings: o, variant: p } = v();
+}, P = y.forwardRef(({ className: t, children: n, ...l }, c) => {
+  const { setPrintPreviewOpen: r, printSettings: o, variant: f } = v();
   U(() => {
     const d = (s) => {
       (s.ctrlKey || s.metaKey) && s.key.toLowerCase() === "p" && (s.preventDefault(), r(!0));
@@ -157,33 +158,33 @@ const he = () => {
       }
     }
   `;
-  return /* @__PURE__ */ f($, { children: [
+  return /* @__PURE__ */ p(A, { children: [
     /* @__PURE__ */ e("style", { children: i }),
-    /* @__PURE__ */ f(
+    /* @__PURE__ */ p(
       "div",
       {
         ref: c,
-        className: h(
-          "flex flex-col w-full h-full text-on-surface rounded-2xl overflow-hidden font-manrope relative print:hidden",
-          N(p),
+        className: u(
+          "flex flex-col w-full h-full rounded-2xl overflow-hidden font-manrope relative print:hidden",
+          D(f),
           t
         ),
         ...l,
         children: [
           n,
-          /* @__PURE__ */ e(ce, {}),
-          /* @__PURE__ */ e(me, {})
+          /* @__PURE__ */ e(me, {}),
+          /* @__PURE__ */ e(pe, {})
         ]
       }
     ),
     typeof document < "u" && X(
-      /* @__PURE__ */ e("div", { className: "hidden print:block chesai-calendar-print-root w-full bg-white", children: /* @__PURE__ */ e(ye, {}) }),
+      /* @__PURE__ */ e("div", { className: "hidden print:block chesai-calendar-print-root w-full bg-white", children: /* @__PURE__ */ e(we, {}) }),
       document.body
     )
   ] });
 });
-D.displayName = "FullCalendarRootContent";
-const S = y.forwardRef(
+P.displayName = "FullCalendarRootContent";
+const T = y.forwardRef(
   ({
     className: t,
     events: n,
@@ -191,73 +192,73 @@ const S = y.forwardRef(
     initialView: c,
     variant: r,
     onDateClick: o,
-    onEventClick: p,
+    onEventClick: f,
     onViewChange: i,
     onEventCreate: d,
     onEventUpdate: s,
     onEventDelete: a,
-    renderEventContent: u,
+    renderEventContent: h,
     // Included Customization Props
-    renderPopoverHeader: T,
-    renderPopoverFooter: z,
-    renderPopoverCustomFields: F,
-    hidePopoverTitle: O,
-    hidePopoverTime: E,
-    hidePopoverRecurrence: V,
-    disableCreateOnGridClick: R,
-    disableEventClick: j,
-    disableDragAndDrop: B,
-    children: L,
-    ...W
-  }, Y) => /* @__PURE__ */ e(
-    oe,
+    renderPopoverHeader: F,
+    renderPopoverFooter: O,
+    renderPopoverCustomFields: E,
+    hidePopoverTitle: V,
+    hidePopoverTime: R,
+    hidePopoverRecurrence: j,
+    disableCreateOnGridClick: B,
+    disableEventClick: L,
+    disableDragAndDrop: W,
+    children: Y,
+    ...$
+  }, K) => /* @__PURE__ */ e(
+    le,
     {
       events: n,
       initialDate: l,
       initialView: c,
       variant: r,
       onDateClick: o,
-      onEventClick: p,
+      onEventClick: f,
       onViewChange: i,
       onEventCreate: d,
       onEventUpdate: s,
       onEventDelete: a,
-      renderEventContent: u,
-      renderPopoverHeader: T,
-      renderPopoverFooter: z,
-      renderPopoverCustomFields: F,
-      hidePopoverTitle: O,
-      hidePopoverTime: E,
-      hidePopoverRecurrence: V,
-      disableCreateOnGridClick: R,
-      disableEventClick: j,
-      disableDragAndDrop: B,
-      children: /* @__PURE__ */ e(D, { ref: Y, className: t, ...W, children: L })
+      renderEventContent: h,
+      renderPopoverHeader: F,
+      renderPopoverFooter: O,
+      renderPopoverCustomFields: E,
+      hidePopoverTitle: V,
+      hidePopoverTime: R,
+      hidePopoverRecurrence: j,
+      disableCreateOnGridClick: B,
+      disableEventClick: L,
+      disableDragAndDrop: W,
+      children: /* @__PURE__ */ e(P, { ref: K, className: t, ...$, children: Y })
     }
   )
 );
-S.displayName = "FullCalendar";
-const ve = ({ className: t }) => {
+T.displayName = "FullCalendar";
+const ge = ({ className: t }) => {
   const {
     currentDate: n,
     view: l,
     variant: c,
     setView: r,
     navigateNext: o,
-    navigatePrev: p,
+    navigatePrev: f,
     navigateToday: i,
     setPrintPreviewOpen: d
-  } = v(), s = y.useMemo(() => l === "day" ? m(n, "MMMM d, yyyy") : l === "week" ? m(n, "MMMM yyyy") : l === "year" ? m(n, "yyyy") : m(n, "MMMM yyyy"), [n, l]);
-  return /* @__PURE__ */ f(
+  } = v(), { isRtl: s } = ie(), a = y.useMemo(() => l === "day" ? m(n, "MMMM d, yyyy") : l === "week" ? m(n, "MMMM yyyy") : l === "year" ? m(n, "yyyy") : m(n, "MMMM yyyy"), [n, l]);
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: h(
+      className: u(
         "flex items-center justify-between p-4 shrink-0 border-b border-outline-variant/30 z-30 relative print:hidden",
-        fe(c),
+        he(c),
         t
       ),
       children: [
-        /* @__PURE__ */ f("div", { className: "flex items-center gap-2 sm:gap-4", children: [
+        /* @__PURE__ */ p("div", { className: "flex items-center gap-2 sm:gap-4", children: [
           /* @__PURE__ */ e(
             Z,
             {
@@ -268,21 +269,21 @@ const ve = ({ className: t }) => {
               children: "Today"
             }
           ),
-          /* @__PURE__ */ f("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ e(w, { variant: "ghost", size: "sm", onClick: p, children: /* @__PURE__ */ e(q, { className: "w-5 h-5" }) }),
-            /* @__PURE__ */ e(w, { variant: "ghost", size: "sm", onClick: o, children: /* @__PURE__ */ e(G, { className: "w-5 h-5" }) })
+          /* @__PURE__ */ p("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ e(w, { variant: "ghost", size: "sm", onClick: f, children: s ? /* @__PURE__ */ e(k, { className: "w-5 h-5" }) : /* @__PURE__ */ e(C, { className: "w-5 h-5" }) }),
+            /* @__PURE__ */ e(w, { variant: "ghost", size: "sm", onClick: o, children: s ? /* @__PURE__ */ e(C, { className: "w-5 h-5" }) : /* @__PURE__ */ e(k, { className: "w-5 h-5" }) })
           ] }),
           /* @__PURE__ */ e(
             te,
             {
               variant: "title-large",
               className: "font-normal min-w-[150px] sm:min-w-[200px]",
-              children: s
+              children: a
             }
           )
         ] }),
-        /* @__PURE__ */ f("div", { className: "flex items-center gap-2 sm:gap-4", children: [
-          /* @__PURE__ */ f(re, { children: [
+        /* @__PURE__ */ p("div", { className: "flex items-center gap-2 sm:gap-4", children: [
+          /* @__PURE__ */ p(re, { children: [
             /* @__PURE__ */ e(ae, { asChild: !0, children: /* @__PURE__ */ e(
               w,
               {
@@ -301,7 +302,7 @@ const ve = ({ className: t }) => {
               variant: "outlined",
               shape: "full",
               value: l,
-              onValueChange: (a) => r(a),
+              onValueChange: (h) => r(h),
               items: [
                 { value: "day", label: "Day" },
                 { value: "week", label: "Week" },
@@ -314,18 +315,21 @@ const ve = ({ className: t }) => {
       ]
     }
   );
-}, P = () => {
-  const { view: t, variant: n, currentDate: l, setCurrentDate: c } = v(), r = pe("(min-width: 1024px)"), o = y.useContext(C), p = t === "day" && r && !o;
-  return /* @__PURE__ */ f(
+}, z = () => {
+  const { view: t, variant: n, currentDate: l, setCurrentDate: c } = v(), r = ue("(min-width: 1024px)"), o = y.useContext(S), f = t === "day" && r && !o;
+  return /* @__PURE__ */ p(
     "div",
     {
-      className: h(
+      className: u(
         "flex-1 overflow-hidden relative flex flex-row",
-        o ? "bg-white h-full overflow-visible" : N(n)
+        o ? "bg-white h-full overflow-visible" : D(n)
       ),
       children: [
-        p && /* @__PURE__ */ e("div", { className: "w-[350px] shrink-0 border-r border-outline-variant/30 p-2 flex flex-col bg-surface-container-low/30", children: /* @__PURE__ */ e(
-          ue,
+        f && /* @__PURE__ */ e("div", { className: u(
+          "w-[350px] shrink-0 border-r border-outline-variant/30 p-2 flex flex-col",
+          fe(n)
+        ), children: /* @__PURE__ */ e(
+          ye,
           {
             mode: "single",
             value: l,
@@ -337,21 +341,21 @@ const ve = ({ className: t }) => {
             shape: "minimal"
           }
         ) }),
-        /* @__PURE__ */ f("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
-          t === "month" && /* @__PURE__ */ e(le, {}),
-          (t === "week" || t === "day") && /* @__PURE__ */ e(se, {}),
-          t === "year" && /* @__PURE__ */ e(de, {})
+        /* @__PURE__ */ p("div", { className: "flex-1 flex flex-col overflow-hidden relative", children: [
+          t === "month" && /* @__PURE__ */ e(se, {}),
+          (t === "week" || t === "day") && /* @__PURE__ */ e(de, {}),
+          t === "year" && /* @__PURE__ */ e(ce, {})
         ] })
       ]
     }
   );
-}, Le = Object.assign(S, {
-  Toolbar: ve,
-  View: P
+}, $e = Object.assign(T, {
+  Toolbar: ge,
+  View: z
 });
 export {
-  Le as FullCalendar,
-  P as FullCalendarViewDispatcher,
-  he as PrintHeader,
-  ye as PrintPagesLayout
+  $e as FullCalendar,
+  z as FullCalendarViewDispatcher,
+  ve as PrintHeader,
+  we as PrintPagesLayout
 };