@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.20

package/dist/components/effects/StickyScroll/StickyScroll.js

@@ -0,0 +1,128 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+/* ------------------------------------------------------------------ */
+/*  Content transition variants                                         */
+/* ------------------------------------------------------------------ */
+const contentVariants = {
+    enter: { opacity: 0, y: 12 },
+    center: {
+        opacity: 1,
+        y: 0,
+        transition: { duration: 0.35, ease: [0.25, 0.1, 0.25, 1] },
+    },
+    exit: {
+        opacity: 0,
+        y: -12,
+        transition: { duration: 0.25, ease: [0.25, 0.1, 0.25, 1] },
+    },
+};
+const reducedMotionVariants = {
+    enter: { opacity: 1, y: 0 },
+    center: { opacity: 1, y: 0 },
+    exit: { opacity: 1, y: 0 },
+};
+/* ------------------------------------------------------------------ */
+/*  Component                                                           */
+/* ------------------------------------------------------------------ */
+/**
+ * StickyScroll
+ *
+ * Creates an Apple-style sticky scroll experience where one column stays
+ * pinned while the other scrolls.  As each scrolling section enters the
+ * viewport, the sticky content transitions to match.
+ *
+ * @example
+ * ```tsx
+ * <StickyScroll
+ *   sections={[
+ *     {
+ *       id: 'design',
+ *       title: 'Design System',
+ *       description: 'Build consistent interfaces with a shared design language.',
+ *       content: <img src="/design.png" alt="Design system" />,
+ *     },
+ *     {
+ *       id: 'develop',
+ *       title: 'Developer Experience',
+ *       description: 'TypeScript-first components with full IntelliSense.',
+ *       content: <img src="/develop.png" alt="Developer experience" />,
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+const StickyScroll = React__default.forwardRef(({ sections, contentPosition = 'left', showProgress = true, className, ...props }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    const [activeIndex, setActiveIndex] = useState(0);
+    const sectionRefs = useRef([]);
+    const containerRef = useRef(null);
+    // Set up Intersection Observer to track which section is in view.
+    const observerCallback = useCallback((entries) => {
+        for (const entry of entries) {
+            if (entry.isIntersecting) {
+                const index = sectionRefs.current.indexOf(entry.target);
+                if (index !== -1) {
+                    setActiveIndex(index);
+                }
+            }
+        }
+    }, []);
+    useEffect(() => {
+        const observer = new IntersectionObserver(observerCallback, {
+            // Trigger when a section crosses the vertical center of the viewport.
+            rootMargin: '-35% 0px -35% 0px',
+            threshold: 0,
+        });
+        const currentRefs = sectionRefs.current;
+        for (const sectionRef of currentRefs) {
+            if (sectionRef)
+                observer.observe(sectionRef);
+        }
+        return () => {
+            for (const sectionRef of currentRefs) {
+                if (sectionRef)
+                    observer.unobserve(sectionRef);
+            }
+        };
+    }, [observerCallback, sections.length]);
+    const activeSection = sections[activeIndex];
+    const variants = shouldReduceMotion
+        ? reducedMotionVariants
+        : contentVariants;
+    /* -------------------------------------------------------------- */
+    /*  Sub-renders                                                     */
+    /* -------------------------------------------------------------- */
+    const stickyContent = (jsxs("div", { className: "sticky top-[20vh] flex h-[60vh] items-center justify-center", children: [showProgress && (jsx("div", { className: cn('absolute top-1/2 -translate-y-1/2 flex flex-col gap-2', contentPosition === 'left' ? 'right-0 mr-4' : 'left-0 ml-4'), children: sections.map((section, index) => (jsx("button", { type: "button", "aria-label": `Go to ${section.title}`, onClick: () => {
+                        var _a;
+                        (_a = sectionRefs.current[index]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                            behavior: shouldReduceMotion ? 'auto' : 'smooth',
+                            block: 'center',
+                        });
+                    }, className: cn('h-2 w-2 rounded-full transition-all duration-300', index === activeIndex
+                        ? 'scale-125 bg-[var(--color-primary)]'
+                        : 'bg-[var(--color-border)] hover:bg-[var(--color-text-muted)]') }, section.id))) })), jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { variants: variants, initial: "enter", animate: "center", exit: "exit", className: "flex h-full w-full items-center justify-center", children: activeSection.content }, activeSection.id) })] }));
+    const scrollingSections = (jsx("div", { className: "flex flex-col", children: sections.map((section, index) => (jsxs("div", { ref: (el) => {
+                sectionRefs.current[index] = el;
+            }, className: "flex min-h-[60vh] flex-col justify-center py-16 lg:py-24", children: [jsx("h3", { className: cn('text-2xl font-semibold transition-colors duration-300 lg:text-3xl', index === activeIndex
+                        ? 'text-[var(--color-text-primary)]'
+                        : 'text-[var(--color-text-muted)]'), children: section.title }), jsx("p", { className: cn('mt-4 max-w-lg text-lg leading-relaxed transition-colors duration-300 lg:text-xl', index === activeIndex
+                        ? 'text-[var(--color-text-secondary)]'
+                        : 'text-[var(--color-text-placeholder)]'), children: section.description })] }, section.id))) }));
+    /* -------------------------------------------------------------- */
+    /*  Layout                                                          */
+    /* -------------------------------------------------------------- */
+    const isContentLeft = contentPosition === 'left';
+    return (jsx("div", { ref: (node) => {
+            containerRef.current = node;
+            if (typeof ref === 'function')
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, className: cn('relative grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-16', className), ...props, children: isContentLeft ? (jsxs(Fragment, { children: [jsx("div", { className: "hidden lg:block", children: stickyContent }), scrollingSections] })) : (jsxs(Fragment, { children: [scrollingSections, jsx("div", { className: "hidden lg:block", children: stickyContent })] })) }));
+});
+StickyScroll.displayName = 'StickyScroll';
+
+export { StickyScroll };

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

