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

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-base leading-relaxed transition-colors duration-300 lg:text-lg', 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

@@ -4,11 +4,29 @@ 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";

package/dist/components/effects/index.js

@@ -1,7 +1,16 @@
 export { CustomCursor } 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';

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { checkboxTheme } from './Checkbox.theme.js';
-import { FormLabel } from '../FormLabel/FormLabel.js';
+import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { MinusIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 
@@ -32,11 +32,11 @@ const Checkbox = React__default.forwardRef(({ id, name, value, checked: controll
     };
     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") }), 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 }))] }))] }));
 });
 Checkbox.displayName = "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-secondary)] " +
         // Checked state - light
         "checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] " +
         // Checked state - dark
@@ -30,9 +30,7 @@ const checkboxTheme = {
         "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)]",
     // Description text - light and dark
-    descriptionStyle: "text-sm mt-0.5 " +
-        "text-[var(--color-text-secondary)] " +
-        "dark:text-[var(--color-neutral-400)]",
+    descriptionStyle: "text-sm mt-0.5 " + "text-[var(--color-text-secondary)]/80 " + " ",
     sizes: {
         sm: "size-5 mt-0.25",
         md: "size-6",

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)]',
     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',
 };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { CronInputProps } from "./CronInput.types";
+export declare const CronInput: React.ForwardRefExoticComponent<CronInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/forms/CronInput/CronInput.js

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useId, useState, useEffect, useMemo, useCallback } from 'react';
+import { cronInputTheme } from './CronInput.theme.js';
+import { parseCron, validateCron, cronToDescription, getNextRuns, CRON_PRESETS, getMinuteOptions, getHourOptions, getDayOfMonthOptions, getMonthOptions, getDayOfWeekOptions, formatNextRun, fieldsToCron } from './CronInput.utils.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { cn } from '../../../utils/cn.js';
+import { CalendarIcon, ClockIcon } from '@heroicons/react/24/outline';
+
+const FieldSelect = ({ label, value, options, onChange, disabled, size = "md", className, }) => {
+    const theme = cronInputTheme;
+    return (jsxs("div", { className: theme.fieldGroupStyle, children: [jsx("label", { className: theme.fieldLabelStyle, children: label }), jsx("select", { value: value, onChange: (e) => onChange(e.target.value), disabled: disabled, className: cn(theme.fieldSelectStyle, theme.fieldSelectSizes[size], className), "aria-label": `Cron ${label.toLowerCase()} field`, children: options.map((option) => (jsx("option", { value: option.value, children: option.label }, option.value))) })] }));
+};
+// ============================================================================
+// Main CronInput Component
+// ============================================================================
+const CronInput = React__default.forwardRef(({ value: controlledValue, defaultValue = "* * * * *", onChange, showPresets = true, showDescription = true, showNextRuns = true, nextRunCount = 3, size = "md", mode = "both", className, theme: themeOverrides, disabled = false, label, ...props }, ref) => {
+    // Unique ID for accessibility
+    const generatedId = useId();
+    // Controlled vs uncontrolled state
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const cronValue = isControlled ? controlledValue : internalValue;
+    // Active mode when mode="both"
+    const [activeMode, setActiveMode] = useState(mode === "both" ? "visual" : mode);
+    // Raw input state (tracks what user is typing, may be invalid temporarily)
+    const [rawInput, setRawInput] = useState(cronValue);
+    // Sync raw input when controlled value changes
+    useEffect(() => {
+        if (isControlled) {
+            setRawInput(controlledValue);
+        }
+    }, [controlledValue, isControlled]);
+    // Merge theme with overrides
+    const theme = useMemo(() => ({
+        ...cronInputTheme,
+        ...themeOverrides,
+    }), [themeOverrides]);
+    // Parse current cron value into fields
+    const fields = useMemo(() => parseCron(cronValue), [cronValue]);
+    // Validation state
+    const isValid = useMemo(() => validateCron(cronValue), [cronValue]);
+    // Human-readable description
+    const description = useMemo(() => (isValid ? cronToDescription(cronValue) : ""), [cronValue, isValid]);
+    // Next run times
+    const nextRuns = useMemo(() => (isValid && showNextRuns ? getNextRuns(cronValue, nextRunCount) : []), [cronValue, isValid, showNextRuns, nextRunCount]);
+    // Active preset detection
+    const activePreset = useMemo(() => { var _a, _b; return (_b = (_a = CRON_PRESETS.find((p) => p.value === cronValue)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null; }, [cronValue]);
+    // Memoized options
+    const minuteOptions = useMemo(() => getMinuteOptions(), []);
+    const hourOptions = useMemo(() => getHourOptions(), []);
+    const dayOfMonthOptions = useMemo(() => getDayOfMonthOptions(), []);
+    const monthOptions = useMemo(() => getMonthOptions(), []);
+    const dayOfWeekOptions = useMemo(() => getDayOfWeekOptions(), []);
+    // Update the cron value
+    const updateValue = useCallback((newCron) => {
+        if (!isControlled) {
+            setInternalValue(newCron);
+        }
+        setRawInput(newCron);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newCron);
+    }, [isControlled, onChange]);
+    // Handle field change from visual builder
+    const handleFieldChange = useCallback((field, newFieldValue) => {
+        const newFields = { ...fields, [field]: newFieldValue };
+        const newCron = fieldsToCron(newFields);
+        updateValue(newCron);
+    }, [fields, updateValue]);
+    // Handle raw input change
+    const handleRawInputChange = useCallback((e) => {
+        const newRaw = e.target.value;
+        setRawInput(newRaw);
+        if (validateCron(newRaw)) {
+            if (!isControlled) {
+                setInternalValue(newRaw);
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(newRaw);
+        }
+    }, [isControlled, onChange]);
+    // Handle raw input blur - commit value if valid
+    const handleRawInputBlur = useCallback(() => {
+        if (validateCron(rawInput)) {
+            updateValue(rawInput);
+        }
+        else {
+            // Reset to last valid value
+            setRawInput(cronValue);
+        }
+    }, [rawInput, cronValue, updateValue]);
+    // Handle preset click
+    const handlePresetClick = useCallback((presetValue) => {
+        if (disabled)
+            return;
+        updateValue(presetValue);
+    }, [disabled, updateValue]);
+    // Handle Enter key in raw input
+    const handleRawKeyDown = useCallback((e) => {
+        if (e.key === "Enter") {
+            handleRawInputBlur();
+        }
+    }, [handleRawInputBlur]);
+    const showVisual = mode === "visual" || (mode === "both" && activeMode === "visual");
+    const showRaw = mode === "raw" || (mode === "both" && activeMode === "raw");
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, className), role: "group", "aria-label": label || "Cron expression builder", ...props, children: [label && (jsx(FormLabel, { htmlFor: `${generatedId}-cron`, state: disabled ? "disabled" : "default", children: label })), mode === "both" && (jsxs("div", { className: "flex items-center gap-1.5", children: [jsxs("button", { type: "button", onClick: () => setActiveMode("visual"), disabled: disabled, className: cn(theme.modeToggleStyle, activeMode === "visual" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "visual", children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Visual"] }), jsxs("button", { type: "button", onClick: () => setActiveMode("raw"), disabled: disabled, className: cn(theme.modeToggleStyle, activeMode === "raw" && theme.modeToggleActiveStyle), "aria-pressed": activeMode === "raw", children: [jsx(ClockIcon, { className: "w-3.5 h-3.5 mr-1", "aria-hidden": "true" }), "Cron"] })] })), showPresets && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Presets" }), jsx("div", { className: "flex flex-wrap gap-1.5", children: CRON_PRESETS.map((preset) => (jsx("button", { type: "button", onClick: () => handlePresetClick(preset.value), disabled: disabled, className: cn(theme.presetButtonStyle, activePreset === preset.value && theme.presetButtonActiveStyle), title: preset.description, "aria-pressed": activePreset === preset.value, children: preset.label }, preset.value))) })] })), showVisual && (jsxs("div", { className: theme.builderStyle, children: [jsx(FieldSelect, { label: "Minute", value: fields.minute, options: minuteOptions, onChange: (v) => handleFieldChange("minute", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Hour", value: fields.hour, options: hourOptions, onChange: (v) => handleFieldChange("hour", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Day of Month", value: fields.dayOfMonth, options: dayOfMonthOptions, onChange: (v) => handleFieldChange("dayOfMonth", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Month", value: fields.month, options: monthOptions, onChange: (v) => handleFieldChange("month", v), disabled: disabled, size: size }), jsx(FieldSelect, { label: "Day of Week", value: fields.dayOfWeek, options: dayOfWeekOptions, onChange: (v) => handleFieldChange("dayOfWeek", v), disabled: disabled, size: size })] })), showRaw && (jsxs("div", { children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1.5"), children: "Cron Expression" }), jsx("input", { type: "text", value: rawInput, onChange: handleRawInputChange, onBlur: handleRawInputBlur, onKeyDown: handleRawKeyDown, disabled: disabled, placeholder: "* * * * *", className: cn(theme.rawInputStyle, theme.rawInputSizes[size]), id: `${generatedId}-cron`, "aria-label": "Cron expression", "aria-invalid": !validateCron(rawInput), spellCheck: false, autoComplete: "off" }), !validateCron(rawInput) && rawInput !== cronValue && (jsx("div", { className: cn(theme.errorStyle, "mt-1"), children: "Invalid cron expression. Format: minute hour day month weekday" }))] })), showVisual && !showRaw && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: cn(theme.fieldLabelStyle, "shrink-0"), children: "Expression:" }), jsx("code", { className: cn("font-mono text-xs px-2 py-1 rounded-[var(--form-radius)]", "bg-[var(--color-background-secondary)] text-[var(--color-text-primary)]", "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-200)]"), children: cronValue })] })), showDescription && isValid && (jsxs("div", { className: theme.descriptionStyle, children: [jsx(ClockIcon, { className: "w-4 h-4 shrink-0", "aria-hidden": "true" }), jsx("span", { children: description })] })), showNextRuns && isValid && nextRuns.length > 0 && (jsxs("div", { className: theme.nextRunsStyle, children: [jsx("div", { className: cn(theme.sectionHeadingStyle, "mb-1"), children: "Next runs" }), nextRuns.map((date, index) => (jsxs("div", { className: theme.nextRunItemStyle, children: [jsx(CalendarIcon, { className: "w-3.5 h-3.5 shrink-0", "aria-hidden": "true" }), jsx("span", { children: formatNextRun(date) })] }, index)))] }))] }));
+});
+CronInput.displayName = "CronInput";
+
+export { CronInput };

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

