uiplex 1.1.0 → 1.3.0

package/README.md

@@ -24,12 +24,10 @@ npm install react react-dom
 
 ## Quick Start
 
-**With Modern Bundlers (Vite, Webpack 5, Next.js, etc.):**
-
 CSS is automatically included when you import components! Just import and use:
 
 ```tsx
-import { Button, Loader, Radio, RadioGroup, Select, ThemeProvider } from 'uiplex';
+import { Button, ThemeProvider } from 'uiplex';
 
 function App() {
   return (
@@ -45,7 +43,6 @@ function App() {
 **If CSS is not automatically loaded**, import it manually:
 
 ```tsx
-import { Button } from 'uiplex';
 import 'uiplex/styles.css'; // Only needed if bundler doesn't auto-include
 ```
 
@@ -53,7 +50,7 @@ import 'uiplex/styles.css'; // Only needed if bundler doesn't auto-include
 
 ### Button
 
-A versatile button component with multiple variants, sizes, and color schemes.
+Versatile button component with multiple variants, sizes, and color schemes.
 
 ```tsx
 import { Button } from 'uiplex';
@@ -61,43 +58,25 @@ import { Button } from 'uiplex';
 <Button variant="primary" size="md" colorScheme="blue">
   Primary Button
 </Button>
-
-<Button variant="outline" size="lg" loading>
-  Loading...
-</Button>
 ```
 
-**Props:**
-- `variant`: `"primary" | "secondary" | "outline" | "link"`
-- `size`: `"xs" | "sm" | "md" | "lg"`
-- `colorScheme`: `"blue" | "green" | "red" | "yellow" | "purple" | "gray"`
-- `disabled`: `boolean`
-- `loading`: `boolean`
-- `leftIcon`: `ReactNode`
-- `rightIcon`: `ReactNode`
+**Key Props:** `variant`, `size`, `colorScheme`, `disabled`, `loading`, `leftIcon`, `rightIcon`
 
 ### Loader
 
-A flexible loading indicator with multiple variants.
+Flexible loading indicator with multiple variants.
 
 ```tsx
 import { Loader } from 'uiplex';
 
 <Loader variant="spinner" size="md" />
-<Loader variant="dots" size="lg" />
-<Loader variant="pulse" isCentered />
 ```
 
-**Props:**
-- `variant`: `"spinner" | "dots" | "pulse"`
-- `size`: `"xs" | "sm" | "md" | "lg"`
-- `width`: `number` (optional)
-- `height`: `number` (optional)
-- `isCentered`: `boolean`
+**Key Props:** `variant` ("spinner" | "dots" | "pulse"), `size`, `isCentered`
 
 ### Radio & RadioGroup
 
-Radio button components with support for groups and custom styling.
+Radio button components with support for groups.
 
 ```tsx
 import { Radio, RadioGroup } from 'uiplex';
@@ -113,144 +92,25 @@ import { Radio, RadioGroup } from 'uiplex';
 />
 ```
 
-**Radio Props:**
-- `name`: `string` (required)
-- `value`: `string`
-- `checked`: `boolean`
-- `disabled`: `boolean`
-- `label`: `string`
-- `description`: `string`
-- `size`: `"sm" | "md" | "lg"`
-- `colorScheme`: `"blue" | "green" | "red" | "yellow" | "purple" | "gray"`
+### Checkbox & CheckboxGroup
 
-**RadioGroup Props:**
-- `name`: `string` (required)
-- `value`: `string`
-- `options`: `Array<{ value: string; label?: string; description?: string; disabled?: boolean }>`
-- `orientation`: `"horizontal" | "vertical"`
-
-### Text
-
-Typography component with sizes, weights, colors, and alignment options.
+Checkbox components with support for multiple selections.
 
 ```tsx
-import { Text } from 'uiplex';
-
-<Text size="lg" weight="bold" color="primary">
-  Heading Text
-</Text>
+import { Checkbox, CheckboxGroup } from 'uiplex';
 
