@ceed/cds 1.34.1 → 1.35.0

package/dist/components/feedback/Skeleton.md

@@ -36,10 +36,10 @@ Skeleton supports three variants: `rectangular`, `circular`, and `text`.
 
 ```tsx
 <>
-  <Skeleton variant="rectangular" width={200} height={24} />
-  <Skeleton variant="circular" width={48} height={48} />
-  <Skeleton variant="text" width={200} />
-</>
+    <Skeleton variant="rectangular" width={200} height={24} />
+    <Skeleton variant="circular" width={48} height={48} />
+    <Skeleton variant="text" width={200} />
+  </>
 ```
 
 ```tsx
@@ -54,31 +54,40 @@ Skeleton supports `wave` (default) and `pulse` animations. Set `animation={false
 
 ```tsx
 <Stack gap={3}>
-  <Box>
-    <Typography level="body-sm" sx={{
-      mb: 1
-    }}>
-    Wave (default)
-  </Typography>
-  <Skeleton animation="wave" variant="rectangular" width={200} height={24} />
-</Box>
-<Box>
-  <Typography level="body-sm" sx={{
-    mb: 1
-  }}>
-  Pulse
-</Typography>
-<Skeleton animation="pulse" variant="rectangular" width={200} height={24} />
-</Box>
-<Box>
-  <Typography level="body-sm" sx={{
-    mb: 1
-  }}>
-  No animation (false)
-</Typography>
-<Skeleton animation={false} variant="rectangular" width={200} height={24} />
-</Box>
-</Stack>
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Wave (default)
+      </Typography>
+      <Skeleton animation="wave" variant="rectangular" width={200} height={24} />
+    </Box>
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        Pulse
+      </Typography>
+      <Skeleton animation="pulse" variant="rectangular" width={200} height={24} />
+    </Box>
+    <Box>
+      <Typography
+        level="body-sm"
+        sx={{
+          mb: 1
+        }}
+      >
+        No animation (false)
+      </Typography>
+      <Skeleton animation={false} variant="rectangular" width={200} height={24} />
+    </Box>
+  </Stack>
 ```
 
 ```tsx
@@ -92,14 +101,17 @@ Skeleton supports `wave` (default) and `pulse` animations. Set `animation={false
 Use `variant="text"` with the `level` prop to match Typography sizing. This is useful for creating text content placeholders that accurately reflect the final layout.
 
 ```tsx
-<Stack gap={1} sx={{
-  width: 300
-}}>
-<Skeleton variant="text" level="h3" />
-<Skeleton variant="text" level="body-md" />
-<Skeleton variant="text" level="body-md" />
-<Skeleton variant="text" level="body-md" width="80%" />
-</Stack>
+<Stack
+    gap={1}
+    sx={{
+      width: 300
+    }}
+  >
+    <Skeleton variant="text" level="h3" />
+    <Skeleton variant="text" level="body-md" />
+    <Skeleton variant="text" level="body-md" />
+    <Skeleton variant="text" level="body-md" width="80%" />
+  </Stack>
 ```
 
 ```tsx
@@ -114,33 +126,58 @@ Use `variant="text"` with the `level` prop to match Typography sizing. This is u
 Compose multiple Skeleton elements to create placeholder layouts for complex components like cards.
 
 ```tsx
-<Box sx={{
-  width: 300,
-  p: 2,
-  border: '1px solid',
-  borderColor: 'divider',
-  borderRadius: 'sm'
-}}>
-<Skeleton variant="rectangular" width="100%" height={140} sx={{
-  borderRadius: 'sm',
-  mb: 2
-}} />
-<Skeleton variant="text" level="title-md" sx={{
-  mb: 1
-}} />
-<Skeleton variant="text" level="body-sm" />
-<Skeleton variant="text" level="body-sm" width="60%" />
-<Stack direction="row" gap={1} sx={{
-  mt: 2
-}}>
-<Skeleton variant="rectangular" width={80} height={32} sx={{
-  borderRadius: 'sm'
-}} />
-<Skeleton variant="rectangular" width={80} height={32} sx={{
-  borderRadius: 'sm'
-}} />
-</Stack>
-</Box>
+<Box
+    sx={{
+      width: 300,
+      p: 2,
+      border: "1px solid",
+      borderColor: "divider",
+      borderRadius: "sm"
+    }}
+  >
+    <Skeleton
+      variant="rectangular"
+      width="100%"
+      height={140}
+      sx={{
+        borderRadius: "sm",
+        mb: 2
+      }}
+    />
+    <Skeleton
+      variant="text"
+      level="title-md"
+      sx={{
+        mb: 1
+      }}
+    />
+    <Skeleton variant="text" level="body-sm" />
+    <Skeleton variant="text" level="body-sm" width="60%" />
+    <Stack
+      direction="row"
+      gap={1}
+      sx={{
+        mt: 2
+      }}
+    >
+      <Skeleton
+        variant="rectangular"
+        width={80}
+        height={32}
+        sx={{
+          borderRadius: "sm"
+        }}
+      />
+      <Skeleton
+        variant="rectangular"
+        width={80}
+        height={32}
+        sx={{
+          borderRadius: "sm"
+        }}
+      />
+    </Stack>
+  </Box>
 ```
 
 ## Data Loading List
@@ -148,19 +185,26 @@ Compose multiple Skeleton elements to create placeholder layouts for complex com
 Combine circular and text skeletons to represent list items during loading.
 
 ```tsx
-<Stack gap={2} sx={{
-  width: 400
-}}>
-{[1, 2, 3].map(i => <Stack key={i} direction="row" gap={2} alignItems="center">
-<Skeleton variant="circular" width={40} height={40} />
-<Box sx={{
-  flex: 1
-}}>
-<Skeleton variant="text" level="title-sm" width="60%" />
-<Skeleton variant="text" level="body-xs" width="40%" />
-</Box>
-</Stack>)}
-</Stack>
+<Stack
+    gap={2}
+    sx={{
+      width: 400
+    }}
+  >
+    {[1, 2, 3].map((i) => (
+      <Stack key={i} direction="row" gap={2} alignItems="center">
+        <Skeleton variant="circular" width={40} height={40} />
+        <Box
+          sx={{
+            flex: 1
+          }}
+        >
+          <Skeleton variant="text" level="title-sm" width="60%" />
+          <Skeleton variant="text" level="body-xs" width="40%" />
+        </Box>
+      </Stack>
+    ))}
+  </Stack>
 ```
 
 ## Inline Wrapping
@@ -169,17 +213,13 @@ Wrap existing content with Skeleton to overlay it while loading. Set the `loadin
 
 ```tsx
 <Typography level="body-md">
-  <Skeleton loading>
-    This text will be hidden behind a skeleton while loading.
-  </Skeleton>
-</Typography>
+    <Skeleton loading>This text will be hidden behind a skeleton while loading.</Skeleton>
+  </Typography>
 ```
 
 ```tsx
 <Typography level="body-md">
-  <Skeleton loading>
-    This text will be hidden behind a skeleton while loading.
-  </Skeleton>
+  <Skeleton loading>This text will be hidden behind a skeleton while loading.</Skeleton>
 </Typography>
 ```
 
@@ -231,11 +271,7 @@ function UserListSkeleton({ count = 5 }: { count?: number }) {
 function UserProfile({ loading, user }: { loading: boolean; user?: User }) {
   return (
     <Stack direction="row" gap={2} alignItems="center">
-      {loading ? (
-        <Skeleton variant="circular" width={48} height={48} />
-      ) : (
-        <Avatar src={user?.avatar} />
-      )}
+      {loading ? <Skeleton variant="circular" width={48} height={48} /> : <Avatar src={user?.avatar} />}
       <Box>
         <Typography level="title-md">
           <Skeleton loading={loading}>{user?.name || 'Placeholder Name'}</Skeleton>

package/dist/components/index.d.ts

@@ -1,60 +1,120 @@
 export { Accordion, AccordionDetails, Accordions, AccordionSummary } from './Accordions';
+export type * from './Accordions';
 export { Alert } from './Alert';
+export type * from './Alert';
 export { Autocomplete } from './Autocomplete';
+export type * from './Autocomplete';
 export { Avatar, AvatarGroup } from './Avatar';
+export type * from './Avatar';
 export { Box } from './Box';
+export type * from './Box';
 export { Breadcrumbs } from './Breadcrumbs';
+export type * from './Breadcrumbs';
 export { Button } from './Button';
+export type * from './Button';
 export { Calendar } from './Calendar';
-export { Card } from './Card';
+export type * from './Calendar';
+export { Card, CardActions, CardContent, CardCover, CardOverflow } from './Card';
+export type * from './Card';
 export { Checkbox } from './Checkbox';
+export type * from './Checkbox';
+export { Chip } from './Chip';
+export type * from './Chip';
 export { Container } from './Container';
+export type * from './Container';
 export { CurrencyInput } from './CurrencyInput';
+export type * from './CurrencyInput';
 export { DataTable } from './DataTable';
+export type * from './DataTable';
 export type * from './DataTable/types';
 export { DatePicker } from './DatePicker';
+export type * from './DatePicker';
 export { DateRangePicker } from './DateRangePicker';
+export type * from './DateRangePicker';
 export { Drawer } from './Drawer';
+export type * from './Drawer';
 export { DialogActions } from './DialogActions';
+export type * from './DialogActions';
 export { DialogContent } from './DialogContent';
+export type * from './DialogContent';
 export { DialogTitle } from './DialogTitle';
+export type * from './DialogTitle';
 export { DialogFrame } from './DialogFrame';
+export type * from './DialogFrame';
 export { Divider } from './Divider';
+export type * from './Divider';
 export { InsetDrawer } from './InsetDrawer';
-export { Dropdown } from './Dropdown';
+export type * from './InsetDrawer';
+export { Dropdown, MenuButtonTrigger, useMenuButton } from './Dropdown';
+export type * from './Dropdown';
 export { FilterableCheckboxGroup } from './FilterableCheckboxGroup';
+export type * from './FilterableCheckboxGroup';
 export { FormControl } from './FormControl';
+export type * from './FormControl';
 export { FormHelperText } from './FormHelperText';
+export type * from './FormHelperText';
 export { FormLabel } from './FormLabel';
+export type * from './FormLabel';
 export { Grid } from './Grid';
+export type * from './Grid';
 export { IconButton } from './IconButton';
+export type * from './IconButton';
 export { IconMenuButton } from './IconMenuButton';
+export type * from './IconMenuButton';
 export { InfoSign } from './InfoSign';
+export type * from './InfoSign';
 export { Input } from './Input';
+export type * from './Input';
 export { Markdown } from './Markdown';
+export type * from './Markdown';
 export { Menu, MenuItem } from './Menu';
+export type * from './Menu';
 export { MenuButton } from './MenuButton';
+export type * from './MenuButton';
 export { Modal, ModalClose, ModalDialog, ModalOverflow, ModalFrame } from './Modal';
+export type * from './Modal';
 export { MonthPicker } from './MonthPicker';
+export type * from './MonthPicker';
 export { MonthRangePicker } from './MonthRangePicker';
+export type * from './MonthRangePicker';
 export { NavigationGroup } from './NavigationGroup';
+export type * from './NavigationGroup';
 export { NavigationItem } from './NavigationItem';
+export type * from './NavigationItem';
 export { Navigator } from './Navigator';
+export type * from './Navigator';
 export { Pagination } from './Pagination';
+export type * from './Pagination';
 export { PercentageInput } from './PercentageInput';
+export type * from './PercentageInput';
 export { Radio, RadioGroup } from './Radio';
+export type * from './Radio';
 export { RadioTileGroup } from './RadioTileGroup';
+export type * from './RadioTileGroup';
 export { RadioList } from './RadioList';
+export type * from './RadioList';
 export { SearchBar, type SearchBarProps, type SearchBarOwnerState, type SearchBarSlot, type SearchBarOption, } from './SearchBar';
 export { Select, Option } from './Select';
+export type * from './Select';
 export { Sheet } from './Sheet';
+export type * from './Sheet';
 export { Stack } from './Stack';
+export type * from './Stack';
 export { Stepper, Step, StepIndicator } from './Stepper';
+export type * from './Stepper';
 export { Switch } from './Switch';
+export type * from './Switch';
 export { Table, TableHead, TableBody } from './Table';
+export type * from './Table';
 export { Tabs, Tab, TabList, TabPanel } from './Tabs';
+export type * from './Tabs';
 export { Textarea } from './Textarea';
+export type * from './Textarea';
 export { ThemeProvider, CssBaseline, theme, extendTheme } from './ThemeProvider';
+export type * from './ThemeProvider';
 export { Tooltip } from './Tooltip';
+export type * from './Tooltip';
 export { Typography } from './Typography';
+export type * from './Typography';
 export { Uploader } from './Uploader';
+export type * from './Uploader';