@wix/site-ui 1.27.0 → 1.29.0

package/dist/Separator/index.css

@@ -1,21 +1,26 @@
 .root-rb7o7e {
-  margin-block: 0;
-  margin-inline: 0;
+  border-style: none;
+}
+
+.root-rb7o7e.primary-Ebj9ZZ {
+  border-width: var(--wst-system-line-1-width, 1px);
+  border-color: var(--wst-system-line-1-color, #000);
+}
+
+.root-rb7o7e.secondary-Gx3Eah {
+  border-width: var(--wst-system-line-2-width, 1px);
+  border-color: var(--wst-system-line-2-color, #1f4fff);
 }
 
 .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%;
+  width: 100%;
+  margin: 24px 0;
 }
 
 .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%;
+  height: 100%;
+  margin: 0 24px;
 }
 

package/dist/Separator/index.d.ts

@@ -1,9 +1,19 @@
 import * as React_2 from 'react';
-import { SeparatorProps } from '@base-ui/react/separator';
+import { Separator as Separator_2 } from '@base-ui/react/separator';
 
-export declare const Separator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SeparatorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
-    className?: string | undefined;
-} & React_2.RefAttributes<HTMLDivElement>>;
+declare type BaseProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Separator_2>>;
+
+export declare const Separator: React_2.ForwardRefExoticComponent<SeparatorProps & React_2.RefAttributes<HTMLDivElement>>;
+
+declare interface SeparatorProps extends BaseProps {
+    variant?: SeparatorVariant;
+}
+
+declare type SeparatorVariant = 'primary' | 'secondary';
+
+declare type WithStringClassName<P> = Omit<P, 'className'> & {
+    className?: string;
+};
 
 
 export * from "@base-ui/react/separator";

package/dist/Separator/index.js

@@ -3,11 +3,13 @@ import { Separator } from "@base-ui/react/separator";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
 const Separator_module = {
-    root: "root-rb7o7e"
+    root: "root-rb7o7e",
+    primary: "primary-Ebj9ZZ",
+    secondary: "secondary-Gx3Eah"
 };
-const Separator_Separator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Separator, {
+const Separator_Separator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, variant = 'primary', ...props }, ref)=>/*#__PURE__*/ jsx(Separator, {
         ref: ref,
-        className: clsx(Separator_module.root, className),
+        className: clsx(Separator_module.root, Separator_module[variant], className),
         ...props
     }));
 export { Separator_Separator as Separator };

package/dist/Tabs/index.css

