@app-studio/web 0.8.71 → 0.8.73

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.symbol.description.js'), require('react'), require('core-js/modules/es.object.assign.js'), require('app-studio'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.array.includes.js'), require('react-router-dom'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), 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/Layout')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.symbol.description.js', 'react', 'core-js/modules/es.object.assign.js', 'app-studio', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.array.includes.js', 'react-router-dom', 'core-js/modules/es.string.includes.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', '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/Layout'], factory) :
-  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, global.appStudio, null, null, null, null, global.reactRouterDom, null, null, global.format, global.formik, null, null, null, global.zustand, global.Layout));
-}(this, (function (exports, es_symbol_description_js, React, es_object_assign_js, appStudio, es_array_iterator_js, es_parseFloat_js, web_domCollections_iterator_js, es_array_includes_js, reactRouterDom, es_string_includes_js, es_string_startsWith_js, format, formik, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, Layout) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('core-js/modules/es.symbol.description.js'), require('react'), require('core-js/modules/es.object.assign.js'), require('app-studio'), require('core-js/modules/es.array.iterator.js'), require('core-js/modules/es.parse-float.js'), require('core-js/modules/web.dom-collections.iterator.js'), require('core-js/modules/es.array.includes.js'), require('react-router-dom'), require('core-js/modules/es.string.includes.js'), require('core-js/modules/es.string.starts-with.js'), require('date-fns/format'), require('formik'), require('core-js/modules/es.number.to-fixed.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('src/components/Layout')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'core-js/modules/es.symbol.description.js', 'react', 'core-js/modules/es.object.assign.js', 'app-studio', 'core-js/modules/es.array.iterator.js', 'core-js/modules/es.parse-float.js', 'core-js/modules/web.dom-collections.iterator.js', 'core-js/modules/es.array.includes.js', 'react-router-dom', 'core-js/modules/es.string.includes.js', 'core-js/modules/es.string.starts-with.js', 'date-fns/format', 'formik', 'core-js/modules/es.number.to-fixed.js', '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/Layout'], factory) :
+  (global = global || self, factory(global['@app-studio/web'] = {}, null, global.React, null, global.appStudio, null, null, null, null, global.reactRouterDom, null, null, global.format, global.formik, null, null, null, null, global.zustand, global.Layout));
+}(this, (function (exports, es_symbol_description_js, React, es_object_assign_js, appStudio, es_array_iterator_js, es_parseFloat_js, web_domCollections_iterator_js, es_array_includes_js, reactRouterDom, es_string_includes_js, es_string_startsWith_js, format, formik, es_number_toFixed_js, web_url_js, web_url_toJson_js, web_urlSearchParams_js, zustand, Layout) { 'use strict';
 
   var React__default = 'default' in React ? React['default'] : React;
   format = format && Object.prototype.hasOwnProperty.call(format, 'default') ? format['default'] : format;
@@ -706,7 +706,7 @@
       d: "M0 0h24v24H0z",
       fill: "none"
     }), /*#__PURE__*/React__default.createElement("path", {
-      d: "M19 7.5c-1.333 -3 -3.667 -4.5 -7 -4.5c-5 0 -8 2.5 -8 9s3.5 9 8 9s7 -3 7\n                                    -5s-1 -5 -7 -5c-2.5 0 -3 1.25 -3 2.5c0 1.5 1 2.5 2.5 2.5c2.5 0 3.5 -1.5 \n                                    3.5 -5s-2 -4 -3 -4s-1.833 .333 -2.5 1"
+      d: "M19 7.5c-1.333 -3 -3.667 -4.5 -7 -4.5c-5 0 -8 2.5 -8 9s3.5 9 8 9s7 -3 7\n                                    -5s-1 -5 -7 -5c-2.5 0 -3 1.25 -3 2.5c0 1.5 1 2.5 2.5 2.5c2.5 0 3.5 -1.5\n                                    3.5 -5s-2 -4 -3 -4s-1.833 .333 -2.5 1"
     })));
   };
   // Example Refactored Icon: MinusIcon without undefined 'padding' prop
