@ceed/ads 1.30.0 → 1.31.0

package/dist/components/navigation/Tabs.md

@@ -50,8 +50,6 @@ function MyComponent() {
 }
 ```
 
-## Features
-
 ### Basic Tabs
 
 Default horizontal tab navigation with tab panels.
@@ -75,7 +73,7 @@ Default horizontal tab navigation with tab panels.
 </Tabs>
 ```
 
-### Variants
+## Tab Variants
 
 Tabs support `plain`, `outlined`, `soft`, and `solid` visual styles. Apply the variant to both TabList and individual Tab components for a consistent appearance.
 
@@ -116,7 +114,7 @@ Tabs support `plain`, `outlined`, `soft`, and `solid` visual styles. Apply the v
 </div>
 ```
 
-### Sizes
+## Tab Sizes
 
 Tabs come in `sm`, `md`, and `lg` sizes. Set the `size` prop on the Tabs container to affect all child components uniformly.
 
@@ -150,7 +148,7 @@ Tabs come in `sm`, `md`, and `lg` sizes. Set the `size` prop on the Tabs contain
 </div>
 ```
 
-### Colors
+## Tab Colors
 
 Apply semantic colors (`primary`, `neutral`, `success`, `warning`, `danger`) to individual tabs for color-coded navigation.
 
@@ -193,7 +191,7 @@ Apply semantic colors (`primary`, `neutral`, `success`, `warning`, `danger`) to
 </div>
 ```
 
-### With Decorators
+## Tabs with Icon Decorators
 
 Add icons or other elements before or after the tab label using `startDecorator` and `endDecorator` props.
 
@@ -216,7 +214,7 @@ Add icons or other elements before or after the tab label using `startDecorator`
 </Tabs>
 ```
 
-### Vertical Orientation
+## Vertical Tabs
 
 Set `orientation="vertical"` on the Tabs container for sidebar-style navigation layouts.
 
@@ -235,7 +233,7 @@ Set `orientation="vertical"` on the Tabs container for sidebar-style navigation
 </Tabs>
 ```
 
-### Disabled Tabs
+## Disabled Tabs
 
 Individual tabs can be disabled with the `disabled` prop while keeping other tabs interactive.
 
@@ -252,7 +250,7 @@ Individual tabs can be disabled with the `disabled` prop while keeping other tab
 </Tabs>
 ```
 
-### Controlled Tabs
+## Controlled Tabs
 
 Use the `value` and `onChange` props for programmatic control of the active tab.
 
