@firecms/ui 3.0.0-canary.225 → 3.0.0-canary.226

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.
Files changed (17) hide show
  1. package/dist/components/BooleanSwitch.d.ts +1 -1
  2. package/dist/components/BooleanSwitchWithLabel.d.ts +1 -1
  3. package/dist/components/DateTimeField.d.ts +1 -1
  4. package/dist/components/MultiSelect.d.ts +1 -1
  5. package/dist/components/Select.d.ts +1 -1
  6. package/dist/components/TextField.d.ts +2 -2
  7. package/dist/index.es.js +256 -241
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/index.umd.js +256 -241
  10. package/dist/index.umd.js.map +1 -1
  11. package/package.json +2 -2
  12. package/src/components/BooleanSwitch.tsx +1 -1
  13. package/src/components/BooleanSwitchWithLabel.tsx +3 -2
  14. package/src/components/DateTimeField.tsx +5 -3
  15. package/src/components/MultiSelect.tsx +5 -4
  16. package/src/components/Select.tsx +8 -5
  17. package/src/components/TextField.tsx +6 -4
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@firecms/ui",
3
3
  "type": "module",
4
- "version": "3.0.0-canary.225",
4
+ "version": "3.0.0-canary.226",
5
5
  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
6
6
  "funding": {
7
7
  "url": "https://github.com/sponsors/firecmsco"
@@ -115,7 +115,7 @@
115
115
  "index.css",
116
116
  "tailwind.config.js"
117
117
  ],
118
- "gitHead": "e16b0ebd1efe8103cdc036b7ffda2c90eb813118",
118
+ "gitHead": "186d2820e1dd7b69916647c3f887ff275351e863",
119
119
  "publishConfig": {
120
120
  "access": "public"
121
121
  }
