@neuctra/ui 0.2.2 → 0.2.4

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

@@ -1,35 +1,44 @@
 import { default as React } from 'react';
-interface AccordationItem {
+export interface AccordionItem {
     title: string;
     content: React.ReactNode;
 }
-interface AccordationProps {
-    items: AccordationItem[];
+export interface AccordionProps {
+    items: AccordionItem[];
+    /** Allow multiple open items */
     allowMultiple?: boolean;
-    defaultOpenIndex?: number[];
+    /** Default open indexes */
+    defaultOpen?: number[];
+    /** Appearance */
     borderColor?: string;
     backgroundColor?: string;
     textColor?: string;
     hoverBgColor?: string;
     hoverTextColor?: string;
-    paddingVertical?: string;
-    paddingHorizontal?: string;
-    margin?: 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;
-    borderRadius?: string;
     shadow?: string;
-    contentPadding?: string;
-    fontSize?: string;
-    fontWeight?: string;
-    iconSize?: string;
-    contentFontSize?: string;
-    contentFontWeight?: string;
-    contentBackgroundColor?: string;
-    contentTextColor?: string;
     className?: string;
     style?: React.CSSProperties;
 }
-export declare const Accordation: React.FC<AccordationProps>;
-export {};
+/**
+ * 🧠 Industry-standard, minimal, and fully customizable Accordion
+ */
+export declare const Accordion: React.FC<AccordionProps>;

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

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

@@ -1,9 +1,11 @@
 import { default as 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/components/basic/Badge.d.ts

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

@@ -1,8 +1,9 @@
-import { default as React, CSSProperties } from 'react';
-interface ButtonProps {
+import { default as React, CSSProperties, FC } from 'react';
+/** ⚙️ Props */
+export interface ButtonProps {
     children: React.ReactNode;
     type?: "button" | "submit" | "reset";
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     iconBefore?: React.ReactNode;
     iconAfter?: React.ReactNode;
     className?: string;
@@ -11,18 +12,15 @@ interface ButtonProps {
     disabled?: boolean;
     loading?: boolean;
     loadingText?: string;
-    paddingHorizontal?: number;
-    paddingVertical?: number;
-    fontSize?: string;
-    fontWeight?: string | number;
-    borderRadius?: number;
-    backgroundColor?: string;
-    textColor?: string;
-    borderColor?: string;
-    hoverBgColor?: string;
-    hoverTextColor?: string;
-    hoverBorderColor?: string;
-    boxShadow?: string;
+    /** 🎨 Theme options */
+    darkMode?: boolean;
+    baseColor?: string;
+    /** 🧩 Optional design tweaks */
+    size?: "sm" | "md" | "lg";
+    rounded?: boolean;
+    /** 🧱 Border visibility */
+    showBorder?: boolean;
 }
-export declare const Button: React.FC<ButtonProps>;
-export {};
+/** 💎 Minimal customizable Button */
+export declare const Button: FC<ButtonProps>;
+export default Button;

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

@@ -1,65 +1,23 @@
-import { CSSProperties, ReactNode, ElementType, ComponentPropsWithoutRef, ForwardedRef, ReactElement } from 'react';
+import { CSSProperties, ReactNode, ElementType, ForwardedRef, ReactElement, ComponentPropsWithoutRef } from 'react';
+type CardVariant = string;
 type CardOwnProps = {
+    as?: ElementType;
     children?: ReactNode;
     className?: string;
+    variant?: CardVariant;
     background?: string;
-    backgroundImage?: string;
-    backgroundSize?: CSSProperties["backgroundSize"];
-    backgroundPosition?: CSSProperties["backgroundPosition"];
-    backgroundRepeat?: CSSProperties["backgroundRepeat"];
-    backgroundGradient?: string;
-    backgroundBlendMode?: CSSProperties["backgroundBlendMode"];
     textColor?: string;
-    hoverStyles?: CSSProperties;
-    activeStyles?: CSSProperties;
     borderRadius?: string | number;
     border?: string;
-    borderTop?: string;
-    borderRight?: string;
-    borderBottom?: string;
-    borderLeft?: string;
     boxShadow?: string;
     hoverShadow?: string;
-    transition?: string;
     padding?: string | number;
-    paddingX?: string | number;
-    paddingY?: string | number;
     margin?: string | number;
-    marginX?: string | number;
-    marginY?: string | number;
     width?: string | number;
-    minWidth?: string | number;
-    maxWidth?: string | number;
     height?: string | number;
-    minHeight?: string | number;
-    maxHeight?: string | number;
-    display?: CSSProperties["display"];
-    flexDirection?: CSSProperties["flexDirection"];
-    justifyContent?: CSSProperties["justifyContent"];
-    alignItems?: CSSProperties["alignItems"];
-    alignContent?: CSSProperties["alignContent"];
-    flexWrap?: CSSProperties["flexWrap"];
-    flex?: CSSProperties["flex"];
-    gap?: string | number;
-    position?: CSSProperties["position"];
-    top?: string | number;
-    right?: string | number;
-    bottom?: string | number;
-    left?: string | number;
-    zIndex?: number;
-    overflow?: CSSProperties["overflow"];
-    overflowX?: CSSProperties["overflowX"];
-    overflowY?: CSSProperties["overflowY"];
-    cursor?: CSSProperties["cursor"];
-    pointerEvents?: CSSProperties["pointerEvents"];
-    userSelect?: CSSProperties["userSelect"];
-    transform?: CSSProperties["transform"];
-    transformOrigin?: CSSProperties["transformOrigin"];
-    backdropFilter?: CSSProperties["backdropFilter"];
-    filter?: CSSProperties["filter"];
-    opacity?: number;
-    visibility?: CSSProperties["visibility"];
-    as?: ElementType;
+    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> & {

package/dist/components/basic/{CheckRadioInput.d.ts → 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/components/basic/Container.d.ts

@@ -1,30 +1,32 @@
-import { default as React, CSSProperties } from 'react';
-type ScreenSize = "sm" | "md" | "lg";
-type ResponsiveProp<T> = T | Partial<Record<ScreenSize, T>>;
-interface ContainerProps {
-    display?: ResponsiveProp<"block" | "flex" | "grid" | "inline-block">;
-    flexDirection?: ResponsiveProp<"row" | "column" | "row-reverse" | "column-reverse">;
-    justifyContent?: ResponsiveProp<"flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly">;
-    alignItems?: ResponsiveProp<"flex-start" | "center" | "flex-end" | "stretch" | "baseline">;
-    gridTemplateColumns?: ResponsiveProp<string>;
-    gridTemplateRows?: ResponsiveProp<string>;
-    gap?: ResponsiveProp<string>;
-    rowGap?: ResponsiveProp<string>;
-    columnGap?: ResponsiveProp<string>;
-    width?: ResponsiveProp<string>;
-    maxWidth?: ResponsiveProp<string>;
-    height?: ResponsiveProp<string>;
-    padding?: ResponsiveProp<string>;
-    margin?: ResponsiveProp<string>;
-    textAlign?: ResponsiveProp<"left" | "center" | "right">;
+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;
-    border?: ResponsiveProp<string>;
-    borderRadius?: ResponsiveProp<string>;
-    boxShadow?: ResponsiveProp<string>;
-    overflow?: ResponsiveProp<"visible" | "hidden" | "scroll" | "auto">;
-    children: React.ReactNode;
+    /** 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;
-    style?: CSSProperties;
+    /** 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 {};
+export default Container;

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

@@ -1,24 +1,33 @@
-import { default as React } from 'react';
-interface DrawerButtonProps {
+import { default as React, CSSProperties, ReactNode } from 'react';
+export interface DrawerButtonProps {
     label?: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     iconPosition?: "left" | "right";
     onClick?: () => void;
-    style?: React.CSSProperties;
+    color?: string;
+    textColor?: string;
+    borderRadius?: string;
+    padding?: string;
+    fontSize?: string;
+    gap?: string;
+    style?: CSSProperties;
+    className?: string;
 }
-interface DrawerProps {
+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?: React.CSSProperties;
-    children?: React.ReactNode;
+    style?: CSSProperties;
+    className?: string;
+    children?: ReactNode;
     showCloseButton?: boolean;
-    closeButtonStyle?: React.CSSProperties;
+    closeIconColor?: string;
+    closeButtonStyle?: CSSProperties;
 }
-declare const DrawerButton: React.FC<DrawerButtonProps>;
-declare const Drawer: React.FC<DrawerProps>;
-export { Drawer, DrawerButton };
+export declare const Drawer: React.FC<DrawerProps>;

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

@@ -1,63 +1,53 @@
 import { default as React } from 'react';
-interface Option {
+export interface Option {
     label: string;
     value: string;
     icon?: React.ReactNode;
     disabled?: boolean;
+    description?: string;
 }
-interface DropdownProps {
+export interface DropdownProps {
     options: Option[];
     value?: string;
+    values?: string[];
     defaultValue?: string;
-    onChange?: (value: string) => void;
+    defaultValues?: string[];
+    onChange?: (value: string | string[]) => void;
     placeholder?: string;
     disabled?: boolean;
     searchable?: boolean;
     multiSelect?: boolean;
     clearable?: boolean;
     virtualized?: boolean;
-    optionHeight?: number;
-    visibleOptions?: number;
-    width?: string;
-    height?: string;
+    width?: string | number;
+    dropdownMaxHeight?: string;
+    borderRadius?: string;
+    boxShadow?: string;
     borderColor?: string;
-    focusBorderColor?: string;
-    errorBorderColor?: string;
-    backgroundColor?: string;
+    accentColor?: string;
+    theme?: "light" | "dark" | "custom";
+    menuBg?: string;
+    controlBg?: string;
     textColor?: string;
+    hoverBg?: string;
+    selectedBg?: string;
+    disabledBg?: string;
+    disabledTextColor?: string;
     placeholderColor?: string;
-    hoverColor?: string;
-    selectedColor?: string;
-    disabledColor?: string;
-    padding?: string;
-    margin?: string;
-    borderRadius?: string;
-    boxShadow?: string;
-    optionPadding?: string;
-    optionGap?: string;
     transitionDuration?: string;
-    dropdownMaxHeight?: string;
-    dropdownMinWidth?: string;
     className?: string;
-    dropdownClassName?: string;
+    controlClassName?: string;
+    menuClassName?: string;
     optionClassName?: string;
-    inputClassName?: string;
     style?: React.CSSProperties;
-    dropdownStyle?: React.CSSProperties;
+    controlStyle?: React.CSSProperties;
+    menuStyle?: React.CSSProperties;
     optionStyle?: React.CSSProperties;
-    inputStyle?: React.CSSProperties;
     iconPrefix?: React.ReactNode;
     iconSuffix?: React.ReactNode;
     clearIcon?: React.ReactNode;
     dropdownIcon?: React.ReactNode;
     checkIcon?: React.ReactNode;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    ariaDescribedby?: string;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    onOpen?: () => void;
-    onClose?: () => void;
 }
-export declare const Dropdown: React.FC<DropdownProps>;
-export {};
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export default Dropdown;

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

@@ -1,17 +1,25 @@
 import { default as React } from 'react';
 type ScreenSize = "sm" | "md" | "lg";
+type ResponsiveValue<T> = T | Partial<Record<ScreenSize, T>>;
 interface FlexboxProps {
-    direction?: "row" | "column" | Partial<Record<ScreenSize, "row" | "column">>;
-    align?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
-    justify?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
-    gap?: number | string;
-    padding?: number | string;
-    backgroundColor?: string;
-    width?: string;
-    maxWidth?: string;
-    height?: string;
-    style?: React.CSSProperties;
+    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/components/basic/GridView.d.ts

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

@@ -1,33 +1,58 @@
 import { default as React } from 'react';
 interface ImageProps {
+    /** Image source URL */
     src?: string;
+    /** Alternative text (for SEO + accessibility) */
     alt?: string;
-    width?: string;
-    height?: string;
-    borderRadius?: 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;
+    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;
-    margin?: string;
+    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/components/basic/Input.d.ts

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