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

package/dist/components/effects/SpotlightBorder/SpotlightBorder.js

@@ -1,214 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import * as THREE from 'three';
-import { cn } from '../../../utils/cn.js';
-import { variationMap } from './SpotlightBorder.types.js';
-import { fragmentShader, vertexShader } from './SpotlightBorder.shaders.js';
-
-/**
- * SpotlightBorder Component
- * Adds an interactive WebGL border effect around its children.
- * The border illuminates near the mouse cursor and supports a soft outer glow.
- * Refactored to handle larger canvas for external glow and prevent clipping of child shadows.
- *
- * @example
- * ```tsx
- * <SpotlightBorder color="#3b82f6" borderWidth={2} className="rounded-xl">
- *   <div className="p-6 bg-gray-900">
- *     <h3>Premium Card</h3>
- *   </div>
- * </SpotlightBorder>
- * ```
- */
-const SpotlightBorder = ({ children, variation = "rounded-rect", rounded, borderWidth = 2, color = "#ffffff", spotlightSize = 0.4, spotlightEdge = 0.5, glowExtent = 20, glowIntensity = 0.6, tiltIntensity = 5, shouldAnimate = true, className, style, ...props }) => {
-    var _a;
-    const outerRef = useRef(null);
-    const containerRef = useRef(null);
-    // Check for reduced motion preference
-    const prefersReducedMotion = typeof window !== "undefined" &&
-        ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches);
-    const isAnimating = shouldAnimate && !prefersReducedMotion;
-    // Refs to store THREE.js objects across effects
-    const rendererRef = useRef(null);
-    const sceneRef = useRef(null);
-    const cameraRef = useRef(null);
-    const materialRef = useRef(null);
-    const quadRef = useRef(null);
-    const geoRef = useRef(null);
-    const canvasRef = useRef(null);
-    // Refs for animation state
-    const vMouseRef = useRef(new THREE.Vector2(-1e4, -1e4));
-    const vMouseDampRef = useRef(new THREE.Vector2(-1e4, -1e4));
-    const vResolutionRef = useRef(new THREE.Vector2());
-    const vContentResolutionRef = useRef(new THREE.Vector2());
-    const vOffsetRef = useRef(new THREE.Vector2());
-    const rotateXDampRef = useRef(0);
-    const rotateYDampRef = useRef(0);
-    const wRef = useRef(1);
-    const hRef = useRef(1);
-    // One-time setup effect: creates renderer, scene, camera, geometry, material, mesh
-    useEffect(() => {
-        var _a;
-        const outer = outerRef.current;
-        const container = containerRef.current;
-        if (!outer || !container || !isAnimating)
-            return;
-        const scene = new THREE.Scene();
-        const camera = new THREE.OrthographicCamera();
-        camera.position.z = 1;
-        const renderer = new THREE.WebGLRenderer({ alpha: true });
-        renderer.setClearColor(0x000000, 0);
-        const canvas = renderer.domElement;
-        canvas.style.position = "absolute";
-        canvas.style.pointerEvents = "none";
-        canvas.style.zIndex = "10";
-        outer.appendChild(canvas);
-        const geo = new THREE.PlaneGeometry(1, 1);
-        const material = new THREE.ShaderMaterial({
-            vertexShader,
-            fragmentShader,
-            uniforms: {
-                u_mouse: { value: vMouseDampRef.current },
-                u_resolution: { value: vResolutionRef.current },
-                u_contentResolution: { value: vContentResolutionRef.current },
-                u_offset: { value: vOffsetRef.current },
-                u_pixelRatio: { value: Math.min(window.devicePixelRatio || 1, 2) },
-                u_color: { value: new THREE.Color(color) },
-                u_shapeSize: { value: 1.0 },
-                u_roundness: { value: 0.0 },
-                u_borderSize: { value: 0.0 },
-                u_spotlightSize: { value: spotlightSize },
-                u_spotlightEdge: { value: spotlightEdge },
-                u_glowIntensity: { value: glowIntensity },
-            },
-            defines: { VAR: (_a = variationMap[variation]) !== null && _a !== void 0 ? _a : 0 },
-            transparent: true,
-        });
-        const quad = new THREE.Mesh(geo, material);
-        scene.add(quad);
-        // Store refs
-        rendererRef.current = renderer;
-        sceneRef.current = scene;
-        cameraRef.current = camera;
-        materialRef.current = material;
-        quadRef.current = quad;
-        geoRef.current = geo;
-        canvasRef.current = canvas;
-        let animationFrameId;
-        const onPointerMove = (e) => {
-            if (!container)
-                return;
-            const rect = container.getBoundingClientRect();
-            vMouseRef.current.set(e.clientX - rect.left, e.clientY - rect.top);
-        };
-        document.addEventListener("mousemove", onPointerMove);
-        document.addEventListener("pointermove", onPointerMove);
-        const borderRadiusPx = parseFloat(getComputedStyle(outer).borderRadius) || 0;
-        const resize = () => {
-            if (!container || !outer)
-                return;
-            const w = container.clientWidth;
-            const h = container.clientHeight;
-            wRef.current = w;
-            hRef.current = h;
-            const dpr = Math.min(window.devicePixelRatio || 1, 2);
-            const canvasW = w + glowExtent * 2;
-            const canvasH = h + glowExtent * 2;
-            renderer.setSize(canvasW, canvasH);
-            renderer.setPixelRatio(dpr);
-            canvas.style.top = `-${glowExtent}px`;
-            canvas.style.left = `-${glowExtent}px`;
-            canvas.style.width = `${canvasW}px`;
-            canvas.style.height = `${canvasH}px`;
-            camera.left = -canvasW / 2;
-            camera.right = canvasW / 2;
-            camera.top = canvasH / 2;
-            camera.bottom = -canvasH / 2;
-            camera.updateProjectionMatrix();
-            quad.scale.set(canvasW, canvasH, 1);
-            vResolutionRef.current.set(canvasW, canvasH).multiplyScalar(dpr);
-            vContentResolutionRef.current.set(w, h).multiplyScalar(dpr);
-            vOffsetRef.current.set(glowExtent, glowExtent).multiplyScalar(dpr);
-            material.uniforms.u_pixelRatio.value = dpr;
-            const shortestDim = Math.min(w, h);
-            const childEl = rounded ? null : container.firstElementChild;
-            const currentRadius = childEl
-                ? parseFloat(getComputedStyle(childEl).borderRadius) || borderRadiusPx
-                : parseFloat(getComputedStyle(outer).borderRadius) || borderRadiusPx;
-            const normalizedRoundness = Math.min((currentRadius / shortestDim) * 2, 1);
-            material.uniforms.u_roundness.value = normalizedRoundness;
-            const normalizedBorderWidth = borderWidth / shortestDim;
-            material.uniforms.u_borderSize.value = normalizedBorderWidth;
-        };
-        resize();
-        window.addEventListener("resize", resize);
-        const ro = new ResizeObserver(() => resize());
-        ro.observe(container);
-        const animate = (now) => {
-            const vMouse = vMouseRef.current;
-            const vMouseDamp = vMouseDampRef.current;
-            const w = wRef.current;
-            const h = hRef.current;
-            vMouseDamp.x += (vMouse.x - vMouseDamp.x) * 0.1;
-            vMouseDamp.y += (vMouse.y - vMouseDamp.y) * 0.1;
-            if (tiltIntensity > 0 && outer && w > 0 && h > 0) {
-                const isInside = vMouseDamp.x >= 0 &&
-                    vMouseDamp.x <= w &&
-                    vMouseDamp.y >= 0 &&
-                    vMouseDamp.y <= h;
-                let targetRotateX = 0;
-                let targetRotateY = 0;
-                if (isInside) {
-                    const offsetX = vMouseDamp.x / w - 0.5;
-                    const offsetY = vMouseDamp.y / h - 0.5;
-                    targetRotateY = offsetX * tiltIntensity;
-                    targetRotateX = -offsetY * tiltIntensity;
-                }
-                rotateXDampRef.current += (targetRotateX - rotateXDampRef.current) * 0.08;
-                rotateYDampRef.current += (targetRotateY - rotateYDampRef.current) * 0.08;
-                outer.style.transform = `perspective(1000px) rotateX(${rotateXDampRef.current}deg) rotateY(${rotateYDampRef.current}deg)`;
-            }
-            renderer.render(scene, camera);
-            animationFrameId = requestAnimationFrame(animate);
-        };
-        animationFrameId = requestAnimationFrame(animate);
-        return () => {
-            document.removeEventListener("mousemove", onPointerMove);
-            document.removeEventListener("pointermove", onPointerMove);
-            window.removeEventListener("resize", resize);
-            ro.disconnect();
-            cancelAnimationFrame(animationFrameId);
-            if (outer.contains(canvas)) {
-                outer.removeChild(canvas);
-            }
-            renderer.dispose();
-            geo.dispose();
-            material.dispose();
-            rendererRef.current = null;
-            sceneRef.current = null;
-            cameraRef.current = null;
-            materialRef.current = null;
-            quadRef.current = null;
-            geoRef.current = null;
-            canvasRef.current = null;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isAnimating, variation]);
-    // Update shader uniforms when props change (without tearing down WebGL)
-    useEffect(() => {
-        const material = materialRef.current;
-        if (!material)
-            return;
-        material.uniforms.u_color.value.set(color);
-        material.uniforms.u_spotlightSize.value = spotlightSize;
-        material.uniforms.u_spotlightEdge.value = spotlightEdge;
-        material.uniforms.u_glowIntensity.value = glowIntensity;
-    }, [color, spotlightSize, spotlightEdge, glowIntensity]);
-    const containerStyle = {
-        ...style,
-        ...(rounded ? { borderRadius: rounded } : {}),
-    };
-    return (jsx("div", { ref: outerRef, className: cn("relative overflow-visible", className), style: containerStyle, ...props, children: jsx("div", { ref: containerRef, className: "relative w-full h-full", style: { borderRadius: "inherit", zIndex: 20 }, children: children }) }));
-};
-
-export { SpotlightBorder };

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

