@app-studio/web 0.9.80 → 0.9.82

package/dist/web.esm.js

@@ -177,7 +177,7 @@ var useAccordionState = _ref => {
 };
 
 var AccordionShapes = {
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
@@ -1292,17 +1292,14 @@ var MessageView = _ref => {
     width: "100%"
   }, /*#__PURE__*/React.createElement(Text, Object.assign({
     size: "md",
-    weight: "semiBold",
-    backgroundColor: Theme[variant].container.backgroundColor
+    weight: "semiBold"
   }, views == null ? void 0 : views.title), title), subtitle && (/*#__PURE__*/React.createElement(Text, Object.assign({
-    size: "sm",
-    backgroundColor: Theme[variant].container.backgroundColor
+    size: "sm"
   }, views == null ? void 0 : views.subtitle), subtitle))), showAction && (/*#__PURE__*/React.createElement(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.createElement(View, Object.assign({
     position: "absolute",
     zIndex: 10000,
@@ -2290,9 +2287,9 @@ var BadgeSizes = {
  * Badge shapes with consistent border radius
  */
 var BadgeShapes = {
-  sharp: 0,
+  square: 0,
   rounded: '8px',
-  pillShaped: '9999px'
+  pill: '9999px'
 };
 /**
  * Badge positions for absolute positioning
@@ -2370,7 +2367,7 @@ var BadgeView = _ref => {
   var {
       content,
       position,
-      shape = 'pillShaped',
+      shape = 'pill',
       variant = 'filled',
       size = 'md',
       views,
@@ -2744,9 +2741,9 @@ var ButtonSizes = {
  * Button shapes with consistent border radius
  */
 var ButtonShapes = {
-  sharp: 0,
+  square: 0,
   rounded: 8,
-  pillShaped: 999
+  pill: 999
 };
 /**
  * Icon sizes for different button sizes
@@ -3419,9 +3416,9 @@ var CardSizes = {
  * 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
@@ -3581,7 +3578,9 @@ var CardView = _ref4 => {
   // Prepare context value, merging default styles with user's `views` overrides
   var contextValue = 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),
@@ -3592,7 +3591,7 @@ var CardView = _ref4 => {
         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.Children.toArray(children).some(child => /*#__PURE__*/React.isValidElement(child) && (child.type === CardHeader || child.type === CardContent || child.type === CardFooter));
   // Get the appropriate variant styles based on theme mode
@@ -3604,7 +3603,6 @@ var CardView = _ref4 => {
   // 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)
@@ -6401,7 +6399,7 @@ var Shapes = {
       }
     }
   },
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
@@ -6412,7 +6410,7 @@ var Shapes = {
       }
     }
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };
@@ -8562,13 +8560,13 @@ var Shapes$1 = {
   default: {
     borderRadius: '6px'
   },
-  sharp: {
+  square: {
     borderRadius: '0px'
   },
   rounded: {
     borderRadius: '8px'
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };
@@ -11256,9 +11254,6 @@ var TagChip = _ref => {
     isReadOnly
   } = _ref;
   var [isRemoveHovered, setIsRemoveHovered] = React.useState(false);
-  var {
-    getColor
-  } = useTheme();
   var chipSize = {
     xs: {
       padding: '2px 8px',
@@ -11294,24 +11289,23 @@ var TagChip = _ref => {
     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.createElement(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.createElement(View, Object.assign({
     cursor: "pointer",
@@ -12806,7 +12800,7 @@ var Shapes$2 = {
   default: {
     borderRadius: '8px'
   },
-  sharp: {
+  square: {
     borderRadius: '0px'
   },
   rounded: {
@@ -14473,9 +14467,9 @@ var ThumbSizes = {
   }
 };
 var SliderShapes = {
-  sharp: 0,
+  square: 0,
   rounded: 4,
-  pillShaped: 24
+  pill: 24
 };
 var getSlider = themeMode => {
   return {
@@ -15289,7 +15283,7 @@ var hideModal = name => {
  * Following the 4px grid system
  */
 var ContainerShapes = {
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
@@ -16738,30 +16732,25 @@ var TabHeader = _ref => {
     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'
       }
     }
   };
@@ -16823,7 +16812,11 @@ var TabsView = _ref => {
     React.createElement(Vertical, Object.assign({
       width: "100%",
       height: '100%'
-    }, views.container), /*#__PURE__*/React.createElement(Horizontal, Object.assign({}, views.headerTabs), tabs.map(tab => {
+    }, views.container), /*#__PURE__*/React.createElement(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
@@ -17397,7 +17390,7 @@ var SlideEffect = _ref => {
   }))))));
 };
 
-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, '\\$&');
 }
@@ -17428,8 +17421,7 @@ var TitleView = _ref => {
       highlightSlideDuration = 500,
       highlightSlideStagger = 50,
       highlightSlideSequential = true,
-      themeMode: elementMode,
-      textComponent
+      themeMode: elementMode
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$$);
   var {
@@ -17483,7 +17475,6 @@ var TitleView = _ref => {
     highlightSlideStagger,
     highlightSlideSequential
   }, props));
-  var TextComponent = textComponent || Text;
   var fontSize = TitleSizes[size];
   // Highlight style props
   var highlightProps = HighlightStyles[highlightStyle](resolvedHighlightColor, resolvedHighlightSecondaryColor);
@@ -17504,13 +17495,12 @@ var TitleView = _ref => {
   // 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
@@ -17526,8 +17516,7 @@ var TitleView = _ref => {
       return /*#__PURE__*/React.createElement(TypewriterEffect, Object.assign({
         text: content,
         typingSpeed: Math.max(30, highlightTypewriterDuration / (content.length * 10)),
-        cursorColor: "currentColor",
-        textComponent: TextComponent
+        cursorColor: "currentColor"
       }, highlightProps));
     }
     if (highlightSlide) {
@@ -17538,8 +17527,7 @@ var TitleView = _ref => {
         sequential: stateHighlightSlideSequential,
         direction: "up",
         fontSize: fontSize,
-        wordProps: highlightProps,
-        textComponent: TextComponent
+        wordProps: highlightProps
       });
     }
     return renderWithLineBreaks(content);
@@ -17559,13 +17547,11 @@ var TitleView = _ref => {
       lastIndex = match.index + match[0].length;
     }
     if (lastIndex < text.length) parts.push(text.substring(lastIndex));
-    return /*#__PURE__*/React.createElement(Element, Object.assign({
-      fontSize: fontSize
-    }, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? (/*#__PURE__*/React.createElement(TextComponent, {
+    return /*#__PURE__*/React.createElement(Element, Object.assign({}, containerProps, views == null ? void 0 : views.container, props), parts.map((part, idx) => typeof part === 'string' ? (/*#__PURE__*/React.createElement(Text, {
       key: "text-" + idx,
       as: "span",
       display: "inline"
-    }, renderWithLineBreaks(part))) : (/*#__PURE__*/React.createElement(TextComponent, Object.assign({
+    }, renderWithLineBreaks(part))) : (/*#__PURE__*/React.createElement(Text, Object.assign({
       key: "highlight-" + idx,
       as: "span",
       display: "inline",
@@ -17574,16 +17560,14 @@ var TitleView = _ref => {
   }
   // Case 2: Has highlight style but no highlight target - apply style to entire title
   if (highlightStyle && !activeHighlightTarget) {
-    return /*#__PURE__*/React.createElement(Element, Object.assign({
-      fontSize: fontSize
-    }, containerProps, props, views == null ? void 0 : views.container), /*#__PURE__*/React.createElement(TextComponent, Object.assign({
+    return /*#__PURE__*/React.createElement(Element, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), /*#__PURE__*/React.createElement(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.createElement(TextComponent, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), renderWithLineBreaks(text));
+  return /*#__PURE__*/React.createElement(Text, Object.assign({}, containerProps, props, views == null ? void 0 : views.container), renderWithLineBreaks(text));
 };
 
 /**
@@ -17649,9 +17633,9 @@ var useToggleState = defaultToggled => {
 };
 
 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
@@ -17768,7 +17752,7 @@ var ToggleView = _ref => {
   };
   return /*#__PURE__*/React.createElement(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],
@@ -18677,13 +18661,13 @@ var Shapes$3 = {
   default: {
     borderRadius: '8px'
   },
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
     borderRadius: '8px'
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };
@@ -19145,13 +19129,13 @@ var Shapes$4 = {
   default: {
     borderRadius: '8px'
   },
-  sharp: {
+  square: {
     borderRadius: 0
   },
   rounded: {
     borderRadius: '8px'
   },
-  pillShaped: {
+  pill: {
     borderRadius: '9999px'
   }
 };