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

package/dist/components/DialogTitle.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { TypographyProps, TypographyVariant } from "./Typography";
+export type DialogContentProps = TypographyProps & {
+    children: React.ReactNode;
+    hidden?: boolean;
+    className?: string;
+    variant?: TypographyVariant;
+};
+export declare function DialogTitle({ children, hidden, className, variant, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ExpandablePanel.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from "react";
-export declare function ExpandablePanel({ title, children, invisible, expanded, onExpandedChange, initiallyExpanded, titleClassName, asField, className }: PropsWithChildren<{
+export declare function ExpandablePanel({ title, children, invisible, expanded, onExpandedChange, initiallyExpanded, titleClassName, asField, className, innerClassName }: PropsWithChildren<{
     title: React.ReactNode;
     invisible?: boolean;
     initiallyExpanded?: boolean;
@@ -8,4 +8,5 @@ export declare function ExpandablePanel({ title, children, invisible, expanded,
     titleClassName?: string;
     asField?: boolean;
     className?: string;
+    innerClassName?: string;
 }>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Sheet.d.ts

@@ -3,6 +3,7 @@ interface SheetProps {
     children: React.ReactNode;
     open: boolean;
     title?: string;
+    modal?: boolean;
     side?: "top" | "bottom" | "left" | "right";
     darkBackground?: boolean;
     transparent?: boolean;

package/dist/components/Slider.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface SliderProps {
+    className?: string;
+    name?: string;
+    disabled?: boolean;
+    orientation?: React.AriaAttributes["aria-orientation"];
+    dir?: "ltr" | "rtl";
+    min?: number;
+    max?: number;
+    step?: number;
+    minStepsBetweenThumbs?: number;
+    value?: number[];
+    defaultValue?: number[];
+    onValueChange?: (value: number[]) => void;
+    onValueCommit?: (value: number[]) => void;
+    inverted?: boolean;
+    form?: string;
+    size?: "small" | "regular";
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+export { Slider };

package/dist/components/Typography.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactEventHandler } from "react";
-export type TextProps<C extends React.ElementType> = {
+export type TypographyVariant = keyof typeof typographyVariants;
+export type TypographyProps<C extends React.ElementType = "span"> = {
     align?: "center" | "inherit" | "justify" | "left" | "right";
     children?: React.ReactNode;
     className?: string;
@@ -7,7 +8,7 @@ export type TextProps<C extends React.ElementType> = {
     gutterBottom?: boolean;
     noWrap?: boolean;
     paragraph?: boolean;
-    variant?: keyof typeof defaultVariantMapping;
+    variant?: TypographyVariant;
     variantMapping?: {
         [key: string]: string;
     };
@@ -15,7 +16,7 @@ export type TextProps<C extends React.ElementType> = {
     onClick?: ReactEventHandler<HTMLElement>;
     style?: React.CSSProperties;
 } & React.ComponentPropsWithoutRef<C>;
-declare const defaultVariantMapping: {
+declare const typographyVariants: {
     h1: string;
     h2: string;
     h3: string;
@@ -31,5 +32,5 @@ declare const defaultVariantMapping: {
     caption: string;
     button: string;
 };
-export declare function Typography<C extends React.ElementType>({ align, color, children, className, component, gutterBottom, noWrap, paragraph, variant, variantMapping, style, onClick, ...other }: TextProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare function Typography<C extends React.ElementType = "span">({ align, color, children, className, component, gutterBottom, noWrap, paragraph, variant, variantMapping, style, onClick, ...other }: TypographyProps<C>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/index.d.ts

@@ -15,6 +15,7 @@ export * from "./DateTimeField";
 export * from "./Dialog";
 export * from "./DialogActions";
 export * from "./DialogContent";
+export * from "./DialogTitle";
 export * from "./ExpandablePanel";
 export * from "./FileUpload";
 export * from "./IconButton";
@@ -31,6 +32,7 @@ export * from "./RadioGroup";
 export * from "./SearchBar";
 export * from "./Select";
 export * from "./Separator";
+export * from "./Slider";
 export * from "./Sheet";
 export * from "./TextareaAutosize";
 export * from "./TextField";

package/dist/index.es.js

@@ -10,6 +10,7 @@ import { registerLocale, setDefaultLocale } from "react-datepicker";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import "material-icons/iconfont/filled.css";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { useDropzone } from "react-dropzone";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import equal from "react-fast-compare";
@@ -21,8 +22,9 @@ import { Command } from "cmdk";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import * as ReactDOM from "react-dom";
+import * as SliderPrimitive from "@radix-ui/react-slider";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as ReactDOM from "react-dom";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 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";
@@ -31,9 +33,9 @@ const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:b
 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) {
@@ -13747,7 +13749,7 @@ const InputLabel = React.forwardRef(function InputLabel2(inProps, ref) {
     }
   );
 });
-const defaultVariantMapping = {
+const typographyVariants = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -13813,12 +13815,12 @@ function Typography({
   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] : "",
@@ -14934,6 +14936,27 @@ function DialogContent({
     }
   );
 }
+function DialogTitle({
+  children,
+  hidden,
+  className,
+  variant = "h4",
+  ...props
+}) {
+  const title = /* @__PURE__ */ jsx(DialogPrimitive.Title, { asChild: true, children: /* @__PURE__ */ jsx(
+    Typography,
+    {
+      variant,
+      className,
+      ...props,
+      children
+    }
+  ) });
+  if (hidden) {
+    return /* @__PURE__ */ jsx(VisuallyHidden.Root, { children: title });
+  }
+  return title;
+}
 function ExpandablePanel({
   title,
   children,
@@ -14943,7 +14966,8 @@ function ExpandablePanel({
   initiallyExpanded = true,
   titleClassName,
   asField,
-  className
+  className,
+  innerClassName
 }) {
   useInjectStyles("ExpandablePanel", `
 .CollapsibleContent {
@@ -14994,7 +15018,8 @@ function ExpandablePanel({
       className: cls(
         !invisible && defaultBorderMixin + " border",
         "rounded-md",
-        "w-full"
+        "w-full",
+        className
       ),
       open,
       onOpenChange: (updatedOpen) => {
@@ -15006,8 +15031,8 @@ function ExpandablePanel({
           Collapsible.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,
@@ -15026,7 +15051,7 @@ function ExpandablePanel({
             style: {
               overflow: allowOverflow ? "visible" : "hidden"
             },
-            children: /* @__PURE__ */ jsx("div", { className, children })
+            children: /* @__PURE__ */ jsx("div", { className: innerClassName, children })
           }
         )
       ]
@@ -16186,10 +16211,93 @@ function SelectGroup({
     children
   ] });
 }
+function SliderThumb(props) {
+  return /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open: props.hovered, children: [
+    /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      SliderPrimitive.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__ */ jsx(
+      TooltipPrimitive.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.forwardRef(({
+  className,
+  size = "regular",
+  ...props
+}, ref) => {
+  const [hovered, setHovered] = React.useState(false);
+  const thumbSizeClasses = size === "small" ? "h-4 w-4" : "h-6 w-6";
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      ref,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      className: cls(
+        "relative flex w-full touch-none select-none items-center",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.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__ */ jsx(
+              SliderPrimitive.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__ */ jsx(
+          SliderThumb,
+          {
+            index,
+            props,
+            hovered,
+            classes: thumbSizeClasses
+          },
+          index
+        ))
+      ]
+    }
+  ) });
+});
+Slider.displayName = "Slider";
 const Sheet = ({
   children,
   side = "right",
   title,
+  modal = true,
   open,
   onOpenChange,
   transparent,
@@ -16220,10 +16328,11 @@ const Sheet = ({
     DialogPrimitive.Root,
     {
       open: displayed || open,
+      modal,
       onOpenChange,
       children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
         /* @__PURE__ */ jsx(DialogPrimitive.Title, { autoFocus: true, tabIndex: 0, children: title ?? "Sheet" }),
-        /* @__PURE__ */ jsx(
+        modal && /* @__PURE__ */ jsx(
           DialogPrimitive.Overlay,
           {
             className: cls(
@@ -17923,6 +18032,7 @@ export {
   Dialog,
   DialogActions,
   DialogContent,
+  DialogTitle,
   DialogsIcon,
   DialpadIcon,
   DiamondIcon,
@@ -19887,6 +19997,7 @@ export {
   SleepIcon,
   SleepScoreIcon,
   SlideLibraryIcon,
+  Slider,
   SlidersIcon,
   SlideshowIcon,
   SlowMotionVideoIcon,