@choice-ui/react 1.8.9 → 1.9.1

package/dist/components/colors/dist/index.d.ts

@@ -452,8 +452,37 @@ interface ColorAreaProps {
 }
 declare const ColorArea: react.MemoExoticComponent<react.ForwardRefExoticComponent<ColorAreaProps & react.RefAttributes<HTMLDivElement>>>;
 
+interface ColorSliderThumbProps {
+    className?: string;
+    size?: number;
+}
+declare function ColorSliderThumb(props: ColorSliderThumbProps): react_jsx_runtime.JSX.Element;
+declare namespace ColorSliderThumb {
+    var displayName: string;
+}
+
+interface ColorSliderTrackProps {
+    className?: string;
+    children?: React.ReactNode;
+    /**
+     * Height of the track in pixels.
+     * This prop is extracted by the parent ColorSlider and passed via context.
+     */
+    height?: number;
+}
+/**
+ * ColorSliderTrack - The track background of the color slider.
+ * Renders the gradient background based on slider type (hue, alpha, etc.)
+ * Can contain custom children for additional visual elements.
+ */
+declare function ColorSliderTrack(props: ColorSliderTrackProps): react_jsx_runtime.JSX.Element;
+declare namespace ColorSliderTrack {
+    var displayName: string;
+}
+
 interface ColorSliderProps {
     backgroundStyle?: CSSProperties;
+    children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
     hue?: number;
@@ -461,14 +490,18 @@ interface ColorSliderProps {
     onChangeEnd?: () => void;
     onChangeStart?: () => void;
     position: number;
-    thumbSize?: number;
-    trackSize?: {
-        height?: number;
-        width?: number;
-    };
     type: PickerSliderType;
+    /**
+     * Width of the slider track in pixels.
+     * If not provided (undefined or false), the width will be auto-calculated from the container.
+     */
+    width?: number | boolean;
+}
+interface ColorSliderComponent extends React.MemoExoticComponent<React.ForwardRefExoticComponent<ColorSliderProps & React.RefAttributes<HTMLDivElement>>> {
+    Thumb: typeof ColorSliderThumb;
+    Track: typeof ColorSliderTrack;
 }
-declare const ColorSlider: react.MemoExoticComponent<react.ForwardRefExoticComponent<ColorSliderProps & react.RefAttributes<HTMLDivElement>>>;
+declare const ColorSlider: ColorSliderComponent;
 
 interface ColorSwatchProps extends Omit<HTMLProps<HTMLDivElement>, "color"> {
     alpha?: number;

package/dist/components/colors/src/color-gradients-paint/color-gradient-combined.js

@@ -24,10 +24,7 @@ const ColorGradientCombined = (props) => {
         onChangeEnd,
         controlledSelectedStopId: selectedStopId,
         onSelectedStopIdChange,
-        trackSize: {
-          width: containerWidth - 32,
-          height: 16
-        },
+        width: containerWidth - 32,
         className: "min-w-0 px-4 pb-4"
       }
     ),

package/dist/components/colors/src/color-gradients-paint/color-gradient-slider.d.ts

@@ -8,10 +8,10 @@ interface ColorGradientSliderProps {
     onChangeStart?: () => void;
     onSelectedStopIdChange?: (id: string) => void;
     stopSize?: number;
-    trackSize?: {
-        height?: number;
-        width?: number;
-    };
+    /**
+     * Width of the gradient slider track in pixels.
+     */
+    width?: number;
     value?: GradientPaint["gradientStops"];
 }
 export declare const ColorGradientSlider: import('react').ForwardRefExoticComponent<ColorGradientSliderProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/colors/src/color-gradients-paint/color-gradient-slider.js

@@ -18,10 +18,11 @@ const ColorGradientSlider = forwardRef(
       controlledSelectedStopId,
       onSelectedStopIdChange,
       disabled = false,
-      trackSize = { width: 224, height: 16 },
+      width: trackWidth = 224,
       stopSize = 18,
       className
     } = props;
+    const trackHeight = 16;
     const { colorProfile } = useColors();
     const sliderRef = useRef(null);
     const stopsContainerRef = useRef(null);
@@ -182,15 +183,15 @@ const ColorGradientSlider = forwardRef(
     });
     const trackStyle = useMemo(() => {
       return {
-        width: trackSize == null ? void 0 : trackSize.width,
-        height: trackSize == null ? void 0 : trackSize.height,
+        width: trackWidth,
+        height: trackHeight,
         boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)",
         background: gradientBackground
       };
-    }, [gradientBackground, trackSize]);
+    }, [gradientBackground, trackWidth, trackHeight]);
     const stopStyle = useCallback(
       (stop) => {
-        const position = stop.position * ((trackSize == null ? void 0 : trackSize.width) ?? 0);
+        const position = stop.position * trackWidth;
         return {
           width: stopSize,
           height: stopSize,
@@ -198,12 +199,12 @@ const ColorGradientSlider = forwardRef(
           willChange: isDragging.current ? "transform" : "auto"
         };
       },
-      [stopSize, trackSize == null ? void 0 : trackSize.width]
+      [stopSize, trackWidth]
     );
     const handleMouseMove = useEventCallback((e) => {
       if (disabled || isDragging.current) return;
       const position = calculatePosition(e.clientX);
-      setHoverPosition(position * ((trackSize == null ? void 0 : trackSize.width) ?? 0));
+      setHoverPosition(position * trackWidth);
     });
     const handleMouseLeave = useEventCallback(() => {
       setHoverPosition(null);
@@ -221,7 +222,7 @@ const ColorGradientSlider = forwardRef(
               className: "relative",
               style: {
                 height: 24,
-                width: trackSize == null ? void 0 : trackSize.width
+                width: trackWidth
               },
               children: stops.map((stop) => /* @__PURE__ */ jsx(
                 "div",

package/dist/components/colors/src/color-slider/color-slider.d.ts

@@ -1,7 +1,10 @@
 import { CSSProperties } from 'react';
 import { PickerSliderType } from '../types/colors';
+import { ColorSliderThumb, ColorSliderThumbProps } from './components/thumb';
+import { ColorSliderTrack, ColorSliderTrackProps } from './components/track';
 export interface ColorSliderProps {
     backgroundStyle?: CSSProperties;
+    children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
     hue?: number;
@@ -9,11 +12,16 @@ export interface ColorSliderProps {
     onChangeEnd?: () => void;
     onChangeStart?: () => void;
     position: number;
-    thumbSize?: number;
-    trackSize?: {
-        height?: number;
-        width?: number;
-    };
     type: PickerSliderType;
+    /**
+     * Width of the slider track in pixels.
+     * If not provided (undefined or false), the width will be auto-calculated from the container.
+     */
+    width?: number | boolean;
 }
-export declare const ColorSlider: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<ColorSliderProps & import('react').RefAttributes<HTMLDivElement>>>;
+interface ColorSliderComponent extends React.MemoExoticComponent<React.ForwardRefExoticComponent<ColorSliderProps & React.RefAttributes<HTMLDivElement>>> {
+    Thumb: typeof ColorSliderThumb;
+    Track: typeof ColorSliderTrack;
+}
+export declare const ColorSlider: ColorSliderComponent;
+export type { ColorSliderThumbProps, ColorSliderTrackProps };

package/dist/components/colors/src/color-slider/color-slider.js

@@ -1,19 +1,22 @@
 import { jsx } from "react/jsx-runtime";
 import { clamp } from "es-toolkit";
-import { memo, forwardRef, useRef, useCallback, useEffect, useMemo } from "react";
+import { memo, forwardRef, useRef, useState, useMemo, Children, isValidElement, useCallback, useEffect } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { useColors } from "../context/colots-context.js";
+import { ColorSliderThumb } from "./components/thumb.js";
+import { ColorSliderTrack } from "./components/track.js";
+import { ColorSliderContext } from "./context.js";
 import { ColorSliderTv } from "./tv.js";
 import { positionToSliderValue } from "../utils/position.js";
 import { getSliderBackground } from "../utils/background.js";
+import { useIsomorphicLayoutEffect } from "../../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
 import { tcx } from "../../../../shared/utils/tcx/tcx.js";
 import { mergeRefs } from "../../../../shared/utils/merge-refs/merge-refs.js";
-import { translation } from "../contents/translation.js";
 const KEYBOARD_STEPS = {
   NORMAL: 0.01,
   SHIFT: 0.1
 };
-const ColorSlider = memo(
+const ColorSliderRoot = memo(
   forwardRef(function ColorSlider2(props, ref) {
     const {
       position,
@@ -24,18 +27,68 @@ const ColorSlider = memo(
       hue = 0,
       backgroundStyle,
       disabled = false,
-      trackSize = {
-        width: 256,
-        height: 16
-      },
-      thumbSize = 14,
-      className
+      width: propsWidth = 256,
+      className,
+      children
     } = props;
     const { colorProfile } = useColors();
     const sliderRef = useRef(null);
     const thumbRef = useRef(null);
     const inputRef = useRef(null);
     const isDragging = useRef(false);
+    const [actualTrackWidth, setActualTrackWidth] = useState();
+    const trackWidth = typeof propsWidth === "number" ? propsWidth : actualTrackWidth;
+    const { hasCustomChildren, extractedThumbSize, extractedTrackHeight } = useMemo(() => {
+      const childArray = Children.toArray(children);
+      let hasCustom = false;
+      let thumbSizeFromChild;
+      let trackHeightFromChild;
+      for (const child of childArray) {
+        if (isValidElement(child)) {
+          const childType = child.type;
+          if (child.type === ColorSliderThumb || (childType == null ? void 0 : childType.displayName) === "ColorSliderThumb") {
+            hasCustom = true;
+            const childProps = child.props;
+            if (childProps.size !== void 0) {
+              thumbSizeFromChild = childProps.size;
+            }
+          } else if (child.type === ColorSliderTrack || (childType == null ? void 0 : childType.displayName) === "ColorSliderTrack") {
+            hasCustom = true;
+            const childProps = child.props;
+            if (childProps.height !== void 0) {
+              trackHeightFromChild = childProps.height;
+            }
+          }
+        }
+      }
+      return {
+        hasCustomChildren: hasCustom,
+        extractedThumbSize: thumbSizeFromChild,
+        extractedTrackHeight: trackHeightFromChild
+      };
+    }, [children]);
+    const trackHeight = extractedTrackHeight ?? 16;
+    const thumbSize = extractedThumbSize ?? trackHeight;
+    useIsomorphicLayoutEffect(() => {
+      if (typeof propsWidth !== "number" && sliderRef.current) {
+        const updateWidth = () => {
+          if (sliderRef.current) {
+            const width = sliderRef.current.getBoundingClientRect().width;
+            if (width > 0) {
+              setActualTrackWidth(width);
+            }
+          }
+        };
+        updateWidth();
+        const resizeObserver = new ResizeObserver(() => {
+          updateWidth();
+        });
+        resizeObserver.observe(sliderRef.current);
+        return () => {
+          resizeObserver.disconnect();
+        };
+      }
+    }, [propsWidth]);
     const updatePosition = useEventCallback((clientX, isEnd) => {
       var _a;
       const rect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
@@ -117,69 +170,94 @@ const ColorSlider = memo(
         (_a = inputRef.current) == null ? void 0 : _a.blur();
       }
     }, [disabled]);
-    const thumbStyle = useMemo(() => {
-      const minTransform = 1;
-      const maxTransform = ((trackSize == null ? void 0 : trackSize.width) ?? 0) - thumbSize - 1;
+    const computedTrackWidth = trackWidth ?? 256;
+    const thumbWrapperStyle = useMemo(() => {
+      const minTransform = 0;
+      const maxTransform = computedTrackWidth - thumbSize;
       const transformX = minTransform + position * (maxTransform - minTransform);
       return {
         width: thumbSize,
         height: thumbSize,
         transform: `translate(${transformX}px, -50%)`,
+        willChange: isDragging.current ? "transform" : "auto"
+      };
+    }, [position, thumbSize, computedTrackWidth]);
+    const thumbStyle = useMemo(() => {
+      return {
+        "--thumb-size": `${thumbSize}px`,
         backgroundColor: positionToSliderValue(position, type, hue),
-        willChange: isDragging.current ? "transform" : "auto",
         boxShadow: `
         inset 0 0 0 3px white,
         inset 0 0 0 4px rgba(0,0,0,0.2),
         0 0 0 1px rgba(0,0,0,0.2)
       `
       };
-    }, [position, thumbSize, trackSize, type, hue]);
-    const computedBackgroundStyle = useMemo(
+    }, [position, type, hue]);
+    const trackStyle = useMemo(
       () => ({
         ...getSliderBackground(type, hue, colorProfile),
-        ...backgroundStyle
+        ...backgroundStyle,
+        boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)"
       }),
       [type, hue, colorProfile, backgroundStyle]
     );
-    const styles = ColorSliderTv({ disabled });
-    return /* @__PURE__ */ jsx(
+    const tv = useMemo(() => ColorSliderTv({ disabled }), [disabled]);
+    const contextValue = useMemo(
+      () => ({
+        position,
+        disabled,
+        type,
+        hue,
+        thumbSize,
+        trackWidth: computedTrackWidth,
+        trackHeight,
+        thumbWrapperStyle,
+        thumbStyle,
+        trackStyle,
+        thumbRef,
+        inputRef,
+        isDragging,
+        handlePointerDown,
+        handleKeyDown,
+        tv
+      }),
+      [
+        position,
+        disabled,
+        type,
+        hue,
+        thumbSize,
+        computedTrackWidth,
+        trackHeight,
+        thumbWrapperStyle,
+        thumbStyle,
+        trackStyle,
+        handlePointerDown,
+        handleKeyDown,
+        tv
+      ]
+    );
+    return /* @__PURE__ */ jsx(ColorSliderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref: mergeRefs(ref, sliderRef),
         onPointerDown: handleSliderPointerDown,
         style: {
-          ...computedBackgroundStyle,
-          boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.1)",
-          height: trackSize == null ? void 0 : trackSize.height,
-          width: trackSize == null ? void 0 : trackSize.width
+          ...trackStyle,
+          height: trackHeight,
+          width: typeof propsWidth === "number" ? propsWidth : void 0
         },
-        className: tcx(styles.root(), className),
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: thumbRef,
-            onPointerDown: handlePointerDown,
-            className: styles.thumb(),
-            style: thumbStyle,
-            children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: inputRef,
-                type: "text",
-                onKeyDown: handleKeyDown,
-                className: styles.thumbInput(),
-                "aria-label": translation.slider.ARIA_LABEL,
-                tabIndex: disabled ? -1 : 0,
-                readOnly: true
-              }
-            )
-          }
-        )
+        className: tcx(tv.root(), className),
+        children: hasCustomChildren ? children : /* @__PURE__ */ jsx(ColorSliderThumb, {})
       }
-    );
+    ) });
   })
 );
-ColorSlider.displayName = "ColorSlider";
+ColorSliderRoot.displayName = "ColorSlider";
+const ColorSlider = Object.assign(ColorSliderRoot, {
+  Thumb: ColorSliderThumb,
+  Track: ColorSliderTrack
+});
 export {
   ColorSlider
 };

package/dist/components/colors/src/color-slider/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './thumb';
+export * from './track';

package/dist/components/colors/src/color-slider/components/thumb.d.ts

@@ -0,0 +1,8 @@
+export interface ColorSliderThumbProps {
+    className?: string;
+    size?: number;
+}
+export declare function ColorSliderThumb(props: ColorSliderThumbProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ColorSliderThumb {
+    var displayName: string;
+}

package/dist/components/colors/src/color-slider/components/thumb.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { useColorSlider } from "../context.js";
+import { tcx } from "../../../../../shared/utils/tcx/tcx.js";
+import { translation } from "../../contents/translation.js";
+function ColorSliderThumb(props) {
+  const { className } = props;
+  const {
+    thumbRef,
+    inputRef,
+    thumbWrapperStyle,
+    thumbStyle,
+    disabled,
+    handlePointerDown,
+    handleKeyDown,
+    tv
+  } = useColorSlider();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: thumbRef,
+      onPointerDown: handlePointerDown,
+      className: tv.thumbWrapper(),
+      style: thumbWrapperStyle,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: tcx(tv.thumb(), className),
+          style: thumbStyle,
+          children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              onKeyDown: handleKeyDown,
+              className: tv.thumbInput(),
+              "aria-label": translation.slider.ARIA_LABEL,
+              tabIndex: disabled ? -1 : 0,
+              readOnly: true
+            }
+          )
+        }
+      )
+    }
+  );
+}
+ColorSliderThumb.displayName = "ColorSliderThumb";
+export {
+  ColorSliderThumb
+};

