@firecms/ui 3.0.1 → 3.1.0-canary.7d91b7c

package/src/components/SearchBar.tsx

@@ -12,6 +12,16 @@ interface SearchBarProps {
     onTextSearch?: (searchString?: string) => void;
     placeholder?: string;
     expandable?: boolean;
+    /**
+     * Size of the search bar.
+     * - "small": 32px height (matches TextField small)
+     * - "medium": 44px height (matches TextField medium)
+     * @default "medium"
+     */
+    size?: "small" | "medium";
+    /**
+     * @deprecated Use size="medium" or size="small" instead. This prop will be removed in a future version.
+     */
     large?: boolean;
     innerClassName?: string;
     className?: string;
@@ -22,18 +32,19 @@ interface SearchBarProps {
 }
 
 export function SearchBar({
-                              onClick,
-                              onTextSearch,
-                              placeholder = "Search",
-                              expandable = false,
-                              large = false,
-                              innerClassName,
-                              className,
-                              autoFocus,
-                              disabled,
-                              loading,
-                              inputRef
-                          }: SearchBarProps) {
+    onClick,
+    onTextSearch,
+    placeholder = "Search",
+    expandable = false,
+    size = "medium",
+    large,
+    innerClassName,
+    className,
+    autoFocus,
+    disabled,
+    loading,
+    inputRef
+}: SearchBarProps) {
 
     const [searchText, setSearchText] = useState<string>("");
     const [active, setActive] = useState<boolean>(false);
@@ -58,18 +69,23 @@ export function SearchBar({
         onTextSearch(undefined);
     }, [onTextSearch]);
 
+    // Height classes matching TextField sizes
+    const heightClass = size === "small" ? "h-[36px]" : "h-[44px]";
+    const iconPaddingClass = size === "small" ? "px-2" : "px-4";
+    const inputPaddingClass = size === "small" ? "pl-8" : "pl-12";
+
     return (
         <div
             onClick={onClick}
             className={cls("relative",
-                large ? "h-14" : "h-[44px]",
+                heightClass,
                 "bg-surface-accent-50 dark:bg-surface-800 border",
                 defaultBorderMixin,
                 "rounded-lg",
                 className)}>
             <div
-                className="absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0">
-                {loading ? <CircularProgress size={"smallest"}/> : <SearchIcon className={"text-text-disabled dark:text-text-disabled-dark"}/>}
+                className={cls("absolute p-0 h-full pointer-events-none flex items-center justify-center top-0", iconPaddingClass)}>
+                {loading ? <CircularProgress size={"smallest"} /> : <SearchIcon className={"text-text-disabled dark:text-text-disabled-dark"} size={size === "small" ? "small" : "medium"} />}
             </div>
             <input
                 value={searchText ?? ""}
@@ -89,18 +105,20 @@ export function SearchBar({
                     (disabled || loading) && "pointer-events-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 ",
+                    inputPaddingClass, "h-full text-current",
+                    size === "small" ? "text-sm" : "",
                     expandable ? (active ? "w-[220px]" : "w-[180px]") : "",
                     innerClassName
                 )}
             />
             {searchText
                 ? <IconButton
-                    className={`${large ? "mr-2 top-1" : "mr-1 top-0"} absolute right-0 z-10`}
+                    className={`${size === "small" ? "mr-0 top-0" : "mr-1 top-0"} absolute right-0 z-10`}
+                    size={"small"}
                     onClick={clearText}>
-                    <CloseIcon size={"small"}/>
+                    <CloseIcon size={"smallest"} />
                 </IconButton>
-                : <div style={{ width: 26 }}/>
+                : <div style={{ width: 26 }} />
             }
         </div>
     );

package/src/components/Select.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { ChangeEvent, Children, forwardRef, useCallback, useEffect, useState } from "react";
+import React, { ChangeEvent, Children, forwardRef, useCallback, useEffect, useMemo, useState } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import {
     defaultBorderMixin,
@@ -12,6 +12,7 @@ import {
 import { CheckIcon, KeyboardArrowDownIcon } from "../icons";
 import { cls } from "../util";
 import { SelectInputLabel } from "./common/SelectInputLabel";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 export type SelectValue = string | number | boolean;
 
@@ -35,40 +36,42 @@ export type SelectProps<T extends SelectValue = string> = {
     error?: boolean,
     position?: "item-aligned" | "popper",
     endAdornment?: React.ReactNode,
-    inputRef?: React.RefObject<HTMLButtonElement>,
+    inputRef?: React.RefObject<HTMLButtonElement | null>,
     padding?: boolean,
     invisible?: boolean,
     children?: React.ReactNode;
     dataType?: "string" | "number" | "boolean";
+    portalContainer?: HTMLElement | null; // Explicitly added to props type if missing
 };
 
 export const Select = forwardRef<HTMLDivElement, SelectProps>(({
-                                                                   inputRef,
-                                                                   open,
-                                                                   name,
-                                                                   fullWidth = false,
-                                                                   id,
-                                                                   onOpenChange,
-                                                                   value,
-                                                                   onChange,
-                                                                   onValueChange,
-                                                                   className,
-                                                                   inputClassName,
-                                                                   viewportClassName,
-                                                                   placeholder,
-                                                                   renderValue,
-                                                                   label,
-                                                                   size = "large",
-                                                                   error,
-                                                                   disabled,
-                                                                   padding = true,
-                                                                   position = "item-aligned",
-                                                                   endAdornment,
-                                                                   invisible,
-                                                                   children,
-                                                                   dataType = "string",
-                                                                   ...props
-                                                               }, ref) => {
+    inputRef,
+    open,
+    name,
+    fullWidth = false,
+    id,
+    onOpenChange,
+    value,
+    onChange,
+    onValueChange,
+    className,
+    inputClassName,
+    viewportClassName,
+    placeholder,
+    renderValue,
+    label,
+    size = "large",
+    error,
+    disabled,
+    padding = true,
+    position = "item-aligned",
+    endAdornment,
+    invisible,
+    children,
+    dataType = "string",
+    portalContainer: manualContainer, // Rename to avoid confusion
+    ...props
+}, ref) => {
 
     const [openInternal, setOpenInternal] = useState(open ?? false);
 
@@ -76,8 +79,13 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
         setOpenInternal(open ?? false);
     }, [open]);
 
-    const onValueChangeInternal = useCallback((newValue: string) => {
+    // Get the portal container from context
+    const contextContainer = usePortalContainer();
+
+    // Resolve final container (Manual Prop > Context Container > Undefined/Body)
+    const finalContainer = (manualContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
 
+    const onValueChangeInternal = useCallback((newValue: string) => {
         let typedValue: SelectValue = newValue;
         if (dataType === "boolean") {
             if (newValue === "true") typedValue = true;
@@ -96,23 +104,22 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             } as unknown as ChangeEvent<HTMLSelectElement>;
             onChange(event);
         }
-    }, [onChange, onValueChange, name]);
+    }, [onChange, onValueChange, name, dataType]);
 
     const hasValue = Array.isArray(value) ? value.length > 0 : (value != null && value !== "" && value !== undefined);
-    // Convert non-string values to strings for Radix UI
     const stringValue = value !== undefined ? String(value) : undefined;
 
-    const selectedChild = React.useMemo(() => {
+    const displayChildren = useMemo(() => {
         if (!hasValue || renderValue) return null;
-        // @ts-ignore
-        const childrenProps: SelectItemProps[] = Children.map(children, (child) => {
-            if (React.isValidElement(child)) {
-                return child.props;
-            }
-        }).filter(Boolean);
 
-        const option = childrenProps.find((o) => String(o.value) === String(value));
-        return option?.children;
+        // Find the child that matches the current value to display its content
+        let found: React.ReactNode = null;
+        Children.forEach(children, (child) => {
+            if (React.isValidElement<SelectItemProps>(child) && String(child.props.value) === String(value)) {
+                found = child.props.children;
+            }
+        });
+        return found;
     }, [children, hasValue, renderValue, value]);
 
     return (
@@ -155,6 +162,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                             "px-3": size === "medium",
                             "px-2": size === "small" || size === "smallest",
                         } : "",
+                        "outline-hidden focus:outline-hidden",
                         "outline-none focus:outline-none",
                         "select-none rounded-md text-sm",
                         error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
@@ -184,28 +192,30 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                                 "min-h-[64px]": size === "large"
                             }
                         )}>
-                            <SelectPrimitive.Value
-                                onClick={(e) => {
-                                    e.preventDefault();
-                                    e.stopPropagation();
-                                }}
-                                placeholder={placeholder}
-                                className={"w-full"}>
-                                {hasValue && value !== undefined && renderValue ? renderValue(value) : placeholder}
-                                {/*{hasValue && !renderValue && value}*/}
-                                {hasValue && !renderValue && selectedChild}
+                        <SelectPrimitive.Value
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                            }}
+                            placeholder={placeholder}
+                            className={"w-full"}>
 
