@firecms/ui 3.0.0-canary.105 → 3.0.0-canary.107

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,7 +3,7 @@ export type BooleanSwitchProps = {
3
3
  value: boolean | null;
4
4
  className?: string;
5
5
  disabled?: boolean;
6
- size?: "small" | "medium" | "large";
6
+ size?: "smallest" | "small" | "medium";
7
7
  } & ({
8
8
  allowIndeterminate: true;
9
9
  onValueChange?: (newValue: boolean | null) => void;
@@ -5,7 +5,7 @@ export interface CheckboxProps {
5
5
  indeterminate?: boolean;
6
6
  onCheckedChange?: (checked: boolean) => void;
7
7
  padding?: boolean;
8
- size?: "tiny" | "small" | "medium" | "large";
8
+ size?: "smallest" | "small" | "medium" | "large";
9
9
  color?: "primary" | "secondary";
10
10
  }
11
11
  export declare const Checkbox: ({ id, checked, indeterminate, padding, disabled, size, onCheckedChange, color }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
@@ -8,7 +8,7 @@ export type ChipColorKey = keyof typeof CHIP_COLORS;
8
8
  export interface ChipProps {
9
9
  className?: string;
10
10
  children: React.ReactNode;
11
- size?: "tiny" | "small" | "medium";
11
+ size?: "smallest" | "small" | "medium";
12
12
  colorScheme?: ChipColorScheme | ChipColorKey;
13
13
  error?: boolean;
14
14
  outlined?: boolean;
package/dist/index.es.js CHANGED
@@ -424,7 +424,7 @@ const BooleanSwitch = React__default.forwardRef(
424
424
  className,
425
425
  onValueChange,
426
426
  disabled = false,
427
- size = "medium",
427
+ size = "small",
428
428
  ...props
429
429
  }, ref) {
430
430
  return /* @__PURE__ */ jsxs(
@@ -444,7 +444,7 @@ const BooleanSwitch = React__default.forwardRef(
444
444
  }
445
445
  },
446
446
  className: cls(
447
- size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
447
+ size === "smallest" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
448
448
  "outline-none rounded-full relative shadow-sm",
449
449
  value ? disabled ? "bg-white bg-opacity-54 dark:bg-slate-950 border-slate-100 dark:border-slate-700 ring-1 ring-slate-200 dark:ring-slate-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-slate-900 ring-1 ring-slate-200 dark:ring-slate-700",
450
450
  className
@@ -458,10 +458,10 @@ const BooleanSwitch = React__default.forwardRef(
458
458
  "block rounded-full transition-transform duration-100 transform will-change-auto",
459
459
  disabled ? "bg-slate-400 dark:bg-slate-600" : "bg-slate-400 dark:bg-slate-600",
460
460
  {
461
- "w-[21px] h-[10px]": size === "medium" || size === "large",
462
- "w-[19px] h-[8px]": size === "small",
463
- "translate-x-[10px]": size === "medium" || size === "large",
464
- "translate-x-[9px]": size === "small"
461
+ "w-[21px] h-[10px]": size === "small" || size === "medium",
462
+ "w-[19px] h-[8px]": size === "smallest",
463
+ "translate-x-[10px]": size === "small" || size === "medium",
464
+ "translate-x-[9px]": size === "smallest"
465
465
  }
466
466
  )
467
467
  },
@@ -474,10 +474,10 @@ const BooleanSwitch = React__default.forwardRef(
474
474
  "block rounded-full transition-transform duration-100 transform will-change-auto",
475
475
  disabled ? "bg-slate-300 dark:bg-slate-700" : value ? "bg-white" : "bg-slate-600 dark:bg-slate-400",
476
476
  {
477
- "w-[21px] h-[21px]": size === "medium" || size === "large",
478
- "w-[19px] h-[19px]": size === "small",
479
- [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
480
- [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small"
477
+ "w-[21px] h-[21px]": size === "small" || size === "medium",
478
+ "w-[19px] h-[19px]": size === "smallest",
479
+ [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "small" || size === "medium",
480
+ [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "smallest"
481
481
  }
482
482
  )
483
483
  },
@@ -522,9 +522,9 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
522
522
  "rounded-md max-w-full justify-between w-full box-border relative inline-flex items-center",
523
523
  !invisible && focus && !disabled ? focusedClasses : "",
524
524
  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",
525
- size === "small" ? "min-h-[40px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]",
526
- size === "small" ? "pl-2" : "pl-4",
527
- size === "small" ? "pr-4" : "pr-6",
525
+ size === "smallest" ? "min-h-[40px]" : size === "small" ? "min-h-[48px]" : "min-h-[64px]",
526
+ size === "smallest" ? "pl-2" : "pl-4",
527
+ size === "smallest" ? "pr-4" : "pr-6",
528
528
  position === "end" ? "flex-row-reverse" : "flex-row"
529
529
  ),
530
530
  onClick: disabled ? void 0 : (e) => {
@@ -551,7 +551,7 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
551
551
  /* @__PURE__ */ jsx("div", { className: cls(
552
552
  "flex-grow",
553
553
  position === "end" ? "mr-4" : "ml-4",
554
- size === "small" ? "text-sm" : "text-base"
554
+ size === "smallest" ? "text-sm" : "text-base"
555
555
  ), children: label })
556
556
  ]
557
557
  }
@@ -13561,19 +13561,19 @@ const sizeClasses$1 = {
13561
13561
  large: "w-6 h-6 rounded flex items-center justify-center",
13562
13562
  medium: "w-5 h-5 rounded flex items-center justify-center",
13563
13563
  small: "w-4 h-4 rounded flex items-center justify-center",
13564
- tiny: "w-4 h-4 rounded flex items-center justify-center"
13564
+ smallest: "w-4 h-4 rounded flex items-center justify-center"
13565
13565
  };
13566
13566
  const outerSizeClasses = {
13567
13567
  medium: "w-10 h-10",
13568
13568
  small: "w-8 h-8",
13569
13569
  large: "w-12 h-12 ",
13570
- tiny: "w-6 h-6"
13570
+ smallest: "w-6 h-6"
13571
13571
  };
13572
13572
  const paddingClasses = {
13573
13573
  medium: "p-2",
13574
13574
  small: "p-2",
13575
13575
  large: "p-2",
13576
- tiny: ""
13576
+ smallest: ""
13577
13577
  };
13578
13578
  const colorClasses$2 = {
13579
13579
  primary: "bg-primary",
@@ -13590,7 +13590,7 @@ const Checkbox = ({
13590
13590
  color = "primary"
13591
13591
  }) => {
13592
13592
  const isChecked = indeterminate ? false : checked;
13593
- const iconSize = size === "medium" ? 20 : size === "small" ? 16 : size === "tiny" ? 14 : 24;
13593
+ const iconSize = size === "medium" ? 20 : size === "small" ? 16 : size === "smallest" ? 14 : 24;
13594
13594
  return /* @__PURE__ */ jsx(
13595
13595
  CheckboxPrimitive.Root,
13596
13596
  {
@@ -13621,7 +13621,7 @@ const Checkbox = ({
13621
13621
  );
13622
13622
  };
13623
13623
  const sizeClassNames = {
13624
- tiny: "px-2 py-0.5 text-sm",
13624
+ smallest: "px-2 py-0.5 text-sm",
13625
13625
  small: "px-3 py-1 text-sm",
13626
13626
  medium: "px-4 py-1.5 text-sm"
13627
13627
  };