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

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

@@ -0,0 +1,505 @@
+// ============================================================================
+// Constants
+// ============================================================================
+const MONTH_NAMES = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const DAY_NAMES = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+];
+const DAY_SHORT_NAMES = [
+    "Sun",
+    "Mon",
+    "Tue",
+    "Wed",
+    "Thu",
+    "Fri",
+    "Sat",
+];
+/**
+ * Preset cron schedules for common use cases
+ */
+const CRON_PRESETS = [
+    {
+        label: "Every minute",
+        value: "* * * * *",
+        description: "Runs every minute",
+    },
+    {
+        label: "Every hour",
+        value: "0 * * * *",
+        description: "At the start of every hour",
+    },
+    {
+        label: "Every day at midnight",
+        value: "0 0 * * *",
+        description: "Once a day at 00:00",
+    },
+    {
+        label: "Every Monday",
+        value: "0 9 * * 1",
+        description: "At 09:00 on Monday",
+    },
+    {
+        label: "Every weekday",
+        value: "0 9 * * 1-5",
+        description: "At 09:00, Monday through Friday",
+    },
+    {
+        label: "Monthly",
+        value: "0 0 1 * *",
+        description: "At midnight on the 1st of every month",
+    },
+    {
+        label: "Yearly",
+        value: "0 0 1 1 *",
+        description: "At midnight on January 1st",
+    },
+];
+/**
+ * Generate minute options: every minute (*), specific minutes, and intervals
+ */
+function getMinuteOptions() {
+    const options = [
+        { value: "*", label: "Every minute" },
+        { value: "*/5", label: "Every 5 minutes" },
+        { value: "*/10", label: "Every 10 minutes" },
+        { value: "*/15", label: "Every 15 minutes" },
+        { value: "*/30", label: "Every 30 minutes" },
+    ];
+    for (let i = 0; i < 60; i++) {
+        options.push({
+            value: String(i),
+            label: String(i).padStart(2, "0"),
+        });
+    }
+    return options;
+}
+/**
+ * Generate hour options: every hour (*), specific hours, and intervals
+ */
+function getHourOptions() {
+    const options = [
+        { value: "*", label: "Every hour" },
+        { value: "*/2", label: "Every 2 hours" },
+        { value: "*/4", label: "Every 4 hours" },
+        { value: "*/6", label: "Every 6 hours" },
+        { value: "*/12", label: "Every 12 hours" },
+    ];
+    for (let i = 0; i < 24; i++) {
+        const hour12 = i === 0 ? 12 : i > 12 ? i - 12 : i;
+        const ampm = i < 12 ? "AM" : "PM";
+        options.push({
+            value: String(i),
+            label: `${String(i).padStart(2, "0")}:00 (${hour12}${ampm})`,
+        });
+    }
+    return options;
+}
+/**
+ * Generate day-of-month options: every day (*), specific days
+ */
+function getDayOfMonthOptions() {
+    const options = [
+        { value: "*", label: "Every day" },
+    ];
+    for (let i = 1; i <= 31; i++) {
+        const suffix = getOrdinalSuffix(i);
+        options.push({
+            value: String(i),
+            label: `${i}${suffix}`,
+        });
+    }
+    return options;
+}
+/**
+ * Generate month options: every month (*), specific months
+ */
+function getMonthOptions() {
+    const options = [
+        { value: "*", label: "Every month" },
+    ];
+    for (let i = 1; i <= 12; i++) {
+        options.push({
+            value: String(i),
+            label: MONTH_NAMES[i - 1],
+        });
+    }
+    return options;
+}
+/**
+ * Generate day-of-week options: every day (*), specific days, ranges
+ */
+function getDayOfWeekOptions() {
+    const options = [
+        { value: "*", label: "Every day" },
+        { value: "1-5", label: "Weekdays (Mon-Fri)" },
+        { value: "0,6", label: "Weekends (Sat-Sun)" },
+    ];
+    for (let i = 0; i <= 6; i++) {
+        options.push({
+            value: String(i),
+            label: DAY_NAMES[i],
+        });
+    }
+    return options;
+}
+// ============================================================================
+// Parsing
+// ============================================================================
+/**
+ * Parse a cron expression string into individual fields
+ */
+function parseCron(expr) {
+    const trimmed = expr.trim();
+    const parts = trimmed.split(/\s+/);
+    if (parts.length !== 5) {
+        return {
+            minute: "*",
+            hour: "*",
+            dayOfMonth: "*",
+            month: "*",
+            dayOfWeek: "*",
+        };
+    }
+    return {
+        minute: parts[0],
+        hour: parts[1],
+        dayOfMonth: parts[2],
+        month: parts[3],
+        dayOfWeek: parts[4],
+    };
+}
+/**
+ * Convert CronFields back to a cron expression string
+ */
+function fieldsToCron(fields) {
+    return `${fields.minute} ${fields.hour} ${fields.dayOfMonth} ${fields.month} ${fields.dayOfWeek}`;
+}
+// ============================================================================
+// Validation
+// ============================================================================
+/**
+ * Validate whether a single cron field value is valid
+ */
+function isValidCronField(value, min, max) {
+    if (value === "*")
+        return true;
+    // Step values: */5, 1-30/5
+    if (value.includes("/")) {
+        const [range, stepStr] = value.split("/");
+        const step = parseInt(stepStr, 10);
+        if (isNaN(step) || step < 1)
+            return false;
+        if (range === "*")
+            return step <= max;
+        return isValidCronField(range, min, max);
+    }
+    // Ranges: 1-5
+    if (value.includes("-")) {
+        const [startStr, endStr] = value.split("-");
+        const start = parseInt(startStr, 10);
+        const end = parseInt(endStr, 10);
+        return (!isNaN(start) &&
+            !isNaN(end) &&
+            start >= min &&
+            end <= max &&
+            start <= end);
+    }
+    // Lists: 1,3,5
+    if (value.includes(",")) {
+        return value.split(",").every((v) => isValidCronField(v.trim(), min, max));
+    }
+    // Single number
+    const num = parseInt(value, 10);
+    return !isNaN(num) && num >= min && num <= max;
+}
+/**
+ * Validate a complete cron expression
+ */
+function validateCron(expr) {
+    const trimmed = expr.trim();
+    const parts = trimmed.split(/\s+/);
+    if (parts.length !== 5)
+        return false;
+    const [minute, hour, dayOfMonth, month, dayOfWeek] = parts;
+    return (isValidCronField(minute, 0, 59) &&
+        isValidCronField(hour, 0, 23) &&
+        isValidCronField(dayOfMonth, 1, 31) &&
+        isValidCronField(month, 1, 12) &&
+        isValidCronField(dayOfWeek, 0, 6));
+}
+// ============================================================================
+// Human-readable description
+// ============================================================================
+/**
+ * Get ordinal suffix for a number (1st, 2nd, 3rd, etc.)
+ */
+function getOrdinalSuffix(n) {
+    const s = ["th", "st", "nd", "rd"];
+    const v = n % 100;
+    return s[(v - 20) % 10] || s[v] || s[0];
+}
+/**
+ * Describe a minute field
+ */
+function describeMinute(minute) {
+    if (minute === "*")
+        return "";
+    if (minute.startsWith("*/"))
+        return `every ${minute.slice(2)} minutes`;
+    return `at minute ${minute}`;
+}
+/**
+ * Describe an hour field
+ */
+function describeHour(hour) {
+    if (hour === "*")
+        return "";
+    if (hour.startsWith("*/"))
+        return `every ${hour.slice(2)} hours`;
+    const h = parseInt(hour, 10);
+    if (isNaN(h))
+        return "";
+    const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
+    const ampm = h < 12 ? "AM" : "PM";
+    return `${hour12}:00 ${ampm}`;
+}
+/**
+ * Describe the time portion (minute + hour)
+ */
+function describeTime(minute, hour) {
+    if (minute === "*" && hour === "*")
+        return "every minute";
+    if (minute === "*" && hour !== "*") {
+        if (hour.startsWith("*/"))
+            return `every ${hour.slice(2)} hours`;
+        return `every minute during ${describeHour(hour)}`;
+    }
+    if (minute !== "*" && hour === "*") {
+        if (minute.startsWith("*/"))
+            return `${describeMinute(minute)}`;
+        return `at minute ${minute} of every hour`;
+    }
+    // Both specific
+    const h = parseInt(hour, 10);
+    const m = parseInt(minute, 10);
+    if (!isNaN(h) && !isNaN(m)) {
+        const hour12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
+        const ampm = h < 12 ? "AM" : "PM";
+        return `at ${String(hour12).padStart(2, "0")}:${String(m).padStart(2, "0")} ${ampm}`;
+    }
+    // Fallback for intervals
+    const parts = [];
+    if (minute.startsWith("*/"))
+        parts.push(describeMinute(minute));
+    if (hour.startsWith("*/"))
+        parts.push(describeHour(hour));
+    if (parts.length > 0)
+        return parts.join(", ");
+    return `at ${hour}:${minute}`;
+}
+/**
+ * Convert a cron expression to a human-readable description
+ */
+function cronToDescription(expr) {
+    if (!validateCron(expr))
+        return "Invalid cron expression";
+    const { minute, hour, dayOfMonth, month, dayOfWeek } = parseCron(expr);
+    const timePart = describeTime(minute, hour);
+    const parts = [];
+    // Time
+    if (timePart) {
+        // Capitalize first letter
+        parts.push(timePart.charAt(0).toUpperCase() + timePart.slice(1));
+    }
+    // Day of week
+    if (dayOfWeek !== "*") {
+        if (dayOfWeek === "1-5") {
+            parts.push("on weekdays");
+        }
+        else if (dayOfWeek === "0,6") {
+            parts.push("on weekends");
+        }
+        else if (dayOfWeek.includes(",")) {
+            const days = dayOfWeek
+                .split(",")
+                .map((d) => DAY_NAMES[parseInt(d, 10)] || d);
+            parts.push(`on ${days.join(" and ")}`);
+        }
+        else if (dayOfWeek.includes("-")) {
+            const [start, end] = dayOfWeek.split("-").map((d) => parseInt(d, 10));
+            parts.push(`on ${DAY_SHORT_NAMES[start]} through ${DAY_SHORT_NAMES[end]}`);
+        }
+        else {
+            const dayIdx = parseInt(dayOfWeek, 10);
+            if (!isNaN(dayIdx) && dayIdx >= 0 && dayIdx <= 6) {
+                parts.push(`on ${DAY_NAMES[dayIdx]}`);
+            }
+        }
+    }
+    // Day of month
+    if (dayOfMonth !== "*") {
+        const day = parseInt(dayOfMonth, 10);
+        if (!isNaN(day)) {
+            parts.push(`on the ${day}${getOrdinalSuffix(day)}`);
+        }
+    }
+    // Month
+    if (month !== "*") {
+        const monthIdx = parseInt(month, 10);
+        if (!isNaN(monthIdx) && monthIdx >= 1 && monthIdx <= 12) {
+            parts.push(`in ${MONTH_NAMES[monthIdx - 1]}`);
+        }
+    }
+    if (parts.length === 0)
+        return "Every minute";
+    return parts.join(" ");
+}
+// ============================================================================
+// Next run calculation
+// ============================================================================
+/**
+ * Expand a cron field value into an array of matching numbers.
+ * Handles *, specific values, ranges, lists, and step values.
+ */
+function expandField(value, min, max) {
+    if (value === "*") {
+        return Array.from({ length: max - min + 1 }, (_, i) => min + i);
+    }
+    // Step values: */5 or 1-30/5
+    if (value.includes("/")) {
+        const [range, stepStr] = value.split("/");
+        const step = parseInt(stepStr, 10);
+        const result = [];
+        let rangeMin = min;
+        let rangeMax = max;
+        if (range !== "*") {
+            if (range.includes("-")) {
+                const [rMin, rMax] = range.split("-").map(Number);
+                rangeMin = rMin;
+                rangeMax = rMax;
+            }
+            else {
+                rangeMin = parseInt(range, 10);
+            }
+        }
+        for (let i = rangeMin; i <= rangeMax; i += step) {
+            result.push(i);
+        }
+        return result;
+    }
+    // Lists: 1,3,5
+    if (value.includes(",")) {
+        return value.split(",").map((v) => parseInt(v.trim(), 10));
+    }
+    // Ranges: 1-5
+    if (value.includes("-")) {
+        const [start, end] = value.split("-").map(Number);
+        return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+    }
+    // Single number
+    return [parseInt(value, 10)];
+}
+/**
+ * Check if a given Date matches a cron expression
+ */
+function matchesCron(date, fields) {
+    const minutes = expandField(fields.minute, 0, 59);
+    const hours = expandField(fields.hour, 0, 23);
+    const daysOfMonth = expandField(fields.dayOfMonth, 1, 31);
+    const months = expandField(fields.month, 1, 12);
+    const daysOfWeek = expandField(fields.dayOfWeek, 0, 6);
+    return (minutes.includes(date.getMinutes()) &&
+        hours.includes(date.getHours()) &&
+        daysOfMonth.includes(date.getDate()) &&
+        months.includes(date.getMonth() + 1) &&
+        daysOfWeek.includes(date.getDay()));
+}
+/**
+ * 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
+ */
+function getNextRuns(expr, count = 3, from) {
+    if (!validateCron(expr))
+        return [];
+    const fields = parseCron(expr);
+    const results = [];
+    // Start from the next minute
+    const start = from ? new Date(from) : new Date();
+    start.setSeconds(0, 0);
+    start.setMinutes(start.getMinutes() + 1);
+    const current = new Date(start);
+    // Scan up to 2 years ahead, max 525960 iterations (minutes in a year * 2)
+    // to avoid infinite loops
+    const maxIterations = 525960 * 2;
+    let iterations = 0;
+    while (results.length < count && iterations < maxIterations) {
+        if (matchesCron(current, fields)) {
+            results.push(new Date(current));
+        }
+        current.setMinutes(current.getMinutes() + 1);
+        iterations++;
+    }
+    return results;
+}
+/**
+ * Format a Date as a human-readable next run string
+ */
+function formatNextRun(date) {
+    const now = new Date();
+    const diffMs = date.getTime() - now.getTime();
+    const diffMinutes = Math.round(diffMs / 60000);
+    const diffHours = Math.round(diffMs / 3600000);
+    const diffDays = Math.round(diffMs / 86400000);
+    const timeStr = date.toLocaleTimeString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+    const dateStr = date.toLocaleDateString(undefined, {
+        weekday: "short",
+        month: "short",
+        day: "numeric",
+    });
+    let relative;
+    if (diffMinutes < 1) {
+        relative = "in less than a minute";
+    }
+    else if (diffMinutes < 60) {
+        relative = `in ${diffMinutes} minute${diffMinutes !== 1 ? "s" : ""}`;
+    }
+    else if (diffHours < 24) {
+        relative = `in ${diffHours} hour${diffHours !== 1 ? "s" : ""}`;
+    }
+    else if (diffDays < 7) {
+        relative = `in ${diffDays} day${diffDays !== 1 ? "s" : ""}`;
+    }
+    else {
+        relative = `on ${dateStr}`;
+    }
+    return `${dateStr} at ${timeStr} (${relative})`;
+}
+
+export { CRON_PRESETS, DAY_NAMES, DAY_SHORT_NAMES, MONTH_NAMES, cronToDescription, fieldsToCron, formatNextRun, getDayOfMonthOptions, getDayOfWeekOptions, getHourOptions, getMinuteOptions, getMonthOptions, getNextRuns, parseCron, validateCron };

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

