@app-studio/web 0.9.77 → 0.9.79

package/dist/web.umd.development.js

@@ -1,12 +1,12 @@
 (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('lucide-react/dynamic'), require('core-js/modules/es.array-buffer.constructor.js'), require('core-js/modules/es.array-buffer.slice.js'), require('core-js/modules/es.typed-array.uint8-array.js'), require('core-js/modules/es.typed-array.fill.js'), require('core-js/modules/es.typed-array.set.js'), require('core-js/modules/es.typed-array.sort.js'), require('core-js/modules/es.typed-array.to-locale-string.js'), require('core-js/modules/es.string.starts-with.js'), 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.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.ends-with.js'), require('contrast'), 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('date-fns/format'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/es.string.replace.js'), require('core-js/modules/es.string.split.js'), require('core-js/modules/es.promise.finally.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', 'lucide-react/dynamic', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/es.string.starts-with.js', '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.parse-int.js', 'react-router-dom', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.ends-with.js', 'contrast', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.split.js', 'core-js/modules/es.promise.finally.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, global.dynamic, null, null, null, null, null, null, null, null, null, null, null, global.zustand, null, global.reactRouterDom, null, null, global.contrast, null, null, null, global.format, null, null, null, global.formik));
-}(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, dynamic, es_arrayBuffer_constructor_js, es_arrayBuffer_slice_js, es_typedArray_uint8Array_js, es_typedArray_fill_js, es_typedArray_set_js, es_typedArray_sort_js, es_typedArray_toLocaleString_js, es_string_startsWith_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, es_parseInt_js, reactRouterDom, es_parseFloat_js, es_string_endsWith_js, contrast, es_promise_js, es_array_reduce_js, es_number_toFixed_js, format, es_string_trim_js, es_regexp_constructor_js, es_regexp_exec_js, formik) { '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('lucide-react/dynamic'), require('core-js/modules/es.array-buffer.constructor.js'), require('core-js/modules/es.array-buffer.slice.js'), require('core-js/modules/es.typed-array.uint8-array.js'), require('core-js/modules/es.typed-array.fill.js'), require('core-js/modules/es.typed-array.set.js'), require('core-js/modules/es.typed-array.sort.js'), require('core-js/modules/es.typed-array.to-locale-string.js'), require('core-js/modules/es.string.starts-with.js'), 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.parse-int.js'), require('react-router-dom'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/es.string.ends-with.js'), 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('date-fns/format'), require('core-js/modules/es.string.trim.js'), require('core-js/modules/es.regexp.constructor.js'), require('core-js/modules/es.regexp.exec.js'), require('formik'), require('core-js/modules/es.string.replace.js'), require('core-js/modules/es.string.split.js'), require('contrast'), require('core-js/modules/es.promise.finally.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', 'lucide-react/dynamic', 'core-js/modules/es.array-buffer.constructor.js', 'core-js/modules/es.array-buffer.slice.js', 'core-js/modules/es.typed-array.uint8-array.js', 'core-js/modules/es.typed-array.fill.js', 'core-js/modules/es.typed-array.set.js', 'core-js/modules/es.typed-array.sort.js', 'core-js/modules/es.typed-array.to-locale-string.js', 'core-js/modules/es.string.starts-with.js', '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.parse-int.js', 'react-router-dom', 'core-js/modules/es.parse-float.js', 'core-js/modules/es.string.ends-with.js', 'core-js/modules/es.promise.js', 'core-js/modules/es.array.reduce.js', 'core-js/modules/es.number.to-fixed.js', 'date-fns/format', 'core-js/modules/es.string.trim.js', 'core-js/modules/es.regexp.constructor.js', 'core-js/modules/es.regexp.exec.js', 'formik', 'core-js/modules/es.string.replace.js', 'core-js/modules/es.string.split.js', 'contrast', 'core-js/modules/es.promise.finally.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, global.dynamic, null, null, null, null, null, null, null, null, null, null, null, global.zustand, null, global.reactRouterDom, null, null, null, null, null, global.format, null, null, null, global.formik, null, null, global.contrast));
+}(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, dynamic, es_arrayBuffer_constructor_js, es_arrayBuffer_slice_js, es_typedArray_uint8Array_js, es_typedArray_fill_js, es_typedArray_set_js, es_typedArray_sort_js, es_typedArray_toLocaleString_js, es_string_startsWith_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, es_parseInt_js, reactRouterDom, es_parseFloat_js, es_string_endsWith_js, es_promise_js, es_array_reduce_js, es_number_toFixed_js, format, es_string_trim_js, es_regexp_constructor_js, es_regexp_exec_js, formik, es_string_replace_js, es_string_split_js, contrast) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
-  contrast = contrast && Object.prototype.hasOwnProperty.call(contrast, 'default') ? contrast['default'] : contrast;
   format = format && Object.prototype.hasOwnProperty.call(format, 'default') ? format['default'] : format;
