@frontify/fondue-components 3.1.0 → 3.2.0

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { AriaAttributes } from 'react';
 import { ChangeEvent } from 'react';
 import { FormEvent } from 'react';
 import { ForwardedRef } from 'react';
@@ -10,6 +11,36 @@ import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SyntheticEvent } from 'react';
 
+declare type AriaLabelAttrs = Pick<AriaAttributes, 'aria-label'> & Pick<AriaAttributes, 'aria-labelledby'>;
+
+declare type AtLeastOneAriaLabelAttr = AtLeastOneAttr<AriaLabelAttrs>;
+
+declare type AtLeastOneAttr<T> = Partial<T> & {
+    [K in keyof T]-?: Required<Pick<T, K>>;
+}[keyof T];
+
+export declare const Box: {
+    ({ as: Component, "data-test-id": dataTestId, children, ...props }: BoxProps): JSX_2.Element;
+    displayName: string;
+};
+
+declare type BoxProps = LayoutComponentProps & {
+    /**
+     * The element to render the Box component as.
+     * @default 'div'
+     */
+    as?: 'div' | 'span';
+    /**
+     * The display property.
+     * @default 'block'
+     */
+    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;
+    children?: ReactNode;
+    'data-test-id'?: string;
+} & CommonAriaProps;
+
+declare type Breakpoint = keyof typeof screens;
+
 export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement | null>>;
 
 declare type ButtonAspect = 'default' | 'square';
@@ -129,6 +160,54 @@ declare type CheckboxProps = {
     'aria-describedby'?: string;
 };
 
