@finggujadhav/react 0.9.0

package/dist/button.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    motion?: 'fade' | 'slide-up' | 'scale-in' | 'lift';
+    glass?: boolean;
+}
+/**
+ * Static manifest of all classes used by Button.
+ * Used by compiler for deterministic tree-shaking regardless of build order.
+ */
+export declare const __ffClasses_Button: string[];
+/**
+ * Finggu Button Component
+ * Maps props to deterministic ff-* classes or hashed equivalents.
+ */
+export declare const Button: React.FC<ButtonProps>;
+//# sourceMappingURL=button.d.ts.map

package/dist/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAsBD;;;GAGG;AACH,eAAO,MAAM,kBAAkB,UAM9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyBxC,CAAC"}

package/dist/button.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFinggu } from './provider';
+const VARIANTS = {
+    primary: 'ff-btn-primary',
+    secondary: 'ff-btn-secondary',
+    ghost: 'ff-btn-ghost',
+    outline: 'ff-btn-outline'
+};
+const SIZES = {
+    sm: 'ff-btn-sm',
+    md: 'ff-btn-md',
+    lg: 'ff-btn-lg'
+};
+const MOTIONS = {
+    fade: 'ff-fade-in',
+    'slide-up': 'ff-slide-up',
+    'scale-in': 'ff-scale-in',
+    lift: 'ff-hover-lift'
+};
+/**
+ * Static manifest of all classes used by Button.
+ * Used by compiler for deterministic tree-shaking regardless of build order.
+ */
+export const __ffClasses_Button = [
+    'ff-btn',
+    ...Object.values(VARIANTS),
+    ...Object.values(SIZES),
+    ...Object.values(MOTIONS),
+    'ff-card-glass'
+];
+/**
+ * Finggu Button Component
+ * Maps props to deterministic ff-* classes or hashed equivalents.
+ */
+export const Button = ({ variant = 'primary', size = 'md', motion, glass, className, children, ...props }) => {
+    const { resolveAll } = useFinggu();
+    const ffClasses = resolveAll([
+        'ff-btn',
+        VARIANTS[variant],
+        SIZES[size],
+        glass && 'ff-card-glass',
+        motion && MOTIONS[motion],
+        className
+    ]);
+    return (_jsx("button", { className: ffClasses, ...props, children: children }));
+};

package/dist/card.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'outline' | 'glass';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+export declare const __ffClasses_Card: string[];
+export declare const Card: React.FC<CardProps>;
+export declare const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const CardBody: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+//# sourceMappingURL=card.d.ts.map

package/dist/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../src/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACnE,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACzC;AAcD,eAAO,MAAM,gBAAgB,UAM5B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAqBpC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAGrE,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAGnE,CAAC"}

package/dist/card.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFinggu } from './provider';
+const VARIANTS = {
+    outline: 'ff-card-outline',
+    glass: 'ff-card-glass'
+};
+const PADDINGS = {
+    none: 'ff-p-0',
+    sm: 'ff-p-2',
+    md: 'ff-p-4',
+    lg: 'ff-p-8'
+};
+export const __ffClasses_Card = [
+    'ff-card',
+    'ff-card-header',
+    'ff-card-body',
+    ...Object.values(VARIANTS),
+    ...Object.values(PADDINGS)
+];
+export const Card = ({ variant, padding = 'md', className, children, ...props }) => {
+    const { resolveAll } = useFinggu();
+    const ffClasses = resolveAll([
+        'ff-card',
+        variant && VARIANTS[variant],
+        PADDINGS[padding],
+        className
+    ]);
+    return (_jsx("div", { className: ffClasses, ...props, children: children }));
+};
+export const CardHeader = ({ className, children, ...props }) => {
+    const { resolveAll } = useFinggu();
+    return _jsx("div", { className: resolveAll(['ff-card-header', className]), ...props, children: children });
+};
+export const CardBody = ({ className, children, ...props }) => {
+    const { resolveAll } = useFinggu();
+    return _jsx("div", { className: resolveAll(['ff-card-body', className]), ...props, children: children });
+};

