dara-ui 0.1.0 → 0.4.0

package/dist/components/Footer/Footer.d.ts

@@ -0,0 +1,67 @@
+import { default as React } from 'react';
+export type FooterVariant = "default" | "sticky" | "minimal";
+export interface FooterColumn {
+    /**
+     * Column heading
+     */
+    title?: string;
+    /**
+     * Links in this column
+     */
+    links?: {
+        label: string;
+        href: string;
+        external?: boolean;
+        icon?: React.ReactNode;
+    }[];
+    /**
+     * Free-form content for this column (overrides links)
+     */
+    content?: React.ReactNode;
+}
+export interface FooterProps {
+    /**
+     * Layout variant
+     * - default: static footer at page bottom, brand + columns + bottom bar
+     * - sticky: always pinned to bottom of viewport (content pushes it up)
+     * - minimal: single-row thin strip
+     * @default "default"
+     */
+    variant?: FooterVariant;
+    /**
+     * Brand element (logo, name)
+     */
+    brand?: React.ReactNode;
+    /**
+     * Short tagline under the brand
+     */
+    tagline?: string;
+    /**
+     * Columns of links / content
+     */
+    columns?: FooterColumn[];
+    /**
+     * Social icons / media strip (rendered above the bottom bar)
+     */
+    social?: React.ReactNode;
+    /**
+     * Bottom bar content (copyright, legal links)
+     */
+    bottomBar?: React.ReactNode;
+    /**
+     * Additional className
+     */
+    className?: string;
+}
+/**
+ * Dara UI Footer
+ *
+ * Features:
+ * - Three variants: default, sticky, minimal
+ * - Glass-morphism styling consistent with Navbar
+ * - Responsive columns (2 cols on mobile, 4 on desktop)
+ * - RTL aware
+ * - Slots: brand, tagline, columns, social, bottomBar
+ */
+export declare const Footer: React.FC<FooterProps>;
+export default Footer;

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

@@ -0,0 +1,3 @@
+export { Footer } from './Footer';
+export type { FooterProps, FooterColumn, FooterVariant } from './Footer';
+export { Footer as default } from './Footer';

package/dist/components/Navbar/Navbar.d.ts

@@ -22,6 +22,22 @@ export interface NavbarProps {
     themeChangerMobile?: React.ReactNode;
     rightContent?: React.ReactNode;
     className?: string;
+    /**
+     * Enable IntersectionObserver-based scroll-spy.
+     * Each link's `href` (e.g. "#about") is observed; the section closest to
+     * the top of the viewport becomes active.
+     * @default false
+     */
+    scrollSpy?: boolean;
+    /**
+     * Offset from viewport top (px) where a section is considered "active"
+     * @default 140
+     */
+    scrollSpyOffset?: number;
+    /**
+     * Called with the currently-active section id whenever it changes
+     */
+    onActiveChange?: (id: string) => void;
 }
 export declare const Navbar: React.FC<NavbarProps>;
 export default Navbar;

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;