@affinda/react 0.0.17 → 0.0.19

package/README.md

@@ -131,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>
@@ -173,6 +177,8 @@ import { Section, Heading, Text } from '@affinda/react';
 - `background`: `"white"` | `"level1"` | `"dark"` | `"inkwell"`
 - `container`: boolean - Auto-wraps content in Container
 
+> **Contrast helper:** When `background="dark"` or `background="inkwell"`, `Section` automatically exposes CSS variables so nested `Heading`, `Text`, and `TypographyLockup` components render in mist-green, even if you forget to set `theme="dark"`. Buttons still need `darkBackground={true}` (see below).
+
 ### Card with Photo Background
 
 Cards now support photo backgrounds with gradient overlays.
@@ -199,6 +205,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
@@ -294,6 +329,7 @@ import { Card, Heading, Text } from '@affinda/react';
 - Secondary actions: Use `variant="secondary"`
 - Sizes: `small`, `default`, `large`
 - Can include icons in left or right slots
+- On dark backgrounds, pass `darkBackground={true}` so borders/text flip automatically
 
 ```tsx
 <Button variant="primary" size="large">Sign Up Now</Button>

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.17",
+  "version": "0.0.19",
   "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"
   }
 }