@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/avatar.d.ts

@@ -0,0 +1,253 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import react__default from 'react';
+import _mui_material_IconButton from '@mui/material/IconButton';
+import { TooltipProps } from '@mui/material/Tooltip';
+import { SxProps, Theme } from '@mui/material/styles';
+import MuiBadge from '@mui/material/Badge';
+
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+declare const AVATARBUTTON_STANDARD_DIMENSIONs: {
+    readonly xs: "36px";
+    readonly sm: "100px";
+    readonly md: "120px";
+    readonly lg: "200px";
+    readonly xl: "240px";
+};
+declare const AVATAR_SIZEs: {
+    readonly xs: "20px";
+    readonly sm: "24px";
+    readonly md: "40px";
+    readonly lg: "56px";
+    readonly xl: "80px";
+};
+declare const AVATAR_SX: {
+    readonly column: {
+        readonly stackSX: {
+            readonly xs: {
+                readonly gap: 0.5;
+            };
+            readonly sm: {
+                readonly gap: 0.5;
+            };
+            readonly md: {
+                readonly gap: 0.75;
+            };
+            readonly lg: {
+                readonly gap: 1;
+            };
+            readonly xl: {
+                readonly gap: 1;
+            };
+        };
+        readonly fontSize: "0.6rem";
+    };
+    readonly row: {
+        readonly stackSX: {
+            readonly xs: {
+                readonly gap: 0.75;
+            };
+            readonly sm: {
+                readonly gap: 0.75;
+            };
+            readonly md: {
+                readonly gap: 1;
+            };
+            readonly lg: {
+                readonly gap: 1.5;
+            };
+            readonly xl: {
+                readonly gap: 2;
+            };
+        };
+        readonly fontSize: "0.8rem";
+    };
+};
+
+interface MuiAvatarProps {
+    name?: string;
+    src?: string;
+    size?: Size;
+    fontSize?: string | number;
+    displayName?: boolean;
+    direction?: 'column' | 'row';
+    dim?: {
+        width?: string | number;
+        height?: string | number;
+    };
+    backgroundIcon?: React.ReactNode;
+}
+/**
+ * A styled Mui Avatar component
+ *
+ * [Doc](https://mui.com/material-ui/api/avatar/)
+ */
+declare function Avatar(props: MuiAvatarProps): react_jsx_runtime.JSX.Element;
+interface NameSkelProps {
+    name?: string;
+    direction: 'column' | 'row';
+    fontSize?: string | number;
+}
+/**
+ * A Mui Skeleton component which used as a placeholder for loading image
+ *
+ * [Doc](https://mui.com/material-ui/api/skeleton/)
+ */
+declare function NameSkel(props: NameSkelProps): react_jsx_runtime.JSX.Element;
+
+type IconButtonProps = React.ComponentProps<typeof _mui_material_IconButton>;
+type Props = {
+    /** The Icon to render */
+    children: React.ReactNode;
+    /** The title of the tooltip */
+    title?: string;
+    /**
+     * The color theme of the entire component.
+     * @default 'secondary' (from theme)
+     */
+    color?: IconButtonProps['color'];
+    /**
+     * The size of the component.
+     * @default 'small' (from theme)
+     */
+    size?: IconButtonProps['size'];
+    selected?: boolean;
+    slotProps?: {
+        tooltip?: Omit<TooltipProps, "children">;
+    };
+} & Omit<IconButtonProps, "color" | "size">;
+/**
+ * A MuiIconButton wrapped in a MuiTooltip.
+ * Default props like `size` and `color` are handled by the theme.
+ */
+declare const IconButton: react.ForwardRefExoticComponent<Omit<Props, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+declare const pos: {
+    readonly top: {
+        readonly dir: "column-reverse";
+        readonly gap: 0.5;
+        readonly direction: "column";
+    };
+    readonly bottom: {
+        readonly dir: "column";
+        readonly gap: 0.5;
+        readonly direction: "column";
+    };
+    readonly left: {
+        readonly dir: "row-reverse";
+        readonly gap: 1;
+        readonly direction: "row";
+    };
+    readonly right: {
+        readonly dir: "row";
+        readonly gap: 1;
+        readonly direction: "row";
+    };
+};
+interface AvatarButtonProps {
+    onClick?: react__default.ComponentProps<typeof IconButton>['onClick'];
+    size?: Size;
+    disabled?: boolean;
+    dim?: react__default.ComponentProps<typeof Avatar>['dim'];
+    backgroundUrl?: string;
+    backgroundIcon?: react__default.ReactNode;
+    icon?: react__default.ReactNode;
+    fontSize?: string | number;
+    name?: string;
+    src?: string;
+    showName?: boolean;
+    namePosition?: keyof typeof pos;
+    hasBorder?: boolean;
+    'aria-label'?: string;
+}
+/**
+ * A clickable Mui Avatar component
+ *
+ * use button to wrap an Avatar component
+ *
+ * logic:
+ *  use backgroundIcon if any
+ *  then use backgroundUrl if any
+ *  then name if any
+ */
+declare function AvatarButton(props: AvatarButtonProps): react_jsx_runtime.JSX.Element;
+
+declare const avatarTheme: {
+    readonly styleOverrides: {
+        readonly root: {
+            readonly '--avatar-bg': "var(--mui-palette-action-selected)";
+            readonly '--avatar-color': "var(--mui-palette-text-primary)";
+            readonly backgroundColor: "var(--avatar-bg)";
+            readonly color: "var(--avatar-color)";
+        };
+    };
+};
+/** Static palette aliases for AvatarButton root element */
+declare const avatarButtonRootSx: SxProps<Theme>;
+
+type BadgeProps = {
+    style_variant?: 'filled' | 'outlined';
+};
+/**
+ * A styled Mui Badge component
+ *
+ * [Doc](https://mui.com/material-ui/api/badge/)
+ *
+ * @example
+ * ```tsx
+ *  <MuiBadge badgeContent={4}>
+ *      <IconButton>
+ *          <MailIcon/>
+ *      </IconButton>
+ *  </MuiBadge>
+ * ```
+ */
+declare function Badge(p: react__default.ComponentProps<typeof MuiBadge> & BadgeProps): react_jsx_runtime.JSX.Element;
+
+declare const USER_STATUSs: {
+    readonly online: "online";
+    readonly away: "away";
+    readonly busy: "busy";
+    readonly offline: "offline";
+    readonly invisible: "invisible";
+};
+type UserStatusTypes = typeof USER_STATUSs[keyof typeof USER_STATUSs];
+/**
+ * StatusAvatar
+ * @description: avatar of the participant with status
+ * @param status - status of the participant
+ * @param src - src of the avatar
+ * @param name - name of the participant
+ *
+ * user status will be shown as a dot on the avatar
+ */
+declare function Renderer(props: {
+    status: UserStatusTypes;
+    statusEditable?: boolean;
+    handleStatusChange?: ((status: UserStatusTypes) => void);
+    name: string;
+    src?: string;
+    slotProps?: {
+        badge?: React.ComponentProps<typeof Badge>;
+        avatar?: Partial<React.ComponentProps<typeof Avatar>>;
+        avatarButton?: Partial<React.ComponentProps<typeof AvatarButton>>;
+    };
+}): react_jsx_runtime.JSX.Element;
+declare const status: {
+    readonly online: "online";
+    readonly away: "away";
+    readonly busy: "busy";
+    readonly offline: "offline";
+    readonly invisible: "invisible";
+};
+type Status = UserStatusTypes;
+
+declare const StatusAvatar_Renderer: typeof Renderer;
+type StatusAvatar_Status = Status;
+declare const StatusAvatar_status: typeof status;
+declare namespace StatusAvatar {
+  export { StatusAvatar_Renderer as Renderer, type StatusAvatar_Status as Status, StatusAvatar_status as status };
+}
+
+export { AVATARBUTTON_STANDARD_DIMENSIONs, AVATAR_SIZEs, AVATAR_SX, Avatar, AvatarButton, NameSkel, type Size, StatusAvatar, avatarButtonRootSx, avatarTheme };