@app-studio/web 0.9.80 → 0.9.81

package/dist/web.umd.development.js

@@ -144,7 +144,7 @@
   };
 
   var AccordionShapes = {
-    sharp: {
+    square: {
       borderRadius: 0
     },
     rounded: {
@@ -1259,17 +1259,14 @@
       width: "100%"
     }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       size: "md",
-      weight: "semiBold",
-      backgroundColor: Theme[variant].container.backgroundColor
+      weight: "semiBold"
     }, views == null ? void 0 : views.title), title), subtitle && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
-      size: "sm",
-      backgroundColor: Theme[variant].container.backgroundColor
+      size: "sm"
     }, views == null ? void 0 : views.subtitle), subtitle))), showAction && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       marginRight: 10,
       onClick: action,
       padding: "6px 10px",
-      whiteSpace: "nowrap",
-      backgroundColor: Theme[variant].container.backgroundColor
+      whiteSpace: "nowrap"
     }, containerStyle, views == null ? void 0 : views.actionText), actionText)), isClosable && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       position: "absolute",
       zIndex: 10000,
@@ -2257,9 +2254,9 @@
    * Badge shapes with consistent border radius
    */
   var BadgeShapes = {
-    sharp: 0,
+    square: 0,
     rounded: '8px',
-    pillShaped: '9999px'
+    pill: '9999px'
   };
   /**
    * Badge positions for absolute positioning
@@ -2337,7 +2334,7 @@
     var {
         content,
         position,
-        shape = 'pillShaped',
+        shape = 'pill',
         variant = 'filled',
         size = 'md',
         views,
@@ -2711,9 +2708,9 @@
    * Button shapes with consistent border radius
    */
   var ButtonShapes = {
-    sharp: 0,
+    square: 0,
     rounded: 8,
-    pillShaped: 999
+    pill: 999
   };
   /**
    * Icon sizes for different button sizes
@@ -3386,9 +3383,9 @@
    * Card shapes with consistent border radius
    */
   var CardShapes = {
-    sharp: 0,
+    square: 0,
     rounded: '8px',
-    pillShaped: '24px'
+    pill: '24px'
   };
   /**
    * Get card variants with consistent styling based on theme mode
@@ -3548,7 +3545,9 @@
     // Prepare context value, merging default styles with user's `views` overrides
     var contextValue = React.useMemo(() => ({
       styles: {
-        container: Object.assign({}, defaultStyles.container, views == null ? void 0 : views.container),
+        container: Object.assign({}, defaultStyles.container, {
+          borderRadius: CardShapes[shape]
+        }, views == null ? void 0 : views.container),
         header: Object.assign({}, defaultStyles.header, {
           padding: sizePadding
         }, views == null ? void 0 : views.header),
@@ -3559,7 +3558,7 @@
           padding: sizePadding
         }, views == null ? void 0 : views.footer)
       }
-    }), [defaultStyles, views, sizePadding]);
+    }), [defaultStyles, views, sizePadding, shape]);
     // Determine if we have explicit Card.Header, Card.Content, Card.Footer components
     var hasExplicitStructure = React__default.Children.toArray(children).some(child => /*#__PURE__*/React__default.isValidElement(child) && (child.type === CardHeader || child.type === CardContent || child.type === CardFooter));
     // Get the appropriate variant styles based on theme mode
@@ -3571,7 +3570,6 @@
     // Merge styles for the root element
     var mergedRootProps = Object.assign({
       width: isFullWidth ? '100%' : 'auto',
-      borderRadius: CardShapes[shape],
       overflow: 'hidden'
     }, variantStyles, contextValue.styles.container, props, {
       style: Object.assign({}, (_contextValue$styles$ = contextValue.styles.container) == null ? void 0 : _contextValue$styles$.style, style)
@@ -6368,7 +6366,7 @@
         }
       }
     },
-    sharp: {
+    square: {
       borderRadius: 0
     },
     rounded: {
@@ -6379,7 +6377,7 @@
         }
       }
     },
-    pillShaped: {
+    pill: {
       borderRadius: '9999px'
     }
   };
@@ -8529,13 +8527,13 @@
     default: {
       borderRadius: '6px'
     },
-    sharp: {
+    square: {
       borderRadius: '0px'
     },
     rounded: {
       borderRadius: '8px'
     },
-    pillShaped: {
+    pill: {
       borderRadius: '9999px'
     }
   };
@@ -11223,9 +11221,6 @@
       isReadOnly
     } = _ref;
     var [isRemoveHovered, setIsRemoveHovered] = React__default.useState(false);
