@wix/site-ui 1.108.0 → 1.110.0

package/dist/CheckboxField/index.d.ts

@@ -0,0 +1,468 @@
+import * as React_2 from 'react';
+
+declare type BaseUIChangeEventDetail<Reason extends string, CustomProperties extends object> = {
+    /**
+     * The reason for the event.
+     */
+    reason: Reason;
+    /**
+     * The native event associated with the custom event.
+     */
+    event: ReasonToEvent<Reason>;
+    /**
+     * Cancels Base UI from handling the event.
+     */
+    cancel: () => void;
+    /**
+     * Allows the event to propagate in cases where Base UI will stop the propagation.
+     */
+    allowPropagation: () => void;
+    /**
+     * Indicates whether the event has been canceled.
+     */
+    isCanceled: boolean;
+    /**
+     * Indicates whether the event is allowed to propagate.
+     */
+    isPropagationAllowed: boolean;
+    /**
+     * The element that triggered the event, if applicable.
+     */
+    trigger: Element | undefined;
+} & CustomProperties;
+
+/**
+ * Details of custom change events emitted by Base UI components.
+ */
+declare type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> & {} : never;
+
+/**
+ * Props shared by all Base UI components.
+ * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
+ */
+declare type BaseUIComponentProps<ElementType extends React_2.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React_2.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked' | 'style'> & {
+    /**
+     * CSS class applied to the element, or a function that
+     * returns a class based on the component's state.
+     */
+    className?: string | ((state: State) => string | undefined) | undefined;
+    /**
+     * Allows you to replace the component's HTML element
+     * with a different tag, or compose it with another component.
+     *
+     * Accepts a `ReactElement` or a function that returns the element to render.
+     */
+    render?: React_2.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
+    /**
+     * Style applied to the element, or a function that
+     * returns a style object based on the component's state.
+     */
+    style?: React_2.CSSProperties | ((state: State) => React_2.CSSProperties | undefined) | undefined;
+};
+
+declare type BaseUIEvent<E extends React_2.SyntheticEvent<Element, Event>> = E & {
+    preventBaseUIHandler: () => void;
+    readonly baseUIHandlerPrevented?: boolean | undefined;
+};
+
+declare const cancelOpen: "cancel-open";
+
+export declare namespace Checkbox {
+    export {
+        CheckboxRoot as Root,
+        CheckboxIndicator as Indicator
+    }
+}
+
+export declare const CheckboxField: React_2.ForwardRefExoticComponent<CheckboxFieldProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface CheckboxFieldProps extends Omit<RootProps, 'children' | 'className' | 'style' | 'render' | 'nativeButton' | 'size'> {
+    /** Visible label rendered beside the checkbox. */
+    label: React_2.ReactNode;
+    /** Extra inline content rendered after the label (e.g. a price or badge). */
+    suffix?: React_2.ReactNode;
+    /** Visual style: a plain checkbox row or a selectable `box` tile. */
+    variant?: CheckboxFieldVariant;
+    /** Marks the field invalid, colouring the control and revealing `errorMessage`. */
+    error?: boolean;
+    /** Error message rendered below the option; also marks the field invalid. */
+    errorMessage?: React_2.ReactNode;
+    /** Aligns the control with the first line (`top`) or the label's centre. */
+    verticalAlignment?: CheckboxFieldVerticalAlignment;
+    /** Size of the checkbox control in pixels. */
+    size?: number;
+    /** Fixed width of the option; accepts a number (px) or any CSS length. */
+    width?: number | string;
+    /** Class applied to the field root. */
+    className?: string;
+    /** Inline styles applied to the field root. */
+    style?: React_2.CSSProperties;
+}
+
+export declare type CheckboxFieldVariant = 'default' | 'box';
+
+export declare type CheckboxFieldVerticalAlignment = 'center' | 'top';
+
+/**
+ * Indicates whether the checkbox is ticked.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+ */
+declare const CheckboxIndicator: React_2.ForwardRefExoticComponent<Omit<CheckboxIndicatorProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+
+declare namespace CheckboxIndicator {
+    type State = CheckboxIndicatorState;
+    type Props = CheckboxIndicatorProps;
+}
+
+declare interface CheckboxIndicatorProps extends BaseUIComponentProps<'span', CheckboxIndicatorState> {
+    /**
+     * Whether to keep the element in the DOM when the checkbox is not checked.
+     * @default false
+     */
+    keepMounted?: boolean | undefined;
+}
+
+declare interface CheckboxIndicatorState extends CheckboxRootState {
+    /**
+     * The transition status of the component.
+     */
+    transitionStatus: TransitionStatus;
+}
+
+/**
+ * Represents the checkbox itself.
+ * Renders a `<span>` element and a hidden `<input>` beside.
+ *
+ * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+ */
+declare const CheckboxRoot: React_2.ForwardRefExoticComponent<Omit<CheckboxRootProps, "ref"> & React_2.RefAttributes<HTMLElement>>;
+
+declare namespace CheckboxRoot {
+    type State = CheckboxRootState;
+    type Props = CheckboxRootProps;
+    type ChangeEventReason = CheckboxRootChangeEventReason;
+    type ChangeEventDetails = CheckboxRootChangeEventDetails;
+}
+
+declare type CheckboxRootChangeEventDetails = BaseUIChangeEventDetails<CheckboxRoot.ChangeEventReason>;
+
+declare type CheckboxRootChangeEventReason = typeof REASONS.none;
+
+declare interface CheckboxRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', CheckboxRootState>, 'onChange' | 'value'> {
+    /**
+     * The id of the input element.
+     */
+    id?: string | undefined;
+    /**
+     * Identifies the field when a form is submitted.
+     * @default undefined
+     */
+    name?: string | undefined;
+    /**
+     * Identifies the form that owns the hidden input.
+     * Useful when the checkbox is rendered outside the form.
+     */
+    form?: string | undefined;
+    /**
+     * Whether the checkbox is currently ticked.
+     *
+     * To render an uncontrolled checkbox, use the `defaultChecked` prop instead.
+     * @default undefined
+     */
+    checked?: boolean | undefined;
+    /**
+     * Whether the checkbox is initially ticked.
+     *
+     * To render a controlled checkbox, use the `checked` prop instead.
+     * @default false
+     */
+    defaultChecked?: boolean | undefined;
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Event handler called when the checkbox is ticked or unticked.
+     */
+    onCheckedChange?: ((checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void) | undefined;
+    /**
+     * Whether the user should be unable to tick or untick the checkbox.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Whether the user must tick the checkbox before submitting a form.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the checkbox is in a mixed state: neither ticked, nor unticked.
+     * @default false
+     */
+    indeterminate?: boolean | undefined;
+    /**
+     * A ref to access the hidden `<input>` element.
+     */
+    inputRef?: React_2.Ref<HTMLInputElement> | undefined;
+    /**
+     * Whether the checkbox controls a group of child checkboxes.
+     *
+     * Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group).
+     * @default false
+     */
+    parent?: boolean | undefined;
+    /**
+     * The value submitted with the form when the checkbox is unchecked.
+     * By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.
+     */
+    uncheckedValue?: string | undefined;
+    /**
+     * The value of the selected checkbox.
+     */
+    value?: string | undefined;
+}
+
+declare interface CheckboxRootState extends FieldRootState {
+    /**
+     * Whether the checkbox is currently ticked.
+     */
+    checked: boolean;
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Whether the user should be unable to tick or untick the checkbox.
+     */
+    readOnly: boolean;
+    /**
+     * Whether the user must tick the checkbox before submitting a form.
+     */
+    required: boolean;
+    /**
+     * Whether the checkbox is in a mixed state: neither ticked, nor unticked.
+     */
+    indeterminate: boolean;
+}
+
+declare const chipRemovePress: "chip-remove-press";
+
+declare const clearPress: "clear-press";
+
+declare const closePress: "close-press";
+
+declare const closeWatcher: "close-watcher";
+
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+declare type ComponentRenderFn<Props, State> = (props: Props, state: State) => React_2.ReactElement<unknown>;
+
+declare const decrementPress: "decrement-press";
+
+declare const disabled: "disabled";
+
+declare const drag: "drag";
+
+declare const escapeKey: "escape-key";
+
+declare interface FieldRootState {
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Whether the field has been touched.
+     */
+    touched: boolean;
+    /**
+     * Whether the field value has changed from its initial value.
+     */
+    dirty: boolean;
+    /**
+     * Whether the field is valid.
+     */
+    valid: boolean | null;
+    /**
+     * Whether the field has a value.
+     */
+    filled: boolean;
+    /**
+     * Whether the field is focused.
+     */
+    focused: boolean;
+}
+
+declare const focusOut: "focus-out";
+
+declare type HTMLProps<T = any> = React_2.HTMLAttributes<T> & {
+    ref?: React_2.Ref<T> | undefined;
+};
+
+declare const imperativeAction: "imperative-action";
+
+declare const incrementPress: "increment-press";
+
+declare const initial: "initial";
+
+declare const inputBlur: "input-blur";
+
+declare const inputChange: "input-change";
+
+declare const inputClear: "input-clear";
+
+declare const inputPaste: "input-paste";
+
+declare const inputPress: "input-press";
+
+declare const itemPress: "item-press";
+
+declare const keyboard: "keyboard";
+
+declare const linkPress: "link-press";
+
+declare const listNavigation: "list-navigation";
+
+declare const missing: "missing";
+
+declare const none: "none";
+
+declare interface NonNativeButtonProps {
+    /**
+     * Whether the component renders a native `<button>` element when replacing it
+     * via the `render` prop.
+     * Set to `true` if the rendered element is a native button.
+     * @default false
+     */
+    nativeButton?: boolean | undefined;
+}
+
+declare const outsidePress: "outside-press";
+
+declare const pointer: "pointer";
+
+declare namespace REASONS {
+    export {
+        none,
+        triggerPress,
+        triggerHover,
+        triggerFocus,
+        outsidePress,
+        itemPress,
+        closePress,
+        linkPress,
+        clearPress,
+        chipRemovePress,
+        trackPress,
+        incrementPress,
+        decrementPress,
+        inputChange,
+        inputClear,
+        inputBlur,
+        inputPaste,
+        inputPress,
+        focusOut,
+        escapeKey,
+        closeWatcher,
+        listNavigation,
+        keyboard,
+        pointer,
+        drag,
+        wheel,
+        scrub,
+        cancelOpen,
+        siblingOpen,
+        disabled,
+        missing,
+        initial,
+        imperativeAction,
+        swipe,
+        windowResize
+    }
+}
+
+/**
+ * Maps a change `reason` string to the corresponding native event type.
+ */
+declare type ReasonToEvent<Reason extends string> = Reason extends keyof ReasonToEventMap ? ReasonToEventMap[Reason] : Event;
+
+declare interface ReasonToEventMap {
+    [REASONS.none]: Event;
+    [REASONS.triggerPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
+    [REASONS.triggerHover]: MouseEvent;
+    [REASONS.triggerFocus]: FocusEvent;
+    [REASONS.outsidePress]: MouseEvent | PointerEvent | TouchEvent;
+    [REASONS.itemPress]: MouseEvent | KeyboardEvent | PointerEvent;
+    [REASONS.closePress]: MouseEvent | KeyboardEvent | PointerEvent;
+    [REASONS.linkPress]: MouseEvent | PointerEvent;
+    [REASONS.clearPress]: PointerEvent | MouseEvent | KeyboardEvent;
+    [REASONS.chipRemovePress]: PointerEvent | MouseEvent | KeyboardEvent;
+    [REASONS.trackPress]: PointerEvent | MouseEvent | TouchEvent;
+    [REASONS.incrementPress]: PointerEvent | MouseEvent | TouchEvent;
+    [REASONS.decrementPress]: PointerEvent | MouseEvent | TouchEvent;
+    [REASONS.inputChange]: InputEvent | Event;
+    [REASONS.inputClear]: InputEvent | FocusEvent | Event;
+    [REASONS.inputBlur]: FocusEvent;
+    [REASONS.inputPaste]: ClipboardEvent;
+    [REASONS.inputPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent;
+    [REASONS.focusOut]: FocusEvent | KeyboardEvent;
+    [REASONS.escapeKey]: KeyboardEvent;
+    [REASONS.closeWatcher]: Event;
+    [REASONS.listNavigation]: KeyboardEvent;
+    [REASONS.keyboard]: KeyboardEvent;
+    [REASONS.pointer]: PointerEvent;
+    [REASONS.drag]: PointerEvent | TouchEvent;
+    [REASONS.swipe]: PointerEvent | TouchEvent;
+    [REASONS.wheel]: WheelEvent;
+    [REASONS.scrub]: PointerEvent;
+    [REASONS.cancelOpen]: MouseEvent;
+    [REASONS.siblingOpen]: Event;
+    [REASONS.disabled]: Event;
+    [REASONS.missing]: Event;
+    [REASONS.initial]: Event;
+    [REASONS.imperativeAction]: Event;
+    [REASONS.windowResize]: UIEvent;
+}
+
+declare type RootProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Checkbox.Root>> & {
+    size?: number;
+};
+
+declare const scrub: "scrub";
+
+declare const siblingOpen: "sibling-open";
+
+declare const swipe: "swipe";
+
+declare const trackPress: "track-press";
+
+declare type TransitionStatus = 'starting' | 'ending' | 'idle' | undefined;
+
+declare const triggerFocus: "trigger-focus";
+
+declare const triggerHover: "trigger-hover";
+
+declare const triggerPress: "trigger-press";
+
+declare const wheel: "wheel";
+
+declare const windowResize: "window-resize";
+
+/**
+ * Adds a `preventBaseUIHandler` method to all event handlers.
+ */
+declare type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]> };
+
+declare type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React_2.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
+
+declare type WithStringClassName<P> = Omit<P, 'className'> & {
+    className?: string;
+};
+
+export { }

