@firecms/ui 3.0.0-canary.107 → 3.0.0-canary.109

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.
@@ -7,7 +7,8 @@ export type MenuProps = {
7
7
  onOpenChange?(open: boolean): void;
8
8
  portalContainer?: HTMLElement | null;
9
9
  };
10
- export declare function Menu({ children, trigger, open, defaultOpen, onOpenChange, portalContainer }: MenuProps): import("react/jsx-runtime").JSX.Element;
10
+ declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLButtonElement>>;
11
+ export { Menu };
11
12
  export type MenuItemProps = {
12
13
  children: React.ReactNode;
13
14
  dense?: boolean;
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, { ChangeEvent } from "react";
2
2
  export type SelectProps = {
3
3
  open?: boolean;
4
4
  name?: string;
@@ -7,7 +7,7 @@ export type SelectProps = {
7
7
  value?: string | string[];
8
8
  className?: string;
9
9
  inputClassName?: string;
10
- onChange?: React.EventHandler<React.ChangeEvent<HTMLSelectElement>>;
10
+ onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
11
11
  onValueChange?: (updatedValue: string) => void;
12
12
  onMultiValueChange?: (updatedValue: string[]) => void;
13
13
  placeholder?: React.ReactNode;
@@ -26,7 +26,7 @@ export type SelectProps = {
26
26
  invisible?: boolean;
27
27
  children?: React.ReactNode;
28
28
  };
29
- export declare function Select({ inputRef, open, name, id, onOpenChange, value, onChange, onValueChange, onMultiValueChange, className, inputClassName, placeholder, renderValue, renderValues, label, size, includeFocusOutline, error, disabled, padding, position, endAdornment, multiple, invisible, children, ...props }: SelectProps): import("react/jsx-runtime").JSX.Element;
29
+ export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
30
30
  export type SelectItemProps = {
31
31
  value: string;
32
32
  children?: React.ReactNode;
@@ -8,10 +8,11 @@ export type TooltipProps = {
8
8
  sideOffset?: number;
9
9
  title?: string | React.ReactNode;
10
10
  delayDuration?: number;
11
- className?: string;
11
+ asChild?: boolean;
12
12
  tooltipClassName?: string;
13
13
  tooltipStyle?: React.CSSProperties;
14
14
  children: React.ReactNode;
15
+ className?: string;
15
16
  style?: React.CSSProperties;
16
17
  };
17
- export declare const Tooltip: ({ open, defaultOpen, side, delayDuration, sideOffset, align, onOpenChange, title, className, style, tooltipClassName, tooltipStyle, children }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
18
+ export declare const Tooltip: ({ open, defaultOpen, side, delayDuration, sideOffset, align, onOpenChange, title, tooltipClassName, tooltipStyle, children, asChild, className, style }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
package/dist/index.css ADDED
@@ -0,0 +1,56 @@
1
+
2
+ @layer utilities {
3
+ /* Chrome, Safari and Opera */
4
+ .no-scrollbar::-webkit-scrollbar {
5
+ display: none;
6
+ }
7
+ .no-scrollbar {
8
+ -ms-overflow-style: none; /* IE and Edge */
9
+ scrollbar-width: none; /* Firefox */
10
+ }
11
+
12
+ .typography-h1 {
13
+ @apply text-6xl font-headers font-light;
14
+ }
15
+ .typography-h2 {
16
+ @apply text-5xl font-headers font-light;
17
+ }
18
+ .typography-h3 {
19
+ @apply text-4xl font-headers font-normal;
20
+ }
21
+ .typography-h4 {
22
+ @apply text-3xl font-headers font-normal;
23
+ }
24
+ .typography-h5 {
25
+ @apply text-2xl font-headers font-normal;
26
+ }
27
+ .typography-h6 {
28
+ @apply text-xl font-headers font-medium;
29
+ }
30
+ .typography-body1 {
31
+ /*@apply text-base;*/
32
+ }
33
+ .typography-body2 {
34
+ @apply text-sm;
35
+ }
36
+ .typography-caption {
37
+ @apply text-xs;
38
+ }
39
+ .typography-label {
40
+ @apply text-sm font-medium;
41
+ }
42
+ .typography-inherit {
43
+ @apply text-inherit;
44
+ }
45
+ .typography-button {
46
+ @apply text-sm font-medium;
47
+ }
48
+ }
49
+
50
+ a {
51
+ @apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
52
+ }
53
+
54
+ body {
55
+ @apply w-full min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col items-center justify-center;
56
+ }
package/dist/index.es.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import * as React from "react";
3
- import React__default, { useEffect, useState, useCallback, useRef, useMemo, useLayoutEffect, useDeferredValue } from "react";
3
+ import React__default, { useEffect, useState, useCallback, useRef, useMemo, forwardRef, useLayoutEffect, useDeferredValue } from "react";
4
4
  import * as Collapsible from "@radix-ui/react-collapsible";
5
5
  import { clsx } from "clsx";
6
6
  import { twMerge } from "tailwind-merge";
@@ -8,9 +8,9 @@ import * as locales from "date-fns/locale";
8
8
  import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
9
9
  import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
10
10
  import "material-icons/iconfont/filled.css";
11
- import * as LabelPrimitive from "@radix-ui/react-label";
12
11
  import * as DialogPrimitive from "@radix-ui/react-dialog";
13
12
  import { useDropzone } from "react-dropzone";
13
+ import * as LabelPrimitive from "@radix-ui/react-label";
14
14
  import equal from "react-fast-compare";
15
15
  import MarkdownIt from "markdown-it";
16
16
  import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
@@ -29,7 +29,7 @@ const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ri
29
29
  const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60";
30
30
  const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
31
31
  const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
32
- const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-60";
32
+ const fieldBackgroundHoverMixin = "hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
33
33
  const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
34
34
  const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
35
35
  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 m-1 -p-1";
@@ -13641,7 +13641,7 @@ function Chip({
13641
13641
  "div",
13642
13642
  {
13643
13643
  className: cls(
13644
- "rounded-lg w-fit h-fit font-regular inline-flex gap-1",
13644
+ "rounded-lg w-max h-fit font-regular inline-flex gap-1",
13645
13645
  "text-ellipsis",
13646
13646
  onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
13647
13647
  sizeClassNames[size],
@@ -13715,27 +13715,6 @@ const IconButtonInner = ({
13715
13715
  );
13716
13716
  };
13717
13717
  const IconButton = React__default.forwardRef(IconButtonInner);
13718
- const Label = React.forwardRef(({
13719
- className,
13720
- border,
13721
- onClick,
13722
- ...props
13723
- }, ref) => /* @__PURE__ */ jsx(
13724
- LabelPrimitive.Root,
13725
- {
13726
- ref,
13727
- onClick,
13728
- className: cls(
13729
- "text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
13730
- border && "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-1.5",
13731
- onClick && "hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800",
13732
- defaultBorderMixin,
13733
- className
13734
- ),
13735
- ...props
13736
- }
13737
- ));
13738
- Label.displayName = LabelPrimitive.Root.displayName;
13739
13718
  const defaultClasses = {
13740
13719
  root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-overflow-ellipsis max-w-full",
13741
13720
  shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
@@ -13756,11 +13735,15 @@ const InputLabel = React.forwardRef(function InputLabel2(inProps, ref) {
13756
13735
  className
13757
13736
  );
13758
13737
  return /* @__PURE__ */ jsx(
13759
- Label,
13738
+ "label",
13760
13739
  {
13740
+ className: cls(
13741
+ "text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
13742
+ defaultBorderMixin,
13743
+ computedClassName
13744
+ ),
13761
13745
  "data-shrink": shrink,
13762
13746
  ref,
13763
- className: computedClassName,
13764
13747
  ...other
13765
13748
  }
13766
13749
  );
@@ -13806,20 +13789,20 @@ const gutterBottomClasses = {
13806
13789
  label: "mb-2"
13807
13790
  };
13808
13791
  const variantToClasses = {
13809
- h1: "text-6xl font-headers font-light",
13810
- h2: "text-5xl font-headers font-light",
13811
- h3: "text-4xl font-headers font-normal",
13812
- h4: "text-3xl font-headers font-normal",
13813
- h5: "text-2xl font-headers font-normal",
13814
- h6: "text-xl font-headers font-medium",
13815
- subtitle1: "text-lg font-headers font-medium",
13816
- subtitle2: "text-base font-headers font-medium",
13817
- body1: "text-base",
13818
- body2: "text-sm",
13819
- label: "text-sm font-medium text-slate-500",
13820
- inherit: "text-inherit",
13821
- caption: "text-xs",
13822
- button: "text-sm font-medium"
13792
+ h1: "typography-h1",
13793
+ h2: "typography-h2",
13794
+ h3: "typography-h3",
13795
+ h4: "typography-h4",
13796
+ h5: "typography-h5",
13797
+ h6: "typography-h6",
13798
+ subtitle1: "typography-subtitle1",
13799
+ subtitle2: "typography-subtitle2",
13800
+ body1: "typography-body1",
13801
+ body2: "typography-body2",
13802
+ label: "typography-label",
13803
+ inherit: "typography-inherit",
13804
+ caption: "typography-caption",
13805
+ button: "typography-button"
13823
13806
  };
13824
13807
  function Typography({
13825
13808
  align = "inherit",
@@ -15139,6 +15122,27 @@ function InfoLabel({
15139
15122
  }
15140
15123
  );
15141
15124
  }
15125
+ const Label = React.forwardRef(({
15126
+ className,
15127
+ border,
15128
+ onClick,
15129
+ ...props
15130
+ }, ref) => /* @__PURE__ */ jsx(
15131
+ LabelPrimitive.Root,
15132
+ {
15133
+ ref,
15134
+ onClick,
15135
+ className: cls(
15136
+ "text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
15137
+ border && "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-1.5",
15138
+ onClick && "hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800",
15139
+ defaultBorderMixin,
15140
+ className
15141
+ ),
15142
+ ...props
15143
+ }
15144
+ ));
15145
+ Label.displayName = LabelPrimitive.Root.displayName;
15142
15146
  function LoadingButton({
15143
15147
  children,
15144
15148
  loading,
@@ -15189,27 +15193,33 @@ const Markdown = React__default.memo(
15189
15193
  },
15190
15194
  equal
15191
15195
  );
15192
- function Menu({
15196
+ const Menu = React__default.forwardRef(({
15193
15197
  children,
15194
15198
  trigger,
15195
15199
  open,
15196
15200
  defaultOpen,
15197
15201
  onOpenChange,
15198
15202
  portalContainer
15199
- }) {
15200
- return /* @__PURE__ */ jsxs(
15201
- DropdownMenu.Root,
15202
- {
15203
- open,
15204
- defaultOpen,
15205
- onOpenChange,
15206
- children: [
15207
- /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: trigger }),
15208
- /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(DropdownMenu.Content, { className: cls(paperMixin, "shadow py-2 z-30"), children }) })
15209
- ]
15210
- }
15211
- );
15212
- }
15203
+ }, ref) => /* @__PURE__ */ jsxs(
15204
+ DropdownMenu.Root,
15205
+ {
15206
+ open,
15207
+ defaultOpen,
15208
+ onOpenChange,
15209
+ children: [
15210
+ /* @__PURE__ */ jsx(
15211
+ DropdownMenu.Trigger,
15212
+ {
15213
+ ref,
15214
+ asChild: true,
15215
+ children: trigger
15216
+ }
15217
+ ),
15218
+ /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(DropdownMenu.Content, { className: cls(paperMixin, "shadow py-2 z-30"), children }) })
15219
+ ]
15220
+ }
15221
+ ));
15222
+ Menu.displayName = "Menu";
15213
15223
  function MenuItem({
15214
15224
  children,
15215
15225
  dense = false,
@@ -15795,7 +15805,7 @@ function SearchBar({
15795
15805
  }
15796
15806
  );
15797
15807
  }
15798
- function Select({
15808
+ const Select = forwardRef(({
15799
15809
  inputRef,
15800
15810
  open,
15801
15811
  name,
@@ -15822,12 +15832,12 @@ function Select({
15822
15832
  invisible,
15823
15833
  children,
15824
15834
  ...props
15825
- }) {
15826
- const [openInternal, setOpenInternal] = React__default.useState(false);
15835
+ }, ref) => {
15836
+ const [openInternal, setOpenInternal] = useState(false);
15827
15837
  useEffect(() => {
15828
15838
  setOpenInternal(open ?? false);
15829
15839
  }, [open]);
15830
- const onValueChangeInternal = React__default.useCallback((newValue) => {
15840
+ const onValueChangeInternal = useCallback((newValue) => {
15831
15841
  if (multiple) {
15832
15842
  if (Array.isArray(value) && value.includes(newValue)) {
15833
15843
  onMultiValueChange?.(value.filter((v) => v !== newValue));
@@ -15895,34 +15905,30 @@ function Select({
15895
15905
  inputClassName
15896
15906
  ),
15897
15907
  children: [
15898
- /* @__PURE__ */ jsx("div", { className: cls(
15899
- "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
15900
- "overflow-visible",
15901
- size === "small" ? "h-[42px]" : "h-[64px]"
15902
- ), children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { placeholder, className: "w-full", children: [
15903
- renderValue && (hasValue && Array.isArray(value) ? value.map((v, i) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 max-w-full", children: renderValue ? renderValue(v, i) : v }, v)) : typeof value === "string" ? renderValue ? renderValue(value, 0) : value : placeholder),
15904
- renderValues && (!hasValue || Array.isArray(value)) ? renderValues(value ?? []) : null,
15905
- !renderValue && !renderValues && hasValue
15906
- ] }) }),
15907
- /* @__PURE__ */ jsx(SelectPrimitive.Icon, { className: cls(
15908
- "px-2 h-full flex items-center"
15909
- ), children: /* @__PURE__ */ jsx(
15910
- ExpandMoreIcon,
15908
+ /* @__PURE__ */ jsx(
15909
+ "div",
15911
15910
  {
15912
- size: "small",
15913
- className: cls("transition", open ? "rotate-180" : "")
15911
+ ref,
15912
+ className: cls(
15913
+ "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
15914
+ "overflow-visible",
15915
+ size === "small" ? "h-[42px]" : "h-[64px]"
15916
+ ),
15917
+ children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { placeholder, className: "w-full", children: [
15918
+ renderValue && (hasValue && Array.isArray(value) ? value.map((v, i) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 max-w-full", children: renderValue ? renderValue(v, i) : v }, v)) : typeof value === "string" ? renderValue ? renderValue(value, 0) : value : placeholder),
15919
+ renderValues && (!hasValue || Array.isArray(value)) ? renderValues(value ?? []) : null,
15920
+ !renderValue && !renderValues && hasValue
15921
+ ] })
15914
15922
  }
15915
- ) })
15923
+ ),
15924
+ /* @__PURE__ */ jsx(SelectPrimitive.Icon, { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(ExpandMoreIcon, { size: "small", className: cls("transition", open ? "rotate-180" : "") }) })
15916
15925
  ]
15917
15926
  }
15918
15927
  ),
15919
15928
  endAdornment && /* @__PURE__ */ jsx(
15920
15929
  "div",
15921
15930
  {
15922
- className: cls(
15923
- "absolute h-full flex items-center",
15924
- size === "small" ? "right-10" : "right-14"
15925
- ),
15931
+ className: cls("absolute h-full flex items-center", size === "small" ? "right-10" : "right-14"),
15926
15932
  onClick: (e) => e.stopPropagation(),
15927
15933
  children: endAdornment
15928
15934
  }
@@ -15939,9 +15945,7 @@ function Select({
15939
15945
  SelectPrimitive.Viewport,
15940
15946
  {
15941
15947
  className: "p-1",
15942
- style: {
15943
- maxHeight: "var(--radix-select-content-available-height)"
15944
- },
15948
+ style: { maxHeight: "var(--radix-select-content-available-height)" },
15945
15949
  children
15946
15950
  }
15947
15951
  )
@@ -15950,7 +15954,8 @@ function Select({
15950
15954
  ]
15951
15955
  }
15952
15956
  );
15953
- }
15957
+ });
15958
+ Select.displayName = "Select";
15954
15959
  function SelectItem({
15955
15960
  value,
15956
15961
  children,
@@ -16451,7 +16456,7 @@ function TextField({
16451
16456
  InputLabel,
16452
16457
  {
16453
16458
  className: cls(
16454
- "pointer-events-none absolute",
16459
+ "absolute",
16455
16460
  size === "medium" ? "top-1" : "-top-1",
16456
16461
  !error ? focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-600",
16457
16462
  disabled ? "opacity-50" : ""
@@ -16481,17 +16486,19 @@ const Tooltip = ({
16481
16486
  align,
16482
16487
  onOpenChange,
16483
16488
  title,
16484
- className,
16485
- style,
16486
16489
  tooltipClassName,
16487
16490
  tooltipStyle,
16488
- children
16491
+ children,
16492
+ asChild = false,
16493
+ className,
16494
+ style
16489
16495
  }) => {
16490
16496
  useInjectStyles("Tooltip", styles);
16491
16497
  if (!title)
16492
16498
  return /* @__PURE__ */ jsx(Fragment, { children });
16499
+ const trigger = asChild ? /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }) : /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { style, className, children }) });
16493
16500
  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, onOpenChange, defaultOpen, children: [
16494
- /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className, style, children }) }),
16501
+ trigger,
16495
16502
  /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
16496
16503
  TooltipPrimitive.Content,
16497
16504
  {