-    var {
-      getColor
-    } = appStudio.useTheme();
     var chipSize = {
       xs: {
         padding: '2px 8px',
@@ -11261,24 +11256,23 @@
       alignItems: "center",
       gap: 6,
       padding: chipSize.padding,
-      backgroundColor: "color.gray.100",
+      backgroundColor: "color.gray.100.100",
       borderRadius: "16px",
       borderWidth: "1px",
       borderStyle: "solid",
-      borderColor: "color.gray.300",
+      borderColor: "color.gray.100",
       boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
       transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
       opacity: isDisabled ? 0.6 : 1,
       _hover: !isDisabled && !isReadOnly ? {
-        backgroundColor: 'color.gray.200',
-        borderColor: 'color.gray.400',
+        backgroundColor: 'color.gray.100.200',
+        borderColor: 'color.gray.200',
         boxShadow: '0 4px 6px rgba(0,0,0,0.05)',
         transform: 'translateY(-1px)'
       } : {}
     }, views == null ? void 0 : views.tag), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
       fontSize: chipSize.fontSize,
-      color: isDisabled ? 'color.gray.400' : 'theme.primary',
-      fontWeight: "bold",
+      color: isDisabled ? 'color.gray.100' : 'theme.primary',
       whiteSpace: "nowrap"
     }, views == null ? void 0 : views.tagText), tag), isRemovable && !isDisabled && !isReadOnly && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       cursor: "pointer",
@@ -12773,7 +12767,7 @@
     default: {
       borderRadius: '8px'
     },
-    sharp: {
+    square: {
       borderRadius: '0px'
     },
     rounded: {
@@ -14440,9 +14434,9 @@
     }
   };
   var SliderShapes = {
-    sharp: 0,
+    square: 0,
     rounded: 4,
-    pillShaped: 24
+    pill: 24
   };
   var getSlider = themeMode => {
     return {
@@ -15256,7 +15250,7 @@
    * Following the 4px grid system
    */
   var ContainerShapes = {
-    sharp: {
+    square: {
       borderRadius: 0
     },
     rounded: {
@@ -16705,30 +16699,25 @@
       textStyles
     } = _ref;
     // Base styles for the tab header
+    // Base styles for the tab header
     var baseStyles = {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      padding: '10px 16px',
+      padding: '12px 16px',
       cursor: 'pointer',
-      borderTopLeftRadius: '4px',
-      borderTopRightRadius: '4px',
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      borderColor: isActive ? 'theme.primary' : 'transparent',
-      borderBottomColor: isActive ? 'transparent' : 'color.gray.200',
-      backgroundColor: isActive ? 'color.white' : 'transparent',
+      borderBottom: '2px solid',
+      borderBottomColor: isActive ? 'theme.primary' : 'transparent',
+      backgroundColor: 'transparent',
       color: isActive ? 'theme.primary' : 'color.gray.600',
-      fontWeight: 'normal',
-      position: 'relative',
-      // If active, show a bottom border that matches the background color
-      // to create the illusion that the tab is connected to the content
+      fontWeight: isActive ? '600' : '500',
+      marginBottom: '-1px',
+      transition: 'all 0.2s ease',
       // Hover state
       on: {
         hover: {
-          color: 'theme.primary'
+          color: 'theme.primary',
+          borderBottomColor: isActive ? 'theme.primary' : 'color.gray.300'
         }
       }
     };
@@ -16790,7 +16779,11 @@
       React__default.createElement(appStudio.Vertical, Object.assign({
         width: "100%",
         height: '100%'
-      }, views.container), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({}, views.headerTabs), tabs.map(tab => {
+      }, views.container), /*#__PURE__*/React__default.createElement(appStudio.Horizontal, Object.assign({
+        width: "100%",
+        borderBottom: "1px solid",
+        borderBottomColor: "color.gray.200"
+      }, views.headerTabs), tabs.map(tab => {
         // Determine if the current tab in the loop is the active one
         var isActive = tab.title === activeTab.title;
         // Prepare the onClick handler for this specific tab
@@ -17364,7 +17357,7 @@
     }))))));
   };
 
-  var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode", "textComponent"];
+  var _excluded$$ = ["children", "highlightText", "highlightStyle", "highlightColor", "highlightSecondaryColor", "size", "views", "highlightAnimate", "animate", "animationLoop", "highlightAnimationLoop", "highlightTypewriter", "highlightTypewriterDuration", "highlightSlide", "highlightSlideDuration", "highlightSlideStagger", "highlightSlideSequential", "themeMode"];
   function escapeRegExp(string) {
     return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
   }