package/dist/dropdown.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface DropdownProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    align?: 'left' | 'right';
+}
+export declare const __ffClasses_Dropdown: string[];
+export declare const Dropdown: React.FC<DropdownProps>;
+export declare const DropdownItem: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+//# sourceMappingURL=dropdown.d.ts.map

package/dist/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../src/dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,MAAM,WAAW,aAAa;IAC1B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED,eAAO,MAAM,oBAAoB,UAMhC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuC5C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAGvE,CAAC"}

package/dist/dropdown.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { useFinggu } from './provider';
+export const __ffClasses_Dropdown = [
+    'ff-dropdown',
+    'ff-dropdown-trigger',
+    'ff-dropdown-menu',
+    'ff-dropdown-menu-right',
+    'ff-dropdown-item'
+];
+export const Dropdown = ({ trigger, children, align = 'left' }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    const { resolveAll } = useFinggu();
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    return (_jsxs("div", { className: resolveAll(['ff-dropdown']), ref: containerRef, children: [_jsx("button", { type: "button", className: resolveAll(['ff-dropdown-trigger']), onClick: () => setIsOpen(!isOpen), "aria-haspopup": "true", "aria-expanded": isOpen, children: trigger }), _jsx("div", { className: resolveAll([
+                    'ff-dropdown-menu',
+                    align === 'right' && 'ff-dropdown-menu-right'
+                ]), "data-ff-state": isOpen ? 'open' : 'closed', role: "menu", "aria-hidden": !isOpen, children: children })] }));
+};
+export const DropdownItem = ({ className, children, ...props }) => {
+    const { resolveAll } = useFinggu();
+    return _jsx("div", { className: resolveAll(['ff-dropdown-item', className]), ...props, children: children });
+};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './provider';
+export * from './button';
+export * from './card';
+export * from './input';
+export * from './modal';
+export * from './tabs';
+export * from './dropdown';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+export * from './provider';
+export * from './button';
+export * from './card';
+export * from './input';
+export * from './modal';
+export * from './tabs';
+export * from './dropdown';

package/dist/input.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    error?: boolean;
+}
+export declare const __ffClasses_Input: string[];
+export declare const Input: React.FC<InputProps>;
+//# sourceMappingURL=input.d.ts.map

package/dist/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC3E,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,UAG7B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAUtC,CAAC"}

package/dist/input.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFinggu } from './provider';
+export const __ffClasses_Input = [
+    'ff-input',
+    'ff-input-error'
+];
+export const Input = ({ error, className, ...props }) => {
+    const { resolveAll } = useFinggu();
+    const ffClasses = resolveAll([
+        'ff-input',
+        error && 'ff-input-error',
+        className
+    ]);
+    return _jsx("input", { className: ffClasses, ...props });
+};

package/dist/modal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const __ffClasses_Modal: string[];
+export declare const Modal: React.FC<ModalProps>;
+//# sourceMappingURL=modal.d.ts.map

package/dist/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../src/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,MAAM,WAAW,UAAU;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,UAM7B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA4BtC,CAAC"}

package/dist/modal.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useFinggu } from './provider';
+export const __ffClasses_Modal = [
+    'ff-modal',
+    'ff-modal-open',
+    'ff-modal-closed',
+    'ff-modal-overlay',
+    'ff-modal-content'
+];
+export const Modal = ({ isOpen, onClose, children, className }) => {
+    const { resolveAll } = useFinggu();
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        if (isOpen) {
+            setMounted(true);
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            const timer = setTimeout(() => setMounted(false), 300); // Wait for exit animation
+            document.body.style.overflow = '';
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen]);
+    if (!mounted && !isOpen)
+        return null;
+    return (_jsxs("div", { className: resolveAll(['ff-modal', isOpen ? 'ff-modal-open' : 'ff-modal-closed']), "aria-hidden": !isOpen, children: [_jsx("div", { className: "ff-modal-overlay", onClick: onClose }), _jsx("div", { className: resolveAll(['ff-modal-content', className]), children: children })] }));
+};

