rechta-ds 0.0.0

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

@@ -0,0 +1,128 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '../../lib/utils';
+
+// ─── Separator / Divider ─────────────────────────────────────────────────────
+export interface SeparatorProps
+  extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
+  label?: string;
+  variant?: 'default' | 'subtle' | 'strong' | 'brand' | 'dashed';
+}
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  SeparatorProps
+>(({ className, label, variant = 'default', orientation = 'horizontal', decorative = true, ...props }, ref) => {
+  const lineClass = {
+    default: 'bg-border',
+    subtle:  'bg-border-subtle',
+    strong:  'bg-border-strong',
+    brand:   'bg-brand-500/30',
+    dashed:  'border-t border-dashed border-border bg-transparent',
+  }[variant];
+
+  if (label) {
+    return (
+      <div className={cn('flex items-center gap-4', className)}>
+        <div className={cn('flex-1 h-px', lineClass)} />
+        <span className="text-xs font-mono text-text-tertiary tracking-wider uppercase whitespace-nowrap">
+          {label}
+        </span>
+        <div className={cn('flex-1 h-px', lineClass)} />
+      </div>
+    );
+  }
+
+  return (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0',
+        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+        lineClass,
+        className
+      )}
+      {...props}
+    />
+  );
+});
+Separator.displayName = 'Separator';
+
+// ─── Icon wrapper ─────────────────────────────────────────────────────────────
+export interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  color?: 'default' | 'brand' | 'accent' | 'muted' | 'error' | 'success' | 'warning';
+  children: React.ReactNode;
+}
+
+const sizeClasses = {
+  xs: '[&_svg]:size-3',
+  sm: '[&_svg]:size-3.5',
+  md: '[&_svg]:size-4',
+  lg: '[&_svg]:size-5',
+  xl: '[&_svg]:size-6',
+};
+
+const colorClasses = {
+  default: 'text-text-secondary',
+  brand:   'text-brand-400',
+  accent:  'text-accent-400',
+  muted:   'text-text-tertiary',
+  error:   'text-red-400',
+  success: 'text-brand-400',
+  warning: 'text-amber-400',
+};
+
+const Icon: React.FC<IconProps> = ({ size = 'md', color = 'default', className, children, ...props }) => (
+  <span
+    className={cn(
+      'inline-flex items-center justify-center shrink-0',
+      sizeClasses[size],
+      colorClasses[color],
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </span>
+);
+
+// ─── Star Rating ──────────────────────────────────────────────────────────────
+export interface StarRatingProps {
+  value: number;
+  max?: number;
+  size?: 'sm' | 'md' | 'lg';
+  showValue?: boolean;
+  className?: string;
+}
+
+const StarRating: React.FC<StarRatingProps> = ({ value, max = 5, size = 'md', showValue, className }) => {
+  const starSize = { sm: 'size-3', md: 'size-4', lg: 'size-5' }[size];
+
+  return (
+    <div className={cn('inline-flex items-center gap-1.5', className)}>
+      <div className="flex items-center gap-0.5">
+        {Array.from({ length: max }).map((_, i) => (
+          <svg
+            key={i}
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            className={cn(
+              starSize,
+              i < Math.floor(value) ? 'text-amber-400' : 'text-border-strong'
+            )}
+          >
+            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+          </svg>
+        ))}
+      </div>
+      {showValue && (
+        <span className="text-sm font-mono font-medium text-text-primary">{value.toFixed(1)}</span>
+      )}
+    </div>
+  );
+};
+
+export { Separator, Icon, StarRating };

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

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from '../../lib/utils';
+
+// ─── Switch ───────────────────────────────────────────────────────────────────
+export interface SwitchProps
+  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+  size?: 'sm' | 'md' | 'lg';
+  label?: string;
+  description?: string;
+}
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  SwitchProps
+>(({ className, size = 'md', label, description, id, ...props }, ref) => {
+  const sizeClasses = {
+    sm: { root: 'h-4 w-7',  thumb: 'size-3 data-[state=checked]:translate-x-3' },
+    md: { root: 'h-5 w-9',  thumb: 'size-4 data-[state=checked]:translate-x-4' },
+    lg: { root: 'h-6 w-11', thumb: 'size-5 data-[state=checked]:translate-x-5' },
+  }[size];
+
+  const switchEl = (
+    <SwitchPrimitive.Root
+      ref={ref}
+      id={id}
+      className={cn(
+        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-border',
+        'bg-surface transition-all duration-200',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=checked]:bg-brand-500 data-[state=checked]:border-brand-500',
+        'hover:border-border-strong data-[state=checked]:hover:bg-brand-400',
+        sizeClasses.root,
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className={cn(
+          'pointer-events-none block rounded-full bg-text-tertiary shadow-md',
+          'ring-0 transition-all duration-200',
+          'translate-x-0.5',
+          'data-[state=checked]:bg-gray-950',
+          sizeClasses.thumb
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+
+  if (!label) return switchEl;
+
+  return (
+    <div className="flex items-start gap-3">
+      {switchEl}
+      <div className="flex flex-col gap-0.5">
+        <label htmlFor={id} className="text-sm font-medium text-text-primary cursor-pointer leading-tight">
+          {label}
+        </label>
+        {description && (
+          <span className="text-xs text-text-tertiary leading-normal">{description}</span>
+        )}
+      </div>
+    </div>
+  );
+});
+Switch.displayName = 'Switch';
+
+// ─── Checkbox ────────────────────────────────────────────────────────────────
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  description?: string;
+  indeterminate?: boolean;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, label, description, id, indeterminate, ...props }, ref) => {
+    const internalRef = React.useRef<HTMLInputElement>(null);
+    const resolvedRef = (ref as React.RefObject<HTMLInputElement>) || internalRef;
+
+    React.useEffect(() => {
+      if (resolvedRef.current) {
+        resolvedRef.current.indeterminate = indeterminate ?? false;
+      }
+    }, [indeterminate, resolvedRef]);
+
+    const checkboxEl = (
+      <div className="relative flex items-center">
+        <input
+          ref={resolvedRef}
+          type="checkbox"
+          id={id}
+          className={cn(
+            'peer size-4 shrink-0 rounded border border-border bg-surface cursor-pointer',
+            'appearance-none transition-all duration-150',
+            'checked:bg-brand-500 checked:border-brand-500',
+            'indeterminate:bg-brand-500 indeterminate:border-brand-500',
+            'hover:border-border-strong',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:ring-offset-1 focus-visible:ring-offset-bg-base',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+          {...props}
+        />
+        {/* Checkmark SVG overlay */}
+        <svg
+          className="absolute size-4 pointer-events-none hidden peer-checked:block text-gray-950"
+          viewBox="0 0 16 16" fill="none"
+        >
+          <path d="M3 8l3.5 3.5L13 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+        {/* Indeterminate dash */}
+        <svg
+          className="absolute size-4 pointer-events-none hidden peer-indeterminate:block text-gray-950"
+          viewBox="0 0 16 16" fill="none"
+        >
+          <path d="M4 8h8" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+        </svg>
+      </div>
+    );
+
+    if (!label) return checkboxEl;
+
+    return (
+      <div className="flex items-start gap-3">
+        {checkboxEl}
+        <div className="flex flex-col gap-0.5 mt-px">
+          <label htmlFor={id} className="text-sm font-medium text-text-primary cursor-pointer leading-tight">
+            {label}
+          </label>
+          {description && (
+            <span className="text-xs text-text-tertiary leading-normal">{description}</span>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+Checkbox.displayName = 'Checkbox';
+
+// ─── Billing Toggle ───────────────────────────────────────────────────────────
+export interface BillingToggleProps {
+  value: 'monthly' | 'yearly';
+  onChange: (value: 'monthly' | 'yearly') => void;
+  savingsLabel?: string;
+  className?: string;
+}
+
+const BillingToggle: React.FC<BillingToggleProps> = ({
+  value,
+  onChange,
+  savingsLabel = 'Save 33%',
+  className,
+}) => {
+  return (
+    <div className={cn('inline-flex items-center gap-3', className)}>
+      <span className={cn('text-sm font-medium transition-colors', value === 'monthly' ? 'text-text-primary' : 'text-text-tertiary')}>
+        Monthly
+      </span>
+      <button
+        role="switch"
+        aria-checked={value === 'yearly'}
+        onClick={() => onChange(value === 'monthly' ? 'yearly' : 'monthly')}
+        className={cn(
+          'relative h-6 w-12 rounded-full border transition-all duration-300 cursor-pointer',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500',
+          value === 'yearly'
+            ? 'bg-brand-500 border-brand-500'
+            : 'bg-surface border-border'
+        )}
+      >
+        <span
+          className={cn(
+            'absolute top-0.5 size-5 rounded-full shadow-md transition-all duration-300',
+            value === 'yearly'
+              ? 'left-[calc(100%-1.375rem)] bg-gray-950'
+              : 'left-0.5 bg-text-tertiary'
+          )}
+        />
+      </button>
+      <span className={cn('text-sm font-medium transition-colors flex items-center gap-2', value === 'yearly' ? 'text-text-primary' : 'text-text-tertiary')}>
+        Yearly
+        <span className="text-[10px] font-mono font-medium bg-accent-400/10 text-accent-400 border border-accent-400/30 px-1.5 py-0.5 rounded">
+          {savingsLabel}
+        </span>
+      </span>
+    </div>
+  );
+};
+
+export { Switch, Checkbox, BillingToggle };

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

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+// ─── Heading ──────────────────────────────────────────────────────────────────
+const headingVariants = cva(
+  'font-display font-bold tracking-tight leading-tight text-text-primary',
+  {
+    variants: {
+      level: {
+        display: 'text-7xl md:text-8xl tracking-tighter',
+        h1:  'text-5xl md:text-6xl',
+        h2:  'text-4xl md:text-5xl',
+        h3:  'text-3xl',
+        h4:  'text-2xl',
+        h5:  'text-xl',
+        h6:  'text-lg',
+      },
+      weight: {
+        light:    'font-light',
+        regular:  'font-normal',
+        medium:   'font-medium',
+        semibold: 'font-semibold',
+        bold:     'font-bold',
+        extrabold:'font-extrabold',
+      },
+      color: {
+        default:   'text-text-primary',
+        secondary: 'text-text-secondary',
+        brand:     'text-text-brand',
+        accent:    'text-text-accent',
+        muted:     'text-text-tertiary',
+      },
+      gradient: {
+        none:  '',
+        brand: 'bg-gradient-to-r from-brand-400 to-accent-400 bg-clip-text text-transparent',
+        mono:  'bg-gradient-to-r from-text-primary to-text-tertiary bg-clip-text text-transparent',
+        white: 'bg-gradient-to-b from-white to-white/60 bg-clip-text text-transparent',
+      },
+    },
+    defaultVariants: {
+      level: 'h2',
+      color: 'default',
+      gradient: 'none',
+    },
+  }
+);
+
+type HeadingElement = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export interface HeadingProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
+    VariantProps<typeof headingVariants> {
+  as?: HeadingElement | 'p' | 'span' | 'div';
+}
+
+const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
+  ({ className, level = 'h2', weight, color, gradient, as, children, ...props }, ref) => {
+    const tagMap: Record<string, HeadingElement> = {
+      display: 'h1', h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6',
+    };
+    const Tag = (as ?? tagMap[level ?? 'h2'] ?? 'h2') as any;
+    return (
+      <Tag
+        ref={ref}
+        className={cn(headingVariants({ level, weight, color, gradient, className }))}
+        {...props}
+      >
+        {children}
+      </Tag>
+    );
+  }
+);
+Heading.displayName = 'Heading';
+
+// ─── Text ─────────────────────────────────────────────────────────────────────
+const textVariants = cva('font-body text-text-secondary', {
+  variants: {
+    size: {
+      xs:   'text-xs',
+      sm:   'text-sm',
+      base: 'text-base',
+      md:   'text-md',
+      lg:   'text-lg',
+      xl:   'text-xl',
+    },
+    weight: {
+      light:    'font-light',
+      regular:  'font-normal',
+      medium:   'font-medium',
+      semibold: 'font-semibold',
+      bold:     'font-bold',
+    },
+    color: {
+      primary:   'text-text-primary',
+      secondary: 'text-text-secondary',
+      tertiary:  'text-text-tertiary',
+      disabled:  'text-text-disabled',
+      brand:     'text-text-brand',
+      accent:    'text-text-accent',
+      error:     'text-red-400',
+      success:   'text-brand-400',
+      warning:   'text-amber-400',
+    },
+    leading: {
+      tight:   'leading-tight',
+      snug:    'leading-snug',
+      normal:  'leading-normal',
+      relaxed: 'leading-relaxed',
+      loose:   'leading-loose',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+    leading: 'normal',
+  },
+});
+
+export interface TextProps
+  extends Omit<React.HTMLAttributes<HTMLParagraphElement>, 'color'>,
+    VariantProps<typeof textVariants> {
+  as?: 'p' | 'span' | 'div' | 'label' | 'small' | 'strong' | 'em';
+}
+
+const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
+  ({ className, size, weight, color, leading, as = 'p', ...props }, ref) => {
+    const Tag = as as any;
+    return (
+      <Tag
+        ref={ref}
+        className={cn(textVariants({ size, weight, color, leading, className }))}
+        {...props}
+      />
+    );
+  }
+);
+Text.displayName = 'Text';
+
+// ─── Label ───────────────────────────────────────────────────────────────────
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  required?: boolean;
+  optional?: boolean;
+}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, children, required, optional, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        'block text-sm font-medium text-text-primary tracking-wide mb-1.5',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {required && <span className="ml-1 text-red-400">*</span>}
+      {optional && <span className="ml-1.5 text-text-tertiary font-normal text-xs">(optional)</span>}
+    </label>
+  )
+);
+Label.displayName = 'Label';
+
+// ─── Overline / Caption ───────────────────────────────────────────────────────
+const Overline: React.FC<React.HTMLAttributes<HTMLSpanElement>> = ({ className, ...props }) => (
+  <span
+    className={cn('text-xs font-mono font-medium tracking-widest uppercase text-text-tertiary', className)}
+    {...props}
+  />
+);
+
+const Caption: React.FC<React.HTMLAttributes<HTMLSpanElement>> = ({ className, ...props }) => (
+  <span
+    className={cn('text-xs font-body text-text-tertiary leading-normal', className)}
+    {...props}
+  />
+);
+
+export { Heading, Text, Label, Overline, Caption, headingVariants, textVariants };

package/packages/ui/src/components/atoms/index.ts

@@ -0,0 +1,7 @@
+export * from './Button';
+export * from './Badge';
+export * from './Input';
+export * from './Toggle';
+export * from './Avatar';
+export * from './Typography';
+export * from './Misc';