@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/forms/Checkbox/Checkbox.animations.d.ts

@@ -0,0 +1,14 @@
+import { Variants } from "motion/react";
+/**
+ * Checkmark SVG path draw-on animation
+ * Animates pathLength from 0 → 1 for a smooth draw effect
+ */
+export declare const checkmarkVariants: Variants;
+/**
+ * Indeterminate dash draw-on animation
+ */
+export declare const indeterminateVariants: Variants;
+/**
+ * Reduced motion variants — instant opacity toggle, no path draw
+ */
+export declare const reducedMotionVariants: Variants;

package/dist/components/forms/Checkbox/Checkbox.animations.js

@@ -0,0 +1,54 @@
+"use client";
+const smoothEase = [0.65, 0, 0.35, 1];
+/**
+ * Checkmark SVG path draw-on animation
+ * Animates pathLength from 0 → 1 for a smooth draw effect
+ */
+const checkmarkVariants = {
+    unchecked: {
+        pathLength: 0,
+        opacity: 0,
+        transition: {
+            pathLength: { duration: 0.15, ease: smoothEase },
+            opacity: { duration: 0.1, ease: "easeOut" },
+        },
+    },
+    checked: {
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            pathLength: { duration: 0.2, ease: smoothEase },
+            opacity: { duration: 0.05, ease: "easeOut" },
+        },
+    },
+};
+/**
+ * Indeterminate dash draw-on animation
+ */
+const indeterminateVariants = {
+    unchecked: {
+        pathLength: 0,
+        opacity: 0,
+        transition: {
+            pathLength: { duration: 0.1, ease: smoothEase },
+            opacity: { duration: 0.08, ease: "easeOut" },
+        },
+    },
+    checked: {
+        pathLength: 1,
+        opacity: 1,
+        transition: {
+            pathLength: { duration: 0.15, ease: smoothEase },
+            opacity: { duration: 0.05, ease: "easeOut" },
+        },
+    },
+};
+/**
+ * Reduced motion variants — instant opacity toggle, no path draw
+ */
+const reducedMotionVariants = {
+    unchecked: { opacity: 0 },
+    checked: { opacity: 1 },
+};
+
+export { checkmarkVariants, indeterminateVariants, reducedMotionVariants };

package/dist/components/forms/Checkbox/Checkbox.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { CheckboxProps } from "./Checkbox.types";
-/**
- * Checkbox component for selecting one or more options
- */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>> & {
+    Group: React.ForwardRefExoticComponent<import("./Checkbox.types").CheckboxGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+};

package/dist/components/forms/Checkbox/Checkbox.js

