@firecms/ui 3.0.1 → 3.1.0-canary.9e89e98

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/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/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

@@ -36,6 +36,7 @@ interface MultiSelectProps<T extends MultiSelectValue = string> {
     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/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/Select.d.ts

@@ -25,6 +25,7 @@ export type SelectProps<T extends SelectValue = string> = {
     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/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/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";
@@ -44,3 +45,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/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
 }