@affinda/react 0.0.10 → 0.0.12

package/README.md

@@ -5,11 +5,65 @@ React components for Affinda UI - built on web components with Stencil.
 ## Installation
 
 ```bash
-npm install @affinda/react
+npm install @affinda/react @affinda/css
 # or
-pnpm add @affinda/react
+pnpm add @affinda/react @affinda/css
 ```
 
+## Quick Start
+
+### 1. Import Styles and Initialize Components
+
+```tsx
+// In your main.tsx or index.tsx
+import '@affinda/css'; // Loads reset, fonts, tokens, base styles
+import { defineCustomElements } from '@affinda/wc/loader';
+
+// Initialize web components
+defineCustomElements();
+```
+
+### 2. Use Components
+
+```tsx
+import { Button, Navbar, Card } from '@affinda/react';
+
+function App() {
+  return (
+    <div>
+      <Navbar>
+        <Button variant="primary">Get Started</Button>
+      </Navbar>
+    </div>
+  );
+}
+```
+
+### 3. Load NeuSans Font (Recommended)
+
+Affinda components use the **NeuSans** font family. To get the authentic Affinda look:
+
+1. Obtain NeuSans font files (contact Affinda or your design team)
+2. Add @font-face declarations in your global CSS:
+
+```css
+@font-face {
+  font-family: 'NeuSans';
+  font-style: normal;
+  font-weight: 500; /* Book weight for headings */
+  src: url('/fonts/NeuSans-Book.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'NeuSans';
+  font-style: normal;
+  font-weight: 400; /* Regular weight */
+  src: url('/fonts/NeuSans-Regular.woff2') format('woff2');
+}
+```
+
+**Don't have NeuSans?** The components will gracefully fall back to Inter and system fonts.
+
 ## Usage
 
 ### Import Components

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,6 +1,6 @@
 {
   "name": "@affinda/react",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "private": false,
   "type": "module",
   "files": ["dist", "README.md"],
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@affinda/icons": "^0.0.3",
-    "@affinda/wc": "^0.0.4",
+    "@affinda/wc": "^0.0.6",
     "@stencil/react-output-target": "^1.2.0"
   },
   "scripts": {