@neoptocom/neopto-ui 0.8.1 → 0.9.1

package/dist/index.cjs

@@ -100,6 +100,77 @@ function AppBackground({
     )
   ] });
 }
+function BackgroundBlur({
+  open,
+  children,
+  onClose,
+  zIndex = 40,
+  className = ""
+}) {
+  const [shouldRender, setShouldRender] = React2.useState(false);
+  const [isVisible, setIsVisible] = React2.useState(false);
+  React2.useEffect(() => {
+    if (open) {
+      setShouldRender(true);
+      requestAnimationFrame(() => {
+        setIsVisible(true);
+      });
+    } else {
+      setIsVisible(false);
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+  if (!shouldRender) return null;
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget && onClose) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `fixed inset-0 flex items-center justify-center transition-opacity duration-500 ${className}`,
+      style: {
+        backgroundColor: "rgba(0, 0, 0, 0.10)",
+        backdropFilter: "blur(10px)",
+        WebkitBackdropFilter: "blur(10px)",
+        // Safari support
+        zIndex,
+        opacity: isVisible ? 1 : 0
+      },
+      onClick: handleBackdropClick,
+      role: "presentation",
+      children
+    }
+  );
+}
+function Card({
+  children,
+  className = "",
+  style,
+  ...props
+}) {
+  const mergedStyle = {
+    borderRadius: "30px",
+    background: "rgba(112, 133, 233, 0.05)",
+    backdropFilter: "blur(75px)",
+    WebkitBackdropFilter: "blur(75px)",
+    // Safari support
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `p-6 ${className}`,
+      style: mergedStyle,
+      ...props,
+      children
+    }
+  );
+}
 var Input = React2__namespace.forwardRef(
   ({ className, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1162,7 +1233,9 @@ exports.AppBackground = AppBackground;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
+exports.BackgroundBlur = BackgroundBlur;
 exports.Button = Button;
+exports.Card = Card;
 exports.ChatButton = ChatButton_default;
 exports.Chip = Chip;
 exports.Counter = Counter;

package/dist/index.d.cts

@@ -26,6 +26,28 @@ type AppBackgroundProps = {
 };
 declare function AppBackground({ children, lightImage, darkImage, className, }: AppBackgroundProps): react_jsx_runtime.JSX.Element;
 
+type BackgroundBlurProps = {
+    /** Whether the blur overlay is visible */
+    open: boolean;
+    /** Content to render on top of the blur (e.g., modal, drawer) */
+    children?: React.ReactNode;
+    /** Callback when the backdrop is clicked */
+    onClose?: () => void;
+    /** z-index for the overlay (default: 40) */
+    zIndex?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+declare function BackgroundBlur({ open, children, onClose, zIndex, className, }: BackgroundBlurProps): react_jsx_runtime.JSX.Element | null;
+
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Content to render inside the card */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+declare function Card({ children, className, style, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -259,4 +281,4 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-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, index as assets };
+export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, 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, index as assets };

package/dist/index.d.ts

@@ -26,6 +26,28 @@ type AppBackgroundProps = {
 };
 declare function AppBackground({ children, lightImage, darkImage, className, }: AppBackgroundProps): react_jsx_runtime.JSX.Element;
 
+type BackgroundBlurProps = {
+    /** Whether the blur overlay is visible */
+    open: boolean;
+    /** Content to render on top of the blur (e.g., modal, drawer) */
+    children?: React.ReactNode;
+    /** Callback when the backdrop is clicked */
+    onClose?: () => void;
+    /** z-index for the overlay (default: 40) */
+    zIndex?: number;
+    /** Additional CSS classes */
+    className?: string;
+};
+declare function BackgroundBlur({ open, children, onClose, zIndex, className, }: BackgroundBlurProps): react_jsx_runtime.JSX.Element | null;
+
+type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Content to render inside the card */
+    children: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+};
+declare function Card({ children, className, style, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -259,4 +281,4 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-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, index as assets };
+export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, 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, index as assets };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React2 from 'react';
-import { useState, useMemo, useId, useRef, useCallback, useEffect } from 'react';
+import { useState, useEffect, useMemo, useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 
 var __defProp = Object.defineProperty;
@@ -79,6 +79,77 @@ function AppBackground({
     )
   ] });
 }
+function BackgroundBlur({
+  open,
+  children,
+  onClose,
+  zIndex = 40,
+  className = ""
+}) {
+  const [shouldRender, setShouldRender] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    if (open) {
+      setShouldRender(true);
+      requestAnimationFrame(() => {
+        setIsVisible(true);
+      });
+    } else {
+      setIsVisible(false);
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+  if (!shouldRender) return null;
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget && onClose) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `fixed inset-0 flex items-center justify-center transition-opacity duration-500 ${className}`,
+      style: {
+        backgroundColor: "rgba(0, 0, 0, 0.10)",
+        backdropFilter: "blur(10px)",
+        WebkitBackdropFilter: "blur(10px)",
+        // Safari support
+        zIndex,
+        opacity: isVisible ? 1 : 0
+      },
+      onClick: handleBackdropClick,
+      role: "presentation",
+      children
+    }
+  );
+}
+function Card({
+  children,
+  className = "",
+  style,
+  ...props
+}) {
+  const mergedStyle = {
+    borderRadius: "30px",
+    background: "rgba(112, 133, 233, 0.05)",
+    backdropFilter: "blur(75px)",
+    WebkitBackdropFilter: "blur(75px)",
+    // Safari support
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `p-6 ${className}`,
+      style: mergedStyle,
+      ...props,
+      children
+    }
+  );
+}
 var Input = React2.forwardRef(
   ({ className, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -1135,4 +1206,4 @@ var ChatButton = ({
 };
 var ChatButton_default = ChatButton;
 
-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, assets_exports as assets };
+export { AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Button, Card, ChatButton_default as ChatButton, Chip, Counter, Icon, IconButton, Input, Modal, Search, Skeleton, Typo, assets_exports as assets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "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/BackgroundBlur.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+
+export type BackgroundBlurProps = {
+  /** Whether the blur overlay is visible */
+  open: boolean;
+  /** Content to render on top of the blur (e.g., modal, drawer) */
+  children?: React.ReactNode;
+  /** Callback when the backdrop is clicked */
+  onClose?: () => void;
+  /** z-index for the overlay (default: 40) */
+  zIndex?: number;
+  /** Additional CSS classes */
+  className?: string;
+};
+
+export function BackgroundBlur({
+  open,
+  children,
+  onClose,
+  zIndex = 40,
+  className = "",
+}: BackgroundBlurProps) {
+  const [shouldRender, setShouldRender] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      // Mount the component
+      setShouldRender(true);
+      // Trigger fade-in on next frame
+      requestAnimationFrame(() => {
+        setIsVisible(true);
+      });
+    } else {
+      // Trigger fade-out
+      setIsVisible(false);
+      // Unmount after transition completes
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 500); // Match transition duration
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+
+  // Don't render if not mounted
+  if (!shouldRender) return null;
+
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    // Only trigger onClose if clicking the backdrop itself, not children
+    if (e.target === e.currentTarget && onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className={`fixed inset-0 flex items-center justify-center transition-opacity duration-500 ${className}`}
+      style={{
+        backgroundColor: "rgba(0, 0, 0, 0.10)",
+        backdropFilter: "blur(10px)",
+        WebkitBackdropFilter: "blur(10px)", // Safari support
+        zIndex,
+        opacity: isVisible ? 1 : 0,
+      }}
+      onClick={handleBackdropClick}
+      role="presentation"
+    >
+      {children}
+    </div>
+  );
+}
+

package/src/components/Card.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Content to render inside the card */
+  children: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+};
+
+export function Card({
+  children,
+  className = "",
+  style,
+  ...props
+}: CardProps) {
+  // Merge user styles with card styles
+  const mergedStyle: React.CSSProperties = {
+    borderRadius: "30px",
+    background: "rgba(112, 133, 233, 0.05)",
+    backdropFilter: "blur(75px)",
+    WebkitBackdropFilter: "blur(75px)", // Safari support
+    ...style,
+  };
+
+  return (
+    <div
+      className={`p-6 ${className}`}
+      style={mergedStyle}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+

package/src/index.ts

@@ -3,6 +3,8 @@ export * as assets from "./assets";
 
 // Components
 export { AppBackground } from "./components/AppBackground";
+export { BackgroundBlur } from "./components/BackgroundBlur";
+export { Card } from "./components/Card";
 export * from "./components/Input";
 export * from "./components/Modal";
 export { default as Typo } from "./components/Typo";
@@ -20,6 +22,8 @@ export * from "./components/Chat";
 
 // Types
 export type { AppBackgroundProps } from "./components/AppBackground";
+export type { BackgroundBlurProps } from "./components/BackgroundBlur";
+export type { CardProps } from "./components/Card";
 export type { InputProps } from "./components/Input";
 export type { ModalProps } from "./components/Modal";
 export type { TypoProps, TypoVariant, TypoWeight } from "./components/Typo";