rechta-ds 0.0.0

package/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [["@rechta/ui", "@rechta/tokens"]],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.github/workflows/release.yml

@@ -0,0 +1,53 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+      pull-requests: write
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm build
+
+      - name: Create Release PR or Publish
+        uses: changesets/action@v1
+        with:
+          publish: pnpm release
+          version: pnpm version-packages
+          commit: 'chore: version packages'
+          title: 'chore: version packages'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/storybook.yml

@@ -0,0 +1,34 @@
+name: Storybook
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+
+      - run: pnpm install --frozen-lockfile
+
+      - run: pnpm build
+
+      - run: pnpm --filter @rechta/ui build-storybook
+
+      - name: Deploy to Chromatic
+        uses: chromaui/action@v11
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          storybookBuildDir: packages/ui/storybook-static

package/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/stories/**/*.stories.@(ts|tsx)'],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-links',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: { autodocs: 'tag' },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,35 @@
+import type { Preview } from '@storybook/react';
+import '../packages/ui/src/styles/globals.css'; // tokens + global styles
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark',  value: '#000000' },
+        { name: 'light', value: '#FFFFFC' },
+        { name: 'surface', value: '#111111' },
+      ],
+    },
+    layout: 'centered',
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const theme = context.globals?.backgrounds?.value === '#FFFFFC' ? 'light' : 'dark';
+      return (
+        <div data-theme={theme} style={{ padding: '2rem', minHeight: '100vh' }}>
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+export default preview;

package/CHANGELOG.md

@@ -0,0 +1,65 @@
+# Changelog
+
+All notable changes to the Rechta Design System packages are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+---
+
+## [2.1.0] — 2026-03-12
+
+### Added — `@rechta/tokens`
+- Complete semantic token system: dark + light modes for bg, surface, border, text, brand, emerald, blue, status
+- New `glow-brand`, `glow-brand-lg`, `glow-blue`, `glow-emerald` shadow tokens
+- Spring easing curve (`cubic-bezier(0.34, 1.56, 0.64, 1)`) added to transition tokens
+- `--radius-*` custom properties now exported as CSS variables
+
+### Changed — `@rechta/ui`
+- `Button`: migrated to `--c-*` CSS variable token system; Ruda 900 display font for xl size
+- `Badge`: now uses `font-mono` for labels; all WCAG AA contrast ratios verified
+- `Card`: new `glass`, `brand`, `outline`, `ghost` variants; `glow` prop for brand/accent shadows
+- `Input`: new `leftElement`/`rightElement` slots replacing `prefix`/`suffix` strings
+- `Toggle`: now wraps `@radix-ui/react-switch` for full a11y compliance
+
+### Fixed
+- Focus ring offset now respects `--c-bg` so it renders correctly on any background
+- Dark-mode `disabled` state opacity corrected to 40% (was 50%)
+
+---
+
+## [2.0.0] — 2026-01-20
+
+### Breaking
+- Renamed all CSS variables from `--rechta-*` to `--c-*` (shorter, production-ready)
+- `Badge` `size` prop removed — height is now fixed at 22px (use font-size utilities)
+- `Card` `interactive` prop replaced by `hover` boolean
+
+### Added
+- Light theme full token set (`[data-theme="light"]`)
+- `PricingCard`, `TestimonialCard`, `LogoMarquee`, `FeatureTabs` organisms
+- Storybook 8 migration with autodocs
+- `tsup` build pipeline replacing rollup
+
+---
+
+## [1.4.2] — 2025-11-08
+
+### Fixed
+- `Accordion` animation direction corrected in Safari
+- `Tooltip` z-index updated to use `--z-tooltip` (700)
+
+---
+
+## [1.4.0] — 2025-10-15
+
+### Added
+- `@rechta/tokens` published as standalone package
+- Figma Tokens JSON export at `packages/figma/tokens.json`
+- `Charts` + `DataTable` components (recharts-based)
+
+---
+
+## [1.0.0] — 2025-07-01
+
+Initial public release of `@rechta/ui`.

package/CONTRIBUTING.md

@@ -0,0 +1,106 @@
+# Contributing to Rechta DS
+
+Thank you for your interest in contributing! This document walks you through the development workflow.
+
+---
+
+## Setup
+
+**Prerequisites:** Node.js ≥ 18, pnpm ≥ 9
+
+```bash
+git clone https://github.com/your-org/rechta-ds.git
+cd rechta-ds
+pnpm install
+pnpm build
+```
+
+---
+
+## Development workflow
+
+```bash
+# Start Storybook with hot-reload
+pnpm storybook
+
+# Watch tokens + UI simultaneously
+pnpm dev
+
+# Type-check everything
+pnpm --filter @rechta/ui typecheck
+```
+
+---
+
+## Adding a new component
+
+1. **Choose the right level:**
+   - `atoms/` — single-purpose, no composed children (Button, Badge, Input)
+   - `molecules/` — composed from 2+ atoms (Card, Accordion, Tooltip)
+   - `organisms/` — page-level sections (Navbar, FeatureTabs)
+
+2. **Create the component file:**
+   ```
+   packages/ui/src/components/{level}/MyComponent.tsx
+   ```
+
+3. **Export from barrel:**
+   ```ts
+   // packages/ui/src/components/{level}/index.ts
+   export * from './MyComponent';
+   ```
+
+4. **Write a story:**
+   ```
+   packages/ui/src/stories/{level}/MyComponent.stories.tsx
+   ```
+   Every story file must export: `Default` + at least one variant/state story.
+
+5. **Token usage:** Always use `--c-*` CSS variables, never hardcoded hex values.
+
+---
+
+## Token changes
+
+Token changes belong in `packages/tokens/src/tokens.json`. After editing:
+
+```bash
+pnpm --filter @rechta/tokens build
+```
+
+This regenerates `dist/tokens.css`, `dist/index.js`, and `dist/tailwind.config.js`.
+
+---
+
+## Versioning
+
+This project uses [Changesets](https://github.com/changesets/changesets).
+
+```bash
+pnpm changeset   # describe what changed (follow prompts)
+```
+
+- **patch** — bug fix, no API change
+- **minor** — new component or non-breaking feature
+- **major** — breaking API change
+
+---
+
+## Commit conventions
+
+```
+feat(button): add xl icon size
+fix(badge): correct dark-mode contrast ratio
+docs(readme): update quick-start example
+chore: bump turbo to 2.2.0
+```
+
+---
+
+## Code style
+
+- TypeScript strict mode
+- `React.forwardRef` on all leaf components
+- `displayName` set on every component
+- Prefer `cva` for variant logic (class-variance-authority)
+- Use `cn()` from `lib/utils` for conditional classes

package/README.md

@@ -0,0 +1,206 @@
+# Rechta Design System
+
+> **Malachite × Porcelain** — a dark-first React component library built on shadcn/ui + Radix UI
+
+[![npm version](https://img.shields.io/npm/v/@rechta/ui?color=09E85E&label=%40rechta%2Fui)](https://www.npmjs.com/package/@rechta/ui)
+[![npm version](https://img.shields.io/npm/v/@rechta/tokens?color=09E85E&label=%40rechta%2Ftokens)](https://www.npmjs.com/package/@rechta/tokens)
+[![License: MIT](https://img.shields.io/badge/License-MIT-09E85E.svg)](LICENSE)
+
+---
+
+## Packages
+
+| Package | Version | Description |
+|---------|---------|-------------|
+| [`@rechta/ui`](./packages/ui) | `2.1.0` | React component library (atoms, molecules, organisms) |
+| [`@rechta/tokens`](./packages/tokens) | `2.1.0` | Design tokens — CSS variables, Tailwind config, JSON |
+
+---
+
+## Quick start
+
+### Install
+
+```bash
+# pnpm (recommended)
+pnpm add @rechta/ui @rechta/tokens
+
+# npm
+npm install @rechta/ui @rechta/tokens
+
+# yarn
+yarn add @rechta/ui @rechta/tokens
+```
+
+### Configure Tailwind
+
+```js
+// tailwind.config.js
+import rechta from '@rechta/tokens/tailwind';
+
+export default {
+  presets: [rechta],
+  content: [
+    './src/**/*.{ts,tsx}',
+    './node_modules/@rechta/ui/dist/**/*.js',
+  ],
+};
+```
+
+### Add global CSS
+
+```tsx
+// app/layout.tsx (or your root file)
+import '@rechta/tokens/css';
+```
+
+This imports the CSS custom properties for both `[data-theme="dark"]` (default) and `[data-theme="light"]`.
+
+### Set your theme
+
+```tsx
+<html data-theme="dark">   {/* dark (default) */}
+<html data-theme="light">  {/* light */}
+```
+
+### Use components
+
+```tsx
+import { Button, Badge, Card } from '@rechta/ui';
+// or import tree-shakeable sub-paths:
+import { Button } from '@rechta/ui/atoms';
+import { PricingCard } from '@rechta/ui/molecules';
+
+export default function App() {
+  return (
+    <Card variant="raised" glow="brand">
+      <Badge variant="brand" dot>Active</Badge>
+      <Button leftIcon={<Plus />}>Create link</Button>
+    </Card>
+  );
+}
+```
+
+---
+
+## Component inventory
+
+### Atoms
+| Component | Description |
+|-----------|-------------|
+| `Button` | 9 variants × 8 sizes — brand, emerald, blue, porcelain, secondary, ghost, outline, destructive, link |
+| `Badge` | 12 variants, optional dot indicator, mono font |
+| `Input` | Left/right element slots, 3 sizes, 4 states |
+| `Textarea` | Resizable, same states as Input |
+| `Toggle` | Radix Switch — fully accessible |
+| `Avatar` | 5 sizes, image + initials fallback |
+| `Typography` | Display, heading, body, caption, mono presets |
+| `Skeleton` | Animated shimmer loading placeholder |
+| `Divider` | With optional label |
+| `Spinner` | Brand-colored loading indicator |
+
+### Molecules
+| Component | Description |
+|-----------|-------------|
+| `Card` | 8 variants, hover, glow, padding props |
+| `Accordion` | Radix-based, single/multiple open modes |
+| `PricingCard` | With popular callout, feature list |
+| `TestimonialCard` | Quote, avatar, attribution |
+| `Tooltip` | Radix tooltip, all 4 sides |
+
+### Organisms
+| Component | Description |
+|-----------|-------------|
+| `Navbar` | With announcement banner, nav links, CTA |
+| `LogoMarquee` | Auto-scrolling logo marquee |
+| `FeatureTabs` | Animated tab-based feature showcase |
+
+### Charts
+| Component | Description |
+|-----------|-------------|
+| `AreaChart` | Recharts-based, brand-colored |
+| `BarChart` | Grouped / stacked |
+| `DataTable` | Sortable, filterable table |
+
+---
+
+## Token system
+
+All components use CSS custom properties (`--c-*`) so they respond to theme changes without re-rendering.
+
+```css
+/* Brand */
+--c-brand          /* #09E85E  malachite */
+--c-brand-hover    /* #0CF568 */
+--c-brand-active   /* #07C44F */
+--c-brand-focus    /* rgba(9,232,94,0.25) */
+--c-brand-subtle   /* rgba(9,232,94,0.08) */
+
+/* Surfaces */
+--c-bg             /* root canvas */
+--c-bg-surface     /* card default */
+--c-bg-elevated    /* modal/popover */
+
+/* Text */
+--c-text           /* primary — 21:1 */
+--c-text-2         /* secondary — 9.2:1 */
+--c-text-3         /* tertiary — 5.7:1 */
+
+/* Borders */
+--c-border         /* default */
+--c-border-mid     /* hover */
+--c-border-strong  /* focus/pressed */
+```
+
+Full token reference: [`packages/tokens/src/tokens.json`](./packages/tokens/src/tokens.json)
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Build all packages
+pnpm build
+
+# Start Storybook
+pnpm storybook
+
+# Watch mode (for UI package)
+pnpm --filter @rechta/ui dev
+```
+
+### Creating a changeset (for release)
+
+```bash
+pnpm changeset        # describe your changes
+pnpm version-packages # bump versions
+pnpm release          # build + publish to npm
+```
+
+---
+
+## Publishing to npm
+
+1. Set `NPM_TOKEN` in your GitHub repository secrets
+2. Set `CHROMATIC_PROJECT_TOKEN` for Storybook visual testing (optional)
+3. Push to `main` — the Release workflow will open a Version PR
+4. Merge the Version PR — packages are automatically published
+
+Manual publish:
+```bash
+pnpm build
+pnpm release  # runs: changeset publish
+```
+
+---
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+## License
+
+MIT © Rechta Technologies

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "rechta-ds",
+  "private": false,
+  "version": "0.0.0",
+  "description": "Rechta Design System — monorepo",
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo lint",
+    "test": "turbo test",
+    "storybook": "turbo storybook",
+    "build-storybook": "turbo build-storybook",
+    "clean": "turbo clean && find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "turbo build && changeset publish"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.1",
+    "turbo": "^2.1.2"
+  },
+  "engines": {
+    "node": ">=18.0.0",
+    "pnpm": ">=9.0.0"
+  },
+  "packageManager": "pnpm@9.12.0"
+}