saha-ui 1.21.0 → 1.22.0

package/dist/components/AspectRatio/AspectRatio.styles.d.ts

@@ -6,7 +6,7 @@ declare const aspectRatioVariants: (props?: ({
  * Overlay gradient variants
  */
 declare const overlayVariants: (props?: ({
-    position?: "top" | "left" | "center" | "right" | "bottom" | null | undefined;
+    position?: "top" | "left" | "right" | "bottom" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export { aspectRatioVariants, overlayVariants };
 //# sourceMappingURL=AspectRatio.styles.d.ts.map

package/dist/components/Form/Form.styles.d.ts

@@ -56,7 +56,7 @@ export declare const formSectionTitleVariants: (props?: ({
  * Form actions variants
  */
 export declare const formActionsVariants: (props?: ({
-    align?: "left" | "center" | "right" | "between" | null | undefined;
+    align?: "left" | "right" | "center" | "between" | null | undefined;
     variant?: "error" | "primary" | "secondary" | "success" | "warning" | "info" | "default" | "glass" | "accent" | "outline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 //# sourceMappingURL=Form.styles.d.ts.map

package/dist/components/Table/Table.styles.d.ts

@@ -10,7 +10,7 @@ declare const tableHeaderVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const tableCellVariants: (props?: ({
     density?: "normal" | "compact" | "comfortable" | null | undefined;
-    align?: "left" | "center" | "right" | null | undefined;
+    align?: "left" | "right" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const tableRowVariants: (props?: ({
     hoverable?: boolean | null | undefined;

package/dist/components/ThemeToggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeToggle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAYvD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqUlD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeToggle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAYvD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAkZlD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/ThemeToggle/index.js

@@ -1,177 +1,210 @@
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import A, { useState as b, useRef as F, useEffect as h } from "react";
-import { createPortal as G } from "react-dom";
-import { Sun as J, Moon as K, Monitor as Q, ChevronDown as U } from "lucide-react";
-import { useTheme as Z } from "../ThemeProvider/ThemeProvider.js";
-import { cn as d } from "../../lib/utils.js";
-import { themeToggleIconVariants as ee, themeToggleIconWrap as te, themeLabelVariants as ne, themeToggleButtonVariants as oe, themeOptionVariants as S, themeDropdownVariants as j } from "./ThemeToggle.styles.js";
-const me = ({
-  className: P = "",
-  size: T = 20,
-  variant: s = "icon",
-  color: k = "primary",
-  appearance: V = "default",
-  menuBg: Y = "default",
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import Q, { useState as w, useRef as U, useEffect as g } from "react";
+import { createPortal as Z } from "react-dom";
+import { Sun as ee, Moon as te, Monitor as ne, ChevronDown as oe } from "lucide-react";
+import { useTheme as ie } from "../ThemeProvider/ThemeProvider.js";
+import { cn as p } from "../../lib/utils.js";
+import { themeToggleIconVariants as re, themeToggleIconWrap as le, themeLabelVariants as ae, themeToggleButtonVariants as se, themeOptionVariants as X, themeDropdownVariants as j } from "./ThemeToggle.styles.js";
+const we = ({
+  className: V = "",
+  size: H = 20,
+  variant: m = "icon",
+  color: P = "primary",
+  appearance: $ = "default",
+  menuBg: D = "default",
   menuBorder: E = "default",
   menuText: z = "default",
-  menuClassName: D
+  menuClassName: _
 }) => {
-  const { theme: f, setTheme: X } = Z(), [r, x] = b(!1), [N, _] = b(!1), m = F(null), [M, $] = b(
+  const { theme: b, setTheme: q } = ie(), [a, N] = w(!1), [T, A] = w(!1), s = U(null), [h, F] = w(
     null
-  ), [a, O] = b({
+  ), [u, y] = w({
     top: 0,
     left: 0
-  }), y = A.useRef(null);
-  h(() => {
-    _(!0);
-  }, []), h(() => {
-    const e = (n) => {
-      m.current && !m.current.contains(n.target) && x(!1);
+  }), [G, Y] = w("left top"), C = Q.useRef(null);
+  g(() => {
+    A(!0);
+  }, []), g(() => {
+    const e = (o) => {
+      const t = o.target, c = o.composedPath?.() || [], d = s.current && (c.length ? c.includes(s.current) : s.current.contains(t)), n = h && (c.length ? c.includes(h) : h.contains(t));
+      d || n || s.current && !s.current.contains(t) && N(!1);
     };
-    return r && document.addEventListener("mousedown", e), () => {
+    return a && document.addEventListener("mousedown", e), () => {
       document.removeEventListener("mousedown", e);
     };
-  }, [r]), h(() => {
+  }, [a, h]), g(() => {
     const e = document.createElement("div");
-    return document.body.appendChild(e), $(e), () => {
+    return document.body.appendChild(e), F(e), () => {
       e.parentNode && e.parentNode.removeChild(e);
     };
   }, []);
-  const W = 3;
-  h(() => {
-    if (r && m.current) {
-      const e = m.current.getBoundingClientRect(), o = {
+  const O = 3;
+  g(() => {
+    if (a && s.current) {
+      const e = s.current.getBoundingClientRect(), t = {
         icon: 176,
         "icon-label": 208
-      }[s] ?? 200, u = Math.min(
-        W * 48 + 16,
+      }[m] ?? 200, d = Math.min(
+        O * 48 + 16,
         400
-      ), l = 8;
-      let i = e.left + window.scrollX;
-      if (i + o > window.innerWidth - l) {
-        const v = e.right + window.scrollX - o;
-        i = Math.max(
-          l,
-          Math.min(v, window.innerWidth - o - l)
+      ), n = 8;
+      let r = e.left + window.scrollX;
+      if (r + t > window.innerWidth - n) {
+        const f = e.right + window.scrollX - t;
+        r = Math.max(
+          n,
+          Math.min(f, window.innerWidth - t - n)
         );
       }
-      let c = e.bottom + window.scrollY;
-      if (c + u > window.scrollY + window.innerHeight - l) {
-        const v = e.top + window.scrollY - u;
-        c = Math.max(l, v);
+      let l = e.bottom + window.scrollY;
+      if (l + d > window.scrollY + window.innerHeight - n) {
+        const f = e.top + window.scrollY - d;
+        l = Math.max(n, f);
       }
-      O({ top: c, left: i });
+      y({ top: l, left: r });
+      const W = r <= e.left ? "left" : "right", v = l >= e.bottom ? "top" : "bottom";
+      Y(`${W} ${v}`);
     }
-  }, [r, s, W]), h(() => {
-    if (!r || !y.current) return;
-    const e = y.current, n = 8, o = m.current?.getBoundingClientRect();
-    if (!o) return;
-    const w = e.offsetWidth, u = e.offsetHeight;
-    let l = a.left;
-    if (l + w > window.innerWidth - n) {
-      const c = o.right + window.scrollX - w;
-      l = Math.max(
+  }, [a, m, O]);
+  const J = () => {
+    if (!s.current) return;
+    const e = s.current.getBoundingClientRect(), t = {
+      icon: 176,
+      "icon-label": 208
+    }[m] ?? 200, d = Math.min(
+      O * 48 + 16,
+      400
+    ), n = 8;
+    let r = e.left + window.scrollX;
+    if (r + t > window.innerWidth - n) {
+      const f = e.right + window.scrollX - t;
+      r = Math.max(
         n,
-        Math.min(c, window.innerWidth - w - n)
+        Math.min(f, window.innerWidth - t - n)
       );
     }
-    l < n && (l = n);
-    let i = a.top;
-    if (i + u > window.scrollY + window.innerHeight - n) {
-      const c = o.top + window.scrollY - u;
-      i = Math.max(n, c);
+    let l = e.bottom + window.scrollY;
+    if (l + d > window.scrollY + window.innerHeight - n) {
+      const f = e.top + window.scrollY - d;
+      l = Math.max(n, f);
     }
-    (Math.abs(l - a.left) > 1 || Math.abs(i - a.top) > 1) && O({ left: l, top: i });
-  }, [r, M, a.left, a.top]);
-  const p = [
-    { value: "light", label: "Light", icon: J },
-    { value: "dark", label: "Dark", icon: K },
-    { value: "system", label: "System", icon: Q }
-  ], C = p.find((e) => e.value === f) || p[0], q = C.icon, R = (e) => {
-    X(e), x(!1);
-  }, B = {
+    y({ top: l, left: r });
+    const W = r <= e.left ? "left" : "right", v = l >= e.bottom ? "top" : "bottom";
+    Y(`${W} ${v}`);
+  };
+  g(() => {
+    if (!a || !C.current) return;
+    const e = C.current, o = 8, t = s.current?.getBoundingClientRect();
+    if (!t) return;
+    const c = e.offsetWidth, d = e.offsetHeight;
+    let n = u.left;
+    if (n + c > window.innerWidth - o) {
+      const l = t.right + window.scrollX - c;
+      n = Math.max(
+        o,
+        Math.min(l, window.innerWidth - c - o)
+      );
+    }
+    n < o && (n = o);
+    let r = u.top;
+    if (r + d > window.scrollY + window.innerHeight - o) {
+      const l = t.top + window.scrollY - d;
+      r = Math.max(o, l);
+    }
+    (Math.abs(n - u.left) > 1 || Math.abs(r - u.top) > 1) && y({ left: n, top: r });
+  }, [a, h, u.left, u.top]);
+  const M = [
+    { value: "light", label: "Light", icon: ee },
+    { value: "dark", label: "Dark", icon: te },
+    { value: "system", label: "System", icon: ne }
+  ], k = M.find((e) => e.value === b) || M[0], K = k.icon, I = (e) => {
+    q(e), N(!1);
+  }, R = {
     default: "bg-white dark:bg-black",
     white: "bg-white",
     primary: "bg-primary",
     neutral: "bg-foreground"
-  }, H = {
+  }, B = {
     default: "border border-white/6 dark:border-black/6",
     none: "border-0",
     primary: "border border-primary",
     neutral: "border border-muted"
-  }, I = {
+  }, L = {
     default: "text-foreground",
     primary: "text-primary",
     neutral: "text-foreground"
-  }, L = D || [
-    B[Y] ?? B.default,
-    H[E] ?? H.default,
-    I[z] ?? I.default
+  }, S = _ || [
+    R[D] ?? R.default,
+    B[E] ?? B.default,
+    L[z] ?? L.default
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ g("div", { ref: m, className: "relative", children: [
-    /* @__PURE__ */ g(
+  return /* @__PURE__ */ x("div", { ref: s, className: "relative", children: [
+    /* @__PURE__ */ x(
       "button",
       {
-        onClick: () => x(!r),
-        className: d(
-          oe({ variant: s, appearance: V }),
-          P
+        onClick: () => {
+          a || J(), N(!a);
+        },
+        className: p(
+          se({ variant: m, appearance: $ }),
+          V
         ),
         "aria-label": "Toggle theme",
-        "aria-expanded": r,
-        title: N ? `Current theme: ${C.label}` : "Toggle theme",
+        "aria-expanded": a,
+        title: T ? `Current theme: ${k.label}` : "Toggle theme",
         children: [
-          /* @__PURE__ */ t("span", { className: d(te({ size: "md" })), children: N ? /* @__PURE__ */ t(
-            q,
+          /* @__PURE__ */ i("span", { className: p(le({ size: "md" })), children: T ? /* @__PURE__ */ i(
+            K,
             {
-              size: T,
-              className: ee({ theme: f, color: k })
+              size: H,
+              className: re({ theme: b, color: P })
             }
-          ) : /* @__PURE__ */ t(
+          ) : /* @__PURE__ */ i(
             "span",
             {
               "aria-hidden": "true",
-              className: d(
+              className: p(
                 "inline-block",
-                T === 20 ? "w-5 h-5" : "w-4 h-4"
+                H === 20 ? "w-5 h-5" : "w-4 h-4"
               )
             }
           ) }),
-          s === "icon-label" && /* @__PURE__ */ t("span", { className: ne({ color: k }), children: N ? C.label : /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "inline-block w-12 h-4" }) }),
-          s === "icon-label" && /* @__PURE__ */ t(U, { size: 14, className: "ml-1 text-muted-foreground" })
+          m === "icon-label" && /* @__PURE__ */ i("span", { className: ae({ color: P }), children: T ? k.label : /* @__PURE__ */ i("span", { "aria-hidden": "true", className: "inline-block w-12 h-4" }) }),
+          m === "icon-label" && /* @__PURE__ */ i(oe, { size: 14, className: "ml-1 text-muted-foreground" })
         ]
       }
     ),
-    r && M ? G(
-      /* @__PURE__ */ t(
+    a && h ? Z(
+      /* @__PURE__ */ i(
         "div",
         {
-          ref: y,
-          className: d(
-            // disable animation when rendering into portal so menu appears exactly at position
-            j({ variant: s, animated: "off" }),
-            L
+          ref: C,
+          className: p(
+            // allow animation for portal-mounted menu; we'll set transform origin
+            j({ variant: m, animated: "on" }),
+            S
           ),
           style: {
             position: "absolute",
-            top: a.top,
-            left: a.left
+            top: u.top,
+            left: u.left,
+            transformOrigin: G
           },
           role: "menu",
-          children: p.map((e) => {
-            const n = e.icon, o = f === e.value;
-            return /* @__PURE__ */ g(
+          children: M.map((e) => {
+            const o = e.icon, t = b === e.value;
+            return /* @__PURE__ */ x(
               "button",
               {
-                onClick: () => R(e.value),
+                onClick: () => I(e.value),
                 role: "menuitem",
-                className: d(
-                  S({ selected: o })
+                className: p(
+                  X({ selected: t })
                 ),
                 children: [
-                  /* @__PURE__ */ t("span", { className: "inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/5", children: /* @__PURE__ */ t(n, { size: 16 }) }),
-                  /* @__PURE__ */ t("span", { className: "text-sm font-medium", children: e.label }),
-                  o && /* @__PURE__ */ t("span", { className: "ml-auto text-primary", children: "✓" })
+                  /* @__PURE__ */ i("span", { className: "inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/5", children: /* @__PURE__ */ i(o, { size: 16 }) }),
+                  /* @__PURE__ */ i("span", { className: "text-sm font-medium", children: e.label }),
+                  t && /* @__PURE__ */ i("span", { className: "ml-auto text-primary", children: "✓" })
                 ]
               },
               e.value
@@ -179,29 +212,29 @@ const me = ({
           })
         }
       ),
-      M
-    ) : r && /* @__PURE__ */ t(
+      h
+    ) : a && /* @__PURE__ */ i(
       "div",
       {
-        className: d(
-          j({ variant: s }),
-          L
+        className: p(
+          j({ variant: m }),
+          S
         ),
         role: "menu",
-        children: p.map((e) => {
-          const n = e.icon, o = f === e.value;
-          return /* @__PURE__ */ g(
+        children: M.map((e) => {
+          const o = e.icon, t = b === e.value;
+          return /* @__PURE__ */ x(
             "button",
             {
-              onClick: () => R(e.value),
+              onClick: () => I(e.value),
               role: "menuitem",
-              className: d(
-                S({ selected: o })
+              className: p(
+                X({ selected: t })
               ),
               children: [
-                /* @__PURE__ */ t("span", { className: "inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/5", children: /* @__PURE__ */ t(n, { size: 16 }) }),
-                /* @__PURE__ */ t("span", { className: "text-sm font-medium", children: e.label }),
-                o && /* @__PURE__ */ t("span", { className: "ml-auto text-primary", children: "✓" })
+                /* @__PURE__ */ i("span", { className: "inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/5", children: /* @__PURE__ */ i(o, { size: 16 }) }),
+                /* @__PURE__ */ i("span", { className: "text-sm font-medium", children: e.label }),
+                t && /* @__PURE__ */ i("span", { className: "ml-auto text-primary", children: "✓" })
               ]
             },
             e.value
@@ -212,6 +245,6 @@ const me = ({
   ] });
 };
 export {
-  me as ThemeToggle,
-  me as default
+  we as ThemeToggle,
+  we as default
 };

package/dist/components/Timeline/Timeline.styles.d.ts

@@ -1,9 +1,9 @@
 declare const timelineVariants: (props?: ({
     variant?: "default" | "glass" | "gradient" | "outlined" | "minimal" | null | undefined;
-    position?: "left" | "alternate" | "right" | null | undefined;
+    position?: "left" | "right" | "alternate" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const timelineItemVariants: (props?: ({
-    position?: "left" | "alternate" | "right" | null | undefined;
+    position?: "left" | "right" | "alternate" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const timelineDotVariants: (props?: ({
     status?: "error" | "success" | "warning" | "info" | "default" | "pending" | null | undefined;

package/dist/components/Tour/Tour.styles.d.ts

@@ -9,7 +9,7 @@ export declare const tourSpotlightVariants: (props?: ({
     maskStyle?: "default" | "rounded" | "rect" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const tourPopoverVariants: (props?: ({
-    placement?: "top" | "left" | "center" | "right" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null | undefined;
+    placement?: "top" | "left" | "right" | "bottom" | "center" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const tourHeaderVariants: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const tourTitleVariants: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -26,7 +26,7 @@ export declare const tourButtonVariants: (props?: ({
     variant?: "secondary" | "default" | "outline" | "ghost" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const tourArrowVariants: (props?: ({
-    placement?: "top" | "left" | "center" | "right" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null | undefined;
+    placement?: "top" | "left" | "right" | "bottom" | "center" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const tourCloseButtonVariants: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 //# sourceMappingURL=Tour.styles.d.ts.map

package/dist/components/Typography/Typography.styles.d.ts

@@ -1,7 +1,7 @@
 export declare const typographyVariants: (props?: ({
     variant?: "small" | "blockquote" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "list" | "large" | "muted" | "lead" | "inlineCode" | null | undefined;
     color?: "error" | "primary" | "secondary" | "success" | "warning" | "info" | "default" | "muted" | "accent" | null | undefined;
-    align?: "left" | "center" | "right" | "justify" | null | undefined;
+    align?: "left" | "right" | "center" | "justify" | null | undefined;
     weight?: "light" | "bold" | "black" | "normal" | "medium" | "thin" | "extralight" | "semibold" | "extrabold" | null | undefined;
     transform?: "none" | "capitalize" | "lowercase" | "uppercase" | null | undefined;
     decoration?: "none" | "overline" | "underline" | "lineThrough" | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saha-ui",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "Ultra-modern React component library built with TypeScript, Tailwind CSS v4, and OKLCH colors",
   "type": "module",
   "license": "MIT",