@affinda/react 0.0.16 → 0.0.18

package/README.md

@@ -26,13 +26,17 @@ defineCustomElements();
 ### 2. Use Components
 
 ```tsx
-import { Button, Navbar, Card } from '@affinda/react';
+import { Button, Navbar, NavItem, Logo } from '@affinda/react';
 
 function App() {
   return (
     <div>
       <Navbar>
-        <Button variant="primary">Get Started</Button>
+        <Logo slot="logo" />
+        <div slot="start">
+          <NavItem href="/products">Products</NavItem>
+        </div>
+        <Button slot="button" variant="primary">Get Started</Button>
       </Navbar>
     </div>
   );
@@ -127,7 +131,11 @@ The hero section component makes it easy to create marketing page heroes with co
 import { HeroSection, Heading, Text, Button, PaperclipDecoration } from '@affinda/react';
 
 <HeroSection variant="dark" withDecoration={true} minHeight="60vh">
-  <PaperclipDecoration slot="decoration" />
+  {/* Position the paperclip decoration - adjust bottom/right values as needed */}
+  <PaperclipDecoration 
+    slot="decoration" 
+    style={{ position: 'absolute', bottom: -80, right: -800 }} 
+  />
   <Heading level="1" theme="dark" align="center">
     Harness AI to transform business processes
   </Heading>
@@ -195,6 +203,35 @@ import { Card, Heading, Text } from '@affinda/react';
 - `backgroundImage`: URL to background image
 - `darkOverlay`: boolean - Applies gradient overlay with white text
 
+### PaperclipDecoration
+
+Decorative SVG paperclip graphic for hero sections.
+
+⚠️ **Important**: When using with `HeroSection`, you must manually position the paperclip using inline styles, as the component uses scoped styles rather than shadow DOM.
+
+```tsx
+import { HeroSection, PaperclipDecoration } from '@affinda/react';
+
+<HeroSection variant="dark" withDecoration={true}>
+  <PaperclipDecoration 
+    slot="decoration" 
+    style={{ 
+      position: 'absolute', 
+      bottom: -80,    // Adjust to move vertically
+      right: -800     // Adjust to move horizontally
+    }} 
+  />
+  {/* Hero content */}
+</HeroSection>
+```
+
+**Positioning Tips:**
+- **Negative values** move the decoration outside the viewport (creating a partial reveal effect)
+- **bottom**: Controls vertical position (negative = move down/off-screen)
+- **right**: Controls horizontal position (negative = move right/off-screen)
+- Start with `bottom: -80, right: -800` and adjust to taste
+- The paperclip automatically sits behind content (`z-index: 0`)
+
 ## Component Guide
 
 ### When to Use Each Component
@@ -321,22 +358,73 @@ import { Card, Heading, Text } from '@affinda/react';
 #### Navigation
 
 **Navbar**
-- Site-wide navigation header
-- Responsive design with mobile menu support
-- Include Logo in the `logo` slot
 
+⚠️ **IMPORTANT**: The Navbar component uses **slots** for positioning elements. Items placed as direct children will not be visible. You must wrap them in divs with the appropriate `slot` attribute.
+
+Site-wide navigation header with responsive design and mobile menu support.
+
+**Required Slots:**
+- `logo` - Brand logo (left side)
+- `start` - Primary navigation links (center-left)
+- `end` - Secondary navigation and actions (right side)
+- `button` - Call-to-action button (far right)
+
+```tsx
+<Navbar>
+  {/* Logo slot - required */}
+  <Logo slot="logo" />
+  
+  {/* Start slot - main navigation items */}
+  <div slot="start">
+    <NavItem hierarchy="primary" variant="01" href="/platform">
+      Platform
+    </NavItem>
+    <NavItem hierarchy="primary" variant="01" href="/solutions">
+      Solutions
+    </NavItem>
+    <NavItem hierarchy="primary" variant="01" href="/pricing">
+      Pricing
+    </NavItem>
+  </div>
+  
+  {/* End slot - secondary navigation */}
+  <div slot="end">
+    <NavItem hierarchy="primary" variant="02" href="/contact">
+      Talk to us
+    </NavItem>
+    <NavItem hierarchy="primary" variant="02" href="/login">
+      Log in
+    </NavItem>
+  </div>
+  
+  {/* Button slot - CTA */}
+  <Button slot="button" variant="primary" size="default">
+    Try for free
+  </Button>
+</Navbar>
+```
+
+**Common Mistake:**
 ```tsx
+// ❌ WRONG - Direct children are ignored
+<Navbar>
+  <Logo />
+  <NavItem href="/home">Home</NavItem>
+</Navbar>
+
+// ✅ CORRECT - Use slots
 <Navbar>
   <Logo slot="logo" />