@@ -274,9 +272,7 @@ Use the `value` and `onChange` props for programmatic control of the active tab.
 </div>
 ```
 
-## Common Use Cases
-
-### Settings Page
+## Tabs for Settings Page
 
 ```tsx
 function SettingsPage() {
@@ -295,7 +291,7 @@ function SettingsPage() {
 }
 ```
 
-### Dashboard Time Range
+## Tabs for Dashboard Navigation
 
 ```tsx
 function DashboardTabs() {
@@ -316,7 +312,7 @@ function DashboardTabs() {
 }
 ```
 
-### Vertical Sidebar
+## Vertical Sidebar Tabs
 
 ```tsx
 function SidebarTabs() {
@@ -335,6 +331,33 @@ function SidebarTabs() {
 }
 ```
 
+## Props and Customization
+
+### Tabs Props
+
+| Prop           | Type                                                           | Default        | Description                       |
+| -------------- | -------------------------------------------------------------- | -------------- | --------------------------------- |
+| `children`     | `ReactNode`                                                    | -              | TabList and TabPanel elements     |
+| `value`        | `string \| number`                                             | -              | Active tab value (controlled)     |
+| `defaultValue` | `string \| number`                                             | -              | Initial active tab (uncontrolled) |
+| `onChange`     | `(event, value) => void`                                       | -              | Callback when active tab changes  |
+| `orientation`  | `'horizontal' \| 'vertical'`                                   | `'horizontal'` | Tab layout direction              |
+| `size`         | `'sm' \| 'md' \| 'lg'`                                         | `'md'`         | Tab size                          |
+| `variant`      | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'plain'`      | Visual style                      |
+| `color`        | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`    | Color scheme                      |
+| `sx`           | `SxProps`                                                      | -              | Custom styles                     |
+
+### Tab Props
+
+| Prop             | Type               | Default | Description             |
+| ---------------- | ------------------ | ------- | ----------------------- |
+| `value`          | `string \| number` | -       | Tab identifier          |
+| `startDecorator` | `ReactNode`        | -       | Content before tab text |
+| `endDecorator`   | `ReactNode`        | -       | Content after tab text  |
+| `disabled`       | `boolean`          | `false` | Disables the tab        |
+
+> **Note**: Tabs, Tab, TabList, and TabPanel accept all their respective Joy UI props.
+
 ## Best Practices
 
 - **Use clear, concise tab labels.** Each label should describe the content it reveals. Avoid generic names like "Tab 1" or "Other".

package/dist/components/surfaces/Accordions.md

@@ -48,9 +48,7 @@ function FAQSection() {
 }
 ```
 
-## Examples
-
-### Playground
+## Accordion Playground
 
 Interactive example with all controls.
 
@@ -58,7 +56,7 @@ Interactive example with all controls.
 <Accordions {...args} />
 ```
 
-### Basics
+## Accordion Basics
 
 Basic accordion with multiple collapsible sections.
 
@@ -77,7 +75,7 @@ Basic accordion with multiple collapsible sections.
 />
 ```
 
-### Sizes
+## Accordion Sizes
 
 Available size options: `sm`, `md`, `lg`.
 
@@ -89,7 +87,7 @@ Available size options: `sm`, `md`, `lg`.
 </>
 ```
 
-### Variants
+## Accordion Variants
 
 Style variants: `plain`, `outlined`, `soft`, `solid`.
 
@@ -114,7 +112,7 @@ Style variants: `plain`, `outlined`, `soft`, `solid`.
 </>
 ```
 
-### Colors
+## Accordion Colors
 
 Color options: `primary`, `neutral`, `danger`, `success`, `warning`.
 
@@ -143,7 +141,7 @@ Color options: `primary`, `neutral`, `danger`, `success`, `warning`.
 </>
 ```
 
-### Removing Divider
+## Accordion without Divider
 
 Use `disableDivider` to remove the divider lines between accordion items.
 
@@ -172,9 +170,7 @@ Use `disableDivider` to remove the divider lines between accordion items.
 - **Single item**: Don't use accordion for a single collapsible section
 - **Deeply nested content**: Avoid nesting accordions within accordions
 
-## Common Use Cases
-
-### FAQ Section
+## Accordion for FAQ
 
 ```tsx
 function FAQAccordion() {
@@ -224,7 +220,7 @@ function FAQAccordion() {
 }
 ```
 
-### Settings Panel
+## Accordion for Settings Panel
 
 ```tsx
 function SettingsAccordion({ settings, onSettingChange }) {
@@ -307,7 +303,7 @@ function SettingsAccordion({ settings, onSettingChange }) {
 }
 ```
 
-### Product Details
+## Accordion for Product Details
 
 ```tsx
 function ProductAccordion({ product }) {
@@ -387,7 +383,7 @@ function ProductAccordion({ product }) {
 }
 ```
 
-### Navigation Menu
+## Accordion for Navigation Menu
 
 ```tsx
 function NavigationAccordion() {
@@ -463,7 +459,7 @@ function NavigationAccordion() {
 }
 ```
 
-### Help Documentation
+## Accordion for Help Documentation
 
 ```tsx
 function HelpAccordion() {
@@ -544,7 +540,7 @@ function HelpAccordion() {
 }
 ```
 
-### Collapsible Form Sections
+## Collapsible Form Sections
 
 ```tsx
 function MultiSectionForm({ onSubmit }) {

package/dist/components/surfaces/Card.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Card 컴포넌트는 관련된 내용과 액션을 하나의 컨테이너로 묶어서 표시하는 UI 요소입니다. 정보를 구조화하고 시각적으로 그룹화하여 사용자가 쉽게 스캔하고 이해할 수 있도록 도와줍니다. 뉴스피드, 제품 목록, 사용자 프로필, 대시보드 위젯 등 다양한 용도로 사용됩니다.
+The Card component is a UI element that groups related content and actions within a single container. It helps users scan and understand information more easily by structuring and visually grouping it. It is commonly used for news feeds, product lists, user profiles, dashboard widgets, and more.
 
 ```tsx
 <Card {...args} sx={{
@@ -38,11 +38,9 @@ function MyComponent() {
 }
 ```
 
-## Examples
+## Card Basic Usage
 
-### Basic Usage
-
-가장 기본적인 카드 사용법입니다.
+The most basic way to use a card.
 
 ```tsx
 <div style={{
@@ -63,9 +61,9 @@ function MyComponent() {
 </div>
 ```
 
-### Variants
+## Card Variants
 
-다양한 스타일 변형을 제공합니다.
+Provides various style variants.
 
 ```tsx
 <div style={{
@@ -111,9 +109,9 @@ function MyComponent() {
 </div>
 ```
 
-### Colors
+## Card Colors
 
-다양한 색상을 적용할 수 있습니다.
+You can apply various colors.
 
 ```tsx
 <div style={{
@@ -168,9 +166,9 @@ function MyComponent() {
 </div>
 ```
 
-### Sizes
+## Card Sizes
 
-크기를 조절할 수 있습니다.
+You can adjust the size.
 
 ```tsx
 <div style={{
@@ -208,9 +206,9 @@ function MyComponent() {
 </div>
 ```
 
-### With Cover
+## Card With Cover
 
-이미지를 배경으로 사용할 수 있는 CardCover 컴포넌트를 활용한 카드입니다.
+A card that uses the `CardCover` component to display an image as the background.
 
 ```tsx
 <div style={{
@@ -254,9 +252,9 @@ function MyComponent() {
 </div>
 ```
 
-### With Actions
+## Card With Actions
 
-하단에 액션 버튼들을 배치할 수 있습니다.
+You can place action buttons at the bottom.
 
 ```tsx
 <div style={{
@@ -305,9 +303,9 @@ function MyComponent() {
 </div>
 ```
 
-### With Overflow
+## Card With Overflow
 
-CardOverflow를 사용하여 카드의 경계를 넘나드는 콘텐츠를 표시할 수 있습니다.
+Use `CardOverflow` to display content that extends beyond the card's padded boundary.
 
 ```tsx
 <div style={{
@@ -442,9 +440,9 @@ CardOverflow를 사용하여 카드의 경계를 넘나드는 콘텐츠를 표
 </div>
 ```
 
-### Interactive Cards
+## Card Interactive Cards
 
-클릭 가능하고 호버 효과가 있는 인터랙티브한 카드들입니다.
+Interactive cards with click behavior and hover effects.
 
 ```tsx
 <div style={{
@@ -482,9 +480,9 @@ CardOverflow를 사용하여 카드의 경계를 넘나드는 콘텐츠를 표
 </div>
 ```
 
-### Media Cards
+## Card Media Cards
 
-이미지와 함께 사용하는 미디어 카드들입니다.
+Media cards used with images.
 
 ```tsx
 <div style={{
@@ -559,9 +557,9 @@ CardOverflow를 사용하여 카드의 경계를 넘나드는 콘텐츠를 표
 </div>
 ```
 
-### Complex Layout
+## Card Complex Layout
 
-복잡한 레이아웃을 가진 소셜 미디어 스타일 카드입니다.
+A social-media-style card with a complex layout.
 
 ```tsx
 <div style={{
@@ -631,21 +629,21 @@ CardOverflow를 사용하여 카드의 경계를 넘나드는 콘텐츠를 표
 
 ## Card Components
 
-Card는 여러 하위 컴포넌트로 구성됩니다:
+Card is composed of several subcomponents:
 
 ### Card
 
-메인 카드 컨테이너입니다.
+The main card container.
 
 ```tsx
 <Card variant="outlined" color="neutral" size="md">
-  {/* 카드 내용 */}
+  {/* card content */}
 </Card>
 ```
 
 ### CardContent
 
-카드의 주요 내용을 담는 영역입니다.
+The area that contains the card's primary content.
 
 ```tsx
 <CardContent>
@@ -656,7 +654,7 @@ Card는 여러 하위 컴포넌트로 구성됩니다:
 
 ### CardCover
 
-카드 전체를 덮는 배경 이미지나 미디어를 표시합니다.
+Displays background media or an image that covers the entire card.
 
 ```tsx
 <CardCover>
@@ -666,7 +664,7 @@ Card는 여러 하위 컴포넌트로 구성됩니다:
 
 ### CardActions
 
-액션 버튼들을 배치하는 영역입니다.
+The area used to place action buttons.
 
 ```tsx
 <CardActions>
@@ -677,7 +675,7 @@ Card는 여러 하위 컴포넌트로 구성됩니다:
 
 ### CardOverflow
 
-카드의 패딩을 무시하고 전체 너비를 사용하는 영역입니다.
+An area that ignores the card's padding and uses the full width.
 
 ```tsx
 <CardOverflow>
@@ -687,9 +685,7 @@ Card는 여러 하위 컴포넌트로 구성됩니다:
 </CardOverflow>
 ```
 
-## Common Use Cases
-
-### Product Cards
+## Product Cards
 
 ```tsx
 <Card sx={{ maxWidth: 320 }}>
@@ -713,7 +709,7 @@ Card는 여러 하위 컴포넌트로 구성됩니다:
 </Card>
 ```
 
-### User Profile Cards
+## User Profile Cards
 
 ```tsx
 <Card sx={{ maxWidth: 320 }}>
@@ -733,7 +729,7 @@ Card는 여러 하위 컴포넌트로 구성됩니다:
 </Card>
 ```
 
-### News Cards
+## News Cards
 
 ```tsx
 <Card sx={{ maxWidth: 400 }}>
@@ -752,7 +748,7 @@ Card는 여러 하위 컴포넌트로 구성됩니다:
 </Card>
 ```
 
-### Dashboard Widget Cards
+## Dashboard Widget Cards
 
 ```tsx
 <Card variant="soft" color="primary">
@@ -764,23 +760,39 @@ Card는 여러 하위 컴포넌트로 구성됩니다:
 </Card>
 ```
 
+## Props and Customization
+
+### Key Props
+
+| Prop             | Type                                                           | Default      | Description                                              |
+| ---------------- | -------------------------------------------------------------- | ------------ | -------------------------------------------------------- |
+| `children`       | `ReactNode`                                                    | -            | Card content (CardContent, CardCover, CardActions, etc.) |
+| `variant`        | `'solid' \| 'soft' \| 'outlined' \| 'plain'`                   | `'outlined'` | Visual style                                             |
+| `size`           | `'sm' \| 'md' \| 'lg'`                                         | `'md'`       | Card size (affects padding)                              |
+| `color`          | `'primary' \| 'neutral' \| 'danger' \| 'success' \| 'warning'` | `'neutral'`  | Color scheme                                             |
+| `orientation`    | `'horizontal' \| 'vertical'`                                   | `'vertical'` | Card layout direction                                    |
+| `invertedColors` | `boolean`                                                      | `false`      | Invert child component colors                            |
+| `sx`             | `SxProps`                                                      | -            | Custom styles                                            |
+
+> **Note**: Card also accepts all Joy UI Card props and Framer Motion props.
+
 ## Best Practices
 
-1. **적절한 크기**: 카드의 내용에 맞는 적절한 크기를 설정하세요. 너무 크거나 작으면 가독성이 떨어집니다.
+1. **Use an appropriate size**: Set a size that fits the card content. If it is too large or too small, readability suffers.
 
-2. **일관된 스타일**: 같은 맥락에서 사용되는 카드들은 일관된 variant, color, size를 사용하세요.
+2. **Keep styles consistent**: Cards used in the same context should share consistent `variant`, `color`, and `size` values.
 
-3. **명확한 계층구조**: Typography의 level을 활용하여 정보의 중요도에 따른 시각적 계층을 만드세요.
+3. **Create clear hierarchy**: Use Typography levels to build a visual hierarchy based on the importance of the information.
 
-4. **적절한 간격**: 여러 카드를 나열할 때는 적절한 간격을 두어 각각을 구분할 수 있게 하세요.
+4. **Use proper spacing**: When listing multiple cards, keep enough space between them so each one is clearly distinguishable.
 
-5. **접근성 고려**:
-   - 카드가 클릭 가능한 경우 키보드 탐색을 지원하세요
-   - 이미지에는 적절한 alt 텍스트를 제공하세요
-   - 색상만으로 정보를 전달하지 마세요
+5. **Consider accessibility**:
+   - Support keyboard navigation when cards are clickable
+   - Provide appropriate `alt` text for images
+   - Do not rely on color alone to communicate information
 
-6. **반응형 디자인**: 다양한 화면 크기에서 잘 작동하도록 maxWidth나 responsive 속성을 활용하세요.
+6. **Use responsive design**: Use `maxWidth` or responsive props so cards work well across different screen sizes.
 
-7. **로딩 상태**: 데이터를 불러오는 동안에는 Skeleton 컴포넌트를 활용하여 로딩 상태를 표시하세요.
+7. **Handle loading states**: Use Skeleton components to represent loading states while data is being fetched.
 
-8. **액션 버튼**: CardActions에는 카드와 직접 관련된 주요 액션만 포함하세요. 너무 많은 버튼은 혼란을 야기할 수 있습니다.
+8. **Limit action buttons**: Include only primary actions directly related to the card in `CardActions`. Too many buttons can create confusion.