@firecms/ui 3.0.0-beta.13 → 3.0.0-beta.15

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 (25) hide show
  1. package/dist/components/Alert.d.ts +1 -0
  2. package/dist/components/Autocomplete.d.ts +4 -2
  3. package/dist/components/Dialog.d.ts +5 -1
  4. package/dist/components/Select.d.ts +2 -0
  5. package/dist/index.css +1 -0
  6. package/dist/index.es.js +348 -295
  7. package/dist/index.es.js.map +1 -1
  8. package/dist/index.umd.js +348 -295
  9. package/dist/index.umd.js.map +1 -1
  10. package/dist/styles.d.ts +2 -2
  11. package/package.json +3 -3
  12. package/src/components/Alert.tsx +7 -4
  13. package/src/components/Autocomplete.tsx +10 -5
  14. package/src/components/BooleanSwitch.tsx +7 -3
  15. package/src/components/BooleanSwitchWithLabel.tsx +3 -3
  16. package/src/components/Button.tsx +7 -5
  17. package/src/components/Dialog.tsx +12 -3
  18. package/src/components/LoadingButton.tsx +1 -1
  19. package/src/components/MultiSelect.tsx +2 -3
  20. package/src/components/Select.tsx +47 -40
  21. package/src/icons/Icon.tsx +1 -1
  22. package/src/index.css +1 -0
  23. package/src/material-icons.woff2 +0 -0
  24. package/src/styles.ts +2 -2
  25. package/tailwind.config.js +2 -2
package/dist/styles.d.ts CHANGED
@@ -7,6 +7,6 @@ export declare const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opac
7
7
  export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
8
8
  export declare const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
9
9
  export declare const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
10
- export declare const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40 m-1 -p-1";
11
- export declare const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
10
+ export declare const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40";
11
+ export declare const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer";
12
12
  export declare const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@firecms/ui",
3
3
  "type": "module",
4
- "version": "3.0.0-beta.13",
4
+ "version": "3.0.0-beta.15",
5
5
  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
6
6
  "funding": {
7
7
  "url": "https://github.com/sponsors/firecmsco"
@@ -44,7 +44,7 @@
44
44
  },
45
45
  "scripts": {
46
46
  "watch": "vite build --watch",
47
- "build": "vite build && tsc --emitDeclarationOnly",
47
+ "build": "rm -rf ./dist && vite build && tsc --emitDeclarationOnly",
48
48
  "prepublishOnly": "run-s build",
49
49
  "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
50
50
  "test:lint": "eslint \"src/**\" --quiet",
@@ -116,7 +116,7 @@
116
116
  "index.css",
117
117
  "tailwind.config.js"
118
118
  ],
119
- "gitHead": "26d5e1f33a7ac00c78e45cd3cb3c397f4ba00821",
119
+ "gitHead": "0abe2ca034f396e389db595f07ef4b24b439c648",
120
120
  "publishConfig": {
121
121
  "access": "public"
122
122
  }
package/src/components/Alert.tsx CHANGED
@@ -8,6 +8,7 @@ export interface AlertProps {
8
8
  size?: "small" | "medium" | "large";
9
9
  action?: React.ReactNode;
10
10
  className?: string;
11
+ outerClassName?: string;
11
12
  style?: React.CSSProperties;
12
13
  }
13
14
 
@@ -44,6 +45,7 @@ export const Alert: React.FC<AlertProps> = ({
44
45
  color = "info",
45
46
  size = "medium",
46
47
  action,
48
+ outerClassName,
47
49
  className,
48
50
  style
49
51
  }) => {
@@ -58,11 +60,12 @@ export const Alert: React.FC<AlertProps> = ({
58
60
  "font-medium",
59
61
  "rounded-md flex items-center gap-2",
60
62
  classes,
61
- className)}>
62
- <div className={"flex-grow"}>{children}</div>
63
+ outerClassName)}>
64
+ <div className={cls("flex-grow", className)}>{children}</div>
63
65
  {onDismiss && (
64
- <button className="text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400"
65
- onClick={onDismiss}>
66
+ <button
67
+ className="text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400"
68
+ onClick={onDismiss}>
66
69
  &times;
67
70
  </button>
68
71
  )}
