// 1. Import the stylesheet once at your app root
import '@dg-ui-react/react/styles.css';

// 2. Import components from any theme
import { Button, Card, Input } from '@dg-ui-react/react/obsidian';

// 3. Use them
export default function App() {
  return (
    <Card>
      <Input placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

// app root (e.g. main.tsx, _app.tsx, layout.tsx)
import '@dg-ui-react/react/styles.css';

import { Button, Input, Card } from '@dg-ui-react/react/obsidian';
import { PricingCard, Badge } from '@dg-ui-react/react/aurora';
import { MetricCard } from '@dg-ui-react/react/forge';
import { QuizCard, FlashcardDeck } from '@dg-ui-react/react/scholar';
import { Button } from '@dg-ui-react/react/retro';

// TypeScript types
import type { ButtonProps, InputProps } from '@dg-ui-react/react/obsidian';

import { Obsidian, Aurora, Scholar, Neon, Retro } from '@dg-ui-react/react';

<Obsidian.Button variant="primary">Dashboard</Obsidian.Button>
<Aurora.PricingCard tier={tier} />
<Scholar.QuizCard questions={questions} />
<Neon.Card>Cyberpunk content</Neon.Card>
<Retro.Button palette="sunset">Retro action</Retro.Button>

import {
  Motion,
  MotionProvider,
  useMotionPreset,
  useGesture,
  useDrag,
  useScrollTrigger,
  useTimeline,
} from '@dg-ui-react/react/motion';

// Wrong — components are not exported flat from the root
import { Button, Card } from '@dg-ui-react/react';

// Correct
import { Button } from '@dg-ui-react/react/obsidian';
// or
import { Obsidian } from '@dg-ui-react/react';
<Obsidian.Button />

import { Motion, MotionPresence, MotionProvider } from '@dg-ui-react/react/motion';

// Wrap any content with a preset animation
<Motion preset="fadeInUp" duration="normal">
  <Card>Animated content</Card>
</Motion>

// Animate enter/exit with presence detection
<MotionPresence>
  {isVisible && (
    <Motion preset="scaleIn">
      <Dialog>Modal content</Dialog>
    </Motion>
  )}
</MotionPresence>

// Stagger children
<StaggerContainer staggerDelay={0.05}>
  {items.map(item => (
    <StaggerItem key={item.id} preset="fadeInUp">
      <ListItem>{item.name}</ListItem>
    </StaggerItem>
  ))}
</StaggerContainer>

import { animate, timeline, useAnimate } from '@dg-ui-react/react/motion';

// Tween any element imperatively
animate('#hero', { opacity: 1, y: 0 }, { duration: 0.4, ease: 'easeOut' });

// Animate with a Promise
await animate(ref.current, { x: 200 }, { duration: 0.3 });

// Build a timeline with relative positions
const tl = timeline();
tl.to('#backdrop', { opacity: 1 }, 0)
  .to('#panel', { y: 0 }, '+=0.05')
  .to('#content', { opacity: 1 }, '<0.1')
  .play();

// Scoped imperative hook (auto-cleans up on unmount)
function MyComponent() {
  const [scope, animate] = useAnimate();
  return (
    <div ref={scope}>
      <button onClick={() => animate('li', { opacity: 1, x: 0 }, { stagger: 0.05 })}>
        Reveal items
      </button>
    </div>
  );
}

import {
  useMotionValue, useTransform, useSpring,
  useVelocity, useTime,
} from '@dg-ui-react/react/motion';

const x = useMotionValue(0);
const rotate = useTransform(x, [-200, 200], [-15, 15]);
const opacity = useTransform(x, [-200, 0, 200], [0.5, 1, 0.5]);
const smoothX = useSpring(x, { stiffness: 300, damping: 30 });
const xVelocity = useVelocity(x);
const time = useTime(); // elapsed ms as MotionValue

import { useScrollTrigger, useScrollMotion, useInViewMotion } from '@dg-ui-react/react/motion';

// Scrub a timeline to scroll position
useScrollTrigger({
  trigger: '#section',
  start: 'top 80%',
  end: 'bottom 20%',
  scrub: true,
  onEnter: () => tl.play(),
  onLeaveBack: () => tl.reverse(),
});

// Parallax
function ParallaxHero() {
  const { scrollProgress } = useScrollMotion();
  const y = useTransform(scrollProgress, [0, 1], [0, -200]);
  return <motion.div style={{ y }}>Parallax content</motion.div>;
}

// Viewport detection
function FadeInSection() {
  const { ref, inView } = useInViewMotion({ once: true, margin: '-15%' });
  return (
    <motion.div ref={ref} animate={inView ? { opacity: 1 } : { opacity: 0 }}>
      Appears on scroll
    </motion.div>
  );
}

import { useGesture, useDrag, useDragControls } from '@dg-ui-react/react/motion';

// Preset gestures (button, card, listItem)
const gesture = useGesture('button');
<motion.button {...gesture}>Click me</motion.button>

// Full drag with bounds, snap, and momentum
const drag = useDrag({
  drag: 'x',
  dragConstraints: { left: -200, right: 200 },
  dragElastic: 0.2,
  dragMomentum: true,
  onDragEnd: (_, info) => {
    if (info.offset.x > 100) handleSwipeRight();
  },
});

// Long-press, double-tap, pinch, swipe
const swipe = useGesture({
  onSwipe: ({ direction }) => navigate(direction),
  onLongPress: () => openContextMenu(),
  onPinch: ({ scale }) => setZoom(scale),
});

import { useLayoutAnimation, useSharedLayout, LayoutGroup } from '@dg-ui-react/react/motion';

// FLIP-based smooth layout transition
function ExpandableCard({ expanded }) {
  const layout = useLayoutAnimation();
  return (
    <motion.div {...layout} className={expanded ? 'h-64' : 'h-16'}>
      {expanded && <p>Details...</p>}
    </motion.div>
  );
}

// Shared element transitions across components
<LayoutGroup>
  <Tab layoutId="underline" /> {/* smoothly animates between tab positions */}
</LayoutGroup>

import { TextMotion, useTextSplit } from '@dg-ui-react/react/motion';

// 30+ built-in text effects
<TextMotion effect="typewriter" speed={0.04}>Hello World</TextMotion>
<TextMotion effect="scramble" duration={0.8}>Loading…</TextMotion>
<TextMotion effect="wave" stagger={0.03}>Wave text</TextMotion>

// Manual split + animate
const { chars, words } = useTextSplit('#heading');
animate(chars, { y: [20, 0], opacity: [0, 1] }, { stagger: 0.02 });

import { useSVGMorph, usePathDraw, useFollowPath } from '@dg-ui-react/react/motion';

// Shape morphing
const morph = useSVGMorph({ from: '#shape-a', to: '#shape-b' });
morph.play();

// Path drawing (DrawSVG equivalent, free)
const draw = usePathDraw({ pathLength: 0 });
animate(draw.ref.current, { pathLength: 1 }, { duration: 1.5, ease: 'easeInOut' });

// Follow a path with auto-rotate
useFollowPath({ path: '#track', target: '#car', rotate: true });

import { useGravity, useMagnetic, useParticleEmitter } from '@dg-ui-react/react/motion';

// Gravity with floor bounce
useGravity({ targets: '.ball', floor: 400, bounce: 0.7 });

// Magnetic attraction on hover
useMagnetic({ target: '#btn', strength: 0.4, falloff: 'quadratic' });

// Particle presets: confetti, snow, sparks, smoke, rain, fireflies
const emitter = useParticleEmitter({
  preset: 'confetti',
  count: 200,
  origin: { x: 0.5, y: 0 },
});
emitter.fire();

import { MotionProvider, DevTools } from '@dg-ui-react/react/motion';

// Three performance tiers
<MotionProvider config={{ budget: 'full' }}>        {/* Default */}
<MotionProvider config={{ budget: 'performance' }}> {/* Reduces complex physics */}
<MotionProvider config={{ budget: 'minimal' }}>     {/* CSS fallbacks only */}

// In-app FPS monitor + timeline scrubber
<DevTools /> {/* add anywhere in the tree */}

<MotionProvider config={{ theme: 'obsidian' }}>
  <App /> {/* Crisp, professional springs */}
</MotionProvider>

<MotionProvider config={{ theme: 'vapor' }}>
  <App /> {/* Dreamy, floaty motion with gentler springs */}
</MotionProvider>

<MotionProvider config={{ reducedMotion: true }}>
  {/* All animations reduced regardless of OS setting */}
</MotionProvider>

import { Button } from '@dg-ui-react/react/obsidian';
import type { ButtonProps, ButtonVariant, ButtonSize } from '@dg-ui-react/react/obsidian';

import type { PricingTier } from '@dg-ui-react/react/aurora';
import type { RetroComponentProps, RetroPalette } from '@dg-ui-react/react/retro';
import type { MotionPresetName, ThemeName, EaseName } from '@dg-ui-react/react/motion';

// src/main.tsx
import '@dg-ui-react/react/styles.css';

// app/layout.tsx
import '@dg-ui-react/react/styles.css';

// pages/_app.tsx
import '@dg-ui-react/react/styles.css';

// app/root.tsx
import dgStyles from '@dg-ui-react/react/styles.css?url';
export const links = () => [{ rel: 'stylesheet', href: dgStyles }];

import '@dg-ui-react/react/styles.css';

import { Button, Card, Input, Tabs } from '@dg-ui-react/react/obsidian';
import { PricingCard } from '@dg-ui-react/react/aurora';
import { Badge } from '@dg-ui-react/react/neon';
import { Motion, MotionProvider, MotionPresence } from '@dg-ui-react/react/motion';
import { useState } from 'react';

import type { TabItem } from '@dg-ui-react/react/obsidian';

const tabs: TabItem[] = [
  { value: 'overview', label: 'Overview' },
  { value: 'pricing', label: 'Pricing' },
];

export default function App() {
  const [activeTab, setActiveTab] = useState('overview');
  const [showDialog, setShowDialog] = useState(false);

  return (
    <MotionProvider config={{ theme: 'obsidian' }}>
      <Motion preset="fadeInUp">
        <Card>
          <Badge variant="success">Live</Badge>
          <Tabs items={tabs} value={activeTab} onValueChange={setActiveTab} />

          <MotionPresence>
            {activeTab === 'overview' && (
              <Motion preset="fadeIn">
                <Input placeholder="Search components..." />
                <Button variant="primary" onClick={() => setShowDialog(true)}>
                  Open Dialog
                </Button>
              </Motion>
            )}
          </MotionPresence>
        </Card>
      </Motion>
    </MotionProvider>
  );
}