@firecms/ui 3.0.0-canary.15 → 3.0.0-canary.150

package/src/components/RadioGroup.tsx

@@ -1,15 +1,36 @@
 import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-import { cn } from "../util";
-import { CircleIcon } from "../icons";
+import { cls } from "../util";
+
+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)}
+            className={cls("grid gap-2", className)}
             {...props}
             ref={ref}
         />
@@ -17,21 +38,32 @@ const RadioGroup = React.forwardRef<
 })
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
+export interface RadioGroupItemProps {
+    id?: string;
+    value: string;
+    checked?: boolean;
+    required?: boolean;
+    className?: string;
+    disabled?: boolean;
+}
 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}
-            className={cn(
+            className={cls(
                 "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
                 className
             )}
             {...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/SearchBar.tsx

@@ -1,10 +1,11 @@
+"use client";
 import React, { useCallback, useState } from "react";
 
-import { defaultBorderMixin, focusedMixin } from "../styles";
+import { defaultBorderMixin } from "../styles";
 import { CircularProgress, IconButton } from "./index";
 import { ClearIcon, SearchIcon } from "../icons";
-import { cn } from "../util";
-import { useDebounceValue } from "../util/useDebounceValue";
+import { cls } from "../util";
+import { useDebounceValue } from "../hooks";
 
 interface SearchBarProps {
     onClick?: () => void;
@@ -60,15 +61,15 @@ export function SearchBar({
     return (
         <div
             onClick={onClick}
-            className={cn("relative",
+            className={cls("relative",
                 large ? "h-14" : "h-[42px]",
-                "bg-slate-50 dark:bg-gray-800 transition duration-150 ease-in-out border",
+                "bg-surface-accent-50 dark:bg-surface-800 border",
                 defaultBorderMixin,
-                "rounded",
+                "rounded-lg",
                 className)}>
             <div
-                className="absolute p-0 px-4 h-full absolute pointer-events-none flex items-center justify-center top-0">
-                {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-slate-500 dark:text-gray-500"}/>}
+                className="absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0">
+                {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-text-disabled dark:text-text-disabled-dark"}/>}
             </div>
             <input
                 value={searchText ?? ""}
@@ -84,12 +85,12 @@ export function SearchBar({
                 autoFocus={autoFocus}
                 onFocus={() => setActive(true)}
                 onBlur={() => setActive(false)}
-                className={cn(
+                className={cls(
                     (disabled || loading) && "pointer-events-none",
-                    "relative flex items-center rounded transition-all bg-transparent outline-none appearance-none border-none",
+                    "placeholder-text-disabled dark:placeholder-text-disabled-dark",
+                    "relative flex items-center rounded-lg transition-all bg-transparent outline-none appearance-none border-none",
                     "pl-12 h-full text-current ",
                     expandable ? (active ? "w-[220px]" : "w-[180px]") : "",
-                    focusedMixin,
                     innerClassName
                 )}
             />

package/src/components/Select.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect } from "react";
-
+"use client";
+import React, { ChangeEvent, forwardRef, useCallback, useEffect, useState } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import {
+    defaultBorderMixin,
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundInvisibleMixin,
     fieldBackgroundMixin,
-    focusedMixin
+    focusedDisabled
 } from "../styles";
 import { CheckIcon, ExpandMoreIcon } from "../icons";
-import { cn } from "../util";
+import { cls } from "../util";
 import { SelectInputLabel } from "./common/SelectInputLabel";
 
 export type SelectProps = {
@@ -17,89 +18,75 @@ export type SelectProps = {
     name?: string,
     id?: string,
     onOpenChange?: (open: boolean) => void,
-    value?: string | string[],
+    value?: string,
     className?: string,
     inputClassName?: string,
-    onChange?: React.EventHandler<React.ChangeEvent<HTMLSelectElement>>,
+    onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
     onValueChange?: (updatedValue: string) => void,
-    onMultiValueChange?: (updatedValue: string[]) => void,
     placeholder?: React.ReactNode,
-    renderValue?: (value: string, index: number) => React.ReactNode,
-    renderValues?: (values: string[]) => React.ReactNode,
+    renderValue?: (value: string) => React.ReactNode,
     size?: "small" | "medium",
-    label?: React.ReactNode,
+    label?: React.ReactNode | string,
     disabled?: boolean,
     error?: boolean,
     position?: "item-aligned" | "popper",
     endAdornment?: React.ReactNode,
-    multiple?: boolean,
     inputRef?: React.RefObject<HTMLButtonElement>,
     padding?: boolean,
-    includeFocusOutline?: boolean,
     invisible?: boolean,
-    children?: React.ReactNode
+    children?: React.ReactNode;
 };
 
-export function Select({
-                           inputRef,
-                           open,
-                           name,
-                           id,
-                           onOpenChange,
-                           value,
-                           onChange,
-                           onValueChange,
-                           onMultiValueChange,
-                           className,
-                           inputClassName,
-                           placeholder,
-                           renderValue,
-                           renderValues,
-                           label,
-                           size = "medium",
-                           includeFocusOutline = true,
-                           error,
-                           disabled,
-                           padding = true,
-                           position = "item-aligned",
-                           endAdornment,
-                           multiple,
-                           invisible,
-                           children,
-                           ...props
-                       }: SelectProps) {
+export const Select = forwardRef<HTMLDivElement, SelectProps>(({
+                                                                   inputRef,
+                                                                   open,
+                                                                   name,
+                                                                   id,
+                                                                   onOpenChange,
+                                                                   value,
+                                                                   onChange,
+                                                                   onValueChange,
+                                                                   className,
+                                                                   inputClassName,
+                                                                   placeholder,
+                                                                   renderValue,
+                                                                   label,
+                                                                   size = "medium",
+                                                                   error,
+                                                                   disabled,
+                                                                   padding = true,
+                                                                   position = "item-aligned",
+                                                                   endAdornment,
+                                                                   invisible,
+                                                                   children,
+                                                                   ...props
+                                                               }, ref) => {
+
+    const [openInternal, setOpenInternal] = useState(open ?? false);
 
-    const [openInternal, setOpenInternal] = React.useState(false);
     useEffect(() => {
         setOpenInternal(open ?? false);
     }, [open]);
 
-    const onValueChangeInternal = React.useCallback((newValue: string) => {
-        if (multiple) {
-            if (Array.isArray(value) && value.includes(newValue)) {
-                onMultiValueChange?.(value.filter(v => v !== newValue));
-            } else {
-                onMultiValueChange?.([...(value as string[] ?? []), newValue]);
-            }
-        } else {
-            onValueChange?.(newValue);
-        }
-        if (!multiple && onChange) {
+    const onValueChangeInternal = useCallback((newValue: string) => {
+        onValueChange?.(newValue);
+        if (onChange) {
             const event = {
                 target: {
                     name,
                     value: newValue
                 }
-            } as React.ChangeEvent<HTMLSelectElement>;
+            } as ChangeEvent<HTMLSelectElement>;
             onChange(event);
         }
-    }, [multiple, onChange, value, onMultiValueChange, onValueChange]);
+    }, [onChange, value, onValueChange]);
+
+    const hasValue = Array.isArray(value) ? value.length > 0 : (value != null && value !== "" && value !== undefined);
 
     return (
         <SelectPrimitive.Root
             name={name}
-            value={Array.isArray(value) ? undefined : value}
-            defaultOpen={open}
+            value={value}
             open={openInternal}
             disabled={disabled}
             onValueChange={onValueChangeInternal}
@@ -108,22 +95,19 @@ export function Select({
                 setOpenInternal(open);
             }}
             {...props}>
-
             {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
-
-            <div
-                className={cn(
-                    size === "small" ? "min-h-[42px]" : "min-h-[64px]",
-                    "select-none rounded-md text-sm",
-                    invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
-                    disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                    "relative flex items-center",
-                    className)}>
-
+            <div className={cls(
+                size === "small" ? "min-h-[42px]" : "min-h-[64px]",
+                "select-none rounded-md text-sm",
+                invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
+                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                "relative flex items-center",
+                className
+            )}>
                 <SelectPrimitive.Trigger
                     ref={inputRef}
                     id={id}
-                    className={cn(
+                    className={cls(
                         "w-full h-full",
                         size === "small" ? "h-[42px]" : "h-[64px]",
                         padding ? "px-4 " : "",
@@ -131,67 +115,62 @@ export function Select({
                         "select-none rounded-md text-sm",
                         error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
                         error ? "border border-red-500 dark:border-red-600" : "",
-                        disabled ? "text-slate-600 dark:text-slate-400" : "text-slate-800 dark:text-white",
-                        "relative flex items-center",
-                        includeFocusOutline ? focusedMixin : "",
+                        disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
+                        "relative flex flex-row items-center",
                         inputClassName
                     )}>
 
-                    <div className={cn(
-                        "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
-                        "overflow-visible",
-                        size === "small" ? "h-[42px]" : "h-[64px]"
-                    )}>
-                    <SelectPrimitive.Value >
-                        {renderValue &&
-                            (value && Array.isArray(value)
-                                ? value.map((v, i) => (
-                                    <div key={v} className={"flex items-center gap-1 max-w-full"}>
-                                        {renderValue ? renderValue(v, i) : v}
-                                    </div>))
-                                : (typeof value === "string" ? (renderValue ? renderValue(value, 0) : value) : placeholder))}
-
-                        {renderValues && (!value || Array.isArray(value))
-                            ? renderValues(value as string[] ?? [])
-                            : null}
-
-                        {!renderValue && !renderValues && value}
-
-                    </SelectPrimitive.Value>
+                    <div
+                        ref={ref}
+                        className={cls(
+                            "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
+                            "overflow-visible",
+                            size === "small" ? "h-[42px]" : "h-[64px]"
+                        )}
+                    >
+                        <SelectPrimitive.Value
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }}
+                            placeholder={placeholder}
+                            className={"w-full"}>
+                            {hasValue && value && renderValue ? renderValue(value) : placeholder}
+                            {hasValue && !renderValue && value}
+                        </SelectPrimitive.Value>
                     </div>
 
-                    <SelectPrimitive.Icon className={cn(
-                        "px-2 h-full flex items-center",
-                    )}>
+                    {endAdornment && (
+                        <div
+                            className={cls("h-full flex items-center")}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }}>
+                            {endAdornment}
+                        </div>
+                    )}
+                    <SelectPrimitive.Icon asChild>
                         <ExpandMoreIcon size={"small"}
-                                        className={cn("transition", open ? "rotate-180" : "")}/>
+                                        className={cls("px-2 transition", open ? "rotate-180" : "")}/>
                     </SelectPrimitive.Icon>
-
                 </SelectPrimitive.Trigger>
 
-                {endAdornment && <div className={cn("absolute h-full flex items-center",
-                    size === "small" ? "right-10" : "right-14")}
-                                      onClick={(e) => e.stopPropagation()}>
-                    {endAdornment}
-                </div>}
-
             </div>
             <SelectPrimitive.Portal>
-                <SelectPrimitive.Content
-                    position={position}
-                    className="z-50 relative overflow-hidden border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg">
-                    <SelectPrimitive.Viewport
-                        className={"p-1"}
-                        style={{
-                            maxHeight: "var(--radix-select-content-available-height)"
-                        }}>
+                <SelectPrimitive.Content position={position}
+                                         className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin)}>
+                    <SelectPrimitive.Viewport className={"p-1"}
+                                              style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
                         {children}
                     </SelectPrimitive.Viewport>
                 </SelectPrimitive.Content>
             </SelectPrimitive.Portal>
         </SelectPrimitive.Root>
     );
-}
+});
+
+Select.displayName = "Select";
 
 export type SelectItemProps = {
     value: string,
@@ -210,23 +189,17 @@ export function SelectItem({
         key={value}
         value={value}
         disabled={disabled}
-        onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        }}
-        className={cn(
+        className={cls(
             "w-full",
-            "relative relative flex items-center p-2 rounded-md text-sm text-slate-700 dark:text-slate-300",
-            focusedMixin,
+            "relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300",
             "focus:z-10",
-            "data-[state=checked]:bg-slate-100 data-[state=checked]:dark:bg-slate-900 focus:bg-slate-100 dark:focus:bg-slate-950",
-            "data-[state=checked]:focus:bg-slate-200 data-[state=checked]:dark:focus:bg-slate-950",
+            "data-[state=checked]:bg-surface-accent-100 data-[state=checked]:dark:bg-surface-accent-800 focus:bg-surface-accent-100 dark:focus:bg-surface-950",
+            "data-[state=checked]:focus:bg-surface-accent-200 data-[state=checked]:dark:focus:bg-surface-950",
             disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
             "[&>*]:w-full",
             "overflow-visible",
             className
-        )}
-    >
+        )}>
         <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
         <div
             className="absolute left-1 data-[state=checked]:block hidden">
@@ -248,8 +221,8 @@ export function SelectGroup({
                             }: SelectGroupProps) {
     return <>
         <SelectPrimitive.Group
-            className={cn(
-                "text-xs text-slate-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
+            className={cls(
+                "text-xs text-surface-accent-900 dark:text-white uppercase tracking-wider font-bold mt-6 first:mt-2",
                 "px-2 py-2",
                 className
             )}>

package/src/components/Separator.tsx

@@ -1,20 +1,26 @@
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cls } from "../util";
 
-export function Separator({ orientation, decorative }: {
+export function Separator({
+                              orientation,
+                              decorative,
+                              className
+                          }: {
     orientation: "horizontal" | "vertical",
-    decorative?: boolean
+    decorative?: boolean,
+    className?: string
 }) {
     if (orientation === "horizontal")
         return (
             <SeparatorPrimitive.Root
                 decorative={decorative}
                 orientation="horizontal"
-                className="dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[8px]"/>
+                className={cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
         );
     else
         return (
             <SeparatorPrimitive.Root
-                className="dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[8px]"
+                className={cls("dark:bg-opacity-80 dark:bg-surface-800 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
                 decorative={decorative}
                 orientation="vertical"
             />

package/src/components/Sheet.tsx

@@ -1,37 +1,43 @@
-import React, { useEffect } from "react";
+"use client";
+import React, { useEffect, useState } from "react";
+import { cls } from "../util";
+import { defaultBorderMixin } from "../styles";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "../util";
 
 interface SheetProps {
     children: React.ReactNode;
     open: boolean;
+    title?: string;
+    modal?: boolean;
+    includeBackgroundOverlay?: boolean;
     side?: "top" | "bottom" | "left" | "right";
+    darkBackground?: boolean;
     transparent?: boolean;
     onOpenChange?: (open: boolean) => void;
+    className?: string;
+    overlayClassName?: string;
 }
 
 export const Sheet: React.FC<SheetProps> = ({
                                                 children,
                                                 side = "right",
+                                                title,
+                                                modal = true,
+                                                includeBackgroundOverlay = true,
                                                 open,
                                                 onOpenChange,
                                                 transparent,
+                                                className,
+                                                overlayClassName,
                                                 ...props
                                             }) => {
-
-    const [displayed, setDisplayed] = React.useState(false);
+    const [displayed, setDisplayed] = useState(false);
 
     useEffect(() => {
-        if (!open) {
-            const timeout = setTimeout(() => {
-                setDisplayed(false);
-            }, 250);
-            return () => clearTimeout(timeout);
-        } else {
-            setDisplayed(true);
-            return () => {
-            };
-        }
+        const timeout = setTimeout(() => {
+            setDisplayed(open);
+        }, 1);
+        return () => clearTimeout(timeout);
     }, [open]);
 
     const transformValue: Record<string, string> = {
@@ -41,36 +47,52 @@ export const Sheet: React.FC<SheetProps> = ({
         right: "translate-x-full"
     };
 
-    return (
+    const borderClass: Record<string, string> = {
+        top: "border-b",
+        bottom: "border-t",
+        left: "border-r",
+        right: "border-l"
+    };
 
+    return (
         <DialogPrimitive.Root open={displayed || open}
+                              modal={modal}
                               onOpenChange={onOpenChange}>
             <DialogPrimitive.Portal>
-                <DialogPrimitive.Overlay
-                    className={cn(
-                        "fixed inset-0 transition-opacity z-20 ease-in-out duration-200  backdrop-blur-sm",
-                        transparent ? "bg-white bg-opacity-80" : "bg-black bg-opacity-50",
-                        "dark:bg-black dark:bg-opacity-60",
-                        displayed && open ? "opacity-100" : "opacity-0"
+                <DialogPrimitive.Title autoFocus tabIndex={0}>
+                    {title ?? "Sheet"}
+                </DialogPrimitive.Title>
+                {includeBackgroundOverlay && <DialogPrimitive.Overlay
+                    className={cls(
+                        "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
+                        "bg-black bg-opacity-50",
+                        "dark:bg-surface-900 dark:bg-opacity-60",
+                        displayed && open ? "opacity-100" : "opacity-0",
+                        overlayClassName
                     )}
                     style={{
-                        pointerEvents: displayed ? "auto" : "none",
+                        pointerEvents: displayed ? "auto" : "none"
                     }}
-                />
+                />}
                 <DialogPrimitive.Content
                     {...props}
-                    className={cn(
-                        // "transform-gpu",
+                    onFocusCapture={(event) => event.preventDefault()}
+                    className={cls(
+                        borderClass[side],
+                        defaultBorderMixin,
+                        "transform-gpu",
                         "will-change-transform",
-                        "text-slate-900 dark:text-white",
-                        "fixed transform z-20 transition-all duration-[240ms] ease-in-out",
+                        "text-surface-accent-900 dark:text-white",
+                        "fixed transform z-20 transition-all ease-in-out",
+                        !displayed ? "duration-150" : "duration-100",
                         "outline-none focus:outline-none",
-                        !transparent ? "shadow-md" : "",
+                        transparent ? "" : "shadow-md bg-white dark:bg-surface-950",
                         side === "top" || side === "bottom" ? "w-full" : "h-full",
                         side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0",
-                        displayed && open ? "opacity-100" : "opacity-0",
-                        !displayed || !open ? transformValue[side] : "")
-                    }
+                        displayed && open ? "opacity-100" : "opacity-50",
+                        !displayed || !open ? transformValue[side] : "",
+                        className
+                    )}
                 >
                     {children}
                 </DialogPrimitive.Content>

package/src/components/Skeleton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../util";
+import { cls } from "../util";
 
 export type SkeletonProps = {
     width?: number;
@@ -12,13 +12,16 @@ export function Skeleton({
                              height,
                              className
                          }: SkeletonProps) {
-    return <span className={
-        cn(
+    return <span
+        style={{
+            width: width ? `${width}px` : "100%",
+            height: height ? `${height}px` : "12px"
+        }}
+        className={
+        cls(
             "block",
-            "bg-slate-200 dark:bg-slate-800 rounded",
+            "bg-surface-accent-200 dark:bg-surface-accent-800 rounded-md",
             "animate-pulse",
-            width ? `w-[${width}px]` : "w-full",
-            height ? `h-[${height}px]` : "h-3",
             "max-w-full max-h-full",
             className)
     }/>;