@wix/site-ui 1.107.0 → 1.109.0

package/dist/8685.css

@@ -11,7 +11,7 @@
     transparent);
   background-color: var(--wst-primary-background-color, #fff);
   vertical-align: middle;
-  border-radius: 0;
+  border-radius: 4px;
   margin: 0;
   padding-block: 8px;
   padding-inline: 12px;

package/dist/Field/index.css

@@ -33,6 +33,11 @@
   color: var(--wst-shade-3-color, #767676);
 }
 
+.descriptionEnd-O3mOtW {
+  text-align: end;
+  align-self: flex-end;
+}
+
 .control-fRhDZ8 {
   width: 100%;
 }
@@ -61,6 +66,15 @@
   padding-block: 24px 6px;
 }
 
+.root-ECdHfF:has(.labelFloating-io8BLN) .group-XazO1A {
+  align-items: end;
+  padding-block: 0;
+}
+
+.root-ECdHfF:has(.labelFloating-io8BLN) .adornment-Z1N0NF {
+  padding-block-end: 6px;
+}
+
 .labelFloating-io8BLN {
   z-index: 2;
   color: var(--wst-shade-3-color, #767676);
@@ -73,7 +87,7 @@
   transform: translateY(-50%);
 }
 
-.labelFloating-io8BLN[data-filled], .labelFloating-io8BLN[data-focused] {
+.labelFloating-io8BLN[data-filled], .labelFloating-io8BLN[data-focused], .root-ECdHfF:has(.control-fRhDZ8[placeholder]:not([placeholder=""])) .labelFloating-io8BLN, .root-ECdHfF:has(.labelFloating-io8BLN):has(.adornment-Z1N0NF) .labelFloating-io8BLN {
   font-size: 12px;
   inset-block-start: 8px;
   transform: translateY(0);
@@ -83,3 +97,78 @@
   width: 100%;
 }
 
+div.group-XazO1A {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.group-XazO1A:focus-within {
+  border-color: var(--wst-system-line-1-color, #000);
+}
+
+.group-XazO1A:has(.control-fRhDZ8:focus) {
+  box-shadow: 0 0 0 2px var(--wst-links-and-actions-color, #116dff);
+}
+
+.group-XazO1A:has(.control-fRhDZ8[aria-invalid="true"]) {
+  border-color: color-mix(in srgb,
+    var(--wst-system-error-color, #df3131) 60%,
+    transparent);
+}
+
+.group-XazO1A:has(.control-fRhDZ8[aria-invalid="true"]):hover, .group-XazO1A:has(.control-fRhDZ8[aria-invalid="true"]):focus-within {
+  border-color: var(--wst-system-error-color, #df3131);
+}
+
+.group-XazO1A:has(.control-fRhDZ8[data-valid]) {
+  border-color: color-mix(in srgb,
+    var(--wst-system-success-color, #008250) 60%,
+    transparent);
+}
+
+.group-XazO1A:has(.control-fRhDZ8:disabled) {
+  cursor: not-allowed;
+}
+
+.group-XazO1A:has(.control-fRhDZ8:disabled):hover {
+  border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+}
+
+.group-XazO1A:has(.control-fRhDZ8:disabled) .adornment-Z1N0NF {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.group-XazO1A.groupLine-vlna4V {
+  border-width: 0;
+  border-block-end-width: var(--wst-system-line-1-width, 1px);
+  border-radius: 0;
+  padding-inline: 0;
+}
+
+.group-XazO1A .control-fRhDZ8 {
+  background-color: #0000;
+  border: 0;
+  flex: auto;
+  width: auto;
+  min-width: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.adornment-Z1N0NF {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-shade-3-color, #767676);
+  flex-shrink: 0;
+  align-items: center;
+  display: inline-flex;
+}
+
+.adornment-Z1N0NF > svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+

package/dist/Field/index.d.ts

@@ -110,6 +110,8 @@ declare type ControlVariant = 'box' | 'line';
 
 declare const decrementPress: "decrement-press";
 
+declare type DescriptionAlign = 'start' | 'end';
+
 declare const disabled: "disabled";
 
 declare const drag: "drag";
@@ -133,12 +135,17 @@ export declare const Field: {
     } & React_2.RefAttributes<HTMLDivElement>>;
     Description: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldDescriptionProps_2, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
         className?: string | undefined;
-    } & React_2.RefAttributes<HTMLParagraphElement>>;
-    Control: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
-        className?: string | undefined;
     } & {
+        /** Horizontal alignment of the text. */
+        align?: DescriptionAlign | undefined;
+    } & React_2.RefAttributes<HTMLParagraphElement>>;
+    Control: React_2.ForwardRefExoticComponent<Omit<WithStringClassName<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">>, "prefix" | "suffix"> & {
         /** `line` swaps the boxed border for a single bottom border. */
         variant?: ControlVariant | undefined;
+        /** Content shown inside the field before the input. */
+        prefix?: React_2.ReactNode;
+        /** Content shown inside the field after the input. */
+        suffix?: React_2.ReactNode;
     } & React_2.RefAttributes<HTMLElement>>;
     Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -682,4 +689,8 @@ 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/Field/index.js

@@ -675,10 +675,14 @@ const Field_module = {
     label: "label-YSWZBs",
     error: "error-BUDKWp",
     description: "description-IVviYU",
+    descriptionEnd: "descriptionEnd-O3mOtW",
     control: "control-fRhDZ8",
     controlLine: "controlLine-cAw0CF",
     labelFloating: "labelFloating-io8BLN",
-    item: "item-kQeHOQ"
+    group: "group-XazO1A",
+    adornment: "adornment-Z1N0NF",
+    item: "item-kQeHOQ",
+    groupLine: "groupLine-vlna4V"
 };
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldRoot_FieldRoot, {
         ref: ref,
@@ -706,9 +710,11 @@ const Error = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...
             }),
         ...props
     }));
-const Description = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldDescription_FieldDescription, {
+const Description = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, align = 'start', ...props }, ref)=>/*#__PURE__*/ jsx(FieldDescription_FieldDescription, {
         ref: ref,
-        className: clsx(Field_module.description, className),
+        className: clsx(Field_module.description, {
+            [Field_module.descriptionEnd]: 'end' === align
+        }, className),
         ...props
     }));
 const TEXT_INPUT_TYPES = new Set([
@@ -725,16 +731,41 @@ const TEXT_INPUT_TYPES = new Set([
     'week',
     'time'
 ]);
-const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, type = 'text', variant = 'box', ...props }, ref)=>/*#__PURE__*/ jsx(FieldControl_FieldControl, {
+const hasAdornment = (node)=>null != node && 'boolean' != typeof node;
+const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, type = 'text', variant = 'box', prefix, suffix, ...props }, ref)=>{
+    const showPrefix = hasAdornment(prefix);
+    const showSuffix = hasAdornment(suffix);
+    const adorned = showPrefix || showSuffix;
+    const control = /*#__PURE__*/ jsx(FieldControl_FieldControl, {
         ref: ref,
         type: type,
         className: clsx({
             [Input_module.root]: TEXT_INPUT_TYPES.has(type)
         }, Field_module.control, {
             [Field_module.controlLine]: 'line' === variant
+        }, {
+            'has-custom-focus': adorned
         }, className),
         ...props
-    }));
+    });
+    if (!adorned) return control;
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsx(Input_module.root, Field_module.group, {
+            [Field_module.groupLine]: 'line' === variant
+        }),
+        children: [
+            showPrefix && /*#__PURE__*/ jsx("span", {
+                className: Field_module.adornment,
+                children: prefix
+            }),
+            control,
+            showSuffix && /*#__PURE__*/ jsx("span", {
+                className: Field_module.adornment,
+                children: suffix
+            })
+        ]
+    });
+});
 const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldItem_FieldItem, {
         ref: ref,
         className: clsx(Field_module.item, className),

package/dist/RadioField/index.d.ts

@@ -1,3 +1,4 @@
+import { DescriptionAlign } from '../Field/Field';
 import { FieldControlProps } from '@base-ui/react/field';
 import { FieldDescriptionProps } from '../Field';
 import { FieldDescriptionProps as FieldDescriptionProps_2 } from '@base-ui/react/field';
@@ -54,6 +55,8 @@ declare type ComponentRenderFn<Props, State> = (props: Props, state: State) => R
 
 declare type ControlVariant = 'box' | 'line';
 
+declare type DescriptionAlign_2 = 'start' | 'end';
+
 declare const Field: {
     Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldRootProps_3, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -69,12 +72,17 @@ declare const Field: {
     } & React_2.RefAttributes<HTMLDivElement>>;
     Description: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldDescriptionProps_2, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
         className?: string | undefined;
-    } & React_2.RefAttributes<HTMLParagraphElement>>;
-    Control: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldControlProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
-        className?: string | undefined;
     } & {
+        /** Horizontal alignment of the text. */
+        align?: DescriptionAlign_2 | undefined;
+    } & React_2.RefAttributes<HTMLParagraphElement>>;
+    Control: React_2.ForwardRefExoticComponent<Omit<WithStringClassName<Omit<Omit<FieldControlProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">>, "prefix" | "suffix"> & {
         /** `line` swaps the boxed border for a single bottom border. */
         variant?: ControlVariant | undefined;
