@masaraxui/react 1.0.0

package/dist/components/color-area/color-area.js

@@ -0,0 +1,70 @@
+"use client";
+import { colorAreaVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { ColorArea, ColorThumb } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ColorAreaContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorArea Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorAreaRoot = ({
+  children,
+  className,
+  showDots,
+  style,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => colorAreaVariants({
+    showDots
+  }), [showDots]);
+  return /*#__PURE__*/jsx(ColorAreaContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(ColorArea, {
+      ...props,
+      className: composeTwRenderProps(className, slots.base()),
+      "data-slot": "color-area",
+      style: renderProps => {
+        const userStyle = typeof style === "function" ? style(renderProps) : style;
+        return {
+          "--color-area-background": renderProps.defaultStyle.background,
+          ...userStyle
+        };
+      },
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorArea Thumb
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorAreaThumb = ({
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorAreaContext);
+  return /*#__PURE__*/jsx(ColorThumb, {
+    className: composeTwRenderProps(className, slots?.thumb()),
+    "data-slot": "color-area-thumb",
+    style: renderProps => {
+      const userStyle = typeof style === "function" ? style(renderProps) : style;
+      return {
+        "--color-area-thumb-color": renderProps.defaultStyle.backgroundColor,
+        ...userStyle
+      };
+    },
+    ...props
+  });
+};
+
+export { ColorAreaRoot, ColorAreaThumb };

package/dist/components/color-area/index.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { ColorAreaRoot, ColorAreaThumb } from "./color-area";
+export declare const ColorArea: (({ children, className, showDots, style, ...props }: import("./color-area").ColorAreaRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, showDots, style, ...props }: import("./color-area").ColorAreaRootProps) => import("react/jsx-runtime").JSX.Element;
+    Thumb: ({ className, style, ...props }: import("./color-area").ColorAreaThumbProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorArea = {
+    Props: ComponentProps<typeof ColorAreaRoot>;
+    RootProps: ComponentProps<typeof ColorAreaRoot>;
+    ThumbProps: ComponentProps<typeof ColorAreaThumb>;
+};
+export { ColorAreaRoot, ColorAreaThumb };
+export type { ColorAreaRootProps, ColorAreaRootProps as ColorAreaProps, ColorAreaThumbProps, } from "./color-area";
+export { colorAreaVariants } from "@masaraxui/styles";
+export type { ColorAreaVariants } from "@masaraxui/styles";

package/dist/components/color-area/index.js

@@ -0,0 +1,13 @@
+"use strict";
+import { ColorAreaRoot, ColorAreaThumb } from './color-area.js';
+export { colorAreaVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorArea = Object.assign(ColorAreaRoot, {
+  Root: ColorAreaRoot,
+  Thumb: ColorAreaThumb
+});
+
+export { ColorArea, ColorAreaRoot, ColorAreaThumb };

package/dist/components/color-field/color-field.d.ts

@@ -0,0 +1,9 @@
+import type { ColorFieldVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { Color } from "react-aria-components";
+import { ColorField as ColorFieldPrimitive } from "react-aria-components";
+interface ColorFieldRootProps extends ComponentPropsWithRef<typeof ColorFieldPrimitive>, ColorFieldVariants {
+}
+declare function ColorFieldRoot({ children, className, fullWidth, ...props }: ColorFieldRootProps): import("react/jsx-runtime").JSX.Element;
+export { ColorFieldRoot };
+export type { ColorFieldRootProps, Color as ColorValue };

package/dist/components/color-field/color-field.js

@@ -0,0 +1,29 @@
+"use client";
+import { colorFieldVariants } from '@masaraxui/styles';
+import React__default from 'react';
+import { ColorField } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function ColorFieldRoot({
+  children,
+  className,
+  fullWidth,
+  ...props
+}) {
+  const styles = React__default.useMemo(() => colorFieldVariants({
+    fullWidth
+  }), [fullWidth]);
+  return /*#__PURE__*/jsx(ColorField, {
+    "data-required": dataAttr(props.isRequired),
+    "data-slot": "color-field",
+    ...props,
+    className: composeTwRenderProps(className, styles),
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+}
+
+export { ColorFieldRoot };

package/dist/components/color-field/index.d.ts

@@ -0,0 +1,22 @@
+import type { ComponentProps } from "react";
+import { ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupRoot, ColorInputGroupSuffix } from "../color-input-group";
+import { ColorFieldRoot } from "./color-field";
+export declare const ColorField: typeof ColorFieldRoot & {
+    Root: typeof ColorFieldRoot;
+    Group: ({ children, className, fullWidth, variant, ...props }: import("../color-input-group").ColorInputGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ className, ...props }: import("../color-input-group").ColorInputGroupInputProps) => import("react/jsx-runtime").JSX.Element;
+    Prefix: ({ children, className, ...props }: import("../color-input-group").ColorInputGroupPrefixProps) => import("react/jsx-runtime").JSX.Element;
+    Suffix: ({ children, className, ...props }: import("../color-input-group").ColorInputGroupSuffixProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorField = {
+    Props: ComponentProps<typeof ColorFieldRoot>;
+    RootProps: ComponentProps<typeof ColorFieldRoot>;
+    GroupProps: ComponentProps<typeof ColorInputGroupRoot>;
+    InputProps: ComponentProps<typeof ColorInputGroupInput>;
+    PrefixProps: ComponentProps<typeof ColorInputGroupPrefix>;
+    SuffixProps: ComponentProps<typeof ColorInputGroupSuffix>;
+};
+export { ColorFieldRoot };
+export type { ColorFieldRootProps, ColorFieldRootProps as ColorFieldProps, ColorValue, } from "./color-field";
+export { colorFieldVariants } from "@masaraxui/styles";
+export type { ColorFieldVariants } from "@masaraxui/styles";

package/dist/components/color-field/index.js

@@ -0,0 +1,18 @@
+"use strict";
+import '../color-input-group/index.js';
+import { ColorFieldRoot } from './color-field.js';
+export { colorFieldVariants } from '@masaraxui/styles';
+import { ColorInputGroupSuffix, ColorInputGroupPrefix, ColorInputGroupInput, ColorInputGroupRoot } from '../color-input-group/color-input-group.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorField = Object.assign(ColorFieldRoot, {
+  Root: ColorFieldRoot,
+  Group: ColorInputGroupRoot,
+  Input: ColorInputGroupInput,
+  Prefix: ColorInputGroupPrefix,
+  Suffix: ColorInputGroupSuffix
+});
+
+export { ColorField, ColorFieldRoot };

package/dist/components/color-input-group/color-input-group.d.ts

@@ -0,0 +1,19 @@
+import type { ColorInputGroupVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { InputProps as InputPrimitiveProps } from "react-aria-components";
+import { Group as GroupPrimitive } from "react-aria-components";
+interface ColorInputGroupRootProps extends ComponentPropsWithRef<typeof GroupPrimitive>, ColorInputGroupVariants {
+}
+declare const ColorInputGroupRoot: ({ children, className, fullWidth, variant, ...props }: ColorInputGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorInputGroupPrefixProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ColorInputGroupPrefix: ({ children, className, ...props }: ColorInputGroupPrefixProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorInputGroupInputProps extends InputPrimitiveProps {
+    className?: string;
+}
+declare const ColorInputGroupInput: ({ className, ...props }: ColorInputGroupInputProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorInputGroupSuffixProps extends ComponentPropsWithRef<"div"> {
+}
+declare const ColorInputGroupSuffix: ({ children, className, ...props }: ColorInputGroupSuffixProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorInputGroupRoot, ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupSuffix };
+export type { ColorInputGroupRootProps, ColorInputGroupInputProps, ColorInputGroupPrefixProps, ColorInputGroupSuffixProps, };

package/dist/components/color-input-group/color-input-group.js

@@ -0,0 +1,98 @@
+"use client";
+import { colorInputGroupVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { Group, Input } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const ColorInputGroupContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorInputGroup Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorInputGroupRoot = ({
+  children,
+  className,
+  fullWidth,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => colorInputGroupVariants({
+    fullWidth,
+    variant
+  }), [fullWidth, variant]);
+  return /*#__PURE__*/jsx(ColorInputGroupContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(Group, {
+      className: composeTwRenderProps(className, slots?.base()),
+      "data-slot": "color-input-group",
+      ...props,
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorInputGroup Prefix
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorInputGroupPrefix = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorInputGroupContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.prefix, className),
+    "data-slot": "color-input-group-prefix",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorInputGroup Input
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorInputGroupInput = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorInputGroupContext);
+  return /*#__PURE__*/jsx(Input, {
+    className: composeTwRenderProps(className, slots?.input()),
+    "data-slot": "color-input-group-input",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorInputGroup Suffix
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorInputGroupSuffix = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorInputGroupContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.suffix, className),
+    "data-slot": "color-input-group-suffix",
+    ...props,
+    children: children
+  });
+};
+
+export { ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupRoot, ColorInputGroupSuffix };

package/dist/components/color-input-group/index.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupRoot, ColorInputGroupSuffix } from "./color-input-group";
+export declare const ColorInputGroup: (({ children, className, fullWidth, variant, ...props }: import("./color-input-group").ColorInputGroupRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, fullWidth, variant, ...props }: import("./color-input-group").ColorInputGroupRootProps) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ className, ...props }: import("./color-input-group").ColorInputGroupInputProps) => import("react/jsx-runtime").JSX.Element;
+    Prefix: ({ children, className, ...props }: import("./color-input-group").ColorInputGroupPrefixProps) => import("react/jsx-runtime").JSX.Element;
+    Suffix: ({ children, className, ...props }: import("./color-input-group").ColorInputGroupSuffixProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorInputGroup = {
+    Props: ComponentProps<typeof ColorInputGroupRoot>;
+    RootProps: ComponentProps<typeof ColorInputGroupRoot>;
+    InputProps: ComponentProps<typeof ColorInputGroupInput>;
+    PrefixProps: ComponentProps<typeof ColorInputGroupPrefix>;
+    SuffixProps: ComponentProps<typeof ColorInputGroupSuffix>;
+};
+export { ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupRoot, ColorInputGroupSuffix };
+export type { ColorInputGroupRootProps, ColorInputGroupRootProps as ColorInputGroupProps, ColorInputGroupInputProps, ColorInputGroupPrefixProps, ColorInputGroupSuffixProps, } from "./color-input-group";
+export { colorInputGroupVariants } from "@masaraxui/styles";
+export type { ColorInputGroupVariants } from "@masaraxui/styles";

package/dist/components/color-input-group/index.js

@@ -0,0 +1,15 @@
+"use strict";
+import { ColorInputGroupRoot, ColorInputGroupSuffix, ColorInputGroupPrefix, ColorInputGroupInput } from './color-input-group.js';
+export { colorInputGroupVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorInputGroup = Object.assign(ColorInputGroupRoot, {
+  Root: ColorInputGroupRoot,
+  Input: ColorInputGroupInput,
+  Prefix: ColorInputGroupPrefix,
+  Suffix: ColorInputGroupSuffix
+});
+
+export { ColorInputGroup, ColorInputGroupInput, ColorInputGroupPrefix, ColorInputGroupRoot, ColorInputGroupSuffix };

package/dist/components/color-picker/color-picker.d.ts

@@ -0,0 +1,21 @@
+import type { ColorPickerVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { ColorPickerProps as ColorPickerPrimitiveProps } from "react-aria-components";
+import React from "react";
+import { Button as ButtonPrimitive, Popover as PopoverPrimitive } from "react-aria-components";
+interface ColorPickerRootProps extends Omit<ColorPickerPrimitiveProps, "children">, ColorPickerVariants {
+    /** Additional class name for the wrapper element */
+    className?: string;
+    /** Content of the color picker (Trigger, Popover, etc.) */
+    children: React.ReactNode;
+}
+declare const ColorPickerRoot: ({ children, className, ...props }: ColorPickerRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorPickerTriggerProps extends ComponentPropsWithRef<typeof ButtonPrimitive> {
+}
+declare const ColorPickerTrigger: ({ children, className, ...props }: ColorPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorPickerPopoverProps extends Omit<ComponentPropsWithRef<typeof PopoverPrimitive>, "children"> {
+    children: React.ReactNode;
+}
+declare const ColorPickerPopover: ({ children, className, placement, ...props }: ColorPickerPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorPickerRoot, ColorPickerTrigger, ColorPickerPopover };
+export type { ColorPickerRootProps, ColorPickerTriggerProps, ColorPickerPopoverProps };

package/dist/components/color-picker/color-picker.js

@@ -0,0 +1,86 @@
+"use client";
+import { colorPickerVariants } from '@masaraxui/styles';
+import React__default, { createContext, useContext } from 'react';
+import { ColorPicker, DialogTrigger, Popover, Button } from 'react-aria-components';
+import { composeSlotClassName, composeTwRenderProps } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { SurfaceContext } from '../surface/surface.js';
+
+const ColorPickerContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorPicker Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorPickerRoot = ({
+  children,
+  className,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => colorPickerVariants(), []);
+  return /*#__PURE__*/jsx(ColorPickerContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(ColorPicker, {
+      ...props,
+      children: /*#__PURE__*/jsx(DialogTrigger, {
+        children: /*#__PURE__*/jsx("div", {
+          className: composeSlotClassName(slots?.base, className),
+          "data-slot": "color-picker",
+          children: children
+        })
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorPicker Trigger
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorPickerTrigger = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorPickerContext);
+  return /*#__PURE__*/jsx(Button, {
+    className: composeTwRenderProps(className, slots?.trigger()),
+    "data-slot": "color-picker-trigger",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorPicker Popover
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorPickerPopover = ({
+  children,
+  className,
+  placement = "bottom left",
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorPickerContext);
+  return /*#__PURE__*/jsx(SurfaceContext, {
+    value: {
+      variant: "default"
+    },
+    children: /*#__PURE__*/jsx(Popover, {
+      ...props,
+      className: composeTwRenderProps(className, slots?.popover()),
+      placement: placement,
+      children: children
+    })
+  });
+};
+
+export { ColorPickerPopover, ColorPickerRoot, ColorPickerTrigger };

package/dist/components/color-picker/index.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { ColorPickerPopover, ColorPickerRoot, ColorPickerTrigger } from "./color-picker";
+export declare const ColorPicker: (({ children, className, ...props }: import("./color-picker").ColorPickerRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, ...props }: import("./color-picker").ColorPickerRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ children, className, ...props }: import("./color-picker").ColorPickerTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Popover: ({ children, className, placement, ...props }: import("./color-picker").ColorPickerPopoverProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorPicker = {
+    Props: ComponentProps<typeof ColorPickerRoot>;
+    RootProps: ComponentProps<typeof ColorPickerRoot>;
+    TriggerProps: ComponentProps<typeof ColorPickerTrigger>;
+    PopoverProps: ComponentProps<typeof ColorPickerPopover>;
+};
+export { ColorPickerPopover, ColorPickerRoot, ColorPickerTrigger };
+export type { ColorPickerRootProps, ColorPickerRootProps as ColorPickerProps, ColorPickerTriggerProps, ColorPickerPopoverProps, } from "./color-picker";
+export { colorPickerVariants } from "@masaraxui/styles";
+export type { ColorPickerVariants } from "@masaraxui/styles";

package/dist/components/color-picker/index.js

@@ -0,0 +1,14 @@
+"use strict";
+import { ColorPickerRoot, ColorPickerPopover, ColorPickerTrigger } from './color-picker.js';
+export { colorPickerVariants } from '@masaraxui/styles';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorPicker = Object.assign(ColorPickerRoot, {
+  Root: ColorPickerRoot,
+  Trigger: ColorPickerTrigger,
+  Popover: ColorPickerPopover
+});
+
+export { ColorPicker, ColorPickerPopover, ColorPickerRoot, ColorPickerTrigger };

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

@@ -0,0 +1,50 @@
+import type { ColorSliderVariants } from "@masaraxui/styles";
+import type { ComponentPropsWithRef } from "react";
+import type { ColorSpace } from "react-aria-components";
+import { ColorSlider as ColorSliderPrimitive, ColorThumb as ColorThumbPrimitive, SliderOutput as SliderOutputPrimitive, SliderTrack as SliderTrackPrimitive } from "react-aria-components";
+/** Channels available in HSL color space */
+type HSLChannel = "hue" | "saturation" | "lightness" | "alpha";
+/** Channels available in HSB color space */
+type HSBChannel = "hue" | "saturation" | "brightness" | "alpha";
+/** Channels available in RGB color space */
+type RGBChannel = "red" | "green" | "blue" | "alpha";
+/** Channels shared between HSL and HSB (but NOT RGB) */
+type HSLHSBSharedChannel = "hue" | "saturation";
+/** Alpha channel works across ALL color spaces */
+type AlphaChannel = "alpha";
+/**
+ * Discriminated union type for valid channel/colorSpace combinations.
+ * This ensures TypeScript will error on invalid combinations like
+ * `channel="red"` with `colorSpace="hsl"` or `channel="saturation"` with `colorSpace="rgb"`.
+ */
+type ColorSliderChannelProps = {
+    channel: HSLChannel;
+    colorSpace?: "hsl";
+} | {
+    channel: HSBChannel;
+    colorSpace?: "hsb";
+} | {
+    channel: RGBChannel;
+    colorSpace?: "rgb";
+} | {
+    channel: HSLHSBSharedChannel;
+    colorSpace?: "hsl" | "hsb";
+} | {
+    channel: AlphaChannel;
+    colorSpace?: ColorSpace;
+};
+interface ColorSliderRootBaseProps extends Omit<ComponentPropsWithRef<typeof ColorSliderPrimitive>, "channel" | "colorSpace">, ColorSliderVariants {
+}
+type ColorSliderRootProps = ColorSliderRootBaseProps & ColorSliderChannelProps;
+declare const ColorSliderRoot: ({ channel, children, className, colorSpace, orientation, ...props }: ColorSliderRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorSliderOutputProps extends ComponentPropsWithRef<typeof SliderOutputPrimitive> {
+}
+declare const ColorSliderOutput: ({ children, className, ...props }: ColorSliderOutputProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorSliderTrackProps extends ComponentPropsWithRef<typeof SliderTrackPrimitive> {
+}
+declare const ColorSliderTrack: ({ children, className, style, ...props }: ColorSliderTrackProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorSliderThumbProps extends ComponentPropsWithRef<typeof ColorThumbPrimitive> {
+}
+declare const ColorSliderThumb: ({ children, className, style, ...props }: ColorSliderThumbProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorSliderRoot, ColorSliderOutput, ColorSliderTrack, ColorSliderThumb };
+export type { ColorSliderRootProps, ColorSliderOutputProps, ColorSliderTrackProps, ColorSliderThumbProps, HSLChannel, HSBChannel, RGBChannel, HSLHSBSharedChannel, AlphaChannel, ColorSliderChannelProps, };