@affinda/react 0.0.9 → 0.0.11

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/dist/generated/components.d.ts

@@ -5,6 +5,7 @@
 import { AfAspectRatio as AfAspectRatioElement } from "@affinda/wc/dist/components/af-aspect-ratio.js";
 import { AfButtonGroup as AfButtonGroupElement } from "@affinda/wc/dist/components/af-button-group.js";
 import { AfButton as AfButtonElement } from "@affinda/wc/dist/components/af-button.js";
+import { AfCard as AfCardElement } from "@affinda/wc/dist/components/af-card.js";
 import { AfColorSwatch as AfColorSwatchElement } from "@affinda/wc/dist/components/af-color-swatch.js";
 import { AfContainer as AfContainerElement } from "@affinda/wc/dist/components/af-container.js";
 import { AfHeading as AfHeadingElement } from "@affinda/wc/dist/components/af-heading.js";
@@ -21,6 +22,8 @@ export type AfButtonEvents = NonNullable<unknown>;
 export declare const AfButton: StencilReactComponent<AfButtonElement, AfButtonEvents>;
 export type AfButtonGroupEvents = NonNullable<unknown>;
 export declare const AfButtonGroup: StencilReactComponent<AfButtonGroupElement, AfButtonGroupEvents>;
+export type AfCardEvents = NonNullable<unknown>;
+export declare const AfCard: StencilReactComponent<AfCardElement, AfCardEvents>;
 export type AfColorSwatchEvents = NonNullable<unknown>;
 export declare const AfColorSwatch: StencilReactComponent<AfColorSwatchElement, AfColorSwatchEvents>;
 export type AfContainerEvents = NonNullable<unknown>;

package/dist/generated/components.js

@@ -7,6 +7,7 @@
 import { AfAspectRatio as AfAspectRatioElement, defineCustomElement as defineAfAspectRatio } from "@affinda/wc/dist/components/af-aspect-ratio.js";
 import { AfButtonGroup as AfButtonGroupElement, defineCustomElement as defineAfButtonGroup } from "@affinda/wc/dist/components/af-button-group.js";
 import { AfButton as AfButtonElement, defineCustomElement as defineAfButton } from "@affinda/wc/dist/components/af-button.js";
+import { AfCard as AfCardElement, defineCustomElement as defineAfCard } from "@affinda/wc/dist/components/af-card.js";
 import { AfColorSwatch as AfColorSwatchElement, defineCustomElement as defineAfColorSwatch } from "@affinda/wc/dist/components/af-color-swatch.js";
 import { AfContainer as AfContainerElement, defineCustomElement as defineAfContainer } from "@affinda/wc/dist/components/af-container.js";
 import { AfHeading as AfHeadingElement, defineCustomElement as defineAfHeading } from "@affinda/wc/dist/components/af-heading.js";
@@ -42,6 +43,14 @@ export const AfButtonGroup = /*@__PURE__*/ createComponent({
     events: {},
     defineCustomElement: defineAfButtonGroup
 });
+export const AfCard = /*@__PURE__*/ createComponent({
+    tagName: 'af-card',
+    elementClass: AfCardElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {},
+    defineCustomElement: defineAfCard
+});
 export const AfColorSwatch = /*@__PURE__*/ createComponent({
     tagName: 'af-color-swatch',
     elementClass: AfColorSwatchElement,

package/dist/index.d.ts

@@ -1,4 +1,3 @@
 export * from './generated/components.js';
-export * from '@affinda/wc/loader/index.js';
-export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfColorSwatch as ColorSwatch, AfContainer as Container, AfHeading as Heading, AfIconButton as IconButton, AfLogo as Logo, AfNavItem as NavItem, AfNavbar as Navbar, AfText as Text, AfTypographyLockup as TypographyLockup } from './generated/components.js';
+export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfColorSwatch as ColorSwatch, AfContainer as Container, AfHeading as Heading, AfIconButton as IconButton, AfLogo as Logo, AfNavItem as NavItem, AfNavbar as Navbar, AfText as Text, AfTypographyLockup as TypographyLockup } from './generated/components.js';
 export * from '@affinda/icons/react';

package/dist/index.js

@@ -1,7 +1,7 @@
 // Export everything from generated components (includes Af-prefixed names)
 export * from './generated/components.js';
-export * from '@affinda/wc/loader/index.js';
+// Note: defineCustomElements should be imported directly from @affinda/wc/loader/index.js in your app
 // Re-export components without the 'Af' prefix for cleaner React usage
-export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfColorSwatch as ColorSwatch, AfContainer as Container, AfHeading as Heading, AfIconButton as IconButton, AfLogo as Logo, AfNavItem as NavItem, AfNavbar as Navbar, AfText as Text, AfTypographyLockup as TypographyLockup } from './generated/components.js';
+export { AfAspectRatio as AspectRatio, AfButton as Button, AfButtonGroup as ButtonGroup, AfCard as Card, AfColorSwatch as ColorSwatch, AfContainer as Container, AfHeading as Heading, AfIconButton as IconButton, AfLogo as Logo, AfNavItem as NavItem, AfNavbar as Navbar, AfText as Text, AfTypographyLockup as TypographyLockup } from './generated/components.js';
 // Re-export React icon components from icons package
 export * from '@affinda/icons/react';

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@affinda/react",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "private": false,
   "type": "module",
-  "files": ["dist"],
+  "files": ["dist", "README.md"],
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@affinda/icons": "^0.0.3",
-    "@affinda/wc": "^0.0.4",
+    "@affinda/wc": "^0.0.5",
     "@stencil/react-output-target": "^1.2.0"
   },
   "scripts": {