@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/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-800 dark:bg-opacity-60 transition duration-150 ease-in-out";
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-90";
8
- export declare const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
9
- export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-90 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 border border-transparent";
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.30",
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": "ef347a3a787e808176cd79e2ac7568faca37148b",
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 | null) => void;
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: "small" | "medium";
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(null);
63
+ onChange(undefined);
64
64
  }
65
65
 
66
66
  return (
@@ -77,7 +77,8 @@ export function ExpandablePanel({
77
77
  <Collapsible.Root
78
78
  className={cn(
79
79
  !invisible && defaultBorderMixin + " border",
80
- "rounded-md"
80
+ "rounded-md",
81
+ "w-full"
81
82
  )}
82
83
  open={open}
83
84
  onOpenChange={(updatedOpen: boolean) => {
@@ -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
- <label
31
+ <Label
31
32
  data-shrink={shrink}
32
33
  ref={ref}
33
34
  className={computedClassName}
@@ -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={cn(focusedMixin,
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
- import { CircleIcon } from "../icons";
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
- React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
9
- >(({ className, ...props }, ref) => {
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
- React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
23
- >(({ className, ...props }, ref) => {
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-800 dark:bg-opacity-60 transition duration-150 ease-in-out";
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-90";
8
- export const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
9
- export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-90 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 border border-transparent";
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";
@@ -28,6 +28,7 @@ export default {
28
28
  "sans-serif"
29
29
  ],
30
30
  mono: [
31
+ "SFMono-Regular",
31
32
  "IBM Plex Mono",
32
33
  "Space Mono",
33
34
  "Lucida Console",