@shalomormsby/ui 0.0.5

package/dist/hooks-BQi3Ia-W.d.ts

@@ -0,0 +1,225 @@
+import { ThemeName, ColorMode } from '@sage/tokens';
+import { F as FieldValidation, a as FormErrors } from './validation-Bj1ye-v_.js';
+
+interface ThemeHook {
+    /**
+     * Current theme name
+     */
+    theme: ThemeName;
+    /**
+     * Current color mode (light/dark)
+     */
+    mode: ColorMode;
+    /**
+     * Set the theme
+     */
+    setTheme: (theme: ThemeName) => void;
+    /**
+     * Set the color mode
+     */
+    setMode: (mode: ColorMode) => void;
+    /**
+     * Toggle between light and dark mode
+     */
+    toggleMode: () => void;
+    /**
+     * Combined theme configuration
+     */
+    themeConfig: {
+        name: ThemeName;
+        mode: ColorMode;
+    };
+}
+/**
+ * Hook to access and control theme settings
+ *
+ * @example
+ * ```tsx
+ * function ThemeSelector() {
+ *   const { theme, mode, setTheme, toggleMode } = useTheme();
+ *
+ *   return (
+ *     <div>
+ *       <p>Current: {theme} - {mode}</p>
+ *       <button onClick={() => setTheme('sage')}>Sage Theme</button>
+ *       <button onClick={toggleMode}>Toggle Mode</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useTheme(): ThemeHook;
+
+interface MotionPreference {
+    /**
+     * Motion intensity level (0-10)
+     * 0 = no motion, 10 = full motion
+     */
+    scale: number;
+    /**
+     * Whether animations should be displayed
+     * False when scale is 0 or prefersReducedMotion is true
+     */
+    shouldAnimate: boolean;
+    /**
+     * System preference for reduced motion
+     */
+    prefersReducedMotion: boolean;
+}
+/**
+ * Hook to access motion preferences
+ *
+ * Automatically syncs with system `prefers-reduced-motion` media query
+ * and respects user's manual motion intensity setting.
+ *
+ * @example
+ * ```tsx
+ * function AnimatedComponent() {
+ *   const { scale, shouldAnimate } = useMotionPreference();
+ *
+ *   if (!shouldAnimate) {
+ *     return <div>Content without animation</div>;
+ *   }
+ *
+ *   return (
+ *     <motion.div
+ *       animate={{ opacity: 1 }}
+ *       transition={{ duration: 0.3 * (scale / 10) }}
+ *     >
+ *       Content with scaled animation
+ *     </motion.div>
+ *   );
+ * }
+ * ```
+ */
+declare function useMotionPreference(): MotionPreference;
+
+interface UseFormOptions<T> {
+    /**
+     * Initial form values
+     */
+    initialValues: T;
+    /**
+     * Validation rules for each field
+     */
+    validations?: Partial<Record<keyof T, FieldValidation>>;
+    /**
+     * Callback fired when form is submitted and valid
+     */
+    onSubmit?: (values: T) => void | Promise<void>;
+    /**
+     * When to validate fields
+     * @default 'onBlur'
+     */
+    validateOn?: 'onChange' | 'onBlur' | 'onSubmit';
+}
+interface UseFormReturn<T> {
+    /**
+     * Current form values
+     */
+    values: T;
+    /**
+     * Current form errors
+     */
+    errors: FormErrors;
+    /**
+     * Whether the form is currently submitting
+     */
+    isSubmitting: boolean;
+    /**
+     * Whether the form has been touched/modified
+     */
+    isDirty: boolean;
+    /**
+     * Set value for a specific field
+     */
+    setValue: (name: keyof T, value: any) => void;
+    /**
+     * Set error for a specific field
+     */
+    setError: (name: keyof T, error: string | undefined) => void;
+    /**
+     * Handle input change event
+     */
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    /**
+     * Handle input blur event
+     */
+    handleBlur: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    /**
+     * Handle form submit
+     */
+    handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => Promise<void>;
+    /**
+     * Reset form to initial values
+     */
+    reset: () => void;
+    /**
+     * Manually validate all fields
+     */
+    validate: () => boolean;
+    /**
+     * Get props for a field (value, onChange, onBlur, error)
+     */
+    getFieldProps: (name: keyof T) => {
+        name: string;
+        value: any;
+        onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+        onBlur: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+        error: boolean;
+    };
+}
+/**
+ * useForm Hook
+ *
+ * A lightweight form state management hook with built-in validation.
+ *
+ * Features:
+ * - Field-level validation
+ * - Configurable validation timing (onChange, onBlur, onSubmit)
+ * - Dirty state tracking
+ * - Submit handling with loading state
+ * - Helper functions for common patterns
+ *
+ * Example:
+ * ```tsx
+ * const form = useForm({
+ *   initialValues: { email: '', password: '' },
+ *   validations: {
+ *     email: { required: true, pattern: patterns.email },
+ *     password: { required: true, minLength: { value: 8, message: 'Min 8 chars' } }
+ *   },
+ *   onSubmit: async (values) => {
+ *     await login(values);
+ *   }
+ * });
+ *
+ * return (
+ *   <form onSubmit={form.handleSubmit}>
+ *     <FormField label="Email" error={form.errors.email}>
+ *       <TextField {...form.getFieldProps('email')} />
+ *     </FormField>
+ *     <Button type="submit" loading={form.isSubmitting}>Submit</Button>
+ *   </form>
+ * );
+ * ```
+ */
+declare function useForm<T extends Record<string, any>>({ initialValues, validations, onSubmit, validateOn, }: UseFormOptions<T>): UseFormReturn<T>;
+
+/**
+ * Hooks subpath export
+ * Allows: import { ... } from '@sage/ui/hooks'
+ */
+
+type hooks_MotionPreference = MotionPreference;
+type hooks_ThemeHook = ThemeHook;
+type hooks_UseFormOptions<T> = UseFormOptions<T>;
+type hooks_UseFormReturn<T> = UseFormReturn<T>;
+declare const hooks_useForm: typeof useForm;
+declare const hooks_useMotionPreference: typeof useMotionPreference;
+declare const hooks_useTheme: typeof useTheme;
+declare namespace hooks {
+  export { type hooks_MotionPreference as MotionPreference, type hooks_ThemeHook as ThemeHook, type hooks_UseFormOptions as UseFormOptions, type hooks_UseFormReturn as UseFormReturn, hooks_useForm as useForm, hooks_useMotionPreference as useMotionPreference, hooks_useTheme as useTheme };
+}
+
+export { type MotionPreference as M, type ThemeHook as T, type UseFormOptions as U, useMotionPreference as a, type UseFormReturn as b, useForm as c, hooks as h, useTheme as u };

