@cognitiv/components-web 1.0.4 → 1.1.0

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

@@ -0,0 +1,50 @@
+import type { ColorSliderVariants } from "./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, };

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

@@ -0,0 +1,205 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { ColorSlider, SliderTrack, ColorThumb, SliderOutput } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { colorSliderVariants } from './styles.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Validation Utilities
+ * -----------------------------------------------------------------------------------------------*/
+
+/** Maps channels to their required color space (for channels that are color-space specific) */
+const CHANNEL_TO_REQUIRED_COLORSPACE = {
+  blue: "rgb",
+  brightness: "hsb",
+  green: "rgb",
+  lightness: "hsl",
+  red: "rgb"
+};
+
+/** Channels that only work with HSL or HSB (not RGB) */
+const HSL_HSB_ONLY_CHANNELS = new Set(["hue", "saturation"]);
+
+/**
+ * Validates and returns a valid colorSpace for the given channel.
+ * If an invalid combination is detected, logs a warning and returns the correct colorSpace.
+ */
+function getValidColorSpace(channel, colorSpace) {
+  // Check if channel requires a specific color space (e.g., "red" requires "rgb")
+  const requiredSpace = CHANNEL_TO_REQUIRED_COLORSPACE[channel];
+  if (requiredSpace && colorSpace && colorSpace !== requiredSpace) {
+    // eslint-disable-next-line no-console
+    console.warn(`[Cognitiv ColorSlider] Invalid combination: channel="${channel}" requires colorSpace="${requiredSpace}", ` + `but received colorSpace="${colorSpace}". Auto-correcting to "${requiredSpace}".`);
+    return requiredSpace;
+  }
+
+  // Check if channel is HSL/HSB only (hue, saturation) but RGB was specified
+  if (HSL_HSB_ONLY_CHANNELS.has(channel) && colorSpace === "rgb") {
+    // eslint-disable-next-line no-console
+    console.warn(`[Cognitiv ColorSlider] Invalid combination: channel="${channel}" is not available in RGB color space. ` + `Use colorSpace="hsl" or colorSpace="hsb" instead. Auto-correcting to "hsl".`);
+    return "hsl";
+  }
+  return colorSpace;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Context
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorSliderContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorSliderRoot = ({
+  channel,
+  children,
+  className,
+  colorSpace,
+  orientation = "horizontal",
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => colorSliderVariants({}), []);
+
+  // Validate and auto-correct invalid channel/colorSpace combinations
+  const validColorSpace = getValidColorSpace(channel, colorSpace);
+  return /*#__PURE__*/jsx(ColorSlider, {
+    channel: channel,
+    colorSpace: validColorSpace,
+    "data-slot": "color-slider",
+    orientation: orientation,
+    ...props,
+    className: composeTwRenderProps(className, slots.base()),
+    children: values => /*#__PURE__*/jsx(ColorSliderContext, {
+      value: {
+        channel,
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Output
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorSliderOutput = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorSliderContext);
+  return /*#__PURE__*/jsx(SliderOutput, {
+    className: composeTwRenderProps(className, slots?.output()),
+    "data-slot": "color-slider-output",
+    ...props,
+    children: children ? values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    }) : ({
+      state
+    }) => state.getThumbValueLabel(0)
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Track
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorSliderTrack = ({
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    channel,
+    slots,
+    state
+  } = useContext(ColorSliderContext);
+  // Calculate start and end colors for the gradient edge caps
+  const displayColor = state?.state?.getDisplayColor();
+  const edgeColors = React__default.useMemo(() => {
+    // Access color through state.state.value (ColorSliderState.value)
+    if (!displayColor || !channel) {
+      return {
+        end: "transparent",
+        start: "transparent"
+      };
+    }
+    const range = displayColor.getChannelRange(channel);
+
+    // Get colors at min and max values of the channel
+    const startColor = displayColor.withChannelValue(channel, range.minValue);
+    const endColor = displayColor.withChannelValue(channel, range.maxValue);
+    return {
+      end: endColor.toString("css"),
+      start: startColor.toString("css")
+    };
+  }, [channel, displayColor]);
+  return /*#__PURE__*/jsx(SliderTrack, {
+    className: composeTwRenderProps(className, slots?.track()),
+    "data-slot": "color-slider-track",
+    style: ({
+      defaultStyle,
+      ...rest
+    }) => ({
+      // Pass edge colors as CSS custom properties for ::before and ::after
+      "--track-end-color": edgeColors.end,
+      "--track-start-color": edgeColors.start,
+      // Add transparency checkerboard pattern for alpha channel
+      background: `${defaultStyle.background}, repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px`,
+      ...(typeof style === "function" ? style({
+        defaultStyle,
+        ...rest
+      }) : style)
+    }),
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * ColorSlider Thumb
+ * -----------------------------------------------------------------------------------------------*/
+
+const ColorSliderThumb = ({
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorSliderContext);
+  return /*#__PURE__*/jsx(ColorThumb, {
+    className: composeTwRenderProps(className, slots?.thumb()),
+    "data-slot": "color-slider-thumb",
+    style: ({
+      defaultStyle,
+      isDisabled,
+      ...rest
+    }) => ({
+      ...defaultStyle,
+      backgroundColor: isDisabled ? undefined : defaultStyle.backgroundColor,
+      ...(typeof style === "function" ? style({
+        defaultStyle,
+        isDisabled,
+        ...rest
+      }) : style)
+    }),
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+export { ColorSliderOutput, ColorSliderRoot, ColorSliderThumb, ColorSliderTrack };

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

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { ColorSliderOutput, ColorSliderRoot, ColorSliderThumb, ColorSliderTrack } from "./color-slider";
+export declare const ColorSlider: (({ channel, children, className, colorSpace, orientation, ...props }: import("./color-slider").ColorSliderRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Output: ({ children, className, ...props }: import("./color-slider").ColorSliderOutputProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ channel, children, className, colorSpace, orientation, ...props }: import("./color-slider").ColorSliderRootProps) => import("react/jsx-runtime").JSX.Element;
+    Thumb: ({ children, className, style, ...props }: import("./color-slider").ColorSliderThumbProps) => import("react/jsx-runtime").JSX.Element;
+    Track: ({ children, className, style, ...props }: import("./color-slider").ColorSliderTrackProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorSlider = {
+    Props: ComponentProps<typeof ColorSliderRoot>;
+    RootProps: ComponentProps<typeof ColorSliderRoot>;
+    OutputProps: ComponentProps<typeof ColorSliderOutput>;
+    TrackProps: ComponentProps<typeof ColorSliderTrack>;
+    ThumbProps: ComponentProps<typeof ColorSliderThumb>;
+};
+export { ColorSliderRoot, ColorSliderOutput, ColorSliderTrack, ColorSliderThumb };
+export type { ColorSliderRootProps, ColorSliderRootProps as ColorSliderProps, ColorSliderOutputProps, ColorSliderTrackProps, ColorSliderThumbProps, HSLChannel, HSBChannel, RGBChannel, HSLHSBSharedChannel, AlphaChannel, ColorSliderChannelProps, } from "./color-slider";
+export { colorSliderVariants } from "./styles";
+export type { ColorSliderVariants } from "./styles";

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

@@ -0,0 +1,15 @@
+"use strict";
+import { ColorSliderRoot, ColorSliderTrack, ColorSliderThumb, ColorSliderOutput } from './color-slider.js';
+export { colorSliderVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorSlider = Object.assign(ColorSliderRoot, {
+  Output: ColorSliderOutput,
+  Root: ColorSliderRoot,
+  Thumb: ColorSliderThumb,
+  Track: ColorSliderTrack
+});
+
+export { ColorSlider, ColorSliderOutput, ColorSliderRoot, ColorSliderThumb, ColorSliderTrack };

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

@@ -0,0 +1,45 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const colorSliderVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            output?: import("tailwind-merge").ClassNameValue;
+            track?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            output?: import("tailwind-merge").ClassNameValue;
+            track?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    output: string;
+    thumb: string;
+    track: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            output?: import("tailwind-merge").ClassNameValue;
+            track?: import("tailwind-merge").ClassNameValue;
+            thumb?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    output: string;
+    thumb: string;
+    track: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    output: string;
+    thumb: string;
+    track: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ColorSliderVariants = VariantProps<typeof colorSliderVariants>;

package/dist/components/color-slider/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const colorSliderVariants = tv({
+  slots: {
+    base: "color-slider",
+    output: "color-slider__output",
+    thumb: "color-slider__thumb",
+    track: "color-slider__track"
+  }
+});
+
+export { colorSliderVariants };

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

@@ -0,0 +1,8 @@
+import type { ColorSwatchVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import { ColorSwatch as ColorSwatchPrimitive } from "react-aria-components";
+interface ColorSwatchRootProps extends ComponentPropsWithRef<typeof ColorSwatchPrimitive>, ColorSwatchVariants {
+}
+declare const ColorSwatchRoot: ({ className, shape, size, style, ...props }: ColorSwatchRootProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorSwatchRoot };
+export type { ColorSwatchRootProps };

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

@@ -0,0 +1,31 @@
+"use client";
+import { ColorSwatch } from 'react-aria-components';
+import { composeTwRenderProps } from '../../utils/compose.js';
+import { colorSwatchVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ColorSwatchRoot = ({
+  className,
+  shape,
+  size,
+  style,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx(ColorSwatch, {
+    ...props,
+    className: composeTwRenderProps(className, colorSwatchVariants({
+      shape,
+      size
+    })),
+    "data-slot": "color-swatch",
+    style: renderProps => {
+      const userStyle = typeof style === "function" ? style(renderProps) : style;
+      return {
+        "--color-swatch-current": renderProps.color.toString("css"),
+        ...userStyle
+      };
+    }
+  });
+};
+
+export { ColorSwatchRoot };

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

@@ -0,0 +1,13 @@
+import type { ComponentProps } from "react";
+import { ColorSwatchRoot } from "./color-swatch";
+export declare const ColorSwatch: (({ className, shape, size, style, ...props }: import("./color-swatch").ColorSwatchRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, shape, size, style, ...props }: import("./color-swatch").ColorSwatchRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type ColorSwatch = {
+    Props: ComponentProps<typeof ColorSwatchRoot>;
+    RootProps: ComponentProps<typeof ColorSwatchRoot>;
+};
+export { ColorSwatchRoot };
+export type { ColorSwatchRootProps, ColorSwatchRootProps as ColorSwatchProps, } from "./color-swatch";
+export { colorSwatchVariants } from "./styles";
+export type { ColorSwatchVariants } from "./styles";

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

@@ -0,0 +1,12 @@
+"use strict";
+import { ColorSwatchRoot } from './color-swatch.js';
+export { colorSwatchVariants } from './styles.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const ColorSwatch = Object.assign(ColorSwatchRoot, {
+  Root: ColorSwatchRoot
+});
+
+export { ColorSwatch, ColorSwatchRoot };

package/dist/components/color-swatch/styles.d.ts

@@ -0,0 +1,39 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const colorSwatchVariants: import("tailwind-variants").TVReturnType<{
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+}, undefined, "color-swatch", {
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+}, undefined, "color-swatch", unknown, unknown, undefined>>;
+export type ColorSwatchVariants = VariantProps<typeof colorSwatchVariants>;

package/dist/components/color-swatch/styles.js

@@ -0,0 +1,25 @@
+"use strict";
+import { tv } from 'tailwind-variants';
+
+const colorSwatchVariants = tv({
+  base: "color-swatch",
+  defaultVariants: {
+    shape: "circle",
+    size: "md"
+  },
+  variants: {
+    shape: {
+      circle: "color-swatch--circle",
+      square: "color-swatch--square"
+    },
+    size: {
+      lg: "color-swatch--lg",
+      md: "color-swatch--md",
+      sm: "color-swatch--sm",
+      xl: "color-swatch--xl",
+      xs: "color-swatch--xs"
+    }
+  }
+});
+
+export { colorSwatchVariants };

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

@@ -0,0 +1,20 @@
+import type { ColorSwatchPickerVariants } from "./styles";
+import type { ComponentPropsWithRef } from "react";
+import type { ColorSwatchPickerItemRenderProps } from "react-aria-components";
+import React from "react";
+import { ColorSwatchPickerItem as ColorSwatchPickerItemPrimitive, ColorSwatchPicker as ColorSwatchPickerPrimitive, ColorSwatch as ColorSwatchPrimitive } from "react-aria-components";
+interface ColorSwatchPickerRootProps extends ComponentPropsWithRef<typeof ColorSwatchPickerPrimitive>, ColorSwatchPickerVariants {
+}
+declare const ColorSwatchPickerRoot: ({ children, className, layout, size, variant, ...props }: ColorSwatchPickerRootProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorSwatchPickerItemProps extends ComponentPropsWithRef<typeof ColorSwatchPickerItemPrimitive> {
+}
+declare const ColorSwatchPickerItem: ({ children, className, ...props }: ColorSwatchPickerItemProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorSwatchPickerSwatchProps extends ComponentPropsWithRef<typeof ColorSwatchPrimitive> {
+}
+declare const ColorSwatchPickerSwatch: ({ className, ...props }: ColorSwatchPickerSwatchProps) => import("react/jsx-runtime").JSX.Element;
+interface ColorSwatchPickerIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "children"> {
+    children?: React.ReactNode | ((props: ColorSwatchPickerItemRenderProps) => React.ReactNode);
+}
+declare const ColorSwatchPickerIndicator: ({ children, className, ...props }: ColorSwatchPickerIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export { ColorSwatchPickerRoot, ColorSwatchPickerItem, ColorSwatchPickerSwatch, ColorSwatchPickerIndicator, };
+export type { ColorSwatchPickerRootProps, ColorSwatchPickerItemProps, ColorSwatchPickerSwatchProps, ColorSwatchPickerIndicatorProps, };

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

@@ -0,0 +1,149 @@
+"use client";
+import React__default, { useContext, createContext } from 'react';
+import { ColorSwatchPicker, ColorSwatch, ColorSwatchPickerItem as ColorSwatchPickerItem$1 } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { colorSwatchPickerVariants } from './styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ColorSwatchPickerContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+| * ColorSwatchPickerItem Context
+| * -----------------------------------------------------------------------------------------------*/
+
+const ColorSwatchPickerItemContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+| * ColorSwatchPicker Root
+| * -----------------------------------------------------------------------------------------------*/
+
+const ColorSwatchPickerRoot = ({
+  children,
+  className,
+  layout,
+  size,
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => colorSwatchPickerVariants({
+    layout,
+    size,
+    variant
+  }), [layout, size, variant]);
+  return /*#__PURE__*/jsx(ColorSwatchPickerContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(ColorSwatchPicker, {
+      "data-slot": "color-swatch-picker",
+      ...props,
+      className: composeTwRenderProps(className, slots.base()),
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+| * ColorSwatchPicker Item
+| * -----------------------------------------------------------------------------------------------*/
+
+const ColorSwatchPickerItem = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorSwatchPickerContext);
+  return /*#__PURE__*/jsx(ColorSwatchPickerItem$1, {
+    "data-slot": "color-swatch-picker-item",
+    ...props,
+    className: composeTwRenderProps(className, slots?.item()),
+    style: renderProps => ({
+      "--color-swatch-current": renderProps.color.toString("css")
+    }),
+    children: renderProps => /*#__PURE__*/jsx(ColorSwatchPickerItemContext, {
+      value: {
+        state: renderProps
+      },
+      children: typeof children === "function" ? children(renderProps) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+| * ColorSwatchPicker Swatch
+| * -----------------------------------------------------------------------------------------------*/
+
+const ColorSwatchPickerSwatch = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorSwatchPickerContext);
+  return /*#__PURE__*/jsx(ColorSwatch, {
+    className: composeTwRenderProps(className, slots?.swatch()),
+    "data-slot": "color-swatch-picker-swatch",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+| * ColorSwatchPicker Indicator
+| * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Calculate relative luminance of a color
+ * Uses the formula: L = 0.2126 * R + 0.7152 * G + 0.0722 * B
+ * Returns a value between 0 (black) and 1 (white)
+ */
+function getColorLuminance(color) {
+  // Get RGB values (0-255 range)
+  const r = color.getChannelValue("red");
+  const g = color.getChannelValue("green");
+  const b = color.getChannelValue("blue");
+
+  // Normalize to 0-1 and calculate luminance
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+}
+const ColorSwatchPickerIndicator = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(ColorSwatchPickerContext);
+  const {
+    state
+  } = useContext(ColorSwatchPickerItemContext);
+
+  // Determine if the background color is light (luminance > 0.5)
+  // Use white checkmark on dark backgrounds, black on light backgrounds
+  const isLightColor = state?.color ? getColorLuminance(state.color) > 0.5 : false;
+  const content = typeof children === "function" ? children(state ?? {}) : children ? children : /*#__PURE__*/jsx("svg", {
+    "aria-hidden": "true",
+    "data-slot": "color-swatch-picker-checkmark",
+    fill: "none",
+    role: "presentation",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.5,
+    viewBox: "0 0 12 12",
+    children: /*#__PURE__*/jsx("polyline", {
+      points: "2.5 6 5 8.5 9.5 3"
+    })
+  });
+  return /*#__PURE__*/jsx("span", {
+    "aria-hidden": "true",
+    className: composeSlotClassName(slots?.indicator, className),
+    "data-light-color": isLightColor ? "true" : undefined,
+    "data-slot": "color-swatch-picker-indicator",
+    ...props,
+    children: content
+  });
+};
+
+export { ColorSwatchPickerIndicator, ColorSwatchPickerItem, ColorSwatchPickerRoot, ColorSwatchPickerSwatch };