goey-toast 0.1.4 → 0.2.0

package/README.md

@@ -11,10 +11,13 @@
 - Promise toasts with loading → success/error transitions
 - Action buttons with optional success label morph-back
 - Description body supporting strings and React components
-- Configurable timing for expand delay, morph duration, collapse, and display
+- Configurable display duration and bounce intensity
 - Custom fill color, border color, and border width
 - CSS class overrides via `classNames` prop
-- Position support with automatic horizontal mirroring for right-side positions
+- 6 positions with automatic horizontal mirroring for right-side positions
+- Center positions with symmetric morph animation
+- Hover pause: hovering an expanded toast pauses the dismiss timer
+- Hover re-expand: hovering a collapsed pill re-expands the toast
 - Pre-dismiss collapse animation
 
 ## Installation
@@ -103,6 +106,8 @@ Options passed as the second argument to `goeyToast()` and type-specific methods
 | `borderColor` | `string`             | Border color of the blob           |
 | `borderWidth` | `number`             | Border width in px (default 1.5)   |
 | `timing`      | `GoeyToastTimings`   | Animation timing overrides         |
+| `spring`      | `boolean`            | Enable spring/bounce animations (default `true`) |
+| `bounce`      | `number`             | Spring intensity from `0.05` (subtle) to `0.8` (dramatic), default `0.4` |
 
 ### `GoeyToastAction`
 
@@ -118,9 +123,6 @@ Fine-tune animation speeds per toast.
 
 | Property           | Type     | Default | Description                          |
 | ------------------ | -------- | ------- | ------------------------------------ |
-| `expandDelay`      | `number` | 330     | Milliseconds before expand starts    |
-| `expandDuration`   | `number` | 0.9     | Seconds for pill-to-blob morph       |
-| `collapseDuration` | `number` | 0.9     | Seconds for blob-to-pill morph       |
 | `displayDuration`  | `number` | 4000    | Milliseconds toast stays expanded    |
 
 ### `GoeyToastClassNames`
@@ -144,12 +146,14 @@ Props for the `<GoeyToaster />` component.
 
 | Prop         | Type                                  | Default          | Description                                   |
 | ------------ | ------------------------------------- | ---------------- | --------------------------------------------- |
-| `position`   | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'bottom-right'` | Toast position (right-side positions auto-mirror the blob) |
+| `position`   | `'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'` | `'bottom-right'` | Toast position |
 | `duration`   | `number`                              | --               | Default display duration in ms                |
 | `gap`        | `number`                              | `14`             | Gap between stacked toasts (px)               |
 | `offset`     | `number \| string`                    | `'24px'`         | Distance from screen edge                     |
 | `theme`      | `'light' \| 'dark'`                   | `'light'`        | Color theme                                   |
 | `toastOptions` | `Partial<ExternalToast>`            | --               | Default options passed to Sonner              |
+| `spring`     | `boolean`                             | `true`           | Enable spring/bounce animations globally      |
+| `bounce`     | `number`                              | `0.4`            | Spring intensity: `0.05` (subtle) to `0.8` (dramatic) |
 
 ### `GoeyPromiseData<T>`
 
@@ -167,6 +171,8 @@ Configuration for `goeyToast.promise()`.
 | `borderColor` | `string`                                      | No       | Border color of the blob                       |
 | `borderWidth` | `number`                                      | No       | Border width in px                             |
 | `timing`      | `GoeyToastTimings`                            | No       | Animation timing overrides                     |
+| `spring`      | `boolean`                                     | No       | Enable spring/bounce animations (default `true`) |
+| `bounce`      | `number`                                      | No       | Spring intensity: `0.05` (subtle) to `0.8` (dramatic), default `0.4` |
 
 **`description` sub-fields:**
 
@@ -259,20 +265,52 @@ goeyToast.success('Styled!', {
 })
 ```
 
-### Custom Timing
+### Display Duration
 
 ```tsx
 goeyToast.success('Saved', {
   description: 'Your changes have been synced.',
-  timing: {
-    expandDelay: 200,
-    expandDuration: 0.6,
-    collapseDuration: 0.6,
-    displayDuration: 5000,
-  },
+  timing: { displayDuration: 5000 },
+})
+```
+
+### Disabling Spring Animations
+
+Disable bounce/spring animations for a cleaner, more subtle look:
+
+```tsx
+// Per-toast: disable spring for this toast only
+goeyToast.success('Saved', {
+  description: 'Your changes have been synced.',
+  spring: false,
 })
+
+// Globally: disable spring for all toasts
+<GoeyToaster spring={false} />
 ```
 
+When `spring` is `false`, all spring-based animations (landing squish, blob squish, morph transitions, pill resize, header squish) use smooth ease-in-out curves instead. Error shake animations still work regardless of this setting.
+
+### Bounce Intensity
+
+Control how dramatic the spring effect feels with a single `bounce` value:
+
+```tsx
+// Subtle, barely-there spring
+goeyToast.success('Saved', { bounce: 0.1 })
+
+// Default feel
+goeyToast.success('Saved', { bounce: 0.4 })
+
+// Jelly mode
+goeyToast.success('Saved', { bounce: 0.8 })
+
+// Set globally via GoeyToaster
+<GoeyToaster bounce={0.6} />
+```
+
+The `bounce` value (0.05 to 0.8) controls spring stiffness, damping, and squish magnitude together so you get a consistent feel from one number.
+
 ## Exports
 
 ```ts