@ceed/ads 1.29.1 → 1.30.0-next.1

package/dist/components/feedback/Dialog.md

@@ -43,7 +43,9 @@ function ConfirmationDialog({ open, onClose, onConfirm }) {
             <Button variant="plain" color="neutral" onClick={onClose}>
               Cancel
             </Button>
-            <Button onClick={onConfirm}>Confirm</Button>
+            <Button onClick={onConfirm}>
+              Confirm
+            </Button>
           </>
         }
       >
@@ -92,61 +94,6 @@ 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** meet the following requirements:
->
-> - `position: 'relative'` — DialogFrame uses absolute positioning internally
-> - Explicit `width` and `height` — `height` must be an absolute value (e.g., `300`, `'400px'`), not a relative value like `%` or `auto`
->
-> 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={{
-  position: 'relative',
-  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={{ position: 'relative', 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
@@ -230,11 +177,21 @@ 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>
@@ -259,11 +216,15 @@ 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>
   );
@@ -276,7 +237,14 @@ 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>
@@ -333,8 +301,18 @@ 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 />}
@@ -479,7 +457,9 @@ 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>
 ```
@@ -520,7 +500,9 @@ 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
@@ -548,7 +530,9 @@ 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>
 ```
 
@@ -576,7 +560,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!' });
@@ -586,7 +570,9 @@ 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
@@ -613,7 +599,9 @@ 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>
   );
 }
@@ -637,13 +625,11 @@ 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/feedback/Modal.md

@@ -41,7 +41,15 @@ The Modal component is a dialog overlay that appears on top of the main content,
 ## Usage
 
 ```tsx
-import { Modal, ModalDialog, ModalClose, DialogTitle, DialogContent, DialogActions, Button } from '@ceed/ads';
+import {
+  Modal,
+  ModalDialog,
+  ModalClose,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+} from '@ceed/ads';
 
 function MyComponent() {
   const [open, setOpen] = useState(false);
@@ -53,7 +61,9 @@ function MyComponent() {
         <ModalDialog>
           <ModalClose />
           <DialogTitle>Modal Title</DialogTitle>
-          <DialogContent>Place your content here.</DialogContent>
+          <DialogContent>
+            Place your content here.
+          </DialogContent>
           <DialogActions>
             <Button onClick={() => setOpen(false)}>Close</Button>
           </DialogActions>
@@ -64,28 +74,6 @@ function MyComponent() {
 }
 ```
 
-### ModalFrame Usage
-
-`ModalFrame` is a convenience component that combines `ModalDialog` + `ModalClose` + `DialogTitle` + `DialogContent` into a single composable unit.
-It provides a concise way to build modals with a title, close button, and content area.
-
-```tsx
-import { Modal, ModalFrame } from '@ceed/ads';
-
-function DetailModal({ open, onClose }) {
-  return (
-    <Modal open={open} onClose={onClose}>
-      <ModalFrame title="Detail" onClose={onClose}>
-        Content goes here.
-      </ModalFrame>
-    </Modal>
-  );
-}
-```
-
-> **Note**: Connect the same handler to both `Modal`'s `onClose` and `ModalFrame`'s `onClose`.
-> `Modal` handles backdrop click and ESC key, while `ModalFrame` handles the X button click.
-
 ## Examples
 
 ### Basic Modal