package/dist/provider.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { FingguTheme } from '@finggujadhav/js-helper';
+export interface FingguMapping {
+    _version?: string;
+    [key: string]: string | undefined;
+}
+export interface FingguProviderProps {
+    children: React.ReactNode;
+    mapping?: FingguMapping;
+    mode?: 'dev' | 'opt' | 'ext';
+    version?: string;
+    theme?: FingguTheme;
+}
+/**
+ * Provides FingguFlux class mapping to the component tree.
+ */
+export declare const FingguProvider: React.FC<FingguProviderProps>;
+/**
+ * Hook to resolve FingguFlux classes to their mapped versions.
+ */
+export declare const useFinggu: () => {
+    resolve: (className: string) => string;
+    resolveAll: (classes: (string | undefined | null | false)[]) => string;
+    mode: "dev" | "opt" | "ext";
+    theme: FingguTheme | undefined;
+};
+//# sourceMappingURL=provider.d.ts.map

package/dist/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../src/provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgE,MAAM,OAAO,CAAC;AACrF,OAAO,EAAY,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,aAAa;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;AAcD,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+BxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS;yBAGU,MAAM,KAAG,MAAM;0BAed,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,EAAE,KAAG,MAAM;;;CAQ9E,CAAC"}

package/dist/provider.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useEffect, useRef } from 'react';
+import { setTheme } from '@finggujadhav/js-helper';
+const FingguContext = createContext({
+    mapping: null,
+    mode: 'dev'
+});
+/**
+ * Provides FingguFlux class mapping to the component tree.
+ */
+export const FingguProvider = ({ children, mapping = null, mode = 'dev', version, theme = 'system' }) => {
+    const containerRef = useRef(null);
+    useMemo(() => {
+        if (mapping && version && mapping._version && mapping._version !== version) {
+            console.warn(`[FingguFlux] Version Mismatch: mapping.json (${mapping._version}) does not match expected CSS version (${version})`);
+        }
+    }, [mapping, version]);
+    // Apply theme to container for isolation
+    useEffect(() => {
+        if (containerRef.current) {
+            setTheme(theme, containerRef.current);
+        }
+    }, [theme]);
+    const value = useMemo(() => ({ mapping, mode, version, theme }), [mapping, mode, version, theme]);
+    return (_jsx(FingguContext.Provider, { value: value, children: _jsx("div", { ref: containerRef, style: { display: 'contents' }, children: children }) }));
+};
+/**
+ * Hook to resolve FingguFlux classes to their mapped versions.
+ */
+export const useFinggu = () => {
+    const { mapping, mode, theme } = useContext(FingguContext);
+    const resolve = (className) => {
+        if (mode === 'dev' || !mapping)
+            return className;
+        const mapped = mapping[className];
+        if (mode === 'ext' && !mapped && className.startsWith('ff-')) {
+            const errorMsg = `[FingguFlux] Critical: Class '${className}' not found in mapping.json in Extreme mode. This will cause broken styles in production.`;
+            if (process.env.NODE_ENV === 'development') {
+                throw new Error(errorMsg);
+            }
+            else {
+                console.error(errorMsg);
+            }
+        }
+        return mapped || className;
+    };
+    const resolveAll = (classes) => {
+        return classes
+            .filter(Boolean)
+            .map(c => resolve(c))
+            .join(' ');
+    };
+    return { resolve, resolveAll, mode, theme };
+};

