@app-studio/web 0.8.76 → 0.8.77

package/dist/web.esm.js

@@ -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';
@@ -4748,8 +4747,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 +5016,9 @@ var BarChart = _ref => {
     hideTooltip,
     views
   } = _ref;
+  var {
+    getColor
+  } = useTheme();
   // Calculate chart dimensions
   var padding = {
     top: 20,
@@ -5086,7 +5112,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 +5133,9 @@ var LineChart = _ref => {
     views
   } = _ref;
   // Calculate chart dimensions
+  var {
+    getColor
+  } = useTheme();
   var padding = {
     top: 20,
     right: 20,
@@ -5197,11 +5226,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;
@@ -15235,6 +15264,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 +17833,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