uiplex 1.0.0 → 1.0.1

package/README.md

@@ -2,6 +2,8 @@
 
 A modern React component library built with TypeScript, featuring beautiful, accessible, and customizable UI components.
 
+🌐 **Documentation & Live Examples:** [https://uniplex.ankitkaushal.in/](https://uniplex.ankitkaushal.in/)
+
 ## Installation
 
 ```bash
@@ -27,7 +29,7 @@ npm install react react-dom
 CSS is automatically included when you import components! Just import and use:
 
 ```tsx
-import { Button, Loader, Radio, RadioGroup, ThemeProvider } from 'uiplex';
+import { Button, Loader, Radio, RadioGroup, Select, ThemeProvider } from 'uiplex';
 
 function App() {
   return (
@@ -127,6 +129,459 @@ import { Radio, RadioGroup } from 'uiplex';
 - `options`: `Array<{ value: string; label?: string; description?: string; disabled?: boolean }>`
 - `orientation`: `"horizontal" | "vertical"`
 
+### Text
+
+Typography component with sizes, weights, colors, and alignment options.
+
+```tsx
+import { Text } from 'uiplex';
+
+<Text size="lg" weight="bold" color="primary">
+  Heading Text
+</Text>
+
+<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>
+    </>
+  );
+}
+```
+
+**Modal Props:**
+- `isOpen`: `boolean`
+- `onClose`: `() => void`
+- `size`: `"xs" | "sm" | "md" | "lg" | "xl" | "full"`
+- `closeOnOverlayClick`: `boolean`
+- `closeOnEsc`: `boolean`
+
+### Input
+
+Form input component with validation support.
+
+```tsx
+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)}
+  />
+  <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
+
+### Textarea
+
+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)}
+/>
+```
+
+**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.
+
+```tsx
+import { Select, FormControl, FormLabel, FormErrorMessage } 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' },
+  ]}
+  value={value}
+  onChange={(value) => setValue(value)}
+/>
+
+// 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..."
+  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>
+```
+
+**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
+
+### Link
+
+Link component with multiple variants and color schemes.
+
+```tsx
+import { Link } from 'uiplex';
+
+<Link href="/about" variant="primary" size="md">
+  Learn More
+</Link>
+```
+
+**Props:**
+- `variant`: `"primary" | "secondary" | "underline"`
+- `size`: `"sm" | "md" | "lg"`
+- `colorScheme`: `"blue" | "green" | "red" | "yellow" | "purple" | "gray"`
+- All standard HTML anchor props
+
+### IconButton
+
+Button component specifically designed 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"
+/>
+```
+
+**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)
+
+### CircularProgress
+
+Circular progress indicator for loading states and progress values.
+
+```tsx
+import { CircularProgress, CircularProgressLabel } from 'uiplex';
+
+<CircularProgress value={75} size={64}>
+  <CircularProgressLabel>75%</CircularProgressLabel>
+</CircularProgress>
+
+<CircularProgress isIndeterminate size={48} />
+```
+
+**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.
+
+```tsx
+import { Tooltip } from 'uiplex';
+
+<Tooltip label="This is a 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.
+
+```tsx
+import { Popover, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter, PopoverCloseButton } from 'uiplex';
+
+<Popover
+  content={
+    <PopoverContent>
+      <PopoverHeader>Popover Title</PopoverHeader>
+      <PopoverBody>Popover content</PopoverBody>
+      <PopoverFooter>
+        <PopoverCloseButton onClose={handleClose} />
+      </PopoverFooter>
+    </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.
+
+```tsx
+import { Toast, ToastContainerGlobal } from 'uiplex';
+
+// Add ToastContainerGlobal to your root layout
+<ToastContainerGlobal />
+
+// Use Toast static methods
+Toast.success("Operation completed!");
+Toast.error("Something went wrong");
+Toast.warning("Please check your input");
+Toast.info("New update available");
+
+// With options
+Toast.success({
+  title: "Success!",
+  description: "Your changes have been saved.",
+  duration: 3000
+});
+```
+
+**Toast Methods:**
+- `Toast.success(messageOrOptions, options?)`
+- `Toast.error(messageOrOptions, options?)`
+- `Toast.warning(messageOrOptions, options?)`
+- `Toast.info(messageOrOptions, options?)`
+- `Toast.close(id)`
+- `Toast.closeAll()`
+
+### FormControl, FormLabel, FormErrorMessage
+
+Form control components for building accessible forms.
+
+```tsx
+import { FormControl, FormLabel, FormErrorMessage } from 'uiplex';
+
+<FormControl isInvalid={hasError} isRequired>
+  <FormLabel>Username</FormLabel>
+  <Input value={username} onChange={handleChange} />
+  <FormErrorMessage>Username is required</FormErrorMessage>
+</FormControl>
+```
+
+**FormControl Props:**
+- `isInvalid`: `boolean`
+- `isDisabled`: `boolean`
+- `isRequired`: `boolean`
+
+## Hooks
+
+### useDisclosure
+
+Hook for managing open/close state (useful for modals, popovers, etc.).
+
+```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>}
+    </>
+  );
+}
+```
+
+### useOutsideClick
+
+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>;
+}
+```
+
 ## Theme System
 
 The library includes a comprehensive theme system with light, dark, and system preference support.
@@ -185,9 +640,11 @@ import { ThemeToggle } from 'uiplex';
 
 The bundled CSS includes:
 - Theme CSS variables (light/dark mode support)
-- Button styles
-- Loader styles  
-- Radio styles
+- 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.
 

package/dist/Select/Select.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import "./Select.css";
+export interface SelectOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    size?: "sm" | "md" | "lg";
+    variant?: "outline" | "filled" | "unstyled";
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    options?: SelectOption[];
+    placeholder?: string;
+    value?: string | number | (string | number)[];
+    defaultValue?: string | number | (string | number)[];
+    onChange?: (value: string | number | (string | number)[]) => void;
+    mode?: "single" | "multiple";
+    searchable?: boolean;
+    allowClear?: boolean;
+    width?: string | number;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+}
+export declare const Select: React.FC<SelectProps>;
+//# sourceMappingURL=Select.d.ts.map

package/dist/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAGxE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IACrD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;IAClE,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsZxC,CAAC"}

package/dist/Select/index.d.ts

@@ -0,0 +1,3 @@
+export { Select } from "./Select";
+export type { SelectProps, SelectOption } from "./Select";
+//# sourceMappingURL=index.d.ts.map

package/dist/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC"}

package/dist/Tooltip/Tooltip.d.ts

@@ -7,6 +7,7 @@ export interface TooltipProps {
     isOpen?: boolean;
     defaultIsOpen?: boolean;
     closeOnClick?: boolean;
+    width?: string | number;
     className?: string;
     style?: React.CSSProperties;
 }

package/dist/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiE1C,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA2E1C,CAAC"}