@firecms/ui 3.0.0-canary.150 → 3.0.0-canary.152

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 (19) hide show
  1. package/dist/components/BooleanSwitch.d.ts +1 -1
  2. package/dist/components/Chip.d.ts +1 -1
  3. package/dist/components/DateTimeField.d.ts +1 -1
  4. package/dist/components/FileUpload.d.ts +1 -1
  5. package/dist/components/Select.d.ts +1 -1
  6. package/dist/components/TextField.d.ts +1 -1
  7. package/dist/index.es.js +77 -46
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/index.umd.js +77 -46
  10. package/dist/index.umd.js.map +1 -1
  11. package/package.json +2 -2
  12. package/src/components/BooleanSwitch.tsx +11 -11
  13. package/src/components/BooleanSwitchWithLabel.tsx +4 -4
  14. package/src/components/Chip.tsx +5 -5
  15. package/src/components/DateTimeField.tsx +7 -7
  16. package/src/components/FileUpload.tsx +3 -3
  17. package/src/components/MultiSelect.tsx +5 -5
  18. package/src/components/Select.tsx +43 -11
  19. package/src/components/TextField.tsx +13 -9
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.150",
4
+ "version": "3.0.0-canary.152",
5
5
  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
6
6
  "funding": {
7
7
  "url": "https://github.com/sponsors/firecmsco"
@@ -108,7 +108,7 @@
108
108
  "index.css",
109
109
  "tailwind.config.js"
110
110
  ],
111
- "gitHead": "4df9d54d1bd70b5b5823d797bc2ce6b6c34cf051",
111
+ "gitHead": "be8e639101ee20faccf85a5b0225a7ead151d2d9",
112
112
  "publishConfig": {
113
113
  "access": "public"
114
114
  }
package/src/components/BooleanSwitch.tsx CHANGED
@@ -5,7 +5,7 @@ export type BooleanSwitchProps = {
5
5
  value: boolean | null;
6
6
  className?: string;
7
7
  disabled?: boolean;
8
- size?: "smallest" | "small" | "medium";
8
+ size?: "small" | "medium" | "large";
9
9
  } & ({
10
10
  allowIndeterminate: true;
11
11
  onValueChange?: (newValue: boolean | null) => void;
@@ -20,7 +20,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
20
20
  className,
21
21
  onValueChange,
22
22
  disabled = false,
23
- size = "small",
23
+ size = "medium",
24
24
  ...props
25
25
  }: BooleanSwitchProps, ref: React.Ref<HTMLButtonElement>) {
26
26
  return <button
@@ -40,7 +40,7 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
40
40
  }
41
41
  }}
42
42
  className={cls(
43
- size === "smallest" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
43
+ size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
44
44
  "outline-none rounded-full relative shadow-sm",
45
45
  value ? (disabled
46
46
  ? "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"
@@ -55,10 +55,10 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
55
55
  "block rounded-full transition-transform duration-100 transform will-change-auto",
56
56
  disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600",
57
57
  {
58
- "w-[21px] h-[10px]": size === "small" || size === "medium",
59
- "w-[19px] h-[8px]": size === "smallest",
60
- "translate-x-[10px]": size === "small" || size === "medium",
61
- "translate-x-[9px]": size === "smallest"
58
+ "w-[21px] h-[10px]": size === "medium" || size === "large",
59
+ "w-[19px] h-[8px]": size === "small",
60
+ "translate-x-[10px]": size === "medium" || size === "large",
61
+ "translate-x-[9px]": size === "small"
62
62
  }
63
63
  )}
64
64
  />}
@@ -69,10 +69,10 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
69
69
  "block rounded-full transition-transform duration-100 transform will-change-auto",
