@wix/site-ui 1.6.0 → 1.8.0

package/dist/Button/index.css

@@ -1,2 +1,129 @@
 
 
+.root-kIffNe {
+  cursor: pointer;
+  box-sizing: border-box;
+  align-items: center;
+  display: inline-flex;
+}
+
+.primary-BOdHls {
+  background-color: var(--wst-button-primary-background-color);
+  background-image: var(--wst-button-primary-background-image);
+  padding-top: var(--wst-button-primary-padding-top);
+  padding-right: var(--wst-button-primary-padding-right);
+  padding-bottom: var(--wst-button-primary-padding-bottom);
+  padding-left: var(--wst-button-primary-padding-left);
+  border-top-color: var(--wst-button-primary-border-top-color);
+  border-right-color: var(--wst-button-primary-border-right-color);
+  border-bottom-color: var(--wst-button-primary-border-bottom-color);
+  border-left-color: var(--wst-button-primary-border-left-color);
+  border-top-width: var(--wst-button-primary-border-top-width);
+  border-right-width: var(--wst-button-primary-border-right-width);
+  border-bottom-width: var(--wst-button-primary-border-bottom-width);
+  border-left-width: var(--wst-button-primary-border-left-width);
+  border-top-style: var(--wst-button-primary-border-top-style);
+  border-right-style: var(--wst-button-primary-border-right-style);
+  border-bottom-style: var(--wst-button-primary-border-bottom-style);
+  border-left-style: var(--wst-button-primary-border-left-style);
+  border-top-left-radius: var(--wst-button-primary-border-top-left-radius);
+  border-top-right-radius: var(--wst-button-primary-border-top-right-radius);
+  border-bottom-left-radius: var(--wst-button-primary-border-bottom-left-radius);
+  border-bottom-right-radius: var(--wst-button-primary-border-bottom-right-radius);
+  box-shadow: var(--wst-button-primary-box-shadow);
+  column-gap: var(--wst-button-primary-column-gap);
+  row-gap: var(--wst-button-primary-row-gap);
+  justify-content: var(--wst-button-primary-justify-content);
+}
+
+.secondary-O9td6z {
+  background-color: var(--wst-button-secondary-background-color);
+  background-image: var(--wst-button-secondary-background-image);
+  padding-top: var(--wst-button-secondary-padding-top);
+  padding-right: var(--wst-button-secondary-padding-right);
+  padding-bottom: var(--wst-button-secondary-padding-bottom);
+  padding-left: var(--wst-button-secondary-padding-left);
+  border-top-color: var(--wst-button-secondary-border-top-color);
+  border-right-color: var(--wst-button-secondary-border-right-color);
+  border-bottom-color: var(--wst-button-secondary-border-bottom-color);
+  border-left-color: var(--wst-button-secondary-border-left-color);
+  border-top-width: var(--wst-button-secondary-border-top-width);
+  border-right-width: var(--wst-button-secondary-border-right-width);
+  border-bottom-width: var(--wst-button-secondary-border-bottom-width);
+  border-left-width: var(--wst-button-secondary-border-left-width);
+  border-top-style: var(--wst-button-secondary-border-top-style);
+  border-right-style: var(--wst-button-secondary-border-right-style);
+  border-bottom-style: var(--wst-button-secondary-border-bottom-style);
+  border-left-style: var(--wst-button-secondary-border-left-style);
+  border-top-left-radius: var(--wst-button-secondary-border-top-left-radius);
+  border-top-right-radius: var(--wst-button-secondary-border-top-right-radius);
+  border-bottom-left-radius: var(--wst-button-secondary-border-bottom-left-radius);
+  border-bottom-right-radius: var(--wst-button-secondary-border-bottom-right-radius);
+  box-shadow: var(--wst-button-secondary-box-shadow);
+  column-gap: var(--wst-button-secondary-column-gap);
+  row-gap: var(--wst-button-secondary-row-gap);
+  justify-content: var(--wst-button-secondary-justify-content);
+}
+
+.tertiary-QWTRNC {
+  background-color: var(--wst-button-tertiary-background-color);
+  background-image: var(--wst-button-tertiary-background-image);
+  padding-top: var(--wst-button-tertiary-padding-top);
+  padding-right: var(--wst-button-tertiary-padding-right);
+  padding-bottom: var(--wst-button-tertiary-padding-bottom);
+  padding-left: var(--wst-button-tertiary-padding-left);
+  border-top-color: var(--wst-button-tertiary-border-top-color);
+  border-right-color: var(--wst-button-tertiary-border-right-color);
+  border-bottom-color: var(--wst-button-tertiary-border-bottom-color);
+  border-left-color: var(--wst-button-tertiary-border-left-color);
+  border-top-width: var(--wst-button-tertiary-border-top-width);
+  border-right-width: var(--wst-button-tertiary-border-right-width);
+  border-bottom-width: var(--wst-button-tertiary-border-bottom-width);
+  border-left-width: var(--wst-button-tertiary-border-left-width);
+  border-top-style: var(--wst-button-tertiary-border-top-style);
+  border-right-style: var(--wst-button-tertiary-border-right-style);
+  border-bottom-style: var(--wst-button-tertiary-border-bottom-style);
+  border-left-style: var(--wst-button-tertiary-border-left-style);
+  border-top-left-radius: var(--wst-button-tertiary-border-top-left-radius);
+  border-top-right-radius: var(--wst-button-tertiary-border-top-right-radius);
+  border-bottom-left-radius: var(--wst-button-tertiary-border-bottom-left-radius);
+  border-bottom-right-radius: var(--wst-button-tertiary-border-bottom-right-radius);
+  box-shadow: var(--wst-button-tertiary-box-shadow);
+  column-gap: var(--wst-button-tertiary-column-gap);
+  row-gap: var(--wst-button-tertiary-row-gap);
+  justify-content: var(--wst-button-tertiary-justify-content);
+}
+
+.tiny-u7daFm {
+  padding-top: calc(4px * 2 - 2px);
+  padding-bottom: calc(4px * 2 - 2px);
+  padding-right: calc(4px * 4);
+  padding-left: calc(4px * 4);
+}
+
+.small-OumyWK {
+  padding-top: calc(4px * 2 - 1px);
+  padding-bottom: calc(4px * 2 - 1px);
+  padding-right: calc(4px * 4);
+  padding-left: calc(4px * 4);
+}
+
+.medium-ZNTo1S {
+  padding-top: calc(4px * 2);
+  padding-bottom: calc(4px * 2);
+  padding-right: calc(4px * 4);
+  padding-left: calc(4px * 4);
+}
+
+.large-g_AXNi {
+  padding-top: calc(4px * 3 - 2px);
+  padding-bottom: calc(4px * 3 - 2px);
+  padding-right: calc(4px * 4);
+  padding-left: calc(4px * 4);
+}
+
+.root-kIffNe:disabled {
+  cursor: not-allowed;
+  opacity: .4;
+}
+

