@wix/site-ui 1.13.0 → 1.14.0

package/dist/Slider/index.d.ts

@@ -8,7 +8,11 @@ import { SliderThumbProps } from '@base-ui/react/slider';
 import { SliderTrackProps } from '@base-ui/react/slider';
 import { SliderValueProps } from '@base-ui/react/slider';
 
-declare function Root<Value extends number | readonly number[]>({ className, ...props }: WithStringClassName<Slider_2.Root.Props<Value>>): JSX_2.Element;
+declare function Root<Value extends number | readonly number[]>({ className, size, style, ...props }: RootProps<Value>): JSX_2.Element;
+
+declare type RootProps<Value extends number | readonly number[]> = WithStringClassName<Slider_2.Root.Props<Value>> & {
+    size?: number;
+};
 
 export declare const Slider: {
     Label: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SliderLabelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
@@ -32,6 +36,12 @@ export declare const Slider: {
     Root: typeof Root;
 };
 
+export declare const SliderSize: {
+    readonly small: 12;
+    readonly medium: 16;
+    readonly large: 20;
+};
+
 declare type WithStringClassName<P> = Omit<P, 'className'> & {
     className?: string;
 };

package/dist/Slider/index.js

@@ -3,12 +3,19 @@ import { Slider } from "@base-ui/react/slider";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
 const Slider_module = {
+    root: "root-uI1zMj",
     label: "label-MkH3nw",
+    value: "value-ZbXzRd",
     control: "control-_J8a2_",
     track: "track-WMB__l",
     indicator: "indicator-uJyfNg",
     thumb: "thumb-oReKer"
 };
+const SliderSize = {
+    small: 12,
+    medium: 16,
+    large: 20
+};
 const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Slider.Label, {
         ref: ref,
         className: clsx(Slider_module.label, className),
@@ -39,10 +46,14 @@ const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className,
         className: clsx(Slider_module.indicator, className),
         ...props
     }));
