rechta-ds 0.0.0

package/packages/ui/src/components/molecules/Accordion.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn('border-b border-border last:border-0', className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-5 gap-4',
+        'font-body font-medium text-text-primary text-left',
+        'transition-all duration-200',
+        'hover:text-text-primary/80',
+        '[&[data-state=open]>svg]:rotate-180',
+        'focus-visible:outline-none focus-visible:text-text-brand',
+        'group',
+        className
+      )}
+      {...props}
+    >
+      <span>{children}</span>
+      <ChevronDown className="size-4 text-text-tertiary shrink-0 transition-transform duration-300 ease-out group-hover:text-text-secondary" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-5 text-sm text-text-secondary leading-relaxed', className)}>
+      {children}
+    </div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = 'AccordionContent';
+
+// ─── FAQ block: self-contained FAQ section ────────────────────────────────────
+export interface FAQItem {
+  question: string;
+  answer: React.ReactNode;
+}
+
+export interface FAQProps {
+  items: FAQItem[];
+  title?: string;
+  className?: string;
+  defaultOpen?: string[];
+}
+
+const FAQ: React.FC<FAQProps> = ({ items, title = 'Frequently asked questions', className, defaultOpen }) => (
+  <section className={cn('w-full', className)}>
+    {title && (
+      <h3 className="font-display text-2xl font-bold text-text-primary mb-8 tracking-tight">
+        {title}
+      </h3>
+    )}
+    <Accordion type="multiple" defaultValue={defaultOpen} className="w-full">
+      {items.map((item, i) => (
+        <AccordionItem key={i} value={`item-${i}`}>
+          <AccordionTrigger>{item.question}</AccordionTrigger>
+          <AccordionContent>{item.answer}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  </section>
+);
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, FAQ };

package/packages/ui/src/components/molecules/Card.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const cardVariants = cva(
+  ['rounded-xl border transition-all duration-200', 'relative overflow-hidden'],
+  {
+    variants: {
+      variant: {
+        default:   'bg-surface border-border',
+        raised:    'bg-surface-raised border-border shadow-md',
+        sunken:    'bg-surface-sunken border-border-subtle',
+        glass:     'bg-white/[0.03] border-white/[0.06] backdrop-blur-sm',
+        brand:     'bg-brand-500/5 border-brand-500/20',
+        accent:    'bg-accent-400/5 border-accent-400/20',
+        outline:   'bg-transparent border-border',
+        ghost:     'bg-transparent border-transparent',
+      },
+      hover: {
+        true:  'hover:border-border-strong hover:shadow-lg cursor-pointer',
+        false: '',
+      },
+      glow: {
+        none:   '',
+        brand:  'shadow-glow-brand',
+        accent: 'shadow-glow-accent',
+      },
+      padding: {
+        none: 'p-0',
+        sm:   'p-4',
+        md:   'p-6',
+        lg:   'p-8',
+        xl:   'p-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      hover: false,
+      glow: 'none',
+      padding: 'md',
+    },
+  }
+);
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, hover, glow, padding, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(cardVariants({ variant, hover, glow, padding, className }))}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+// Sub-components
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col gap-1.5', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('font-display font-semibold text-text-primary leading-tight tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-text-secondary leading-relaxed', className)} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center gap-3 pt-4 border-t border-border mt-4', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, cardVariants };

package/packages/ui/src/components/molecules/PricingCard.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Button } from '../atoms/Button';
+import { Badge } from '../atoms/Badge';
+import { Separator } from '../atoms/Misc';
+import { Check } from 'lucide-react';
+
+export interface PricingLimitRow {
+  label: string;
+  value: string;
+  tooltip?: string;
+}
+
+export interface PricingFeature {
+  text: string;
+  highlight?: boolean;
+  integration?: 'shopify' | string;
+}
+
+export interface PricingCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  planName: string;
+  description: string;
+  price: number | 'custom';
+  originalPrice?: number;
+  billingPeriod?: 'monthly' | 'yearly';
+  annualTotal?: string;
+  savingsPercent?: number;
+  ctaLabel: string;
+  ctaVariant?: 'default' | 'secondary' | 'outline';
+  onCtaClick?: () => void;
+  limits?: PricingLimitRow[];
+  features?: PricingFeature[];
+  sectionLabel?: string;
+  recommended?: boolean;
+  support?: string;
+}
+
+const PricingCard = React.forwardRef<HTMLDivElement, PricingCardProps>(
+  ({
+    className,
+    planName,
+    description,
+    price,
+    originalPrice,
+    billingPeriod = 'monthly',
+    annualTotal,
+    savingsPercent,
+    ctaLabel,
+    ctaVariant = 'secondary',
+    onCtaClick,
+    limits = [],
+    features = [],
+    sectionLabel,
+    recommended = false,
+    support,
+    ...props
+  }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative flex flex-col rounded-2xl border transition-all duration-300',
+          recommended
+            ? 'bg-brand-500/5 border-brand-500/40 shadow-glow-brand'
+            : 'bg-surface border-border hover:border-border-strong',
+          className
+        )}
+        {...props}
+      >
+        {/* Recommended ribbon */}
+        {recommended && (
+          <div className="absolute -top-3.5 left-1/2 -translate-x-1/2">
+            <Badge variant="solid" className="shadow-md px-3">
+              Recommended
+            </Badge>
+          </div>
+        )}
+
+        <div className="p-7 flex flex-col gap-5 flex-1">
+          {/* Header */}
+          <div className="flex flex-col gap-2">
+            <h3 className="font-display text-xl font-bold text-text-primary">{planName}</h3>
+            <p className="text-sm text-text-tertiary leading-relaxed">{description}</p>
+          </div>
+
+          {/* Price */}
+          <div className="flex flex-col gap-1">
+            <div className="flex items-baseline gap-2 flex-wrap">
+              {price === 'custom' ? (
+                <span className="font-display text-4xl font-bold text-text-primary tracking-tight">
+                  Custom
+                </span>
+              ) : (
+                <>
+                  {originalPrice && (
+                    <span className="font-mono text-xl text-text-tertiary line-through">
+                      ${originalPrice}
+                    </span>
+                  )}
+                  <span className="font-display text-4xl font-bold text-text-primary tracking-tight">
+                    ${price}
+                  </span>
+                  <div className="flex items-center gap-1.5">
+                    <span className="text-sm text-text-tertiary">/{billingPeriod === 'monthly' ? 'mo' : 'yr'}</span>
+                    {savingsPercent && (
+                      <Badge variant="brand">-{savingsPercent}%</Badge>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+            {annualTotal && (
+              <span className="text-xs font-mono text-text-tertiary">{annualTotal}</span>
+            )}
+          </div>
+
+          {/* CTA */}
+          <Button
+            variant={recommended ? 'default' : ctaVariant}
+            size="md"
+            className="w-full"
+            onClick={onCtaClick}
+          >
+            {ctaLabel}
+          </Button>
+
+          <Separator variant="subtle" />
+
+          {/* Limits */}
+          {limits.length > 0 && (
+            <div className="flex flex-col gap-3">
+              {limits.map((limit, i) => (
+                <div key={i} className="flex items-start justify-between gap-4">
+                  <div className="flex flex-col gap-0.5 min-w-0">
+                    <span className="text-sm font-medium text-text-primary">{limit.value}</span>
+                    {limit.tooltip && (
+                      <span className="text-xs text-text-tertiary leading-snug">{limit.tooltip}</span>
+                    )}
+                  </div>
+                  <span className="text-xs font-mono text-text-tertiary whitespace-nowrap shrink-0 mt-0.5 text-right">
+                    {limit.label}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+
+          <Separator variant="subtle" />
+
+          {/* Features */}
+          {features.length > 0 && (
+            <div className="flex flex-col gap-2.5">
+              {sectionLabel && (
+                <p className="text-xs font-mono text-text-tertiary tracking-wider uppercase mb-1">
+                  {sectionLabel}
+                </p>
+              )}
+              {features.map((feature, i) => (
+                <div key={i} className="flex items-start gap-2.5">
+                  <Check className={cn(
+                    'size-4 shrink-0 mt-0.5',
+                    feature.highlight ? 'text-brand-400' : 'text-text-tertiary'
+                  )} />
+                  <span className={cn(
+                    'text-sm leading-snug',
+                    feature.highlight ? 'text-text-primary font-medium' : 'text-text-secondary'
+                  )}>
+                    {feature.integration === 'shopify' && (
+                      <span className="inline-flex items-center gap-1 text-[10px] font-mono text-text-tertiary border border-border rounded px-1 mr-1.5 py-px">
+                        SHOPIFY
+                      </span>
+                    )}
+                    {feature.text}
+                  </span>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {/* Support */}
+          {support && (
+            <div className="mt-auto pt-3 border-t border-border">
+              <p className="text-xs text-text-tertiary leading-snug">
+                <span className="font-medium text-text-secondary">Support: </span>
+                {support}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+PricingCard.displayName = 'PricingCard';
+
+export { PricingCard };

package/packages/ui/src/components/molecules/TestimonialCard.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+import { Avatar } from '../atoms/Avatar';
+import { StarRating } from '../atoms/Misc';
+
+export interface TestimonialCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  quote: string;
+  authorName: string;
+  authorTitle: string;
+  authorAvatar?: string;
+  companyLogo?: string;
+  companyName?: string;
+  rating?: number;
+  featured?: boolean;
+}
+
+const TestimonialCard = React.forwardRef<HTMLDivElement, TestimonialCardProps>(
+  ({
+    className,
+    quote,
+    authorName,
+    authorTitle,
+    authorAvatar,
+    companyLogo,
+    companyName,
+    rating,
+    featured = false,
+    ...props
+  }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'relative flex flex-col gap-5 rounded-xl border p-6 transition-all duration-300',
+          featured
+            ? 'bg-brand-500/5 border-brand-500/30 hover:border-brand-500/50 hover:shadow-glow-brand'
+            : 'bg-surface border-border hover:border-border-strong hover:bg-surface-raised',
+          className
+        )}
+        {...props}
+      >
+        {/* Quote mark */}
+        <span className="font-editorial text-5xl leading-none text-brand-500/20 select-none absolute top-4 right-6">
+          "
+        </span>
+
+        {/* Company logo */}
+        {companyLogo && (
+          <div className="flex items-center">
+            <img
+              src={companyLogo}
+              alt={companyName ?? ''}
+              className="h-6 object-contain opacity-60 filter brightness-200"
+            />
+          </div>
+        )}
+
+        {/* Rating */}
+        {rating && <StarRating value={rating} showValue size="sm" />}
+
+        {/* Quote */}
+        <blockquote className="text-sm text-text-secondary leading-relaxed flex-1">
+          "{quote}"
+        </blockquote>
+
+        {/* Author */}
+        <div className="flex items-center gap-3 pt-2 border-t border-border">
+          <Avatar
+            src={authorAvatar}
+            fallback={authorName.slice(0, 2)}
+            alt={authorName}
+            size="sm"
+          />
+          <div className="flex flex-col min-w-0">
+            <span className="text-sm font-semibold text-text-primary truncate">{authorName}</span>
+            <span className="text-xs text-text-tertiary truncate">{authorTitle}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+TestimonialCard.displayName = 'TestimonialCard';
+
+export { TestimonialCard };

package/packages/ui/src/components/molecules/Tooltip.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '../../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipRoot = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    variant?: 'default' | 'brand' | 'accent';
+  }
+>(({ className, sideOffset = 6, variant = 'default', ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-tooltip overflow-hidden rounded-lg border px-3 py-1.5',
+        'text-xs font-body leading-normal',
+        'animate-scale-in',
+        'shadow-lg',
+        {
+          default: 'bg-surface-raised border-border text-text-primary',
+          brand:   'bg-brand-500 border-brand-500 text-gray-950',
+          accent:  'bg-accent-400 border-accent-400 text-gray-950',
+        }[variant],
+        className
+      )}
+      {...props}
+    >
+      {props.children}
+      <TooltipPrimitive.Arrow
+        className={cn(
+          'fill-current',
+          variant === 'default' ? 'text-surface-raised' : variant === 'brand' ? 'text-brand-500' : 'text-accent-400'
+        )}
+        width={8}
+        height={4}
+      />
+    </TooltipPrimitive.Content>
+  </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = 'TooltipContent';
+
+// ─── Convenience wrapper ──────────────────────────────────────────────────────
+export interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  variant?: 'default' | 'brand' | 'accent';
+  delayDuration?: number;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  children,
+  side = 'top',
+  variant = 'default',
+  delayDuration = 300,
+}) => (
+  <TooltipProvider delayDuration={delayDuration}>
+    <TooltipRoot>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={side} variant={variant}>{content}</TooltipContent>
+    </TooltipRoot>
+  </TooltipProvider>
+);
+
+export { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent };

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

@@ -0,0 +1,5 @@
+export * from './Card';
+export * from './Accordion';
+export * from './PricingCard';
+export * from './TestimonialCard';
+export * from './Tooltip';