@saas-ui/react 3.0.0-next.36 → 3.0.0-next.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.tsbuildinfo.json +1 -1
- package/dist/components/link-box/index.d.ts +2 -0
- package/dist/components/link-box/index.js +1 -0
- package/dist/components/persona/index.d.ts +1 -2
- package/dist/components/persona/index.js +1 -1
- package/dist/components/persona/persona-composed.d.ts +63 -0
- package/dist/components/persona/persona-composed.js +19 -0
- package/dist/components/persona/persona.context.d.ts +9 -1
- package/dist/components/persona/persona.context.js +1 -1
- package/dist/components/persona/persona.d.ts +61 -47
- package/dist/components/persona/persona.js +62 -13
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/package.json +3 -3
- package/dist/components/persona/persona-primitive.d.ts +0 -77
- package/dist/components/persona/persona-primitive.js +0 -58
@@ -0,0 +1 @@
|
|
1
|
+
export { LinkBox, LinkOverlay } from '@chakra-ui/react/link';
|
@@ -1,4 +1,3 @@
|
|
1
|
-
export
|
2
|
-
export type { PersonaProps, PersonaAvatarProps } from './persona.tsx';
|
1
|
+
export * as Persona from './persona.tsx';
|
3
2
|
export { defaultPersonaPresenceOptions } from './presence.ts';
|
4
3
|
export type { PersonaPresence, PersonaPresenceConfig } from './presence.ts';
|
@@ -1,2 +1,2 @@
|
|
1
|
-
export
|
1
|
+
export * as Persona from "./persona.js";
|
2
2
|
export { defaultPersonaPresenceOptions } from "./presence.js";
|
@@ -0,0 +1,63 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as PersonaPrimitive from './persona.tsx';
|
3
|
+
import type { PersonaVariantProps } from './persona.recipe.ts';
|
4
|
+
import type { PersonaPresence } from './presence.ts';
|
5
|
+
interface PersonaOptions {
|
6
|
+
/**
|
7
|
+
* The name of the person in the avatar.
|
8
|
+
*
|
9
|
+
* - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
|
10
|
+
* - If `src` is not loaded, the name will be used to create the initials
|
11
|
+
*/
|
12
|
+
name?: string;
|
13
|
+
/**
|
14
|
+
* The presence status of the person
|
15
|
+
*
|
16
|
+
* If set will add an AvatarBadge with color configured in `Presence`
|
17
|
+
* Default presence options:
|
18
|
+
* - online
|
19
|
+
* - offline
|
20
|
+
* - busy
|
21
|
+
* - dnd
|
22
|
+
* - away
|
23
|
+
*/
|
24
|
+
presence?: PersonaPresence;
|
25
|
+
/**
|
26
|
+
* The icon shown in the AvatarBadge
|
27
|
+
*/
|
28
|
+
presenceIcon?: React.ReactNode;
|
29
|
+
/**
|
30
|
+
* Indicates that a person is out of office. Changes the presence badge style.
|
31
|
+
*/
|
32
|
+
isOutOfOffice?: boolean;
|
33
|
+
/**
|
34
|
+
* Primary label of the persona, defaults to the name
|
35
|
+
*/
|
36
|
+
label?: React.ReactNode;
|
37
|
+
/**
|
38
|
+
* Secondary label, usually the role of the person
|
39
|
+
* Only visible from md size and up.
|
40
|
+
*/
|
41
|
+
secondaryLabel?: React.ReactNode;
|
42
|
+
/**
|
43
|
+
* Tertiary label, usually the status of the person.
|
44
|
+
* Only visible from lg size and up.
|
45
|
+
*/
|
46
|
+
tertiaryLabel?: React.ReactNode;
|
47
|
+
/**
|
48
|
+
* Hide the persona details next to the avatar.
|
49
|
+
*/
|
50
|
+
hideDetails?: boolean;
|
51
|
+
}
|
52
|
+
export interface PersonaProps extends PersonaOptions, Omit<PersonaPrimitive.AvatarProps, 'size'>, Omit<PersonaPrimitive.RootProps, 'presence'>, PersonaVariantProps {
|
53
|
+
}
|
54
|
+
/**
|
55
|
+
* The wrapper component that handles default composition.
|
56
|
+
*
|
57
|
+
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
58
|
+
*/
|
59
|
+
export declare const Persona: React.ForwardRefExoticComponent<PersonaProps & React.RefAttributes<HTMLDivElement>>;
|
60
|
+
export interface PersonaAvatarProps extends Omit<PersonaProps, 'hideDetails' | 'label' | 'secondaryLabel' | 'tertiaryLabel' | 'children'> {
|
61
|
+
}
|
62
|
+
export declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
|
63
|
+
export {};
|
@@ -0,0 +1,19 @@
|
|
1
|
+
'use client';
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
3
|
+
import * as React from 'react';
|
4
|
+
import * as PersonaPrimitive from "./persona.js";
|
5
|
+
/**
|
6
|
+
* The wrapper component that handles default composition.
|
7
|
+
*
|
8
|
+
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
9
|
+
*/
|
10
|
+
export const Persona = React.forwardRef((props, ref) => {
|
11
|
+
const { name, presence, presenceIcon, isOutOfOffice, label, secondaryLabel, tertiaryLabel, size, hideDetails, children,
|
12
|
+
/** Avatar props */
|
13
|
+
getInitials, icon, loading, onError, src, srcSet, fallback, ...rest } = props;
|
14
|
+
return (_jsxs(PersonaPrimitive.Root, { ref: ref, outOfOffice: isOutOfOffice, presence: presence, size: size, ...rest, children: [_jsx(PersonaPrimitive.Avatar, { name: name, size: size, getInitials: getInitials, icon: icon, loading: loading, onError: onError, src: src, srcSet: srcSet, fallback: fallback, children: presence ? (_jsx(PersonaPrimitive.PresenceBadge, { children: presenceIcon })) : null }), !hideDetails && (_jsxs(PersonaPrimitive.Details, { children: [_jsx(PersonaPrimitive.Label, { children: label || name }), secondaryLabel && (_jsx(PersonaPrimitive.SecondaryLabel, { children: secondaryLabel })), tertiaryLabel && (_jsx(PersonaPrimitive.TertiaryLabel, { children: tertiaryLabel })), children] }))] }));
|
15
|
+
});
|
16
|
+
Persona.displayName = 'Persona';
|
17
|
+
export const PersonaAvatar = React.forwardRef(function PersonaAvatar(props, ref) {
|
18
|
+
return _jsx(Persona, { ref: ref, ...props, hideDetails: true });
|
19
|
+
});
|
@@ -1 +1,9 @@
|
|
1
|
-
export declare const usePersonaStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>,
|
1
|
+
export declare const usePersonaStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>, useRecipeResult: (props: any) => {
|
2
|
+
styles: Record<string, import("@chakra-ui/react").SystemStyleObject>;
|
3
|
+
classNames: Record<string, string>;
|
4
|
+
props: {
|
5
|
+
[x: string]: any;
|
6
|
+
[x: number]: any;
|
7
|
+
[x: symbol]: any;
|
8
|
+
};
|
9
|
+
}, usePropsContext: () => Record<string, any>, withProvider: <T, P>(Component: React.ElementType<any>, slot: string, options?: import("@chakra-ui/react").WithProviderOptions<P> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P> & import("react").RefAttributes<T>>, withContext: <T, P_1>(Component: React.ElementType<any>, slot?: string | undefined, options?: import("@chakra-ui/react").WithContextOptions<P_1> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P_1> & import("react").RefAttributes<T>>, ClassNamesProvider: import("react").Provider<Record<string, string>>, PropsProvider: import("react").Provider<Record<string, any>>, StylesProvider: import("react").Provider<Record<string, import("@chakra-ui/react").SystemStyleObject>>;
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import { createSlotRecipeContext } from '@chakra-ui/react';
|
2
|
-
export const { useStyles: usePersonaStyles, withProvider, withContext, } = createSlotRecipeContext({
|
2
|
+
export const { useStyles: usePersonaStyles, useRecipeResult, usePropsContext, withProvider, withContext, ClassNamesProvider, PropsProvider, StylesProvider, } = createSlotRecipeContext({
|
3
3
|
key: 'suiPersona',
|
4
4
|
});
|
@@ -1,63 +1,77 @@
|
|
1
|
-
import
|
2
|
-
import
|
1
|
+
import React from 'react';
|
2
|
+
import { HTMLChakraProps, type ImageProps, type SlotRecipeProps } from '@chakra-ui/react';
|
3
|
+
import { type AvatarProps } from '../avatar/avatar.tsx';
|
3
4
|
import type { PersonaVariantProps } from './persona.recipe.ts';
|
4
5
|
import type { PersonaPresence } from './presence.ts';
|
5
|
-
interface
|
6
|
+
interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'>, PersonaVariantProps {
|
6
7
|
/**
|
7
|
-
*
|
8
|
-
*
|
9
|
-
* - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
|
10
|
-
* - If `src` is not loaded, the name will be used to create the initials
|
8
|
+
* Indicates that a person is out of office. Changes the presence badge style.
|
11
9
|
*/
|
12
|
-
|
10
|
+
outOfOffice?: boolean;
|
13
11
|
/**
|
14
12
|
* The presence status of the person
|
15
|
-
*
|
16
|
-
* If set will add an AvatarBadge with color configured in `Presence`
|
17
|
-
* Default presence options:
|
18
|
-
* - online
|
19
|
-
* - offline
|
20
|
-
* - busy
|
21
|
-
* - dnd
|
22
|
-
* - away
|
23
13
|
*/
|
24
14
|
presence?: PersonaPresence;
|
15
|
+
}
|
16
|
+
/**
|
17
|
+
* The root component that provides context and styles.
|
18
|
+
*
|
19
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
20
|
+
*/
|
21
|
+
declare const PersonaRoot: React.ForwardRefExoticComponent<PersonaRootProps & React.RefAttributes<HTMLDivElement>>;
|
22
|
+
interface PersonaAvatarOptions {
|
25
23
|
/**
|
26
|
-
* The
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
* Indicates that a person is out of office. Changes the presence badge style.
|
31
|
-
*/
|
32
|
-
isOutOfOffice?: boolean;
|
33
|
-
/**
|
34
|
-
* Primary label of the persona, defaults to the name
|
35
|
-
*/
|
36
|
-
label?: React.ReactNode;
|
37
|
-
/**
|
38
|
-
* Secondary label, usually the role of the person
|
39
|
-
* Only visible from md size and up.
|
40
|
-
*/
|
41
|
-
secondaryLabel?: React.ReactNode;
|
42
|
-
/**
|
43
|
-
* Tertiary label, usually the status of the person.
|
44
|
-
* Only visible from lg size and up.
|
45
|
-
*/
|
46
|
-
tertiaryLabel?: React.ReactNode;
|
47
|
-
/**
|
48
|
-
* Hide the persona details next to the avatar.
|
24
|
+
* The name of the person in the avatar.
|
25
|
+
*
|
26
|
+
* - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
|
27
|
+
* - If `src` is not loaded, the name will be used to create the initials
|
49
28
|
*/
|
50
|
-
|
29
|
+
name?: string;
|
30
|
+
}
|
31
|
+
interface PersonaAvatarProps extends PersonaAvatarOptions, AvatarProps {
|
32
|
+
src?: string;
|
33
|
+
srcSet?: string;
|
34
|
+
loading?: ImageProps['loading'];
|
35
|
+
icon?: React.ReactElement;
|
36
|
+
fallback?: React.ReactNode;
|
37
|
+
getInitials?: (name?: string | null) => string | null;
|
38
|
+
}
|
39
|
+
/**
|
40
|
+
* An avatar with optional status badge.
|
41
|
+
*
|
42
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
43
|
+
*/
|
44
|
+
declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
|
45
|
+
interface PersonaPresenceBadgeProps extends HTMLChakraProps<'span'> {
|
51
46
|
}
|
52
|
-
|
47
|
+
declare const PersonaPresenceBadge: React.ForwardRefExoticComponent<PersonaPresenceBadgeProps & React.RefAttributes<HTMLSpanElement>>;
|
48
|
+
interface PersonaDetailsProps extends HTMLChakraProps<'div'> {
|
53
49
|
}
|
54
50
|
/**
|
55
|
-
*
|
51
|
+
* Wrapper component for the labels.
|
56
52
|
*
|
57
|
-
* @see Docs https://saas-ui.dev/docs/components/
|
53
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
58
54
|
*/
|
59
|
-
|
60
|
-
|
55
|
+
declare const PersonaDetails: React.ForwardRefExoticComponent<PersonaDetailsProps & React.RefAttributes<HTMLDivElement>>;
|
56
|
+
interface PersonaLabelProps extends HTMLChakraProps<'span'> {
|
61
57
|
}
|
62
|
-
|
63
|
-
|
58
|
+
/**
|
59
|
+
* The main label, usually a name.
|
60
|
+
*
|
61
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
62
|
+
*/
|
63
|
+
declare const PersonaLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
|
64
|
+
/**
|
65
|
+
* The secondary label, usually the role of a person.
|
66
|
+
*
|
67
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
68
|
+
*/
|
69
|
+
declare const PersonaSecondaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
|
70
|
+
/**
|
71
|
+
* The tertiary label, typically a status message.
|
72
|
+
*
|
73
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
74
|
+
*/
|
75
|
+
declare const PersonaTertiaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
|
76
|
+
export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };
|
77
|
+
export type { PersonaRootProps as RootProps, PersonaAvatarProps as AvatarProps, PersonaPresenceBadgeProps as PresenceBadgeProps, PersonaDetailsProps as DetailsProps, PersonaLabelProps as LabelProps, };
|
@@ -1,18 +1,67 @@
|
|
1
|
-
|
2
|
-
import
|
3
|
-
import
|
1
|
+
'use client';
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
3
|
+
import { forwardRef, useMemo } from 'react';
|
4
|
+
import { AvatarPropsProvider, chakra, mergeProps, } from '@chakra-ui/react';
|
5
|
+
import { dataAttr } from '@saas-ui/core/utils';
|
6
|
+
import { cx } from '@saas-ui/core/utils';
|
7
|
+
import { Avatar } from "../avatar/avatar.js";
|
8
|
+
import { ClassNamesProvider, StylesProvider, usePropsContext, useRecipeResult, withContext, } from "./persona.context.js";
|
4
9
|
/**
|
5
|
-
* The
|
10
|
+
* The root component that provides context and styles.
|
6
11
|
*
|
7
|
-
* @see Docs https://saas-ui.dev/docs/components/
|
12
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
8
13
|
*/
|
9
|
-
|
10
|
-
const
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
+
const PersonaRoot = forwardRef((props, ref) => {
|
15
|
+
const propsContext = usePropsContext();
|
16
|
+
const mergedProps = useMemo(() => mergeProps(propsContext, props), [propsContext, props]);
|
17
|
+
const { styles, props: rootProps, classNames, } = useRecipeResult(mergedProps);
|
18
|
+
const className = classNames['root'];
|
19
|
+
const { outOfOffice, presence, ...rest } = rootProps;
|
20
|
+
return (_jsx(StylesProvider, { value: styles, children: _jsx(ClassNamesProvider, { value: classNames, children: _jsx(AvatarPropsProvider, { value: {
|
21
|
+
size: props.size,
|
22
|
+
}, children: _jsx(chakra.div, { ref: ref, ...rest, "data-out-of-office": dataAttr(outOfOffice), "data-presence": presence, css: [
|
23
|
+
presence
|
24
|
+
? {
|
25
|
+
'--persona-presence': `colors.presence.${presence}`,
|
26
|
+
}
|
27
|
+
: undefined,
|
28
|
+
styles['root'],
|
29
|
+
rest.css,
|
30
|
+
], className: cx(className, rest.className) }) }) }) }));
|
14
31
|
});
|
15
|
-
|
16
|
-
|
17
|
-
|
32
|
+
/**
|
33
|
+
* An avatar with optional status badge.
|
34
|
+
*
|
35
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
36
|
+
*/
|
37
|
+
const PersonaAvatar = forwardRef((props, ref) => {
|
38
|
+
const { children, ...rest } = props;
|
39
|
+
return (_jsx(Avatar, { ref: ref, ...rest, children: children }));
|
18
40
|
});
|
41
|
+
const PersonaPresenceBadge = withContext('span', 'presence');
|
42
|
+
/**
|
43
|
+
* Wrapper component for the labels.
|
44
|
+
*
|
45
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
46
|
+
*/
|
47
|
+
const PersonaDetails = withContext('div', 'details');
|
48
|
+
/**
|
49
|
+
* The main label, usually a name.
|
50
|
+
*
|
51
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
52
|
+
*/
|
53
|
+
const PersonaLabel = withContext('span', 'label');
|
54
|
+
PersonaLabel.displayName = 'PersonaLabel';
|
55
|
+
/**
|
56
|
+
* The secondary label, usually the role of a person.
|
57
|
+
*
|
58
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
59
|
+
*/
|
60
|
+
const PersonaSecondaryLabel = withContext('span', 'secondaryLabel');
|
61
|
+
/**
|
62
|
+
* The tertiary label, typically a status message.
|
63
|
+
*
|
64
|
+
* @see Docs https://saas-ui.dev/docs/components/persona
|
65
|
+
*/
|
66
|
+
const PersonaTertiaryLabel = withContext('span', 'tertiaryLabel');
|
67
|
+
export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };
|
package/dist/index.d.ts
CHANGED
@@ -51,6 +51,7 @@ export { Input, InputAddon, InputElement, InputPropsProvider, InputGroup, type I
|
|
51
51
|
export { InfoTip, type InfoTipProps } from './components/info-tip/index.ts';
|
52
52
|
export { Kbd, type KbdProps } from './components/kbd/index.ts';
|
53
53
|
export { Link, type LinkProps } from './components/link/index.ts';
|
54
|
+
export { LinkBox, LinkOverlay, type LinkBoxProps, type LinkOverlayProps, } from './components/link-box/index.ts';
|
54
55
|
export { Loader } from './components/loader/index.ts';
|
55
56
|
export { List } from './components/list/index.ts';
|
56
57
|
export { LoadingOverlay } from './components/loading-overlay/index.ts';
|
@@ -62,7 +63,7 @@ export { Menu } from './components/menu/index.ts';
|
|
62
63
|
export { Page, usePageStyles } from './components/page/index.ts';
|
63
64
|
export { Pagination } from './components/pagination/index.ts';
|
64
65
|
export { PasswordInput, type PasswordInputProps, } from './components/password-input/index.ts';
|
65
|
-
export { Persona,
|
66
|
+
export { Persona, type PersonaPresence, type PersonaPresenceConfig, defaultPersonaPresenceOptions, } from './components/persona/index.ts';
|
66
67
|
export { PinInput, type PinInputProps } from './components/pin-input/index.ts';
|
67
68
|
export { Popover } from './components/popover/index.ts';
|
68
69
|
export { Progress } from './components/progress/index.ts';
|
package/dist/index.js
CHANGED
@@ -46,6 +46,7 @@ export { Input, InputAddon, InputElement, InputPropsProvider, InputGroup, } from
|
|
46
46
|
export { InfoTip } from "./components/info-tip/index.js";
|
47
47
|
export { Kbd } from "./components/kbd/index.js";
|
48
48
|
export { Link } from "./components/link/index.js";
|
49
|
+
export { LinkBox, LinkOverlay, } from "./components/link-box/index.js";
|
49
50
|
export { Loader } from "./components/loader/index.js";
|
50
51
|
export { List } from "./components/list/index.js";
|
51
52
|
export { LoadingOverlay } from "./components/loading-overlay/index.js";
|
@@ -57,7 +58,7 @@ export { Menu } from "./components/menu/index.js";
|
|
57
58
|
export { Page, usePageStyles } from "./components/page/index.js";
|
58
59
|
export { Pagination } from "./components/pagination/index.js";
|
59
60
|
export { PasswordInput, } from "./components/password-input/index.js";
|
60
|
-
export { Persona,
|
61
|
+
export { Persona, defaultPersonaPresenceOptions, } from "./components/persona/index.js";
|
61
62
|
export { PinInput } from "./components/pin-input/index.js";
|
62
63
|
export { Popover } from "./components/popover/index.js";
|
63
64
|
export { Progress } from "./components/progress/index.js";
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@saas-ui/react",
|
3
|
-
"version": "3.0.0-next.
|
3
|
+
"version": "3.0.0-next.38",
|
4
4
|
"description": "Saas UI - The React component library for startups.",
|
5
5
|
"type": "module",
|
6
6
|
"exports": {
|
@@ -62,8 +62,8 @@
|
|
62
62
|
"dependencies": {
|
63
63
|
"@ark-ui/react": "^5.9.1",
|
64
64
|
"next-themes": "^0.4.6",
|
65
|
-
"@saas-ui/
|
66
|
-
"@saas-ui/
|
65
|
+
"@saas-ui/core": "3.0.0-next.11",
|
66
|
+
"@saas-ui/hooks": "3.0.0-next.3"
|
67
67
|
},
|
68
68
|
"peerDependencies": {
|
69
69
|
"@chakra-ui/react": "^3.20.0",
|
@@ -1,77 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { HTMLChakraProps, type ImageProps, type SlotRecipeProps } from '@chakra-ui/react';
|
3
|
-
import { type AvatarProps } from '../avatar/avatar.tsx';
|
4
|
-
import type { PersonaVariantProps } from './persona.recipe.ts';
|
5
|
-
import type { PersonaPresence } from './presence.ts';
|
6
|
-
interface PersonaRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiPersona'>, PersonaVariantProps {
|
7
|
-
/**
|
8
|
-
* Indicates that a person is out of office. Changes the presence badge style.
|
9
|
-
*/
|
10
|
-
outOfOffice?: boolean;
|
11
|
-
/**
|
12
|
-
* The presence status of the person
|
13
|
-
*/
|
14
|
-
presence?: PersonaPresence;
|
15
|
-
}
|
16
|
-
/**
|
17
|
-
* The root component that provides context and styles.
|
18
|
-
*
|
19
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
20
|
-
*/
|
21
|
-
declare const PersonaRoot: React.ForwardRefExoticComponent<PersonaRootProps & React.RefAttributes<HTMLDivElement>>;
|
22
|
-
interface PersonaAvatarOptions {
|
23
|
-
/**
|
24
|
-
* The name of the person in the avatar.
|
25
|
-
*
|
26
|
-
* - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
|
27
|
-
* - If `src` is not loaded, the name will be used to create the initials
|
28
|
-
*/
|
29
|
-
name?: string;
|
30
|
-
}
|
31
|
-
interface PersonaAvatarProps extends PersonaAvatarOptions, AvatarProps {
|
32
|
-
src?: string;
|
33
|
-
srcSet?: string;
|
34
|
-
loading?: ImageProps['loading'];
|
35
|
-
icon?: React.ReactElement;
|
36
|
-
fallback?: React.ReactNode;
|
37
|
-
getInitials?: (name?: string | null) => string | null;
|
38
|
-
}
|
39
|
-
/**
|
40
|
-
* An avatar with optional status badge.
|
41
|
-
*
|
42
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
43
|
-
*/
|
44
|
-
declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
|
45
|
-
interface PersonaPresenceBadgeProps extends HTMLChakraProps<'span'> {
|
46
|
-
}
|
47
|
-
declare const PersonaPresenceBadge: React.ForwardRefExoticComponent<PersonaPresenceBadgeProps & React.RefAttributes<HTMLSpanElement>>;
|
48
|
-
interface PersonaDetailsProps extends HTMLChakraProps<'div'> {
|
49
|
-
}
|
50
|
-
/**
|
51
|
-
* Wrapper component for the labels.
|
52
|
-
*
|
53
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
54
|
-
*/
|
55
|
-
declare const PersonaDetails: React.ForwardRefExoticComponent<PersonaDetailsProps & React.RefAttributes<HTMLDivElement>>;
|
56
|
-
interface PersonaLabelProps extends HTMLChakraProps<'span'> {
|
57
|
-
}
|
58
|
-
/**
|
59
|
-
* The main label, usually a name.
|
60
|
-
*
|
61
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
62
|
-
*/
|
63
|
-
declare const PersonaLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
|
64
|
-
/**
|
65
|
-
* The secondary label, usually the role of a person.
|
66
|
-
*
|
67
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
68
|
-
*/
|
69
|
-
declare const PersonaSecondaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
|
70
|
-
/**
|
71
|
-
* The tertiary label, typically a status message.
|
72
|
-
*
|
73
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
74
|
-
*/
|
75
|
-
declare const PersonaTertiaryLabel: React.ForwardRefExoticComponent<PersonaLabelProps & React.RefAttributes<HTMLSpanElement>>;
|
76
|
-
export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };
|
77
|
-
export type { PersonaRootProps as RootProps, PersonaAvatarProps as AvatarProps, PersonaPresenceBadgeProps as PresenceBadgeProps, PersonaDetailsProps as DetailsProps, PersonaLabelProps as LabelProps, };
|
@@ -1,58 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { forwardRef } from 'react';
|
3
|
-
import { chakra, } from '@chakra-ui/react';
|
4
|
-
import { dataAttr } from '@saas-ui/core/utils';
|
5
|
-
import { Avatar } from "../avatar/avatar.js";
|
6
|
-
import { withContext, withProvider } from "./persona.context.js";
|
7
|
-
/**
|
8
|
-
* The root component that provides context and styles.
|
9
|
-
*
|
10
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
11
|
-
*/
|
12
|
-
const PersonaRoot = withProvider(forwardRef((props, ref) => {
|
13
|
-
const { outOfOffice, presence, ...rest } = props;
|
14
|
-
return (_jsx(chakra.div, { ref: ref, ...rest, "data-out-of-office": dataAttr(outOfOffice), "data-presence": presence, css: [
|
15
|
-
presence
|
16
|
-
? {
|
17
|
-
'--persona-presence': `colors.presence.${presence}`,
|
18
|
-
}
|
19
|
-
: undefined,
|
20
|
-
rest.css,
|
21
|
-
] }));
|
22
|
-
}), 'root');
|
23
|
-
/**
|
24
|
-
* An avatar with optional status badge.
|
25
|
-
*
|
26
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
27
|
-
*/
|
28
|
-
const PersonaAvatar = forwardRef((props, ref) => {
|
29
|
-
const { children, ...rest } = props;
|
30
|
-
return (_jsx(Avatar, { ref: ref, ...rest, children: children }));
|
31
|
-
});
|
32
|
-
const PersonaPresenceBadge = withContext('span', 'presence');
|
33
|
-
/**
|
34
|
-
* Wrapper component for the labels.
|
35
|
-
*
|
36
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
37
|
-
*/
|
38
|
-
const PersonaDetails = withContext('div', 'details');
|
39
|
-
/**
|
40
|
-
* The main label, usually a name.
|
41
|
-
*
|
42
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
43
|
-
*/
|
44
|
-
const PersonaLabel = withContext('span', 'label');
|
45
|
-
PersonaLabel.displayName = 'PersonaLabel';
|
46
|
-
/**
|
47
|
-
* The secondary label, usually the role of a person.
|
48
|
-
*
|
49
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
50
|
-
*/
|
51
|
-
const PersonaSecondaryLabel = withContext('span', 'secondaryLabel');
|
52
|
-
/**
|
53
|
-
* The tertiary label, typically a status message.
|
54
|
-
*
|
55
|
-
* @see Docs https://saas-ui.dev/docs/components/data-display/persona
|
56
|
-
*/
|
57
|
-
const PersonaTertiaryLabel = withContext('span', 'tertiaryLabel');
|
58
|
-
export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };
|