@work-rjkashyap/unified-ui 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,18 +1,89 @@
 # Unified UI Changelog
-
 All notable changes to the Unified UI design system will be documented in this file.
-
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
-
 ---
-
+## [Unreleased]
+### Planned
+- Migration guide — mapping from legacy `--ds-*` tokens to new plain `--*` tokens
+- CI/CD pipeline for automated publishing on git tags
+- `UnifiedUIProvider` component for optional auto CSS injection
+- Component tests with Vitest + Testing Library
+---
+## [0.1.2] — 2026-03-03
+### Added
+#### Theme Customizer System
+- **`ThemeCustomizerProvider`** — React context provider for runtime theme management with `localStorage` persistence and cross-tab sync via `StorageEvent`
+- **`useThemeCustomizer()`** — hook exposing `config`, `setColorPreset`, `setRadius`, `setFont`, `setShadow`, `setSurfaceStyle`, `resetConfig`, `isDefault`, `generateCSS`
+- **`ThemeCustomizer`** — drop-in UI component with color swatch picker, radius preview, font preview, shadow/surface style toggles, "Copy CSS" button, and reset
+- **13 color presets**: 5 neutral (`Zinc`, `Slate`, `Gray`, `Stone`, `Neutral`) + 8 chromatic (`Blue`, `Green`, `Violet`, `Rose`, `Orange`, `Red`, `Teal`, `Brand`)
+- **7 radius presets**: None (0px) through XL (16px), default 10px
+- **5 font presets**: Outfit, Inter, System, Serif, Mono
+- **4 shadow presets**: None, Subtle, Default, Heavy (each with light/dark scales)
+- **3 surface style presets**: Bordered, Elevated, Mixed
+- `ThemeConfig` type, `DEFAULT_THEME_CONFIG`, `buildThemeOverrides()`, `generateThemeCSS()` utilities
+- `COLOR_PRESET_KEYS`, `COLOR_PRESETS`, `getColorPreset`, `getFontPreset`, `getRadiusPreset`, `getShadowPreset` helpers
+- Exported types: `ColorPreset`, `ColorPresetKey`, `FontPreset`, `RadiusPreset`, `ShadowPreset`, `SurfaceStylePreset`, `PresetSemanticColors`, `ThemeCustomizerContextValue`, `ThemeCustomizerProps`, `ThemeCustomizerProviderProps`
+#### New Tokens
+- `neutral` color palette added to `tokens/colors`
+- New CSS custom properties: `--card`, `--card-foreground`, `--popover`, `--popover-foreground`, `--accent`, `--accent-foreground`, `--destructive`, `--destructive-foreground`, `--ring`, `--radius`, `--chart-1` through `--chart-5`, `--sidebar-*` (8 tokens)
+#### Select Sub-component Exports
+- Newly exported: `SelectContent`, `SelectContentProps`, `SelectTrigger`, `SelectTriggerProps`, `SelectValue`, `SelectScrollUpButton`, `SelectScrollUpButtonProps`, `SelectScrollDownButton`, `SelectScrollDownButtonProps`
+### Changed
+#### Color Format: RGB → oklch
+- All color tokens migrated from RGB channel strings (e.g. `"79 70 229"`) to complete `oklch()` values (e.g. `"oklch(0.585 0.233 277.117)"`)
+- Affects all palettes: `slate`, `gray`, `zinc`, `brand`, `blue`, `green`, `red`, `amber`, `teal`
+- Semantic colors (light + dark) updated to use oklch values
+- Shadow tokens updated from `rgba()` to `oklch()` syntax
+- `dsColorVar()` now returns `var(--{name})` and uses `color-mix(in oklch, ...)` for alpha variants instead of `rgb(... / alpha)`
+#### CSS Variable Prefix Removal (`--ds-*` → `--*`)
+- Removed the `PREFIX` constant from `contract.ts`
+- All CSS custom properties simplified: `--ds-color-primary` → `--primary`, `--ds-radius-md` → `--radius-md`, `--ds-shadow-lg` → `--shadow-lg`, `--ds-z-modal` → `--z-modal`, `--ds-duration-fast` → `--duration-fast`, `--ds-easing-standard` → `--easing-standard`, `--ds-font-sans` → `--font-sans`
+- All Tailwind utility classes updated: `bg-ds-primary` → `bg-primary`, `text-ds-foreground` → `text-foreground`, `rounded-ds-md` → `rounded-md`, etc.
+- All 25 components, 3 primitives, and all utilities updated for the new naming
+#### Focus Ring System Overhaul
+- Redesigned from ring-based (`focus-visible:ring-2 focus-visible:ring-ds-focus-ring focus-visible:ring-offset-2`) to border-based (`focus-visible:border-border-strong`) focus indicators
+- All focus ring variants updated: `focusRingClasses`, `focusRingInsetClasses`, `focusRingCompactClasses`, `focusWithinRingClasses`, `focusRingGroupRingClasses`, `focusRingGroupTriggerClasses`
+#### Component Updates
+- **Button** — Added `not-prose no-underline` to base styles to prevent prose typography overrides on `<a>` buttons
+- **Select** — Refactored to compositional sub-component pattern; removed `SelectProps` type (use sub-component props instead)
+- **DropdownMenu** — Major refactor (618 lines changed)
+- **Popover** — Major refactor (332 lines changed)
+- **DataTable** — Updated for new token naming and focus styles
+#### Other
+- Updated `UNIFIED_UI_VERSION` exported constant from `"0.1.1"` to `"0.1.2"`
+- `@theme` block in `styles.css` completely rewritten with plain `--{name}` properties and new token categories
+- `dsVar()` now generates `--{category}-{name}` (was `--ds-{category}-{name}`)
+---
+## [0.1.1] — 2026-02-28
+### Added
+#### DataTable Component
+- **DataTable** — Full-featured data table powered by TanStack Table (`@tanstack/react-table` ≥ 8.0.0)
+  - Column sorting, filtering (text + faceted), row selection, column visibility toggles
+  - Built-in pagination with configurable page sizes
+  - `useDataTable` hook for headless table state management
+  - `createColumnHelper` re-export for type-safe column definitions
+  - Exported types: `DataTableProps`, `DataTableColumnMeta`, `DataTableFacetedFilter`, `UseDataTableOptions`, `UseDataTableReturn`, `ColumnDef`, `ColumnFiltersState`, `PaginationState`, `Row`, `RowSelectionState`, `SortingState`, `VisibilityState`
+  - `@tanstack/react-table` added as an optional peer dependency
+#### Motion Hooks
+- `useMotion()` — hook for accessing motion presets with reduced-motion awareness
+- `useMotionProps()` — hook that returns spread-ready motion props
+- `useMotionSpringConfig()` — hook for accessing spring configuration tokens
+- `useReducedMotion()` — hook for detecting `prefers-reduced-motion` user preference
+- `MotionSafe` — wrapper component that conditionally renders motion based on user preference
+### Changed
+- Updated `UNIFIED_UI_VERSION` exported constant from `"0.1.0"` to `"0.1.1"`
+- Component count updated from 22 to 23 across documentation and metadata
+- Package description updated to reflect 23+ components
+### Fixed
+- Removed self-referential dependency (`@work-rjkashyap/unified-ui` depending on itself) from `package.json`
+- Added missing `homepage` and `bugs` fields to `package.json`
+- Added `funding` field to `package.json`
+- Expanded `keywords` in `package.json` for better npm discoverability (`tailwind-css-v4`, `design-tokens`, `css-variables`, `theming`, `dark-mode`, `typescript`, `tree-shakeable`)
+---
 ## [0.1.0] — 2026-02-27