@@ -0,0 +1,19 @@
+export interface StickyScrollSection {
+    /** Unique identifier for this section */
+    id: string;
+    /** Section title displayed in the scrolling column */
+    title: string;
+    /** Section description displayed in the scrolling column */
+    description: string;
+    /** The sticky content to show when this section is active */
+    content: React.ReactNode;
+}
+export interface StickyScrollProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Array of sections defining the scroll experience */
+    sections: StickyScrollSection[];
+    /** Which side the sticky content appears (default 'left') */
+    contentPosition?: 'left' | 'right';
+    /** Show progress dots (default true) */
+    showProgress?: boolean;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { StickyScroll } from './StickyScroll';
+export type { StickyScrollProps, StickyScrollSection, } from './StickyScroll.types';

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

@@ -1,14 +1,38 @@
-export { CustomCursor } from "./CustomCursor";
-export type { CustomCursorProps } from "./CustomCursor";
+export { CustomCursorProvider, CustomCursor, CustomCursorFollow, useCustomCursor } from "./CustomCursor";
+export type { CustomCursorProps, CustomCursorProviderProps, CustomCursorFollowProps, CustomCursorContextType, CustomCursorSize, CustomCursorColor, CustomCursorVariant, CustomCursorShape, CustomCursorTheme, CustomCursorThemeOverrides, } from "./CustomCursor";
 export { GlassEffect } from "./GlassEffect";
 export type { GlassEffectProps, BlendMode } from "./GlassEffect";
 export { Overlay } from "./Overlay";
 export type { OverlayProps, OverlayPosition, OverlayAnimations, } from "./Overlay";
-export { SpotlightBorder } from "./SpotlightBorder";
-export type { SpotlightBorderProps, SpotlightBorderVariation, } from "./SpotlightBorder";
 export { GlassSurface } from "./GlassSurface";
 export type { GlassSurfaceProps, GlassChannel, GlassMixBlendMode, } from "./GlassSurface";
