@wix/site-ui 1.28.0 → 1.29.0

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

@@ -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,6 +369,8 @@ 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>>;
@@ -666,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;
@@ -1067,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;
@@ -1080,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.28.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": "e84331faff7c795f4d39159829633d1daf66387beed534bf19d7e978"
+  "falconPackageHash": "c4612cc97d557e524b4c7a23d63106fef444258602e92d6947a0dee5"
 }