@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { CalendarIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { DatePickerContext } from './DatePicker.js';
+
+/**
+ * DatePicker Trigger Component - styled like form input
+ * Displays selected date or placeholder text
+ */
+const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, }) => {
+    var _a, _b, _c, _d;
+    const context = useContext(DatePickerContext);
+    if (!context) {
+        throw new Error("DatePickerTrigger must be used within a DatePicker");
+    }
+    const { theme, triggerRef } = context;
+    const baseStyle = theme.baseStyle || "";
+    const sizeStyle = ((_a = theme.triggerSizes) === null || _a === void 0 ? void 0 : _a[size]) || "";
+    const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
+    const hoverStateStyle = ((_c = theme.triggerHoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
+    const focusStateStyle = ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
+    const iconEndStyle = theme.iconEndStyle || "";
+    const iconEndPadding = theme.iconEndPadding || ""; // Always apply right padding for built-in calendar icon
+    const triggerButtonStyle = theme.triggerButtonStyle || "";
+    // Apply focused styles when open - same pattern as SelectButton
+    const activeFocusState = isOpen
+        ? focusStateStyle ||
+            "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+        : "";
+    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open calendar", children: [children, jsx("span", { className: iconEndStyle, children: jsx(CalendarIcon, { className: "h-4 w-4" }) })] }) }));
+};
+
+export { DatePickerTrigger };

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

@@ -0,0 +1,3 @@
+export { DatePicker, DatePickerTrigger, DatePickerContent, DatePickerPresets } from './DatePicker';
+export type { DatePickerProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from './DatePicker.types';
+export { datePickerTheme } from './DatePicker.theme';

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

@@ -0,0 +1,23 @@
+import React from "react";
+import { FileUploadProps } from "./FileUpload.types";
+/**
+ * FileUpload component - Drag-and-drop file uploader with previews
+ *
+ * Features:
+ * - Click to select files or drag-and-drop
+ * - File type and size validation
+ * - Image preview thumbnails
+ * - Multiple file support
+ * - Maximum file limits
+ * - Accessible and keyboard-friendly
+ * - Full theme customization
+ *
+ * @example
+ * <FileUpload
+ *   accept="image/*"
+ *   maxSize={5000000}
+ *   multiple
+ *   onUpload={(files) => console.log(files)}
+ * />
+ */
+export declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,212 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 { Button } from '../../core/Button/Button.js';
+
+/**
+ * FileUpload component - Drag-and-drop file uploader with previews
+ *
+ * Features:
+ * - Click to select files or drag-and-drop
+ * - File type and size validation
+ * - Image preview thumbnails
+ * - Multiple file support
+ * - Maximum file limits
+ * - Accessible and keyboard-friendly
+ * - Full theme customization
+ *
+ * @example
+ * <FileUpload
+ *   accept="image/*"
+ *   maxSize={5000000}
+ *   multiple
+ *   onUpload={(files) => console.log(files)}
+ * />
+ */
+const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSize, maxFiles, disabled = false, onUpload, onRemove, onError, showPreview = true, buttonText = "Choose files", helperText = "or drag and drop", description, className, theme: customTheme, ...props }, ref) => {
+    // Merge custom theme with default theme
+    const theme = useMemo(() => customTheme
+        ? { ...fileUploadTheme, ...customTheme }
+        : fileUploadTheme, [customTheme]);
+    const inputRef = useRef(null);
+    const [isDragActive, setIsDragActive] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [previewUrls, setPreviewUrls] = useState(new Map());
+    // Convert accept prop to array
+    const acceptTypes = Array.isArray(accept) ? accept : accept ? [accept] : [];
+    const acceptString = acceptTypes.join(",");
+    // Validate file type
+    const isValidFileType = useCallback((file) => {
+        if (acceptTypes.length === 0)
+            return true;
+        return acceptTypes.some((type) => {
+            // Handle wildcards like "image/*"
+            if (type.includes("/*")) {
+                const [category] = type.split("/");
+                return file.type.startsWith(`${category}/`);
+            }
+            // Handle file extensions like ".pdf"
+            if (type.startsWith(".")) {
+                return file.name.toLowerCase().endsWith(type.toLowerCase());
+            }
+            // Handle exact MIME types
+            return file.type === type;
+        });
+    }, [acceptTypes]);
+    // Validate file size
+    const isValidFileSize = useCallback((file) => {
+        if (!maxSize)
+            return true;
+        return file.size <= maxSize;
+    }, [maxSize]);
+    // Create preview URL for images
+    const createPreview = useCallback((file) => {
+        if (file.type.startsWith("image/")) {
+            const url = URL.createObjectURL(file);
+            setPreviewUrls((prev) => new Map(prev).set(file, url));
+        }
+    }, []);
+    // Clean up preview URLs
+    const revokePreview = useCallback((file) => {
+        const url = previewUrls.get(file);
+        if (url) {
+            URL.revokeObjectURL(url);
+            setPreviewUrls((prev) => {
+                const newMap = new Map(prev);
+                newMap.delete(file);
+                return newMap;
+            });
+        }
+    }, [previewUrls]);
+    // Handle file selection/drop
+    const handleFiles = useCallback((files) => {
+        if (!files || files.length === 0)
+            return;
+        const fileArray = Array.from(files);
+        const validFiles = [];
+        // Validate each file
+        for (const file of fileArray) {
+            // Check file type
+            if (!isValidFileType(file)) {
+                const error = {
+                    type: "file-invalid-type",
+                    message: `File type not accepted: ${file.name}`,
+                    file,
+                };
+                onError === null || onError === void 0 ? void 0 : onError(error);
+                continue;
+            }
+            // Check file size
+            if (!isValidFileSize(file)) {
+                const maxSizeMB = maxSize ? (maxSize / 1000000).toFixed(2) : "0";
+                const error = {
+                    type: "file-too-large",
+                    message: `File too large: ${file.name} (max ${maxSizeMB}MB)`,
+                    file,
+                };
+                onError === null || onError === void 0 ? void 0 : onError(error);
+                continue;
+            }
+            validFiles.push(file);
+        }
+        // Check max files limit
+        if (maxFiles && selectedFiles.length + validFiles.length > maxFiles) {
+            const error = {
+                type: "too-many-files",
+                message: `Maximum ${maxFiles} files allowed`,
+            };
+            onError === null || onError === void 0 ? void 0 : onError(error);
+            return;
+        }
+        // Update selected files
+        const newFiles = multiple
+            ? [...selectedFiles, ...validFiles]
+            : validFiles;
+        setSelectedFiles(newFiles);
+        // Create previews
+        validFiles.forEach(createPreview);
+        // Call onUpload callback
+        onUpload === null || onUpload === void 0 ? void 0 : onUpload(validFiles);
+    }, [
+        isValidFileType,
+        isValidFileSize,
+        maxSize,
+        maxFiles,
+        selectedFiles,
+        multiple,
+        onUpload,
+        onError,
+        createPreview,
+    ]);
+    // Handle drag events
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!disabled)
+            setIsDragActive(true);
+    }, [disabled]);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragActive(false);
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragActive(false);
+        if (disabled)
+            return;
+        const files = e.dataTransfer.files;
+        handleFiles(files);
+    }, [disabled, handleFiles]);
+    // Handle click to select files
+    const handleClick = useCallback(() => {
+        var _a;
+        if (!disabled) {
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    }, [disabled]);
+    // Handle input change
+    const handleInputChange = useCallback((e) => {
+        handleFiles(e.target.files);
+        // Reset input value to allow selecting the same file again
+        e.target.value = "";
+    }, [handleFiles]);
+    // Handle file removal
+    const handleRemoveFile = useCallback((file) => {
+        setSelectedFiles((prev) => prev.filter((f) => f !== file));
+        revokePreview(file);
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
+    }, [onRemove, revokePreview]);
+    // Format file size
+    const formatFileSize = (bytes) => {
+        if (bytes === 0)
+            return "0 Bytes";
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+    };
+    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, className), ...props, children: [jsx("input", { ref: inputRef, type: "file", accept: acceptString, multiple: multiple, onChange: handleInputChange, disabled: disabled, className: "sr-only", "aria-label": "File upload" }), jsx("div", { className: cn(theme.dropzoneStyle, isDragActive && theme.dropzoneActiveStyle, disabled && theme.dropzoneDisabledStyle), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleClick();
+                    }
+                }, children: jsxs("div", { className: theme.contentStyle, children: [jsx("div", { className: "size-11 border border-border bg-white rounded-full flex items-center justify-center mb-4", children: jsx(CloudArrowUpIcon, { className: `size-6 text-[var(--color-text-secondary)]` }) }), jsxs("p", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: [jsx("span", { className: "text-[var(--color-primary)] font-semibold", children: buttonText }), " ", helperText] }), description && (jsx("p", { className: "text-xs text-[var(--color-text-muted)] mt-1", children: description }))] }) }), showPreview && selectedFiles.length > 0 && (jsx("div", { className: theme.previewContainerStyle, children: selectedFiles.map((file, index) => {
+                    const previewUrl = previewUrls.get(file);
+                    const isImage = file.type.startsWith("image/");
+                    return (jsxs("div", { className: theme.previewItemStyle, children: [isImage && previewUrl ? (jsx("img", { src: previewUrl, alt: file.name, className: theme.previewImageStyle })) : (jsxs("div", { className: theme.previewFileStyle, children: [jsx(DocumentIcon, { className: "w-8 h-8 mx-auto mb-2 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-xs", children: file.name }), jsx("span", { className: "text-xs text-[var(--color-text-placeholder)] mt-1", children: formatFileSize(file.size) })] })), jsx(Button, { variant: "filled", color: "danger", size: "sm", iconOnly: true, onClick: (e) => {
+                                    e.stopPropagation();
+                                    handleRemoveFile(file);
+                                }, "aria-label": `Remove ${file.name}`, className: cn(theme.removeButtonStyle, "rounded-full !p-0 size-6"), children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) })] }, `${file.name}-${index}`));
+                }) }))] }));
+});
+FileUpload.displayName = "FileUpload";
+
+export { FileUpload };

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

