@app-studio/web 0.8.76 → 0.8.78

package/dist/web.esm.js

@@ -5,7 +5,7 @@ import 'core-js/modules/es.array.iterator.js';
 import 'core-js/modules/es.string.includes.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/es.regexp.to-string.js';
-import { View, Horizontal, Vertical, Element, Center, Image, useTheme, Typography, Input, Form, Text as Text$1 } from 'app-studio';
+import { View, Horizontal, Vertical, Element, Center, useTheme, Image, Typography, Input, Form, Text as Text$1 } from 'app-studio';
 import 'core-js/modules/es.symbol.description.js';
 import 'core-js/modules/es.parse-float.js';
 import { Link as Link$1 } from 'react-router-dom';
@@ -22,7 +22,6 @@ import 'core-js/modules/web.url.js';
 import 'core-js/modules/web.url.to-json.js';
 import 'core-js/modules/web.url-search-params.js';
 import { create } from 'zustand';
-import 'src/components/Badge/Badge';
 import 'core-js/modules/es.string.ends-with.js';
 import 'core-js/modules/es.string.match.js';
 import 'core-js/modules/es.string.search.js';
@@ -464,12 +463,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
@@ -479,12 +473,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
@@ -725,9 +714,12 @@ var IconWrapper = _ref => {
 };
 // Utility function to handle fill and stroke based on 'filled' prop
 var getSvgProps = (filled, color, strokeWidth) => {
+  var {
+    getColor
+  } = 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'
@@ -1193,7 +1185,7 @@ var InfoIcon = _ref19 => {
   var {
       widthHeight = 24,
       color = 'currentColor',
-      filled = false,
+      filled = true,
       strokeWidth = 1
     } = _ref19,
     props = _objectWithoutPropertiesLoose(_ref19, _excluded19);
@@ -2937,7 +2929,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.createElement(View, Object.assign({
@@ -3371,12 +3363,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"];
@@ -3628,12 +3615,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 = {
@@ -4748,8 +4730,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%',
@@ -4993,6 +4999,9 @@ var BarChart = _ref => {
     hideTooltip,
     views
   } = _ref;
+  var {
+    getColor
+  } = useTheme();
   // Calculate chart dimensions
   var padding = {
     top: 20,
@@ -5086,7 +5095,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
@@ -5107,6 +5116,9 @@ var LineChart = _ref => {
     views
   } = _ref;
   // Calculate chart dimensions
+  var {
+    getColor
+  } = useTheme();
   var padding = {
     top: 20,
     right: 20,
@@ -5197,11 +5209,11 @@ var LineChart = _ref => {
     key: "series-" + seriesIndex
   }, /*#__PURE__*/React.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.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;
@@ -6244,9 +6256,9 @@ var FieldContainer = _ref => {
     gap: 8,
     position: "relative",
     width: "100%"
-  }, props), children, !error && helperText && (/*#__PURE__*/React.createElement(HelperText, Object.assign({
+  }, props, views == null ? void 0 : views.container), children, !error && helperText && (/*#__PURE__*/React.createElement(HelperText, Object.assign({
     marginTop: 4
-  }, views), helperText)), error && (/*#__PURE__*/React.createElement(Text, {
+  }, views == null ? void 0 : views.helperText), helperText)), error && (/*#__PURE__*/React.createElement(Text, Object.assign({
     size: "xs",
     marginTop: 4,
     marginHorizontal: 0,
@@ -6254,7 +6266,7 @@ var FieldContainer = _ref => {
     ,
     color: "color.red.500",
     transition: "all 0.2s ease"
-  }, error)));
+  }, views == null ? void 0 : views.error), error)));
 };
 
 /**
@@ -7033,26 +7045,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'
   }
 };
 /**
@@ -7079,26 +7071,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'
   }
 };
 /**
@@ -7125,26 +7097,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
   }
 };
 /**
@@ -7357,11 +7309,8 @@ var TextAreaView = _ref => {
       setIsFocused = () => {},
       setIsHovered = () => {},
       views = {
-        box: {},
-        text: {},
         label: {},
-        helperText: {},
-        field: {}
+        helperText: {}
       }
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
@@ -7372,11 +7321,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
@@ -7387,7 +7336,7 @@ var TextAreaView = _ref => {
     },
     // Typography properties
     fontSize: Typography.fontSizes[size],
-    lineHeight: '1.5',
+    lineHeight: Typography.fontSizes[size] * 1.5,
     letterSpacing: '-0.01em',
     // Visual properties
     backgroundColor: 'transparent',
@@ -7395,11 +7344,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 = () => {
@@ -7421,11 +7366,11 @@ var TextAreaView = _ref => {
       if (onChange) onChange(event.target.value);
     }
   };
-  return /*#__PURE__*/React.createElement(FieldContainer, {
+  return /*#__PURE__*/React.createElement(FieldContainer, Object.assign({
     helperText: helperText,
     error: error,
     views: views
-  }, /*#__PURE__*/React.createElement(FieldContent, {
+  }, props), /*#__PURE__*/React.createElement(FieldContent, Object.assign({
     label: label,
     size: size,
     error: error,
@@ -7442,11 +7387,11 @@ var TextAreaView = _ref => {
     showLabel: showLabel,
     onMouseEnter: handleHover,
     onMouseLeave: handleHover
-  }, /*#__PURE__*/React.createElement(FieldWrapper, null, showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
+  }, views == null ? void 0 : views.content), /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({}, views == null ? void 0 : views.warper), showLabel && (/*#__PURE__*/React.createElement(FieldLabel, Object.assign({
     htmlFor: id,
     color: 'theme.primary',
     error: error
-  }, views), label)), /*#__PURE__*/React.createElement(Element, Object.assign({
+  }, views == null ? void 0 : views.label), label)), /*#__PURE__*/React.createElement(Element, Object.assign({
     as: "textarea",
     id: id,
     name: name,
@@ -7461,10 +7406,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.
@@ -7532,7 +7477,7 @@ var TextFieldView = _ref => {
       onChangeText,
       shadow = {},
       views = {
-        box: {},
+        container: {},
         field: {},
         label: {},
         helperText: {},
@@ -7732,26 +7677,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'
   }
 };
 /**
@@ -7763,12 +7688,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
@@ -9564,8 +9484,7 @@ var CountryPickerView = _ref5 => {
         icon: {},
         label: {},
         dropDown: {},
-        helperText: {},
-        box: {}
+        helperText: {}
       },
       themeMode: elementMode
     } = _ref5,
@@ -9713,7 +9632,7 @@ var DatePickerView = _ref => {
       variant = 'default',
       shape = 'default',
       views = {
-        box: {},
+        container: {},
         label: {},
         helperText: {},
         text: {},
@@ -9996,7 +9915,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'
@@ -10366,14 +10285,7 @@ var OTPInputView = _ref => {
       length = 6,
       helperText,
       placeholder = '',
-      views = {
-        container: {},
-        input: {},
-        box: {},
-        text: {},
-        label: {},
-        helperText: {}
-      },
+      views = {},
       size = 'md',
       shape = 'rounded',
       variant = 'outline',
@@ -10479,7 +10391,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.createElement(View, Object.assign({
+    }, views.container), slot.char ? (/*#__PURE__*/React.createElement(View, Object.assign({
       textAlign: "center",
       fontSize: size === 'xs' ? '14px' : size === 'sm' ? '16px' : size === 'md' ? '18px' : size === 'lg' ? '20px' : '24px',
       fontWeight: "medium"
@@ -12247,23 +12159,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'
   }
 };
 /**
@@ -15166,7 +15074,7 @@ var SeparatorView = _ref => {
       variant = 'solid',
       thickness = 'thin',
       color,
-      spacing = '16px',
+      spacing = '0px',
       label,
       decorative = false,
       views
@@ -15191,7 +15099,7 @@ var SeparatorView = _ref => {
       alignItems: "center",
       justifyContent: "center",
       width: "100%",
-      margin: spacing
+      padding: spacing
     }, ariaProps, props), /*#__PURE__*/React.createElement(View, Object.assign({
       height: "0px",
       flexGrow: 1,
@@ -15214,7 +15122,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
@@ -15224,7 +15132,7 @@ var SeparatorView = _ref => {
     borderLeftWidth: borderWidth,
     borderLeftStyle: borderStyle,
     borderLeftColor: separatorColor,
-    margin: spacing
+    padding: spacing
   }, DefaultSeparatorStyles.container, ariaProps, views == null ? void 0 : views.container, props));
 };
 
@@ -15235,6 +15143,7 @@ var SeparatorComponent = props => {
   return /*#__PURE__*/React.createElement(SeparatorView, Object.assign({}, props));
 };
 var Separator = SeparatorComponent;
+var Divider = SeparatorComponent;
 
 var useSidebarState = function useSidebarState(defaultExpanded, expanded, onExpandedChange, breakpoint) {
   if (defaultExpanded === void 0) {
@@ -17803,5 +17712,5 @@ var Tooltip = TooltipComponent;
 Tooltip.Trigger = TooltipTrigger;
 Tooltip.Content = TooltipContent;
 
-export { Accordion, Alert, ArrowIcon, AspectRatio, Avatar, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ComboBox, Command, ContextMenu, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DropdownMenu, DustBinIcon, EditIcon, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTextArea, FormikTextField, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, LikeIcon, Link, LinkedinIcon, Loader, LocationIcon, LockIcon, MagicWandIcon, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PrintIcon, ProfileIcon, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, Separator, SettingsIcon, ShapeIcon, ShareIcon, Sidebar, Slider, SliderIcon, SliderVerticalIcon, SpinnerIcon, StarIcon, SuccessIcon, Switch, Table, Tabs, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Toast, Toggle, ToggleGroup, Tooltip, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, useMessageStore, useModalStore, useToast$1 as useToast };
+export { Accordion, Alert, ArrowIcon, AspectRatio, Avatar, Badge, BatteryIcon, BluetoothIcon, BoldArrowIcon, BookmarkIcon, Button, CalendarIcon, CameraIcon, Card, Carousel, Chart, ChartIcon, Checkbox, ChevronIcon, ClockIcon, CloseEyeIcon, CloseIcon, CloudIcon, ComboBox, Command, ContextMenu, CopyIcon, CountryPicker, CropIcon, DatePicker, DeleteIcon, Divider, DocumentIcon, DownloadIcon, DragAndDrop, DragAndDropComponent, DragHandleIcon, DropdownMenu, DustBinIcon, EditIcon, ErrorIcon, ExternalLinkIcon, FacebookIcon, FileIcon, FileImage, FileSVG, FilterIcon, FormikCheckbox, FormikComboBox, FormikCountryPicker, FormikDatePicker, FormikForm, FormikOTPInput, FormikPassword, FormikSelect, FormikSlider, FormikSwitch, FormikTextArea, FormikTextField, HeartIcon, HelpIcon, HomeIcon, HoverCard, Icon, ImageIcon, InfoIcon, InstagramIcon, LikeIcon, Link, LinkedinIcon, Loader, LocationIcon, LockIcon, MagicWandIcon, MenuIcon, Menubar, MessageLayout, MessageView, MicrophoneIcon, MinusIcon, Modal, MoonIcon, NavigationMenu, NotificationIcon, OTPInput, OpenEyeIcon, Pagination, PanelIcon, Password, PauseIcon, PlayIcon, PlusIcon, PrintIcon, ProfileIcon, RefreshIcon, Resizable, RotateIcon, SaveIcon, SearchIcon, Select, Separator, SettingsIcon, ShapeIcon, ShareIcon, Sidebar, Slider, SliderIcon, SliderVerticalIcon, SpinnerIcon, StarIcon, SuccessIcon, Switch, Table, Tabs, Text, TextArea, TextField, TextIcon, ThreadsIcon, TickIcon, Toast, Toggle, ToggleGroup, Tooltip, TwitchIcon, TwitterIcon, UnLikeIcon, UnlockIcon, UploadIcon, Uploader, UserIcon, VideoIcon, WarningIcon, WifiIcon, XIcon, YoutubeIcon, ZoomInIcon, ZoomOutIcon, hideMessage, hideModal, showMessage, showModal, useMessageStore, useModalStore, useToast$1 as useToast };
 //# sourceMappingURL=web.esm.js.map