@@ -0,0 +1,4 @@
+export { CronInput } from "./CronInput";
+export type { CronInputProps, CronInputSize, CronInputMode, CronInputTheme, CronInputThemeOverrides, CronFields, CronPreset, } from "./CronInput.types";
+export { cronInputTheme } from "./CronInput.theme";
+export { parseCron, fieldsToCron, validateCron, cronToDescription, getNextRuns, formatNextRun, CRON_PRESETS, } from "./CronInput.utils";

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

@@ -29,10 +29,10 @@ const datePickerTheme = {
     // Dropdown content - with dark mode support
     contentStyle: "min-w-fit max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-0 overflow-hidden z-[1000] fixed " +
         "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
-    contentWithPresetsStyle: "flex w-fit max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed " +
+    contentWithPresetsStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed " +
         "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
     // Presets sidebar - with dark mode support
-    presetsContainerStyle: "flex flex-col gap-1 p-3 border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] min-w-[180px] " +
+    presetsContainerStyle: "flex flex-col gap-1 p-3 border-b sm:border-b-0 sm:border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] sm:min-w-[180px] " +
         "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
     // Preset button - with dark mode support
     presetButtonStyle: "w-full text-left px-3 py-2 text-sm rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +

package/dist/components/forms/FileUpload/FileUpload.js

@@ -3,7 +3,85 @@ import React__default, { useMemo, useRef, useState, useCallback } from 'react';
 import { fileUploadTheme } from './FileUpload.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { CloudArrowUpIcon, DocumentIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import '../../core/Accordion/Accordion.js';
+import '../../core/AlertDialog/AlertDialog.js';
+import '../../core/AspectRatio/AspectRatio.js';
+import '../../core/Avatar/Avatar.js';
+import '../../core/AvatarGroup/AvatarGroup.js';
+import '../../core/Badge/Badge.js';
+import '../../core/Breadcrumbs/Breadcrumbs.js';
+import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
 import { Button } from '../../core/Button/Button.js';
+import '../../core/ButtonGroup/ButtonGroup.js';
+import '../../core/ButtonGroup/ButtonGroupSeparator.js';
+import '../../core/ButtonGroup/ButtonGroupText.js';
+import '../../core/Calendar/Calendar.js';
+import '../../core/Calendar/CalendarMini/CalendarMini.js';
+import '../../core/Card/Card.js';
+import '../../core/CardStack/CardStack.js';
+import '../../core/Carousel/Carousel.js';
+import '../../core/CommandPalette/CommandPalette.js';
+import '../../core/Separator/Separator.js';
+import '../../core/Drawer/Drawer.js';
+import '../../core/Dropdown/Dropdown.js';
+import '../../core/Dropdown/DropdownTrigger.js';
+import '../../core/Dropdown/DropdownMenu.js';
+import '../../core/Dropdown/DropdownItem.js';
+import '../../core/Dropdown/DropdownSection.js';
+import '../../core/Dropdown/DropdownSeparator.js';
+import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/Kbd/Kbd.js';
+import '../../core/MenuItem/MenuItem.js';
+import '../../core/Link/Link.js';
+import '../../core/Loader/Loader.js';
+import '../../core/Modal/Modal.js';
+import '../../core/ModalStack/ModalStack.js';
+import '../../core/PageHeading/PageHeading.js';
+import '../../core/Pagination/Pagination.js';
+import '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
+import '../../core/Progress/Progress.js';
+import '../../core/Rating/Rating.js';
+import '../../core/ScrollArea/ScrollArea.js';
+import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
+import '../../core/Segmented/Segmented.js';
+import '../../core/Skeleton/Skeleton.js';
+import '../../core/SlidingNumber/SlidingNumber.js';
+import '../../core/Tabs/Tabs.js';
+import '../../core/Tabs/TabsList.js';
+import '../../core/Tabs/TabsTrigger.js';
+import '../../core/Tabs/TabsContent.js';
+import '../../core/Tabs/TabsContext.js';
+import '../../core/Tooltip/Tooltip.js';
+import '../../core/Tooltip/Tooltip.animations.js';
+import '../../core/Tree/Tree.js';
+import '../../core/Tag/Tag.js';
+import '../../core/Alert/Alert.js';
+import '../../core/Toast/Toast.js';
+import '../../core/Toast/ToastProvider.js';
+import '@heroicons/react/24/solid';
+import '../../core/Spinner/Spinner.js';
+import '../../core/Message/Message.js';
+import '../../core/Message/TypeWriter.js';
+import '../../core/Empty/Empty.js';
+import '../../core/Masonry/Masonry.js';
+import '../../core/DragDrop/DragDrop.js';
+import '../../core/Sortable/Sortable.js';
+import '../../core/NavItem/NavItem.js';
+import '../../core/Sidebar/Sidebar.js';
+import '../../core/Sidebar/SidebarHeader.js';
+import '../../core/Sidebar/SidebarContent.js';
+import '../../core/Sidebar/SidebarFooter.js';
+import '../../core/Sidebar/SidebarNav.js';
+import '../../core/Sidebar/SidebarNavGroup.js';
+import 'motion/react';
+import '../../core/Sidebar/SidebarToggle.js';
+import '../../core/Sidebar/SidebarContext.js';
+import '../../core/OfflineIndicator/OfflineIndicator.js';
+import '../../core/ContextMenu/ContextMenu.js';
+import '../../core/ContextMenu/ContextMenu.theme.js';
+import '../../core/Pill/Pill.js';
+import '../../core/SocialIcon/SocialIcon.js';
 
 /**
  * FileUpload component - Drag-and-drop file uploader with previews

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

@@ -12,7 +12,7 @@ const inputOTPTheme = {
     // Individual input field styles with design tokens
     inputStyle: 'text-center text-lg text-[var(--color-text-primary)] h-full',
     // Input group wrapper for grouped inputs (overrides default Input styling)
-    inputGroupStyle: 'w-12 min-w-12 h-12 min-h-12',
+    inputGroupStyle: 'w-10 min-w-10 h-10 min-h-10 sm:w-12 sm:min-w-12 sm:h-12 sm:min-h-12',
     // Separator between input groups
     separatorStyle: 'text-[var(--color-text-muted)] font-medium select-none',
     // Helper text with state handling (reuses form base)

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

@@ -0,0 +1,3 @@
+import React from "react";
+import type { MentionProps } from "./Mention.types";
+export declare const Mention: React.ForwardRefExoticComponent<MentionProps & React.RefAttributes<HTMLTextAreaElement>>;