@techv/design-system 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,253 @@
+# @techv/design-system
+
+A React component library and design token system. Single package — install once and get both UI components and design tokens.
+
+## Requirements
+
+| Peer dependency | Version |
+|---|---|
+| react | ^18.0.0 |
+| react-dom | ^18.0.0 |
+| styled-components | ^6.1.0 |
+
+## Installation
+
+```bash
+npm install @techv/design-system styled-components
+```
+```bash
+yarn add @techv/design-system styled-components
+```
+```bash
+pnpm add @techv/design-system styled-components
+```
+
+## Setup
+
+Import the global CSS in your app entry point. This loads the CSS custom properties (design tokens) and dark mode support.
+
+```tsx
+// index.tsx or App.tsx
+import '@techv/design-system/styles.css';
+```
+
+---
+
+## Components
+
+### Button
+
+```tsx
+import { Button } from '@techv/design-system';
+
+export default function App() {
+  return <Button>Click me</Button>;
+}
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `solid` \| `outline` \| `ghost` \| `soft` \| `link` | `solid` | Visual style |
+| `color` | `brand` \| `danger` \| `success` \| `warning` \| `neutral` | `brand` | Color scheme |
+| `size` | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `md` | Button size |
+| `isLoading` | `boolean` | `false` | Shows a spinner and disables the button |
+| `leftIcon` | `ReactNode` | — | Icon rendered before the label |
+| `rightIcon` | `ReactNode` | — | Icon rendered after the label |
+| `disabled` | `boolean` | `false` | Disables the button |
+
+Accepts all standard HTML `<button>` attributes.
+
+#### Variants
+
+```tsx
+<Button variant="solid">Solid</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="soft">Soft</Button>
+<Button variant="link">Link</Button>
+```
+
+#### Colors
+
+```tsx
+<Button color="brand">Brand</Button>
+<Button color="danger">Danger</Button>
+<Button color="success">Success</Button>
+<Button color="warning">Warning</Button>
+<Button color="neutral">Neutral</Button>
+```
+
+#### Sizes
+
+```tsx
+<Button size="xs">Extra Small</Button>
+<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>
+<Button size="xl">Extra Large</Button>
+```
+
+#### With icons
+
+```tsx
+<Button leftIcon={<SearchIcon />}>Search</Button>
+<Button rightIcon={<ArrowRightIcon />}>Next</Button>
+```
+
+#### Loading state
+
+```tsx
+<Button isLoading>Saving...</Button>
+```
+
+---
+
+### IconButton
+
+A square button that holds a single icon. Requires `aria-label` for accessibility.
+
+```tsx
+import { IconButton } from '@techv/design-system';
+
+<IconButton icon={<SearchIcon />} aria-label="Search" />
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `icon` | `ReactNode` | **required** | The icon to display |
+| `aria-label` | `string` | **required** | Accessible label |
+| `variant` | `solid` \| `outline` \| `ghost` \| `soft` \| `link` | `solid` | Visual style |
+| `color` | `brand` \| `danger` \| `success` \| `warning` \| `neutral` | `brand` | Color scheme |
+| `size` | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `md` | Button size |
+| `isLoading` | `boolean` | `false` | Shows a spinner |
+| `disabled` | `boolean` | `false` | Disables the button |
+
+---
+
+## Design Tokens
+
+### CSS Custom Properties
+
+Import `styles.css` to get all tokens as CSS variables on `:root`, usable anywhere in your app.
+
+```css
+.my-component {
+  background-color: var(--color-brand-500);
+  padding: var(--space-md);
+  border-radius: var(--radius-lg);
+}
+```
+
+### JavaScript Tokens
+
+Use typed token values directly in styled-components or inline styles.
+
+```tsx
+import { tokens, colors, spacing, radii } from '@techv/design-system';
+
+// Full structured token object
+tokens.color.brand[500]   // '#4F46E5'
+tokens.space.md           // 16
+tokens.radius.lg          // 8
+tokens.shadow.md          // '0 4px 6px rgba(0,0,0,0.07)...'
+tokens.duration.normal    // 200
+tokens.font.text          // 'Inter'
+tokens.fontSize.h1        // '36px'
+
+// Flat named exports (convenience)
+colors.brand500           // '#4F46E5'
+colors.textPrimary        // '#111827'
+colors.border             // '#E5E7EB'
+
+spacing.md                // '16px'
+spacing.lg                // '24px'
+
+radii.sm                  // '4px'
+radii.full                // '9999px'
+```
+
+### Token Reference
+
+#### Colors
+
+| Token | Value |
+|---|---|
+| `brand 50–900` | Indigo scale |
+| `success 50, 500` | Green |
+| `danger 50, 500` | Red |
+| `warning 50, 500` | Amber |
+| `info 50, 500` | Blue |
+| `gray 50–900` | Neutral gray scale |
+
+#### Spacing
+
+| Token | Value |
+|---|---|
+| `2xs` | 2px |
+| `xs` | 4px |
+| `sm` | 8px |
+| `md` | 16px |
+| `lg` | 24px |
+| `xl` | 32px |
+| `2xl` | 48px |
+| `3xl` | 64px |
+
+#### Border radius
+
+| Token | Value |
+|---|---|
+| `none` | 0 |
+| `xs` | 2px |
+| `sm` | 4px |
+| `md` | 6px |
+| `lg` | 8px |
+| `xl` | 12px |
+| `2xl` | 16px |
+| `full` | 9999px |
+
+---
+
+## Dark mode
+
+The library ships with a built-in dark mode. Toggle it by setting `data-theme="dark"` on any ancestor element (typically `<html>` or `<body>`).
+
+```tsx
+// Enable dark mode
+document.documentElement.setAttribute('data-theme', 'dark');
+
+// Disable dark mode
+document.documentElement.removeAttribute('data-theme');
+```
+
+All components and CSS custom properties respond automatically.
+
+---
+
+## TypeScript
+
+Full TypeScript support is included. All component props and token types are exported.
+
+```tsx
+import type { ButtonProps, IconButtonProps } from '@techv/design-system';
+```
+
+---
+
+## Using tokens in styled-components
+
+```tsx
+import styled from 'styled-components';
+import { tokens } from '@techv/design-system';
+
+const Card = styled.div`
+  background: ${tokens.semantic.surface};
+  border: 1px solid ${tokens.semantic.border};
+  border-radius: ${tokens.radius.xl}px;
+  padding: ${tokens.space.lg}px;
+  box-shadow: ${tokens.shadow.md};
+`;
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techv/design-system",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "author": "Pranav V K <pranavvk@techversantinfotech.com>",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -20,7 +20,8 @@
     "./styles.css": "./dist/styles.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "sideEffects": [
     "./dist/styles.css"
@@ -38,8 +39,8 @@
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
     "typescript": "~5.4.5",
-    "@techv/tokens": "0.1.0",
-    "@techv/ui": "0.1.0"
+    "@techv/ui": "0.1.0",
+    "@techv/tokens": "0.1.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",