@firecms/ui 3.0.1 → 3.1.0-canary.24c8270

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",

package/src/components/ToggleButtonGroup.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import { cls } from "../util";
+
+export type ToggleButtonOption<T extends string = string> = {
+    value: T;
+    label: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+
+export type ToggleButtonGroupProps<T extends string = string> = {
+    /**
+     * Currently selected value
+     */
+    value: T;
+    /**
+     * Callback when value changes
+     */
+    onValueChange: (value: T) => void;
+    /**
+     * Options to display
+     */
+    options: ToggleButtonOption<T>[];
+    /**
+     * Additional class names for the container
+     */
+    className?: string;
+}
+
+/**
+ * A toggle button group component for selecting one option from a set.
+ * Displays options as buttons in a horizontal row with active state styling.
+ */
+export function ToggleButtonGroup<T extends string = string>({
+    value,
+    onValueChange,
+    options,
+    className
+}: ToggleButtonGroupProps<T>) {
+    return (
+        <div className={cls("inline-flex flex-row bg-surface-100 dark:bg-surface-800 rounded-lg p-1 gap-1", className)}>
+            {options.map((option) => (
+                <button
+                    key={option.value}
+                    type="button"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        if (!option.disabled) {
+                            onValueChange(option.value);
+                        }
+                    }}
+                    disabled={option.disabled}
+                    className={cls(
+                        "flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors",
+                        value === option.value
+                            ? "bg-white dark:bg-surface-950 text-primary dark:text-primary-300"
+                            : "text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700",
+                        option.disabled && "opacity-50 cursor-not-allowed"
+                    )}
+                >
+                    {option.icon}
+                    <span className="text-sm font-medium">{option.label}</span>
+                </button>
+            ))}
+        </div>
+    );
+}

package/src/components/Tooltip.tsx

