@nationaldesignstudio/react 0.0.5 → 0.0.7

package/README.md

@@ -1,15 +1,15 @@
-# @nds-design-system/react
+# @nationaldesignstudio/react
 
-React component library for the NDS Design System. Includes design tokens, Tailwind CSS v4 styles, and React components.
+React component library for the NDS Design System. Includes design tokens for Tailwind CSS v4 and React components.
 
 ## Installation
 
 ```bash
-npm install @nds-design-system/react
+npm install @nationaldesignstudio/react
 # or
-bun add @nds-design-system/react
+bun add @nationaldesignstudio/react
 # or
-pnpm add @nds-design-system/react
+pnpm add @nationaldesignstudio/react
 ```
 
 ### Peer Dependencies
@@ -26,25 +26,25 @@ This package requires the following peer dependencies:
 
 ## Usage
 
-### 1. Import Styles
+### 1. Import Tokens
 
-Import the styles once in your app's entry point (e.g., `main.tsx`, `App.tsx`, or `globals.css`):
+Import the tokens in your CSS file where you import Tailwind:
 
-```tsx
-// In your main entry file
-import '@nds-design-system/react/styles.css'
+```css
+/* In your main CSS file (e.g., globals.css, styles.css) */
+@import "tailwindcss";
+@import "@nationaldesignstudio/react/tokens.css";
 ```
 
 This imports:
-- Design tokens as CSS variables
-- Tailwind CSS v4 theme configuration
-- Typography utility classes
-- The PP Neue Montreal font
+- Design tokens as CSS variables (`:root` block)
+- Tailwind CSS v4 `@theme` configuration
+- Typography and spacing utility classes
 
 ### 2. Use Components
 
 ```tsx
-import { Button } from '@nds-design-system/react'
+import { Button } from '@nationaldesignstudio/react'
 
 function App() {
   return (
@@ -133,7 +133,7 @@ For fixed typography that doesn't change with screen size:
 A versatile button component with multiple variants and sizes.
 
 ```tsx
-import { Button } from '@nds-design-system/react'
+import { Button } from '@nationaldesignstudio/react'
 
 // Variants
 <Button variant="primary">Primary</Button>
@@ -162,7 +162,7 @@ import { Button } from '@nds-design-system/react'
 A utility function for merging Tailwind classes with proper precedence:
 
 ```tsx
-import { cn } from '@nds-design-system/react'
+import { cn } from '@nationaldesignstudio/react'
 
 <div className={cn('text-blue-500', isActive && 'text-red-500')}>
   Content
@@ -173,14 +173,16 @@ import { cn } from '@nds-design-system/react'
 
 ```tsx
 // Components
-import { Button, buttonVariants } from '@nds-design-system/react'
-import type { ButtonProps } from '@nds-design-system/react'
+import { Button, buttonVariants } from '@nationaldesignstudio/react'
+import type { ButtonProps } from '@nationaldesignstudio/react'
 
 // Utilities
-import { cn } from '@nds-design-system/react'
+import { cn } from '@nationaldesignstudio/react'
+```
 
-// Styles (import once)
-import '@nds-design-system/react/styles.css'
+```css
+/* Tokens (import in your CSS file) */
+@import "@nationaldesignstudio/react/tokens.css";
 ```
 
 ## Development