flikkui 0.1.0-beta.11

package/dist/components/effects/Overlay/Overlay.js

@@ -0,0 +1,131 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../utils/cn.js';
+import { useOverlay } from '../../../hooks/useOverlay.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+/**
+ * Default overlay backdrop animation variants
+ */
+var defaultOverlayAnimations = {
+    initial: { opacity: 0 },
+    animate: {
+        opacity: 1,
+        transition: { duration: 0.2, ease: 'easeOut' },
+    },
+    exit: {
+        opacity: 0,
+        transition: { duration: 0.15, ease: 'easeIn' },
+    },
+};
+/**
+ * Default content animation variants (center position)
+ */
+var defaultContentAnimations = {
+    initial: { opacity: 0, scale: 0.95, y: 20 },
+    animate: {
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        transition: {
+            type: 'spring',
+            damping: 25,
+            stiffness: 300,
+            delay: 0.05,
+        },
+    },
+    exit: {
+        opacity: 0,
+        scale: 0.95,
+        y: 20,
+        transition: { duration: 0.2, ease: 'easeIn' },
+    },
+};
+/**
+ * Position variant classes for overlay content positioning
+ */
+var overlayPositionVariants = {
+    center: 'flex items-center justify-center',
+    top: 'flex items-start justify-center pt-[10vh] px-4',
+    bottom: 'flex items-end justify-center pb-[10vh] px-4',
+    left: 'flex items-center justify-start pl-6',
+    right: 'flex items-center justify-end pr-6',
+    none: '', // No positioning, content handles it
+};
+/**
+ * Shared Overlay Component
+ *
+ * Provides consistent overlay behavior (backdrop, portal, animations, escape key, scroll lock)
+ * across Modal, Drawer, CommandPalette, and other overlay-based components.
+ *
+ * Features:
+ * - Portal rendering to document.body
+ * - Configurable positioning (center, top, bottom, left, right, none)
+ * - Customizable animations
+ * - Body scroll lock when open
+ * - Escape key to close
+ * - Click outside to close
+ * - Accessible by default
+ *
+ * @example
+ * ```tsx
+ * <Overlay
+ *   isOpen={isOpen}
+ *   onClose={onClose}
+ *   position="center"
+ * >
+ *   <div className="bg-white rounded-lg p-6">
+ *     Modal content
+ *   </div>
+ * </Overlay>
+ * ```
+ */
+var Overlay = React__default.forwardRef(function (_a, ref) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, _b = _a.closeOnOverlayClick, closeOnOverlayClick = _b === void 0 ? true : _b, _c = _a.closeOnEsc, closeOnEsc = _c === void 0 ? true : _c, _d = _a.enableScrollLock, enableScrollLock = _d === void 0 ? true : _d, _e = _a.position, position = _e === void 0 ? 'center' : _e, overlayClassName = _a.overlayClassName, contentClassName = _a.contentClassName, animations = _a.animations, animationDuration = _a.animationDuration, portalTarget = _a.portalTarget, children = _a.children;
+    // Use overlay hook for behavior (escape key, scroll lock, click handling)
+    var handleOverlayClick = useOverlay({
+        isOpen: isOpen,
+        onClose: onClose,
+        closeOnEsc: closeOnEsc,
+        closeOnOverlayClick: closeOnOverlayClick,
+        enableScrollLock: enableScrollLock,
+    }).handleOverlayClick;
+    // Merge custom animations with defaults
+    var overlayAnimations = (animations === null || animations === void 0 ? void 0 : animations.overlay) || defaultOverlayAnimations;
+    var contentAnimations = (animations === null || animations === void 0 ? void 0 : animations.content) || defaultContentAnimations;
+    // Apply custom animation durations if provided
+    var finalOverlayAnimations = __assign({}, overlayAnimations);
+    var finalContentAnimations = __assign({}, contentAnimations);
+    if (animationDuration) {
+        if (animationDuration.enter && finalOverlayAnimations.animate) {
+            finalOverlayAnimations.animate.transition = __assign(__assign({}, finalOverlayAnimations.animate.transition), { duration: animationDuration.enter });
+        }
+        if (animationDuration.exit && finalOverlayAnimations.exit) {
+            finalOverlayAnimations.exit.transition = __assign(__assign({}, finalOverlayAnimations.exit.transition), { duration: animationDuration.exit });
+        }
+    }
+    // Determine portal target
+    var target = portalTarget !== undefined
+        ? portalTarget
+        : typeof document !== 'undefined'
+            ? document.body
+            : null;
+    // Don't render if no portal target available (SSR)
+    if (!target) {
+        return null;
+    }
+    var content = (React__default.createElement(AnimatePresence, { mode: "wait" }, isOpen && (React__default.createElement(motion.div, { className: cn(
+        // Base overlay styles (backdrop with blur)
+        'fixed inset-0 bg-[var(--overlay-bg)] backdrop-blur-[var(--overlay-blur)] z-50', 
+        // Position variant for content placement
+        overlayPositionVariants[position], 
+        // Custom overlay classes
+        overlayClassName), onClick: handleOverlayClick, variants: finalOverlayAnimations, initial: "initial", animate: "animate", exit: "exit" },
+        React__default.createElement(motion.div, { ref: ref, className: cn(contentClassName), variants: finalContentAnimations, initial: "initial", animate: "animate", exit: "exit", onClick: function (e) { return e.stopPropagation(); } }, children)))));
+    return createPortal(content, target);
+});
+Overlay.displayName = 'Overlay';
+
+export { Overlay };

