@firecms/ui 3.0.0-canary.40 → 3.0.0-canary.42

package/dist/styles.d.ts

@@ -1,12 +1,12 @@
 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";
 export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
 export declare const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-export declare const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-700 dark:bg-opacity-40 transition duration-150 ease-in-out";
-export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-150 ease-in-out";
+export declare const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-700 dark:bg-opacity-40 transition duration-100 ease-in-out";
+export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-100 ease-in-out";
 export declare const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-90";
 export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-60";
 export declare const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
 export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
-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";
+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-100 ease-in-out m-1 -p-1";
 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";
 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/dist/util/index.d.ts

@@ -2,5 +2,3 @@ export * from "./cn";
 export * from "./debounce";
 export * from "./chip_colors";
 export * from "./key_to_icon_component";
-export * from "./useInjectStyles";
-export * from "./useOutsideAlerter";

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-canary.40",
+    "version": "3.0.0-canary.42",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -62,7 +62,9 @@
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-tooltip": "^1.0.7",
+        "clsx": "^2.1.0",
         "cmdk": "^0.2.1",
+        "date-fns": "^3.6.0",
         "react-datepicker": "^6.4.0",
         "react-dropzone": "^14.2.3",
         "react-fast-compare": "^3.2.2",
@@ -114,7 +116,7 @@
         "src",
         "tailwind.config.js"
     ],
-    "gitHead": "40b01721ac260b6cce7f5d8a3a1d768410e7f20d",
+    "gitHead": "d6a2f28e93d3c532dd6efacfccffb91383d5330e",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Autocomplete.tsx

@@ -2,7 +2,8 @@ import React from "react";
 
 import { paperMixin } from "../styles";
 import { Collapse } from "./Collapse";
