@ceed/cds 1.21.0 → 1.22.0

package/dist/components/RadioTileGroup/RadioTileGroup.d.ts

@@ -0,0 +1,56 @@
+import React, { ReactNode } from 'react';
+import type { SxProps } from '@mui/joy/styles/types';
+export interface RadioTileOption<T = string> {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean;
+    startDecorator?: ReactNode;
+}
+export interface RadioTileGroupProps<T = string> {
+    /**
+     * @default 'sm'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    options: RadioTileOption<T>[];
+    value?: T;
+    defaultValue?: T;
+    name?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    sx?: SxProps;
+    disabled?: boolean;
+    className?: string;
+    useIndicator?: boolean;
+    flex?: boolean;
+    /**
+     * 지정하지 않으면 한 row에 모든 옵션이 렌더링된다.
+     * - 특정 rows 이내로 렌더링 하고 싶으면 `columns: Math.ceil(options.length / 원하는 rows)`로 설정할 수 있다.
+     * - 수직으로 렌더링 하고 싶으면 `columns: 1`로 설정할 수 있다.
+     * - `flex` 옵션과 함께 사용할수 있다.
+     */
+    columns?: number;
+    /**
+     * @default 'center'
+     */
+    textAlign?: 'start' | 'center';
+    /**
+     * Label for the RadioTileGroup
+     */
+    label?: React.ReactNode;
+    /**
+     * Helper text for the RadioTileGroup
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Whether the RadioTileGroup has an error
+     */
+    error?: boolean;
+    /**
+     * Whether the RadioTileGroup is required
+     */
+    required?: boolean;
+}
+declare function RadioTileGroup<T extends string | number = string>(props: RadioTileGroupProps<T>): React.JSX.Element;
+declare namespace RadioTileGroup {
+    var displayName: string;
+}
+export { RadioTileGroup };

package/dist/components/RadioTileGroup/index.d.ts

@@ -0,0 +1,3 @@
+import { RadioTileGroup } from './RadioTileGroup';
+export * from './RadioTileGroup';
+export default RadioTileGroup;

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/cds';
+
+// 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.

package/dist/components/index.d.ts

@@ -43,6 +43,7 @@ export { Navigator } from './Navigator';
 export { Pagination } from './Pagination';
 export { PercentageInput } from './PercentageInput';
 export { Radio, RadioGroup } from './Radio';
+export { RadioTileGroup } from './RadioTileGroup';
 export { RadioList } from './RadioList';
 export { Select, Option } from './Select';
 export { Sheet } from './Sheet';