@@ -0,0 +1,25 @@
+/**
+ * Internal theme structure for the FileUpload component
+ */
+interface FileUploadTheme {
+    containerStyle: string;
+    dropzoneStyle: string;
+    dropzoneActiveStyle: string;
+    dropzoneDisabledStyle: string;
+    contentStyle: string;
+    iconStyle: string;
+    textStyle: string;
+    helperTextStyle: string;
+    descriptionStyle: string;
+    previewContainerStyle: string;
+    previewItemStyle: string;
+    previewImageStyle: string;
+    previewFileStyle: string;
+    removeButtonStyle: string;
+}
+/**
+ * Default theme for the FileUpload component
+ * Uses production-ready CSS variables from global.scss
+ */
+export declare const fileUploadTheme: FileUploadTheme;
+export {};

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

@@ -0,0 +1,36 @@
+/**
+ * Default theme for the FileUpload component
+ * Uses production-ready CSS variables from global.scss
+ */
+const fileUploadTheme = {
+    // Container wrapper
+    containerStyle: "w-full",
+    // Dropzone area (default state)
+    dropzoneStyle: "relative flex flex-col items-center justify-center w-full min-h-[160px] p-6 border border-dashed border-[var(--color-border)] rounded-[var(--form-radius)] bg-[var(--color-background-secondary)] hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-primary)] transition-colors duration-400 cursor-pointer",
+    // Dropzone when dragging over
+    dropzoneActiveStyle: "border-[var(--color-primary)] bg-[var(--color-primary-50)] scale-[1.01]",
+    // Dropzone when disabled
+    dropzoneDisabledStyle: "cursor-not-allowed opacity-60 hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-border)]",
+    // Content wrapper inside dropzone
+    contentStyle: "flex flex-col items-center text-center pointer-events-none",
+    // Upload icon
+    iconStyle: "size-8 text-[var(--color-text-placeholder)]",
+    // Main text
+    textStyle: "text-sm font-medium text-[var(--color-text-primary)]",
+    // Helper text
+    helperTextStyle: "text-sm text-[var(--color-text-muted)] mt-1",
+    // Description below dropzone
+    descriptionStyle: "text-xs text-[var(--color-text-muted)] mt-1",
+    // Preview container
+    previewContainerStyle: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-4",
+    // Individual preview item
+    previewItemStyle: "relative group rounded-[var(--radius-base)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-background-secondary)]",
+    // Preview image
+    previewImageStyle: "w-full h-32 object-cover",
+    // Preview file (non-image)
+    previewFileStyle: "flex items-center justify-center w-full h-32 p-3 text-sm text-[var(--color-text-secondary)] text-center break-all",
+    // Remove button
+    removeButtonStyle: "absolute top-1 right-1  -translate-y-1 opacity-0 group-hover:opacity-100 transition-all duration-400 group-hover:-translate-y-0",
+};
+
+export { fileUploadTheme };

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

