@neuctra/ui 0.2.2 → 0.2.3

package/dist/src/components/basic/Text.js

@@ -0,0 +1,117 @@
+import React, { useMemo } from "react";
+/** 🎨 Utility: generate lighter/darker shades */
+function adjustColor(color, amount) {
+    return ("#" +
+        color
+            .replace(/^#/, "")
+            .replace(/../g, (hex) => ("0" +
+            Math.min(255, Math.max(0, parseInt(hex, 16) + amount)).toString(16)).slice(-2)));
+}
+/** 🌈 Default color palettes */
+const defaultColors = {
+    light: {
+        default: "#111",
+        primary: "#2563eb",
+        secondary: "#64748b",
+        success: "#16a34a",
+        danger: "#dc2626",
+        white: "#ffffff",
+        muted: "#6b7280",
+    },
+    dark: {
+        default: "#f8fafc",
+        primary: "#60a5fa",
+        secondary: "#94a3b8",
+        success: "#22c55e",
+        danger: "#f87171",
+        white: "#ffffff",
+        muted: "#9ca3af",
+    },
+};
+/** 💬 Main Component (HTML-only tags) */
+export function Text({ as, children, color = "default", size = "md", weight = "normal", align = "left", transform = "none", italic = false, underline = false, strikethrough = false, truncate = false, selectable = true, hoverable = false, onClick, darkMode = false, baseColor, className = "", style = {}, ...rest }) {
+    // element type as provided (constrained to HTML tags)
+    const Element = (as || "p");
+    /** 🎨 Dynamic color palette generation */
+    const theme = useMemo(() => {
+        if (!baseColor)
+            return defaultColors[darkMode ? "dark" : "light"];
+        const lightMode = {
+            default: "#111",
+            primary: baseColor,
+            secondary: adjustColor(baseColor, -50),
+            success: adjustColor(baseColor, -30),
+            danger: "#dc2626",
+            white: "#ffffff",
+            muted: "#6b7280",
+        };
+        const darkModeTheme = {
+            default: "#f8fafc",
+            primary: adjustColor(baseColor, 80),
+            secondary: adjustColor(baseColor, 120),
+            success: adjustColor(baseColor, 100),
+            danger: "#f87171",
+            white: "#ffffff",
+            muted: "#9ca3af",
+        };
+        return darkMode ? darkModeTheme : lightMode;
+    }, [baseColor, darkMode]);
+    /** 📏 Font sizes */
+    const sizes = {
+        xs: "0.75rem",
+        sm: "0.875rem",
+        md: "1rem",
+        lg: "1.25rem",
+        xl: "1.5rem",
+        "2xl": "2rem",
+    };
+    /** 💅 Computed styles */
+    const computedStyle = {
+        color: theme[color] || color,
+        fontSize: sizes[size] || size,
+        fontWeight: weight,
+        textAlign: align,
+        textTransform: transform,
+        fontStyle: italic ? "italic" : "normal",
+        textDecoration: underline ? "underline" : strikethrough ? "line-through" : "none",
+        userSelect: selectable ? "text" : "none",
+        overflow: truncate ? "hidden" : undefined,
+        whiteSpace: truncate ? "nowrap" : undefined,
+        textOverflow: truncate ? "ellipsis" : undefined,
+        cursor: onClick ? "pointer" : "default",
+        transition: "all 0.25s ease-in-out",
+        ...style,
+    };
+    /** 🧠 Hover events (narrow to HTMLElement at runtime) */
+    const handleMouseEnter = (e) => {
+        if (!hoverable)
+            return;
+        const target = e.currentTarget;
+        if (target instanceof HTMLElement) {
+            target.style.opacity = "0.8";
+        }
+    };
+    const handleMouseLeave = (e) => {
+        if (!hoverable)
+            return;
+        const target = e.currentTarget;
+        if (target instanceof HTMLElement) {
+            target.style.opacity = "1";
+        }
+    };
+    /**
+     * Build props object. We cast only once to the correct intrinsic props type.
+     * This prevents TypeScript from having to compute giant unions for event types.
+     */
+    const props = {
+        className,
+        style: computedStyle,
+        onClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...rest,
+    };
+    // Use React.createElement to avoid JSX generic complexity
+    return React.createElement(Element, props, children);
+}
+export default Text;

package/dist/src/index.js

@@ -0,0 +1,44 @@
+import "./style.css"; // 🔹 Global styles import (keep this as the only CSS import)
+// ==============================
+// ✅ BASIC COMPONENT EXPORTS
+// ==============================
+// Alerts & Notifications
+export { Alert } from "./components/basic/Alert"; // ✅ Finalized
+// Accordions
+export { Accordion } from "./components/basic/Accordation"; // ✅ Finalized
+// Avatars
+export { Avatar, AvatarGroup } from "./components/basic/Avatar"; // ✅ Finalized
+// Audio Components
+export { AudioPlayer } from "./components/basic/AudioPlayer"; // ✅ Finalized
+export { AudioGallery } from "./components/basic/AudioGallery"; // ✅ Finalized
+// Badges
+export { Badge } from "./components/basic/Badge"; // ✅ Finalized
+// Buttons
+export { Button } from "./components/basic/Button"; // ✅ Finalized
+// Cards
+export { Card } from "./components/basic/Card"; // ✅ Finalized
+// Checkboxes & Radios
+export { CheckRadio } from "./components/basic/CheckRadioInput"; // ✅ Finalized
+// Containers & Layout
+export { Container } from "./components/basic/Container"; // ✅ Finalized
+export { Flexbox } from "./components/basic/Flexbox"; // ✅ Finalized
+export { Stack, HStack, VStack } from "./components/basic/Stack"; // ✅ Finalized
+export { GridView } from "./components/basic/GridView"; // ✅ Finalized
+// Drawers
+export { Drawer, DrawerButton } from "./components/basic/Drawer"; // ✅ Finalized
+// Dropdowns
+export { Dropdown } from "./components/basic/DropDown"; // ✅ Finalized
+// Forms & Inputs
+export { Input } from "./components/basic/Input"; // ✅ Finalized
+// Images
+export { Image } from "./components/basic/Image"; // ✅ Finalized
+// Lists
+export { List } from "./components/basic/List"; // ✅ Finalized
+// Modals
+export { Modal } from "./components/basic/Modal"; // ✅ Finalized
+// Tables
+export { Table, TBody, TD, THead, TH, TRow } from "./components/basic/Table"; // ✅ Finalized
+// Tabs
+export { Tabs } from "./components/basic/Tabs"; // ✅ Finalized
+// Text
+export { Text } from "./components/basic/Text"; // ✅ Finalized

package/dist/types/src/components/basic/Accordation.d.ts

@@ -0,0 +1,44 @@
+import React from "react";
+export interface AccordionItem {
+    title: string;
+    content: React.ReactNode;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    /** Allow multiple open items */
+    allowMultiple?: boolean;
+    /** Default open indexes */
+    defaultOpen?: number[];
+    /** Appearance */
+    borderColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    hoverBgColor?: string;
+    hoverTextColor?: string;
+    contentBgColor?: string;
+    contentTextColor?: string;
+    /** Layout & spacing */
+    paddingY?: string | number;
+    paddingX?: string | number;
+    marginY?: string | number;
+    borderRadius?: string | number;
+    contentPadding?: string | number;
+    /** Typography */
+    fontSize?: string | number;
+    fontWeight?: string | number;
+    contentFontSize?: string | number;
+    contentFontWeight?: string | number;
+    /** Icon customization */
+    iconOpen?: React.ReactNode;
+    iconClose?: React.ReactNode;
+    iconSize?: string | number;
+    /** Motion & style */
+    transitionDuration?: string;
+    shadow?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 🧠 Industry-standard, minimal, and fully customizable Accordion
+ */
+export declare const Accordion: React.FC<AccordionProps>;

package/dist/types/{components → src/components}/basic/Alert.d.ts

@@ -1,18 +1,31 @@
 import React from "react";
 type AlertType = "success" | "error" | "warning" | "info";
 type AlertPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
-interface AlertProps {
+export interface AlertProps {
     title?: string;
     description?: string;
     type?: AlertType;
     dismissible?: boolean;
-    onClose?: () => void;
     duration?: number;
+    onClose?: () => void;
+    /** Customization */
     icon?: React.ReactNode;
     actionButton?: React.ReactNode;
     position?: AlertPosition;
+    backgroundColor?: string;
+    borderColor?: string;
+    textColor?: string;
+    borderRadius?: string | number;
+    shadow?: string;
+    padding?: string | number;
+    fontSize?: string | number;
+    fontWeight?: number | string;
+    descriptionColor?: string;
+    animationDuration?: string;
+    maxWidth?: string;
     className?: string;
     style?: React.CSSProperties;
 }
+/** 🎯 Production-grade Alert Component */
 export declare const Alert: React.FC<AlertProps>;
 export {};

package/dist/types/{components → src/components}/basic/Avatar.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "responsive";
+type AvatarVariant = "circular" | "rounded" | "square";
 interface AvatarProps {
     src?: string;
     alt?: string;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-    variant?: "circular" | "rounded" | "square";
+    size?: AvatarSize;
+    variant?: AvatarVariant;
     isOnline?: boolean;
     isOffline?: boolean;
     className?: string;
@@ -19,7 +21,7 @@ interface AvatarProps {
 interface AvatarGroupProps {
     avatars: AvatarProps[];
     max?: number;
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    size?: AvatarSize;
     className?: string;
     style?: React.CSSProperties;
     spacing?: "tight" | "normal" | "loose";

package/dist/types/{components → src/components}/basic/Badge.d.ts

@@ -1,14 +1,14 @@
 import React, { CSSProperties, ReactNode } from "react";
-interface BadgeProps {
+export interface BadgeProps {
     text?: string;
     color?: string;
     textColor?: string;
     borderColor?: string;
+    borderWidth?: string;
     icon?: ReactNode;
     iconPosition?: "left" | "right";
     rounded?: boolean;
     borderRadius?: string;
-    borderWidth?: string;
     fontSize?: string;
     fontWeight?: number | string;
     horizontalPadding?: string;
@@ -20,7 +20,7 @@ interface BadgeProps {
     count?: number | string;
     pulse?: boolean;
     style?: CSSProperties;
+    className?: string;
     onClick?: () => void;
 }
 export declare const Badge: React.FC<BadgeProps>;
-export {};

package/dist/types/src/components/basic/Button.d.ts

@@ -0,0 +1,26 @@
+import React, { CSSProperties, FC } from "react";
+/** ⚙️ Props */
+export interface ButtonProps {
+    children: React.ReactNode;
+    type?: "button" | "submit" | "reset";
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    iconBefore?: React.ReactNode;
+    iconAfter?: React.ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    /** 🎨 Theme options */
+    darkMode?: boolean;
+    baseColor?: string;
+    /** 🧩 Optional design tweaks */
+    size?: "sm" | "md" | "lg";
+    rounded?: boolean;
+    /** 🧱 Border visibility */
+    showBorder?: boolean;
+}
+/** 💎 Minimal customizable Button */
+export declare const Button: FC<ButtonProps>;
+export default Button;

package/dist/types/src/components/basic/Card.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties, ReactNode, ElementType, ForwardedRef, ReactElement, ComponentPropsWithoutRef } from "react";
+type CardVariant = "elevated" | "outline" | "flat";
+type CardOwnProps = {
+    as?: ElementType;
+    children?: ReactNode;
+    className?: string;
+    variant?: CardVariant;
+    background?: string;
+    textColor?: string;
+    borderRadius?: string | number;
+    border?: string;
+    boxShadow?: string;
+    hoverShadow?: string;
+    padding?: string | number;
+    margin?: string | number;
+    width?: string | number;
+    height?: string | number;
+    style?: CSSProperties;
+    hoverStyle?: CSSProperties;
+    onClick?: () => void;
+};
+type CardProps<T extends ElementType = "div"> = CardOwnProps & Omit<ComponentPropsWithoutRef<T>, keyof CardOwnProps>;
+declare const Card: (<T extends ElementType = "div">(props: CardProps<T> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReactElement) & {
+    displayName: string;
+};
+export { Card };

package/dist/types/{components → src/components}/basic/CheckRadioInput.d.ts

@@ -3,8 +3,9 @@ interface Option {
     label: string;
     value: string;
 }
+type CheckRadioType = "checkbox" | "radio" | "switch";
 interface CheckRadioProps {
-    type: "checkbox" | "radio";
+    type?: CheckRadioType;
     name?: string;
     options: Option[];
     selectedValues?: string[] | string;
@@ -20,6 +21,7 @@ interface CheckRadioProps {
     iconSize?: number;
     iconCheckedBgColor?: string;
     iconUncheckedBorderColor?: string;
+    switchBgColor?: string;
     textColor?: string;
     errorStyle?: React.CSSProperties;
 }

package/dist/types/src/components/basic/Container.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+type ContainerSize = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export interface ContainerProps {
+    /** Predefined max-width based on common breakpoints */
+    size?: ContainerSize;
+    /** Padding (accepts number in px or CSS string, e.g., '2rem') */
+    padding?: number | string;
+    /** Margin (accepts number in px or CSS string, e.g., 'auto' or '16px 8px') */
+    margin?: number | string;
+    /** Background color (any valid CSS color) */
+    backgroundColor?: string;
+    /** Center the container horizontally (adds `margin: 0 auto`) */
+    center?: boolean;
+    /** Custom width override (defaults to container max width) */
+    width?: string;
+    /** Optional height */
+    height?: string;
+    /** Border radius (accepts number in px or CSS string) */
+    borderRadius?: number | string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+    /** Tailwind or custom class names */
+    className?: string;
+    /** Container content */
+    children: React.ReactNode;
+}
+/**
+ * 🧱 Container Component
+ * A flexible, responsive layout wrapper inspired by Tailwind's container.
+ */
+export declare const Container: React.FC<ContainerProps>;
+export default Container;

package/dist/types/src/components/basic/Drawer.d.ts

@@ -0,0 +1,33 @@
+import React, { CSSProperties, ReactNode } from "react";
+export interface DrawerButtonProps {
+    label?: string;
+    icon?: ReactNode;
+    iconPosition?: "left" | "right";
+    onClick?: () => void;
+    color?: string;
+    textColor?: string;
+    borderRadius?: string;
+    padding?: string;
+    fontSize?: string;
+    gap?: string;
+    style?: CSSProperties;
+    className?: string;
+}
+export declare const DrawerButton: React.FC<DrawerButtonProps>;
+export interface DrawerProps {
+    open: boolean;
+    onClose?: () => void;
+    position?: "left" | "right" | "top" | "bottom";
+    width?: string;
+    height?: string;
+    backgroundColor?: string;
+    backdropColor?: string;
+    transitionDuration?: number;
+    style?: CSSProperties;
+    className?: string;
+    children?: ReactNode;
+    showCloseButton?: boolean;
+    closeIconColor?: string;
+    closeButtonStyle?: CSSProperties;
+}
+export declare const Drawer: React.FC<DrawerProps>;

package/dist/types/src/components/basic/Flexbox.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+type ScreenSize = "sm" | "md" | "lg";
+type ResponsiveValue<T> = T | Partial<Record<ScreenSize, T>>;
+interface FlexboxProps {
+    direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
+    align?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "stretch" | "baseline">;
+    justify?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly">;
+    wrap?: ResponsiveValue<"nowrap" | "wrap" | "wrap-reverse">;
+    gap?: ResponsiveValue<number | string>;
+    padding?: ResponsiveValue<number | string>;
+    margin?: ResponsiveValue<number | string>;
+    backgroundColor?: ResponsiveValue<string>;
+    width?: ResponsiveValue<string>;
+    maxWidth?: ResponsiveValue<string>;
+    height?: ResponsiveValue<string>;
+    borderRadius?: ResponsiveValue<string>;
+    border?: ResponsiveValue<string>;
+    boxShadow?: ResponsiveValue<string>;
+    overflow?: ResponsiveValue<"visible" | "hidden" | "auto" | "scroll">;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const Flexbox: React.FC<FlexboxProps>;
+export {};

package/dist/types/{components → src/components}/basic/GridView.d.ts

@@ -1,17 +1,19 @@
 import React from "react";
 type ScreenSize = "sm" | "md" | "lg";
-interface GridViewProps {
+export interface GridProps {
     columns?: number | Partial<Record<ScreenSize, number>>;
-    gap?: string;
-    padding?: string;
+    gap?: number | string;
+    padding?: number | string;
     alignItems?: "start" | "center" | "end" | "stretch";
     justifyItems?: "start" | "center" | "end" | "stretch";
     backgroundColor?: string;
     width?: string;
     maxWidth?: string;
     height?: string;
-    children: React.ReactNode;
+    margin?: number | string;
     style?: React.CSSProperties;
+    className?: string;
+    children: React.ReactNode;
 }
-export declare const GridView: React.FC<GridViewProps>;
+export declare const GridView: React.FC<GridProps>;
 export {};

package/dist/types/src/components/basic/Image.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+interface ImageProps {
+    /** Image source URL */
+    src?: string;
+    /** Alternative text (for SEO + accessibility) */
+    alt?: string;
+    /** Optional title attribute (SEO hint tooltip) */
+    title?: string;
+    /** Custom width and height */
+    width?: string | number;
+    height?: string | number;
+    /** Border customization */
+    borderRadius?: string | number;
+    borderColor?: string;
+    borderStyle?: "solid" | "dashed" | "dotted" | "double" | "none";
+    borderWidth?: string | number;
+    /** Shadow customization */
+    shadow?: boolean;
+    boxShadow?: string;
+    /** Opacity and fit options */
+    opacity?: number;
+    objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    /** Overlay and icon layers */
+    overlayText?: string;
+    overlayColor?: string;
+    svgIcon?: React.ReactNode;
+    /** Layout and responsiveness */
+    responsive?: boolean;
+    padding?: string | number;
+    margin?: string | number;
+    /** Performance */
+    lazyLoad?: boolean;
+    /** Hover interactivity */
+    hoverOpacity?: number;
+    hoverShadow?: boolean;
+    hoverScale?: number;
+    hoverRotate?: number;
+    transitionDuration?: string;
+    /** Overflow handling */
+    overflow?: "hidden" | "scroll" | "auto" | "visible" | "x" | "y";
+    /** Class and style overrides */
+    className?: string;
+    style?: React.CSSProperties;
+    /** Event handlers */
+    onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLImageElement>) => void;
+    onLoad?: () => void;
+    onError?: () => void;
+}
+/**
+ * ✅ Industry-Standard Image Component
+ * - SEO & accessibility optimized
+ * - Lazy loading & responsive
+ * - Fully customizable styling
+ * - Smooth hover transitions
+ * - Overlay and SVG support
+ */
+export declare const Image: React.FC<ImageProps>;
+export {};

package/dist/types/{components → src/components}/basic/Input.d.ts

@@ -1,8 +1,8 @@
 import React, { CSSProperties } from "react";
-interface InputProps {
+export interface InputProps {
     type?: "text" | "password" | "email" | "number" | "search" | "tel" | "url" | "textarea";
-    placeholder?: string;
     label?: string;
+    placeholder?: string;
     name?: string;
     value?: string;
     defaultValue?: string;
@@ -15,24 +15,32 @@ interface InputProps {
     autoFocus?: boolean;
     iconLeft?: React.ReactNode;
     iconRight?: React.ReactNode;
-    borderColor?: string;
-    focusBorderColor?: string;
-    hoverBorderColor?: string;
+    /** 🎨 Full Customization Options */
+    labelColor?: string;
+    placeholderColor?: string;
     backgroundColor?: string;
     textColor?: string;
+    borderColor?: string;
+    hoverBorderColor?: string;
+    focusBorderColor?: string;
     errorColor?: string;
     successColor?: string;
-    labelColor?: string;
-    size?: "sm" | "md" | "lg";
-    radius?: string;
+    iconColor?: string;
+    shadow?: string;
+    /** 🧩 Layout + Style Customization */
     fontSize?: string;
+    fontFamily?: string;
+    radius?: string;
+    size?: "sm" | "md" | "lg";
     rows?: number;
     cols?: number;
     maxLength?: number;
     resize?: boolean;
     showCharacterCount?: boolean;
+    paddingX?: string;
+    paddingY?: string;
+    /** 🧱 External customization */
     className?: string;
     style?: CSSProperties;
 }
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
-export {};
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;

package/dist/types/{components → src/components}/basic/List.d.ts

@@ -1,11 +1,11 @@
 import React, { CSSProperties, ReactNode } from "react";
-interface ListItemType {
+export interface ListItemType {
     text: string;
     icon?: ReactNode;
     onClick?: () => void;
     subItems?: ListItemType[];
 }
-interface ListProps {
+export interface ListProps {
     title?: string;
     titleIcon?: ReactNode;
     items: ListItemType[];
@@ -22,5 +22,13 @@ interface ListProps {
     className?: string;
     style?: CSSProperties;
 }
+export interface ListItemProps extends ListItemType {
+    bulletColor?: string;
+    textColor?: string;
+    fontSize?: string;
+    fontWeight?: string | number;
+    spacing?: string;
+    isInline?: boolean;
+}
+export declare const ListItem: React.FC<ListItemProps>;
 export declare const List: React.FC<ListProps>;
-export {};

package/dist/types/src/components/basic/Modal.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode, CSSProperties } from "react";
+export interface ModalProps {
+    /** Controls whether the modal is visible */
+    isOpen: boolean;
+    /** Callback fired when modal requests to close */
+    onClose: () => void;
+    /** Modal content */
+    children: ReactNode;
+    /** Optional ARIA label for accessibility */
+    ariaLabel?: string;
+    /** Optional title for screen readers */
+    title?: string;
+    /** Custom styles */
+    overlayStyle?: CSSProperties;
+    modalStyle?: CSSProperties;
+    closeButtonStyle?: CSSProperties;
+    /** Enable/disable overlay click to close */
+    disableOverlayClose?: boolean;
+    /** Animation duration (ms) */
+    transitionDuration?: number;
+    /** Optional classNames for CSS frameworks like Tailwind */
+    className?: string;
+}
+export declare const Modal: React.FC<ModalProps>;