70
70
  disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : (value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-400"),
71
71
  {
72
- "w-[21px] h-[21px]": size === "small" || size === "medium",
73
- "w-[19px] h-[19px]": size === "smallest",
74
- [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "small" || size === "medium",
75
- [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "smallest"
72
+ "w-[21px] h-[21px]": size === "medium" || size === "large",
73
+ "w-[19px] h-[19px]": size === "small",
74
+ [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
75
+ [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small"
76
76
  }
77
77
  )}
78
78
  />}
package/src/components/BooleanSwitchWithLabel.tsx CHANGED
@@ -67,9 +67,9 @@ 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 === "smallest" ? "min-h-[40px]" : (size === "small" ? "min-h-[48px]" : "min-h-[64px]"),
71
- size === "smallest" ? "pl-2" : "pl-4",
72
- size === "smallest" ? "pr-4" : "pr-6",
70
+ size === "small" ? "min-h-[40px]" : (size === "medium" ? "min-h-[48px]" : "min-h-[64px]"),
71
+ size === "small" ? "pl-2" : "pl-4",
72
+ size === "small" ? "pr-4" : "pr-6",
73
73
  position === "end" ? "flex-row-reverse" : "flex-row",
74
74
  fullWidth ? "w-full" : "",
75
75
  className
@@ -98,7 +98,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
98
98
  <div className={cls(
99
99
  "flex-grow",
100
100
  position === "end" ? "mr-4" : "ml-4",
101
- size === "smallest" ? "text-sm" : "text-base"
101
+ size === "small" ? "text-sm" : "text-base"
102
102
  )}>
103
103
  {label}
104
104
  </div>
package/src/components/Chip.tsx CHANGED
@@ -11,7 +11,7 @@ export type ChipColorKey = keyof typeof CHIP_COLORS;
11
11
  export interface ChipProps {
12
12
  className?: string;
13
13
  children: React.ReactNode;
14
- size?: "smallest" | "small" | "medium";
14
+ size?: "small" | "medium" | "large";
15
15
  colorScheme?: ChipColorScheme | ChipColorKey;
16
16
  error?: boolean;
17
17
  outlined?: boolean;
@@ -21,9 +21,9 @@ export interface ChipProps {
21
21
  }
22
22
 
23
23
  const sizeClassNames = {
24
- smallest: "px-2 py-0.5 text-sm",
25
- small: "px-3 py-1 text-sm",
26
- medium: "px-4 py-1.5 text-sm"
24
+ small: "px-2 py-0.5 text-sm",
25
+ medium: "px-3 py-1 text-sm",
26
+ large: "px-4 py-1.5 text-sm"
27
27
  }
28
28
 
29
29
  /**
@@ -36,7 +36,7 @@ export function Chip({
36
36
  outlined,
37
37
  onClick,
38
38
  icon,
39
- size = "medium",
39
+ size = "large",
40
40
  className,
41
41
  style
42
42
  }: ChipProps) {
package/src/components/DateTimeField.tsx CHANGED
@@ -14,7 +14,7 @@ export type DateTimeFieldProps = {
14
14
  disabled?: boolean;
15
15
  clearable?: boolean;
16
16
  error?: boolean;
17
- size?: "small" | "medium";
17
+ size?: "medium" | "large";
18
18
  label?: React.ReactNode;
19
19
  className?: string;
20
20
  style?: React.CSSProperties;
@@ -31,7 +31,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
31
31
  clearable,
32
32
  mode = "date",
33
33
  error,
34
- size = "medium",
34
+ size = "large",
35
35
  className,
36
36
  style,
37
37
  inputClassName,
@@ -109,8 +109,8 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
109
109
  !invisible && fieldBackgroundMixin,
110
110
  disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
111
111
  {
112
- "min-h-[48px]": size === "small",
113
- "min-h-[64px]": size === "medium",
112
+ "min-h-[48px]": size === "medium",
113
+ "min-h-[64px]": size === "large",
114
114
  },
115
115
  className
116
116
  )}
@@ -151,7 +151,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
151
151
  "w-full outline-none bg-transparent leading-normal text-base px-3",
152
152
  clearable ? "pr-14" : "pr-12",
153
153
  "rounded-md",
154
- size === "small" ? "min-h-[48px]" : "min-h-[64px]",
154
+ size === "medium" ? "min-h-[48px]" : "min-h-[64px]",
155
155
  label ? "pt-8 pb-2" : "py-2",
156
156
  inputClassName,
157
157
  disabled &&
@@ -178,9 +178,9 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
178
178
  </div>
179
179
  {invalidValue && (
180
180
  <div className="flex items-center m-2">
181
- <ErrorIcon size={"small"} color={"error"}/>
181
+ <ErrorIcon size={"medium"} color={"error"}/>
182
182
  <div className="pl-2">
183
- <Typography variant={"body2"} className="font-medium">
183
+ <Typography variant={"body2"} className="font-large">
184
184
  Invalid date value for this field
185
185
  </Typography>
186
186
  <Typography variant={"body2"}>
package/src/components/FileUpload.tsx CHANGED
@@ -28,7 +28,7 @@ export type FileUploadProps = {
28
28
  title?: React.ReactNode;
29
29
  uploadDescription?: React.ReactNode;
30
30
  preventDropOnDocument?: boolean;
31
- size?: "small" | "medium";
31
+ size?: "medium" | "large";
32
32
  };
33
33
 
34
34
  export function FileUpload({
@@ -69,8 +69,8 @@ export function FileUpload({
69
69
  "flex gap-2",
70
70
  "p-4 box-border relative items-center border-2 border-solid border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
71
71
  {
72
- "h-44": size === "medium",
73
- "h-28": size === "small",
72
+ "h-44": size === "large",
73
+ "h-28": size === "medium",
74
74
  "cursor-pointer": !disabled,
75
75
  [fieldBackgroundHoverMixin]: !isDragActive,
76
76
  "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-red-500": isDragReject,
package/src/components/MultiSelect.tsx CHANGED
@@ -228,7 +228,7 @@ export const MultiSelect = React.forwardRef<
228
228
  }
229
229
  return (
230
230
  <Chip
231
- size={"small"}
231
+ size={"medium"}
232
232
  key={value}
233
233
  className={cls("flex flex-row items-center p-1")}
234
234
  >
@@ -298,8 +298,8 @@ export const MultiSelect = React.forwardRef<
298
298
  <CommandPrimitive.Empty className={"px-4 py-2"}>
299
299
  No results found.
300
300
  </CommandPrimitive.Empty>
301
- {includeSelectAll && <CommandPrimitive.Group>
302
- <CommandPrimitive.Item
301
+ <CommandPrimitive.Group>
302
+ {includeSelectAll && <CommandPrimitive.Item
303
303
  key="all"
304
304
  onSelect={toggleAll}
305
305
  className={
@@ -316,9 +316,9 @@ export const MultiSelect = React.forwardRef<
316
316
  >
317
317
  <InnerCheckBox checked={selectedValues.length === allValues.length}/>
318
318
  <span className={"text-sm text-text-secondary dark:text-text-secondary-dark"}>(Select All)</span>
319
- </CommandPrimitive.Item>
319
+ </CommandPrimitive.Item>}
320
320
  {children}
321
- </CommandPrimitive.Group>}
321
+ </CommandPrimitive.Group>
322
322
 
323
323
  </CommandPrimitive.List>
324
324
  </CommandPrimitive>
package/src/components/Select.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import React, { ChangeEvent, forwardRef, useCallback, useEffect, useState } from "react";
2
+ import React, { ChangeEvent, Children, forwardRef, useCallback, useEffect, useState } from "react";
3
3
  import * as SelectPrimitive from "@radix-ui/react-select";
4
4
  import {
5
5
  defaultBorderMixin,
@@ -25,7 +25,7 @@ export type SelectProps = {
25
25
  onValueChange?: (updatedValue: string) => void,
26
26
  placeholder?: React.ReactNode,
27
27
  renderValue?: (value: string) => React.ReactNode,
28
- size?: "small" | "medium",
28
+ size?: "small" | "medium" | "large",
29
29
  label?: React.ReactNode | string,
30
30
  disabled?: boolean,
31
31
  error?: boolean,
@@ -51,7 +51,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
51
51
  placeholder,
52
52
  renderValue,
53
53
  label,
54
- size = "medium",
54
+ size = "large",
55
55
  error,
56
56
  disabled,
57
57
  padding = true,
@@ -97,26 +97,38 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
97
97
  {...props}>
98
98
  {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
99
99
  <div className={cls(
100
- size === "small" ? "min-h-[42px]" : "min-h-[64px]",
101
100
  "select-none rounded-md text-sm",
102
101
  invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
103
102
  disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
104
103
  "relative flex items-center",
105
- className
104
+ className,
105
+ {
106
+ "min-h-[28px]": size === "small",
107
+ "min-h-[42px]": size === "medium",
108
+ "min-h-[64px]": size === "large"
109
+ }
106
110
  )}>
107
111
  <SelectPrimitive.Trigger
108
112
  ref={inputRef}
109
113
  id={id}
110
114
  className={cls(
111
115
  "w-full h-full",
112
- size === "small" ? "h-[42px]" : "h-[64px]",
113
- padding ? "px-4 " : "",
116
+ padding ? {
117
+ "px-4": size === "large",
118
+ "px-3": size === "medium",
119
+ "px-2": size === "small"
120
+ } : "",
114
121
  "outline-none focus:outline-none",
115
122
  "select-none rounded-md text-sm",
116
123
  error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
117
124
  error ? "border border-red-500 dark:border-red-600" : "",
118
125
  disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
119
126
  "relative flex flex-row items-center",
127
+ {
128
+ "min-h-[28px]": size === "small",
129
+ "min-h-[42px]": size === "medium",
130
+ "min-h-[64px]": size === "large"
131
+ },
120
132
  inputClassName
121
133
  )}>
122
134
 
@@ -125,7 +137,11 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
125
137
  className={cls(
126
138
  "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
127
139
  "overflow-visible",
128
- size === "small" ? "h-[42px]" : "h-[64px]"
140
+ {
141
+ "min-h-[28px]": size === "small",
142
+ "min-h-[42px]": size === "medium",
143
+ "min-h-[64px]": size === "large"
144
+ }
129
145
  )}
130
146
  >
131
147
  <SelectPrimitive.Value
@@ -136,7 +152,20 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
136
152
  placeholder={placeholder}
137
153
  className={"w-full"}>
138
154
  {hasValue && value && renderValue ? renderValue(value) : placeholder}
139
- {hasValue && !renderValue && value}
155
+ {/*{hasValue && !renderValue && value}*/}
156
+ {hasValue && !renderValue && (() => {
157
+
158
+ // @ts-ignore
159
+ const childrenProps: SelectItemProps[] = Children.map(children, (child) => {
160
+ if (React.isValidElement(child)) {
161
+ return child.props;
162
+ }
163
+ }).filter(Boolean);
164
+
165
+ const option = childrenProps.find((o) => o.value === value);
166
+ return option?.children;
167
+ })()}
168
+
140
169
  </SelectPrimitive.Value>
141
170
  </div>
142
171
 
@@ -151,8 +180,11 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
151
180
  </div>
152
181
  )}
