@urcolor/vue 0.0.1

package/README.md

@@ -0,0 +1,155 @@
+# @urcolor/vue
+
+Headless, accessible color picker components for Vue 3. Unstyled primitives — bring your own styles.
+
+## Installation
+
+```bash
+bun add @urcolor/vue
+```
+
+## Features
+
+- **Headless** — Radix/Reka UI-style unstyled primitives with full styling freedom
+- **12 Color Spaces** — HSL, HSV, HWB, OKLCh, OKLab, LCh, Lab, RGB, Display P3, A98 RGB, ProPhoto RGB, Rec. 2020
+- **Accessible** — Keyboard navigation, ARIA attributes, roving focus
+- **WebGL Gradients** — GPU-accelerated canvas backgrounds via `@urcolor/core`
+- **Alpha Support** — Built-in transparency controls with checkerboard backgrounds
+- **Form Integration** — Hidden inputs for native form submission
+
+## Components
+
+### ColorArea
+
+Two-dimensional color selection for any pair of channels.
+
+```vue
+<script setup>
+import {
+  ColorAreaRoot,
+  ColorAreaTrack,
+  ColorAreaThumb,
+  ColorAreaGradient,
+} from '@urcolor/vue'
+
+const color = ref('hsl(200, 100%, 50%)')
+</script>
+
+<template>
+  <ColorAreaRoot v-model="color" color-space="hsl" channel-x="saturation" channel-y="lightness">
+    <ColorAreaTrack>
+      <ColorAreaGradient />
+      <ColorAreaThumb />
+    </ColorAreaTrack>
+  </ColorAreaRoot>
+</template>
+```
+
+**Props:** `modelValue`, `colorSpace`, `channelX`, `channelY`, `disabled`, `invertedX`, `invertedY`, `thumbAlignment` ("contain" | "overflow"), `name`, `dir`
+
+**Sub-components:** `ColorAreaRoot`, `ColorAreaTrack`, `ColorAreaThumb`, `ColorAreaGradient`, `ColorAreaCheckerboard`
+
+### ColorSlider
+
+Single-channel color adjustment slider.
+
+```vue
+<script setup>
+import {
+  ColorSliderRoot,
+  ColorSliderTrack,
+  ColorSliderThumb,
+  ColorSliderGradient,
+} from '@urcolor/vue'
+
+const color = ref('hsl(200, 100%, 50%)')
+</script>
+
+<template>
+  <ColorSliderRoot v-model="color" color-space="hsl" channel="hue">
+    <ColorSliderTrack>
+      <ColorSliderGradient />
+      <ColorSliderThumb />
+    </ColorSliderTrack>
+  </ColorSliderRoot>
+</template>
+```
+
+**Props:** `modelValue`, `colorSpace`, `channel`, `disabled`, `orientation` ("horizontal" | "vertical"), `inverted`, `dir`
+
+**Sub-components:** `ColorSliderRoot`, `ColorSliderTrack`, `ColorSliderRange`, `ColorSliderThumb`, `ColorSliderGradient`, `ColorSliderCheckerboard`
+
+### ColorField
+
+Text input for precise numeric color values.
+
+```vue
+<script setup>
+import {
+  ColorFieldRoot,
+  ColorFieldInput,
+  ColorFieldIncrement,
+  ColorFieldDecrement,
+} from '@urcolor/vue'
+
+const color = ref('hsl(200, 100%, 50%)')
+</script>
+
+<template>
+  <ColorFieldRoot v-model="color" color-space="hsl" channel="hue">
+    <ColorFieldDecrement>−</ColorFieldDecrement>
+    <ColorFieldInput />
+    <ColorFieldIncrement>+</ColorFieldIncrement>
+  </ColorFieldRoot>
+</template>
+```
+
+**Props:** `modelValue`, `colorSpace`, `channel`, `format` ("number" | "degree" | "percentage" | "hex"), `min`, `max`, `step`, `disabled`, `name`
+
+**Keyboard:** Arrow Up/Down to increment, Page Up/Down for 10x steps, Home/End for min/max.
+
+**Sub-components:** `ColorFieldRoot`, `ColorFieldInput`, `ColorFieldIncrement`, `ColorFieldDecrement`, `ColorFieldSwatch`
+
+### ColorSwatch
+
+Display a color with optional transparency checkerboard.
+
+```vue
+<template>
+  <ColorSwatchRoot model-value="oklch(70% 0.15 200)" :alpha="true" />
+</template>
+```
+
+**Props:** `modelValue`, `checkerSize`, `alpha`
+
+### ColorSwatchGroup
+
+Select one or multiple colors from a palette.
+
+```vue
+<script setup>
+import { ColorSwatchGroupRoot, ColorSwatchGroupItem } from '@urcolor/vue'
+
+const selected = ref(['red'])
+</script>
+
+<template>
+  <ColorSwatchGroupRoot v-model="selected" type="multiple">
+    <ColorSwatchGroupItem value="red" />
+    <ColorSwatchGroupItem value="green" />
+    <ColorSwatchGroupItem value="blue" />
+  </ColorSwatchGroupRoot>
+</template>
+```
+
+**Props:** `modelValue`, `type` ("single" | "multiple"), `disabled`, `orientation`, `loop`, `rovingFocus`, `dir`
+
+**Sub-components:** `ColorSwatchGroupRoot`, `ColorSwatchGroupItem`
+
+## Supported Color Spaces
+
+HSL, HSV, HWB, OKLCh, OKLab, LCh, Lab, RGB, Display P3, A98 RGB, ProPhoto RGB, Rec. 2020 — all with alpha channel support.
+
+## License
+
+MIT

