@wix/site-ui 1.105.0 → 1.107.0

package/dist/RadioField/index.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Radio } from "../Radio/index.js";
+import { Field } from "../Field/index.js";
+import * as __rspack_external_react from "react";
+const RadioField_module = {
+    fieldItem: "fieldItem-RyE1Xd",
+    fieldLabel: "fieldLabel-3Ws24V",
+    fieldLabelStack: "fieldLabelStack-TwpByX",
+    fieldLabelText: "fieldLabelText-cfnyvw",
+    fieldSuffix: "fieldSuffix-SKi6ny"
+};
+const RadioField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ checked, description, descriptionProps, disabled, error, errorProps, indicatorProps, invalid, itemProps, label, labelProps, name, onSelect, radioProps, size, suffix, value, variant = 'default', ...props }, ref)=>{
+    const { className: itemClassName, onClick: itemOnClick, ...restItemProps } = itemProps ?? {};
+    const { className: labelClassName, ...restLabelProps } = labelProps ?? {};
+    const { className: descriptionClassName, render: descriptionRender = /*#__PURE__*/ jsx("span", {}), ...restDescriptionProps } = descriptionProps ?? {};
+    const { className: errorClassName, match = true, ...restErrorProps } = errorProps ?? {};
+    const { disabled: radioDisabled, ...restRadioProps } = radioProps ?? {};
+    const isDisabled = disabled || radioDisabled;
+    const handleClick = (event)=>{
+        itemOnClick?.(event);
+        if (!event.defaultPrevented && onSelect && !isDisabled && !checked) onSelect(value);
+    };
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        ...props,
+        ref: ref,
+        name: name,
+        disabled: isDisabled,
+        invalid: invalid ?? Boolean(error),
+        children: [
+            /*#__PURE__*/ jsxs(Field.Item, {
+                ...restItemProps,
+                className: clsx(RadioField_module.fieldItem, itemClassName),
+                "data-variant": variant,
+                onClick: handleClick,
+                children: [
+                    /*#__PURE__*/ jsx(Radio.Root, {
+                        value: checked ? '' : value,
+                        size: size,
+                        disabled: isDisabled,
+                        ...restRadioProps,
+                        children: /*#__PURE__*/ jsx(Radio.Indicator, {
+                            ...indicatorProps
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(Field.Label, {
+                        ...restLabelProps,
+                        className: clsx(RadioField_module.fieldLabel, {
+                            [RadioField_module.fieldLabelStack]: description
+                        }, labelClassName),
+                        children: [
+                            /*#__PURE__*/ jsxs("span", {
+                                className: RadioField_module.fieldLabelText,
+                                children: [
+                                    label,
+                                    suffix ? /*#__PURE__*/ jsx("span", {
+                                        className: RadioField_module.fieldSuffix,
+                                        children: suffix
+                                    }) : null
+                                ]
+                            }),
+                            description ? /*#__PURE__*/ jsx(Field.Description, {
+                                ...restDescriptionProps,
+                                render: descriptionRender,
+                                className: descriptionClassName,
+                                children: description
+                            }) : null
+                        ]
+                    })
+                ]
+            }),
+            error ? /*#__PURE__*/ jsx(Field.Error, {
+                ...restErrorProps,
+                match: match,
+                className: errorClassName,
+                children: error
+            }) : null
+        ]
+    });
+});
+RadioField.displayName = 'RadioField';
+export { RadioField };

package/dist/RadioGroup/index.css

@@ -1,6 +1,11 @@
 .root-kKvIZ_ {
   flex-direction: column;
-  gap: 12px;
   display: flex;
 }
 
+.root-kKvIZ_[data-orientation="horizontal"] {
+  flex-flow: wrap;
+  align-items: center;
+  gap: 24px 30px;
+}
+

package/dist/RadioGroup/index.d.ts

@@ -158,6 +158,8 @@ declare const pointer: "pointer";
 
 export declare const RadioGroup: React_2.ForwardRefExoticComponent<Omit<Omit<RadioGroup_2.Props<unknown>, "ref">, "className"> & {
     className?: string | undefined;
+} & {
+    orientation?: RadioGroupOrientation | undefined;
 } & React_2.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -181,6 +183,8 @@ export declare type RadioGroupChangeEventDetails = BaseUIChangeEventDetails<Radi
 
 export declare type RadioGroupChangeEventReason = typeof REASONS.none;
 
+declare type RadioGroupOrientation = 'vertical' | 'horizontal';
+
 export declare interface RadioGroupProps<Value = any> extends Omit<BaseUIComponentProps<'div', RadioGroupState>, 'value'> {
     /**
      * Whether the component should ignore user interaction.

package/dist/RadioGroup/index.js

@@ -156,9 +156,11 @@ if ("production" !== process.env.NODE_ENV) RadioGroup_RadioGroup.displayName = "
 const RadioGroup_module = {
     root: "root-kKvIZ_"
 };
-const RadioGroup_RadioGroup_RadioGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(RadioGroup_RadioGroup, {
+const RadioGroup_RadioGroup_RadioGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, orientation = 'vertical', 'aria-orientation': ariaOrientation, ...props }, ref)=>/*#__PURE__*/ jsx(RadioGroup_RadioGroup, {
         ref: ref,
         className: clsx(RadioGroup_module.root, className),
+        "data-orientation": orientation,
+        "aria-orientation": ariaOrientation ?? ('horizontal' === orientation ? orientation : void 0),
         ...props
     }));
 export { RadioGroup_RadioGroup_RadioGroup as RadioGroup };

package/dist/RadioGroupField/index.css

@@ -0,0 +1,22 @@
+.label-JrSYqL {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-2-color, #000);
+}
+
+.group-N19s7N[data-spacing]:not([data-orientation="horizontal"]) {
+  gap: 12px;
+}
+
+.group-N19s7N[data-variant="box"] {
+  align-items: flex-start;
+}
+
+.group-N19s7N[data-variant="box"][data-fluid] {
+  align-items: stretch;
+  width: 100%;
+}
+
+.group-N19s7N[data-variant="box"]:not([data-spacing]) > * + * {
+  margin-top: -1px;
+}
+

package/dist/RadioGroupField/index.d.ts

@@ -0,0 +1,402 @@
+import { RadioGroup } from '@base-ui/react';
+import { RadioGroupOrientation } from '../RadioGroup/RadioGroup';
+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";
+
+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 const outsidePress: "outside-press";
+
+declare const pointer: "pointer";
+
+declare const RadioGroup_2: React_2.ForwardRefExoticComponent<Omit<Omit<RadioGroup_3.Props<unknown>, "ref">, "className"> & {
+    className?: string | undefined;
+} & {
+    orientation?: RadioGroupOrientation_2 | undefined;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Provides a shared state to a series of radio buttons.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Radio Group](https://base-ui.com/react/components/radio)
+ */
+declare const RadioGroup_3: {
+    <Value>(props: RadioGroup_3.Props<Value>): React_2.JSX.Element;
+};
+
+declare namespace RadioGroup_3 {
+    type State = RadioGroupState;
+    type Props<TValue = any> = RadioGroupProps_2<TValue>;
+    type ChangeEventReason = RadioGroupChangeEventReason;
+    type ChangeEventDetails = RadioGroupChangeEventDetails;
+}
+
+declare type RadioGroupChangeEventDetails = BaseUIChangeEventDetails<RadioGroup_3.ChangeEventReason>;
+
+declare type RadioGroupChangeEventReason = typeof REASONS.none;
+
+export declare const RadioGroupField: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<RadioGroup.Props<unknown>, "ref">, "className"> & {
+    className?: string | undefined;
+} & {
+    orientation?: RadioGroupOrientation | undefined;
+} & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Accessible label rendered above the group. */
+    label?: React_2.ReactNode;
+    /** Error message rendered below the group when invalid. */
+    error?: React_2.ReactNode;
+    /** Always-visible helper text rendered below the group. */
+    description?: React_2.ReactNode;
+    /** Visual style applied to every radio in the group. */
+    variant?: RadioGroupFieldVariant | undefined;
+    /** Separates `box` tiles instead of collapsing their borders. */
+    withSpacing?: boolean | undefined;
+    /** Stretches `box` tiles to the available width. */
+    fluid?: boolean | undefined;
+    /** Marks the group invalid, styling every radio and revealing `error`. */
+    invalid?: boolean | undefined;
+    /** Size in pixels applied to every radio in the group. */
+    size?: number | undefined;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare type RadioGroupFieldProps = RadioGroupProps & {
+    /** Accessible label rendered above the group. */
+    label?: React_2.ReactNode;
+    /** Error message rendered below the group when invalid. */
+    error?: React_2.ReactNode;
+    /** Always-visible helper text rendered below the group. */
+    description?: React_2.ReactNode;
+    /** Visual style applied to every radio in the group. */
+    variant?: RadioGroupFieldVariant;
+    /** Separates `box` tiles instead of collapsing their borders. */
+    withSpacing?: boolean;
+    /** Stretches `box` tiles to the available width. */
+    fluid?: boolean;
+    /** Marks the group invalid, styling every radio and revealing `error`. */
+    invalid?: boolean;
+    /** Size in pixels applied to every radio in the group. */
+    size?: number;
+};
+
+export declare type RadioGroupFieldVariant = 'default' | 'box';
+
+declare type RadioGroupOrientation_2 = 'vertical' | 'horizontal';
+
+declare type RadioGroupProps = React_2.ComponentPropsWithoutRef<typeof RadioGroup_2>;
+
+declare interface RadioGroupProps_2<Value = any> extends Omit<BaseUIComponentProps<'div', RadioGroupState>, 'value'> {
+    /**
+     * Whether the component should ignore user interaction.
+     * @default false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether the user should be unable to select a different radio button in the group.
+     * @default false
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Whether the user must choose a value before submitting a form.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Identifies the field when a form is submitted.
+     */
+    name?: string | undefined;
+    /**
+     * Identifies the form that owns the radio inputs.
+     * Useful when the radio group is rendered outside the form.
+     */
+    form?: string | undefined;
+    /**
+     * The controlled value of the radio item that should be currently selected.
+     *
+     * To render an uncontrolled radio group, use the `defaultValue` prop instead.
+     */
+    value?: Value | undefined;
+    /**
+     * The uncontrolled value of the radio button that should be initially selected.
+     *
+     * To render a controlled radio group, use the `value` prop instead.
+     */
+    defaultValue?: Value | undefined;
+    /**
+     * Callback fired when the value changes.
+     */
+    onValueChange?: ((value: Value, eventDetails: RadioGroup_3.ChangeEventDetails) => void) | undefined;
+    /**
+     * A ref to access the hidden input element.
+     */
+    inputRef?: React_2.Ref<HTMLInputElement> | undefined;
+}
+
+declare interface RadioGroupState extends FieldRootState {
+    /**
+     * Whether the user should be unable to select a different radio button in the group.
+     */
+    readOnly: boolean;
+    /**
+     * Whether the user must tick a radio button within the group before submitting a form.
+     */
+    required: boolean;
+}
+
+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 const scrub: "scrub";
+
+declare const siblingOpen: "sibling-open";
+
+declare const swipe: "swipe";
+
+declare const trackPress: "track-press";
+
+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;
+
+export { }

package/dist/RadioGroupField/index.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { RadioGroup as RadioGroup_RadioGroup_RadioGroup } from "../RadioGroup/index.js";
+import { Field } from "../Field/index.js";
+import * as __rspack_external_react from "react";
+const RadioGroupField_module = {
+    label: "label-JrSYqL",
+    group: "group-N19s7N"
+};
+const RadioGroupField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ label, error, description, variant = 'default', withSpacing = false, fluid = false, invalid, disabled, size, children, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...props }, ref)=>{
+    const labelId = __rspack_external_react.useId();
+    const isInvalid = invalid ?? Boolean(error);
+    const items = __rspack_external_react.Children.map(children, (child)=>{
+        if (!/*#__PURE__*/ __rspack_external_react.isValidElement(child)) return child;
+        const childProps = child.props;
+        return /*#__PURE__*/ __rspack_external_react.cloneElement(child, {
+            variant: childProps.variant ?? variant,
+            invalid: childProps.invalid ?? (isInvalid || void 0),
+            size: childProps.size ?? size,
+            checked: void 0
+        });
+    });
+    return /*#__PURE__*/ jsxs(Field.Root, {
+        invalid: isInvalid,
+        disabled: disabled,
+        children: [
+            null != label ? /*#__PURE__*/ jsx("span", {
+                id: labelId,
+                className: RadioGroupField_module.label,
+                children: label
+            }) : null,
+            /*#__PURE__*/ jsx(RadioGroup_RadioGroup_RadioGroup, {
+                ref: ref,
+                disabled: disabled,
+                "aria-label": null == label ? ariaLabel : void 0,
+                "aria-labelledby": null != label ? ariaLabelledby ?? labelId : ariaLabelledby,
+                "data-variant": variant,
+                "data-spacing": withSpacing ? '' : void 0,
+                "data-fluid": fluid ? '' : void 0,
+                className: clsx(RadioGroupField_module.group, className),
+                ...props,
+                children: items
+            }),
+            null != error ? /*#__PURE__*/ jsx(Field.Error, {
+                match: isInvalid,
+                children: error
+            }) : null,
+            null != description ? /*#__PURE__*/ jsx(Field.Description, {
+                children: description
+            }) : null
+        ]
+    });
+});
+RadioGroupField.displayName = 'RadioGroupField';
+export { RadioGroupField };