@neuctra/ui 0.2.5 → 0.2.6

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

@@ -1,51 +1,30 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
 /* ---------------------------- Table Container ---------------------------- */
-export const Table = ({ children, style, className }) => (_jsx("div", { style: {
-        overflowX: "auto",
+export const Table = ({ children, style, className }) => (_jsx("div", { className: clsx("overflow-x-auto rounded-lg shadow-sm border border-gray-200", className), style: {
         background: "#ffffff",
-        borderRadius: 12,
-        boxShadow: "0 2px 6px rgba(0,0,0,0.05)",
-        border: "1px solid #e5e7eb",
         ...style,
-    }, className: className, children: _jsx("table", { style: {
-            width: "100%",
-            borderCollapse: "collapse",
+    }, children: _jsx("table", { className: "w-full border-collapse", style: {
             borderSpacing: 0,
             borderRadius: 12,
             overflow: "hidden",
         }, children: children }) }));
 /* ---------------------------- Table Head ---------------------------- */
-export const THead = ({ children, style, className, }) => (_jsx("thead", { className: className, style: {
-        backgroundColor: "#f3f4f6",
-        color: "#111827",
-        fontWeight: 600,
+export const THead = ({ children, style, className, }) => (_jsx("thead", { className: clsx("bg-gray-100 text-gray-900 font-semibold", className), style: {
         ...style,
     }, children: children }));
 /* ---------------------------- Table Body ---------------------------- */
-export const TBody = ({ children, style, className, }) => (_jsx("tbody", { className: className, style: {
-        backgroundColor: "#ffffff",
-        ...style,
+export const TBody = ({ children, style, className }) => (_jsx("tbody", { className: clsx("bg-white", className), style: { ...style }, children: children }));
+export const TRow = ({ children, style, className, onClick, hoverBgColor = "#f9fafb", darkMode = false, }) => (_jsx("tr", { className: clsx("transition-colors duration-200 cursor-default", onClick ? "hover:cursor-pointer" : "", className), style: { borderBottom: "1px solid #e5e7eb", ...style }, onClick: onClick, onMouseEnter: (e) => {
+        if (!darkMode)
+            e.currentTarget.style.backgroundColor = hoverBgColor;
+        else
+            e.currentTarget.style.backgroundColor = "#1f2937";
+    }, onMouseLeave: (e) => {
+        e.currentTarget.style.backgroundColor = "transparent";
     }, children: children }));
-/* ---------------------------- Table Row ---------------------------- */
-export const TRow = ({ children, style, className, }) => (_jsx("tr", { className: className, style: {
-        borderBottom: "1px solid #e5e7eb",
-        transition: "background 0.2s ease",
-        cursor: "default",
-        ...style,
-    }, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = "#f9fafb"), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = "transparent"), children: children }));
 /* ---------------------------- Table Head Cell ---------------------------- */
-export const TH = ({ children, style, className }) => (_jsx("th", { className: className, style: {
-        textAlign: "left",
-        padding: "12px 16px",
-        fontSize: "0.875rem",
-        color: "#374151",
-        borderBottom: "2px solid #e5e7eb",
-        ...style,
-    }, children: children }));
+export const TH = ({ children, style, className }) => (_jsx("th", { className: clsx("text-left px-4 py-3 text-sm text-gray-700 border-b-2 border-gray-200", className), style: { ...style }, children: children }));
 /* ---------------------------- Table Data Cell ---------------------------- */
-export const TD = ({ children, style, className }) => (_jsx("td", { className: className, style: {
-        padding: "12px 16px",
-        fontSize: "0.875rem",
-        color: "#4b5563",
-        ...style,
-    }, children: children }));
+export const TD = ({ children, style, className }) => (_jsx("td", { className: clsx("px-4 py-3 text-sm text-gray-600", className), style: { ...style }, children: children }));

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

@@ -61,11 +61,8 @@ export const Tabs = ({ tabs, defaultActive = 0, position = "top", variant = "sol
         ...activeTabStyle,
     };
     const inactiveTab = {
-        ...(variant === "outline"
-            ? { borderColor }
-            : variant === "underline"
-                ? { borderBottomColor: "transparent" }
-                : {}),
+        ...(variant === "outline" ? { borderColor } : {}),
+        ...(variant === "underline" ? { borderBottomColor: "transparent" } : {}),
         ...inactiveTabStyle,
     };
     const hoverTab = {
@@ -91,7 +88,6 @@ export const Tabs = ({ tabs, defaultActive = 0, position = "top", variant = "sol
     };
     /** 🧱 Layout */
     const isVertical = position === "left" || position === "right";
-    const layoutDir = isVertical ? "row" : "column";
     return (_jsxs("div", { ref: containerRef, className: `modern-tabs ${className}`, style: {
             display: "flex",
             flexDirection: isVertical ? (position === "right" ? "row-reverse" : "row") : "column",
@@ -114,12 +110,7 @@ export const Tabs = ({ tabs, defaultActive = 0, position = "top", variant = "sol
                             justifyContent: "space-between",
                             width: "100%",
                             fontSize: 16,
-                        }, children: [showDrawerLabel, _jsx("span", { children: drawerIcon })] }), drawerOpen && (_jsx("div", { style: {
-                            display: "flex",
-                            flexDirection: "column",
-                            marginTop: 8,
-                            gap,
-                        }, children: tabs.map((tab, i) => {
+                        }, children: [showDrawerLabel, _jsx("span", { children: drawerIcon })] }), drawerOpen && (_jsx("div", { style: { display: "flex", flexDirection: "column", marginTop: 8, gap }, children: tabs.map((tab, i) => {
                             const isActive = i === active;
                             const isHovered = hovered === i;
                             const isDisabled = tab.disabled;

package/dist/src/index.js

@@ -3,11 +3,11 @@ import "./style.css"; // 🔹 Global styles import (keep this as the only CSS im
 // ✅ BASIC COMPONENT EXPORTS
 // ==============================
 // Alerts & Notifications
-export { Alert } from "./components/basic/Alert"; // ✅ Finalized
+export { ToastProvider, useToast } from "./components/basic/Alert"; // ✅ Modern ShadCN-style toast
 // Accordions
 export { Accordion } from "./components/basic/Accordation"; // ✅ Finalized
 // Avatars
-export { Avatar, AvatarGroup } from "./components/basic/Avatar"; // ✅ Finalized
+export { Avatar } from "./components/basic/Avatar"; // ✅ Finalized
 // Audio Components
 export { AudioPlayer } from "./components/basic/AudioPlayer"; // ✅ Finalized
 export { AudioGallery } from "./components/basic/AudioGallery"; // ✅ Finalized
@@ -15,15 +15,13 @@ export { AudioGallery } from "./components/basic/AudioGallery"; // ✅ Finalized
 export { Badge } from "./components/basic/Badge"; // ✅ Finalized
 // Buttons
 export { Button } from "./components/basic/Button"; // ✅ Finalized
-// Cards
-export { Card } from "./components/basic/Card"; // ✅ Finalized
 // ✅ Checkbox, Radio & Switch Components
 export { CheckboxGroup } from "./components/basic/CheckboxGroup";
 export { RadioGroup } from "./components/basic/RadioGroup";
 export { SwitchGroup } from "./components/basic/SwitchGroup";
 // Containers & Layout
 export { Container } from "./components/basic/Container"; // ✅ Finalized
-export { Flexbox } from "./components/basic/Flexbox"; // ✅ Finalized
+export { FlexView } from "./components/basic/FlexView"; // ✅ Finalized
 export { Stack, HStack, VStack } from "./components/basic/Stack"; // ✅ Finalized
 export { GridView } from "./components/basic/GridView"; // ✅ Finalized
 // Drawers

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

@@ -1,13 +1,11 @@
-import React from "react";
+import React, { ReactNode, CSSProperties } from "react";
 export interface AccordionItem {
-    title: string;
-    content: React.ReactNode;
+    title: string | ReactNode;
+    content: ReactNode;
 }
 export interface AccordionProps {
     items: AccordionItem[];
-    /** Allow multiple open items */
     allowMultiple?: boolean;
-    /** Default open indexes */
     defaultOpen?: number[];
     /** Appearance */
     borderColor?: string;
@@ -28,17 +26,15 @@ export interface AccordionProps {
     fontWeight?: string | number;
     contentFontSize?: string | number;
     contentFontWeight?: string | number;
-    /** Icon customization */
-    iconOpen?: React.ReactNode;
-    iconClose?: React.ReactNode;
+    /** Icon */
+    iconOpen?: ReactNode;
+    iconClose?: ReactNode;
     iconSize?: string | number;
-    /** Motion & style */
+    /** Motion */
     transitionDuration?: string;
     shadow?: string;
+    /** Class overrides */
     className?: string;
-    style?: React.CSSProperties;
+    style?: CSSProperties;
 }
-/**
- * 🧠 Industry-standard, minimal, and fully customizable Accordion
- */
 export declare const Accordion: React.FC<AccordionProps>;

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

@@ -1,30 +1,17 @@
-import React from "react";
+import React, { ReactNode } from "react";
 type AlertType = "success" | "error" | "warning" | "info";
-type AlertPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
-export interface AlertProps {
+interface Toast {
+    id: number;
     title?: string;
     description?: string;
     type?: AlertType;
-    dismissible?: boolean;
     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;
 }
-export declare const Alert: React.FC<AlertProps>;
+interface ToastContextProps {
+    addToast: (toast: Omit<Toast, "id">) => void;
+}
+export declare const useToast: () => ToastContextProps;
+export declare const ToastProvider: React.FC<{
+    children: ReactNode;
+}>;
 export {};

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

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "responsive";
 type AvatarVariant = "circular" | "rounded" | "square";
+type StatusPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
 interface AvatarProps {
     src?: string;
     alt?: string;
@@ -8,25 +9,15 @@ interface AvatarProps {
     variant?: AvatarVariant;
     isOnline?: boolean;
     isOffline?: boolean;
-    className?: string;
-    style?: React.CSSProperties;
-    statusClassName?: string;
-    statusStyle?: React.CSSProperties;
-    statusPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
-    fallback?: string;
     ring?: boolean;
     ringColor?: string;
+    fallback?: string;
     onClick?: () => void;
-}
-interface AvatarGroupProps {
-    avatars: AvatarProps[];
-    max?: number;
-    size?: AvatarSize;
+    statusPosition?: StatusPosition;
     className?: string;
-    style?: React.CSSProperties;
-    spacing?: "tight" | "normal" | "loose";
-    direction?: "left" | "right";
+    statusClassName?: string;
+    style?: CSSProperties;
+    statusStyle?: CSSProperties;
 }
 export declare const Avatar: React.FC<AvatarProps>;
-export declare const AvatarGroup: React.FC<AvatarGroupProps>;
 export {};

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

@@ -1,25 +1,20 @@
-import React, { CSSProperties, ReactNode } from "react";
+import React from "react";
 export interface BadgeProps {
     text?: string;
-    color?: string;
-    textColor?: string;
-    borderColor?: string;
-    borderWidth?: string;
-    icon?: ReactNode;
+    icon?: React.ReactNode;
     iconPosition?: "left" | "right";
+    /** 🎨 Theme */
+    primaryTheme?: boolean;
+    primaryColor?: string;
+    /** 📏 Sizes */
+    size?: "sm" | "md" | "lg";
+    /** Shape */
     rounded?: boolean;
-    borderRadius?: string;
-    fontSize?: string;
-    fontWeight?: number | string;
-    horizontalPadding?: string;
-    verticalPadding?: string;
-    margin?: string;
-    shadow?: string;
+    /** Notification */
     notificationDot?: boolean;
     dotColor?: string;
     count?: number | string;
     pulse?: boolean;
-    style?: CSSProperties;
     className?: string;
     onClick?: () => void;
 }

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

@@ -1,26 +1,16 @@
-import React, { CSSProperties, FC } from "react";
-/** ⚙️ Props */
-export interface ButtonProps {
+import React from "react";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     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 */
+    fullWidth?: boolean;
+    /** 🎨 Theme */
+    primaryTheme?: boolean;
+    primaryColor?: string;
+    /** 📏 Sizes */
     size?: "sm" | "md" | "lg";
-    rounded?: boolean;
-    /** 🧱 Border visibility */
-    showBorder?: boolean;
+    className?: string;
 }
-/** 💎 Minimal customizable Button */
-export declare const Button: FC<ButtonProps>;
-export default Button;
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -21,6 +21,7 @@ interface CheckboxGroupProps {
     iconUncheckedBorderColor?: string;
     textColor?: string;
     errorStyle?: React.CSSProperties;
+    darkMode?: boolean;
 }
 export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
 export {};

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

@@ -1,32 +1,15 @@
 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`) */
+    padding?: "none" | "sm" | "md" | "lg" | "xl";
     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.
+ * Fully responsive, Tailwind-first layout wrapper
  */
 export declare const Container: React.FC<ContainerProps>;
 export default Container;

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

@@ -1,33 +1,22 @@
-import React, { CSSProperties, ReactNode } from "react";
-export interface DrawerButtonProps {
+import React, { ReactNode } from "react";
+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 {
+interface DrawerProps {
     open: boolean;
     onClose?: () => void;
     position?: "left" | "right" | "top" | "bottom";
-    width?: string;
-    height?: string;
-    backgroundColor?: string;
-    backdropColor?: string;
-    transitionDuration?: number;
-    style?: CSSProperties;
+    size?: string;
     className?: string;
+    overlayClassName?: string;
     children?: ReactNode;
     showCloseButton?: boolean;
-    closeIconColor?: string;
-    closeButtonStyle?: CSSProperties;
+    closeButtonClassName?: string;
 }
 export declare const Drawer: React.FC<DrawerProps>;
+export {};

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

@@ -1,53 +1,33 @@
 import React from "react";
-export interface Option {
+export interface SelectOption {
     label: string;
     value: string;
     icon?: React.ReactNode;
-    disabled?: boolean;
-    description?: string;
 }
 export interface DropdownProps {
-    options: Option[];
+    label?: string;
+    name?: string;
     value?: string;
-    values?: string[];
     defaultValue?: string;
-    defaultValues?: string[];
-    onChange?: (value: string | string[]) => void;
+    onChange?: (name: string, value: string) => void;
+    options?: SelectOption[];
     placeholder?: string;
+    required?: boolean;
     disabled?: boolean;
-    searchable?: boolean;
-    multiSelect?: boolean;
-    clearable?: boolean;
-    virtualized?: boolean;
-    width?: string | number;
-    dropdownMaxHeight?: string;
-    borderRadius?: string;
-    boxShadow?: string;
-    borderColor?: string;
-    accentColor?: string;
-    theme?: "light" | "dark" | "custom";
-    menuBg?: string;
-    controlBg?: string;
-    textColor?: string;
-    hoverBg?: string;
-    selectedBg?: string;
-    disabledBg?: string;
-    disabledTextColor?: string;
-    placeholderColor?: string;
-    transitionDuration?: string;
-    className?: string;
-    controlClassName?: string;
-    menuClassName?: string;
+    error?: string | boolean;
+    success?: boolean;
+    helperText?: string;
+    labelIcon?: React.ElementType;
+    prefixIcon?: React.ElementType;
+    variant?: "dark" | "light";
+    /** 🔥 THEME SYSTEM */
+    primaryTheme?: boolean;
+    primaryColor?: string;
+    containerClassName?: string;
+    labelClassName?: string;
+    triggerClassName?: string;
+    dropdownClassName?: string;
     optionClassName?: string;
-    style?: React.CSSProperties;
-    controlStyle?: React.CSSProperties;
-    menuStyle?: React.CSSProperties;
-    optionStyle?: React.CSSProperties;
-    iconPrefix?: React.ReactNode;
-    iconSuffix?: React.ReactNode;
-    clearIcon?: React.ReactNode;
-    dropdownIcon?: React.ReactNode;
-    checkIcon?: React.ReactNode;
+    className?: string;
 }
 export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
-export default Dropdown;

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

@@ -0,0 +1,16 @@
+import React from "react";
+type ScreenSize = "sm" | "md" | "lg";
+type ResponsiveValue<T> = T | Partial<Record<ScreenSize, T>>;
+interface FlexViewProps {
+    direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
+    align?: ResponsiveValue<"start" | "end" | "center" | "stretch" | "baseline">;
+    justify?: ResponsiveValue<"start" | "end" | "center" | "between" | "around" | "evenly">;
+    wrap?: ResponsiveValue<"nowrap" | "wrap" | "wrap-reverse">;
+    gap?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
+    padding?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
+    margin?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const FlexView: React.FC<FlexViewProps>;
+export {};

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

@@ -1,17 +1,12 @@
 import React from "react";
 type ScreenSize = "sm" | "md" | "lg";
+type ResponsiveValue<T> = T | Partial<Record<ScreenSize, T>>;
 export interface GridProps {
-    columns?: number | Partial<Record<ScreenSize, number>>;
-    gap?: number | string;
-    padding?: number | string;
+    columns?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6>;
+    gap?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
+    padding?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
     alignItems?: "start" | "center" | "end" | "stretch";
     justifyItems?: "start" | "center" | "end" | "stretch";
-    backgroundColor?: string;
-    width?: string;
-    maxWidth?: string;
-    height?: string;
-    margin?: number | string;
-    style?: React.CSSProperties;
     className?: string;
     children: React.ReactNode;
 }

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

@@ -1,58 +1,37 @@
 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 */
+    /** Tailwind width/height classes or numbers */
     width?: string | number;
     height?: string | number;
-    /** Border customization */
-    borderRadius?: string | number;
+    /** Tailwind rounded classes */
+    rounded?: string;
     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;
+    p?: string;
+    m?: string;
+    /** Hover Effects */
     hoverScale?: number;
     hoverRotate?: number;
+    hoverOpacity?: number;
+    hoverShadow?: boolean;
     transitionDuration?: string;
-    /** Overflow handling */
     overflow?: "hidden" | "scroll" | "auto" | "visible" | "x" | "y";
-    /** Class and style overrides */
+    /** Custom Tailwind classes */
     className?: string;
     style?: React.CSSProperties;
-    /** Event handlers */
-    onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLImageElement>) => void;
+    onClick?: (e: 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 {};