@app-studio/web 0.8.76 → 0.8.78

package/dist/web.cjs.development.js

@@ -29,7 +29,6 @@ require('core-js/modules/web.url.js');
 require('core-js/modules/web.url.to-json.js');
 require('core-js/modules/web.url-search-params.js');
 var zustand = require('zustand');
-require('src/components/Badge/Badge');
 require('core-js/modules/es.string.ends-with.js');
 require('core-js/modules/es.string.match.js');
 require('core-js/modules/es.string.search.js');
@@ -471,12 +470,7 @@ var FontSizes = {
   sm: '14px',
   md: '16px',
   lg: '18px',
-  xl: '20px',
-  '2xl': '24px',
-  '3xl': '30px',
-  '4xl': '36px',
-  '5xl': '48px',
-  '6xl': '60px'
+  xl: '20px'
 };
 /**
  * Line heights following typography guidelines
@@ -486,12 +480,7 @@ var LineHeights = {
   sm: '20px',
   md: '24px',
   lg: '28px',
-  xl: '28px',
-  '2xl': '32px',
-  '3xl': '36px',
-  '4xl': '40px',
-  '5xl': '60px',
-  '6xl': '72px'
+  xl: '28px'
 };
 /**
  * Font weights following typography guidelines
@@ -732,9 +721,12 @@ var IconWrapper = _ref => {
 };
 // Utility function to handle fill and stroke based on 'filled' prop
 var getSvgProps = (filled, color, strokeWidth) => {
+  var {
+    getColor
+  } = appStudio.useTheme();
   return {
-    fill: filled ? color : 'none',
-    stroke: filled ? 'none' : color,
+    fill: filled ? getColor(color) : 'none',
+    stroke: filled ? 'none' : getColor(color),
     strokeWidth,
     strokeLinecap: 'round',
     strokeLinejoin: 'round'
@@ -1200,7 +1192,7 @@ var InfoIcon = _ref19 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
-      filled = false,
+      filled = true,
       strokeWidth = 1
     } = _ref19,
     props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
@@ -2944,7 +2936,7 @@ var AlertView = _ref => {
     borderStyle: "solid",
     borderColor: Themes[variant].container.borderColor,
     backgroundColor: Themes[variant].container.backgroundColor,
-    boxShadow: Themes[variant].container.boxShadow,
+    boxShadow: Themes[variant].container.containerShadow,
     // Animation
     transition: "all 0.2s ease"
   }, views == null ? void 0 : views.container), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
@@ -3378,12 +3370,7 @@ var IconSizes = {
   sm: 14,
   md: 16,
   lg: 18,
-  xl: 20,
-  '2xl': 24,
-  '3xl': 30,
-  '4xl': 36,
-  '5xl': 48,
-  '6xl': 64
+  xl: 20
 };
 
 var _excluded$6 = ["children", "to", "iconSize", "underline", "isHovered", "isExternal", "views", "setIsHovered"];
@@ -3635,12 +3622,7 @@ var DefaultSizes = {
   sm: 18,
   md: 22,
   lg: 26,
-  xl: 30,
-  '2xl': 40,
-  '3xl': 50,
-  '4xl': 60,
-  '5xl': 70,
-  '6xl': 80
+  xl: 30
 };
 // Specifies a mapping of spinning speed labels to numerical millisecond values, determining the speed of the Loader component's animation cycles.
 var DefaultSpeeds = {
@@ -4755,8 +4737,32 @@ Carousel.Item = CarouselItemComponent; // Compound component pattern
 Carousel.Previous = CarouselPreviousComponent; // Compound component pattern
 Carousel.Next = CarouselNextComponent; // Compound component pattern
 
+/**
+ * Chart Colors
+ *
+ * Defines a consistent color scheme for all chart examples.
+ * These colors should be used in the same order across all chart types
+ * to ensure consistency between the charts and their legends.
+ */
+var CHART_COLORS = {
+  // Primary colors for all charts
+  blue: 'color.blue.500',
+  green: 'color.green.500',
+  purple: 'color.purple.500',
+  orange: 'color.orange.500',
+  red: 'color.red.500',
+  // Additional colors if needed
+  teal: 'color.teal.500',
+  pink: 'color.pink.500',
+  indigo: 'color.indigo.500',
+  yellow: 'color.yellow.500',
+  cyan: 'color.cyan.500'
+};
+// Default color array for consistent ordering
+var DEFAULT_CHART_COLORS = [CHART_COLORS.blue, CHART_COLORS.green, CHART_COLORS.purple, CHART_COLORS.orange, CHART_COLORS.red, CHART_COLORS.teal, CHART_COLORS.pink, CHART_COLORS.indigo, CHART_COLORS.yellow, CHART_COLORS.cyan];
+
 // Default colors for chart series