+  contrast = contrast && Object.prototype.hasOwnProperty.call(contrast, 'default') ? contrast['default'] : contrast;
 
   function asyncGeneratorStep(n, t, e, r, o, a, c) {
     try {
@@ -2745,11 +2745,10 @@
       padding: 14
     }
   };
-  var getButtonVariants = function getButtonVariants(color, isLight, reversed) {
+  var getButtonVariants = function getButtonVariants(color, textColor, reversed) {
     if (reversed === void 0) {
       reversed = false;
     }
-    var textColor = isLight ? '#000000' : '#FFFFFF';
     // Determine effective colors based on reversed state
     var effectiveBg = reversed ? textColor : color;
     var effectiveContent = reversed ? color : textColor;
@@ -2876,8 +2875,8 @@
 
   var _excluded$d = ["asComponent", "isDisabled", "isLoading", "isWrapped", "borderRadius", "width", "height", "baseStyles", "sizeStyles", "iconPad", "mainTone", "resolvedTextColor", "children", "borderWidth"],
     _excluded2$3 = ["shape", "isDisabled", "onClick", "shadow", "borderWidth", "isAuto", "isFilled", "views", "children"],
-    _excluded3$2 = ["variant", "animation", "to", "isDisabled", "isLoading", "isAuto", "isFilled", "isExternal", "shape", "shadow", "onClick", "views", "baseStyles", "sizeStyles", "iconPad", "resolvedTextColor", "content", "size", "mainTone", "tone", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor", "getColor"],
-    _excluded4$2 = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "scheme", "reversed", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor"];
+    _excluded3$2 = ["variant", "animation", "to", "isDisabled", "isLoading", "isAuto", "isFilled", "isExternal", "shape", "shadow", "onClick", "views", "baseStyles", "sizeStyles", "iconPad", "resolvedTextColor", "content", "size", "mainTone", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor", "getColor"],
+    _excluded4$2 = ["variant", "size", "shape", "iconPosition", "loaderPosition", "backgroundColor", "color", "textColor", "reversed", "isAuto", "isFilled", "isDisabled", "isLoading", "isIconRounded", "icon", "children", "to", "isExternal", "shadow", "onClick", "views", "borderMovingDuration", "borderMovingGradientColors", "animatedStrokeAccentColor", "animatedStrokeTextColor"];
   // --- Helper: Button Content ---
   // Renders the inner content: Loader, Icon, and Children.
   var ButtonContent = _ref => {
@@ -3237,7 +3236,7 @@
   // --- Main Component ---
   // --- Main Component ---
   var ButtonView = _ref5 => {
-    var _ref6, _ref7, _base$color;
+    var _ref6, _base$color;
     var {
         /* behaviour */
         variant = 'filled',
@@ -3246,13 +3245,13 @@
         iconPosition = 'left',
         loaderPosition = 'left',
         backgroundColor,
-        // primary candidate for main color
+        // Primary override for main color
         color,
-        // 2nd candidate for main color (NOT text‑color)
-        scheme,
-        // New scheme prop
+        // Main button color (theme tokens or color palette)
+        textColor,
+        // Explicit text color
         reversed = false,
-        // New reversed prop
+        // Reverse colors for dark backgrounds
         isAuto = true,
         isFilled,
         isDisabled,
@@ -3277,24 +3276,18 @@
       props = _objectWithoutPropertiesLoose(_ref5, _excluded4$2);
     /* theme helpers */
     var {
-      getColorHex,
-      themeMode
+      getColorHex
     } = appStudio.useTheme();
     /* MAIN COLOR – determines the entire palette */
-    var mainColorKey = (_ref6 = (_ref7 = backgroundColor != null ? backgroundColor : color) != null ? _ref7 : scheme) != null ? _ref6 : 'theme.primary';
+    var mainColorKey = (_ref6 = backgroundColor != null ? backgroundColor : color) != null ? _ref6 : 'theme.primary';
     var mainTone = getColorHex(isDisabled ? 'theme.disabled' : mainColorKey);
-    var tone = contrast(mainTone);
-    /* text color with mixBlendMode for maximum visibility */
-    var textColor;
-    if (tone === 'light') {
-      textColor = '#000000';
-    } else {
-      textColor = '#FFFFFF';
-    }
+    /* text color - explicitly provided or default to white */
+    var resolvedTextColorKey = textColor != null ? textColor : 'color.white';
+    var resolvedTextColor = getColorHex(resolvedTextColorKey);
     /* variant palette */
-    var palette = React.useMemo(() => getButtonVariants(mainTone, tone === 'light', reversed), [mainTone, tone, reversed]);
+    var palette = React.useMemo(() => getButtonVariants(mainTone, resolvedTextColor, reversed), [mainTone, resolvedTextColor, reversed]);
     var base = palette[variant];
-    var resolvedTextColor = (_base$color = base == null ? void 0 : base.color) != null ? _base$color : textColor;
+    var finalContentColor = (_base$color = base == null ? void 0 : base.color) != null ? _base$color : resolvedTextColor;
     // Render content logic safely
     var content = /*#__PURE__*/React__default.createElement(ButtonContent, {
       icon: icon,
@@ -3302,7 +3295,7 @@
       iconPosition: iconPosition,
       loaderPosition: loaderPosition,
       size: size,
-      resolvedTextColor: resolvedTextColor,
+      resolvedTextColor: finalContentColor,
       isIconRounded: isIconRounded,
       views: views
     }, children);
@@ -3325,11 +3318,10 @@
       baseStyles: base,
       sizeStyles: sizeStyles,
       iconPad: iconPad,
-      resolvedTextColor: resolvedTextColor,
+      resolvedTextColor: finalContentColor,
       content: content,
       size: size,
       mainTone: mainTone,
-      tone: tone,
       borderMovingDuration: borderMovingDuration,
       borderMovingGradientColors: borderMovingGradientColors,
       animatedStrokeAccentColor: animatedStrokeAccentColor,
@@ -25593,7 +25585,7 @@
     _excluded7 = ["children", "src", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "imageOpacity", "overlay", "blendMode", "views", "themeMode"],
     _excluded8 = ["children", "src", "autoPlay", "loop", "muted", "playsInline", "overlay", "blendMode", "views", "themeMode"],
     _excluded9 = ["children"],
-    _excluded10 = ["contentPosition"],
+    _excluded10 = ["contentPosition", "backgroundColor"],
     _excluded11 = ["children", "views"],
     _excluded12 = ["children", "designProps", "shape", "decorationRotation", "decorationScale", "decorationOpacity", "views"];
   // Background Context
@@ -26048,23 +26040,34 @@
    */
   var BackgroundOverlay = _ref10 => {
     var {
-        contentPosition
+        contentPosition,
+        backgroundColor = 'color.black.900'
       } = _ref10,
       props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
     var getDefaultOverlay = () => {
+      var ligthBackground = backgroundColor + ".100";
+      var darkBackground = backgroundColor + ".900";
+      var midBackground = backgroundColor + ".600";
+      var midDarkBackground = backgroundColor + ".400";
+      if (backgroundColor.indexOf('.') === -1) {
+        ligthBackground = "color-mix(in srgb, " + backgroundColor + " 10%, transparent)";
+        darkBackground = "color-mix(in srgb, " + backgroundColor + " 90%, transparent)";
+        midBackground = "color-mix(in srgb, " + backgroundColor + " 70%, transparent)";
+        midDarkBackground = "color-mix(in srgb, " + backgroundColor + " 50%, transparent)";
+      }
       switch (contentPosition) {
         case 'left':
-          return 'radial-gradient(circle at 80% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
+          return "radial-gradient(circle at 70% 50%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to right, " + darkBackground + " 0%, " + midBackground + " 65%, " + ligthBackground + " 100%)";
         case 'right':
-          return 'radial-gradient(circle at 20% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
+          return "radial-gradient(circle at 30% 50%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to left, " + darkBackground + " 0%, " + midBackground + " 65%, " + ligthBackground + " 100%)";
         case 'top':
-          return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
+          return "radial-gradient(circle at 50% 40%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to bottom, " + darkBackground + " 0%, " + midBackground + " 60%, " + ligthBackground + " 100%)";
         case 'bottom':
-          return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
+          return "radial-gradient(circle at 50% 60%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to top, " + darkBackground + " 0%, " + midBackground + " 60%, " + ligthBackground + " 100%)";
         case 'center':
-          return 'radial-gradient(circle at 50% 70%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)';
+          return "radial-gradient(circle at 50% 70%, " + darkBackground + " 0%, " + ligthBackground + " 100%)";
         default:
-          return 'rgba(0,0,0,0.5)';
+          return midDarkBackground;
       }
     };
     var background = getDefaultOverlay();