@@ -17395,8 +17388,7 @@
         highlightSlideDuration = 500,
         highlightSlideStagger = 50,
         highlightSlideSequential = true,
-        themeMode: elementMode,
-        textComponent
+        themeMode: elementMode
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
     var {
@@ -17450,7 +17442,6 @@
       highlightSlideStagger,
       highlightSlideSequential
     }, props));
-    var TextComponent = textComponent || appStudio.Text;
     var fontSize = TitleSizes[size];
     // Highlight style props
     var highlightProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedHighlightSecondaryColor);
@@ -17471,13 +17462,12 @@
     // Get the text to display
     var text = typeof finalDisplayedText === 'string' ? finalDisplayedText : typeof children === 'string' ? children : '';
     // Common container props
-    var containerProps = Object.assign({
+    var containerProps = {
       ref,
-      animate: inView ? controlledAnimate : undefined
-    }, !textComponent && {
+      animate: inView ? controlledAnimate : undefined,
       as: 'h1',
       fontSize
-    });
+    };
     // Render highlighted text content (typewriter, slide, or plain)
     var renderHighlightedContent = content => {
       // If animations are enabled but not in view, render invisible placeholder
@@ -17493,8 +17483,7 @@
         return /*#__PURE__*/React__default.createElement(TypewriterEffect, Object.assign({
           text: content,
           typingSpeed: Math.max(30, highlightTypewriterDuration / (content.length * 10)),
-          cursorColor: "currentColor",
-          textComponent: TextComponent
+          cursorColor: "currentColor"
         }, highlightProps));
       }
       if (highlightSlide) {
@@ -17505,8 +17494,7 @@
           sequential: stateHighlightSlideSequential,
           direction: "up",
           fontSize: fontSize,
-          wordProps: highlightProps,
-          textComponent: TextComponent
+          wordProps: highlightProps
         });
       }
       return renderWithLineBreaks(content);
@@ -17526,13 +17514,11 @@
         lastIndex = match.index + match[0].length;
       }
       if (lastIndex < text.length) parts.push(text.substring(lastIndex));
-      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-        fontSize: fontSize
-      }, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? (/*#__PURE__*/React__default.createElement(TextComponent, {
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? (/*#__PURE__*/React__default.createElement(appStudio.Text, {
         key: "text-" + idx,
         as: "span",
         display: "inline"
-      }, renderWithLineBreaks(part))) : (/*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
+      }, renderWithLineBreaks(part))) : (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         key: "highlight-" + idx,
         as: "span",
         display: "inline",
@@ -17541,16 +17527,14 @@
     }
     // Case 2: Has highlight style but no highlight target - apply style to entire title
     if (highlightStyle && !activeHighlightTarget) {
-      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
-        fontSize: fontSize
-      }, containerProps, props, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({
+      return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
         as: "span",
         display: "inline",
         animate: inView ? controlledHighlightAnimate : undefined
       }, !highlightSlide ? highlightProps : {}, views == null ? void 0 : views.highlight), renderHighlightedContent(text)));
     }
     // Case 3: Default - no highlighting
-    return /*#__PURE__*/React__default.createElement(TextComponent, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), renderWithLineBreaks(text));
+    return /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), renderWithLineBreaks(text));
   };
 
   /**
@@ -17616,9 +17600,9 @@
   };
 
   var ToggleShapes = {
-    sharp: 0,
+    square: 0,
     rounded: 4,
-    pillShaped: 24
+    pill: 24
   };
   /**
    * Generate toggle variants with proper color combinations based on main color and contrast
@@ -17735,7 +17719,7 @@
     };
     return /*#__PURE__*/React__default.createElement(appStudio.Center, Object.assign({
       role: "Toggle",
-      padding: shape === 'pillShaped' ? '10px 12px' : '8px',
+      padding: shape === 'pill' ? '10px 12px' : '8px',
       width: "fit-content",
       cursor: isDisabled ? 'not-allowed' : 'pointer',
       borderRadius: ToggleShapes[shape],
@@ -18644,13 +18628,13 @@
     default: {
       borderRadius: '8px'
     },
-    sharp: {
+    square: {
       borderRadius: 0
     },
     rounded: {
       borderRadius: '8px'
     },
-    pillShaped: {
+    pill: {
       borderRadius: '9999px'
     }
   };
@@ -19112,13 +19096,13 @@
     default: {
       borderRadius: '8px'
     },
-    sharp: {
+    square: {
       borderRadius: 0
     },
     rounded: {
       borderRadius: '8px'
     },
-    pillShaped: {
+    pill: {
       borderRadius: '9999px'
     }
   };