package/dist/components/colors/src/color-slider/components/track.d.ts

@@ -0,0 +1,18 @@
+export interface ColorSliderTrackProps {
+    className?: string;
+    children?: React.ReactNode;
+    /**
+     * Height of the track in pixels.
+     * This prop is extracted by the parent ColorSlider and passed via context.
+     */
+    height?: number;
+}
+/**
+ * ColorSliderTrack - The track background of the color slider.
+ * Renders the gradient background based on slider type (hue, alpha, etc.)
+ * Can contain custom children for additional visual elements.
+ */
+export declare function ColorSliderTrack(props: ColorSliderTrackProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ColorSliderTrack {
+    var displayName: string;
+}

package/dist/components/colors/src/color-slider/components/track.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { useColorSlider } from "../context.js";
+import { tcx } from "../../../../../shared/utils/tcx/tcx.js";
+function ColorSliderTrack(props) {
+  const { className, children, height: _height } = props;
+  const { trackStyle } = useColorSlider();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: tcx("absolute inset-0 rounded-full", className),
+      style: trackStyle,
+      children
+    }
+  );
+}
+ColorSliderTrack.displayName = "ColorSliderTrack";
+export {
+  ColorSliderTrack
+};

package/dist/components/colors/src/color-slider/context.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, MutableRefObject, RefObject } from 'react';
+import { PickerSliderType } from '../types/colors';
+import { ColorSliderTv } from './tv';
+export interface ColorSliderContextValue {
+    position: number;
+    disabled: boolean;
+    type: PickerSliderType;
+    hue: number;
+    thumbSize: number;
+    trackWidth: number;
+    trackHeight: number;
+    thumbWrapperStyle: CSSProperties;
+    thumbStyle: CSSProperties;
+    trackStyle: CSSProperties;
+    thumbRef: RefObject<HTMLDivElement>;
+    inputRef: RefObject<HTMLInputElement>;
+    isDragging: MutableRefObject<boolean>;
+    handlePointerDown: (e: React.PointerEvent) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    tv: ReturnType<typeof ColorSliderTv>;
+}
+export declare const ColorSliderContext: import('react').Context<ColorSliderContextValue | null>;
+export declare function useColorSlider(): ColorSliderContextValue;

