Add storefront component migration: cards, badges, progress bars, animations, and React wrapper package

Major feature migration from dt-shopify-storefront into the design system:

- Card system: per-card color modes (normal/emphasis/warning/success/other),
  progress bars, full-bleed card body (card-body-flush), image bevel clip-paths,
  and visible structural borders at bevel corners
- Badge system: dt-card-badge with position-aware offsets for cards vs media frames
- Media frames: dt-bevel-media with inner surface fill, image clipping, and
  "MISSING MEDIA" placeholder for empty containers
- Interactive bevel buttons: dt-btn with hover/selected states and pulse animation
- Menu items: dt-menu-item with active states and level indentation
- Animations: scale-in, fade-in, slide-up, pulse, ping, spin keyframes
- Feature legend: CSS grid for product feature icons with state colors
- Scrollbar styling for DT brand
- New @dangerousthings/react package wrapping web CSS components
- New @dangerousthings/tailwind-preset package
- New @dangerousthings/hex-background package
- Desktop showcase rewritten in React with Tailwind CSS
- Mobile showcase updated with new screens (animations, filters, advanced cards)
- Tokens: added mode color tokens, RGB variants, and selected-state tokens

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/react/src/components/DTRadioGroup.tsx

@@ -0,0 +1,58 @@
+/**
+ * DTRadioGroup — Hexagonal radio buttons.
+ *
+ * CSS reference: forms-dt.css input[type="radio"], .dt-radio-option
+ */
+
+import { useId, type CSSProperties } from 'react';
+import { cx } from '../utils/cx';
+
+interface DTRadioOption {
+  value: string;
+  label: string;
+}
+
+interface DTRadioGroupProps {
+  options: DTRadioOption[];
+  value: string;
+  onChange: (value: string) => void;
+  name?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export { type DTRadioOption };
+
+export function DTRadioGroup({
+  options,
+  value,
+  onChange,
+  name,
+  className,
+  style,
+}: DTRadioGroupProps) {
+  const groupId = useId();
+  const groupName = name || `dt-radio-${groupId}`;
+
+  return (
+    <div
+      className={cx('dt-radio-group', className)}
+      style={{ display: 'flex', flexDirection: 'column', gap: '4px', ...style }}
+      role="radiogroup">
+      {options.map(option => (
+        <label
+          key={option.value}
+          className={cx('dt-radio-option', value === option.value && 'selected')}>
+          <input
+            type="radio"
+            name={groupName}
+            value={option.value}
+            checked={value === option.value}
+            onChange={() => onChange(option.value)}
+          />
+          <span>{option.label}</span>
+        </label>
+      ))}
+    </div>
+  );
+}