dara-ui 0.1.0 → 0.3.0

package/dist/components/PageLoader/PageLoader.d.ts

@@ -0,0 +1,83 @@
+import { default as React } from 'react';
+export type LoaderShape = "spinner" | "ring" | "dots" | "pulse" | "bars";
+export type LoaderColor = "primary" | "secondary" | "accent" | "success" | "danger" | "warning";
+export interface PageLoaderProps {
+    /**
+     * Whether the loader is visible
+     * @default true
+     */
+    isLoading?: boolean;
+    /**
+     * Loader shape/variant
+     * @default "spinner"
+     */
+    shape?: LoaderShape;
+    /**
+     * Semantic color variant
+     * @default "primary"
+     */
+    color?: LoaderColor;
+    /**
+     * Arbitrary CSS color (overrides `color` when provided)
+     * @example "var(--color-primary)" or "#7c5cff"
+     */
+    customColor?: string;
+    /**
+     * Loading label text
+     */
+    label?: string;
+    /**
+     * Progress value (0-100). Omit for indeterminate.
+     */
+    progress?: number;
+    /**
+     * Show progress percentage
+     * @default false
+     */
+    showProgress?: boolean;
+    /**
+     * Size of the loader
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Blur the backdrop
+     * @default true
+     */
+    blur?: boolean;
+    /**
+     * Show the Dara UI brand mark
+     * @default false
+     */
+    showBrand?: boolean;
+    /**
+     * Minimum display time in ms (prevents flash)
+     * @default 0
+     */
+    minDuration?: number;
+    /**
+     * Render inline (no fixed positioning, no backdrop)
+     * Used for inline previews inside cards
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Additional className
+     */
+    className?: string;
+}
+/**
+ * Dara UI PageLoader - Full-screen loading overlay
+ *
+ * Features:
+ * - Multiple loader shapes (spinner, ring, dots, pulse, bars)
+ * - Optional progress bar with percentage
+ * - Glass backdrop with blur
+ * - Theme-aware colors + custom color support
+ * - Minimum display time to prevent flash
+ * - Smooth fade in/out
+ * - `inline` mode for embedding inside cards / previews
+ * - Glows follow the painted shape via drop-shadow (not bounding box)
+ */
+export declare const PageLoader: React.FC<PageLoaderProps>;
+export default PageLoader;

package/dist/components/PageLoader/PageLoaderProvider.d.ts

@@ -0,0 +1,80 @@
+import { default as React, ReactNode } from 'react';
+import { LoaderShape } from './PageLoader';
+export interface PageLoaderOptions {
+    /**
+     * Loading label
+     */
+    label?: string;
+    /**
+     * Loader shape
+     * @default "spinner"
+     */
+    shape?: LoaderShape;
+    /**
+     * Minimum display time in ms
+     * @default 400
+     */
+    minDuration?: number;
+    /**
+     * Show progress
+     */
+    showProgress?: boolean;
+    /**
+     * Show brand mark
+     */
+    showBrand?: boolean;
+}
+interface PageLoaderContextValue {
+    /**
+     * Show the page loader
+     */
+    show: (options?: PageLoaderOptions) => void;
+    /**
+     * Hide the page loader
+     */
+    hide: () => void;
+    /**
+     * Whether the loader is currently visible
+     */
+    isLoading: boolean;
+    /**
+     * Update progress (0-100)
+     */
+    setProgress: (progress: number) => void;
+    /**
+     * Wrap an async operation with automatic loader
+     */
+    wrap: <T>(fn: () => Promise<T>, options?: PageLoaderOptions) => Promise<T>;
+}
+/**
+ * PageLoaderProvider - App-level page loader with imperative API
+ *
+ * Features:
+ * - show()/hide() imperative API
+ * - wrap() to auto-load during async ops
+ * - Route-change friendly
+ * - Progress support
+ */
+export declare const PageLoaderProvider: React.FC<{
+    children: ReactNode;
+}>;
+/**
+ * usePageLoader - Imperative API for the page loader
+ *
+ * @example
+ * ```tsx
+ * const loader = usePageLoader();
+ *
+ * // Manual control
+ * loader.show({ label: "Loading...", showBrand: true });
+ * loader.hide();
+ *
+ * // Auto-wrap an async operation
+ * await loader.wrap(async () => {
+ *   const data = await fetch("/api/data");
+ *   return data.json();
+ * }, { label: "Fetching..." });
+ * ```
+ */
+export declare const usePageLoader: () => PageLoaderContextValue;
+export default usePageLoader;