package/src/components/BooleanSwitch.tsx CHANGED
@@ -6,7 +6,7 @@ export type BooleanSwitchProps = {
6
6
  value: boolean | null;
7
7
  className?: string;
8
8
  disabled?: boolean;
9
- size?: "small" | "medium" | "large";
9
+ size?: "smallest" | "small" | "medium" | "large";
10
10
  } & ({
11
11
  allowIndeterminate: true;
12
12
  onValueChange?: (newValue: boolean | null) => void;
package/src/components/BooleanSwitchWithLabel.tsx CHANGED
@@ -27,13 +27,13 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
27
27
  export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
28
28
  value,
29
29
  position = "end",
30
+ size = "medium",
30
31
  invisible,
31
32
  onValueChange,
32
33
  error,
33
34
  label,
34
35
  autoFocus,
35
36
  disabled,
36
- size,
37
37
  className,
38
38
  fullWidth = true,
39
39
  inputClassName,
@@ -68,7 +68,8 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
68
68
  !invisible && focus && !disabled ? focusedClasses : "",
69
69
  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")),
70
70
  {
71
- "min-h-[28px]": size === "small",
71
+ "min-h-[28px]": size === "smallest",
72
+ "min-h-[32px]": size === "small",
72
73
  "min-h-[42px]": size === "medium",
73
74
  "min-h-[64px]": size === "large",
74
75
  },
package/src/components/DateTimeField.tsx CHANGED
@@ -16,7 +16,7 @@ export type DateTimeFieldProps = {
16
16
  disabled?: boolean;
17
17
  clearable?: boolean;
18
18
  error?: boolean;
19
- size?: "small" | "medium" | "large";
19
+ size?: "smallest" | "small" | "medium" | "large";
20
20
  label?: React.ReactNode;
21
21
  className?: string;
22
22
  style?: React.CSSProperties;
@@ -110,7 +110,8 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
110
110
  !invisible && fieldBackgroundMixin,
111
111
  disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
112
112
  {
113
- "min-h-[28px]": size === "small",
113
+ "min-h-[28px]": size === "smallest",
114
+ "min-h-[32px]": size === "small",
114
115
  "min-h-[42px]": size === "medium",
115
116
  "min-h-[64px]": size === "large",
116
117
  },
@@ -154,7 +155,8 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
154
155
  clearable ? "pr-14" : "pr-12",
155
156
  "rounded-md",
156
157
  {
157
- "min-h-[28px]": size === "small",
158
+ "min-h-[28px]": size === "smallest",
159
+ "min-h-[32px]": size === "small",
158
160
  "min-h-[42px]": size === "medium",
159
161
  "min-h-[64px]": size === "large",
160
162
  },
package/src/components/MultiSelect.tsx CHANGED
@@ -44,7 +44,7 @@ interface MultiSelectProps<T extends MultiSelectValue = string> {
44
44
  onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
45
45
  onValueChange?: (updatedValue: T[]) => void,
46
46
  placeholder?: React.ReactNode,
47
- size?: "small" | "medium" | "large",
47
+ size?: "smallest" | "small" | "medium" | "large",
48
48
  useChips?: boolean,
49
49
  label?: React.ReactNode | string,
50
50
  disabled?: boolean,
@@ -194,16 +194,17 @@ export const MultiSelect = React.forwardRef<
194
194
  onClick={handleTogglePopover}
195
195
  className={cls(
196
196
  {
197
- "min-h-[28px]": size === "small",
197
+ "min-h-[28px]": size === "smallest",
198
+ "min-h-[32px]": size === "small",
198
199
  "min-h-[42px]": size === "medium",
199
200
  "min-h-[64px]": size === "large",
200
201
  },
201
202
  {
202
- "py-1": size === "small",
203
+ "py-1": size === "small" || size === "smallest",
203
204
  "py-2": size === "medium" || size === "large",
204
205
  },
205
206
  {
206
- "px-2": size === "small",
207
+ "px-2": size === "small" || size === "smallest",
207
208
  "px-4": size === "medium" || size === "large",
208
209
  },
209
210
  "select-none rounded-md text-sm",
package/src/components/Select.tsx CHANGED
@@ -28,7 +28,7 @@ export type SelectProps<T extends SelectValue = string> = {
28
28
  onValueChange?: (updatedValue: T) => void,
29
29
  placeholder?: React.ReactNode,
30
30
  renderValue?: (value: T) => React.ReactNode,
31
- size?: "small" | "medium" | "large",
31
+ size?: "smallest" | "small" | "medium" | "large",
32
32
  label?: React.ReactNode | string,
33
33
  disabled?: boolean,
34
34
  error?: boolean,
@@ -115,7 +115,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
115
115
  "relative flex items-center",
116
116
  className,
117
117
  {
118
- "min-h-[28px]": size === "small",
118
+ "min-h-[28px]": size === "smallest",
119
+ "min-h-[32px]": size === "small",
119
120
  "min-h-[42px]": size === "medium",
120
121
  "min-h-[64px]": size === "large",
121
122
  "w-fit": !fullWidth,
@@ -132,7 +133,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
132
133
  padding ? {
133
134
  "px-4": size === "large",
134
135
  "px-3": size === "medium",
135
- "px-2": size === "small"
136
+ "px-2": size === "small" || size === "smallest",
136
137
  } : "",
137
138
  "outline-none focus:outline-none",
138
139
  "select-none rounded-md text-sm",
@@ -141,7 +142,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
141
142
  disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
142
143
  "relative flex flex-row items-center",
143
144
  {
144
- "min-h-[28px]": size === "small",
145
+ "min-h-[28px]": size === "smallest",
146
+ "min-h-[32px]": size === "small",
145
147
  "min-h-[42px]": size === "medium",
146
148
  "min-h-[64px]": size === "large",
147
149
  "w-full": fullWidth,
@@ -155,7 +157,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
155
157
  "flex-grow max-w-full flex flex-row gap-2 items-center",
156
158
  "overflow-visible",
157
159
  {
158
- "min-h-[28px]": size === "small",
160
+ "min-h-[28px]": size === "smallest",
161
+ "min-h-[32px]": size === "small",
159
162
  "min-h-[42px]": size === "medium",
160
163
  "min-h-[64px]": size === "large"
161
164
  }
package/src/components/TextField.tsx CHANGED
@@ -39,7 +39,7 @@ export type TextFieldProps<T extends string | number> = {
39
39
  endAdornment?: React.ReactNode;
40
40
  autoFocus?: boolean;
41
41
  placeholder?: string;
42
- size?: "small" | "medium" | "large";
42
+ size?: "smallest" | "small" | "medium" | "large";
43
43
  className?: string;
44
44
  style?: React.CSSProperties;
45
45
  inputClassName?: string;
@@ -135,7 +135,8 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
135
135
  invisible ? focusedInvisibleMixin : "",
136
136
  disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
137
137
  {
138
- "min-h-[28px]": size === "small",
138
+ "min-h-[28px]": size === "smallest",
139
+ "min-h-[32px]": size === "small",
139
140
  "min-h-[42px]": size === "medium",
140
141
  "min-h-[64px]": size === "large",
141
142
  },
@@ -168,7 +169,8 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
168
169
  disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
169
170
  error ? "border border-red-500 dark:border-red-600" : "",
170
171
  {
171
- "min-h-[28px]": size === "small",
172
+ "min-h-[28px]": size === "smallest",
173
+ "min-h-[32px]": size === "small",
172
174
  "min-h-[42px]": size === "medium",
173
175
  "min-h-[64px]": size === "large",
174
176
  },
@@ -203,7 +205,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
203
205
  {
204
206
  "mr-4": size === "large",
205
207
  "mr-3": size === "medium",
206
- "mr-2": size === "small",
208
+ "mr-2": size === "small" || size === "smallest",
207
209
  }
208
210
  )}
209
211
  >