@@ -1,83 +1,89 @@
 .root-Hb4MhN {
-  box-sizing: border-box;
-  background: var(--wst-primary-background-color, transparent);
-  width: 100%;
-  border-block-start: var(--wst-tabs-border-width-block-start, 0px) solid var(--wst-paragraph-2-color, #0000004d);
-  border-inline-start: var(--wst-tabs-border-width-inline-start, 0px) solid var(--wst-paragraph-2-color, #0000004d);
-  border-inline-end: var(--wst-tabs-border-width-inline-end, 0px) solid var(--wst-paragraph-2-color, #0000004d);
-  border-block-end: var(--wst-tabs-border-width-block-end, 0px) solid var(--wst-paragraph-2-color, #0000004d);
-  border-start-start-radius: var(--wst-tabs-border-radius-start-start, 0px);
-  border-start-end-radius: var(--wst-tabs-border-radius-start-end, 0px);
-  border-end-end-radius: var(--wst-tabs-border-radius-end-end, 0px);
-  border-end-start-radius: var(--wst-tabs-border-radius-end-start, 0px);
-  padding-block-start: var(--wst-tabs-padding-block-start, 0px);
-  padding-block-end: var(--wst-tabs-padding-block-end, 0px);
-  padding-inline-start: var(--wst-tabs-padding-inline-start, 0px);
-  padding-inline-end: var(--wst-tabs-padding-inline-end, 0px);
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  display: flex;
 }
 
 .list-ZEK7AG {
-  box-sizing: border-box;
-  color: var(--wst-paragraph-2-color, inherit);
-  white-space: nowrap;
-  text-align: center;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  width: 100%;
-  min-height: 52px;
+  isolation: isolate;
   display: flex;
   position: relative;
-  overflow: hidden;
 }
 
-.list-ZEK7AG::-webkit-scrollbar {
-  display: none;
+.list-ZEK7AG.underlineFull-qh4VtD, .list-ZEK7AG.underlineFit-ahY1xs {
+  border-bottom-style: solid;
+  border-bottom-width: var(--wst-system-line-1-width, 1px);
+  border-bottom-color: var(--wst-system-line-1-color, #000);
+}
+
+.list-ZEK7AG.underlineFull-qh4VtD {
+  align-self: stretch;
+}
+
+.list-ZEK7AG.underlineFull-qh4VtD.alignStart-haA6GJ {
+  justify-content: flex-start;
+}
+
+.list-ZEK7AG.underlineFull-qh4VtD.alignCenter-e896qY {
+  justify-content: center;
+}
+
+.list-ZEK7AG.underlineFull-qh4VtD.alignEnd-ClTg6L {
+  justify-content: flex-end;
+}
+
+.list-ZEK7AG:not(.underlineFull-qh4VtD).alignStart-haA6GJ {
+  align-self: flex-start;
+}
+
+.list-ZEK7AG:not(.underlineFull-qh4VtD).alignCenter-e896qY {
+  align-self: center;
+}
+
+.list-ZEK7AG:not(.underlineFull-qh4VtD).alignEnd-ClTg6L {
+  align-self: flex-end;
 }
 
 .tab-FRO0Rd {
-  box-sizing: border-box;
-  cursor: pointer;
-  text-align: center;
-  white-space: nowrap;
-  -webkit-tap-highlight-color: #0000;
-  vertical-align: bottom;
-  height: 100%;
-  color: inherit;
   font: var(--wst-paragraph-2-font);
-  background: none;
-  border: 0 solid #0000;
-  border-block-end-width: 3px;
-  border-start-start-radius: var(--wst-tab-border-radius-start-start, 0px);
-  border-start-end-radius: var(--wst-tab-border-radius-start-end, 0px);
-  border-end-end-radius: var(--wst-tab-border-radius-end-end, 0px);
-  border-end-start-radius: var(--wst-tab-border-radius-end-start, 0px);
-  justify-content: center;
+  color: var(--wst-paragraph-2-color);
+  cursor: pointer;
+  flex-direction: row;
   align-items: center;
-  padding: 14px 3%;
-  display: inline-flex;
-  position: relative;
+  gap: 4px;
+  padding: 14px 8px;
+  display: flex;
+}
+
+.tab-FRO0Rd[data-disabled] {
+  color: var(--wst-system-disabled-color);
+  cursor: default;
 }
 
-.tab-FRO0Rd[data-active] {
-  border-style: solid;
-  border-block-start: var(--wst-tab-selected-border-block-start-width, 0px) solid var(--wst-tab-selected-border-block-start-color, transparent);
-  border-block-end: var(--wst-tab-selected-border-block-end-width, 3px) solid var(--wst-links-and-actions-color, currentColor);
-  border-inline-start: var(--wst-tab-selected-border-inline-start-width, 0px) solid var(--wst-tab-selected-border-inline-start-color, transparent);
-  border-inline-end: var(--wst-tab-selected-border-inline-end-width, 0px) solid var(--wst-tab-selected-border-inline-end-color, transparent);
-  background: var(--wst-tab-selected-background-color, transparent);
-  color: var(--wst-tab-selected-text-color, var(--wst-paragraph-2-color, inherit));
-  border-start-start-radius: var(--wst-tab-selected-border-radius-start-start, var(--wst-tab-border-radius-start-start, 0px));
-  border-start-end-radius: var(--wst-tab-selected-border-radius-start-end, var(--wst-tab-border-radius-start-end, 0px));
-  border-end-end-radius: var(--wst-tab-selected-border-radius-end-end, var(--wst-tab-border-radius-end-end, 0px));
-  border-end-start-radius: var(--wst-tab-selected-border-radius-end-start, var(--wst-tab-border-radius-end-start, 0px));
+.tab-FRO0Rd:not([data-disabled]):focus-visible {
+  --focus-ring-box-shadow: 0 0 0 2px #116dff;
+  box-shadow: var(--focus-ring-box-shadow) !important;
 }
 
 .indicator-a2Roef {
-  background-color: var(--wst-links-and-actions-color, currentColor);
-  z-index: 1000;
-  height: 3px;
-  transition: left .4s ease-in-out, width .4s ease-in-out;
+  box-sizing: border-box;
+  z-index: -1;
+  translate: var(--active-tab-left);
+  width: var(--active-tab-width);
+  border-bottom-style: solid;
+  border-bottom-width: calc(var(--wst-system-line-1-width) + 2px);
+  border-bottom-color: var(--wst-links-and-actions-color);
+  height: 100%;
+  transition-property: translate, width;
+  transition-duration: .4s;
+  transition-timing-function: ease-in-out;
   position: absolute;
-  bottom: 0;
+  top: 0;
+  left: 0;
+}
+
+.panel-dMpxFc {
+  padding: 24px 0;
 }
 

package/dist/Tabs/index.d.ts

@@ -1,10 +1,33 @@
 import * as React_2 from 'react';
+import { Tabs as Tabs_2 } from '@base-ui/react/tabs';
 import { TabsIndicatorProps } from '@base-ui/react/tabs';
-import { TabsListProps } from '@base-ui/react/tabs';
 import { TabsPanelProps } from '@base-ui/react/tabs';
 import { TabsRootProps } from '@base-ui/react/tabs';
 import { TabsTabProps } from '@base-ui/react/tabs';
 
+declare type BaseListProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Tabs_2.List>>;
+
+declare interface ListProps extends BaseListProps {
+    underline?: TabListUnderlineType;
+    align?: TabListAlignType;
+}
+
+export declare const TabListAlign: {
+    readonly start: "start";
+    readonly center: "center";
+    readonly end: "end";
+};
+
+declare type TabListAlignType = (typeof TabListAlign)[keyof typeof TabListAlign];
+
+export declare const TabListUnderline: {
+    readonly full: "full";
+    readonly fit: "fit";
+    readonly none: "none";
+};
+
+declare type TabListUnderlineType = (typeof TabListUnderline)[keyof typeof TabListUnderline];
+
 export declare const Tabs: {
     Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -18,9 +41,11 @@ export declare const Tabs: {
     Panel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsPanelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    List: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsListProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
-        className?: string | undefined;
-    } & React_2.RefAttributes<HTMLDivElement>>;
+    List: React_2.ForwardRefExoticComponent<ListProps & React_2.RefAttributes<HTMLDivElement>>;
+};
+
+declare type WithStringClassName<P> = Omit<P, 'className'> & {
+    className?: string;
 };
 
 

package/dist/Tabs/index.js

@@ -5,8 +5,14 @@ import * as __rspack_external_react from "react";
 const Tabs_module = {
     root: "root-Hb4MhN",
     list: "list-ZEK7AG",
+    underlineFull: "underlineFull-qh4VtD",
+    underlineFit: "underlineFit-ahY1xs",
+    alignStart: "alignStart-haA6GJ",
+    alignCenter: "alignCenter-e896qY",
+    alignEnd: "alignEnd-ClTg6L",
     tab: "tab-FRO0Rd",
-    indicator: "indicator-a2Roef"
+    indicator: "indicator-a2Roef",
+    panel: "panel-dMpxFc"
 };
 const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.Root, {
         ref: ref,
@@ -15,7 +21,7 @@ const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...p
     }));
 const Tab = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.Tab, {
         ref: ref,
-        className: clsx(Tabs_module.tab, className),
+        className: clsx(Tabs_module.tab, className, 'has-custom-focus'),
         ...props
     }));
 const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.Indicator, {
@@ -28,9 +34,29 @@ const Panel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...
         className: clsx(Tabs_module.panel, className),
         ...props
     }));
-const List = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.List, {
+const TabListUnderline = {
+    full: 'full',
+    fit: 'fit',
+    none: 'none'
+};
+const TabListAlign = {
+    start: 'start',
+    center: 'center',
+    end: 'end'
+};
+const underlineClassMap = {
+    full: Tabs_module.underlineFull,
+    fit: Tabs_module.underlineFit,
+    none: Tabs_module.underlineNone
+};
+const alignClassMap = {
+    start: Tabs_module.alignStart,
+    center: Tabs_module.alignCenter,
+    end: Tabs_module.alignEnd
+};
+const List = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, underline = 'full', align = 'center', ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.List, {
         ref: ref,
-        className: clsx(Tabs_module.list, className),
+        className: clsx(Tabs_module.list, alignClassMap[align], underlineClassMap[underline], className),
         ...props
     }));
 const Tabs_Tabs = {
@@ -40,4 +66,4 @@ const Tabs_Tabs = {
     Panel: Panel,
     List: List
 };
-export { Tabs_Tabs as Tabs };
+export { TabListAlign, TabListUnderline, Tabs_Tabs as Tabs };

package/dist/index.d.ts

@@ -197,8 +197,8 @@ import { SelectScrollDownArrowProps } from '@base-ui/react/select';
 import { SelectScrollUpArrowProps } from '@base-ui/react/select';
 import { SelectTriggerProps } from '@base-ui/react/select';
 import { SelectValueProps } from '@base-ui/react/select';
+import { Separator as Separator_2 } from '@base-ui/react/separator';
 import { SeparatorProps } from '@base-ui/react';
-import { SeparatorProps as SeparatorProps_2 } from '@base-ui/react/separator';
 import { Slider as Slider_2 } from '@base-ui/react/slider';
 import { SliderControlProps } from '@base-ui/react/slider';
 import { SliderIndicatorProps } from '@base-ui/react/slider';
@@ -208,8 +208,8 @@ import { SliderTrackProps } from '@base-ui/react/slider';
 import { SliderValueProps } from '@base-ui/react/slider';
 import { SwitchRootProps } from '@base-ui/react/switch';
 import { SwitchThumbProps } from '@base-ui/react/switch';
+import { Tabs as Tabs_2 } from '@base-ui/react/tabs';
 import { TabsIndicatorProps } from '@base-ui/react/tabs';
-import { TabsListProps } from '@base-ui/react/tabs';
 import { TabsPanelProps } from '@base-ui/react/tabs';
 import { TabsRootProps } from '@base-ui/react/tabs';
 import { TabsTabProps } from '@base-ui/react/tabs';
@@ -369,8 +369,12 @@ export declare const AvatarSize: {
     readonly xLarge: 60;
 };
 
+declare type BaseListProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Tabs_2.List>>;
+
 declare type BaseProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Button_2>>;
 
+declare type BaseProps_2 = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Separator_2>>;
+
 export declare const Box: React_2.ForwardRefExoticComponent<BoxProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface BoxProps extends WithStringClassName<React_2.HTMLAttributes<HTMLDivElement>> {
@@ -664,6 +668,11 @@ export declare const Input: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<Inp
     className?: string | undefined;
 } & React_2.RefAttributes<HTMLElement>>;
 
+declare interface ListProps extends BaseListProps {
+    underline?: TabListUnderlineType;
+    align?: TabListAlignType;
+}
+
 export declare const Menu: {
     Arrow: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MenuArrowProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -1000,9 +1009,13 @@ export declare const Select: {
     Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 };
 
-export declare const Separator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
-    className?: string | undefined;
-} & React_2.RefAttributes<HTMLDivElement>>;
+export declare const Separator: React_2.ForwardRefExoticComponent<SeparatorProps_2 & React_2.RefAttributes<HTMLDivElement>>;
+
+declare interface SeparatorProps_2 extends BaseProps_2 {
+    variant?: SeparatorVariant;
+}
+
+declare type SeparatorVariant = 'primary' | 'secondary';
 
 declare type Size = (typeof AccordionSize)[keyof typeof AccordionSize];
 
@@ -1061,6 +1074,22 @@ export declare const SwitchSize: {
     };
 };
 