-var DEFAULT_COLORS = ['color.blue.500', 'color.green.500', 'color.purple.500', 'color.orange.500', 'color.red.500', 'color.teal.500', 'color.pink.500', 'color.indigo.500', 'color.yellow.500', 'color.cyan.500'];
+var DEFAULT_COLORS = DEFAULT_CHART_COLORS;
 // Default styles for chart container
 var ChartContainerStyles = {
   width: '100%',
@@ -5000,6 +5006,9 @@ var BarChart = _ref => {
     hideTooltip,
     views
   } = _ref;
+  var {
+    getColor
+  } = appStudio.useTheme();
   // Calculate chart dimensions
   var padding = {
     top: 20,
@@ -5093,7 +5102,7 @@ var BarChart = _ref => {
       y: y,
       width: barWidth,
       height: barHeight,
-      fill: series.color,
+      fill: series.color ? getColor(series.color) : 'black',
       onMouseEnter: handleMouseEnter,
       onMouseLeave: hideTooltip,
       onClick: handleClick
@@ -5114,6 +5123,9 @@ var LineChart = _ref => {
     views
   } = _ref;
   // Calculate chart dimensions
+  var {
+    getColor
+  } = appStudio.useTheme();
   var padding = {
     top: 20,
     right: 20,
@@ -5204,11 +5216,11 @@ var LineChart = _ref => {
     key: "series-" + seriesIndex
   }, /*#__PURE__*/React__default.createElement("path", Object.assign({
     d: generateAreaPath(series.data),
-    fill: series.color,
+    fill: series.color ? getColor(series.color) : 'black',
     opacity: 0.1
   }, views == null ? void 0 : views.area)), /*#__PURE__*/React__default.createElement("path", Object.assign({
     d: generatePath(series.data),
-    stroke: series.color
+    stroke: series.color ? getColor(series.color) : 'black'
   }, LineStyles, views == null ? void 0 : views.line)), series.data.map((value, dataIndex) => {
     var x = padding.left + dataIndex / (data.labels.length - 1) * chartWidth;
     var y = height - padding.bottom - value / maxValue * chartHeight * animationProgress;
@@ -6251,9 +6263,9 @@ var FieldContainer = _ref => {
     gap: 8,
     position: "relative",
     width: "100%"
-  }, props), children, !error && helperText && (/*#__PURE__*/React__default.createElement(HelperText, Object.assign({
+  }, props, views == null ? void 0 : views.container), children, !error && helperText && (/*#__PURE__*/React__default.createElement(HelperText, Object.assign({
     marginTop: 4
-  }, views), helperText)), error && (/*#__PURE__*/React__default.createElement(Text, {
+  }, views == null ? void 0 : views.helperText), helperText)), error && (/*#__PURE__*/React__default.createElement(Text, Object.assign({
     size: "xs",
     marginTop: 4,
     marginHorizontal: 0,
@@ -6261,7 +6273,7 @@ var FieldContainer = _ref => {
     ,
     color: "color.red.500",
     transition: "all 0.2s ease"
-  }, error)));
+  }, views == null ? void 0 : views.error), error)));
 };
 
 /**
@@ -7040,26 +7052,6 @@ var KnobSizes = {
   xl: {
     height: '28px',
     width: '28px'
-  },
-  '2xl': {
-    height: '32px',
-    width: '32px'
-  },
-  '3xl': {
-    height: '36px',
-    width: '36px'
-  },
-  '4xl': {
-    height: '40px',
-    width: '40px'
-  },
-  '5xl': {
-    height: '44px',
-    width: '44px'
-  },
-  '6xl': {
-    height: '48px',
-    width: '48px'
   }
 };
 /**
@@ -7086,26 +7078,6 @@ var SliderSizes = {
   xl: {
     height: '40px',
     width: '72px'
-  },
-  '2xl': {
-    height: '44px',
-    width: '80px'
-  },
-  '3xl': {
-    height: '48px',
-    width: '88px'
-  },
-  '4xl': {
-    height: '52px',
-    width: '96px'
-  },
-  '5xl': {
-    height: '56px',
-    width: '104px'
-  },
-  '6xl': {
-    height: '60px',
-    width: '112px'
   }
 };
 /**
@@ -7132,26 +7104,6 @@ var SliderPadding = {
   xl: {
     paddingVertical: 4,
     paddingHorizontal: 4
-  },
-  '2xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '3xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '4xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '5xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
-  },
-  '6xl': {
-    paddingVertical: 4,
-    paddingHorizontal: 4
   }
 };
 /**
@@ -7364,11 +7316,8 @@ var TextAreaView = _ref => {
       setIsFocused = () => {},
       setIsHovered = () => {},
       views = {
-        box: {},
-        text: {},
         label: {},
-        helperText: {},
-        field: {}
+        helperText: {}
       }
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
@@ -7379,11 +7328,11 @@ var TextAreaView = _ref => {
   var fieldStyles = Object.assign({
     // Layout properties
     margin: 0,
-    paddingVertical: 12,
-    paddingHorizontal: 0,
+    paddingVertical: 2,
+    paddingHorizontal: 2,
     width: '100%',
-    height: '100%',
-    minHeight: '80px',
+    maxHeight: 'calc(100vh - 100px)',
+    height: 'calc(5em)',
     border: 'none',
     resize: 'vertical',
     // Focus state
@@ -7394,7 +7343,7 @@ var TextAreaView = _ref => {
     },
     // Typography properties
     fontSize: appStudio.Typography.fontSizes[size],
-    lineHeight: '1.5',
+    lineHeight: appStudio.Typography.fontSizes[size] * 1.5,
     letterSpacing: '-0.01em',
     // Visual properties
     backgroundColor: 'transparent',
@@ -7402,11 +7351,7 @@ var TextAreaView = _ref => {
     // State properties
     cursor: isDisabled ? 'not-allowed' : 'text',
     // Animation
-    transition: 'all 0.2s ease',
-    // Dark mode support
-    '@media (prefers-color-scheme: dark)': {
-      color: isDisabled ? 'color.gray.600' : 'color.gray.100'
-    }
+    transition: 'all 0.2s ease'
   }, views['field']);
   var handleHover = () => setIsHovered(!isHovered);
   var handleFocus = () => {
@@ -7428,11 +7373,11 @@ var TextAreaView = _ref => {
       if (onChange) onChange(event.target.value);
     }
   };
-  return /*#__PURE__*/React__default.createElement(FieldContainer, {
+  return /*#__PURE__*/React__default.createElement(FieldContainer, Object.assign({
     helperText: helperText,
     error: error,
     views: views
-  }, /*#__PURE__*/React__default.createElement(FieldContent, {
+  }, props), /*#__PURE__*/React__default.createElement(FieldContent, Object.assign({
     label: label,
     size: size,
     error: error,
@@ -7449,11 +7394,11 @@ var TextAreaView = _ref => {
     showLabel: showLabel,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React__default.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
+  }, views == null ? void 0 : views.content), /*#__PURE__*/React__default.createElement(FieldWrapper, Object.assign({}, views == null ? void 0 : views.warper), showLabel && (/*#__PURE__*/React__default.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: 'theme.primary',
     error: error
-  }, views), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
+  }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     as: "textarea",
     id: id,
     name: name,
@@ -7468,10 +7413,10 @@ var TextAreaView = _ref => {
     onBlur: handleBlur,
     onFocus: handleFocus,
     multiline: isMultiline
-  }, fieldStyles, props, {
+  }, fieldStyles, {
     onChange: handleChange,
     onChangeText: handleChange
-  })))));
+  }, views == null ? void 0 : views.textarea)))));
 };
 
 // Defines the TextAreaComponent as a functional component that accepts TextAreaProps for type safety and structure.
