@wix/site-ui 1.28.0 → 1.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,44 @@
1
+ .root-ig2Z1s {
2
+ box-sizing: border-box;
3
+ font: var(--wst-paragraph-3-font);
4
+ border-radius: 12px;
5
+ flex-direction: row;
6
+ align-items: center;
7
+ gap: 2px;
8
+ padding: 6px 12px 5px;
9
+ display: inline-flex;
10
+ }
11
+
12
+ .root-ig2Z1s svg {
13
+ width: 20px;
14
+ height: 20px;
15
+ }
16
+
17
+ .default-nJusqF {
18
+ background-color: color-mix(in srgb,
19
+ var(--wst-paragraph-3-color) 10%,
20
+ transparent);
21
+ color: var(--wst-paragraph-3-color);
22
+ }
23
+
24
+ .light-qGxiE8 {
25
+ background-color: var(--wst-primary-background-color);
26
+ color: var(--wst-paragraph-3-color);
27
+ border-width: 1px;
28
+ border-color: color-mix(in srgb,
29
+ var(--wst-paragraph-3-color) 10%,
30
+ transparent);
31
+ }
32
+
33
+ .primary-bU68vw {
34
+ background-color: var(--wst-links-and-actions-color);
35
+ color: var(--wst-primary-background-color);
36
+ }
37
+
38
+ .secondary-dA1Wg2 {
39
+ background-color: color-mix(in srgb,
40
+ var(--wst-links-and-actions-color) 10%,
41
+ transparent);
42
+ color: var(--wst-links-and-actions-color);
43
+ }
44
+
@@ -0,0 +1,22 @@
1
+ import * as React_2 from 'react';
2
+
3
+ export declare const Badge: React_2.ForwardRefExoticComponent<BadgeProps & React_2.RefAttributes<HTMLSpanElement>>;
4
+
5
+ export declare interface BadgeProps extends WithStringClassName<React_2.HTMLAttributes<HTMLSpanElement>> {
6
+ variant?: BadgeVariantType;
7
+ }
8
+
9
+ export declare const BadgeVariant: {
10
+ readonly default: "default";
11
+ readonly light: "light";
12
+ readonly primary: "primary";
13
+ readonly secondary: "secondary";
14
+ };
15
+
16
+ export declare type BadgeVariantType = (typeof BadgeVariant)[keyof typeof BadgeVariant];
17
+
18
+ declare type WithStringClassName<P> = Omit<P, 'className'> & {
19
+ className?: string;
20
+ };
21
+
22
+ export { }
@@ -0,0 +1,23 @@
1
+ import { jsx } from "react/jsx-runtime";
2
+ import clsx from "clsx";
3
+ import * as __rspack_external_react from "react";
4
+ const Badge_module = {
5
+ root: "root-ig2Z1s",
6
+ default: "default-nJusqF",
7
+ light: "light-qGxiE8",
8
+ primary: "primary-bU68vw",
9
+ secondary: "secondary-dA1Wg2"
10
+ };
11
+ const BadgeVariant = {
12
+ default: 'default',
13
+ light: 'light',
14
+ primary: 'primary',
15
+ secondary: 'secondary'
16
+ };
17
+ const Badge = /*#__PURE__*/ __rspack_external_react.forwardRef(({ variant = BadgeVariant.default, className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
18
+ ref: ref,
19
+ className: clsx(Badge_module.root, Badge_module[variant], className),
20
+ ...props
21
+ }));
22
+ Badge.displayName = 'Badge';
23
+ export { Badge, BadgeVariant };
@@ -1,83 +1,89 @@
1
1
  .root-Hb4MhN {
2
- box-sizing: border-box;
3
- background: var(--wst-primary-background-color, transparent);
4
- width: 100%;
5
- border-block-start: var(--wst-tabs-border-width-block-start, 0px) solid var(--wst-paragraph-2-color, #0000004d);
6
- border-inline-start: var(--wst-tabs-border-width-inline-start, 0px) solid var(--wst-paragraph-2-color, #0000004d);
7
- border-inline-end: var(--wst-tabs-border-width-inline-end, 0px) solid var(--wst-paragraph-2-color, #0000004d);
8
- border-block-end: var(--wst-tabs-border-width-block-end, 0px) solid var(--wst-paragraph-2-color, #0000004d);
9
- border-start-start-radius: var(--wst-tabs-border-radius-start-start, 0px);
10
- border-start-end-radius: var(--wst-tabs-border-radius-start-end, 0px);
11
- border-end-end-radius: var(--wst-tabs-border-radius-end-end, 0px);
12
- border-end-start-radius: var(--wst-tabs-border-radius-end-start, 0px);
13
- padding-block-start: var(--wst-tabs-padding-block-start, 0px);
14
- padding-block-end: var(--wst-tabs-padding-block-end, 0px);
15
- padding-inline-start: var(--wst-tabs-padding-inline-start, 0px);
16
- padding-inline-end: var(--wst-tabs-padding-inline-end, 0px);
2
+ flex-direction: column;
3
+ justify-content: flex-start;
4
+ align-items: stretch;
5
+ display: flex;
17
6
  }
18
7
 
19
8
  .list-ZEK7AG {
20
- box-sizing: border-box;
21
- color: var(--wst-paragraph-2-color, inherit);
22
- white-space: nowrap;
23
- text-align: center;
24
- scrollbar-width: none;
25
- -ms-overflow-style: none;
26
- width: 100%;
27
- min-height: 52px;
9
+ isolation: isolate;
28
10
  display: flex;
29
11
  position: relative;
30
- overflow: hidden;
31
12
  }
32
13
 
33
- .list-ZEK7AG::-webkit-scrollbar {
34
- display: none;
14
+ .list-ZEK7AG.underlineFull-qh4VtD, .list-ZEK7AG.underlineFit-ahY1xs {
15
+ border-bottom-style: solid;
16
+ border-bottom-width: var(--wst-system-line-1-width, 1px);
17
+ border-bottom-color: var(--wst-system-line-1-color, #000);
18
+ }
19
+
20
+ .list-ZEK7AG.underlineFull-qh4VtD {
21
+ align-self: stretch;
22
+ }
23
+
24
+ .list-ZEK7AG.underlineFull-qh4VtD.alignStart-haA6GJ {
25
+ justify-content: flex-start;
26
+ }
27
+
28
+ .list-ZEK7AG.underlineFull-qh4VtD.alignCenter-e896qY {
29
+ justify-content: center;
30
+ }
31
+
32
+ .list-ZEK7AG.underlineFull-qh4VtD.alignEnd-ClTg6L {
33
+ justify-content: flex-end;
34
+ }
35
+
36
+ .list-ZEK7AG:not(.underlineFull-qh4VtD).alignStart-haA6GJ {
37
+ align-self: flex-start;
38
+ }
39
+
40
+ .list-ZEK7AG:not(.underlineFull-qh4VtD).alignCenter-e896qY {
41
+ align-self: center;
42
+ }
43
+
44
+ .list-ZEK7AG:not(.underlineFull-qh4VtD).alignEnd-ClTg6L {
45
+ align-self: flex-end;
35
46
  }
36
47
 
37
48
  .tab-FRO0Rd {
38
- box-sizing: border-box;
39
- cursor: pointer;
40
- text-align: center;
41
- white-space: nowrap;
42
- -webkit-tap-highlight-color: #0000;
43
- vertical-align: bottom;
44
- height: 100%;
45
- color: inherit;
46
49
  font: var(--wst-paragraph-2-font);
47
- background: none;
48
- border: 0 solid #0000;
49
- border-block-end-width: 3px;
50
- border-start-start-radius: var(--wst-tab-border-radius-start-start, 0px);
51
- border-start-end-radius: var(--wst-tab-border-radius-start-end, 0px);
52
- border-end-end-radius: var(--wst-tab-border-radius-end-end, 0px);
53
- border-end-start-radius: var(--wst-tab-border-radius-end-start, 0px);
54
- justify-content: center;
50
+ color: var(--wst-paragraph-2-color);
51
+ cursor: pointer;
52
+ flex-direction: row;
55
53
  align-items: center;
56
- padding: 14px 3%;
57
- display: inline-flex;
58
- position: relative;
54
+ gap: 4px;
55
+ padding: 14px 8px;
56
+ display: flex;
57
+ }
58
+
59
+ .tab-FRO0Rd[data-disabled] {
60
+ color: var(--wst-system-disabled-color);
61
+ cursor: default;
59
62
  }
60
63
 
61
- .tab-FRO0Rd[data-active] {
62
- border-style: solid;
63
- border-block-start: var(--wst-tab-selected-border-block-start-width, 0px) solid var(--wst-tab-selected-border-block-start-color, transparent);
64
- border-block-end: var(--wst-tab-selected-border-block-end-width, 3px) solid var(--wst-links-and-actions-color, currentColor);
65
- border-inline-start: var(--wst-tab-selected-border-inline-start-width, 0px) solid var(--wst-tab-selected-border-inline-start-color, transparent);
66
- border-inline-end: var(--wst-tab-selected-border-inline-end-width, 0px) solid var(--wst-tab-selected-border-inline-end-color, transparent);
67
- background: var(--wst-tab-selected-background-color, transparent);
68
- color: var(--wst-tab-selected-text-color, var(--wst-paragraph-2-color, inherit));
69
- border-start-start-radius: var(--wst-tab-selected-border-radius-start-start, var(--wst-tab-border-radius-start-start, 0px));
70
- border-start-end-radius: var(--wst-tab-selected-border-radius-start-end, var(--wst-tab-border-radius-start-end, 0px));
71
- border-end-end-radius: var(--wst-tab-selected-border-radius-end-end, var(--wst-tab-border-radius-end-end, 0px));
72
- border-end-start-radius: var(--wst-tab-selected-border-radius-end-start, var(--wst-tab-border-radius-end-start, 0px));
64
+ .tab-FRO0Rd:not([data-disabled]):focus-visible {
65
+ --focus-ring-box-shadow: 0 0 0 2px #116dff;
66
+ box-shadow: var(--focus-ring-box-shadow) !important;
73
67
  }
74
68
 
75
69
  .indicator-a2Roef {
76
- background-color: var(--wst-links-and-actions-color, currentColor);
77
- z-index: 1000;
78
- height: 3px;
79
- transition: left .4s ease-in-out, width .4s ease-in-out;
70
+ box-sizing: border-box;
71
+ z-index: -1;
72
+ translate: var(--active-tab-left);
73
+ width: var(--active-tab-width);
74
+ border-bottom-style: solid;
75
+ border-bottom-width: calc(var(--wst-system-line-1-width) + 2px);
76
+ border-bottom-color: var(--wst-links-and-actions-color);
77
+ height: 100%;
78
+ transition-property: translate, width;
79
+ transition-duration: .4s;
80
+ transition-timing-function: ease-in-out;
80
81
  position: absolute;
81
- bottom: 0;
82
+ top: 0;
83
+ left: 0;
84
+ }
85
+
86
+ .panel-dMpxFc {
87
+ padding: 24px 0;
82
88
  }
83
89
 
@@ -1,10 +1,33 @@
1
1
  import * as React_2 from 'react';
2
+ import { Tabs as Tabs_2 } from '@base-ui/react/tabs';
2
3
  import { TabsIndicatorProps } from '@base-ui/react/tabs';
3
- import { TabsListProps } from '@base-ui/react/tabs';
4
4
  import { TabsPanelProps } from '@base-ui/react/tabs';
5
5
  import { TabsRootProps } from '@base-ui/react/tabs';
6
6
  import { TabsTabProps } from '@base-ui/react/tabs';
7
7
 
8
+ declare type BaseListProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Tabs_2.List>>;
9
+
10
+ declare interface ListProps extends BaseListProps {
11
+ underline?: TabListUnderlineType;
12
+ align?: TabListAlignType;
13
+ }
14
+
15
+ export declare const TabListAlign: {
16
+ readonly start: "start";
17
+ readonly center: "center";
18
+ readonly end: "end";
19
+ };
20
+
21
+ declare type TabListAlignType = (typeof TabListAlign)[keyof typeof TabListAlign];
22
+
23
+ export declare const TabListUnderline: {
24
+ readonly full: "full";
25
+ readonly fit: "fit";
26
+ readonly none: "none";
27
+ };
28
+
29
+ declare type TabListUnderlineType = (typeof TabListUnderline)[keyof typeof TabListUnderline];
30
+
8
31
  export declare const Tabs: {
9
32
  Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
10
33
  className?: string | undefined;
@@ -18,9 +41,11 @@ export declare const Tabs: {
18
41
  Panel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsPanelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
19
42
  className?: string | undefined;
20
43
  } & React_2.RefAttributes<HTMLDivElement>>;
21
- List: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsListProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
22
- className?: string | undefined;
23
- } & React_2.RefAttributes<HTMLDivElement>>;
44
+ List: React_2.ForwardRefExoticComponent<ListProps & React_2.RefAttributes<HTMLDivElement>>;
45
+ };
46
+
47
+ declare type WithStringClassName<P> = Omit<P, 'className'> & {
48
+ className?: string;
24
49
  };
25
50
 
26
51
 
@@ -5,8 +5,14 @@ import * as __rspack_external_react from "react";
5
5
  const Tabs_module = {
6
6
  root: "root-Hb4MhN",
7
7
  list: "list-ZEK7AG",
8
+ underlineFull: "underlineFull-qh4VtD",
9
+ underlineFit: "underlineFit-ahY1xs",
10
+ alignStart: "alignStart-haA6GJ",
11
+ alignCenter: "alignCenter-e896qY",
12
+ alignEnd: "alignEnd-ClTg6L",
8
13
  tab: "tab-FRO0Rd",
9
- indicator: "indicator-a2Roef"
14
+ indicator: "indicator-a2Roef",
15
+ panel: "panel-dMpxFc"
10
16
  };
11
17
  const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.Root, {
12
18
  ref: ref,
@@ -15,7 +21,7 @@ const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...p
15
21
  }));
16
22
  const Tab = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.Tab, {
17
23
  ref: ref,
18
- className: clsx(Tabs_module.tab, className),
24
+ className: clsx(Tabs_module.tab, className, 'has-custom-focus'),
19
25
  ...props
20
26
  }));
21
27
  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, ...
28
34
  className: clsx(Tabs_module.panel, className),
29
35
  ...props
30
36
  }));
