@neoptocom/neopto-ui 0.9.6 → 0.9.8

package/dist/index.cjs

@@ -260,7 +260,6 @@ function useIsomorphicLayoutEffect(effect, deps) {
 function Modal({
   open,
   onClose,
-  title,
   closeOnBackdrop = true,
   children,
   className = "",
@@ -309,18 +308,14 @@ function Modal({
       open,
       onClose: closeOnBackdrop ? onClose : void 0,
       zIndex,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         Card,
         {
           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
         }
       )
     }
@@ -996,7 +991,7 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
   const variants = {
     primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
     secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
-    ghost: "bg-transparent text-cyan-500 hover:bg-cyan-50 active:bg-cyan-100 disabled:text-neutral-400"
+    ghost: "bg-transparent text-[var(--fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50"
   };
   const sizes = {
     sm: "h-9 px-3",

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

@@ -239,7 +239,6 @@ function useIsomorphicLayoutEffect(effect, deps) {
 function Modal({
   open,
   onClose,
-  title,
   closeOnBackdrop = true,
   children,
   className = "",
@@ -288,18 +287,14 @@ function Modal({
       open,
       onClose: closeOnBackdrop ? onClose : void 0,
       zIndex,
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         Card,
         {
           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
         }
       )
     }
@@ -975,7 +970,7 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
   const variants = {
     primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
     secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
-    ghost: "bg-transparent text-cyan-500 hover:bg-cyan-50 active:bg-cyan-100 disabled:text-neutral-400"
+    ghost: "bg-transparent text-[var(--fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50"
   };
   const sizes = {
     sm: "h-9 px-3",

package/package.json

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

@@ -25,7 +25,7 @@ function getButtonClasses(
     const variants = {
         primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
         secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
-        ghost: "bg-transparent text-cyan-500 hover:bg-cyan-50 active:bg-cyan-100 disabled:text-neutral-400"
+        ghost: "bg-transparent text-[var(--fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50"
     };
 
     const sizes = {

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 = "",
@@ -100,15 +97,9 @@ export function Modal({
         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: