react-smooth-stack-notifications 1.0.0

package/README.md

@@ -0,0 +1,90 @@
+# React Smooth Notifications
+
+A very smooth, stack-like notification system for React applications.
+
+## Installation
+
+```bash
+npm install @yourname/react-smooth-notifications
+```
+
+## Usage
+
+1. Wrap your app with NotificationProvider:
+
+```tsx
+import { NotificationProvider } from '@yourname/react-smooth-notifications';
+
+function App() {
+  return (
+    <NotificationProvider>
+      {/* Your app */}
+    </NotificationProvider>
+  );
+}
+```
+
+2. Use the hook in your components:
+
+```tsx
+import { useNotification } from '@yourname/react-smooth-notifications';
+
+function MyComponent() {
+  const { success, error, warning, info } = useNotification();
+
+  return (
+    <div>
+      <button onClick={() => success('Operation completed!')}>
+        Success
+      </button>
+      <button onClick={() => error('Something went wrong!')}>
+        Error
+      </button>
+      <button onClick={() => warning('Be careful!')}>
+        Warning
+      </button>
+      <button onClick={() => info('Here is some info')}>
+        Info
+      </button>
+    </div>
+  );
+}
+```
+
+## API
+
+- `success(message, duration?)` - Show success notification
+- `error(message, duration?)` - Show error notification
+- `warning(message, duration?)` - Show warning notification
+- `info(message, duration?)` - Show info notification
+
+Default duration is 3000ms (3 seconds).
+
+## Features
+
+- 🎨 Beautiful gradient backgrounds
+- 🌊 Smooth animations with cubic-bezier easing
+- 📚 Stack-like behavior with scaling effect
+- 🎯 Auto-dismiss with customizable duration
+- ❌ Manual dismiss by clicking close button
+- 🎭 4 notification types: success, error, warning, info
+- 📱 Responsive design
+- ⚡ Lightweight and performant
+
+## Build
+
+```bash
+npm install
+npm run build
+```
+
+## Publish to NPM
+
+```bash
+npm login
+npm publish --access public
+```
+
+## License
+
+MIT

package/dist/NotificationContainer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Notification } from './types';
+import './styles.css';
+interface NotificationContainerProps {
+    notifications: Notification[];
+    onRemove: (id: string) => void;
+}
+declare const NotificationContainer: React.FC<NotificationContainerProps>;
+export default NotificationContainer;
+//# sourceMappingURL=NotificationContainer.d.ts.map

package/dist/NotificationContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationContainer.d.ts","sourceRoot":"","sources":["../src/NotificationContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,OAAO,cAAc,CAAC;AAEtB,UAAU,0BAA0B;IAClC,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,QAAA,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAgB/D,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/NotificationContext.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { NotificationType } from './types';
+interface NotificationOptions {
+    bgColor?: string;
+    textColor?: string;
+    type?: NotificationType;
+    duration?: number;
+}
+interface NotificationContextType {
+    showNotification: (message: string, options?: NotificationOptions) => void;
+    success: (message: string, options?: NotificationOptions) => void;
+    error: (message: string, options?: NotificationOptions) => void;
+    warning: (message: string, options?: NotificationOptions) => void;
+    info: (message: string, options?: NotificationOptions) => void;
+    alert: (message: string, options?: NotificationOptions) => void;
+}
+export declare const useNotification: () => NotificationContextType;
+export declare const NotificationProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};
+//# sourceMappingURL=NotificationContext.d.ts.map

package/dist/NotificationContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationContext.d.ts","sourceRoot":"","sources":["../src/NotificationContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AACnE,OAAO,EAAgB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGzD,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,uBAAuB;IAC/B,gBAAgB,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC3E,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClE,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAChE,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAClE,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/D,KAAK,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACjE;AAID,eAAO,MAAM,eAAe,+BAM3B,CAAC;AAIF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CA+DxE,CAAC"}

package/dist/NotificationItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Notification } from './types';
+interface NotificationItemProps {
+    notification: Notification;
+    onRemove: (id: string) => void;
+    index: number;
+    totalCount: number;
+}
+declare const NotificationItem: React.FC<NotificationItemProps>;
+export default NotificationItem;
+//# sourceMappingURL=NotificationItem.d.ts.map

package/dist/NotificationItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.d.ts","sourceRoot":"","sources":["../src/NotificationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,UAAU,qBAAqB;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2ErD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { NotificationProvider, useNotification } from './NotificationContext';
+export type { Notification, NotificationType } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC9E,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}