@firecms/ui 3.0.0-canary.5 → 3.0.0-canary.51

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 (72) hide show
  1. package/README.md +2 -2
  2. package/dist/components/Avatar.d.ts +1 -0
  3. package/dist/components/Button.d.ts +1 -1
  4. package/dist/components/Card.d.ts +4 -2
  5. package/dist/components/CenteredView.d.ts +5 -2
  6. package/dist/components/Checkbox.d.ts +5 -4
  7. package/dist/components/Chip.d.ts +1 -1
  8. package/dist/components/DateTimeField.d.ts +2 -2
  9. package/dist/components/Dialog.d.ts +2 -1
  10. package/dist/components/Label.d.ts +7 -0
  11. package/dist/components/Markdown.d.ts +1 -0
  12. package/dist/components/Menu.d.ts +2 -1
  13. package/dist/components/RadioGroup.d.ts +27 -0
  14. package/dist/components/TextField.d.ts +1 -1
  15. package/dist/components/TextareaAutosize.d.ts +4 -2
  16. package/dist/components/Tooltip.d.ts +2 -1
  17. package/dist/components/index.d.ts +2 -0
  18. package/dist/hooks/index.d.ts +4 -0
  19. package/dist/hooks/useLocaleConfig.d.ts +1 -0
  20. package/dist/icons/Icon.d.ts +2 -2
  21. package/dist/index.d.ts +1 -0
  22. package/dist/index.es.js +7735 -7619
  23. package/dist/index.es.js.map +1 -1
  24. package/dist/index.umd.js +10 -10
  25. package/dist/index.umd.js.map +1 -1
  26. package/dist/styles.d.ts +6 -6
  27. package/dist/util/index.d.ts +0 -2
  28. package/package.json +29 -23
  29. package/src/components/Alert.tsx +2 -2
  30. package/src/components/Autocomplete.tsx +2 -1
  31. package/src/components/Avatar.tsx +3 -0
  32. package/src/components/BooleanSwitch.tsx +2 -2
  33. package/src/components/Button.tsx +11 -19
  34. package/src/components/Card.tsx +16 -10
  35. package/src/components/CenteredView.tsx +25 -13
  36. package/src/components/Checkbox.tsx +34 -23
  37. package/src/components/Chip.tsx +3 -3
  38. package/src/components/Collapse.tsx +2 -1
  39. package/src/components/DateTimeField.tsx +6 -5
  40. package/src/components/Dialog.tsx +4 -1
  41. package/src/components/ExpandablePanel.tsx +5 -3
  42. package/src/components/FileUpload.tsx +1 -1
  43. package/src/components/IconButton.tsx +2 -2
  44. package/src/components/InputLabel.tsx +8 -7
  45. package/src/components/Label.tsx +29 -0
  46. package/src/components/Markdown.tsx +14 -3
  47. package/src/components/Menu.tsx +11 -5
  48. package/src/components/MultiSelect.tsx +2 -1
  49. package/src/components/Popover.tsx +2 -1
  50. package/src/components/RadioGroup.tsx +72 -0
  51. package/src/components/SearchBar.tsx +1 -1
  52. package/src/components/Select.tsx +21 -21
  53. package/src/components/Table.tsx +1 -1
  54. package/src/components/Tabs.tsx +2 -2
  55. package/src/components/TextField.tsx +4 -3
  56. package/src/components/TextareaAutosize.tsx +1 -1
  57. package/src/components/Tooltip.tsx +5 -1
  58. package/src/components/Typography.tsx +18 -1
  59. package/src/components/index.tsx +2 -0
  60. package/src/hooks/index.ts +4 -0
  61. package/src/hooks/useLocaleConfig.tsx +18 -0
  62. package/src/icons/Icon.tsx +43 -40
  63. package/src/index.ts +1 -0
  64. package/src/styles.ts +6 -6
  65. package/src/util/index.ts +0 -2
  66. package/tailwind.config.js +70 -0
  67. /package/dist/{util → hooks}/useDebounceValue.d.ts +0 -0
  68. /package/dist/{util → hooks}/useInjectStyles.d.ts +0 -0
  69. /package/dist/{util → hooks}/useOutsideAlerter.d.ts +0 -0
  70. /package/src/{util → hooks}/useDebounceValue.tsx +0 -0
  71. /package/src/{util → hooks}/useInjectStyles.tsx +0 -0
  72. /package/src/{util → hooks}/useOutsideAlerter.tsx +0 -0
package/README.md CHANGED
@@ -49,7 +49,7 @@ FireCMS is based on this great technologies:
49
49
  The easiest way to get going is to check our quickstart guide! You will just
50
50
  need to follow some quick steps:
51
51
 
52
- https://firecms.co/docs/quickstart
52
+ https://firecms.co/docs
53
53
 
54
54
  ### Demo
55
55
 
@@ -82,7 +82,7 @@ data.
82
82
 
83
83
  ### ✨ Robust Forms
84
84
 
