@firecms/ui 3.0.0-canary.212 → 3.0.0-canary.214

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 (12) hide show
  1. package/dist/components/DateTimeField.d.ts +1 -1
  2. package/dist/components/MultiSelect.d.ts +1 -1
  3. package/dist/index.es.js +351 -316
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/index.umd.js +351 -316
  6. package/dist/index.umd.js.map +1 -1
  7. package/package.json +2 -2
  8. package/src/components/BooleanSwitch.tsx +6 -1
  9. package/src/components/BooleanSwitchWithLabel.tsx +5 -1
  10. package/src/components/DateTimeField.tsx +9 -5
  11. package/src/components/MultiSelect.tsx +15 -5
  12. package/src/components/TextField.tsx +5 -5
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.212",
4
+ "version": "3.0.0-canary.214",
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": "fd7800ae484cdf583e8bf91fb9bf9d17b1dddecc",
118
+ "gitHead": "255b71517080aaba37ba66335b110ac62ba3b507",
119
119
  "publishConfig": {
120
120
  "access": "public"
121
121
  }
package/src/components/BooleanSwitch.tsx CHANGED
@@ -41,7 +41,12 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
41
41
  }
42
42
  }}
43
43
  className={cls(
44
- size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
44
+ {
45
+ "min-h-[32px]": size === "small",
46
+ "min-h-[48px]": size === "medium",
47
+ "min-h-[64px]": size === "large",
48
+ },
49
+ size === "small" ? "w-[38px] min-w-[38px]" : "w-[42px] min-w-[42px]",
45
50
  "outline-none rounded-full relative shadow-sm",
46
51
  value ? (disabled
47
52
  ? "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"
package/src/components/BooleanSwitchWithLabel.tsx CHANGED
@@ -67,7 +67,11 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
67
67
  "rounded-md max-w-full justify-between box-border relative inline-flex items-center",
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
- size === "small" ? "min-h-[40px]" : (size === "medium" ? "min-h-[48px]" : "min-h-[64px]"),
70
+ {
71
+ "min-h-[28px]": size === "small",
72
+ "min-h-[42px]": size === "medium",
73
+ "min-h-[64px]": size === "large",
74
+ },
71
75
  size === "small" ? "pl-2" : "pl-4",
72
76
  size === "small" ? "pr-4" : "pr-6",
73
77
  position === "end" ? "flex-row-reverse" : "flex-row",
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?: "medium" | "large";
19
+ size?: "small" | "medium" | "large";
20
20
  label?: React.ReactNode;
21
21
  className?: string;
22
22
  style?: React.CSSProperties;
@@ -38,7 +38,6 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
38
38
  style,
39
39
  inputClassName,
40
40
  invisible,
41
- locale, // Note: The 'locale' prop is not utilized with native inputs as they are managed by the browser.
42
41
  }) => {
43
42
  const inputRef = useRef<HTMLInputElement>(null);
44
43
  const [focused, setFocused] = useState(false);
@@ -111,7 +110,8 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
111
110
  !invisible && fieldBackgroundMixin,
112
111
  disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
113
112
  {
114
- "min-h-[48px]": size === "medium",
113
+ "min-h-[28px]": size === "small",
114
+ "min-h-[42px]": size === "medium",
115
115
  "min-h-[64px]": size === "large",
116
116
  },
117
117
  className
@@ -153,7 +153,11 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
153
153
  "w-full outline-none bg-transparent leading-normal text-base px-3",
154
154
  clearable ? "pr-14" : "pr-12",
155
155
  "rounded-md",
156
- size === "medium" ? "min-h-[48px]" : "min-h-[64px]",
156
+ {
157
+ "min-h-[28px]": size === "small",
158
+ "min-h-[42px]": size === "medium",
159
+ "min-h-[64px]": size === "large",
160
+ },
157
161
  label ? "pt-8 pb-2" : "py-2",
158
162
  inputClassName,
159
163
  disabled &&
@@ -180,7 +184,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
180
184
  </div>
181
185
  {invalidValue && (
182
186
  <div className="flex items-center m-2">
183
- <ErrorIcon size={"medium"} color={"error"}/>
187
+ <ErrorIcon size={"small"} color={"error"}/>
184
188
  <div className="pl-2">
185
189
  <Typography variant={"body2"}>
186
190
  Invalid date value for this field
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",
47
+ size?: "small" | "medium" | "large",
48
48
  useChips?: boolean,
49
49
  label?: React.ReactNode | string,
50
50
  disabled?: boolean,
@@ -69,7 +69,7 @@ export const MultiSelect = React.forwardRef<
69
69
  (
70
70
  {
71
71
  value,
72
- size,
72
+ size = "large",
73
73
  label,
74
74
  error,
75
75
  onValueChange,
@@ -193,9 +193,19 @@ export const MultiSelect = React.forwardRef<
193
193
  ref={ref}
194
194
  onClick={handleTogglePopover}
195
195
  className={cls(
196
- size === "small" ? "min-h-[42px]" : "min-h-[64px]",
197
- "py-2",
198
- "px-4",
196
+ {
197
+ "min-h-[28px]": size === "small",
198
+ "min-h-[42px]": size === "medium",
199
+ "min-h-[64px]": size === "large",
200
+ },
201
+ {
202
+ "py-1": size === "small",
203
+ "py-2": size === "medium" || size === "large",
204
+ },
205
+ {
206
+ "px-2": size === "small",
207
+ "px-4": size === "medium" || size === "large",
208
+ },
199
209
  "select-none rounded-md text-sm",
200
210
  invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
201
211
  disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
package/src/components/TextField.tsx CHANGED
@@ -134,11 +134,11 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
134
134
  "focused:text-text-primary focused:dark:text-text-primary-dark",
135
135
  invisible ? focusedInvisibleMixin : "",
136
136
  disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
137
- size === "small"
138
- ? "min-h-[32px]"
139
- : size === "medium"
140
- ? "min-h-[48px]"
141
- : "min-h-[64px]",
137
+ {
138
+ "min-h-[28px]": size === "small",
139
+ "min-h-[42px]": size === "medium",
140
+ "min-h-[64px]": size === "large",
141
+ },
142
142
  label
143
143
  ? size === "large"
144
144
  ? "pt-8 pb-2"