@neoptocom/neopto-ui 0.9.5 → 0.9.7

package/dist/index.cjs

@@ -166,10 +166,12 @@ function Card({
     transition: "background-color 0.3s ease, color 0.3s ease",
     ...style
   };
+  const hasPadding = className && /\b(p-|px-|py-|pt-|pb-|pl-|pr-)\d/.test(className);
+  const cardClasses = `${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: className || "p-6",
+      className: cardClasses,
       style: mergedStyle,
       ...props,
       children: [
@@ -258,7 +260,6 @@ function useIsomorphicLayoutEffect(effect, deps) {
 function Modal({
   open,
   onClose,
-  title,
   closeOnBackdrop = true,
   children,
   className = "",
@@ -299,24 +300,22 @@ function Modal({
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   if (!mounted) return null;
+  const hasMaxWidth = className?.includes("max-w-");
+  const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${className || ""}`.trim();
   const modal = /* @__PURE__ */ jsxRuntime.jsx("div", { className: isDark ? "dark" : "", children: /* @__PURE__ */ jsxRuntime.jsx(
     BackgroundBlur,
     {
       open,
       onClose: closeOnBackdrop ? onClose : void 0,
       zIndex,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         Card,
         {
-          className: `w-full ${className || "max-w-lg"}`,
+          className: modalClasses,
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": title ? "modal-title" : void 0,
           showDecorations,
-          children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "modal-title", className: "mb-4 text-xl font-semibold", children: title }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { children })
-          ]
+          children
         }
       )
     }

package/dist/index.d.cts