85
- ![fields](https://firecms.co/img/post_editing.webp)
85
+ ![fields](https://firecms.co/img/form_editing.webp)
86
86
 
87
87
  When editing an entity, FireCMS offers a nested system of side dialogs for
88
88
  navigating through **subcollections** and accessing custom views (such as custom
@@ -4,6 +4,7 @@ export interface AvatarProps {
4
4
  alt?: string;
5
5
  children?: React.ReactNode;
6
6
  className?: string;
7
+ outerClassName?: string;
7
8
  style?: React.CSSProperties;
8
9
  }
9
10
  export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLButtonElement>>;
@@ -3,7 +3,7 @@ export type ButtonProps<P extends React.ElementType> = Omit<(P extends "button"
3
3
  variant?: "filled" | "outlined" | "text";
4
4
  disabled?: boolean;
5
5
  color?: "primary" | "secondary" | "text" | "error";
6
- size?: "small" | "medium" | "large";
6
+ size?: "small" | "medium" | "large" | "xl" | "2xl";
7
7
  startIcon?: React.ReactNode;
8
8
  fullWidth?: boolean;
9
9
  className?: string;
@@ -1,7 +1,9 @@
1
1
  import React from "react";
2
- export declare function Card({ children, style, onClick, className }: {
2
+ type CardProps = {
3
3
  children: React.ReactNode;
4
4
  style?: React.CSSProperties;
5
5
  onClick?: () => void;
6
6
  className?: string;
7
- }): import("react/jsx-runtime").JSX.Element;
7
+ };
8
+ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
9
+ export { Card };
@@ -1,6 +1,9 @@
1
1
  import React from "react";
2
- export declare function CenteredView({ children, maxWidth, className }: {
2
+ export type CenteredViewProps = {
3
3
  children: React.ReactNode;
4
4
  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
5
+ outerClassName?: string;
5
6
  className?: string;
6
- }): import("react/jsx-runtime").JSX.Element;
7
+ fullScreen?: boolean;
8
+ };
9
+ export declare const CenteredView: React.ForwardRefExoticComponent<CenteredViewProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,10 +1,11 @@
1
- interface CheckboxProps {
1
+ export interface CheckboxProps {
2
2
  checked: boolean;
3
+ id?: string;
3
4
  disabled?: boolean;
4
5
  indeterminate?: boolean;
5
6
  onCheckedChange?: (checked: boolean) => void;
6
- size?: "small" | "medium" | "large";
7
+ padding?: boolean;
8
+ size?: "tiny" | "small" | "medium" | "large";
7
9
  color?: "primary" | "secondary";
8
10
  }
9
- export declare const Checkbox: ({ checked, indeterminate, disabled, size, onCheckedChange, color }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
10
- export {};
11
+ export declare const Checkbox: ({ id, checked, indeterminate, padding, disabled, size, onCheckedChange, color }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
@@ -8,7 +8,7 @@ export type ChipColorKey = keyof typeof CHIP_COLORS;
8
8
  export interface ChipProps {
9
9
  className?: string;
10
10
  children: React.ReactNode;
11
- size?: "smaller" | "small" | "medium";
11
+ size?: "tiny" | "small" | "medium";
12
12
  colorScheme?: ChipColorScheme | ChipColorKey;
13
13
  error?: boolean;
14
14
  outlined?: boolean;
@@ -1,12 +1,12 @@
1
1
  import React from "react";
2
2
  interface DateTimeFieldProps {
3
3
  value?: Date;
4
- onChange: (date: Date | null) => void;
4
+ onChange: (date: Date | undefined) => void;
5
5
  mode?: "date" | "date_time";
6
6
  disabled?: boolean;
7
7
  clearable?: boolean;
8
8
  error?: boolean;
9
- size: "small" | "medium";
9
+ size?: "small" | "medium";
10
10
  label?: React.ReactNode;
11
11
  className?: string;
12
12
  style?: React.CSSProperties;
@@ -10,6 +10,7 @@ export type DialogProps = {
10
10
  scrollable?: boolean;
11
11
  maxWidth?: keyof typeof widthClasses;
12
12
  modal?: boolean;
13
+ onOpenAutoFocus?: (e: Event) => void;
13
14
  };
14
15
  declare const widthClasses: {
15
16
  xs: string;
@@ -25,5 +26,5 @@ declare const widthClasses: {
25
26
  "7xl": string;
26
27
  full: string;
27
28
  };
28
- export declare const Dialog: ({ open, onOpenChange, children, className, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal }: DialogProps) => import("react/jsx-runtime").JSX.Element;
29
+ export declare const Dialog: ({ open, onOpenChange, children, className, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus }: DialogProps) => import("react/jsx-runtime").JSX.Element;
29
30
  export {};
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ import * as LabelPrimitive from "@radix-ui/react-label";
3
+ declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & {
4
+ border?: boolean | undefined;
5
+ onClick?: React.MouseEventHandler<HTMLLabelElement> | undefined;
6
+ } & React.RefAttributes<HTMLLabelElement>>;
7
+ export { Label };
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  export interface MarkdownProps {
3
3
  source: string;
4
+ size?: "small" | "medium" | "large" | "xl" | "2xl";
4
5
  className?: string;
5
6
  }
6
7
  /**
@@ -13,4 +13,5 @@ export type MenuItemProps = {
13
13
  dense?: boolean;
14
14
  onClick?: (event: React.MouseEvent) => void;
15
15
  };
16
- export declare function MenuItem({ children, dense, onClick }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
16
+ export declare function MenuItem({ children, dense, // Default value is false if not provided
17
+ onClick }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,27 @@
1
+ import * as React from "react";
2
+ export interface RadioGroupProps {
3
+ id?: string;
4
+ children: React.ReactNode;
5
+ name?: string;
6
+ required?: boolean;
7
+ disabled?: boolean;
8
+ /**
9
+ * Whether keyboard navigation should loop around
10
+ * @defaultValue false
11
+ */
12
+ loop?: boolean;
13
+ defaultValue?: string;
14
+ value?: string;
15
+ onValueChange?(value: string): void;
16
+ className?: string;
17
+ }
18
+ declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
19
+ export interface RadioGroupItemProps {
20
+ id?: string;
21
+ value: string;
22
+ checked?: boolean;
23
+ required?: boolean;
24
+ className?: string;
25
+ }
26
+ declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
27
+ export { RadioGroup, RadioGroupItem };
@@ -13,7 +13,7 @@ export type TextFieldProps<T extends string | number> = {
13
13
  endAdornment?: React.ReactNode;
14
14
  autoFocus?: boolean;
15
15
  placeholder?: string;
16
- size?: "small" | "medium";
16
+ size?: "smallest" | "small" | "medium";
17
17
  className?: string;
18
18
  style?: React.CSSProperties;
19
19
  inputClassName?: string;
@@ -3,7 +3,7 @@ type State = {
3
3
  outerHeightStyle: number;
4
4
  overflow?: boolean | undefined;
5
5
  };
6
- export declare const TextareaAutosize: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "onResize"> & {
6
+ export declare const TextareaAutosize: React.FC<Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "onResize"> & {
7
7
  className?: string | undefined;
8
8
  shadowClassName?: string | undefined;
9
9
  /**
@@ -36,7 +36,9 @@ export declare const TextareaAutosize: React.ForwardRefExoticComponent<Omit<Reac
36
36
  onResize?: ((state: State) => void) | undefined;
37
37
  autoFocus?: boolean | undefined;
38
38
  ignoreBoxSizing?: boolean | undefined;
39
- } & React.RefAttributes<Element>>;
39
+ } & {
40
+ ref?: React.ForwardedRef<Element> | undefined;
41
+ }>;
40
42
  export type TextareaAutosizeProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "onResize"> & {
41
43
  className?: string;
42
44
  shadowClassName?: string;
@@ -3,6 +3,7 @@ export type TooltipProps = {
3
3
  open?: boolean;
4
4
  onOpenChange?: (open: boolean) => void;
5
5
  side?: "top" | "bottom" | "left" | "right";
6
+ align?: "start" | "center" | "end";
6
7
  sideOffset?: number;
7
8
  title?: string | React.ReactNode;
8
9
  delayDuration?: number;
@@ -11,4 +12,4 @@ export type TooltipProps = {
11
12
  children: React.ReactNode;
12
13
  style?: React.CSSProperties;
13
14
  };
14
- export declare const Tooltip: ({ open, side, delayDuration, sideOffset, onOpenChange, title, className, style, tooltipClassName, children }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
15
+ export declare const Tooltip: ({ open, side, delayDuration, sideOffset, align, onOpenChange, title, className, style, tooltipClassName, children }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
@@ -20,11 +20,13 @@ export * from "./FileUpload";
20
20
  export * from "./IconButton";
21
21
  export * from "./InputLabel";
22
22
  export * from "./InfoLabel";
23
+ export * from "./Label";
23
24
  export * from "./LoadingButton";
24
25
  export * from "./Markdown";
25
26
  export * from "./Menu";
26
27
  export * from "./MultiSelect";
27
28
  export * from "./Paper";
29
+ export * from "./RadioGroup";
28
30
  export * from "./SearchBar";
29
31
  export * from "./Select";
30
32
  export * from "./Separator";
@@ -0,0 +1,4 @@
1
+ export * from "./useLocaleConfig";
2
+ export * from "./useInjectStyles";
3
+ export * from "./useOutsideAlerter";
4
+ export * from "./useDebounceValue";
@@ -0,0 +1 @@
1
+ export declare function useLocaleConfig(locale?: string): void;
@@ -8,6 +8,6 @@ export type IconProps = {
8
8
  onClick?: (e: React.SyntheticEvent) => void;
9
9
  style?: React.CSSProperties;
10
10
  };
11
- export declare function Icon({ iconKey, size, color, className, onClick, style }: IconProps & {
11
+ export declare const Icon: React.ForwardRefExoticComponent<IconProps & {
12
12
  iconKey: string;
13
- }): import("react/jsx-runtime").JSX.Element;
13
+ } & React.RefAttributes<HTMLSpanElement>>;
package/dist/index.d.ts CHANGED
@@ -2,3 +2,4 @@ export * from "./components";
2
2
  export * from "./styles";
3
3
  export * from "./util";
4
4
  export * from "./icons";
5
+ export * from "./hooks";