@ceed/ads 1.22.0 → 1.23.1

package/dist/components/data-display/Typography.md

@@ -2,7 +2,7 @@
 
 ## Introduction
 
-Typography 컴포넌트는 텍스트를 표시하기 위한 핵심 컴포넌트입니다. Joy UI의 Typography를 기반으로 하며, 다양한 텍스트 레벨과 스타일을 제공합니다. 제목, 본문, 라벨 등 모든 텍스트 요소에 일관된 타이포그래피를 적용할 수 있습니다.
+The Typography component is a core component for displaying text. It is based on Joy UI Typography and provides a variety of text levels and styles. You can apply consistent typography across all text elements such as headings, body text, and labels.
 
 ```tsx
 <Typography children="Typography" />
@@ -21,10 +21,10 @@ import { Typography } from '@ceed/ads';
 function MyComponent() {
   return (
     <div>
-      <Typography level="h1">메인 제목</Typography>
-      <Typography level="body-md">본문 텍스트입니다.</Typography>
+      <Typography level="h1">Main Heading</Typography>
+      <Typography level="body-md">This is body text.</Typography>
       <Typography level="body-sm" color="neutral">
-        보조 설명 텍스트입니다.
+        This is supporting description text.
       </Typography>
     </div>
   );
@@ -35,18 +35,18 @@ function MyComponent() {
 
 ### Headings
 
-제목을 위한 레벨들입니다. 페이지 구조를 명확하게 나타내는 데 사용됩니다.
+Levels for headings. Use them to clearly define page structure.
 
 ```tsx
-<Typography level="h1">H1 - 페이지 메인 제목</Typography>
-<Typography level="h2">H2 - 섹션 제목</Typography>
-<Typography level="h3">H3 - 하위 섹션 제목</Typography>
-<Typography level="h4">H4 - 세부 제목</Typography>
+<Typography level="h1">H1 - Main page heading</Typography>
+<Typography level="h2">H2 - Section heading</Typography>
+<Typography level="h3">H3 - Subsection heading</Typography>
+<Typography level="h4">H4 - Detailed heading</Typography>
 ```
 
 ### Titles
 
-중요한 제목이나 강조할 텍스트에 사용됩니다.
+Used for important titles or emphasized text.
 
 ```tsx
 <Typography level="title-lg">Large Title</Typography>
