import { Box } from '@saul-atomrigs/design-system';

function App() {
  return (
    <Box bg='#f5f5f5' padding='2rem' align='center'>
      This is a simple box with custom background and padding
    </Box>
  );
}

import { Button } from '@saul-atomrigs/design-system';

function App() {
  return (
    <Button variant='primary' onClick={() => alert('Button clicked!')}>
      Click me
    </Button>
  );
}

import { Checkbox } from '@saul-atomrigs/design-system';

function App() {
  return (
    <Checkbox
      checked={isChecked}
      onChange={(e) => setIsChecked(e.target.checked)}
      id='terms'
      name='terms'
    />
  );
}

import { CTAButton } from '@saul-atomrigs/design-system';

function App() {
  return (
    <CTAButton onClick={() => console.log('CTA clicked')}>Continue</CTAButton>
  );
}

import { DualCTAButton } from '@saul-atomrigs/design-system';
import { Button } from '@saul-atomrigs/design-system';

function App() {
  return (
    <DualCTAButton>
      <Button variant='secondary' onClick={() => console.log('Cancel')}>
        Cancel
      </Button>
      <Button onClick={() => console.log('Confirm')}>Confirm</Button>
    </DualCTAButton>
  );
}

import { Error } from '@saul-atomrigs/design-system';

function App() {
  return <Error message='Failed to load data' />;
}

import { IntersectionObserver } from '@saul-atomrigs/design-system'

function App() {
  return (
    <IntersectionObserver
      onIntersect={loadMore}
      disabled={!hasMore || isLoading}
    >
      {isLoading && <div>...</div>}
    </IntersectionObserver>
  )
}

#### Props

| Prop | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| `children` | ReactNode | 필수 | 컴포넌트 내부에 렌더링될 React 노드 |
| `onIntersect` | () => void | 필수 | 관찰 대상이 뷰포트와 교차할 때 호출되는 콜백 함수 |
| `threshold` | number | 0.5 | 관찰 대상이 뷰포트와 얼마나 교차해야 콜백을 실행할지를 나타내는 값 (0.0 ~ 1.0) |
| `rootMargin` | string | '200px' | Root 경계의 여백을 정의하는 문자열 (CSS 마진 형식) |
| `observerHeight` | string | '10px' | 관찰 대상 요소의 높이 |
| `disabled` | boolean | false | 관찰자를 비활성화할지 여부 |

### `List`

```jsx
import { List } from '@saul-atomrigs/design-system';

function App() {
  return (
    <List direction='vertical'>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </List>
  );
}

import { Loading } from '@saul-atomrigs/design-system';

function App() {
  return (
    <div>
      <Loading message='Please wait...' />
    </div>
  );
}

import { Modal } from '@saul-atomrigs/design-system';

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title='Example Modal'
      >
        <p>This is the modal content</p>
        <button onClick={() => setIsOpen(false)}>Close</button>
      </Modal>
    </>
  );
}

import { Modal } from '@saul-atomrigs/design-system';

function App() {
  return (
    <Modal.Provider title='Example Modal'>
      <Modal.Trigger>
        <button>Open Modal</button>
      </Modal.Trigger>

      <Modal.Content>
        <p>This is the modal content</p>
        <Modal.CTAButton>Confirm</Modal.CTAButton>
      </Modal.Content>
    </Modal.Provider>
  );
}

import { Tabs } from '@saul-atomrigs/design-system';

function App() {
  const tabConfig = [
    { label: 'Tab 1', content: <div>Content for tab 1</div> },
    { label: 'Tab 2', content: <div>Content for tab 2</div> },
    { label: 'Tab 3', content: <div>Content for tab 3</div> },
  ];

  return (
    <Tabs tabs={tabConfig}>
      <Tabs.Trigger />
      <Tabs.Content />
    </Tabs>
  );
}

import { TextInput } from '@saul-atomrigs/design-system';

function App() {
  const [value, setValue] = useState('');

  return (
    <TextInput
      name='username'
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder='Enter your username'
      type='text'
    />
  );
}

import { Txt } from '@saul-atomrigs/design-system';

function App() {
  return (
    <Txt weight='bold' size='lg' color='primary'>
      This is a styled text
    </Txt>
  );
}