-<Text size="md" align="center">
-  Centered text
-</Text>
-```
-
-**Props:**
-- `size`: `"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"`
-- `weight`: `"normal" | "medium" | "semibold" | "bold"`
-- `color`: `"primary" | "secondary" | "success" | "error" | "warning" | "info"`
-- `align`: `"left" | "center" | "right" | "justify"`
-- `as`: `"p" | "span" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"`
-
-### Box
-
-A versatile container component that serves as a building block for layouts.
-
-```tsx
-import { Box } from 'uiplex';
-
-<Box padding="md" margin="lg" borderRadius="md" bg="primary">
-  Content here
-</Box>
-```
-
-**Props:**
-- `padding`: `string | number`
-- `margin`: `string | number`
-- `width`: `string | number`
-- `height`: `string | number`
-- `bg`: `string`
-- `borderRadius`: `string | number`
-- All standard HTML div props
-
-### Flex
-
-A flexible layout component built on CSS Flexbox.
-
-```tsx
-import { Flex } from 'uiplex';
-
-<Flex direction="row" align="center" justify="space-between" gap="md">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-</Flex>
-```
-
-**Props:**
-- `direction`: `"row" | "column" | "row-reverse" | "column-reverse"`
-- `align`: `"flex-start" | "flex-end" | "center" | "stretch" | "baseline"`
-- `justify`: `"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly"`
-- `wrap`: `"nowrap" | "wrap" | "wrap-reverse"`
-- `gap`: `string | number`
-- All standard HTML div props
-
-### Grid
-
-CSS Grid layout component for two-dimensional layouts.
-
-```tsx
-import { Grid } from 'uiplex';
-
-<Grid columns={3} gap="md" rows="auto">
-  <Box>Item 1</Box>
-  <Box>Item 2</Box>
-  <Box>Item 3</Box>
-</Grid>
-```
-
-**Props:**
-- `columns`: `number | string`
-- `rows`: `number | string`
-- `gap`: `string | number`
-- All standard HTML div props
-
-### Modal
-
-Modal dialog component for overlays and popups.
-
-```tsx
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalCloseButton, useDisclosure } from 'uiplex';
-
-function MyComponent() {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  
-  return (
-    <>
-      <Button onClick={onOpen}>Open Modal</Button>
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Modal Title</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            Modal content goes here
-          </ModalBody>
-          <ModalFooter>
-            <Button onClick={onClose}>Close</Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}
+<CheckboxGroup
+  name="options"
+  value={selected}
+  onChange={(values) => setSelected(values)}
+  options={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+  ]}
+/>
 ```
 
-**Modal Props:**
-- `isOpen`: `boolean`
-- `onClose`: `() => void`
-- `size`: `"xs" | "sm" | "md" | "lg" | "xl" | "full"`
-- `closeOnOverlayClick`: `boolean`
-- `closeOnEsc`: `boolean`
+**Key Props:** `value` (string[]), `onChange`, `options`, `size`, `colorScheme`, `orientation`
 
 ### Input
 
@@ -261,23 +121,12 @@ import { Input, FormControl, FormLabel, FormErrorMessage } from 'uiplex';
 
 <FormControl isInvalid={hasError}>
   <FormLabel>Email</FormLabel>
-  <Input
-    type="email"
-    placeholder="Enter your email"
-    value={email}
-    onChange={(e) => setEmail(e.target.value)}
-  />
+  <Input type="email" placeholder="Enter your email" />
   <FormErrorMessage>Email is required</FormErrorMessage>
 </FormControl>
 ```
 
-**Input Props:**
-- `size`: `"sm" | "md" | "lg"`
-- `variant`: `"outline" | "filled" | "flushed" | "unstyled"`
-- `isInvalid`: `boolean`
-- `isDisabled`: `boolean`
-- `isReadOnly`: `boolean`
-- All standard HTML input props
+**Key Props:** `size`, `variant`, `isInvalid`, `isDisabled`
 
 ### Textarea
 
@@ -286,36 +135,20 @@ Multi-line text input component.
 ```tsx
 import { Textarea } from 'uiplex';
 