@@ -56,13 +56,13 @@ function MyComponent() {
 
 ### Body Text
 
-본문 텍스트를 위한 레벨들입니다. 대부분의 읽기 내용에 사용됩니다.
+Levels for body text. Use these for most readable content.
 
 ```tsx
-<Typography level="body-lg">큰 본문 텍스트</Typography>
-<Typography level="body-md">일반 본문 텍스트</Typography>
-<Typography level="body-sm">작은 본문 텍스트</Typography>
-<Typography level="body-xs">매우 작은 텍스트</Typography>
+<Typography level="body-lg">Large body text</Typography>
+<Typography level="body-md">Regular body text</Typography>
+<Typography level="body-sm">Small body text</Typography>
+<Typography level="body-xs">Extra small text</Typography>
 ```
 
 ## Common Use Cases
@@ -74,24 +74,24 @@ function ArticlePage() {
   return (
     <article>
       <Typography level="h1" sx={{ mb: 2 }}>
-        기사 제목
+        Article Title
       </Typography>
 
       <Typography level="body-sm" color="neutral" sx={{ mb: 3 }}>
-        2024년 1월 15일 · 김철수 작성
+        January 15, 2024 · Written by John Doe
       </Typography>
 
       <Typography level="body-md" sx={{ mb: 2 }}>
-        기사의 본문 내용이 여기에 들어갑니다. 이 텍스트는 읽기 쉬운
-        크기와 줄 간격을 가지고 있습니다.
+        The main content of the article goes here. This text uses a readable size
+        and line spacing.
       </Typography>
 
       <Typography level="h2" sx={{ mt: 4, mb: 2 }}>
-        섹션 제목
+        Section Title
       </Typography>
 
       <Typography level="body-md">
-        섹션의 내용이 계속됩니다.
+        The section content continues here.
       </Typography>
     </article>
   );
@@ -104,15 +104,15 @@ function ArticlePage() {
 <Card>
   <CardContent>
     <Typography level="title-md" sx={{ mb: 1 }}>
-      제품명
+      Product Name
     </Typography>
 
     <Typography level="body-sm" color="neutral" sx={{ mb: 2 }}>
-      카테고리: 전자제품
+      Category: Electronics
     </Typography>
 
     <Typography level="body-md" sx={{ mb: 2 }}>
-      제품에 대한 상세 설명이 여기에 들어갑니다.
+      A detailed description of the product goes here.
     </Typography>
 
     <Typography level="title-lg" color="primary">
@@ -128,21 +128,21 @@ function ArticlePage() {
 <Stack spacing={2}>
   <FormControl>
     <Typography level="title-sm" component="label">
-      사용자 이름
+      Username
     </Typography>
-    <Input placeholder="이름을 입력하세요" />
+    <Input placeholder="Enter your name" />
     <Typography level="body-xs" color="neutral">
-      실명으로 입력해 주세요.
+      Please enter your real name.
     </Typography>
   </FormControl>
 
   <FormControl error>
     <Typography level="title-sm" component="label">
-      이메일 주소
+      Email Address
     </Typography>
     <Input placeholder="email@example.com" />
     <Typography level="body-xs" color="danger">
-      올바른 이메일 형식이 아닙니다.
+      The email format is invalid.
     </Typography>
   </FormControl>
 </Stack>
@@ -153,16 +153,16 @@ function ArticlePage() {
 ```tsx
 <Stack spacing={2}>
   <Box>
-    <Typography level="body-md">서버 상태:</Typography>
+    <Typography level="body-md">Server Status:</Typography>
     <Typography level="body-md" color="success">
-      정상 운영 중
+      Operating Normally
     </Typography>
   </Box>
 
   <Box>
-    <Typography level="body-md">마지막 업데이트:</Typography>
+    <Typography level="body-md">Last Updated:</Typography>
     <Typography level="body-sm" color="neutral">
-      2분 전
+      2 minutes ago
     </Typography>
   </Box>
 </Stack>
@@ -172,7 +172,7 @@ function ArticlePage() {
 
 ```tsx
 <Stack spacing={1}>
-  <Typography level="title-md">할 일 목록</Typography>
+  <Typography level="title-md">Todo List</Typography>
 
   {todoItems.map((item) => (
     <Box key={item.id} sx={{ pl: 2 }}>
@@ -195,39 +195,39 @@ function ArticlePage() {
 
 ## Colors
 
-Typography는 다양한 색상을 지원합니다:
+Typography supports various colors:
 
 ```tsx
 <Stack spacing={1}>
-  <Typography color="primary">Primary 색상</Typography>
-  <Typography color="neutral">Neutral 색상</Typography>
-  <Typography color="danger">Danger 색상</Typography>
-  <Typography color="success">Success 색상</Typography>
-  <Typography color="warning">Warning 색상</Typography>
+  <Typography color="primary">Primary color</Typography>
+  <Typography color="neutral">Neutral color</Typography>
+  <Typography color="danger">Danger color</Typography>
+  <Typography color="success">Success color</Typography>
+  <Typography color="warning">Warning color</Typography>
 </Stack>
 ```
 
 ## Component Prop
 
-다른 HTML 요소나 React 컴포넌트로 렌더링할 수 있습니다:
+You can render it as a different HTML element or React component:
 
 ```tsx
 <Typography level="h1" component="h2">
-  h2 태그로 렌더링되는 h1 스타일
+  h1 style rendered as an h2 tag
 </Typography>
 
 <Typography level="body-md" component="span">
-  인라인 텍스트
+  Inline text
 </Typography>
 
 <Typography level="title-md" component={Link} href="/page">
-  링크 컴포넌트로 렌더링
+  Rendered as a Link component
 </Typography>
 ```
 
 ## Responsive Typography
 
-반응형 레벨을 사용할 수 있습니다:
+You can use responsive levels:
 
 ```tsx
 <Typography
@@ -236,36 +236,36 @@ Typography는 다양한 색상을 지원합니다:
     fontSize: { xs: '1.5rem', sm: '2rem', md: '2.5rem' }
   }}
 >
-  반응형 제목
+  Responsive Heading
 </Typography>
 ```
 
 ## Best Practices
 
-1. **의미적 구조**: 제목 레벨을 순서대로 사용하여 명확한 문서 구조를 만드세요.
+1. **Semantic Structure**: Use heading levels in order to create a clear document structure.
 
 ```tsx
-// ✅ 올바른 순서
-<Typography level="h1">메인 제목</Typography>
-<Typography level="h2">섹션 제목</Typography>
-<Typography level="h3">하위 섹션</Typography>
-
-// ❌ 잘못된 순서
-<Typography level="h1">메인 제목</Typography>
-<Typography level="h3">섹션 제목</Typography>
+// ✅ Correct order
+<Typography level="h1">Main heading</Typography>
+<Typography level="h2">Section heading</Typography>
+<Typography level="h3">Subsection</Typography>
+
+// ❌ Incorrect order
+<Typography level="h1">Main heading</Typography>
+<Typography level="h3">Section heading</Typography>
 ```
 
-2. **일관성**: 같은 용도의 텍스트에는 같은 레벨을 사용하세요.
+2. **Consistency**: Use the same level for text serving the same purpose.
 
-3. **가독성**: 본문 텍스트에는 적절한 줄 간격과 문단 구분을 제공하세요.
+3. **Readability**: Provide proper line spacing and paragraph separation for body text.
 
-4. **색상 대비**: 충분한 색상 대비를 유지하여 접근성을 보장하세요.
+4. **Color Contrast**: Maintain sufficient color contrast to ensure accessibility.
 
 ## Accessibility
 
-- 적절한 HTML 시맨틱 태그 사용
-- 스크린 리더 지원
-- 키보드 탐색 가능 (링크나 버튼으로 사용될 때)
-- 충분한 색상 대비
+- Use appropriate semantic HTML tags
+- Support screen readers
+- Ensure keyboard navigation (when used as a link or button)
+- Maintain sufficient color contrast
 
-Typography는 사용자 인터페이스에서 정보를 효과적으로 전달하고 시각적 계층 구조를 만드는 데 핵심적인 역할을 합니다. 적절한 레벨과 스타일을 선택하여 읽기 쉽고 접근 가능한 콘텐츠를 만들 수 있습니다.
+Typography plays a key role in effectively conveying information and creating visual hierarchy in user interfaces. By choosing appropriate levels and styles, you can create content that is easy to read and accessible.

package/dist/components/feedback/Dialog.md

@@ -43,9 +43,7 @@ function ConfirmationDialog({ open, onClose, onConfirm }) {
             <Button variant="plain" color="neutral" onClick={onClose}>
               Cancel
             </Button>
-            <Button onClick={onConfirm}>
-              Confirm
-            </Button>
+            <Button onClick={onConfirm}>Confirm</Button>
           </>
         }
       >
@@ -94,6 +92,57 @@ Dialog Content
 </DialogFrame>
 ```
 
+### Standalone Usage
+
+DialogFrame can be used without a Modal wrapper for embedding dialog-style layouts directly within a page.
+
+> ⚠️ **Important** ⚠️
+>
+> When using DialogFrame without Modal, the parent container **must** provide explicit `width` and `height` values.
+> DialogFrame inherits its dimensions from `ModalDialog`, which normally receives sizing from the Modal overlay.
+> Without these constraints, the component will not render with correct dimensions.
+
+```tsx
+<Box sx={{
+  width: 480,
+  height: 300
+}}>
+<DialogFrame {...args} title="Standalone Dialog" actions={<>
+  <Button variant="plain" color="neutral">
+    Cancel
+  </Button>
+  <Button variant="plain">Confirm</Button>
+</>}>
+DialogFrame used without Modal. The parent container must provide explicit width and height.
+</DialogFrame>
+</Box>
+```
+
+```tsx
+import { DialogFrame, Button, Box } from '@ceed/ads';
+
+// Standalone usage requires explicit container dimensions
+function EmbeddedDialog() {
+  return (
+    <Box sx={{ width: 480, height: 300 }}>
+      <DialogFrame
+        title="Settings"
+        actions={
+          <>
+            <Button variant="plain" color="neutral">
+              Cancel
+            </Button>
+            <Button>Save</Button>
+          </>
+        }
+      >
+        This dialog is embedded directly in the page layout.
+      </DialogFrame>
+    </Box>
+  );
+}
+```
+
 ## When to Use
 
 ### ✅ Good Use Cases
@@ -177,21 +226,11 @@ function QuickAddDialog({ open, onClose, onSubmit }) {
         <Stack gap={2}>
           <FormControl>
             <FormLabel>Name</FormLabel>
-            <Input
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Enter name"
-              autoFocus
-            />
+            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter name" autoFocus />
           </FormControl>
           <FormControl>
             <FormLabel>Email</FormLabel>
-            <Input
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="Enter email"
-            />
+            <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Enter email" />
           </FormControl>
         </Stack>
       </DialogFrame>
@@ -216,15 +255,11 @@ function UnsavedChangesDialog({ open, onClose, onDiscard, onSave }) {
             <Button variant="outlined" color="danger" onClick={onDiscard}>
               Discard
             </Button>
-            <Button onClick={onSave}>
-              Save Changes
-            </Button>
+            <Button onClick={onSave}>Save Changes</Button>
           </>
         }
       >
-        <Typography>
-          You have unsaved changes. Would you like to save them before leaving?
-        </Typography>
+        <Typography>You have unsaved changes. Would you like to save them before leaving?</Typography>
       </DialogFrame>
     </Modal>
   );
@@ -237,14 +272,7 @@ function UnsavedChangesDialog({ open, onClose, onDiscard, onSave }) {
 function InfoDialog({ open, onClose, title, message }) {
   return (
     <Modal open={open} onClose={onClose}>
-      <DialogFrame
-        title={title}
-        actions={
-          <Button onClick={onClose}>
-            Got it
-          </Button>
-        }
-      >
+      <DialogFrame title={title} actions={<Button onClick={onClose}>Got it</Button>}>
         <Typography>{message}</Typography>
       </DialogFrame>
     </Modal>
@@ -301,18 +329,8 @@ function ProcessingDialog({ open, status, onClose }) {
   return (
     <Modal open={open} onClose={isProcessing ? undefined : onClose}>
       <DialogFrame
-        title={
-          isProcessing ? 'Processing...' :
-          isSuccess ? 'Success!' :
-          'Error'
-        }
-        actions={
-          !isProcessing && (
-            <Button onClick={onClose}>
-              {isSuccess ? 'Done' : 'Try Again'}
-            </Button>
-          )
-        }
+        title={isProcessing ? 'Processing...' : isSuccess ? 'Success!' : 'Error'}
+        actions={!isProcessing && <Button onClick={onClose}>{isSuccess ? 'Done' : 'Try Again'}</Button>}
       >
         <Box sx={{ textAlign: 'center', py: 2 }}>
           {isProcessing && <CircularProgress />}
@@ -457,9 +475,7 @@ DialogFrame should be wrapped in Modal for proper behavior:
 // Fullscreen for complex content or mobile
 <Modal open={open} onClose={onClose}>
   <DialogFrame fullscreen title="Edit Profile">
-    <Box sx={{ p: 2 }}>
-      {/* Large form or content */}
-    </Box>
+    <Box sx={{ p: 2 }}>{/* Large form or content */}</Box>
   </DialogFrame>
 </Modal>
 ```
@@ -500,9 +516,7 @@ DialogFrame inherits accessibility features from Modal:
 
 ```tsx
 // Title provides context
-<DialogFrame title="Confirm Deletion">
-  {/* Content is read after title */}
-</DialogFrame>
+<DialogFrame title="Confirm Deletion">{/* Content is read after title */}</DialogFrame>
 ```
 
 ## Best Practices
@@ -530,9 +544,7 @@ DialogFrame inherits accessibility features from Modal:
 ```tsx
 // ✅ Good: Brief, scannable content
 <DialogFrame title="Delete Project">
-  <Typography>
-    This will permanently delete the project and all its data.
-  </Typography>
+  <Typography>This will permanently delete the project and all its data.</Typography>
 </DialogFrame>
 ```
 
@@ -560,7 +572,7 @@ DialogFrame inherits accessibility features from Modal:
 // ❌ Bad: Dialog for simple feedback
 <DialogFrame title="Success">
   <Typography>Item saved!</Typography>
-</DialogFrame>
+</DialogFrame>;
 
 // ✅ Good: Use Toast
 showToast({ message: 'Item saved!' });
@@ -570,9 +582,7 @@ showToast({ message: 'Item saved!' });
 
 ```tsx
 // ❌ Bad: Complex form in dialog
-<DialogFrame title="Create Account">
-  {/* 20+ form fields */}
-</DialogFrame>
+<DialogFrame title="Create Account">{/* 20+ form fields */}</DialogFrame>
 ```
 
 3. **Don't use vague button labels**: Be specific about actions
@@ -599,9 +609,7 @@ For dialogs with heavy content:
 function HeavyDialog({ open, onClose }) {
   return (
     <Modal open={open} onClose={onClose}>
-      <DialogFrame title="Data Preview">
-        {open && <HeavyDataComponent />}
-      </DialogFrame>
+      <DialogFrame title="Data Preview">{open && <HeavyDataComponent />}</DialogFrame>
     </Modal>
   );
 }
@@ -625,11 +633,13 @@ const handleCancel = useCallback(() => {
 Unmount dialog completely when not needed:
 
 ```tsx
-{open && (
-  <Modal open={open} onClose={onClose}>
-    <DialogFrame>...</DialogFrame>
-  </Modal>
-)}
+{
+  open && (
+    <Modal open={open} onClose={onClose}>
+      <DialogFrame>...</DialogFrame>
+    </Modal>
+  );
+}
 ```
 
 DialogFrame provides a consistent structure for dialog content. Combine it with Modal for proper overlay behavior, keep content concise and actionable, and always provide clear options for users to proceed or cancel.