@risalabs_frontend_org/oasis-ui-kit 0.2.0 → 0.4.0

package/README.md

@@ -338,21 +338,37 @@ closeModal('myModal');
 ```
 
 #### `Toast`
-Notification toast for success/error messages.
+Notification toast for success/error messages. Uses a simple imperative API.
 
 ```tsx
-import { Toast, controlToastState } from '@risalabs_frontend_org/oasis-ui-kit';
-
-<Toast
-  id="successToast"
-  type="success"  // "success" | "error"
-  header="Success!"
-  message="Your changes have been saved."
-/>
-
-// Show toast
-controlToastState('successToast', true);
-```
+import { ToastContainer, toast } from '@risalabs_frontend_org/oasis-ui-kit';
+
+// 1. Add ToastContainer once in your app root (e.g., App.tsx)
+function App() {
+  return (
+    <>
+      <ToastContainer />
+      {/* rest of your app */}
+    </>
+  );
+}
+
+// 2. Call toast.success or toast.error anywhere in your app
+toast.success("Changes saved!");
+toast.error("Something went wrong");
+
+// With optional header
+toast.success("Your file has been uploaded", "Upload Complete");
+
+// With custom duration (default: 3000ms)
+toast.error("Connection failed", "Network Error", 5000);
+```
+
+**API:**
+| Method | Parameters | Description |
+|--------|------------|-------------|
+| `toast.success(message, header?, duration?)` | `message: string`, `header?: string`, `duration?: number` | Show success toast |
+| `toast.error(message, header?, duration?)` | `message: string`, `header?: string`, `duration?: number` | Show error toast |
 
 #### `InfoIconWithTooltip`
 An info icon with popover tooltip.