@neoptocom/neopto-ui 0.6.2 → 0.7.0

package/README.md

@@ -98,6 +98,19 @@ This library uses **Tailwind CSS v4** utility classes directly in components (e.
 
 ## 🧩 Components
 
+### AppBackground
+
+```tsx
+import { AppBackground } from "@neoptocom/neopto-ui";
+
+<AppBackground
+  lightImage="/path/to/light-bg.jpg"
+  darkImage="/path/to/dark-bg.jpg"
+>
+  <YourApp />
+</AppBackground>;
+```
+
 ### Button
 
 ```tsx

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var React2 = require('react');
 var reactDom = require('react-dom');
 
 function _interopNamespace(e) {
@@ -24,7 +24,51 @@ function _interopNamespace(e) {
 
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 
-// src/components/Input.tsx
+// src/components/AppBackground.tsx
+function AppBackground({
+  children,
+  lightImage,
+  darkImage,
+  className = ""
+}) {
+  const hasImages = lightImage || darkImage;
+  const baseClasses = "min-h-screen transition-colors";
+  const gradientClasses = !hasImages ? "bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800" : "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    lightImage && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed inset-0 -z-10 dark:hidden",
+        style: {
+          backgroundImage: `url(${lightImage})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat"
+        }
+      }
+    ),
+    darkImage && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fixed inset-0 -z-10 hidden dark:block",
+        style: {
+          backgroundImage: `url(${darkImage})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: [baseClasses, gradientClasses, className].filter(Boolean).join(" "),
+        style: hasImages ? {} : void 0,
+        children
+      }
+    )
+  ] });
+}
 var Input = React2__namespace.forwardRef(
   ({ className, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1057,6 +1101,7 @@ var ChatButton_default = ChatButton;
 
 exports.AnimatedBgCircle = AnimatedBgCircle_default;
 exports.AnimatedBgRectangle = AnimatedBgRectangle_default;
+exports.AppBackground = AppBackground;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;

package/dist/index.d.cts

@@ -1,5 +1,17 @@
-import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type AppBackgroundProps = {
+    /** Content to render inside the background */
+    children: React.ReactNode;
+    /** Background image URL for light mode */
+    lightImage?: string;
+    /** Background image URL for dark mode */
+    darkImage?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+declare function AppBackground({ children, lightImage, darkImage, className, }: AppBackgroundProps): react_jsx_runtime.JSX.Element;
 
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -230,4 +242,4 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedBgCircle, AnimatedBgRectangle, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight };
+export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight };

package/dist/index.d.ts

@@ -1,5 +1,17 @@
-import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type AppBackgroundProps = {
+    /** Content to render inside the background */
+    children: React.ReactNode;
+    /** Background image URL for light mode */
+    lightImage?: string;
+    /** Background image URL for dark mode */
+    darkImage?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+declare function AppBackground({ children, lightImage, darkImage, className, }: AppBackgroundProps): react_jsx_runtime.JSX.Element;
 
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -230,4 +242,4 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedBgCircle, AnimatedBgRectangle, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight };
+export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight };

package/dist/index.js

@@ -1,9 +1,53 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React2 from 'react';
 import { useState, useMemo, useId, useRef, useCallback, useEffect } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
-// src/components/Input.tsx
+// src/components/AppBackground.tsx
+function AppBackground({
+  children,
+  lightImage,
+  darkImage,
+  className = ""
+}) {
+  const hasImages = lightImage || darkImage;
+  const baseClasses = "min-h-screen transition-colors";
+  const gradientClasses = !hasImages ? "bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800" : "";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    lightImage && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 -z-10 dark:hidden",
+        style: {
+          backgroundImage: `url(${lightImage})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat"
+        }
+      }
+    ),
+    darkImage && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 -z-10 hidden dark:block",
+        style: {
+          backgroundImage: `url(${darkImage})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: [baseClasses, gradientClasses, className].filter(Boolean).join(" "),
+        style: hasImages ? {} : void 0,
+        children
+      }
+    )
+  ] });
+}
 var Input = React2.forwardRef(
   ({ className, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -1034,4 +1078,4 @@ var ChatButton = ({
 };
 var ChatButton_default = ChatButton;
 
-export { AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, Autocomplete, Avatar, AvatarGroup, Button, ChatButton_default as ChatButton, Chip, Counter, Icon, IconButton, Input, Modal, Search, Skeleton, Typo };
+export { AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, Button, ChatButton_default as ChatButton, Chip, Counter, Icon, IconButton, Input, Modal, Search, Skeleton, Typo };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "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

@@ -0,0 +1,81 @@
+import * as React from "react";
+
+export type AppBackgroundProps = {
+  /** Content to render inside the background */
+  children: React.ReactNode;
+  /** Background image URL for light mode */
+  lightImage?: string;
+  /** Background image URL for dark mode */
+  darkImage?: string;
+  /** Additional CSS classes */
+  className?: string;
+};
+
+export function AppBackground({
+  children,
+  lightImage,
+  darkImage,
+  className = "",
+}: AppBackgroundProps) {
+  const hasImages = lightImage || darkImage;
+
+  // Base classes
+  const baseClasses = "min-h-screen transition-colors";
+
+  // Gradient fallback when no images provided
+  const gradientClasses = !hasImages
+    ? "bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800"
+    : "";
+
+  // Background image styles
+  const getBackgroundStyle = (): React.CSSProperties => {
+    if (!hasImages) return {};
+
+    return {
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
+    };
+  };
+
+  return (
+    <>
+      {/* Light mode background image */}
+      {lightImage && (
+        <div
+          className="fixed inset-0 -z-10 dark:hidden"
+          style={{
+            backgroundImage: `url(${lightImage})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            backgroundRepeat: "no-repeat",
+          }}
+        />
+      )}
+
+      {/* Dark mode background image */}
+      {darkImage && (
+        <div
+          className="fixed inset-0 -z-10 hidden dark:block"
+          style={{
+            backgroundImage: `url(${darkImage})`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+            backgroundRepeat: "no-repeat",
+          }}
+        />
+      )}
+
+      {/* Content container */}
+      <div
+        className={[baseClasses, gradientClasses, className]
+          .filter(Boolean)
+          .join(" ")}
+        style={hasImages ? {} : undefined}
+      >
+        {children}
+      </div>
+    </>
+  );
+}
+

