@wix/site-ui 1.12.0 → 1.14.0

package/dist/PreviewCard/index.css

@@ -1,2 +1,75 @@
+.popup-s3Cjfv {
+  background-color: var(--wst-preview-card-background-color, #212121);
+  color: var(--wst-preview-card-text-color, #fff);
+  padding: var(--wst-preview-card-padding, 4px 12px);
+  border: 1px solid var(--wst-preview-card-border-color, #757575);
+  border-radius: var(--wst-preview-card-border-radius, 3px);
+  -webkit-font-smoothing: auto;
+  font-size: 14px;
+  line-height: 20px;
+  box-shadow: 0 4px 8px #0000001f, 0 0 4px #0000001a;
+}
 
+.arrow-FRR3yT {
+  margin: 0;
+  display: block;
+  position: absolute;
+}
+
+.arrow-FRR3yT svg {
+  display: block;
+}
+
+.positioner-Gzwwg3[data-side="top"] .popup-s3Cjfv {
+  padding-bottom: 6px;
+}
+
+.positioner-Gzwwg3[data-side="bottom"] .popup-s3Cjfv {
+  padding-top: 6px;
+}
+
+.positioner-Gzwwg3[data-side="left"] .popup-s3Cjfv {
+  padding-right: 6px;
+}
+
+.positioner-Gzwwg3[data-side="right"] .popup-s3Cjfv {
+  padding-left: 6px;
+}
+
+.positioner-Gzwwg3[data-side="top"] .arrow-FRR3yT {
+  width: 12px;
+  height: 7px;
+  bottom: -1px;
+}
+
+.positioner-Gzwwg3[data-side="bottom"] .arrow-FRR3yT {
+  width: 12px;
+  height: 7px;
+  top: -1px;
+}
+
+.positioner-Gzwwg3[data-side="left"] .arrow-FRR3yT {
+  width: 7px;
+  height: 12px;
+  right: -1px;
+}
+
+.positioner-Gzwwg3[data-side="right"] .arrow-FRR3yT {
+  width: 7px;
+  height: 12px;
+  left: -1px;
+}
+
+.arrow-FRR3yT path {
+  fill: var(--wst-preview-card-background-color, #212121);
+  stroke: var(--wst-preview-card-border-color, #757575);
+}
+
+.arrow-FRR3yT path:first-child {
+  stroke: none;
+}
+
+.arrow-FRR3yT path:last-child {
+  stroke-dasharray: 0 17 17;
+}
 

package/dist/PreviewCard/index.js

@@ -2,7 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const PreviewCard_module = {};
+const PreviewCard_module = {
+    popup: "popup-s3Cjfv",
+    arrow: "arrow-FRR3yT",
+    positioner: "positioner-Gzwwg3"
+};
 const Positioner = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(PreviewCard.Positioner, {
         ref: ref,
         className: clsx(PreviewCard_module.positioner, className),

package/dist/Progress/index.css

@@ -1,2 +1,26 @@
+.root-VDHmKD {
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+  display: flex;
+}
 
+.track-_XqaKn {
+  width: 100%;
+  height: var(--progress-size, 6px);
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #333) 20%, transparent);
+  border-radius: 999px;
+  position: relative;
+}
+
+.indicator-lfO9jO {
+  background: var(--wst-links-and-actions-color, #116dff);
+  height: 100%;
+  transition: width .5s ease-in-out;
+}
+
+.value-SBk4OI, .label-HqgXxt {
+  color: var(--wst-paragraph-3-color, #333);
+  font: var(--wst-paragraph-3-font);
+}
 

package/dist/Progress/index.d.ts

@@ -8,6 +8,8 @@ import * as React_2 from 'react';
 export declare const Progress: {
     Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ProgressRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
+    } & {
+        size?: number | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
     Track: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ProgressTrackProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -23,6 +25,13 @@ export declare const Progress: {
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
+export declare const ProgressSize: {
+    readonly thin: 4;
+    readonly small: 6;
+    readonly medium: 8;
+    readonly large: 12;
+};
+
 
 export * from "@base-ui/react/progress";
 

package/dist/Progress/index.js

@@ -2,10 +2,26 @@ import { jsx } from "react/jsx-runtime";
 import { Progress } from "@base-ui/react/progress";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Progress_module = {};
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Progress.Root, {
+const Progress_module = {
+    root: "root-VDHmKD",
+    track: "track-_XqaKn",
+    indicator: "indicator-lfO9jO",
+    value: "value-SBk4OI",
+    label: "label-HqgXxt"
+};
+const ProgressSize = {
+    thin: 4,
+    small: 6,
+    medium: 8,
+    large: 12
+};
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, size = ProgressSize.small, style, ...props }, ref)=>/*#__PURE__*/ jsx(Progress.Root, {
         ref: ref,
         className: clsx(Progress_module.root, className),
+        style: {
+            '--progress-size': `${size}px`,
+            ...style
+        },
         ...props
     }));
 const Track = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Progress.Track, {
@@ -35,4 +51,4 @@ const Progress_Progress = {
     Value: Value,
     Label: Label
 };
-export { Progress_Progress as Progress };
+export { ProgressSize, Progress_Progress as Progress };

package/dist/Radio/index.css

@@ -1,2 +1,61 @@
+.root-Lal8hj {
+  background-color: var(--wst-primary-background-color, transparent);
+  height: var(--radio-size, 16px);
+  width: var(--radio-size, 16px);
+  box-sizing: content-box;
+  border: 1px solid var(--wst-paragraph-2-color, #0009);
+  cursor: pointer;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  transition: background-color .2s linear, border-color .2s linear, border-width .2s linear, border-radius .2s linear;
+  display: flex;
+}
 
+.root-Lal8hj:hover, .root-Lal8hj:focus-visible {
+  border-color: var(--wst-paragraph-2-color, #000);
+  background-color: var(--wst-primary-background-color, transparent);
+  transition: background-color .2s linear, border-color .2s linear, border-width .2s linear, border-radius .2s linear;
+}
+
+.root-Lal8hj[data-checked] {
+  border-color: var(--wst-links-and-actions-color, #000);
+}
+
+.root-Lal8hj[data-disabled] {
+  cursor: default;
+  pointer-events: none;
+  border-color: var(--wst-system-disabled-color, #ccc);
+}
+
+.root-Lal8hj[data-invalid]:not([data-checked]) {
+  border-color: var(--wst-system-error-color) !important;
+}
+
+.root-Lal8hj[data-invalid][data-checked] {
+  border-color: var(--wst-system-error-color);
+}
+
+.indicator-YyFvol {
+  width: calc(var(--radio-size, 16px) * .5);
+  height: calc(var(--radio-size, 16px) * .5);
+  background-color: var(--wst-links-and-actions-color, #000);
+  opacity: 0;
+  border-radius: 50%;
+  transition: background-color .2s linear, border-color .2s linear, border-width .2s linear, border-radius .2s linear;
+  transform: scale(.5);
+}
+
+.indicator-YyFvol[data-checked] {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.indicator-YyFvol[data-disabled] {
+  background-color: var(--wst-system-disabled-color, #ccc);
+}
+
+.root-Lal8hj[data-invalid][data-checked] .indicator-YyFvol {
+  background-color: var(--wst-system-error-color);
+}
 

package/dist/Radio/index.d.ts

@@ -10,7 +10,17 @@ export declare const Radio: {
     Root: typeof Root;
 };
 
-declare function Root<Value>({ className, ...props }: WithStringClassName<Radio_2.Root.Props<Value>>): JSX_2.Element;
+export declare const RadioSize: {
+    readonly small: 12;
+    readonly medium: 16;
+    readonly large: 20;
+};
+
+declare function Root<Value>({ className, size, style, ...props }: RootProps<Value>): JSX_2.Element;
+
+declare type RootProps<Value> = WithStringClassName<Radio_2.Root.Props<Value>> & {
+    size?: number;
+};
 
 declare type WithStringClassName<P> = Omit<P, 'className'> & {
     className?: string;

package/dist/Radio/index.js

@@ -2,20 +2,32 @@ import { jsx } from "react/jsx-runtime";
 import { Radio } from "@base-ui/react/radio";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Radio_module = {};
+const Radio_module = {
+    root: "root-Lal8hj",
+    indicator: "indicator-YyFvol"
+};
+const RadioSize = {
+    small: 12,
+    medium: 16,
+    large: 20
+};
 const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Radio.Indicator, {
         ref: ref,
         className: clsx(Radio_module.indicator, className),
         ...props
     }));
-function Root({ className, ...props }) {
+function Root({ className, size = RadioSize.medium, style, ...props }) {
     return /*#__PURE__*/ jsx(Radio.Root, {
         ...props,
-        className: clsx(Radio_module.root, className)
+        className: clsx(Radio_module.root, className),
+        style: {
+            '--radio-size': `${size}px`,
+            ...style
+        }
     });
 }
 const Radio_Radio = {
     Indicator: Indicator,
     Root: Root
 };
-export { Radio_Radio as Radio };
+export { RadioSize, Radio_Radio as Radio };

package/dist/RadioGroup/index.css

@@ -1,2 +1,8 @@
-
+.root-kKvIZ_ {
+  color: var(--wst-paragraph-2-color, currentColor);
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+}
 

package/dist/RadioGroup/index.js

@@ -2,7 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { RadioGroup } from "@base-ui/react/radio-group";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const RadioGroup_module = {};
+const RadioGroup_module = {
+    root: "root-kKvIZ_"
+};
 const RadioGroup_RadioGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(RadioGroup, {
         ref: ref,
         className: clsx(RadioGroup_module.root, className),

package/dist/ScrollArea/index.css

@@ -1,2 +1,37 @@
+.root-_9VjLl {
+  position: relative;
+  overflow: hidden;
+}
 
+.viewport-AtdxVk {
+  width: 100%;
+  height: 100%;
+  overflow: hidden scroll;
+}
+
+.scrollbar-NftRcM {
+  background: color-mix(in srgb, var(--wst-paragraph-2-color) 4%, transparent);
+  border-radius: 8px;
+  width: 8px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.scrollbar-NftRcM[data-orientation="horizontal"] {
+  width: auto;
+  height: 8px;
+  inset: auto 0 0;
+}
+
+.thumb-qKKUxU {
+  background: color-mix(in srgb, var(--wst-paragraph-2-color) 25%, transparent);
+  cursor: pointer;
+  border-radius: 8px;
+}
+
+.thumb-qKKUxU:hover {
+  background: color-mix(in srgb, var(--wst-paragraph-2-color) 40%, transparent);
+}
 

package/dist/ScrollArea/index.js

@@ -2,7 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { ScrollArea } from "@base-ui/react/scroll-area";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const ScrollArea_module = {};
+const ScrollArea_module = {
+    root: "root-_9VjLl",
+    viewport: "viewport-AtdxVk",
+    scrollbar: "scrollbar-NftRcM",
+    thumb: "thumb-qKKUxU"
+};
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(ScrollArea.Root, {
         ref: ref,
         className: clsx(ScrollArea_module.root, className),

package/dist/Select/index.css

@@ -1,2 +1,162 @@
+.label-UrIm_f {
+  color: var(--wst-paragraph-2-color, #000);
+  font: var(--wst-paragraph-2-font);
+  margin-bottom: 8px;
+  display: block;
+}
 
+.trigger-UPubf5 {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 68px;
+  height: var(--wst-select-height, 42px);
+  color: var(--wst-paragraph-2-color, #000);
+  background: var(--wst-primary-background-color, #fff);
+  border-style: solid;
+  border-width: 1px;
+  border-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent);
+  font: var(--wst-paragraph-2-font);
+  cursor: pointer;
+  border-radius: 0;
+  align-items: center;
+  column-gap: 4px;
+  padding: 0 12px;
+  display: flex;
+}
+
+.trigger-UPubf5:not([disabled]):not([data-popup-open]):hover, .trigger-UPubf5:not([disabled]):not([data-popup-open]):focus-visible {
+  border-color: var(--wst-paragraph-2-color, #000);
+  background-color: var(--wst-primary-background-color, #fff);
+  color: var(--wst-paragraph-2-color, #000);
+}
+
+.trigger-UPubf5[data-popup-open] {
+  border-color: var(--wst-paragraph-2-color, #000);
+}
+
+.trigger-UPubf5[disabled] {
+  cursor: default;
+  color: var(--wst-system-disabled-color, #999);
+  border-color: var(--wst-system-disabled-color, #999);
+}
+
+.value-fKND1Z[data-placeholder] {
+  color: var(--wst-shade-3-color, #aaa);
+}
+
+.icon-_ToIv8 {
+  color: var(--wst-paragraph-2-color, #000);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  transition: transform .2s;
+  display: flex;
+}
+
+.trigger-UPubf5[data-popup-open] .icon-_ToIv8 {
+  transform: rotate(180deg);
+}
+
+.trigger-UPubf5:not([disabled]):hover .icon-_ToIv8, .trigger-UPubf5:not([disabled]):focus-visible .icon-_ToIv8 {
+  color: var(--wst-paragraph-2-color, #000);
+}
+
+.trigger-UPubf5[disabled] .icon-_ToIv8 {
+  color: var(--wst-system-disabled-color, #999);
+}
+
+.value-fKND1Z {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  overflow: hidden;
+}
+
+.positioner-rz27gX {
+  z-index: 9999;
+}
+
+.popup-BEvbSY {
+  box-sizing: border-box;
+  background-color: var(--wst-primary-background-color, #fff);
+  border: 1px solid color-mix(in srgb, var(--wst-paragraph-2-color, #000) 40%, transparent);
+  border-radius: 0;
+  max-width: 100%;
+  margin-left: 1px;
+  overflow: hidden;
+  box-shadow: 0 4px 8px #0000001a, 0 0 4px #0000001a;
+}
+
+.list-fTpwcL {
+  margin: 0;
+  padding: 12px 0;
+  list-style: none;
+}
+
+.item-SBIvtk {
+  box-sizing: border-box;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  width: 100%;
+  color: var(--wst-paragraph-2-color, #000);
+  font: var(--wst-paragraph-2-font);
+  cursor: pointer;
+  align-items: center;
+  padding-inline: 12px;
+  display: flex;
+}
+
+.item-SBIvtk[data-highlighted] {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent);
+}
+
+.item-SBIvtk[data-selected] {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 12%, transparent);
+}
+
+.item-SBIvtk[data-selected][data-highlighted] {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 16%, transparent);
+}
+
+.item-SBIvtk[data-disabled] {
+  color: var(--wst-system-disabled-color, #999);
+  cursor: default;
+  pointer-events: none;
+}
+
+.itemText-tVdjcF {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-paragraph-2-color);
+  padding-inline: 0;
+  display: block;
+  overflow: hidden;
+}
+
+.itemIndicator-qlxJA4 {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  display: flex;
+}
+
+.scrollDownArrow-mffvLs, .scrollUpArrow-P67Eti {
+  cursor: default;
+  justify-content: center;
+  align-items: center;
+  padding: 4px 0;
+  display: flex;
+}
+
+.groupLabel-GC3RgN {
+  padding-top: 0;
+  padding-bottom: 0;
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-3-color);
+  padding-inline: 12px;
+  display: block;
+}
 

package/dist/Select/index.js

@@ -2,7 +2,21 @@ import { jsx } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Select_module = {};
+const Select_module = {
+    label: "label-UrIm_f",
+    trigger: "trigger-UPubf5",
+    value: "value-fKND1Z",
+    icon: "icon-_ToIv8",
+    positioner: "positioner-rz27gX",
+    popup: "popup-BEvbSY",
+    list: "list-fTpwcL",
+    item: "item-SBIvtk",
+    itemText: "itemText-tVdjcF",
+    itemIndicator: "itemIndicator-qlxJA4",
+    scrollDownArrow: "scrollDownArrow-mffvLs",
+    scrollUpArrow: "scrollUpArrow-P67Eti",
+    groupLabel: "groupLabel-GC3RgN"
+};
 const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Select.Label, {
         ref: ref,
         className: clsx(Select_module.label, className),

package/dist/Separator/index.css

@@ -1,2 +1,21 @@
+.root-rb7o7e {
+  margin-block: 0;
+  margin-inline: 0;
+}
 
+.root-rb7o7e[data-orientation="horizontal"] {
+  border-bottom-style: solid;
+  border-width: 0 0 var(--wst-system-line-1-width, 1px) 0;
+  border-bottom-color: var(--wst-system-line-1-color, #c2c2c2);
+  opacity: 1;
+  max-width: 100%;
+}
+
+.root-rb7o7e[data-orientation="vertical"] {
+  border-left-style: solid;
+  border-width: 0 0 0 var(--wst-system-line-1-width, 1px);
+  border-left-color: var(--wst-system-line-1-color, #c2c2c2);
+  opacity: 1;
+  min-height: 100%;
+}
 

package/dist/Separator/index.js

@@ -2,7 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { Separator } from "@base-ui/react/separator";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Separator_module = {};
+const Separator_module = {
+    root: "root-rb7o7e"
+};
 const Separator_Separator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Separator, {
         ref: ref,
         className: clsx(Separator_module.root, className),

package/dist/Slider/index.css

@@ -1,2 +1,62 @@
+.root-uI1zMj {
+  box-sizing: border-box;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  display: flex;
+}
 
+.label-MkH3nw {
+  color: var(--wst-paragraph-2-color, #32536a);
+  font: var(--wst-paragraph-2-font);
+}
+
+.value-ZbXzRd {
+  color: var(--wst-paragraph-2-color, #32536a);
+  font: var(--wst-paragraph-2-font);
+  text-align: end;
+}
+
+.control-_J8a2_ {
+  flex: 1;
+  padding: 0 8px;
+}
+
+.track-WMB__l {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #32536a) 20%, transparent);
+  border-radius: var(--wst-slider-track-corner-radius, 0px);
+  width: calc(100% + 16px);
+  height: 4px;
+  transform: translateX(-8px);
+}
+
+.indicator-uJyfNg {
+  background-color: var(--wst-links-and-actions-color, #116dff);
+  height: 4px;
+  margin: 6px 0;
+}
+
+.thumb-oReKer {
+  background-color: var(--wst-links-and-actions-color, #116dff);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+}
+
+.thumb-oReKer:hover {
+  background-color: color-mix(in srgb, var(--wst-links-and-actions-color, #116dff) 60%, transparent);
+}
+
+.thumb-oReKer:focus-visible {
+  background-color: color-mix(in srgb, var(--wst-links-and-actions-color, #116dff) 60%, transparent);
+  box-shadow: none;
+}
+
+.track-WMB__l[data-disabled] {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #32536a) 20%, transparent);
+}
+
+.indicator-uJyfNg[data-disabled], .thumb-oReKer[data-disabled] {
+  background-color: var(--wst-system-disabled-color, #bcbcbc);
+}
 

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;
 };