@stackloop/ui 4.0.6 → 4.0.8

package/README.md

@@ -393,6 +393,10 @@ Call `setupRippleEffects()` only once per app (for example in `main.tsx`) to avo
   - **`loading`**: `boolean` — optional. Shows animated skeleton loading state when true.
   - **`onRowClick`**: `(item: T) => void` — optional. Callback fired when a row is clicked. Adds hover effect and pointer cursor to rows.
   - **`keyExtractor`**: `(item: T) => string` — required. Function to extract unique key from each data item for React reconciliation.
+  - **`selectable`**: `boolean` — optional (default: `false`). Adds a checkbox column with header-level select all and per-row selection.
+  - **`selectedKeys`**: `string[]` — optional. Controlled selected row keys.
+  - **`defaultSelectedKeys`**: `string[]` — optional. Initial selected row keys for uncontrolled mode.
+  - **`onSelectionChange`**: `(selectedKeys: string[], selectedItems: T[]) => void` — optional. Fires whenever selection changes.
   - **`className`**: `string` — optional. Additional CSS classes for the table wrapper.
 
 - **Column Interface:**
@@ -600,6 +604,25 @@ Call `setupRippleEffects()` only once per app (for example in `main.tsx`) to avo
   />
   ```
 
+- **Selection Example:**
+
+  ```jsx
+  const [selectedRows, setSelectedRows] = useState([])
+
+  <Table
+    data={users}
+    columns={columns}
+    keyExtractor={(user) => String(user.id)}
+    selectable
+    selectedKeys={selectedRows}
+    onSelectionChange={(keys, items) => {
+      setSelectedRows(keys)
+      console.log('Selected row IDs:', keys)
+      console.log('Selected row objects:', items)
+    }}
+  />
+  ```
+
 **Dropdown**:
 - **Description:** General-purpose select component with optional search, clear, and icons. Use this for general UI selections outside of forms. For form-specific needs with validation, use the **Select** component instead.
 - **Props:**
@@ -616,6 +639,32 @@ Call `setupRippleEffects()` only once per app (for example in `main.tsx`) to avo
   <Dropdown options={[{value:'a',label:'A'}]} value={val} onChange={setVal} searchable />
   ```
 
+**Tooltip**:
+- **Description:** Portal-based tooltip for short hints and context text. It renders outside normal layout flow (so it does not affect element positioning), supports top/bottom/left/right placement, auto-flips when space is limited, and stays visible above overflow-clipped containers.
+- **Props:**
+  - **`children`**: `ReactNode` — required. Trigger element.
+  - **`content`**: `ReactNode` — required. Tooltip body.
+  - **`side`**: `'top' | 'bottom' | 'left' | 'right'` — preferred side (default: `'bottom'`).
+  - **`offset`**: `number` — gap between trigger and tooltip (default: `10`).
+  - **`delay`**: `number` — open delay in ms (default: `120`).
+  - **`showArrow`**: `boolean` — default: `true`.
+  - **`arrowSize`**: `number` — default: `10`.
+  - **`open`**, **`defaultOpen`**, **`onOpenChange`** — controlled/uncontrolled visibility.
+  - **`className`**, **`arrowClassName`**, **`disabled`** — optional styling/behavior controls.
+- **Usage:**
+
+  ```jsx
+  import { Tooltip, Button } from '@stackloop/ui'
+
+  <Tooltip content="More actions">
+    <Button variant="ghost">Hover me</Button>
+  </Tooltip>
+
+  <Tooltip content="Delete item" side="top" showArrow>
+    <Button variant="danger">Delete</Button>
+  </Tooltip>
+  ```
+
 **Select**:
 - **Description:** **Form-specific** select component with label, error, hint, and validation support. Specifically designed for use in forms with proper semantics, accessibility, and validation integration. Use this component when building forms. For general UI selections (navigation, filters, etc.), use the **Dropdown** component instead. Based on Dropdown but includes form-specific features like `required` prop, hint text, and better integration with form libraries (React Hook Form, Formik, etc.).
 - **Props:**

package/dist/Table.d.ts

@@ -13,7 +13,11 @@ export interface TableProps<T> {
     loading?: boolean;
     onRowClick?: (item: T) => void;
     keyExtractor: (item: T) => string;
+    selectable?: boolean;
+    selectedKeys?: string[];
+    defaultSelectedKeys?: string[];
+    onSelectionChange?: (selectedKeys: string[], selectedItems: T[]) => void;
     className?: string;
     animate?: boolean;
 }
-export declare function Table<T>({ data, columns, loading, onRowClick, keyExtractor, className, animate }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<T>({ data, columns, loading, onRowClick, keyExtractor, selectable, selectedKeys, defaultSelectedKeys, onSelectionChange, className, animate }: TableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/Tooltip.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
+export interface TooltipProps {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    side?: TooltipSide;
+    offset?: number;
+    delay?: number;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    showArrow?: boolean;
+    arrowSize?: number;
+    arrowClassName?: string;
+}
+export declare const Tooltip: React.FC<TooltipProps>;
+export {};