31
- const List = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.List, {
37
+ const TabListUnderline = {
38
+ full: 'full',
39
+ fit: 'fit',
40
+ none: 'none'
41
+ };
42
+ const TabListAlign = {
43
+ start: 'start',
44
+ center: 'center',
45
+ end: 'end'
46
+ };
47
+ const underlineClassMap = {
48
+ full: Tabs_module.underlineFull,
49
+ fit: Tabs_module.underlineFit,
50
+ none: Tabs_module.underlineNone
51
+ };
52
+ const alignClassMap = {
53
+ start: Tabs_module.alignStart,
54
+ center: Tabs_module.alignCenter,
55
+ end: Tabs_module.alignEnd
56
+ };
57
+ const List = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, underline = 'full', align = 'center', ...props }, ref)=>/*#__PURE__*/ jsx(Tabs.List, {
32
58
  ref: ref,
33
- className: clsx(Tabs_module.list, className),
59
+ className: clsx(Tabs_module.list, alignClassMap[align], underlineClassMap[underline], className),
34
60
  ...props
35
61
  }));
36
62
  const Tabs_Tabs = {
@@ -40,4 +66,4 @@ const Tabs_Tabs = {
40
66
  Panel: Panel,
41
67
  List: List
42
68
  };
43
- export { Tabs_Tabs as Tabs };
69
+ export { TabListAlign, TabListUnderline, Tabs_Tabs as Tabs };
package/dist/index.d.ts CHANGED
@@ -208,8 +208,8 @@ import { SliderTrackProps } from '@base-ui/react/slider';
208
208
  import { SliderValueProps } from '@base-ui/react/slider';
209
209
  import { SwitchRootProps } from '@base-ui/react/switch';
210
210
  import { SwitchThumbProps } from '@base-ui/react/switch';
211
+ import { Tabs as Tabs_2 } from '@base-ui/react/tabs';
211
212
  import { TabsIndicatorProps } from '@base-ui/react/tabs';
212
- import { TabsListProps } from '@base-ui/react/tabs';
213
213
  import { TabsPanelProps } from '@base-ui/react/tabs';
214
214
  import { TabsRootProps } from '@base-ui/react/tabs';
215
215
  import { TabsTabProps } from '@base-ui/react/tabs';
@@ -369,6 +369,23 @@ export declare const AvatarSize: {
369
369
  readonly xLarge: 60;
370
370
  };
371
371
 
372
+ export declare const Badge: React_2.ForwardRefExoticComponent<BadgeProps & React_2.RefAttributes<HTMLSpanElement>>;
373
+
374
+ export declare interface BadgeProps extends WithStringClassName<React_2.HTMLAttributes<HTMLSpanElement>> {
375
+ variant?: BadgeVariantType;
376
+ }
377
+
378
+ export declare const BadgeVariant: {
379
+ readonly default: "default";
380
+ readonly light: "light";
381
+ readonly primary: "primary";
382
+ readonly secondary: "secondary";
383
+ };
384
+
385
+ export declare type BadgeVariantType = (typeof BadgeVariant)[keyof typeof BadgeVariant];
386
+
387
+ declare type BaseListProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Tabs_2.List>>;
388
+
372
389
  declare type BaseProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Button_2>>;
373
390
 
374
391
  declare type BaseProps_2 = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Separator_2>>;
@@ -666,6 +683,11 @@ export declare const Input: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<Inp
666
683
  className?: string | undefined;
667
684
  } & React_2.RefAttributes<HTMLElement>>;