package/dist/components/effects/Overlay/Overlay.types.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Variants } from 'motion/react';
+/**
+ * Overlay positioning options
+ */
+export type OverlayPosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'none';
+/**
+ * Custom animation variants for overlay and content
+ */
+export interface OverlayAnimations {
+    /** Animation variants for the overlay backdrop */
+    overlay?: Variants;
+    /** Animation variants for the content container */
+    content?: Variants;
+}
+/**
+ * Overlay component props
+ */
+export interface OverlayProps {
+    /** Whether the overlay is currently open */
+    isOpen: boolean;
+    /** Callback to close the overlay */
+    onClose: () => void;
+    /** Whether clicking the overlay backdrop should close it (default: true) */
+    closeOnOverlayClick?: boolean;
+    /** Whether pressing Escape should close the overlay (default: true) */
+    closeOnEsc?: boolean;
+    /** Whether to lock body scroll when overlay is open (default: true) */
+    enableScrollLock?: boolean;
+    /** Position of the content within the overlay (default: 'center') */
+    position?: OverlayPosition;
+    /** Additional class name for the overlay backdrop */
+    overlayClassName?: string;
+    /** Additional class name for the content container */
+    contentClassName?: string;
+    /** Custom animation variants for overlay and content */
+    animations?: OverlayAnimations;
+    /** Animation duration overrides */
+    animationDuration?: {
+        /** Enter animation duration in seconds (default: 0.2) */
+        enter?: number;
+        /** Exit animation duration in seconds (default: 0.15) */
+        exit?: number;
+    };
+    /** Target element for portal rendering (default: document.body) */
+    portalTarget?: Element | null;
+    /** Overlay content */
+    children: React.ReactNode;
+}

package/dist/components/effects/Overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { Overlay } from './Overlay';
+export type { OverlayProps, OverlayPosition, OverlayAnimations } from './Overlay.types';

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

@@ -0,0 +1,6 @@
+export { CustomCursor } from './CustomCursor';
+export type { CustomCursorProps } from './CustomCursor';
+export { GlassEffect } from './GlassEffect';
+export type { GlassEffectProps, BlendMode } from './GlassEffect';
+export { Overlay } from './Overlay';
+export type { OverlayProps, OverlayPosition, OverlayAnimations } from './Overlay';

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { CheckboxProps } from "./Checkbox.types";
+/**
+ * Checkbox component for selecting one or more options
+ */
+export declare const Checkbox: React.FC<CheckboxProps>;

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