package/src/index.ts

@@ -1,4 +1,5 @@
 // Components
+export { AppBackground } from "./components/AppBackground";
 export * from "./components/Input";
 export * from "./components/Modal";
 export { default as Typo } from "./components/Typo";
@@ -15,6 +16,7 @@ export { default as Counter } from "./components/Counter";
 export * from "./components/Chat";
 
 // Types
+export type { AppBackgroundProps } from "./components/AppBackground";
 export type { InputProps } from "./components/Input";
 export type { ModalProps } from "./components/Modal";
 export type { TypoProps, TypoVariant, TypoWeight } from "./components/Typo";

package/src/stories/AppBackground.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AppBackground } from "../components/AppBackground";
+import Typo from "../components/Typo";
+import { Button } from "../components/Button";
+
+const meta = {
+  title: "Components/AppBackground",
+  component: AppBackground,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AppBackground>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div className="p-8">
+        <Typo variant="headline-lg" bold="bold" className="mb-4">
+          Default Gradient Background
+        </Typo>
+        <Typo variant="body-md" className="mb-4">
+          This background automatically switches between light and dark gradients based on the theme.
+        </Typo>
+        <Button variant="primary">Click Me</Button>
+      </div>
+    ),
+  },
+};
+
+export const WithLightImage: Story = {
+  args: {
+    lightImage: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80",
+    children: (
+      <div className="p-8">
+        <Typo variant="headline-lg" bold="bold" className="mb-4 text-white">
+          With Light Mode Image
+        </Typo>
+        <Typo variant="body-md" className="mb-4 text-white">
+          Custom background image for light mode. Switch to dark mode to see the gradient fallback.
+        </Typo>
+        <Button variant="primary">Click Me</Button>
+      </div>
+    ),
+  },
+};
+
+export const WithDarkImage: Story = {
+  args: {
+    darkImage: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80",
+    children: (
+      <div className="p-8">
+        <Typo variant="headline-lg" bold="bold" className="mb-4">
+          With Dark Mode Image
+        </Typo>
+        <Typo variant="body-md" className="mb-4">
+          Custom background image for dark mode. Switch to light mode to see the gradient fallback.
+        </Typo>
+        <Button variant="primary">Click Me</Button>
+      </div>
+    ),
+  },
+};
+
+export const WithBothImages: Story = {
+  args: {
+    lightImage: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80",
+    darkImage: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80",
+    children: (
+      <div className="p-8">
+        <Typo variant="headline-lg" bold="bold" className="mb-4">
+          Different Images per Theme
+        </Typo>
+        <Typo variant="body-md" className="mb-4">
+          This example has different background images for light and dark modes. Toggle the theme to see the difference!
+        </Typo>
+        <Button variant="primary">Click Me</Button>
+      </div>
+    ),
+  },
+};
+
+export const FullPageExample: Story = {
+  args: {
+    children: (
+      <div className="flex min-h-screen items-center justify-center">
+        <div className="max-w-2xl rounded-lg bg-white/80 dark:bg-slate-900/80 p-8 backdrop-blur-sm shadow-xl">
+          <Typo variant="headline-lg" bold="bold" className="mb-4">
+            Welcome to NeoPTO
+          </Typo>
+          <Typo variant="body-md" className="mb-6 text-text-secondary">
+            This is an example of a full-page layout with AppBackground. The background automatically adjusts to your theme preference.
+          </Typo>
+          <div className="flex gap-4">
+            <Button variant="primary">Get Started</Button>
+            <Button variant="secondary">Learn More</Button>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+};
+