+        /** Content shown inside the field before the input. */
+        prefix?: React_2.ReactNode;
+        /** Content shown inside the field after the input. */
+        suffix?: React_2.ReactNode;
     } & React_2.RefAttributes<HTMLElement>>;
     Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -185,6 +193,8 @@ export declare const RadioField: React_2.ForwardRefExoticComponent<Omit<Omit<Omi
     /** Props forwarded to the `Field.Description`. */
     descriptionProps?: Omit<Omit<Omit<Omit<Omit<FieldDescriptionProps, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        align?: DescriptionAlign | undefined;
     } & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "children"> | undefined;
     /** Props forwarded to the `Field.Error`. */
     errorProps?: Omit<Omit<Omit<Omit<Omit<FieldErrorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {

package/dist/index.d.ts

@@ -73,6 +73,7 @@ import { ContextMenuRadioItemIndicatorProps as ContextMenuRadioItemIndicatorProp
 import { ContextMenuRadioItemProps as ContextMenuRadioItemProps_2 } from '@base-ui/react/context-menu';
 import { ContextMenuSubmenuTriggerProps as ContextMenuSubmenuTriggerProps_2 } from '@base-ui/react/context-menu';
 import { ContextMenuTriggerProps as ContextMenuTriggerProps_2 } from '@base-ui/react/context-menu';
+import { DescriptionAlign as DescriptionAlign_2 } from '../Field/Field';
 import { DialogBackdropProps as DialogBackdropProps_2 } from '@base-ui/react/dialog';
 import { DialogCloseProps as DialogCloseProps_2 } from '@base-ui/react/dialog';
 import { DialogDescriptionProps as DialogDescriptionProps_2 } from '@base-ui/react/dialog';
@@ -3103,6 +3104,8 @@ declare const DEFAULT_SIZE: {
 
 declare function Description({ className, ...props }: WithStringClassName<Drawer_2.Description.Props>): JSX_2.Element;
 
+declare type DescriptionAlign = 'start' | 'end';
+
 export declare const Dialog: {
     Backdrop: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<DialogBackdropProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -4197,12 +4200,17 @@ export declare const Field: {
     } & React_2.RefAttributes<HTMLDivElement>>;
     Description: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldDescriptionProps_2, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
         className?: string | undefined;
-    } & React_2.RefAttributes<HTMLParagraphElement>>;
-    Control: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
-        className?: string | undefined;
     } & {
+        /** Horizontal alignment of the text. */
+        align?: DescriptionAlign | undefined;
+    } & React_2.RefAttributes<HTMLParagraphElement>>;
+    Control: React_2.ForwardRefExoticComponent<Omit<WithStringClassName<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">>, "prefix" | "suffix"> & {
         /** `line` swaps the boxed border for a single bottom border. */
         variant?: ControlVariant | undefined;
+        /** Content shown inside the field before the input. */
+        prefix?: React_2.ReactNode;
+        /** Content shown inside the field after the input. */
+        suffix?: React_2.ReactNode;
     } & React_2.RefAttributes<HTMLElement>>;
     Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -8350,6 +8358,8 @@ export declare const RadioField: React_2.ForwardRefExoticComponent<Omit<Omit<Omi
     /** Props forwarded to the `Field.Description`. */
     descriptionProps?: Omit<Omit<Omit<Omit<Omit<FieldDescriptionProps_3, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        align?: DescriptionAlign_2 | undefined;
     } & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "children"> | undefined;
     /** Props forwarded to the `Field.Error`. */
     errorProps?: Omit<Omit<Omit<Omit<Omit<FieldErrorProps_3, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.107.0",
+  "version": "1.109.0",
   "description": "Pure UI components for the Wix site builder",
   "license": "MIT",
   "type": "module",
@@ -95,5 +95,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "65a32ebe441a030aa575584abf914e7d8ab9707c45d7485eda73b47d"
+  "falconPackageHash": "5921866bf296b91546f45790116e4a0e544eb65d57c1c94ad19e9f2e"
 }