-<Textarea
-  placeholder="Enter your message"
-  rows={4}
-  value={message}
-  onChange={(e) => setMessage(e.target.value)}
-/>
+<Textarea placeholder="Enter your message" rows={4} />
 ```
 
-**Props:**
-- `size`: `"sm" | "md" | "lg"`
-- `variant`: `"outline" | "filled" | "flushed" | "unstyled"`
-- `isInvalid`: `boolean`
-- `isDisabled`: `boolean`
-- All standard HTML textarea props
-
 ### Select
 
-Custom dropdown select component with single and multi-select modes, search functionality, and validation support.
+Custom dropdown with single/multi-select, search, and validation.
 
 ```tsx
-import { Select, FormControl, FormLabel, FormErrorMessage } from 'uiplex';
+import { Select } from 'uiplex';
 
 // Single select
 <Select
   placeholder="Select an option"
-  options={[
-    { value: 'option1', label: 'Option 1' },
-    { value: 'option2', label: 'Option 2' },
-    { value: 'option3', label: 'Option 3' },
-  ]}
+  options={options}
   value={value}
   onChange={(value) => setValue(value)}
 />
@@ -323,119 +156,84 @@ import { Select, FormControl, FormLabel, FormErrorMessage } from 'uiplex';
 // Multi-select
 <Select
   mode="multiple"
-  placeholder="Select multiple options"
-  options={options}
-  value={values}
-  onChange={(values) => setValues(values)}
-/>
-
-// With search
-<Select
-  searchable
-  placeholder="Search and select..."
+  placeholder="Select multiple"
   options={options}
 />
 
-// With FormControl
-<FormControl isInvalid={hasError}>
-  <FormLabel>Country</FormLabel>
-  <Select
-    placeholder="Select a country"
-    options={countries}
-    value={country}
-    onChange={(value) => setCountry(value)}
-  />
-  <FormErrorMessage>Country is required</FormErrorMessage>
-</FormControl>
+// Searchable
+<Select searchable placeholder="Search..." options={options} />
 ```
 
-**Select Props:**
-- `size`: `"sm" | "md" | "lg"`
-- `variant`: `"outline" | "filled" | "unstyled"`
-- `mode`: `"single" | "multiple"` (default: `"single"`)
-- `searchable`: `boolean` (default: `false`)
-- `allowClear`: `boolean` (default: `false`)
-- `options`: `SelectOption[]` - Array of option objects
-- `value`: `string | number | (string | number)[]` - Controlled value
-- `defaultValue`: `string | number | (string | number)[]` - Default value (uncontrolled)
-- `onChange`: `(value) => void` - Callback when value changes
-- `placeholder`: `string` (default: `"Select..."`)
-- `width`: `string | number` - Width of the select component
-- `isInvalid`: `boolean`
-- `isDisabled`: `boolean`
-- `isReadOnly`: `boolean`
-
-**SelectOption:**
-- `value`: `string | number` - Option value
-- `label`: `string` - Option display text
-- `disabled`: `boolean` - Whether the option is disabled
+**Key Props:** `mode` ("single" | "multiple"), `searchable`, `options`, `value`, `onChange`, `width`
 
-### Link
+### Tabs
 
-Link component with multiple variants and color schemes.
+Tab component for organizing content into multiple panels.
 
 ```tsx
