@app-studio/web 0.8.86 → 0.8.88

package/dist/components/Button/Button/Button.props.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonProps as $ButtonProps, Shadow, ViewProps } from 'app-studio';
 import { Elevation } from '../../../utils/elevation';
-import { IconPosition, Shape, Size, Variant, LoaderPosition, Effects } from './Button.type';
+import { IconPosition, Shape, Size, Variant, LoaderPosition } from './Button.type';
 import { LoaderProps } from '../../Loader/Loader/Loader.props';
 export interface ButtonProps extends Omit<$ButtonProps, 'size'> {
     children?: React.ReactNode;
@@ -21,7 +21,6 @@ export interface ButtonProps extends Omit<$ButtonProps, 'size'> {
     shape?: Shape;
     ariaLabel?: string;
     variant?: Variant;
-    effect?: Effects;
     color?: string;
     views?: {
         container?: ViewProps;

package/dist/components/Button/examples/index.d.ts

@@ -1,7 +1,6 @@
 export * from './autofocus';
 export * from './default';
 export * from './designSystem';
-export * from './effect';
 export * from './icon';
 export * from './isAuto';
 export * from './isDisabled';

package/dist/web.cjs.development.js

@@ -3622,11 +3622,11 @@ var Loader = LoaderComponent;
 var ButtonSizes = {
   xs: {
     // Height: 24px (6 × 4px)
-    minHeight: 24,
+    minHeight: 4 * 4,
     paddingTop: 2,
     paddingBottom: 2,
-    paddingLeft: 6,
-    paddingRight: 6,
+    paddingLeft: 4,
+    paddingRight: 4,
     // Typography
     fontSize: 12,
     fontWeight: '500',
@@ -3635,54 +3635,53 @@ var ButtonSizes = {
   },
   sm: {
     // Height: 32px (8 × 4px)
-    minHeight: 32,
+    minHeight: 6 * 4,
     paddingTop: 6,
     paddingBottom: 6,
     paddingLeft: 12,
     paddingRight: 12,
     // Typography
-    fontSize: 14,
+    fontSize: 12,
     fontWeight: '500',
-    lineHeight: 20,
+    lineHeight: 12,
     letterSpacing: '-0.01em'
   },
   md: {
     // Height: 40px (10 × 4px) - standard height for interactive elements
-    minHeight: 40,
+    minHeight: 8 * 4,
     paddingTop: 8,
     paddingBottom: 8,
     paddingLeft: 16,
     paddingRight: 16,
     // Typography
-    fontSize: 14,
+    fontSize: 16,
     fontWeight: '500',
-    lineHeight: 24,
+    lineHeight: 16,
     letterSpacing: '-0.01em'
   },
   lg: {
-    // Height: 48px (12 × 4px)
-    minHeight: 48,
-    paddingTop: 12,
-    paddingBottom: 12,
+    minHeight: 10 * 4,
+    paddingTop: 10,
+    paddingBottom: 10,
     paddingLeft: 20,
     paddingRight: 20,
     // Typography
     fontSize: 16,
     fontWeight: '500',
-    lineHeight: 24,
+    lineHeight: 20,
     letterSpacing: '-0.01em'
   },
   xl: {
     // Height: 60px (15 × 4px)
-    minHeight: 60,
-    paddingTop: 16,
-    paddingBottom: 16,
-    paddingLeft: 28,
-    paddingRight: 28,
+    minHeight: 12 * 4,
+    paddingTop: 12,
+    paddingBottom: 12,
+    paddingLeft: 24,
+    paddingRight: 24,
     // Typography
     fontSize: 18,
     fontWeight: '500',
-    lineHeight: 28,
+    lineHeight: 24,
     letterSpacing: '-0.01em'
   }
 };
@@ -3732,15 +3731,16 @@ var getButtonVariants = (color, isLight) => ({
     borderStyle: 'solid',
     borderColor: 'transparent',
     _hover: {
-      backgroundColor: 'transparent',
-      color: color,
-      borderColor: color,
-      transform: 'translateY(-1px)'
+      transform: 'translateY(-1px)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
     },
     _active: {
-      color: color,
-      borderColor: color,
-      transform: 'translateY(0)'
+      transform: 'translateY(-1px)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
     },
     transition: 'all 0.2s ease'
   },
@@ -3753,12 +3753,18 @@ var getButtonVariants = (color, isLight) => ({
     _hover: {
       backgroundColor: color,
       color: isLight ? 'light.black' : 'light.white',
-      transform: 'translateY(-1px)'
+      transform: 'translateY(-1px)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
     },
     _active: {
       backgroundColor: color,
       color: isLight ? 'light.black' : 'light.white',
-      transform: 'translateY(0)'
+      transform: 'translateY(0)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
     },
     transition: 'all 0.2s ease'
   },
@@ -3771,12 +3777,18 @@ var getButtonVariants = (color, isLight) => ({
     _hover: {
       backgroundColor: color,
       color: isLight ? 'light.black' : 'light.white',
-      transform: 'translateY(-1px)'
+      transform: 'translateY(-1px)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
     },
     _active: {
       backgroundColor: color,
       color: isLight ? 'light.black' : 'light.white',
-      transform: 'translateY(0)'
+      transform: 'translateY(0)',
+      textDecoration: 'underline',
+      textUnderlineOffset: '1px',
+      textDecorationThickness: '1px'
     },
     transition: 'all 0.2s ease'
   },
@@ -3787,12 +3799,13 @@ var getButtonVariants = (color, isLight) => ({
     borderStyle: 'none',
     borderColor: 'transparent',
     textDecoration: 'underline',
-    textUnderlineOffset: 2,
+    textUnderlineOffset: '1px',
+    textDecorationThickness: '1px',
     _hover: {
-      textDecorationThickness: 2
+      textDecorationThickness: '2px'
     },
     _active: {
-      textDecorationThickness: 2
+      textDecorationThickness: '2px'
     },
     transition: 'all 0.2s ease'
   }
@@ -3810,10 +3823,8 @@ var ButtonView = _ref => {
       loaderPosition = 'left',
       backgroundColor,
       // primary candidate for main color
-      color,
-      // 2nd candidate for main color (NOT text‑color)
-      isAuto,
-      isFilled,
+      color // 2nd candidate for main color (NOT text‑color)
+      ,
       isDisabled,
       isLoading,
       isIconRounded,
@@ -3888,21 +3899,14 @@ var ButtonView = _ref => {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    width: isAuto ? 'fit-content' : isFilled ? '100%' : undefined,
+    // width={isAuto ? 'fit-content' : isFilled ? '100%' : undefined}
     /* visuals */
     borderRadius: ButtonShapes[shape],
-    backgroundColor: base.backgroundColor,
-    color: base.color,
-    borderWidth: base.borderWidth,
-    borderStyle: base.borderStyle,
-    borderColor: base.borderColor,
-    _hover: base._hover,
-    _active: base._active,
     boxShadow: shadow,
     transition: "all 0.2s ease",
     cursor: isDisabled ? 'default' : 'pointer',
     onClick: onClick
-  }, views == null ? void 0 : views.container, props), to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
+  }, base, views == null ? void 0 : views.container, props), to ? (/*#__PURE__*/React__default.createElement(Link, Object.assign({
     to: to,
     isExternal: isExternal,
     color: 'inherit',