@@ -304,166 +292,6 @@ Modals can be stacked on top of each other when necessary.
 </>
 ```
 
-### ModalFrame
-
-ModalFrame is a convenience component that automatically provides a title, close button, and content area.
-
-#### ModalFrame Playground
-
-```tsx
-<>
-  <Button onClick={() => setOpen(true)}>Open ModalFrame</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalFrame title="ModalFrame Title" onClose={() => setOpen(false)}>
-      <Typography>
-        ModalFrame automatically composes ModalDialog, ModalClose, DialogTitle, and DialogContent. You only need
-        to provide a title, onClose handler, and children.
-      </Typography>
-    </ModalFrame>
-  </Modal>
-</>
-```
-
-#### titleStartDecorator
-
-Display an icon or decorative element before the title.
-
-```tsx
-<>
-  <Button onClick={() => setOpen(true)}>With Decorator</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalFrame title="Details" titleStartDecorator={<InfoOutlinedIcon />} onClose={() => setOpen(false)}>
-      <Typography>
-        Use the <code>titleStartDecorator</code> prop to display an icon or element before the title.
-      </Typography>
-    </ModalFrame>
-  </Modal>
-</>
-```
-
-#### Form Content
-
-An inline form pattern where the submit button lives inside the content area.
-
-```tsx
-<>
-  <Button onClick={() => setOpen(true)}>Form in ModalFrame</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalFrame title="Create Project" onClose={() => setOpen(false)}>
-      <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
-        event.preventDefault();
-        setOpen(false);
-      }}>
-      <Stack spacing={2}>
-        <FormControl>
-          <FormLabel>Name</FormLabel>
-          <Input required />
-        </FormControl>
-        <FormControl>
-          <FormLabel>Description</FormLabel>
-          <Input required />
-        </FormControl>
-        <Button type="submit">Submit</Button>
-      </Stack>
-    </form>
-  </ModalFrame>
-</Modal>
-</>
-```
-
-#### Sizes
-
-Compare sm / md / lg sizes side by side.
-
-```tsx
-<Stack direction="row" spacing={2}>
-  <Button size="sm" onClick={() => setOpenSm(true)}>
-    Small
-  </Button>
-  <Button size="md" onClick={() => setOpenMd(true)}>
-    Medium
-  </Button>
-  <Button size="lg" onClick={() => setOpenLg(true)}>
-    Large
-  </Button>
-  <Modal open={openSm} onClose={() => setOpenSm(false)}>
-    <ModalFrame title="Small ModalFrame" size="sm" onClose={() => setOpenSm(false)}>
-      <Typography>This is a small ModalFrame.</Typography>
-    </ModalFrame>
-  </Modal>
-  <Modal open={openMd} onClose={() => setOpenMd(false)}>
-    <ModalFrame title="Medium ModalFrame" size="md" onClose={() => setOpenMd(false)}>
-      <Typography>This is a medium ModalFrame.</Typography>
-    </ModalFrame>
-  </Modal>
-  <Modal open={openLg} onClose={() => setOpenLg(false)}>
-    <ModalFrame title="Large ModalFrame" size="lg" onClose={() => setOpenLg(false)}>
-      <Typography>This is a large ModalFrame.</Typography>
-    </ModalFrame>
-  </Modal>
-</Stack>
-```
-
-#### Custom Content
-
-A layout example suited for displaying detailed information.
-
-```tsx
-<>
-  <Button onClick={() => setOpen(true)}>Custom Content</Button>
-  <Modal open={open} onClose={() => setOpen(false)}>
-    <ModalFrame title="Order Details" onClose={() => setOpen(false)}>
-      <Stack spacing={2}>
-        <Box>
-          <Typography level="title-sm">Order ID</Typography>
-          <Typography level="body-sm">ORD-2024-00123</Typography>
-        </Box>
-        <Divider />
-        <Box>
-          <Typography level="title-sm">Customer</Typography>
-          <Typography level="body-sm">John Doe</Typography>
-        </Box>
-        <Divider />
-        <Box>
-          <Typography level="title-sm">Status</Typography>
-          <Typography level="body-sm" color="success">
-            Completed
-          </Typography>
-        </Box>
-      </Stack>
-    </ModalFrame>
-  </Modal>
-</>
-```
-
-#### Standalone
-
-ModalFrame can be used without a Modal wrapper for embedding dialog-style layouts directly within a page.
-
-> ⚠️ **Important** ⚠️
->
-> When using ModalFrame without Modal, the parent container **must** meet the following requirements:
->
-> - `position: 'relative'` — ModalFrame uses absolute positioning internally
-> - Explicit `width` and `height` — `height` must be an absolute value (e.g., `300`, `'400px'`), not a relative value like `%` or `auto`
->
-> ModalFrame 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={{
-  position: 'relative',
-  width: 480,
-  height: 300
-}}>
-<ModalFrame title="Standalone ModalFrame" onClose={() => console.log('close')}>
-  <Typography>
-    ModalFrame used without Modal. The parent container must provide
-    explicit width and height.
-  </Typography>
-</ModalFrame>
-</Box>
-```
-
 ## When to Use
 
 ### ✅ Good Use Cases