-import { Link } from 'uiplex';
-
-<Link href="/about" variant="primary" size="md">
-  Learn More
-</Link>
+import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'uiplex';
+
+<Tabs defaultIndex={0}>
+  <TabList>
+    <Tab index={0}>Tab 1</Tab>
+    <Tab index={1}>Tab 2</Tab>
+  </TabList>
+  <TabPanels>
+    <TabPanel index={0}>Content 1</TabPanel>
+    <TabPanel index={1}>Content 2</TabPanel>
+  </TabPanels>
+</Tabs>
 ```
 
-**Props:**
-- `variant`: `"primary" | "secondary" | "underline"`
-- `size`: `"sm" | "md" | "lg"`
-- `colorScheme`: `"blue" | "green" | "red" | "yellow" | "purple" | "gray"`
-- All standard HTML anchor props
+**Key Props:** `defaultIndex`, `variant` ("line" | "enclosed" | "soft-rounded"), `size`, `colorScheme`, `orientation`
 
-### IconButton
+### Accordion
 
-Button component specifically designed for icons.
+Collapsible accordion component for organizing content.
 
 ```tsx
-import { IconButton } from 'uiplex';
-import { Mail } from 'feather-icons-react';
-
-<IconButton
-  icon={<Mail size={18} />}
-  variant="primary"
-  size="md"
-  aria-label="Send email"
-/>
+import { Accordion, AccordionItem, AccordionButton, AccordionPanel } from 'uiplex';
+
+<Accordion defaultIndex={0} allowMultiple>
+  <AccordionItem index={0}>
+    <AccordionButton index={0}>Item 1</AccordionButton>
+    <AccordionPanel index={0}>Content 1</AccordionPanel>
+  </AccordionItem>
+  <AccordionItem index={1}>
+    <AccordionButton index={1}>Item 2</AccordionButton>
+    <AccordionPanel index={1}>Content 2</AccordionPanel>
+  </AccordionItem>
+</Accordion>
 ```
 
-**Props:**
-- `icon`: `ReactNode` (required)
-- `variant`: `"primary" | "secondary" | "outline" | "ghost"`
-- `size`: `"sm" | "md" | "lg"`
-- `colorScheme`: `"blue" | "green" | "red" | "yellow" | "purple" | "gray"`
-- `disabled`: `boolean`
-- `aria-label`: `string` (required for accessibility)
+**Key Props:** `defaultIndex`, `allowMultiple`, `allowToggle`, `variant` ("default" | "bordered" | "filled"), `size`, `colorScheme`
 
-### CircularProgress
+### Modal
 
-Circular progress indicator for loading states and progress values.
+Modal dialog component for overlays and popups.
 
 ```tsx
-import { CircularProgress, CircularProgressLabel } from 'uiplex';
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from 'uiplex';
 
-<CircularProgress value={75} size={64}>
-  <CircularProgressLabel>75%</CircularProgressLabel>
-</CircularProgress>
-
-<CircularProgress isIndeterminate size={48} />
+function MyComponent() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  
+  return (
+    <>
+      <Button onClick={onOpen}>Open Modal</Button>
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Title</ModalHeader>
+          <ModalBody>Content</ModalBody>
+          <ModalFooter>Footer</ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}
 ```
 
-**Props:**
-- `value`: `number` (0-100)
-- `min`: `number`
-- `max`: `number`
-- `size`: `number | string`
-- `thickness`: `number`
-- `color`: `string`
-- `trackColor`: `string`
-- `isIndeterminate`: `boolean`
-
 ### Tooltip
 
 Contextual information displayed on hover.
@@ -443,52 +241,31 @@ Contextual information displayed on hover.
 ```tsx
 import { Tooltip } from 'uiplex';
 
-<Tooltip label="This is a helpful tooltip" placement="top" width={200}>
+<Tooltip label="Helpful tooltip" placement="top" width={200}>
   <Button>Hover me</Button>
 </Tooltip>
 ```
 
-**Props:**
-- `label`: `string` (required)
-- `placement`: `"top" | "bottom" | "left" | "right"`
-- `width`: `string | number` (for wrapping long text)
-- `isOpen`: `boolean` (controlled)
-- `defaultIsOpen`: `boolean`
-- `closeOnClick`: `boolean`
-
 ### Popover
 
-Floating content container with positioning and triggers.
+Floating content container with positioning.
 
 ```tsx
