@firecms/ui 3.0.1 → 3.1.0-canary.02232f4

package/src/components/Skeleton.tsx

@@ -14,8 +14,8 @@ export function Skeleton({
                          }: SkeletonProps) {
     return <span
         style={{
-            width: width ? `${width}px` : "100%",
-            height: height ? `${height}px` : "12px"
+            width: width !== undefined ? `${width}px` : undefined,
+            height: height !== undefined ? `${height}px` : undefined
         }}
         className={
         cls(
@@ -23,6 +23,8 @@ export function Skeleton({
             "bg-surface-accent-200 dark:bg-surface-accent-800 rounded-md",
             "animate-pulse",
             "max-w-full max-h-full",
+            width === undefined ? "w-full" : "",
+            height === undefined ? "h-3" : "",
             className)
     }/>;
 }

package/src/components/Slider.tsx

@@ -37,8 +37,8 @@ function SliderThumb(props: {
                         "border-surface-accent-300 bg-surface-accent-300 dark:border-surface-700 dark:bg-surface-700": props.props.disabled
                     },
                     props.classes,
-                    "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50",
-                    "hover:ring-4 hover:ring-primary hover:ring-opacity-25",
+                    "focus-visible:ring-4 focus-visible:ring-primary focus-visible:ring-opacity-50 focus-visible:ring-primary/50",
+                    "hover:ring-4 hover:ring-primary hover:ring-opacity-25 hover:ring-primary/25",
                     "block rounded-full transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50")}
 
             />
@@ -48,7 +48,7 @@ function SliderThumb(props: {
                                   className={cls(
                                       "TooltipContent",
                                       "max-w-lg leading-relaxed",
-                                      "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
+                                      "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100",
                                   )}>
             {props.props.value?.[props.index]}
         </TooltipPrimitive.Content>
@@ -84,7 +84,7 @@ const Slider = React.forwardRef<
             >
                 <SliderPrimitive.Track
                     style={{ height: size === "small" ? 4 : 8 }}
-                    className={"relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 dark:bg-surface-700 dark:bg-opacity-40"}>
+                    className={"relative w-full grow overflow-hidden rounded-full bg-surface-accent-300 bg-opacity-40 bg-surface-accent-300/40 dark:bg-surface-700 dark:bg-opacity-40 dark:bg-surface-700/40"}>
 
                     <SliderPrimitive.Range
                         className={cls("absolute h-full", {

package/src/components/Table.tsx

@@ -36,7 +36,7 @@ export const TableBody = React.memo(({
                               ...rest
                           }: TableBodyProps) => (
     <tbody
-        className={cls("bg-white dark:bg-surface-950 text-sm divide-y divide-surface-100 dark:divide-surface-700 dark:divide-opacity-70", className)}
+        className={cls("bg-white dark:bg-surface-950 text-sm divide-y divide-surface-100 dark:divide-surface-700 dark:divide-opacity-70 dark:divide-surface-700/70", className)}
         {...rest}
     >
     {children}

package/src/components/Tabs.tsx

@@ -1,32 +1,137 @@
-import React from "react";
+import React, { createContext, useContext, useRef, useState, useEffect } from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cls } from "../util";
+import { defaultBorderMixin } from "../styles";
+import { IconButton } from "./IconButton";
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons";
+
+type TabsMode = "primary" | "secondary";
+const TabsModeContext = createContext<TabsMode>("primary");
 
 export type TabsProps = {
     value: string,
     children: React.ReactNode,
     innerClassName?: string,
     className?: string,
-    onValueChange: (value: string) => void
+    onValueChange: (value: string) => void,
+    /**
+     * "primary" renders the default pill-style tabs.
+     * "secondary" renders underline-style tabs suitable for inner/nested panels.
+     */
+    mode?: TabsMode
 };
 
 export function Tabs({
-                         value,
-                         onValueChange,
-                         className,
-                         innerClassName,
-                         children
-                     }: TabsProps) {
+    value,
+    onValueChange,
+    className,
+    innerClassName,
+    children,
+    mode = "primary"
+}: TabsProps) {
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const [showLeftScroll, setShowLeftScroll] = useState(false);
+    const [showRightScroll, setShowRightScroll] = useState(false);
+    const [isScrollable, setIsScrollable] = useState(false);
+
+    const checkScroll = () => {
+        if (scrollContainerRef.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+            setShowLeftScroll(scrollLeft > 0);
+            setShowRightScroll(Math.ceil(scrollLeft + clientWidth) < scrollWidth);
+            setIsScrollable(scrollWidth > clientWidth);
+        }
+    };
+
+    useEffect(() => {
+        checkScroll();
+        window.addEventListener("resize", checkScroll);
+
+        let observer: ResizeObserver;
+        if (scrollContainerRef.current) {
+            observer = new ResizeObserver(checkScroll);
+            observer.observe(scrollContainerRef.current);
+            if (scrollContainerRef.current.firstElementChild) {
+                observer.observe(scrollContainerRef.current.firstElementChild);
+            }
+        }
+
+        return () => {
+            window.removeEventListener("resize", checkScroll);
+            observer?.disconnect();
+        };
+    }, [children]);
+
+    const scroll = (direction: "left" | "right") => {
+        if (scrollContainerRef.current) {
+            const container = scrollContainerRef.current;
+            const scrollAmount = Math.max(container.clientWidth / 2, 200);
+            const targetScroll = container.scrollLeft + (direction === "left" ? -scrollAmount : scrollAmount);
 
-    return <TabsPrimitive.Root value={value} onValueChange={onValueChange} className={className}>
-        <TabsPrimitive.List className={cls(
-            "w-max",
-            "flex text-sm font-medium text-center text-surface-accent-800 dark:text-white max-w-full overflow-auto no-scrollbar items-end",
-            innerClassName)
-        }>
-            {children}
-        </TabsPrimitive.List>
+            container.scrollTo({
+                left: targetScroll,
+                behavior: "smooth"
+            });
+            // checkScroll will be called by onScroll event
+        }
+    };
+
+    return <TabsModeContext.Provider value={mode}>
+        <TabsPrimitive.Root value={value} onValueChange={onValueChange} className={cls("flex flex-row items-center min-w-0", className)}>
+        {isScrollable && (
+            <button
+                type="button"
+                disabled={!showLeftScroll}
+                onClick={() => scroll("left")}
+                className={cls(
+                    "flex-shrink-0 z-10 flex items-center justify-center rounded-md px-0.5 py-1.5 transition-all h-10 w-6",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400",
+                    "disabled:pointer-events-none disabled:opacity-0",
+                    "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800",
+                    mode === "primary" && "mr-1 bg-surface-50 dark:bg-surface-900 border",
+                    mode === "primary" && defaultBorderMixin,
+                    mode === "secondary" && "mr-1"
+                )}
+            >
+                <ChevronLeftIcon size="small" />
+            </button>
+        )}
+        <div
+            ref={scrollContainerRef}
+            className="flex-1 overflow-x-auto no-scrollbar min-w-0"
+            onScroll={checkScroll}
+            style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+        >
+            <TabsPrimitive.List className={cls(
+                mode === "primary" && "border",
+                mode === "primary" && defaultBorderMixin,
+                mode === "primary" && "gap-2 inline-flex h-10 items-center justify-center rounded-md bg-surface-50 p-1 text-surface-600 dark:bg-surface-900 dark:text-surface-400",
+                mode === "secondary" && "gap-1 inline-flex h-9 items-center text-surface-500 dark:text-surface-400",
+                innerClassName)
+            }>
+                {children}
+            </TabsPrimitive.List>
+        </div>
+        {isScrollable && (
+            <button
+                type="button"
+                disabled={!showRightScroll}
+                onClick={() => scroll("right")}
+                className={cls(
+                    "flex-shrink-0 z-10 flex items-center justify-center rounded-md px-0.5 py-1.5 transition-all h-10 w-6",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400",
+                    "disabled:pointer-events-none disabled:opacity-0",
+                    "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800",
+                    mode === "primary" && "ml-1 bg-surface-50 dark:bg-surface-900 border",
+                    mode === "primary" && defaultBorderMixin,
+                    mode === "secondary" && "ml-1"
+                )}
+            >
+                <ChevronRightIcon size="small" />
+            </button>
+        )}
     </TabsPrimitive.Root>
+    </TabsModeContext.Provider>
 }
 
 export type TabProps = {
@@ -38,28 +143,36 @@ export type TabProps = {
 };
 
 export function Tab({
-                        value,
-                        className,
-                        innerClassName,
-                        children,
-                        disabled
-                    }: TabProps) {
+    value,
+    className,
+    innerClassName,
+    children,
+    disabled
+}: TabProps) {
+    const mode = useContext(TabsModeContext);
+
+    const primaryClasses = cls(
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "data-[state=active]:bg-white data-[state=active]:text-surface-900 dark:data-[state=active]:bg-surface-950 dark:data-[state=active]:text-surface-50",
+    );
+
+    const secondaryClasses = cls(
+        "inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5 text-sm font-medium transition-all",
+        "border-b-2 border-transparent -mb-px",
+        "focus-visible:outline-none",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "hover:text-surface-700 dark:hover:text-surface-300",
+        "data-[state=active]:border-b-primary data-[state=active]:text-primary dark:data-[state=active]:border-b-primary dark:data-[state=active]:text-primary-dark",
+    );
+
     return <TabsPrimitive.Trigger value={value}
-                                  disabled={disabled}
-                                  className={cls(
-                                      "border-b-2 border-transparent",
-                                      "data-[state=active]:border-secondary",
-                                      disabled
-                                          ? "text-surface-accent-400 dark:text-surface-accent-500"
-                                          : cls("text-surface-accent-700 dark:text-surface-accent-300",
-                                              "data-[state=active]:text-surface-accent-900 data-[state=active]:dark:text-white",
-                                              "hover:text-surface-accent-800 dark:hover:text-surface-accent-200"),
-                                      className)}>
-        <div className={cls("line-clamp-1",
-            "uppercase inline-block p-2 px-4 rounded",
-            "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800",
+        disabled={disabled}
+        className={cls(
+            mode === "secondary" ? secondaryClasses : primaryClasses,
+            className,
             innerClassName)}>
-            {children}
-        </div>
+        {children}
     </TabsPrimitive.Trigger>;
 }

package/src/components/TextField.tsx

@@ -1,7 +1,6 @@
 "use client";
 import React, { ForwardedRef, forwardRef, useEffect, useRef } from "react";
 
-import { TextareaAutosize } from "./TextareaAutosize";
 import {
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
@@ -85,10 +84,16 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
 
         const inputRef = inputRefProp ?? useRef(null);
 
-        // @ts-ignore
-        const [focused, setFocused] = React.useState(document.activeElement === inputRef.current);
+        const [focused, setFocused] = React.useState(false);
         const hasValue = value !== undefined && value !== null && value !== "";
 
+        useEffect(() => {
+            // @ts-ignore
+            if (inputRef.current && document.activeElement === inputRef.current) {
+                setFocused(true);
+            }
+        }, []);
+
         useEffect(() => {
             if (type !== "number") return;
             const handleWheel = (event: any) => {
@@ -105,19 +110,21 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
         }, [inputRef, type]);
 
         const input = multiline ? (
-            <TextareaAutosize
+            <textarea
                 {...(inputProps as any)}
                 ref={inputRef}
                 placeholder={focused || hasValue || !label ? placeholder : undefined}
                 autoFocus={autoFocus}
-                minRows={minRows}
-                maxRows={maxRows}
+                rows={typeof minRows === "string" ? parseInt(minRows) : (minRows ?? 3)}
                 value={value ?? ""}
                 onChange={onChange}
+                onFocus={() => setFocused(true)}
+                onBlur={() => setFocused(false)}
                 style={inputStyle}
                 className={cls(
                     invisible ? focusedInvisibleMixin : "",
-                    "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
+                    "rounded-md resize-none w-full outline-none text-base bg-transparent min-h-[64px] px-3",
+                    label ? "pt-8 pb-2" : "py-2",
                     disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500",
                     inputClassName
                 )}
@@ -144,7 +151,11 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | numb
                         ? size === "large"
                             ? "pt-8 pb-2"
                             : "pt-4 pb-2"
-                        : "py-2",
+                        : size === "smallest"
+                            ? "py-0.5"
+                            : size === "small"
+                                ? "py-1"
+                                : "py-2",
                     endAdornment ? "pr-12" : "pr-3",
                     disabled &&
                     "outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white",