-export { AIOrb } from "./AIOrb";
-export type { AIOrbProps, DotSphereProps, LiquidProps } from "./AIOrb";
 export { Animated } from "./Animated";
 export type { AnimatedGroupProps, AnimatedItemProps, AnimationPreset, AnimatedElement, } from "./Animated";
+export { ProgressiveBlur } from "./ProgressiveBlur";
+export type { ProgressiveBlurProps, ProgressiveBlurPosition, ProgressiveBlurThemeOverrides, } from "./ProgressiveBlur";
+export { Aurora } from "./Aurora";
+export type { AuroraProps } from "./Aurora";
+export { MagneticElement } from "./MagneticElement";
+export type { MagneticElementProps } from "./MagneticElement";
+export { MorphingText } from "./MorphingText";
+export type { MorphingTextProps } from "./MorphingText";
+export { GridPattern } from "./GridPattern";
+export type { GridPatternProps, GridPatternFadeDirection, } from "./GridPattern";
+export { DotPattern } from "./DotPattern";
+export type { DotPatternProps, DotPatternFadeDirection, } from "./DotPattern";
+export { NoiseOverlay } from "./NoiseOverlay";
+export type { NoiseOverlayProps, NoiseBlendMode } from "./NoiseOverlay";
+export { Spotlight } from "./Spotlight";
+export type { SpotlightProps } from "./Spotlight";
+export { ParallaxSection } from "./ParallaxSection";
+export type { ParallaxSectionProps } from "./ParallaxSection";
+export { ScrollReveal } from "./ScrollReveal";
+export type { ScrollRevealProps, ScrollRevealPreset } from "./ScrollReveal";
+export { StickyScroll } from "./StickyScroll";
+export type { StickyScrollProps, StickyScrollSection, } from "./StickyScroll";
+export { PageTransition } from "./PageTransition";
+export type { PageTransitionProps, PageTransitionDirection, } from "./PageTransition";
+export { InteractiveCharacters } from "./InteractiveCharacters";
+export type { InteractiveCharactersProps, CharacterState, CharacterSize, } from "./InteractiveCharacters";
+export { InsetCircleButton, InsetPill } from "./Neumorphic";
+export type { InsetCircleButtonProps, InsetPillProps, } from "./Neumorphic";

package/dist/components/effects/index.js

@@ -1,7 +1,20 @@
-export { CustomCursor } from './CustomCursor/CustomCursor.js';
+export { CustomCursor, CustomCursorFollow, CustomCursorProvider, useCustomCursor } from './CustomCursor/CustomCursor.js';
 export { GlassEffect } from './GlassEffect/GlassEffect.js';
 export { Overlay } from './Overlay/Overlay.js';
-export { SpotlightBorder } from './SpotlightBorder/SpotlightBorder.js';
 export { GlassSurface } from './GlassSurface/GlassSurface.js';
-export { AIOrb } from './AIOrb/AIOrb.js';
 export { Animated } from './Animated/Animated.js';
+export { ProgressiveBlur } from './ProgressiveBlur/ProgressiveBlur.js';
+export { Aurora } from './Aurora/Aurora.js';
+export { MagneticElement } from './MagneticElement/MagneticElement.js';
+export { MorphingText } from './MorphingText/MorphingText.js';
+export { GridPattern } from './GridPattern/GridPattern.js';
+export { DotPattern } from './DotPattern/DotPattern.js';
+export { NoiseOverlay } from './NoiseOverlay/NoiseOverlay.js';
+export { Spotlight } from './Spotlight/Spotlight.js';
+export { ParallaxSection } from './ParallaxSection/ParallaxSection.js';
+export { ScrollReveal } from './ScrollReveal/ScrollReveal.js';
+export { StickyScroll } from './StickyScroll/StickyScroll.js';
+export { PageTransition } from './PageTransition/PageTransition.js';
+export { InteractiveCharacters } from './InteractiveCharacters/InteractiveCharacters.js';
+export { InsetCircleButton } from './Neumorphic/InsetCircleButton.js';
+export { InsetPill } from './Neumorphic/InsetPill.js';

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,53 @@
+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,69 @@
 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 { FormLabel } from '../FormLabel/FormLabel.js';