-  <NavItem hierarchy="primary" href="/">Home</NavItem>
-  <NavItem hierarchy="primary" href="/about">About</NavItem>
-  <NavItem hierarchy="secondary" href="/login">Log In</NavItem>
+  <div slot="start">
+    <NavItem href="/home">Home</NavItem>
+  </div>
 </Navbar>
 ```
 
 **NavItem**
 - Individual navigation links
 - Hierarchy: `primary` (main nav), `secondary` (utility nav)
+- Variant: `"01"` (primary links), `"02"` (secondary/utility links)
 - Variant: Controls visual style
 
 #### Social Proof & Testimonials
@@ -489,21 +577,26 @@ function Hero() {
 ### Navigation
 
 ```tsx
-import { Navbar, NavItem, Logo } from '@affinda/react';
+import { Navbar, NavItem, Logo, Button } from '@affinda/react';
 
 function Header() {
   return (
     <Navbar>
       <Logo slot="logo" />
-      <NavItem hierarchy="primary" variant="01" href="/">
-        Home
-      </NavItem>
-      <NavItem hierarchy="primary" variant="01" href="/products">
-        Products
-      </NavItem>
-      <NavItem hierarchy="primary" variant="02" href="/docs">
-        Documentation
-      </NavItem>
+      <div slot="start">
+        <NavItem hierarchy="primary" variant="01" href="/">
+          Home
+        </NavItem>
+        <NavItem hierarchy="primary" variant="01" href="/products">
+          Products
+        </NavItem>
+      </div>
+      <div slot="end">
+        <NavItem hierarchy="primary" variant="02" href="/docs">
+          Documentation
+        </NavItem>
+      </div>
+      <Button slot="button" variant="primary">Get Started</Button>
     </Navbar>
   );
 }

package/dist/components/PaperclipDecoration.js

@@ -5,6 +5,6 @@ import * as React from 'react';
  * Decorative paperclip vector graphic for hero sections
  */
 export function PaperclipDecoration({ className, style }) {
-    const svgStyle = Object.assign({ display: 'block' }, style || {});
-    return (_jsx("svg", { preserveAspectRatio: "none", width: "100%", height: "100%", style: svgStyle, viewBox: "0 0 1212 753", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": true, children: _jsx("path", { d: "M1102.14 107.875C1031.8 37.1138 939.128 -1.47247 840.61 0.0430067H358.674L262.104 156.72H841.87C842.558 156.72 843.36 156.72 844.047 156.72C900.638 156.72 953.791 178.869 994 219.32C1035.24 260.821 1058.04 316.311 1058.04 375.647C1058.04 497.468 960.665 596.44 841.068 596.44H251.335C197.609 596.44 153.848 551.908 153.848 497.235C153.848 442.561 197.723 397.33 251.221 395.698H779.208L878.872 239.021H248.586C111.577 242.519 0 358.277 0 497.235C0 636.192 112.723 753 251.335 753H841.068C1045.55 753 1212 583.617 1212 375.531C1212 273.994 1173.05 178.985 1102.26 107.758L1102.14 107.875Z", fill: "white", fillOpacity: 0.06 }) }));
+    const svgStyle = Object.assign({ display: 'block', position: 'absolute' }, style || {});
+    return (_jsx("svg", { preserveAspectRatio: "none", width: "100%", height: "100%", style: style, viewBox: "0 0 1212 753", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, "aria-hidden": true, children: _jsx("path", { d: "M1102.14 107.875C1031.8 37.1138 939.128 -1.47247 840.61 0.0430067H358.674L262.104 156.72H841.87C842.558 156.72 843.36 156.72 844.047 156.72C900.638 156.72 953.791 178.869 994 219.32C1035.24 260.821 1058.04 316.311 1058.04 375.647C1058.04 497.468 960.665 596.44 841.068 596.44H251.335C197.609 596.44 153.848 551.908 153.848 497.235C153.848 442.561 197.723 397.33 251.221 395.698H779.208L878.872 239.021H248.586C111.577 242.519 0 358.277 0 497.235C0 636.192 112.723 753 251.335 753H841.068C1045.55 753 1212 583.617 1212 375.531C1212 273.994 1173.05 178.985 1102.26 107.758L1102.14 107.875Z", fill: "white", fillOpacity: 0.06 }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affinda/react",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "private": false,
   "type": "module",
   "files": [
@@ -21,6 +21,7 @@
   },
   "scripts": {
     "build": "pnpm run clean && tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch",
     "clean": "rm -rf dist"
   }
 }