-import { Popover, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter, PopoverCloseButton } from 'uiplex';
+import { Popover, PopoverContent, PopoverHeader, PopoverBody } from 'uiplex';
 
 <Popover
   content={
     <PopoverContent>
-      <PopoverHeader>Popover Title</PopoverHeader>
-      <PopoverBody>Popover content</PopoverBody>
-      <PopoverFooter>
-        <PopoverCloseButton onClose={handleClose} />
-      </PopoverFooter>
+      <PopoverHeader>Title</PopoverHeader>
+      <PopoverBody>Content</PopoverBody>
     </PopoverContent>
   }
   placement="bottom"
-  trigger="click"
 >
   <Button>Open Popover</Button>
 </Popover>
 ```
 
-**Props:**
-- `content`: `ReactNode` (required)
-- `placement`: `"top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end"`
-- `trigger`: `"click" | "hover"`
-- `isOpen`: `boolean` (controlled)
-- `defaultIsOpen`: `boolean`
-- `closeOnBlur`: `boolean`
-- `showArrow`: `boolean`
-
 ### Toast
 
 Toast notifications for displaying temporary messages.
@@ -496,69 +273,95 @@ Toast notifications for displaying temporary messages.
 ```tsx
 import { Toast, ToastContainerGlobal } from 'uiplex';
 
-// Add ToastContainerGlobal to your root layout
+// Add to root layout
 <ToastContainerGlobal />
 
-// Use Toast static methods
+// Use static methods
 Toast.success("Operation completed!");
 Toast.error("Something went wrong");
-Toast.warning("Please check your input");
+Toast.warning("Please check");
 Toast.info("New update available");
+```
 
-// With options
-Toast.success({
-  title: "Success!",
-  description: "Your changes have been saved.",
-  duration: 3000
-});
+### CircularProgress
+
+Circular progress indicator.
+
+```tsx
+import { CircularProgress, CircularProgressLabel } from 'uiplex';
+
+<CircularProgress value={75} size={64}>
+  <CircularProgressLabel>75%</CircularProgressLabel>
+</CircularProgress>
 ```
 
-**Toast Methods:**
-- `Toast.success(messageOrOptions, options?)`
-- `Toast.error(messageOrOptions, options?)`
-- `Toast.warning(messageOrOptions, options?)`
-- `Toast.info(messageOrOptions, options?)`
-- `Toast.close(id)`
-- `Toast.closeAll()`
+### IconButton
+
+Button component for icons.
+
+```tsx
+import { IconButton } from 'uiplex';
+import { Mail } from 'feather-icons-react';
+
+<IconButton
+  icon={<Mail size={18} />}
+  variant="primary"
+  size="md"
+  aria-label="Send email"
+/>
+```
 
-### FormControl, FormLabel, FormErrorMessage
+### Link
 
-Form control components for building accessible forms.
+Link component with multiple variants.
 
 ```tsx
-import { FormControl, FormLabel, FormErrorMessage } from 'uiplex';
+import { Link } from 'uiplex';
 
-<FormControl isInvalid={hasError} isRequired>
-  <FormLabel>Username</FormLabel>
-  <Input value={username} onChange={handleChange} />
-  <FormErrorMessage>Username is required</FormErrorMessage>
-</FormControl>
+<Link href="/about" variant="primary" size="md">
+  Learn More
+</Link>
+```
+
+### Layout Components
+
+**Box** - Versatile container component
+```tsx
+<Box padding="md" margin="lg" borderRadius="md">Content</Box>
+```
+
+**Flex** - Flexbox layout component
+```tsx
+<Flex direction="row" align="center" justify="space-between" gap="md">
+  <Box>Item 1</Box>
+  <Box>Item 2</Box>
+</Flex>
 ```
 
-**FormControl Props:**
-- `isInvalid`: `boolean`
-- `isDisabled`: `boolean`
-- `isRequired`: `boolean`
+**Grid** - CSS Grid layout component
+```tsx
+<Grid columns={3} gap="md">
+  <Box>Item 1</Box>
+  <Box>Item 2</Box>
+  <Box>Item 3</Box>
+</Grid>
+```
+
+**Text** - Typography component
+```tsx
+<Text size="lg" weight="bold" color="primary">Heading</Text>
+```
 
 ## Hooks
 
 ### useDisclosure
 
-Hook for managing open/close state (useful for modals, popovers, etc.).
+Hook for managing open/close state.
 
 ```tsx
 import { useDisclosure } from 'uiplex';
 
