@affinda/react 0.0.8 → 0.0.10

package/README.md

@@ -0,0 +1,223 @@
+# @affinda/react
+
+React components for Affinda UI - built on web components with Stencil.
+
+## Installation
+
+```bash
+npm install @affinda/react
+# or
+pnpm add @affinda/react
+```
+
+## Usage
+
+### Import Components
+
+All components are available with or without the `Af` prefix:
+
+```tsx
+// With Af prefix
+import { AfButton, AfHeading, AfTypographyLockup } from '@affinda/react';
+
+// Without prefix (cleaner)
+import { Button, Heading, TypographyLockup } from '@affinda/react';
+```
+
+### Available Components
+
+- **Button** / AfButton - Primary buttons with variants and icons
+- **ButtonGroup** / AfButtonGroup - Group multiple buttons together
+- **IconButton** / AfIconButton - Icon-only buttons
+- **Heading** / AfHeading - Typography headings (H1-H6)
+- **Text** / AfText - Body text components
+- **TypographyLockup** / AfTypographyLockup - Composite heading + text + button layouts
+- **Container** / AfContainer - Layout containers with max-width
+- **AspectRatio** / AfAspectRatio - Maintain aspect ratios for media
+- **ColorSwatch** / AfColorSwatch - Display color swatches
+- **Logo** / AfLogo - Affinda logo component
+- **Navbar** / AfNavbar - Navigation bar
+- **NavItem** / AfNavItem - Navigation items
+
+### Icons
+
+All Affinda icons are also exported:
+
+```tsx
+import {
+  AccountIcon,
+  ArrowRightIcon,
+  CheckCircleIcon,
+  MenuIcon
+} from '@affinda/react';
+```
+
+## Example Usage
+
+### Basic Button
+
+```tsx
+import { Button } from '@affinda/react';
+
+function App() {
+  return (
+    <Button variant="primary" size="default">
+      Click me
+    </Button>
+  );
+}
+```
+
+### Button with Icons
+
+```tsx
+import { Button, ArrowRightIcon } from '@affinda/react';
+
+function App() {
+  return (
+    <Button variant="primary">
+      <svg slot="icon-left">
+        <ArrowRightIcon />
+      </svg>
+      Get Started
+      <svg slot="icon-right">
+        <ArrowRightIcon />
+      </svg>
+    </Button>
+  );
+}
+```
+
+### Typography Lockup
+
+```tsx
+import { TypographyLockup, Button } from '@affinda/react';
+
+function Hero() {
+  return (
+    <TypographyLockup
+      headingSize={1}
+      breakpoint="desktop"
+      textAlignment="center"
+      buttonAlignment="vertical"
+    >
+      <h1>Welcome to Affinda</h1>
+      <p slot="description">
+        Extract data from documents with AI-powered accuracy
+      </p>
+      <div slot="buttons">
+        <Button variant="primary">Get Started</Button>
+        <Button variant="secondary">Learn More</Button>
+      </div>
+    </TypographyLockup>
+  );
+}
+```
+
+### Navigation
+
+```tsx
+import { Navbar, NavItem, Logo } 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>
+    </Navbar>
+  );
+}
+```
+
+## Accessing Affinda Colors
+
+Colors are available from the `@affinda/tokens` package (automatically installed as a dependency):
+
+```tsx
+// Via CSS custom properties
+import '@affinda/tokens/tokens.css';
+
+const MyComponent = () => (
+  <div style={{
+    backgroundColor: 'var(--colour-brand-mist-green)',
+    color: 'var(--colour-brand-inkwell)'
+  }}>
+    Affinda branded content
+  </div>
+);
+```
+
+```tsx
+// Via JavaScript
+import { tokens } from '@affinda/tokens';
+
+const MyComponent = () => (
+  <div style={{
+    backgroundColor: tokens.color.brand.mistGreen.value,
+    color: tokens.color.brand.inkwell.value
+  }}>
+    Affinda branded content
+  </div>
+);
+```
+
+### Available Affinda Colors
+
+**Brand Colors:**
+- Mist Green: `#C6D5D1` - `var(--colour-brand-mist-green)`
+- Inkwell: `#14343B` - `var(--colour-brand-inkwell)`
+- Soft Clay: `#B09670` - `var(--colour-brand-soft-clay)`
+- Ice: `#A6FFF8` - `var(--colour-brand-ice)`
+- Azure: `#7FE2D4` - `var(--colour-brand-azure)`
+- Ivory Paper: `#FFF9E1` - `var(--colour-brand-ivory-paper)`
+- White: `#FFFFFF` - `var(--colour-brand-white)`
+
+**Tints:** Each color has tints from 20 (lightest) to 800 (darkest)
+- `var(--colour-tints-mist-green-20)` through `var(--colour-tints-mist-green-800)`
+- `var(--colour-tints-inkwell-20)` through `var(--colour-tints-inkwell-800)`
+- And more...
+
+See the [@affinda/tokens documentation](https://www.npmjs.com/package/@affinda/tokens) for the complete color palette.
+
+## TypeScript Support
+
+Full TypeScript type definitions are included for all components and props.
+
+## For AI Agents
+
+When generating Affinda UI code:
+
+1. **Always use Affinda brand colors:**
+   - Primary: Mist Green (`#C6D5D1`)
+   - Text: Inkwell (`#14343B`)
+   - Accent: Soft Clay (`#B09670`)
+   - Bright: Ice (`#A6FFF8`)
+
+2. **Use CSS custom properties:**
+   ```css
+   background: var(--colour-brand-mist-green);
+   color: var(--colour-brand-inkwell);
+   ```
+
+3. **Import the tokens CSS:**
+   ```tsx
+   import '@affinda/tokens/tokens.css';
+   ```
+
+4. **Never use purple colors** - those were placeholder colors and have been removed
+
+## Related Packages
+
+- **@affinda/wc** - Core web components (used internally)
+- **@affinda/tokens** - Design tokens (colors, spacing, typography)
+- **@affinda/icons** - Icon library
+- **@affinda/illustrations** - Illustration assets
+- **@affinda/css** - Base CSS styles

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@affinda/react",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "private": false,
   "type": "module",
-  "files": ["dist"],
+  "files": ["dist", "README.md"],
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,8 +12,8 @@
     "react-dom": ">=17.0.0"
   },
   "dependencies": {
-    "@affinda/icons": "workspace:*",
-    "@affinda/wc": "^0.0.2",
+    "@affinda/icons": "^0.0.3",
+    "@affinda/wc": "^0.0.4",
     "@stencil/react-output-target": "^1.2.0"
   },
   "scripts": {