@@ -60,8 +60,6 @@ type ModalProps = {
     onClose?: () => void;
     /** Modal content */
     children?: React.ReactNode;
-    /** Optional title (rendered as heading) */
-    title?: string;
     /** When true, closes when the backdrop is clicked (default: true) */
     closeOnBackdrop?: boolean;
     /** Custom className for the Card */
@@ -71,7 +69,7 @@ type ModalProps = {
     /** Show decorative elements on the Card (default: true) */
     showDecorations?: boolean;
 };
-declare function Modal({ open, onClose, title, closeOnBackdrop, children, className, zIndex, showDecorations, }: ModalProps): React.ReactPortal | null;
+declare function Modal({ open, onClose, closeOnBackdrop, children, className, zIndex, showDecorations, }: ModalProps): React.ReactPortal | null;
 
 type TypoVariant = "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | "button";
 type TypoWeight = "normal" | "medium" | "semibold" | "bold";

package/dist/index.d.ts

@@ -60,8 +60,6 @@ type ModalProps = {
     onClose?: () => void;
     /** Modal content */
     children?: React.ReactNode;
-    /** Optional title (rendered as heading) */
-    title?: string;
     /** When true, closes when the backdrop is clicked (default: true) */
     closeOnBackdrop?: boolean;
     /** Custom className for the Card */
@@ -71,7 +69,7 @@ type ModalProps = {
     /** Show decorative elements on the Card (default: true) */
     showDecorations?: boolean;
 };
-declare function Modal({ open, onClose, title, closeOnBackdrop, children, className, zIndex, showDecorations, }: ModalProps): React.ReactPortal | null;
+declare function Modal({ open, onClose, closeOnBackdrop, children, className, zIndex, showDecorations, }: ModalProps): React.ReactPortal | null;
 
 type TypoVariant = "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | "button";
 type TypoWeight = "normal" | "medium" | "semibold" | "bold";

package/dist/index.js

@@ -145,10 +145,12 @@ function Card({
     transition: "background-color 0.3s ease, color 0.3s ease",
     ...style
   };
+  const hasPadding = className && /\b(p-|px-|py-|pt-|pb-|pl-|pr-)\d/.test(className);
+  const cardClasses = `${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: className || "p-6",
+      className: cardClasses,
       style: mergedStyle,
       ...props,
       children: [
@@ -237,7 +239,6 @@ function useIsomorphicLayoutEffect(effect, deps) {
 function Modal({
   open,
   onClose,
-  title,
   closeOnBackdrop = true,
   children,
   className = "",
@@ -278,24 +279,22 @@ function Modal({
     return () => window.removeEventListener("keydown", onKey);
   }, [open, onClose]);
   if (!mounted) return null;
+  const hasMaxWidth = className?.includes("max-w-");
+  const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${className || ""}`.trim();
   const modal = /* @__PURE__ */ jsx("div", { className: isDark ? "dark" : "", children: /* @__PURE__ */ jsx(
     BackgroundBlur,
     {
       open,
       onClose: closeOnBackdrop ? onClose : void 0,
       zIndex,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         Card,
         {
-          className: `w-full ${className || "max-w-lg"}`,
+          className: modalClasses,
           role: "dialog",
           "aria-modal": "true",
-          "aria-labelledby": title ? "modal-title" : void 0,
           showDecorations,
-          children: [
-            title && /* @__PURE__ */ jsx("h2", { id: "modal-title", className: "mb-4 text-xl font-semibold", children: title }),
-            /* @__PURE__ */ jsx("div", { children })
-          ]
+          children
         }
       )
     }

package/package.json

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

@@ -29,9 +29,13 @@ export function Card({
     ...style,
   };
 
+  // Smart class merging: only add default padding if not provided
+  const hasPadding = className && /\b(p-|px-|py-|pt-|pb-|pl-|pr-)\d/.test(className);
+  const cardClasses = `${!hasPadding ? "p-6" : ""} ${className || ""}`.trim();
+
   return (
     <div
-      className={className || "p-6"}
+      className={cardClasses}
       style={mergedStyle}
       {...props}
     >

package/src/components/Modal.tsx

@@ -10,8 +10,6 @@ export type ModalProps = {
   onClose?: () => void;
   /** Modal content */
   children?: React.ReactNode;
-  /** Optional title (rendered as heading) */
-  title?: string;
   /** When true, closes when the backdrop is clicked (default: true) */
   closeOnBackdrop?: boolean;
   /** Custom className for the Card */
@@ -30,7 +28,6 @@ function useIsomorphicLayoutEffect(effect: React.EffectCallback, deps?: React.De
 export function Modal({
   open,
   onClose,
-  title,
   closeOnBackdrop = true,
   children,
   className = "",
@@ -85,6 +82,10 @@ export function Modal({
 
   if (!mounted) return null;
 
+  // Smart class merging: only add defaults if not provided
+  const hasMaxWidth = className?.includes("max-w-");
+  const modalClasses = `w-full ${!hasMaxWidth ? "max-w-lg" : ""} ${className || ""}`.trim();
+
   const modal = (
     <div className={isDark ? "dark" : ""}>
       <BackgroundBlur
@@ -93,18 +94,12 @@ export function Modal({
         zIndex={zIndex}
       >
       <Card
-        className={`w-full ${className || "max-w-lg"}`}
+        className={modalClasses}
         role="dialog"
         aria-modal="true"
-        aria-labelledby={title ? "modal-title" : undefined}
         showDecorations={showDecorations}
       >
-        {title && (
-          <h2 id="modal-title" className="mb-4 text-xl font-semibold">
-            {title}
-          </h2>
-        )}
-        <div>{children}</div>
+        {children}
       </Card>
     </BackgroundBlur>
     </div>

package/src/stories/Modal.stories.tsx

@@ -42,27 +42,14 @@ export const Default: Story = {
   ),
 };
 
-export const WithTitle: Story = {
-  args: { open: false },
-  render: () => (
-    <ModalDemo title="Modal Title">
-      <Typo variant="body-md">
-        This modal includes a title heading. You can still add any content you want below it.
-      </Typo>
-      <Typo variant="body-sm" className="mt-4 text-[var(--muted-fg)]">
-        Try clicking the backdrop to close, or press ESC.
-      </Typo>
-    </ModalDemo>
-  ),
-};
 
 export const NoBackdropClose: Story = {
   args: { open: false },
   render: () => (
     <ModalDemo 
-      title="Important Notice" 
       closeOnBackdrop={false}
     >
+      <Typo variant="headline-md" bold="semibold" className="mb-4">Important Notice</Typo>
       <Typo variant="body-md">
         This modal cannot be closed by clicking the backdrop.
       </Typo>
@@ -80,9 +67,9 @@ export const CustomStyling: Story = {
   args: { open: false },
   render: () => (
     <ModalDemo 
-      title="Large Modal"
       className="max-w-2xl p-12"
     >
+      <Typo variant="headline-md" bold="semibold" className="mb-4">Large Modal</Typo>
       <Typo variant="body-md">
         This modal has custom styling with a larger max-width and more padding.
       </Typo>
@@ -119,9 +106,9 @@ export const FormModal: Story = {
         <Modal 
           open={open} 
           onClose={() => setOpen(false)}
-          title="Contact Form"
         >
           <form onSubmit={handleSubmit}>
+            <Typo variant="headline-md" bold="semibold" className="mb-4">Contact Form</Typo>
             <div className="space-y-4">
               <div>
                 <label className="block mb-2 text-sm font-medium">Name</label>
@@ -181,9 +168,9 @@ export const ConfirmationDialog: Story = {
         <Modal 
           open={open} 
           onClose={() => setOpen(false)}
-          title="Confirm Deletion"
           closeOnBackdrop={false}
         >
+          <Typo variant="headline-md" bold="semibold" className="mb-4">Confirm Deletion</Typo>
           <Typo variant="body-md">
             Are you sure you want to delete this item? This action cannot be undone.
           </Typo>
@@ -242,7 +229,8 @@ export const WithCardDecorations: Story = {
     );
 
     return (
-      <ModalDemo title="Card with Decorative Elements">
+      <ModalDemo>
+        <Typo variant="headline-md" bold="semibold" className="mb-4">Card with Decorative Elements</Typo>
         <div className="space-y-4">
           <Typo variant="body-md">
             The Card component now includes decorative SVG elements from your Figma design: