@firecms/ui 3.0.0-canary.132 → 3.0.0-canary.134

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@radix-ui/react-collapsible"), require("clsx"), require("tailwind-merge"), require("date-fns/locale"), require("react-datepicker"), require("@radix-ui/react-checkbox"), require("material-icons/iconfont/filled.css"), require("@radix-ui/react-dialog"), require("react-dropzone"), require("@radix-ui/react-label"), require("react-fast-compare"), require("markdown-it"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-menubar"), require("@radix-ui/react-popover"), require("cmdk"), require("@radix-ui/react-separator"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-select"), require("react-dom"), require("@radix-ui/react-tooltip"), require("@radix-ui/react-tabs")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@radix-ui/react-collapsible", "clsx", "tailwind-merge", "date-fns/locale", "react-datepicker", "@radix-ui/react-checkbox", "material-icons/iconfont/filled.css", "@radix-ui/react-dialog", "react-dropzone", "@radix-ui/react-label", "react-fast-compare", "markdown-it", "@radix-ui/react-dropdown-menu", "@radix-ui/react-menubar", "@radix-ui/react-popover", "cmdk", "@radix-ui/react-separator", "@radix-ui/react-radio-group", "@radix-ui/react-select", "react-dom", "@radix-ui/react-tooltip", "@radix-ui/react-tabs"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS UI"] = {}, global.jsxRuntime, global.React, global.Collapsible, global.clsx, global.tailwindMerge, global.locales, global.RDP, global.CheckboxPrimitive, null, global.DialogPrimitive, global.reactDropzone, global.LabelPrimitive, global.equal, global.MarkdownIt, global.DropdownMenu, global.MenubarPrimitive, global.PopoverPrimitive, global.cmdk, global.SeparatorPrimitive, global.RadioGroupPrimitive, global.SelectPrimitive, global.ReactDOM, global.TooltipPrimitive, global.TabsPrimitive));
-})(this, function(exports2, jsxRuntime, React, Collapsible, clsx, tailwindMerge, locales, RDP, CheckboxPrimitive, filled_css, DialogPrimitive, reactDropzone, LabelPrimitive, equal, MarkdownIt, DropdownMenu, MenubarPrimitive, PopoverPrimitive, cmdk, SeparatorPrimitive, RadioGroupPrimitive, SelectPrimitive, ReactDOM, TooltipPrimitive, TabsPrimitive) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@radix-ui/react-collapsible"), require("clsx"), require("tailwind-merge"), require("date-fns/locale"), require("react-datepicker"), require("@radix-ui/react-checkbox"), require("material-icons/iconfont/filled.css"), require("@radix-ui/react-dialog"), require("@radix-ui/react-visually-hidden"), require("react-dropzone"), require("@radix-ui/react-label"), require("react-fast-compare"), require("markdown-it"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-menubar"), require("@radix-ui/react-popover"), require("cmdk"), require("@radix-ui/react-separator"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-select"), require("@radix-ui/react-slider"), require("@radix-ui/react-tooltip"), require("react-dom"), require("@radix-ui/react-tabs")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@radix-ui/react-collapsible", "clsx", "tailwind-merge", "date-fns/locale", "react-datepicker", "@radix-ui/react-checkbox", "material-icons/iconfont/filled.css", "@radix-ui/react-dialog", "@radix-ui/react-visually-hidden", "react-dropzone", "@radix-ui/react-label", "react-fast-compare", "markdown-it", "@radix-ui/react-dropdown-menu", "@radix-ui/react-menubar", "@radix-ui/react-popover", "cmdk", "@radix-ui/react-separator", "@radix-ui/react-radio-group", "@radix-ui/react-select", "@radix-ui/react-slider", "@radix-ui/react-tooltip", "react-dom", "@radix-ui/react-tabs"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS UI"] = {}, global.jsxRuntime, global.React, global.Collapsible, global.clsx, global.tailwindMerge, global.locales, global.RDP, global.CheckboxPrimitive, null, global.DialogPrimitive, global.VisuallyHidden, global.reactDropzone, global.LabelPrimitive, global.equal, global.MarkdownIt, global.DropdownMenu, global.MenubarPrimitive, global.PopoverPrimitive, global.cmdk, global.SeparatorPrimitive, global.RadioGroupPrimitive, global.SelectPrimitive, global.SliderPrimitive, global.TooltipPrimitive, global.ReactDOM, global.TabsPrimitive));
+})(this, function(exports2, jsxRuntime, React, Collapsible, clsx, tailwindMerge, locales, RDP, CheckboxPrimitive, filled_css, DialogPrimitive, VisuallyHidden, reactDropzone, LabelPrimitive, equal, MarkdownIt, DropdownMenu, MenubarPrimitive, PopoverPrimitive, cmdk, SeparatorPrimitive, RadioGroupPrimitive, SelectPrimitive, SliderPrimitive, TooltipPrimitive, ReactDOM, TabsPrimitive) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -24,6 +24,7 @@
   const RDP__namespace = /* @__PURE__ */ _interopNamespaceDefault(RDP);
   const CheckboxPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(CheckboxPrimitive);
   const DialogPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(DialogPrimitive);
+  const VisuallyHidden__namespace = /* @__PURE__ */ _interopNamespaceDefault(VisuallyHidden);
   const LabelPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(LabelPrimitive);
   const DropdownMenu__namespace = /* @__PURE__ */ _interopNamespaceDefault(DropdownMenu);
   const MenubarPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(MenubarPrimitive);
@@ -31,8 +32,9 @@
   const SeparatorPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SeparatorPrimitive);
   const RadioGroupPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadioGroupPrimitive);
   const SelectPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SelectPrimitive);
-  const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
+  const SliderPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SliderPrimitive);
   const TooltipPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TooltipPrimitive);
+  const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
   const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
   const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
   const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
@@ -41,9 +43,9 @@
   const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
   const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
   const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
-  const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
-  const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
-  const cardMixin = "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";
+  const defaultBorderMixin = "border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
+  const paperMixin = "bg-white rounded-md dark:bg-gray-950 border border-gray-200 border-opacity-40 dark:border-gray-700 dark:border-opacity-50";
+  const cardMixin = "bg-white border border-gray-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-700 dark:border-opacity-50 m-1 -p-1";
   const cardClickableMixin = "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";
   const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
   function cls(...classes) {
@@ -13757,7 +13759,7 @@
       }
     );
   });
-  const defaultVariantMapping = {
+  const typographyVariants = {
     h1: "h1",
     h2: "h2",
     h3: "h3",
@@ -13823,12 +13825,12 @@
     noWrap = false,
     paragraph = false,
     variant = "body1",
-    variantMapping = defaultVariantMapping,
+    variantMapping = typographyVariants,
     style,
     onClick,
     ...other
   }) {
-    const Component = component || (paragraph ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) || "span";
+    const Component = component || (paragraph ? "p" : variantMapping[variant] || typographyVariants[variant]) || "span";
     const classes = cls(
       variantToClasses[variant],
       color ? colorToClasses[color] : "",
@@ -14944,6 +14946,27 @@
       }
     );
   }
