@firecms/ui 3.0.0-canary.77 → 3.0.0-canary.79

package/dist/components/BooleanSwitch.d.ts

@@ -3,7 +3,7 @@ export type BooleanSwitchProps = {
     value: boolean | null;
     className?: string;
     disabled?: boolean;
-    size?: "small" | "medium";
+    size?: "small" | "medium" | "large";
 } & ({
     allowIndeterminate: true;
     onValueChange?: (newValue: boolean | null) => void;

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as p, Fragment as J } from "react/jsx-runtime";
 import * as g from "react";
-import k, { useEffect as R, useState as G, useCallback as un, useRef as cn, useMemo as Hn, useLayoutEffect as Wn, useDeferredValue as zn } from "react";
+import k, { useEffect as R, useState as j, useCallback as un, useRef as cn, useMemo as Hn, useLayoutEffect as Wn, useDeferredValue as zn } from "react";
 import * as en from "@radix-ui/react-collapsible";
 import { clsx as qn } from "clsx";
 import { twMerge as Vn } from "tailwind-merge";
@@ -14,7 +14,7 @@ import { useDropzone as Jn } from "react-dropzone";
 import $n from "react-fast-compare";
 import Yn from "markdown-it";
 import * as nn from "@radix-ui/react-dropdown-menu";
-import * as M from "@radix-ui/react-Menubar";
+import * as M from "@radix-ui/react-menubar";
 import { Command as rn } from "cmdk";
 import * as on from "@radix-ui/react-radio-group";
 import * as N from "@radix-ui/react-select";
@@ -23,7 +23,7 @@ import * as Zn from "react-dom";
 import * as Y from "@radix-ui/react-tooltip";
 import * as dn from "@radix-ui/react-tabs";
 import * as Z from "@radix-ui/react-popover";
-const P = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent", gn = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60", Kn = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ", V = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60", vn = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0", j = "dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-90", U = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-60", Q = "border-gray-100 dark:border-gray-800 dark:border-opacity-80", $ = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100", Xn = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1", ne = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer", co = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
+const P = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent", gn = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60", Kn = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ", G = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60", vn = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0", U = "dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-90", V = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-60", Q = "border-gray-100 dark:border-gray-800 dark:border-opacity-80", $ = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100", Xn = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1", ne = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer", co = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
 function u(...n) {
   return Vn(qn(n));
 }
@@ -132,7 +132,7 @@ function Sn(n) {
   return n instanceof HTMLElement ? n.getAttribute("role") === "presentation" ? !0 : Sn(n.parentNode) : !1;
 }
 function re(n, t = 300) {
-  const [r, i] = G(n);
+  const [r, i] = j(n);
   return R(
     () => {
       const c = setTimeout(() => {
@@ -392,9 +392,9 @@ const ce = (n) => {
                 "block rounded-full transition-transform duration-100 transform will-change-auto",
                 "bg-slate-400 dark:bg-slate-600",
                 {
-                  "w-[21px] h-[10px]": l === "medium",
+                  "w-[21px] h-[10px]": l === "medium" || l === "large",
                   "w-[19px] h-[8px]": l === "small",
-                  "translate-x-[10px]": l === "medium",
+                  "translate-x-[10px]": l === "medium" || l === "large",
                   "translate-x-[9px]": l === "small"
                 }
               )
@@ -408,9 +408,9 @@ const ce = (n) => {
                 "block rounded-full transition-transform duration-100 transform will-change-auto",
                 a ? "bg-slate-300 dark:bg-slate-700" : t ? "bg-white" : "bg-slate-600 dark:bg-slate-400",
                 {
-                  "w-[21px] h-[21px]": l === "medium",
+                  "w-[21px] h-[21px]": l === "medium" || l === "large",
                   "w-[19px] h-[19px]": l === "small",
-                  [t ? "translate-x-[19px]" : "translate-x-[3px]"]: l === "medium",
+                  [t ? "translate-x-[19px]" : "translate-x-[3px]"]: l === "medium" || l === "large",
                   [t ? "translate-x-[17px]" : "translate-x-[2px]"]: l === "small"
                 }
               )
@@ -445,13 +445,13 @@ const ce = (n) => {
       onBlur: A,
       tabIndex: -1,
       className: u(
-        !i && V,
-        !i && (s ? j : U),
+        !i && G,
+        !i && (s ? U : V),
         s ? "cursor-default" : "cursor-pointer",
-        "rounded-md relative max-w-full justify-between w-full box-border relative inline-flex items-center",
+        "rounded-md max-w-full justify-between w-full box-border relative inline-flex items-center",
         !i && w && !s ? Kn : "",
         a ? "text-red-500 dark:text-red-600" : w && !s ? "text-primary" : s ? "text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark",
-        d === "small" ? "min-h-[40px]" : "min-h-[64px]",
+        d === "small" ? "min-h-[40px]" : d === "medium" ? "min-h-[48px]" : "min-h-[64px]",
         d === "small" ? "pl-2" : "pl-4",
         d === "small" ? "pr-4" : "pr-6",
         r === "end" ? "flex-row-reverse" : "flex-row"
@@ -14938,8 +14938,8 @@ const xon = ({
       {
         className: u(
           "rounded-md relative max-w-full",
-          !f && V,
-          i ? j : U,
+          !f && G,
+          i ? U : V,
           {
             "min-h-[48px]": _ === "small",
             "min-h-[64px]": _ === "medium"
@@ -15890,7 +15890,7 @@ const xon = ({
   modal: d = !0,
   onOpenAutoFocus: m
 }) => {
-  const [I, f] = G(!1);
+  const [I, f] = j(!1);
   return R(() => {
     if (n)
       return f(!0), () => {
@@ -16027,7 +16027,7 @@ function Pon({
     height: 0;
   }
 }`);
-  const [d, m] = G(i !== void 0 ? i : a), [I, f] = G(d);
+  const [d, m] = j(i !== void 0 ? i : a), [I, f] = j(d);
   return R(() => {
     d ? setTimeout(() => {
       f(!0);
@@ -16056,7 +16056,7 @@ function Pon({
               "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-10",
               r ? "border-b px-2" : "p-4",
               r && Q,
-              _ && V,
+              _ && G,
               l
             ),
             children: [
@@ -16115,7 +16115,7 @@ function Don({
     {
       ...I(),
       className: u(
-        V,
+        G,
         P,
         "flex gap-2",
         "p-4 box-border relative items-center border-2 border-solid border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
@@ -16123,7 +16123,7 @@ function Don({
           "h-44": m === "medium",
           "h-28": m === "small",
           "cursor-pointer": !c,
-          fieldBackgroundHoverMixin: !h,
+          [V]: !h,
           "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": v,
           "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-green-500": K
         }
@@ -16553,8 +16553,8 @@ function Zon({
                 "flex flex-row",
                 i === "small" ? "min-h-[42px]" : "min-h-[64px]",
                 "select-none rounded-md text-sm",
-                V,
-                a ? j : U,
+                G,
+                a ? U : V,
                 "relative flex items-center",
                 "p-4",
                 f ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
@@ -16706,7 +16706,7 @@ function etn({
   loading: d,
   inputRef: m
 }) {
-  const [I, f] = G(""), [h, K] = G(!1), v = re(I, 200);
+  const [I, f] = j(""), [h, K] = j(!1), v = re(I, 200);
   k.useEffect(() => {
     t && t(v || void 0);
   }, [v]);
@@ -16830,8 +16830,8 @@ function otn({
             className: u(
               v === "small" ? "min-h-[42px]" : "min-h-[64px]",
               "select-none rounded-md text-sm",
-              W ? vn : V,
-              D ? j : U,
+              W ? vn : G,
+              D ? U : V,
               "relative flex items-center",
               d
             ),
@@ -17271,7 +17271,7 @@ function Ge({
         "w-full outline-none bg-transparent leading-normal px-3",
         "rounded-md",
         a ? gn : P,
-        _ ? j : U,
+        _ ? U : V,
         f === "smallest" ? "min-h-[32px]" : f === "small" ? "min-h-[48px]" : "min-h-[64px]",
         r ? f === "medium" ? "pt-[28px] pb-2" : "pt-4 pb-2" : "py-2",
         F ? "text-text-primary dark:text-text-primary-dark" : "",
@@ -17293,8 +17293,8 @@ function Ge({
     {
       className: u(
         "rounded-md relative max-w-full",
-        a ? vn : V,
-        _ ? j : U,
+        a ? vn : G,
+        _ ? U : V,
         s ? "border border-red-500 dark:border-red-600" : "",
         {
           "min-h-[32px]": !a && f === "smallest",
@@ -17333,7 +17333,7 @@ function Ge({
 const atn = ({
   open: n,
   side: t = "bottom",
-  delayDuration: r = 250,
+  delayDuration: r = 200,
   sideOffset: i,
   align: c,
   onOpenChange: a,
@@ -21282,10 +21282,10 @@ export {
   Ko as coolIconKeys,
   ee as debounce,
   Q as defaultBorderMixin,
-  j as fieldBackgroundDisabledMixin,
-  U as fieldBackgroundHoverMixin,
+  U as fieldBackgroundDisabledMixin,
+  V as fieldBackgroundHoverMixin,
   vn as fieldBackgroundInvisibleMixin,
-  V as fieldBackgroundMixin,
+  G as fieldBackgroundMixin,
   Kn as focusedClasses,
   gn as focusedInvisibleMixin,
   P as focusedMixin,