@firecms/ui 3.3.0-canary.d3242eb → 3.4.0-canary.63041d0

package/dist/components/Card.d.ts

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

package/dist/components/Checkbox.d.ts

@@ -8,5 +8,6 @@ export interface CheckboxProps {
     padding?: boolean;
     size?: "smallest" | "small" | "medium" | "large";
     color?: "primary" | "secondary";
+    "aria-label"?: string;
 }
-export declare const Checkbox: React.MemoExoticComponent<({ id, checked, indeterminate, padding, disabled, size, onCheckedChange, color }: CheckboxProps) => React.JSX.Element>;
+export declare const Checkbox: React.MemoExoticComponent<({ id, checked, indeterminate, padding, disabled, size, onCheckedChange, color, "aria-label": ariaLabel }: CheckboxProps) => React.JSX.Element>;

package/dist/components/Chip.d.ts

@@ -3,12 +3,16 @@ import { CHIP_COLORS } from "../util";
 export type ChipColorScheme = {
     color: string;
     text: string;
+    /** Background color override for dark mode. Falls back to `color`. */
+    darkColor?: string;
+    /** Text color override for dark mode. Falls back to `text`. */
+    darkText?: string;
 };
 export type ChipColorKey = keyof typeof CHIP_COLORS;
 export interface ChipProps {
     className?: string;
     children: React.ReactNode;
-    size?: "small" | "medium" | "large";
+    size?: "smallest" | "small" | "medium" | "large";
     colorScheme?: ChipColorScheme | ChipColorKey;
     error?: boolean;
     outlined?: boolean;

package/dist/components/Dialog.d.ts

@@ -20,6 +20,7 @@ export type DialogProps = {
      */
     disableInitialFocus?: boolean;
     portalContainer?: HTMLElement | null;
+    "aria-describedby"?: string;
 };
 declare const widthClasses: {
     xs: string;
@@ -35,5 +36,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, portalContainer }: DialogProps) => React.JSX.Element;
+export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, disableInitialFocus, portalContainer, "aria-describedby": ariaDescribedby }: DialogProps) => React.JSX.Element;
 export {};

package/dist/components/FilterChip.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+export interface FilterChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /**
+     * The text label displayed on the chip.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the chip is currently in an active/selected state.
+     */
+    active?: boolean;
+    /**
+     * Optional icon rendered before the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Size variant.
+     * @default "medium"
+     */
+    size?: "small" | "medium";
+    /**
+     * Whether the chip is disabled.
+     */
+    disabled?: boolean;
+}
+/**
+ * A toggle chip used for filter presets and similar multi-select controls.
+ *
+ * Uses an inset box-shadow for the active ring instead of `border` so the
+ * chip size stays stable across states and the ring cannot be clipped by
+ * parent `overflow-hidden` containers.
+ *
+ * @group Interactive components
+ */
+export declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/IconButton.d.ts

@@ -7,5 +7,6 @@ export type IconButtonProps<C extends React.ElementType> = Omit<(C extends "butt
     toggled?: boolean;
     component?: C;
     onClick?: React.MouseEventHandler<any>;
+    "aria-label"?: string;
 };
 export declare const IconButton: React.ComponentType<IconButtonProps<any>>;

package/dist/components/Popover.d.ts

@@ -18,5 +18,7 @@ export interface PopoverProps {
     modal?: boolean;
     className?: string;
     portalContainer?: HTMLElement | null;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 }
-export declare function Popover({ trigger, children, open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, modal, portalContainer, className }: PopoverProps): React.JSX.Element;
+export declare function Popover({ trigger, children, open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, modal, portalContainer, className, onMouseEnter, onMouseLeave }: PopoverProps): React.JSX.Element;

package/dist/components/SearchBar.d.ts

