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

package/README.md

@@ -67,16 +67,18 @@ export default {
 Finally, you need to define your primary and secondary colors in your `index.css` file:
 
 ```css
-@import "@firecms/ui/index.css";
+@import 'tailwindcss';
+@import "@firecms/ui/index.css" layer(base);
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@source "../index.html";
+@source "./**/*.{js,ts,jsx,tsx}";
+@source "../node_modules/@firecms/**/*.{js,ts,jsx,tsx}";
 
 :root {
-    --fcms-primary: #0070F4;
-    --fcms-primary-bg: #0061e610;
-    --fcms-secondary: #FF5B79;
+    --color-primary: #0070F4;
+    --color-secondary: #FF5B79;
 }
 ```
 

package/dist/components/BooleanSwitchWithLabel.d.ts

@@ -9,9 +9,10 @@ export type BooleanSwitchWithLabelProps = BooleanSwitchProps & {
     fullWidth?: boolean;
     className?: string;
     inputClassName?: string;
+    switchAdornment?: React.ReactNode;
 };
 /**
  * Simple boolean switch.
  *
  */
-export declare const BooleanSwitchWithLabel: ({ value, position, size, invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth, inputClassName, ...props }: BooleanSwitchWithLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BooleanSwitchWithLabel: ({ value, position, size, invisible, onValueChange, error, label, autoFocus, disabled, className, fullWidth, inputClassName, switchAdornment, ...props }: BooleanSwitchWithLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Card.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 type CardProps = {
     children: React.ReactNode;
     style?: React.CSSProperties;
-    onClick?: () => void;
+    onClick?: (e?: React.MouseEvent) => void;
     className?: string;
 };
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Chip.d.ts

@@ -19,4 +19,4 @@ export interface ChipProps {
 /**
  * @group Preview components
  */
-export declare function Chip({ children, colorScheme, error, outlined, onClick, icon, size, className, style }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ColorPicker.d.ts

@@ -0,0 +1,30 @@
+import { ChipColorKey } from "./Chip";
+export interface ColorPickerProps {
+    /**
+     * Currently selected color key
+     */
+    value?: ChipColorKey;
+    /**
+     * Callback when color selection changes. Passes undefined when "Auto" is selected.
+     */
+    onChange: (colorKey: ChipColorKey | undefined) => void;
+    /**
+     * Size of the color swatches
+     */
+    size?: "small" | "medium";
+    /**
+     * Whether to show the "Auto" option that clears the selection
+     */
+    allowClear?: boolean;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * A color picker component that displays a grid of predefined CHIP_COLORS.
+ * Used for selecting colors for enum values, tags, and other chip-based UI elements.
+ *
+ * @group Form components
+ */
+export declare function ColorPicker({ value, onChange, size, allowClear, disabled }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/DateTimeField.d.ts

@@ -13,5 +13,12 @@ export type DateTimeFieldProps = {
     inputClassName?: string;
     invisible?: boolean;
     locale?: string;
+    /**
+     * IANA timezone string (e.g., "America/New_York", "Europe/London").
+     * Used to display and input dates in the specified timezone.
+     * The value passed to onChange will always be in UTC.
+     * If not provided, uses the user's local timezone.
+     */
+    timezone?: string;
 };
 export declare const DateTimeField: React.FC<DateTimeFieldProps>;

package/dist/components/Dialog.d.ts

@@ -19,6 +19,7 @@ export type DialogProps = {
      * If `true`, the dialog will not focus the first focusable element when opened.
      */
     disableInitialFocus?: boolean;
+    portalContainer?: HTMLElement | null;
 };
 declare const widthClasses: {
     xs: string;
@@ -34,5 +35,5 @@ declare const widthClasses: {
     "7xl": string;
     full: string;
 };
-export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, disableInitialFocus }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, disableInitialFocus, portalContainer }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/FileUpload.d.ts

@@ -18,6 +18,6 @@ export type FileUploadProps = {
     title?: React.ReactNode;
     uploadDescription?: React.ReactNode;
     preventDropOnDocument?: boolean;
-    size?: "medium" | "large";
+    size?: "small" | "medium" | "large";
 };
 export declare function FileUpload({ accept, onFilesAdded, onFilesRejected, maxSize, disabled, maxFiles, title, uploadDescription, children, preventDropOnDocument, size }: React.PropsWithChildren<FileUploadProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu.d.ts

@@ -16,7 +16,8 @@ export { Menu };
 export type MenuItemProps = {
     children: React.ReactNode;
     dense?: boolean;
+    disabled?: boolean;
     onClick?: (event: React.MouseEvent) => void;
     className?: string;
 };
-export declare const MenuItem: React.MemoExoticComponent<({ children, dense, onClick, className }: MenuItemProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const MenuItem: React.MemoExoticComponent<({ children, dense, disabled, onClick, className }: MenuItemProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/Menubar.d.ts

@@ -12,8 +12,9 @@ export declare function MenubarTrigger({ children, onSelect, className }: {
     onSelect?: (event: React.SyntheticEvent) => void;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function MenubarPortal({ children, }: {
+export declare function MenubarPortal({ children, portalContainer, }: {
     children: React.ReactNode;
+    portalContainer?: HTMLElement | null;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function MenubarContent({ children, className, align, sideOffset, alignOffset, onSelect, ...rest }: {
     children: React.ReactNode;

package/dist/components/MultiSelect.d.ts

@@ -31,11 +31,12 @@ interface MultiSelectProps<T extends MultiSelectValue = string> {
     multiple?: boolean;
     includeSelectAll?: boolean;
     includeClear?: boolean;
-    inputRef?: React.RefObject<HTMLButtonElement>;
+    inputRef?: React.RefObject<HTMLButtonElement | null>;
     padding?: boolean;
     invisible?: boolean;
     children: React.ReactNode;
     renderValues?: (values: T[]) => React.ReactNode;
+    portalContainer?: HTMLElement | null;
 }
 export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps<string> & React.RefAttributes<HTMLButtonElement>>;
 export interface MultiSelectItemProps<T extends MultiSelectValue = string> {

package/dist/components/ResizablePanels.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export type ResizablePanelsProps = {
+    firstPanel: React.ReactNode;
+    secondPanel: React.ReactNode;
+    /** Whether the first panel is visible (e.g. Sidebar) */
+    showFirstPanel?: boolean;
+    /** Whether the second panel is visible (e.g. Results) */
+    showSecondPanel?: boolean;
+    /** 0-100 representing the width/height of the first panel */
+    panelSizePercent: number;
+    onPanelSizeChange: (sizePercent: number) => void;
+    minPanelSizePx?: number;
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+};
+export declare function ResizablePanels({ firstPanel, secondPanel, showFirstPanel, showSecondPanel, panelSizePercent, onPanelSizeChange, minPanelSizePx, orientation, className }: ResizablePanelsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchBar.d.ts

@@ -4,6 +4,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;
@@ -12,5 +22,5 @@ interface SearchBarProps {
     loading?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
 }
-export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, large, innerClassName, className, autoFocus, disabled, loading, inputRef }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, size, large, innerClassName, className, autoFocus, disabled, loading, inputRef }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SearchableSelect.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+export interface SearchableSelectProps {
+    /** Currently selected value. Can be one of the items or a custom string. */
+    value?: string;
+    /** Callback when the value changes (from selection or custom input). */
+    onValueChange?: (value: string) => void;
+    /** Placeholder shown when no value is selected. */
+    placeholder?: string;
+    /** Label above the field. */
+    label?: React.ReactNode | string;
+    /** Size variant. */
+    size?: "smallest" | "small" | "medium" | "large";
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Whether to show an error state. */
+    error?: boolean;
+    /** Whether to use the invisible (borderless) style. */
+    invisible?: boolean;
+    /** CSS class for the trigger button. */
+    className?: string;
+    /** CSS class for the trigger input area. */
+    inputClassName?: string;
+    /** Render the selected value in a custom way in the trigger. */
+    renderValue?: (value: string) => React.ReactNode;
+    /** Whether the popover should trap focus. */
+    modalPopover?: boolean;
+    /** If true, allow accepting the typed text as the value even if it doesn't match an item. */
+    allowCustomValues?: boolean;
+    /** Portal container element. */
+    portalContainer?: HTMLElement | null;
+    /** If true, auto-open the popover on mount so the user can start typing immediately. */
+    autoFocus?: boolean;
+    /** The option items — use SearchableSelectItem. */
+    children: React.ReactNode;
+}
+export interface SearchableSelectItemProps {
+    value: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const SearchableSelect: React.ForwardRefExoticComponent<SearchableSelectProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A single option inside a SearchableSelect.
+ * The `value` prop is the string value that gets selected.
+ * The `children` is what's displayed in the dropdown.
+ * This component is not rendered directly — SearchableSelect reads its props.
+ */
+export declare function SearchableSelectItem(_props: SearchableSelectItemProps): null;

package/dist/components/Select.d.ts

@@ -20,11 +20,12 @@ 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;
 };
 export declare const Select: React.ForwardRefExoticComponent<SelectProps<string> & React.RefAttributes<HTMLDivElement>>;
 export type SelectItemProps<T extends SelectValue = string> = {

package/dist/components/Sheet.d.ts

@@ -13,6 +13,7 @@ interface SheetProps {
     style?: React.CSSProperties;
     overlayClassName?: string;
     overlayStyle?: React.CSSProperties;
+    portalContainer?: HTMLElement | null;
 }
 export declare const Sheet: React.FC<SheetProps>;
 export {};

package/dist/components/Tabs.d.ts

@@ -1,12 +1,18 @@
 import React from "react";
+type TabsMode = "primary" | "secondary";
 export type TabsProps = {
     value: string;
     children: React.ReactNode;
     innerClassName?: string;
     className?: string;
     onValueChange: (value: string) => void;
+    /**
+     * "primary" renders the default pill-style tabs.
+     * "secondary" renders underline-style tabs suitable for inner/nested panels.
+     */
+    mode?: TabsMode;
 };
-export declare function Tabs({ value, onValueChange, className, innerClassName, children }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tabs({ value, onValueChange, className, innerClassName, children, mode }: TabsProps): import("react/jsx-runtime").JSX.Element;
 export type TabProps = {
     value: string;
     className?: string;
@@ -15,3 +21,4 @@ export type TabProps = {
     disabled?: boolean;
 };
 export declare function Tab({ value, className, innerClassName, children, disabled }: TabProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ToggleButtonGroup.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+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 declare function ToggleButtonGroup<T extends string = string>({ value, onValueChange, options, className }: ToggleButtonGroupProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip.d.ts

@@ -15,5 +15,21 @@ export type TooltipProps = {
     className?: string;
     container?: HTMLElement;
     style?: React.CSSProperties;
-};
-export declare const Tooltip: ({ open, defaultOpen, side, delayDuration, sideOffset, align, onOpenChange, title, tooltipClassName, tooltipStyle, children, asChild, container, className, style }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "title">;
+export declare const Tooltip: React.ForwardRefExoticComponent<{
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    title?: string | React.ReactNode;
+    delayDuration?: number;
+    asChild?: boolean;
+    tooltipClassName?: string;
+    tooltipStyle?: React.CSSProperties;
+    children: React.ReactNode;
+    className?: string;
+    container?: HTMLElement;
+    style?: React.CSSProperties;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/index.d.ts

@@ -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";
@@ -29,7 +30,9 @@ export * from "./Menubar";
 export * from "./MultiSelect";
 export * from "./Paper";
 export * from "./RadioGroup";
+export * from "./ResizablePanels";
 export * from "./SearchBar";
+export * from "./SearchableSelect";
 export * from "./Select";
 export * from "./Separator";
 export * from "./Slider";
@@ -44,3 +47,4 @@ export * from "./Popover";
 export * from "./Badge";
 export * from "./DebouncedTextField";
 export * from "./Skeleton";
+export * from "./ToggleButtonGroup";

package/dist/hooks/PortalContainerContext.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+export interface PortalContainerContextType {
+    container: HTMLElement | null;
+}
+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 declare function PortalContainerProvider({ container, children }: PortalContainerProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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 declare function usePortalContainer(): HTMLElement | null;

package/dist/hooks/index.d.ts

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

package/dist/hooks/useOutsideAlerter.d.ts

@@ -2,4 +2,4 @@ import { RefObject } from "react";
 /**
  * Hook that alerts clicks outside the passed ref
  */
-export declare function useOutsideAlerter(ref: RefObject<HTMLElement>, onOutsideClick: () => void, active?: boolean): void;
+export declare function useOutsideAlerter(ref: RefObject<HTMLElement | null>, onOutsideClick: () => void, active?: boolean): void;

package/dist/icons/FirestoreIcon.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from "./Icon";
+/**
+ * Firebase Firestore flame icon (monochrome, uses currentColor).
+ * @group Icons
+ */
+export declare function FirestoreIcon(props: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/icons/components/DatabaseIcon.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { IconProps } from "../Icon";
+/**
+ * @group Icons
+ */
+export declare const DatabaseIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/icons/index.d.ts

@@ -3,6 +3,7 @@ export * from "./cool_icon_keys";
 export * from "./Icon";
 export * from "./GitHubIcon";
 export * from "./HandleIcon";
+export * from "./FirestoreIcon";
 export * from "./components/_10kIcon";
 export * from "./components/_10mpIcon";
 export * from "./components/_11mpIcon";
@@ -522,6 +523,7 @@ export * from "./components/DataThresholdingIcon";
 export * from "./components/DataUsageIcon";
 export * from "./components/DatasetIcon";
 export * from "./components/DatasetLinkedIcon";
+export * from "./components/DatabaseIcon";
 export * from "./components/DateRangeIcon";
 export * from "./components/DeblurIcon";
 export * from "./components/DeckIcon";

package/dist/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
 }