luna-components-library 1.1.51 → 1.1.52

package/README.md

@@ -33,7 +33,8 @@ Luna Library is fully standalone. All styles are encapsulated within the compone
 import { useState } from 'react';
 import { 
   Button, Input, Card, Typed, Accordion, ProgressBar, Spinner, 
-  Preloader, ScrollTop, Modal, WhatsApp, DataTable
+  Preloader, ScrollTop, Modal, WhatsApp, DataTable,
+  Toast, MultiSelect, Popconfirm, QRCode, FloatingButton
 } from 'luna-components-library';
 
 function App() {
@@ -842,9 +843,191 @@ interface DataTableColumn {
 }
 ```
 
+### Toast
+A notification component with severity levels, auto-dismiss, and animated entry/exit.
 
+```jsx
+const [visible, setVisible] = useState(false);
+
+<Toast
+  visible={visible}
+  severity="success"
+  summary="Saved!"
+  detail="Your changes have been saved."
+  life={3000}
+  position="top-right"
+  onClose={() => setVisible(false)}
+/>
+```
+
+**Props:**
+- `visible: boolean` - Whether the toast is shown
+- `onClose: () => void` - Called when the toast is dismissed
+- `severity?: ToastSeverity` - Visual style (default: `'info'`)
+- `summary?: string` - Bold title text
+- `detail?: string` - Body text
+- `life?: number` - Auto-dismiss delay in ms (no auto-dismiss if omitted)
+- `position?: ToastPosition` - Screen position (default: `'top-right'`)
+- `classNames?: ToastClassNames` - Custom class names per sub-element
+- `styles?: ToastStyles` - Custom inline styles per sub-element
+- `className?: string` - Additional CSS classes
+
+**Types:**
+```typescript
+type ToastSeverity = 'success' | 'info' | 'warn' | 'error';
+type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+```
+
+### MultiSelect
+A multi-value dropdown with chip display, search filter, and select-all support.
+
+```jsx
+const [selected, setSelected] = useState([]);
+
+<MultiSelect
+  options={[
+    { label: 'React', value: 'react' },
+    { label: 'Vue', value: 'vue' },
+    { label: 'Angular', value: 'angular' },
+  ]}
+  value={selected}
+  onChange={setSelected}
+  placeholder="Select frameworks"
+  display="chip"
+  filter
+  selectAll
+/>
+```
+
+**Props:**
+- `options: MultiSelectOption[]` - Array of options
+- `value: any[]` - Array of selected values
+- `onChange: (value: any[]) => void` - Selection change handler
+- `placeholder?: string` - Placeholder text (default: `'Select Items'`)
+- `display?: 'comma' | 'chip'` - How selected values are shown (default: `'comma'`)
+- `filter?: boolean` - Show search input (default: `true`)
+- `filterPlaceholder?: string` - Search input placeholder (default: `'Search...'`)
+- `selectAll?: boolean` - Show select-all checkbox (default: `true`)
+- `maxSelectedLabels?: number` - Max labels before showing count (default: `3`)
+- `disabled?: boolean` - Disable the component (default: `false`)
+- `classNames?: MultiSelectClassNames` - Custom class names per sub-element
+- `styles?: MultiSelectStyles` - Custom inline styles per sub-element
+- `className?: string` - Additional CSS classes
+- `id?: string` - HTML id
 
+**MultiSelectOption Interface:**
+```typescript
+interface MultiSelectOption {
+  label: string;
+  value: any;
+  disabled?: boolean;
+}
+```
 
+### Popconfirm
+A confirmation popover that wraps any trigger element and asks for user confirmation before proceeding.
+
+```jsx
+<Popconfirm
+  title="Delete this item?"
+  description="This action cannot be undone."
+  onConfirm={handleDelete}
+  onCancel={() => console.log('Cancelled')}
+  okText="Delete"
+  cancelText="Cancel"
+  position="top"
+>
+  <Button variant="danger">Delete</Button>
+</Popconfirm>
+```
+
+**Props:**
+- `title: React.ReactNode` - Confirmation question
+- `children: React.ReactElement` - Trigger element (any clickable component)
+- `onConfirm: () => void` - Called when user confirms
+- `description?: React.ReactNode` - Optional secondary text
+- `onCancel?: () => void` - Called when user cancels
+- `okText?: string` - Confirm button label (default: `'Yes'`)
+- `cancelText?: string` - Cancel button label (default: `'No'`)
+- `position?: PopconfirmPosition` - Popover placement (default: `'top'`)
+- `disabled?: boolean` - Prevent popover from opening (default: `false`)
+- `classNames?: PopconfirmClassNames` - Custom class names per sub-element
+- `styles?: PopconfirmStyles` - Custom inline styles per sub-element
+- `className?: string` - Additional CSS classes
+
+**Types:**
+```typescript
+type PopconfirmPosition = 'top' | 'bottom' | 'left' | 'right';
+```
+
+### QRCode
+Generates a QR code image for any string value using the QRServer API (zero client-side dependencies).
+
+```jsx
+<QRCode
+  value="https://luna-components-demo.netlify.app"
+  size={200}
+  color="#000000"
+  bgColor="#ffffff"
+  bordered
+  errorCorrectionLevel="M"
+/>
+```
+
+**Props:**
+- `value: string` - The data to encode in the QR code
+- `size?: number` - Width and height in pixels (default: `160`)
+- `color?: string` - Foreground color hex (default: `'000000'`)
+- `bgColor?: string` - Background color hex (default: `'ffffff'`)
+- `bordered?: boolean` - Show a border around the QR (default: `true`)
+- `errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H'` - Error correction level (default: `'M'`)
+- `classNames?: QRCodeClassNames` - Custom class names per sub-element
+- `styles?: QRCodeStyles` - Custom inline styles per sub-element
+- `className?: string` - Additional CSS classes
+
+### FloatingButton
+A fixed-position button that can appear on scroll or always be visible, useful for floating action buttons.
+
+```jsx
+// Always visible
+<FloatingButton
+  position="bottom-right"
+  visible={true}
+  onClick={handleClick}
+  backgroundColor="#2563eb"
+  color="#ffffff"
+>
+  <PlusIcon />
+</FloatingButton>
+
+// Appears after scrolling
+<FloatingButton
+  position="middle-right"
+  threshold={300}
+  onClick={handleClick}
+>
+  <ChatIcon />
+</FloatingButton>
+```
+
+**Props:**
+- `children: React.ReactNode` - Button content
+- `position?: FloatingPosition` - Screen position (default: `'bottom-right'`)
+- `visible?: boolean` - Force visibility regardless of scroll (default: `false`)
+- `threshold?: number` - Scroll distance before appearing (default: `100`)
+- `size?: number` - Button size in pixels (default: `48`)
+- `backgroundColor?: string` - Background color (default: `'#2563eb'`)
+- `color?: string` - Icon/text color (default: `'#ffffff'`)
+- `zIndex?: number` - Z-index (default: `1000`)
+- `onClick?: () => void` - Click handler
+- `className?: string` - Additional CSS classes
+- `style?: React.CSSProperties` - Custom inline styles
+- `aria-label?: string` - Accessibility label
+
+**Types:**
+```typescript
+type FloatingPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'middle-right' | 'middle-left';
+```
 
 ## 🛠️ Utilities & Hooks
 
@@ -1107,8 +1290,12 @@ luna-library/
 │   │   ├── Button.tsx
 │   │   ├── Card.tsx
 │   │   ├── DataTable.tsx
+│   │   ├── FloatingButton.tsx
+│   │   ├── MultiSelect.tsx
+│   │   ├── Popconfirm.tsx
+│   │   ├── QRCode.tsx
+│   │   ├── Toast.tsx
 │   │   ├── ... (Other UI Components)
-
 │   │   └── index.ts
 │   ├── styles.ts                 # Design tokens and shared style functions
 │   ├── types.ts                  # Shared TypeScript types

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luna-components-library",
-  "version": "1.1.51",
+  "version": "1.1.52",
   "description": "A React component library with TypeScript support",
   "main": "dist/luna-components-library.js",
   "module": "dist/luna-components-library.js",