@@ -0,0 +1,45 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { checkboxTheme } from './Checkbox.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { cn } from '../../../utils/cn.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/MinusIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/CheckIcon.js';
+
+/**
+ * Checkbox component for selecting one or more options
+ */
+var Checkbox = function (_a) {
+    var id = _a.id, name = _a.name, value = _a.value, controlledChecked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, onChange = _a.onChange, label = _a.label, description = _a.description, _c = _a.state, state = _c === void 0 ? "default" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, className = _a.className, restProps = __rest(_a, ["id", "name", "value", "checked", "indeterminate", "onChange", "label", "description", "state", "size", "className"]);
+    var _e = useState(false), internalChecked = _e[0], setInternalChecked = _e[1];
+    var inputRef = useRef(null);
+    // Determine if component is controlled or uncontrolled
+    var isControlled = controlledChecked !== undefined;
+    var isChecked = isControlled ? controlledChecked : internalChecked;
+    // Set indeterminate property on the input element
+    useEffect(function () {
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    // Derive state flags
+    var isDisabled = state === "disabled";
+    var handleChange = function (e) {
+        if (isDisabled)
+            return;
+        if (!isControlled) {
+            setInternalChecked(e.target.checked);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
+    };
+    return (React__default.createElement("div", __assign({ className: cn(checkboxTheme.baseStyle, className) }, restProps),
+        React__default.createElement("div", { className: cn(checkboxTheme.inputContainerStyle, checkboxTheme.sizes[size]) },
+            React__default.createElement("input", { ref: inputRef, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? "".concat(id, "-description") : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }),
+            indeterminate && (React__default.createElement(ForwardRef, { 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 && (React__default.createElement(ForwardRef$1, { 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) && (React__default.createElement("div", { className: "cursor-pointer" },
+            label && (React__default.createElement(FormLabel, { htmlFor: id, className: "!mb-0", state: state }, label)),
+            description && (React__default.createElement("div", { id: "".concat(id, "-description"), className: checkboxTheme.descriptionStyle }, description))))));
+};
+
+export { Checkbox };

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

@@ -0,0 +1,5 @@
+import { CheckboxTheme } from "./Checkbox.types";
+/**
+ * Default theme configuration for the Checkbox component
+ */
+export declare const checkboxTheme: CheckboxTheme;

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

@@ -0,0 +1,15 @@
+/**
+ * Default theme configuration for the Checkbox component
+ */
+var checkboxTheme = {
+    baseStyle: "relative flex items-start gap-3",
+    inputContainerStyle: "relative flex-shrink-0 group grid grid-cols-1",
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-md border-2 border-[var(--color-border)] bg-white checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-primary-600)] checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 transition-all duration-400 data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed",
+    descriptionStyle: "text-sm text-[var(--color-text-secondary)] mt-0.5",
+    sizes: {
+        sm: "size-5 mt-0.25",
+        md: "size-6"
+    }
+};
+
+export { checkboxTheme };

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

@@ -0,0 +1,35 @@
+import React from 'react';
+/**
+ * State variants for the checkbox component
+ */
+export type CheckboxState = 'default' | 'disabled';
+/**
+ * Size variants for the checkbox component
+ */
+export type CheckboxSize = 'sm' | 'md';
+/**
+ * Checkbox component props
+ */
+export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+    id: string;
+    name: string;
+    value: string;
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean, value: string) => void;
+    label?: string;
+    description?: string;
+    state?: CheckboxState;
+    size?: CheckboxSize;
+    className?: string;
+}
+/**
+ * Checkbox theme configuration
+ */
+export interface CheckboxTheme {
+    baseStyle: string;
+    inputContainerStyle: string;
+    inputStyle: string;
+    descriptionStyle: string;
+    sizes: Record<CheckboxSize, string>;
+}

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

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

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

@@ -0,0 +1,17 @@
+import type { Variants } from 'motion/react';
+/**
+ * ColorPicker animations
+ * IMPORTANT: Always import from 'motion/react' NOT 'framer-motion'
+ */
+/**
+ * Popover content fade-in animation
+ */
+export declare const contentVariants: Variants;
+/**
+ * Swatch scale animation on hover/press
+ */
+export declare const swatchVariants: Variants;
+/**
+ * Preset swatch animation
+ */
+export declare const presetSwatchVariants: Variants;

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

@@ -0,0 +1,27 @@
+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;
+/**
+ * Export compound component with sub-components
+ * Following Flikkui pattern (like Accordion, Tabs, Table)
+ */
+export declare const ColorPicker: React.FC<ColorPickerProps> & {
+    Trigger: React.FC<import("./ColorPicker.types").ColorPickerTriggerProps>;
+    Content: React.FC<import("./ColorPicker.types").ColorPickerContentProps>;
+    Canvas: React.FC<{
+        className?: string;
+    }>;
+    Swatch: React.FC<import("./ColorPicker.types").ColorPickerSwatchProps>;
+    Sliders: React.FC<import("./ColorPicker.types").ColorPickerSlidersProps>;
+    Input: React.FC<import("./ColorPicker.types").ColorPickerInputProps>;
+    FormatSelector: React.FC<import("./ColorPicker.types").ColorPickerFormatSelectorProps>;
+    EyeDropper: React.FC<import("./ColorPicker.types").ColorPickerEyeDropperProps>;
+    Presets: React.FC<import("./ColorPicker.types").ColorPickerPresetsProps>;
+};

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

@@ -0,0 +1,6 @@
+import type { ColorPickerTheme } from './ColorPicker.types';
+/**
+ * ColorPicker theme configuration
+ * Following Dropdown/Select popup styling patterns
+ */
+export declare const colorPickerTheme: ColorPickerTheme;

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

@@ -0,0 +1,219 @@
+import React from 'react';
+import type { HSLA } from './colorUtils';
+export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';
+export type ColorPickerSize = 'sm' | 'md' | 'lg';
+export type ColorPickerState = 'default' | 'invalid' | 'disabled';
+/**
+ * Root ColorPicker component props
+ */
+export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Controlled color value (hex, rgb, rgba, hsl, hsla)
+     */
+    value?: string;
+    /**
+     * Default color value for uncontrolled component
+     * @default '#000000'
+     */
+    defaultValue?: string;
+    /**
+     * Callback fired when color changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Color format for output
+     * @default 'hex'
+     */
+    format?: ColorFormat;
+    /**
+     * Whether to show alpha/opacity slider
+     * @default true
+     */
+    showAlpha?: boolean;
+    /**
+     * Whether to show eyedropper button (if browser supports it)
+     * @default true
+     */
+    showEyeDropper?: boolean;
+    /**
+     * Array of preset colors to display
+     */
+    presetColors?: string[];
+    /**
+     * Size of the color picker
+     * @default 'md'
+     */
+    size?: ColorPickerSize;
+    /**
+     * State of the color picker
+     * @default 'default'
+     */
+    state?: ColorPickerState;
+    /**
+     * Whether the color picker is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Label for the color picker
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the picker
+     */
+    helperText?: string;
+    /**
+     * Whether the picker is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Theme overrides
+     */
+    theme?: ColorPickerThemeOverrides;
+    /**
+     * Custom className for container
+     */
+    className?: string;
+    /**
+     * Children components (compound pattern)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Context value for ColorPicker
+ */
+export interface ColorPickerContextValue {
+    color: HSLA;
+    setColor: (color: HSLA) => void;
+    setHue: (h: number) => void;
+    setSaturation: (s: number) => void;
+    setLightness: (l: number) => void;
+    setAlpha: (a: number) => void;
+    format: ColorFormat;
+    setFormat: (format: ColorFormat) => void;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    triggerRef: React.RefObject<HTMLElement>;
+    placement: string;
+    offset: number;
+    showAlpha: boolean;
+    showEyeDropper: boolean;
+    presetColors?: string[];
+    size: ColorPickerSize;
+    state: ColorPickerState;
+    disabled: boolean;
+    theme: ColorPickerTheme;
+    getHexValue: () => string;
+    getRgbValue: () => string;
+    getHslValue: () => string;
+    getFormattedValue: () => string;
+    onChange?: (value: string) => void;
+}
+/**
+ * ColorPicker theme overrides
+ */
+export interface ColorPickerThemeOverrides {
+    baseStyle?: string;
+    triggerStyle?: string;
+    swatchStyle?: string;
+    contentStyle?: string;
+    sliderContainerStyle?: string;
+    sliderLabelStyle?: string;
+    inputContainerStyle?: string;
+    formatSelectorStyle?: string;
+    presetGridStyle?: string;
+    presetSwatchStyle?: string;
+    eyedropperButtonStyle?: string;
+}
+/**
+ * ColorPicker theme
+ */
+export interface ColorPickerTheme {
+    baseStyle: string;
+    triggerStyle: string;
+    swatchStyle: string;
+    contentStyle: string;
+    sliderContainerStyle: string;
+    sliderLabelStyle: string;
+    inputContainerStyle: string;
+    formatSelectorStyle: string;
+    presetGridStyle: string;
+    presetSwatchStyle: string;
+    eyedropperButtonStyle: string;
+}
+/**
+ * ColorPickerTrigger props
+ */
+export interface ColorPickerTriggerProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'onChange'> {
+    className?: string;
+}
+/**
+ * ColorPickerContent props
+ */
+export interface ColorPickerContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    className?: string;
+    /**
+     * Whether to render in a portal (default: true)
+     */
+    portal?: boolean;
+    /**
+     * Whether to animate (default: true)
+     */
+    animation?: boolean;
+}
+/**
+ * ColorPickerSwatch props
+ */
+export interface ColorPickerSwatchProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the swatch
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether to show checkerboard pattern for transparency
+     * @default true
+     */
+    showCheckerboard?: boolean;
+    className?: string;
+}
+/**
+ * ColorPickerSliders props
+ */
+export interface ColorPickerSlidersProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether to show individual channel labels
+     * @default true
+     */
+    showLabels?: boolean;
+    className?: string;
+}
+/**
+ * ColorPickerInput props
+ */
+export interface ColorPickerInputProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+/**
+ * ColorPickerFormatSelector props
+ */
+export interface ColorPickerFormatSelectorProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+/**
+ * ColorPickerEyeDropper props
+ */
+export interface ColorPickerEyeDropperProps extends React.HTMLAttributes<HTMLButtonElement> {
+    className?: string;
+}
+/**
+ * ColorPickerPresets props
+ */
+export interface ColorPickerPresetsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Custom preset colors (overrides context presetColors)
+     */
+    colors?: string[];
+    className?: string;
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+/**
+ * ColorPicker2DCanvas - Main 2D draggable color picker
+ * Horizontal axis: Saturation (0-100%)
+ * Vertical axis: Brightness/Value (0-100%)
+ * This is the PRIMARY feature of the color picker
+ */
+export declare const ColorPicker2DCanvas: React.FC<{
+    className?: string;
+}>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerContentProps } from './ColorPicker.types';
+/**
+ * ColorPickerContent - Popover content wrapper following Dropdown/Select patterns
+ * Uses portal rendering and useSelectPortal for positioning
+ */
+export declare const ColorPickerContent: React.FC<ColorPickerContentProps>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerEyeDropperProps } from './ColorPicker.types';
+/**
+ * ColorPickerEyeDropper - Eyedropper tool to pick colors from screen
+ * Uses browser EyeDropper API (if available)
+ */
+export declare const ColorPickerEyeDropper: React.FC<ColorPickerEyeDropperProps>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerFormatSelectorProps } from './ColorPicker.types';
+/**
+ * ColorPickerFormatSelector - Dropdown to select color format (HEX/RGB/HSL)
+ * Uses Flikkui Select component
+ */
+export declare const ColorPickerFormatSelector: React.FC<ColorPickerFormatSelectorProps>;

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { ColorPickerInputProps } from "./ColorPicker.types";
+/**
+ * ColorPickerInput - Manual color value input
+ * Supports hex, rgb, and hsl input based on selected format
+ */
+export declare const ColorPickerInput: React.FC<ColorPickerInputProps>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerPresetsProps } from './ColorPicker.types';
+/**
+ * ColorPickerPresets - Grid of preset color swatches
+ * Allows quick selection from predefined colors
+ */
+export declare const ColorPickerPresets: React.FC<ColorPickerPresetsProps>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerSlidersProps } from './ColorPicker.types';
+/**
+ * ColorPickerSliders - Compact Hue and Alpha sliders
+ * Matches reference design with inline values
+ */
+export declare const ColorPickerSliders: React.FC<ColorPickerSlidersProps>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerSwatchProps } from './ColorPicker.types';
+/**
+ * ColorPickerSwatch - Visual color preview with optional checkerboard background
+ * Shows the current color with transparency support
+ */
+export declare const ColorPickerSwatch: React.FC<ColorPickerSwatchProps>;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ColorPickerTriggerProps } from './ColorPicker.types';
+/**
+ * ColorPickerTrigger - Input field with color swatch
+ * Uses standard Input component styling (like Select does)
+ */
+export declare const ColorPickerTrigger: React.FC<ColorPickerTriggerProps>;