package/dist/CheckboxField/index.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { CheckboxSize, Checkbox } from "../Checkbox/index.js";
+import { Field } from "../Field/index.js";
+import { toCssLength } from "../8027.js";
+import * as __rspack_external_react from "react";
+const CheckboxField_module = {
+    option: "option-o8pAcb",
+    root: "root-tqmYsF",
+    indicator: "indicator-_WzHbq",
+    optionContent: "optionContent-inaJL9",
+    optionLabel: "optionLabel-fJWxkM",
+    optionSuffix: "optionSuffix-AJytXe"
+};
+const CheckboxField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, style, label, suffix, variant = 'default', error = false, errorMessage, verticalAlignment = 'center', size = CheckboxSize.medium, width, indeterminate = false, disabled = false, ...props }, ref)=>{
+    const isError = error || Boolean(errorMessage);
+    const optionWidth = toCssLength(width);
+    const optionStyle = {
+        ...style,
+        ...optionWidth ? {
+            '--checkbox-option-width': optionWidth
+        } : null
+    };
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        ref: ref,
+        className: clsx(CheckboxField_module.option, className),
+        style: optionStyle,
+        invalid: isError,
+        disabled: disabled,
+        "data-variant": variant,
+        "data-has-error-message": errorMessage ? '' : void 0,
+        children: [
+            /*#__PURE__*/ jsxs(Checkbox.Root, {
+                ...props,
+                className: CheckboxField_module.root,
+                indeterminate: indeterminate,
+                disabled: disabled,
+                "data-variant": variant,
+                "data-vertical-alignment": verticalAlignment,
+                render: /*#__PURE__*/ jsx("label", {}),
+                size: size,
+                children: [
+                    /*#__PURE__*/ jsx(Checkbox.Indicator, {
+                        className: CheckboxField_module.indicator
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        className: CheckboxField_module.optionContent,
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: CheckboxField_module.optionLabel,
+                                children: label
+                            }),
+                            suffix ? /*#__PURE__*/ jsx("span", {
+                                className: CheckboxField_module.optionSuffix,
+                                children: suffix
+                            }) : null
+                        ]
+                    })
+                ]
+            }),
+            isError && errorMessage ? /*#__PURE__*/ jsx(Field.Error, {
+                match: true,
+                children: errorMessage
+            }) : null
+        ]
+    });
+});
+CheckboxField.displayName = 'CheckboxField';
+export { CheckboxField };