-function MyComponent() {
-  const { isOpen, onOpen, onClose, onToggle } = useDisclosure();
-  
-  return (
-    <>
-      <Button onClick={onOpen}>Open</Button>
-      {isOpen && <Modal onClose={onClose}>Content</Modal>}
-    </>
-  );
-}
+const { isOpen, onOpen, onClose, onToggle } = useDisclosure();
 ```
 
 ### useOutsideClick
@@ -568,31 +371,21 @@ Hook for detecting clicks outside an element.
 ```tsx
 import { useOutsideClick } from 'uiplex';
 
-function MyComponent() {
-  const ref = useRef(null);
-  
-  useOutsideClick({
-    refs: [ref],
-    handler: () => {
-      // Handle outside click
-    }
-  });
-  
-  return <div ref={ref}>Content</div>;
-}
+const ref = useRef(null);
+useOutsideClick({
+  refs: [ref],
+  handler: () => console.log('Clicked outside')
+});
 ```
 
 ## Theme System
 
-The library includes a comprehensive theme system with light, dark, and system preference support.
-
 ### ThemeProvider
 
-Wrap your app with `ThemeProvider` to enable theme functionality:
+Wrap your app with `ThemeProvider`:
 
 ```tsx
-import { ThemeProvider, useTheme } from 'uiplex';
-import 'uiplex/theme.css';
+import { ThemeProvider, useTheme, ThemeToggle } from 'uiplex';
 
 function App() {
   return (
@@ -605,51 +398,23 @@ function App() {
 
 ### useTheme Hook
 
-Access and control the theme in your components:
-
 ```tsx
-import { useTheme } from 'uiplex';
-
-function MyComponent() {
-  const { theme, setTheme, resolvedTheme } = useTheme();
-  
-  return (
-    <div>
-      <p>Current theme: {resolvedTheme}</p>
-      <button onClick={() => setTheme('dark')}>Dark</button>
-      <button onClick={() => setTheme('light')}>Light</button>
-      <button onClick={() => setTheme('system')}>System</button>
-    </div>
-  );
-}
+const { theme, setTheme, resolvedTheme } = useTheme();
 ```
 
 ### ThemeToggle Component
 
-A ready-to-use theme toggle component:
-
 ```tsx
-import { ThemeToggle } from 'uiplex';
-
 <ThemeToggle />
 ```
 
 ## Styling
 
-**CSS is automatically included** when you import components (with modern bundlers like Vite, Webpack 5, Next.js, etc.). The library uses CSS variables for theming.
-
-The bundled CSS includes:
-- Theme CSS variables (light/dark mode support)
-- Button, Loader, Radio styles
-- Text, Box, Flex, Grid layout styles
-- Modal, Input, Textarea, Select, FormControl styles
-- Link, IconButton, CircularProgress styles
-- Tooltip, Toast, Popover styles
-
-All components automatically adapt to the current theme (light/dark) based on CSS variables.
+CSS is automatically included when you import components. The library uses CSS variables for theming and supports light/dark modes.
 
-**If you need to import CSS manually** (for older bundlers or specific setups):
+All components automatically adapt to the current theme based on CSS variables.
 
+**Manual CSS import** (if needed):
 ```tsx
 import 'uiplex/styles.css';
 ```
@@ -658,7 +423,10 @@ import 'uiplex/styles.css';
 
 This library is built with TypeScript and includes full type definitions. All components and their props are fully typed.
 
+## Documentation
+
+For complete documentation, examples, and API references, visit: [https://uiplex.ankitkaushal.in/](https://uiplex.ankitkaushal.in/)
+
 ## License
 
 MIT
-