package/dist/tabs.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface TabsProps {
+    defaultValue: string;
+    children: React.ReactNode;
+}
+export declare const __ffClasses_Tabs: string[];
+export declare const Tabs: React.FC<TabsProps>;
+export declare const TabList: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const TabTrigger: React.FC<{
+    value: string;
+    children: React.ReactNode;
+}>;
+export declare const TabContent: React.FC<{
+    value: string;
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../src/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,MAAM,WAAW,SAAS;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,UAM5B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAOpC,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAE3D,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAe7E,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAI7E,CAAC"}

package/dist/tabs.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { useFinggu } from './provider';
+const TabsContext = React.createContext(null);
+export const __ffClasses_Tabs = [
+    'ff-tabs',
+    'ff-tab-list',
+    'ff-tab',
+    'ff-tab-active',
+    'ff-tab-content'
+];
+export const Tabs = ({ defaultValue, children }) => {
+    const [activeTab, setActiveTab] = useState(defaultValue);
+    return (_jsx(TabsContext.Provider, { value: { activeTab, setActiveTab }, children: _jsx("div", { className: "ff-tabs", children: children }) }));
+};
+export const TabList = ({ children }) => (_jsx("div", { className: "ff-tab-list", role: "tablist", children: children }));
+export const TabTrigger = ({ value, children }) => {
+    const context = React.useContext(TabsContext);
+    const { resolveAll } = useFinggu();
+    if (!context)
+        return null;
+    return (_jsx("button", { role: "tab", "aria-selected": context.activeTab === value, className: resolveAll(['ff-tab', context.activeTab === value && 'ff-tab-active']), onClick: () => context.setActiveTab(value), children: children }));
+};
+export const TabContent = ({ value, children }) => {
+    const context = React.useContext(TabsContext);
+    if (!context || context.activeTab !== value)
+        return null;
+    return _jsx("div", { className: "ff-tab-content", children: children });
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+    "name": "@finggujadhav/react",
+    "version": "0.9.0",
+    "description": "FingguFlux React Adapter - Zero-runtime, high-performance headless UI components.",
+    "type": "module",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "scripts": {
+        "build": "tsc"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        }
+    },
+    "files": [
+        "dist",
+        "src",
+        "!src/**/*.test.*",
+        "!src/**/__tests__"
+    ],
+    "dependencies": {
+        "@finggujadhav/core": "0.9.0",
+        "@finggujadhav/js-helper": "0.9.0"
+    },
+    "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "typescript": "^5.0.0"
+    }
+}

package/src/button.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useFinggu } from './provider';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+    motion?: 'fade' | 'slide-up' | 'scale-in' | 'lift';
+    glass?: boolean;
+}
+
+const VARIANTS = {
+    primary: 'ff-btn-primary',
+    secondary: 'ff-btn-secondary',
+    ghost: 'ff-btn-ghost',
+    outline: 'ff-btn-outline'
+};
+
+const SIZES = {
+    sm: 'ff-btn-sm',
+    md: 'ff-btn-md',
+    lg: 'ff-btn-lg'
+};
+
+const MOTIONS = {
+    fade: 'ff-fade-in',
+    'slide-up': 'ff-slide-up',
+    'scale-in': 'ff-scale-in',
+    lift: 'ff-hover-lift'
+};
+
+/**
+ * Static manifest of all classes used by Button.
+ * Used by compiler for deterministic tree-shaking regardless of build order.
+ */
+export const __ffClasses_Button = [
+    'ff-btn',
+    ...Object.values(VARIANTS),
+    ...Object.values(SIZES),
+    ...Object.values(MOTIONS),
+    'ff-card-glass'
+];
+
+/**
+ * Finggu Button Component
+ * Maps props to deterministic ff-* classes or hashed equivalents.
+ */
+export const Button: React.FC<ButtonProps> = ({
+    variant = 'primary',
+    size = 'md',
+    motion,
+    glass,
+    className,
+    children,
+    ...props
+}) => {
+    const { resolveAll } = useFinggu();
+
+    const ffClasses = resolveAll([
+        'ff-btn',
+        VARIANTS[variant],
+        SIZES[size],
+        glass && 'ff-card-glass',
+        motion && MOTIONS[motion],
+        className
+    ]);
+
+    return (
+        <button className={ffClasses} {...props}>
+            {children}
+        </button>
+    );
+};

package/src/card.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useFinggu } from './provider';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: 'outline' | 'glass';
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+
+const VARIANTS = {
+    outline: 'ff-card-outline',
+    glass: 'ff-card-glass'
+};
+
+const PADDINGS = {
+    none: 'ff-p-0',
+    sm: 'ff-p-2',
+    md: 'ff-p-4',
+    lg: 'ff-p-8'
+};
+
+export const __ffClasses_Card = [
+    'ff-card',
+    'ff-card-header',
+    'ff-card-body',
+    ...Object.values(VARIANTS),
+    ...Object.values(PADDINGS)
+];
+
+export const Card: React.FC<CardProps> = ({
+    variant,
+    padding = 'md',
+    className,
+    children,
+    ...props
+}) => {
+    const { resolveAll } = useFinggu();
+
+    const ffClasses = resolveAll([
+        'ff-card',
+        variant && VARIANTS[variant],
+        PADDINGS[padding],
+        className
+    ]);
+
+    return (
+        <div className={ffClasses} {...props}>
+            {children}
+        </div>
+    );
+};
+
+export const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => {
+    const { resolveAll } = useFinggu();
+    return <div className={resolveAll(['ff-card-header', className])} {...props}>{children}</div>;
+};
+
+export const CardBody: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => {
+    const { resolveAll } = useFinggu();
+    return <div className={resolveAll(['ff-card-body', className])} {...props}>{children}</div>;
+};