-
 ### Added
-
 #### Design Tokens
-
 - Color palettes: `slate`, `gray`, `zinc`, `neutral`, `red`, `green`, `blue`, `amber`, `teal`, `brand`, `pure`
 - Semantic color mappings for light and dark themes (`semanticLight`, `semanticDark`)
 - Spacing scale (0–96 + custom values)
@@ -21,17 +92,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Shadow scale with light and dark variants
 - Z-index scale (`hide`, `base`, `dropdown`, `sticky`, `overlay`, `modal`, `popover`, `toast`, `max`)
 - Motion tokens: `duration`, `easing`, `spring`, `stagger` (with CSS and seconds variants)
-
 #### Theme System
-
-- CSS variable contract using `--ds-` prefix for all tokens
+- CSS variable contract mapping all tokens to plain CSS custom properties
 - `DSThemeProvider` component with light/dark/system mode support
 - `useDSTheme()` hook for programmatic theme access
 - `buildLightThemeVars()` / `buildDarkThemeVars()` / `buildThemeCSS()` utilities
 - `cssVar()` helper for type-safe CSS variable references
-
 #### Typography System
-
 - Multi-font architecture with four font families:
   - **Outfit** (`--font-outfit`) — primary sans-serif UI typeface
   - **Inter** (`--font-inter`) — display / headings
