@firecms/ui 3.0.0-beta.4.pre.2 → 3.0.0-beta.5

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-800 dark:bg-opacity-60 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-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 fieldBackgroundDisabledMixin = "bg-opacity-80 dark:bg-opacity-90";
-export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-90";
+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-90 border-gray-100";
-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";
+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 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/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/ui",
     "type": "module",
-    "version": "3.0.0-beta.4.pre.2",
+    "version": "3.0.0-beta.5",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -31,9 +31,10 @@
         ".": {
             "import": "./dist/index.es.js",
             "require": "./dist/index.umd.js",
-            "types": "./dist/src/index.d.ts"
+            "types": "./dist/index.d.ts"
         },
-        "./package.json": "./package.json"
+        "./package.json": "./package.json",
+        "./tailwind.config.js": "./tailwind.config.js"
     },
     "scripts": {
         "watch": "vite build --watch",
@@ -106,13 +107,14 @@
         "ts-node": "^10.9.2",
         "tsd": "^0.30.7",
         "typescript": "^5.4.2",
-        "vite": "^5.1.6"
+        "vite": "^5.2.3"
     },
     "files": [
         "dist",
-        "src"
+        "src",
+        "tailwind.config.js"
     ],
-    "gitHead": "77875cc369a0bfe7b0b141e794b14a819d5811df",
+    "gitHead": "8bf864185c9617aa3f120e59c873c8b8bda8dac4",
     "publishConfig": {
         "access": "public"
     }

package/src/components/Checkbox.tsx

@@ -4,11 +4,12 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Icon } from "../icons";
 import { cn } from "../util";
 
