@neuctra/ui 0.2.4 → 0.2.6

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

@@ -1,13 +1,11 @@
-import { default as React } from 'react';
+import { default as 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/components/basic/Alert.d.ts

@@ -1,30 +1,17 @@
-import { default as React } from 'react';
+import { default as 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/components/basic/Avatar.d.ts

@@ -1,6 +1,7 @@
-import { default as React } from 'react';
+import { default as 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/components/basic/Badge.d.ts

@@ -1,25 +1,20 @@
-import { default as React, CSSProperties, ReactNode } from 'react';
+import { default as 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/components/basic/Button.d.ts

@@ -1,26 +1,16 @@
-import { default as React, CSSProperties, FC } from 'react';
-/** ⚙️ Props */
-export interface ButtonProps {
+import { default as 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/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/components/basic/Container.d.ts

@@ -1,32 +1,15 @@
 import { default as 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/components/basic/Drawer.d.ts

@@ -1,33 +1,22 @@
-import { default as React, CSSProperties, ReactNode } from 'react';
-export interface DrawerButtonProps {
+import { default as 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/components/basic/DropDown.d.ts

@@ -1,53 +1,33 @@
 import { default as 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/components/basic/FlexView.d.ts

@@ -0,0 +1,16 @@
+import { default as 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/components/basic/GridView.d.ts

@@ -1,17 +1,12 @@
 import { default as 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/components/basic/Image.d.ts

@@ -1,58 +1,37 @@
 import { default as 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 {};

package/dist/components/basic/Input.d.ts

@@ -1,46 +1,33 @@
-import { default as React, CSSProperties } from 'react';
-export interface InputProps {
-    type?: "text" | "password" | "email" | "number" | "search" | "tel" | "url" | "textarea";
+import { default as React } from 'react';
+export interface InputFieldProps {
     label?: string;
-    placeholder?: string;
     name?: string;
+    type?: "text" | "password" | "email" | "number" | "textarea";
+    placeholder?: string;
     value?: string;
     defaultValue?: string;
     onChange?: (name: string, value: string) => void;
+    required?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
-    required?: boolean;
-    error?: string;
+    error?: string | boolean;
     success?: boolean;
-    autoFocus?: boolean;
-    iconLeft?: React.ReactNode;
-    iconRight?: React.ReactNode;
-    /** 🎨 Full Customization Options */
-    labelColor?: string;
-    placeholderColor?: string;
-    backgroundColor?: string;
-    textColor?: string;
-    borderColor?: string;
-    hoverBorderColor?: string;
-    focusBorderColor?: string;
-    errorColor?: string;
-    successColor?: string;
-    iconColor?: string;
-    shadow?: string;
-    /** 🧩 Layout + Style Customization */
-    fontSize?: string;
-    fontFamily?: string;
-    radius?: string;
-    size?: "sm" | "md" | "lg";
+    helperText?: string;
+    /** Icons */
+    icon?: React.ElementType;
+    prefix?: string;
+    prefixIcon?: React.ElementType;
+    suffixIcon?: React.ReactNode;
+    /** Number props */
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Textarea */
     rows?: number;
-    cols?: number;
-    maxLength?: number;
-    resize?: boolean;
-    showCharacterCount?: boolean;
-    paddingX?: string;
-    paddingY?: string;
-    /** 🧱 External customization */
+    /** 🔥 Theme */
+    primaryTheme?: boolean;
+    primaryColor?: string;
+    /** Styling */
     className?: string;
-    style?: CSSProperties;
 }
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/components/basic/List.d.ts

@@ -1,4 +1,4 @@
-import { default as React, CSSProperties, ReactNode } from 'react';
+import { default as React, ReactNode } from 'react';
 export interface ListItemType {
     text: string;
     icon?: ReactNode;
@@ -10,25 +10,11 @@ export interface ListProps {
     titleIcon?: ReactNode;
     items: ListItemType[];
     type?: "unordered" | "ordered" | "inline";
-    bulletColor?: string;
-    textColor?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-    fontSize?: string;
-    fontWeight?: string | number;
-    borderRadius?: string;
-    padding?: string;
-    spacing?: string;
+    primaryTheme?: boolean;
+    primaryColor?: string;
     className?: string;
-    style?: CSSProperties;
+    itemClassName?: string;
+    titleClassName?: string;
+    bulletClassName?: string;
 }
-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>;

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

@@ -1,17 +1,17 @@
-import { default as React, ReactNode, CSSProperties } from 'react';
+import { default as React, ReactNode } from 'react';
 export interface ModalProps {
     isOpen: boolean;
     onClose: () => void;
     children: ReactNode;
-    ariaLabel?: string;
     title?: string;
-    overlayStyle?: CSSProperties;
-    modalStyle?: CSSProperties;
-    closeButtonStyle?: CSSProperties;
-    disableOverlayClose?: boolean;
-    transitionDuration?: number;
+    icon?: ReactNode;
+    ariaLabel?: string;
     className?: string;
-    /** Dark mode toggle */
+    overlayClassName?: string;
+    contentClassName?: string;
+    closeButtonClassName?: string;
+    disableOverlayClose?: boolean;
     darkMode?: boolean;
+    transitionDuration?: number;
 }
 export declare const Modal: React.FC<ModalProps>;

package/dist/components/basic/RadioGroup.d.ts

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

package/dist/components/basic/Stack.d.ts

@@ -3,25 +3,15 @@ type ScreenSize = "sm" | "md" | "lg";
 type ResponsiveValue<T> = T | Partial<Record<ScreenSize, T>>;
 interface StackProps {
     direction?: ResponsiveValue<"vertical" | "horizontal">;
-    gap?: ResponsiveValue<number | string>;
-    align?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "stretch" | "baseline">;
-    justify?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly">;
+    gap?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
+    align?: ResponsiveValue<"start" | "center" | "end" | "stretch" | "baseline">;
+    justify?: ResponsiveValue<"start" | "center" | "end" | "between" | "around" | "evenly">;
     wrap?: ResponsiveValue<"nowrap" | "wrap" | "wrap-reverse">;
-    padding?: ResponsiveValue<number | string>;
-    margin?: ResponsiveValue<number | string>;
-    width?: ResponsiveValue<string>;
-    maxWidth?: ResponsiveValue<string>;
-    height?: ResponsiveValue<string>;
-    backgroundColor?: ResponsiveValue<string>;
-    borderRadius?: ResponsiveValue<string>;
-    border?: ResponsiveValue<string>;
-    boxShadow?: ResponsiveValue<string>;
-    overflow?: ResponsiveValue<"visible" | "hidden" | "auto" | "scroll">;
-    style?: React.CSSProperties;
     className?: string;
     children: React.ReactNode;
 }
 export declare const Stack: React.FC<StackProps>;
+/** Shortcuts for horizontal & vertical stacks */
 export declare const HStack: React.FC<StackProps>;
 export declare const VStack: React.FC<StackProps>;
 export {};

package/dist/components/basic/SwitchGroup.d.ts

@@ -20,6 +20,7 @@ interface SwitchGroupProps {
     switchBgColor?: string;
     textColor?: string;
     errorStyle?: React.CSSProperties;
+    darkMode?: boolean;
 }
 export declare const SwitchGroup: React.FC<SwitchGroupProps>;
 export {};

package/dist/components/basic/Table.d.ts

@@ -17,7 +17,12 @@ interface TableCellProps {
 export declare const Table: React.FC<TableProps>;
 export declare const THead: React.FC<TableSectionProps>;
 export declare const TBody: React.FC<TableSectionProps>;
-export declare const TRow: React.FC<TableSectionProps>;
+interface TRowProps extends TableSectionProps {
+    onClick?: () => void;
+    hoverBgColor?: string;
+    darkMode?: boolean;
+}
+export declare const TRow: React.FC<TRowProps>;
 export declare const TH: React.FC<TableCellProps>;
 export declare const TD: React.FC<TableCellProps>;
 export {};