package/dist/components/PageLoader/index.d.ts

@@ -0,0 +1,5 @@
+export { PageLoader } from './PageLoader';
+export type { PageLoaderProps, LoaderShape } from './PageLoader';
+export { PageLoaderProvider, usePageLoader } from './PageLoaderProvider';
+export type { PageLoaderOptions } from './PageLoaderProvider';
+export { PageLoader as default } from './PageLoader';

package/dist/components/ScrollReveal/ScrollReveal.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+export type ScrollRevealAnimation = "fade" | "fade-up" | "fade-down" | "fade-left" | "fade-right" | "zoom-in" | "zoom-out" | "flip-up" | "flip-down" | "slide-up" | "slide-down";
+export interface ScrollRevealProps {
+    /**
+     * Content to reveal
+     */
+    children: React.ReactNode;
+    /**
+     * Animation type
+     * @default "fade-up"
+     */
+    animation?: ScrollRevealAnimation;
+    /**
+     * Delay before animation starts (ms)
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Duration of the animation (ms)
+     * @default 600
+     */
+    duration?: number;
+    /**
+     * Distance to travel in pixels (for directional animations)
+     * @default 40
+     */
+    distance?: number;
+    /**
+     * IntersectionObserver threshold (0-1)
+     * @default 0.15
+     */
+    threshold?: number;
+    /**
+     * Only animate once (don't re-trigger on scroll back)
+     * @default true
+     */
+    once?: boolean;
+    /**
+     * Root margin for IntersectionObserver
+     * @default "0px 0px -10% 0px"
+     */
+    rootMargin?: string;
+    /**
+     * Additional className
+     */
+    className?: string;
+}
+/**
+ * Dara UI ScrollReveal - Animate elements into view on scroll
+ *
+ * Features:
+ * - Multiple animation presets (fade, slide, zoom, flip)
+ * - Configurable delay, duration, distance
+ * - IntersectionObserver-based (performant)
+ * - Respects prefers-reduced-motion
+ * - Runs once by default
+ */
+export declare const ScrollReveal: React.FC<ScrollRevealProps>;
+export default ScrollReveal;

package/dist/components/ScrollReveal/index.d.ts

@@ -0,0 +1,5 @@
+export { ScrollReveal } from './ScrollReveal';
+export type { ScrollRevealProps, ScrollRevealAnimation } from './ScrollReveal';
+export { useScrollReveal } from './useScrollReveal';
+export type { UseScrollRevealOptions } from './useScrollReveal';
+export { ScrollReveal as default } from './ScrollReveal';

package/dist/components/ScrollReveal/useScrollReveal.d.ts

@@ -0,0 +1,36 @@
+export interface UseScrollRevealOptions {
+    /**
+     * IntersectionObserver threshold
+     * @default 0.15
+     */
+    threshold?: number;
+    /**
+     * Only trigger once
+     * @default true
+     */
+    once?: boolean;
+    /**
+     * Root margin
+     * @default "0px 0px -10% 0px"
+     */
+    rootMargin?: string;
+}
+/**
+ * useScrollReveal - Hook version of ScrollReveal for custom elements
+ *
+ * Returns a ref to attach and a boolean indicating visibility.
+ * Use with any element: cards, inputs, sections, etc.
+ *
+ * @example
+ * ```tsx
+ * const { ref, isVisible } = useScrollReveal();
+ * <div ref={ref} style={{ opacity: isVisible ? 1 : 0 }}>
+ *   Content
+ * </div>
+ * ```
+ */
+export declare function useScrollReveal<T extends HTMLElement = HTMLDivElement>(options?: UseScrollRevealOptions): {
+    ref: import('react').RefObject<T | null>;
+    isVisible: boolean;
+};
+export default useScrollReveal;