-import { MinusIcon, CheckIcon } from '@heroicons/react/24/outline';
+import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { cn } from '../../../utils/cn.js';
+import { useCheckboxGroupContext } from './CheckboxContext.js';
+import { CheckboxGroup } from './CheckboxGroup.js';
+import { reducedMotionVariants, indeterminateVariants, checkmarkVariants } from './Checkbox.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";
+    // 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;
+    }
     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";
     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) => {
                             inputRef.current = node;
-                            if (typeof ref === 'function')
+                            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("div", { className: `cursor-pointer`, children: [label && (jsx(FormLabel, { htmlFor: id, className: "!mb-0", state: state, children: label })), description && (jsx("div", { id: `${id}-description`, className: checkboxTheme.descriptionStyle, children: description }))] }))] }));
+                        }, 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") }), 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-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-white", size === "sm" ? "size-3" : "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[state], "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

@@ -8,9 +8,9 @@ const checkboxTheme = {
     // 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 " +
         // Default state - light
-        "border-[var(--color-border)] bg-[var(--color-background)] " +
+        "border-[var(--color-border)] bg-[var(--color-surface)] " +
         // Default state - dark
-        " " +
+        "dark:bg-[var(--color-background-tertiary)] " +
         // Checked state - light
         "checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] " +
         // Checked state - dark
@@ -27,16 +27,20 @@ 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:disabled:bg-[var(--color-neutral-800)] 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)]",
     // Description text - light and dark
-    descriptionStyle: "text-sm mt-0.5 " +
-        "text-[var(--color-text-secondary)] " +
-        "dark:text-[var(--color-neutral-400)]",
+    descriptionStyle: "text-base mt-0.5 " + "text-[var(--color-text-secondary)]/80 " + " ",
     sizes: {
         sm: "size-5 mt-0.25",
         md: "size-6",
     },
+    // Group styles
+    groupStyle: "flex flex-col gap-1.5",
+    groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
+    groupDescriptionStyle: "text-base text-[var(--color-text-secondary)] -mt-0.5 mb-1",
+    groupErrorStyle: "text-base text-[var(--color-danger)] mt-1.5",
+    groupItemsStyle: "flex flex-col gap-3",
 };
 
 export { checkboxTheme };

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

@@ -7,22 +7,43 @@ export type CheckboxState = 'default' | 'disabled';
  * Size variants for the checkbox component
  */
 export type CheckboxSize = 'sm' | 'md';
+/**
+ * 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;
+    id?: string;
+    name?: 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;
+    error?: React.ReactNode;
+    required?: boolean;
+    className?: string;
+}
 /**
  * Checkbox theme configuration
  */
@@ -32,4 +53,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,12 @@
+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,40 @@
+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 = "default", orientation = "vertical", label, description, error, required, className, children, ...props }, ref) => {
+    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]);
+    const labelState = error ? "invalid" : 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": error ? true : undefined, "aria-errormessage": error ? 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 }), error && (typeof error === 'string' ? (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: error })) : (error))] }) }));
+});
+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

