@unizap/uniui 1.0.6 → 1.0.8

package/README.md

@@ -1,54 +1,172 @@
-# React + TypeScript + Vite
+<p></p>
+<p align="center">
+  <img src="https://ik.imagekit.io/unizap/uniui.svg" alt="UniUI Logo" height="80"/>
+</p>
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+<p align="center">
+  <b>UniUI is a comprehensive and highly customizable UI component library built for React. Inspired by modern design principles, UniUI offers a wide range of high-quality, flexible, and easy-to-use components to build elegant and functional user interfaces for web applications.</b>
+</p>
 
-Currently, two official plugins are available:
+---
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## 🚀 Installation
 
-## Expanding the ESLint configuration
+```sh
+npm i @unizap/uniui
+```
+
+---
+
+
+## ⚡ Usage
+
+Import and use components in your React project:
+
+```tsx
+import { Button, IconButton, Badge, Carousel, EmptyState, PasswordInput } from '@unizap/uniui';
+
+<Button color="amber" variant="filled">Hello UniUI</Button>
+```
+
+---
+
+## 🧩 Components
+
+- **Button**
+- **IconButton**
+- **Badge**
+- **Carousel**
+- **EmptyState**
+- **PasswordInput**
+- **CardWrapper**
+- **Checkbox**
+- **Dropdown**
+- **DropzoneUploader**
+- **Menu**
+- **OtpInput**
+- **Pill**
+- **ProfileImageShowcase**
+- **Stepper**
+- **Table**
+- **TextInput**
+- **Skeleton**
+- **TextArea**
+- **Slider**
+- **Snackbar**
+- **Progress**
+- **ToggleSwitch**
+- **Typography**
+- **Card**
+- **Divider**
+- **RadioGroup**
+- **Select**
+- **Tooltip**
+- **Dialog**
+- **ActionMenu**
+- **Drawer**
+- **Accordion**
+- **Pagination**
+- **Avatar**
+- **Alert**
+- **BottomNavigation**
+- **Breadcrumbs**
+- **DatePicker**
+- **Tabs**
+- **DashboardStatBoxes**
+- **Sidebar**
+
+---
+
+## 🎨 Default Colors
+
+UniUI provides a set of default colors you can use out of the box:
+
+- **dark**
+- **gray**
+- **light**
+- **pearl**
+- **red**
+- **orange**
+- **amber**
+- **yellow**
+- **lime**
+- **green**
+- **emerald**
+- **teal**
+- **cyan**
+- **sky**
+- **blue**
+- **indigo**
+- **violet**
+- **purple**
+- **fuchsia**
+- **pink**
+- **rose**
+
+To use the default color, simply pass its name to the `color` prop:
+
+```tsx
+<Button color="amber">Amber Button</Button>
+<Button color="blue">Blue Button</Button>
+```
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+## 🎨 How to Extend Color
+
+To Extend and build sleek interfaces straight from your markup, you can install **UniCSS**:  
+[![npm version](https://img.shields.io/npm/v/@unizap/unicss?label=UniCSS)](https://www.npmjs.com/package/@unizap/unicss)
+
+
+```sh
+npm i @unizap/unicss
+```
+
+---
+
+You can add custom colors to UniUI's color system using the exported `extendColorMap` and `extendRangeColorMap` functions.
+
+**Example:**
+
+1. Create a file in your project (e.g. `brandColor.js`):
 
 ```js
-export default tseslint.config({
-  extends: [
-    // Remove ...tseslint.configs.recommended and replace with this
-    ...tseslint.configs.recommendedTypeChecked,
-    // Alternatively, use this for stricter rules
-    ...tseslint.configs.strictTypeChecked,
-    // Optionally, add this for stylistic rules
-    ...tseslint.configs.stylisticTypeChecked,
-  ],
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+import { extendColorMap } from "@unizap/uniui";
+
+extendColorMap({
+  brand: {
+    filled: 'bg-color-violet-500 text-color-white',  
+    outline: 'border-color-violet-500 text-color-violet-500',  
+    transparent: 'text-color-violet-500',  
+    accent: 'accent-color-violet-500',  
+    peer: 'peer-checked:border-color-violet-500 peer-checked:text-color-violet-500', 
+  }
+});
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+2. Use your new color in any component:
+
+```jsx
+import './brandColor.js';
+
+<Button color="brand">Brand Button</Button>
+```
+
+You can also extend Slider colors:
 
 ```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config({
-  plugins: {
-    // Add the react-x and react-dom plugins
-    'react-x': reactX,
-    'react-dom': reactDom,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended typescript rules
-    ...reactX.configs['recommended-typescript'].rules,
-    ...reactDom.configs.recommended.rules,
-  },
-})
+import { extendRangeColorMap } from '@unizap/uniui';
+
+extendRangeColorMap({
+  brand: {
+    track: 'bg-color-brand-200',
+    progress: 'bg-color-brand-500',
+    thumb: 'bg-color-brand-500 border-color-brand-600 shadow-color-brand-200',
+    thumbHover: 'bg-color-brand-600',
+  }
+});
 ```
+
+---
+
+## 📄 License
+
+MIT

package/dist/components/Accordion/Accordion.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
 import { AccordionProps } from './Accordion.types';
-declare const Accordion: React.FC<AccordionProps>;
-export default Accordion;
+
+declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

package/dist/components/Accordion/Accordion.types.d.ts

@@ -1,13 +1,14 @@
 import { ReactNode } from 'react';
-export interface AccordionProps {
-    title: ReactNode;
-    content: ReactNode;
-    expandIcon?: ReactNode;
-    collapseIcon?: ReactNode;
-    isOpen?: boolean;
-    defaultExpanded?: boolean;
-    onToggle?: (expanded: boolean) => void;
-    className?: string;
-    titleClass?: string;
-    contentClass?: string;
-}
+
+export interface AccordionProps {
+    title: ReactNode;
+    content: ReactNode;
+    expandIcon?: ReactNode;
+    collapseIcon?: ReactNode;
+    isOpen?: boolean;
+    defaultExpanded?: boolean;
+    onToggle?: (expanded: boolean) => void;
+    className?: string;
+    titleClass?: string;
+    contentClass?: string;
+}

package/dist/components/Accordion/index.d.ts

@@ -1 +1 @@
-export { default } from './Accordion';
+export { default } from './Accordion';

package/dist/components/ActionMenu/ActionMenu.d.ts

@@ -1,2 +1,3 @@
 import { ActionMenuProps } from './ActionMenu.types';
-export default function ActionMenu({ items, trigger, className, dropdownItemClass }: ActionMenuProps): import("react/jsx-runtime").JSX.Element;
+
+export default function ActionMenu({ items, trigger, className, dropdownItemClass }: ActionMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionMenu/ActionMenu.types.d.ts

@@ -1,14 +1,15 @@
 import { ReactNode } from 'react';
-export interface ActionMenuItem {
-    label?: string;
-    icon?: ReactNode;
-    itemClass?: string;
-    disabled?: boolean;
-    onClick?: () => void;
-}
-export interface ActionMenuProps {
-    items: ActionMenuItem[];
-    trigger: ReactNode;
-    className?: string;
-    dropdownItemClass?: string;
-}
+
+export interface ActionMenuItem {
+    label?: string;
+    icon?: ReactNode;
+    itemClass?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface ActionMenuProps {
+    items: ActionMenuItem[];
+    trigger: ReactNode;
+    className?: string;
+    dropdownItemClass?: string;
+}

package/dist/components/ActionMenu/index.d.ts

@@ -1 +1 @@
-export { default } from './ActionMenu';
+export { default } from './ActionMenu';

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
 import { AlertProps } from './Alert.types';
-declare const Alert: React.FC<AlertProps>;
-export default Alert;
+
+declare const Alert: React.FC<AlertProps>;
+export default Alert;

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

@@ -1,8 +1,8 @@
-export interface AlertProps {
-    message: string;
-    variant?: 'info' | 'success' | 'danger' | 'warning' | 'dark';
-    onClose?: () => void;
-    autoClose?: boolean;
-    autoCloseDuration?: number;
-    className?: string;
-}
+export interface AlertProps {
+    message: string;
+    variant?: 'info' | 'success' | 'danger' | 'warning' | 'dark';
+    onClose?: () => void;
+    autoClose?: boolean;
+    autoCloseDuration?: number;
+    className?: string;
+}

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

@@ -1 +1 @@
-export { default } from './Alert';
+export { default } from './Alert';

package/dist/components/{SearchBar/SearchBar.d.ts → Autocomplete/Autocomplete.d.ts}

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
-import { SearchBarProps } from './SearchBar.types';
-declare const SearchBar: React.FC<SearchBarProps>;
-export default SearchBar;
+import { SearchBarProps } from './Autocomplete.types';
+
+declare const SearchBar: React.FC<SearchBarProps>;
+export default SearchBar;

package/dist/components/{SearchBar/SearchBar.types.d.ts → Autocomplete/Autocomplete.types.d.ts}

@@ -1,24 +1,24 @@
-export interface SearchBarProps {
-    /** Current search value (controlled) */
-    value: string;
-    /** Called on every keystroke */
-    onChange: (v: string) => void;
-    /** Optional list shown under the field */
-    suggestions?: string[];
-    /** Fired when user picks a suggestion (click or Enter) */
-    onSelect?: (v: string) => void;
-    /** Placeholder text */
-    placeholder?: string;
-    /** Debounce delay (ms) before firing onChange; 0 = none */
-    debounce?: number;
-    /** Width of the component (CSS size) */
-    width?: string | number;
-    /** If true, filter suggestions client-side */
-    filterLocal?: boolean;
-    /** Custom empty-state text when no suggestions */
-    emptyLabel?: string;
-    iconStyle?: string;
-    inputClass?: string;
-    className?: string;
-    startIcon?: React.ReactNode;
-}
+export interface SearchBarProps {
+    /** Current search value (controlled) */
+    value: string;
+    /** Called on every keystroke */
+    onChange: (v: string) => void;
+    /** Optional list shown under the field */
+    suggestions?: string[];
+    /** Fired when user picks a suggestion (click or Enter) */
+    onSelect?: (v: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Debounce delay (ms) before firing onChange; 0 = none */
+    debounce?: number;
+    /** Width of the component (CSS size) */
+    width?: string | number;
+    /** If true, filter suggestions client-side */
+    filterLocal?: boolean;
+    /** Custom empty-state text when no suggestions */
+    emptyLabel?: string;
+    iconStyle?: string;
+    inputClass?: string;
+    className?: string;
+    startIcon?: React.ReactNode;
+}

package/dist/components/Autocomplete/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Autocomplete';

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

@@ -1,3 +1,4 @@
 import { AvatarProps } from './Avatar.types';
-declare const Avatar: ({ src, alt, size, fallback, className, color, shape, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
-export default Avatar;
+
+declare const Avatar: ({ src, alt, size, fallback, className, color, shape, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

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

@@ -1,10 +1,11 @@
 import { CompColor } from '../../utils/ColorMap';
-export interface AvatarProps {
-    src?: string;
-    alt?: string;
-    fallback?: React.ReactNode;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    shape?: 'circle' | 'rounded' | 'square';
-    color?: CompColor;
-    className?: string;
-}
+
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    fallback?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'circle' | 'rounded' | 'square';
+    color?: CompColor;
+    className?: string;
+}

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

@@ -1 +1 @@
-export { default } from './Avatar';
+export { default } from './Avatar';

package/dist/components/Badge/Badge.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
 import { BadgeProps } from './Badge.types';
-declare const Badge: React.FC<BadgeProps>;
-export default Badge;
+
+declare const Badge: React.FC<BadgeProps>;
+export default Badge;

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

@@ -1,9 +1,10 @@
 import { CompColor } from '../../utils/ColorMap';
-export interface BadgeProps {
-    children: React.ReactNode;
-    count?: number;
-    showDot?: boolean;
-    max?: number;
-    color?: CompColor;
-    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-}
+
+export interface BadgeProps {
+    children: React.ReactNode;
+    count?: number;
+    showDot?: boolean;
+    max?: number;
+    color?: CompColor;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+}

package/dist/components/Badge/index.d.ts

@@ -1 +1 @@
-export { default } from './Badge';
+export { default } from './Badge';

package/dist/components/BottomNavigation/BottomNavigation.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
 import { BottomNavigationProps } from './BottomNavigation.types';
-declare const BottomNavigation: React.FC<BottomNavigationProps>;
-export default BottomNavigation;
+
+declare const BottomNavigation: React.FC<BottomNavigationProps>;
+export default BottomNavigation;

package/dist/components/BottomNavigation/BottomNavigation.types.d.ts

@@ -1,14 +1,14 @@
-export interface NavItem {
-    label: string;
-    icon: React.ReactNode;
-    path: string;
-}
-export interface BottomNavigationProps {
-    variant?: 'floating' | 'static' | 'fixed';
-    activeTab: string;
-    navItems: NavItem[];
-    onTabChange: (label: string) => void;
-    className?: string;
-    activeClass?: string;
-    buttonClass?: string;
-}
+export interface NavItem {
+    label: string;
+    icon: React.ReactNode;
+    path: string;
+}
+export interface BottomNavigationProps {
+    variant?: 'floating' | 'static' | 'fixed';
+    activeTab: string;
+    navItems: NavItem[];
+    onTabChange: (label: string) => void;
+    className?: string;
+    activeClass?: string;
+    buttonClass?: string;
+}

package/dist/components/BottomNavigation/index.d.ts

@@ -1 +1 @@
-export { default } from './BottomNavigation';
+export { default } from './BottomNavigation';

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,3 +1,4 @@
 import { BreadcrumbsProps } from './Breadcrumbs.types';
-declare const Breadcrumbs: ({ items, separator, className }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
-export default Breadcrumbs;
+
+declare const Breadcrumbs: ({ items, separator, className }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
+export default Breadcrumbs;

package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -1,9 +1,9 @@
-export interface BreadcrumbItem {
-    label: string;
-    href?: string;
-}
-export interface BreadcrumbsProps {
-    items: BreadcrumbItem[];
-    separator?: string;
-    className?: string;
-}
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    separator?: string;
+    className?: string;
+}

package/dist/components/Breadcrumbs/index.d.ts

@@ -1 +1 @@
-export { default } from './Breadcrumbs';
+export { default } from './Breadcrumbs';

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
 import { IButtonProps } from './Button.types';
-declare const Button: React.FC<IButtonProps>;
-export default Button;
+
+declare const Button: React.FC<IButtonProps>;
+export default Button;

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

@@ -1,18 +1,19 @@
 import { default as React } from 'react';
 import { CompColor } from '../../utils/ColorMap';
-export interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    title?: string;
-    variant?: 'filled' | 'outlined' | 'text';
-    color?: CompColor;
-    size?: 'small' | 'medium' | 'large';
-    children?: React.ReactNode;
-    className?: string;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    roundedFull?: boolean;
-    icon?: React.ReactNode;
-    href?: string;
-    target?: '_blank' | '_self' | '_parent' | '_top';
-    type?: 'submit' | 'reset' | 'button';
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}
+
+export interface IButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    title?: string;
+    variant?: 'filled' | 'outlined' | 'transparent';
+    color?: CompColor;
+    size?: 'small' | 'medium' | 'large';
+    children?: React.ReactNode;
+    className?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    roundedFull?: boolean;
+    icon?: React.ReactNode;
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    type?: 'submit' | 'reset' | 'button';
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}

package/dist/components/Button/index.d.ts

@@ -1 +1 @@
-export { default } from './Button';
+export { default } from './Button';

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
 import { ICardProps } from './Card.types';
-declare const Card: React.FC<ICardProps>;
-export default Card;
+
+declare const Card: React.FC<ICardProps>;
+export default Card;

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

@@ -1,17 +1,18 @@
 import { default as React } from 'react';
-export interface ICardProps {
-    title?: string;
-    subtitle?: string;
-    space?: 'none' | 'small' | 'medium' | 'large';
-    shadow?: 'default' | 'small' | 'medium' | 'large';
-    roundness?: 'small' | 'medium' | 'large';
-    image?: string;
-    divider?: boolean;
-    actionMenu?: React.ReactNode;
-    children?: React.ReactNode;
-    className?: string;
-    hoverable?: boolean;
-    bordered?: boolean;
-    onClick?: () => void;
-    loaderJsx?: boolean;
-}
+
+export interface ICardProps {
+    title?: string;
+    subtitle?: string;
+    space?: 'none' | 'small' | 'medium' | 'large';
+    shadow?: 'default' | 'small' | 'medium' | 'large';
+    roundness?: 'small' | 'medium' | 'large';
+    image?: string;
+    divider?: boolean;
+    actionMenu?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    hoverable?: boolean;
+    bordered?: boolean;
+    onClick?: () => void;
+    loaderJsx?: boolean;
+}

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

@@ -1 +1 @@
-export { default } from './Card';
+export { default } from './Card';

package/dist/components/CardWrapper/CardWrapper.d.ts

@@ -1,8 +1,9 @@
 import { default as React } from 'react';
-interface CardWrapperProps {
-    children?: React.ReactNode;
-    className?: string;
-    border?: boolean;
-}
-declare const CardWrapper: React.FC<CardWrapperProps>;
-export default CardWrapper;
+
+interface CardWrapperProps {
+    children?: React.ReactNode;
+    className?: string;
+    border?: boolean;
+}
+declare const CardWrapper: React.FC<CardWrapperProps>;
+export default CardWrapper;