@neoptocom/neopto-ui 0.9.0 → 0.9.1

package/dist/index.cjs

@@ -147,6 +147,30 @@ function BackgroundBlur({
     }
   );
 }
+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(
@@ -1211,6 +1235,7 @@ 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

@@ -40,6 +40,14 @@ type BackgroundBlurProps = {
 };
 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>>;
 
@@ -273,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, 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 };
+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

@@ -40,6 +40,14 @@ type BackgroundBlurProps = {
 };
 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>>;
 
@@ -273,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, 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 };
+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

@@ -126,6 +126,30 @@ function BackgroundBlur({
     }
   );
 }
+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(
@@ -1182,4 +1206,4 @@ var ChatButton = ({
 };
 var ChatButton_default = ChatButton;
 
-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 };
+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.9.0",
+  "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/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

@@ -4,6 +4,7 @@ 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";
@@ -22,6 +23,7 @@ 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";