-interface CheckboxProps {
+export interface CheckboxProps {
     checked: boolean;
     disabled?: boolean;
     indeterminate?: boolean;
     onCheckedChange?: (checked: boolean) => void;
+    padding?: boolean;
     size?: "tiny" | "small" | "medium" | "large";
     color?: "primary" | "secondary";
 }
@@ -21,11 +22,17 @@ const sizeClasses = {
 };
 
 const outerSizeClasses = {
-    medium: "w-10 h-10 p-2",
-    small: "w-8 h-8 p-2",
-    large: "w-12 h-12 p-2",
+    medium: "w-10 h-10",
+    small: "w-8 h-8",
+    large: "w-12 h-12 ",
     tiny: "w-6 h-6"
 }
+const paddingClasses = {
+    medium: "p-2",
+    small: "p-2",
+    large: "p-2",
+    tiny: ""
+}
 
 const colorClasses = {
     primary: "bg-primary",
@@ -35,6 +42,7 @@ const colorClasses = {
 export const Checkbox = ({
                              checked,
                              indeterminate = false,
+                             padding = true,
                              disabled,
                              size = "medium",
                              onCheckedChange,
@@ -51,17 +59,19 @@ export const Checkbox = ({
                 ? 14
                 : 24;
     return (
-        <div className={cn(
-            outerSizeClasses[size],
-            "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
-            onCheckedChange ? "rounded-full hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75" : "",
-            onCheckedChange ? "cursor-pointer" : "cursor-default"
-        )}>
-            <CheckboxPrimitive.Root
-                asChild
-                checked={indeterminate || isChecked}
-                disabled={disabled}
-                onCheckedChange={disabled ? undefined : onCheckedChange}>
+        <CheckboxPrimitive.Root
+            asChild
+            checked={indeterminate || isChecked}
+            disabled={disabled}
+            onCheckedChange={disabled ? undefined : onCheckedChange}>
+
+            <div className={cn(
+                padding ? paddingClasses[size] : "",
+                outerSizeClasses[size],
+                "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150",
+                onCheckedChange ? "rounded-full hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-700 dark:hover:bg-opacity-75" : "",
+                onCheckedChange ? "cursor-pointer" : "cursor-default"
+            )}>
                 <div
                     className={cn(
                         "border-2 relative transition-colors ease-in-out duration-150",
@@ -84,12 +94,7 @@ export const Checkbox = ({
                             )}
                     </CheckboxPrimitive.Indicator>
                 </div>
-            </CheckboxPrimitive.Root>
-            {/*{indeterminate && (*/}
-            {/*    <div >*/}
-            {/*         YO*/}
-            {/*    </div>*/}
-            {/*)}*/}
-        </div>
+            </div>
+        </CheckboxPrimitive.Root>
     );
 };

package/src/components/DateTimeField.tsx

@@ -17,12 +17,12 @@ import { Typography } from "./Typography";
 
 interface DateTimeFieldProps {
     value?: Date;
-    onChange: (date: Date | null) => void;
+    onChange: (date: Date | undefined) => void;
     mode?: "date" | "date_time";
     disabled?: boolean;
     clearable?: boolean;
     error?: boolean;
-    size: "small" | "medium";
+    size?: "small" | "medium";
     label?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
@@ -40,7 +40,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
                                                                 clearable,
                                                                 mode = "date",
                                                                 error,
-                                                                size,
+                                                                size = "medium",
                                                                 className,
                                                                 style,
                                                                 inputClassName,
@@ -60,7 +60,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
 
     const handleClear = (e: React.MouseEvent) => {
         e.preventDefault();
-        onChange(null);
+        onChange(undefined);
     }
 
     return (

package/src/components/ExpandablePanel.tsx

@@ -77,7 +77,8 @@ export function ExpandablePanel({
             <Collapsible.Root
                 className={cn(
                     !invisible && defaultBorderMixin + " border",
-                    "rounded-md"
+                    "rounded-md",
+                    "w-full"
                 )}
                 open={open}
                 onOpenChange={(updatedOpen: boolean) => {

package/src/components/IconButton.tsx

@@ -42,7 +42,7 @@ const IconButtonInner = <C extends React.ElementType = "button">({
                                                                      ...props
                                                                  }: IconButtonProps<C>, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
-    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-slate-50 dark:bg-gray-950 dark:bg-opacity-50";
+    const bgClasses = variant === "ghost" ? "bg-transparent" : "bg-slate-200 bg-opacity-50 dark:bg-gray-950 dark:bg-opacity-50";
     const Component: React.ElementType<any> = component || "button";
     return (
         <Component

package/src/components/InputLabel.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { cn } from "../util";
+import { Label } from "./Label";
 
 export type InputLabelProps = {
     children?: React.ReactNode;
@@ -27,7 +28,7 @@ export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(fu
         }, className);
 
     return (
-        <label
+        <Label
             data-shrink={shrink}
             ref={ref}
             className={computedClassName}

package/src/components/Markdown.tsx

@@ -3,26 +3,37 @@ import equal from "react-fast-compare"
 
 // @ts-ignore
 import MarkdownIt from "markdown-it";
+import { cn } from "../util";
 
 export interface MarkdownProps {
     source: string,
+    size?: "small" | "medium" | "large" | "xl" | "2xl";
     className?: string
 }
 
-const md = new MarkdownIt({ html: true, });
+const proseClasses = {
+    small: "prose-sm",
+    medium: "prose",
+    large: "prose-lg",
+    xl: "prose-xl",
+    "2xl": "prose-2xl"
+};
+
+const md = new MarkdownIt({ html: true });
 /**
  * @group Preview components
  */
 export const Markdown = React.memo<MarkdownProps>(function Markdown({
                                                                         source,
-                                                                        className
+                                                                        className,
+                                                                        size = "medium"
                                                                     }: MarkdownProps) {
         const html = useMemo(() => {
             return md.render(typeof source === "string" ? source : "");
         }, [source]);
 
         return <div
-            className={className}
+            className={cn(proseClasses[size], "dark:prose-invert prose-headings:font-title", className)}
             dangerouslySetInnerHTML={{ __html: html }}
         />;
     }

package/src/components/Menu.tsx

@@ -43,18 +43,24 @@ export type MenuItemProps = {
     children: React.ReactNode;
     dense?: boolean;
     onClick?: (event: React.MouseEvent) => void;
-}
+};
 
 export function MenuItem({
                              children,
-                             dense,
+                             dense = false, // Default value is false if not provided
                              onClick
                          }: MenuItemProps) {
+    // Dynamically adjusting the class based on the "dense" prop
+    const classNames = cn(
+        focusedMixin,
+        onClick && "cursor-pointer",
+        "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",
+        dense ? "px-3 py-1.5" : "px-4 py-2"
+    );
+
     return (
         <DropdownMenu.Item
-            className={cn(focusedMixin,
-                onClick && "cursor-pointer",
-                "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")}
+            className={classNames}
             onClick={onClick}>
             {children}
         </DropdownMenu.Item>

package/src/components/RadioGroup.tsx

@@ -1,12 +1,33 @@
 import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 import { cn } from "../util";
-import { CircleIcon } from "../icons";
+
+export interface RadioGroupProps {
+    id?: string;
+    children: React.ReactNode;
+    name?: string
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * Whether keyboard navigation should loop around
+     * @defaultValue false
+     */
+    loop?: boolean;
+    defaultValue?: string;
+    value?: string;
+
+    onValueChange?(value: string): void;
+
+    className?: string;
+}
 
 const RadioGroup = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
+    RadioGroupProps
+>(({
+       className,
+       ...props
+   }, ref) => {
     return (
         <RadioGroupPrimitive.Root
             className={cn("grid gap-2", className)}
@@ -17,10 +38,20 @@ const RadioGroup = React.forwardRef<
 })
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
+export interface RadioGroupItemProps {
+    id?: string;
+    value: string;
+    checked?: boolean;
+    required?: boolean;
+    className?: string;
+}
 const RadioGroupItem = React.forwardRef<
     React.ElementRef<typeof RadioGroupPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+    RadioGroupItemProps
+>(({
+       className,
+       ...props
+   }, ref) => {
     return (
         <RadioGroupPrimitive.Item
             ref={ref}
@@ -31,7 +62,7 @@ const RadioGroupItem = React.forwardRef<
             {...props}
         >
             <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-                <div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg" />
+                <div className="h-2.5 w-2.5 fill-current text-current bg-primary rounded-lg"/>
             </RadioGroupPrimitive.Indicator>
         </RadioGroupPrimitive.Item>
     )

package/src/components/Select.tsx

@@ -142,7 +142,7 @@ export function Select({
                         "overflow-visible",
                         size === "small" ? "h-[42px]" : "h-[64px]"
                     )}>
-                    <SelectPrimitive.Value >
+                    <SelectPrimitive.Value placeholder={placeholder}>
                         {renderValue &&
                             (value && Array.isArray(value)
                                 ? value.map((v, i) => (

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-800 dark:bg-opacity-60 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-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 fieldBackgroundDisabledMixin = "bg-opacity-80 dark:bg-opacity-90";
-export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-opacity-90";
+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-90 border-gray-100";
-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";
+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 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/tailwind.config.js

@@ -0,0 +1,71 @@
+export default {
+    darkMode: ["selector", "[data-theme=\"dark\"]"],
+    mode: "jit",
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/firecms/src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}"
+    ],
+    plugins: [
+        require("@tailwindcss/typography")
+    ],
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: [
+                    "Rubik",
+                    "Roboto",
+                    "Helvetica",
+                    "Arial",
+                    "sans-serif"
+                ],
+                headers: [
+                    "Rubik",
+                    "Roboto",
+                    "Helvetica",
+                    "Arial",
+                    "sans-serif"
+                ],
+                mono: [
+                    "IBM Plex Mono",
+                    "Space Mono",
+                    "Lucida Console",
+                    "monospace"
+                ]
+            },
+            colors: {
+                primary: "var(--fcms-primary)",
+                "primary-dark": "var(--fcms-primary-dark)",
+                "primary-bg": "var(--fcms-primary-bg)",
+                secondary: "var(--fcms-secondary)",
+                field: {
+                    disabled: "rgb(224 224 226)",
+                    "disabled-dark": "rgb(35 35 37)"
+                },
+                text: {
+                    primary: "rgba(0, 0, 0, 0.87)",
+                    "primary-dark": "#ffffff",
+                    secondary: "rgba(0, 0, 0, 0.6)",
+                    "secondary-dark": "rgba(255, 255, 255, 0.7)",
+                    disabled: "rgba(0, 0, 0, 0.38)",
+                    "disabled-dark": "rgba(255, 255, 255, 0.5)",
+                    label: "rgb(131, 131, 131)"
+                },
+                gray: {
+                    50: "#f8f8fc",
+                    100: "#E7E7EB",
+                    200: "#CFCFD6",
+                    300: "#B7B7BF",
+                    400: "#A0A0A9",
+                    500: "#87878F",
+                    600: "#6C6C75",
+                    700: "#505058",
+                    800: "#35353A",
+                    900: "#18181C",
+                    950: "#101013"
+                }
+            }
+        }
+    }
+};