@neuctra/ui 0.2.2 → 0.2.4

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

@@ -1,16 +1,28 @@
 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;
 }

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 = string;
+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/basic/CheckRadioInput.d.ts → src/components/basic/CheckboxGroup.d.ts}

@@ -3,12 +3,11 @@ interface Option {
     label: string;
     value: string;
 }
-interface CheckRadioProps {
-    type: "checkbox" | "radio";
+interface CheckboxGroupProps {
     name?: string;
     options: Option[];
-    selectedValues?: string[] | string;
-    onChange?: (value: string | string[]) => void;
+    selectedValues?: string[];
+    onChange?: (values: string[]) => void;
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
@@ -23,5 +22,5 @@ interface CheckRadioProps {
     textColor?: string;
     errorStyle?: React.CSSProperties;
 }
-export declare const CheckRadio: React.FC<CheckRadioProps>;
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
 export {};

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/DropDown.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+export interface Option {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    description?: string;
+}
+export interface DropdownProps {
+    options: Option[];
+    value?: string;
+    values?: string[];
+    defaultValue?: string;
+    defaultValues?: string[];
+    onChange?: (value: string | string[]) => void;
+    placeholder?: string;
+    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;
+    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;
+}
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export default Dropdown;

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/{components → src/components}/basic/Modal.d.ts

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

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

@@ -0,0 +1,25 @@
+import React from "react";
+interface Option {
+    label: string;
+    value: string;
+}
+interface RadioGroupProps {
+    name?: string;
+    options: Option[];
+    selectedValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    error?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    iconSize?: number;
+    iconCheckedBgColor?: string;
+    iconUncheckedBorderColor?: string;
+    textColor?: string;
+    errorStyle?: React.CSSProperties;
+}
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+export {};

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

@@ -0,0 +1,36 @@
+import React from "react";
+type ScreenSize = "sm" | "md" | "lg";
+type ResponsiveProp<T> = T | Partial<Record<ScreenSize, T>>;
+interface SectionProps {
+    /** Headings */
+    title?: string;
+    subtitle?: string;
+    /** Responsive variant styles */
+    variant?: ResponsiveProp<"light" | "dark" | "gradient" | "transparent" | "primary">;
+    /** Custom backgrounds */
+    background?: ResponsiveProp<string>;
+    overlay?: ResponsiveProp<string>;
+    color?: ResponsiveProp<string>;
+    /** Spacing */
+    paddingY?: ResponsiveProp<number | string>;
+    paddingX?: ResponsiveProp<number | string>;
+    /** Container size */
+    size?: ResponsiveProp<"sm" | "md" | "lg" | "xl" | "2xl" | "full">;
+    /** Section height */
+    height?: ResponsiveProp<string>;
+    /** Text alignment */
+    align?: ResponsiveProp<"left" | "center" | "right">;
+    /** Border radius */
+    borderRadius?: ResponsiveProp<number | string>;
+    /** Optional styling */
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+/**
+ * 🧱 Section Component
+ * A flexible layout wrapper that supports responsive backgrounds,
+ * adaptive padding, and variant-based theming.
+ */
+export declare const Section: React.FC<SectionProps>;
+export default Section;

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

@@ -0,0 +1,27 @@
+import React from "react";
+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">;
+    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>;
+export declare const HStack: React.FC<StackProps>;
+export declare const VStack: React.FC<StackProps>;
+export {};

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

@@ -0,0 +1,25 @@
+import React from "react";
+interface Option {
+    label: string;
+    value: string;
+}
+interface SwitchGroupProps {
+    name?: string;
+    options: Option[];
+    selectedValues?: string[];
+    onChange?: (values: string[]) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    error?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    iconSize?: number;
+    iconCheckedBgColor?: string;
+    switchBgColor?: string;
+    textColor?: string;
+    errorStyle?: React.CSSProperties;
+}
+export declare const SwitchGroup: React.FC<SwitchGroupProps>;
+export {};

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

@@ -0,0 +1,23 @@
+import React, { ReactNode, CSSProperties } from "react";
+interface TableProps {
+    children: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+}
+interface TableSectionProps {
+    children: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+}
+interface TableCellProps {
+    children: ReactNode;
+    style?: CSSProperties;
+    className?: string;
+}
+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>;
+export declare const TH: React.FC<TableCellProps>;
+export declare const TD: React.FC<TableCellProps>;
+export {};