@@ -1392,7 +1392,9 @@
       viewBox: "0 0 24 24",
       "aria-hidden": "false",
       focusable: "false"
-    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
+    }, getSvgProps(filled, color, strokeWidth)), filled ? (/*#__PURE__*/React__default.createElement("path", {
+      d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"
+    })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("rect", {
       x: "3",
       y: "11",
       width: "18",
@@ -1401,7 +1403,11 @@
       ry: "2"
     }), /*#__PURE__*/React__default.createElement("path", {
       d: "M7 11V7a5 5 0 0 1 10 0v4"
-    })));
+    }), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "12",
+      cy: "16",
+      r: "1.5"
+    })))));
   };
   var MicrophoneIcon = _ref43 => {
     var {
@@ -1671,7 +1677,9 @@
       viewBox: "0 0 24 24",
       "aria-hidden": "false",
       focusable: "false"
-    }, getSvgProps(filled, color, strokeWidth)), /*#__PURE__*/React__default.createElement("rect", {
+    }, getSvgProps(filled, color, strokeWidth)), filled ? (/*#__PURE__*/React__default.createElement("path", {
+      d: "M12 17c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm6-9h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h1.9c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2z"
+    })) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("rect", {
       x: "3",
       y: "11",
       width: "18",
@@ -1680,7 +1688,11 @@
       ry: "2"
     }), /*#__PURE__*/React__default.createElement("path", {
       d: "M7 11V7a5 5 0 0 1 9.9-1"
-    })));
+    }), /*#__PURE__*/React__default.createElement("circle", {
+      cx: "12",
+      cy: "16",
+      r: "1.5"
+    })))));
   };
   var WifiIcon = _ref56 => {
     var {
@@ -3113,6 +3125,7 @@
     return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
       gap: 8,
       as: "button",
+      type: "button",
       border: "none",
       color: "color.white",
       display: "flex",
@@ -6973,6 +6986,540 @@
    */
   var FormikComboBox = ComboBoxComponent$1;
 
+  // Clamp value between min and max
+  var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+  // Calculate value based on position, track dimensions, min, max, step
+  var calculateValue = (position, trackRect, min, max, step, orientation, stepValues) => {
+    var range = max - min;
+    var percentage;
+    if (orientation === 'horizontal') {
+      var trackLength = trackRect.width;
+      var relativePosition = position - trackRect.left;
+      percentage = clamp(relativePosition / trackLength, 0, 1);
+    } else {
+      // Vertical: top is max, bottom is min (reversed from the provided code)
+      var _trackLength = trackRect.height;
+      var _relativePosition = trackRect.bottom - position; // Y position relative to track bottom
+      percentage = clamp(_relativePosition / _trackLength, 0, 1);
+    }
+    // If stepValues are provided, find the closest value in the array
+    if (stepValues && stepValues.length > 0) {
+      var rawValue = min + percentage * range;
+      // Find the closest value in stepValues
+      var closestValue = stepValues[0];
+      var minDistance = Math.abs(rawValue - closestValue);
+      for (var i = 1; i < stepValues.length; i++) {
+        var distance = Math.abs(rawValue - stepValues[i]);
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestValue = stepValues[i];
+        }
+      }
+      return closestValue;
+    } else {
+      // Use regular step logic
+      var _rawValue = min + percentage * range;
+      var steppedValue = Math.round(_rawValue / step) * step;
+      // Final clamp to ensure step rounding doesn't exceed bounds
+      return clamp(steppedValue, min, max);
+    }
+  };
+  var useSliderState = _ref => {
+    var _ref2;
+    var {
+      min = 0,
+      max = 100,
+      step = 1,
+      value: controlledValue = 0,
+      defaultValue,
+      onChange,
+      onDrag,
+      orientation = 'horizontal',
+      isDisabled = false,
+      stepValues
+    } = _ref;
+    var initialValue = clamp((_ref2 = controlledValue != null ? controlledValue : defaultValue) != null ? _ref2 : min, min, max);
+    var [internalValue, setInternalValue] = React.useState(initialValue);
+    var [isDragging, setIsDragging] = React.useState(false);
+    var [isHovered, setIsHovered] = React.useState(false);
+    var trackRef = React.useRef(null);
+    var thumbRef = React.useRef(null);
+    var isControlled = controlledValue !== undefined;
+    var currentValue = isControlled ? controlledValue : internalValue;
+    // Update internal state if controlled value changes
+    React.useEffect(() => {
+      if (isControlled) {
+        setInternalValue(clamp(controlledValue, min, max));
+      }
+    }, [controlledValue, isControlled, min, max]);
+    var updateValue = React.useCallback(newValue => {
+      var clampedValue = clamp(newValue, min, max);
+      if (!isControlled) {
+        setInternalValue(clampedValue);
+      }
+      if (onChange && clampedValue !== currentValue) {
+        onChange(clampedValue);
+      }
+      if (isDragging && onDrag) {
+        onDrag(clampedValue);
+      }
+    }, [isControlled, min, max, onChange, currentValue, isDragging, onDrag]);
+    var handleInteraction = React.useCallback(event => {
+      if (isDisabled || !trackRef.current) return;
+      var trackRect = trackRef.current.getBoundingClientRect();
+      var position;
+      if ('touches' in event) {
+        position = orientation === 'horizontal' ? event.touches[0].clientX : event.touches[0].clientY;
+      } else {
+        position = orientation === 'horizontal' ? event.clientX : event.clientY;
+      }
+      var newValue = calculateValue(position, trackRect, min, max, step, orientation, stepValues);
+      updateValue(newValue);
+    }, [min, max, step, orientation, updateValue, isDisabled, stepValues]);
+    var handleMouseDown = React.useCallback(event => {
+      if (isDisabled) return;
+      event.preventDefault(); // Prevent text selection during drag
+      setIsDragging(true);
+      handleInteraction(event); // Update value immediately on click/touch
+      var handleMouseMove = moveEvent => {
+        handleInteraction(moveEvent);
+      };
+      var handleMouseUp = () => {
+        setIsDragging(false);
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener('touchmove', handleMouseMove);
+        document.removeEventListener('touchend', handleMouseUp);
+      };
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener('touchmove', handleMouseMove);
+      document.addEventListener('touchend', handleMouseUp);
+    }, [handleInteraction, isDisabled]);
+    // Allow clicking directly on the track
+    var handleTrackMouseDown = React.useCallback(event => {
+      // Prevent triggering if click is on the thumb itself
+      if (thumbRef.current && thumbRef.current.contains(event.target)) {
+        return;
+      }
+      handleMouseDown(event);
+    }, [handleMouseDown]);
+    var handleKeyDown = React.useCallback(event => {
+      if (isDisabled) return;
+      var newValue = currentValue;
+      switch (event.key) {
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          newValue = currentValue - step;
+          break;
+        case 'ArrowRight':
+        case 'ArrowUp':
+          newValue = currentValue + step;
+          break;
+        case 'Home':
+          newValue = min;
+          break;
+        case 'End':
+          newValue = max;
+          break;
+        default:
+          return;
+        // Exit if key is not handled
+      }
+      event.preventDefault(); // Prevent page scroll
+      updateValue(newValue);
+    }, [currentValue, min, max, step, updateValue, isDisabled]);
+    var range = max - min;
+    var thumbPositionPercent = range === 0 ? 0 : (currentValue - min) / range * 100;
+    return {
+      currentValue,
+      isDragging,
+      isHovered,
+      setIsHovered,
+      trackRef,
+      thumbRef,
+      handleThumbMouseDown: handleMouseDown,
+      handleTrackMouseDown,
+      handleKeyDown,
+      thumbPositionPercent
+    };
+  };
+
+  var SliderSizes$1 = {
+    xs: {
+      height: 4,
+      width: '100%'
+    },
+    sm: {
+      height: 6,
+      width: '100%'
+    },
+    md: {
+      height: 8,
+      width: '100%'
+    },
+    lg: {
+      height: 10,
+      width: '100%'
+    },
+    xl: {
+      height: 12,
+      width: '100%'
+    }
+  };
+  var ThumbSizes = {
+    xs: {
+      width: 12,
+      height: 12
+    },
+    sm: {
+      width: 16,
+      height: 16
+    },
+    md: {
+      width: 20,
+      height: 20
+    },
+    lg: {
+      width: 24,
+      height: 24
+    },
+    xl: {
+      width: 28,
+      height: 28
+    }
+  };
+  var SliderShapes = {
+    sharp: 0,
+    rounded: 4,
+    pillShaped: 24
+  };
+  var SliderVariants = {
+    default: {
+      backgroundColor: 'color.blueGray.200'
+    },
+    outline: {
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'color.blueGray.300'
+    }
+  };
+  // Maps Size enum to track height/width and thumb size for the new implementation
+  var EnhancedSliderSizes = {
+    xs: {
+      trackCrossAxisSize: 4,
+      thumbSize: 12
+    },
+    sm: {
+      trackCrossAxisSize: 6,
+      thumbSize: 16
+    },
+    md: {
+      trackCrossAxisSize: 8,
+      thumbSize: 20
+    },
+    lg: {
+      trackCrossAxisSize: 10,
+      thumbSize: 24
+    },
+    xl: {
+      trackCrossAxisSize: 12,
+      thumbSize: 28
+    }
+  };
+  // Basic styles for horizontal and vertical orientation
+  var OrientationStyles = {
+    horizontal: {
+      width: '100%',
+      minWidth: '120px',
+      height: 'auto',
+      flexDirection: 'row',
+      paddingVertical: 8
+    },
+    vertical: {
+      height: '100%',
+      minHeight: '120px',
+      width: 'auto',
+      flexDirection: 'column-reverse',
+      paddingHorizontal: 8
+    }
+  };
+
+  var _excluded$y = ["min", "max", "step", "currentValue", "stepValues", "shape", "size", "variant", "orientation", "isDisabled", "showValue", "showTooltip", "colorScheme", "label", "helperText", "themeMode", "shadow", "isDragging", "isHovered", "setIsHovered", "trackRef", "thumbRef", "handleThumbMouseDown", "handleTrackMouseDown", "handleKeyDown", "thumbPositionPercent", "ariaLabel", "views"];
+  var SliderView = _ref => {
+    var _views$tooltip, _views$tooltip2;
+    var {
+        min = 0,
+        max = 100,
+        step = 1,
+        currentValue,
+        stepValues,
+        shape = 'rounded',
+        size = 'md',
+        variant = 'default',
+        orientation = 'horizontal',
+        isDisabled = false,
+        showValue = false,
+        showTooltip = false,
+        colorScheme = 'theme.primary',
+        label,
+        helperText,
+        themeMode: elementMode,
+        shadow = {},
+        isDragging,
+        isHovered,
+        setIsHovered,
+        trackRef,
+        thumbRef,
+        handleThumbMouseDown,
+        handleTrackMouseDown,
+        handleKeyDown,
+        thumbPositionPercent,
+        ariaLabel = 'Slider',
+        views = {
+          container: {},
+          track: {},
+          progress: {},
+          filledTrack: {},
+          thumb: {},
+          label: {},
+          valueLabel: {},
+          stepMarks: {},
+          tooltip: {}
+        }
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    var {
+      getColor,
+      themeMode
+    } = appStudio.useTheme();
+    var themeColor = getColor(colorScheme, elementMode || themeMode);
+    var disabledColor = getColor('theme.disabled', elementMode || themeMode);
+    var trackColor = getColor(SliderVariants[variant].backgroundColor, elementMode || themeMode);
+    var isVertical = orientation === 'vertical';
+    var {
+      trackCrossAxisSize,
+      thumbSize
+    } = EnhancedSliderSizes[size] || {
+      trackCrossAxisSize: SliderSizes$1[size].height,
+      thumbSize: ThumbSizes[size].width || 16
+    };
+    // For backward compatibility with the old implementation
+    var legacyView = /*#__PURE__*/React__default.createElement(Vertical, Object.assign({
+      width: "100%",
+      gap: 8
+    }, views.container, props), label && (/*#__PURE__*/React__default.createElement(Horizontal, {
+      justifyContent: "space-between",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      fontSize: 14,
+      fontWeight: 500
+    }, views.label), label), showValue && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      fontSize: 14,
+      color: "color.blueGray.500"
+    }, views.valueLabel), currentValue)))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      ref: trackRef,
+      position: "relative",
+      cursor: isDisabled ? 'not-allowed' : 'pointer',
+      opacity: isDisabled ? 0.6 : 1,
+      onMouseDown: handleTrackMouseDown,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
+    }, SliderSizes$1[size], {
+      borderRadius: SliderShapes[shape],
+      backgroundColor: trackColor
+    }, SliderVariants[variant], shadow, views.track), stepValues && stepValues.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, stepValues.map(stepValue => {
+      var stepPercentage = (stepValue - min) / (max - min) * 100;
+      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        key: stepValue,
+        position: "absolute",
+        top: "50%",
+        left: stepPercentage + "%",
+        transform: "translate(-50%, -50%)",
+        width: 4,
+        height: 4,
+        borderRadius: "50%",
+        backgroundColor: isDisabled ? disabledColor : themeColor,
+        zIndex: 1
+      }, views.stepMarks));
+    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: "100%",
+      width: thumbPositionPercent + "%",
+      backgroundColor: isDisabled ? disabledColor : themeColor,
+      borderRadius: SliderShapes[shape],
+      transition: "width 0.1s ease-in-out"
+    }, views.progress, views.filledTrack)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      ref: thumbRef,
+      role: "slider",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": currentValue,
+      "aria-orientation": orientation,
+      "aria-disabled": isDisabled,
+      "aria-label": ariaLabel,
+      position: "absolute",
+      top: "50%",
+      left: thumbPositionPercent + "%",
+      borderRadius: "50%",
+      backgroundColor: "white",
+      boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
+      border: "2px solid " + (isDisabled ? disabledColor : themeColor),
+      transition: isDragging ? 'none' : 'transform 0.1s ease-in-out',
+      transform: isHovered ? 'translate(-50%, -50%) scale(1.1)' : 'translate(-50%, -50%)',
+      zIndex: 2,
+      onMouseDown: handleThumbMouseDown,
+      onTouchStart: handleThumbMouseDown,
+      onKeyDown: handleKeyDown
+    }, ThumbSizes[size], views.thumb), showTooltip && (isHovered || isDragging) && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "absolute",
+      bottom: "100%",
+      left: "50%",
+      transform: "translateX(-50%)",
+      marginBottom: 8,
+      padding: "4px 8px",
+      backgroundColor: "color.black",
+      color: "color.white",
+      borderRadius: 4,
+      fontSize: 12,
+      whiteSpace: "nowrap",
+      zIndex: 3
+    }, views.tooltip), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, (_views$tooltip = views.tooltip) == null ? void 0 : _views$tooltip.text), currentValue == null ? void 0 : currentValue.toFixed(step < 1 ? 1 : 0)))))), helperText && /*#__PURE__*/React__default.createElement(HelperText, null, helperText));
+    // Enhanced view with vertical support and other features
+    var enhancedView = /*#__PURE__*/React__default.createElement(Center
+    // Use Center to easily manage orientation layout
+    , Object.assign({}, OrientationStyles[orientation], {
+      position: "relative" // Needed for absolute positioning of thumb/tooltip
+      ,
+      onMouseEnter: () => !isDisabled && setIsHovered(true),
+      onMouseLeave: () => !isDisabled && setIsHovered(false)
+    }, props, views == null ? void 0 : views.container), label && (/*#__PURE__*/React__default.createElement(Horizontal, {
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginBottom: 8,
+      width: "100%"
+    }, /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      fontSize: 14,
+      fontWeight: 500
+    }, views.label), label), showValue && (/*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({
+      fontSize: 14,
+      color: "color.blueGray.500"
+    }, views.valueLabel), currentValue)))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      ref: trackRef,
+      position: "relative",
+      borderRadius: trackCrossAxisSize / 2,
+      backgroundColor: isDisabled ? disabledColor : trackColor,
+      cursor: isDisabled ? 'not-allowed' : 'pointer',
+      width: isVertical ? trackCrossAxisSize + "px" : '100%',
+      height: isVertical ? '100%' : trackCrossAxisSize + "px",
+      onMouseDown: handleTrackMouseDown,
+      onTouchStart: handleTrackMouseDown
+    }, views == null ? void 0 : views.track), stepValues && stepValues.length > 0 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, stepValues.map(stepValue => {
+      var stepPercentage = (stepValue - min) / (max - min) * 100;
+      return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+        key: stepValue,
+        position: "absolute",
+        width: 4,
+        height: 4,
+        borderRadius: "50%",
+        backgroundColor: isDisabled ? disabledColor : themeColor,
+        zIndex: 1
+      }, isVertical ? {
+        bottom: stepPercentage + "%",
+        left: '50%',
+        transform: 'translate(-50%, 50%)'
+      } : {
+        left: stepPercentage + "%",
+        top: '50%',
+        transform: 'translate(-50%, -50%)'
+      }, views.stepMarks));
+    }))), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "absolute",
+      borderRadius: trackCrossAxisSize / 2,
+      backgroundColor: isDisabled ? disabledColor : themeColor
+    }, isVertical ? {
+      bottom: 0,
+      left: 0,
+      width: '100%',
+      height: thumbPositionPercent + "%"
+    } : {
+      top: 0,
+      left: 0,
+      height: '100%',
+      width: thumbPositionPercent + "%"
+    }, views == null ? void 0 : views.filledTrack, views == null ? void 0 : views.progress)), /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      ref: thumbRef,
+      role: "slider",
+      tabIndex: isDisabled ? -1 : 0,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": currentValue,
+      "aria-orientation": orientation,
+      "aria-disabled": isDisabled,
+      "aria-label": ariaLabel,
+      position: "absolute",
+      width: thumbSize + "px",
+      height: thumbSize + "px",
+      borderRadius: "50%",
+      backgroundColor: isDisabled ? disabledColor : themeColor,
+      border: "2px solid " + getColor('color.white'),
+      boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)",
+      cursor: isDisabled ? 'not-allowed' : 'grab',
+      transform: isVertical ? 'translateX(-50%)' : 'translateY(-50%)',
+      zIndex: 2,
+      transition: isDragging ? 'none' : 'left 0.1s, bottom 0.1s'
+    }, isVertical ? {
+      left: '50%',
+      bottom: thumbPositionPercent + "%"
+    } : {
+      top: '50%',
+      left: thumbPositionPercent + "%"
+    }, {
+      onMouseDown: handleThumbMouseDown,
+      onTouchStart: handleThumbMouseDown,
+      onKeyDown: handleKeyDown
+    }, views == null ? void 0 : views.thumb), showTooltip && (isHovered || isDragging) && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "absolute",
+      padding: "4px 8px",
+      backgroundColor: getColor('color.black'),
+      color: getColor('color.white'),
+      borderRadius: "4px",
+      fontSize: "12px",
+      whiteSpace: "nowrap",
+      zIndex: 3
+    }, isVertical ? {
+      left: '100%',
+      marginLeft: '8px',
+      bottom: '0',
+      transform: 'translateY(50%)'
+    } : {
+      bottom: '100%',
+      left: '50%',
+      marginBottom: '8px',
+      transform: 'translateX(-50%)'
+    }, views == null ? void 0 : views.tooltip), /*#__PURE__*/React__default.createElement(appStudio.Text, Object.assign({}, views == null || (_views$tooltip2 = views.tooltip) == null ? void 0 : _views$tooltip2.text), currentValue == null ? void 0 : currentValue.toFixed(step < 1 ? 1 : 0)))))), helperText && /*#__PURE__*/React__default.createElement(HelperText, {
+      marginTop: 8
+    }, helperText));
+    // Use the enhanced view if orientation is vertical or showTooltip is true
+    // Otherwise use the legacy view for backward compatibility
+    return isVertical || showTooltip ? enhancedView : legacyView;
+  };
+
+  var SliderComponent = props => {
+    // Get state and handlers from the custom hook
+    var sliderState = useSliderState(props);
+    // Render the view component, passing down props and state
+    return /*#__PURE__*/React__default.createElement(SliderView, Object.assign({}, props, sliderState));
+  };
+  /**
+   * Slider allows users to select a value from a range by moving a handle.
+   */
+  var Slider = SliderComponent;
+
   // Create your store with the initial state and actions.
   var useMessageStore = /*#__PURE__*/zustand.create(set => ({
     // initial state
@@ -7505,7 +8052,7 @@
     }, views == null ? void 0 : views.view)));
   };
 