package/dist/components/ColorArea/ColorAreaCheckerboard.vue.d.ts

@@ -0,0 +1,10 @@
+import type { PrimitiveProps } from "reka-ui";
+export interface ColorAreaCheckerboardProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ColorAreaCheckerboardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorAreaCheckerboardProps> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/ColorArea/ColorAreaGradient.vue.d.ts

@@ -0,0 +1,36 @@
+import "internationalized-color/css";
+import type { PrimitiveProps } from "reka-ui";
+export interface ColorAreaGradientProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+    /** Color for the top-left corner. Accepts any CSS color string supported by culori (hex, rgb(), hsl(), oklch(), color(), named colors, etc.). */
+    topLeft?: string;
+    /** Color for the top-right corner. */
+    topRight?: string;
+    /** Color for the bottom-left corner. */
+    bottomLeft?: string;
+    /** Color for the bottom-right corner. */
+    bottomRight?: string;
+    /** When set to a non-RGB color space, uses 2D canvas with perceptual interpolation in that space instead of WebGL (sRGB). */
+    interpolationSpace?: string;
+    /**
+     * Lock specific channels to fixed values in the gradient.
+     * - `{ alpha: 1 }` (default) — lock alpha to 1
+     * - `{ s: 1, v: 1 }` — lock saturation and value
+     * - `false` — no overrides, gradient reflects all channels from current color
+     */
+    channelOverrides?: Record<string, number> | false;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorAreaGradientProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorAreaGradientProps> & Readonly<{}>, {
+    as: string;
+    channelOverrides: Record<string, number> | false;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorArea/ColorAreaImpl.vue.d.ts

@@ -0,0 +1,45 @@
+import type { PrimitiveProps } from "reka-ui";
+export type ColorAreaImplEmits = {
+    slideStart: [event: PointerEvent];
+    slideMove: [event: PointerEvent];
+    slideEnd: [event: PointerEvent];
+    homeKeyDown: [event: KeyboardEvent];
+    endKeyDown: [event: KeyboardEvent];
+    pageUpKeyDown: [event: KeyboardEvent];
+    pageDownKeyDown: [event: KeyboardEvent];
+    stepKeyDown: [event: KeyboardEvent];
+};
+export interface ColorAreaImplProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorAreaImplProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    slideStart: (event: PointerEvent) => any;
+    slideMove: (event: PointerEvent) => any;
+    slideEnd: (event: PointerEvent) => any;
+    homeKeyDown: (event: KeyboardEvent) => any;
+    endKeyDown: (event: KeyboardEvent) => any;
+    pageUpKeyDown: (event: KeyboardEvent) => any;
+    pageDownKeyDown: (event: KeyboardEvent) => any;
+    stepKeyDown: (event: KeyboardEvent) => any;
+}, string, import("vue").PublicProps, Readonly<ColorAreaImplProps> & Readonly<{
+    onSlideStart?: ((event: PointerEvent) => any) | undefined;
+    onSlideMove?: ((event: PointerEvent) => any) | undefined;
+    onSlideEnd?: ((event: PointerEvent) => any) | undefined;
+    onHomeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onEndKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPageUpKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPageDownKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onStepKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorArea/ColorAreaRegion.vue.d.ts

@@ -0,0 +1,15 @@
+import type { PrimitiveProps } from "reka-ui";
+export interface ColorAreaRegionProps extends /* @vue-ignore */ PrimitiveProps {
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorAreaRegionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorAreaRegionProps> & Readonly<{}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorArea/ColorAreaRoot.vue.d.ts

@@ -0,0 +1,101 @@
+import type { Ref } from "vue";
+import type { PrimitiveProps } from "reka-ui";
+import "internationalized-color/css";
+import { Color } from "internationalized-color";
+import type { ActiveDirection } from "./utils";
+type Direction = "ltr" | "rtl";
+type ThumbAlignment = "contain" | "overflow";
+export interface ColorAreaRootProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+    /** The name of the hidden input field for form submission. */
+    name?: string | undefined;
+    /** Whether the field is required for form submission. */
+    required?: boolean;
+    /** The controlled color value. Can be bind as `v-model`. */
+    modelValue?: Color | string | null;
+    /** The default color value when uncontrolled. */
+    defaultValue?: Color | string;
+    /** When `true`, prevents the user from interacting with the slider area. */
+    disabled?: boolean;
+    /** The reading direction. If omitted, inherits globally from `ConfigProvider` or assumes LTR. */
+    dir?: Direction;
+    /** Whether the X axis is visually inverted. */
+    invertedX?: boolean;
+    /** Whether the Y axis is visually inverted. */
+    invertedY?: boolean;
+    /** The color space mode to work in (e.g. 'hsl', 'oklch'). */
+    colorSpace?: string;
+    /** Which channel maps to the X axis (e.g. 's' for HSL saturation, or 'alpha' for opacity). */
+    channelX?: string;
+    /** Which channel maps to the Y axis (e.g. 'l' for HSL lightness, or 'alpha' for opacity). */
+    channelY?: string;
+    /** The minimum permitted steps between multiple thumbs on the X axis. */
+    minXStepsBetweenThumbs?: number;
+    /** The minimum permitted steps between multiple thumbs on the Y axis. */
+    minYStepsBetweenThumbs?: number;
+    /**
+     * The alignment of the slider area thumb.
+     * - `contain`: thumbs will be contained within the bounds of the track.
+     * - `overflow`: thumbs will not be bound by the track. No extra offset will be added.
+     * @defaultValue 'overflow'
+     */
+    thumbAlignment?: ThumbAlignment;
+}
+export type ColorAreaRootEmits = {
+    /** Event handler called when the color value changes */
+    "update:modelValue": [payload: Color | undefined];
+    /** Event handler called when the value changes at the end of an interaction. */
+    "valueCommit": [payload: Color];
+};
+export interface ColorAreaRootContext {
+    disabled: Ref<boolean>;
+    minX: Ref<number>;
+    maxX: Ref<number>;
+    minY: Ref<number>;
+    maxY: Ref<number>;
+    modelValue?: Readonly<Ref<number[][] | null | undefined>>;
+    currentModelValue: Ref<number[][]>;
+    valueIndexToChangeRef: Ref<number>;
+    thumbXElements: Ref<HTMLElement[]>;
+    thumbYElements: Ref<HTMLElement[]>;
+    activeDirection: Ref<ActiveDirection>;
+    isSlidingFromLeft: Ref<boolean>;
+    isSlidingFromTop: Ref<boolean>;
+    thumbAlignment: Ref<ThumbAlignment>;
+    colorSpace: Ref<string>;
+    xChannelKey: Ref<string>;
+    yChannelKey: Ref<string>;
+    colorRef: Readonly<Ref<Color | undefined>>;
+    dir: Ref<Direction>;
+}
+export declare const injectColorAreaRootContext: <T extends ColorAreaRootContext | null | undefined = ColorAreaRootContext>(fallback?: T | undefined) => T extends null ? ColorAreaRootContext | null : ColorAreaRootContext, provideColorAreaRootContext: (contextValue: ColorAreaRootContext) => ColorAreaRootContext;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorAreaRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (payload: Color | undefined) => any;
+    valueCommit: (payload: Color) => any;
+}, string, import("vue").PublicProps, Readonly<ColorAreaRootProps> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: Color | undefined) => any) | undefined;
+    onValueCommit?: ((payload: Color) => any) | undefined;
+}>, {
+    disabled: boolean;
+    as: string;
+    defaultValue: Color | string;
+    invertedX: boolean;
+    invertedY: boolean;
+    colorSpace: string;
+    minXStepsBetweenThumbs: number;
+    minYStepsBetweenThumbs: number;
+    thumbAlignment: ThumbAlignment;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        /** Current color value */
+        modelValue: Color | undefined;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorArea/ColorAreaThumb.vue.d.ts

@@ -0,0 +1,17 @@
+import type { PrimitiveProps } from "reka-ui";
+export interface ColorAreaThumbProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorAreaThumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorAreaThumbProps> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorArea/ColorAreaThumbX.vue.d.ts

@@ -0,0 +1,17 @@
+import type { PrimitiveProps } from "reka-ui";
+export interface ColorAreaThumbXProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorAreaThumbXProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorAreaThumbXProps> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorArea/ColorAreaThumbY.vue.d.ts

@@ -0,0 +1,17 @@
+import type { PrimitiveProps } from "reka-ui";
+export interface ColorAreaThumbYProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorAreaThumbYProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorAreaThumbYProps> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorArea/ColorAreaTrack.vue.d.ts

@@ -0,0 +1,17 @@
+import type { PrimitiveProps } from "reka-ui";
+export interface ColorAreaTrackProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorAreaTrackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorAreaTrackProps> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,9 @@
+export { default as ColorAreaRegion, type ColorAreaRegionProps, } from "./ColorAreaRegion.vue";
+export { injectColorAreaRootContext, default as ColorAreaRoot, type ColorAreaRootEmits, type ColorAreaRootProps, } from "./ColorAreaRoot.vue";
+export { default as ColorAreaThumb, type ColorAreaThumbProps, } from "./ColorAreaThumb.vue";
+export { default as ColorAreaThumbX, type ColorAreaThumbXProps, } from "./ColorAreaThumbX.vue";
+export { default as ColorAreaThumbY, type ColorAreaThumbYProps, } from "./ColorAreaThumbY.vue";
+export { default as ColorAreaTrack, type ColorAreaTrackProps, } from "./ColorAreaTrack.vue";
+export { default as ColorAreaGradient, type ColorAreaGradientProps, } from "./ColorAreaGradient.vue";
+export { default as ColorAreaCheckerboard, type ColorAreaCheckerboardProps, } from "./ColorAreaCheckerboard.vue";
+export { type ActiveDirection, } from "./utils";

package/dist/components/ColorArea/utils.d.ts

@@ -0,0 +1,62 @@
+import type { MaybeElementRef } from "@vueuse/core";
+import type { PropType, Ref } from "vue";
+export type ActiveDirection = "x" | "y";
+export interface ColorAreaThumbContext {
+    index: Ref<number>;
+}
+export declare const injectColorAreaThumbContext: <T extends ColorAreaThumbContext | null | undefined = ColorAreaThumbContext>(fallback?: T | undefined) => T extends null ? ColorAreaThumbContext | null : ColorAreaThumbContext, provideColorAreaThumbContext: (contextValue: ColorAreaThumbContext) => ColorAreaThumbContext;
+export declare function clamp(value: number, min?: number, max?: number): number;
+export declare function getDecimalCount(value: number): number;
+export declare function roundValue(value: number, decimalCount: number): number;
+/**
+ * Snap a value to the nearest step, then clamp it within [min, max].
+ */
+export declare function snapToStep(value: number, min: number, max: number, step: number): number;
+export declare function linearScale(input: readonly [number, number], output: readonly [number, number]): (value: number) => number;
+export declare function convertValueToPercentage(value: number, min: number, max: number): number;
+export declare function getLabel(index: number, totalValues: number): string | undefined;
+export declare function getThumbInBoundsOffset(width: number, left: number, direction: number): number;
+export declare function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number): boolean;
+/**
+ * Find the closest thumb to a given point using Euclidean distance.
+ */
+export declare function getClosestThumbIndex(values: number[][], point: number[], minX: number, maxX: number, minY: number, maxY: number): number;
+export declare const PAGE_KEYS: string[];
+export declare const ARROW_KEYS: string[];
+export declare function useFormControl(el: MaybeElementRef): import("vue").ComputedRef<boolean>;
+export declare function useSize(element: MaybeElementRef): {
+    width: import("vue").ComputedRef<number>;
+    height: import("vue").ComputedRef<number>;
+};
+export declare function useCollection<ItemData = {}>(options?: {
+    key?: string;
+    isProvider?: boolean;
+}): {
+    getItems: (includeDisabledItem?: boolean) => ({
+        ref: HTMLElement;
+    } & ItemData)[];
+    reactiveItems: import("vue").ComputedRef<({
+        ref: HTMLElement;
+    } & ItemData)[]>;
+    itemMapSize: import("vue").ComputedRef<number>;
+    CollectionSlot: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    CollectionItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        value: {
+            type: PropType<unknown>;
+            default: undefined;
+            validator: () => boolean;
+        };
+    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        value: {
+            type: PropType<unknown>;
+            default: undefined;
+            validator: () => boolean;
+        };
+    }>> & Readonly<{}>, {
+        value: undefined;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};

