@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.
- package/dist/components/BooleanSwitch.d.ts +1 -1
- package/dist/components/Checkbox.d.ts +1 -1
- package/dist/components/Chip.d.ts +1 -1
- package/dist/index.es.js +19 -19
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +19 -19
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
- package/src/components/BooleanSwitch.tsx +11 -11
- package/src/components/BooleanSwitchWithLabel.tsx +4 -4
- package/src/components/Checkbox.tsx +5 -5
- package/src/components/Chip.tsx +2 -2
- package/src/components/TextField.tsx +0 -3
@@ -3,7 +3,7 @@ export type BooleanSwitchProps = {
|
|
3
3
|
value: boolean | null;
|
4
4
|
className?: string;
|
5
5
|
disabled?: boolean;
|
6
|
-
size?: "
|
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?: "
|
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?: "
|
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 = "
|
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 === "
|
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 === "
|
462
|
-
"w-[19px] h-[8px]": size === "
|
463
|
-
"translate-x-[10px]": size === "
|
464
|
-
"translate-x-[9px]": size === "
|
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 === "
|
478
|
-
"w-[19px] h-[19px]": size === "
|
479
|
-
[value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "
|
480
|
-
[value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "
|
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 === "
|
526
|
-
size === "
|
527
|
-
size === "
|
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 === "
|
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
|
-
|
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
|
-
|
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
|
-
|
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 === "
|
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
|
-
|
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
|
};
|