@@ -0,0 +1,6 @@
+import { CronInputTheme } from "./CronInput.types";
+/**
+ * Default theme for the CronInput component
+ * Uses flat structure with CSS variable design tokens
+ */
+export declare const cronInputTheme: CronInputTheme;

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

@@ -0,0 +1,84 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the CronInput component
+ * Uses flat structure with CSS variable design tokens
+ */
+const cronInputTheme = {
+    // Outer wrapper
+    baseStyle: "relative w-full flex flex-col gap-3",
+    // Label
+    labelStyle: "text-sm font-medium text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
+    // Visual builder grid
+    builderStyle: "grid grid-cols-5 gap-2",
+    // Individual field group
+    fieldGroupStyle: "flex flex-col gap-1",
+    // Field label
+    fieldLabelStyle: "text-xs font-medium text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
+    // Select dropdown
+    fieldSelectStyle: "w-full rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
+        "bg-white text-[var(--color-text-primary)] cursor-pointer transition-all " +
+        "focus:outline-2 focus:outline-[var(--color-primary-600)] focus:-outline-offset-1 " +
+        "focus:ring-4 focus:ring-[var(--color-primary)]/10 " +
+        "disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:text-[var(--color-text-disabled)] " +
+        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +
+        "dark:focus:outline-[var(--color-primary-500)] dark:focus:ring-[var(--color-primary-500)]/20",
+    // Size variants for field selects
+    fieldSelectSizes: {
+        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
+        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
+        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
+    },
+    // Raw input field
+    rawInputStyle: "w-full rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
+        "bg-white text-[var(--color-text-primary)] font-mono transition-all " +
+        "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
+        "focus:outline-2 focus:outline-[var(--color-primary-600)] focus:-outline-offset-1 " +
+        "focus:ring-4 focus:ring-[var(--color-primary)]/10 " +
+        "disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:text-[var(--color-text-disabled)] " +
+        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-200)] " +
+        "dark:focus:outline-[var(--color-primary-500)] dark:focus:ring-[var(--color-primary-500)]/20",
+    // Size variants for raw input
+    rawInputSizes: {
+        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
+        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
+        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
+    },
+    // Mode toggle button
+    modeToggleStyle: "inline-flex items-center justify-center rounded-[var(--form-radius)] px-3 py-1.5 text-xs font-medium " +
+        "cursor-pointer transition-all outline outline-1 outline-[var(--color-border)] " +
+        "text-[var(--color-text-secondary)] bg-white hover:bg-[var(--color-background-secondary)] " +
+        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-400)] " +
+        "dark:hover:bg-[var(--color-neutral-800)]",
+    // Active mode toggle
+    modeToggleActiveStyle: "outline-[var(--color-primary)] bg-[var(--color-primary-50)] text-[var(--color-primary)] " +
+        "hover:bg-[var(--color-primary-50)] " +
+        "dark:outline-[var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)] " +
+        "dark:hover:bg-[var(--color-primary-500)]/15",
+    // Preset button
+    presetButtonStyle: "inline-flex items-center rounded-[var(--form-radius)] px-2.5 py-1 text-xs font-medium " +
+        "cursor-pointer transition-all outline outline-1 outline-[var(--color-border)] " +
+        "text-[var(--color-text-secondary)] bg-white hover:bg-[var(--color-background-secondary)] " +
+        "hover:text-[var(--color-text-primary)] " +
+        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)] dark:text-[var(--color-neutral-400)] " +
+        "dark:hover:bg-[var(--color-neutral-800)] dark:hover:text-[var(--color-neutral-200)]",
+    // Active preset button
+    presetButtonActiveStyle: "outline-[var(--color-primary)] bg-[var(--color-primary-50)] text-[var(--color-primary)] " +
+        "hover:bg-[var(--color-primary-100)] " +
+        "dark:outline-[var(--color-primary-500)] dark:bg-[var(--color-primary-500)]/10 dark:text-[var(--color-primary-400)]",
+    // Human-readable description
+    descriptionStyle: "flex items-center gap-2 text-sm text-[var(--color-text-muted)] " +
+        "dark:text-[var(--color-neutral-400)]",
+    // Next runs container
+    nextRunsStyle: "flex flex-col gap-1",
+    // Individual next run item
+    nextRunItemStyle: "flex items-center gap-2 text-xs text-[var(--color-text-muted)] " +
+        "dark:text-[var(--color-neutral-400)]",
+    // Section heading
+    sectionHeadingStyle: "text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide " +
+        "dark:text-[var(--color-neutral-400)]",
+    // Validation error
+    errorStyle: "text-xs text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
+};
+
+export { cronInputTheme };

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

