@neoptocom/neopto-ui 0.7.2 → 0.7.4

package/README.md

@@ -100,11 +100,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 +116,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;
@@ -69,7 +69,7 @@ function AppBackground({
     lightImage && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "fixed inset-0 -z-10 transition-opacity duration-500 dark:opacity-0",
+        className: "fixed inset-0 z-[-10] transition-opacity duration-500 opacity-100 dark:opacity-0",
         style: {
           backgroundImage: `url(${lightImage})`,
           backgroundSize: "cover",
@@ -81,7 +81,7 @@ function AppBackground({
     darkImage && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "fixed inset-0 -z-10 transition-opacity duration-500 opacity-0 dark:opacity-100",
+        className: "fixed inset-0 z-[-10] transition-opacity duration-500 opacity-0 dark:opacity-100",
         style: {
           backgroundImage: `url(${darkImage})`,
           backgroundSize: "cover",

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;
@@ -48,7 +48,7 @@ function AppBackground({
     lightImage && /* @__PURE__ */ jsx(
       "div",
       {
-        className: "fixed inset-0 -z-10 transition-opacity duration-500 dark:opacity-0",
+        className: "fixed inset-0 z-[-10] transition-opacity duration-500 opacity-100 dark:opacity-0",
         style: {
           backgroundImage: `url(${lightImage})`,
           backgroundSize: "cover",
@@ -60,7 +60,7 @@ function AppBackground({
     darkImage && /* @__PURE__ */ jsx(
       "div",
       {
-        className: "fixed inset-0 -z-10 transition-opacity duration-500 opacity-0 dark:opacity-100",
+        className: "fixed inset-0 z-[-10] transition-opacity duration-500 opacity-0 dark:opacity-100",
         style: {
           backgroundImage: `url(${darkImage})`,
           backgroundSize: "cover",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "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;
@@ -43,7 +44,7 @@ export function AppBackground({
       {/* Light mode background image */}
       {lightImage && (
         <div
-          className="fixed inset-0 -z-10 transition-opacity duration-500 dark:opacity-0"
+          className="fixed inset-0 z-[-10] transition-opacity duration-500 opacity-100 dark:opacity-0"
           style={{
             backgroundImage: `url(${lightImage})`,
             backgroundSize: "cover",
@@ -56,7 +57,7 @@ export function AppBackground({
       {/* Dark mode background image */}
       {darkImage && (
         <div
-          className="fixed inset-0 -z-10 transition-opacity duration-500 opacity-0 dark:opacity-100"
+          className="fixed inset-0 z-[-10] transition-opacity duration-500 opacity-0 dark:opacity-100"
           style={{
             backgroundImage: `url(${darkImage})`,
             backgroundSize: "cover",

package/src/styles/tailwind.css

@@ -1,5 +1,9 @@
 /* Tailwind v4+ core */
 @import "tailwindcss";
+
+/* Configure dark mode to use class strategy */
+@variant dark (&:where(.dark, .dark *));
+
 @import "./tokens.css";
 
 /* Ensure Tailwind scans your source & story files */