@app-studio/web 0.8.76 → 0.8.78

package/dist/web.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('react-router-dom'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), 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'), 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'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'react-router-dom', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'src/components/Badge/Badge', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, global.reactRouterDom, null, null, null, null, global.format, null, null, null, global.formik, null, null, null, global.zustand, global.Badge$1));
-}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, reactRouterDom, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_startsWith_js, format, es_parseInt_js, es_regexp_constructor_js, es_regexp_exec_js, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, Badge$1) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.object.assign.js'), require('react'), require('core-js/modules/es.array.includes.js'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.regexp.to-string.js'), require('app-studio'), require('core-js/modules/es.symbol.description.js'), require('core-js/modules/es.parse-float.js'), require('react-router-dom'), require('core-js/modules/es.promise.js'), require('core-js/modules/es.array.reduce.js'), require('core-js/modules/es.number.to-fixed.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('core-js/modules/es.parse-int.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), 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'), require('zustand'), 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'), require('core-js/modules/es.array.flat-map.js'), require('core-js/modules/es.array.unscopables.flat-map.js')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.object.assign.js', 'react', 'core-js/modules/es.array.includes.js', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.string.includes.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.regexp.to-string.js', 'app-studio', 'core-js/modules/es.symbol.description.js', 'core-js/modules/es.parse-float.js', 'react-router-dom', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'core-js/modules/es.parse-int.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/web.url.js', 'core-js/modules/web.url.to-json.js', 'core-js/modules/web.url-search-params.js', 'zustand', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.string.match.js', 'core-js/modules/es.string.search.js', 'core-js/modules/es.array.flat-map.js', 'core-js/modules/es.array.unscopables.flat-map.js'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, null, null, null, null, global.appStudio, null, null, global.reactRouterDom, null, null, null, null, global.format, null, null, null, global.formik, null, null, null, global.zustand));
+}(this, (function (exports, es_object_assign_js, React, es_array_includes_js, es_array_iterator_js, es_string_includes_js, web_domCollections_iterator_js, es_regexp_toString_js, appStudio, es_symbol_description_js, es_parseFloat_js, reactRouterDom, es_promise_js, es_array_reduce_js, es_number_toFixed_js, es_string_startsWith_js, format, es_parseInt_js, es_regexp_constructor_js, es_regexp_exec_js, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   format = format && Object.prototype.hasOwnProperty.call(format, 'default') ? format['default'] : format;
@@ -442,12 +442,7 @@
     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
@@ -457,12 +452,7 @@
     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
@@ -703,9 +693,12 @@
   };
   // 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'
@@ -1171,7 +1164,7 @@
     var {
         widthHeight = 24,
         color = 'currentColor',
-        filled = false,
+        filled = true,
         strokeWidth = 1
       } = _ref19,
       props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
@@ -2915,7 +2908,7 @@
       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({
@@ -3349,12 +3342,7 @@
     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"];
@@ -3606,12 +3594,7 @@
     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 = {
@@ -4726,8 +4709,32 @@
   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%',
@@ -4971,6 +4978,9 @@
       hideTooltip,
       views
     } = _ref;
+    var {
+      getColor
+    } = appStudio.useTheme();
     // Calculate chart dimensions
     var padding = {
       top: 20,
@@ -5064,7 +5074,7 @@
         y: y,
         width: barWidth,
         height: barHeight,
-        fill: series.color,
+        fill: series.color ? getColor(series.color) : 'black',
         onMouseEnter: handleMouseEnter,
         onMouseLeave: hideTooltip,
         onClick: handleClick
@@ -5085,6 +5095,9 @@
       views
     } = _ref;
     // Calculate chart dimensions
+    var {
+      getColor
+    } = appStudio.useTheme();
     var padding = {
       top: 20,
       right: 20,
@@ -5175,11 +5188,11 @@
       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;
@@ -6222,9 +6235,9 @@
       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,
@@ -6232,7 +6245,7 @@
       ,
       color: "color.red.500",
       transition: "all 0.2s ease"
-    }, error)));
+    }, views == null ? void 0 : views.error), error)));
   };
 
   /**
@@ -7011,26 +7024,6 @@
     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'
     }
   };
   /**
@@ -7057,26 +7050,6 @@
     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'
     }
   };
   /**
@@ -7103,26 +7076,6 @@
     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
     }
   };
   /**
@@ -7335,11 +7288,8 @@
         setIsFocused = () => {},
         setIsHovered = () => {},
         views = {
-          box: {},
-          text: {},
           label: {},
-          helperText: {},
-          field: {}
+          helperText: {}
         }
       } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
@@ -7350,11 +7300,11 @@
     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
@@ -7365,7 +7315,7 @@
       },
       // Typography properties
       fontSize: appStudio.Typography.fontSizes[size],
-      lineHeight: '1.5',
+      lineHeight: appStudio.Typography.fontSizes[size] * 1.5,
       letterSpacing: '-0.01em',
       // Visual properties
       backgroundColor: 'transparent',
@@ -7373,11 +7323,7 @@
       // 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 = () => {
@@ -7399,11 +7345,11 @@
         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,
@@ -7420,11 +7366,11 @@
       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,
@@ -7439,10 +7385,10 @@
       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.
@@ -7510,7 +7456,7 @@
         onChangeText,
         shadow = {},
         views = {
-          box: {},
+          container: {},
           field: {},
           label: {},
           helperText: {},
@@ -7710,26 +7656,6 @@
     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'
     }
   };
   /**
@@ -7741,12 +7667,7 @@
     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
@@ -9542,8 +9463,7 @@
           icon: {},
           label: {},
           dropDown: {},
-          helperText: {},
-          box: {}
+          helperText: {}
         },
         themeMode: elementMode
       } = _ref5,
@@ -9691,7 +9611,7 @@
         variant = 'default',
         shape = 'default',
         views = {
-          box: {},
+          container: {},
           label: {},
           helperText: {},
           text: {},
@@ -9974,7 +9894,7 @@
         widthHeight: 12
       }),
       views: {
-        box: Object.assign({
+        container: Object.assign({
           width: '100%',
           padding: '6px 12px',
           borderBottom: filteredItems.length > 0 ? '1px solid #ccc' : '1px solid transparent'
@@ -10344,14 +10264,7 @@
         length = 6,
         helperText,
         placeholder = '',
-        views = {
-          container: {},
-          input: {},
-          box: {},
-          text: {},
-          label: {},
-          helperText: {}
-        },
+        views = {},
         size = 'md',
         shape = 'rounded',
         variant = 'outline',
@@ -10457,7 +10370,7 @@
         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"
@@ -12225,23 +12138,19 @@
     },
     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'
     }
   };
   /**
@@ -15144,7 +15053,7 @@
         variant = 'solid',
         thickness = 'thin',
         color,
-        spacing = '16px',
+        spacing = '0px',
         label,
         decorative = false,
         views
@@ -15169,7 +15078,7 @@
         alignItems: "center",
         justifyContent: "center",
         width: "100%",
-        margin: spacing
+        padding: spacing
       }, ariaProps, props), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
         height: "0px",
         flexGrow: 1,
@@ -15192,7 +15101,7 @@
         borderTopWidth: borderWidth,
         borderTopStyle: borderStyle,
         borderTopColor: separatorColor,
-        margin: spacing
+        padding: spacing
       }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
     }
     // For vertical separator
@@ -15202,7 +15111,7 @@
       borderLeftWidth: borderWidth,
       borderLeftStyle: borderStyle,
       borderLeftColor: separatorColor,
-      margin: spacing
+      padding: spacing
     }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
   };
 
@@ -15213,6 +15122,7 @@
     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) {
@@ -17812,6 +17722,7 @@
   exports.CropIcon = CropIcon;
   exports.DatePicker = DatePicker;
   exports.DeleteIcon = DeleteIcon;
+  exports.Divider = Divider;
   exports.DocumentIcon = DocumentIcon;
   exports.DownloadIcon = DownloadIcon;
   exports.DragAndDrop = DragAndDrop;