@@ -1,61 +0,0 @@
-import React from "react";
-export type SpotlightBorderVariation = "rounded-rect" | "circle" | "circle-ring" | "triangle";
-export declare const variationMap: Record<SpotlightBorderVariation, number>;
-export interface SpotlightBorderProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Content to wrap with the effect */
-    children: React.ReactNode;
-    /**
-     * Shape variation for the border
-     * @default 'rounded-rect'
-     */
-    variation?: SpotlightBorderVariation;
-    /**
-     * Border radius for the container (e.g., "1rem", "var(--button-radius)", "9999px")
-     * This controls both the container clip and the shader's corner roundness.
-     * @default undefined (inherits from className like rounded-lg)
-     */
-    rounded?: string;
-    /**
-     * Border/stroke width in pixels
-     * @default 2
-     */
-    borderWidth?: number;
-    /**
-     * Color of the border effect (hex color)
-     * @default '#ffffff'
-     */
-    color?: string;
-    /**
-     * Size of the mouse-following spotlight (0-1)
-     * @default 0.4
-     */
-    spotlightSize?: number;
-    /**
-     * Edge softness of the spotlight (higher = softer falloff)
-     * @default 0.5
-     */
-    spotlightEdge?: number;
-    /**
-     * Whether to animate the effect (respects prefers-reduced-motion)
-     * @default true
-     */
-    shouldAnimate?: boolean;
-    /**
-     * How far the glow can spread outside the container in pixels.
-     * This also solves clipping issues with child shadows.
-     * @default 20
-     */
-    glowExtent?: number;
-    /**
-     * Overall intensity of the glow halo (0-1)
-     * @default 0.6
-     */
-    glowIntensity?: number;
-    /**
-     * Intensity of the 3D tilt effect based on mouse position (0 = disabled)
-     * @default 10
-     */
-    tiltIntensity?: number;
-    /** Additional className for the container */
-    className?: string;
-}

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

@@ -1,2 +0,0 @@
-export { SpotlightBorder } from "./SpotlightBorder";
-export type { SpotlightBorderProps, SpotlightBorderVariation, } from "./SpotlightBorder.types";

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import type { StickyScrollProps } from './StickyScroll.types';
-/**
- * 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" />,
- *     },
- *   ]}
- * />
- * ```
- */
-export declare const StickyScroll: React.ForwardRefExoticComponent<StickyScrollProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,128 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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/CronInput/CronInput.d.ts

@@ -1,3 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

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