+declare type ColorFormat = 'HEX' | 'RGBA';
+
+export declare const ColorPicker: {
+    Root: ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>>;
+    Values: ForwardRefExoticComponent<    {
+    currentColor?: RgbaColor;
+    onColorChange?: (color: RgbaColor) => void;
+    currentFormat?: "HEX" | "RGBA";
+    setCurrentFormat?: (format: "HEX" | "RGBA") => void;
+    'data-test-id'?: string;
+    } & RefAttributes<HTMLDivElement>>;
+    Gradient: ForwardRefExoticComponent<    {
+    currentColor?: RgbaColor;
+    onColorChange?: (color: RgbaColor) => void;
+    'data-test-id'?: string;
+    } & RefAttributes<HTMLDivElement>>;
+    Input: ForwardRefExoticComponent<({
+    currentColor?: RgbaColor;
+    isOpen?: boolean;
+    onClear?: () => void;
+    'data-test-id'?: string;
+    } & CommonAriaAttrs) & RefAttributes<HTMLDivElement>>;
+};
+
+declare type ColorPickerProps = {
+    /**
+     * The children of the color picker component. This can contain multiple `ColorPicker.Values` or `ColorPicker.Gradient` components.
+     */
+    children?: ReactNode;
+    /**
+     * The active color in the color picker
+     */
+    currentColor?: RgbaColor;
+    /**
+     * Event handler called when the color changes
+     */
+    onColorChange?: (color: RgbaColor) => void;
+    /**
+     * The default format to use for the color input
+     * @default "HEX"
+     */
+    defaultFormat?: ColorFormat;
+    /**
+     * The test id of the color picker
+     */
+    'data-test-id'?: string;
+};
+
 declare type ComboboxProps = {
     /**
      * Children of the Combobox component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.
@@ -150,6 +229,11 @@ declare type ComboboxProps = {
      * The placeholder in the combobox component.
      */
     placeholder?: string;
+    /**
+     * Status of the text input
+     * @default "neutral"
+     */
+    status?: 'neutral' | 'success' | 'error';
     /**
      * Disables the combobox component.
      */
@@ -164,6 +248,39 @@ declare type ComboboxProps = {
     'data-test-id'?: string;
 };
 
+declare type CommonAriaAttrs = Pick<AriaAttributes, 'aria-describedby'> & AtLeastOneAriaLabelAttr;
+
+declare type CommonAriaProps = {
+    /**
+     * Aria label for the component.
+     */
+    'aria-label'?: string;
+    /**
+     * Aria label for the component when it is hidden.
+     */
+    'aria-hidden'?: boolean;
+    /**
+     * Aria role for the component.
+     */
+    role?: string;
+    /**
+     * Aria described by for the component.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Aria labelled by for the component.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Aria expanded for the component.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Aria has popup for the component.
+     */
+    'aria-haspopup'?: boolean;
+};
+
 export declare const Dialog: {
     Root: {
         ({ children, ...props }: DialogRootProps): JSX_2.Element;
@@ -412,6 +529,55 @@ declare type DropdownTriggerProps = {
     'data-test-id'?: string;
 };
 
+export declare const Flex: {
+    ({ as: Component, "data-test-id": dataTestId, children, ...props }: FlexProps): JSX_2.Element;
+    displayName: string;
+};
+
+declare type FlexProps = LayoutComponentProps & {
+    /**
+     * The element to render the Flex component as.
+     * @default 'div'
+     */
+    as?: 'div' | 'span';
+    /**
+     * The display property.
+     * @default 'flex'
+     */
+    display?: Responsive<'none' | 'flex' | 'inline-flex'>;
+    /**
+     * The direction of the children.
+     * @default 'row'
+     */
+    direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
+    /**
+     * The alignment of the children.
+     */
+    align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;
+    /**
+     * The justification of the children.
+     */
+    justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;
+    /**
+     * The wrap property.
+     */
+    wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;
+    /**
+     * The gap between the children.
+     */
+    gap?: Responsive<SizeValue>;
+    /**
+     * The horizontal gap between the children.
+     */
+    gapX?: Responsive<SizeValue>;
+    /**
+     * The vertical gap between the children.
+     */
+    gapY?: Responsive<SizeValue>;
+    children?: ReactNode;
+    'data-test-id'?: string;
+} & CommonAriaProps;
+
 export declare const Flyout: {
     Root: {
         ({ children, ...props }: FlyoutRootProps): JSX_2.Element;
@@ -449,7 +615,7 @@ declare type FlyoutContentProps = {
      * Define the padding of the flyout
      * @default "compact"
      */
-    padding?: 'compact' | 'comfortable' | 'spacious';
+    padding?: 'tight' | 'compact' | 'comfortable' | 'spacious';
     /**
      * Define the maximum width of the flyout
      * @default "360px"
@@ -509,6 +675,58 @@ declare const ForwardedRefTextFieldRoot: ForwardRefExoticComponent<TextInputProp
 
 declare const ForwardedRefTextFieldSlot: ForwardRefExoticComponent<TextFieldSlotProps & RefAttributes<HTMLDivElement>>;
 
+export declare const Grid: {
+    ({ as: Component, "data-test-id": dataTestId, children, ...props }: GridProps): JSX_2.Element;
+    displayName: string;
+};
+
+declare type GridProps = LayoutComponentProps & {
+    /**
+     * The element to render the Grid component as.
+     * @default 'div'
+     */
+    as?: 'div' | 'span';
+    /**
+     * The display property.
+     * @default 'grid'
+     */
+    display?: 'none' | 'grid' | 'inline-grid';
+    /**
+     * The columns property.
+     */
+    columns?: Responsive<string | number>;
+    /**
+     * The rows property.
+     */
+    rows?: Responsive<string | number>;
+    /**
+     * The flow property.
+     */
+    flow?: Responsive<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;
+    /**
+     * The alignment of the children.
+     */
+    align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;
+    /**
+     * The justification of the children.
+     */
+    justify?: Responsive<'start' | 'center' | 'end' | 'between'>;
+    /**
+     * The gap between the children.
+     */
+    gap?: Responsive<SizeValue>;
+    /**
+     * The horizontal gap between the children.
+     */
+    gapX?: Responsive<SizeValue>;
+    /**
+     * The vertical gap between the children.
+     */
+    gapY?: Responsive<SizeValue>;
+    children?: ReactNode;
+    'data-test-id'?: string;
+} & CommonAriaProps;
+
 export declare const Label: ForwardRefExoticComponent<LabelProps & RefAttributes<HTMLLabelElement>>;
 
 declare type LabelProps = {
@@ -527,6 +745,121 @@ declare type LabelProps = {
     'data-test-id'?: string;
 };
 
+declare type LayoutComponentProps = {
+    /**
+     * The margin property of the component.
+     */
+    m?: Responsive<SpacingValue>;
+    /**
+     * The horizontal margin property of the component.
+     */
+    mx?: Responsive<SpacingValue>;
+    /**
+     * The vertical margin property of the component.
+     */
+    my?: Responsive<SpacingValue>;
+    /**
+     * The margin-top property of the component.
+     */
+    mt?: Responsive<SpacingValue>;
+    /**
+     * The margin-right property of the component.
+     */
+    mr?: Responsive<SpacingValue>;
+    /**
+     * The margin-bottom property of the component.
+     */
+    mb?: Responsive<SpacingValue>;
+    /**
+     * The margin-left property of the component.
+     */
+    ml?: Responsive<SpacingValue>;
+    /**
+     * The padding property of the component.
+     */
+    p?: Responsive<SpacingValue>;
+    /**
+     * The horizontal padding property of the component.
+     */
+    px?: Responsive<SpacingValue>;
+    /**
+     * The vertical padding property of the component.
+     */
+    py?: Responsive<SpacingValue>;
+    /**
+     * The padding-top property of the component.
+     */
+    pt?: Responsive<SpacingValue>;
+    /**
+     * The padding-right property of the component.
+     */
+    pr?: Responsive<SpacingValue>;
+    /**
+     * The padding-bottom property of the component.
+     */
+    pb?: Responsive<SpacingValue>;
+    /**
+     * The padding-left property of the component.
+     */
+    pl?: Responsive<SpacingValue>;
+    /**
+     * The width property of the component.
+     */
+    width?: Responsive<SizeValue>;
+    /**
+     * The min-width property of the component.
+     */
+    minWidth?: Responsive<SizeValue>;
+    /**
+     * The max-width property of the component.
+     */
+    maxWidth?: Responsive<SizeValue>;
+    /**
+     * The height property of the component.
+     */
+    height?: Responsive<SizeValue>;
+    /**
+     * The min-height property of the component.
+     */
+    minHeight?: Responsive<SizeValue>;
+    /**
+     * The max-height property of the component.
+     */
+    maxHeight?: Responsive<SizeValue>;
+    /**
+     * The overflow property of the component.
+     */
+    overflow?: Responsive<OverflowValue>;
+    /**
+     * The horizontal overflow property of the component.
+     */
+    overflowX?: Responsive<OverflowValue>;
+    /**
+     * The vertical overflow property of the component.
+     */
+    overflowY?: Responsive<OverflowValue>;
+    /**
+     * The position property of the component.
+     */
+    position?: Responsive<PositionValue>;
+    /**
+     * The top property of the component.
+     */
+    top?: Responsive<string>;
+    /**
+     * The right property of the component.
+     */
+    right?: Responsive<string>;
+    /**
+     * The bottom property of the component.
+     */
+    bottom?: Responsive<string>;
+    /**
+     * The left property of the component.
+     */
+    left?: Responsive<string>;
+};
+
 export declare const LoadingBar: ForwardRefExoticComponent<LoadingBarProps & RefAttributes<HTMLDivElement>>;
 
 declare type LoadingBarProps = {
@@ -569,6 +902,48 @@ declare type LoadingBarProps = {
     'aria-labelledby': string;
 });
 
+declare type OverflowValue = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto';
+
+declare type PositionValue = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
+
+declare type Responsive<TValue> = ({
+    [key in Breakpoint]?: TValue;
+} & {
+    base?: TValue;
+}) | TValue;
+
+declare type RgbaColor = {
+    red: number;
+    green: number;
+    blue: number;
+    alpha?: number;
+    name?: string;
+};
+
+declare const screens: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+
+export declare const Section: {
+    ({ "data-test-id": dataTestId, children, ...props }: SectionProps): JSX_2.Element;
+    displayName: string;
+};
+
+declare type SectionProps = LayoutComponentProps & {
+    /**
+     * The display property.
+     * @default 'block'
+     */
+    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;
+    children?: ReactNode;
+    'data-test-id'?: string;
+} & CommonAriaProps;
+
 export declare const SegmentedControl: {
     Root: ForwardRefExoticComponent<SegmentedControlRootProps & RefAttributes<HTMLDivElement>>;
     Item: ForwardRefExoticComponent<SegmentedControlItemProps & RefAttributes<HTMLButtonElement>>;
@@ -630,6 +1005,11 @@ declare type SelectComponentProps = {
      * The placeholder in the select component.
      */
     placeholder?: string;
+    /**
+     * Status of the text input
+     * @default "neutral"
+     */
+    status?: 'neutral' | 'success' | 'error';
     /**
      * Disables the select component.
      */
@@ -645,7 +1025,7 @@ declare type SelectComponentProps = {
 };
 
 declare const SelectInput: {
-    ({ children, onSelect, value, defaultValue, placeholder, disabled, "aria-label": ariaLabel, "data-test-id": dataTestId, }: SelectComponentProps, forwardedRef: ForwardedRef<HTMLDivElement>): JSX_2.Element;
+    ({ children, onSelect, value, defaultValue, placeholder, status, disabled, "aria-label": ariaLabel, "data-test-id": dataTestId, }: SelectComponentProps, forwardedRef: ForwardedRef<HTMLDivElement>): JSX_2.Element;
     displayName: string;
 };
 
@@ -702,6 +1082,104 @@ declare type SelectSlotProps = {
     'data-test-id'?: string;
 };
 
+declare type SizeValue = (string & {}) | 'auto' | 'fit-content' | 'intrinsic' | 'max-content' | 'min-content';
+
+export declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLButtonElement>>;
+
+declare type SliderProps = {
+    id?: string;
+    name?: string;
+    /**
+     * The default value of the slider
+     * Used for uncontrolled components
+     * @default [0]
+     */
+    defaultValue?: number[];
+    /**
+     * The controlled value of the slider
+     * @default [0]
+     */
+    value?: number[];
+    /**
+     * Minimum value of the slider
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value of the slider
+     * @default 100
+     */
+    max?: number;
+    /**
+     * The granularity with which the slider can step through values
+     * @default 1
+     */
+    step?: number;
+    /**
+     * The minimum steps between thumbs in a range slider
+     * @default 0
+     */
+    minStepsBetweenThumbs?: number;
+    /**
+     * Disable the slider
+     * @default false
+     */
+    disabled?: boolean;
+    onChange?: (value: number[]) => void;
+    onCommit?: (value: number[]) => void;
+    'data-test-id'?: string;
+} & CommonAriaAttrs;
+
+declare type SpacingValue = (string & {}) | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64;
+
+export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLButtonElement>>;
+
+declare type SwitchProps = {
+    id?: string;
+    name?: string;
+    /**
+     * The size of the switch component.
+     * @default medium
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The active value in the select component. This is used to control the select externally.
+     * @default false
+     */
+    value?: boolean;
+    /**
+     * The default value of the select component. Used for uncontrolled usages.
+     * @default false
+     */
+    defaultValue?: boolean;
+    /**
+     * Disables the select component.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the switch is required.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Callback function that is called when the switch is toggled.
+     * @param checked - The new checked state of the switch
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Event handler called when the checkbox is blurred
+     * @param event - The event object
+     */
+    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;
+    /**
+     * Event handler called when the checkbox is focused
+     * @param event - The event object
+     */
+    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;
+    'data-test-id'?: string;
+} & CommonAriaAttrs;
+
 declare const TextFieldRoot: {
     ({ children, className, status, "data-test-id": dataTestId, ...inputProps }: TextInputProps, ref: ForwardedRef<HTMLInputElement>): JSX_2.Element;
     displayName: string;
@@ -819,7 +1297,7 @@ export declare const Tooltip: {
 
 declare type TooltipContentProps = {
     /**
-     * @default spacious
+     * @default "spacious"
      */
     padding?: 'spacious' | 'compact';
     /**