@@ -0,0 +1,98 @@
+import React from "react";
+/**
+ * CronInput component props
+ * A visual cron expression builder that outputs standard cron syntax
+ */
+export interface CronInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Controlled cron expression string, e.g. "0 9 * * 1" */
+    value?: string;
+    /** Default cron expression for uncontrolled usage */
+    defaultValue?: string;
+    /** Callback fired when the cron expression changes */
+    onChange?: (cronExpression: string) => void;
+    /** Whether to show preset schedule buttons */
+    showPresets?: boolean;
+    /** Whether to show the human-readable description */
+    showDescription?: boolean;
+    /** Whether to show upcoming execution times */
+    showNextRuns?: boolean;
+    /** Number of next run times to display (default: 3) */
+    nextRunCount?: number;
+    /** Size variant */
+    size?: CronInputSize;
+    /** Display mode: visual builder, raw string input, or both */
+    mode?: CronInputMode;
+    /** Additional class name (highest priority, shadcn pattern) */
+    className?: string;
+    /** Theme overrides for sub-component styling */
+    theme?: CronInputThemeOverrides;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Label text for the component */
+    label?: string;
+}
+export type CronInputSize = "sm" | "md" | "lg";
+export type CronInputMode = "visual" | "raw" | "both";
+/**
+ * Parsed cron fields
+ */
+export interface CronFields {
+    minute: string;
+    hour: string;
+    dayOfMonth: string;
+    month: string;
+    dayOfWeek: string;
+}
+/**
+ * Preset schedule definition
+ */
+export interface CronPreset {
+    label: string;
+    value: string;
+    description: string;
+}
+/**
+ * Theme structure for CronInput component
+ */
+export interface CronInputTheme {
+    /** Outer wrapper */
+    baseStyle: string;
+    /** Label text */
+    labelStyle: string;
+    /** Visual builder section */
+    builderStyle: string;
+    /** Individual field group (label + select) */
+    fieldGroupStyle: string;
+    /** Field label */
+    fieldLabelStyle: string;
+    /** Select dropdown for each field */
+    fieldSelectStyle: string;
+    /** Size variants for the select dropdowns */
+    fieldSelectSizes: Record<CronInputSize, string>;
+    /** Raw input field */
+    rawInputStyle: string;
+    /** Size variants for the raw input */
+    rawInputSizes: Record<CronInputSize, string>;
+    /** Mode toggle button */
+    modeToggleStyle: string;
+    /** Active mode toggle button */
+    modeToggleActiveStyle: string;
+    /** Preset button */
+    presetButtonStyle: string;
+    /** Active preset button */
+    presetButtonActiveStyle: string;
+    /** Human-readable description */
+    descriptionStyle: string;
+    /** Next runs container */
+    nextRunsStyle: string;
+    /** Individual next run time */
+    nextRunItemStyle: string;
+    /** Section heading style */
+    sectionHeadingStyle: string;
+    /** Validation error style */
+    errorStyle: string;
+}
+/**
+ * Theme overrides - all optional for partial customization
+ */
+export type CronInputThemeOverrides = Partial<CronInputTheme>;