@stackloop/ui 3.0.0 → 3.2.0

package/README.md

@@ -163,7 +163,7 @@ import { Button, Modal } from '@stackloop/ui'
 
 Components with the `animate` prop:
 
-- `AudioRecorder`, `Badge`, `BottomSheet`, `Button`, `Card`, `CameraCapture`, `Checkbox`, `DatePicker`, `Drawer`, `Dropdown`, `DualSlider`, `FileUploader`, `FloatingActionButton`, `Input`, `Modal`, `Pagination`, `RadioPills`, `Select`, `Slider`, `Spinner`, `StepProgress`, `Table`, `Textarea`, `ThumbnailGrid`, `Toggle`, `ToastProvider`
+- `AudioRecorder`, `Badge`, `BottomSheet`, `Button`, `Card`, `CameraCapture`, `Checkbox`, `CountrySelect`, `DatePicker`, `Drawer`, `Dropdown`, `DualSlider`, `FileUploader`, `FloatingActionButton`, `Input`, `Modal`, `Pagination`, `PhoneInput`, `RadioPills`, `Select`, `Slider`, `Spinner`, `StepProgress`, `Table`, `Textarea`, `ThumbnailGrid`, `Toggle`, `ToastProvider`
 
 **Checkbox**:
 - **Description:** Accessible checkbox with optional label and description.
@@ -230,6 +230,58 @@ Components with the `animate` prop:
   />
   ```
 
+**PhoneInput**:
+- **Description:** Phone number input with a country calling code selector and optional locale-based default.
+- **Props:**
+  - **`value`**: `string` — optional.
+  - **`onChange`**: `(value: string) => void` — optional.
+  - **`country`**: `string` — optional ISO2 override (e.g. `US`).
+  - **`defaultCountry`**: `string` — default: `'US'`.
+  - **`autoDetect`**: `boolean` — default: `true`. Uses `navigator.language` to select a country.
+  - **`onCountryChange`**: `(country: Country) => void` — optional.
+  - **`searchable`**: `boolean` — default: `true`.
+  - **`showFlags`**: `boolean` — default: `true`.
+  - **`animate`**: `boolean` — default: `true`.
+  - Inherits standard `input` HTML attributes.
+- **Usage:**
+
+  ```jsx
+  import { PhoneInput } from '@stackloop/ui'
+
+  <PhoneInput
+    label="Phone"
+    value={phone}
+    onChange={setPhone}
+    searchable
+    autoDetect
+  />
+  ```
+
+**CountrySelect**:
+- **Description:** Country selector built on `Select` with optional flags and search.
+- **Props:**
+  - **`value`**: `string` — optional (ISO2, e.g. `US`).
+  - **`onChange`**: `(value: string) => void` — optional.
+  - **`onCountryChange`**: `(country: Country) => void` — optional.
+  - **`label`**: `string` — optional.
+  - **`placeholder`**: `string` — optional.
+  - **`searchable`**: `boolean` — default: `true`.
+  - **`clearable`**: `boolean` — default: `true`.
+  - **`showFlags`**: `boolean` — default: `true`.
+  - **`animate`**: `boolean` — default: `true`.
+- **Usage:**
+
+  ```jsx
+  import { CountrySelect } from '@stackloop/ui'
+
+  <CountrySelect
+    label="Country"
+    value={country}
+    onChange={setCountry}
+    searchable
+  />
+  ```
+
 **Modal**:
 - **Description:** Centered modal with backdrop, title and Escape-to-close handling.
 - **Props:**

package/dist/CountrySelect.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type Country } from './countries';
+export interface CountrySelectProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    onCountryChange?: (country: Country) => void;
+    label?: string;
+    placeholder?: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    showFlags?: boolean;
+    disabled?: boolean;
+    animate?: boolean;
+    className?: string;
+}
+export declare const CountrySelect: React.FC<CountrySelectProps>;

package/dist/PhoneInput.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type Country } from './countries';
+export interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    value?: string;
+    onChange?: (value: string) => void;
+    country?: string;
+    defaultCountry?: string;
+    autoDetect?: boolean;
+    onCountryChange?: (country: Country) => void;
+    label?: string;
+    error?: string;
+    hint?: string;
+    searchable?: boolean;
+    showFlags?: boolean;
+    animate?: boolean;
+    className?: string;
+}
+export declare const PhoneInput: React.FC<PhoneInputProps>;

package/dist/countries.d.ts

@@ -0,0 +1,6 @@
+export interface Country {
+    iso2: string;
+    name: string;
+    dialCode: string;
+}
+export declare const countries: Country[];