@@ -0,0 +1,94 @@
+/**
+ * FileUpload component props
+ * Supports both click-to-upload and drag-and-drop
+ */
+export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {
+    /**
+     * Accepted file types (MIME types or file extensions)
+     * @example ["image/*", ".pdf", ".doc"]
+     */
+    accept?: string | string[];
+    /**
+     * Whether to allow multiple file selection
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Maximum file size in bytes
+     * @example 5000000 // 5MB
+     */
+    maxSize?: number;
+    /**
+     * Maximum number of files (when multiple is true)
+     */
+    maxFiles?: number;
+    /**
+     * Whether the upload area is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when files are selected/dropped
+     */
+    onUpload?: (files: File[]) => void;
+    /**
+     * Callback when files are removed
+     */
+    onRemove?: (file: File) => void;
+    /**
+     * Callback when there's an error (invalid file type, size exceeded, etc.)
+     */
+    onError?: (error: FileUploadError) => void;
+    /**
+     * Show preview thumbnails for images
+     * @default true
+     */
+    showPreview?: boolean;
+    /**
+     * Custom upload button text
+     * @default "Choose files"
+     */
+    buttonText?: string;
+    /**
+     * Custom dropzone helper text
+     * @default "or drag and drop"
+     */
+    helperText?: string;
+    /**
+     * Helper text displayed below the upload area
+     */
+    description?: string;
+    /**
+     * Custom CSS class for the container
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: FileUploadThemeOverrides;
+}
+export interface FileUploadError {
+    type: 'file-too-large' | 'file-invalid-type' | 'too-many-files';
+    message: string;
+    file?: File;
+}
+export interface UploadedFile {
+    file: File;
+    preview?: string;
+}
+export interface FileUploadThemeOverrides {
+    containerStyle?: string;
+    dropzoneStyle?: string;
+    dropzoneActiveStyle?: string;
+    dropzoneDisabledStyle?: string;
+    contentStyle?: string;
+    iconStyle?: string;
+    textStyle?: string;
+    helperTextStyle?: string;
+    descriptionStyle?: string;
+    previewContainerStyle?: string;
+    previewItemStyle?: string;
+    previewImageStyle?: string;
+    previewFileStyle?: string;
+    removeButtonStyle?: string;
+}

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

@@ -0,0 +1,3 @@
+export { FileUpload } from './FileUpload';
+export { fileUploadTheme } from './FileUpload.theme';
+export type { FileUploadProps, FileUploadError, FileUploadThemeOverrides, UploadedFile } from './FileUpload.types';

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FormLabelProps } from './FormLabel.types';
+/**
+ * FormLabel component for providing consistent labeling for form elements
+ */
+export declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;

package/dist/components/forms/FormLabel/FormLabel.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { formLabelTheme } from './FormLabel.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * FormLabel component for providing consistent labeling for form elements
+ */
+const FormLabel = React__default.forwardRef(({ htmlFor, children, className, required = false, state = 'default', ...props }, ref) => {
+    return (jsxs("label", { ref: ref, htmlFor: htmlFor, className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], className), ...props, children: [children, required && (jsx("span", { className: formLabelTheme.requiredIndicatorStyle, children: "*" }))] }));
+});
+FormLabel.displayName = "FormLabel";
+
+export { FormLabel };

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

