@choice-ui/react 1.9.0 → 1.9.1

package/dist/components/button/dist/index.js

@@ -244,6 +244,13 @@ var buttonTv = tcv({
       loading: false,
       variant: "dark",
       class: { button: "active:bg-gray-600" }
+    },
+    {
+      disabled: false,
+      loading: false,
+      variant: "secondary",
+      active: false,
+      class: { button: "hover:bg-secondary-background" }
     }
   ],
   defaultVariants: {

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

@@ -1,6 +1,14 @@
 import { HTMLProps, ReactNode } from 'react';
 import * as react from 'react';
 
+interface CheckboxIconProps extends Omit<HTMLProps<HTMLDivElement>, "children"> {
+    children?: ReactNode | ((props: {
+        value?: boolean;
+        mixed?: boolean;
+    }) => ReactNode);
+}
+declare const CheckboxIcon: react.MemoExoticComponent<react.ForwardRefExoticComponent<Omit<CheckboxIconProps, "ref"> & react.RefAttributes<HTMLDivElement>>>;
+
 interface CheckboxLabelProps extends Omit<HTMLProps<HTMLLabelElement>, "htmlFor" | "id" | "disabled"> {
     children: ReactNode;
 }
@@ -20,9 +28,10 @@ interface CheckboxType {
     (props: CheckboxProps & {
         ref?: React.Ref<HTMLInputElement>;
     }): JSX.Element;
+    Icon: typeof CheckboxIcon;
     Label: typeof CheckboxLabel;
     displayName?: string;
 }
 declare const Checkbox: CheckboxType;
 
-export { Checkbox, type CheckboxProps };
+export { Checkbox, type CheckboxIconProps, type CheckboxLabelProps, type CheckboxProps };

package/dist/components/checkbox/dist/index.js

@@ -1,5 +1,5 @@
 import { Indeterminate, Check } from "@choiceform/icons-react";
-import { memo, forwardRef, useId, createContext, useContext } from "react";
+import { memo, forwardRef, useId, Children, isValidElement, createContext, useContext } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
@@ -137,6 +137,38 @@ var checkboxTv = tcv({
     focused: false
   }
 });
+var CheckboxIcon = memo(
+  forwardRef(function CheckboxIcon2(props, ref) {
+    const { className, children, ...rest } = props;
+    const { value, mixed, disabled, variant } = useCheckboxContext();
+    const tv = checkboxTv({
+      type: "checkbox",
+      variant,
+      disabled,
+      checked: value || mixed
+    });
+    const renderIcon = () => {
+      if (typeof children === "function") {
+        return children({ value, mixed });
+      }
+      if (children !== void 0) {
+        return children;
+      }
+      return mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null;
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.box(), className),
+        "data-active": value,
+        ...rest,
+        children: renderIcon()
+      }
+    );
+  })
+);
+CheckboxIcon.displayName = "Checkbox.Icon";
 var CheckboxLabel = memo(
   forwardRef(function CheckboxLabel2(props, ref) {
     const { children, className, ...rest } = props;
@@ -195,12 +227,23 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
     }
     onKeyDown == null ? void 0 : onKeyDown(e);
   });
+  const isIconElement = (child) => {
+    var _a;
+    return isValidElement(child) && (child.type === CheckboxIcon || ((_a = child.type) == null ? void 0 : _a.displayName) === "Checkbox.Icon");
+  };
+  const childArray = Children.toArray(children);
+  const iconChild = childArray.find(isIconElement);
+  const otherChildren = childArray.filter((child) => !isIconElement(child));
   const renderChildren = () => {
-    if (typeof children === "string" || typeof children === "number") {
-      return /* @__PURE__ */ jsx(CheckboxLabel, { children });
+    if (otherChildren.length === 1) {
+      const child = otherChildren[0];
+      if (typeof child === "string" || typeof child === "number") {
+        return /* @__PURE__ */ jsx(CheckboxLabel, { children: child });
+      }
     }
-    return children;
+    return otherChildren;
   };
+  const renderDefaultIcon = () => /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null });
   return /* @__PURE__ */ jsx(
     CheckboxContext.Provider,
     {
@@ -234,7 +277,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: tv.box(), children: mixed ? /* @__PURE__ */ jsx(Indeterminate, {}) : value ? /* @__PURE__ */ jsx(Check, {}) : null })
+          iconChild ?? renderDefaultIcon()
         ] }),
         renderChildren()
       ] })
@@ -243,6 +286,7 @@ var CheckboxBase = forwardRef(function Checkbox(props, ref) {
 });
 var MemoizedCheckbox = memo(CheckboxBase);
 var Checkbox2 = MemoizedCheckbox;
+Checkbox2.Icon = CheckboxIcon;
 Checkbox2.Label = CheckboxLabel;
 Checkbox2.displayName = "Checkbox";
 export {

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-image-paint/color-image-paint.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Button } from "../../../button/dist/index.js";
-import { Range } from "../../../range/dist/index.js";
+import { Range as Range2 } from "../../../range/dist/index.js";
 import React__default, { memo, useState, useRef, useMemo, useEffect, useCallback } from "react";
 import { useEventCallback } from "usehooks-ts";
 import { ColorImageToolbar } from "./color-image-toolbar.js";
@@ -209,7 +209,7 @@ const ColorImagePaint = memo(function ColorImagePaint2(props) {
           return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
             /* @__PURE__ */ jsx("span", { className: styles.adjustLabel(), children: (_a2 = features == null ? void 0 : features.labels) == null ? void 0 : _a2[filterName] }),
             /* @__PURE__ */ jsx(
-              Range,
+              Range2,
               {
                 min: -100,
                 max: 100,

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
+};