@flikk/ui 1.0.0-beta.27 → 1.0.0-beta.29

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

@@ -1,113 +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, state = "default", disabled = false, label, helperText, ...props }, ref) => {
-    // Unique ID for accessibility
-    const generatedId = useId();
-    // Derive disabled/invalid from `state` prop (with deprecated `disabled` as fallback)
-    const isDisabled = state === "disabled" || disabled;
-    const isInvalid = state === "invalid";
-    // 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 (isDisabled)
-            return;
-        updateValue(presetValue);
-    }, [isDisabled, 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");
-    const helperId = `${generatedId}-helper`;
-    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: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", children: label })), mode === "both" && (jsxs("div", { className: "flex items-center gap-1.5", children: [jsxs("button", { type: "button", onClick: () => setActiveMode("visual"), disabled: isDisabled, 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: isDisabled, 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: isDisabled, 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: cn(theme.builderStyle, isInvalid && "ring-1 ring-[var(--color-danger)] rounded-[var(--form-radius)]"), children: [jsx(FieldSelect, { label: "Minute", value: fields.minute, options: minuteOptions, onChange: (v) => handleFieldChange("minute", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Hour", value: fields.hour, options: hourOptions, onChange: (v) => handleFieldChange("hour", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Day of Month", value: fields.dayOfMonth, options: dayOfMonthOptions, onChange: (v) => handleFieldChange("dayOfMonth", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Month", value: fields.month, options: monthOptions, onChange: (v) => handleFieldChange("month", v), disabled: isDisabled, size: size }), jsx(FieldSelect, { label: "Day of Week", value: fields.dayOfWeek, options: dayOfWeekOptions, onChange: (v) => handleFieldChange("dayOfWeek", v), disabled: isDisabled, 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: isDisabled, placeholder: "* * * * *", className: cn(theme.rawInputStyle, theme.rawInputSizes[size], isInvalid && "border-[var(--color-danger)] focus:border-[var(--color-danger)] focus:ring-[var(--color-danger)]"), id: `${generatedId}-cron`, "aria-label": "Cron expression", "aria-invalid": isInvalid || !validateCron(rawInput), "aria-describedby": helperText ? helperId : undefined, 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-surface-sunken)] text-[var(--color-text-primary)]"), 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)))] })), helperText && (jsx("div", { id: helperId, className: cn("text-sm mt-1", isInvalid
-                    ? "text-[var(--color-danger)]"
-                    : "text-[var(--color-text-muted)]"), children: helperText }))] }));
-});
-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;

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

@@ -1,75 +0,0 @@
-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)]",
-    // 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)]",
-    // Select dropdown
-    fieldSelectStyle: "w-full rounded-[var(--form-radius)] outline-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "bg-[var(--color-surface)] text-[var(--color-text-primary)] cursor-pointer transition-all " +
-        "focus:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
-        "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:focus:shadow-[inset_0_0_0_1px_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-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "bg-[var(--color-surface)] text-[var(--color-text-primary)] font-mono transition-all " +
-        "placeholder:text-[var(--color-text-placeholder)] focus:outline-none " +
-        "focus:shadow-[inset_0_0_0_1px_var(--color-primary-600)] " +
-        "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:focus:shadow-[inset_0_0_0_1px_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-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "text-[var(--color-text-secondary)] bg-[var(--color-surface)] hover:bg-[var(--color-surface-hover)]",
-    // Active mode toggle
-    modeToggleActiveStyle: "shadow-[inset_0_0_0_1px_var(--color-primary)] bg-[var(--color-primary-50)] text-[var(--color-primary)] " +
-        "hover:bg-[var(--color-primary-50)] " +
-        "dark:shadow-[inset_0_0_0_1px_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-none shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "text-[var(--color-text-secondary)] bg-[var(--color-surface)] hover:bg-[var(--color-surface-hover)] " +
-        "hover:text-[var(--color-text-primary)]",
-    // Active preset button
-    presetButtonActiveStyle: "shadow-[inset_0_0_0_1px_var(--color-primary)] bg-[var(--color-primary-50)] text-[var(--color-primary)] " +
-        "hover:bg-[var(--color-primary-100)] " +
-        "dark:shadow-[inset_0_0_0_1px_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)]",
-    // 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)]",
-    // Section heading
-    sectionHeadingStyle: "text-xs font-medium text-[var(--color-text-secondary)] uppercase tracking-wide",
-    // 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

@@ -1,109 +0,0 @@
-import React from "react";
-export type CronInputState = "default" | "disabled" | "invalid";
-/**
- * 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;
-    /**
-     * Validation/interaction state
-     * @default "default"
-     */
-    state?: CronInputState;
-    /**
-     * Whether the input is disabled
-     * @deprecated Use `state="disabled"` instead
-     */
-    disabled?: boolean;
-    /** Label text for the component */
-    label?: string;
-    /** Helper text displayed below the component */
-    helperText?: React.ReactNode;
-}
-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>;

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

@@ -1,67 +0,0 @@
-import { CronFields, CronPreset } from "./CronInput.types";
-export declare const MONTH_NAMES: readonly ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
-export declare const MONTH_SHORT_NAMES: readonly ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
-export declare const DAY_NAMES: readonly ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-export declare const DAY_SHORT_NAMES: readonly ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-/**
- * Preset cron schedules for common use cases
- */
-export declare const CRON_PRESETS: CronPreset[];
-export interface FieldOption {
-    value: string;
-    label: string;
-}
-/**
- * Generate minute options: every minute (*), specific minutes, and intervals
- */
-export declare function getMinuteOptions(): FieldOption[];
-/**
- * Generate hour options: every hour (*), specific hours, and intervals
- */
-export declare function getHourOptions(): FieldOption[];
-/**
- * Generate day-of-month options: every day (*), specific days
- */
-export declare function getDayOfMonthOptions(): FieldOption[];
-/**
- * Generate month options: every month (*), specific months
- */
-export declare function getMonthOptions(): FieldOption[];
-/**
- * Generate day-of-week options: every day (*), specific days, ranges
- */
-export declare function getDayOfWeekOptions(): FieldOption[];
-/**
- * Parse a cron expression string into individual fields
- */
-export declare function parseCron(expr: string): CronFields;
-/**
- * Convert CronFields back to a cron expression string
- */
-export declare function fieldsToCron(fields: CronFields): string;
-/**
- * Validate a complete cron expression
- */
-export declare function validateCron(expr: string): boolean;
-/**
- * Convert a cron expression to a human-readable description
- */
-export declare function cronToDescription(expr: string): string;
-/**
- * Calculate the next N run times for a cron expression.
- * Uses a brute-force minute-by-minute scan (simple approach for common cases).
- *
- * @param expr - Cron expression string
- * @param count - Number of next runs to find (default: 3)
- * @param from - Starting date (default: now)
- * @returns Array of Date objects for the next runs
- */
-export declare function getNextRuns(expr: string, count?: number, from?: Date): Date[];
-/**
- * Format a Date as a human-readable next run string
- */
-export declare function formatNextRun(date: Date): string;
-/**
- * Check if a field value represents a specific number (not a pattern)
- */
-export declare function isSpecificValue(value: string): boolean;