performa 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,438 @@
+import { c as FormContextValue, d as FormState, R as ResolvedFormConfig, F as FormErrors, e as ResolvedFormField, f as FileMetaData, b as FormField } from './server-Cjhy29dZ.js';
+export { h as FieldOption, g as FieldType, a as FormConfig, G as GridWidth, M as MimeTypeKey, V as ValidationRules, m as mimeTypes } from './server-Cjhy29dZ.js';
+import * as react from 'react';
+import { ReactNode, FormHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Form context for sharing form state and configuration with child components
+ */
+declare const FormContext: react.Context<FormContextValue | null>;
+/**
+ * Hook to access form context
+ * @throws Error if used outside of a Form component
+ */
+declare function useFormContext(): FormContextValue;
+/**
+ * Hook to get the current form state
+ */
+declare function useFormState(): FormState;
+/**
+ * Hook to get the form configuration
+ */
+declare function useFormConfig(): ResolvedFormConfig;
+/**
+ * Hook to get errors for a specific field
+ */
+declare function useFieldError(fieldName: string): string | undefined;
+
+/**
+ * Utility functions for the form library
+ */
+/**
+ * Convert bytes to human-readable format
+ */
+declare function bytesToHumanReadable(bytes: number): string;
+/**
+ * Check if a filename represents an image based on extension
+ */
+declare function isImage(filename: string): boolean;
+/**
+ * Grid width classes for responsive layouts
+ */
+declare const widthClasses: {
+    readonly 1: "col-span-12 @lg:col-span-1";
+    readonly 2: "col-span-4 @lg:col-span-2";
+    readonly 3: "col-span-6 @lg:col-span-3";
+    readonly 4: "col-span-8 @lg:col-span-4";
+    readonly 5: "col-span-12 @lg:col-span-5";
+    readonly 6: "col-span-12 @lg:col-span-6";
+    readonly 7: "col-span-12 @lg:col-span-7";
+    readonly 8: "col-span-12 @lg:col-span-8";
+    readonly 9: "col-span-12 @lg:col-span-9";
+    readonly 10: "col-span-12 @lg:col-span-10";
+    readonly 11: "col-span-12 @lg:col-span-11";
+    readonly 12: "col-span-12";
+};
+
+/**
+ * Theme configuration for form components
+ */
+type FormTheme = {
+    /**
+     * Whether to include dark mode styles
+     * @default true
+     */
+    darkMode?: boolean;
+    /**
+     * Base classes applied to all form groups
+     */
+    formGroup?: string;
+    /**
+     * Classes for the form container
+     */
+    form?: string;
+    /**
+     * Classes for the fieldset/grid container
+     */
+    fieldset?: string;
+    /**
+     * Label styling
+     */
+    label?: {
+        base?: string;
+        required?: string;
+    };
+    /**
+     * Input styling
+     */
+    input?: {
+        base?: string;
+        error?: string;
+        disabled?: string;
+        focus?: string;
+    };
+    /**
+     * Select styling
+     */
+    select?: {
+        base?: string;
+        error?: string;
+        disabled?: string;
+        option?: string;
+    };
+    /**
+     * Textarea styling
+     */
+    textarea?: {
+        base?: string;
+        error?: string;
+        disabled?: string;
+    };
+    /**
+     * Checkbox styling
+     */
+    checkbox?: {
+        base?: string;
+        error?: string;
+        label?: string;
+    };
+    /**
+     * Toggle/switch styling
+     */
+    toggle?: {
+        track?: string;
+        trackActive?: string;
+        thumb?: string;
+        label?: string;
+    };
+    /**
+     * Radio button styling
+     */
+    radio?: {
+        base?: string;
+        label?: string;
+        group?: string;
+    };
+    /**
+     * File input styling
+     */
+    file?: {
+        dropzone?: string;
+        dropzoneActive?: string;
+        dropzoneError?: string;
+        icon?: string;
+        text?: string;
+        hint?: string;
+    };
+    /**
+     * Submit button styling
+     */
+    submit?: {
+        base?: string;
+        loading?: string;
+        spinner?: string;
+    };
+    /**
+     * Error message styling
+     */
+    error?: string;
+    /**
+     * Alert styling
+     */
+    alert?: {
+        base?: string;
+        error?: string;
+        success?: string;
+        warning?: string;
+        info?: string;
+    };
+    /**
+     * DateTime picker styling
+     */
+    datetime?: {
+        input?: string;
+        dropdown?: string;
+        picker?: string;
+        calendar?: string;
+        day?: string;
+        daySelected?: string;
+        dayButton?: string;
+        dayButtonSelected?: string;
+        timeInput?: string;
+        timeLabel?: string;
+        periodButton?: string;
+        periodButtonActive?: string;
+        iconButton?: string;
+        navButton?: string;
+        monthYear?: string;
+        weekday?: string;
+        formatButton?: string;
+    };
+    /**
+     * Button styling
+     */
+    button?: {
+        primary?: string;
+        secondary?: string;
+    };
+    /**
+     * Readonly display styling
+     */
+    readonly?: string;
+    /**
+     * None/display field styling
+     */
+    none?: {
+        container?: string;
+        label?: string;
+        value?: string;
+    };
+};
+/**
+ * Labels/text customization
+ */
+type FormLabels = {
+    required?: string;
+    loading?: string;
+    fileUpload?: {
+        clickToUpload?: string;
+        dragAndDrop?: string;
+        allowedTypes?: string;
+        maxSize?: string;
+    };
+    datetime?: {
+        clear?: string;
+        done?: string;
+        timeFormat?: string;
+        weekdays?: string[];
+    };
+    select?: {
+        loading?: string;
+        noOptions?: string;
+    };
+};
+/**
+ * Complete form configuration
+ */
+type FormThemeConfig = {
+    theme?: FormTheme;
+    labels?: FormLabels;
+};
+/**
+ * Default theme with Tailwind classes
+ */
+declare const defaultTheme: FormTheme;
+/**
+ * Theme without dark mode classes
+ */
+declare const lightOnlyTheme: FormTheme;
+/**
+ * Default labels
+ */
+declare const defaultLabels: FormLabels;
+/**
+ * Theme context type
+ */
+type ThemeContextType = {
+    theme: FormTheme;
+    labels: FormLabels;
+};
+/**
+ * Hook to access the current theme
+ */
+declare function useFormTheme(): FormTheme;
+/**
+ * Hook to access the current labels
+ */
+declare function useFormLabels(): FormLabels;
+/**
+ * Hook to access both theme and labels
+ */
+declare function useFormThemeConfig(): ThemeContextType;
+type FormThemeProviderProps = {
+    children: ReactNode;
+    /**
+     * Custom theme configuration (will be merged with default)
+     */
+    theme?: Partial<FormTheme>;
+    /**
+     * Custom labels (will be merged with default)
+     */
+    labels?: Partial<FormLabels>;
+    /**
+     * Use light-only theme as base (no dark mode classes)
+     */
+    lightOnly?: boolean;
+};
+/**
+ * Theme provider component
+ * Wrap your app or form container with this to customize styling
+ *
+ * @example
+ * ```tsx
+ * <FormThemeProvider
+ *   theme={{
+ *     input: { base: 'my-custom-input-class' },
+ *     submit: { base: 'btn btn-primary' }
+ *   }}
+ *   labels={{
+ *     fileUpload: { clickToUpload: 'Upload a file' }
+ *   }}
+ * >
+ *   <Form config={formConfig} />
+ * </FormThemeProvider>
+ * ```
+ */
+declare function FormThemeProvider({ children, theme, labels, lightOnly, }: FormThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Utility to create a complete custom theme
+ */
+declare function createTheme(customTheme: Partial<FormTheme>, basedOn?: 'default' | 'lightOnly'): FormTheme;
+/**
+ * Utility to combine class names, filtering out undefined/null values
+ */
+declare function cx(...classes: (string | undefined | null | false)[]): string;
+
+type FormProps = {
+    /**
+     * Form configuration object
+     */
+    config: ResolvedFormConfig;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Form errors from server validation
+     */
+    errors?: FormErrors;
+    /**
+     * Whether the form is currently submitting
+     */
+    isSubmitting?: boolean;
+    /**
+     * Custom form element to use (e.g., from a router library)
+     * If not provided, uses native <form>
+     */
+    formElement?: React.ComponentType<FormHTMLAttributes<HTMLFormElement> & {
+        children: ReactNode;
+    }>;
+    /**
+     * Additional props to pass to the form element
+     */
+    formProps?: FormHTMLAttributes<HTMLFormElement>;
+    /**
+     * Base URL for file uploads preview
+     */
+    fileBaseUrl?: string;
+};
+/**
+ * Framework-agnostic Form component
+ * Renders form fields based on configuration and handles error display
+ */
+declare function Form({ config, className, errors, isSubmitting, formElement: FormElement, formProps, fileBaseUrl, }: FormProps): react_jsx_runtime.JSX.Element;
+
+type AlertProps = {
+    type: 'error' | 'success' | 'warning' | 'info';
+    message: string;
+    className?: string;
+};
+declare function Alert({ type, message, className }: AlertProps): react_jsx_runtime.JSX.Element;
+declare const _default$9: react.MemoExoticComponent<typeof Alert>;
+
+type TextInputProps = Omit<ResolvedFormField, 'type' | 'options' | 'defaultChecked'> & {
+    type: 'text' | 'email' | 'password' | 'number';
+    name: string;
+};
+declare function TextInput({ label, placeholder, name, defaultValue, className, disabled, error, rules, type, before, beforeClassName, after, afterClassName, }: TextInputProps): react_jsx_runtime.JSX.Element;
+declare const _default$8: react.MemoExoticComponent<typeof TextInput>;
+
+type SelectInputProps = Omit<ResolvedFormField, 'type' | 'defaultChecked'> & {
+    name: string;
+};
+declare function SelectInput({ label, name, options, defaultValue, className, disabled, error, rules, before, beforeClassName, after, afterClassName, }: SelectInputProps): react_jsx_runtime.JSX.Element;
+declare const _default$7: react.MemoExoticComponent<typeof SelectInput>;
+
+type TextAreaInputProps = Omit<ResolvedFormField, 'type' | 'options' | 'defaultChecked'> & {
+    name: string;
+};
+declare function TextAreaInput({ label, name, placeholder, defaultValue, className, disabled, error, rules, before, beforeClassName, after, afterClassName, }: TextAreaInputProps): react_jsx_runtime.JSX.Element;
+declare const _default$6: react.MemoExoticComponent<typeof TextAreaInput>;
+
+type CheckboxInputProps = Omit<ResolvedFormField, 'type' | 'options' | 'defaultValue'> & {
+    name: string;
+};
+declare function CheckboxInput({ label, name, defaultChecked, className, disabled, error, rules, before, beforeClassName, after, afterClassName, }: CheckboxInputProps): react_jsx_runtime.JSX.Element;
+declare const _default$5: react.MemoExoticComponent<typeof CheckboxInput>;
+
+type ToggleInputProps = Omit<ResolvedFormField, 'type' | 'options' | 'defaultValue'> & {
+    name: string;
+};
+declare function ToggleInput({ label, name, defaultChecked, className, disabled, error, rules, before, beforeClassName, after, afterClassName, }: ToggleInputProps): react_jsx_runtime.JSX.Element;
+declare const _default$4: react.MemoExoticComponent<typeof ToggleInput>;
+
+type RadioInputProps = Omit<ResolvedFormField, 'type' | 'defaultChecked'> & {
+    name: string;
+};
+declare function RadioInput({ label, name, options, defaultValue, className, disabled, error, rules, before, beforeClassName, after, afterClassName, }: RadioInputProps): react_jsx_runtime.JSX.Element;
+declare const _default$3: react.MemoExoticComponent<typeof RadioInput>;
+
+type FileInputProps = Omit<ResolvedFormField, 'type' | 'options'> & {
+    name: string;
+    metaData?: FileMetaData;
+    /**
+     * Optional base URL for displaying existing files
+     * If provided along with defaultValue, will show preview for images
+     */
+    baseUrl?: string;
+};
+declare function FileInput({ label, name, className, disabled, error, rules, before, beforeClassName, after, afterClassName, defaultValue, metaData, uploadDir, baseUrl, }: FileInputProps): react_jsx_runtime.JSX.Element;
+declare const _default$2: react.MemoExoticComponent<typeof FileInput>;
+
+type HiddenInputProps = Omit<ResolvedFormField, 'type' | 'options' | 'defaultChecked' | 'label'> & {
+    name: string;
+};
+declare function HiddenInput({ name, defaultValue, className, disabled, }: HiddenInputProps): react_jsx_runtime.JSX.Element;
+
+type SubmitInputProps = Omit<ResolvedFormField, 'type' | 'options'> & {
+    name: string;
+    loading: boolean;
+};
+declare function SubmitInput({ label, name, className, disabled, loading, defaultValue, hideSpinner, }: SubmitInputProps): react_jsx_runtime.JSX.Element;
+
+type NoneInputProps = {
+    label: string;
+    value: string;
+    className?: string;
+};
+declare function NoneInput({ label, value, className }: NoneInputProps): react_jsx_runtime.JSX.Element;
+declare const _default$1: react.MemoExoticComponent<typeof NoneInput>;
+
+type DateTimeInputProps = Omit<FormField, 'type' | 'options' | 'defaultChecked'> & {
+    name: string;
+};
+declare function DateTimeInput({ label, name, placeholder, defaultValue, className, disabled, error, rules, before, beforeClassName, after, afterClassName, }: DateTimeInputProps): react_jsx_runtime.JSX.Element;
+declare const _default: react.MemoExoticComponent<typeof DateTimeInput>;
+
+export { _default$9 as Alert, type AlertProps, _default$5 as CheckboxInput, type CheckboxInputProps, _default as DateTimeInput, type DateTimeInputProps, _default$2 as FileInput, type FileInputProps, FileMetaData, Form, FormContext, FormContextValue, FormErrors, FormField, type FormLabels, type FormProps, FormState, type FormTheme, type FormThemeConfig, FormThemeProvider, type FormThemeProviderProps, HiddenInput, type HiddenInputProps, _default$1 as NoneInput, type NoneInputProps, _default$3 as RadioInput, type RadioInputProps, ResolvedFormConfig, ResolvedFormField, _default$7 as SelectInput, type SelectInputProps, SubmitInput, type SubmitInputProps, _default$6 as TextAreaInput, type TextAreaInputProps, _default$8 as TextInput, type TextInputProps, _default$4 as ToggleInput, type ToggleInputProps, bytesToHumanReadable, createTheme, cx, defaultLabels, defaultTheme, isImage, lightOnlyTheme, useFieldError, useFormConfig, useFormContext, useFormLabels, useFormState, useFormTheme, useFormThemeConfig, widthClasses };