@@ -0,0 +1,5 @@
+import { FormLabelTheme } from './FormLabel.types';
+/**
+ * Clean theme structure for FormLabel component
+ */
+export declare const formLabelTheme: FormLabelTheme;

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

@@ -0,0 +1,17 @@
+/**
+ * Clean theme structure for FormLabel component
+ */
+const formLabelTheme = {
+    // Base styles for the label element
+    baseStyle: "block text-sm/6 font-medium mb-2",
+    // State variants - using design tokens from global.scss
+    stateStyles: {
+        default: "text-[var(--color-text-primary)]",
+        disabled: "text-[var(--color-text-primary)]/80",
+        invalid: "text-[var(--color-danger)]",
+    },
+    // Required indicator style
+    requiredIndicatorStyle: "text-[var(--color-danger)] ml-1",
+};
+
+export { formLabelTheme };

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

@@ -0,0 +1,28 @@
+import React from 'react';
+/**
+ * State variants for the FormLabel component
+ */
+export type FormLabelState = 'default' | 'disabled' | 'invalid';
+/**
+ * FormLabel component props
+ */
+export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    /** The ID of the form element the label is associated with */
+    htmlFor: string;
+    /** The content of the label */
+    children: React.ReactNode;
+    /** Additional class name for the label */
+    className?: string;
+    /** Whether the associated form element is required */
+    required?: boolean;
+    /** The state of the label */
+    state?: FormLabelState;
+}
+/**
+ * FormLabel theme configuration
+ */
+export interface FormLabelTheme {
+    baseStyle: string;
+    stateStyles: Record<FormLabelState, string>;
+    requiredIndicatorStyle: string;
+}

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

@@ -0,0 +1,3 @@
+export { FormLabel } from './FormLabel';
+export { formLabelTheme } from './FormLabel.theme';
+export type { FormLabelProps, FormLabelState, FormLabelTheme } from './FormLabel.types';

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

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