+export declare const TabListAlign: {
+    readonly start: "start";
+    readonly center: "center";
+    readonly end: "end";
+};
+
+declare type TabListAlignType = (typeof TabListAlign)[keyof typeof TabListAlign];
+
+export declare const TabListUnderline: {
+    readonly full: "full";
+    readonly fit: "fit";
+    readonly none: "none";
+};
+
+declare type TabListUnderlineType = (typeof TabListUnderline)[keyof typeof TabListUnderline];
+
 export declare const Tabs: {
     Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
@@ -1074,9 +1103,7 @@ export declare const Tabs: {
     Panel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsPanelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    List: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsListProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
-        className?: string | undefined;
-    } & React_2.RefAttributes<HTMLDivElement>>;
+    List: React_2.ForwardRefExoticComponent<ListProps & React_2.RefAttributes<HTMLDivElement>>;
 };
 
 declare function Title({ className, ...props }: WithStringClassName<Drawer_2.Title.Props>): JSX_2.Element;

package/dist/index.js

@@ -31,7 +31,7 @@ export { Select } from "./Select/index.js";
 export { Separator } from "./Separator/index.js";
 export { Slider, SliderSize } from "./Slider/index.js";
 export { Switch, SwitchSize } from "./Switch/index.js";
-export { Tabs } from "./Tabs/index.js";
+export { TabListAlign, TabListUnderline, Tabs } from "./Tabs/index.js";
 export { Toggle } from "./Toggle/index.js";
 export { ToggleGroup } from "./ToggleGroup/index.js";
 export { Toolbar } from "./Toolbar/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.27.0",
+  "version": "1.29.0",
   "description": "Pure UI components for the Wix site builder",
   "license": "MIT",
   "type": "module",
@@ -78,5 +78,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "410ee16cf094161d34d8c088290be6b01dd11a562688f127ca82d245"
+  "falconPackageHash": "c4612cc97d557e524b4c7a23d63106fef444258602e92d6947a0dee5"
 }