chesai-ui 0.16.7 → 0.16.9

package/dist/components/data-display/index.d.ts

@@ -30,5 +30,10 @@ export interface DataDisplayProps<TData> {
      */
     enableSortControl?: boolean;
     searchViewProps?: Partial<Omit<SearchViewProps, "value" | "onChange">>;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    emptyIcon?: React.ReactNode;
+    emptyAction?: React.ReactNode;
+    renderEmptyState?: () => React.ReactNode;
 }
-export declare function DataDisplay<TData>({ data, columns, renderItem, layout, gridProps, masonryProps, itemContainerClassName, pageCount, pagination, onPaginationChange, sorting, onSortingChange, columnFilters, onColumnFiltersChange, globalFilter, onGlobalFilterChange, isLoading, toolbarChildren, bulkActions, enableSortControl, searchViewProps, }: DataDisplayProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataDisplay<TData>({ data, columns, renderItem, layout, gridProps, masonryProps, itemContainerClassName, pageCount, pagination, onPaginationChange, sorting, onSortingChange, columnFilters, onColumnFiltersChange, globalFilter, onGlobalFilterChange, isLoading, toolbarChildren, bulkActions, enableSortControl, searchViewProps, emptyTitle, emptyDescription, emptyIcon, emptyAction, renderEmptyState, }: DataDisplayProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-display/index.mjs

@@ -1,29 +1,30 @@
-import { jsx as e, jsxs as r, Fragment as H } from "react/jsx-runtime";
-import { useReactTable as J, getFacetedUniqueValues as K, getFacetedRowModel as O, getSortedRowModel as Q, getPaginationRowModel as W, getFilteredRowModel as X, getCoreRowModel as Y } from "@tanstack/react-table";
-import { ArrowUpDown as Z } from "lucide-react";
+import { jsx as e, jsxs as r, Fragment as W } from "react/jsx-runtime";
+import { useReactTable as X, getFacetedUniqueValues as Y, getFacetedRowModel as Z, getSortedRowModel as ee, getPaginationRowModel as te, getFilteredRowModel as ne, getCoreRowModel as re } from "@tanstack/react-table";
+import { ArrowUpDown as oe, Search as ie } from "lucide-react";
 import n from "react";
-import { Button as ee } from "../button/index.mjs";
-import { DataTableContext as te } from "../data-table/context.mjs";
-import { advancedFilterFn as ne } from "../data-table/filter-utils.mjs";
-import { DataTablePagination as re } from "../data-table/pagination.mjs";
-import { DataTableToolbar as oe } from "../data-table/toolbar.mjs";
-import { DropdownMenu as ie, DropdownMenuTrigger as le, DropdownMenuContent as ae, DropdownMenuLabel as se, DropdownMenuSeparator as M, DropdownMenuItem as p } from "../dropdown-menu/index.mjs";
-import { Grid as de } from "../layouts/grid.mjs";
-import { Masonry as ce } from "../layouts/masonry.mjs";
-import { LoadingIndicator as me } from "../loadingIndicator/index.mjs";
-function ge({
-  table: l
+import { Button as ae } from "../button/index.mjs";
+import { EmptyState as le } from "../empty-state/index.mjs";
+import { DataTableContext as se } from "../data-table/context.mjs";
+import { advancedFilterFn as de } from "../data-table/filter-utils.mjs";
+import { DataTablePagination as ce } from "../data-table/pagination.mjs";
+import { DataTableToolbar as me } from "../data-table/toolbar.mjs";
+import { DropdownMenu as ue, DropdownMenuTrigger as ge, DropdownMenuContent as fe, DropdownMenuLabel as pe, DropdownMenuSeparator as C, DropdownMenuItem as p } from "../dropdown-menu/index.mjs";
+import { Grid as he } from "../layouts/grid.mjs";
+import { Masonry as Se } from "../layouts/masonry.mjs";
+import { LoadingIndicator as we } from "../loadingIndicator/index.mjs";
+function Fe({
+  table: a
 }) {
-  const d = l.getAllColumns().filter((t) => t.getCanSort());
+  const d = a.getAllColumns().filter((t) => t.getCanSort());
   if (d.length === 0) return null;
-  const o = l.getState().sorting[0];
-  return /* @__PURE__ */ r(ie, { children: [
-    /* @__PURE__ */ e(le, { asChild: !0, children: /* @__PURE__ */ r(
-      ee,
+  const o = a.getState().sorting[0];
+  return /* @__PURE__ */ r(ue, { children: [
+    /* @__PURE__ */ e(ge, { asChild: !0, children: /* @__PURE__ */ r(
+      ae,
       {
         variant: "secondary",
         size: "sm",
-        startIcon: /* @__PURE__ */ e(Z, { className: "h-3.5 w-3.5" }),
+        startIcon: /* @__PURE__ */ e(oe, { className: "h-3.5 w-3.5" }),
         className: "h-8",
         children: [
           "Sort",
@@ -37,9 +38,9 @@ function ge({
         ]
       }
     ) }),
-    /* @__PURE__ */ r(ae, { align: "end", className: "w-48", children: [
-      /* @__PURE__ */ e(se, { children: "Sort by" }),
-      /* @__PURE__ */ e(M, {}),
+    /* @__PURE__ */ r(fe, { align: "end", className: "w-48", children: [
+      /* @__PURE__ */ e(pe, { children: "Sort by" }),
+      /* @__PURE__ */ e(C, {}),
       d.map((t) => {
         const c = typeof t.columnDef.header == "string" ? t.columnDef.header : t.id;
         return /* @__PURE__ */ r(n.Fragment, { children: [
@@ -53,99 +54,113 @@ function ge({
           ] })
         ] }, t.id);
       }),
-      o && /* @__PURE__ */ r(H, { children: [
-        /* @__PURE__ */ e(M, {}),
-        /* @__PURE__ */ e(p, { onClick: () => l.resetSorting(), children: "Clear Sort" })
+      o && /* @__PURE__ */ r(W, { children: [
+        /* @__PURE__ */ e(C, {}),
+        /* @__PURE__ */ e(p, { onClick: () => a.resetSorting(), children: "Clear Sort" })
       ] })
     ] })
   ] });
 }
-function ye({
-  data: l,
+function Ae({
+  data: a,
   columns: d,
   renderItem: o,
   layout: t = "grid",
   gridProps: c,
-  masonryProps: C,
-  itemContainerClassName: g,
-  pageCount: D,
-  pagination: b,
+  masonryProps: D,
+  itemContainerClassName: u,
+  pageCount: b,
+  pagination: y,
   onPaginationChange: h,
   sorting: R,
   onSortingChange: S,
-  columnFilters: x,
+  columnFilters: v,
   onColumnFiltersChange: w,
-  globalFilter: y,
+  globalFilter: x,
   onGlobalFilterChange: F,
-  isLoading: v,
-  toolbarChildren: N,
-  bulkActions: I,
-  enableSortControl: P = !0,
-  searchViewProps: T
+  isLoading: N,
+  toolbarChildren: I,
+  bulkActions: P,
+  enableSortControl: T = !0,
+  searchViewProps: V,
+  emptyTitle: j,
+  emptyDescription: A,
+  emptyIcon: k,
+  emptyAction: G,
+  renderEmptyState: M
 }) {
-  const [V, j] = n.useState({}), [A, k] = n.useState({}), [G, U] = n.useState(
+  const [U, q] = n.useState({}), [z, L] = n.useState({}), [_, B] = n.useState(
     []
-  ), [q, z] = n.useState([]), [L, _] = n.useState(""), [B, $] = n.useState({
+  ), [$, E] = n.useState([]), [H, J] = n.useState(""), [K, O] = n.useState({
     pageIndex: 0,
     pageSize: 12
-  }), m = !!h, u = !!S, a = !!w || !!F, f = J({
-    data: l,
+  }), m = !!h, g = !!S, l = !!w || !!F, f = X({
+    data: a,
     columns: d,
-    pageCount: m ? D : void 0,
+    pageCount: m ? b : void 0,
     state: {
-      sorting: u ? R : G,
-      columnFilters: a ? x : q,
-      globalFilter: a ? y : L,
-      pagination: m ? b : B,
-      columnVisibility: A,
-      rowSelection: V
+      sorting: g ? R : _,
+      columnFilters: l ? v : $,
+      globalFilter: l ? x : H,
+      pagination: m ? y : K,
+      columnVisibility: z,
+      rowSelection: U
     },
-    onRowSelectionChange: j,
-    onColumnVisibilityChange: k,
-    onSortingChange: u ? S : U,
-    onColumnFiltersChange: a ? w : z,
-    onGlobalFilterChange: a ? F : _,
-    onPaginationChange: m ? h : $,
+    onRowSelectionChange: q,
+    onColumnVisibilityChange: L,
+    onSortingChange: g ? S : B,
+    onColumnFiltersChange: l ? w : E,
+    onGlobalFilterChange: l ? F : J,
+    onPaginationChange: m ? h : O,
     manualPagination: m,
-    manualSorting: u,
-    manualFiltering: a,
-    getCoreRowModel: Y(),
-    getFilteredRowModel: X(),
-    getPaginationRowModel: W(),
-    getSortedRowModel: Q(),
-    getFacetedRowModel: O(),
-    getFacetedUniqueValues: K(),
+    manualSorting: g,
+    manualFiltering: l,
+    getCoreRowModel: re(),
+    getFilteredRowModel: ne(),
+    getPaginationRowModel: te(),
+    getSortedRowModel: ee(),
+    getFacetedRowModel: Z(),
+    getFacetedUniqueValues: Y(),
     defaultColumn: {
-      filterFn: ne
+      filterFn: de
     }
-  }), s = f.getRowModel().rows, E = () => v && s.length === 0 ? /* @__PURE__ */ e("div", { className: "flex h-64 w-full items-center justify-center", children: /* @__PURE__ */ e(me, { variant: "material-morph" }) }) : s.length === 0 ? /* @__PURE__ */ e("div", { className: "flex h-64 w-full items-center justify-center border-2 border-dashed border-outline-variant rounded-xl text-on-surface-variant", children: "No results found." }) : t === "masonry" ? /* @__PURE__ */ e(
-    ce,
+  }), s = f.getRowModel().rows, Q = () => N && s.length === 0 ? /* @__PURE__ */ e("div", { className: "flex h-64 w-full items-center justify-center", children: /* @__PURE__ */ e(we, { variant: "material-morph" }) }) : s.length === 0 ? M ? M() : /* @__PURE__ */ e("div", { className: "flex h-64 w-full items-center justify-center border-2 border-dashed border-outline-variant rounded-xl p-6", children: /* @__PURE__ */ e(
+    le,
+    {
+      variant: "default",
+      icon: k ?? /* @__PURE__ */ e(ie, { className: "h-10 w-10 opacity-40 text-on-surface-variant" }),
+      title: j ?? "No results found.",
+      description: A ?? "Try adjusting your filters or search terms.",
+      action: G
+    }
+  ) }) : t === "masonry" ? /* @__PURE__ */ e(
+    Se,
     {
       columns: { default: 1, sm: 2, md: 3, lg: 4 },
       gap: "md",
-      ...C,
-      className: g,
+      ...D,
+      className: u,
       children: s.map((i) => /* @__PURE__ */ e(n.Fragment, { children: o(i) }, i.id))
     }
   ) : t === "grid" ? /* @__PURE__ */ e(
-    de,
+    he,
     {
       columns: { default: 1, sm: 2, md: 3, lg: 4 },
       gap: "md",
       ...c,
-      className: g,
+      className: u,
       children: s.map((i) => /* @__PURE__ */ e(n.Fragment, { children: o(i) }, i.id))
     }
-  ) : /* @__PURE__ */ e("div", { className: `flex flex-col gap-4 ${g}`, children: s.map((i) => /* @__PURE__ */ e(n.Fragment, { children: o(i) }, i.id)) });
-  return /* @__PURE__ */ e(te.Provider, { value: { table: f, searchViewProps: T }, children: /* @__PURE__ */ r("div", { className: "flex flex-col w-full space-y-6", children: [
-    /* @__PURE__ */ r(oe, { bulkActions: I, children: [
-      N,
-      P && /* @__PURE__ */ e(ge, { table: f })
+  ) : /* @__PURE__ */ e("div", { className: `flex flex-col gap-4 ${u}`, children: s.map((i) => /* @__PURE__ */ e(n.Fragment, { children: o(i) }, i.id)) });
+  return /* @__PURE__ */ e(se.Provider, { value: { table: f, searchViewProps: V }, children: /* @__PURE__ */ r("div", { className: "flex flex-col w-full space-y-6", children: [
+    /* @__PURE__ */ r(me, { bulkActions: P, children: [
+      I,
+      T && /* @__PURE__ */ e(Fe, { table: f })
     ] }),
-    /* @__PURE__ */ e("div", { className: "min-h-[200px]", children: E() }),
-    /* @__PURE__ */ e(re, {})
+    /* @__PURE__ */ e("div", { className: "min-h-[200px]", children: Q() }),
+    /* @__PURE__ */ e(ce, {})
   ] }) });
 }
 export {
-  ye as DataDisplay
+  Ae as DataDisplay
 };

package/dist/components/item/index.mjs

@@ -2,17 +2,17 @@ import { jsx as a, jsxs as V } from "react/jsx-runtime";
 import { Slot as Ce } from "@radix-ui/react-slot";
 import { useLongPress as Ie } from "@uidotdev/usehooks";
 import { cva as $ } from "class-variance-authority";
-import { clsx as d } from "clsx";
-import { useMotionValue as we, useTransform as k, motion as h, AnimatePresence as ke, animate as j, cubicBezier as je } from "framer-motion";
+import { clsx as c } from "clsx";
+import { useMotionValue as we, useTransform as k, motion as h, AnimatePresence as ke, animate as D, cubicBezier as De } from "framer-motion";
 import * as o from "react";
-import { twMerge as c } from "tailwind-merge";
-import De from "use-ripple-hook";
+import { twMerge as m } from "tailwind-merge";
+import Pe from "use-ripple-hook";
 const _ = o.createContext({
   variant: "primary",
   size: "md",
   direction: "horizontal",
   expanded: !1
-}), b = () => o.useContext(_), Ee = $(
+}), N = () => o.useContext(_), je = $(
   "group/item relative flex flex-wrap items-center transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 overflow-hidden z-0",
   {
     variants: {
@@ -72,7 +72,7 @@ const _ = o.createContext({
       elevation: "none"
     }
   }
-), Se = $(
+), Ee = $(
   "flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none transition-colors",
   {
     variants: {
@@ -98,13 +98,13 @@ const _ = o.createContext({
       shape: "minimal"
     }
   }
-), Me = {
+), Se = {
   none: "gap-0",
   xs: "gap-0.5",
   sm: "gap-1",
   md: "gap-2",
   lg: "gap-4"
-}, Pe = (r, e, t, n) => {
+}, Me = (r, e, t, n) => {
   const l = r === 0, u = r === e - 1, g = e === 1;
   if (t === "sharp") return "!rounded-none";
   if (g) {
@@ -132,7 +132,7 @@ const _ = o.createContext({
     gap: l = "xs",
     ...u
   }, g) => {
-    const z = o.Children.toArray(e).filter(
+    const v = o.Children.toArray(e).filter(
       o.isValidElement
     );
     return /* @__PURE__ */ a(
@@ -141,27 +141,27 @@ const _ = o.createContext({
         ref: g,
         role: "group",
         "data-slot": "item-group",
-        className: c(
-          d(
+        className: m(
+          c(
             "flex",
             n === "vertical" ? "flex-col" : "flex-row",
-            Me[l],
+            Se[l],
             r
           )
         ),
         ...u,
-        children: z.map((N, p) => {
-          const D = Pe(
-            p,
-            z.length,
+        children: v.map((y, d) => {
+          const P = Me(
+            d,
+            v.length,
             t,
             n
           );
-          return o.cloneElement(N, {
-            className: c(
-              d(
-                N.props.className,
-                D,
+          return o.cloneElement(y, {
+            className: m(
+              c(
+                y.props.className,
+                P,
                 "focus-visible:z-10"
               )
             )
@@ -177,7 +177,7 @@ const Be = o.forwardRef(({ className: r, ...e }, t) => /* @__PURE__ */ a(
   {
     ref: t,
     "data-slot": "item-separator",
-    className: c(d("h-px w-full bg-outline-variant", r)),
+    className: m(c("h-px w-full bg-outline-variant", r)),
     ...e
   }
 ));
@@ -209,87 +209,87 @@ const B = {
     direction: l = "horizontal",
     padding: u = "md",
     bordered: g = !1,
-    elevation: z = "none",
-    asChild: N = !1,
-    disabled: p,
-    disableRipple: D = !1,
+    elevation: v = "none",
+    asChild: y = !1,
+    disabled: d,
+    disableRipple: P = !1,
     onLongPress: F,
     onPointerDown: R,
     expandable: H = !1,
-    expanded: E,
+    expanded: j,
     defaultExpanded: T = !1,
     onExpandedChange: A,
-    swipeType: v = "trigger",
+    swipeType: b = "trigger",
     swipeThreshold: C = 100,
     swipeRightAction: i,
     swipeLeftAction: s,
     onSwipeRight: X,
     onSwipeLeft: G,
-    swipeRightOffset: S = 80,
-    swipeLeftOffset: M = 80,
+    swipeRightOffset: E = 80,
+    swipeLeftOffset: S = 80,
     ...U
   }, L) => {
-    const ee = N ? Ce : "div", y = o.useRef(null);
-    o.useImperativeHandle(L, () => y.current);
-    const W = e || "primary", q = t || "md", J = l || "horizontal", [te, re] = o.useState(T), I = E !== void 0 ? E : te, ne = () => {
-      if (p) return;
-      const f = !I;
-      E === void 0 && re(f), A?.(f);
-    }, ae = "var(--color-ripple-dark)", [, oe] = De({
-      ref: y,
+    const ee = y ? Ce : "div", z = o.useRef(null);
+    o.useImperativeHandle(L, () => z.current);
+    const W = e || "primary", q = t || "md", J = l || "horizontal", [te, re] = o.useState(T), I = j !== void 0 ? j : te, ne = () => {
+      if (d) return;
+      const p = !I;
+      j === void 0 && re(p), A?.(p);
+    }, ae = "var(--color-ripple-dark)", [, oe] = Pe({
+      ref: z,
       color: ae,
       duration: 400,
-      disabled: p || D
+      disabled: d || P
     }), ie = Ie(F ?? (() => {
     }), {
       threshold: 500
-    }), se = (f) => {
-      oe(f), R?.(f);
-    }, P = !!i || !!s, m = we(0), [le, K] = o.useState(!1), de = k(m, [-1e3, 0, 1e3], [0, 0, 1e3]), ce = k(m, [-1e3, 0, 1e3], [1e3, 0, 0]), me = k(m, [0, 50], [0, 1]), ue = k(m, [0, -50], [0, 1]), fe = {
-      left: v === "reveal" ? s ? -M : 0 : -1e3,
-      right: v === "reveal" ? i ? S : 0 : 1e3
-    }, pe = (f, ye) => {
-      if (p) return;
-      const w = ye?.offset?.x ?? 0, Y = m.get();
+    }), se = (p) => {
+      oe(p), R?.(p);
+    }, M = !!i || !!s, f = we(0), [le, K] = o.useState(!1), de = k(f, [-1e3, 0, 1e3], [0, 0, 1e3]), ce = k(f, [-1e3, 0, 1e3], [1e3, 0, 0]), me = k(f, [0, 50], [0, 1]), ue = k(f, [0, -50], [0, 1]), fe = {
+      left: b === "reveal" ? s ? -S : 0 : -1e3,
+      right: b === "reveal" ? i ? E : 0 : 1e3
+    }, pe = (p, ye) => {
+      if (d) return;
+      const w = ye?.offset?.x ?? 0, Y = f.get();
       let x = 0;
       const be = {
         type: "tween",
-        ease: je(0.05, 0.7, 0.1, 1),
+        ease: De(0.05, 0.7, 0.1, 1),
         duration: 0.28
       };
-      if (v === "dismiss") {
+      if (b === "dismiss") {
         if (w > C && i) {
-          x = 600, j(m, x, { type: "tween", duration: 0.2 }).then(() => {
-            y.current && (K(!0), i.onClick?.(), X?.());
+          x = 600, D(f, x, { type: "tween", duration: 0.2 }).then(() => {
+            z.current && (K(!0), i.onClick?.(), X?.());
           });
           return;
         } else if (w < -C && s) {
-          x = -600, j(m, x, { type: "tween", duration: 0.2 }).then(() => {
-            y.current && (K(!0), s.onClick?.(), G?.());
+          x = -600, D(f, x, { type: "tween", duration: 0.2 }).then(() => {
+            z.current && (K(!0), s.onClick?.(), G?.());
           });
           return;
         }
-      } else if (v === "reveal") {
-        const ze = S / 2, Ne = M / 2;
-        Y > ze && i ? x = S : Y < -Ne && s && (x = -M);
+      } else if (b === "reveal") {
+        const ze = E / 2, Ne = S / 2;
+        Y > ze && i ? x = E : Y < -Ne && s && (x = -S);
       } else
         w > C && i ? (i.onClick?.(), X?.()) : w < -C && s && (s.onClick?.(), G?.());
-      j(m, x, be);
+      D(f, x, be);
     }, ge = {
       ...U,
-      "aria-disabled": p,
+      "aria-disabled": d,
       ...F ? ie : {},
       onPointerDown: se,
-      onClick: (f) => {
-        if (P && Math.abs(m.get()) > 5) {
-          v === "reveal" && Math.abs(m.get()) > 10 && (f.stopPropagation(), f.preventDefault(), j(m, 0, {
+      onClick: (p) => {
+        if (M && Math.abs(f.get()) > 5) {
+          b === "reveal" && Math.abs(f.get()) > 10 && (p.stopPropagation(), p.preventDefault(), D(f, 0, {
             type: "tween",
             ease: [0.05, 0.7, 0.1, 1],
             duration: 0.25
           }));
           return;
         }
-        H && ne(), U.onClick?.(f);
+        H && ne(), U.onClick?.(p);
       }
     }, xe = n === "full" ? I ? "rounded-[16px]" : "rounded-[32px]" : B[n || "minimal"], O = {
       variant: W,
@@ -299,35 +299,35 @@ const B = {
     }, Q = /* @__PURE__ */ a(
       ee,
       {
-        ref: P ? void 0 : y,
+        ref: M ? void 0 : z,
         "data-slot": "item",
-        className: c(
-          d(
-            Ee({
+        className: m(
+          c(
+            je({
               variant: W,
               size: q,
               shape: n === "full" ? void 0 : n,
               direction: J,
               padding: u,
               bordered: g,
-              elevation: z
+              elevation: v
             }),
             n === "full" && (I ? "rounded-[16px]" : "rounded-[32px]"),
             H && "cursor-pointer",
             r,
-            p && "opacity-50 cursor-not-allowed pointer-events-none"
+            d && "opacity-50 cursor-not-allowed pointer-events-none"
           )
         ),
         ...ge
       }
     );
-    if (!P)
+    if (!M)
       return /* @__PURE__ */ a(_.Provider, { value: O, children: Q });
     const he = i?.shape ? B[i.shape] : "rounded-[inherit]", ve = s?.shape ? B[s.shape] : "rounded-[inherit]";
     return /* @__PURE__ */ a(_.Provider, { value: O, children: /* @__PURE__ */ V(
       h.div,
       {
-        className: d(
+        className: c(
           "relative w-full overflow-hidden z-0 bg-transparent transform-gpu will-change-[height,opacity] transition-all duration-200 ease-out",
           xe
         ),
@@ -346,8 +346,8 @@ const B = {
             h.div,
             {
               style: { width: de },
-              className: c(
-                d(
+              className: m(
+                c(
                   "absolute inset-y-0 left-0 flex items-center justify-center overflow-hidden z-0 transform-gpu will-change-[width,opacity]",
                   he,
                   Z(i.color),
@@ -371,8 +371,8 @@ const B = {
             h.div,
             {
               style: { width: ce },
-              className: c(
-                d(
+              className: m(
+                c(
                   "absolute inset-y-0 right-0 flex items-center justify-center overflow-hidden z-0 transform-gpu will-change-[width,opacity]",
                   ve,
                   Z(s.color),
@@ -395,14 +395,15 @@ const B = {
           /* @__PURE__ */ a(
             h.div,
             {
-              ref: y,
-              style: { x: m },
-              drag: p ? !1 : "x",
+              ref: z,
+              style: { x: f },
+              drag: d ? !1 : "x",
               dragDirectionLock: !0,
               dragConstraints: fe,
-              dragElastic: v === "reveal" ? 0.2 : 0.3,
+              dragElastic: b === "reveal" ? 0.2 : 0.3,
               onDragEnd: pe,
-              className: "relative z-10 w-full rounded-[inherit] cursor-pointer transform-gpu will-change-transform",
+              "data-vaul-no-drag": !0,
+              className: "relative z-10 w-full rounded-[inherit] cursor-pointer transform-gpu will-change-transform touch-pan-y",
               children: Q
             }
           )
@@ -411,15 +412,15 @@ const B = {
     ) });
   }
 ), _e = o.forwardRef(({ className: r, variant: e, shape: t = "minimal", ...n }, l) => {
-  const { size: u, direction: g } = b();
+  const { size: u, direction: g } = N();
   return /* @__PURE__ */ a(
     "div",
     {
       ref: l,
       "data-slot": "item-media",
-      className: c(
-        d(
-          Se({
+      className: m(
+        c(
+          Ee({
             variant: e,
             size: u,
             shape: t,
@@ -434,14 +435,14 @@ const B = {
 });
 _e.displayName = "ItemMedia";
 const Fe = o.forwardRef(({ className: r, ...e }, t) => {
-  const { direction: n } = b();
+  const { direction: n } = N();
   return /* @__PURE__ */ a(
     "div",
     {
       ref: t,
       "data-slot": "item-content",
-      className: c(
-        d(
+      className: m(
+        c(
           "flex flex-1 flex-col gap-0.5 min-w-0 z-10",
           n === "vertical" && "items-center",
           r
@@ -453,14 +454,14 @@ const Fe = o.forwardRef(({ className: r, ...e }, t) => {
 });
 Fe.displayName = "ItemContent";
 const He = o.forwardRef(({ className: r, ...e }, t) => {
-  const { direction: n } = b();
+  const { direction: n } = N();
   return /* @__PURE__ */ a(
     "div",
     {
       ref: t,
       "data-slot": "item-title",
-      className: c(
-        d(
+      className: m(
+        c(
           "flex w-fit items-center gap-2 text-title-medium font-semibold leading-snug text-inherit",
           n === "vertical" && "justify-center",
           r
@@ -472,14 +473,14 @@ const He = o.forwardRef(({ className: r, ...e }, t) => {
 });
 He.displayName = "ItemTitle";
 const Xe = o.forwardRef(({ className: r, collapsedLines: e = 2, ...t }, n) => {
-  const { expanded: l } = b();
+  const { expanded: l } = N();
   return /* @__PURE__ */ a(
     "p",
     {
       ref: n,
       "data-slot": "item-description",
-      className: c(
-        d(
+      className: m(
+        c(
           "opacity-80 text-sm font-normal leading-normal text-inherit transition-all duration-200",
           l ? "" : e === 1 ? "line-clamp-1" : e === 2 ? "line-clamp-2" : e === 3 ? "line-clamp-3" : e === 4 ? "line-clamp-4" : e === 5 ? "line-clamp-5" : e === 6 ? "line-clamp-6" : "",
           r
@@ -491,14 +492,14 @@ const Xe = o.forwardRef(({ className: r, collapsedLines: e = 2, ...t }, n) => {
 });
 Xe.displayName = "ItemDescription";
 const Ge = o.forwardRef(({ className: r, ...e }, t) => {
-  const { direction: n } = b();
+  const { direction: n } = N();
   return /* @__PURE__ */ a(
     "div",
     {
       ref: t,
       "data-slot": "item-actions",
-      className: c(
-        d(
+      className: m(
+        c(
           "flex items-center gap-2 z-10",
           n === "horizontal" ? "ml-auto pl-4" : "mt-2",
           r
@@ -509,18 +510,24 @@ const Ge = o.forwardRef(({ className: r, ...e }, t) => {
   );
 });
 Ge.displayName = "ItemActions";
-const Ue = o.forwardRef(({ className: r, children: e, ...t }, n) => {
-  const { expanded: l } = b();
-  return /* @__PURE__ */ a(ke, { initial: !1, children: l && /* @__PURE__ */ a(
+const Ue = o.forwardRef(({ className: r, children: e, onClick: t, onPointerDown: n, ...l }, u) => {
+  const { expanded: g } = N(), v = (d) => {
+    d.stopPropagation(), t?.(d);
+  }, y = (d) => {
+    d.stopPropagation(), n?.(d);
+  };
+  return /* @__PURE__ */ a(ke, { initial: !1, children: g && /* @__PURE__ */ a(
     h.div,
     {
-      ref: n,
+      ref: u,
       initial: { height: 0, opacity: 0 },
       animate: { height: "auto", opacity: 1 },
       exit: { height: 0, opacity: 0 },
       transition: { duration: 0.3, ease: [0.2, 0, 0, 1] },
-      className: c("overflow-hidden w-full", r),
-      ...t,
+      className: m("overflow-hidden w-full", r),
+      onClick: v,
+      onPointerDown: y,
+      ...l,
       children: /* @__PURE__ */ a("div", { className: "pt-2 pb-1", children: e })
     }
   ) });
@@ -531,8 +538,8 @@ const We = o.forwardRef(({ className: r, ...e }, t) => /* @__PURE__ */ a(
   {
     ref: t,
     "data-slot": "item-header",
-    className: c(
-      d("flex basis-full items-center justify-between gap-2", r)
+    className: m(
+      c("flex basis-full items-center justify-between gap-2", r)
     ),
     ...e
   }
@@ -543,8 +550,8 @@ const qe = o.forwardRef(({ className: r, ...e }, t) => /* @__PURE__ */ a(
   {
     ref: t,
     "data-slot": "item-footer",
-    className: c(
-      d(
+    className: m(
+      c(
         "flex basis-full items-center justify-between gap-2 mt-2",
         r
       )
@@ -565,5 +572,5 @@ export {
   _e as ItemMedia,
   Be as ItemSeparator,
   He as ItemTitle,
-  b as useItem
+  N as useItem
 };

package/dist/components/switch/index.mjs

@@ -1,10 +1,11 @@
-import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import { cva as z } from "class-variance-authority";
+import { jsxs as o, jsx as n } from "react/jsx-runtime";
+import { cva as E } from "class-variance-authority";
 import { clsx as i } from "clsx";
 import { motion as h } from "framer-motion";
-import { Check as D, X as A } from "lucide-react";
-import y, { useState as K } from "react";
-const R = z(
+import { Check as A, X as K } from "lucide-react";
+import w, { useState as L } from "react";
+import { useLayout as W } from "../../context/layout-context.mjs";
+const X = E(
   "relative border-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 outline-none rounded-full transition-colors duration-300",
   {
     variants: {
@@ -22,43 +23,50 @@ const R = z(
       size: "md"
     }
   }
-), W = {
+), _ = {
   type: "spring",
   stiffness: 700,
   damping: 30
-}, w = {
+}, k = {
   type: "spring",
   stiffness: 500,
   damping: 25
-}, _ = y.forwardRef(
+}, q = w.forwardRef(
   ({
-    className: k,
-    size: o = "md",
-    label: l,
-    description: u,
-    withIcons: N = !0,
-    showUncheckedIcon: b = !1,
-    checked: c,
-    defaultChecked: I,
-    onCheckedChange: m,
+    className: N,
+    size: c = "md",
+    label: u,
+    description: m,
+    withIcons: b = !0,
+    showUncheckedIcon: I = !1,
+    checked: l,
+    defaultChecked: j,
+    onCheckedChange: d,
     disabled: t,
-    id: j,
-    ...d
-  }, S) => {
-    const T = y.useId(), p = j || T, [C, g] = K(
-      I ?? !1
-    ), e = c !== void 0 ? c : C, x = (r) => {
+    id: S,
+    ...p
+  }, T) => {
+    const C = w.useId(), g = S || C;
+    let s = !1;
+    try {
+      s = W().isRtl;
+    } catch {
+      typeof window < "u" && (s = document.documentElement.dir === "rtl" || document.documentElement.classList.contains("rtl"));
+    }
+    const [R, y] = L(
+      j ?? !1
+    ), e = l !== void 0 ? l : R, x = (r) => {
       if (t) return;
-      const s = r.target.checked;
-      c === void 0 && g(s), m?.(s), d.onChange?.(r);
+      const a = r.target.checked;
+      l === void 0 && y(a), d?.(a), p.onChange?.(r);
     }, V = (r) => {
       if (!t && (r.key === "Enter" || r.key === " ")) {
         r.preventDefault();
-        const s = !e;
-        c === void 0 && g(s), m?.(s);
+        const a = !e;
+        l === void 0 && y(a), d?.(a);
       }
     }, f = (() => {
-      switch (o) {
+      switch (c) {
         case "sm":
           return {
             width: e ? 16 : 12,
@@ -78,12 +86,12 @@ const R = z(
             x: e ? 22 : 7
           };
       }
-    })(), v = o === "sm" ? 10 : o === "lg" ? 20 : 16;
-    return /* @__PURE__ */ a("div", { className: i("inline-flex items-center gap-3", k), children: [
-      /* @__PURE__ */ a(
+    })(), z = s ? -1 : 1, D = f.x * z, v = c === "sm" ? 10 : c === "lg" ? 20 : 16;
+    return /* @__PURE__ */ o("div", { className: i("inline-flex items-center gap-3", N), children: [
+      /* @__PURE__ */ o(
         "label",
         {
-          htmlFor: p,
+          htmlFor: g,
           className: i(
             "relative inline-flex items-center group outline-none rounded-full select-none",
             !t && "cursor-pointer",
@@ -96,35 +104,39 @@ const R = z(
               "input",
               {
                 type: "checkbox",
-                id: p,
-                ref: S,
+                id: g,
+                ref: T,
                 className: "sr-only",
                 checked: e,
                 onChange: x,
                 disabled: t,
                 tabIndex: -1,
-                ...d
+                ...p
               }
             ),
             /* @__PURE__ */ n(
               "div",
               {
                 className: i(
-                  R({ size: o, checked: e }),
+                  X({ size: c, checked: e }),
                   t && e && "bg-on-surface/12 border-transparent",
                   t && !e && "bg-surface-container-highest/38 border-on-surface/12"
                 ),
-                children: /* @__PURE__ */ a(
+                children: /* @__PURE__ */ o(
                   h.div,
                   {
-                    transition: W,
+                    transition: _,
                     initial: !1,
                     animate: {
-                      x: f.x,
+                      x: D,
                       width: f.width,
                       height: f.height,
                       backgroundColor: e ? "var(--md-sys-color-on-primary)" : "var(--md-sys-color-outline-variant)"
                     },
+                    style: {
+                      left: s ? "auto" : 0,
+                      right: s ? 0 : "auto"
+                    },
                     className: i(
                       "absolute top-1/2 -translate-y-1/2 rounded-full shadow-sm flex items-center justify-center z-10",
                       t && "!bg-on-surface/38"
@@ -142,8 +154,8 @@ const R = z(
                           }
                         }
                       ),
-                      /* @__PURE__ */ a("div", { className: "relative w-full h-full flex items-center justify-center overflow-hidden", children: [
-                        N && /* @__PURE__ */ n(
+                      /* @__PURE__ */ o("div", { className: "relative w-full h-full flex items-center justify-center overflow-hidden", children: [
+                        b && /* @__PURE__ */ n(
                           h.div,
                           {
                             initial: !1,
@@ -152,9 +164,9 @@ const R = z(
                               opacity: e ? 1 : 0,
                               rotate: e ? 0 : -90
                             },
-                            transition: w,
+                            transition: k,
                             children: /* @__PURE__ */ n(
-                              D,
+                              A,
                               {
                                 size: v,
                                 strokeWidth: 4,
@@ -163,7 +175,7 @@ const R = z(
                             )
                           }
                         ),
-                        b && /* @__PURE__ */ n(
+                        I && /* @__PURE__ */ n(
                           h.div,
                           {
                             initial: !1,
@@ -173,9 +185,9 @@ const R = z(
                               opacity: e ? 0 : 1,
                               rotate: e ? 90 : 0
                             },
-                            transition: w,
+                            transition: k,
                             children: /* @__PURE__ */ n(
-                              A,
+                              K,
                               {
                                 size: v - 2,
                                 strokeWidth: 3,
@@ -193,30 +205,30 @@ const R = z(
           ]
         }
       ),
-      (l || u) && /* @__PURE__ */ a(
+      (u || m) && /* @__PURE__ */ o(
         "div",
         {
           className: i("flex flex-col", !t && "cursor-pointer"),
           onClick: () => !t && x({ target: { checked: !e } }),
           children: [
-            l && /* @__PURE__ */ n(
+            u && /* @__PURE__ */ n(
               "span",
               {
                 className: i(
                   "text-sm font-medium select-none",
                   t ? "text-on-surface/38" : "text-on-surface"
                 ),
-                children: l
+                children: u
               }
             ),
-            u && /* @__PURE__ */ n(
+            m && /* @__PURE__ */ n(
               "span",
               {
                 className: i(
                   "text-xs select-none",
                   t ? "text-on-surface-variant/38" : "text-on-surface-variant"
                 ),
-                children: u
+                children: m
               }
             )
           ]
@@ -225,7 +237,7 @@ const R = z(
     ] });
   }
 );
-_.displayName = "Switch";
+q.displayName = "Switch";
 export {
-  _ as Switch
+  q as Switch
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chesai-ui",
   "private": false,
-  "version": "0.16.7",
+  "version": "0.16.9",
   "packageManager": "pnpm@10.12.1",
   "repository": {
     "type": "git",