@firecms/ui 3.0.0-canary.253 → 3.0.0-canary.255

package/dist/components/Select.d.ts

@@ -9,6 +9,7 @@ export type SelectProps<T extends SelectValue = string> = {
     value?: T;
     className?: string;
     inputClassName?: string;
+    viewportClassName?: string;
     onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
     onValueChange?: (updatedValue: T) => void;
     placeholder?: React.ReactNode;

package/dist/index.es.js

@@ -732,18 +732,22 @@ const BooleanSwitch = React__default.forwardRef(function BooleanSwitch2({
     } else {
       onValueChange?.(!value);
     }
-  }, className: cls(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), ...props, children: [
+  }, className: cls(size === "smallest" ? "w-[34px] h-[18px] min-w-[34px] min-h-[18px]" : 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), ...props, children: [
     allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsx("div", { className: cls("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 === "medium" || size === "large",
       "w-[19px] h-[8px]": size === "small",
+      "w-[16px] h-[6px]": size === "smallest",
       "translate-x-[10px]": size === "medium" || size === "large",
-      "translate-x-[9px]": size === "small"
+      "translate-x-[9px]": size === "small",
+      "translate-x-[8px]": size === "smallest"
     }) }, "knob"),
     !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("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 === "medium" || size === "large",
       "w-[19px] h-[19px]": size === "small",
+      "w-[16px] h-[16px]": size === "smallest",
       [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
-      [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small"
+      [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small",
+      [value ? "translate-x-[16px]" : "translate-x-[1px]"]: size === "smallest"
     }) }, "knob")
   ] });
 });
@@ -775,7 +779,7 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
     "min-h-[32px]": size === "small",
     "min-h-[42px]": size === "medium",
     "min-h-[64px]": size === "large"
-  }, size === "small" ? "pl-2" : "pl-4", size === "small" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className), onClick: disabled ? void 0 : (e) => {
+  }, size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className), onClick: disabled ? void 0 : (e) => {
     if (props.allowIndeterminate) {
       if (value === null || value === void 0) onValueChange?.(true);
       else if (value) onValueChange?.(false);
@@ -785,7 +789,7 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
     }
   }, children: [
     /* @__PURE__ */ jsx(BooleanSwitch, { value, ref: refInput, size, className: cls(invisible && focus ? focusedClasses : "", inputClassName), disabled, ...props }),
-    /* @__PURE__ */ jsx("div", { className: cls("flex-grow", position === "end" ? "mr-4" : "ml-4", size === "small" ? "text-sm" : "text-base"), children: label })
+    /* @__PURE__ */ jsx("div", { className: cls("flex-grow", position === "end" ? "mr-4" : "ml-4", size === "small" || size === "smallest" ? "text-sm" : "text-base"), children: label })
   ] });
 };
 const ButtonInner = React__default.forwardRef((t0, ref) => {
@@ -30542,6 +30546,7 @@ const Select = forwardRef(({
   onValueChange,
   className,
   inputClassName,
+  viewportClassName,
   placeholder,
   renderValue,
   label,
@@ -30636,7 +30641,7 @@ const Select = forwardRef(({
         e_0.stopPropagation();
       }, children: endAdornment })
     ] }),
-    /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, { position, className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin), children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", style: {
+    /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, { position, className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin), children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: cls("p-1", viewportClassName), style: {
       maxHeight: "var(--radix-select-content-available-height)"
     }, children }) }) })
   ] });