@@ -39,15 +106,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - **JetBrains Mono** (`--font-jetbrains`) — monospace / code
 - `font` prop on `Typography` component for runtime font switching
 - Graceful fallback to system font stacks when web fonts are unavailable
-
 #### Tailwind CSS v4 Integration
-
-- `design-system.css` with full `@theme` block mapping all tokens to Tailwind utilities
-- `ds-*` prefixed utilities for colors, radius, shadows, transitions, fonts
+- `styles.css` with full `@theme` block mapping all tokens to Tailwind utilities
+- Direct Tailwind utilities for colors, radius, shadows, transitions, fonts (no prefix)
 - Font CSS custom properties (`--font-outfit`, `--font-inter`, `--font-lora`, `--font-jetbrains`)
-
 #### Primitive Components
-
 - **Typography** — polymorphic text component with `variant`, `font`, `color`, `align`, `truncate` props
 - **Heading** — semantic heading (h1–h6) with automatic size mapping
 - **Subheading** — secondary heading variant
@@ -60,9 +123,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Stack** — flexbox layout with `direction`, `gap`, `align`, `justify`
 - **Grid** — CSS grid layout with responsive column configuration
 - **Divider** — horizontal/vertical separator with label support
-
 #### Composite Components (22 total)
-
 - **Button** — primary, secondary, outline, ghost, danger, link variants; sm/md/lg sizes; icon-only mode; loading state
 - **Input** — text input with prefix/suffix slots, error state, disabled state
 - **Textarea** — auto-resize support, character count, error state
@@ -86,9 +147,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Table** — semantic table with striped rows, hover highlight, sticky header, responsive wrapper; compact/default/relaxed density
 - **Pagination** — page numbers with ellipsis, prev/next, compact variant, controlled/uncontrolled
 - **Breadcrumb** — composable sub-components + `BreadcrumbNav` shorthand; truncation with ellipsis
-
 #### Motion System
-
 - Fade presets: `fadeIn`, `fadeInFast`, `fadeInSlow`
 - Slide presets: `slideUp`, `slideUpSm`, `slideUpLg`, `slideUpSpring`, `slideDown`, `slideDownSm`, `slideLeft`, `slideRight`, `slideInFromLeft`, `slideInFromRight`, `slideInFromBottom`
 - Scale presets: `scaleIn`, `scaleInLg`, `scaleInSpring`
@@ -101,9 +160,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Stagger containers: `staggerContainer`, `staggerContainerFast`, `staggerContainerSlow`
 - `motionProps()` spread helper for clean JSX usage
 - `reduceMotion` / `withReducedMotion()` utilities for `prefers-reduced-motion` support
-
 #### Utilities
-
 - `cn()` — class name merger (clsx + tailwind-merge)
 - `mergeSlots()` — slot-based class merging for composite components
 - `composeRefs()` — compose multiple React refs into one
@@ -112,41 +169,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `dsVar()` / `dsColorVar()` — CSS custom property reference helpers
 - `typedKeys()` — type-safe `Object.keys`
 - `noop` — no-operation function
