@neoptocom/neopto-ui 0.7.5 → 0.8.0

package/dist/index.cjs

@@ -189,26 +189,26 @@ function Modal({
   const container = document.body;
   return reactDom.createPortal(overlay, container);
 }
-function getTypoClasses(variant, weight = "normal", muted, className) {
+var typoStyles = {
+  "display-lg": { fontSize: "57px", lineHeight: "64px", letterSpacing: "-0.25px" },
+  "display-md": { fontSize: "45px", lineHeight: "52px", letterSpacing: "0" },
+  "display-sm": { fontSize: "36px", lineHeight: "44px", letterSpacing: "0" },
+  "headline-lg": { fontSize: "32px", lineHeight: "40px", letterSpacing: "0" },
+  "headline-md": { fontSize: "28px", lineHeight: "36px", letterSpacing: "0" },
+  "headline-sm": { fontSize: "24px", lineHeight: "32px", letterSpacing: "0" },
+  "title-lg": { fontSize: "22px", lineHeight: "28px", letterSpacing: "0" },
+  "title-md": { fontSize: "16px", lineHeight: "24px", letterSpacing: "0.15px" },
+  "title-sm": { fontSize: "14px", lineHeight: "20px", letterSpacing: "0.1px" },
+  "label-lg": { fontSize: "14px", lineHeight: "20px", letterSpacing: "0.1px" },
+  "label-md": { fontSize: "12px", lineHeight: "16px", letterSpacing: "0.5px" },
+  "label-sm": { fontSize: "11px", lineHeight: "16px", letterSpacing: "0.5px" },
+  "body-lg": { fontSize: "16px", lineHeight: "24px", letterSpacing: "0.5px" },
+  "body-md": { fontSize: "14px", lineHeight: "20px", letterSpacing: "0.25px" },
+  "body-sm": { fontSize: "12px", lineHeight: "16px", letterSpacing: "0.4px" },
+  "button": { fontSize: "16px", lineHeight: "24px", letterSpacing: "0" }
+};
+function getTypoClasses(weight = "normal", muted, className) {
   const base = "text-current";
-  const variants = {
-    "display-lg": "text-5xl leading-tight",
-    "display-md": "text-4xl leading-tight",
-    "display-sm": "text-4xl leading-tight",
-    "headline-lg": "text-3xl leading-tight",
-    "headline-md": "text-3xl leading-tight",
-    "headline-sm": "text-3xl leading-tight",
-    "title-lg": "text-xl leading-tight",
-    "title-md": "text-lg leading-tight",
-    "title-sm": "text-base leading-tight",
-    "label-lg": "text-sm leading-tight",
-    "label-md": "text-xs leading-tight",
-    "label-sm": "text-xs leading-tight",
-    "body-lg": "text-base leading-relaxed",
-    "body-md": "text-sm leading-relaxed",
-    "body-sm": "text-xs leading-relaxed",
-    "button": "text-base leading-normal"
-  };
   const weights = {
     normal: "font-normal",
     medium: "font-medium",
@@ -217,7 +217,6 @@ function getTypoClasses(variant, weight = "normal", muted, className) {
   };
   return [
     base,
-    variants[variant],
     weights[weight],
     muted ? "text-[var(--muted-fg)]" : "",
     className
@@ -230,6 +229,7 @@ function Typo({
   as,
   className,
   children,
+  style,
   ...props
 }) {
   const Component = as ?? "span";
@@ -239,11 +239,19 @@ function Typo({
     }
     return "var(--font-display)";
   };
+  const variantStyles = typoStyles[variant];
+  const mergedStyle = {
+    ...style,
+    fontFamily: getFontFamily(variant),
+    fontSize: variantStyles.fontSize,
+    lineHeight: variantStyles.lineHeight,
+    letterSpacing: variantStyles.letterSpacing
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: getTypoClasses(variant, bold, muted, className),
-      style: { fontFamily: getFontFamily(variant) },
+      className: getTypoClasses(bold, muted, className),
+      style: mergedStyle,
       ...props,
       children
     }

package/dist/index.d.cts

@@ -55,7 +55,7 @@ type TypoProps<T extends React.ElementType = "span"> = {
     as?: T;
     children: React.ReactNode;
 } & Omit<React.ComponentPropsWithoutRef<T>, "as" | "children">;
-declare function Typo<T extends React.ElementType = "span">({ variant, bold, muted, as, className, children, ...props }: TypoProps<T>): react_jsx_runtime.JSX.Element;
+declare function Typo<T extends React.ElementType = "span">({ variant, bold, muted, as, className, children, style, ...props }: TypoProps<T>): react_jsx_runtime.JSX.Element;
 
 type AvatarProps = {
     /** Person's full name (used for initials and alt text) */

package/dist/index.d.ts

@@ -55,7 +55,7 @@ type TypoProps<T extends React.ElementType = "span"> = {
     as?: T;
     children: React.ReactNode;
 } & Omit<React.ComponentPropsWithoutRef<T>, "as" | "children">;
-declare function Typo<T extends React.ElementType = "span">({ variant, bold, muted, as, className, children, ...props }: TypoProps<T>): react_jsx_runtime.JSX.Element;
+declare function Typo<T extends React.ElementType = "span">({ variant, bold, muted, as, className, children, style, ...props }: TypoProps<T>): react_jsx_runtime.JSX.Element;
 
 type AvatarProps = {
     /** Person's full name (used for initials and alt text) */

package/dist/index.js

@@ -168,26 +168,26 @@ function Modal({
   const container = document.body;
   return createPortal(overlay, container);
 }
-function getTypoClasses(variant, weight = "normal", muted, className) {
+var typoStyles = {
+  "display-lg": { fontSize: "57px", lineHeight: "64px", letterSpacing: "-0.25px" },
+  "display-md": { fontSize: "45px", lineHeight: "52px", letterSpacing: "0" },
+  "display-sm": { fontSize: "36px", lineHeight: "44px", letterSpacing: "0" },
+  "headline-lg": { fontSize: "32px", lineHeight: "40px", letterSpacing: "0" },
+  "headline-md": { fontSize: "28px", lineHeight: "36px", letterSpacing: "0" },
+  "headline-sm": { fontSize: "24px", lineHeight: "32px", letterSpacing: "0" },
+  "title-lg": { fontSize: "22px", lineHeight: "28px", letterSpacing: "0" },
+  "title-md": { fontSize: "16px", lineHeight: "24px", letterSpacing: "0.15px" },
+  "title-sm": { fontSize: "14px", lineHeight: "20px", letterSpacing: "0.1px" },
+  "label-lg": { fontSize: "14px", lineHeight: "20px", letterSpacing: "0.1px" },
+  "label-md": { fontSize: "12px", lineHeight: "16px", letterSpacing: "0.5px" },
+  "label-sm": { fontSize: "11px", lineHeight: "16px", letterSpacing: "0.5px" },
+  "body-lg": { fontSize: "16px", lineHeight: "24px", letterSpacing: "0.5px" },
+  "body-md": { fontSize: "14px", lineHeight: "20px", letterSpacing: "0.25px" },
+  "body-sm": { fontSize: "12px", lineHeight: "16px", letterSpacing: "0.4px" },
+  "button": { fontSize: "16px", lineHeight: "24px", letterSpacing: "0" }
+};
+function getTypoClasses(weight = "normal", muted, className) {
   const base = "text-current";
-  const variants = {
-    "display-lg": "text-5xl leading-tight",
-    "display-md": "text-4xl leading-tight",
-    "display-sm": "text-4xl leading-tight",
-    "headline-lg": "text-3xl leading-tight",
-    "headline-md": "text-3xl leading-tight",
-    "headline-sm": "text-3xl leading-tight",
-    "title-lg": "text-xl leading-tight",
-    "title-md": "text-lg leading-tight",
-    "title-sm": "text-base leading-tight",
-    "label-lg": "text-sm leading-tight",
-    "label-md": "text-xs leading-tight",
-    "label-sm": "text-xs leading-tight",
-    "body-lg": "text-base leading-relaxed",
-    "body-md": "text-sm leading-relaxed",
-    "body-sm": "text-xs leading-relaxed",
-    "button": "text-base leading-normal"
-  };
   const weights = {
     normal: "font-normal",
     medium: "font-medium",
@@ -196,7 +196,6 @@ function getTypoClasses(variant, weight = "normal", muted, className) {
   };
   return [
     base,
-    variants[variant],
     weights[weight],
     muted ? "text-[var(--muted-fg)]" : "",
     className
@@ -209,6 +208,7 @@ function Typo({
   as,
   className,
   children,
+  style,
   ...props
 }) {
   const Component = as ?? "span";
@@ -218,11 +218,19 @@ function Typo({
     }
     return "var(--font-display)";
   };
+  const variantStyles = typoStyles[variant];
+  const mergedStyle = {
+    ...style,
+    fontFamily: getFontFamily(variant),
+    fontSize: variantStyles.fontSize,
+    lineHeight: variantStyles.lineHeight,
+    letterSpacing: variantStyles.letterSpacing
+  };
   return /* @__PURE__ */ jsx(
     Component,
     {
-      className: getTypoClasses(variant, bold, muted, className),
-      style: { fontFamily: getFontFamily(variant) },
+      className: getTypoClasses(bold, muted, className),
+      style: mergedStyle,
       ...props,
       children
     }

package/package.json

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

@@ -10,33 +10,39 @@ export type TypoVariant =
 
 export type TypoWeight = "normal" | "medium" | "semibold" | "bold";
 
+// Typography style specifications (fontSize, lineHeight, letterSpacing)
+type TypoStyle = {
+  fontSize: string;
+  lineHeight: string;
+  letterSpacing: string;
+};
+
+const typoStyles: Record<TypoVariant, TypoStyle> = {
+  "display-lg": { fontSize: "57px", lineHeight: "64px", letterSpacing: "-0.25px" },
+  "display-md": { fontSize: "45px", lineHeight: "52px", letterSpacing: "0" },
+  "display-sm": { fontSize: "36px", lineHeight: "44px", letterSpacing: "0" },
+  "headline-lg": { fontSize: "32px", lineHeight: "40px", letterSpacing: "0" },
+  "headline-md": { fontSize: "28px", lineHeight: "36px", letterSpacing: "0" },
+  "headline-sm": { fontSize: "24px", lineHeight: "32px", letterSpacing: "0" },
+  "title-lg": { fontSize: "22px", lineHeight: "28px", letterSpacing: "0" },
+  "title-md": { fontSize: "16px", lineHeight: "24px", letterSpacing: "0.15px" },
+  "title-sm": { fontSize: "14px", lineHeight: "20px", letterSpacing: "0.1px" },
+  "label-lg": { fontSize: "14px", lineHeight: "20px", letterSpacing: "0.1px" },
+  "label-md": { fontSize: "12px", lineHeight: "16px", letterSpacing: "0.5px" },
+  "label-sm": { fontSize: "11px", lineHeight: "16px", letterSpacing: "0.5px" },
+  "body-lg": { fontSize: "16px", lineHeight: "24px", letterSpacing: "0.5px" },
+  "body-md": { fontSize: "14px", lineHeight: "20px", letterSpacing: "0.25px" },
+  "body-sm": { fontSize: "12px", lineHeight: "16px", letterSpacing: "0.4px" },
+  "button": { fontSize: "16px", lineHeight: "24px", letterSpacing: "0" }
+};
+
 function getTypoClasses(
-  variant: TypoVariant,
   weight: TypoWeight = "normal",
   muted?: boolean,
   className?: string
 ): string {
   const base = "text-current";
 
-  const variants: Record<TypoVariant, string> = {
-    "display-lg": "text-5xl leading-tight",
-    "display-md": "text-4xl leading-tight",
-    "display-sm": "text-4xl leading-tight",
-    "headline-lg": "text-3xl leading-tight",
-    "headline-md": "text-3xl leading-tight",
-    "headline-sm": "text-3xl leading-tight",
-    "title-lg": "text-xl leading-tight",
-    "title-md": "text-lg leading-tight",
-    "title-sm": "text-base leading-tight",
-    "label-lg": "text-sm leading-tight",
-    "label-md": "text-xs leading-tight",
-    "label-sm": "text-xs leading-tight",
-    "body-lg": "text-base leading-relaxed",
-    "body-md": "text-sm leading-relaxed",
-    "body-sm": "text-xs leading-relaxed",
-    "button": "text-base leading-normal"
-  };
-
   const weights: Record<TypoWeight, string> = {
     normal: "font-normal",
     medium: "font-medium",
@@ -46,7 +52,6 @@ function getTypoClasses(
 
   return [
     base,
-    variants[variant],
     weights[weight],
     muted ? "text-[var(--muted-fg)]" : "",
     className
@@ -75,6 +80,7 @@ export default function Typo<T extends React.ElementType = "span">({
   as,
   className,
   children,
+  style,
   ...props
 }: TypoProps<T>) {
   const Component = (as ?? "span") as React.ElementType;
@@ -87,10 +93,22 @@ export default function Typo<T extends React.ElementType = "span">({
     return "var(--font-display)";
   };
   
+  // Get typography styles for this variant
+  const variantStyles = typoStyles[variant];
+  
+  // Merge user styles with component styles, preserving typography specs
+  const mergedStyle: React.CSSProperties = {
+    ...style,
+    fontFamily: getFontFamily(variant),
+    fontSize: variantStyles.fontSize,
+    lineHeight: variantStyles.lineHeight,
+    letterSpacing: variantStyles.letterSpacing,
+  };
+  
   return (
     <Component
-      className={getTypoClasses(variant, bold, muted, className)}
-      style={{ fontFamily: getFontFamily(variant) }}
+      className={getTypoClasses(bold, muted, className)}
+      style={mergedStyle}
       {...props}
     >
       {children}

package/src/stories/AppBackground.stories.tsx

@@ -1,106 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { AppBackground } from "../components/AppBackground";
-import Typo from "../components/Typo";
-import { Button } from "../components/Button";
-
-const meta = {
-  title: "Components/AppBackground",
-  component: AppBackground,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof AppBackground>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <div className="p-8">
-        <Typo variant="headline-lg" bold="bold" className="mb-4">
-          Default Gradient Background
-        </Typo>
-        <Typo variant="body-md" className="mb-4">
-          This background automatically switches between light and dark gradients based on the theme.
-        </Typo>
-        <Button variant="primary">Click Me</Button>
-      </div>
-    ),
-  },
-};
-
-export const WithLightImage: Story = {
-  args: {
-    lightImage: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80",
-    children: (
-      <div className="p-8">
-        <Typo variant="headline-lg" bold="bold" className="mb-4 text-white">
-          With Light Mode Image
-        </Typo>
-        <Typo variant="body-md" className="mb-4 text-white">
-          Custom background image for light mode. Switch to dark mode to see the gradient fallback.
-        </Typo>
-        <Button variant="primary">Click Me</Button>
-      </div>
-    ),
-  },
-};
-
-export const WithDarkImage: Story = {
-  args: {
-    darkImage: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80",
-    children: (
-      <div className="p-8">
-        <Typo variant="headline-lg" bold="bold" className="mb-4">
-          With Dark Mode Image
-        </Typo>
-        <Typo variant="body-md" className="mb-4">
-          Custom background image for dark mode. Switch to light mode to see the gradient fallback.
-        </Typo>
-        <Button variant="primary">Click Me</Button>
-      </div>
-    ),
-  },
-};
-
-export const WithBothImages: Story = {
-  args: {
-    lightImage: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1920&q=80",
-    darkImage: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=80",
-    children: (
-      <div className="p-8">
-        <Typo variant="headline-lg" bold="bold" className="mb-4">
-          Different Images per Theme
-        </Typo>
-        <Typo variant="body-md" className="mb-4">
-          This example has different background images for light and dark modes. Toggle the theme to see the difference!
-        </Typo>
-        <Button variant="primary">Click Me</Button>
-      </div>
-    ),
-  },
-};
-
-export const FullPageExample: Story = {
-  args: {
-    children: (
-      <div className="flex min-h-screen items-center justify-center">
-        <div className="max-w-2xl rounded-lg bg-white/80 dark:bg-slate-900/80 p-8 backdrop-blur-sm shadow-xl">
-          <Typo variant="headline-lg" bold="bold" className="mb-4">
-            Welcome to NeoPTO
-          </Typo>
-          <Typo variant="body-md" className="mb-6 text-text-secondary">
-            This is an example of a full-page layout with AppBackground. The background automatically adjusts to your theme preference.
-          </Typo>
-          <div className="flex gap-4">
-            <Button variant="primary">Get Started</Button>
-            <Button variant="secondary">Learn More</Button>
-          </div>
-        </div>
-      </div>
-    ),
-  },
-};
-