package/dist/CheckboxGroup/index.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
 import { useBaseUiId } from "../6046.js";
 import { useStableCallback } from "../7541.js";
 import { useLabelableContext, useFieldRootContext, fieldValidityMapping } from "../1477.js";
@@ -165,12 +164,8 @@ const CheckboxGroup_CheckboxGroup = /*#__PURE__*/ __rspack_external_react.forwar
     });
 });
 if ("production" !== process.env.NODE_ENV) CheckboxGroup_CheckboxGroup.displayName = "CheckboxGroup";
-const CheckboxGroup_module = {
-    root: "root-ZCRH6j"
-};
-const CheckboxGroup_CheckboxGroup_CheckboxGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(CheckboxGroup_CheckboxGroup, {
+const CheckboxGroup_CheckboxGroup_CheckboxGroup = /*#__PURE__*/ __rspack_external_react.forwardRef((props, ref)=>/*#__PURE__*/ jsx(CheckboxGroup_CheckboxGroup, {
         ref: ref,
-        className: clsx(CheckboxGroup_module.root, className),
         ...props
     }));
 export { CheckboxGroup_CheckboxGroup_CheckboxGroup as CheckboxGroup };

package/dist/CheckboxGroupField/index.css

@@ -0,0 +1,60 @@
+.field-Tx5eMP {
+  --checkbox-group-width: auto;
+  box-sizing: border-box;
+  width: var(--checkbox-group-width);
+  max-width: 100%;
+  color: var(--wst-paragraph-2-color, black);
+  display: inline-flex;
+}
+
+.field-Tx5eMP[data-fluid] {
+  width: 100%;
+  display: flex;
+}
+
+.label-E_rDm0 {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-2-color, black);
+}
+
+.field-Tx5eMP[data-disabled] .label-E_rDm0 {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.items-lFFDGE {
+  box-sizing: border-box;
+  max-width: 100%;
+  display: flex;
+}
+
+.items-lFFDGE[data-layout="vertical"] {
+  flex-direction: column;
+  gap: 12px;
+}
+
+.items-lFFDGE[data-layout="vertical"]:not([data-fluid]) > * {
+  max-width: 328px;
+}
+
+.items-lFFDGE[data-layout="horizontal"] {
+  flex-flow: wrap;
+  gap: 12px 30px;
+}
+
+.items-lFFDGE[data-layout="horizontal"] > * {
+  flex: 0 auto;
+  width: auto;
+}
+
+.items-lFFDGE[data-layout="horizontal"]:not([data-fluid]) {
+  max-width: 990px;
+}
+
+.items-lFFDGE[data-layout="horizontal"]:not([data-fluid]) > * {
+  max-width: 300px;
+}
+
+.items-lFFDGE[data-fluid] > * {
+  width: 100%;
+}
+

package/dist/CheckboxGroupField/index.d.ts

@@ -0,0 +1,37 @@
+import { CheckboxGroupProps } from '@base-ui/react/checkbox-group';
+import * as React_2 from 'react';
+
+declare type BaseProps = React_2.ComponentPropsWithoutRef<typeof CheckboxGroup>;
+
+declare const CheckboxGroup: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CheckboxGroupProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string | undefined;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare const CheckboxGroupField: React_2.ForwardRefExoticComponent<CheckboxGroupFieldProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare type CheckboxGroupFieldLayout = 'vertical' | 'horizontal';
+
+export declare interface CheckboxGroupFieldProps extends WithStringClassName<Omit<BaseProps, 'style'>> {
+    /** Accessible label rendered above the group. */
+    label?: React_2.ReactNode;
+    /** Arranges the options in a column (`vertical`) or wrapping row (`horizontal`). */
+    layout?: CheckboxGroupFieldLayout;
+    /** Stretches the group and its options to the available width. */
+    fluid?: boolean;
+    /** Marks the group invalid and reveals `errorMessage`. */
+    error?: boolean;
+    /** Error message rendered below the group; also marks it invalid. */
+    errorMessage?: React_2.ReactNode;
+    /** Sets `aria-required` on the group for assistive tech. */
+    required?: boolean;
+    /** Fixed width of the group; accepts a number (px) or any CSS length. */
+    width?: number | string;
+    /** Inline styles applied to the field root. */
+    style?: React_2.CSSProperties;
+}
+
+declare type WithStringClassName<P> = Omit<P, 'className'> & {
+    className?: string;
+};
+
+export { }