@firecms/ui 3.0.0-canary.37 → 3.0.0-canary.39
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/Checkbox.d.ts +2 -1
- package/dist/icons/Icon.d.ts +2 -2
- package/dist/index.es.js +442 -438
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +8 -8
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.d.ts +1 -1
- package/package.json +2 -2
- package/src/components/Checkbox.tsx +3 -1
- package/src/components/Select.tsx +1 -1
- package/src/icons/Icon.tsx +43 -40
- package/src/styles.ts +1 -1
- package/tailwind.config.js +2 -3
package/dist/styles.d.ts
CHANGED
|
@@ -7,6 +7,6 @@ export declare const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity
|
|
|
7
7
|
export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-60";
|
|
8
8
|
export declare const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
|
|
9
9
|
export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
|
|
10
|
-
export declare const cardMixin = "bg-white rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 transition duration-200 ease-in-out m-1 -p-1
|
|
10
|
+
export declare const cardMixin = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 transition duration-200 ease-in-out m-1 -p-1";
|
|
11
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";
|
|
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-canary.
|
|
4
|
+
"version": "3.0.0-canary.39",
|
|
5
5
|
"description": "Awesome Firebase/Firestore-based headless open-source CMS",
|
|
6
6
|
"funding": {
|
|
7
7
|
"url": "https://github.com/sponsors/firecmsco"
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
"src",
|
|
115
115
|
"tailwind.config.js"
|
|
116
116
|
],
|
|
117
|
-
"gitHead": "
|
|
117
|
+
"gitHead": "8ed816e32d8f66d2bf0dffcbfceb569b48a3cc0d",
|
|
118
118
|
"publishConfig": {
|
|
119
119
|
"access": "public"
|
|
120
120
|
}
|
|
@@ -6,6 +6,7 @@ import { cn } from "../util";
|
|
|
6
6
|
|
|
7
7
|
export interface CheckboxProps {
|
|
8
8
|
checked: boolean;
|
|
9
|
+
id?: string;
|
|
9
10
|
disabled?: boolean;
|
|
10
11
|
indeterminate?: boolean;
|
|
11
12
|
onCheckedChange?: (checked: boolean) => void;
|
|
@@ -40,6 +41,7 @@ const colorClasses = {
|
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
export const Checkbox = ({
|
|
44
|
+
id,
|
|
43
45
|
checked,
|
|
44
46
|
indeterminate = false,
|
|
45
47
|
padding = true,
|
|
@@ -60,7 +62,7 @@ export const Checkbox = ({
|
|
|
60
62
|
: 24;
|
|
61
63
|
return (
|
|
62
64
|
<CheckboxPrimitive.Root
|
|
63
|
-
|
|
65
|
+
id={id}
|
|
64
66
|
checked={indeterminate || isChecked}
|
|
65
67
|
disabled={disabled}
|
|
66
68
|
onCheckedChange={disabled ? undefined : onCheckedChange}>
|
|
@@ -142,7 +142,7 @@ export function Select({
|
|
|
142
142
|
"overflow-visible",
|
|
143
143
|
size === "small" ? "h-[42px]" : "h-[64px]"
|
|
144
144
|
)}>
|
|
145
|
-
<SelectPrimitive.Value >
|
|
145
|
+
<SelectPrimitive.Value placeholder={placeholder}>
|
|
146
146
|
{renderValue &&
|
|
147
147
|
(value && Array.isArray(value)
|
|
148
148
|
? value.map((v, i) => (
|
package/src/icons/Icon.tsx
CHANGED
|
@@ -8,7 +8,7 @@ export type IconProps = {
|
|
|
8
8
|
color?: IconColor,
|
|
9
9
|
className?: string,
|
|
10
10
|
onClick?: (e: React.SyntheticEvent) => void,
|
|
11
|
-
style?: React.CSSProperties
|
|
11
|
+
style?: React.CSSProperties,
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
const colorClassesMapping: Record<IconColor, string> = {
|
|
@@ -21,43 +21,46 @@ const colorClassesMapping: Record<IconColor, string> = {
|
|
|
21
21
|
error: "text-red-500"
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
export
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
24
|
+
export const Icon = React.forwardRef<HTMLSpanElement, IconProps & { iconKey: string }>(
|
|
25
|
+
({
|
|
26
|
+
iconKey,
|
|
27
|
+
size = "medium",
|
|
28
|
+
color,
|
|
29
|
+
className,
|
|
30
|
+
onClick,
|
|
31
|
+
style
|
|
32
|
+
}, ref) => {
|
|
33
|
+
let sizeInPx: number;
|
|
34
|
+
switch (size) {
|
|
35
|
+
case "smallest":
|
|
36
|
+
sizeInPx = 16;
|
|
37
|
+
break;
|
|
38
|
+
case "small":
|
|
39
|
+
sizeInPx = 20;
|
|
40
|
+
break;
|
|
41
|
+
case "medium":
|
|
42
|
+
sizeInPx = 24;
|
|
43
|
+
break;
|
|
44
|
+
case "large":
|
|
45
|
+
sizeInPx = 28;
|
|
46
|
+
break
|
|
47
|
+
default:
|
|
48
|
+
sizeInPx = typeof size === "number" ? size : 24;
|
|
49
|
+
}
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
51
|
+
return <span
|
|
52
|
+
ref={ref} // Attach the ref to the span
|
|
53
|
+
style={{
|
|
54
|
+
fontSize: `${sizeInPx}px`,
|
|
55
|
+
display: "block",
|
|
56
|
+
...style
|
|
57
|
+
}}
|
|
58
|
+
className={
|
|
59
|
+
cn("material-icons",
|
|
60
|
+
color ? colorClassesMapping[color] : "",
|
|
61
|
+
"select-none",
|
|
62
|
+
className)}
|
|
63
|
+
onClick={onClick}>{iconKey}</span>
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
Icon.displayName = "Icon";
|
package/src/styles.ts
CHANGED
|
@@ -7,6 +7,6 @@ export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-80 dark
|
|
|
7
7
|
export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-60";
|
|
8
8
|
export const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
|
|
9
9
|
export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
|
|
10
|
-
export const cardMixin = "bg-white rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 transition duration-200 ease-in-out m-1 -p-1
|
|
10
|
+
export const cardMixin = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 transition duration-200 ease-in-out m-1 -p-1";
|
|
11
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";
|
|
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
|
@@ -4,8 +4,7 @@ export default {
|
|
|
4
4
|
content: [
|
|
5
5
|
"./index.html",
|
|
6
6
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
7
|
-
"./node_modules
|
|
8
|
-
"./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}"
|
|
7
|
+
"./node_modules/@firecms/**/*.{js,ts,jsx,tsx}"
|
|
9
8
|
],
|
|
10
9
|
plugins: [
|
|
11
10
|
require("@tailwindcss/typography")
|
|
@@ -28,7 +27,7 @@ export default {
|
|
|
28
27
|
"sans-serif"
|
|
29
28
|
],
|
|
30
29
|
mono: [
|
|
31
|
-
"
|
|
30
|
+
"JetBrains Mono",
|
|
32
31
|
"Space Mono",
|
|
33
32
|
"Lucida Console",
|
|
34
33
|
"monospace"
|