@wix/site-ui 1.76.0 → 1.78.0

package/dist/Field/index.css

@@ -24,7 +24,53 @@
   color: var(--wst-shade-3-color, #767676);
 }
 
-.control-fRhDZ8, .item-kQeHOQ {
+.control-fRhDZ8 {
+  width: 100%;
+}
+
+.control-fRhDZ8.controlLine-cAw0CF {
+  border: 0;
+  border-block-end-width: var(--wst-system-line-1-width, 1px);
+  border-block-end-style: solid;
+  border-block-end-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+  border-radius: 0;
+  padding-inline: 0;
+}
+
+.control-fRhDZ8.controlLine-cAw0CF:hover, .control-fRhDZ8.controlLine-cAw0CF:focus {
+  border-block-end-color: var(--wst-system-line-1-color, #000);
+}
+
+.root-ECdHfF:has(.labelFloating-io8BLN) {
+  position: relative;
+}
+
+.root-ECdHfF:has(.labelFloating-io8BLN) .control-fRhDZ8 {
+  block-size: 50px;
+  padding-block: 24px 6px;
+}
+
+.labelFloating-io8BLN {
+  z-index: 2;
+  color: var(--wst-shade-3-color, #767676);
+  pointer-events: none;
+  margin: 0;
+  transition: inset-block-start .12s, transform .12s, font-size .12s;
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 12px;
+  transform: translateY(-50%);
+}
+
+.labelFloating-io8BLN[data-filled], .labelFloating-io8BLN[data-focused] {
+  font-size: 12px;
+  inset-block-start: 8px;
+  transform: translateY(0);
+}
+
+.item-kQeHOQ {
   width: 100%;
 }
 

package/dist/Field/index.d.ts

@@ -106,6 +106,8 @@ declare const closeWatcher: "close-watcher";
  */
 declare type ComponentRenderFn<Props, State> = (props: Props, state: State) => React_2.ReactElement<unknown>;
 
+declare type ControlVariant = 'box' | 'line';
+
 declare const decrementPress: "decrement-press";
 
 declare const disabled: "disabled";
@@ -122,6 +124,9 @@ export declare const Field: {
     } & React_2.RefAttributes<HTMLDivElement>>;
     Label: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldLabelProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        /** `floating` lifts the label into the control until it is focused or filled. */
+        variant?: LabelVariant | undefined;
     } & React_2.RefAttributes<HTMLElement>>;
     Error: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldErrorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -131,6 +136,9 @@ export declare const Field: {
     } & React_2.RefAttributes<HTMLParagraphElement>>;
     Control: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        /** `line` swaps the boxed border for a single bottom border. */
+        variant?: ControlVariant | undefined;
     } & React_2.RefAttributes<HTMLElement>>;
     Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -550,6 +558,8 @@ declare const itemPress: "item-press";
 
 declare const keyboard: "keyboard";
 
+declare type LabelVariant = 'default' | 'floating';
+
 declare const linkPress: "link-press";
 
 declare const listNavigation: "list-navigation";

package/dist/Field/index.js

@@ -675,6 +675,8 @@ const Field_module = {
     error: "error-BUDKWp",
     description: "description-IVviYU",
     control: "control-fRhDZ8",
+    controlLine: "controlLine-cAw0CF",
+    labelFloating: "labelFloating-io8BLN",
     item: "item-kQeHOQ"
 };
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldRoot_FieldRoot, {
@@ -682,9 +684,11 @@ const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...p
         className: clsx(Field_module.root, className),
         ...props
     }));
-const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldLabel_FieldLabel, {
+const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, variant = 'default', ...props }, ref)=>/*#__PURE__*/ jsx(FieldLabel_FieldLabel, {
         ref: ref,
-        className: clsx(Field_module.label, className),
+        className: clsx(Field_module.label, {
+            [Field_module.labelFloating]: 'floating' === variant
+        }, className),
         ...props
     }));
 const Error = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldError_FieldError, {
@@ -711,12 +715,14 @@ const TEXT_INPUT_TYPES = new Set([
     'week',
     'time'
 ]);
-const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, type = 'text', ...props }, ref)=>/*#__PURE__*/ jsx(FieldControl_FieldControl, {
+const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, type = 'text', variant = 'box', ...props }, ref)=>/*#__PURE__*/ jsx(FieldControl_FieldControl, {
         ref: ref,
         type: type,
         className: clsx({
             [Input_module.root]: TEXT_INPUT_TYPES.has(type)
-        }, Field_module.control, className),
+        }, Field_module.control, {
+            [Field_module.controlLine]: 'line' === variant
+        }, className),
         ...props
     }));
 const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldItem_FieldItem, {

package/dist/index.d.ts

@@ -3037,6 +3037,8 @@ export declare interface ContextMenuTriggerState {
     open: boolean;
 }
 
+declare type ControlVariant = 'box' | 'line';
+
 export declare type Coords = typeof DEFAULT_COORDS;
 
 declare function createAlertDialogHandle<Payload>(): AlertDialogHandle<Payload>;
@@ -4178,6 +4180,9 @@ export declare const Field: {
     } & React_2.RefAttributes<HTMLDivElement>>;
     Label: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldLabelProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        /** `floating` lifts the label into the control until it is focused or filled. */
+        variant?: LabelVariant | undefined;
     } & React_2.RefAttributes<HTMLElement>>;
     Error: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldErrorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -4187,6 +4192,9 @@ export declare const Field: {
     } & React_2.RefAttributes<HTMLParagraphElement>>;
     Control: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        /** `line` swaps the boxed border for a single bottom border. */
+        variant?: ControlVariant | undefined;
     } & React_2.RefAttributes<HTMLElement>>;
     Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -4914,6 +4922,8 @@ declare interface LabelableContext {
  */
 declare const LabelableContext: React_2.Context<LabelableContext>;
 
+declare type LabelVariant = 'default' | 'floating';
+
 declare const linkPress: "link-press";
 
 declare const listNavigation: "list-navigation";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.76.0",
+  "version": "1.78.0",
   "description": "Pure UI components for the Wix site builder",
   "license": "MIT",
   "type": "module",
@@ -94,5 +94,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "3b4eee70d852493eac7e672e7240712a7c31e3d582ee7481cc4a305e"
+  "falconPackageHash": "cd4d9b1fc1ac591f68448bb802dc7c7d11ca4ce5c4a6117f8ef633a6"
 }