goey-toast 0.2.2 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
- # goey-toast
1
+ # gooey-toast
2
2
 
3
- [![goey-toast](https://goey-toast.vercel.app/og-image.png)](https://goey-toast.vercel.app)
3
+ [![gooey-toast](https://goey-toast.vercel.app/og-image.png)](https://goey-toast.vercel.app)
4
4
 
5
5
  **[Live Demo & Docs](https://goey-toast.vercel.app)**
6
6
 
@@ -19,8 +19,8 @@
19
19
  - Hover pause: hovering an expanded toast pauses the dismiss timer
20
20
  - Hover re-expand: hovering a collapsed pill re-expands the toast
21
21
  - Pre-dismiss collapse animation
22
- - In-place toast updates via `goeyToast.update()`
23
- - Dismiss by type filter: `goeyToast.dismiss({ type: 'error' })`
22
+ - In-place toast updates via `gooeyToast.update()`
23
+ - Dismiss by type filter: `gooeyToast.dismiss({ type: 'error' })`
24
24
  - Dark mode and RTL layout support
25
25
  - Animation presets: smooth, bouncy, subtle, snappy
26
26
  - Timestamp display on expanded toasts
@@ -70,14 +70,14 @@ Add this import once in your app's entry point (e.g., `main.tsx` or `App.tsx`).
70
70
  ## Quick Start
71
71
 
72
72
  ```tsx
73
- import { GoeyToaster, goeyToast } from 'goey-toast'
73
+ import { GooeyToaster, gooeyToast } from 'goey-toast'
74
74
  import 'goey-toast/styles.css'
75
75
 
76
76
  function App() {
77
77
  return (
78
78
  <>
79
- <GoeyToaster position="bottom-right" />
80
- <button onClick={() => goeyToast.success('Saved!')}>
79
+ <GooeyToaster position="bottom-right" />
80
+ <button onClick={() => gooeyToast.success('Saved!')}>
81
81
  Save
82
82
  </button>
83
83
  </>
@@ -87,30 +87,30 @@ function App() {
87
87
 
88
88
  ## API Reference
89
89
 
90
- ### `goeyToast` Methods
90
+ ### `gooeyToast` Methods
91
91
 
92
92
  ```ts
93
- goeyToast(title, options?) // default (neutral)
94
- goeyToast.success(title, options?) // green
95
- goeyToast.error(title, options?) // red
96
- goeyToast.warning(title, options?) // yellow
97
- goeyToast.info(title, options?) // blue
98
- goeyToast.promise(promise, data) // loading -> success/error
99
- goeyToast.update(id, options) // update an existing toast in-place
100
- goeyToast.dismiss(idOrFilter?) // dismiss one, by type, or all toasts
93
+ gooeyToast(title, options?) // default (neutral)
94
+ gooeyToast.success(title, options?) // green
95
+ gooeyToast.error(title, options?) // red
96
+ gooeyToast.warning(title, options?) // yellow
97
+ gooeyToast.info(title, options?) // blue
98
+ gooeyToast.promise(promise, data) // loading -> success/error
99
+ gooeyToast.update(id, options) // update an existing toast in-place
100
+ gooeyToast.dismiss(idOrFilter?) // dismiss one, by type, or all toasts
101
101
  ```
102
102
 
103
- #### `goeyToast.update(id, options)`
103
+ #### `gooeyToast.update(id, options)`
104
104
 
105
105
  Updates an existing toast in-place without removing and re-creating it.
106
106
 
107
107
  ```tsx
108
- const id = goeyToast('Uploading...', {
108
+ const id = gooeyToast('Uploading...', {
109
109
  icon: <SpinnerIcon />,
110
110
  })
111
111
 
112
112
  // Later, update the toast
113
- goeyToast.update(id, {
113
+ gooeyToast.update(id, {
114
114
  title: 'Upload complete',
115
115
  type: 'success',
116
116
  description: '3 files uploaded.',
@@ -118,50 +118,50 @@ goeyToast.update(id, {
118
118
  })
119
119
  ```
120
120
 
121
- **`GoeyToastUpdateOptions`:**
121
+ **`GooeyToastUpdateOptions`:**
122
122
 
123
123
  | Option | Type | Description |
124
124
  | ------------- | ----------------- | ----------------------------- |
125
125
  | `title` | `string` | New title text |
126
126
  | `description` | `ReactNode` | New body content |
127
- | `type` | `GoeyToastType` | Change the toast type/color |
128
- | `action` | `GoeyToastAction` | New action button |
127
+ | `type` | `GooeyToastType` | Change the toast type/color |
128
+ | `action` | `GooeyToastAction` | New action button |
129
129
  | `icon` | `ReactNode \| null` | Custom icon (pass `null` to clear) |
130
130
 
131
- #### `goeyToast.dismiss(idOrFilter?)`
131
+ #### `gooeyToast.dismiss(idOrFilter?)`
132
132
 
133
133
  Dismiss a single toast by ID, all toasts of a given type, or all toasts at once.
134
134
 
135
135
  ```ts
136
136
  // Dismiss a specific toast
137
- goeyToast.dismiss(toastId)
137
+ gooeyToast.dismiss(toastId)
138
138
 
139
139
  // Dismiss all error toasts
140
- goeyToast.dismiss({ type: 'error' })
140
+ gooeyToast.dismiss({ type: 'error' })
141
141
 
142
142
  // Dismiss multiple types
143
- goeyToast.dismiss({ type: ['error', 'warning'] })
143
+ gooeyToast.dismiss({ type: ['error', 'warning'] })
144
144
 
145
145
  // Dismiss all toasts
146
- goeyToast.dismiss()
146
+ gooeyToast.dismiss()
147
147
  ```
148
148
 
149
- ### `GoeyToastOptions`
149
+ ### `GooeyToastOptions`
150
150
 
151
- Options passed as the second argument to `goeyToast()` and type-specific methods.
151
+ Options passed as the second argument to `gooeyToast()` and type-specific methods.
152
152
 
153
153
  | Option | Type | Description |
154
154
  | ------------- | -------------------- | ---------------------------------- |
155
155
  | `description` | `ReactNode` | Body content (string or component) |
156
- | `action` | `GoeyToastAction` | Action button configuration |
156
+ | `action` | `GooeyToastAction` | Action button configuration |
157
157
  | `icon` | `ReactNode` | Custom icon override |
158
158
  | `duration` | `number` | Display duration in ms |
159
159
  | `id` | `string \| number` | Unique toast identifier |
160
- | `classNames` | `GoeyToastClassNames`| CSS class overrides |
160
+ | `classNames` | `GooeyToastClassNames`| CSS class overrides |
161
161
  | `fillColor` | `string` | Background color of the blob |
162
162
  | `borderColor` | `string` | Border color of the blob |
163
163
  | `borderWidth` | `number` | Border width in px (default 1.5) |
164
- | `timing` | `GoeyToastTimings` | Animation timing overrides |
164
+ | `timing` | `GooeyToastTimings` | Animation timing overrides |
165
165
  | `spring` | `boolean` | Enable spring/bounce animations (default `true`) |
166
166
  | `bounce` | `number` | Spring intensity from `0.05` (subtle) to `0.8` (dramatic), default `0.4` |
167
167
  | `showProgress`| `boolean` | Show countdown progress bar |
@@ -169,7 +169,7 @@ Options passed as the second argument to `goeyToast()` and type-specific methods
169
169
  | `onAutoClose` | `(id) => void` | Called only on timer-based auto-dismiss |
170
170
  | `preset` | `AnimationPresetName`| Animation preset (`'smooth'`, `'bouncy'`, `'subtle'`, `'snappy'`) |
171
171
 
172
- ### `GoeyToastAction`
172
+ ### `GooeyToastAction`
173
173
 
174
174
  | Property | Type | Required | Description |
175
175
  | -------------- | ---------- | -------- | -------------------------------------------- |
@@ -177,7 +177,7 @@ Options passed as the second argument to `goeyToast()` and type-specific methods
177
177
  | `onClick` | `() => void` | Yes | Click handler |
178
178
  | `successLabel` | `string` | No | Label shown after click (morphs back to pill)|
179
179
 
180
- ### `GoeyToastTimings`
180
+ ### `GooeyToastTimings`
181
181
 
182
182
  Fine-tune animation speeds per toast.
183
183
 
@@ -185,7 +185,7 @@ Fine-tune animation speeds per toast.
185
185
  | ------------------ | -------- | ------- | ------------------------------------ |
186
186
  | `displayDuration` | `number` | 4000 | Milliseconds toast stays expanded |
187
187
 
188
- ### `GoeyToastClassNames`
188
+ ### `GooeyToastClassNames`
189
189
 
190
190
  Override styles for any part of the toast.
191
191
 
@@ -200,9 +200,9 @@ Override styles for any part of the toast.
200
200
  | `actionWrapper` | Button container |
201
201
  | `actionButton` | Action button |
202
202
 
203
- ### `GoeyToasterProps`
203
+ ### `GooeyToasterProps`
204
204
 
205
- Props for the `<GoeyToaster />` component.
205
+ Props for the `<GooeyToaster />` component.
206
206
 
207
207
  | Prop | Type | Default | Description |
208
208
  | ------------ | ------------------------------------- | ---------------- | --------------------------------------------- |
@@ -222,9 +222,9 @@ Props for the `<GoeyToaster />` component.
222
222
  | `dir` | `'ltr' \| 'rtl'` | `'ltr'` | Layout direction |
223
223
  | `swipeToDismiss` | `boolean` | `true` | Enable swipe-to-dismiss on mobile |
224
224
 
225
- ### `GoeyPromiseData<T>`
225
+ ### `GooeyPromiseData<T>`
226
226
 
227
- Configuration for `goeyToast.promise()`.
227
+ Configuration for `gooeyToast.promise()`.
228
228
 
229
229
  | Property | Type | Required | Description |
230
230
  | ------------- | --------------------------------------------- | -------- | ---------------------------------------------- |
@@ -233,11 +233,11 @@ Configuration for `goeyToast.promise()`.
233
233
  | `error` | `string \| ((error: unknown) => string)` | Yes | Title on error (static or derived from error) |
234
234
  | `description` | `object` | No | Per-phase descriptions (see below) |
235
235
  | `action` | `object` | No | Per-phase action buttons (see below) |
236
- | `classNames` | `GoeyToastClassNames` | No | CSS class overrides |
236
+ | `classNames` | `GooeyToastClassNames` | No | CSS class overrides |
237
237
  | `fillColor` | `string` | No | Background color of the blob |
238
238
  | `borderColor` | `string` | No | Border color of the blob |
239
239
  | `borderWidth` | `number` | No | Border width in px |
240
- | `timing` | `GoeyToastTimings` | No | Animation timing overrides |
240
+ | `timing` | `GooeyToastTimings` | No | Animation timing overrides |
241
241
  | `spring` | `boolean` | No | Enable spring/bounce animations (default `true`) |
242
242
  | `bounce` | `number` | No | Spring intensity: `0.05` (subtle) to `0.8` (dramatic), default `0.4` |
243
243
  | `onDismiss` | `(id: string \| number) => void` | No | Called when toast is dismissed (any reason) |
@@ -255,15 +255,15 @@ Configuration for `goeyToast.promise()`.
255
255
 
256
256
  | Key | Type |
257
257
  | --------- | ----------------- |
258
- | `success` | `GoeyToastAction` |
259
- | `error` | `GoeyToastAction` |
258
+ | `success` | `GooeyToastAction` |
259
+ | `error` | `GooeyToastAction` |
260
260
 
261
261
  ## Usage Examples
262
262
 
263
263
  ### Description
264
264
 
265
265
  ```tsx
266
- goeyToast.error('Payment failed', {
266
+ gooeyToast.error('Payment failed', {
267
267
  description: 'Your card was declined. Please try again.',
268
268
  })
269
269
  ```
@@ -271,7 +271,7 @@ goeyToast.error('Payment failed', {
271
271
  ### Custom React Component as Description
272
272
 
273
273
  ```tsx
274
- goeyToast.success('Deployment complete', {
274
+ gooeyToast.success('Deployment complete', {
275
275
  description: (
276
276
  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
277
277
  <div>
@@ -288,7 +288,7 @@ goeyToast.success('Deployment complete', {
288
288
  ### Action Button with Success Label
289
289
 
290
290
  ```tsx
291
- goeyToast.info('Share link ready', {
291
+ gooeyToast.info('Share link ready', {
292
292
  description: 'Your link has been generated.',
293
293
  action: {
294
294
  label: 'Copy to Clipboard',
@@ -301,7 +301,7 @@ goeyToast.info('Share link ready', {
301
301
  ### Promise Toast
302
302
 
303
303
  ```tsx
304
- goeyToast.promise(saveData(), {
304
+ gooeyToast.promise(saveData(), {
305
305
  loading: 'Saving...',
306
306
  success: 'Changes saved',
307
307
  error: 'Something went wrong',
@@ -321,7 +321,7 @@ goeyToast.promise(saveData(), {
321
321
  ### Custom Styling
322
322
 
323
323
  ```tsx
324
- goeyToast.success('Styled!', {
324
+ gooeyToast.success('Styled!', {
325
325
  fillColor: '#1a1a2e',
326
326
  borderColor: '#333',
327
327
  borderWidth: 2,
@@ -337,7 +337,7 @@ goeyToast.success('Styled!', {
337
337
  ### Display Duration
338
338
 
339
339
  ```tsx
340
- goeyToast.success('Saved', {
340
+ gooeyToast.success('Saved', {
341
341
  description: 'Your changes have been synced.',
342
342
  timing: { displayDuration: 5000 },
343
343
  })
@@ -349,13 +349,13 @@ Disable bounce/spring animations for a cleaner, more subtle look:
349
349
 
350
350
  ```tsx
351
351
  // Per-toast: disable spring for this toast only
352
- goeyToast.success('Saved', {
352
+ gooeyToast.success('Saved', {
353
353
  description: 'Your changes have been synced.',
354
354
  spring: false,
355
355
  })
356
356
 
357
357
  // Globally: disable spring for all toasts
358
- <GoeyToaster spring={false} />
358
+ <GooeyToaster spring={false} />
359
359
  ```
360
360
 
361
361
  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.
@@ -366,16 +366,16 @@ Control how dramatic the spring effect feels with a single `bounce` value:
366
366
 
367
367
  ```tsx
368
368
  // Subtle, barely-there spring
369
- goeyToast.success('Saved', { bounce: 0.1 })
369
+ gooeyToast.success('Saved', { bounce: 0.1 })
370
370
 
371
371
  // Default feel
372
- goeyToast.success('Saved', { bounce: 0.4 })
372
+ gooeyToast.success('Saved', { bounce: 0.4 })
373
373
 
374
374
  // Jelly mode
375
- goeyToast.success('Saved', { bounce: 0.8 })
375
+ gooeyToast.success('Saved', { bounce: 0.8 })
376
376
 
377
- // Set globally via GoeyToaster
378
- <GoeyToaster bounce={0.6} />
377
+ // Set globally via GooeyToaster
378
+ <GooeyToaster bounce={0.6} />
379
379
  ```
380
380
 
381
381
  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.
@@ -383,13 +383,13 @@ The `bounce` value (0.05 to 0.8) controls spring stiffness, damping, and squish
383
383
  ### Dark Mode
384
384
 
385
385
  ```tsx
386
- <GoeyToaster theme="dark" />
386
+ <GooeyToaster theme="dark" />
387
387
  ```
388
388
 
389
389
  ### RTL Support
390
390
 
391
391
  ```tsx
392
- <GoeyToaster dir="rtl" />
392
+ <GooeyToaster dir="rtl" />
393
393
  ```
394
394
 
395
395
  ### Animation Presets
@@ -397,10 +397,10 @@ The `bounce` value (0.05 to 0.8) controls spring stiffness, damping, and squish
397
397
  Four built-in presets: `smooth`, `bouncy`, `subtle`, `snappy`. Apply per-toast or globally:
398
398
 
399
399
  ```tsx
400
- goeyToast.success('Saved', { preset: 'bouncy' })
400
+ gooeyToast.success('Saved', { preset: 'bouncy' })
401
401
 
402
402
  // Or globally
403
- <GoeyToaster preset="smooth" />
403
+ <GooeyToaster preset="smooth" />
404
404
  ```
405
405
 
406
406
  ### Progress Bar
@@ -408,10 +408,10 @@ goeyToast.success('Saved', { preset: 'bouncy' })
408
408
  Show a countdown progress bar on toasts:
409
409
 
410
410
  ```tsx
411
- goeyToast.success('Saved', { showProgress: true })
411
+ gooeyToast.success('Saved', { showProgress: true })
412
412
 
413
413
  // Or enable globally
414
- <GoeyToaster showProgress />
414
+ <GooeyToaster showProgress />
415
415
  ```
416
416
 
417
417
  ### Keyboard Shortcuts
@@ -426,23 +426,23 @@ On mobile, swipe toasts to dismiss them. Enabled by default; disable with `swipe
426
426
 
427
427
  ```ts
428
428
  // Components
429
- export { GoeyToaster } from 'goey-toast'
429
+ export { GooeyToaster } from 'goey-toast'
430
430
 
431
431
  // Toast function
432
- export { goeyToast } from 'goey-toast'
432
+ export { gooeyToast } from 'goey-toast'
433
433
 
434
434
  // Animation presets
435
435
  export { animationPresets } from 'goey-toast'
436
436
 
437
437
  // Types
438
438
  export type {
439
- GoeyToastOptions,
440
- GoeyPromiseData,
441
- GoeyToasterProps,
442
- GoeyToastAction,
443
- GoeyToastClassNames,
444
- GoeyToastTimings,
445
- GoeyToastUpdateOptions,
439
+ GooeyToastOptions,
440
+ GooeyPromiseData,
441
+ GooeyToasterProps,
442
+ GooeyToastAction,
443
+ GooeyToastClassNames,
444
+ GooeyToastTimings,
445
+ GooeyToastUpdateOptions,
446
446
  DismissFilter,
447
447
  AnimationPreset,
448
448
  AnimationPresetName,