Add ToastNotification component

toast-notification/README.md

@@ -0,0 +1,117 @@
+# ToastNotification
+
+A toast notification system that displays temporary messages in a configurable screen corner with smooth animations and auto-dismiss functionality.
+
+## Getting Started
+
+Install dependencies:
+```bash
+npm install
+```
+
+Share the component to your Webflow workspace:
+```bash
+npx webflow library share
+```
+
+For local development:
+```bash
+npm run dev
+```
+
+## Designer Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| ID | Id | — | HTML ID attribute for the toast container |
+| Position | Variant | top-right | Screen corner position where toasts appear (top-right, top-left, bottom-right, bottom-left) |
+| Variant | Variant | info | Visual style and color scheme of the toast (success, error, warning, info) |
+| Message | TextNode | Notification message | Primary message text displayed prominently |
+| Description | Text | Additional details about this notification | Optional secondary description text below the message |
+| Show Description | Visibility | — | Show or hide the description text |
+| Duration | Number | 5000 | Auto-dismiss duration in milliseconds |
+| Show Progress Bar | Boolean | true | Display animated progress bar showing time until auto-dismiss |
+| Show Close Button | Boolean | true | Display close button for manual dismissal |
+| Max Toasts | Number | 5 | Maximum number of toasts visible simultaneously |
+| Enable Animations | Boolean | true | Enable smooth slide and fade animations |
+| Toast 1 Message | Text | Changes saved successfully | Message text for first demo toast |
+| Toast 1 Description | Text | Your profile has been updated | Description text for first demo toast |
+| Toast 1 Variant | Variant | success | Variant style for first demo toast |
+| Toast 1 Visible | Visibility | — | Show or hide the first demo toast |
+| Toast 2 Message | Text | Connection error | Message text for second demo toast |
+| Toast 2 Description | Text | Unable to reach the server | Description text for second demo toast |
+| Toast 2 Variant | Variant | error | Variant style for second demo toast |
+| Toast 2 Visible | Visibility | — | Show or hide the second demo toast |
+| Toast 3 Message | Text | Storage almost full | Message text for third demo toast |
+| Toast 3 Description | Text | You have used 90% of your storage | Description text for third demo toast |
+| Toast 3 Variant | Variant | warning | Variant style for third demo toast |
+| Toast 3 Visible | Visibility | — | Show or hide the third demo toast |
+
+## Styling
+
+This component automatically adapts to your Webflow site's design system through site variables and inherited properties.
+
+### Site Variables
+
+To match your site's design system, define these CSS variables in your Webflow project settings. The component will use the fallback values shown below until you configure them.
+
+| Site Variable | What It Controls | Fallback |
+|---------------|------------------|----------|
+| --background-primary | Toast card background color | #ffffff |
+| --background-secondary | Close button hover state background | #f5f5f5 |
+| --text-primary | Message text color | #1a1a1a |
+| --text-secondary | Description text and close button color | #737373 |
+| --border-color | Toast card border and progress bar background | #e5e5e5 |
+| --border-radius | Toast card and button corner rounding | 8px |
+| --success-color | Success variant border, icon, and progress bar color | #22c55e |
+| --success-bg | Success variant background tint | #f0fdf4 |
+| --error-color | Error variant border, icon, and progress bar color | #ef4444 |
+| --error-bg | Error variant background tint | #fef2f2 |
+| --warning-color | Warning variant border, icon, and progress bar color | #f59e0b |
+| --warning-bg | Warning variant background tint | #fffbeb |
+| --info-color | Info variant border, icon, and progress bar color | #3b82f6 |
+| --info-bg | Info variant background tint | #eff6ff |
+
+### Inherited Properties
+
+The component inherits these CSS properties from its parent element:
+- `font-family` — Typography style
+- `color` — Text color
+- `line-height` — Text spacing
+
+## Extending in Code
+
+### Triggering Toasts Programmatically
+
+To show toasts dynamically based on user actions or application events:
+
+```javascript
+// Access the toast container element
+const toastContainer = document.querySelector('[data-component="toast-notification"]');
+
+// Create and dispatch a custom event to trigger a new toast
+const showToast = (message, description, variant = 'info') => {
+  const event = new CustomEvent('showToast', {
+    detail: { message, description, variant }
+  });
+  toastContainer.dispatchEvent(event);
+};
+
+// Usage examples
+showToast('Form submitted', 'Your data has been saved', 'success');
+showToast('Network error', 'Please check your connection', 'error');
+```
+
+### Customizing Animation Duration
+
+Adjust the slide-in animation speed for different timing preferences:
+
+```css
+.wf-toastnotification-animated .wf-toastnotification-card {
+  animation-duration: 0.5s; /* Slower entrance */
+}
+```
+
+## Dependencies
+
+No external dependencies.

toast-notification/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ToastNotification</title>
+    <style>
+      *, *::before, *::after { box-sizing: border-box; margin: 0; }
+      body { color: inherit; }
+      h1, h2, h3, h4, h5, h6 { color: inherit; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

toast-notification/metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "Toast Notifications",
+  "description": "Temporary notification messages with success, error, warning, and info variants. Auto-dismiss with progress bar.",
+  "category": "Feedback"
+}

toast-notification/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "toast-notification",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "@webflow/data-types": "^1.0.1",
+    "@webflow/react": "^1.0.1",
+    "@webflow/webflow-cli": "^1.8.44",
+    "typescript": "~5.8.3",
+    "vite": "^7.1.7"
+  }
+}