atomsystem 0.4.1 → 0.5.0

package/components/blocks/PricingPlanBlock.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Card, Button, Badge } from '@/components/ui';
+import {
+  Check,
+  X,
+  Sparkles,
+} from 'lucide-react';
+
+interface PricingTier {
+  id: string;
+  name: string;
+  badge?: string;
+  isPopular?: boolean;
+  description: string;
+  monthlyPrice: number;
+  annualPrice: number;
+  features: { text: string; included: boolean }[];
+  ctaText: string;
+}
+
+const TIERS: PricingTier[] = [
+  {
+    id: 'starter',
+    name: 'Starter',
+    description: '개인 개발자 및 오픈소스 프로젝트를 위한 플랜.',
+    monthlyPrice: 0,
+    annualPrice: 0,
+    ctaText: '무료로 시작하기',
+    features: [
+      { text: '최대 3개 프로젝트 연동', included: true },
+      { text: 'W3C DTCG 표준 토큰 규격', included: true },
+      { text: 'Tailwind v4 CSS 즉시 컴파일', included: true },
+      { text: '실시간 커스텀 테마 에디터', included: false },
+      { text: '우선 기술 지원 SLA', included: false },
+    ],
+  },
+  {
+    id: 'pro',
+    name: 'Pro',
+    isPopular: true,
+    badge: '추천 플랜',
+    description: '디자인 시스템 확장을 준비하는 프로덕트 팀.',
+    monthlyPrice: 29000,
+    annualPrice: 22000,
+    ctaText: '14일 무료 체험 시작',
+    features: [
+      { text: '무제한 프로젝트 & 토큰 세트', included: true },
+      { text: 'W3C DTCG 표준 토큰 규격', included: true },
+      { text: 'Tailwind v4 CSS 즉시 컴파일', included: true },
+      { text: '실시간 커스텀 테마 에디터', included: true },
+      { text: 'Git 저장소 실시간 동기화', included: true },
+    ],
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    description: '엄격한 보안과 거버넌스가 필요한 엔터프라이즈.',
+    monthlyPrice: 99000,
+    annualPrice: 79000,
+    ctaText: '영업팀 문의',
+    features: [
+      { text: '무제한 프로젝트 & 전용 빌드 코어', included: true },
+      { text: 'W3C DTCG 표준 토큰 규격', included: true },
+      { text: 'Tailwind v4 CSS 즉시 컴파일', included: true },
+      { text: '실시간 커스텀 테마 에디터', included: true },
+      { text: 'SSO, 감사 로그 & 99.99% SLA', included: true },
+    ],
+  },
+];
+
+export function PricingPlanBlock() {
+  const [billingCycle, setBillingCycle] = useState<'monthly' | 'annual'>('annual');
+
+  return (
+    <Card className="p-5 sm:p-6 transition-colors">
+      {/* 1. Header & Billing Toggle (Using Button & Badge Component) */}
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
+        <div>
+          <h3 className="text-base font-semibold text-(--text-primary)">
+            요금제 플랜 선택
+          </h3>
+          <p className="text-xs text-(--text-secondary) mt-0.5">
+            팀의 규모와 워크플로우에 맞는 플랜을 선택하세요.
+          </p>
+        </div>
+
+        {/* Billing Switch composed with Button components */}
+        <div className="flex items-center gap-1 p-0.5 rounded-(--radius-sm) bg-(--bg-secondary) border border-(--border-subtle) text-xs self-start sm:self-auto">
+          <Button
+            size="sm"
+            variant={billingCycle === 'monthly' ? 'primary' : 'ghost'}
+            onClick={() => setBillingCycle('monthly')}
+            className="text-xs py-1 px-3 h-auto"
+          >
+            월간 결제
+          </Button>
+          <Button
+            size="sm"
+            variant={billingCycle === 'annual' ? 'primary' : 'ghost'}
+            onClick={() => setBillingCycle('annual')}
+            className="text-xs py-1 px-3 h-auto flex items-center gap-1"
+          >
+            <span>연간 결제</span>
+            <Badge variant="success" className="text-xs px-1.5 py-0 font-bold">
+              -20%
+            </Badge>
+          </Button>
+        </div>
+      </div>
+
+      {/* 2. Three Column Pricing Cards composed with Card & Button */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {TIERS.map((tier) => {
+          const price = billingCycle === 'annual' ? tier.annualPrice : tier.monthlyPrice;
+          return (
+            <Card
+              key={tier.id}
+              className={`p-5 flex flex-col justify-between transition-colors bg-(--bg-primary) ${
+                tier.isPopular
+                  ? 'border-(--text-primary)'
+                  : 'border-(--border-subtle)'
+              }`}
+            >
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <h4 className="font-semibold text-sm text-(--text-primary)">{tier.name}</h4>
+                  {tier.badge && (
+                    <Badge variant="primary" className="text-xs">
+                      {tier.badge}
+                    </Badge>
+                  )}
+                </div>
+                <p className="text-xs text-(--text-secondary) mb-4 leading-relaxed">
+                  {tier.description}
+                </p>
+
+                <div className="flex items-baseline gap-1 mb-5">
+                  <span className="text-2xl font-bold tracking-tight text-(--text-primary)">
+                    ₩{price.toLocaleString()}
+                  </span>
+                  <span className="text-xs text-(--text-secondary)">/월</span>
+                </div>
+
+                <div className="space-y-2.5 pt-4 border-t border-(--border-subtle) text-xs">
+                  {tier.features.map((feat, idx) => (
+                    <div key={idx} className="flex items-center gap-2">
+                      {feat.included ? (
+                        <Check className="w-3.5 h-3.5 text-emerald-600 dark:text-emerald-400 shrink-0" />
+                      ) : (
+                        <X className="w-3.5 h-3.5 text-(--text-muted) shrink-0 opacity-40" />
+                      )}
+                      <span className={feat.included ? 'text-(--text-primary)' : 'text-(--text-muted) line-through opacity-60'}>
+                        {feat.text}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <Button
+                variant={tier.isPopular ? 'primary' : 'secondary'}
+                size="md"
+                className="w-full mt-6 text-xs"
+              >
+                {tier.ctaText}
+              </Button>
+            </Card>
+          );
+        })}
+      </div>
+    </Card>
+  );
+}

package/components/blocks/RealtimeChartBlock.tsx

@@ -0,0 +1,242 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Card, Button, Badge } from '@/components/ui';
+import {
+  Play,
+  Pause,
+  TrendingUp,
+  TrendingDown,
+  Activity,
+} from 'lucide-react';
+
+interface ChartPoint {
+  time: string;
+  price: number;
+  high: number;
+  low: number;
+  volume: number;
+}
+
+const INITIAL_POINTS: ChartPoint[] = [
+  { time: '09:00', price: 82400, high: 82600, low: 82100, volume: 1420 },
+  { time: '09:05', price: 82900, high: 83100, low: 82500, volume: 2100 },
+  { time: '09:10', price: 82700, high: 83000, low: 82600, volume: 1850 },
+  { time: '09:15', price: 83400, high: 83600, low: 82700, volume: 3200 },
+  { time: '09:20', price: 83900, high: 84200, low: 83300, volume: 4100 },
+  { time: '09:25', price: 83600, high: 84000, low: 83400, volume: 2600 },
+  { time: '09:30', price: 84200, high: 84500, low: 83600, volume: 4800 },
+  { time: '09:35', price: 84800, high: 85100, low: 84100, volume: 5300 },
+  { time: '09:40', price: 84600, high: 84900, low: 84400, volume: 3100 },
+  { time: '09:45', price: 85300, high: 85600, low: 84600, volume: 6200 },
+];
+
+export function RealtimeChartBlock() {
+  const [data, setData] = useState<ChartPoint[]>(INITIAL_POINTS);
+  const [isPlaying, setIsPlaying] = useState(true);
+  const [chartType, setChartType] = useState<'line' | 'candle'>('line');
+  const [timeframe, setTimeframe] = useState<'1m' | '5m' | '1h' | '1d'>('1m');
+  const [hoveredPoint, setHoveredPoint] = useState<ChartPoint | null>(null);
+
+  useEffect(() => {
+    if (!isPlaying) return;
+    const interval = setInterval(() => {
+      setData((prev) => {
+        const last = prev[prev.length - 1];
+        const delta = (Math.random() - 0.48) * 350;
+        const newPrice = Math.round(last.price + delta);
+        const newHigh = Math.max(newPrice, last.high);
+        const newLow = Math.min(newPrice, last.low);
+        const newVolume = Math.round(2000 + Math.random() * 4000);
+
+        const now = new Date();
+        const timeStr = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
+
+        return [
+          ...prev.slice(1),
+          { time: timeStr, price: newPrice, high: newHigh, low: newLow, volume: newVolume },
+        ];
+      });
+    }, 1200);
+
+    return () => clearInterval(interval);
+  }, [isPlaying]);
+
+  const currentPoint = hoveredPoint || data[data.length - 1];
+  const firstPoint = data[0];
+  const priceDiff = currentPoint.price - firstPoint.price;
+  const pctDiff = ((priceDiff / firstPoint.price) * 100).toFixed(2);
+  const isPositive = priceDiff >= 0;
+
+  const prices = data.map((d) => d.price);
+  const minPrice = Math.min(...prices) * 0.998;
+  const maxPrice = Math.max(...prices) * 1.002;
+  const range = maxPrice - minPrice || 1;
+
+  const svgWidth = 600;
+  const svgHeight = 220;
+  const paddingX = 20;
+  const paddingY = 20;
+
+  const getX = (idx: number) => paddingX + (idx / (data.length - 1)) * (svgWidth - paddingX * 2);
+  const getY = (price: number) => svgHeight - paddingY - ((price - minPrice) / range) * (svgHeight - paddingY * 2);
+
+  const pointsPath = data.map((d, i) => `${i === 0 ? 'M' : 'L'} ${getX(i)} ${getY(d.price)}`).join(' ');
+
+  return (
+    <Card className="overflow-hidden bg-(--bg-primary) border border-(--border-subtle) transition-colors">
+      {/* 1. Header: Minimalist Price & Controls */}
+      <div className="p-4 sm:p-5 border-b border-(--border-subtle) flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+        <div>
+          <div className="flex items-center gap-2 mb-0.5">
+            <span className="font-mono text-xs font-semibold text-(--text-secondary)">KRW-ATOM</span>
+            <span className={`text-xs font-mono font-medium ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
+              {isPositive ? '+' : ''}{pctDiff}%
+            </span>
+          </div>
+          <div className="text-xl font-bold tracking-tight text-(--text-primary)">
+            ₩{currentPoint.price.toLocaleString()}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Timeframe Button Group */}
+          <div className="flex rounded-(--radius-sm) border border-(--border-subtle) p-0.5 text-xs bg-(--bg-secondary)">
+            {(['1m', '5m', '1h', '1d'] as const).map((tf) => (
+              <Button
+                key={tf}
+                variant={timeframe === tf ? 'primary' : 'ghost'}
+                size="sm"
+                onClick={() => setTimeframe(tf)}
+                className="px-2 py-0.5 text-xs h-auto"
+              >
+                {tf}
+              </Button>
+            ))}
+          </div>
+
+          {/* Type Button Group */}
+          <div className="flex rounded-(--radius-sm) border border-(--border-subtle) p-0.5 text-xs bg-(--bg-secondary)">
+            <Button
+              variant={chartType === 'line' ? 'primary' : 'ghost'}
+              size="sm"
+              onClick={() => setChartType('line')}
+              className="px-2 py-0.5 text-xs h-auto"
+            >
+              Line
+            </Button>
+            <Button
+              variant={chartType === 'candle' ? 'primary' : 'ghost'}
+              size="sm"
+              onClick={() => setChartType('candle')}
+              className="px-2 py-0.5 text-xs h-auto"
+            >
+              Candle
+            </Button>
+          </div>
+
+          {/* Play/Pause Button */}
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setIsPlaying(!isPlaying)}
+            aria-label={isPlaying ? 'Pause stream' : 'Resume stream'}
+            title={isPlaying ? 'Pause stream' : 'Resume stream'}
+            className="px-2.5 py-1 text-xs h-auto flex items-center gap-1.5"
+          >
+            {isPlaying ? <Pause className="w-3.5 h-3.5" /> : <Play className="w-3.5 h-3.5" />}
+            <span className="text-xs font-medium">{isPlaying ? '일시정지' : '재생'}</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* 2. Pure SVG Canvas (Zero-dependency, Token-based) */}
+      <div className="p-4 sm:p-5">
+        <div className="relative w-full h-56">
+          <svg
+            className="w-full h-full overflow-visible"
+            viewBox={`0 0 ${svgWidth} ${svgHeight}`}
+            preserveAspectRatio="none"
+          >
+            <defs>
+              <linearGradient id="chartGradientToken" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="var(--accent-primary)" stopOpacity="0.22" />
+                <stop offset="100%" stopColor="var(--accent-primary)" stopOpacity="0.0" />
+              </linearGradient>
+            </defs>
+
+            {/* Subtle Grid Lines */}
+            <line x1={paddingX} y1={paddingY} x2={svgWidth - paddingX} y2={paddingY} stroke="var(--border-subtle)" strokeDasharray="4 4" />
+            <line x1={paddingX} y1={svgHeight / 2} x2={svgWidth - paddingX} y2={svgHeight / 2} stroke="var(--border-subtle)" strokeDasharray="4 4" />
+            <line x1={paddingX} y1={svgHeight - paddingY} x2={svgWidth - paddingX} y2={svgHeight - paddingY} stroke="var(--border-subtle)" strokeDasharray="4 4" />
+
+            {/* Area */}
+            <path
+              d={`${pointsPath} L ${getX(data.length - 1)} ${svgHeight - paddingY} L ${getX(0)} ${svgHeight - paddingY} Z`}
+              fill="url(#chartGradientToken)"
+            />
+
+            {/* Path */}
+            <path
+              d={pointsPath}
+              fill="none"
+              stroke="var(--accent-primary)"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+
+            {/* Points */}
+            {data.map((d, i) => (
+              <circle
+                key={i}
+                cx={getX(i)}
+                cy={getY(d.price)}
+                r={hoveredPoint === d ? 5 : 3}
+                fill="var(--bg-primary)"
+                stroke="var(--accent-primary)"
+                strokeWidth="2"
+                className="cursor-pointer transition-all"
+                onMouseEnter={() => setHoveredPoint(d)}
+              />
+            ))}
+          </svg>
+
+          {hoveredPoint && (
+            <div
+              className="absolute top-2 pointer-events-none transform -translate-x-1/2 bg-(--bg-primary) px-2.5 py-1 rounded-(--radius-sm) border border-(--border-strong) shadow-md text-xs"
+              style={{
+                left: `${(data.indexOf(hoveredPoint) / (data.length - 1)) * 100}%`,
+              }}
+            >
+              <div className="font-semibold text-(--text-primary)">₩{hoveredPoint.price.toLocaleString()}</div>
+              <div className="text-[11px] text-(--text-secondary)">{hoveredPoint.time} · Vol: {hoveredPoint.volume}</div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 3. Metrics Summary Strip: Clean Monochrome */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 border-t border-(--border-subtle) divide-x divide-(--border-subtle) text-xs">
+        <div className="p-3 px-4">
+          <div className="text-[11px] text-(--text-muted)">24h High</div>
+          <div className="font-mono text-xs text-(--text-primary) mt-0.5">₩{maxPrice.toFixed(0)}</div>
+        </div>
+        <div className="p-3 px-4">
+          <div className="text-[11px] text-(--text-muted)">24h Low</div>
+          <div className="font-mono text-xs text-(--text-primary) mt-0.5">₩{minPrice.toFixed(0)}</div>
+        </div>
+        <div className="p-3 px-4">
+          <div className="text-[11px] text-(--text-muted)">24h Volume</div>
+          <div className="font-mono text-xs text-(--text-primary) mt-0.5">38,420 ATOM</div>
+        </div>
+        <div className="p-3 px-4">
+          <div className="text-[11px] text-(--text-muted)">Change</div>
+          <div className={`font-mono text-xs mt-0.5 ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
+            {isPositive ? '+' : ''}{priceDiff.toLocaleString()} 원
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

package/components/blocks/SliderShowcaseBlock.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Card, Button, Slider } from '@/components/ui';
+import {
+  Users,
+  HardDrive,
+  Cpu,
+  FileSpreadsheet,
+} from 'lucide-react';
+
+export function SliderShowcaseBlock() {
+  const [teamMembers, setTeamMembers] = useState<number>(15);
+  const [storageGb, setStorageGb] = useState<number>(200);
+  const [computeUnits, setComputeUnits] = useState<number>(4);
+
+  const memberCost = teamMembers * 12000;
+  const storageCost = storageGb * 150;
+  const computeCost = computeUnits * 45000;
+  const totalCost = memberCost + storageCost + computeCost;
+
+  return (
+    <Card className="overflow-hidden transition-colors">
+      <div className="p-5 sm:p-6 grid grid-cols-1 lg:grid-cols-12 gap-6">
+        {/* Sliders Input Panel composed with UI Slider */}
+        <div className="lg:col-span-7 space-y-5">
+          {/* Slider 1: Team Members */}
+          <div className="space-y-2">
+            <div className="flex justify-between items-center text-xs">
+              <span className="font-medium text-(--text-primary) flex items-center gap-1.5">
+                <Users className="w-3.5 h-3.5 text-(--accent-primary)" />
+                <span>팀 멤버 수</span>
+              </span>
+              <span className="font-mono font-semibold text-xs px-2 py-0.5 rounded-(--radius-sm) border border-(--border-subtle) bg-(--bg-secondary)">
+                {teamMembers} 명
+              </span>
+            </div>
+            <Slider
+              min={1}
+              max={100}
+              value={teamMembers}
+              onChange={(val) => setTeamMembers(val)}
+            />
+            <div className="flex justify-between text-[11px] text-(--text-secondary)">
+              <span>1명</span>
+              <span>100명</span>
+            </div>
+          </div>
+
+          {/* Slider 2: Storage */}
+          <div className="space-y-2">
+            <div className="flex justify-between items-center text-xs">
+              <span className="font-medium text-(--text-primary) flex items-center gap-1.5">
+                <HardDrive className="w-3.5 h-3.5 text-(--accent-primary)" />
+                <span>클라우드 토큰 저장소</span>
+              </span>
+              <span className="font-mono font-semibold text-xs px-2 py-0.5 rounded-(--radius-sm) border border-(--border-subtle) bg-(--bg-secondary)">
+                {storageGb} GB
+              </span>
+            </div>
+            <Slider
+              min={10}
+              max={1000}
+              step={10}
+              value={storageGb}
+              onChange={(val) => setStorageGb(val)}
+            />
+            <div className="flex justify-between text-[11px] text-(--text-secondary)">
+              <span>10 GB</span>
+              <span>1 TB</span>
+            </div>
+          </div>
+
+          {/* Slider 3: Compute */}
+          <div className="space-y-2">
+            <div className="flex justify-between items-center text-xs">
+              <span className="font-medium text-(--text-primary) flex items-center gap-1.5">
+                <Cpu className="w-3.5 h-3.5 text-(--accent-primary)" />
+                <span>빌드 & 컴파일 엔진 코어</span>
+              </span>
+              <span className="font-mono font-semibold text-xs px-2 py-0.5 rounded-(--radius-sm) border border-(--border-subtle) bg-(--bg-secondary)">
+                {computeUnits} Core
+              </span>
+            </div>
+            <Slider
+              min={1}
+              max={16}
+              value={computeUnits}
+              onChange={(val) => setComputeUnits(val)}
+            />
+            <div className="flex justify-between text-[11px] text-(--text-secondary)">
+              <span>1 Core</span>
+              <span>16 Core</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Calculation Summary Card composed with Card & Button */}
+        <Card className="lg:col-span-5 p-5 bg-(--bg-secondary)/30 flex flex-col justify-between space-y-4">
+          <div className="space-y-2.5 text-xs">
+            <div className="font-semibold text-(--text-primary)">비용 산출 내역</div>
+            <div className="flex justify-between text-(--text-secondary)">
+              <span>팀 좌석 ({teamMembers}명)</span>
+              <span className="font-medium text-(--text-primary)">₩{memberCost.toLocaleString()}</span>
+            </div>
+            <div className="flex justify-between text-(--text-secondary)">
+              <span>스토리지 ({storageGb}GB)</span>
+              <span className="font-medium text-(--text-primary)">₩{storageCost.toLocaleString()}</span>
+            </div>
+            <div className="flex justify-between text-(--text-secondary)">
+              <span>빌드 코어 ({computeUnits}코어)</span>
+              <span className="font-medium text-(--text-primary)">₩{computeCost.toLocaleString()}</span>
+            </div>
+          </div>
+
+          <div className="pt-3 border-t border-(--border-subtle)">
+            <div className="text-[11px] text-(--text-secondary)">월간 예상 견적</div>
+            <div className="flex items-baseline gap-1 mt-0.5">
+              <span className="text-2xl font-bold tracking-tight text-(--text-primary)">
+                ₩{totalCost.toLocaleString()}
+              </span>
+              <span className="text-xs text-(--text-secondary)"> /월</span>
+            </div>
+            <Button
+              variant="primary"
+              size="md"
+              className="w-full mt-3 text-xs"
+            >
+              견적서 다운로드
+            </Button>
+          </div>
+        </Card>
+      </div>
+    </Card>
+  );
+}

package/components/blocks/index.ts

@@ -0,0 +1,8 @@
+export * from './RealtimeChartBlock';
+export * from './InteractiveChatBlock';
+export * from './CardListBlock';
+export * from './SliderShowcaseBlock';
+export * from './PricingPlanBlock';
+export * from './MetricStatsBlock';
+export * from './FileExplorerBlock';
+export * from './BlockViewerCard';

package/components/ui/Container.tsx

@@ -0,0 +1,45 @@
+import React, { ElementType } from 'react';
+
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+  gutters?: boolean;
+  center?: boolean;
+  as?: ElementType;
+  children?: React.ReactNode;
+}
+
+const SIZE_MAP: Record<NonNullable<ContainerProps['size']>, string> = {
+  sm: 'max-w-(--atom-container-sm,640px)',
+  md: 'max-w-(--atom-container-md,768px)',
+  lg: 'max-w-(--atom-container-lg,1024px)',
+  xl: 'max-w-(--atom-container-xl,1280px)',
+  '2xl': 'max-w-(--atom-container-2xl,1536px)',
+  full: 'max-w-full',
+};
+
+export const Container: React.FC<ContainerProps> = ({
+  size = 'xl',
+  gutters = true,
+  center = true,
+  as: Component = 'div',
+  className = '',
+  children,
+  ...props
+}) => {
+  const sizeClass = SIZE_MAP[size] || SIZE_MAP.xl;
+  const gutterClass = gutters
+    ? 'px-[var(--atom-layout-gutter,16px)] sm:px-[var(--atom-layout-gutter-lg,24px)]'
+    : '';
+  const centerClass = center ? 'mx-auto' : '';
+
+  return (
+    <Component
+      className={`w-full ${sizeClass} ${gutterClass} ${centerClass} ${className}`.trim()}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+};
+
+Container.displayName = 'Container';