package/dist/components/colors/src/color-slider/context.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+const ColorSliderContext = createContext(null);
+function useColorSlider() {
+  const context = useContext(ColorSliderContext);
+  if (!context) {
+    throw new Error("ColorSlider compound components must be used within ColorSlider");
+  }
+  return context;
+}
+export {
+  ColorSliderContext,
+  useColorSlider
+};

package/dist/components/colors/src/color-slider/index.d.ts

@@ -1 +1,3 @@
 export * from './color-slider';
+export * from './context';
+export * from './components';

package/dist/components/colors/src/color-slider/tv.d.ts

@@ -6,6 +6,7 @@ export declare const ColorSliderTv: import('tailwind-variants').TVReturnType<{
     };
 }, {
     root: string;
+    thumbWrapper: string;
     thumb: string;
     thumbInput: string;
 }, undefined, {
@@ -16,6 +17,7 @@ export declare const ColorSliderTv: import('tailwind-variants').TVReturnType<{
     };
 }, {
     root: string;
+    thumbWrapper: string;
     thumb: string;
     thumbInput: string;
 }, import('tailwind-variants').TVReturnType<{
@@ -26,6 +28,7 @@ export declare const ColorSliderTv: import('tailwind-variants').TVReturnType<{
     };
 }, {
     root: string;
+    thumbWrapper: string;
     thumb: string;
     thumbInput: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/colors/src/color-slider/tv.js

@@ -2,7 +2,8 @@ import { tcv } from "../../../../shared/utils/tcx/tcx.js";
 const ColorSliderTv = tcv({
   slots: {
     root: "relative touch-none rounded-full select-none",
-    thumb: "absolute top-1/2 box-border origin-center rounded-full",
+    thumbWrapper: "absolute top-1/2 box-border origin-center",
+    thumb: "rounded-full absolute -translate-y-1/2 -translate-x-1/2 left-1/2 top-1/2 w-[calc(var(--thumb-size)-2px)] h-[calc(var(--thumb-size)-2px)]",
     thumbInput: "absolute inset-0 cursor-default opacity-0"
   },
   variants: {

package/dist/components/colors/src/color-solid-paint/color-solid-paint.js

@@ -59,7 +59,7 @@ const ColorSolidPaint = forwardRef(
     const handleNativeColorChange = useEventCallback((rgb) => {
       onColorChange == null ? void 0 : onColorChange(rgb);
     });
-    const sliderTrackSize = useMemo(() => {
+    const sliderWidth = useMemo(() => {
       const getPadding = () => {
         if (!features.alpha && !features.nativePicker) {
           return 32;
@@ -69,10 +69,7 @@ const ColorSolidPaint = forwardRef(
         padding += features.nativePicker ? 48 : 0;
         return padding;
       };
-      return {
-        width: ((features == null ? void 0 : features.containerWidth) ?? 240) - getPadding(),
-        height: 16
-      };
+      return ((features == null ? void 0 : features.containerWidth) ?? 240) - getPadding();
     }, [features.containerWidth, features.alpha, features.nativePicker]);
     const styles = ColorSolidPaintTv({
       alpha: features.alpha,
@@ -235,7 +232,7 @@ const ColorSolidPaint = forwardRef(
                       onChangeEnd,
                       onChange: onChangeEnd,
                       type: "hue",
-                      trackSize: sliderTrackSize,
+                      width: sliderWidth,
                       updateSourceRef
                     }
                   ),
@@ -246,7 +243,7 @@ const ColorSolidPaint = forwardRef(
                       alpha: opacity,
                       onAlphaChange,
                       type: "alpha",
-                      trackSize: sliderTrackSize,
+                      width: sliderWidth,
                       onChangeStart,
                       onChangeEnd
                     }

package/dist/components/colors/src/color-solid-paint/solid-paint-alpha-slider.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { ColorSlider } from "../color-slider/color-slider.js";
 const SolidPaintAlphaSlider = (props) => {
-  const { hue, alpha, onAlphaChange, onChangeStart, onChangeEnd, trackSize } = props;
+  const { hue, alpha, onAlphaChange, onChangeStart, onChangeEnd, width } = props;
   return /* @__PURE__ */ jsx(
     ColorSlider,
     {
@@ -9,7 +9,7 @@ const SolidPaintAlphaSlider = (props) => {
       onChange: onAlphaChange,
       type: "alpha",
       hue,
-      trackSize,
+      width,
       onChangeStart,
       onChangeEnd
     }

package/dist/components/colors/src/color-solid-paint/solid-paint-hue-slider.js

@@ -9,7 +9,7 @@ const SolidPaintHueSlider = (props) => {
     setHue,
     color,
     onColorChange,
-    trackSize,
+    width,
     onChangeStart,
     onChangeEnd,
     updateSourceRef
@@ -32,7 +32,7 @@ const SolidPaintHueSlider = (props) => {
       position: hue / 360,
       onChange: handleHueChange,
       type: "hue",
-      trackSize,
+      width,
       onChangeStart,
       onChangeEnd: () => {
         onChangeEnd == null ? void 0 : onChangeEnd();

package/dist/components/colors/src/simple-color-picker/simple-color-picker.js

@@ -43,16 +43,13 @@ const SimpleColorPicker = forwardRef(
       hsb: true,
       ...featureProps
     };
-    const sliderTrackSize = useMemo(() => {
+    const sliderWidth = useMemo(() => {
       const getPadding = () => {
         let padding = 0;
         padding += 32;
         return padding;
       };
-      return {
-        width: 240 - getPadding(),
-        height: 16
-      };
+      return 240 - getPadding();
     }, []);
     const styles = ColorSolidPaintTv({
       alpha: true,
@@ -104,7 +101,7 @@ const SimpleColorPicker = forwardRef(
                     onChangeEnd,
                     onChange: onChangeEnd,
                     type: "hue",
-                    trackSize: sliderTrackSize,
+                    width: sliderWidth,
                     updateSourceRef
                   }
                 ),
@@ -115,7 +112,7 @@ const SimpleColorPicker = forwardRef(
                     alpha: opacity,
                     onAlphaChange,
                     type: "alpha",
-                    trackSize: sliderTrackSize,
+                    width: sliderWidth,
                     onChangeStart,
                     onChangeEnd
                   }

package/dist/components/dropdown/dist/index.js

@@ -54,7 +54,7 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     }
     onOpenChange == null ? void 0 : onOpenChange(newOpen);
   });
-  const { nodeId, item, isNested } = useMenuTree({
+  const { nodeId, item, isNested, tree } = useMenuTree({
     disabledNested,
     handleOpenChange,
     isControlledOpen
@@ -169,11 +169,17 @@ var DropdownComponent = memo(function DropdownComponent2(props) {
     bubbles: true,
     escapeKey: true
   });
+  const handleNavigate = useEventCallback((index) => {
+    setActiveIndex(index);
+    if (tree && index !== null) {
+      tree.events.emit("navigate", { nodeId, index });
+    }
+  });
   const listNavigation = useListNavigation(context, {
     listRef: elementsRef,
     activeIndex,
     nested: isNested,
-    onNavigate: setActiveIndex,
+    onNavigate: handleNavigate,
     loop: true
   });
   const typeahead = useTypeahead(context, {

package/dist/components/dropdown/src/dropdown.js

@@ -54,7 +54,7 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     }
     onOpenChange == null ? void 0 : onOpenChange(newOpen);
   });
-  const { nodeId, item, isNested } = useMenuTree({
+  const { nodeId, item, isNested, tree } = useMenuTree({
     disabledNested,
     handleOpenChange,
     isControlledOpen
@@ -169,11 +169,17 @@ const DropdownComponent = memo(function DropdownComponent2(props) {
     bubbles: true,
     escapeKey: true
   });
+  const handleNavigate = useEventCallback((index) => {
+    setActiveIndex(index);
+    if (tree && index !== null) {
+      tree.events.emit("navigate", { nodeId, index });
+    }
+  });
   const listNavigation = useListNavigation(context, {
     listRef: elementsRef,
     activeIndex,
     nested: isNested,
-    onNavigate: setActiveIndex,
+    onNavigate: handleNavigate,
     loop: true
   });
   const typeahead = useTypeahead(context, {

package/dist/components/menus/dist/index.js

@@ -843,18 +843,25 @@ function useMenuTree(config) {
       handleOpenChange(false);
     }
   });
+  const handleParentNavigate = useEventCallback((event) => {
+    if (event.nodeId === parentId && event.index !== item.index && isControlledOpen) {
+      handleOpenChange(false);
+    }
+  });
   const cleanupTreeEvents = useEventCallback(() => {
     if (tree) {
       tree.events.off("click", handleTreeClick);
       tree.events.off("menuopen", handleSubMenuOpen);
+      tree.events.off("navigate", handleParentNavigate);
     }
   });
   useEffect(() => {
     if (!tree) return;
     tree.events.on("click", handleTreeClick);
     tree.events.on("menuopen", handleSubMenuOpen);
+    tree.events.on("navigate", handleParentNavigate);
     return cleanupTreeEvents;
-  }, [tree, nodeId, parentId, handleTreeClick, handleSubMenuOpen, cleanupTreeEvents]);
+  }, [tree, nodeId, parentId, handleTreeClick, handleSubMenuOpen, handleParentNavigate, cleanupTreeEvents]);
   useEffect(() => {
     if (isControlledOpen && tree) {
       tree.events.emit("menuopen", { parentId, nodeId });
@@ -1075,7 +1082,12 @@ var MenuContextSubTrigger = memo(
       throw new Error("MenuContextSubTrigger must be used within a MenuContext component");
     }
     const isActive = useMemo(
-      () => item.index === menu.activeIndex || !!active,
+      () => {
+        if (menu.activeIndex !== null && menu.activeIndex !== void 0) {
+          return item.index === menu.activeIndex;
+        }
+        return !!active;
+      },
       [item.index, menu.activeIndex, active]
     );
     const handleFocus = useEventCallback((event) => {

package/dist/components/menus/src/context/menu-context-sub-trigger.js

@@ -26,7 +26,12 @@ const MenuContextSubTrigger = memo(
       throw new Error("MenuContextSubTrigger must be used within a MenuContext component");
     }
     const isActive = useMemo(
-      () => item.index === menu.activeIndex || !!active,
+      () => {
+        if (menu.activeIndex !== null && menu.activeIndex !== void 0) {
+          return item.index === menu.activeIndex;
+        }
+        return !!active;
+      },
       [item.index, menu.activeIndex, active]
     );
     const handleFocus = useEventCallback((event) => {

package/dist/components/menus/src/hooks/use-menu-tree.js

@@ -16,18 +16,25 @@ function useMenuTree(config) {
       handleOpenChange(false);
     }
   });
+  const handleParentNavigate = useEventCallback((event) => {
+    if (event.nodeId === parentId && event.index !== item.index && isControlledOpen) {
+      handleOpenChange(false);
+    }
+  });
   const cleanupTreeEvents = useEventCallback(() => {
     if (tree) {
       tree.events.off("click", handleTreeClick);
       tree.events.off("menuopen", handleSubMenuOpen);
+      tree.events.off("navigate", handleParentNavigate);
     }
   });
   useEffect(() => {
     if (!tree) return;
     tree.events.on("click", handleTreeClick);
     tree.events.on("menuopen", handleSubMenuOpen);
+    tree.events.on("navigate", handleParentNavigate);
     return cleanupTreeEvents;
-  }, [tree, nodeId, parentId, handleTreeClick, handleSubMenuOpen, cleanupTreeEvents]);
+  }, [tree, nodeId, parentId, handleTreeClick, handleSubMenuOpen, handleParentNavigate, cleanupTreeEvents]);
   useEffect(() => {
     if (isControlledOpen && tree) {
       tree.events.emit("menuopen", { parentId, nodeId });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@choice-ui/react",
-  "version": "1.8.9",
+  "version": "1.9.1",
   "description": "A desktop-first React UI component library built for professional desktop applications with comprehensive documentation",
   "sideEffects": false,
   "type": "module",