@unizap/uniui 1.0.59 → 1.0.60

package/README.md

@@ -1,187 +1,187 @@
-<p></p>
-<p align="center">
-  <img src="https://ik.imagekit.io/unizap/uniui.svg" alt="UniUI Logo" height="80"/>
-</p>
-
-<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>
-
----
-
-## 🚀 Installation
-
-```sh
-npm i @unizap/uniui
-```
-
----
-
-## ⚡ Usage
-
-Import the UniUI CSS in your main entry file (e.g. `app.js`):
-
-```js
-import '@unizap/uniui/uniui.css'
-```
-
-Now you can use UniUI components anywhere in your app:
-
-```jsx
-import {Button, IconButton, Badge, Carousel, EmptyState, PasswordInput,} from '@unizap/uniui';
-
-<Button color="amber" variant="filled">
-    Hello UniUI
-</Button>
-```
-
----
-
-## 🧩 Components
-
-- **Accordion**
-- **Alert**
-- **Avatar**
-- **Badge**
-- **Backdrop**
-- **Button**
-- **Card**
-- **Carousel**
-- **Checkbox**
-- **Datepicker**
-- **Dialog**
-- **Divider**
-- **Drawer**
-- **EmptyState**
-- **IconButton**
-- **Input**
-- **List**
-- **OTPInput**
-- **PasswordInput**
-- **Progress**
-- **RadioGroup**
-- **Rating**
-- **Select**
-- **Sheet**
-- **Skeleton**
-- **Slider**
-- **Stepper**
-- **Switch**
-- **Table**
-- **Tabs**
-- **Textarea**
-- **ToggleButton**
-- **ToggleSwitch**
-- **Tooltip**
-- **Typography**
-- **Dropdown**
-- **ActionMenu**
-- **Registration**
-- **DashboardStatistic**
-- **DropzoneUploader**
-- **ProfileShowcase**
-- **Sidebar**
-- **BottomNavigation**
-- **Breadcrumbs**
-- **Snackbar**
-
-
-## 🎨 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>
-```
-
-## 🎨 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
-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",
-        text: "text-color-violet-500",
-    },
-})
-```
-
-2. Use your new color in any component:
-
-```jsx
-import './brandColor.js';
-
-<Button color="brand">Brand Button</Button>
-```
-
-3. Run the UniCSS CLI to generate your CSS file:
-
-```sh
-npx unicss -w -o src/style.css --skip-base
-```
-
----
-
-You can also extend Slider colors:
-
-```js
-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
+<p></p>
+<p align="center">
+  <img src="https://ik.imagekit.io/unizap/uniui.svg" alt="UniUI Logo" height="80"/>
+</p>
+
+<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>
+
+---
+
+## 🚀 Installation
+
+```sh
+npm i @unizap/uniui
+```
+
+---
+
+## ⚡ Usage
+
+Import the UniUI CSS in your main entry file (e.g. `app.js`):
+
+```js
+import '@unizap/uniui/uniui.css'
+```
+
+Now you can use UniUI components anywhere in your app:
+
+```jsx
+import {Button, IconButton, Badge, Carousel, EmptyState, PasswordInput,} from '@unizap/uniui';
+
+<Button color="amber" variant="filled">
+    Hello UniUI
+</Button>
+```
+
+---
+
+## 🧩 Components
+
+- **Accordion**
+- **Alert**
+- **Avatar**
+- **Badge**
+- **Backdrop**
+- **Button**
+- **Card**
+- **Carousel**
+- **Checkbox**
+- **Datepicker**
+- **Dialog**
+- **Divider**
+- **Drawer**
+- **EmptyState**
+- **IconButton**
+- **Input**
+- **List**
+- **OTPInput**
+- **PasswordInput**
+- **Progress**
+- **RadioGroup**
+- **Rating**
+- **Select**
+- **Sheet**
+- **Skeleton**
+- **Slider**
+- **Stepper**
+- **Switch**
+- **Table**
+- **Tabs**
+- **Textarea**
+- **ToggleButton**
+- **ToggleSwitch**
+- **Tooltip**
+- **Typography**
+- **Dropdown**
+- **ActionMenu**
+- **Registration**
+- **DashboardStatistic**
+- **DropzoneUploader**
+- **ProfileShowcase**
+- **Sidebar**
+- **BottomNavigation**
+- **Breadcrumbs**
+- **Snackbar**
+
+
+## 🎨 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>
+```
+
+## 🎨 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
+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",
+        text: "text-color-violet-500",
+    },
+})
+```
+
+2. Use your new color in any component:
+
+```jsx
+import './brandColor.js';
+
+<Button color="brand">Brand Button</Button>
+```
+
+3. Run the UniCSS CLI to generate your CSS file:
+
+```sh
+npx unicss -w -o src/style.css --skip-base
+```
+
+---
+
+You can also extend Slider colors:
+
+```js
+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,5 +1,4 @@
 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,14 +1,13 @@
 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,3 +1,2 @@
 import { ActionMenuProps } from './ActionMenu.types';
-
-export default function ActionMenu({ items, trigger, className, dropdownItemClass, positioning }: ActionMenuProps): import("react/jsx-runtime").JSX.Element;
+export default function ActionMenu({ items, trigger, className, dropdownItemClass, positioning }: ActionMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,16 +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;
-    positioning?: 'absolute' | 'fixed';
-}
+export interface ActionMenuItem {
+    label?: string;
+    icon?: ReactNode;
+    itemClass?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface ActionMenuProps {
+    items: ActionMenuItem[];
+    trigger: ReactNode;
+    className?: string;
+    dropdownItemClass?: string;
+    positioning?: 'absolute' | 'fixed';
+}

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,5 +1,4 @@
 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/Autocomplete/Autocomplete.d.ts

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

package/dist/components/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

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

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

@@ -1,4 +1,3 @@
 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,11 +1,10 @@
 import { CompColor } from '../../utils/ColorMap';
-
-export interface AvatarProps {
-    src?: string;
-    alt?: string;
-    fallback?: React.ReactNode;
-    size?: 'small' | 'medium' | 'large' | 'extra-large';
-    shape?: 'circle' | 'rounded' | 'square';
-    color?: CompColor;
-    className?: string;
-}
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    fallback?: React.ReactNode;
+    size?: 'small' | 'medium' | 'large' | 'extra-large';
+    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/Backdrop/Backdrop.d.ts

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

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

@@ -1,6 +1,6 @@
-export interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {
-    open: boolean;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    className?: string;
-    children?: React.ReactNode;
-}
+export interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {
+    open: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    className?: string;
+    children?: React.ReactNode;
+}

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

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

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

@@ -1,5 +1,4 @@
 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,10 +1,9 @@
 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,5 +1,4 @@
 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;