+- Focus ring utilities: `focusRingClasses`, `focusRingInsetClasses`, `focusRingCompactClasses`, `focusWithinRingClasses`, `focusRingGroupRingClasses`, `focusRingGroupTriggerClasses`, `focusRingVariantOverrides`
+- WCAG contrast checking: `checkHexContrast`, `checkDSContrast`, `auditContrast`, `contrastRatio`, `relativeLuminance`, `meetsAA`, `meetsAAA`, `meetsNonTextAA`, `parseHex`, `parseRGBString`, `toRGBString`
 - Polymorphic component types: `AsProp`, `PolymorphicProps`, `PolymorphicPropsWithRef`, `PolymorphicRef`, `PolymorphicComponent`
 - Slot types: `SlotClasses`, `SlotConfig`, `SlotDefinition`, `SlotRenderFn`, `Slots`
 - Component types: `ComponentSize`, `ComponentIntent`, `ChildrenProps`, `OptionalChildrenProps`
-
 #### Package & Build
-
 - `tsup` build pipeline producing ESM (`.mjs`) and CJS (`.cjs`) with TypeScript declarations (`.d.ts` / `.d.cts`)
 - 7 entry points: `index`, `tokens`, `theme`, `primitives`, `components`, `motion`, `utils`
 - Selective `"use client"` directive — applied only to client entry points (not tokens/utils)
 - Radix UI packages externalized as optional peer dependencies
 - Tree-shakeable with code splitting enabled
-- `design-system.css` exported as `unified-ui/css` for Tailwind `@theme` integration
+- `styles.css` exported as `@work-rjkashyap/unified-ui/styles.css` for Tailwind `@theme` integration
 - `@unified-ui/*` TypeScript path aliases (zero relative cross-directory imports)
-- Consumer documentation: `INSTALL.md` with setup guide, font loading, theme provider, import patterns, troubleshooting
-
 #### Infrastructure
-
 - `UNIFIED_UI_VERSION` exported constant for runtime version checking
 - `.npmignore` for clean package distribution
 - `sideEffects` field for optimal tree-shaking
 - Conditional `exports` map with full `import`/`require`/`types` resolution
-
----
-
-## [Unreleased]
-
-### Planned
-
-- Documentation site overhaul (Phase 6) — MDX pages with interactive component previews
-- Motion & accessibility hardening (Phase 7) — focus ring standardization, WCAG AA contrast audit, `prefers-reduced-motion` audit
-- Migration guide (Phase 9) — mapping from legacy `fd-*` tokens to `ds-*` tokens, component replacement strategy
-- CI/CD pipeline for automated publishing on git tags
-- `UnifiedUIProvider` component for optional auto CSS injection
-
+- `typesVersions` fallback for older TypeScript resolvers
 ---
-
-_Design system: Unified UI v0.1.0_
+_Design system: Unified UI_
 _Maintainer: Rajeshwar Kashyap_
