🌌 Midnight UI

Midnight is a premium, high-contrast notification and feedback suite designed specifically for modern dark interfaces. Built with Framer Motion for butter-smooth physics and Lucide React for crisp iconography, it provides a refined user experience that feels alive and responsive.

✨ Features

• 🧊 Glassmorphism: Elegant transparency and backdrop blurs.
• ⚡ Physics-based Animations: Smooth transitions and spring dynamics.
• 📱 Mobile Ready: Swipe-to-dismiss snackbars and responsive layouts.
• 🛠️ Fully Typed: Absolute type safety with TypeScript.
• 🎨 Minimalist Design: Pure black backgrounds with vibrant accents.
• 🔊 Context Driven: Manage notifications globally with a simple hook.

🚀 Quick Start

1. Installation

npm install @kawaiininja/midnight

2. Wrap your application

Midnight requires the MidnightProvider to manage portals for Toasts and Snackbars.

import { MidnightProvider } from "@kawaiininja/midnight";

function App() {
  return (
    <MidnightProvider>
      <YourAppContent />
    </MidnightProvider>
  );
}

📖 Usage Guide

Using the Hook (useMidnight)

The useMidnight hook is the primary way to trigger non-blocking feedback.

import { useMidnight } from "@kawaiininja/midnight";

const MyComponent = () => {
  const { addToast, showSnackbar } = useMidnight();

  const handleSave = () => {
    // Trigger a Toast
    addToast("success", "Saved!", "Your profile has been updated.");

    // Trigger a Snackbar with an action
    showSnackbar("Profile updated.", "Undo", false, () => {
      console.log("Undo action clicked");
    });
  };

  return <button onClick={handleSave}>Scale the Midnight</button>;
};

🧩 Component API

1. InlineAlert

Contextual banners that live within your content flow.

| Prop | Type | Default | Description | | :--------- | :------------------------------------------------------- | :----------- | :--------------------------------------- | | type | success | error | warning | info | loading | info | The visual style and icon. | | title | string | - | Optional bold header. | | children | ReactNode | Required | The main message content. | | onClose | () => void | - | If provided, a close button will appear. |

<InlineAlert type="warning" title="Security Warning" onClose={() => {}}>
  Your password was last changed 6 months ago.
</InlineAlert>

2. PushNotification

Rich cards for activity feeds, messages, or system alerts.

| Prop | Type | Default | Description | | :------- | :---------- | :------------------- | :------------------------------- | | avatar | ReactNode | MessageSquare icon | An icon or image element. | | title | string | Required | Card header/sender name. | | body | string | Required | The content of the notification. | | time | string | Required | Timestamp (e.g., "5m ago"). |

<PushNotification
  title="Sarah Chen"
  body="Shared a file with you: project_midnight.fig"
  time="Just now"
/>

3. Toast (Context Managed)

Non-blocking alerts that stack in the top-right corner. Triggered via addToast.

| Field | Type | Description | | :-------- | :---------- | :------------------------------------------------ | | type | ToastType | success, error, warning, info, loading. | | title | string | Bold title for the toast. | | message | string | Detailed message. |

4. Snackbar (Context Managed)

Action-oriented bars that appear at the bottom. Triggered via showSnackbar.

| Field | Type | Description | | :------------ | :--------- | :--------------------------------------------- | | message | string | The message to display. | | actionLabel | string | Optional text for the action button. | | isLoading | boolean | If true, shows a spinner and hides the action. | | onAction | function | Callback when the action button is clicked. |

🎨 Configuration & Theme

Midnight uses a centralized theme configuration (THEME). You can reference these types for custom implementations.

Available Types

• success: Emerald accents for positive outcomes.
• error: Rose accents for failures.
• warning: Amber accents for cautions.
• info: Blue accents for general information.
• loading: Animated blue spinner for async states.
• neutral: Slate accents for subtle feedback.

🎬 Animations & Required CSS

Midnight uses some Tailwind utility classes and keyframes for its signature progress bars. To ensure the Toast progress bar works correctly, add the following keyframes to your global CSS (e.g., index.css or App.css):

@keyframes shrink {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Optional: Custom scrollbar for dark surfaces */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #050510;
}
::-webkit-scrollbar-thumb {
  background: #1f2937;
  border-radius: 4px;
}

🛠️ Advanced Usage

Manual Dismissal

You can manually remove a toast or snackbar using their IDs.

const { addToast, removeToast } = useMidnight();

const triggerAndKill = () => {
  const id = Date.now(); // Or get it from internal state
  addToast("info", "Wait...", "This will die soon.");

  setTimeout(() => {
    removeToast(id);
  }, 2000);
};

⌨️ A-Z Reference & Configuration

| Field/Prop | Source | Type | Description | | :--------------- | :----------------- | :--------------- | :---------------------------------------------------- | | actionLabel | showSnackbar | string | Text for the CTA button on the snackbar. | | addToast | useMidnight | function | Triggers a corner notification. | | avatar | PushNotification | ReactNode | Left-side icon/image (defaults to MessageSquare). | | body | PushNotification | string | Supporting text for the notification card. | | children | InlineAlert | ReactNode | The message body for inline banners. | | id | Hooks | string\|number | Identifier used for tracking and dismissal. | | isLoading | Snackbar | boolean | Toggles the spinner and disables the action button. | | message | Toast\|Snackbar | string | The primary text message. | | onAction | showSnackbar | function | Callback triggered when the action button is pressed. | | onClose | InlineAlert | function | Enables a dismissal 'X' button on the banner. | | removeSnackbar | useMidnight | function | Forcefully closes a snackbar by its ID. | | removeToast | useMidnight | function | Forcefully closes a toast by its ID. | | showSnackbar | useMidnight | function | Triggers a swipeable bottom action-bar. | | time | PushNotification | string | The timestamp string (e.g., "now"). | | title | Multiple | string | The prominent header text. | | type | Alert\|Toast | Enum | Stylistic preset (success, error, etc.). |

📐 Architecture & Z-Index

Midnight is designed to sit above standard UI layers but beneath modal overlays. The MidnightProvider injects the following CSS variables into your :root:

• --z-toast: 100,000
• --z-snackbar: 100,000
• --z-modal: 120,000 (Reference only)