package/src/dropdown.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useFinggu } from './provider';
+
+export interface DropdownProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    align?: 'left' | 'right';
+}
+
+export const __ffClasses_Dropdown = [
+    'ff-dropdown',
+    'ff-dropdown-trigger',
+    'ff-dropdown-menu',
+    'ff-dropdown-menu-right',
+    'ff-dropdown-item'
+];
+
+export const Dropdown: React.FC<DropdownProps> = ({ trigger, children, align = 'left' }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const { resolveAll } = useFinggu();
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+
+    return (
+        <div className={resolveAll(['ff-dropdown'])} ref={containerRef}>
+            <button
+                type="button"
+                className={resolveAll(['ff-dropdown-trigger'])}
+                onClick={() => setIsOpen(!isOpen)}
+                aria-haspopup="true"
+                aria-expanded={isOpen}
+            >
+                {trigger}
+            </button>
+            <div
+                className={resolveAll([
+                    'ff-dropdown-menu',
+                    align === 'right' && 'ff-dropdown-menu-right'
+                ])}
+                data-ff-state={isOpen ? 'open' : 'closed'}
+                role="menu"
+                aria-hidden={!isOpen}
+            >
+                {children}
+            </div>
+        </div>
+    );
+};
+
+export const DropdownItem: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => {
+    const { resolveAll } = useFinggu();
+    return <div className={resolveAll(['ff-dropdown-item', className])} {...props}>{children}</div>;
+};

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './provider';
+export * from './button';
+export * from './card';
+export * from './input';
+export * from './modal';
+export * from './tabs';
+export * from './dropdown';

package/src/input.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { useFinggu } from './provider';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    error?: boolean;
+}
+
+export const __ffClasses_Input = [
+    'ff-input',
+    'ff-input-error'
+];
+
+export const Input: React.FC<InputProps> = ({ error, className, ...props }) => {
+    const { resolveAll } = useFinggu();
+
+    const ffClasses = resolveAll([
+        'ff-input',
+        error && 'ff-input-error',
+        className
+    ]);
+
+    return <input className={ffClasses} {...props} />;
+};

package/src/modal.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import { useFinggu } from './provider';
+
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    className?: string;
+}
+
+export const __ffClasses_Modal = [
+    'ff-modal',
+    'ff-modal-open',
+    'ff-modal-closed',
+    'ff-modal-overlay',
+    'ff-modal-content'
+];
+
+export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children, className }) => {
+    const { resolveAll } = useFinggu();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        if (isOpen) {
+            setMounted(true);
+            document.body.style.overflow = 'hidden';
+        } else {
+            const timer = setTimeout(() => setMounted(false), 300); // Wait for exit animation
+            document.body.style.overflow = '';
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen]);
+
+    if (!mounted && !isOpen) return null;
+
+    return (
+        <div
+            className={resolveAll(['ff-modal', isOpen ? 'ff-modal-open' : 'ff-modal-closed'])}
+            aria-hidden={!isOpen}
+        >
+            <div className="ff-modal-overlay" onClick={onClose} />
+            <div className={resolveAll(['ff-modal-content', className])}>
+                {children}
+            </div>
+        </div>
+    );
+};

package/src/provider.tsx