@@ -7539,7 +7484,7 @@ var TextFieldView = _ref => {
       onChangeText,
       shadow = {},
       views = {
-        box: {},
+        container: {},
         field: {},
         label: {},
         helperText: {},
@@ -7739,26 +7684,6 @@ var Sizes = {
   xl: {
     height: '32px',
     width: '32px'
-  },
-  '2xl': {
-    height: '36px',
-    width: '36px'
-  },
-  '3xl': {
-    height: '40px',
-    width: '40px'
-  },
-  '4xl': {
-    height: '44px',
-    width: '44px'
-  },
-  '5xl': {
-    height: '48px',
-    width: '48px'
-  },
-  '6xl': {
-    height: '52px',
-    width: '52px'
   }
 };
 /**
@@ -7770,12 +7695,7 @@ var IconSizes$3 = {
   sm: 14,
   md: 16,
   lg: 20,
-  xl: 24,
-  '2xl': 28,
-  '3xl': 32,
-  '4xl': 36,
-  '5xl': 40,
-  '6xl': 44
+  xl: 24
 };
 /**
  * Variant styles for the Checkbox component
@@ -9571,8 +9491,7 @@ var CountryPickerView = _ref5 => {
         icon: {},
         label: {},
         dropDown: {},
-        helperText: {},
-        box: {}
+        helperText: {}
       },
       themeMode: elementMode
     } = _ref5,
@@ -9720,7 +9639,7 @@ var DatePickerView = _ref => {
       variant = 'default',
       shape = 'default',
       views = {
-        box: {},
+        container: {},
         label: {},
         helperText: {},
         text: {},
@@ -10003,7 +9922,7 @@ var ComboBoxView = _ref => {
       widthHeight: 12
     }),
     views: {
-      box: Object.assign({
+      container: Object.assign({
         width: '100%',
         padding: '6px 12px',
         borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
@@ -10373,14 +10292,7 @@ var OTPInputView = _ref => {
       length = 6,
       helperText,
       placeholder = '',
-      views = {
-        container: {},
-        input: {},
-        box: {},
-        text: {},
-        label: {},
-        helperText: {}
-      },
+      views = {},
       size = 'md',
       shape = 'rounded',
       variant = 'outline',
@@ -10486,7 +10398,7 @@ var OTPInputView = _ref => {
       width: "100%",
       position: "relative",
       height: size === 'xs' ? '32px' : size === 'sm' ? '36px' : size === 'md' ? '40px' : size === 'lg' ? '48px' : '56px'
-    }, views.box), slot.char ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    }, views.container), slot.char ? (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       textAlign: "center",
       fontSize: size === 'xs' ? '14px' : size === 'sm' ? '16px' : size === 'md' ? '18px' : size === 'lg' ? '20px' : '24px',
       fontWeight: "medium"
@@ -12254,23 +12166,19 @@ var OverlayAlignments = {
   },
   top: {
     justifyContent: 'center',
-    alignItems: 'flex-start',
-    paddingTop: '64px'
+    alignItems: 'flex-start'
   },
   right: {
     justifyContent: 'flex-end',
-    alignItems: 'center',
-    paddingRight: '32px'
+    alignItems: 'center'
   },
   bottom: {
     justifyContent: 'center',
-    alignItems: 'flex-end',
-    paddingBottom: '64px'
+    alignItems: 'flex-end'
   },
   left: {
     justifyContent: 'flex-start',
-    alignItems: 'center',
-    paddingLeft: '32px'
+    alignItems: 'center'
   }
 };
 /**
@@ -15173,7 +15081,7 @@ var SeparatorView = _ref => {
       variant = 'solid',
       thickness = 'thin',
       color,
-      spacing = '16px',
+      spacing = '0px',
       label,
       decorative = false,
       views
@@ -15198,7 +15106,7 @@ var SeparatorView = _ref => {
       alignItems: "center",
       justifyContent: "center",
       width: "100%",
-      margin: spacing
+      padding: spacing
     }, ariaProps, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       height: "0px",
       flexGrow: 1,
@@ -15221,7 +15129,7 @@ var SeparatorView = _ref => {
       borderTopWidth: borderWidth,
       borderTopStyle: borderStyle,
       borderTopColor: separatorColor,
-      margin: spacing
+      padding: spacing
     }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
   }
   // For vertical separator
@@ -15231,7 +15139,7 @@ var SeparatorView = _ref => {
     borderLeftWidth: borderWidth,
     borderLeftStyle: borderStyle,
     borderLeftColor: separatorColor,
-    margin: spacing
+    padding: spacing
   }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
 };
 
@@ -15242,6 +15150,7 @@ var SeparatorComponent = props => {
   return /*#__PURE__*/React__default.createElement(SeparatorView, Object.assign({}, props));
 };
 var Separator = SeparatorComponent;
+var Divider = SeparatorComponent;
 
 var useSidebarState = function useSidebarState(defaultExpanded, expanded, onExpandedChange, breakpoint) {
   if (defaultExpanded === void 0) {
@@ -17841,6 +17750,7 @@ exports.CountryPicker = CountryPicker;
 exports.CropIcon = CropIcon;
 exports.DatePicker = DatePicker;
 exports.DeleteIcon = DeleteIcon;
+exports.Divider = Divider;
 exports.DocumentIcon = DocumentIcon;
 exports.DownloadIcon = DownloadIcon;
 exports.DragAndDrop = DragAndDrop;