-function Root({ className, ...props }) {
+function Root({ className, size = SliderSize.medium, style, ...props }) {
     return /*#__PURE__*/ jsx(Slider.Root, {
         ...props,
-        className: clsx(Slider_module.root, className)
+        className: clsx(Slider_module.root, className),
+        style: {
+            '--slider-size': `${size}px`,
+            ...style
+        }
     });
 }
 const Slider_Slider = {
@@ -54,4 +65,4 @@ const Slider_Slider = {
     Indicator: Indicator,
     Root: Root
 };
-export { Slider_Slider as Slider };
+export { SliderSize, Slider_Slider as Slider };

package/dist/Switch/index.css

@@ -1,38 +1,46 @@
 .root-jFySXM {
-  background-color: var(--wst-paragraph-2-color, #666);
-  opacity: .7;
-  transition: all .2s;
-}
-
-.root-jFySXM:hover {
-  opacity: 1;
+  width: var(--switch-width, 44px);
+  height: var(--switch-height, 24px);
+  border-radius: calc(var(--switch-height, 24px) / 2);
+  background-color: var(--wst-system-disabled-color);
+  cursor: pointer;
+  padding: 0;
+  transition: background-color .2s;
+  position: relative;
 }
 
 .root-jFySXM[data-checked] {
-  background-color: var(--wst-links-and-actions-color, #116dff);
-  opacity: 1;
-}
-
-.root-jFySXM[data-checked]:hover {
-  opacity: .7;
+  background-color: var(--wst-links-and-actions-color);
 }
 
-.root-jFySXM[data-disabled], .root-jFySXM[data-disabled]:hover, .root-jFySXM[data-disabled][data-checked], .root-jFySXM[data-disabled][data-checked]:hover {
-  opacity: 1;
-  background-color: var(--wst-system-disabled-color, #ccc);
+.root-jFySXM[data-disabled] {
+  cursor: default;
+  pointer-events: none;
+  opacity: .5;
 }
 
 .root-jFySXM:focus-visible {
-  outline: 2px solid var(--wst-links-and-actions-color, #116dff);
+  outline: 2px solid var(--wst-links-and-actions-color);
   outline-offset: 2px;
 }
 
 .thumb-aDkgmk {
-  background-color: var(--wst-primary-background-color, #fff);
-  transition-duration: .2s;
+  width: var(--switch-thumb-size, 18px);
+  height: var(--switch-thumb-size, 18px);
+  background-color: var(--wst-primary-background-color);
+  border-radius: 50%;
+  transition: left .2s;
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  transform: translateY(-50%);
+}
+
+.root-jFySXM[data-checked] .thumb-aDkgmk {
+  left: calc(var(--switch-width, 44px) - var(--switch-thumb-size, 18px) - 3px);
 }
 
 .root-jFySXM[data-disabled] .thumb-aDkgmk {
-  background-color: color-mix(in srgb, var(--wst-primary-background-color, #fff) 60%, transparent);
+  background-color: color-mix(in srgb, var(--wst-primary-background-color) 60%, transparent);
 }
 

package/dist/Switch/index.d.ts

@@ -5,12 +5,30 @@ import { SwitchThumbProps } from '@base-ui/react/switch';
 export declare const Switch: {
     Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SwitchRootProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        width?: number | undefined;
+        height?: number | undefined;
     } & React_2.RefAttributes<HTMLElement>>;
     Thumb: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SwitchThumbProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+export declare const SwitchSize: {
+    readonly small: {
+        readonly width: 36;
+        readonly height: 20;
+    };
+    readonly medium: {
+        readonly width: 44;
+        readonly height: 24;
+    };
+    readonly large: {
+        readonly width: 56;
+        readonly height: 32;
+    };
+};
+
 
 export * from "@base-ui/react/switch";
 

package/dist/Switch/index.js

@@ -6,9 +6,29 @@ const Switch_module = {
     root: "root-jFySXM",
     thumb: "thumb-aDkgmk"
 };
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Switch.Root, {
+const SwitchSize = {
+    small: {
+        width: 36,
+        height: 20
+    },
+    medium: {
+        width: 44,
+        height: 24
+    },
+    large: {
+        width: 56,
+        height: 32
+    }
+};
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, width = SwitchSize.medium.width, height = SwitchSize.medium.height, style, ...props }, ref)=>/*#__PURE__*/ jsx(Switch.Root, {
         ref: ref,
         className: clsx(Switch_module.root, className),
+        style: {
+            '--switch-width': `${width}px`,
+            '--switch-height': `${height}px`,
+            '--switch-thumb-size': `${height - 6}px`,
+            ...style
+        },
         ...props
     }));
 const Thumb = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Switch.Thumb, {
@@ -20,4 +40,4 @@ const Switch_Switch = {
     Root: Root,
     Thumb: Thumb
 };
-export { Switch_Switch as Switch };
+export { SwitchSize, Switch_Switch as Switch };

package/dist/Tabs/index.css

@@ -43,7 +43,7 @@
   vertical-align: bottom;
   height: 100%;
   color: inherit;
-  font: inherit;
+  font: var(--wst-paragraph-2-font);
   background: none;
   border: 0 solid #0000;
   border-block-end-width: 3px;

package/dist/Toggle/index.css

@@ -1,30 +1,54 @@
 .root-b5XZrV {
+  box-sizing: border-box;
+  padding: var(--wst-button-secondary-padding-top) var(--wst-button-secondary-padding-right) var(--wst-button-secondary-padding-bottom) var(--wst-button-secondary-padding-left);
+  border-top: var(--wst-button-secondary-border-top-width) var(--wst-button-secondary-border-top-style) var(--wst-button-secondary-border-top-color);
+  border-inline-end: var(--wst-button-secondary-border-right-width) var(--wst-button-secondary-border-right-style) var(--wst-button-secondary-border-right-color);
+  border-bottom: var(--wst-button-secondary-border-bottom-width) var(--wst-button-secondary-border-bottom-style) var(--wst-button-secondary-border-bottom-color);
+  border-inline-start: var(--wst-button-secondary-border-left-width) var(--wst-button-secondary-border-left-style) var(--wst-button-secondary-border-left-color);
+  background-color: var(--wst-button-secondary-background-color);
+  color: var(--wst-button-secondary-color);
+  font: var(--wst-button-secondary-font);
   cursor: pointer;
-  color: var(--wst-paragraph-2-color, #000);
-  margin: 0;
-  padding: 0;
-  line-height: 0;
+  border-start-start-radius: var(--wst-button-secondary-border-top-left-radius);
+  border-start-end-radius: var(--wst-button-secondary-border-top-right-radius);
+  border-end-end-radius: var(--wst-button-secondary-border-bottom-right-radius);
+  border-end-start-radius: var(--wst-button-secondary-border-bottom-left-radius);
+  justify-content: center;
+  align-items: center;
+  line-height: normal;
   transition: opacity .2s cubic-bezier(.39, .11, .37, .99);
-  display: inline-block;
+  display: inline-flex;
 }
 
 .root-b5XZrV:hover {
-  opacity: .6;
+  opacity: .8;
 }
 
 .root-b5XZrV[data-pressed] {
-  color: var(--wst-paragraph-2-color, #000);
+  background-color: var(--wst-button-primary-background-color);
+  color: var(--wst-button-primary-color);
+  border-top-color: var(--wst-button-primary-background-color);
+  border-inline-end-color: var(--wst-button-primary-background-color);
+  border-bottom-color: var(--wst-button-primary-background-color);
+  border-inline-start-color: var(--wst-button-primary-background-color);
 }
 
 .root-b5XZrV:disabled {
-  color: var(--wst-system-disabled-color, #c2c2c2);
+  color: var(--wst-system-disabled-color);
+  border-color: var(--wst-system-disabled-color);
   cursor: default;
+  pointer-events: none;
 }
 
 .root-b5XZrV:disabled:hover {
   opacity: 1;
 }
 
+.root-b5XZrV:focus-visible {
+  outline: 2px solid var(--wst-links-and-actions-color);
+  outline-offset: 2px;
+}
+
 @keyframes toggle-pop-in-YeDB_9 {
   0% {
     opacity: 0;

package/dist/ToggleGroup/index.css

@@ -1,2 +1,5 @@
-
+.root-JZaWem {
+  gap: 4px;
+  display: inline-flex;
+}
 

package/dist/ToggleGroup/index.js

@@ -2,7 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const ToggleGroup_module = {};
+const ToggleGroup_module = {
+    root: "root-JZaWem"
+};
 const ToggleGroup_ToggleGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ToggleGroup, {
         ref: ref,
         className: clsx(ToggleGroup_module.root, className),

package/dist/Toolbar/index.css

@@ -1,2 +1,58 @@
+.root-TasA57 {
+  align-items: center;
+  gap: 2px;
+  display: flex;
+}
 
+.button-VwIpOv {
+  box-sizing: border-box;
+  color: var(--wst-paragraph-2-color);
+  font: var(--wst-paragraph-2-font);
+  cursor: pointer;
+  background: none;
+  border: 1px solid #0000;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 10px;
+  display: inline-flex;
+}
+
+.button-VwIpOv:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color) 8%, transparent);
+}
+
+.button-VwIpOv[data-pressed] {
+  background-color: color-mix(in srgb, var(--wst-links-and-actions-color) 12%, transparent);
+  color: var(--wst-links-and-actions-color);
+}
+
+.button-VwIpOv:disabled {
+  color: var(--wst-system-disabled-color);
+  cursor: default;
+  pointer-events: none;
+}
+
+.link-ONsUed {
+  color: var(--wst-links-and-actions-color);
+  font: var(--wst-paragraph-2-font);
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  padding: 6px 10px;
+  text-decoration: none;
+  display: inline-flex;
+}
+
+.link-ONsUed:hover {
+  text-decoration: underline;
+}
+
+.separator-pZlgb3 {
+  background-color: var(--wst-system-line-1-color);
+  flex-shrink: 0;
+  width: 1px;
+  height: 20px;
+  margin: 0 4px;
+}
 

package/dist/Toolbar/index.js

@@ -2,7 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { Toolbar } from "@base-ui/react/toolbar";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Toolbar_module = {};
+const Toolbar_module = {
+    root: "root-TasA57",
+    button: "button-VwIpOv",
+    link: "link-ONsUed",
+    separator: "separator-pZlgb3"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Toolbar.Root, {
         ref: ref,
         className: clsx(Toolbar_module.root, className),

package/dist/Tooltip/index.css

@@ -1,3 +1,22 @@
+.trigger-xVlrp2 {
+  padding: var(--wst-button-secondary-padding-top) var(--wst-button-secondary-padding-right) var(--wst-button-secondary-padding-bottom) var(--wst-button-secondary-padding-left);
+  border-top: var(--wst-button-secondary-border-top-width) var(--wst-button-secondary-border-top-style) var(--wst-button-secondary-border-top-color);
+  border-inline-end: var(--wst-button-secondary-border-right-width) var(--wst-button-secondary-border-right-style) var(--wst-button-secondary-border-right-color);
+  border-bottom: var(--wst-button-secondary-border-bottom-width) var(--wst-button-secondary-border-bottom-style) var(--wst-button-secondary-border-bottom-color);
+  border-inline-start: var(--wst-button-secondary-border-left-width) var(--wst-button-secondary-border-left-style) var(--wst-button-secondary-border-left-color);
+  background-color: var(--wst-button-secondary-background-color);
+  color: var(--wst-button-secondary-color);
+  font: var(--wst-button-secondary-font);
+  cursor: pointer;
+  border-start-start-radius: var(--wst-button-secondary-border-top-left-radius);
+  border-start-end-radius: var(--wst-button-secondary-border-top-right-radius);
+  border-end-end-radius: var(--wst-button-secondary-border-bottom-right-radius);
+  border-end-start-radius: var(--wst-button-secondary-border-bottom-left-radius);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
 .positioner-sRKHj5[data-side="top"] {
   padding-bottom: 6px;
 }
@@ -34,11 +53,10 @@
   background-color: var(--wst-paragraph-2-color, #212121);
   border: 1px solid var(--wst-primary-background-color, #fff);
   color: var(--wst-primary-background-color, #fff);
+  font: var(--wst-paragraph-3-font);
   -webkit-font-smoothing: auto;
   border-radius: 3px;
   padding: 4px 12px;
-  font-size: 14px;
-  line-height: 20px;
   transition: transform .12s cubic-bezier(.25, .46, .45, .94), opacity .12s cubic-bezier(.25, .46, .45, .94);
   box-shadow: 0 4px 8px #0000001f, 0 0 4px #0000001a;
 }

package/dist/Tooltip/index.js

@@ -3,6 +3,7 @@ import { Tooltip } from "@base-ui/react/tooltip";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
 const Tooltip_module = {
+    trigger: "trigger-xVlrp2",
     positioner: "positioner-sRKHj5",
     popup: "popup-V_41k4",
     arrow: "arrow-aUAEXL"

package/dist/Typography/index.css

@@ -0,0 +1,45 @@
+.h1-go2_mI {
+  font: var(--wst-heading-1-font);
+  color: var(--wst-heading-1-color);
+}
+
+.h2-dAyvwd {
+  font: var(--wst-heading-2-font);
+  color: var(--wst-heading-2-color);
+}
+
+.h3-LClqyK {
+  font: var(--wst-heading-3-font);
+  color: var(--wst-heading-3-color);
+}
+
+.h4-pzBHGr {
+  font: var(--wst-heading-4-font);
+  color: var(--wst-heading-4-color);
+}
+
+.h5-HOx5Wp {
+  font: var(--wst-heading-5-font);
+  color: var(--wst-heading-5-color);
+}
+
+.h6-zCNm1M {
+  font: var(--wst-heading-6-font);
+  color: var(--wst-heading-6-color);
+}
+
+.p1-pY02jM {
+  font: var(--wst-paragraph-1-font);
+  color: var(--wst-paragraph-1-color);
+}
+
+.p2-TsZIq5 {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color);
+}
+
+.p3-N6QdAQ {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
+}
+

package/dist/Typography/index.d.ts

@@ -0,0 +1,12 @@
+import * as React_2 from 'react';
+
+export declare const Typography: React_2.ForwardRefExoticComponent<TypographyProps & React_2.RefAttributes<HTMLElement>>;
+
+export declare interface TypographyProps extends React_2.HTMLAttributes<HTMLElement> {
+    variant?: TypographyVariant;
+    render?: React_2.ReactElement;
+}
+
+export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p1' | 'p2' | 'p3';
+
+export { }

package/dist/Typography/index.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import * as __rspack_external_react from "react";
+const Typography_module = {
+    h1: "h1-go2_mI",
+    h2: "h2-dAyvwd",
+    h3: "h3-LClqyK",
+    h4: "h4-pzBHGr",
+    h5: "h5-HOx5Wp",
+    h6: "h6-zCNm1M",
+    p1: "p1-pY02jM",
+    p2: "p2-TsZIq5",
+    p3: "p3-N6QdAQ"
+};
+const variantToElementTagMap = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    p1: 'p',
+    p2: 'p',
+    p3: 'p'
+};
+const Typography = /*#__PURE__*/ __rspack_external_react.forwardRef(({ variant = 'p2', render: renderProp, className, ...props }, ref)=>{
+    const variantClass = Typography_module[variant];
+    if (renderProp) {
+        const { className: renderClassName, ...renderElementProps } = renderProp.props;
+        return /*#__PURE__*/ __rspack_external_react.cloneElement(renderProp, {
+            ...renderElementProps,
+            ...props,
+            ref,
+            className: clsx(variantClass, renderClassName, className)
+        });
+    }
+    const Tag = variantToElementTagMap[variant];
+    return /*#__PURE__*/ jsx(Tag, {
+        ref: ref,
+        className: clsx(variantClass, className),
+        ...props
+    });
+});
+export { Typography };