@firecms/ui 3.0.0-canary.30 → 3.0.0-canary.31
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/README.md +1 -1
- package/dist/components/DateTimeField.d.ts +2 -2
- package/dist/components/Menu.d.ts +2 -1
- package/dist/components/RadioGroup.d.ts +25 -3
- package/dist/index.es.js +139 -129
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +6 -6
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.d.ts +6 -6
- package/package.json +2 -2
- package/src/components/DateTimeField.tsx +4 -4
- package/src/components/ExpandablePanel.tsx +2 -1
- package/src/components/IconButton.tsx +1 -1
- package/src/components/InputLabel.tsx +2 -1
- package/src/components/Menu.tsx +11 -5
- package/src/components/RadioGroup.tsx +37 -6
- package/src/styles.ts +6 -6
- package/tailwind.config.js +1 -0
package/dist/styles.d.ts
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
export declare const focusedMixin = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
|
2
2
|
export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
|
3
3
|
export declare const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
|
4
|
-
export declare const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-
|
4
|
+
export declare const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-700 dark:bg-opacity-40 transition duration-150 ease-in-out";
|
5
5
|
export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-150 ease-in-out";
|
6
|
-
export declare const fieldBackgroundDisabledMixin = "bg-opacity-80 dark:bg-opacity-90";
|
7
|
-
export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-
|
8
|
-
export declare const defaultBorderMixin = "border-gray-100 dark:border-gray-
|
9
|
-
export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-
|
10
|
-
export declare const cardMixin = "bg-white rounded-md dark:bg-gray-950 dark:border-gray-
|
6
|
+
export declare const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-90";
|
7
|
+
export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-60";
|
8
|
+
export declare const defaultBorderMixin = "border-gray-100 dark:border-gray-900 dark:border-opacity-60";
|
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 border-gray-100 dark:border-gray-900 dark:border-opacity-60 transition duration-200 ease-in-out m-1 -p-1 border ";
|
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.31",
|
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": "e0160839147a52060b659fcd778418de07883312",
|
118
118
|
"publishConfig": {
|
119
119
|
"access": "public"
|
120
120
|
}
|
@@ -17,12 +17,12 @@ import { Typography } from "./Typography";
|
|
17
17
|
|
18
18
|
interface DateTimeFieldProps {
|
19
19
|
value?: Date;
|
20
|
-
onChange: (date: Date |
|
20
|
+
onChange: (date: Date | undefined) => void;
|
21
21
|
mode?: "date" | "date_time";
|
22
22
|
disabled?: boolean;
|
23
23
|
clearable?: boolean;
|
24
24
|
error?: boolean;
|
25
|
-
size
|
25
|
+
size?: "small" | "medium";
|
26
26
|
label?: React.ReactNode;
|
27
27
|
className?: string;
|
28
28
|
style?: React.CSSProperties;
|
@@ -40,7 +40,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
|
|
40
40
|
clearable,
|
41
41
|
mode = "date",
|
42
42
|
error,
|
43
|
-
size,
|
43
|
+
size = "medium",
|
44
44
|
className,
|
45
45
|
style,
|
46
46
|
inputClassName,
|
@@ -60,7 +60,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
|
|
60
60
|
|
61
61
|
const handleClear = (e: React.MouseEvent) => {
|
62
62
|
e.preventDefault();
|
63
|
-
onChange(
|
63
|
+
onChange(undefined);
|
64
64
|
}
|
65
65
|
|
66
66
|
return (
|
@@ -42,7 +42,7 @@ const IconButtonInner = <C extends React.ElementType = "button">({
|
|
42
42
|
...props
|
43
43
|
}: IconButtonProps<C>, ref: React.ForwardedRef<HTMLButtonElement>) => {
|
44
44
|
|
45
|
-
const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-slate-50 dark:bg-gray-950 dark:bg-opacity-50";
|
45
|
+
const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-slate-200 bg-opacity-50 dark:bg-gray-950 dark:bg-opacity-50";
|
46
46
|
const Component: React.ElementType<any> = component || "button";
|
47
47
|
return (
|
48
48
|
<Component
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import * as React from "react";
|
2
2
|
import { cn } from "../util";
|
3
|
+
import { Label } from "./Label";
|
3
4
|
|
4
5
|
export type InputLabelProps = {
|
5
6
|
children?: React.ReactNode;
|
@@ -27,7 +28,7 @@ export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(fu
|
|
27
28
|
}, className);
|
28
29
|
|
29
30
|
return (
|
30
|
-
<
|
31
|
+
<Label
|
31
32
|
data-shrink={shrink}
|
32
33
|
ref={ref}
|
33
34
|
className={computedClassName}
|
package/src/components/Menu.tsx
CHANGED
@@ -43,18 +43,24 @@ export type MenuItemProps = {
|
|
43
43
|
children: React.ReactNode;
|
44
44
|
dense?: boolean;
|
45
45
|
onClick?: (event: React.MouseEvent) => void;
|
46
|
-
}
|
46
|
+
};
|
47
47
|
|
48
48
|
export function MenuItem({
|
49
49
|
children,
|
50
|
-
dense,
|
50
|
+
dense = false, // Default value is false if not provided
|
51
51
|
onClick
|
52
52
|
}: MenuItemProps) {
|
53
|
+
// Dynamically adjusting the class based on the "dense" prop
|
54
|
+
const classNames = cn(
|
55
|
+
focusedMixin,
|
56
|
+
onClick && "cursor-pointer",
|
57
|
+
"rounded-md text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 flex items-center gap-4",
|
58
|
+
dense ? "px-3 py-1.5" : "px-4 py-2"
|
59
|
+
);
|
60
|
+
|
53
61
|
return (
|
54
62
|
<DropdownMenu.Item
|
55
|
-
className={
|
56
|
-
onClick && "cursor-pointer",
|
57
|
-
"rounded-md px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-900 flex items-center gap-4")}
|
63
|
+
className={classNames}
|
58
64
|
onClick={onClick}>
|
59
65
|
{children}
|
60
66
|
</DropdownMenu.Item>
|
@@ -1,12 +1,33 @@
|
|
1
1
|
import * as React from "react"
|
2
2
|
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
|
3
3
|
import { cn } from "../util";
|
4
|
-
|
4
|
+
|
5
|
+
export interface RadioGroupProps {
|
6
|
+
id?: string;
|
7
|
+
children: React.ReactNode;
|
8
|
+
name?: string
|
9
|
+
required?: boolean;
|
10
|
+
disabled?: boolean;
|
11
|
+
/**
|
12
|
+
* Whether keyboard navigation should loop around
|
13
|
+
* @defaultValue false
|
14
|
+
*/
|
15
|
+
loop?: boolean;
|
16
|
+
defaultValue?: string;
|
17
|
+
value?: string;
|
18
|
+
|
19
|
+
onValueChange?(value: string): void;
|
20
|
+
|
21
|
+
className?: string;
|
22
|
+
}
|
5
23
|
|
6
24
|
const RadioGroup = React.forwardRef<
|
7
25
|
React.ElementRef<typeof RadioGroupPrimitive.Root>,
|
8
|
-
|
9
|
-
>(({
|
26
|
+
RadioGroupProps
|
27
|
+
>(({
|
28
|
+
className,
|
29
|
+
...props
|
30
|
+
}, ref) => {
|
10
31
|
return (
|
11
32
|
<RadioGroupPrimitive.Root
|
12
33
|
className={cn("grid gap-2", className)}
|
@@ -17,10 +38,20 @@ const RadioGroup = React.forwardRef<
|
|
17
38
|
})
|
18
39
|
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
|
19
40
|
|
41
|
+
export interface RadioGroupItemProps {
|
42
|
+
id?: string;
|
43
|
+
value: string;
|
44
|
+
checked?: boolean;
|
45
|
+
required?: boolean;
|
46
|
+
className?: string;
|
47
|
+
}
|
20
48
|
const RadioGroupItem = React.forwardRef<
|
21
49
|
React.ElementRef<typeof RadioGroupPrimitive.Item>,
|
22
|
-
|
23
|
-
>(({
|
50
|
+
RadioGroupItemProps
|
51
|
+
>(({
|
52
|
+
className,
|
53
|
+
...props
|
54
|
+
}, ref) => {
|
24
55
|
return (
|
25
56
|
<RadioGroupPrimitive.Item
|
26
57
|
ref={ref}
|
@@ -31,7 +62,7 @@ const RadioGroupItem = React.forwardRef<
|
|
31
62
|
{...props}
|
32
63
|
>
|
33
64
|
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
|
34
|
-
<div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg"
|
65
|
+
<div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg"/>
|
35
66
|
</RadioGroupPrimitive.Indicator>
|
36
67
|
</RadioGroupPrimitive.Item>
|
37
68
|
)
|
package/src/styles.ts
CHANGED
@@ -1,12 +1,12 @@
|
|
1
1
|
export const focusedMixin = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
|
2
2
|
export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
|
3
3
|
export const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
|
4
|
-
export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-
|
4
|
+
export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-700 dark:bg-opacity-40 transition duration-150 ease-in-out";
|
5
5
|
export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-150 ease-in-out";
|
6
|
-
export const fieldBackgroundDisabledMixin = "bg-opacity-80 dark:bg-opacity-90";
|
7
|
-
export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-
|
8
|
-
export const defaultBorderMixin = "border-gray-100 dark:border-gray-
|
9
|
-
export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-
|
10
|
-
export const cardMixin = "bg-white rounded-md dark:bg-gray-950 dark:border-gray-
|
6
|
+
export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-90";
|
7
|
+
export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-60";
|
8
|
+
export const defaultBorderMixin = "border-gray-100 dark:border-gray-900 dark:border-opacity-60";
|
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 border-gray-100 dark:border-gray-900 dark:border-opacity-60 transition duration-200 ease-in-out m-1 -p-1 border ";
|
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";
|