-  var _excluded$y = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress"];
+  var _excluded$z = ["accept", "icon", "text", "maxSize", "onFileSelect", "validateFile", "isLoading", "progress"];
   var Uploader = _ref => {
     var {
         accept = '*/*',
@@ -7517,7 +8064,7 @@
         isLoading = false,
         progress = 0
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
     var {
       previewUrl,
       thumbnailUrl,
@@ -7654,7 +8201,7 @@
     xl: 28
   };
 
-  var _excluded$z = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
+  var _excluded$A = ["children", "blur", "isOpen", "isClosePrevented", "onClose", "position", "views"],
     _excluded2$7 = ["children", "shadow", "isFullScreen", "shape", "views"],
     _excluded3$4 = ["children", "buttonColor", "iconSize", "buttonPosition", "views"],
     _excluded4$3 = ["children", "views"],
@@ -7669,7 +8216,7 @@
         position = 'center',
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
     var handleClick = () => {
       if (!isClosePrevented) onClose();
     };
@@ -8148,7 +8695,7 @@
     };
   };
 
-  var _excluded$A = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
+  var _excluded$B = ["children", "shape", "variant", "isHovered", "setIsHovered", "isDisabled", "isToggle", "setIsToggled", "onToggle", "views"];
   var ToggleView = _ref => {
     var {
         children,
@@ -8162,7 +8709,7 @@
         onToggle,
         views
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
     var toggleColor = !isDisabled ? 'color.trueGray.400' : 'theme.disabled';
     var isActive = !!(isToggle || isHovered);
     var toggleVariants = {
@@ -8205,7 +8752,7 @@
     }, toggleVariants[variant], props, views == null ? void 0 : views.container), children);
   };
 