+  function DialogTitle({
+    children,
+    hidden,
+    className,
+    variant = "h4",
+    ...props
+  }) {
+    const title = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Typography,
+      {
+        variant,
+        className,
+        ...props,
+        children
+      }
+    ) });
+    if (hidden) {
+      return /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden__namespace.Root, { children: title });
+    }
+    return title;
+  }
   function ExpandablePanel({
     title,
     children,
@@ -14953,7 +14976,8 @@
     initiallyExpanded = true,
     titleClassName,
     asField,
-    className
+    className,
+    innerClassName
   }) {
     useInjectStyles("ExpandablePanel", `
 .CollapsibleContent {
@@ -15004,7 +15028,8 @@
         className: cls(
           !invisible && defaultBorderMixin + " border",
           "rounded-md",
-          "w-full"
+          "w-full",
+          className
         ),
         open,
         onOpenChange: (updatedOpen) => {
@@ -15016,8 +15041,8 @@
             Collapsible__namespace.Trigger,
             {
               className: cls(
-                "rounded flex items-center justify-between w-full min-h-[52px]",
-                "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
+                "rounded-t flex items-center justify-between w-full min-h-[52px]",
+                "hover:bg-slate-200 hover:bg-opacity-20 dark:hover:bg-gray-800 dark:hover:bg-opacity-20",
                 invisible ? "border-b px-2" : "p-4",
                 invisible && defaultBorderMixin,
                 asField && fieldBackgroundMixin,
@@ -15036,7 +15061,7 @@
               style: {
                 overflow: allowOverflow ? "visible" : "hidden"
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children })
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerClassName, children })
             }
           )
         ]
@@ -16196,10 +16221,93 @@
       children
     ] });
   }
+  function SliderThumb(props) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(TooltipPrimitive__namespace.Root, { open: props.hovered, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        SliderPrimitive__namespace.Thumb,
+        {
+          className: cls(
+            {
+              "border-primary bg-primary hover:bg-primary-dark focus-visible:ring-4 focus-visible:ring-primary outline-none focus-visible:ring-opacity-50": !props.props.disabled,
+              "border-slate-300 bg-slate-300 dark:border-gray-700 dark:bg-gray-700": props.props.disabled
+            },
+            props.classes,
+            "focus:ring-8 focus:ring-primary focus:ring-opacity-75",
+            "hover:ring-8 hover:ring-primary hover:ring-opacity-75",
+            "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TooltipPrimitive__namespace.Content,
+        {
+          side: "top",
+          sideOffset: 5,
+          className: cls(
+            "TooltipContent",
+            "max-w-lg leading-relaxed",
+            "z-50 rounded px-3 py-2 text-xs leading-none bg-slate-700 dark:bg-slate-800 bg-opacity-90 font-medium text-slate-50 shadow-2xl select-none duration-400 ease-in transform opacity-100"
+          ),
+          children: props.props.value?.[props.index]
+        }
+      )
+    ] });
+  }
+  const Slider = React__namespace.forwardRef(({
+    className,
+    size = "regular",
+    ...props
+  }, ref) => {
+    const [hovered, setHovered] = React__namespace.useState(false);
+    const thumbSizeClasses = size === "small" ? "h-4 w-4" : "h-6 w-6";
+    return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      SliderPrimitive__namespace.Root,
+      {
+        ref,
+        onMouseEnter: () => setHovered(true),
+        onMouseLeave: () => setHovered(false),
+        className: cls(
+          "relative flex w-full touch-none select-none items-center",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SliderPrimitive__namespace.Track,
+            {
+              style: { height: size === "small" ? 4 : 8 },
+              className: "relative w-full grow overflow-hidden rounded-full bg-slate-300 bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                SliderPrimitive__namespace.Range,
+                {
+                  className: cls("absolute h-full", {
+                    "bg-primary": !props.disabled,
+                    "bg-slate-300 dark:bg-gray-700": props.disabled
+                  })
+                }
+              )
+            }
+          ),
+          (props.value ?? [0]).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            SliderThumb,
+            {
+              index,
+              props,
+              hovered,
+              classes: thumbSizeClasses
+            },
+            index
+          ))
+        ]
+      }
+    ) });
+  });
+  Slider.displayName = "Slider";
   const Sheet = ({
     children,
     side = "right",
     title,
+    modal = true,
     open,
     onOpenChange,
     transparent,
@@ -16230,10 +16338,11 @@
       DialogPrimitive__namespace.Root,
       {
         open: displayed || open,
+        modal,
         onOpenChange,
         children: /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Portal, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { autoFocus: true, tabIndex: 0, children: title ?? "Sheet" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          modal && /* @__PURE__ */ jsxRuntime.jsx(
             DialogPrimitive__namespace.Overlay,
             {
               className: cls(
@@ -17932,6 +18041,7 @@
   exports2.Dialog = Dialog;
   exports2.DialogActions = DialogActions;
   exports2.DialogContent = DialogContent;
+  exports2.DialogTitle = DialogTitle;
   exports2.DialogsIcon = DialogsIcon;
   exports2.DialpadIcon = DialpadIcon;
   exports2.DiamondIcon = DiamondIcon;
@@ -19896,6 +20006,7 @@
   exports2.SleepIcon = SleepIcon;
   exports2.SleepScoreIcon = SleepScoreIcon;
   exports2.SlideLibraryIcon = SlideLibraryIcon;
+  exports2.Slider = Slider;
   exports2.SlidersIcon = SlidersIcon;
   exports2.SlideshowIcon = SlideshowIcon;
   exports2.SlowMotionVideoIcon = SlowMotionVideoIcon;