@yogiswara/honcho-editor-ui 3.1.2 → 3.1.4

package/dist/components/editor/HSliderColorMobile.js

@@ -1,25 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Stack, Slider, Typography } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import useHonchoTypography from "../../themes/honchoTheme";
 import useColors from '../../themes/colors';
 import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
-function ThumbOnlySlider({ sx, slotProps, size, value, step, min, max, onChange, onDoubleClick, }) {
-    const handleInteractionStart = (event) => {
-        // Check if the element that was clicked is the thumb or is inside the thumb.
-        const isThumb = event.target.closest('.MuiSlider-thumb');
-        // If the click was NOT on the thumb, isThumb will be null.
-        if (!isThumb) {
-            // These two lines stop the event dead in its tracks.
-            // The Slider's internal logic will never know this click happened.
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    };
-    return (
-    // This wrapper div catches the event before the Slider can.
-    _jsx("div", { onMouseDown: handleInteractionStart, onTouchStart: handleInteractionStart, children: _jsx(Slider, { sx: sx, slotProps: slotProps, size: size, value: value, step: step, min: min, max: max, onChange: onChange, onDoubleClick: onDoubleClick }) }));
-}
+import HThumbSlider from "../editor/sliderComponents/HThumbSlider";
 const formatValue = (value) => {
     if (value > 0)
         return `+${value}`;
@@ -130,7 +115,7 @@ export default function HSliderColorMobile(props) {
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.tempScore) })] }), _jsx(ThumbOnlySlider, { sx: {
+                            }, children: formatValue(props.tempScore) })] }), _jsx(HThumbSlider, { sx: {
                         width: "100%", color: colors.surface,
                         '& .MuiSlider-rail': { background: tempGradient, opacity: 1 },
                         '& .MuiSlider-track': { background: 'transparent', border: 'none' },
@@ -140,7 +125,7 @@ export default function HSliderColorMobile(props) {
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.tintScore) })] }), _jsx(ThumbOnlySlider, { sx: {
+                            }, children: formatValue(props.tintScore) })] }), _jsx(HThumbSlider, { sx: {
                         width: "100%", color: colors.surface,
                         '& .MuiSlider-rail': { background: tintGradient, opacity: 1 },
                         '& .MuiSlider-track': { background: 'transparent', border: 'none' },
@@ -150,7 +135,7 @@ export default function HSliderColorMobile(props) {
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.vibranceScore) })] }), _jsx(ThumbOnlySlider, { sx: {
+                            }, children: formatValue(props.vibranceScore) })] }), _jsx(HThumbSlider, { sx: {
                         width: "100%", color: colors.surface,
                         '& .MuiSlider-rail': { background: fullTrackGradient, opacity: 1 },
                         '& .MuiSlider-track': { background: 'transparent', border: 'none' },
@@ -160,7 +145,7 @@ export default function HSliderColorMobile(props) {
                                 color: colors.surface,
                                 width: "40px", // Keep the fixed width for alignment
                                 textAlign: "right", // Keep the text alignment
-                            }, children: formatValue(props.saturationScore) })] }), _jsx(ThumbOnlySlider, { sx: {
+                            }, children: formatValue(props.saturationScore) })] }), _jsx(HThumbSlider, { sx: {
                         width: "100%", color: colors.surface,
                         '& .MuiSlider-rail': { background: fullTrackGradient, opacity: 1 },
                         '& .MuiSlider-track': { background: 'transparent', border: 'none' },

package/dist/components/editor/sliderComponents/HThumbSlider.d.ts

@@ -0,0 +1,5 @@
+import { SliderProps } from '@mui/material';
+interface HThumbSliderProps extends SliderProps {
+}
+export default function HThumbSlider(props: HThumbSliderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/sliderComponents/HThumbSlider.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider, Box } from '@mui/material';
+// I've renamed the component to HThumbSlider to match our earlier convention
+export default function HThumbSlider(props) {
+    return (
+    // This wrapper creates the positioning context for the shield.
+    _jsxs(Box, { sx: { position: 'relative', width: '100%', py: 1.5 }, children: [_jsx(Box, { sx: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    zIndex: 1, // Sits above the track (z-index 0)
+                } }), _jsx(Slider, { ...props, sx: {
+                    position: 'relative',
+                    ...props.sx,
+                } })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "3.1.2",
+  "version": "3.1.4",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",