package/dist/Button/index.d.ts

@@ -1,9 +1,22 @@
-import { ButtonProps } from '@base-ui/react/button';
+import { Button as Button_2 } from '@base-ui/react/button';
 import * as React_2 from 'react';
 
-export declare const Button: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ButtonProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
-    className?: string | undefined;
-} & React_2.RefAttributes<HTMLElement>>;
+declare type BaseProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Button_2>>;
+
+export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLElement>>;
+
+declare interface ButtonProps extends BaseProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+
+declare type ButtonSize = 'tiny' | 'small' | 'medium' | 'large';
+
+declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+
+declare type WithStringClassName<P> = Omit<P, 'className'> & {
+    className?: string;
+};
 
 
 export * from "@base-ui/react/button";

package/dist/Button/index.js

@@ -2,10 +2,31 @@ import { jsx } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";
 import clsx from "clsx";
 import * as __rspack_external_react from "react";
-const Button_module = {};
-const Button_Button = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Button, {
+const Button_module = {
+    "base-unit": "4px",
+    baseUnit: "4px",
+    "button-padding-h": "calc(4px * 4)",
+    buttonPaddingH: "calc(4px * 4)",
+    "button-size-tiny-padding-v": "calc(4px * 2 - 2px)",
+    buttonSizeTinyPaddingV: "calc(4px * 2 - 2px)",
+    "button-size-small-padding-v": "calc(4px * 2 - 1px)",
+    buttonSizeSmallPaddingV: "calc(4px * 2 - 1px)",
+    "button-size-medium-padding-v": "calc(4px * 2)",
+    buttonSizeMediumPaddingV: "calc(4px * 2)",
+    "button-size-large-padding-v": "calc(4px * 3 - 2px)",
+    buttonSizeLargePaddingV: "calc(4px * 3 - 2px)",
+    root: "root-kIffNe",
+    primary: "primary-BOdHls",
+    secondary: "secondary-O9td6z",
+    tertiary: "tertiary-QWTRNC",
+    tiny: "tiny-u7daFm",
+    small: "small-OumyWK",
+    medium: "medium-ZNTo1S",
+    large: "large-g_AXNi"
+};
+const Button_Button = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, variant = 'primary', size, ...props }, ref)=>/*#__PURE__*/ jsx(Button, {
         ref: ref,
-        className: clsx(Button_module.root, className),
+        className: clsx(Button_module.root, Button_module[variant], size && Button_module[size], className),
         ...props
     }));
 export { Button_Button as Button };

package/dist/index.d.ts

@@ -31,7 +31,7 @@ import { AutocompleteStatusProps } from '@base-ui/react/autocomplete';
 import { AvatarFallbackProps } from '@base-ui/react/avatar';
 import { AvatarImageProps } from '@base-ui/react/avatar';
 import { AvatarRootProps } from '@base-ui/react/avatar';
-import { ButtonProps } from '@base-ui/react/button';
+import { Button as Button_2 } from '@base-ui/react/button';
 import { CheckboxGroupProps } from '@base-ui/react/checkbox-group';
 import { CheckboxIndicatorProps } from '@base-ui/react/checkbox';
 import { CheckboxRootProps } from '@base-ui/react/checkbox';
@@ -335,9 +335,18 @@ export declare const Avatar: {
     } & React_2.RefAttributes<HTMLSpanElement>>;
 };
 
-export declare const Button: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ButtonProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
-    className?: string | undefined;
-} & React_2.RefAttributes<HTMLElement>>;
+declare type BaseProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Button_2>>;
+
+export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLElement>>;
+
+declare interface ButtonProps extends BaseProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+
+declare type ButtonSize = 'tiny' | 'small' | 'medium' | 'large';
+
+declare type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
 export declare const Checkbox: {
     Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<CheckboxRootProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.6.0",
+  "version": "1.8.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": "60800026bbd089931a47610fd2471f8c1dba345071e2b5c7fa58afe1"
+  "falconPackageHash": "900291d1dd93fd591cbb1d78a7b3e1ea122dc188849530a0c96dac4e"
 }