-  var _excluded$B = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
+  var _excluded$C = ["children", "shape", "variant", "isDisabled", "isToggled", "onToggle"];
   // Destructuring properties from ToggleProps to be used within the ToggleComponent.
   var ToggleComponent = _ref => {
     var {
@@ -8217,7 +8764,7 @@
         isToggled = false,
         onToggle
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
     // Initializing toggle state and set state functions using the custom hook useToggleState.
     var {
       isHovered,
@@ -8457,6 +9004,157 @@
   };
   var DragAndDrop = DragAndDropComponent;
 
+  var useHoverCardState = () => {
+    var [isOpen, setIsOpen] = React.useState(false);
+    return {
+      isOpen,
+      setIsOpen
+    };
+  };
+
+  var ContentPositions = {
+    top: align => Object.assign({
+      position: 'absolute',
+      bottom: '100%',
+      marginBottom: '8px'
+    }, align === 'start' && {
+      left: 0
+    }, align === 'center' && {
+      left: '50%',
+      transform: 'translateX(-50%)'
+    }, align === 'end' && {
+      right: 0
+    }),
+    right: align => Object.assign({
+      position: 'absolute',
+      left: '100%',
+      marginLeft: '8px'
+    }, align === 'start' && {
+      top: 0
+    }, align === 'center' && {
+      top: '50%',
+      transform: 'translateY(-50%)'
+    }, align === 'end' && {
+      bottom: 0
+    }),
+    bottom: align => Object.assign({
+      position: 'absolute',
+      top: '100%',
+      marginTop: '8px'
+    }, align === 'start' && {
+      left: 0
+    }, align === 'center' && {
+      left: '50%',
+      transform: 'translateX(-50%)'
+    }, align === 'end' && {
+      right: 0
+    }),
+    left: align => Object.assign({
+      position: 'absolute',
+      right: '100%',
+      marginRight: '8px'
+    }, align === 'start' && {
+      top: 0
+    }, align === 'center' && {
+      top: '50%',
+      transform: 'translateY(-50%)'
+    }, align === 'end' && {
+      bottom: 0
+    })
+  };
+
+  var _excluded$D = ["children", "views"],
+    _excluded2$8 = ["children", "views", "side", "align"];
+  // Create context for the HoverCard
+  var HoverCardContext = /*#__PURE__*/React.createContext({
+    isOpen: false,
+    setIsOpen: () => {}
+  });
+  var HoverCardProvider = _ref => {
+    var {
+      children,
+      value
+    } = _ref;
+    return /*#__PURE__*/React__default.createElement(HoverCardContext.Provider, {
+      value: value
+    }, children);
+  };
+  var useHoverCardContext = () => {
+    var context = React.useContext(HoverCardContext);
+    if (!context) {
+      throw new Error('useHoverCardContext must be used within a HoverCardProvider');
+    }
+    return context;
+  };
+  var HoverCardTrigger = _ref2 => {
+    var {
+        children,
+        views
+      } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded$D);
+    var {
+      setIsOpen
+    } = useHoverCardContext();
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "relative",
+      display: "inline-block",
+      onMouseEnter: () => setIsOpen(true),
+      onMouseLeave: () => setIsOpen(false)
+    }, views == null ? void 0 : views.container, props), children);
+  };
+  var HoverCardContent = _ref3 => {
+    var {
+        children,
+        views,
+        side = 'bottom',
+        align = 'center'
+      } = _ref3,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded2$8);
+    var {
+      isOpen
+    } = useHoverCardContext();
+    if (!isOpen) {
+      return null;
+    }
+    return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      backgroundColor: "white",
+      borderRadius: "4px",
+      boxShadow: "0px 2px 8px rgba(0, 0, 0, 0.15)",
+      padding: "12px",
+      minWidth: "200px",
+      maxWidth: "300px",
+      zIndex: 1000
+    }, ContentPositions[side](align), views == null ? void 0 : views.container, props), children);
+  };
+
+  var _excluded$E = ["children", "views"];
+  /**
+   * HoverCard component displays floating content when hovering over a trigger element.
+   */
+  var HoverCardComponent = _ref => {
+    var {
+        children,
+        views
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$E);
+    var {
+      isOpen,
+      setIsOpen
+    } = useHoverCardState();
+    return /*#__PURE__*/React__default.createElement(HoverCardProvider, {
+      value: {
+        isOpen,
+        setIsOpen
+      }
+    }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+      position: "relative",
+      display: "inline-block"
+    }, views == null ? void 0 : views.container, props), children));
+  };
+  var HoverCard = HoverCardComponent;
+  HoverCard.Trigger = HoverCardTrigger;
+  HoverCard.Content = HoverCardContent;
+
   exports.Alert = Alert;
   exports.ArrowIcon = ArrowIcon;
   exports.AspectRatio = AspectRatio;
@@ -8510,6 +9208,7 @@
   exports.HomeIcon = HomeIcon;
   exports.Horizontal = Horizontal;
   exports.HorizontalBase = HorizontalBase;
+  exports.HoverCard = HoverCard;
   exports.Icon = Icon;
   exports.ImageIcon = ImageIcon;
   exports.InfoIcon = InfoIcon;
@@ -8548,6 +9247,7 @@
   exports.SettingsIcon = SettingsIcon;
   exports.ShapeIcon = ShapeIcon;
   exports.ShareIcon = ShareIcon;
+  exports.Slider = Slider;
   exports.SliderIcon = SliderIcon;
   exports.SliderVerticalIcon = SliderVerticalIcon;
   exports.SpinnerIcon = SpinnerIcon;