@@ -4,6 +4,7 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cls } from "../util";
 import { useInjectStyles } from "../hooks";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type TooltipProps = {
     open?: boolean,
@@ -43,6 +44,12 @@ export const Tooltip = ({
 
     useInjectStyles("Tooltip", styles);
 
+    // Get the portal container from context
+    const contextContainer = usePortalContainer();
+
+    // Prioritize manual prop, fallback to context container
+    const finalContainer = (container ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
     if (!title)
         return <>{children}</>;
 
@@ -60,11 +67,11 @@ export const Tooltip = ({
         <TooltipPrimitive.Provider delayDuration={delayDuration}>
             <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
                 {trigger}
-                <TooltipPrimitive.Portal container={container}>
+                <TooltipPrimitive.Portal container={finalContainer}>
                     <TooltipPrimitive.Content
                         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",
                             tooltipClassName)}
                         style={tooltipStyle}
                         sideOffset={sideOffset === undefined ? 4 : sideOffset}

package/src/components/index.tsx

@@ -11,6 +11,7 @@ export * from "./Collapse";
 export * from "./CircularProgress";
 export * from "./Checkbox";
 export * from "./Chip";
+export * from "./ColorPicker";
 export * from "./DateTimeField";
 export * from "./Dialog";
 export * from "./DialogActions";
@@ -44,4 +45,5 @@ export * from "./Popover";
 export * from "./Badge";
 export * from "./DebouncedTextField";
 export * from "./Skeleton";
+export * from "./ToggleButtonGroup";
 

package/src/hooks/PortalContainerContext.tsx

@@ -0,0 +1,48 @@
+"use client";
+import React, { createContext, useContext } from "react";
+
+export interface PortalContainerContextType {
+    container: HTMLElement | null;
+}
+
+const PortalContainerContext = createContext<PortalContainerContextType | undefined>(undefined);
+
+export interface PortalContainerProviderProps {
+    container: HTMLElement | null;
+    children: React.ReactNode;
+}
+
+/**
+ * Provider component that sets the portal container for all descendants.
+ * This can be used at any level of the tree to specify where portals should be attached.
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ *
+ * <div ref={containerRef}>
+ *   <PortalContainerProvider container={containerRef.current}>
+ *     <YourComponents />
+ *   </PortalContainerProvider>
+ * </div>
+ * ```
+ */
+export function PortalContainerProvider({ container, children }: PortalContainerProviderProps) {
+    return (
+        <PortalContainerContext.Provider value={{ container }}>
+            {children}
+        </PortalContainerContext.Provider>
+    );
+}
+
+/**
+ * Hook to access the portal container from context.
+ * Returns null if no provider is found in the tree.
+ *
+ * @returns The portal container element or null
+ */
+export function usePortalContainer(): HTMLElement | null {
+    const context = useContext(PortalContainerContext);
+    return context?.container ?? null;
+}
+

package/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from "./useInjectStyles";
 export * from "./useOutsideAlerter";
 export * from "./useDebounceValue";
 export * from "./useIconStyles";
+export * from "./PortalContainerContext";

package/src/hooks/useInjectStyles.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useEffect } from "react";
+import { usePortalContainer } from "./PortalContainerContext";
 
 /**
  * Use this hook to create a `<style>` element and inject it into the DOM.
@@ -9,13 +10,21 @@ import { useEffect } from "react";
  */
 export function useInjectStyles(key: string, styles: string) {
 
+    const portalContainer = usePortalContainer();
+
     useEffect(() => {
-        const styleElement = document.getElementById(key);
-        if (!styleElement) {
+        if (typeof document === "undefined") return;
+
+        const targetContainer: HTMLElement | null = portalContainer ?? document.head;
+
+        // Try to find an existing style element within the target container first
+        const existingStyle = (targetContainer as HTMLElement).querySelector?.(`#${key}`) as HTMLStyleElement | null;
+
+        if (!existingStyle) {
             const style = document.createElement("style");
             style.id = key;
             style.innerHTML = styles;
-            document.head.appendChild(style);
+            (targetContainer || document.head).appendChild(style);
         }
     }, []);
 

package/src/hooks/useOutsideAlerter.tsx

@@ -5,7 +5,7 @@ import { RefObject, useEffect } from "react";
 /**
  * Hook that alerts clicks outside the passed ref
  */
-export function useOutsideAlerter(ref: RefObject<HTMLElement>, onOutsideClick: () => void, active = true): void {
+export function useOutsideAlerter(ref: RefObject<HTMLElement | null>, onOutsideClick: () => void, active = true): void {
     useEffect(() => {
         if (!active)
             return;

package/src/index.css

@@ -1,3 +1,59 @@
+@theme {
+    /* Font Families */
+    --font-sans: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    --font-headers: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
+
+    /* Colors */
+    --color-primary: #0070F4;
+    --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
+    --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
+    --color-secondary: #FF5B79;
+    --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
+    --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
+
+    --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
+    --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
+
+    /* Field Colors */
+    --color-field-disabled: rgb(224 224 226);
+    --color-field-disabled-dark: rgb(35 35 37);
+
+    /* Text Colors */
+    --color-text-primary: rgba(0, 0, 0, 0.87);
+    --color-text-secondary: rgba(0, 0, 0, 0.52);
+    --color-text-disabled: rgba(0, 0, 0, 0.38);
+    --color-text-primary-dark: #ffffff;
+    --color-text-secondary-dark: rgba(255, 255, 255, 0.6);
+    --color-text-disabled-dark: rgba(255, 255, 255, 0.48);
+
+    /* Surface Colors */
+    --color-surface-50: #f8f8fc;
+    --color-surface-100: #e7e7eb;
+    --color-surface-200: #cfcfd6;
+    --color-surface-300: #b7b7bf;
+    --color-surface-400: #a0a0a9;
+    --color-surface-500: #87878f;
+    --color-surface-600: #6b6b74;
+    --color-surface-700: #454552;
+    --color-surface-800: #292934;
+    --color-surface-900: #18181c;
+    --color-surface-950: #101013;
+
+    /* Surface Accent Colors */
+    --color-surface-accent-50: #f8fafc;
+    --color-surface-accent-100: #f1f5f9;
+    --color-surface-accent-200: #e2e8f0;
+    --color-surface-accent-300: #cbd5e1;
+    --color-surface-accent-400: #94a3b8;
+    --color-surface-accent-500: #64748b;
+    --color-surface-accent-600: #475569;
+    --color-surface-accent-700: #334155;
+    --color-surface-accent-800: #1e293b;
+    --color-surface-accent-900: #0f172a;
+    --color-surface-accent-950: #020617;
+}
+
 /* Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
     display: none;
@@ -63,12 +119,7 @@
     @apply text-sm font-semibold uppercase;
 }
 
-
 :focus-visible {
-    @apply 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
-}
-
-a {
-    @apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-transparent
 }
 

package/src/styles.ts

@@ -1,12 +1,12 @@
 export const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-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-surface-accent-200 dark:bg-surface-800 dark:bg-opacity-60";
-export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0";
-export const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90";
-export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
-export const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-export const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-export const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40";
-export const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 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";
+export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-800 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-800/60";
+export const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-2 ring-offset-transparent ";
+export const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-800 dark:bg-opacity-60 dark:bg-surface-800/60";
+export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-800 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-800/0";
+export const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-800/90";
+export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
+export const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40 ";
+export const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40 border-surface-200/40 dark:border-surface-700/40";
+export const cardMixin = "bg-white dark:bg-surface-950 rounded-md border border-surface-200/40 dark:border-surface-700/40 m-1 -p-1";
+export const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 ";
+export const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 bg-primary-bg/30 dark:bg-opacity-10 dark:bg-primary-bg/10 ring-1 ring-primary ring-opacity-75 ring-primary/75 bg-primary/10 dark:bg-primary/10 ring-1 ring-primary/75";

package/src/util/cls.ts

@@ -2,7 +2,7 @@ import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cls(...classes: ClassValue[]) {
-    return twMerge(clsx(classes))
+    return twMerge(clsx(classes));
 }
 
 /**

package/tailwind.config.js

@@ -36,9 +36,8 @@ export default {
                 ]
             },
             colors: {
-                "primary": "var(--fcms-primary)",
-                "primary-bg": "var(--fcms-primary-bg)",
-                "secondary": "var(--fcms-secondary)",
+                "primary": "var(--color-primary)",
+                "secondary": "var(--color-secondary)",
                 "field": {
                     "disabled": "rgb(224 224 226)",
                     "disabled-dark": "rgb(35 35 37)"