@stackloop/ui 2.4.3 → 3.1.0

package/README.md

@@ -147,6 +147,24 @@ You can add dark mode variants:
 
 - For each component below you'll find a short description, props (type, default, notes) and a minimal usage example.
 
+## Animation Control
+
+Most components support an `animate?: boolean` prop to enable or disable built-in Framer Motion animations. The default is `true`.
+
+```jsx
+import { Button, Modal } from '@stackloop/ui'
+
+<Button animate={false}>No animation</Button>
+
+<Modal isOpen={open} onClose={() => setOpen(false)} animate={false}>
+  ...
+</Modal>
+```
+
+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`
+
 **Checkbox**:
 - **Description:** Accessible checkbox with optional label and description.
 - **Props:**
@@ -212,6 +230,33 @@ You can add dark mode variants:
   />
   ```
 
+**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
+  />
+  ```
+
 **Modal**:
 - **Description:** Centered modal with backdrop, title and Escape-to-close handling.
 - **Props:**

package/dist/AudioRecorder.d.ts

@@ -5,5 +5,6 @@ export interface AudioRecorderProps {
     maxDuration?: number;
     disabled?: boolean;
     className?: string;
+    animate?: boolean;
 }
 export declare const AudioRecorder: React.FC<AudioRecorderProps>;

package/dist/Badge.d.ts

@@ -7,6 +7,7 @@ export interface BadgeProps {
     size?: BadgeSize;
     className?: string;
     dot?: boolean;
+    animate?: boolean;
 }
 export declare const Badge: React.FC<BadgeProps>;
 export {};

package/dist/BottomSheet.d.ts

@@ -6,5 +6,6 @@ export interface BottomSheetProps {
     children: React.ReactNode;
     showCloseButton?: boolean;
     className?: string;
+    animate?: boolean;
 }
 export declare const BottomSheet: React.FC<BottomSheetProps>;

package/dist/Button.d.ts

@@ -5,6 +5,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     size?: 'sm' | 'md' | 'lg';
     loading?: boolean;
     icon?: React.ReactNode;
+    animate?: boolean;
 }
 type MotionButtonProps = Omit<ButtonProps, 'children' | keyof HTMLMotionProps<'button'>> & {
     children?: React.ReactNode;

package/dist/Card.d.ts

@@ -6,6 +6,7 @@ export interface CardProps {
     className?: string;
     onClick?: () => void;
     hover?: boolean;
+    animate?: boolean;
 }
 export declare const Card: React.FC<CardProps>;
 export declare const CardHeader: React.FC<{

package/dist/Checkbox.d.ts

@@ -3,5 +3,6 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     label?: string;
     description?: string;
     onChange?: (checked: boolean) => void;
+    animate?: boolean;
 }
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/DatePicker.d.ts

@@ -9,5 +9,6 @@ export interface DatePickerProps {
     minDate?: Date;
     maxDate?: Date;
     className?: string;
+    animate?: boolean;
 }
 export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/Drawer.d.ts

@@ -6,5 +6,6 @@ export interface DrawerProps {
     title?: string;
     position?: 'left' | 'right';
     className?: string;
+    animate?: boolean;
 }
 export declare const Drawer: React.FC<DrawerProps>;

package/dist/Dropdown.d.ts

@@ -15,5 +15,6 @@ export interface DropdownProps {
     clearable?: boolean;
     disabled?: boolean;
     className?: string;
+    animate?: boolean;
 }
 export declare const Dropdown: React.FC<DropdownProps>;

package/dist/DualSlider.d.ts

@@ -11,5 +11,6 @@ export interface DualSliderProps {
     unit?: string;
     disabled?: boolean;
     className?: string;
+    animate?: boolean;
 }
 export declare const DualSlider: React.FC<DualSliderProps>;

package/dist/FileUpload.d.ts

@@ -6,6 +6,7 @@ export interface CameraCaptureProps {
     label?: string;
     disabled?: boolean;
     className?: string;
+    animate?: boolean;
 }
 export declare const CameraCapture: React.FC<CameraCaptureProps>;
 export interface FileUploaderProps {
@@ -15,5 +16,6 @@ export interface FileUploaderProps {
     label?: string;
     disabled?: boolean;
     className?: string;
+    animate?: boolean;
 }
 export declare const FileUploader: React.FC<FileUploaderProps>;

package/dist/FloatingActionButton.d.ts

@@ -16,6 +16,7 @@ export interface FloatingActionButtonProps {
     position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
     disabled?: boolean;
     className?: string;
+    animate?: boolean;
 }
 export declare const FloatingActionButton: React.FC<FloatingActionButtonProps>;
 export declare const FAB: React.FC<FloatingActionButtonProps>;

package/dist/Input.d.ts

@@ -5,5 +5,6 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
     hint?: string;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
+    animate?: boolean;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/Modal.d.ts

@@ -6,6 +6,7 @@ export interface ModalProps {
     title?: string;
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
     className?: string;
+    animate?: boolean;
 }
 export declare const Modal: React.FC<ModalProps>;
 export declare const ModalContent: React.FC<{

package/dist/Pagination.d.ts

@@ -6,5 +6,6 @@ export interface PaginationProps {
     totalItems?: number;
     itemsPerPage?: number;
     className?: string;
+    animate?: boolean;
 }
 export declare const Pagination: React.FC<PaginationProps>;

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/RadioPills.d.ts

@@ -10,5 +10,6 @@ export interface RadioPillsProps {
     name: string;
     disabled?: boolean;
     className?: string;
+    animate?: boolean;
 }
 export declare const RadioPills: React.FC<RadioPillsProps>;

package/dist/Select.d.ts

@@ -16,5 +16,6 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
     searchable?: boolean;
     clearable?: boolean;
     className?: string;
+    animate?: boolean;
 }
 export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Slider.d.ts

@@ -10,5 +10,6 @@ export interface SliderProps {
     unit?: string;
     disabled?: boolean;
     className?: string;
+    animate?: boolean;
 }
 export declare const Slider: React.FC<SliderProps>;

package/dist/Spinner.d.ts

@@ -4,5 +4,6 @@ export interface SpinnerProps {
     variant?: 'primary' | 'secondary' | 'white';
     className?: string;
     label?: string;
+    animate?: boolean;
 }
 export declare const Spinner: React.FC<SpinnerProps>;

package/dist/StatusBadges.d.ts

@@ -2,11 +2,13 @@ import React from 'react';
 export interface OfflineBadgeProps {
     isOffline: boolean;
     className?: string;
+    animate?: boolean;
 }
 export declare const OfflineBadge: React.FC<OfflineBadgeProps>;
 export interface SyncIndicatorProps {
     status: 'synced' | 'syncing' | 'unsynced' | 'error';
     count?: number;
     className?: string;
+    animate?: boolean;
 }
 export declare const SyncIndicator: React.FC<SyncIndicatorProps>;

package/dist/StepProgress.d.ts

@@ -7,5 +7,6 @@ export interface StepProgressProps {
     steps: Step[];
     currentStep: number;
     className?: string;
+    animate?: boolean;
 }
 export declare const StepProgress: React.FC<StepProgressProps>;

package/dist/Table.d.ts

@@ -14,5 +14,6 @@ export interface TableProps<T> {
     onRowClick?: (item: T) => void;
     keyExtractor: (item: T) => string;
     className?: string;
+    animate?: boolean;
 }
-export declare function Table<T>({ data, columns, loading, onRowClick, keyExtractor, className }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<T>({ data, columns, loading, onRowClick, keyExtractor, className, animate }: TableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/Textarea.d.ts

@@ -3,5 +3,6 @@ export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     label?: string;
     error?: string;
     helperText?: string;
+    animate?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/ThumbnailGrid.d.ts

@@ -12,5 +12,6 @@ export interface ThumbnailGridProps {
     onView?: (item: ThumbnailItem) => void;
     columns?: 2 | 3 | 4;
     className?: string;
+    animate?: boolean;
 }
 export declare const ThumbnailGrid: React.FC<ThumbnailGridProps>;

package/dist/Toast.d.ts

@@ -21,6 +21,7 @@ interface ToastProviderProps {
     children: React.ReactNode;
     position?: ToastPosition;
     maxToasts?: number;
+    animate?: boolean;
 }
 export declare const ToastProvider: React.FC<ToastProviderProps>;
 export {};

package/dist/Toggle.d.ts

@@ -3,5 +3,6 @@ export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     label?: string;
     description?: string;
     onChange?: (checked: boolean) => void;
+    animate?: boolean;
 }
 export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

package/dist/countries.d.ts

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