package/dist/components/ColorField/ColorFieldDecrement.vue.d.ts

@@ -0,0 +1,19 @@
+import type { PrimitiveProps } from "reka-ui";
+export interface ColorFieldDecrementProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorFieldDecrementProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorFieldDecrementProps> & Readonly<{}>, {
+    disabled: boolean;
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorField/ColorFieldIncrement.vue.d.ts

@@ -0,0 +1,19 @@
+import type { PrimitiveProps } from "reka-ui";
+export interface ColorFieldIncrementProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+    disabled?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorFieldIncrementProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorFieldIncrementProps> & Readonly<{}>, {
+    disabled: boolean;
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorField/ColorFieldInput.vue.d.ts

@@ -0,0 +1,17 @@
+import type { PrimitiveProps } from "reka-ui";
+export interface ColorFieldInputProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorFieldInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorFieldInputProps> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorField/ColorFieldRoot.vue.d.ts

@@ -0,0 +1,74 @@
+import type { Ref } from "vue";
+import type { PrimitiveProps } from "reka-ui";
+import "internationalized-color/css";
+import { Color } from "internationalized-color";
+export interface ColorFieldRootProps extends /* @vue-ignore */ PrimitiveProps {
+    as?: string;
+    asChild?: boolean;
+    /** The controlled color value. v-model binding. */
+    modelValue?: Color | string | null;
+    /** The color space mode (e.g. 'hsl', 'oklch'). */
+    colorSpace?: string;
+    /** Which channel this field controls (e.g. 'h', 's', 'l'). */
+    channel?: string;
+    /** Channel display format. Auto-derived from colorSpace config if not set. */
+    format?: "number" | "degree" | "percentage" | "hex";
+    /** Minimum allowed value. Auto-derived from colorSpace config if not set. */
+    min?: number;
+    /** Maximum allowed value. Auto-derived from colorSpace config if not set. */
+    max?: number;
+    /** Step increment for arrow keys. Auto-derived from colorSpace config if not set. */
+    step?: number;
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Whether the field is read-only. */
+    readOnly?: boolean;
+    /** Hidden input name for form submission. */
+    name?: string;
+    /** Whether required for form submission. */
+    required?: boolean;
+}
+export type ColorFieldRootEmits = {
+    "update:modelValue": [value: Color | undefined];
+    "valueCommit": [value: Color];
+};
+export interface ColorFieldRootContext {
+    modelValue: Ref<number | undefined>;
+    displayValue: Ref<string>;
+    disabled: Ref<boolean>;
+    readOnly: Ref<boolean>;
+    isDecreaseDisabled: Ref<boolean>;
+    isIncreaseDisabled: Ref<boolean>;
+    handleIncrease: (multiplier?: number) => void;
+    handleDecrease: (multiplier?: number) => void;
+    handleMinMaxValue: (type: "min" | "max") => void;
+    commitValue: (val: number | undefined) => void;
+    onInputChange: (text: string) => void;
+    inputEl: Ref<HTMLInputElement | undefined>;
+    onInputElement: (el: HTMLInputElement) => void;
+    format: Ref<"number" | "degree" | "percentage" | "hex">;
+}
+export declare const injectColorFieldRootContext: <T extends ColorFieldRootContext | null | undefined = ColorFieldRootContext>(fallback?: T | undefined) => T extends null ? ColorFieldRootContext | null : ColorFieldRootContext, provideColorFieldRootContext: (contextValue: ColorFieldRootContext) => ColorFieldRootContext;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorFieldRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Color | undefined) => any;
+    valueCommit: (value: Color) => any;
+}, string, import("vue").PublicProps, Readonly<ColorFieldRootProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Color | undefined) => any) | undefined;
+    onValueCommit?: ((value: Color) => any) | undefined;
+}>, {
+    disabled: boolean;
+    as: string;
+    required: boolean;
+    colorSpace: string;
+    channel: string;
+    readOnly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ColorField/ColorFieldSwatch.vue.d.ts

@@ -0,0 +1,15 @@
+import type { ColorSwatchRootProps } from "../ColorSwatch/ColorSwatchRoot.vue";
+export interface ColorFieldSwatchProps extends /* @vue-ignore */ ColorSwatchRootProps {
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ColorFieldSwatchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ColorFieldSwatchProps> & Readonly<{}>, {
+    as: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};