@@ -499,7 +327,8 @@ function DeleteConfirmation({ item, onDelete, onCancel }) {
         </DialogTitle>
         <Divider />
         <DialogContent>
-          This action cannot be undone. All data associated with this item will be permanently removed.
+          This action cannot be undone. All data associated with this item
+          will be permanently removed.
         </DialogContent>
         <DialogActions>
           <Button variant="solid" color="danger" onClick={onDelete}>
@@ -575,7 +404,8 @@ function TermsModal({ open, onAccept, onDecline }) {
         <DialogTitle>Terms of Service</DialogTitle>
         <DialogContent>
           <Typography level="body-sm">
-            Please read and accept the following terms and conditions before proceeding...
+            Please read and accept the following terms and conditions before
+            proceeding...
           </Typography>
           {/* Terms content */}
         </DialogContent>
@@ -603,7 +433,11 @@ function ImagePreviewModal({ image, open, onClose }) {
     <Modal open={open} onClose={onClose}>
       <ModalDialog layout="center" sx={{ p: 0, overflow: 'hidden' }}>
         <ModalClose sx={{ top: 8, right: 8, zIndex: 1 }} />
-        <img src={image.src} alt={image.alt} style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain' }} />
+        <img
+          src={image.src}
+          alt={image.alt}
+          style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain' }}
+        />
       </ModalDialog>
     </Modal>
   );
@@ -634,69 +468,22 @@ function LoadingModal({ open, message }) {
 Modal uses a composition pattern with multiple sub-components:
 
 ```tsx
-<Modal>
-  {/* Overlay and backdrop */}
-  <ModalDialog>
-    {/* Dialog container */}
-    <ModalClose /> {/* Close button (optional) */}
-    <DialogTitle>
-      {/* Header */}
+<Modal>                    {/* Overlay and backdrop */}
+  <ModalDialog>            {/* Dialog container */}
+    <ModalClose />         {/* Close button (optional) */}
+    <DialogTitle>          {/* Header */}
       Title
     </DialogTitle>
-    <DialogContent>
-      {/* Body */}
+    <DialogContent>        {/* Body */}
       Content goes here
     </DialogContent>
-    <DialogActions>
-      {/* Footer */}
+    <DialogActions>        {/* Footer */}
       <Button>Action</Button>
     </DialogActions>
   </ModalDialog>
 </Modal>
 ```
 
-## Component Roles
-
-| Component         | Role                                                            | When to Use                                                      |
-| ----------------- | --------------------------------------------------------------- | ---------------------------------------------------------------- |
-| **Modal**         | Overlay backdrop, open/close state management                   | Always required as the outermost wrapper                         |
-| **ModalDialog**   | Dialog container (variant/size/layout)                          | When you need direct control over layout                         |
-| **ModalClose**    | Close (X) button in the top-right corner                        | When users should be able to close via a button                  |
-| **ModalOverflow** | Scrollable area                                                 | When content exceeds the viewport                                |
-| **ModalFrame**    | Combines ModalDialog + ModalClose + DialogTitle + DialogContent | When you only need a title + close + content (no action buttons) |
-| **DialogTitle**   | Header area (styled padding)                                    | When composing manually                                          |
-| **DialogContent** | Body area (styled padding)                                      | When composing manually                                          |
-| **DialogActions** | Footer action button area                                       | When confirm/cancel buttons are needed                           |
-
-## Choosing the Right Component
-
-### ModalFrame vs DialogFrame
-
-|                    | ModalFrame                                      | DialogFrame                             |
-| ------------------ | ----------------------------------------------- | --------------------------------------- |
-| Close (X) button   | Built-in                                        | None                                    |
-| Title decorator    | `titleStartDecorator`                           | None                                    |
-| Action button area | None                                            | `actions` prop (required)               |
-| Fullscreen         | `layout="fullscreen"`                           | `fullscreen` prop                       |
-| Best for           | Information display, detail views, inline forms | Confirm/cancel dialogs, decision-making |
-
-### Use ModalFrame when
-
-- You need an informational modal with a close button (detail views, previews)
-- The form's submit button lives inside the content area
-- You need an icon next to the title
-
-### Use DialogFrame when
-
-- Explicit action buttons (confirm/cancel) must be pinned to the bottom
-- User decisions are required (delete confirmation, save confirmation)
-- Only explicit choices should be allowed without a close (X) button
-
-### Use manual composition when
-
-- You need a custom layout that doesn't fit the ModalFrame/DialogFrame pattern
-- You want to use both ModalClose and DialogActions together
-
 ## Props and Customization
 
 ### Modal Props
@@ -718,17 +505,6 @@ Modal uses a composition pattern with multiple sub-components:
 | `size`    | `'sm' \| 'md' \| 'lg'`                                         | `'md'`       | Dialog size  |
 | `layout`  | `'center' \| 'fullscreen'`                                     | `'center'`   | Layout mode  |
 
-### ModalFrame Props
-
-| Prop                  | Type         | Default | Description                                |
-| --------------------- | ------------ | ------- | ------------------------------------------ |
-| `title`               | `ReactNode`  | -       | Title displayed in the header              |
-| `children`            | `ReactNode`  | -       | Body content                               |
-| `titleStartDecorator` | `ReactNode`  | -       | Icon or element displayed before the title |
-| `onClose`             | `() => void` | -       | Callback when the close button is clicked  |
-
-ModalFrame accepts all ModalDialog props (`variant`, `color`, `size`, `layout`, `sx`, etc.).
-
 ### Custom Styling
 
 ```tsx
@@ -767,10 +543,17 @@ Modal components include comprehensive accessibility features:
 - `aria-describedby` connects to DialogContent
 
 ```tsx
-<Modal open={open} onClose={onClose} aria-labelledby="modal-title" aria-describedby="modal-description">
+<Modal
+  open={open}
+  onClose={onClose}
+  aria-labelledby="modal-title"
+  aria-describedby="modal-description"
+>
   <ModalDialog>
     <DialogTitle id="modal-title">Accessible Title</DialogTitle>
-    <DialogContent id="modal-description">This content is read by screen readers.</DialogContent>
+    <DialogContent id="modal-description">
+      This content is read by screen readers.
+    </DialogContent>
   </ModalDialog>
 </Modal>
 ```
@@ -799,9 +582,7 @@ Modal components include comprehensive accessibility features:
 ```tsx
 // ✅ Good: Clear action buttons
 <DialogActions>
-  <Button variant="solid" color="danger">
-    Delete
-  </Button>
+  <Button variant="solid" color="danger">Delete</Button>
   <Button variant="plain">Cancel</Button>
 </DialogActions>
 ```
@@ -876,11 +657,15 @@ Use `keepMounted` only when the modal needs to preserve state between openings:
 Memoize modal content when it depends on complex data:
 
 ```tsx
-const modalContent = useMemo(() => <ComplexContent data={data} />, [data]);
+const modalContent = useMemo(() => (
+  <ComplexContent data={data} />
+), [data]);
 
 <Modal open={open} onClose={onClose}>
-  <ModalDialog>{modalContent}</ModalDialog>
-</Modal>;
+  <ModalDialog>
+    {modalContent}
+  </ModalDialog>
+</Modal>
 ```
 
 Modal is a powerful component for focused user interactions. Use it thoughtfully to maintain a smooth user experience while capturing important decisions and inputs.

package/dist/components/feedback/llms.txt

@@ -3,10 +3,8 @@
 ## Documentation
 
 - [Alert](./Alert.md)
-- [CircularProgress](./CircularProgress.md)
 - [DialogFrame](./Dialog.md)
 - [Modal](./Modal.md)
-- [Skeleton](./Skeleton.md)
 
 ## Parent
 

package/dist/components/index.d.ts

@@ -49,6 +49,8 @@ export { ProfileMenu } from './ProfileMenu';
 export { Radio, RadioGroup } from './Radio';
 export { RadioTileGroup } from './RadioTileGroup';
 export { RadioList } from './RadioList';
+export { SearchBar } from './SearchBar';
+export type { SearchBarOption, SearchBarProps } from './SearchBar';
 export { Select, Option } from './Select';
 export { Sheet } from './Sheet';
 export { Stack } from './Stack';