@stackloop/ui 3.1.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`, `PhoneInput`, `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.
@@ -257,6 +257,31 @@ Components with the `animate` prop:
   />
   ```
 
+**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>;