@neynar/ui 0.3.1 → 0.4.0

package/.llm/sdk-items-registry.json

@@ -1,5 +1,5 @@
 {
-  "generated": "2025-10-11T22:49:58.686Z",
+  "generated": "2025-10-21T18:40:20.381Z",
   "sdk": "neynar-sdk-ui",
   "tier": "ui",
   "importPrefix": "@neynar/ui",
@@ -2852,89 +2852,88 @@
       "tooltipprovider"
     ]
   },
-  "Typography": {
-    "description": "Typography - Comprehensive text styling component for consistent design system implementation A flexible typography component that provides semantic text variants, color options, and accessibility features. Built with class-variance-authority (CVA) for type-safe variant management and supports both semantic HTML elements and composition patterns via Radix UI Slot. Designed to handle all text styling needs across the application with consistent visual hierarchy and accessibility compliance.",
-    "file": "typography.llm.md",
+  "PageTitle": {
+    "description": "PageTitle - Primary page heading component The main heading for a page, typically used once per page. Uses text-3xl (30px) which is appropriate for web application page titles. Defaults to h1 element.",
+    "file": "page-title.llm.md",
     "type": "component",
     "keywords": [
       "component",
-      "typography"
+      "page title",
+      "pagetitle"
     ]
   },
-  "H1": {
-    "description": "H1 - Primary page heading component The main heading for a page or major section. Uses the \"displayTitle\" variant with h1 semantic element. Should be used once per page for proper document outline and SEO.",
-    "file": "h1.llm.md",
+  "SectionTitle": {
+    "description": "SectionTitle - Secondary section heading component Section headings that divide page content into logical groups. Uses text-2xl (24px) for clear hierarchy below PageTitle. Defaults to h2 element.",
+    "file": "section-title.llm.md",
     "type": "component",
     "keywords": [
       "component",
-      "h1"
+      "section title",
+      "sectiontitle"
     ]
   },
-  "H2": {
-    "description": "H2 - Secondary section heading component Section headings that divide page content into logical groups. Uses the \"sectionTitle\" variant with h2 semantic element. Essential for creating proper document hierarchy.",
-    "file": "h2.llm.md",
+  "SubsectionTitle": {
+    "description": "SubsectionTitle - Tertiary subsection heading component Subsection headings for further content division. Uses text-xl (20px) for subtle distinction from SectionTitle. Defaults to h3 element.",
+    "file": "subsection-title.llm.md",
     "type": "component",
     "keywords": [
       "component",
-      "h2"
+      "subsection title",
+      "subsectiontitle"
     ]
   },
-  "H3": {
-    "description": "H3 - Tertiary subsection heading component Subsection headings for further content division. Uses the \"headline\" variant with h3 semantic element for consistent visual hierarchy.",
-    "file": "h3.llm.md",
+  "BodyText": {
+    "description": "BodyText - Primary paragraph text component Standard paragraph element for readable body text. Uses text-base (16px) with relaxed line height for optimal readability. Defaults to p element.",
+    "file": "body-text.llm.md",
     "type": "component",
     "keywords": [
-      "component",
-      "h3"
-    ]
-  },
-  "H4": {
-    "description": "H4 - Minor heading component for detailed sections Minor headings for detailed content organization. Uses \"subHeadline\" variant with h4 semantic element for subtle but distinct hierarchy.",
-    "file": "h4.llm.md",
-    "type": "component",
-    "keywords": [
-      "component",
-      "h4"
+      "body text",
+      "bodytext",
+      "component"
     ]
   },
-  "H5": {
-    "description": "H5 - Small heading component for micro-sections Small headings for very specific content divisions. Uses \"eyebrow\" variant with h5 semantic element.",
-    "file": "h5.llm.md",
+  "BodyTextLarge": {
+    "description": "BodyTextLarge - Emphasized body text component Larger body text for lead paragraphs and emphasized content. Uses text-lg (18px) with relaxed line height. Defaults to p element.",
+    "file": "body-text-large.llm.md",
     "type": "component",
     "keywords": [
-      "component",
-      "h5"
+      "body text large",
+      "bodytextlarge",
+      "component"
     ]
   },
-  "H6": {
-    "description": "H6 - Smallest heading component for minimal emphasis The smallest semantic heading level. Uses \"details\" variant with h6 element for minimal but semantic emphasis.",
-    "file": "h6.llm.md",
+  "BodyTextSmall": {
+    "description": "BodyTextSmall - De-emphasized body text component Smaller body text for less prominent content. Uses text-sm (14px) with normal line height. Defaults to p element.",
+    "file": "body-text-small.llm.md",
     "type": "component",
     "keywords": [
-      "component",
-      "h6"
+      "body text small",
+      "bodytextsmall",
+      "component"
     ]
   },
-  "P": {
-    "description": "P - Paragraph component for body text content Standard paragraph element for readable body text. Uses \"body\" variant with p semantic element. Optimized for readability with appropriate line height and font size.",
-    "file": "p.llm.md",
+  "Caption": {
+    "description": "Caption - Small supplementary text component Small text for metadata, timestamps, and supplementary information. Uses text-sm (14px) with muted color. Defaults to span element for inline usage.",
+    "file": "caption.llm.md",
     "type": "component",
     "keywords": [
+      "caption",
       "component",
-      "p"
+      "format"
     ]
   },
-  "Span": {
-    "description": "Span - Inline text component for text fragments and styling Generic inline element for styling text fragments within other content. Supports all typography variants while maintaining inline display behavior.",
-    "file": "span.llm.md",
+  "Overline": {
+    "description": "Overline - Small uppercase label component Small uppercase text for category tags and eyebrow labels. Uses text-xs (12px) with uppercase transformation and wide tracking. Defaults to span element.",
+    "file": "overline.llm.md",
     "type": "component",
     "keywords": [
       "component",
-      "span"
+      "format",
+      "overline"
     ]
   },
   "Code": {
-    "description": "Code - Inline code component for technical content Semantic code element for inline code snippets, variable names, and technical references. Uses monospace font and \"code\" variant for clear distinction from regular text.",
+    "description": "Code - Inline code component Monospace text for inline code snippets and technical references. Uses text-sm with monospace font and subtle background. Defaults to code element.",
     "file": "code.llm.md",
     "type": "component",
     "keywords": [
@@ -2942,45 +2941,8 @@
       "component"
     ]
   },
-  "Small": {
-    "description": "Small - Fine print component for supplementary information Semantic small element for fine print, disclaimers, timestamps, and supplementary information. Uses \"microcopy\" variant for reduced visual prominence while maintaining readability.",
-    "file": "small.llm.md",
-    "type": "component",
-    "keywords": [
-      "component",
-      "format",
-      "small"
-    ]
-  },
-  "Strong": {
-    "description": "Strong - Emphasized text component for important content Semantic strong element for text that needs strong emphasis or importance. Uses \"bodyEmphasized\" variant with strong semantic meaning.",
-    "file": "strong.llm.md",
-    "type": "component",
-    "keywords": [
-      "component",
-      "strong"
-    ]
-  },
-  "Lead": {
-    "description": "Lead - Introductory paragraph component for article openings Lead paragraph for article introductions, page descriptions, and summary content. Uses \"subheading\" variant with muted color for visual hierarchy.",
-    "file": "lead.llm.md",
-    "type": "component",
-    "keywords": [
-      "component",
-      "lead"
-    ]
-  },
-  "A": {
-    "description": "A - Anchor component for interactive text links Semantic anchor element for links with built-in hover states and accessibility features. Uses \"body\" variant with underline and smooth color transitions.",
-    "file": "a.llm.md",
-    "type": "component",
-    "keywords": [
-      "a",
-      "component"
-    ]
-  },
   "Blockquote": {
-    "description": "Blockquote - Quoted text component for citations and excerpts Semantic blockquote element for extended quotations, testimonials, and excerpts. Features italic styling and left border for visual distinction.",
+    "description": "Blockquote - Quoted text component Semantic blockquote element for extended quotations and excerpts. Features italic styling and left border for visual distinction. Defaults to blockquote element.",
     "file": "blockquote.llm.md",
     "type": "component",
     "keywords": [

package/.llm/section-title.llm.md

@@ -0,0 +1,48 @@
+# SectionTitle
+
+**Type**: component
+
+SectionTitle - Secondary section heading component Section headings that divide page content into logical groups. Uses text-2xl (24px) for clear hierarchy below PageTitle. Defaults to h2 element.
+
+## JSX Usage
+
+```jsx
+import { SectionTitle } from '@neynar/ui';
+
+<SectionTitle
+  as={value}
+  className="value"
+>
+  {/* Your content here */}
+</SectionTitle>
+```
+
+## Component Props
+
+### as
+- **Type**: `React.ElementType`
+- **Required**: No
+- **Description**: HTML element to render
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional Tailwind classes
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Content to render
+
+## Examples
+
+```tsx
+// Default usage
+<SectionTitle>Recent Activity</SectionTitle>
+// With custom color
+<SectionTitle className="text-accent">
+  Featured Section
+</SectionTitle>
+// As h3 element
+<SectionTitle as="h3">Subsection Title</SectionTitle>
+```

package/.llm/subsection-title.llm.md

@@ -0,0 +1,46 @@
+# SubsectionTitle
+
+**Type**: component
+
+SubsectionTitle - Tertiary subsection heading component Subsection headings for further content division. Uses text-xl (20px) for subtle distinction from SectionTitle. Defaults to h3 element.
+
+## JSX Usage
+
+```jsx
+import { SubsectionTitle } from '@neynar/ui';
+
+<SubsectionTitle
+  as={value}
+  className="value"
+>
+  {/* Your content here */}
+</SubsectionTitle>
+```
+
+## Component Props
+
+### as
+- **Type**: `React.ElementType`
+- **Required**: No
+- **Description**: HTML element to render
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional Tailwind classes
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Content to render
+
+## Examples
+
+```tsx
+// Default usage
+<SubsectionTitle>Configuration Options</SubsectionTitle>
+// With custom styling
+<SubsectionTitle className="text-muted-foreground">
+  Optional Settings
+</SubsectionTitle>
+```

package/dist/components/ui/stories/typography.stories.d.ts

@@ -1,16 +1,14 @@
 import type { StoryObj } from "@storybook/react-vite";
-import { Typography } from "../typography";
+import { PageTitle } from "../typography";
 /**
  * Typography component stories for design system documentation
  *
- * This story file demonstrates the Typography component's capabilities through three focused stories:
- * - Interactive: Playground for testing all props and variants
- * - Variants: Systematic showcase of all available typography variants
- * - InContext: Real-world usage examples for business and design teams
+ * This story file demonstrates purpose-named typography components following 2025 best practices.
+ * Components are Tailwind-first with semantic HTML defaults and zero abstraction.
  */
 declare const meta: {
     title: string;
-    component: typeof Typography;
+    component: typeof PageTitle;
     parameters: {
         layout: string;
         docs: {
@@ -19,118 +17,20 @@ declare const meta: {
             };
         };
     };
-    argTypes: {
-        variant: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-            description: string;
-        };
-        color: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-            description: string;
-        };
-        align: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-            description: string;
-        };
-        transform: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-            description: string;
-        };
-        weight: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-            description: string;
-        };
-        as: {
-            control: {
-                type: "select";
-            };
-            options: string[];
-            description: string;
-        };
-        asChild: {
-            control: {
-                type: "boolean";
-            };
-            description: string;
-        };
-        italic: {
-            control: {
-                type: "boolean";
-            };
-            description: string;
-        };
-        underline: {
-            control: {
-                type: "boolean";
-            };
-            description: string;
-        };
-        strikethrough: {
-            control: {
-                type: "boolean";
-            };
-            description: string;
-        };
-        truncate: {
-            control: {
-                type: "boolean";
-            };
-            description: string;
-        };
-        srOnly: {
-            control: {
-                type: "boolean";
-            };
-            description: string;
-        };
-        children: {
-            control: {
-                type: "text";
-            };
-            description: string;
-        };
-    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 /**
- * Interactive playground for testing all Typography component features.
- * Use controls to experiment with different combinations of props.
+ * Interactive playground for testing Typography components.
  */
 export declare const Interactive: Story;
 /**
- * Systematic showcase of all typography variants with consistent content.
- * Demonstrates the visual hierarchy and size relationships between variants.
+ * Systematic showcase of all typography components.
+ * Demonstrates the visual hierarchy and appropriate sizing for web applications.
  */
-export declare const Variants: Story;
+export declare const AllComponents: Story;
 /**
  * Real-world usage examples demonstrating Typography in practical scenarios.
- * Shows how to combine variants with semantic HTML and accessibility features.
  */
 export declare const InContext: Story;
-/**
- * Showcase of individual semantic typography components for better TypeScript support.
- * Demonstrates the recommended approach using semantic components vs generic Typography.
- */
-export declare const SemanticComponents: Story;
-/**
- * Complete reference table of all semantic typography components with their defaults and usage.
- * Provides a comprehensive overview for developers to quickly understand each component.
- */
-export declare const ComponentReference: Story;
 //# sourceMappingURL=typography.stories.d.ts.map

package/dist/components/ui/stories/typography.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/typography.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EACL,UAAU,EAeX,MAAM,eAAe,CAAC;AAUvB;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAezB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAqItB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAyQvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KA+PhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAmxBhC,CAAC"}
+{"version":3,"file":"typography.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/stories/typography.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EACL,SAAS,EAUV,MAAM,eAAe,CAAC;AASvB;;;;;GAKG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;CAYwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,KAoF3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAoOvB,CAAC"}