668
685
 
686
+ declare interface ListProps extends BaseListProps {
687
+ underline?: TabListUnderlineType;
688
+ align?: TabListAlignType;
689
+ }
690
+
669
691
  export declare const Menu: {
670
692
  Arrow: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<MenuArrowProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
671
693
  className?: string | undefined;
@@ -1067,6 +1089,22 @@ export declare const SwitchSize: {
1067
1089
  };
1068
1090
  };
1069
1091
 
1092
+ export declare const TabListAlign: {
1093
+ readonly start: "start";
1094
+ readonly center: "center";
1095
+ readonly end: "end";
1096
+ };
1097
+
1098
+ declare type TabListAlignType = (typeof TabListAlign)[keyof typeof TabListAlign];
1099
+
1100
+ export declare const TabListUnderline: {
1101
+ readonly full: "full";
1102
+ readonly fit: "fit";
1103
+ readonly none: "none";
1104
+ };
1105
+
1106
+ declare type TabListUnderlineType = (typeof TabListUnderline)[keyof typeof TabListUnderline];
1107
+
1070
1108
  export declare const Tabs: {
1071
1109
  Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
1072
1110
  className?: string | undefined;
@@ -1080,9 +1118,7 @@ export declare const Tabs: {
1080
1118
  Panel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsPanelProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
1081
1119
  className?: string | undefined;
1082
1120
  } & React_2.RefAttributes<HTMLDivElement>>;
1083
- List: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<TabsListProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
1084
- className?: string | undefined;
1085
- } & React_2.RefAttributes<HTMLDivElement>>;
1121
+ List: React_2.ForwardRefExoticComponent<ListProps & React_2.RefAttributes<HTMLDivElement>>;
1086
1122
  };
