@nationaldesignstudio/react 0.5.2 → 0.5.3

package/src/stories/grid-system.stories.tsx

@@ -1,309 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-/**
- * Spatial Grid System
- *
- * Responsive grid tokens that adapt across breakpoints:
- * - Large (lg): 1440px+ - 24 columns, 72px margin, 24px gutter
- * - Medium (md): 768px+ - 12 columns, 56px margin, 20px gutter
- * - Small (sm): 320px+ - 4 columns, 24px margin, 12px gutter
- */
-
-// Enhanced grid column with solid color styling
-const GridColumn = ({ index }: { index: number }) => {
-	const colors = [
-		"bg-blue-100",
-		"bg-indigo-100",
-		"bg-purple-100",
-		"bg-pink-100",
-		"bg-red-100",
-		"bg-orange-100",
-		"bg-amber-100",
-		"bg-yellow-100",
-		"bg-lime-100",
-		"bg-green-100",
-		"bg-emerald-100",
-		"bg-teal-100",
-		"bg-cyan-100",
-		"bg-sky-100",
-		"bg-blue-100",
-		"bg-indigo-100",
-		"bg-purple-100",
-		"bg-pink-100",
-		"bg-red-100",
-		"bg-orange-100",
-		"bg-amber-100",
-		"bg-yellow-100",
-		"bg-lime-100",
-		"bg-green-100",
-	];
-	return (
-		<div
-			className={`h-16 rounded-2 border-2 border-white/50 flex items-center justify-center shadow-sm transition-all hover:scale-105 ${colors[index % colors.length]}`}
-		>
-			<span className="text-xs font-bold font-mono text-gray-700">
-				{index + 1}
-			</span>
-		</div>
-	);
-};
-
-// Grid visualization with better styling
-const GridVisualization = () => (
-	<div className="w-full bg-gray-50 py-16">
-		<div className="w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]">
-			<div className="mb-8">
-				<h2 className="typography-h3 text-gray-900 mb-2">
-					Responsive Grid System
-				</h2>
-				<p className="typography-body text-gray-600">
-					The grid adapts across breakpoints: 4 columns (mobile), 12 columns
-					(tablet), 24 columns (desktop)
-				</p>
-			</div>
-			<div className="grid grid-cols-4 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]">
-				{Array.from({ length: 24 }).map((_, i) => (
-					// biome-ignore lint/suspicious/noArrayIndexKey: Static grid columns never reorder
-					<GridColumn key={i} index={i} />
-				))}
-			</div>
-		</div>
-	</div>
-);
-
-// Enhanced spans visualization with content examples
-const ColumnSpans = () => (
-	<div className="w-full bg-white py-16">
-		<div className="w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]">
-			<div className="mb-12">
-				<h2 className="typography-h3 text-gray-900 mb-2">
-					Column Spans & Positioning
-				</h2>
-				<p className="typography-body text-gray-600">
-					Use col-span and col-start/col-end to create flexible layouts
-				</p>
-			</div>
-
-			{/* Full width */}
-			<div className="mb-8 grid grid-cols-1 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]">
-				<div className="col-span-full rounded-8 bg-blue-600 p-8 text-white shadow-lg">
-					<div className="flex items-center justify-between">
-						<div>
-							<code className="text-sm font-mono bg-white/20 px-3 py-1 rounded">
-								col-span-full
-							</code>
-							<p className="mt-4 typography-body-large">
-								Full-width hero section or banner
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			{/* Centered wide content */}
-			<div className="mb-8 grid grid-cols-1 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]">
-				<div className="col-span-full lg:col-start-4 lg:col-end-22 rounded-8 bg-purple-600 p-8 text-white shadow-lg">
-					<div>
-						<code className="text-sm font-mono bg-white/20 px-3 py-1 rounded mb-4 inline-block">
-							col-start-4 col-end-22 (18 cols)
-						</code>
-						<p className="typography-body-large">
-							Centered wide content area - perfect for dashboards or data tables
-						</p>
-					</div>
-				</div>
-			</div>
-
-			{/* Two column layout */}
-			<div className="mb-8 grid grid-cols-1 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]">
-				<div className="col-span-full lg:col-start-3 lg:col-end-13 rounded-8 bg-green-600 p-8 text-white shadow-lg">
-					<code className="text-sm font-mono bg-white/20 px-3 py-1 rounded mb-4 inline-block">
-						col-start-3 col-end-13 (10 cols)
-					</code>
-					<p className="typography-body">Left column content</p>
-				</div>
-				<div className="col-span-full lg:col-start-13 lg:col-end-23 rounded-8 bg-orange-600 p-8 text-white shadow-lg">
-					<code className="text-sm font-mono bg-white/20 px-3 py-1 rounded mb-4 inline-block">
-						col-start-13 col-end-23 (10 cols)
-					</code>
-					<p className="typography-body">Right column content</p>
-				</div>
-			</div>
-
-			{/* Narrow centered content */}
-			<div className="grid grid-cols-1 md:grid-cols-12 lg:grid-cols-24 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]">
-				<div className="col-span-full lg:col-start-7 lg:col-end-19 rounded-8 bg-indigo-600 p-8 text-white shadow-lg">
-					<code className="text-sm font-mono bg-white/20 px-3 py-1 rounded mb-4 inline-block">
-						col-start-7 col-end-19 (12 cols)
-					</code>
-					<p className="typography-body">
-						Narrow centered content - ideal for reading or forms
-					</p>
-				</div>
-			</div>
-		</div>
-	</div>
-);
-
-// Content layout utilities demonstration
-const ContentLayoutsDemo = () => (
-	<div className="w-full bg-white py-16">
-		<div className="w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]">
-			<div className="mb-12">
-				<h2 className="typography-h3 text-gray-900 mb-2">
-					Content Layout Utilities
-				</h2>
-				<p className="typography-body text-gray-600">
-					Pre-built utilities for common content widths: narrow, medium, and
-					wide
-				</p>
-			</div>
-
-			{/* Grid container */}
-			<div className="grid grid-cols-1 md:grid-cols-12 lg:grid-cols-24 gap-y-32 md:gap-y-48 lg:gap-y-64 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]">
-				{/* Narrow content */}
-				<div className="grid-content-narrow">
-					<div className="rounded-8 bg-white border-2 border-gray-200 p-12 shadow-md">
-						<div className="mb-4">
-							<code className="text-sm font-mono text-blue-600 bg-blue-50 px-3 py-1 rounded">
-								grid-content-narrow
-							</code>
-						</div>
-						<h3 className="typography-h4 text-gray-900 mb-4">Narrow Content</h3>
-						<p className="typography-body text-gray-700">
-							Perfect for reading content, mission statements, or focused text
-							blocks. This layout centers content with optimal reading width.
-						</p>
-					</div>
-				</div>
-
-				{/* Medium content */}
-				<div className="grid-content-medium">
-					<div className="rounded-8 bg-white border-2 border-gray-200 p-12 shadow-md">
-						<div className="mb-4">
-							<code className="text-sm font-mono text-green-600 bg-green-50 px-3 py-1 rounded">
-								grid-content-medium
-							</code>
-						</div>
-						<h3 className="typography-h4 text-gray-900 mb-4">Medium Content</h3>
-						<p className="typography-body text-gray-700">
-							Great for forms, general content, or sections that need a bit more
-							width than narrow but still maintain readability.
-						</p>
-					</div>
-				</div>
-
-				{/* Wide content */}
-				<div className="grid-content-wide">
-					<div className="rounded-8 bg-white border-2 border-gray-200 p-12 shadow-md">
-						<div className="mb-4">
-							<code className="text-sm font-mono text-purple-600 bg-purple-50 px-3 py-1 rounded">
-								grid-content-wide
-							</code>
-						</div>
-						<h3 className="typography-h4 text-gray-900 mb-4">Wide Content</h3>
-						<p className="typography-body text-gray-700">
-							Ideal for dashboards, data tables, or content that needs maximum
-							width while still respecting grid margins.
-						</p>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-);
-
-// Real-world example
-const RealWorldExampleDemo = () => (
-	<div className="w-full bg-white py-16">
-		<div className="w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]">
-			<div className="mb-12">
-				<h2 className="typography-h3 text-gray-900 mb-2">Real-World Example</h2>
-				<p className="typography-body text-gray-600">
-					How the grid system is used in practice
-				</p>
-			</div>
-
-			<div className="grid grid-cols-1 md:grid-cols-12 lg:grid-cols-24 gap-y-32 md:gap-y-48 lg:gap-y-64 gap-[var(--spatial-grid-small-gutter)] md:gap-[var(--spatial-grid-medium-gutter)] lg:gap-[var(--spatial-grid-large-gutter)]">
-				{/* Hero section */}
-				<div className="col-span-full rounded-12 bg-blue-600 p-16 text-white shadow-xl">
-					<div className="max-w-3xl">
-						<h1 className="typography-h1 mb-6">Hero Section</h1>
-						<p className="typography-body-large opacity-90">
-							Full-width hero sections use col-span-full to create impactful
-							introductions.
-						</p>
-					</div>
-				</div>
-
-				{/* Narrow content section */}
-				<div className="grid-content-narrow">
-					<div className="space-y-6">
-						<h2 className="typography-h3 text-gray-900">Mission Statement</h2>
-						<p className="typography-body text-gray-700">
-							This narrow content area is perfect for focused reading. The
-							grid-content-narrow utility automatically centers the content with
-							optimal width for readability.
-						</p>
-					</div>
-				</div>
-
-				{/* Two-column card layout */}
-				<div className="col-span-full lg:col-start-3 lg:col-end-11 rounded-8 bg-white border-2 border-gray-200 p-8 shadow-md">
-					<div className="h-32 bg-blue-500 rounded-4 mb-4" />
-					<h3 className="typography-h4 text-gray-900 mb-2">Card Title</h3>
-					<p className="typography-body-small text-gray-600">
-						Card content spans 8 columns
-					</p>
-				</div>
-				<div className="col-span-full lg:col-start-13 lg:col-end-21 rounded-8 bg-white border-2 border-gray-200 p-8 shadow-md">
-					<div className="h-32 bg-purple-500 rounded-4 mb-4" />
-					<h3 className="typography-h4 text-gray-900 mb-2">Card Title</h3>
-					<p className="typography-body-small text-gray-600">
-						Card content spans 8 columns
-					</p>
-				</div>
-			</div>
-		</div>
-	</div>
-);
-
-const meta = {
-	title: "Design System/Grid System",
-	component: GridVisualization,
-	parameters: {
-		layout: "fullscreen",
-	},
-} satisfies Meta<typeof GridVisualization>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Desktop: Story = {
-	globals: { viewport: { value: "lg" } },
-};
-
-export const Tablet: Story = {
-	globals: { viewport: { value: "md" } },
-};
-
-export const Mobile: Story = {
-	globals: { viewport: { value: "sm" } },
-};
-
-export const Spans: Story = {
-	render: () => <ColumnSpans />,
-	globals: { viewport: { value: "lg" } },
-};
-
-export const ContentLayouts: Story = {
-	render: () => <ContentLayoutsDemo />,
-	globals: { viewport: { value: "lg" } },
-};
-
-export const RealWorldExample: Story = {
-	render: () => <RealWorldExampleDemo />,
-	globals: { viewport: { value: "lg" } },
-};