+_Repository: [github.com/imrj05/unified-ui](https://github.com/imrj05/unified-ui)_

package/README.md

@@ -1,21 +1,25 @@
 # @work-rjkashyap/unified-ui
 
-> A scalable, token-driven React design system built with Tailwind CSS v4, Radix UI, and Framer Motion.
+> A scalable, token-driven React design system with 23+ components, built with Tailwind CSS v4, Radix UI, and Framer Motion.
 
 [![npm version](https://img.shields.io/npm/v/@work-rjkashyap/unified-ui)](https://www.npmjs.com/package/@work-rjkashyap/unified-ui)
+[![npm downloads](https://img.shields.io/npm/dm/@work-rjkashyap/unified-ui)](https://www.npmjs.com/package/@work-rjkashyap/unified-ui)
 [![license](https://img.shields.io/npm/l/@work-rjkashyap/unified-ui)](./LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9+-blue)](https://www.typescriptlang.org/)
+[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-v4-38bdf8)](https://tailwindcss.com/)
 
 ---
 
 ## Features
 
 - **Token-driven** — Every color, spacing, radius, shadow, and motion value flows from a single source of truth
-- **22+ components** — Battle-tested composites built on Radix UI primitives
-- **Tailwind CSS v4** — First-class integration via `@theme` and `ds-*` utility classes
+- **23+ components** — Production-ready composites built on Radix UI primitives
+- **Tailwind CSS v4** — First-class integration via `@theme` with direct utility classes
 - **Framer Motion** — Consistent animation presets with `prefers-reduced-motion` support
 - **Accessible** — WCAG AA contrast, keyboard navigation, ARIA attributes, and focus management
 - **Tree-shakeable** — 7 independent entry points with ESM/CJS dual output and code splitting
 - **Type-safe** — Full TypeScript coverage with exported types for every prop, variant, and token
+- **Dark mode** — CSS variable–based theming with automatic `.dark` class support
 
 ---
 
@@ -27,18 +31,21 @@ npm install @work-rjkashyap/unified-ui
 
 ### Peer Dependencies
 
-| Package        | Version   | Required |
-| -------------- | --------- | -------- |
-| `react`        | ≥ 19.0.0  | Yes      |
-| `react-dom`    | ≥ 19.0.0  | Yes      |
-| `tailwindcss`  | ≥ 4.0.0   | Optional |
+| Package       | Version  | Required |
+| ------------- | -------- | -------- |
+| `react`       | ≥ 19.0.0 | Yes      |
+| `react-dom`   | ≥ 19.0.0 | Yes      |
+| `tailwindcss` | ≥ 4.0.0  | Optional |
 
-Radix UI primitives and Framer Motion are optional — install only the ones you use:
+Radix UI primitives, Framer Motion, and TanStack Table are optional — install only the ones you use:
 
 ```bash
 # If using motion presets
 npm install framer-motion
 
+# If using the DataTable component
+npm install @tanstack/react-table
+
 # If using Radix-based components (Dialog, Select, Tabs, etc.)
 npm install @radix-ui/react-dialog @radix-ui/react-select @radix-ui/react-tabs
 # ... and any other @radix-ui/* packages for the components you need
@@ -50,7 +57,7 @@ npm install @radix-ui/react-dialog @radix-ui/react-select @radix-ui/react-tabs
 
 ### 1. Import the CSS
 
-Add the stylesheet to your global CSS file **before** any component usage. This registers all `--ds-*` CSS custom properties and Tailwind `@theme` utilities.
+Add the stylesheet to your global CSS file **before** any component usage. This registers all CSS custom properties and Tailwind `@theme` utilities.
 
 ```css
 /* src/app/globals.css */
@@ -136,7 +143,7 @@ import { Button, Typography, fadeIn, cn } from "@work-rjkashyap/unified-ui";
 import { spacing, radius } from "@work-rjkashyap/unified-ui/tokens";
 import { DSThemeProvider } from "@work-rjkashyap/unified-ui/theme";
 import { Typography, Heading } from "@work-rjkashyap/unified-ui/primitives";
-import { Button, Dialog } from "@work-rjkashyap/unified-ui/components";
+import { Button, Dialog, DataTable } from "@work-rjkashyap/unified-ui/components";
 import { slideUp, motionProps } from "@work-rjkashyap/unified-ui/motion";
 import { cn, mergeSlots } from "@work-rjkashyap/unified-ui/utils";
 ```
@@ -162,36 +169,36 @@ The design system is organized into strict layers. Each layer only depends on th
 
 Raw design values: colors, spacing, typography, radius, shadows, z-index, and motion timing. The **single source of truth** for all visual properties.
 
-| File            | Contents                                                      |
-| --------------- | ------------------------------------------------------------- |
-| `colors.ts`     | Color palettes + semantic maps for light/dark                 |
-| `spacing.ts`    | 4px-grid spacing scale                                        |
-| `typography.ts` | Font families, sizes, weights, line heights, letter spacing   |
-| `radius.ts`     | Border radius scale                                           |
-| `shadows.ts`    | Box shadow elevation scale (light + dark)                     |
-| `z-index.ts`    | Z-index layering scale                                        |
-| `motion.ts`     | Duration, easing, spring, and stagger tokens                  |
+| File            | Contents                                                    |
+| --------------- | ----------------------------------------------------------- |
+| `colors.ts`     | Color palettes + semantic maps for light/dark               |
+| `spacing.ts`    | 4px-grid spacing scale                                      |
+| `typography.ts` | Font families, sizes, weights, line heights, letter spacing |
+| `radius.ts`     | Border radius scale                                         |
+| `shadows.ts`    | Box shadow elevation scale (light + dark)                   |
+| `z-index.ts`    | Z-index layering scale                                      |
+| `motion.ts`     | Duration, easing, spring, and stagger tokens                |
 
 ### Layer 2 — Theme System (`theme/`)
 
 Bridges tokens to runtime via CSS custom properties and React context.
 
-| File           | Contents                                                        |
-| -------------- | --------------------------------------------------------------- |
-| `contract.ts`  | Maps token keys → CSS variable names (`--ds-*`), `cssVar` helper |
-| `provider.tsx` | `DSThemeProvider` + `useDSTheme` hook                           |
+| File           | Contents                                                    |
+| -------------- | ----------------------------------------------------------- |
+| `contract.ts`  | Maps token keys → CSS variable names, `cssVar` helper       |
+| `provider.tsx` | `DSThemeProvider` + `useDSTheme` hook                       |
 
 ### Layer 3 — Primitives (`primitives/`)
 
 Foundational UI building blocks:
 
-- **Typography** — `Typography`, `Heading`, `Body`, `Caption`, `Label`, `Overline`, `InlineCode`
+- **Typography** — `Typography`, `Heading`, `Subheading`, `Body`, `Caption`, `Label`, `Overline`, `InlineCode`
 - **Layout** — `Container`, `Stack`, `Grid`
 - **Structural** — `Divider`
 
 ### Layer 4 — Components (`components/`)
 
-22 production-ready composite components:
+23 production-ready composite components:
 
 | Component      | Component       | Component      |
 | -------------- | --------------- | -------------- |
@@ -202,12 +209,14 @@ Foundational UI building blocks:
 | Breadcrumb     | Popover         | Table          |
 | Button         | Radio           | Tabs           |
 | Card           | Checkbox        | Textarea       |
-|                |                 | Toast / Tooltip|
+| DataTable      |                 | Toast / Tooltip|
 
 ### Layer 5 — Motion (`motion/`)
 
 Framer Motion animation presets: `fadeIn`, `slideUp`, `scaleIn`, `modalContent`, `toastSlideIn`, stagger containers, micro-interactions, and reduced-motion utilities.
 
+Hooks: `useMotion`, `useMotionProps`, `useMotionSpringConfig`, `useReducedMotion`, and the `MotionSafe` wrapper component.
+
 ### Layer 6 — Utilities (`utils/`)
 
 - `cn()` — class merging (clsx + tailwind-merge)
@@ -215,41 +224,41 @@ Framer Motion animation presets: `fadeIn`, `slideUp`, `scaleIn`, `modalContent`,
 - `composeRefs()` — combine multiple refs
 - `dsAttr()` / `dsStateAttr()` — data attribute generators
 - `dsVar()` / `dsColorVar()` — CSS variable reference helpers
-- Focus ring utilities
-- WCAG contrast checking utilities
+- Focus ring utilities (`focusRingClasses`, `focusRingInsetClasses`, etc.)
+- WCAG contrast checking utilities (`checkHexContrast`, `auditContrast`, etc.)
 - Polymorphic component types
 
 ---
 
 ## CSS Variable Prefix
 
-All CSS custom properties use the `--ds-` prefix:
+All CSS custom properties use plain `--` prefix with no namespace infix:
 
 ```
---ds-color-primary
---ds-radius-md
---ds-shadow-lg
---ds-duration-normal
---ds-easing-standard
---ds-font-sans
+--primary
+--radius-md
+--shadow-lg
+--duration-normal
+--easing-standard
+--font-sans
 ```
 
 ### Tailwind Utility Classes
 
-After importing the CSS, use `ds-*` prefixed Tailwind utilities anywhere:
+After importing the CSS, use standard Tailwind utilities:
 
 ```html
 <!-- Colors (supports opacity modifier) -->
-<div class="bg-ds-primary text-ds-primary-foreground">Primary</div>
-<div class="bg-ds-muted/50">Semi-transparent muted</div>
+<div class="bg-primary text-primary-foreground">Primary</div>
+<div class="bg-muted/50">Semi-transparent muted</div>
 
 <!-- Radius, shadows, transitions -->
-<div class="rounded-ds-md shadow-ds-lg">Elevated card</div>
-<button class="duration-ds-fast ease-ds-standard">Animated</button>
+<div class="rounded-md shadow-lg">Elevated card</div>
+<button class="duration-fast ease-standard">Animated</button>
 
 <!-- Fonts -->
-<p class="font-ds-serif">Editorial text</p>
-<code class="font-ds-mono">console.log("hello")</code>
+<p class="font-serif">Editorial text</p>
+<code class="font-mono">console.log("hello")</code>
 ```
 
 ### Data Attributes
@@ -268,16 +277,16 @@ Components emit `data-ds` attributes for CSS scoping and testing:
 
 The package provides 7 independently importable entry points for optimal tree-shaking:
 
-| Entry Point   | Import Path                     | Contains                           |
-| ------------- | ------------------------------- | ---------------------------------- |
-| Root          | `@work-rjkashyap/unified-ui`             | Everything (barrel)                |
-| Tokens        | `@work-rjkashyap/unified-ui/tokens`      | Design tokens (pure JS, no React)  |
-| Theme         | `@work-rjkashyap/unified-ui/theme`       | Theme provider, contract, hooks    |
-| Primitives    | `@work-rjkashyap/unified-ui/primitives`  | Typography, Layout, Divider        |
-| Components    | `@work-rjkashyap/unified-ui/components`  | All 22 composite components        |
-| Motion        | `@work-rjkashyap/unified-ui/motion`      | Animation presets and utilities     |
-| Utils         | `@work-rjkashyap/unified-ui/utils`       | cn, mergeSlots, contrast, etc.     |
-| CSS           | `@work-rjkashyap/unified-ui/styles.css`  | Tailwind @theme + CSS variables    |
+| Entry Point | Import Path                              | Contains                          |
+| ----------- | ---------------------------------------- | --------------------------------- |
+| Root        | `@work-rjkashyap/unified-ui`            | Everything (barrel)               |
+| Tokens      | `@work-rjkashyap/unified-ui/tokens`     | Design tokens (pure JS, no React) |
+| Theme       | `@work-rjkashyap/unified-ui/theme`      | Theme provider, contract, hooks   |
+| Primitives  | `@work-rjkashyap/unified-ui/primitives` | Typography, Layout, Divider       |
+| Components  | `@work-rjkashyap/unified-ui/components` | All 23 composite components       |
+| Motion      | `@work-rjkashyap/unified-ui/motion`     | Animation presets and utilities    |
+| Utils       | `@work-rjkashyap/unified-ui/utils`      | cn, mergeSlots, contrast, etc.    |
+| CSS         | `@work-rjkashyap/unified-ui/styles.css` | Tailwind @theme + CSS variables   |
 
 ---
 
@@ -335,14 +344,14 @@ Check the installed version programmatically:
 
 ```tsx
 import { UNIFIED_UI_VERSION } from "@work-rjkashyap/unified-ui";
-console.log(UNIFIED_UI_VERSION); // "0.1.0"
+console.log(UNIFIED_UI_VERSION); // "0.1.1"
 ```
 
 ---
 
 ## Troubleshooting
 
-### `bg-ds-primary` and other Tailwind utilities aren't working
+### `bg-primary` and other Tailwind utilities aren't working
 
 Make sure you import the CSS **after** `@import "tailwindcss"` in your global stylesheet. The `@theme` block must be processed by Tailwind.
 
@@ -358,8 +367,40 @@ Unified UI uses the `.dark` class on `<html>` for dark mode. Ensure your theme p
 
 Use layer-specific imports (`@work-rjkashyap/unified-ui/components`) instead of the barrel import to improve tree-shaking.
 
+### DataTable peer dependency error
+
+The `DataTable` component requires `@tanstack/react-table` ≥ 8.0.0. Install it separately:
+
+```bash
+npm install @tanstack/react-table
+```
+
+---
+
+## Documentation
+
+Full interactive documentation with live component previews is available in the monorepo's Next.js docs app. To run it locally:
+
+```bash
+git clone https://github.com/imrj05/unified-ui.git
+cd unified-ui
+npm install
+npm run dev
+```
+
+---
+
+## Contributing
+
+Contributions are welcome! Please see the [GitHub repository](https://github.com/imrj05/unified-ui) for guidelines.
+
+1. Fork the repo and create a feature branch
+2. Make your changes in `packages/unified-ui/src/`
+3. Run `npm run build:ds` to verify the build
+4. Submit a pull request
+
 ---
 
 ## License
 
-MIT © [Rajeshwar Kashyap](https://github.com/work-rjkashyap)
+MIT © [Rajeshwar Kashyap](https://github.com/imrj05)

package/dist/{chunk-QXR4VY7Q.cjs → chunk-33QEKXRQ.cjs}

@@ -109,7 +109,7 @@ var DS_LIGHT_CRITICAL_PAIRS = [
   },
   // Secondary
   { label: "secondary-fg on secondary", fg: "24 24 27", bg: "244 244 245" },
-  // Muted (zinc.600 = 82 82 91 — matches CSS --ds-color-muted-foreground)
+  // Muted (zinc.600 = 82 82 91 — matches CSS --muted-foreground)
   { label: "muted-fg on background", fg: "82 82 91", bg: "255 255 255" },
   { label: "muted-fg on muted", fg: "82 82 91", bg: "244 244 245" },
   // Semantic — foreground on solid bg (dark text on bright semantic colors)

package/dist/chunk-3EHT6IOA.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+// src/utils/focus-ring.ts
+var focusRingClasses = "focus-visible:outline-none focus-visible:border-border-strong";
+var focusRingClassList = [
+  "focus-visible:outline-none",
+  "focus-visible:border-border-strong"
+];
+var focusRingInsetClasses = "focus-visible:outline-none focus-visible:border-border-strong";
+var focusRingInsetClassList = [
+  "focus-visible:outline-none",
+  "focus-visible:border-border-strong"
+];
+var focusRingCompactClasses = "focus-visible:outline-none focus-visible:border-border-strong";
+var focusRingCompactClassList = [
+  "focus-visible:outline-none",
+  "focus-visible:border-border-strong"
+];
+var focusRingVariantOverrides = {
+  /** Override focus border color to danger red */
+  danger: "focus-visible:border-danger",
+  /** Override focus border color to success green */
+  success: "focus-visible:border-success",
+  /** Override focus border color to warning amber */
+  warning: "focus-visible:border-warning",
+  /** Override focus border color to info blue */
+  info: "focus-visible:border-info",
+  /** Override focus border color to current text color */
+  current: "focus-visible:border-current"
+};
+var focusRingGroupTriggerClasses = "focus-visible:outline-none";
+var focusRingGroupRingClasses = "group-focus-visible:border-border-strong";
+var focusWithinRingClasses = "focus-within:outline-none focus-within:border-border-strong";
+var focusWithinRingClassList = [
+  "focus-within:outline-none",
+  "focus-within:border-border-strong"
+];
+
+exports.focusRingClassList = focusRingClassList;
+exports.focusRingClasses = focusRingClasses;
+exports.focusRingCompactClassList = focusRingCompactClassList;
+exports.focusRingCompactClasses = focusRingCompactClasses;
+exports.focusRingGroupRingClasses = focusRingGroupRingClasses;
+exports.focusRingGroupTriggerClasses = focusRingGroupTriggerClasses;
+exports.focusRingInsetClassList = focusRingInsetClassList;
+exports.focusRingInsetClasses = focusRingInsetClasses;
+exports.focusRingVariantOverrides = focusRingVariantOverrides;
+exports.focusWithinRingClassList = focusWithinRingClassList;
+exports.focusWithinRingClasses = focusWithinRingClasses;