@stackloop/ui 4.0.7 → 4.0.9

package/README.md

@@ -228,10 +228,10 @@ Call `setupRippleEffects()` only once per app (for example in `main.tsx`) to avo
 **Input**:
 - **Description:** Unified input API with smart type routing. Supports native text/password/email/etc plus `phone`, `country`, and `date` while keeping a consistent `value` + `onChange` pattern.
 - **Props:**
-  - **`type`**: Native HTML input types plus `'phone' | 'country'`.
+  - **`type`**: Native HTML input types plus `'phone' | 'tel' | 'country'`.
     - `type="date"` renders the library `DatePicker`.
     - `type="country"` renders `CountrySelect`.
-    - `type="phone"` renders `PhoneInput`.
+    - `type="phone"` and `type="tel"` render `PhoneInput`.
   - **`value`**: `string | number | readonly string[] | Date`.
   - **`onChange`**: `(value: string | Date) => void` — value-based callback used consistently across smart/native modes.
   - **`onValueChange`**: `(value: string | Date) => void` — optional backward-compatible alias.
@@ -254,10 +254,14 @@ Call `setupRippleEffects()` only once per app (for example in `main.tsx`) to avo
   import { Input } from '@stackloop/ui'
 
   <Input label="Email" placeholder="you@example.com" />
+  <Input label="Phone" type="phone" value={phone} onChange={setPhone} />
+  <Input label="Telephone" type="tel" value={phone} onChange={setPhone} />
   
   // Password with automatic toggle
   <Input label="Password" type="password" placeholder="Enter password" />
 
+
+- **Compatibility note:** Regular HTML input types still render a native `<input />`, so existing usage such as `type="email"`, `type="number"`, and `type="text"` remains unchanged.
   // Phone (single combined value)
   <Input
     label="Phone"
@@ -393,6 +397,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 +608,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:**

package/dist/Input.d.ts

@@ -1,16 +1,39 @@
 import React from 'react';
-type SmartInputType = React.HTMLInputTypeAttribute | 'country' | 'phone';
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {
-    type?: SmartInputType;
-    value?: string | number | readonly string[] | Date;
-    onChange?: (value: string | Date) => void;
-    onValueChange?: (value: string | Date) => void;
+import { DatePicker } from './DatePicker';
+import { CountrySelect } from './CountrySelect';
+import { PhoneInput } from './PhoneInput';
+type InputValue = string | Date;
+type NativeInputType = Exclude<React.HTMLInputTypeAttribute, 'date' | 'phone' | 'country' | 'tel'>;
+type NativeInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> & {
+    type?: NativeInputType;
+    value?: string | number | readonly string[];
+    onChange?: (value: InputValue) => void;
+    onValueChange?: (value: InputValue) => void;
     label?: string;
     error?: string;
     hint?: string;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
     animate?: boolean;
-}
+};
+type PhoneInputFieldProps = Omit<React.ComponentProps<typeof PhoneInput>, 'value' | 'onChange'> & {
+    type: 'phone' | 'tel';
+    value?: string;
+    onChange?: (value: InputValue) => void;
+    onValueChange?: (value: InputValue) => void;
+};
+type CountrySelectInputProps = Omit<React.ComponentProps<typeof CountrySelect>, 'value' | 'onChange'> & {
+    type: 'country';
+    value?: string;
+    onChange?: (value: InputValue) => void;
+    onValueChange?: (value: InputValue) => void;
+};
+type DatePickerInputProps = Omit<React.ComponentProps<typeof DatePicker>, 'value' | 'onChange'> & {
+    type: 'date';
+    value?: Date;
+    onChange?: (value: InputValue) => void;
+    onValueChange?: (value: InputValue) => void;
+};
+export type InputProps = NativeInputProps | PhoneInputFieldProps | CountrySelectInputProps | DatePickerInputProps;
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

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;