@stackloop/ui 4.0.0 → 4.0.2

package/README.md

@@ -165,6 +165,33 @@ Components with the `animate` prop:
 
 - `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`
 
+## Ripple Behavior
+
+Ripple effects are **opt-in**. Initialize them once in your app entry file.
+
+```tsx
+// main.tsx or index.tsx
+import { setupRippleEffects } from '@stackloop/ui'
+
+setupRippleEffects()
+```
+
+After setup, ripple can apply to interactive elements (`button`, `a`, `[role="button"]`, and elements with `data-ripple="true"`).
+
+- Disable ripple for a specific element:
+
+  ```html
+  <button data-ripple="false">No ripple</button>
+  ```
+
+- Force ripple on a custom/non-button element:
+
+  ```html
+  <div role="button" data-ripple="true">Ripple enabled</div>
+  ```
+
+Call `setupRippleEffects()` only once per app (for example in `main.tsx`) to avoid duplicate global listeners.
+
 **Checkbox**:
 - **Description:** Accessible checkbox with optional label and description.
 - **Props:**

package/dist/FloatingPortal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface FloatingPortalProps {
+    open: boolean;
+    anchorRef: React.RefObject<HTMLElement | null>;
+    placement: 'top' | 'bottom';
+    children: React.ReactNode;
+    className?: string;
+    offset?: number;
+    matchWidth?: boolean;
+}
+export declare const FloatingPortal: React.FC<FloatingPortalProps>;
+export {};