@neoptocom/neopto-ui 0.7.3 → 0.7.5

package/CONSUMER_SETUP.md

@@ -34,6 +34,9 @@ In your main CSS file (e.g., `src/index.css`):
 ```css
 @import "tailwindcss";
 
+/* Enable dark mode support */
+@variant dark (&:where(.dark, .dark *));
+
 /* Scan the component library source files */
 @source "../node_modules/@neoptocom/neopto-ui/src";
 
@@ -41,6 +44,8 @@ In your main CSS file (e.g., `src/index.css`):
 @import "@neoptocom/neopto-ui/styles";
 ```
 
+**Important:** The `@variant dark` line is required for dark mode to work properly with components like `AppBackground`.
+
 Then import your CSS in `src/main.tsx`:
 
 ```tsx

package/README.md

@@ -41,6 +41,9 @@ If your CSS file is at `src/app/globals.css` (App Router), use:
 ```css
 @import "tailwindcss";
 
+/* Enable dark mode support */
+@variant dark (&:where(.dark, .dark *));
+
 /* Scan the component library source files */
 @source "../../node_modules/@neoptocom/neopto-ui/src";
 
@@ -49,11 +52,12 @@ If your CSS file is at `src/app/globals.css` (App Router), use:
 
 /* Scan your own project files */
 @source "../";
-
 ```
 
 **Note:** The path is relative to your CSS file location. Adjust `../` levels accordingly.
 
+**Important:** The `@variant dark` line is required for dark mode to work properly with components like `AppBackground`.
+
 ```
 
 Then import this CSS in your `src/main.tsx`:
@@ -100,11 +104,13 @@ This library uses **Tailwind CSS v4** utility classes directly in components (e.
 
 ### AppBackground
 
+A full-page background component with built-in light/dark mode support and smooth transitions.
+
 ```tsx
-import { AppBackground, assets } from "@neoptocom/neopto-ui";
+import { AppBackground } from "@neoptocom/neopto-ui";
 
-// Use built-in NeoPTO backgrounds
-<AppBackground lightImage={assets.bgLight} darkImage={assets.bgDark}>
+// Use default NeoPTO branded backgrounds (recommended)
+<AppBackground>
   <YourApp />
 </AppBackground>
 
@@ -114,9 +120,11 @@ import { AppBackground, assets } from "@neoptocom/neopto-ui";
   darkImage="/path/to/dark-bg.jpg"
 >
   <YourApp />
-</AppBackground>;
+</AppBackground>
 ```
 
+**Best Practice:** Add `AppBackground` to your root layout (`app/layout.tsx`) so it wraps your entire app and persists across pages.
+
 ### Button
 
 ```tsx

package/dist/index.cjs

@@ -58,8 +58,8 @@ var agentNeopto = agent_neopto_default;
 var agentNeoptoDark = agent_neopto_dark_default;
 function AppBackground({
   children,
-  lightImage,
-  darkImage,
+  lightImage = bgLight,
+  darkImage = bgDark,
   className = ""
 }) {
   const hasImages = lightImage || darkImage;

package/dist/index.d.cts

@@ -17,9 +17,9 @@ declare namespace index {
 type AppBackgroundProps = {
     /** Content to render inside the background */
     children: React.ReactNode;
-    /** Background image URL for light mode */
+    /** Background image URL for light mode (defaults to library's light background) */
     lightImage?: string;
-    /** Background image URL for dark mode */
+    /** Background image URL for dark mode (defaults to library's dark background) */
     darkImage?: string;
     /** Additional CSS classes */
     className?: string;

package/dist/index.d.ts

@@ -17,9 +17,9 @@ declare namespace index {
 type AppBackgroundProps = {
     /** Content to render inside the background */
     children: React.ReactNode;
-    /** Background image URL for light mode */
+    /** Background image URL for light mode (defaults to library's light background) */
     lightImage?: string;
-    /** Background image URL for dark mode */
+    /** Background image URL for dark mode (defaults to library's dark background) */
     darkImage?: string;
     /** Additional CSS classes */
     className?: string;

package/dist/index.js

@@ -37,8 +37,8 @@ var agentNeopto = agent_neopto_default;
 var agentNeoptoDark = agent_neopto_dark_default;
 function AppBackground({
   children,
-  lightImage,
-  darkImage,
+  lightImage = bgLight,
+  darkImage = bgDark,
   className = ""
 }) {
   const hasImages = lightImage || darkImage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.7.3",
+  "version": "0.7.5",
   "private": false,
   "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
   "keywords": [

package/src/components/AppBackground.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
+import * as assets from "../assets";
 
 export type AppBackgroundProps = {
   /** Content to render inside the background */
   children: React.ReactNode;
-  /** Background image URL for light mode */
+  /** Background image URL for light mode (defaults to library's light background) */
   lightImage?: string;
-  /** Background image URL for dark mode */
+  /** Background image URL for dark mode (defaults to library's dark background) */
   darkImage?: string;
   /** Additional CSS classes */
   className?: string;
@@ -13,8 +14,8 @@ export type AppBackgroundProps = {
 
 export function AppBackground({
   children,
-  lightImage,
-  darkImage,
+  lightImage = assets.bgLight,
+  darkImage = assets.bgDark,
   className = "",
 }: AppBackgroundProps) {
   const hasImages = lightImage || darkImage;