@app-studio/web 0.8.71 → 0.8.73

package/dist/web.cjs.development.js

@@ -18,6 +18,7 @@ require('core-js/modules/es.string.includes.js');
 require('core-js/modules/es.string.starts-with.js');
 var format = _interopDefault(require('date-fns/format'));
 var formik = 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');
@@ -723,7 +724,7 @@ var ThreadsIcon = _ref15 => {
     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
@@ -1409,7 +1410,9 @@ var LockIcon = _ref42 => {
     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",
@@ -1418,7 +1421,11 @@ var LockIcon = _ref42 => {
     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 {
@@ -1688,7 +1695,9 @@ var UnlockIcon = _ref55 => {
     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",
@@ -1697,7 +1706,11 @@ var UnlockIcon = _ref55 => {
     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 {
@@ -3130,6 +3143,7 @@ var ButtonView = _ref => {
   return /*#__PURE__*/React__default.createElement(appStudio.Element, Object.assign({
     gap: 8,
     as: "button",
+    type: "button",
     border: "none",
     color: "color.white",
     display: "flex",
@@ -6990,6 +7004,540 @@ var ComboBoxComponent$1 = _ref => {
  */
 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
@@ -7522,7 +8070,7 @@ var UploadView = _ref => {
   }, 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 = '*/*',
@@ -7534,7 +8082,7 @@ var Uploader = _ref => {
       isLoading = false,
       progress = 0
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   var {
     previewUrl,
     thumbnailUrl,
@@ -7671,7 +8219,7 @@ var HeaderIconSizes = {
   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"],
@@ -7686,7 +8234,7 @@ var ModalOverlay = _ref => {
       position = 'center',
       views
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   var handleClick = () => {
     if (!isClosePrevented) onClose();
   };
@@ -8165,7 +8713,7 @@ var useToggleState = defaultToggled => {
   };
 };
 
-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,
@@ -8179,7 +8727,7 @@ var ToggleView = _ref => {
       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 = {
@@ -8222,7 +8770,7 @@ var ToggleView = _ref => {
   }, 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 {
@@ -8234,7 +8782,7 @@ var ToggleComponent = _ref => {
       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,
@@ -8474,6 +9022,157 @@ var DragAndDropComponent = props => {
 };
 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;
@@ -8527,6 +9226,7 @@ exports.HeartIcon = HeartIcon;
 exports.HomeIcon = HomeIcon;
 exports.Horizontal = Horizontal;
 exports.HorizontalBase = HorizontalBase;
+exports.HoverCard = HoverCard;
 exports.Icon = Icon;
 exports.ImageIcon = ImageIcon;
 exports.InfoIcon = InfoIcon;
@@ -8565,6 +9265,7 @@ exports.Select = Select;
 exports.SettingsIcon = SettingsIcon;
 exports.ShapeIcon = ShapeIcon;
 exports.ShareIcon = ShareIcon;
+exports.Slider = Slider;
 exports.SliderIcon = SliderIcon;
 exports.SliderVerticalIcon = SliderVerticalIcon;
 exports.SpinnerIcon = SpinnerIcon;