rechta-ds 0.0.0

package/packages/ui/.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/packages/ui/.storybook/preview.tsx

@@ -0,0 +1,37 @@
+import type { Preview, Decorator } from '@storybook/react';
+import React from 'react';
+import '../src/styles/globals.css';
+
+const withTheme: Decorator = (Story, context) => {
+  const bg = context.globals?.backgrounds?.value;
+  const theme = bg === '#FFFFFC' ? 'light' : 'dark';
+  return (
+    <div data-theme={theme} style={{ padding: '2rem', minHeight: '100vh', background: theme === 'dark' ? '#000' : '#FFFFFC' }}>
+      <Story />
+    </div>
+  );
+};
+
+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: [withTheme],
+};
+
+export default preview;

package/packages/ui/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "@rechta/ui",
+  "version": "2.1.0",
+  "description": "Rechta Design System \u2014 React component library built on shadcn/ui + Radix UI",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./atoms": {
+      "import": "./dist/atoms/index.js",
+      "types": "./dist/atoms/index.d.ts"
+    },
+    "./molecules": {
+      "import": "./dist/molecules/index.js",
+      "types": "./dist/molecules/index.d.ts"
+    },
+    "./organisms": {
+      "import": "./dist/organisms/index.js",
+      "types": "./dist/organisms/index.d.ts"
+    },
+    "./charts": {
+      "import": "./dist/charts/index.js",
+      "types": "./dist/charts/index.d.ts"
+    }
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "storybook": "storybook dev -p 6006 --config-dir .storybook",
+    "build-storybook": "storybook build --config-dir .storybook",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.441.0",
+    "recharts": "^2.12.7",
+    "tailwind-merge": "^2.5.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@rechta/tokens": "workspace:*",
+    "@storybook/addon-essentials": "^8.3.3",
+    "@storybook/addon-interactions": "^8.3.3",
+    "@storybook/addon-links": "^8.3.3",
+    "@storybook/react": "^8.3.3",
+    "@storybook/react-vite": "^8.3.3",
+    "@storybook/test": "^8.3.3",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.45",
+    "storybook": "^8.3.3",
+    "tailwindcss": "^3.4.11",
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.3",
+    "@vitejs/plugin-react": "^4.3.1"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "rechta",
+    "design-system",
+    "react",
+    "ui",
+    "components",
+    "shadcn",
+    "radix",
+    "tailwind"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/rechta-ds",
+    "directory": "packages/ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/ui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/packages/ui/src/components/atoms/Avatar.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const avatarVariants = cva(
+  'relative inline-flex shrink-0 overflow-hidden select-none',
+  {
+    variants: {
+      size: {
+        xs:  'size-6 rounded-md text-[10px]',
+        sm:  'size-8 rounded-lg text-xs',
+        md:  'size-10 rounded-lg text-sm',
+        lg:  'size-12 rounded-xl text-base',
+        xl:  'size-16 rounded-2xl text-lg',
+        '2xl': 'size-20 rounded-2xl text-xl',
+      },
+      shape: {
+        square:  '',
+        rounded: '',
+        circle:  'rounded-full',
+      },
+      ring: {
+        none:   '',
+        brand:  'ring-2 ring-brand-500 ring-offset-2 ring-offset-bg-base',
+        accent: 'ring-2 ring-accent-400 ring-offset-2 ring-offset-bg-base',
+        white:  'ring-2 ring-white/20 ring-offset-1 ring-offset-bg-base',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      shape: 'circle',
+      ring: 'none',
+    },
+  }
+);
+
+export interface AvatarProps
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
+    VariantProps<typeof avatarVariants> {
+  src?: string;
+  alt?: string;
+  fallback?: string;
+  status?: 'online' | 'offline' | 'away' | 'busy';
+}
+
+const statusColors = {
+  online:  'bg-brand-500',
+  offline: 'bg-text-tertiary',
+  away:    'bg-amber-400',
+  busy:    'bg-red-400',
+};
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  AvatarProps
+>(({ className, size, shape, ring, src, alt, fallback, status, ...props }, ref) => {
+  return (
+    <div className="relative inline-flex">
+      <AvatarPrimitive.Root
+        ref={ref}
+        className={cn(avatarVariants({ size, shape, ring, className }))}
+        {...props}
+      >
+        <AvatarPrimitive.Image
+          src={src}
+          alt={alt}
+          className="aspect-square size-full object-cover"
+        />
+        <AvatarPrimitive.Fallback
+          className={cn(
+            'flex size-full items-center justify-center font-display font-semibold uppercase',
+            'bg-surface-raised text-text-secondary border border-border'
+          )}
+          delayMs={100}
+        >
+          {fallback?.slice(0, 2) ?? '??'}
+        </AvatarPrimitive.Fallback>
+      </AvatarPrimitive.Root>
+
+      {status && (
+        <span
+          className={cn(
+            'absolute bottom-0 right-0 rounded-full border-2 border-bg-base',
+            statusColors[status],
+            size === 'xs' || size === 'sm' ? 'size-2' : 'size-2.5'
+          )}
+        />
+      )}
+    </div>
+  );
+});
+Avatar.displayName = 'Avatar';
+
+// ─── Avatar Group ─────────────────────────────────────────────────────────────
+export interface AvatarGroupProps {
+  avatars: Array<{ src?: string; alt?: string; fallback?: string }>;
+  max?: number;
+  size?: AvatarProps['size'];
+  className?: string;
+}
+
+const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  ({ avatars, max = 4, size = 'sm', className }, ref) => {
+    const shown = avatars.slice(0, max);
+    const overflow = avatars.length - max;
+
+    return (
+      <div ref={ref} className={cn('flex -space-x-2', className)}>
+        {shown.map((avatar, i) => (
+          <Avatar
+            key={i}
+            src={avatar.src}
+            alt={avatar.alt}
+            fallback={avatar.fallback}
+            size={size}
+            ring="white"
+            className="hover:z-10 hover:scale-110 transition-transform duration-150"
+          />
+        ))}
+        {overflow > 0 && (
+          <div
+            className={cn(
+              avatarVariants({ size, shape: 'circle', ring: 'white' }),
+              'flex items-center justify-center',
+              'bg-surface-raised text-text-secondary border border-border',
+              'font-mono text-xs font-medium z-10'
+            )}
+          >
+            +{overflow}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+AvatarGroup.displayName = 'AvatarGroup';
+
+export { Avatar, AvatarGroup, avatarVariants };

package/packages/ui/src/components/atoms/Badge.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+/**
+ * Badge — @rechta/ui
+ *
+ * Accessibility:
+ * - All text tokens meet WCAG AA (≥4.5:1) against their background
+ * - dark theme: text-brand (#09E85E) = 8.6:1, text-blue (#5BABFF) = 5.9:1
+ * - light theme: text-brand (#047A2B) = 7.1:1, text-blue (#1A5EB8) = 6.4:1
+ * - Status warning: dark #FBBF24 = 12.4:1, light #92570A = 6.5:1
+ * - Status error: dark #F87171 = 7.4:1, light #C41D1D = 7.0:1
+ * - Solid: black text on malachite = ≥5:1, porcelain on blue = ≥4.5:1
+ * - When used to convey state (e.g. "Online"), add aria-label to parent
+ */
+const badgeVariants = cva(
+  [
+    'inline-flex items-center gap-1.5 font-mono text-[11px] font-medium',
+    'border rounded-[--radius-md] px-2 h-[22px] whitespace-nowrap',
+    'transition-colors duration-[150ms]',
+  ],
+  {
+    variants: {
+      variant: {
+        default:    'bg-[--surface] border-[--border] text-[--text-3]',
+        brand:      'bg-[--brand-subtle] border-[--border-brand] text-[--text-brand]',
+        emerald:    'bg-[--emerald-subtle] border-[--border-brand] text-[--emerald]',
+        blue:       'bg-[--blue-subtle] border-[--border-blue] text-[--text-blue]',
+        success:    'bg-[--status-success-bg] border-[--border-brand] text-[--status-success]',
+        warning:    'bg-[--status-warning-bg] border-[--border-warning,var(--border)] text-[--status-warning]',
+        error:      'bg-[--status-error-bg] border-[--border-error] text-[--status-error]',
+        info:       'bg-[--status-info-bg] border-[--border-blue] text-[--status-info]',
+        outline:    'bg-transparent border-[--border-mid] text-[--text]',
+        solid:      'bg-[--brand] border-[--brand] text-black',
+        'solid-blue':'bg-[--blue] border-[--blue] text-[--color-porcelain]',
+        porcelain:  'bg-[--color-porcelain] border-[--color-porcelain] text-black',
+      },
+    },
+    defaultVariants: { variant: 'default' },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {
+  dot?: boolean;
+}
+
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant, dot, children, ...props }, ref) => (
+    <span ref={ref} className={cn(badgeVariants({ variant }), className)} {...props}>
+      {dot && (
+        <span aria-hidden="true" className="inline-block w-1.5 h-1.5 rounded-full bg-current shrink-0" />
+      )}
+      {children}
+    </span>
+  )
+);
+Badge.displayName = 'Badge';
+
+export { Badge, badgeVariants };

package/packages/ui/src/components/atoms/Button.tsx

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+/**
+ * Button — @rechta/ui v2.1.0
+ * Ruda 900 display font, updated to --c- token system.
+ * All WCAG AA contrast ratios maintained.
+ */
+const buttonVariants = cva(
+  [
+    'inline-flex items-center justify-center gap-2 whitespace-nowrap select-none cursor-pointer',
+    'font-medium tracking-[-0.01em]',
+    'border transition-all duration-[150ms] ease-out',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--c-brand-focus] focus-visible:ring-offset-2 focus-visible:ring-offset-[--c-bg]',
+    'disabled:pointer-events-none disabled:opacity-40',
+    '[&_svg]:pointer-events-none [&_svg]:shrink-0',
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          'bg-[--c-brand] text-white border-[--c-brand]',
+          'hover:bg-[--c-brand-hover] hover:border-[--c-brand-hover]',
+          'active:bg-[--c-brand-active] active:scale-[0.98]',
+        ],
+        emerald: [
+          'bg-[--c-emerald] text-white border-[--c-emerald]',
+          'hover:bg-[--c-emerald-hover]',
+          'active:scale-[0.98]',
+        ],
+        blue: [
+          'bg-[--c-blue] text-white border-[--c-blue]',
+          'hover:bg-[--c-blue-hover]',
+          'active:bg-[--c-blue-active] active:scale-[0.98]',
+        ],
+        porcelain: [
+          'bg-[--c-text] text-[--c-bg] border-[--c-text]',
+          'hover:opacity-90',
+          'active:scale-[0.98]',
+        ],
+        secondary: [
+          'bg-[--c-bg-surface-hover] text-[--c-text] border-[--c-border]',
+          'hover:bg-[--c-bg-elevated] hover:border-[--c-border-mid]',
+          'active:scale-[0.98]',
+        ],
+        ghost: [
+          'bg-transparent text-[--c-text-2] border-transparent',
+          'hover:bg-[--c-bg-surface-hover] hover:text-[--c-text] hover:border-[--c-border]',
+          'active:scale-[0.98]',
+        ],
+        outline: [
+          'bg-transparent text-[--c-text] border-[--c-border]',
+          'hover:bg-[--c-bg-surface-hover] hover:border-[--c-border-mid]',
+          'active:scale-[0.98]',
+        ],
+        destructive: [
+          'bg-transparent text-[--c-status-error] border-[--c-border-error]',
+          'hover:bg-[rgba(251,113,133,0.08)]',
+          'active:scale-[0.98]',
+        ],
+        link: [
+          'bg-transparent text-[--c-text-accent] border-transparent',
+          'underline-offset-4 hover:underline',
+          'h-auto! p-0!',
+        ],
+      },
+      size: {
+        xs:  'h-7  px-3  text-xs   rounded-[6px]  gap-1.5 [&_svg]:size-3   font-[var(--font-sans)]',
+        sm:  'h-8  px-4  text-[13px] rounded-[8px]  gap-1.5 [&_svg]:size-3.5 font-[var(--font-sans)]',
+        md:  'h-[36px] px-[14px] text-[13px] rounded-[8px]  gap-2   [&_svg]:size-4   font-[var(--font-sans)]',
+        lg:  'h-11 px-6  text-sm   rounded-[10px] gap-2   [&_svg]:size-5   font-[var(--font-sans)]',
+        xl:  'h-[52px] px-8  text-[15px] rounded-[12px] gap-2.5 [&_svg]:size-5   font-[var(--font-sans)] font-semibold',
+        icon:     'size-9  rounded-[8px] p-0 [&_svg]:size-4',
+        'icon-sm':'size-7  rounded-[6px] p-0 [&_svg]:size-3.5',
+        'icon-lg':'size-11 rounded-[10px] p-0 [&_svg]:size-5',
+      },
+      loading: { true: 'cursor-wait opacity-70' },
+    },
+    defaultVariants: { variant: 'default', size: 'md' },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+  loadingText?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, loading, loadingText, asChild = false,
+     leftIcon, rightIcon, children, disabled, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        ref={ref}
+        className={cn(buttonVariants({ variant, size, loading, className }))}
+        disabled={disabled || loading === true}
+        aria-busy={loading === true}
+        {...props}
+      >
+        {loading ? (
+          <>
+            <span aria-hidden="true" className="size-4 border-2 border-current border-t-transparent rounded-full animate-spin shrink-0" />
+            {loadingText ?? children}
+          </>
+        ) : (
+          <>
+            {leftIcon && <span aria-hidden="true">{leftIcon}</span>}
+            {children}
+            {rightIcon && <span aria-hidden="true">{rightIcon}</span>}
+          </>
+        )}
+      </Comp>
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/packages/ui/src/components/atoms/Input.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const inputVariants = cva(
+  [
+    'w-full font-body text-text-primary placeholder:text-text-tertiary',
+    'bg-surface border border-border rounded-lg',
+    'transition-all duration-150',
+    'focus:outline-none focus:ring-2 focus:ring-brand-500/50 focus:border-brand-500',
+    'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-bg-muted',
+    'read-only:bg-bg-subtle',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'h-8 px-3 text-sm',
+        md: 'h-10 px-4 text-sm',
+        lg: 'h-12 px-4 text-base',
+      },
+      state: {
+        default: '',
+        error:   'border-red-500/50 focus:ring-red-500/30 focus:border-red-500',
+        success: 'border-brand-500/50 focus:ring-brand-500/30 focus:border-brand-500',
+        warning: 'border-amber-500/50 focus:ring-amber-500/30 focus:border-amber-500',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      state: 'default',
+    },
+  }
+);
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {
+  leftElement?: React.ReactNode;
+  rightElement?: React.ReactNode;
+  state?: 'default' | 'error' | 'success' | 'warning';
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, size, state, leftElement, rightElement, type = 'text', ...props }, ref) => {
+    if (leftElement || rightElement) {
+      return (
+        <div className="relative flex items-center w-full">
+          {leftElement && (
+            <div className="absolute left-3 flex items-center pointer-events-none text-text-tertiary [&_svg]:size-4">
+              {leftElement}
+            </div>
+          )}
+          <input
+            ref={ref}
+            type={type}
+            className={cn(
+              inputVariants({ size, state, className }),
+              leftElement && 'pl-9',
+              rightElement && 'pr-9'
+            )}
+            {...props}
+          />
+          {rightElement && (
+            <div className="absolute right-3 flex items-center text-text-tertiary [&_svg]:size-4">
+              {rightElement}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <input
+        ref={ref}
+        type={type}
+        className={cn(inputVariants({ size, state, className }))}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+// ─── Textarea ────────────────────────────────────────────────────────────────
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  state?: 'default' | 'error' | 'success' | 'warning';
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, state = 'default', resize = 'vertical', ...props }, ref) => {
+    const resizeClass = {
+      none:       'resize-none',
+      vertical:   'resize-y',
+      horizontal: 'resize-x',
+      both:       'resize',
+    }[resize];
+
+    return (
+      <textarea
+        ref={ref}
+        className={cn(
+          inputVariants({ size: 'md', state }),
+          'h-auto min-h-[100px] py-3',
+          resizeClass,
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Input, Textarea, inputVariants };