diff --git a/apps/website/content/docs/components/avatar.mdx b/apps/website/content/docs/components/avatar.mdx index b7bb47fab..5b5a817d2 100644 --- a/apps/website/content/docs/components/avatar.mdx +++ b/apps/website/content/docs/components/avatar.mdx @@ -73,6 +73,14 @@ FallbackPrimitive에 children을 전달하여 커스텀 fallback 콘텐츠를 ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/breadcrumb.mdx b/apps/website/content/docs/components/breadcrumb.mdx index c77089ebd..a762bb181 100644 --- a/apps/website/content/docs/components/breadcrumb.mdx +++ b/apps/website/content/docs/components/breadcrumb.mdx @@ -73,6 +73,14 @@ Breadcrumb의 크기를 설정합니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/callout.mdx b/apps/website/content/docs/components/callout.mdx index fb3268509..46183c263 100644 --- a/apps/website/content/docs/components/callout.mdx +++ b/apps/website/content/docs/components/callout.mdx @@ -47,6 +47,14 @@ Callout의 역할에 따른 색상을 설정합니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/card.mdx b/apps/website/content/docs/components/card.mdx index b03c58edf..5f1f33cd0 100644 --- a/apps/website/content/docs/components/card.mdx +++ b/apps/website/content/docs/components/card.mdx @@ -30,6 +30,14 @@ description: 'Card는 이미지와 텍스트, 일부 기능 버튼을 포함한 ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/checkbox.mdx b/apps/website/content/docs/components/checkbox.mdx index 5f97ab079..fed72dba5 100644 --- a/apps/website/content/docs/components/checkbox.mdx +++ b/apps/website/content/docs/components/checkbox.mdx @@ -82,6 +82,14 @@ Checkbox의 크기를 설정합니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/collapsible.mdx b/apps/website/content/docs/components/collapsible.mdx index 638373edc..d5610a8b6 100644 --- a/apps/website/content/docs/components/collapsible.mdx +++ b/apps/website/content/docs/components/collapsible.mdx @@ -56,6 +56,14 @@ Collapsible의 비활성화 상태를 설정합니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/field.mdx b/apps/website/content/docs/components/field.mdx index 3b5630862..386c4b530 100644 --- a/apps/website/content/docs/components/field.mdx +++ b/apps/website/content/docs/components/field.mdx @@ -125,6 +125,14 @@ Field의 비활성화 상태를 설정합니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/floating-bar.mdx b/apps/website/content/docs/components/floating-bar.mdx index 3824548db..554a33120 100644 --- a/apps/website/content/docs/components/floating-bar.mdx +++ b/apps/website/content/docs/components/floating-bar.mdx @@ -43,6 +43,14 @@ FloatingBar는 제어 형태로 사용되어, 여러 상태를 동시에 관리 ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/input-group.mdx b/apps/website/content/docs/components/input-group.mdx index 625e8fc05..809030d5a 100644 --- a/apps/website/content/docs/components/input-group.mdx +++ b/apps/website/content/docs/components/input-group.mdx @@ -30,6 +30,14 @@ description: 'InputGroup은 입력 필드(TextInput, Textarea)와 관련 요소 ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/menu.mdx b/apps/website/content/docs/components/menu.mdx index d39cc5cfe..ae33da1c6 100644 --- a/apps/website/content/docs/components/menu.mdx +++ b/apps/website/content/docs/components/menu.mdx @@ -99,6 +99,14 @@ Submenu를 구성할 수 있습니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/multi-select.mdx b/apps/website/content/docs/components/multi-select.mdx index 95adf7f7d..b5b1f2934 100644 --- a/apps/website/content/docs/components/multi-select.mdx +++ b/apps/website/content/docs/components/multi-select.mdx @@ -99,6 +99,14 @@ MultiSelect.Value에 함수형 children을 제공하여 선택된 값들의 표 ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/navigation-menu.mdx b/apps/website/content/docs/components/navigation-menu.mdx index c1d83156d..eac591955 100644 --- a/apps/website/content/docs/components/navigation-menu.mdx +++ b/apps/website/content/docs/components/navigation-menu.mdx @@ -112,6 +112,14 @@ NavigationMenu의 모든 프리셋 컴포넌트를 분리하여 사용합니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/pagination.mdx b/apps/website/content/docs/components/pagination.mdx index 6729c0a54..21071780b 100644 --- a/apps/website/content/docs/components/pagination.mdx +++ b/apps/website/content/docs/components/pagination.mdx @@ -82,6 +82,14 @@ Pagination 컴포넌트를 제어 컴포넌트로 사용하는 예시입니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + --- ### Pagination.Root diff --git a/apps/website/content/docs/components/popover.mdx b/apps/website/content/docs/components/popover.mdx index 1f2906e3c..56c727a28 100644 --- a/apps/website/content/docs/components/popover.mdx +++ b/apps/website/content/docs/components/popover.mdx @@ -60,6 +60,14 @@ Popover와 트리거 간의 거리를 조정합니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/radio.mdx b/apps/website/content/docs/components/radio.mdx index 3375bf80a..4af79ce63 100644 --- a/apps/website/content/docs/components/radio.mdx +++ b/apps/website/content/docs/components/radio.mdx @@ -86,6 +86,14 @@ Radio의 유연한 사용예시입니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/select.mdx b/apps/website/content/docs/components/select.mdx index 7ebe80f63..6fd89c57c 100644 --- a/apps/website/content/docs/components/select.mdx +++ b/apps/website/content/docs/components/select.mdx @@ -112,6 +112,14 @@ Select.Value에 함수형 children을 제공하여 선택된 값을 커스터마 ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/sheet.mdx b/apps/website/content/docs/components/sheet.mdx index 038802b90..fcc32d76b 100644 --- a/apps/website/content/docs/components/sheet.mdx +++ b/apps/website/content/docs/components/sheet.mdx @@ -73,6 +73,14 @@ Sheet가 닫혀도 DOM에서 제거되지 않고 유지되도록 설정합니다 ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/switch.mdx b/apps/website/content/docs/components/switch.mdx index ff0d46df7..0649b6b7b 100644 --- a/apps/website/content/docs/components/switch.mdx +++ b/apps/website/content/docs/components/switch.mdx @@ -86,6 +86,14 @@ Switch의 비활성화 상태를 설정합니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/table.mdx b/apps/website/content/docs/components/table.mdx index 7726413cd..b81968666 100644 --- a/apps/website/content/docs/components/table.mdx +++ b/apps/website/content/docs/components/table.mdx @@ -18,6 +18,14 @@ Table 컴포넌트는 순수한 뷰(View) 역할에 집중하여 기본적인 ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/tabs.mdx b/apps/website/content/docs/components/tabs.mdx index fe72f25f6..c7dc43d2b 100644 --- a/apps/website/content/docs/components/tabs.mdx +++ b/apps/website/content/docs/components/tabs.mdx @@ -112,6 +112,14 @@ Tabs의 활성 상태를 외부에서 제어합니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/components/toast.mdx b/apps/website/content/docs/components/toast.mdx index 3b9a6bf4f..2e113cad1 100644 --- a/apps/website/content/docs/components/toast.mdx +++ b/apps/website/content/docs/components/toast.mdx @@ -99,6 +99,14 @@ Toast 아이템을 완전히 커스텀할 수 있습니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props ### Toast.Provider diff --git a/apps/website/content/docs/components/tooltip.mdx b/apps/website/content/docs/components/tooltip.mdx index 25140b18b..0c2f91825 100644 --- a/apps/website/content/docs/components/tooltip.mdx +++ b/apps/website/content/docs/components/tooltip.mdx @@ -95,6 +95,14 @@ Tooltip의 거리와 정렬 오프셋을 조정할 수 있습니다. ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/content/docs/layout/grid.mdx b/apps/website/content/docs/layout/grid.mdx index 8a6f6fe6b..161f9e78c 100644 --- a/apps/website/content/docs/layout/grid.mdx +++ b/apps/website/content/docs/layout/grid.mdx @@ -86,6 +86,14 @@ Grid 아이템이 차지할 행이나 열의 개수를 설정할 수 있습니 ``` +## Anatomy + +--- + +컴포넌트의 구조를 탐색하고 각 파트의 역할을 확인합니다. 파트 이름에 마우스를 올리면 해당 영역이 하이라이트됩니다. + + + ## Props Table --- diff --git a/apps/website/src/components/demo/examples/avatar/anatomy-avatar.tsx b/apps/website/src/components/demo/examples/avatar/anatomy-avatar.tsx new file mode 100644 index 000000000..7c0fce652 --- /dev/null +++ b/apps/website/src/components/demo/examples/avatar/anatomy-avatar.tsx @@ -0,0 +1,18 @@ +import { Avatar, Flex } from '@vapor-ui/core'; + +import { VAPOR_LOGO_URL } from '~/constants/image-urls'; + +export default function AnatomyAvatar() { + return ( + + + + V + + + + V + + + ); +} diff --git a/apps/website/src/components/demo/examples/breadcrumb/anatomy-breadcrumb.tsx b/apps/website/src/components/demo/examples/breadcrumb/anatomy-breadcrumb.tsx new file mode 100644 index 000000000..f81f41591 --- /dev/null +++ b/apps/website/src/components/demo/examples/breadcrumb/anatomy-breadcrumb.tsx @@ -0,0 +1,27 @@ +import { Breadcrumb } from '@vapor-ui/core'; + +export default function AnatomyBreadcrumb() { + return ( + + + + + Home + + + + + Products + + + + + + + Details + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/callout/anatomy-callout.tsx b/apps/website/src/components/demo/examples/callout/anatomy-callout.tsx new file mode 100644 index 000000000..7930e1b5a --- /dev/null +++ b/apps/website/src/components/demo/examples/callout/anatomy-callout.tsx @@ -0,0 +1,13 @@ +import { Callout } from '@vapor-ui/core'; +import { InfoCircleOutlineIcon } from '@vapor-ui/icons'; + +export default function AnatomyCallout() { + return ( + + + + + Your changes have been saved successfully. + + ); +} diff --git a/apps/website/src/components/demo/examples/card/anatomy-card.tsx b/apps/website/src/components/demo/examples/card/anatomy-card.tsx new file mode 100644 index 000000000..a7ab991c0 --- /dev/null +++ b/apps/website/src/components/demo/examples/card/anatomy-card.tsx @@ -0,0 +1,21 @@ +import { Card, Text } from '@vapor-ui/core'; + +export default function AnatomyCard() { + return ( + + + Card Title + + + + This is the card body content area. + + + + + Last updated 2 hours ago + + + + ); +} diff --git a/apps/website/src/components/demo/examples/checkbox/anatomy-checkbox.tsx b/apps/website/src/components/demo/examples/checkbox/anatomy-checkbox.tsx new file mode 100644 index 000000000..c5b70a8c6 --- /dev/null +++ b/apps/website/src/components/demo/examples/checkbox/anatomy-checkbox.tsx @@ -0,0 +1,9 @@ +import { Checkbox } from '@vapor-ui/core'; + +export default function AnatomyCheckbox() { + return ( + + + + ); +} diff --git a/apps/website/src/components/demo/examples/collapsible/anatomy-collapsible.tsx b/apps/website/src/components/demo/examples/collapsible/anatomy-collapsible.tsx new file mode 100644 index 000000000..cced84a58 --- /dev/null +++ b/apps/website/src/components/demo/examples/collapsible/anatomy-collapsible.tsx @@ -0,0 +1,18 @@ +'use client'; + +import { Button, Collapsible, Text } from '@vapor-ui/core'; + +export default function AnatomyCollapsible() { + return ( + + }> + Toggle Details + + + + This is the collapsible panel content that can be toggled open and closed. + + + + ); +} diff --git a/apps/website/src/components/demo/examples/field/anatomy-field.tsx b/apps/website/src/components/demo/examples/field/anatomy-field.tsx new file mode 100644 index 000000000..a77fddef1 --- /dev/null +++ b/apps/website/src/components/demo/examples/field/anatomy-field.tsx @@ -0,0 +1,26 @@ +'use client'; + +import { Field, TextInput } from '@vapor-ui/core'; + +export default function AnatomyField() { + return ( + + + Email + + } + /> + + We'll never share your email. + + + Please enter a valid email address. + + + Email is available. + + + ); +} diff --git a/apps/website/src/components/demo/examples/floating-bar/anatomy-floating-bar.tsx b/apps/website/src/components/demo/examples/floating-bar/anatomy-floating-bar.tsx new file mode 100644 index 000000000..7fa9ae15f --- /dev/null +++ b/apps/website/src/components/demo/examples/floating-bar/anatomy-floating-bar.tsx @@ -0,0 +1,19 @@ +'use client'; + +import { FloatingBar } from '@vapor-ui/core'; + +export default function AnatomyFloatingBar() { + return ( + + Open Floating Bar + + + + This is the floating bar content. + Close + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/grid/anatomy-grid.tsx b/apps/website/src/components/demo/examples/grid/anatomy-grid.tsx new file mode 100644 index 000000000..096c12b98 --- /dev/null +++ b/apps/website/src/components/demo/examples/grid/anatomy-grid.tsx @@ -0,0 +1,23 @@ +import { Grid, Text } from '@vapor-ui/core'; + +export default function AnatomyGrid() { + return ( + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + ); +} diff --git a/apps/website/src/components/demo/examples/input-group/anatomy-input-group.tsx b/apps/website/src/components/demo/examples/input-group/anatomy-input-group.tsx new file mode 100644 index 000000000..66045203d --- /dev/null +++ b/apps/website/src/components/demo/examples/input-group/anatomy-input-group.tsx @@ -0,0 +1,12 @@ +'use client'; + +import { InputGroup, TextInput } from '@vapor-ui/core'; + +export default function AnatomyInputGroup() { + return ( + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/menu/anatomy-menu.tsx b/apps/website/src/components/demo/examples/menu/anatomy-menu.tsx new file mode 100644 index 000000000..87f2edae9 --- /dev/null +++ b/apps/website/src/components/demo/examples/menu/anatomy-menu.tsx @@ -0,0 +1,55 @@ +'use client'; + +import { Button, Menu } from '@vapor-ui/core'; + +export default function AnatomyMenu() { + return ( + + Open Menu} /> + + + + + File + New File + Open File + + + + + + Auto Save + + + + + + + + Light + + + + Dark + + + + + + Export + + + PDF + CSV + + + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/multi-select/anatomy-multi-select.tsx b/apps/website/src/components/demo/examples/multi-select/anatomy-multi-select.tsx new file mode 100644 index 000000000..988c473b4 --- /dev/null +++ b/apps/website/src/components/demo/examples/multi-select/anatomy-multi-select.tsx @@ -0,0 +1,45 @@ +import { MultiSelect } from '@vapor-ui/core'; + +const items = [ + { label: 'React', value: 'react' }, + { label: 'Vue', value: 'vue' }, + { label: 'Angular', value: 'angular' }, +]; + +export default function AnatomyMultiSelect() { + return ( + + + + + + + + + + + + + + Frameworks + + + {items.map((item) => ( + + + {item.label} + + + ))} + + + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/navigation-menu/anatomy-navigation-menu.tsx b/apps/website/src/components/demo/examples/navigation-menu/anatomy-navigation-menu.tsx new file mode 100644 index 000000000..346de50f7 --- /dev/null +++ b/apps/website/src/components/demo/examples/navigation-menu/anatomy-navigation-menu.tsx @@ -0,0 +1,35 @@ +'use client'; + +import { NavigationMenu, Text } from '@vapor-ui/core'; + +export default function AnatomyNavigationMenu() { + return ( + + + + + Home + + + + Products + + + + + + + + Products content area + + + + + + + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/pagination/anatomy-pagination.tsx b/apps/website/src/components/demo/examples/pagination/anatomy-pagination.tsx new file mode 100644 index 000000000..cfa12690f --- /dev/null +++ b/apps/website/src/components/demo/examples/pagination/anatomy-pagination.tsx @@ -0,0 +1,11 @@ +import { Pagination } from '@vapor-ui/core'; + +export default function AnatomyPagination() { + return ( + + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/popover/anatomy-popover.tsx b/apps/website/src/components/demo/examples/popover/anatomy-popover.tsx new file mode 100644 index 000000000..0a3d0a164 --- /dev/null +++ b/apps/website/src/components/demo/examples/popover/anatomy-popover.tsx @@ -0,0 +1,28 @@ +'use client'; + +import { Button, Popover } from '@vapor-ui/core'; + +export default function AnatomyPopover() { + return ( + + }> + Open Popover + + + + + + Notification + + You have 3 new messages and 1 notification. + + }> + Close + + + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/radio/anatomy-radio.tsx b/apps/website/src/components/demo/examples/radio/anatomy-radio.tsx new file mode 100644 index 000000000..7b556c4c0 --- /dev/null +++ b/apps/website/src/components/demo/examples/radio/anatomy-radio.tsx @@ -0,0 +1,9 @@ +import { Radio } from '@vapor-ui/core'; + +export default function AnatomyRadio() { + return ( + + + + ); +} diff --git a/apps/website/src/components/demo/examples/select/anatomy-select.tsx b/apps/website/src/components/demo/examples/select/anatomy-select.tsx new file mode 100644 index 000000000..43ec75b8d --- /dev/null +++ b/apps/website/src/components/demo/examples/select/anatomy-select.tsx @@ -0,0 +1,39 @@ +import { Select } from '@vapor-ui/core'; + +const items = [ + { label: 'Sans-serif', value: 'sans-serif' }, + { label: 'Serif', value: 'serif' }, + { label: 'Monospace', value: 'mono' }, +]; + +export default function AnatomySelect() { + return ( + + + + + + + + Fonts + + {items.map((item) => ( + + + {item.label} + + + + ))} + + + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/sheet/anatomy-sheet.tsx b/apps/website/src/components/demo/examples/sheet/anatomy-sheet.tsx new file mode 100644 index 000000000..295a67723 --- /dev/null +++ b/apps/website/src/components/demo/examples/sheet/anatomy-sheet.tsx @@ -0,0 +1,36 @@ +'use client'; + +import { Button, Sheet } from '@vapor-ui/core'; + +export default function AnatomySheet() { + return ( + + }> + Open Sheet + + + + + + + + Sheet Title + + + + This sheet slides in from the edge of the screen. + + + + Confirm} + /> + + + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/switch/anatomy-switch.tsx b/apps/website/src/components/demo/examples/switch/anatomy-switch.tsx new file mode 100644 index 000000000..a24fcf29e --- /dev/null +++ b/apps/website/src/components/demo/examples/switch/anatomy-switch.tsx @@ -0,0 +1,9 @@ +import { Switch } from '@vapor-ui/core'; + +export default function AnatomySwitch() { + return ( + + + + ); +} diff --git a/apps/website/src/components/demo/examples/table/anatomy-table.tsx b/apps/website/src/components/demo/examples/table/anatomy-table.tsx new file mode 100644 index 000000000..ab38804a3 --- /dev/null +++ b/apps/website/src/components/demo/examples/table/anatomy-table.tsx @@ -0,0 +1,37 @@ +import { Table, Text } from '@vapor-ui/core'; + +export default function AnatomyTable() { + return ( + + + + + + + + Name + Role + + + + + Olivia Park + Designer + + + Ethan Kim + Developer + + + + + + + 2 members total + + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/tabs/anatomy-tabs.tsx b/apps/website/src/components/demo/examples/tabs/anatomy-tabs.tsx new file mode 100644 index 000000000..1c2489792 --- /dev/null +++ b/apps/website/src/components/demo/examples/tabs/anatomy-tabs.tsx @@ -0,0 +1,29 @@ +import { Tabs, Text } from '@vapor-ui/core'; + +export default function AnatomyTabs() { + return ( + + + + + Overview + + Features + + + + + + + Overview content + + + + + + Features content + + + + ); +} diff --git a/apps/website/src/components/demo/examples/toast/anatomy-toast.tsx b/apps/website/src/components/demo/examples/toast/anatomy-toast.tsx new file mode 100644 index 000000000..f21c61970 --- /dev/null +++ b/apps/website/src/components/demo/examples/toast/anatomy-toast.tsx @@ -0,0 +1,64 @@ +'use client'; + +import { useEffect } from 'react'; + +import { Button, Toast } from '@vapor-ui/core'; + +const toastManager = Toast.createToastManager(); + +function ToastList() { + const { toasts } = Toast.useToastManager(); + + return ( + + + {toasts.map((toast) => ( + + + + + + + + + + ))} + + + ); +} + +function App() { + useEffect(() => { + toastManager.add({ + title: 'Notification', + description: 'Your changes have been saved.', + }); + }, []); + + return ( + + ); +} + +export default function AnatomyToast() { + return ( + + + + + ); +} diff --git a/apps/website/src/components/demo/examples/tooltip/anatomy-tooltip.tsx b/apps/website/src/components/demo/examples/tooltip/anatomy-tooltip.tsx new file mode 100644 index 000000000..379d6b92d --- /dev/null +++ b/apps/website/src/components/demo/examples/tooltip/anatomy-tooltip.tsx @@ -0,0 +1,26 @@ +'use client'; + +import { IconButton, Tooltip } from '@vapor-ui/core'; +import { BoldOutlineIcon } from '@vapor-ui/icons'; + +export default function AnatomyTooltip() { + return ( + + + + + } + /> + + + + Bold + + + + + ); +}