@@ -3,6 +3,13 @@ interface SearchBarProps {
     onClick?: () => void;
     onTextSearch?: (searchString?: string) => void;
     placeholder?: string;
+    /**
+     * Text the input is initialised with. Use it when the search term is restored from
+     * somewhere else, e.g. a URL query parameter, so that the input reflects the search
+     * that is actually being applied. Only read when the component mounts; the search bar
+     * owns the text from then on.
+     */
+    initialValue?: string;
     expandable?: boolean;
     /**
      * Size of the search bar.
@@ -22,5 +29,5 @@ interface SearchBarProps {
     loading?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
 }
-export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, size, large, innerClassName, className, autoFocus, disabled, loading, inputRef }: SearchBarProps): React.JSX.Element;
+export declare function SearchBar({ onClick, onTextSearch, placeholder, initialValue, expandable, size, large, innerClassName, className, autoFocus, disabled, loading, inputRef }: SearchBarProps): React.JSX.Element;
 export {};

package/dist/components/Select.d.ts

@@ -20,7 +20,7 @@ export type SelectProps<T extends SelectValue = string> = {
     error?: boolean;
     position?: "item-aligned" | "popper";
     endAdornment?: React.ReactNode;
-    inputRef?: React.RefObject<HTMLButtonElement | null>;
+    inputRef?: React.Ref<HTMLButtonElement>;
     padding?: boolean;
     invisible?: boolean;
     children?: React.ReactNode;

package/dist/components/TextField.d.ts

@@ -27,7 +27,7 @@ export type TextFieldProps<T extends string | number> = {
      * @default 1
      */
     minRows?: number | string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value">;
 export declare const TextField: React.ForwardRefExoticComponent<{
     type?: InputType;
     value?: string | number | undefined;
@@ -55,4 +55,4 @@ export declare const TextField: React.ForwardRefExoticComponent<{
      * @default 1
      */
     minRows?: number | string;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLDivElement>>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "size"> & 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 "./FilterChip";
 export * from "./ColorPicker";
 export * from "./DateTimeField";
 export * from "./Dialog";

package/dist/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./useInjectStyles";
 export * from "./useOutsideAlerter";
 export * from "./useDebounceValue";
+export * from "./useDebounceCallback";
 export * from "./useIconStyles";
 export * from "./PortalContainerContext";

package/dist/hooks/useDebounceCallback.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns a debounced version of the provided callback. The returned function
+ * keeps the same signature as the input callback; each invocation resets the
+ * timer, so the wrapped callback only runs once calls stop for `delay` ms.
+ *
+ * Unlike {@link useDebounceValue}, which debounces a *value*, this debounces a
+ * *function call* — useful for search inputs, autosave, resize handlers, etc.
+ *
+ * @param callback the function to debounce. May be undefined.
+ * @param delay debounce delay in milliseconds. Defaults to 200ms.
+ * @group Hooks
+ */
+export declare function useDebounceCallback<T extends (...args: any[]) => unknown>(callback?: T, delay?: number): T;

package/dist/index.css

@@ -19,26 +19,26 @@
     --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);
+    /* Text Colors — using opaque values so icon strokes render solidly */
+    --color-text-primary: #212121;
+    --color-text-secondary: #757575;
+    --color-text-disabled: #9e9e9e;
     --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);
+    --color-text-secondary-dark: #a0a0a9;
+    --color-text-disabled-dark: #757580;
 
     /* 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;
+    --color-surface-50: #fafafa;
+    --color-surface-100: #f5f5f5;
+    --color-surface-200: #e5e5e5;
+    --color-surface-300: #d4d4d4;
+    --color-surface-400: #a3a3a3;
+    --color-surface-500: #737373;
+    --color-surface-600: #404040;
+    --color-surface-700: #2e2e33;
+    --color-surface-800: #1f1f23;
+    --color-surface-900: #131316;
+    --color-surface-950: #0d0d0f;
 
     /* Surface Accent Colors */
     --color-surface-accent-50: #f8fafc;
@@ -50,8 +50,18 @@
     --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;
+    --color-surface-accent-900: #172033;
+    --color-surface-accent-950: #0f172a;
+}
+
+/* Native UI (scrollbars, form controls) must follow the active theme,
+   otherwise Chrome renders light scrollbars in dark mode */
+html {
+    color-scheme: light;
+}
+
+html.dark {
+    color-scheme: dark;
 }
 
 /* Chrome, Safari and Opera */
@@ -65,50 +75,51 @@
 }
 
 .typography-h1 {
-    @apply text-6xl font-headers font-light tracking-tight;
+    @apply text-4xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h2 {
-    @apply text-5xl font-headers font-light tracking-tight;
+    @apply text-3xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h3 {
-    @apply text-4xl font-headers font-normal tracking-tight;
+    @apply text-2xl font-headers font-semibold tracking-tight;
 }
 
 .typography-h4 {
-    @apply text-3xl font-headers font-normal tracking-tight;
+    @apply text-xl font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h5 {
-    @apply text-2xl font-headers font-normal;
+    @apply text-lg font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-h6 {
-    @apply text-xl font-headers font-medium;
+    @apply text-base font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle1 {
-    @apply text-lg font-headers font-medium;
+    @apply text-sm font-headers font-semibold tracking-[-0.01em];
 }
 
 .typography-subtitle2 {
-    @apply text-base font-headers font-medium;
+    @apply text-sm font-headers font-medium;
 }
 
 .typography-body1 {
+    @apply text-sm;
 }
 
 .typography-body2 {
-    @apply text-sm;
+    @apply text-xs;
 }
 
 .typography-caption {
-    @apply text-xs;
+    @apply text-[11px] leading-[1.4];
 }
 
 .typography-label {
-    @apply text-sm font-medium;
+    @apply text-xs font-medium tracking-wide;
 }
 
 .typography-inherit {
@@ -116,10 +127,10 @@
 }
 
 .typography-button {
-    @apply text-sm font-semibold uppercase;
+    @apply text-sm font-semibold tracking-wide;
 }
 
 :focus-visible {
-    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-transparent
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:ring-offset-transparent
 }