-                            </SelectPrimitive.Value>
-                        </div>
+                            {hasValue && value !== undefined && renderValue
+                                ? renderValue(value)
+                                : (displayChildren || placeholder)
+                            }
+
+                        </SelectPrimitive.Value>
+                    </div>
 
-                        <SelectPrimitive.Icon asChild>
-                            <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
-                                                   className={cls("transition", open ? "rotate-180" : "", {
-                                                       "px-2": size === "large",
-                                                       "px-1": size === "medium" || size === "small",
-                                                   })}/>
-                        </SelectPrimitive.Icon>
-                 </SelectPrimitive.Trigger>
+                    <SelectPrimitive.Icon asChild>
+                        <KeyboardArrowDownIcon size={size === "large" ? "medium" : "small"}
+                            className={cls("transition", open ? "rotate-180" : "", {
+                                "px-2": size === "large",
+                                "px-1": size === "medium" || size === "small",
+                            })} />
+                    </SelectPrimitive.Icon>
+                </SelectPrimitive.Trigger>
 
                 {endAdornment && (
                     <div
@@ -218,11 +228,13 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                     </div>
                 )}
             </div>
-            <SelectPrimitive.Portal>
+
+            {/* Pass the calculated finalContainer */}
+            <SelectPrimitive.Portal container={finalContainer}>
                 <SelectPrimitive.Content position={position}