@@ -1,43 +1,86 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React__default, { useId, useState, useRef, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { checkboxTheme } from './Checkbox.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
-import { MinusIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
+import { useCheckboxGroupContext } from './CheckboxContext.js';
+import { CheckboxGroup } from './CheckboxGroup.js';
+import { reducedMotionVariants, indeterminateVariants, checkmarkVariants } from './Checkbox.animations.js';
+import { CHECK_RIPPLE_MOTION } from '../../core/shared/interaction.animations.js';
 
 /**
  * Checkbox component for selecting one or more options
  */
-const Checkbox = React__default.forwardRef(({ id, name, value, checked: controlledChecked, indeterminate = false, onChange, label, description, state = "default", size = "md", className, ...restProps }, ref) => {
+const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: controlledChecked, indeterminate = false, onChange, label, description, state: stateProp = "default", size: sizeProp = "md", className, ...restProps }, ref) => {
+    var _a, _b, _c, _d;
+    const autoId = useId();
+    const shouldReduceMotion = useReducedMotion();
+    const groupContext = useCheckboxGroupContext();
+    // Resolve props from group context or individual props
+    const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
+    const name = (_b = (_a = groupContext === null || groupContext === void 0 ? void 0 : groupContext.name) !== null && _a !== void 0 ? _a : nameProp) !== null && _b !== void 0 ? _b : autoId;
+    const size = (_c = groupContext === null || groupContext === void 0 ? void 0 : groupContext.size) !== null && _c !== void 0 ? _c : sizeProp;
+    const state = stateProp === "disabled" ? "disabled" : ((_d = groupContext === null || groupContext === void 0 ? void 0 : groupContext.state) !== null && _d !== void 0 ? _d : stateProp);
+    const isDisabled = state === "disabled";
+    const isInvalid = state === "invalid";
+    // Determine checked state
+    const isInGroup = groupContext !== undefined;
     const [internalChecked, setInternalChecked] = useState(false);
+    let isChecked;
+    if (isInGroup) {
+        isChecked = groupContext.value.includes(value);
+    }
+    else if (controlledChecked !== undefined) {
+        isChecked = controlledChecked;
+    }
+    else {
+        isChecked = internalChecked;
+    }
+    // Message-led invalid: the control + label stay neutral (mirrors Radio). The
+    // group's required asterisk + error message carry the error (see CheckboxGroup).
+    // `data-state=invalid` is still emitted on the input as an unstyled hook, and
+    // `aria-invalid`/`aria-errormessage` live on the group fieldset, not each input.
+    const visualState = isDisabled ? "disabled" : "default";
     const inputRef = useRef(null);
-    // Determine if component is controlled or uncontrolled
-    const isControlled = controlledChecked !== undefined;
-    const isChecked = isControlled ? controlledChecked : internalChecked;
     // Set indeterminate property on the input element
     useEffect(() => {
         if (inputRef.current) {
             inputRef.current.indeterminate = indeterminate;
         }
     }, [indeterminate]);
-    // Derive state flags
-    const isDisabled = state === "disabled";
+    // Dev-only warning when no accessible name is provided
+    useEffect(() => {
+        if (process.env.NODE_ENV !== 'production') {
+            if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {
+                console.warn('[Checkbox]: No accessible name provided. Add a `label` prop, `aria-label`, or `aria-labelledby`.');
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const handleChange = (e) => {
         if (isDisabled)
             return;
-        if (!isControlled) {
+        if (isInGroup) {
+            groupContext.onChange(value, e.target.checked);
+        }
+        else if (controlledChecked === undefined) {
             setInternalChecked(e.target.checked);
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
     };
-    return (jsxs("div", { className: cn(checkboxTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(checkboxTheme.inputContainerStyle, checkboxTheme.sizes[size]), children: [jsx("input", { ref: (node) => {
+    return (jsxs("div", { className: cn(checkboxTheme.baseStyle, className), children: [jsxs("div", { className: cn(checkboxTheme.inputContainerStyle, checkboxTheme.sizes[size]), children: [jsx("input", { ref: (node) => {
                             inputRef.current = node;
                             if (typeof ref === "function")
                                 ref(node);
                             else if (ref)
                                 ref.current = node;
-                        }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), indeterminate && (jsx(MinusIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-neutral-600 transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 })), isChecked && !indeterminate && (jsx(CheckIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-white transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 }))] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })), description && (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description }))] }))] }));
+                        }, type: "checkbox", ...restProps, id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "aria-invalid": !isInGroup && isInvalid ? true : undefined, "data-state": isDisabled ? "disabled" : isInvalid ? "invalid" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), jsx(AnimatePresence, { initial: false, children: isChecked && !shouldReduceMotion && (jsx(motion.div, { ...CHECK_RIPPLE_MOTION, className: "absolute inset-0 rounded-[var(--checkbox-radius)] bg-[var(--color-primary)]/40 pointer-events-none z-0" }, "ripple")) }), jsxs(AnimatePresence, { mode: "wait", children: [indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-neutral-600", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8 L12.5 8", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", variants: shouldReduceMotion ? reducedMotionVariants : indeterminateVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "indeterminate")), isChecked && !indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-[var(--color-primary-contrast)]", size === "sm" ? "size-3" : size === "lg" ? "size-5" : "size-4"), children: jsx(motion.path, { d: "M3.5 8.5 L6.5 11.5 L12.5 4.5", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", variants: shouldReduceMotion ? reducedMotionVariants : checkmarkVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "checkmark"))] })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[visualState], "mb-0"), children: label })) : (label)), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
+});
+CheckboxComponent.displayName = "Checkbox";
+const Checkbox = Object.assign(CheckboxComponent, {
+    Group: CheckboxGroup,
 });
-Checkbox.displayName = "Checkbox";
 
 export { Checkbox };

package/dist/components/forms/Checkbox/Checkbox.theme.js

@@ -6,19 +6,15 @@ const checkboxTheme = {
     baseStyle: "relative flex items-start gap-3",
     inputContainerStyle: "relative flex-shrink-0 group grid grid-cols-1",
     // Input styles with light and dark mode variants
-    inputStyle: "col-start-1 row-start-1 appearance-none rounded-[calc(var(--radius-base)*0.75)] border-2 transition-all duration-400 " +
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-[var(--checkbox-radius)] border-2 transition-all duration-400 " +
         // Default state - light
         "border-[var(--color-border)] bg-[var(--color-surface)] " +
         // Default state - dark
-        "dark:bg-[var(--color-background-secondary)] " +
+        "dark:bg-[var(--color-surface-raised)] " +
         // Checked state - light
         "checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] " +
         // Checked state - dark
         " " +
-        // Checked outline - light
-        "checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 " +
-        // Checked outline - dark
-        "dark:checked:outline-[var(--color-primary-900)] " +
         // Focus visible - light
         "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] " +
         // Focus visible - dark
@@ -27,14 +23,24 @@ const checkboxTheme = {
         "disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 " +
         "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
         // Disabled state - dark
-        "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
-        "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
+        "dark:disabled:bg-[var(--color-mono-800)] dark:disabled:border-[var(--color-mono-600)] " +
+        "dark:data-[state=disabled]:bg-[var(--color-mono-700)] dark:data-[state=disabled]:border-[var(--color-mono-600)]",
+    // Invalid is message-led: the control stays neutral (mirrors Radio). The group's
+    // required asterisk + error message carry the error (see CheckboxGroup). `data-state=invalid`
+    // is still emitted on the input as an unstyled consumer/test hook.
     // Description text - light and dark
     descriptionStyle: "text-sm mt-0.5 " + "text-[var(--color-text-secondary)]/80 " + " ",
     sizes: {
         sm: "size-5 mt-0.25",
         md: "size-6",
+        lg: "size-7",
     },
+    // Group styles
+    groupStyle: "flex flex-col gap-1.5",
+    groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
+    groupDescriptionStyle: "text-sm text-[var(--color-text-secondary)] -mt-0.5 mb-1",
+    groupErrorStyle: "text-sm text-[var(--color-danger)] mt-1.5",
+    groupItemsStyle: "flex flex-col gap-3",
 };
 
 export { checkboxTheme };

package/dist/components/forms/Checkbox/Checkbox.types.d.ts

@@ -2,27 +2,50 @@ import React from 'react';
 /**
  * State variants for the checkbox component
  */
-export type CheckboxState = 'default' | 'disabled';
+export type CheckboxState = 'default' | 'disabled' | 'invalid';
 /**
  * Size variants for the checkbox component
  */
-export type CheckboxSize = 'sm' | 'md';
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+/**
+ * Orientation for Checkbox.Group layout
+ */
+export type CheckboxGroupOrientation = 'vertical' | 'horizontal';
 /**
  * Checkbox component props
  */
-export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
-    id: string;
-    name: string;
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+    id?: string;
     value: string;
-    checked?: boolean;
     indeterminate?: boolean;
     onChange?: (checked: boolean, value: string) => void;
-    label?: string;
-    description?: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
     state?: CheckboxState;
     size?: CheckboxSize;
     className?: string;
 }
+/**
+ * Checkbox.Group component props
+ */
+export interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+    name?: string;
+    size?: CheckboxSize;
+    state?: CheckboxState;
+    orientation?: CheckboxGroupOrientation;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * @deprecated Use `state='invalid'` with `errorMessage` instead.
+     */
+    error?: React.ReactNode;
+    errorMessage?: React.ReactNode;
+    required?: boolean;
+    className?: string;
+}
 /**
  * Checkbox theme configuration
  */
@@ -32,4 +55,9 @@ export interface CheckboxTheme {
     inputStyle: string;
     descriptionStyle: string;
     sizes: Record<CheckboxSize, string>;
+    groupStyle?: string;
+    groupHorizontalStyle?: string;
+    groupDescriptionStyle?: string;
+    groupErrorStyle?: string;
+    groupItemsStyle?: string;
 }

package/dist/components/forms/Checkbox/CheckboxContext.d.ts

@@ -0,0 +1,14 @@
+import type { CheckboxSize, CheckboxState } from "./Checkbox.types";
+export interface CheckboxGroupContextValue {
+    name: string;
+    value: string[];
+    onChange: (itemValue: string, checked: boolean) => void;
+    size: CheckboxSize;
+    state: CheckboxState;
+}
+export declare const CheckboxGroupContext: import("react").Context<CheckboxGroupContextValue | undefined>;
+/**
+ * Returns the group context, or undefined when used outside a Checkbox.Group.
+ * This allows standalone Checkbox usage without a Group wrapper.
+ */
+export declare function useCheckboxGroupContext(): CheckboxGroupContextValue | undefined;

package/dist/components/forms/Checkbox/CheckboxContext.js

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+const CheckboxGroupContext = createContext(undefined);
+/**
+ * Returns the group context, or undefined when used outside a Checkbox.Group.
+ * This allows standalone Checkbox usage without a Group wrapper.
+ */
+function useCheckboxGroupContext() {
+    return useContext(CheckboxGroupContext);
+}
+
+export { CheckboxGroupContext, useCheckboxGroupContext };

package/dist/components/forms/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { CheckboxGroupProps } from "./Checkbox.types";
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/components/forms/Checkbox/CheckboxGroup.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useId, useState, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { checkboxTheme } from './Checkbox.theme.js';
+import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
+import { CheckboxGroupContext } from './CheckboxContext.js';
+
+const CheckboxGroup = React__default.forwardRef(({ value: controlledValue, defaultValue, onChange, name, size = "md", state: stateProp = "default", orientation = "vertical", label, description, error, errorMessage, required, className, children, ...props }, ref) => {
+    // Prefer errorMessage; fall back to deprecated error prop
+    const resolvedError = errorMessage !== null && errorMessage !== void 0 ? errorMessage : error;
+    // If error (deprecated) is provided and state not explicitly set to something else,
+    // implicitly treat the group as invalid
+    const state = resolvedError && stateProp === "default" ? "invalid" : stateProp;
+    const autoId = useId();
+    const groupName = name !== null && name !== void 0 ? name : `checkbox-group-${autoId}`;
+    const labelId = `${autoId}-label`;
+    const descriptionId = `${autoId}-desc`;
+    const errorId = `${autoId}-error`;
+    // Controlled vs uncontrolled
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const handleChange = (itemValue, checked) => {
+        const next = checked
+            ? [...currentValue, itemValue]
+            : currentValue.filter((v) => v !== itemValue);
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
+    const contextValue = useMemo(() => ({
+        name: groupName,
+        value: currentValue,
+        onChange: handleChange,
+        size,
+        state,
+    }), [groupName, currentValue, size, state]);
+    // Message-led invalid: the legend text stays neutral; the red required asterisk
+    // + the error message below carry the error (mirrors RadioGroup).
+    const labelState = state === "disabled" ? "disabled" : "default";
+    return (jsx(CheckboxGroupContext.Provider, { value: contextValue, children: jsxs("fieldset", { ref: ref, role: "group", "aria-labelledby": label ? labelId : undefined, "aria-describedby": description ? descriptionId : undefined, "aria-required": required || undefined, "aria-invalid": resolvedError ? true : undefined, "aria-errormessage": resolvedError ? errorId : undefined, className: cn("border-0 p-0 m-0", checkboxTheme.groupStyle, className), ...props, children: [label && (typeof label === 'string' ? (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })) : (label)), description && (typeof description === 'string' ? (jsx("p", { id: descriptionId, className: checkboxTheme.groupDescriptionStyle, children: description })) : (description)), jsx("div", { className: cn(checkboxTheme.groupItemsStyle, orientation === "horizontal" &&
+                        checkboxTheme.groupHorizontalStyle), children: children }), resolvedError && (typeof resolvedError === 'string' ? (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: resolvedError })) : (resolvedError))] }) }));
+});
+CheckboxGroup.displayName = "Checkbox.Group";
+
+export { CheckboxGroup };

package/dist/components/forms/Checkbox/index.d.ts

@@ -1,3 +1,3 @@
 export { Checkbox } from './Checkbox';
-export type { CheckboxProps, CheckboxSize, CheckboxState } from './Checkbox.types';
+export type { CheckboxProps, CheckboxSize, CheckboxState, CheckboxGroupProps, CheckboxGroupOrientation } from './Checkbox.types';
 export { checkboxTheme } from './Checkbox.theme';

package/dist/components/forms/ColorPicker/ColorPicker.d.ts

@@ -1,20 +1,13 @@
 import React from 'react';
-import type { ColorPickerContextValue, ColorPickerProps } from './ColorPicker.types';
-/**
- * ColorPicker Context
- */
-export declare const ColorPickerContext: React.Context<ColorPickerContextValue | undefined>;
-/**
- * Hook to access ColorPicker context
- */
-export declare const useColorPicker: () => ColorPickerContextValue;
+import type { ColorPickerProps } from './ColorPicker.types';
 /**
  * Export compound component with sub-components
  * Following Flikkui pattern (like Accordion, Tabs, Table)
  */
 export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>> & {
     Trigger: React.FC<import("./ColorPicker.types").ColorPickerTriggerProps>;
-    Content: React.FC<import("./ColorPicker.types").ColorPickerContentProps>;
+    Header: React.FC<import("./ColorPickerHeader").ColorPickerHeaderProps>;
+    Body: React.FC<import("./ColorPicker.types").ColorPickerBodyProps>;
     Canvas: React.FC<{
         className?: string;
     }>;
@@ -24,4 +17,7 @@ export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerPro
     FormatSelector: React.FC<import("./ColorPicker.types").ColorPickerFormatSelectorProps>;
     EyeDropper: React.FC<import("./ColorPicker.types").ColorPickerEyeDropperProps>;
     Presets: React.FC<import("./ColorPicker.types").ColorPickerPresetsProps>;
+    SavedColors: React.FC<import("./ColorPicker.types").ColorPickerSavedColorsProps>;
+    Gradient: React.FC<import("./ColorPicker.types").ColorPickerGradientProps>;
+    ImagePicker: React.FC<import("./ColorPicker.types").ColorPickerImageProps>;
 };