-import { cn, useOutsideAlerter } from "../util";
+import { cn } from "../util";
+import { useOutsideAlerter } from "../hooks";
 
 export type AutocompleteProps = {
     children: React.ReactNode;

package/src/components/Button.tsx

@@ -50,7 +50,7 @@ const ButtonInner = React.forwardRef<
         // Outlined Variants
         "border border-primary text-primary hover:bg-primary-bg": variant === "outlined" && color === "primary" && !disabled,
         "border border-secondary text-secondary hover:bg-secondary-bg": variant === "outlined" && color === "secondary" && !disabled,
-        "border border-red-500 text-red-500 hover:bg-red-500": variant === "outlined" && color === "error" && !disabled,
+        "border border-red-500 text-red-500 hover:bg-red-500 hover:text-white": variant === "outlined" && color === "error" && !disabled,
         "border border-slate-400 text-text-primary dark:text-text-primary-dark hover:bg-slate-200": variant === "outlined" && color === "text" && !disabled,
         // Disabled states for all variants
         "border border-transparent opacity-50": variant === "text" && disabled,

package/src/components/CenteredView.tsx

@@ -2,23 +2,33 @@ import React from "react";
 import { Container } from "./Container";
 import { cn } from "../util";
 
-export function CenteredView({
-                                 children,
-                                 maxWidth,
-                                 className,
-                                 fullScreen
-                             }: {
+export type CenteredViewProps = {
     children: React.ReactNode;
     maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+    outerClassName?: string;
     className?: string;
     fullScreen?: boolean;
-}) {
+};
 
-    return <div className={cn("flex flex-col flex-grow", fullScreen ? "h-screen" : "h-full")}>
-        <Container className={cn("m-auto", className)}
-                   maxWidth={maxWidth}>
-            {children}
-        </Container>
-    </div>
+export const CenteredView = React.forwardRef<HTMLDivElement, CenteredViewProps>(({
+                                                                                     children,
+                                                                                     maxWidth,
+                                                                                     outerClassName,
+                                                                                     className,
+                                                                                     fullScreen,
+                                                                                     ...rest
+                                                                                 }, ref) => { // Notice how the ref is now received as the second argument
 
-}
+    return (
+        <div ref={ref}
+             className={cn("flex flex-col flex-grow", fullScreen ? "h-screen" : "h-full", outerClassName)}
+             {...rest}>
+            <Container className={cn("m-auto", className)} maxWidth={maxWidth}>
+                {children}
+            </Container>
+        </div>
+    );
+
+});
+
+CenteredView.displayName = "CenteredView";

package/src/components/Collapse.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 
-import { cn, useInjectStyles } from "../util";
+import { cn } from "../util";
+import { useInjectStyles } from "../hooks";
 
 interface CollapseProps {
     children?: React.ReactNode;

package/src/components/DateTimeField.tsx

@@ -12,8 +12,9 @@ import {
     paperMixin
 } from "../styles";
 import { InputLabel } from "./InputLabel";
-import { cn, useInjectStyles } from "../util";
 import { Typography } from "./Typography";
+import { cn } from "../util";
+import { useInjectStyles } from "../hooks";
 
 interface DateTimeFieldProps {
     value?: Date;

package/src/components/ExpandablePanel.tsx

@@ -3,7 +3,8 @@ import React, { PropsWithChildren, useEffect, useState } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { defaultBorderMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
 import { ExpandMoreIcon } from "../icons";
-import { cn, useInjectStyles } from "../util";
+import { cn } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export function ExpandablePanel({
                                     title,

package/src/components/FileUpload.tsx

@@ -38,7 +38,7 @@ export function FileUpload({
                                disabled,
                                maxFiles,
                                title,
-                               uploadDescription = "Drag and drop a file here or click",
+                               uploadDescription,
                                children,
                                preventDropOnDocument = true,
                                size

package/src/components/InputLabel.tsx

@@ -8,6 +8,12 @@ export type InputLabelProps = {
     shrink?: boolean;
 } & React.LabelHTMLAttributes<HTMLLabelElement>;
 
+const defaultClasses = {
+    root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-overflow-ellipsis max-w-full",
+    shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
+    expanded: "translate-x-[16px] top-0 transform translate-y-[16px] scale-100"
+};
+
 export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(function InputLabel(inProps, ref) {
     const {
         shrink,
@@ -15,12 +21,6 @@ export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(fu
         ...other
     } = inProps;
 
-    const defaultClasses = {
-        root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-overflow-ellipsis max-w-full",
-        shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
-        expanded: "translate-x-[16px] top-0 transform translate-y-[16px] scale-100"
-    };
-
     const computedClassName = cn(defaultClasses.root,
         {
             [defaultClasses.shrink]: shrink,

package/src/components/Label.tsx

@@ -9,7 +9,7 @@ const Label = React.forwardRef<
 >(({ className, ...props }, ref) => (
     <LabelPrimitive.Root
         ref={ref}
-        className={cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", defaultBorderMixin, className)}
+        className={cn("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70", defaultBorderMixin, className)}
         {...props}
     />
 ))

package/src/components/MultiSelect.tsx

@@ -6,8 +6,9 @@ import { Command as CommandPrimitive } from "cmdk";
 
 import { ExpandMoreIcon } from "../icons";
 import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin, focusedMixin } from "../styles";
-import { cn, useOutsideAlerter } from "../util";
+import { cn } from "../util";
 import { SelectInputLabel } from "./common/SelectInputLabel";
+import { useOutsideAlerter } from "../hooks";
 
 export type MultiSelectProps = {
     open?: boolean,

package/src/components/Popover.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 
 import { paperMixin } from "../styles";
-import { cn, useInjectStyles } from "../util";
+import { cn } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export type PopoverSide = "top" | "right" | "bottom" | "left";
 export type PopoverAlign = "start" | "center" | "end";

package/src/components/SearchBar.tsx

@@ -4,7 +4,7 @@ import { defaultBorderMixin, focusedMixin } from "../styles";
 import { CircularProgress, IconButton } from "./index";
 import { ClearIcon, SearchIcon } from "../icons";
 import { cn } from "../util";
-import { useDebounceValue } from "../util/useDebounceValue";
+import { useDebounceValue } from "../hooks";
 
 interface SearchBarProps {
     onClick?: () => void;

package/src/components/TextareaAutosize.tsx

@@ -288,7 +288,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
             />
         </React.Fragment>
     );
-});
+}) as React.FC<TextareaAutosizeProps & { ref?: React.ForwardedRef<Element> }>;
 
 export type TextareaAutosizeProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "onResize"> & {
 

package/src/components/Tooltip.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
-import { cn, useInjectStyles } from "../util";
+import { cn } from "../util";
+import { useInjectStyles } from "../hooks";
 
 export type TooltipProps = {
     open?: boolean,

package/src/components/Typography.tsx

@@ -87,7 +87,7 @@ export function Typography<C extends React.ElementType>(
         variantToClasses[variant],
         color ? colorToClasses[color] : "",
         align !== "inherit" && `text-${align}`,
-        gutterBottom && "mb-[0.35em]",
+        gutterBottom && "mb-2",
         noWrap && "truncate",
         paragraph && "mb-3",
         className

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export * from "./useLocaleConfig";
+export * from "./useInjectStyles";
+export * from "./useOutsideAlerter";
+export * from "./useDebounceValue";

package/src/hooks/useLocaleConfig.tsx

@@ -0,0 +1,18 @@
+import * as locales from "date-fns/locale";
+// @ts-ignore
+import { registerLocale, setDefaultLocale } from "react-datepicker";
+import { useEffect } from "react";
+
+export function useLocaleConfig(locale?: string) {
+    useEffect(() => {
+        if (!locale) {
+            return;
+        }
+        // @ts-ignore
+        const dateFnsLocale = locales[locale];
+        if (dateFnsLocale) {
+            registerLocale(locale, dateFnsLocale);
+            setDefaultLocale(locale);
+        }
+    }, [locale])
+}

package/src/index.ts

@@ -2,3 +2,4 @@ export * from "./components";
 export * from "./styles";
 export * from "./util";
 export * from "./icons";
+export * from "./hooks";

package/src/styles.ts

@@ -1,12 +1,12 @@
 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";
 export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
 export const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
-export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-700 dark:bg-opacity-40 transition duration-150 ease-in-out";
-export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-150 ease-in-out";
+export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-700 dark:bg-opacity-40 transition duration-100 ease-in-out";
+export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0 transition duration-100 ease-in-out";
 export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-90";
 export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-60";
 export const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
 export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
-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";
+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-100 ease-in-out m-1 -p-1";
 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";
 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/src/util/index.ts

@@ -2,5 +2,3 @@ export * from "./cn";
 export * from "./debounce";
 export * from "./chip_colors";
 export * from "./key_to_icon_component";
-export * from "./useInjectStyles";
-export * from "./useOutsideAlerter";