@cere/cere-design-system 0.0.4 → 0.0.6

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
 import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
 import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab';
-import { ButtonGroupProps as ButtonGroupProps$1, SelectProps, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, StepperProps as StepperProps$1, StepProps as StepProps$1, StepLabelProps as StepLabelProps$1, StepContentProps as StepContentProps$1, StepButtonProps as StepButtonProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1, BoxProps } from '@mui/material';
+import { ButtonGroupProps as ButtonGroupProps$1, SelectProps, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, StepperProps as StepperProps$1, StepProps as StepProps$1, StepLabelProps as StepLabelProps$1, StepContentProps as StepContentProps$1, StepButtonProps as StepButtonProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, BoxProps, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1 } from '@mui/material';
 export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid, Grid2Props, GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
 import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
 import { SwitchProps as SwitchProps$1 } from '@mui/material/Switch';
@@ -306,6 +306,14 @@ interface ServiceSelectorButtonProps {
      * @default 350
      */
     panelWidth?: number;
+    /**
+     * Callback when Settings button is clicked
+     */
+    onOpenSettings?: (serviceId: string) => void;
+    /**
+     * Callback when Add Member button is clicked
+     */
+    onOpenAddMember?: (serviceId: string) => void;
 }
 declare const ServiceSelectorButton: React.FC<ServiceSelectorButtonProps>;
 
@@ -491,10 +499,10 @@ interface DialogProps extends Omit<DialogProps$1, 'title'> {
 }
 declare const Dialog: React.FC<DialogProps>;
 
-interface DrawerProps extends DrawerProps$1 {
+interface DrawerProps extends Omit<DrawerProps$1, 'title'> {
     /**
      * Width of the drawer when open
-     * @default 240
+     * @default 400 for temporary/temporary variant, 240 for permanent
      */
     width?: number;
     /**
@@ -507,16 +515,73 @@ interface DrawerProps extends DrawerProps$1 {
      * @default false
      */
     collapsed?: boolean;
+    /**
+     * Title to display in the drawer header
+     */
+    title?: ReactNode;
+    /**
+     * Custom header content (replaces title if provided)
+     */
+    header?: ReactNode;
+    /**
+     * Show close button in header
+     * @default true for temporary variant, false for permanent
+     */
+    showCloseButton?: boolean;
+    /**
+     * Tab labels for tabbed drawer content
+     */
+    tabs?: string[];
+    /**
+     * Active tab index
+     */
+    activeTab?: number;
+    /**
+     * Callback when tab changes
+     */
+    onTabChange?: (index: number) => void;
+    /**
+     * Footer content (actions, buttons, etc.)
+     */
+    footer?: ReactNode;
+    /**
+     * Props for drawer content container
+     */
+    contentProps?: BoxProps;
+    /**
+     * Anchor position
+     * @default 'right'
+     */
+    anchor?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * Top offset in pixels (e.g., for header + breadcrumbs)
+     * @default 0
+     */
+    topOffset?: number;
 }
 /**
  * Drawer component for navigation drawers and side panels
+ * Can be used as a replacement for Dialog for better UX
  *
  * @example
  * ```tsx
- * <Drawer open={true} variant="permanent" width={240}>
- *   <List>
- *     <ListItem>Item 1</ListItem>
- *   </List>
+ * // Simple drawer
+ * <Drawer open={true} variant="temporary" width={400} title="Settings" onClose={handleClose}>
+ *   <Box p={2}>Content here</Box>
+ * </Drawer>
+ *
+ * // Drawer with tabs
+ * <Drawer
+ *   open={true}
+ *   variant="temporary"
+ *   width={600}
+ *   title="Edit Stream"
+ *   tabs={['General', 'Rules', 'Settings']}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ *   onClose={handleClose}
+ * >
+ *   <Box p={2}>{tabContent}</Box>
  * </Drawer>
  * ```
  */

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
 import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
 import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab';
-import { ButtonGroupProps as ButtonGroupProps$1, SelectProps, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, StepperProps as StepperProps$1, StepProps as StepProps$1, StepLabelProps as StepLabelProps$1, StepContentProps as StepContentProps$1, StepButtonProps as StepButtonProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1, BoxProps } from '@mui/material';
+import { ButtonGroupProps as ButtonGroupProps$1, SelectProps, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, StepperProps as StepperProps$1, StepProps as StepProps$1, StepLabelProps as StepLabelProps$1, StepContentProps as StepContentProps$1, StepButtonProps as StepButtonProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, BoxProps, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1 } from '@mui/material';
 export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid, Grid2Props, GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
 import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
 import { SwitchProps as SwitchProps$1 } from '@mui/material/Switch';
@@ -306,6 +306,14 @@ interface ServiceSelectorButtonProps {
      * @default 350
      */
     panelWidth?: number;
+    /**
+     * Callback when Settings button is clicked
+     */
+    onOpenSettings?: (serviceId: string) => void;
+    /**
+     * Callback when Add Member button is clicked
+     */
+    onOpenAddMember?: (serviceId: string) => void;
 }
 declare const ServiceSelectorButton: React.FC<ServiceSelectorButtonProps>;
 
@@ -491,10 +499,10 @@ interface DialogProps extends Omit<DialogProps$1, 'title'> {
 }
 declare const Dialog: React.FC<DialogProps>;
 
-interface DrawerProps extends DrawerProps$1 {
+interface DrawerProps extends Omit<DrawerProps$1, 'title'> {
     /**
      * Width of the drawer when open
-     * @default 240
+     * @default 400 for temporary/temporary variant, 240 for permanent
      */
     width?: number;
     /**
@@ -507,16 +515,73 @@ interface DrawerProps extends DrawerProps$1 {
      * @default false
      */
     collapsed?: boolean;
+    /**
+     * Title to display in the drawer header
+     */
+    title?: ReactNode;
+    /**
+     * Custom header content (replaces title if provided)
+     */
+    header?: ReactNode;
+    /**
+     * Show close button in header
+     * @default true for temporary variant, false for permanent
+     */
+    showCloseButton?: boolean;
+    /**
+     * Tab labels for tabbed drawer content
+     */
+    tabs?: string[];
+    /**
+     * Active tab index
+     */
+    activeTab?: number;
+    /**
+     * Callback when tab changes
+     */
+    onTabChange?: (index: number) => void;
+    /**
+     * Footer content (actions, buttons, etc.)
+     */
+    footer?: ReactNode;
+    /**
+     * Props for drawer content container
+     */
+    contentProps?: BoxProps;
+    /**
+     * Anchor position
+     * @default 'right'
+     */
+    anchor?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * Top offset in pixels (e.g., for header + breadcrumbs)
+     * @default 0
+     */
+    topOffset?: number;
 }
 /**
  * Drawer component for navigation drawers and side panels
+ * Can be used as a replacement for Dialog for better UX
  *
  * @example
  * ```tsx
- * <Drawer open={true} variant="permanent" width={240}>
- *   <List>
- *     <ListItem>Item 1</ListItem>
- *   </List>
+ * // Simple drawer
+ * <Drawer open={true} variant="temporary" width={400} title="Settings" onClose={handleClose}>
+ *   <Box p={2}>Content here</Box>
+ * </Drawer>
+ *
+ * // Drawer with tabs
+ * <Drawer
+ *   open={true}
+ *   variant="temporary"
+ *   width={600}
+ *   title="Edit Stream"
+ *   tabs={['General', 'Rules', 'Settings']}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ *   onClose={handleClose}
+ * >
+ *   <Box p={2}>{tabContent}</Box>
  * </Drawer>
  * ```
  */