@neoptocom/neopto-ui 0.8.0 → 0.9.0

package/dist/index.cjs

@@ -100,6 +100,53 @@ 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
+    }
+  );
+}
 var Input = React2__namespace.forwardRef(
   ({ className, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -891,6 +938,9 @@ function Chip({
   icon,
   className = "",
   label,
+  backgroundColor,
+  textColor,
+  style,
   ...props
 }) {
   const base = "inline-flex w-fit items-center justify-center gap-1 whitespace-nowrap overflow-hidden rounded-full h-6 px-2 text-xs font-semibold";
@@ -901,10 +951,25 @@ function Chip({
     light: "bg-[var(--muted)] text-[var(--fg)]",
     dark: "bg-[var(--surface)] text-[var(--fg)]"
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: [base, variantCls[variant], className].join(" "), ...props, children: [
-    icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
-  ] });
+  const hasCustomColors = backgroundColor || textColor;
+  const colorClasses = hasCustomColors ? "" : variantCls[variant];
+  const mergedStyle = {
+    ...style,
+    ...backgroundColor && { backgroundColor },
+    ...textColor && { color: textColor }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: [base, colorClasses, className].join(" "),
+      style: mergedStyle,
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+      ]
+    }
+  );
 }
 function Counter({
   value = 0,
@@ -1144,6 +1209,7 @@ exports.AppBackground = AppBackground;
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
+exports.BackgroundBlur = BackgroundBlur;
 exports.Button = Button;
 exports.ChatButton = ChatButton_default;
 exports.Chip = Chip;

package/dist/index.d.cts

@@ -26,6 +26,20 @@ 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 InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -214,8 +228,12 @@ type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
     variant?: "warning" | "success" | "error" | "light" | "dark";
     icon?: string;
     label?: string;
+    /** Custom background color (overrides variant) */
+    backgroundColor?: string;
+    /** Custom text color (overrides variant) */
+    textColor?: string;
 };
-declare function Chip({ variant, icon, className, label, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+declare function Chip({ variant, icon, className, label, backgroundColor, textColor, style, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
 
 type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     value?: number;
@@ -255,4 +273,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, 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,20 @@ 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 InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
@@ -214,8 +228,12 @@ type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
     variant?: "warning" | "success" | "error" | "light" | "dark";
     icon?: string;
     label?: string;
+    /** Custom background color (overrides variant) */
+    backgroundColor?: string;
+    /** Custom text color (overrides variant) */
+    textColor?: string;
 };
-declare function Chip({ variant, icon, className, label, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+declare function Chip({ variant, icon, className, label, backgroundColor, textColor, style, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
 
 type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     value?: number;
@@ -255,4 +273,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, 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,53 @@ 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
+    }
+  );
+}
 var Input = React2.forwardRef(
   ({ className, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -870,6 +917,9 @@ function Chip({
   icon,
   className = "",
   label,
+  backgroundColor,
+  textColor,
+  style,
   ...props
 }) {
   const base = "inline-flex w-fit items-center justify-center gap-1 whitespace-nowrap overflow-hidden rounded-full h-6 px-2 text-xs font-semibold";
@@ -880,10 +930,25 @@ function Chip({
     light: "bg-[var(--muted)] text-[var(--fg)]",
     dark: "bg-[var(--surface)] text-[var(--fg)]"
   };
-  return /* @__PURE__ */ jsxs("div", { className: [base, variantCls[variant], className].join(" "), ...props, children: [
-    icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
-    /* @__PURE__ */ jsx("span", { children: label })
-  ] });
+  const hasCustomColors = backgroundColor || textColor;
+  const colorClasses = hasCustomColors ? "" : variantCls[variant];
+  const mergedStyle = {
+    ...style,
+    ...backgroundColor && { backgroundColor },
+    ...textColor && { color: textColor }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: [base, colorClasses, className].join(" "),
+      style: mergedStyle,
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
 }
 function Counter({
   value = 0,
@@ -1117,4 +1182,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, 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.0",
+  "version": "0.9.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/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/Chip.tsx

@@ -5,6 +5,10 @@ export type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
   variant?: "warning" | "success" | "error" | "light" | "dark";
   icon?: string;
   label?: string;
+  /** Custom background color (overrides variant) */
+  backgroundColor?: string;
+  /** Custom text color (overrides variant) */
+  textColor?: string;
 };
 
 export default function Chip({
@@ -12,13 +16,16 @@ export default function Chip({
   icon,
   className = "",
   label,
+  backgroundColor,
+  textColor,
+  style,
   ...props
 }: ChipProps) {
   const base =
     "inline-flex w-fit items-center justify-center gap-1 whitespace-nowrap overflow-hidden rounded-full h-6 px-2 " +
     "text-xs font-semibold";
 
-  // Token-based backgrounds + readable text
+  // Token-based backgrounds + readable text (only used if no custom colors)
   const variantCls: Record<NonNullable<ChipProps["variant"]>, string> = {
     warning: "bg-[var(--warning)] text-white",
     success: "bg-[var(--success)] text-white",
@@ -27,8 +34,23 @@ export default function Chip({
     dark: "bg-[var(--surface)] text-[var(--fg)]"
   };
 
+  // Use custom colors if provided, otherwise use variant styles
+  const hasCustomColors = backgroundColor || textColor;
+  const colorClasses = hasCustomColors ? "" : variantCls[variant];
+
+  // Merge custom colors into style prop
+  const mergedStyle: React.CSSProperties = {
+    ...style,
+    ...(backgroundColor && { backgroundColor }),
+    ...(textColor && { color: textColor }),
+  };
+
   return (
-    <div className={[base, variantCls[variant], className].join(" ")} {...props}>
+    <div 
+      className={[base, colorClasses, className].join(" ")} 
+      style={mergedStyle}
+      {...props}
+    >
       {icon ? <Icon name={icon} size="sm" className="mr-0.5" /> : null}
       <span>{label}</span>
     </div>

package/src/index.ts

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