153
182
  <SelectPrimitive.Icon asChild>
154
- <ExpandMoreIcon size={"small"}
155
- className={cls("px-2 transition", open ? "rotate-180" : "")}/>
183
+ <ExpandMoreIcon size={"medium"}
184
+ className={cls("transition", open ? "rotate-180" : "", {
185
+ "px-2": size === "large",
186
+ "px-1": size === "medium" || size === "small",
187
+ })}/>
156
188
  </SelectPrimitive.Icon>
157
189
  </SelectPrimitive.Trigger>
158
190
 
package/src/components/TextField.tsx CHANGED
@@ -40,7 +40,7 @@ export type TextFieldProps<T extends string | number> = {
40
40
  endAdornment?: React.ReactNode,
41
41
  autoFocus?: boolean,
42
42
  placeholder?: string,
43
- size?: "smallest" | "small" | "medium",
43
+ size?: "small" | "medium" | "large",
44
44
  className?: string,
45
45
  style?: React.CSSProperties,
46
46
  inputClassName?: string,
@@ -61,7 +61,7 @@ export function TextField<T extends string | number>({
61
61
  endAdornment,
62
62
  autoFocus,
63
63
  placeholder,
64
- size = "medium",
64
+ size = "large",
65
65
  className,
66
66
  style,
67
67
  inputClassName,
@@ -125,8 +125,8 @@ export function TextField<T extends string | number>({
125
125
  "rounded-md",
126
126
  invisible ? focusedInvisibleMixin : "",
127
127
  disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
128
- size === "smallest" ? "min-h-[32px]" : (size === "small" ? "min-h-[48px]" : "min-h-[64px]"),
129
- label ? (size === "medium" ? "pt-8 pb-2" : "pt-4 pb-2") : "py-2",
128
+ size === "small" ? "min-h-[32px]" : (size === "medium" ? "min-h-[48px]" : "min-h-[64px]"),
129
+ label ? (size === "large" ? "pt-8 pb-2" : "pt-4 pb-2") : "py-2",
130
130
  focused ? "text-text-primary dark:text-text-primary-dark" : "",
131
131
  endAdornment ? "pr-10" : "pr-3",
132
132
  disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white",
@@ -149,9 +149,9 @@ export function TextField<T extends string | number>({
149
149
  disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
150
150
  error ? "border border-red-500 dark:border-red-600" : "",
151
151
  {
152
- "min-h-[32px]": !invisible && size === "smallest",
153
- "min-h-[48px]": !invisible && size === "small",
154
- "min-h-[64px]": !invisible && size === "medium"
152
+ "min-h-[32px]": !invisible && size === "small",
153
+ "min-h-[48px]": !invisible && size === "medium",
154
+ "min-h-[64px]": !invisible && size === "large"
155
155
  },
156
156
  className)}
157
157
  style={style}>
@@ -160,7 +160,7 @@ export function TextField<T extends string | number>({
160
160
  <InputLabel
161
161
  className={cls(
162
162
  "pointer-events-none absolute",
163
- size === "medium" ? "top-1" : "-top-1",
163
+ size === "large" ? "top-1" : "-top-1",
164
164
  !error ? (focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-600",
165
165
  disabled ? "opacity-50" : "")}
166
166
  shrink={hasValue || focused}
@@ -172,7 +172,11 @@ export function TextField<T extends string | number>({
172
172
  {input}
173
173
 
174
174
  {endAdornment && <div
175
- className="flex flex-row justify-center items-center absolute h-full right-0 top-0 mr-4 ">{endAdornment}</div>}
175
+ className={cls("flex flex-row justify-center items-center absolute h-full right-0 top-0", {
176
+ "mr-4": size === "large",
177
+ "mr-3": size === "medium",
178
+ "mr-2": size === "small"
179
+ })}>{endAdornment}</div>}
176
180
 
177
181
  </div>
178
182
  );