@firecms/ui 3.0.0-canary.150 → 3.0.0-canary.152

package/dist/components/BooleanSwitch.d.ts

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

package/dist/components/Chip.d.ts

@@ -8,7 +8,7 @@ export type ChipColorKey = keyof typeof CHIP_COLORS;
 export interface ChipProps {
     className?: string;
     children: React.ReactNode;
-    size?: "smallest" | "small" | "medium";
+    size?: "small" | "medium" | "large";
     colorScheme?: ChipColorScheme | ChipColorKey;
     error?: boolean;
     outlined?: boolean;

package/dist/components/DateTimeField.d.ts

@@ -6,7 +6,7 @@ export type DateTimeFieldProps = {
     disabled?: boolean;
     clearable?: boolean;
     error?: boolean;
-    size?: "small" | "medium";
+    size?: "medium" | "large";
     label?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;

package/dist/components/FileUpload.d.ts

@@ -18,6 +18,6 @@ export type FileUploadProps = {
     title?: React.ReactNode;
     uploadDescription?: React.ReactNode;
     preventDropOnDocument?: boolean;
-    size?: "small" | "medium";
+    size?: "medium" | "large";
 };
 export declare function FileUpload({ accept, onFilesAdded, onFilesRejected, maxSize, disabled, maxFiles, title, uploadDescription, children, preventDropOnDocument, size }: React.PropsWithChildren<FileUploadProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select.d.ts

@@ -11,7 +11,7 @@ export type SelectProps = {
     onValueChange?: (updatedValue: string) => void;
     placeholder?: React.ReactNode;
     renderValue?: (value: string) => React.ReactNode;
-    size?: "small" | "medium";
+    size?: "small" | "medium" | "large";
     label?: React.ReactNode | string;
     disabled?: boolean;
     error?: boolean;

package/dist/components/TextField.d.ts

@@ -13,7 +13,7 @@ export type TextFieldProps<T extends string | number> = {
     endAdornment?: React.ReactNode;
     autoFocus?: boolean;
     placeholder?: string;
-    size?: "smallest" | "small" | "medium";
+    size?: "small" | "medium" | "large";
     className?: string;
     style?: React.CSSProperties;
     inputClassName?: string;

package/dist/index.es.js

@@ -416,7 +416,7 @@ const BooleanSwitch = React__default.forwardRef(
     className,
     onValueChange,
     disabled = false,
-    size = "small",
+    size = "medium",
     ...props
   }, ref) {
     return /* @__PURE__ */ jsxs(
@@ -436,7 +436,7 @@ const BooleanSwitch = React__default.forwardRef(
           }
         },
         className: cls(
-          size === "smallest" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
+          size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
           "outline-none rounded-full relative shadow-sm",
           value ? disabled ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700",
           className
@@ -450,10 +450,10 @@ const BooleanSwitch = React__default.forwardRef(
                 "block rounded-full transition-transform duration-100 transform will-change-auto",
                 disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600",
                 {
-                  "w-[21px] h-[10px]": size === "small" || size === "medium",
-                  "w-[19px] h-[8px]": size === "smallest",
-                  "translate-x-[10px]": size === "small" || size === "medium",
-                  "translate-x-[9px]": size === "smallest"
+                  "w-[21px] h-[10px]": size === "medium" || size === "large",
+                  "w-[19px] h-[8px]": size === "small",
+                  "translate-x-[10px]": size === "medium" || size === "large",
+                  "translate-x-[9px]": size === "small"
                 }
               )
             },
@@ -466,10 +466,10 @@ const BooleanSwitch = React__default.forwardRef(
                 "block rounded-full transition-transform duration-100 transform will-change-auto",
                 disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-400",
                 {
-                  "w-[21px] h-[21px]": size === "small" || size === "medium",
-                  "w-[19px] h-[19px]": size === "smallest",
-                  [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "small" || size === "medium",
-                  [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "smallest"
+                  "w-[21px] h-[21px]": size === "medium" || size === "large",
+                  "w-[19px] h-[19px]": size === "small",
+                  [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
+                  [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small"
                 }
               )
             },
@@ -517,9 +517,9 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
         "rounded-md max-w-full justify-between box-border relative inline-flex items-center",
         !invisible && focus && !disabled ? focusedClasses : "",
         error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark",
-        size === "smallest" ? "min-h-[40px]" : size === "small" ? "min-h-[48px]" : "min-h-[64px]",
-        size === "smallest" ? "pl-2" : "pl-4",
-        size === "smallest" ? "pr-4" : "pr-6",
+        size === "small" ? "min-h-[40px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]",
+        size === "small" ? "pl-2" : "pl-4",
+        size === "small" ? "pr-4" : "pr-6",
         position === "end" ? "flex-row-reverse" : "flex-row",
         fullWidth ? "w-full" : "",
         className
@@ -548,7 +548,7 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
         /* @__PURE__ */ jsx("div", { className: cls(
           "flex-grow",
           position === "end" ? "mr-4" : "ml-4",
-          size === "smallest" ? "text-sm" : "text-base"
+          size === "small" ? "text-sm" : "text-base"
         ), children: label })
       ]
     }
@@ -13622,9 +13622,9 @@ const Checkbox = ({
   );
 };
 const sizeClassNames = {
-  smallest: "px-2 py-0.5 text-sm",
-  small: "px-3 py-1 text-sm",
-  medium: "px-4 py-1.5 text-sm"
+  small: "px-2 py-0.5 text-sm",
+  medium: "px-3 py-1 text-sm",
+  large: "px-4 py-1.5 text-sm"
 };
 function Chip({
   children,
@@ -13633,7 +13633,7 @@ function Chip({
   outlined,
   onClick,
   icon,
-  size = "medium",
+  size = "large",
   className,
   style
 }) {
@@ -13848,7 +13848,7 @@ const DateTimeField = ({
   clearable,
   mode = "date",
   error,
-  size = "medium",
+  size = "large",
   className,
   style,
   inputClassName,
@@ -13912,8 +13912,8 @@ const DateTimeField = ({
           !invisible && fieldBackgroundMixin,
           disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
           {
-            "min-h-[48px]": size === "small",
-            "min-h-[64px]": size === "medium"
+            "min-h-[48px]": size === "medium",
+            "min-h-[64px]": size === "large"
           },
           className
         ),
@@ -13950,7 +13950,7 @@ const DateTimeField = ({
                 "w-full outline-none bg-transparent leading-normal text-base px-3",
                 clearable ? "pr-14" : "pr-12",
                 "rounded-md",
-                size === "small" ? "min-h-[48px]" : "min-h-[64px]",
+                size === "medium" ? "min-h-[48px]" : "min-h-[64px]",
                 label ? "pt-8 pb-2" : "py-2",
                 inputClassName,
                 disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500"
@@ -13980,9 +13980,9 @@ const DateTimeField = ({
       }
     ),
     invalidValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center m-2", children: [
-      /* @__PURE__ */ jsx(ErrorIcon, { size: "small", color: "error" }),
+      /* @__PURE__ */ jsx(ErrorIcon, { size: "medium", color: "error" }),
       /* @__PURE__ */ jsxs("div", { className: "pl-2", children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "font-medium", children: "Invalid date value for this field" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "font-large", children: "Invalid date value for this field" }),
         /* @__PURE__ */ jsx(Typography, { variant: "body2", children: `The provided value is: ${JSON.stringify(value)}` })
       ] })
     ] })
@@ -14300,8 +14300,8 @@ function FileUpload({
         "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",
         {
-          "h-44": size === "medium",
-          "h-28": size === "small",
+          "h-44": size === "large",
+          "h-28": size === "medium",
           "cursor-pointer": !disabled,
           [fieldBackgroundHoverMixin]: !isDragActive,
           "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": isDragReject,
@@ -14895,7 +14895,7 @@ const MultiSelect = React.forwardRef(
                           return /* @__PURE__ */ jsxs(
                             Chip,
                             {
-                              size: "small",
+                              size: "medium",
                               className: cls("flex flex-row items-center p-1"),
                               children: [
                                 option?.children,
@@ -14976,8 +14976,8 @@ const MultiSelect = React.forwardRef(
                       /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" }),
                       /* @__PURE__ */ jsxs(Command.List, { children: [
                         /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-2", children: "No results found." }),
-                        includeSelectAll && /* @__PURE__ */ jsxs(Command.Group, { children: [
-                          /* @__PURE__ */ jsxs(
+                        /* @__PURE__ */ jsxs(Command.Group, { children: [
+                          includeSelectAll && /* @__PURE__ */ jsxs(
                             Command.Item,
                             {
                               onSelect: toggleAll,
@@ -15216,7 +15216,7 @@ const Select = forwardRef(({
   placeholder,
   renderValue,
   label,
-  size = "medium",
+  size = "large",
   error,
   disabled,
   padding = true,
@@ -15259,12 +15259,16 @@ const Select = forwardRef(({
       children: [
         typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, { error, children: label }) : label,
         /* @__PURE__ */ jsx("div", { className: cls(
-          size === "small" ? "min-h-[42px]" : "min-h-[64px]",
           "select-none rounded-md text-sm",
           invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
           disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
           "relative flex items-center",
-          className
+          className,
+          {
+            "min-h-[28px]": size === "small",
+            "min-h-[42px]": size === "medium",
+            "min-h-[64px]": size === "large"
+          }
         ), children: /* @__PURE__ */ jsxs(
           SelectPrimitive.Trigger,
           {
@@ -15272,14 +15276,22 @@ const Select = forwardRef(({
             id,
             className: cls(
               "w-full h-full",
-              size === "small" ? "h-[42px]" : "h-[64px]",
-              padding ? "px-4 " : "",
+              padding ? {
+                "px-4": size === "large",
+                "px-3": size === "medium",
+                "px-2": size === "small"
+              } : "",
               "outline-none focus:outline-none",
               "select-none rounded-md text-sm",
               error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
               error ? "border border-red-500 dark:border-red-600" : "",
               disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
               "relative flex flex-row items-center",
+              {
+                "min-h-[28px]": size === "small",
+                "min-h-[42px]": size === "medium",
+                "min-h-[64px]": size === "large"
+              },
               inputClassName
             ),
             children: [
@@ -15290,7 +15302,11 @@ const Select = forwardRef(({
                   className: cls(
                     "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
                     "overflow-visible",
-                    size === "small" ? "h-[42px]" : "h-[64px]"
+                    {
+                      "min-h-[28px]": size === "small",
+                      "min-h-[42px]": size === "medium",
+                      "min-h-[64px]": size === "large"
+                    }
                   ),
                   children: /* @__PURE__ */ jsxs(
                     SelectPrimitive.Value,
@@ -15303,7 +15319,15 @@ const Select = forwardRef(({
                       className: "w-full",
                       children: [
                         hasValue && value && renderValue ? renderValue(value) : placeholder,
-                        hasValue && !renderValue && value
+                        hasValue && !renderValue && (() => {
+                          const childrenProps = Children.map(children, (child) => {
+                            if (React__default.isValidElement(child)) {
+                              return child.props;
+                            }
+                          }).filter(Boolean);
+                          const option = childrenProps.find((o) => o.value === value);
+                          return option?.children;
+                        })()
                       ]
                     }
                   )
@@ -15323,8 +15347,11 @@ const Select = forwardRef(({
               /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
                 ExpandMoreIcon,
                 {
-                  size: "small",
-                  className: cls("px-2 transition", open ? "rotate-180" : "")
+                  size: "medium",
+                  className: cls("transition", open ? "rotate-180" : "", {
+                    "px-2": size === "large",
+                    "px-1": size === "medium" || size === "small"
+                  })
                 }
               ) })
             ]
@@ -15817,7 +15844,7 @@ function TextField({
   endAdornment,
   autoFocus,
   placeholder,
-  size = "medium",
+  size = "large",
   className,
   style,
   inputClassName,
@@ -15872,8 +15899,8 @@ function TextField({
         "rounded-md",
         invisible ? focusedInvisibleMixin : "",
         disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-        size === "smallest" ? "min-h-[32px]" : size === "small" ? "min-h-[48px]" : "min-h-[64px]",
-        label ? size === "medium" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2",
+        size === "small" ? "min-h-[32px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]",
+        label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2",
         focused ? "text-text-primary dark:text-text-primary-dark" : "",
         endAdornment ? "pr-10" : "pr-3",
         disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white",
@@ -15897,9 +15924,9 @@ function TextField({
         disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
         error ? "border border-red-500 dark:border-red-600" : "",
         {
-          "min-h-[32px]": !invisible && size === "smallest",
-          "min-h-[48px]": !invisible && size === "small",
-          "min-h-[64px]": !invisible && size === "medium"
+          "min-h-[32px]": !invisible && size === "small",
+          "min-h-[48px]": !invisible && size === "medium",
+          "min-h-[64px]": !invisible && size === "large"
         },
         className
       ),
@@ -15910,7 +15937,7 @@ function TextField({
           {
             className: cls(
               "pointer-events-none absolute",
-              size === "medium" ? "top-1" : "-top-1",
+              size === "large" ? "top-1" : "-top-1",
               !error ? focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-600",
               disabled ? "opacity-50" : ""
             ),
@@ -15922,7 +15949,11 @@ function TextField({
         endAdornment && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4 ",
+            className: cls("flex flex-row justify-center items-center absolute h-full right-0 top-0", {
+              "mr-4": size === "large",
+              "mr-3": size === "medium",
+              "mr-2": size === "small"
+            }),
             children: endAdornment
           }
         )