@@ -0,0 +1,94 @@
+import React, { createContext, useContext, useMemo, useEffect, useRef } from 'react';
+import { setTheme, FingguTheme } from '@finggujadhav/js-helper';
+
+export interface FingguMapping {
+    _version?: string;
+    [key: string]: string | undefined;
+}
+
+interface FingguContextValue {
+    mapping: FingguMapping | null;
+    mode: 'dev' | 'opt' | 'ext';
+    version?: string;
+    theme?: FingguTheme;
+}
+
+const FingguContext = createContext<FingguContextValue>({
+    mapping: null,
+    mode: 'dev'
+});
+
+export interface FingguProviderProps {
+    children: React.ReactNode;
+    mapping?: FingguMapping;
+    mode?: 'dev' | 'opt' | 'ext';
+    version?: string; // Target CSS version to validate against
+    theme?: FingguTheme;
+}
+
+/**
+ * Provides FingguFlux class mapping to the component tree.
+ */
+export const FingguProvider: React.FC<FingguProviderProps> = ({
+    children,
+    mapping = null,
+    mode = 'dev',
+    version,
+    theme = 'system'
+}) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useMemo(() => {
+        if (mapping && version && mapping._version && mapping._version !== version) {
+            console.warn(`[FingguFlux] Version Mismatch: mapping.json (${mapping._version}) does not match expected CSS version (${version})`);
+        }
+    }, [mapping, version]);
+
+    // Apply theme to container for isolation
+    useEffect(() => {
+        if (containerRef.current) {
+            setTheme(theme, containerRef.current);
+        }
+    }, [theme]);
+
+    const value = useMemo(() => ({ mapping, mode, version, theme }), [mapping, mode, version, theme]);
+
+    return (
+        <FingguContext.Provider value={value}>
+            <div ref={containerRef} style={{ display: 'contents' }}>
+                {children}
+            </div>
+        </FingguContext.Provider>
+    );
+};
+
+/**
+ * Hook to resolve FingguFlux classes to their mapped versions.
+ */
+export const useFinggu = () => {
+    const { mapping, mode, theme } = useContext(FingguContext);
+
+    const resolve = (className: string): string => {
+        if (mode === 'dev' || !mapping) return className;
+
+        const mapped = mapping[className];
+        if (mode === 'ext' && !mapped && className.startsWith('ff-')) {
+            const errorMsg = `[FingguFlux] Critical: Class '${className}' not found in mapping.json in Extreme mode. This will cause broken styles in production.`;
+            if (process.env.NODE_ENV === 'development') {
+                throw new Error(errorMsg);
+            } else {
+                console.error(errorMsg);
+            }
+        }
+        return mapped || className;
+    };
+
+    const resolveAll = (classes: (string | undefined | null | false)[]): string => {
+        return classes
+            .filter(Boolean)
+            .map(c => resolve(c as string))
+            .join(' ');
+    };
+
+    return { resolve, resolveAll, mode, theme };
+};

package/src/tabs.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { useFinggu } from './provider';
+
+interface TabsContextValue {
+    activeTab: string;
+    setActiveTab: (id: string) => void;
+}
+
+const TabsContext = React.createContext<TabsContextValue | null>(null);
+
+export interface TabsProps {
+    defaultValue: string;
+    children: React.ReactNode;
+}
+
+export const __ffClasses_Tabs = [
+    'ff-tabs',
+    'ff-tab-list',
+    'ff-tab',
+    'ff-tab-active',
+    'ff-tab-content'
+];
+
+export const Tabs: React.FC<TabsProps> = ({ defaultValue, children }) => {
+    const [activeTab, setActiveTab] = useState(defaultValue);
+    return (
+        <TabsContext.Provider value={{ activeTab, setActiveTab }}>
+            <div className="ff-tabs">{children}</div>
+        </TabsContext.Provider>
+    );
+};
+
+export const TabList: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <div className="ff-tab-list" role="tablist">{children}</div>
+);
+
+export const TabTrigger: React.FC<{ value: string; children: React.ReactNode }> = ({ value, children }) => {
+    const context = React.useContext(TabsContext);
+    const { resolveAll } = useFinggu();
+    if (!context) return null;
+
+    return (
+        <button
+            role="tab"
+            aria-selected={context.activeTab === value}
+            className={resolveAll(['ff-tab', context.activeTab === value && 'ff-tab-active'])}
+            onClick={() => context.setActiveTab(value)}
+        >
+            {children}
+        </button>
+    );
+};
+
+export const TabContent: React.FC<{ value: string; children: React.ReactNode }> = ({ value, children }) => {
+    const context = React.useContext(TabsContext);
+    if (!context || context.activeTab !== value) return null;
+    return <div className="ff-tab-content">{children}</div>;
+};