@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.11

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

@@ -1,43 +1,67 @@
 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 { 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';
+import { useCheckboxGroupContext } from './CheckboxContext.js';
+import { CheckboxGroup } from './CheckboxGroup.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 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") }), 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 }))] }))] }));
+});
+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-secondary)] " +
         // Checked state - light
         "checked:border-[var(--color-primary)] checked:bg-[var(--color-primary)] " +
         // Checked state - dark
@@ -30,13 +30,17 @@ 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-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)]/80 -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,12 +7,16 @@ 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;
@@ -23,6 +27,23 @@ export interface CheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElemen
     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?: string;
+    description?: string;
+    error?: string;
+    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 && (jsxs("legend", { id: labelId, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[labelState]), children: [label, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] })), description && (jsx("p", { id: descriptionId, className: checkboxTheme.groupDescriptionStyle, children: description })), jsx("div", { className: cn(checkboxTheme.groupItemsStyle, orientation === "horizontal" &&
+                        checkboxTheme.groupHorizontalStyle), children: children }), error && (jsx("p", { id: errorId, role: "alert", className: checkboxTheme.groupErrorStyle, children: 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.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';
 /**

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

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

@@ -45,7 +45,7 @@ const ColorPickerInput = ({ className, ...props }) => {
     };
     // Render different input types based on format
     if (format === "hex") {
-        return (jsx("div", { className: cn(theme.inputContainerStyle, className), ...props, children: jsx(Input, { type: "text", size: "sm", value: inputValue, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, state: isInvalid ? "invalid" : "default", placeholder: "#000000", className: "flex-1 text-sm font-mono", "aria-label": "Hex color value" }) }));
+        return (jsx("div", { className: cn(theme.inputContainerStyle, className), ...props, children: jsx(Input, { type: "text", size: "sm", value: inputValue, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, state: isInvalid ? "invalid" : "default", placeholder: "#000000", className: "flex-1 text-base font-mono", "aria-label": "Hex color value" }) }));
     }
     if (format === "rgb") {
         const rgb = hslToRgb(color.h, color.s, color.l);
@@ -56,21 +56,21 @@ const ColorPickerInput = ({ className, ...props }) => {
                             if (parsed)
                                 setColor(parsed);
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Red", placeholder: "R" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.g, onChange: (e) => {
+                    }, className: "flex-1 text-base", "aria-label": "Red", placeholder: "R" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.g, onChange: (e) => {
                         const newG = parseInt(e.target.value, 10);
                         if (!isNaN(newG) && newG >= 0 && newG <= 255) {
                             const parsed = parseColor(`rgb(${rgb.r}, ${newG}, ${rgb.b})`);
                             if (parsed)
                                 setColor(parsed);
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Green", placeholder: "G" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.b, onChange: (e) => {
+                    }, className: "flex-1 text-base", "aria-label": "Green", placeholder: "G" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.b, onChange: (e) => {
                         const newB = parseInt(e.target.value, 10);
                         if (!isNaN(newB) && newB >= 0 && newB <= 255) {
                             const parsed = parseColor(`rgb(${rgb.r}, ${rgb.g}, ${newB})`);
                             if (parsed)
                                 setColor(parsed);
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Blue", placeholder: "B" })] }));
+                    }, className: "flex-1 text-base", "aria-label": "Blue", placeholder: "B" })] }));
     }
     if (format === "hsl") {
         return (jsxs("div", { className: cn(theme.inputContainerStyle, "flex gap-2", className), ...props, children: [jsx(Input, { type: "number", size: "sm", min: 0, max: 360, value: Math.round(color.h), onChange: (e) => {
@@ -78,17 +78,17 @@ const ColorPickerInput = ({ className, ...props }) => {
                         if (!isNaN(newH) && newH >= 0 && newH <= 360) {
                             setColor({ ...color, h: newH });
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Hue", placeholder: "H" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.s), onChange: (e) => {
+                    }, className: "flex-1 text-base", "aria-label": "Hue", placeholder: "H" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.s), onChange: (e) => {
                         const newS = parseInt(e.target.value, 10);
                         if (!isNaN(newS) && newS >= 0 && newS <= 100) {
                             setColor({ ...color, s: newS });
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Saturation", placeholder: "S" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.l), onChange: (e) => {
+                    }, className: "flex-1 text-base", "aria-label": "Saturation", placeholder: "S" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.l), onChange: (e) => {
                         const newL = parseInt(e.target.value, 10);
                         if (!isNaN(newL) && newL >= 0 && newL <= 100) {
                             setColor({ ...color, l: newL });
                         }
-                    }, className: "flex-1 text-sm", "aria-label": "Lightness", placeholder: "L" })] }));
+                    }, className: "flex-1 text-base", "aria-label": "Lightness", placeholder: "L" })] }));
     }
     return null;
 };

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-sm 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-base 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-sm 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-sm 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-sm 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-base 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-sm text-[var(--color-text-muted)] " +
+        "dark:text-[var(--color-neutral-400)]",
+    // Section heading
+    sectionHeadingStyle: "text-sm font-medium text-[var(--color-text-secondary)] uppercase tracking-wide " +
+        "dark:text-[var(--color-neutral-400)]",
+    // Validation error
+    errorStyle: "text-sm text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
+};
+
+export { cronInputTheme };