chesai-ui 0.16.7 → 0.16.8

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/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,8 +1,7 @@
 {
   "name": "chesai-ui",
   "private": false,
-  "version": "0.16.7",
-  "packageManager": "pnpm@10.12.1",
+  "version": "0.16.8",
   "repository": {
     "type": "git",
     "url": "https://github.com/ayhamdev/chesai-ui"
@@ -25,19 +24,6 @@
   "engines": {
     "node": ">=22"
   },
-  "scripts": {
-    "dev": "bunx storybook dev -p 8000",
-    "build": "storybook build",
-    "build:lib": "tsc && vite build",
-    "build:docs": "npx ts-node  ./scripts/generate-llm.ts",
-    "lint": "npx @biomejs/biome lint --write ./src",
-    "format": "npx @biomejs/biome check --write --organize-imports-enabled=true ./src",
-    "test": "vitest",
-    "test:cov": "vitest run --coverage",
-    "gen:context": "bun run ./scripts/context.ts",
-    "git:diff-merge": "git diff --unified=2000 $(git merge-base main HEAD)...HEAD",
-    "git:diff": "git diff --unified=2000 > git-changes.txt"
-  },
   "dependencies": {
     "@capacitor/app": "^8.0.0",
     "@capacitor/core": "^8.0.1",
@@ -168,5 +154,18 @@
       "biome lint --write --no-errors-on-unmatched --files-ignore-unknown=true",
       "biome format --write --no-errors-on-unmatched"
     ]
+  },
+  "scripts": {
+    "dev": "bunx storybook dev -p 8000",
+    "build": "storybook build",
+    "build:lib": "tsc && vite build",
+    "build:docs": "npx ts-node  ./scripts/generate-llm.ts",
+    "lint": "npx @biomejs/biome lint --write ./src",
+    "format": "npx @biomejs/biome check --write --organize-imports-enabled=true ./src",
+    "test": "vitest",
+    "test:cov": "vitest run --coverage",
+    "gen:context": "bun run ./scripts/context.ts",
+    "git:diff-merge": "git diff --unified=2000 $(git merge-base main HEAD)...HEAD",
+    "git:diff": "git diff --unified=2000 > git-changes.txt"
   }
-}
+}