@techv/design-system 0.1.5 → 0.1.6

package/README.md

@@ -6,8 +6,8 @@ A React component library and design token system. Single package — install on
 
 | Peer dependency | Version |
 |---|---|
-| react | ^18.0.0 |
-| react-dom | ^18.0.0 |
+| react | ^17.0.0 \| ^18.0.0 \| ^19.0.0 |
+| react-dom | ^17.0.0 \| ^18.0.0 \| ^19.0.0 |
 | styled-components | ^6.1.0 |
 
 ## Installation
@@ -135,7 +135,41 @@ import { IconButton } from '@techv/design-system';
 
 ## Utility Classes
 
-Import `@techv/design-system/utility.css` to use className-based styling. Classes map directly to design tokens.
+Import `@techv/design-system/utility.css` to style elements with classNames — no inline styles needed.
+
+### Background colors
+
+```tsx
+<div>
+  {/* Solid colors */}
+  <div className="bg-indigo-500 p-4">Indigo 500</div>
+  <div className="bg-red-500 p-4">Red 500</div>
+  <div className="bg-green-500 p-4">Green 500</div>
+
+  {/* Light tints — cards, badges, alerts */}
+  <div className="bg-indigo-50 tx-indigo-700 p-4 br-lg">Indigo tint</div>
+  <div className="bg-green-50 tx-green-700 p-4 br-lg">Success tint</div>
+  <div className="bg-red-50 tx-red-700 p-4 br-lg">Danger tint</div>
+  <div className="bg-amber-50 tx-amber-700 p-4 br-lg">Warning tint</div>
+
+  {/* Neutral */}
+  <div className="bg-gray-100 p-4">Light gray</div>
+  <div className="bg-gray-800 tx-white p-4">Dark gray</div>
+  <div className="bg-white p-4">White</div>
+  <div className="bg-black tx-white p-4">Black</div>
+</div>
+```
+
+**Color weight guide**
+
+| Weight | Use case |
+|---|---|
+| `50` | Very light tint — backgrounds, alerts |
+| `100–200` | Soft highlight |
+| `300–400` | Muted fill |
+| `500` | Primary color |
+| `600–700` | Hover / pressed state |
+| `800–900` | Dark / high contrast |
 
 ### Badge
 
@@ -148,15 +182,17 @@ Import `@techv/design-system/utility.css` to use className-based styling. Classe
 ### Alert / status banner
 
 ```tsx
-function Alert({ type, message }: { type: 'success' | 'danger' | 'warning'; message: string }) {
-  const styles = {
-    success: 'bg-green-50 tx-green-700 bd-green-300 border bw-1',
-    danger:  'bg-red-50 tx-red-700 bd-red-300 border bw-1',
-    warning: 'bg-amber-50 tx-amber-700 bd-amber-300 border bw-1',
-  };
+type AlertType = 'success' | 'danger' | 'warning';
+
+const alertStyles: Record<AlertType, string> = {
+  success: 'bg-green-50 tx-green-700 bd-green-300 border bw-1',
+  danger:  'bg-red-50 tx-red-700 bd-red-300 border bw-1',
+  warning: 'bg-amber-50 tx-amber-700 bd-amber-300 border bw-1',
+};
 
+function Alert({ type, message }: { type: AlertType; message: string }) {
   return (
-    <div role="alert" className={`${styles[type]} px-4 py-2 br-md fs-sm`}>
+    <div role="alert" className={`${alertStyles[type]} px-4 py-2 br-md fs-sm`}>
       {message}
     </div>
   );
@@ -192,6 +228,18 @@ function Tag({ label }: { label: string }) {
 }
 ```
 
+### Animated element
+
+```tsx
+function FadeInBox({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="bg-indigo-50 br-xl p-6" style={{ transition: 'opacity var(--duration-normal) var(--ease-standard)' }}>
+      {children}
+    </div>
+  );
+}
+```
+
 ### Flex layout
 
 ```tsx
@@ -328,34 +376,9 @@ box-shadow: var(--sh-3);
 
 ---
 
-## JavaScript Tokens
-
-Import token values for use in styled-components or dynamic styles:
-
-```tsx
-import { bg, tx, bd, fl, spacing, fs, fw, lh, ta, br, bw, sh, op, duration, ease } from '@techv/design-system';
-```
+## Using tokens in styled-components
 
-| Export | Purpose | Example |
-|---|---|---|
-| `colors` | Full color palette | `colors.red[500]` → `'#EF4444'` |
-| `bg` | Background colors (alias of colors) | `bg.indigo[50]` → `'#EEF2FF'` |
-| `tx` | Text colors (alias of colors) | `tx.gray[700]` → `'#374151'` |
-| `bd` | Border colors (alias of colors) | `bd.gray[200]` → `'#E5E7EB'` |
-| `fl` | SVG fill colors (alias of colors) | `fl.green[400]` → `'#4ADE80'` |
-| `spacing` | 4px-base numeric scale | `spacing[4]` → `'16px'` |
-| `fs` | Font sizes | `fs.sm` → `'14px'` |
-| `fw` | Font weights | `fw[7]` → `'700'` |
-| `lh` | Line heights | `lh.base` → `1.5` |
-| `ta` | Text alignment | `ta.c` → `'center'` |
-| `br` | Border radius | `br.full` → `'9999px'` |
-| `bw` | Border widths | `bw[1]` → `'1px'` |
-| `sh` | Shadows | `sh[3]` → md elevation |
-| `op` | Opacity | `op[50]` → `'0.5'` |
-| `duration` | Animation durations | `duration.normal` → `'200ms'` |
-| `ease` | Easing curves | `ease.standard` |
-
-### Using tokens in styled-components
+Import token values for use in styled-components:
 
 ```tsx
 import styled from 'styled-components';
@@ -381,6 +404,16 @@ const Body = styled.p`
 `;
 ```
 
+**Available token exports**
+
+| Export | Example |
+|---|---|
+| `bg`, `tx`, `bd`, `fl`, `colors` | `bg.indigo[50]`, `tx.gray[700]` |
+| `spacing` | `spacing[4]` → `'16px'` |
+| `fs`, `fw`, `lh`, `ta` | `fs.sm`, `fw[6]` |
+| `br`, `bw`, `sh`, `op` | `br.full`, `sh[3]` |
+| `duration`, `ease` | `duration.normal`, `ease.standard` |
+
 ---
 
 ## Dark mode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techv/design-system",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "author": "Pranav V K <pranavvk@techversantinfotech.com>",
   "license": "MIT",
   "main": "./dist/cjs/index.js",
@@ -29,8 +29,8 @@
     "./dist/utility.css"
   ],
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "styled-components": "^6.1.0"
   },
   "devDependencies": {