1087
1123
 
1088
1124
  declare function Title({ className, ...props }: WithStringClassName<Drawer_2.Title.Props>): JSX_2.Element;
package/dist/index.js CHANGED
@@ -2,6 +2,7 @@ export { Accordion, AccordionSize, AccordionVariant } from "./Accordion/index.js
2
2
  export { AlertDialog } from "./AlertDialog/index.js";
3
3
  export { Autocomplete } from "./Autocomplete/index.js";
4
4
  export { Avatar, AvatarSize } from "./Avatar/index.js";
5
+ export { Badge, BadgeVariant } from "./Badge/index.js";
5
6
  export { Box } from "./Box/index.js";
6
7
  export { Breadcrumbs } from "./Breadcrumbs/index.js";
7
8
  export { Button } from "./Button/index.js";
@@ -31,7 +32,7 @@ export { Select } from "./Select/index.js";
31
32
  export { Separator } from "./Separator/index.js";
32
33
  export { Slider, SliderSize } from "./Slider/index.js";
33
34
  export { Switch, SwitchSize } from "./Switch/index.js";
34
- export { Tabs } from "./Tabs/index.js";
35
+ export { TabListAlign, TabListUnderline, Tabs } from "./Tabs/index.js";
35
36
  export { Toggle } from "./Toggle/index.js";
36
37
  export { ToggleGroup } from "./ToggleGroup/index.js";
37
38
  export { Toolbar } from "./Toolbar/index.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/site-ui",
3
- "version": "1.28.0",
3
+ "version": "1.30.0",
4
4
  "description": "Pure UI components for the Wix site builder",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -78,5 +78,5 @@
78
78
  "registry": "https://registry.npmjs.org/",
79
79
  "access": "public"
80
80
  },
81
- "falconPackageHash": "e84331faff7c795f4d39159829633d1daf66387beed534bf19d7e978"
81
+ "falconPackageHash": "7c2129fc10124baef602a77f41b62a9c4d78de71dd15510174b31b45"
82
82
  }