-                                         className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin)}>
+                    className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin)}>
                     <SelectPrimitive.Viewport className={cls("p-1", viewportClassName)}
-                                              style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
+                        style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
                         {children}
                     </SelectPrimitive.Viewport>
                 </SelectPrimitive.Content>
@@ -233,6 +245,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
 
 Select.displayName = "Select";
 
+// ... (SelectItem and SelectGroup remain unchanged)
 export type SelectItemProps<T extends SelectValue = string> = {
     value: T,
     children?: React.ReactNode,
@@ -241,11 +254,11 @@ export type SelectItemProps<T extends SelectValue = string> = {
 };
 
 export const SelectItem = React.memo(function SelectItem<T extends SelectValue = string>({
-                                                               value,
-                                                               children,
-                                                               disabled,
-                                                               className
-                                                           }: SelectItemProps<T>) {
+    value,
+    children,
+    disabled,
+    className
+}: SelectItemProps<T>) {
     // Convert value to string for Radix UI
     const stringValue = String(value);
 
@@ -267,7 +280,7 @@ export const SelectItem = React.memo(function SelectItem<T extends SelectValue =
         <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
         <div
             className="absolute left-1 data-[state=checked]:block hidden">
-            <CheckIcon size={16}/>
+            <CheckIcon size={16} />
         </div>
     </SelectPrimitive.Item>;
 });
@@ -279,10 +292,10 @@ export type SelectGroupProps = {
 };
 
 export const SelectGroup = React.memo(function SelectGroup({
-                                label,
-                                children,
-                                className
-                            }: SelectGroupProps) {
+    label,
+    children,
+    className
+}: SelectGroupProps) {
     return <>
         <SelectPrimitive.Group
             className={cls(

package/src/components/Separator.tsx

@@ -15,12 +15,12 @@ export function Separator({
             <SeparatorPrimitive.Root
                 decorative={decorative}
                 orientation="horizontal"
-                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)}/>
+                className={cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 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={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)}
+                className={cls("dark:bg-opacity-80 dark:bg-surface-800 dark:bg-surface-800/80 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

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import { cls } from "../util";
 import { defaultBorderMixin } from "../styles";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { usePortalContainer } from "../hooks/PortalContainerContext";
 
 interface SheetProps {
     children: React.ReactNode;
@@ -18,6 +19,7 @@ interface SheetProps {
     style?: React.CSSProperties;
     overlayClassName?: string;
     overlayStyle?: React.CSSProperties;
+    portalContainer?: HTMLElement | null;
 }
 
 export const Sheet: React.FC<SheetProps> = ({
@@ -33,10 +35,17 @@ export const Sheet: React.FC<SheetProps> = ({
                                                 style,
                                                 overlayClassName,
                                                 overlayStyle,
+                                                portalContainer,
                                                 ...props
                                             }) => {
     const [displayed, setDisplayed] = useState(false);
 
+    // Get the portal container from context
+    const contextContainer = usePortalContainer();
+
+    // Prioritize manual prop, fallback to context container
+    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
+
     useEffect(() => {
         const timeout = setTimeout(() => {
             setDisplayed(open);
@@ -62,7 +71,7 @@ export const Sheet: React.FC<SheetProps> = ({
         <DialogPrimitive.Root open={displayed || open}
                               modal={modal}
                               onOpenChange={onOpenChange}>
-            <DialogPrimitive.Portal>
+            <DialogPrimitive.Portal container={finalContainer}>
                 <DialogPrimitive.Title autoFocus tabIndex={0}>
                     {title ?? "Sheet"}
                 </DialogPrimitive.Title>
@@ -70,8 +79,8 @@ export const Sheet: React.FC<SheetProps> = ({
                     className={cls(
                         "outline-none",
                         "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",
+                        "bg-black bg-opacity-50 bg-black/50",
+                        "dark:bg-surface-900 dark:bg-opacity-60 dark:bg-surface-900/60",
                         displayed && open ? "opacity-100" : "opacity-0",
                         overlayClassName
                     )}

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,6 +1,7 @@
 import React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cls } from "../util";
+import { defaultBorderMixin } from "../styles";
 
 export type TabsProps = {
     value: string,
@@ -17,11 +18,12 @@ export function Tabs({
                          innerClassName,
                          children
                      }: TabsProps) {
-
     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",
+            "border",
+            defaultBorderMixin,
+            "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",
             innerClassName)
         }>
             {children}
@@ -47,19 +49,14 @@ export function Tab({
     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",
-            innerClassName)}>
-            {children}
-        </div>
+                                      "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",
+                                      // "data-[state=active]:border",
+                                      // defaultBorderMixin,
+                                      className,
+                                      innerClassName)}>
+        {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",

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>
+    );
+}