@nationaldesignstudio/react 0.0.1

package/README.md

@@ -0,0 +1,154 @@
+# @nds-design-system/react
+
+React component library for the NDS Design System. Includes design tokens, Tailwind CSS v4 styles, and React components.
+
+## Installation
+
+```bash
+npm install @nds-design-system/react
+# or
+bun add @nds-design-system/react
+# or
+pnpm add @nds-design-system/react
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```json
+{
+  "react": "^18.0.0 || ^19.0.0",
+  "react-dom": "^18.0.0 || ^19.0.0",
+  "tailwindcss": "^4.0.0"
+}
+```
+
+## Usage
+
+### 1. Import Styles
+
+Import the styles once in your app's entry point (e.g., `main.tsx`, `App.tsx`, or `globals.css`):
+
+```tsx
+// In your main entry file
+import '@nds-design-system/react/styles.css'
+```
+
+This imports:
+- Design tokens as CSS variables
+- Tailwind CSS v4 theme configuration
+- Typography utility classes
+- The PP Neue Montreal font
+
+### 2. Use Components
+
+```tsx
+import { Button } from '@nds-design-system/react'
+
+function App() {
+  return (
+    <Button variant="primary" size="lg">
+      Click me
+    </Button>
+  )
+}
+```
+
+### 3. Use Design Tokens
+
+The CSS includes all design tokens as CSS variables. Use them directly or via Tailwind classes:
+
+```tsx
+// Using Tailwind classes (design tokens are registered in @theme)
+<div className="text-blue-500 bg-gray-100 p-4">
+  Content
+</div>
+
+// Using CSS variables directly
+<div style={{ color: 'var(--color-blue-500)' }}>
+  Content
+</div>
+
+// Using typography composites
+<h1 className="text-product-title-large">
+  Heading
+</h1>
+```
+
+## Components
+
+### Button
+
+A versatile button component with multiple variants and sizes.
+
+```tsx
+import { Button } from '@nds-design-system/react'
+
+// Variants
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="destructive">Destructive</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="link">Link</Button>
+
+// Sizes
+<Button size="sm">Small</Button>
+<Button size="default">Default</Button>
+<Button size="lg">Large</Button>
+<Button size="icon">Icon</Button>
+
+// As child (polymorphic)
+<Button asChild>
+  <a href="/link">Link Button</a>
+</Button>
+```
+
+## Utilities
+
+### `cn()`
+
+A utility function for merging Tailwind classes with proper precedence:
+
+```tsx
+import { cn } from '@nds-design-system/react'
+
+<div className={cn('text-blue-500', isActive && 'text-red-500')}>
+  Content
+</div>
+```
+
+## Package Exports
+
+```tsx
+// Components
+import { Button, buttonVariants } from '@nds-design-system/react'
+import type { ButtonProps } from '@nds-design-system/react'
+
+// Utilities
+import { cn } from '@nds-design-system/react'
+
+// Styles (import once)
+import '@nds-design-system/react/styles.css'
+```
+
+## Development
+
+```bash
+# Install dependencies
+bun install
+
+# Start Storybook for component development
+bun run storybook
+
+# Build the library
+bun run build
+
+# Type check
+bun run type:check
+```
+
+## License
+
+MIT

package/dist/components/button.d.ts

@@ -0,0 +1,28 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Button component based on Figma BaseKit / Interface / Buttons
+ *
+ * Variants:
+ * - charcoal: Dark filled button (bg-gray-1200, text-gray-100)
+ * - charcoalOutline: Dark outlined button (border-alpha-black-30)
+ * - charcoalOutlineQuiet: Subtle dark outlined button (border-alpha-black-20)
+ * - ivory: Light filled button (bg-gray-50, text-gray-1000)
+ * - ivoryOutline: Light outlined button for dark backgrounds (border-gray-50)
+ * - ghost: Transparent with subtle border for dark backgrounds
+ *
+ * Sizes:
+ * - lg: Large buttons (px-16, py-12, rounded-12, text-14)
+ * - default: Medium buttons (px-16, py-12, rounded-12, text-14)
+ * - sm: Small buttons (p-12, rounded-11, text-12)
+ * - icon/iconLg/iconSm: Icon-only buttons
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "charcoal" | "charcoalOutline" | "charcoalOutlineQuiet" | "ivory" | "ivoryOutline" | "ghost" | null | undefined;
+    size?: "lg" | "default" | "sm" | "iconLg" | "icon" | "iconSm" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { ButtonProps } from './components/button';
+export { Button, buttonVariants } from './components/button';
+export { cn } from './lib/utils';