@kala-ui/react 0.0.1-beta.3 → 0.0.1-beta.4

package/README.md

@@ -99,6 +99,30 @@ import { DataTable } from '@kala-ui/react/data-table';
 import { AreaChart, LineChart, BarChart } from '@kala-ui/react/charts';
 ```
 
+**Notifications**
+- `toast` - Toast notification system with full Sonner API support
+
+Import from:
+
+```tsx
+import { toast, Toast } from '@kala-ui/react/toast';
+
+// Use the API
+toast.success('Success message');
+toast.error('Error message');
+toast.dismiss(toastId);
+
+// Use the component
+<Toast />
+
+// Promise-based toasts
+toast.promise(promise, {
+  loading: 'Loading...',
+  success: 'Success!',
+  error: 'Error',
+});
+```
+
 **Advanced**
 - `dropdown-menu`, `user-menu-dropdown`, `social-login-button`, `password-strength-indicator`, `session-card`
 
@@ -145,8 +169,8 @@ Or import in CSS files:
 - Dark mode support
 
 **DND** - Drag and drop components
-- Sortable lists and grids
-- Built with @hello-pangea/dnd
+- Sortable lists and grids with animations
+- Built with @dnd-kit/core
 
 See the [Storybook documentation](https://krr2020.com/kala-ui) for complete component catalog.
 
@@ -335,7 +359,7 @@ This component library is built using excellent open-source libraries. We'd like
 
 ### Drag & Drop
 
-- **[@hello-pangea/dnd](https://github.com/hello-pangea/dnd)** - React Drag and Drop library
+- **[@dnd-kit/core](https://github.com/clauderic/dnd-kit)** - Modern, lightweight drag and drop library for React
 
 ---
 

package/dist/components/toast/index.d.ts

@@ -1,31 +1,3 @@
-import { toast as sonnerToast } from "sonner";
-type ToastOptions = Parameters<typeof sonnerToast>[1];
-/**
- * Toast API that supports all Sonner options including custom icons
- *
- * @example Basic usage
- * toast.success('Success message');
- *
- * @example With custom icon
- * toast.success('Success message', { icon: <CustomIcon /> });
- *
- * @example Remove icon
- * toast.success('Success message', { icon: null });
- *
- * @example Full options
- * toast.success('Success message', {
- *   icon: <CustomIcon />,
- *   duration: 5000,
- *   position: 'top-right',
- * });
- */
-declare const toast: {
-    success: (message: string, options?: ToastOptions) => string | number;
-    error: (message: string, options?: ToastOptions) => string | number;
-    warning: (message: string, options?: ToastOptions) => string | number;
-    info: (message: string, options?: ToastOptions) => string | number;
-    loading: (message: string, options?: ToastOptions) => string | number;
-};
-export { toast };
-export { Toaster } from "./toaster";
+export { toast } from "sonner";
+export { Toast } from "./toast";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/toast/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE9C,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,KAAK;uBACS,MAAM,YAAY,YAAY;qBAGhC,MAAM,YAAY,YAAY;uBAG5B,MAAM,YAAY,YAAY;oBAGjC,MAAM,YAAY,YAAY;uBAG3B,MAAM,YAAY,YAAY;CAGjD,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/toast/index.js

@@ -1,40 +1,3 @@
-import { toast as sonnerToast } from "sonner";
-/**
- * Toast API that supports all Sonner options including custom icons
- *
- * @example Basic usage
- * toast.success('Success message');
- *
- * @example With custom icon
- * toast.success('Success message', { icon: <CustomIcon /> });
- *
- * @example Remove icon
- * toast.success('Success message', { icon: null });
- *
- * @example Full options
- * toast.success('Success message', {
- *   icon: <CustomIcon />,
- *   duration: 5000,
- *   position: 'top-right',
- * });
- */
-const toast = {
-    success: (message, options) => {
-        return sonnerToast.success(message, options);
-    },
-    error: (message, options) => {
-        return sonnerToast.error(message, options);
-    },
-    warning: (message, options) => {
-        return sonnerToast.warning(message, options);
-    },
-    info: (message, options) => {
-        return sonnerToast.info(message, options);
-    },
-    loading: (message, options) => {
-        return sonnerToast.loading(message, options);
-    },
-};
-export { toast };
-export { Toaster } from "./toaster";
+export { toast } from "sonner";
+export { Toast } from "./toast";
 //# sourceMappingURL=index.js.map

package/dist/components/toast/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI9C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,KAAK,GAAG;IACb,OAAO,EAAE,CAAC,OAAe,EAAE,OAAsB,EAAE,EAAE;QACpD,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IACD,KAAK,EAAE,CAAC,OAAe,EAAE,OAAsB,EAAE,EAAE;QAClD,OAAO,WAAW,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC5C,CAAC;IACD,OAAO,EAAE,CAAC,OAAe,EAAE,OAAsB,EAAE,EAAE;QACpD,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IACD,IAAI,EAAE,CAAC,OAAe,EAAE,OAAsB,EAAE,EAAE;QACjD,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC3C,CAAC;IACD,OAAO,EAAE,CAAC,OAAe,EAAE,OAAsB,EAAE,EAAE;QACpD,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;CACD,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,5 @@
+import { Toaster as Sonner } from "sonner";
+type ToastProps = React.ComponentProps<typeof Sonner>;
+declare const Toast: ({ ...props }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export { Toast };
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE3C,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAEtD,QAAA,MAAM,KAAK,GAAI,cAAc,UAAU,4CAqBtC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/toast/toast.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toaster as Sonner } from "sonner";
+const Toast = ({ ...props }) => {
+    return (_jsx(Sonner, { className: "toaster group", closeButton: true, toastOptions: {
+            classNames: {
+                toast: 'group toast group-[.toaster]:bg-popover group-[.toaster]:text-foreground group-[.toaster]:border data-[type=error]:!border-destructive data-[type=success]:!border-success data-[type=warning]:!border-warning data-[type=info]:!border-info data-[type=success]:[&_[data-icon]]:!text-success data-[type=error]:[&_[data-icon]]:!text-destructive data-[type=warning]:[&_[data-icon]]:!text-warning data-[type=info]:[&_[data-icon]]:!text-info',
+                description: 'group-[.toast]:text-muted-foreground',
+                actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground group-data-[type=success]:!bg-success group-data-[type=success]:!text-success-foreground group-data-[type=error]:!bg-destructive group-data-[type=error]:!text-destructive-foreground group-data-[type=warning]:!bg-warning group-data-[type=warning]:!text-warning-foreground group-data-[type=info]:!bg-info group-data-[type=info]:!text-info-foreground',
+                cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+                icon: 'group-[.toast]:!text-current',
+                closeButton: 'group-[.toast]:bg-popover group-[.toast]:border group-[.toast]:hover:bg-accent group-[.toast]:!left-auto group-[.toast]:!-right-4 group-[.toast]:!-top-1 group-data-[type=success]:!border-success group-data-[type=error]:!border-destructive group-data-[type=warning]:!border-warning group-data-[type=info]:!border-info',
+            },
+        }, ...props }));
+};
+export { Toast };
+//# sourceMappingURL=toast.js.map

package/dist/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sourceRoot":"","sources":["../../../src/components/toast/toast.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI3C,MAAM,KAAK,GAAG,CAAC,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE;IAC1C,OAAO,CACN,KAAC,MAAM,IACN,SAAS,EAAC,eAAe,EACzB,WAAW,QACR,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,KAAK,EACH,kbAAkb;gBACpb,WAAW,EAAE,sCAAsC;gBACnD,YAAY,EACV,8ZAA8Z;gBACha,YAAY,EAAE,8DAA8D;gBAC5E,IAAI,EAAE,8BAA8B;gBACpC,WAAW,EACT,8TAA8T;aACjU;SACF,KACA,KAAK,GACR,CACF,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/toast/toast.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toast } from "./toast";
+declare const meta: Meta<typeof Toast>;
+export default meta;
+type Story = StoryObj<typeof Toast>;
+export declare const Default: Story;
+export declare const Success: Story;
+export declare const ErrorToast: Story;
+export declare const VariantsWithActions: Story;
+//# sourceMappingURL=toast.stories.d.ts.map

package/dist/components/toast/toast.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.stories.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAO5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AAEpC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAgEjC,CAAC"}

package/dist/components/toast/toast.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { Button } from "../button";
+import { Toast } from "./toast";
+const meta = {
+    title: "Feedback/Toast",
+    component: Toast,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4 items-center", children: [_jsx(Toast, {}), _jsx(Button, { variant: "outline", onClick: () => toast("Event has been created", {
+                    description: "Sunday, December 03, 2023 at 9:00 AM",
+                    action: {
+                        label: "Undo",
+                        onClick: () => console.log("Undo"),
+                    },
+                }), children: "Show Toast" })] })),
+};
+export const Success = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4 items-center", children: [_jsx(Toast, {}), _jsx(Button, { variant: "outline", onClick: () => toast.success("Event has been created", {
+                    description: "Sunday, December 03, 2023 at 9:00 AM",
+                }), children: "Show Success Toast" })] })),
+};
+export const ErrorToast = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4 items-center", children: [_jsx(Toast, {}), _jsx(Button, { variant: "outline", onClick: () => toast.error("Event has not been created", {
+                    description: "Sunday, December 03, 2023 at 9:00 AM",
+                }), children: "Show Error Toast" })] })),
+};
+export const VariantsWithActions = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4 items-center", children: [_jsx(Toast, {}), _jsxs("div", { className: "flex gap-4", children: [_jsx(Button, { variant: "outline", onClick: () => toast.success("Project updated successfully", {
+                            description: "The changes have been saved to the server.",
+                            action: {
+                                label: "View Changes",
+                                onClick: () => console.log("View Changes"),
+                            },
+                        }), children: "Success with Action" }), _jsx(Button, { variant: "outline", onClick: () => toast.error("Failed to upload file", {
+                            description: "The file size exceeds the limit of 10MB.",
+                            action: {
+                                label: "Retry",
+                                onClick: () => console.log("Retry"),
+                            },
+                        }), children: "Error with Action" }), _jsx(Button, { variant: "outline", onClick: () => toast.warning("Storage almost full", {
+                            description: "You have used 90% of your available storage.",
+                            action: {
+                                label: "Upgrade",
+                                onClick: () => console.log("Upgrade"),
+                            },
+                        }), children: "Warning with Action" }), _jsx(Button, { variant: "outline", onClick: () => toast.info("New update available", {
+                            description: "Version 2.0 is now available for download.",
+                            action: {
+                                label: "Install",
+                                onClick: () => console.log("Install"),
+                            },
+                        }), children: "Info with Action" })] })] })),
+};
+//# sourceMappingURL=toast.stories.js.map

package/dist/components/toast/toast.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.stories.js","sourceRoot":"","sources":["../../../src/components/toast/toast.stories.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kala-ui/react",
-  "version": "0.0.1-beta.3",
+  "version": "0.0.1-beta.4",
   "type": "module",
   "description": "65+ accessible React components built with Radix UI and Tailwind CSS. Includes DataTable with server-side support, charts, drag-and-drop, and comprehensive form controls.",
   "keywords": [