@@ -14,7 +14,7 @@ export declare const useColorPicker: () => ColorPickerContextValue;
  */
 export declare const ColorPicker: React.ForwardRefExoticComponent<ColorPickerProps & React.RefAttributes<HTMLDivElement>> & {
     Trigger: React.FC<import("./ColorPicker.types").ColorPickerTriggerProps>;
-    Content: React.FC<import("./ColorPicker.types").ColorPickerContentProps>;
+    Body: React.FC<import("./ColorPicker.types").ColorPickerBodyProps>;
     Canvas: React.FC<{
         className?: string;
     }>;

package/dist/components/forms/ColorPicker/ColorPicker.js

@@ -4,7 +4,7 @@ import { cn } from '../../../utils/cn.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
 import { colorPickerTheme } from './ColorPicker.theme.js';
 import { ColorPicker2DCanvas } from './ColorPicker2DCanvas.js';
-import { ColorPickerContent } from './ColorPickerContent.js';
+import { ColorPickerBody } from './ColorPickerBody.js';
 import { ColorPickerEyeDropper } from './ColorPickerEyeDropper.js';
 import { ColorPickerFormatSelector } from './ColorPickerFormatSelector.js';
 import { ColorPickerInput } from './ColorPickerInput.js';
@@ -152,7 +152,7 @@ const ColorPickerRoot = React__default.forwardRef(({ value, defaultValue = '#000
         getFormattedValue,
         onChange,
     ]);
-    return (jsx(ColorPickerContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [label && (jsx(FormLabel, { htmlFor: "color-picker", required: required, state: state, children: label })), children, helperText && (jsx("div", { className: cn('mt-1.5 text-xs text-[var(--color-text-secondary)]', state === 'invalid' && 'text-[var(--color-danger)]'), children: helperText }))] }) }));
+    return (jsx(ColorPickerContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), ...props, children: [label && (jsx(FormLabel, { htmlFor: "color-picker", required: required, state: state, children: label })), children, helperText && (jsx("div", { className: cn('mt-1.5 text-sm text-[var(--color-text-secondary)]', state === 'invalid' && 'text-[var(--color-danger)]'), children: helperText }))] }) }));
 });
 ColorPickerRoot.displayName = 'ColorPicker';
 /**
@@ -161,7 +161,7 @@ ColorPickerRoot.displayName = 'ColorPicker';
  */
 const ColorPicker = Object.assign(ColorPickerRoot, {
     Trigger: ColorPickerTrigger,
-    Content: ColorPickerContent,
+    Body: ColorPickerBody,
     Canvas: ColorPicker2DCanvas,
     Swatch: ColorPickerSwatch,
     Sliders: ColorPickerSliders,

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

@@ -7,12 +7,12 @@ const colorPickerTheme = {
     triggerStyle: 'cursor-pointer',
     swatchStyle: 'relative size-5 flex-shrink-0 rounded border border-[var(--color-border)] overflow-hidden',
     // Content matches Dropdown menu style
-    contentStyle: 'min-w-[280px] max-w-[320px] rounded-xl border border-[var(--color-border)] bg-white shadow-real-xl p-3 focus:outline-none',
+    contentStyle: 'min-w-[min(280px,calc(100vw-2rem))] max-w-[320px] rounded-xl border border-[var(--color-border)] bg-white shadow-real-xl p-3 focus:outline-none',
     sliderContainerStyle: 'space-y-2',
-    sliderLabelStyle: 'flex items-center justify-between text-xs font-medium text-[var(--color-text-secondary)]',
+    sliderLabelStyle: 'flex items-center justify-between text-sm font-medium text-[var(--color-text-secondary)]',
     inputContainerStyle: 'flex items-center gap-2',
     formatSelectorStyle: 'flex-shrink-0',
-    presetGridStyle: 'mt-3 grid grid-cols-8 gap-1.5',
+    presetGridStyle: 'mt-3 grid grid-cols-6 sm:grid-cols-8 gap-1.5',
     presetSwatchStyle: 'relative size-7 cursor-pointer rounded border-2 border-transparent transition-all hover:border-[var(--color-primary)] hover:scale-110 focus:border-[var(--color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:ring-opacity-20 data-[selected]:border-[var(--color-primary)] data-[selected]:ring-2 data-[selected]:ring-[var(--color-primary)] data-[selected]:ring-opacity-20',
     eyedropperButtonStyle: 'flex-shrink-0',
 };