package/src/stories/introduction.mdx

@@ -1,128 +0,0 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-
-<Meta title="Introduction" />
-
-# NDS Design System
-
-Welcome to the **NDS Design System** component library. This Storybook documents all available components, their variants, and design tokens.
-
-## Getting Started
-
-### Installation
-
-```bash
-bun add @nationaldesignstudio/react
-```
-
-### Setup Tailwind CSS v4
-
-Import the generated tokens CSS in your main CSS file:
-
-```css
-/* app.css or globals.css */
-@import "tailwindcss";
-@import "@nationaldesignstudio/react/tokens.css";
-```
-
-This gives you access to all design tokens as CSS variables and Tailwind utilities.
-
-### Using Components
-
-```tsx
-import { Button } from "@nationaldesignstudio/react";
-
-function App() {
-  return <Button variant="primary">Click me</Button>;
-}
-```
-
-## Typography Styles
-
-The design system provides pre-built typography classes for consistent text styling. Typography utilities use the `typography-` prefix to avoid conflicts with Tailwind's `text-*` color utilities.
-
-### Headings
-
-For headlines and titles:
-
-```html
-<h1 class="typography-h1-display">Display Title</h1>
-<h1 class="typography-h1">Page Title</h1>
-<h2 class="typography-h2">Section Header</h2>
-<h3 class="typography-h3">Subsection Header</h3>
-<h4 class="typography-h4">Smaller Header</h4>
-<h5 class="typography-h5">Smallest Header</h5>
-```
-
-### Body Text
-
-For body content:
-
-```html
-<p class="typography-body-large">Large body text...</p>
-<p class="typography-body-medium">Standard body text...</p>
-<p class="typography-body-small">Small body text...</p>
-```
-
-### Supporting Text
-
-For captions and labels:
-
-```html
-<span class="typography-caption">Caption text</span>
-<span class="typography-overline">OVERLINE TEXT</span>
-```
-
-### UI Typography
-
-For buttons and interactive elements:
-
-```html
-<button class="typography-ui-button-large">Large Button</button>
-<button class="typography-ui-button-medium">Medium Button</button>
-<button class="typography-ui-button-small">Small Button</button>
-```
-
-## Color Tokens
-
-All colors are available as Tailwind utilities:
-
-```html
-<div class="bg-blue-500 text-gray-900">...</div>
-<div class="bg-alpha-black-50">Semi-transparent overlay</div>
-```
-
-See **Design System > Tokens > Colors** for the full palette.
-
-## Spacing Tokens
-
-Consistent spacing values:
-
-```html
-<div class="p-spacing-16 m-spacing-24 gap-spacing-8">...</div>
-```
-
-## Features
-
-- **Design Tokens** - Comprehensive token system for colors, spacing, and typography
-- **Accessibility** - Components tested for WCAG compliance
-- **TypeScript** - Full type safety with detailed prop documentation
-- **Tailwind CSS v4** - Built on modern Tailwind with CSS variables
-
-## Structure
-
-- **Components** - Reusable UI components (Button, etc.)
-- **Design System > Tokens** - Visual token documentation
-
-## Development
-
-```bash
-# Run Storybook locally
-cd packages/react
-bun run storybook
-
-# Build tokens after changes
-bun run build
-
-# Run tests
-bun run test
-```