BottomSheet

import { Button } from '@mildang/design-system/Button';
import { BottomSheet } from '@mildang/design-system/BottomSheet';
import { css } from '@mildang/styled-system/css';
import { Grid } from '@mildang/styled-system/jsx';

export default function BottomSheetExample() {
  return (
    <BottomSheet>
      <BottomSheet.Trigger asChild>
        <Button variant="tertiary">상세 보기</Button>
      </BottomSheet.Trigger>
      <BottomSheet.Content>
        {/* Figma `bottom_sheet` header 는 높이 60 의 **한 줄**이다 — 그래서 recipe 가 row 다.
            `Description` 은 여기 넣지 않고 Body 로 내린다 (SidePanel 과 같은 규칙). */}
        <BottomSheet.Header>
          <BottomSheet.Title>바텀시트</BottomSheet.Title>
        </BottomSheet.Header>

        <BottomSheet.Body>
          <Grid gap="8">
            <BottomSheet.Description>아래에서 올라오는 시트입니다.</BottomSheet.Description>
            <p className={css({ textStyle: 'body-lg', color: 'neutral.text.low' })}>
              이 문장을 드래그해 보세요 — 텍스트가 선택되는 대신 시트가 따라 내려옵니다. 손을 떼면 닫힙니다.
            </p>
          </Grid>
        </BottomSheet.Body>

        <BottomSheet.Footer>
          <BottomSheet.Close asChild>
            <Button size="md" variant="tertiary">
              취소
            </Button>
          </BottomSheet.Close>
          <Button size="md" variant="primary">
            확인
          </Button>
        </BottomSheet.Footer>
      </BottomSheet.Content>
    </BottomSheet>
  );
}

import { BottomSheet } from '@mildang/design-system/BottomSheet';
import { Button } from '@mildang/design-system/Button';
import { Field } from '@mildang/design-system/Form';
import { FormLabel } from '@mildang/design-system/FormLabel';
import { Input } from '@mildang/design-system/Input';
import { Grid } from '@mildang/styled-system/jsx';

export default function BottomSheetWithFormExample() {
  return (
    <BottomSheet>
      <BottomSheet.Trigger asChild>
        <Button variant="tertiary">프로필 수정</Button>
      </BottomSheet.Trigger>
      <BottomSheet.Content>
        <BottomSheet.Header>
          <BottomSheet.Title>프로필 수정</BottomSheet.Title>
        </BottomSheet.Header>
        <BottomSheet.Body>
          <Grid gap="20">
            <Field required>
              <FormLabel htmlFor="bs-name">이름</FormLabel>
              <Input fullWidth id="bs-name" defaultValue="John Doe" />
            </Field>
            <Field>
              <FormLabel htmlFor="bs-username">닉네임</FormLabel>
              <Input fullWidth id="bs-username" defaultValue="johndoe" />
            </Field>
          </Grid>
        </BottomSheet.Body>
        <BottomSheet.Footer>
          <BottomSheet.Close asChild>
            <Button size="md" variant="tertiary">
              취소
            </Button>
          </BottomSheet.Close>
          <Button size="md" variant="primary">
            저장
          </Button>
        </BottomSheet.Footer>
      </BottomSheet.Content>
    </BottomSheet>
  );
}

import { BottomSheet } from '@mildang/design-system/BottomSheet';
import { Button } from '@mildang/design-system/Button';
import { Text } from '@mildang/design-system/Text';

export default function BottomSheetScrollableExample() {
  return (
    <BottomSheet>
      <BottomSheet.Trigger asChild>
        <Button variant="tertiary">Open Scrollable Bottom Sheet</Button>
      </BottomSheet.Trigger>
      <BottomSheet.Content>
        <BottomSheet.Header>
          <BottomSheet.Title>Header — 스크롤해도 상단 고정</BottomSheet.Title>
        </BottomSheet.Header>
        <BottomSheet.Body>
          <BottomSheet.Description mb="12">
            이 설명은 Body 안입니다 — 아래 본문과 함께 스크롤됩니다. 제자리에 남는 건 Header 와 Footer
            뿐입니다.
          </BottomSheet.Description>
          {Array.from({ length: 30 }, (_, i) => (
            <Text key={i} variant="body-lg" mb="12">
              {i + 1} / 30 — Body 만 독립적으로 스크롤됩니다. 이 문단이 위로 흘러가는 동안 Header 와 Footer 는
              그대로 붙어 있어야 합니다.
            </Text>
          ))}
        </BottomSheet.Body>
        <BottomSheet.Footer>
          <Text variant="body-lg" color="neutral.text.low" mr="auto" alignSelf="center">
            Footer — 스크롤해도 하단 고정
          </Text>
          <BottomSheet.Close asChild>
            <Button size="md" variant="tertiary">
              취소
            </Button>
          </BottomSheet.Close>
          <Button size="md" variant="primary">
            확인
          </Button>
        </BottomSheet.Footer>
      </BottomSheet.Content>
    </BottomSheet>
  );
}

'use client';

import { useState } from 'react';
import { BottomSheet } from '@mildang/design-system/BottomSheet';
import { Button } from '@mildang/design-system/Button';
import { css } from '@mildang/styled-system/css';
import { Grid } from '@mildang/styled-system/jsx';

export default function BottomSheetWithSnapPointsExample() {
  const snapPoints = ['240px', 0.6, 1];
  const [snap, setSnap] = useState<number | string | null>(snapPoints[0]);

  return (
    <BottomSheet snapPoints={snapPoints} activeSnapPoint={snap} setActiveSnapPoint={setSnap}>
      <BottomSheet.Trigger asChild>
        <Button variant="tertiary">Open Snap Sheet</Button>
      </BottomSheet.Trigger>
      <BottomSheet.Content>
        <BottomSheet.Header>
          <BottomSheet.Title>실시간 학습 현황</BottomSheet.Title>
        </BottomSheet.Header>
        <BottomSheet.Body>
          <Grid gap="12">
            {Array.from({ length: 20 }, (_, i) => (
              <div
                key={i}
                className={css({
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  p: '16',
                  borderWidth: '1px',
                  borderStyle: 'solid',
                  borderColor: 'neutral.border.low',
                  borderRadius: '12',
                  bg: 'neutral.surface.high',
                })}
              >
                <span className={css({ textStyle: 'body-xl-semibold', color: 'neutral.text.base' })}>
                  학습자 {i + 1}
                </span>
                <span className={css({ textStyle: 'caption-lg-medium', color: 'neutral.text.low' })}>
                  진도 {Math.min(100, (i + 1) * 5)}%
                </span>
              </div>
            ))}
          </Grid>
        </BottomSheet.Body>
      </BottomSheet.Content>
    </BottomSheet>
  );
}

import { BottomSheet } from '@mildang/design-system/BottomSheet';
import { Button } from '@mildang/design-system/Button';
import { css } from '@mildang/styled-system/css';

export default function BottomSheetFreeformContentExample() {
  return (
    <BottomSheet>
      <BottomSheet.Trigger asChild>
        <Button variant="tertiary">Open Freeform Sheet</Button>
      </BottomSheet.Trigger>
      <BottomSheet.Content>
        <div className={css({ display: 'grid', gap: '12', p: '24' })}>
          <BottomSheet.Title>덩어리로 넣기</BottomSheet.Title>
          <p className={css({ textStyle: 'body-lg', color: 'neutral.text.low' })}>
            슬롯 없이 자식을 그대로 넣어도 됩니다. 시트가 관여하는 건 위치·상단 radius·dim·드래그·safe area
            까지입니다.
          </p>
        </div>
      </BottomSheet.Content>
    </BottomSheet>
  );
}