package/dist/hooks-JwoY_LtZ.d.mts

@@ -0,0 +1,225 @@
+import { ThemeName, ColorMode } from '@sage/tokens';
+import { F as FieldValidation, a as FormErrors } from './validation-Bj1ye-v_.mjs';
+
+interface ThemeHook {
+    /**
+     * Current theme name
+     */
+    theme: ThemeName;
+    /**
+     * Current color mode (light/dark)
+     */
+    mode: ColorMode;
+    /**
+     * Set the theme
+     */
+    setTheme: (theme: ThemeName) => void;
+    /**
+     * Set the color mode
+     */
+    setMode: (mode: ColorMode) => void;
+    /**
+     * Toggle between light and dark mode
+     */
+    toggleMode: () => void;
+    /**
+     * Combined theme configuration
+     */
+    themeConfig: {
+        name: ThemeName;
+        mode: ColorMode;
+    };
+}
+/**
+ * Hook to access and control theme settings
+ *
+ * @example
+ * ```tsx
+ * function ThemeSelector() {
+ *   const { theme, mode, setTheme, toggleMode } = useTheme();
+ *
+ *   return (
+ *     <div>
+ *       <p>Current: {theme} - {mode}</p>
+ *       <button onClick={() => setTheme('sage')}>Sage Theme</button>
+ *       <button onClick={toggleMode}>Toggle Mode</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useTheme(): ThemeHook;
+
+interface MotionPreference {
+    /**
+     * Motion intensity level (0-10)
+     * 0 = no motion, 10 = full motion
+     */
+    scale: number;
+    /**
+     * Whether animations should be displayed
+     * False when scale is 0 or prefersReducedMotion is true
+     */
+    shouldAnimate: boolean;
+    /**
+     * System preference for reduced motion
+     */
+    prefersReducedMotion: boolean;
+}
+/**
+ * Hook to access motion preferences
+ *
+ * Automatically syncs with system `prefers-reduced-motion` media query
+ * and respects user's manual motion intensity setting.
+ *
+ * @example
+ * ```tsx
+ * function AnimatedComponent() {
+ *   const { scale, shouldAnimate } = useMotionPreference();
+ *
+ *   if (!shouldAnimate) {
+ *     return <div>Content without animation</div>;
+ *   }
+ *
+ *   return (
+ *     <motion.div
+ *       animate={{ opacity: 1 }}
+ *       transition={{ duration: 0.3 * (scale / 10) }}
+ *     >
+ *       Content with scaled animation
+ *     </motion.div>
+ *   );
+ * }
+ * ```
+ */
+declare function useMotionPreference(): MotionPreference;
+
+interface UseFormOptions<T> {
+    /**
+     * Initial form values
+     */
+    initialValues: T;
+    /**
+     * Validation rules for each field
+     */
+    validations?: Partial<Record<keyof T, FieldValidation>>;
+    /**
+     * Callback fired when form is submitted and valid
+     */
+    onSubmit?: (values: T) => void | Promise<void>;
+    /**
+     * When to validate fields
+     * @default 'onBlur'
+     */
+    validateOn?: 'onChange' | 'onBlur' | 'onSubmit';
+}
+interface UseFormReturn<T> {
+    /**
+     * Current form values
+     */
+    values: T;
+    /**
+     * Current form errors
+     */
+    errors: FormErrors;
+    /**
+     * Whether the form is currently submitting
+     */
+    isSubmitting: boolean;
+    /**
+     * Whether the form has been touched/modified
+     */
+    isDirty: boolean;
+    /**
+     * Set value for a specific field
+     */
+    setValue: (name: keyof T, value: any) => void;
+    /**
+     * Set error for a specific field
+     */
+    setError: (name: keyof T, error: string | undefined) => void;
+    /**
+     * Handle input change event
+     */
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    /**
+     * Handle input blur event
+     */
+    handleBlur: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+    /**
+     * Handle form submit
+     */
+    handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => Promise<void>;
+    /**
+     * Reset form to initial values
+     */
+    reset: () => void;
+    /**
+     * Manually validate all fields
+     */
+    validate: () => boolean;
+    /**
+     * Get props for a field (value, onChange, onBlur, error)
+     */
+    getFieldProps: (name: keyof T) => {
+        name: string;
+        value: any;
+        onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+        onBlur: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
+        error: boolean;
+    };
+}
+/**
+ * useForm Hook
+ *
+ * A lightweight form state management hook with built-in validation.
+ *
+ * Features:
+ * - Field-level validation
+ * - Configurable validation timing (onChange, onBlur, onSubmit)
+ * - Dirty state tracking
+ * - Submit handling with loading state
+ * - Helper functions for common patterns
+ *
+ * Example:
+ * ```tsx
+ * const form = useForm({
+ *   initialValues: { email: '', password: '' },
+ *   validations: {
+ *     email: { required: true, pattern: patterns.email },
+ *     password: { required: true, minLength: { value: 8, message: 'Min 8 chars' } }
+ *   },
+ *   onSubmit: async (values) => {
+ *     await login(values);
+ *   }
+ * });
+ *
+ * return (
+ *   <form onSubmit={form.handleSubmit}>
+ *     <FormField label="Email" error={form.errors.email}>
+ *       <TextField {...form.getFieldProps('email')} />
+ *     </FormField>
+ *     <Button type="submit" loading={form.isSubmitting}>Submit</Button>
+ *   </form>
+ * );
+ * ```
+ */
+declare function useForm<T extends Record<string, any>>({ initialValues, validations, onSubmit, validateOn, }: UseFormOptions<T>): UseFormReturn<T>;
+
+/**
+ * Hooks subpath export
+ * Allows: import { ... } from '@sage/ui/hooks'
+ */
+
+type hooks_MotionPreference = MotionPreference;
+type hooks_ThemeHook = ThemeHook;
+type hooks_UseFormOptions<T> = UseFormOptions<T>;
+type hooks_UseFormReturn<T> = UseFormReturn<T>;
+declare const hooks_useForm: typeof useForm;
+declare const hooks_useMotionPreference: typeof useMotionPreference;
+declare const hooks_useTheme: typeof useTheme;
+declare namespace hooks {
+  export { type hooks_MotionPreference as MotionPreference, type hooks_ThemeHook as ThemeHook, type hooks_UseFormOptions as UseFormOptions, type hooks_UseFormReturn as UseFormReturn, hooks_useForm as useForm, hooks_useMotionPreference as useMotionPreference, hooks_useTheme as useTheme };
+}
+
+export { type MotionPreference as M, type ThemeHook as T, type UseFormOptions as U, useMotionPreference as a, type UseFormReturn as b, useForm as c, hooks as h, useTheme as u };

package/dist/hooks.d.mts

@@ -0,0 +1,3 @@
+export { M as MotionPreference, T as ThemeHook, U as UseFormOptions, b as UseFormReturn, c as useForm, a as useMotionPreference, u as useTheme } from './hooks-JwoY_LtZ.mjs';
+import '@sage/tokens';
+import './validation-Bj1ye-v_.mjs';

package/dist/hooks.d.ts

@@ -0,0 +1,3 @@
+export { M as MotionPreference, T as ThemeHook, U as UseFormOptions, b as UseFormReturn, c as useForm, a as useMotionPreference, u as useTheme } from './hooks-BQi3Ia-W.js';
+import '@sage/tokens';
+import './validation-Bj1ye-v_.js';