rechta-ds 0.0.0

package/packages/ui/src/components/organisms/FeatureTabs.tsx

@@ -0,0 +1,196 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../../lib/utils';
+import { Button } from '../atoms/Button';
+import { ArrowRight } from 'lucide-react';
+
+// ─── Tabs primitives ──────────────────────────────────────────────────────────
+const TabsRoot = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex items-center gap-1 rounded-xl bg-surface border border-border p-1',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = 'TabsList';
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-lg',
+      'px-4 py-2 text-sm font-medium font-body',
+      'text-text-tertiary transition-all duration-200',
+      'hover:text-text-secondary',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:bg-surface-raised data-[state=active]:text-text-primary data-[state=active]:shadow-sm',
+      'data-[state=active]:border data-[state=active]:border-border',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = 'TabsTrigger';
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'focus-visible:outline-none',
+      'data-[state=active]:animate-fade-up',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = 'TabsContent';
+
+// ─── Feature Tabs organism ────────────────────────────────────────────────────
+export interface FeatureTab {
+  id: string;
+  label: string;
+  overline: string;
+  heading: string;
+  description: string;
+  ctaLabel: string;
+  ctaHref?: string;
+  onCtaClick?: () => void;
+  media?: string;        // video URL or GIF
+  mediaType?: 'video' | 'image';
+  mediaPoster?: string;
+}
+
+export interface FeatureTabsProps {
+  tabs: FeatureTab[];
+  eyebrow?: string;
+  heading?: string;
+  productTourLabel?: string;
+  onProductTourClick?: () => void;
+  className?: string;
+}
+
+const FeatureTabs: React.FC<FeatureTabsProps> = ({
+  tabs,
+  eyebrow,
+  heading,
+  productTourLabel = 'Take product tour',
+  onProductTourClick,
+  className,
+}) => {
+  const [active, setActive] = React.useState(tabs[0]?.id ?? '');
+  const activeTab = tabs.find((t) => t.id === active) ?? tabs[0];
+
+  return (
+    <section className={cn('w-full', className)}>
+      {/* Section header */}
+      {(eyebrow || heading) && (
+        <div className="text-center mb-12 max-w-2xl mx-auto">
+          {eyebrow && (
+            <p className="text-xs font-mono text-text-tertiary tracking-widest uppercase mb-3">{eyebrow}</p>
+          )}
+          {heading && (
+            <h2 className="font-display text-4xl font-bold text-text-primary tracking-tight">{heading}</h2>
+          )}
+        </div>
+      )}
+
+      <TabsRoot value={active} onValueChange={setActive}>
+        {/* Tab list */}
+        <div className="flex justify-center mb-10">
+          <TabsList>
+            {tabs.map((tab) => (
+              <TabsTrigger key={tab.id} value={tab.id}>
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+
+        {/* Tab panels */}
+        {tabs.map((tab) => (
+          <TabsContent key={tab.id} value={tab.id}>
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+              {/* Text side */}
+              <div className="flex flex-col gap-6">
+                <div>
+                  <p className="text-xs font-mono text-brand-400 tracking-widest uppercase mb-3">
+                    {tab.overline}
+                  </p>
+                  <h3 className="font-display text-3xl font-bold text-text-primary tracking-tight mb-4 leading-tight">
+                    {tab.heading}
+                  </h3>
+                  <p className="text-text-secondary leading-relaxed">
+                    {tab.description}
+                  </p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="md"
+                  rightIcon={<ArrowRight className="size-4" />}
+                  onClick={tab.onCtaClick}
+                  className="self-start"
+                >
+                  {tab.ctaLabel}
+                </Button>
+              </div>
+
+              {/* Media side */}
+              {tab.media && (
+                <div className="relative rounded-2xl overflow-hidden border border-border bg-surface-sunken aspect-square">
+                  {tab.mediaType === 'video' ? (
+                    <video
+                      src={tab.media}
+                      poster={tab.mediaPoster}
+                      autoPlay
+                      loop
+                      muted
+                      playsInline
+                      className="w-full h-full object-cover"
+                    />
+                  ) : (
+                    <img
+                      src={tab.media}
+                      alt={tab.heading}
+                      className="w-full h-full object-cover"
+                    />
+                  )}
+                </div>
+              )}
+            </div>
+          </TabsContent>
+        ))}
+      </TabsRoot>
+
+      {/* Product tour CTA */}
+      {productTourLabel && (
+        <div className="text-center mt-10">
+          <Button
+            variant="outline"
+            size="sm"
+            rightIcon={<ArrowRight className="size-3.5" />}
+            onClick={onProductTourClick}
+          >
+            {productTourLabel}
+          </Button>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export { TabsRoot, TabsList, TabsTrigger, TabsContent, FeatureTabs };

package/packages/ui/src/components/organisms/LogoMarquee.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export interface LogoItem {
+  src: string;
+  alt: string;
+  name?: string;
+}
+
+export interface LogoMarqueeProps {
+  logos: LogoItem[];
+  title?: string;
+  rows?: 1 | 2;
+  speed?: 'slow' | 'normal' | 'fast';
+  direction?: 'left' | 'right';
+  pauseOnHover?: boolean;
+  className?: string;
+}
+
+const speedMap = {
+  slow:   'animate-[marquee_50s_linear_infinite]',
+  normal: 'animate-[marquee_30s_linear_infinite]',
+  fast:   'animate-[marquee_15s_linear_infinite]',
+};
+
+const LogoTile: React.FC<{ logo: LogoItem }> = ({ logo }) => (
+  <div className="flex items-center justify-center px-6 shrink-0">
+    <div className="flex flex-col items-center gap-2">
+      <div className="h-10 w-24 flex items-center justify-center">
+        <img
+          src={logo.src}
+          alt={logo.alt}
+          className="max-h-8 max-w-[80px] object-contain opacity-40 hover:opacity-70 transition-opacity duration-300 filter brightness-200"
+        />
+      </div>
+      {logo.name && (
+        <span className="text-[10px] font-mono text-text-disabled tracking-wider uppercase whitespace-nowrap">
+          {logo.name}
+        </span>
+      )}
+    </div>
+  </div>
+);
+
+const MarqueeRow: React.FC<{
+  logos: LogoItem[];
+  speed: keyof typeof speedMap;
+  reverse?: boolean;
+  pauseOnHover?: boolean;
+}> = ({ logos, speed, reverse, pauseOnHover }) => {
+  // Duplicate for seamless loop
+  const duplicated = [...logos, ...logos, ...logos, ...logos];
+
+  return (
+    <div className={cn('flex overflow-hidden', pauseOnHover && 'hover:[&>div]:pause')}>
+      <div
+        className={cn(
+          'flex shrink-0',
+          speedMap[speed],
+          reverse && '[animation-direction:reverse]'
+        )}
+        style={{ animationPlayState: 'running' }}
+      >
+        {duplicated.map((logo, i) => (
+          <LogoTile key={i} logo={logo} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const LogoMarquee: React.FC<LogoMarqueeProps> = ({
+  logos,
+  title,
+  rows = 1,
+  speed = 'normal',
+  direction = 'left',
+  pauseOnHover = true,
+  className,
+}) => {
+  const half = Math.ceil(logos.length / 2);
+  const row1 = logos.slice(0, half);
+  const row2 = logos.slice(half);
+
+  return (
+    <div className={cn('w-full overflow-hidden', className)}>
+      {title && (
+        <p className="text-xs font-mono text-text-disabled tracking-widest uppercase text-center mb-6">
+          {title}
+        </p>
+      )}
+
+      {/* Fade masks */}
+      <div className="relative">
+        <div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-bg-base to-transparent z-10 pointer-events-none" />
+        <div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-bg-base to-transparent z-10 pointer-events-none" />
+
+        <div className="flex flex-col gap-4">
+          <MarqueeRow
+            logos={rows === 1 ? logos : row1}
+            speed={speed}
+            reverse={direction === 'right'}
+            pauseOnHover={pauseOnHover}
+          />
+          {rows === 2 && (
+            <MarqueeRow
+              logos={row2}
+              speed={speed}
+              reverse={direction === 'left'}
+              pauseOnHover={pauseOnHover}
+            />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { LogoMarquee, LogoTile };

package/packages/ui/src/components/organisms/Navbar.tsx

@@ -0,0 +1,194 @@
+import * as React from 'react';
+
+export interface NavDropdownItem {
+  label: string;
+  description?: string;
+  href: string;
+  icon?: React.ReactNode;
+  badge?: string;
+}
+export interface NavDropdownGroup {
+  label?: string;
+  items: NavDropdownItem[];
+}
+export interface NavItem {
+  label: string;
+  href?: string;
+  groups?: NavDropdownGroup[];
+}
+export interface NavbarProps {
+  logo: React.ReactNode;
+  items: NavItem[];
+  announcementBar?: { message: React.ReactNode; href?: string };
+  ctaPrimary?: { label: string; href?: string; onClick?: () => void };
+  ctaSecondary?: { label: string; href?: string; onClick?: () => void };
+  loginHref?: string;
+}
+
+const NAV: React.CSSProperties & Record<string, string> = {
+  fontFamily: "var(--font-sans)",
+};
+
+const Navbar: React.FC<NavbarProps> = ({
+  logo, items, announcementBar, ctaPrimary, ctaSecondary, loginHref,
+}) => {
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [openDropdown, setOpenDropdown] = React.useState<string | null>(null);
+
+  return (
+    <div style={{ width: '100%', fontFamily: 'var(--font-sans)' }}>
+      {/* Announcement bar */}
+      {announcementBar && (
+        <div style={{
+          width: '100%', borderBottom: '1px solid var(--c-border-accent)',
+          background: 'var(--c-brand-subtle)', padding: '8px 24px',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}>
+          <a href={announcementBar.href} style={{
+            display: 'flex', alignItems: 'center', gap: 8,
+            fontSize: 12, color: 'var(--c-text-accent)',
+            fontFamily: 'var(--font-mono)', letterSpacing: '.02em', textDecoration: 'none',
+          }}>
+            {announcementBar.message}
+            <span style={{ fontSize: 10 }}>→</span>
+          </a>
+        </div>
+      )}
+
+      {/* Main nav — frosted glass */}
+      <nav style={{
+        width: '100%',
+        borderBottom: '1px solid var(--c-border)',
+        background: 'rgba(9,9,11,0.82)',
+        backdropFilter: 'blur(12px)',
+        WebkitBackdropFilter: 'blur(12px)',
+        position: 'sticky', top: 0, zIndex: 50,
+      }}>
+        <div style={{
+          maxWidth: 1200, margin: '0 auto', padding: '0 24px',
+          height: 60, display: 'flex', alignItems: 'center', gap: 32,
+        }}>
+          {/* Logo */}
+          <div style={{ flexShrink: 0 }}>{logo}</div>
+
+          {/* Desktop nav */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 2, flex: 1 }}>
+            {items.map(item => (
+              <div
+                key={item.label}
+                style={{ position: 'relative' }}
+                onMouseEnter={() => item.groups && setOpenDropdown(item.label)}
+                onMouseLeave={() => setOpenDropdown(null)}
+              >
+                {item.groups ? (
+                  <button style={{
+                    display: 'flex', alignItems: 'center', gap: 4,
+                    padding: '6px 12px', borderRadius: 8, border: 'none', cursor: 'pointer',
+                    fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
+                    color: openDropdown === item.label ? 'var(--c-text)' : 'var(--c-text-2)',
+                    background: openDropdown === item.label ? 'var(--c-bg-surface-hover)' : 'transparent',
+                    transition: 'all .15s',
+                  }}>
+                    {item.label}
+                    <span style={{ fontSize: 9, color: 'var(--c-text-muted)', transform: openDropdown === item.label ? 'rotate(180deg)' : 'none', transition: 'transform .2s', display: 'inline-block' }}>▼</span>
+                  </button>
+                ) : (
+                  <a href={item.href} style={{
+                    display: 'flex', alignItems: 'center', padding: '6px 12px',
+                    borderRadius: 8, fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
+                    color: 'var(--c-text-2)', textDecoration: 'none', transition: 'all .15s',
+                  }}>
+                    {item.label}
+                  </a>
+                )}
+
+                {/* Dropdown */}
+                {item.groups && openDropdown === item.label && (
+                  <div style={{ position: 'absolute', top: '100%', left: 0, paddingTop: 8, zIndex: 100, minWidth: 440 }}>
+                    <div style={{
+                      border: '1px solid var(--c-border)',
+                      background: 'var(--c-bg-elevated)',
+                      borderRadius: 14, padding: 16,
+                      boxShadow: 'var(--shadow-xl)',
+                    }}>
+                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
+                        {item.groups.map((group, gi) => (
+                          <div key={gi}>
+                            {group.label && (
+                              <p style={{
+                                fontSize: 10, fontFamily: 'var(--font-mono)', fontWeight: 700,
+                                color: 'var(--c-text-muted)', letterSpacing: '.08em',
+                                textTransform: 'uppercase', padding: '4px 8px 6px',
+                              }}>{group.label}</p>
+                            )}
+                            {group.items.map((navItem, ni) => (
+                              <a key={ni} href={navItem.href} style={{
+                                display: 'flex', alignItems: 'flex-start', gap: 12,
+                                padding: '10px 10px', borderRadius: 10, textDecoration: 'none',
+                                transition: 'background .12s',
+                              }}
+                                onMouseEnter={e => (e.currentTarget.style.background = 'var(--c-bg-surface-hover)')}
+                                onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+                              >
+                                {navItem.icon && (
+                                  <div style={{
+                                    width: 32, height: 32, borderRadius: 8, flexShrink: 0,
+                                    background: 'var(--c-bg-surface)', border: '1px solid var(--c-border)',
+                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                  }}>{navItem.icon}</div>
+                                )}
+                                <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                                  <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--c-text)' }}>{navItem.label}</span>
+                                  {navItem.description && (
+                                    <span style={{ fontSize: 12, color: 'var(--c-text-3)', lineHeight: 1.4 }}>{navItem.description}</span>
+                                  )}
+                                </div>
+                              </a>
+                            ))}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+
+          {/* Right CTAs */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginLeft: 'auto' }}>
+            {loginHref && (
+              <a href={loginHref} style={{
+                fontSize: 13, fontWeight: 500, color: 'var(--c-text-2)',
+                padding: '6px 12px', borderRadius: 8, textDecoration: 'none', transition: 'color .15s',
+              }}>Log in</a>
+            )}
+            {ctaSecondary && (
+              <button onClick={ctaSecondary.onClick} style={{
+                height: 34, padding: '0 14px', borderRadius: 8, border: '1px solid var(--c-border)',
+                background: 'transparent', color: 'var(--c-text)', fontSize: 13, fontWeight: 500,
+                fontFamily: 'var(--font-sans)', cursor: 'pointer', transition: 'all .15s',
+              }}>{ctaSecondary.label}</button>
+            )}
+            {ctaPrimary && (
+              <button onClick={ctaPrimary.onClick} style={{
+                height: 34, padding: '0 16px', borderRadius: 8, border: 'none',
+                background: 'var(--c-brand)', color: '#fff', fontSize: 13, fontWeight: 500,
+                fontFamily: 'var(--font-sans)', cursor: 'pointer', transition: 'all .15s',
+              }}>{ctaPrimary.label}</button>
+            )}
+          </div>
+
+          {/* Mobile toggle */}
+          <button
+            style={{ display: 'none', padding: 8, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--c-text-2)' }}
+            onClick={() => setMobileOpen(!mobileOpen)}
+            aria-label="Toggle menu"
+          >☰</button>
+        </div>
+      </nav>
+    </div>
+  );
+};
+
+export { Navbar };

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

@@ -0,0 +1,3 @@
+export * from './Navbar';
+export * from './LogoMarquee';
+export * from './FeatureTabs';

package/packages/ui/src/index.ts

@@ -0,0 +1,15 @@
+// ─── Atoms ────────────────────────────────────────────────────────────────────
+export * from './components/atoms/index';
+
+// ─── Molecules ────────────────────────────────────────────────────────────────
+export * from './components/molecules/index';
+
+// ─── Organisms ────────────────────────────────────────────────────────────────
+export * from './components/organisms/index';
+
+// ─── Charts ───────────────────────────────────────────────────────────────────
+export * from './components/charts/index';
+
+// ─── Utils ────────────────────────────────────────────────────────────────────
+export { cn } from './lib/utils';
+export type { WithClassName, AsChild, Size, Variant, Status } from './lib/utils';

package/packages/ui/src/lib/utils.ts

@@ -0,0 +1,12 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export type WithClassName = { className?: string };
+export type AsChild = { asChild?: boolean };
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type Variant = 'default' | 'secondary' | 'ghost' | 'outline' | 'destructive' | 'link';
+export type Status = 'success' | 'warning' | 'error' | 'info' | 'neutral';

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from '../../components/atoms/Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'Atoms/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const WithImage: Story = {
+  args: {
+    src: 'https://avatars.githubusercontent.com/u/28986134',
+    alt: 'Steven Tey',
+    fallback: 'ST',
+  },
+};
+
+export const WithFallback: Story = {
+  args: { fallback: 'JH' },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-end gap-4">
+      {(['xs','sm','md','lg','xl'] as const).map((size) => (
+        <Avatar key={size} size={size} fallback="RT" />
+      ))}
+    </div>
+  ),
+};
+
+export const AvatarGroup: Story = {
+  render: () => (
+    <div className="flex -space-x-2">
+      {['ST','KK','GR','JH'].map((f, i) => (
+        <div key={i} className="ring-2 ring-[--c-bg] rounded-full">
+          <Avatar fallback={f} size="sm" />
+        </div>
+      ))}
+      <div className="ring-2 ring-[--c-bg] rounded-full size-8 rounded-full bg-[--c-bg-surface] border border-[--c-border] text-[11px] font-medium text-[--c-text-3] flex items-center justify-center">
+        +8
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from '../../components/atoms/Badge';
+
+const meta: Meta<typeof Badge> = {
+  title: 'Atoms/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default','brand','emerald','blue','success','warning','error','info','outline','solid','solid-blue','porcelain'],
+    },
+    dot: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: { children: 'Badge' },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2 items-center">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="brand">Brand</Badge>
+      <Badge variant="emerald">Emerald</Badge>
+      <Badge variant="blue">Blue</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="error">Error</Badge>
+      <Badge variant="info">Info</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="solid">Solid</Badge>
+      <Badge variant="solid-blue">Solid Blue</Badge>
+      <Badge variant="porcelain">Porcelain</Badge>
+    </div>
+  ),
+};
+
+export const WithDot: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2 items-center">
+      <Badge variant="success" dot>Online</Badge>
+      <Badge variant="error" dot>Offline</Badge>
+      <Badge variant="warning" dot>Degraded</Badge>
+      <Badge variant="info" dot>Syncing</Badge>
+      <Badge variant="brand" dot>Active</Badge>
+    </div>
+  ),
+};
+
+export const UsageExamples: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2 items-center">
+      <Badge variant="brand">v2.1.0</Badge>
+      <Badge variant="solid">Popular</Badge>
+      <Badge variant="blue">New</Badge>
+      <Badge variant="default">Pro</Badge>
+      <Badge variant="outline">Enterprise</Badge>
+      <Badge variant="success" dot>Verified</Badge>
+      <Badge variant="warning" dot>Pending</Badge>
+    </div>
+  ),
+};