@react-cupertino-ui/mini-notification 1.0.1

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2024 Anderson Lima
+
+This project is inspired by Apple's design principles but is not affiliated with, endorsed, or sponsored by Apple Inc.
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.css

@@ -0,0 +1,40 @@
+.react-cupertino-ui-mini-notification {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 22px 45px rgba(15, 15, 15, 0.18);
+}
+.react-cupertino-ui-mini-notification .title {
+  margin: 0;
+  font-weight: 600;
+}
+.react-cupertino-ui-mini-notification .message {
+  margin: 0.2rem 0 0;
+  color: rgba(15, 23, 42, 0.6);
+  font-size: 0.9rem;
+}
+.react-cupertino-ui-mini-notification__action {
+  border: none;
+  background: transparent;
+  color: #0ea5e9;
+  font-weight: 600;
+  cursor: pointer;
+}
+.react-cupertino-ui-mini-notification__dismiss {
+  border: none;
+  background: transparent;
+  opacity: 0.6;
+  cursor: pointer;
+}
+.react-cupertino-ui-mini-notification.tone-success {
+  border-left: 3px solid #22c55e;
+}
+.react-cupertino-ui-mini-notification.tone-warning {
+  border-left: 3px solid #f59e0b;
+}
+.react-cupertino-ui-mini-notification.tone-critical {
+  border-left: 3px solid #ef4444;
+}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { BaseProps } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import "./index.scss";
+export type MiniNotificationTone = "info" | "success" | "warning" | "critical";
+export interface MiniNotificationProps extends Omit<BaseProps<HTMLDivElement>, "children"> {
+    title: string;
+    message?: string;
+    tone?: MiniNotificationTone;
+    onDismiss?: () => void;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+declare const MiniNotification: React.ForwardRefExoticComponent<MiniNotificationProps & React.RefAttributes<HTMLDivElement>>;
+export { MiniNotification };

package/dist/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const MiniNotification = React.forwardRef((props, ref) => {
+    const { className, title, message, tone = "info", onDismiss, action, ...rest } = props;
+    return (_jsxs("div", { ref: ref, className: cn("react-cupertino-ui-mini-notification", `tone-${tone}`, className), role: "status", ...rest, children: [_jsxs("div", { className: "react-cupertino-ui-mini-notification__content", children: [_jsx("p", { className: "title", children: title }), message ? _jsx("p", { className: "message", children: message }) : null] }), action ? (_jsx("button", { type: "button", className: "react-cupertino-ui-mini-notification__action", onClick: action.onClick, children: action.label })) : null, onDismiss ? (_jsx("button", { type: "button", className: "react-cupertino-ui-mini-notification__dismiss", onClick: onDismiss, "aria-label": "Dismiss", children: "\u00D7" })) : null] }));
+});
+MiniNotification.displayName = "MiniNotification";
+export { MiniNotification };

package/dist/index.scss

@@ -0,0 +1,47 @@
+.react-cupertino-ui-mini-notification {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 22px 45px rgba(15, 15, 15, 0.18);
+
+  .title {
+    margin: 0;
+    font-weight: 600;
+  }
+
+  .message {
+    margin: 0.2rem 0 0;
+    color: rgba(15, 23, 42, 0.6);
+    font-size: 0.9rem;
+  }
+
+  &__action {
+    border: none;
+    background: transparent;
+    color: #0ea5e9;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  &__dismiss {
+    border: none;
+    background: transparent;
+    opacity: 0.6;
+    cursor: pointer;
+  }
+
+  &.tone-success {
+    border-left: 3px solid #22c55e;
+  }
+
+  &.tone-warning {
+    border-left: 3px solid #f59e0b;
+  }
+
+  &.tone-critical {
+    border-left: 3px solid #ef4444;
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-cupertino-ui/mini-notification",
+  "version": "1.0.1",
+  "description": "Compact notification banner",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/**/*.css",
+    "./dist/**/*.scss"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && npm run build:styles",
+    "build:styles": "node ../../../scripts/build-styles.mjs"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@react-cupertino-ui/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}