@neuctra/ui 0.1.0 → 0.2.0

package/README.md

@@ -0,0 +1,96 @@
+
+# @neuctra/ui
+
+A modern, customizable, and fully responsive React UI component library built with Tailwind CSS, TypeScript, and Vite.
+
+> ⚡ Rapidly build accessible and beautiful interfaces using clean, developer-friendly components.
+
+---
+
+## 📦 Installation
+
+### Using npm
+
+```bash
+npm install @neuctra/ui
+````
+
+### Using yarn
+
+```bash
+yarn add @neuctra/ui
+````
+
+
+
+## 🧱 Usage
+
+Import and use any component:
+
+```tsx
+import { Button, Dropdown, Input } from '@neuctra/ui';
+
+export default function App() {
+  return (
+    <div className="p-4">
+      <Button>Click Me</Button>
+
+      <Dropdown
+        options={[
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+        ]}
+        placeholder="Select an option"
+      />
+
+      <Input placeholder="Type here..." />
+    </div>
+  );
+}
+```
+
+---
+
+## 🎨 Customization
+
+Components support rich props like:
+
+* `className` for Tailwind overrides
+* Color, padding, margin, radius, shadow via props
+* Icon support (via `lucide-react` or `react-icons`)
+* Controlled or uncontrolled components
+* Transition and animation props
+
+Each component is designed with flexibility and accessibility in mind.
+
+---
+
+## 📚 Components
+
+> Full documentation coming soon
+
+* `Button`
+* `Input`
+* `TextArea`
+* `Dropdown`
+* `AudioPlayer`
+* `VideoPlayer`
+* `Accordion`
+* `Drawer`
+* `Alert`
+* More coming...
+
+---
+
+
+## 📄 License
+
+MIT © [Taha Asif](https://github.com/Taha-Asif-313)
+
+---
+
+## 🌐 Links
+
+* [GitHub Repository](https://github.com/Taha-Asif-313/neuctra-ui)
+* [NPM Package](https://www.npmjs.com/package/@neuctra/ui)
+* [Documentation (coming soon)](https://neuctra-ui.vercel.app)

package/dist/components/{gallery → basic}/AudioGallery.d.ts

@@ -2,18 +2,15 @@ import { default as React } from 'react';
 interface AudioTrack {
     src: string;
     title: string;
+    thumbnail?: string;
 }
 interface AudioGalleryProps {
     tracks: AudioTrack[];
     className?: string;
-    theme?: {
-        bg?: string;
-        text?: string;
-        primary?: string;
-        secondary?: string;
-    };
-    showProgress?: boolean;
-    showVolume?: boolean;
+    primaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    secondaryColor?: string;
     autoplay?: boolean;
     loop?: boolean;
 }

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+interface AvatarProps {
+    src: string;
+    alt?: string;
+    size?: "small" | "medium" | "large";
+    isOnline?: boolean;
+    isOffline?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface AvatarGroupProps {
+    avatars: AvatarProps[];
+    max?: number;
+    size?: "small" | "medium" | "large";
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+export declare const AvatarGroup: React.FC<AvatarGroupProps>;
+export {};

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

@@ -0,0 +1,25 @@
+import { default as React, CSSProperties } from 'react';
+interface CardProps {
+    children?: React.ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    background?: string;
+    backgroundImage?: string;
+    backgroundSize?: CSSProperties["backgroundSize"];
+    backgroundPosition?: CSSProperties["backgroundPosition"];
+    backgroundRepeat?: CSSProperties["backgroundRepeat"];
+    textColor?: string;
+    borderRadius?: string | number;
+    padding?: string | number;
+    margin?: string | number;
+    maxWidth?: string | number;
+    boxShadow?: string;
+    border?: string;
+    display?: CSSProperties["display"];
+    flexDirection?: CSSProperties["flexDirection"];
+    justifyContent?: CSSProperties["justifyContent"];
+    alignItems?: CSSProperties["alignItems"];
+    gap?: string | number;
+}
+export declare const Card: React.FC<CardProps>;
+export {};

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

@@ -15,6 +15,13 @@ interface CheckRadioProps {
     error?: string;
     className?: string;
     customIcon?: (checked: boolean) => React.ReactNode;
+    style?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    iconSize?: number;
+    iconCheckedBgColor?: string;
+    iconUncheckedBorderColor?: string;
+    textColor?: string;
+    errorStyle?: React.CSSProperties;
 }
 export declare const CheckRadio: React.FC<CheckRadioProps>;
 export {};

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

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

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

@@ -1,21 +1,17 @@
 import { default as React } from 'react';
-interface ResponsiveProps<T> {
-    sm?: T;
-    md?: T;
-    lg?: T;
-}
+type ScreenSize = "sm" | "md" | "lg";
 interface FlexboxProps {
-    direction?: ResponsiveProps<"row" | "column">;
-    align?: ResponsiveProps<"flex-start" | "flex-end" | "center" | "stretch" | "baseline">;
-    justify?: ResponsiveProps<"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly">;
-    gap?: ResponsiveProps<string>;
-    padding?: ResponsiveProps<string>;
+    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;
     children: React.ReactNode;
-    width?: ResponsiveProps<string>;
-    maxWidth?: ResponsiveProps<string>;
-    height?: ResponsiveProps<string>;
-    className?: string;
 }
-declare const Flexbox: React.FC<FlexboxProps>;
-export default Flexbox;
+export declare const Flexbox: React.FC<FlexboxProps>;
+export {};

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

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

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

@@ -27,7 +27,7 @@ interface ImageProps {
     overflow?: "hidden" | "scroll" | "auto" | "visible" | "x" | "y";
     className?: string;
     style?: React.CSSProperties;
-    onClick?: () => void;
+    onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLImageElement>) => void;
 }
 export declare const Image: React.FC<ImageProps>;
 export {};

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

@@ -0,0 +1,11 @@
+import { default as React, ReactNode, CSSProperties } from 'react';
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    overlayStyle?: CSSProperties;
+    modalStyle?: CSSProperties;
+    closeButtonStyle?: CSSProperties;
+}
+export declare const Modal: React.FC<ModalProps>;
+export {};

package/dist/components/{gallery → basic}/VideoGallery.d.ts

@@ -1,10 +1,17 @@
 import { default as React } from 'react';
+interface Video {
+    src: string;
+    poster?: string;
+}
+interface ResponsiveColumns {
+    mobile?: number;
+    tablet?: number;
+    desktop?: number;
+}
 interface VideoGalleryProps {
-    videos: {
-        src: string;
-        poster?: string;
-    }[];
+    videos: Video[];
     columns?: number;
+    responsiveColumns?: ResponsiveColumns;
     gap?: string;
     layout?: "grid" | "masonry";
     lightbox?: boolean;

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

@@ -5,6 +5,7 @@ interface VideoPlayerProps {
     autoPlay?: boolean;
     loop?: boolean;
     controls?: boolean;
+    muted?: boolean;
     width?: string;
     height?: string;
     borderRadius?: string;