package/src/components/Autocomplete.tsx CHANGED
@@ -10,6 +10,7 @@ export type AutocompleteProps = {
10
10
  children: React.ReactNode;
11
11
  open: boolean;
12
12
  setOpen: (open: boolean) => void;
13
+ className?: string;
13
14
  }
14
15
 
15
16
  export const useAutoComplete = ({ ref }: {
@@ -42,7 +43,8 @@ export const useAutoComplete = ({ ref }: {
42
43
  export function Autocomplete({
43
44
  children,
44
45
  open,
45
- setOpen
46
+ setOpen,
47
+ className
46
48
  }: AutocompleteProps) {
47
49
 
48
50
  const autocompleteRef = React.useRef<HTMLDivElement>(null);
@@ -50,7 +52,7 @@ export function Autocomplete({
50
52
 
51
53
  return <Collapse
52
54
  in={open}
53
- duration={50}
55
+ duration={30}
54
56
  className={cls(
55
57
  "absolute top-full left-0 right-0 overflow-visible",
56
58
  open ? "shadow" : "",
@@ -60,7 +62,8 @@ export function Autocomplete({
60
62
  <div ref={autocompleteRef}
61
63
  className={cls(
62
64
  open ? paperMixin : "",
63
- "bg-surface-50 dark:bg-surface-900 py-2"
65
+ "bg-surface-50 dark:bg-surface-900",
66
+ className,
64
67
  )}>
65
68
  {children}
66
69
  </div>
@@ -71,16 +74,18 @@ export function Autocomplete({
71
74
  export type AutocompleteItemProps = {
72
75
  children: React.ReactNode,
73
76
  onClick?: () => void,
77
+ className?: string
74
78
  };
75
79
 
76
80
  export function AutocompleteItem({
77
81
  children,
78
- onClick
82
+ onClick,
83
+ className
79
84
  }: AutocompleteItemProps) {
80
85
 
81
86
  return (
82
87
  <div
83
- className="flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800"
88
+ className={cls("flex w-full items-center h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className)}
84
89
  onClick={onClick}>
85
90
  {children}
86
91
  </div>
package/src/components/BooleanSwitch.tsx CHANGED
@@ -41,7 +41,7 @@ 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
+ size === "smallest" ? "w-[34px] h-[18px] min-w-[34px] min-h-[18px]" : size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]",
45
45
  "outline-none rounded-full relative shadow-sm",
46
46
  value ? (disabled
47
47
  ? "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"
@@ -58,8 +58,10 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
58
58
  {
59
59
  "w-[21px] h-[10px]": size === "medium" || size === "large",
60
60
  "w-[19px] h-[8px]": size === "small",
61
+ "w-[16px] h-[6px]": size === "smallest",
61
62
  "translate-x-[10px]": size === "medium" || size === "large",
62
- "translate-x-[9px]": size === "small"
63
+ "translate-x-[9px]": size === "small",
64
+ "translate-x-[8px]": size === "smallest"
63
65
  }
64
66
  )}
65
67
  />}
@@ -72,8 +74,10 @@ export const BooleanSwitch = React.forwardRef(function BooleanSwitch({
72
74
  {
73
75
  "w-[21px] h-[21px]": size === "medium" || size === "large",
74
76
  "w-[19px] h-[19px]": size === "small",
77
+ "w-[16px] h-[16px]": size === "smallest",
75
78
  [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
76
- [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small"
79
+ [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small",
80
+ [value ? "translate-x-[16px]" : "translate-x-[1px]"]: size === "smallest"
77
81
  }
78
82
  )}
79
83
  />}
package/src/components/BooleanSwitchWithLabel.tsx CHANGED
@@ -73,8 +73,8 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
73
73
  "min-h-[42px]": size === "medium",
74
74
  "min-h-[64px]": size === "large",
75
75
  },
76
- size === "small" ? "pl-2" : "pl-4",
77
- size === "small" ? "pr-4" : "pr-6",
76
+ size === "small" || size === "smallest" ? "pl-2" : "pl-4",
77
+ size === "small" || size === "smallest" ? "pr-4" : "pr-6",
78
78
  position === "end" ? "flex-row-reverse" : "flex-row",
79
79
  fullWidth ? "w-full" : "",
80
80
  className
@@ -103,7 +103,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
103
103
  <div className={cls(
104
104
  "flex-grow",
105
105
  position === "end" ? "mr-4" : "ml-4",
106
- size === "small" ? "text-sm" : "text-base"
106
+ size === "small" || size === "smallest" ? "text-sm" : "text-base"
107
107
  )}>
108
108
  {label}
109
109
  </div>
package/src/components/Button.tsx CHANGED
@@ -27,7 +27,7 @@ const ButtonInner = React.forwardRef<
27
27
  startIcon = null,
28
28
  fullWidth = false,
29
29
  component: Component,
30
- color = "primary",
30
+ color = "neutral",
31
31
  ...props
32
32
  }: ButtonProps<any>, ref) => {
33
33
 
@@ -43,21 +43,21 @@ const ButtonInner = React.forwardRef<
43
43
  "border border-secondary bg-secondary focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
44
44
  "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
45
45
  "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
46
- "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
46
+ "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "neutral" && !disabled,
47
47
 
48
48
  // Text Variants
49
49
  "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": variant === "text" && color === "primary" && !disabled,
50
50
  "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": variant === "text" && color === "secondary" && !disabled,
51
51
  "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": variant === "text" && color === "error" && !disabled,
52
52
  "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": variant === "text" && color === "text" && !disabled,
53
- "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": variant === "text" && color === "neutral" && !disabled,
53
+ "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-700": variant === "text" && color === "neutral" && !disabled,
54
54
 
55
55
  // Outlined Variants
56
56
  "border border-primary text-primary hover:text-primary hover:bg-primary-bg": variant === "outlined" && color === "primary" && !disabled,
57
57
  "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
58
58
  "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
59
59
  "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": variant === "outlined" && color === "text" && !disabled,
60
- "border border-surface-400 text-text-primary hover:bg-surface-accent-200 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": variant === "outlined" && color === "neutral" && !disabled,
60
+ "border border-surface-300 text-text-primary hover:bg-surface-accent-200 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": variant === "outlined" && color === "neutral" && !disabled,
61
61
 
62
62
  // Disabled states for all variants
63
63
  "text-text-disabled dark:text-text-disabled-dark": disabled,
@@ -72,7 +72,7 @@ const ButtonInner = React.forwardRef<
72
72
  "py-2 px-4": size === "medium",
73
73
  "py-2.5 px-5": size === "large",
74
74
  "py-3 px-6": size === "xl",
75
- "py-4 px-10": size === "2xl",
75
+ "py-4 px-10": size === "2xl"
76
76
  }
77
77
  );
78
78
 
@@ -95,6 +95,8 @@ const ButtonInner = React.forwardRef<
95
95
  onClick={props.onClick}
96
96
  className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
97
97
  disabled={disabled}
98
+ data-variant={variant}
99
+ data-size={size}
98
100
  {...props as React.ButtonHTMLAttributes<HTMLButtonElement>}>
99
101
  {startIcon}
100
102
  {children}
package/src/components/Dialog.tsx CHANGED
@@ -20,6 +20,10 @@ export type DialogProps = {
20
20
  onEscapeKeyDown?: (e: KeyboardEvent) => void;
21
21
  onPointerDownOutside?: (e: Event) => void;
22
22
  onInteractOutside?: (e: Event) => void;
23
+ /**
24
+ * If `true`, the dialog will not focus the first focusable element when opened.
25
+ */
26
+ disableInitialFocus?: boolean;
23
27
  };
24
28
 
25
29
  const widthClasses = {
@@ -52,7 +56,8 @@ export const Dialog = ({
52
56
  onOpenAutoFocus,
53
57
  onEscapeKeyDown,
54
58
  onPointerDownOutside,
55
- onInteractOutside
59
+ onInteractOutside,
60
+ disableInitialFocus = true
56
61
  }: DialogProps) => {
57
62
  const [displayed, setDisplayed] = useState(false);
58
63
 
@@ -89,7 +94,12 @@ export const Dialog = ({
89
94
 
90
95
  <DialogPrimitive.Content
91
96
  onEscapeKeyDown={onEscapeKeyDown}
92
- onOpenAutoFocus={onOpenAutoFocus}
97
+ onOpenAutoFocus={(e) => {
98
+ if (disableInitialFocus) {
99
+ e.preventDefault();
100
+ }
101
+ onOpenAutoFocus?.(e);
102
+ }}
93
103
  onPointerDownOutside={onPointerDownOutside}
94
104
  onInteractOutside={onInteractOutside}
95
105
  className={cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out")}
@@ -120,4 +130,3 @@ export const Dialog = ({
120
130
  </DialogPrimitive.Root>
121
131
  );
122
132
  };
123
-
package/src/components/LoadingButton.tsx CHANGED
@@ -23,7 +23,7 @@ export function LoadingButton<P extends React.ElementType = "button">({
23
23
  {...props}
24
24
  >
25
25
  {loading && (
26
- <CircularProgress size={"small"}/>
26
+ <CircularProgress size={"smallest"}/>
27
27
  )}
28
28
  {!loading && startIcon}
29
29
  {children}
package/src/components/MultiSelect.tsx CHANGED
@@ -259,7 +259,7 @@ export const MultiSelect = React.forwardRef<
259
259
  }}
260
260
  />}
261
261
  <div className={cls("px-2 h-full flex items-center")}>
262
- <KeyboardArrowDownIcon size={"small"}
262
+ <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
263
263
  className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
264
264
  </div>
265
265
  </div>
@@ -270,7 +270,7 @@ export const MultiSelect = React.forwardRef<
270
270
  {placeholder}
271
271
  </span>
272
272
  <div className={cls("px-2 h-full flex items-center")}>
273
- <KeyboardArrowDownIcon size={"small"}
273
+ <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
274
274
  className={cls("transition", isPopoverOpen ? "rotate-180" : "")}/>
275
275
  </div>
276
276
  </div>
@@ -380,7 +380,6 @@ export function MultiSelectItem<T extends MultiSelectValue = string>({
380
380
  </CommandPrimitive.Item>;
381
381
  }
382
382
 
383
-
384
383
  function InnerCheckBox({ checked }: { checked: boolean }) {
385
384
  return <div className={cls(
386
385
  "p-2",
package/src/components/Select.tsx CHANGED
@@ -24,6 +24,7 @@ export type SelectProps<T extends SelectValue = string> = {
24
24
  value?: T,
25
25
  className?: string,
26
26
  inputClassName?: string,
27
+ viewportClassName?: string,
27
28
  onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
28
29
  onValueChange?: (updatedValue: T) => void,
29
30
  placeholder?: React.ReactNode,
@@ -38,33 +39,36 @@ export type SelectProps<T extends SelectValue = string> = {
38
39
  padding?: boolean,
39
40
  invisible?: boolean,
40
41
  children?: React.ReactNode;
42
+ dataType?: "string" | "number" | "boolean";
41
43
  };
42
44
 
43
45
  export const Select = forwardRef<HTMLDivElement, SelectProps>(({
44
- inputRef,
45
- open,
46
- name,
47
- fullWidth = false,
48
- id,
49
- onOpenChange,
50
- value,
51
- onChange,
52
- onValueChange,
53
- className,
54
- inputClassName,
55
- placeholder,
56
- renderValue,
57
- label,
58
- size = "large",
59
- error,
60
- disabled,
61
- padding = true,
62
- position = "item-aligned",
63
- endAdornment,
64
- invisible,
65
- children,
66
- ...props
67
- }, ref) => {
46
+ inputRef,
47
+ open,
48
+ name,
49
+ fullWidth = false,
50
+ id,
51
+ onOpenChange,
52
+ value,
53
+ onChange,
54
+ onValueChange,
55
+ className,
56
+ inputClassName,
57
+ viewportClassName,
58
+ placeholder,
59
+ renderValue,
60
+ label,
61
+ size = "large",
62
+ error,
63
+ disabled,
64
+ padding = true,
65
+ position = "item-aligned",
66
+ endAdornment,
67
+ invisible,
68
+ children,
69
+ dataType = "string",
70
+ ...props
71
+ }, ref) => {
68
72
 
69
73
  const [openInternal, setOpenInternal] = useState(open ?? false);
70
74
 
@@ -73,11 +77,14 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
73
77
  }, [open]);
74
78
 
75
79
  const onValueChangeInternal = useCallback((newValue: string) => {
76
- // Convert string value to appropriate type
80
+
77
81
  let typedValue: SelectValue = newValue;
78
- if (newValue === "true") typedValue = true;
79
- else if (newValue === "false") typedValue = false;
80
- else if (!isNaN(Number(newValue)) && newValue.trim() !== '') typedValue = Number(newValue);
82
+ if (dataType === "boolean") {
83
+ if (newValue === "true") typedValue = true;
84
+ else if (newValue === "false") typedValue = false;
85
+ } else if (dataType === "number") {
86
+ if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
87
+ }
81
88
 
82
89
  onValueChange?.(typedValue as any);
83
90
  if (onChange) {
@@ -187,18 +194,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
187
194
  </SelectPrimitive.Value>
188
195
  </div>
189
196
 
190
- {endAdornment && (
191
- <div
192
- className={cls("h-full flex items-center")}
193
- onClick={(e) => {
194
- e.preventDefault();
195
- e.stopPropagation();
196
- }}>
197
- {endAdornment}
198
- </div>
199
- )}
200
197
  <SelectPrimitive.Icon asChild>
201
- <KeyboardArrowDownIcon size={"medium"}
198
+ <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
202
199
  className={cls("transition", open ? "rotate-180" : "", {
203
200
  "px-2": size === "large",
204
201
  "px-1": size === "medium" || size === "small",
@@ -207,11 +204,21 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
207
204
  </div>
208
205
  </SelectPrimitive.Trigger>
209
206
 
207
+ {endAdornment && (
208
+ <div
209
+ className={cls("h-full flex items-center absolute right-0 pr-12",)}
210
+ onClick={(e) => {
211
+ e.preventDefault();
212
+ e.stopPropagation();
213
+ }}>
214
+ {endAdornment}
215
+ </div>
216
+ )}
210
217
  </div>
211
218
  <SelectPrimitive.Portal>
212
219
  <SelectPrimitive.Content position={position}
213
220
  className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin)}>
214
- <SelectPrimitive.Viewport className={"p-1"}
221
+ <SelectPrimitive.Viewport className={cls("p-1", viewportClassName)}
215
222
  style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
216
223
  {children}
217
224
  </SelectPrimitive.Viewport>
package/src/icons/Icon.tsx CHANGED
@@ -54,11 +54,11 @@ export const Icon = React.forwardRef<HTMLSpanElement, IconProps & { iconKey: str
54
54
  ref={ref} // Attach the ref to the span
55
55
  style={{
56
56
  fontSize: `${sizeInPx}px`,
57
+ verticalAlign: "middle",
57
58
  ...style
58
59
  }}
59
60
  className={
60
61
  cls("material-icons",
61
- "block",
62
62
  color ? colorClassesMapping[color] : "",
63
63
  "select-none",
64
64
  className)}
package/src/index.css CHANGED
@@ -71,3 +71,4 @@
71
71
  a {
72
72
  @apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
73
73
  }
74
+
package/src/material-icons.woff2 ADDED
Binary file
package/src/styles.ts CHANGED
@@ -7,6 +7,6 @@ export const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 d
7
7
  export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
8
8
  export const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
9
9
  export const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
10
- export const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40 m-1 -p-1";
11
- export const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
10
+ export const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40";
11
+ export const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer";
12
12
  export const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
package/tailwind.config.js CHANGED
@@ -44,8 +44,8 @@ export default {
44
44
  "disabled-dark": "rgb(35 35 37)"
45
45
  },
46
46
  "text": {
47
- "primary": "rgba(0, 0, 0, 0.87)",
48
- "secondary": "rgba(0, 0, 0, 0.52)",
47
+ "primary": "rgba(0, 0, 0, 0.89)",
48
+ "secondary": "rgba(0, 0, 0, 0.65)",
49
49
  "disabled": "rgba(0, 0, 0, 0.38)",
50
50
  "primary-dark": "#ffffff",
51
51
  "secondary-dark": "rgba(255, 255, 255, 0.60)",