@saas-ui/react 3.0.0-next.2 → 3.0.0-next.21

package/dist/components/persona/persona-primitive.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { chakra, } from '@chakra-ui/react';
+import { dataAttr } from '@saas-ui/core/utils';
+import { Avatar } from "../avatar/avatar.js";
+import { withContext, withProvider } from "./persona.context.js";
+/**
+ * The root component that provides context and styles.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+const PersonaRoot = withProvider(forwardRef((props, ref) => {
+    const { outOfOffice, presence, ...rest } = props;
+    return (_jsx(chakra.div, { ref: ref, ...rest, "data-out-of-office": dataAttr(outOfOffice), "data-presence": presence, css: [
+            presence
+                ? {
+                    '--persona-presence': `colors.presence.${presence}`,
+                }
+                : undefined,
+            rest.css,
+        ] }));
+}), 'root');
+/**
+ * An avatar with optional status badge.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+const PersonaAvatar = forwardRef((props, ref) => {
+    const { name, getInitials = (name) => name?.[0], icon, loading, onError, src, srcSet, children, ...rest } = props;
+    return (_jsx(Avatar, { ref: ref, ...rest, children: children }));
+});
+const PersonaPresenceBadge = withContext('span', 'presence');
+/**
+ * Wrapper component for the labels.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+const PersonaDetails = withContext('div', 'details');
+/**
+ * The main label, usually a name.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+const PersonaLabel = withContext('span', 'label');
+PersonaLabel.displayName = 'PersonaLabel';
+/**
+ * The secondary label, usually the role of a person.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+const PersonaSecondaryLabel = withContext('span', 'secondaryLabel');
+/**
+ * The tertiary label, typically a status message.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+const PersonaTertiaryLabel = withContext('span', 'tertiaryLabel');
+export { PersonaRoot as Root, PersonaAvatar as Avatar, PersonaPresenceBadge as PresenceBadge, PersonaDetails as Details, PersonaLabel as Label, PersonaSecondaryLabel as SecondaryLabel, PersonaTertiaryLabel as TertiaryLabel, };

package/dist/components/persona/persona.context.d.ts

@@ -0,0 +1 @@
+export declare const usePersonaStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>, 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>>;

package/dist/components/persona/persona.context.js

@@ -0,0 +1,4 @@
+import { createSlotRecipeContext } from '@chakra-ui/react';
+export const { useStyles: usePersonaStyles, withProvider, withContext, } = createSlotRecipeContext({
+    key: 'suiPersona',
+});

package/dist/components/persona/persona.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import * as PersonaPrimitive from './persona-primitive.tsx';
+import type { PersonaVariantProps } from './persona.recipe.ts';
+import type { PersonaPresence } from './presence.ts';
+interface PersonaOptions {
+    /**
+     * The name of the person in the avatar.
+     *
+     * - if `src` has loaded, the name will be used as the `alt` attribute of the `img`
+     * - If `src` is not loaded, the name will be used to create the initials
+     */
+    name?: string;
+    /**
+     * The presence status of the person
+     *
+     * If set will add an AvatarBadge with color configured in `Presence`
+     * Default presence options:
+     * - online
+     * - offline
+     * - busy
+     * - dnd
+     * - away
+     */
+    presence?: PersonaPresence;
+    /**
+     * The icon shown in the AvatarBadge
+     */
+    presenceIcon?: React.ReactNode;
+    /**
+     * Indicates that a person is out of office. Changes the presence badge style.
+     */
+    isOutOfOffice?: boolean;
+    /**
+     * Primary label of the persona, defaults to the name
+     */
+    label?: React.ReactNode;
+    /**
+     * Secondary label, usually the role of the person
+     * Only visible from md size and up.
+     */
+    secondaryLabel?: React.ReactNode;
+    /**
+     * Tertiary label, usually the status of the person.
+     * Only visible from lg size and up.
+     */
+    tertiaryLabel?: React.ReactNode;
+    /**
+     * Hide the persona details next to the avatar.
+     */
+    hideDetails?: boolean;
+}
+export interface PersonaProps extends PersonaOptions, Omit<PersonaPrimitive.AvatarProps, 'size'>, Omit<PersonaPrimitive.RootProps, 'presence'>, PersonaVariantProps {
+}
+/**
+ * The wrapper component that handles default composition.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export declare const Persona: React.ForwardRefExoticComponent<PersonaProps & React.RefAttributes<HTMLDivElement>>;
+export interface PersonaAvatarProps extends Omit<PersonaProps, 'hideDetails' | 'label' | 'secondaryLabel' | 'tertiaryLabel' | 'children'> {
+}
+export declare const PersonaAvatar: React.ForwardRefExoticComponent<PersonaAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/persona/persona.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as PersonaPrimitive from "./persona-primitive.js";
+/**
+ * The wrapper component that handles default composition.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export const Persona = React.forwardRef((props, ref) => {
+    const { name, presence, presenceIcon, isOutOfOffice, label, secondaryLabel, tertiaryLabel, size, hideDetails, children, 
+    /** Avatar props */
+    getInitials, icon, loading, onError, src, srcSet, fallback, ...rest } = props;
+    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] }))] }));
+});
+Persona.displayName = 'Persona';
+export const PersonaAvatar = React.forwardRef(function PersonaAvatar(props, ref) {
+    return _jsx(Persona, { ref: ref, ...props, hideDetails: true });
+});

package/dist/components/persona/persona.recipe.d.ts

@@ -0,0 +1,104 @@
+import { type RecipeVariantProps } from '@chakra-ui/react/styled-system';
+export declare const personaSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "presence" | "root" | "avatar" | "details" | "secondaryLabel" | "tertiaryLabel", {
+    size: {
+        '2xs': {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "xs";
+            };
+            secondaryLabel: {
+                display: "none";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        xs: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "xs";
+            };
+            secondaryLabel: {
+                display: "none";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        sm: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "sm";
+            };
+            secondaryLabel: {
+                fontSize: "xs";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        md: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "sm";
+            };
+            secondaryLabel: {
+                fontSize: "xs";
+            };
+            tertiaryLabel: {
+                display: "none";
+            };
+        };
+        lg: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "md";
+            };
+            secondaryLabel: {
+                fontSize: "sm";
+            };
+            tertiaryLabel: {
+                fontSize: "sm";
+            };
+        };
+        xl: {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "lg";
+            };
+            secondaryLabel: {
+                fontSize: "md";
+            };
+            tertiaryLabel: {
+                fontSize: "md";
+            };
+        };
+        '2xl': {
+            details: {
+                ms: number;
+            };
+            label: {
+                fontSize: "xl";
+            };
+            secondaryLabel: {
+                fontSize: "lg";
+            };
+            tertiaryLabel: {
+                fontSize: "lg";
+            };
+        };
+    };
+}>;
+export type PersonaVariantProps = RecipeVariantProps<typeof personaSlotRecipe>;

package/dist/components/persona/persona.recipe.js

@@ -0,0 +1,106 @@
+import { defineSlotRecipe, defineStyle, } from '@chakra-ui/react/styled-system';
+const baseStyleLabel = defineStyle({
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    minW: 0,
+    color: 'fg',
+});
+export const personaSlotRecipe = defineSlotRecipe({
+    className: 'sui-persona',
+    slots: [
+        'root',
+        'avatar',
+        'presence',
+        'details',
+        'label',
+        'secondaryLabel',
+        'tertiaryLabel',
+    ],
+    base: {
+        root: {
+            '--presence-border-color': 'var(--bg-currentcolor)',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        presence: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'absolute',
+            bottom: 0,
+            right: 0,
+            boxSize: 'calc(var(--avatar-size) / 3)',
+            transform: 'translate(12%, 12%)',
+            borderWidth: '0.10em',
+            borderRadius: '50%',
+            borderColor: 'var(--presence-border-color)',
+            bg: 'var(--persona-presence)',
+        },
+        details: {
+            display: 'flex',
+            flexDirection: 'column',
+            minW: 0,
+            lineHeight: 'short',
+        },
+        label: baseStyleLabel,
+        secondaryLabel: {
+            ...baseStyleLabel,
+            color: 'fg/60',
+        },
+        tertiaryLabel: {
+            ...baseStyleLabel,
+            color: 'fg/60',
+        },
+    },
+    variants: {
+        size: {
+            '2xs': {
+                details: { ms: 1 },
+                label: { fontSize: 'xs' },
+                secondaryLabel: { display: 'none' },
+                tertiaryLabel: { display: 'none' },
+            },
+            xs: {
+                details: { ms: 1.5 },
+                label: { fontSize: 'xs' },
+                secondaryLabel: { display: 'none' },
+                tertiaryLabel: { display: 'none' },
+            },
+            sm: {
+                details: { ms: 2 },
+                label: { fontSize: 'sm' },
+                secondaryLabel: { fontSize: 'xs' },
+                tertiaryLabel: { display: 'none' },
+            },
+            md: {
+                details: { ms: 2 },
+                label: { fontSize: 'sm' },
+                secondaryLabel: { fontSize: 'xs' },
+                tertiaryLabel: { display: 'none' },
+            },
+            lg: {
+                details: { ms: 3 },
+                label: { fontSize: 'md' },
+                secondaryLabel: { fontSize: 'sm' },
+                tertiaryLabel: { fontSize: 'sm' },
+            },
+            xl: {
+                details: { ms: 4 },
+                label: { fontSize: 'lg' },
+                secondaryLabel: { fontSize: 'md' },
+                tertiaryLabel: { fontSize: 'md' },
+            },
+            '2xl': {
+                details: { ms: 4 },
+                label: { fontSize: 'xl' },
+                secondaryLabel: { fontSize: 'lg' },
+                tertiaryLabel: { fontSize: 'lg' },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});

package/dist/components/persona/presence.d.ts

@@ -0,0 +1,20 @@
+export type PersonaPresence = 'online' | 'offline' | 'busy' | 'dnd' | 'away';
+export interface PersonaPresenceConfig {
+    label: string;
+    color: string;
+}
+export type PersonaPresenceOptions<P extends string = PersonaPresence> = Record<P, PersonaPresenceConfig>;
+/**
+ * The presence configuration object.
+ *
+ * Default presence values: online, offline, busy, dnd, away
+ *
+ * You can overwrite colors in the theme semantic tokens.
+ * theme.semanticTokens.colors['presence.online'] = 'cyan.500'
+ *
+ * Or add a custom presence value
+ * theme.semanticTokens.colors['presence.vacay'] = 'blue.500'
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export declare const defaultPersonaPresenceOptions: PersonaPresenceOptions;

package/dist/components/persona/presence.js

@@ -0,0 +1,35 @@
+/**
+ * The presence configuration object.
+ *
+ * Default presence values: online, offline, busy, dnd, away
+ *
+ * You can overwrite colors in the theme semantic tokens.
+ * theme.semanticTokens.colors['presence.online'] = 'cyan.500'
+ *
+ * Or add a custom presence value
+ * theme.semanticTokens.colors['presence.vacay'] = 'blue.500'
+ *
+ * @see Docs https://saas-ui.dev/docs/components/data-display/persona
+ */
+export const defaultPersonaPresenceOptions = {
+    online: {
+        label: 'Online',
+        color: 'presence.online',
+    },
+    offline: {
+        label: 'Offline',
+        color: 'presence.offline',
+    },
+    busy: {
+        label: 'Busy',
+        color: 'presence.busy',
+    },
+    dnd: {
+        label: 'Do-not-disturb',
+        color: 'presence.dnd',
+    },
+    away: {
+        label: 'Away',
+        color: 'presence.away',
+    },
+};

package/dist/components/pin-input/index.d.ts

@@ -0,0 +1,2 @@
+export { PinInput } from './pin-input.tsx';
+export type { PinInputProps } from './pin-input.tsx';

package/dist/components/pin-input/index.js

@@ -0,0 +1 @@
+export { PinInput } from "./pin-input.js";

package/dist/components/pin-input/pin-input.d.ts

@@ -0,0 +1,8 @@
+import { PinInput as ChakraPinInput } from '@chakra-ui/react/pin-input';
+export interface PinInputProps extends ChakraPinInput.RootProps {
+    rootRef?: React.Ref<HTMLDivElement>;
+    pinLength?: number;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    attached?: boolean;
+}
+export declare const PinInput: import("react").ForwardRefExoticComponent<PinInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/pin-input/pin-input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Group } from '@chakra-ui/react/group';
+import { PinInput as ChakraPinInput } from '@chakra-ui/react/pin-input';
+export const PinInput = forwardRef(function PinInput(props, ref) {
+    const { pinLength = 4, inputProps, rootRef, attached, gap = attached ? 0 : 2, ...rest } = props;
+    return (_jsxs(ChakraPinInput.Root, { ref: rootRef, ...rest, children: [_jsx(ChakraPinInput.HiddenInput, { ref: ref, ...inputProps }), _jsx(ChakraPinInput.Control, { children: _jsx(Group, { attached: attached, gap: gap, children: Array.from({ length: pinLength }).map((_, index) => (_jsx(ChakraPinInput.Input, { index: index }, index))) }) })] }));
+});

package/dist/components/pin-input/pin-input.recipe.d.ts

@@ -0,0 +1,236 @@
+export declare const pinInputSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "control" | "root" | "input", {
+    size: {
+        sm: {
+            input: {
+                px: number;
+                borderRadius: "control.sm";
+                textStyle: "xs";
+                '--input-height': "sizes.6";
+            } | {
+                px: number;
+                borderRadius: "control.md";
+                textStyle: "sm";
+                '--input-height': "sizes.7";
+            } | {
+                px: number;
+                borderRadius: "control.md";
+                textStyle: "sm";
+                '--input-height': "sizes.8";
+            } | {
+                px: number;
+                borderRadius: "control.lg";
+                textStyle: "md";
+                '--input-height': "sizes.10";
+            } | {
+                px: number;
+                borderRadius: "control.lg";
+                textStyle: "md";
+                '--input-height': "sizes.12";
+            };
+        };
+        md: {
+            input: {
+                px: number;
+                borderRadius: "control.sm";
+                textStyle: "xs";
+                '--input-height': "sizes.6";
+            } | {
+                px: number;
+                borderRadius: "control.md";
+                textStyle: "sm";
+                '--input-height': "sizes.7";
+            } | {
+                px: number;
+                borderRadius: "control.md";
+                textStyle: "sm";
+                '--input-height': "sizes.8";
+            } | {
+                px: number;
+                borderRadius: "control.lg";
+                textStyle: "md";
+                '--input-height': "sizes.10";
+            } | {
+                px: number;
+                borderRadius: "control.lg";
+                textStyle: "md";
+                '--input-height': "sizes.12";
+            };
+        };
+        lg: {
+            input: {
+                px: number;
+                borderRadius: "control.sm";
+                textStyle: "xs";
+                '--input-height': "sizes.6";
+            } | {
+                px: number;
+                borderRadius: "control.md";
+                textStyle: "sm";
+                '--input-height': "sizes.7";
+            } | {
+                px: number;
+                borderRadius: "control.md";
+                textStyle: "sm";
+                '--input-height': "sizes.8";
+            } | {
+                px: number;
+                borderRadius: "control.lg";
+                textStyle: "md";
+                '--input-height': "sizes.10";
+            } | {
+                px: number;
+                borderRadius: "control.lg";
+                textStyle: "md";
+                '--input-height': "sizes.12";
+            };
+        };
+        xl: {
+            input: {
+                px: number;
+                borderRadius: "control.sm";
+                textStyle: "xs";
+                '--input-height': "sizes.6";
+            } | {
+                px: number;
+                borderRadius: "control.md";
+                textStyle: "sm";
+                '--input-height': "sizes.7";
+            } | {
+                px: number;
+                borderRadius: "control.md";
+                textStyle: "sm";
+                '--input-height': "sizes.8";
+            } | {
+                px: number;
+                borderRadius: "control.lg";
+                textStyle: "md";
+                '--input-height': "sizes.10";
+            } | {
+                px: number;
+                borderRadius: "control.lg";
+                textStyle: "md";
+                '--input-height': "sizes.12";
+            };
+        };
+        xs: {
+            input: {
+                px: number;
+                borderRadius: "control.sm";
+                textStyle: "xs";
+                '--input-height': "sizes.6";
+            } | {
+                px: number;
+                borderRadius: "control.md";
+                textStyle: "sm";
+                '--input-height': "sizes.7";
+            } | {
+                px: number;
+                borderRadius: "control.md";
+                textStyle: "sm";
+                '--input-height': "sizes.8";
+            } | {
+                px: number;
+                borderRadius: "control.lg";
+                textStyle: "md";
+                '--input-height': "sizes.10";
+            } | {
+                px: number;
+                borderRadius: "control.lg";
+                textStyle: "md";
+                '--input-height': "sizes.12";
+            };
+        };
+    };
+    variant: {
+        outline: {
+            input: {
+                bg: "transparent";
+                borderWidth: "1px";
+                borderColor: "border";
+                focusVisibleRing: "inside";
+                focusRingWidth: "0";
+                _hover: {
+                    borderColor: "border.emphasized";
+                    _focusVisible: {
+                        borderColor: "var(--focus-ring-color)";
+                    };
+                };
+            } | {
+                borderWidth: "1px";
+                borderColor: "transparent";
+                bg: "bg.muted";
+                focusVisibleRing: "inside";
+            } | {
+                bg: "transparent";
+                borderBottomWidth: "1px";
+                borderBottomColor: "border";
+                borderRadius: "0";
+                px: "0";
+                _focusVisible: {
+                    borderColor: "var(--focus-color)";
+                    boxShadow: "0px 1px 0px 0px var(--focus-color)";
+                };
+            };
+        };
+        subtle: {
+            input: {
+                bg: "transparent";
+                borderWidth: "1px";
+                borderColor: "border";
+                focusVisibleRing: "inside";
+                focusRingWidth: "0";
+                _hover: {
+                    borderColor: "border.emphasized";
+                    _focusVisible: {
+                        borderColor: "var(--focus-ring-color)";
+                    };
+                };
+            } | {
+                borderWidth: "1px";
+                borderColor: "transparent";
+                bg: "bg.muted";
+                focusVisibleRing: "inside";
+            } | {
+                bg: "transparent";
+                borderBottomWidth: "1px";
+                borderBottomColor: "border";
+                borderRadius: "0";
+                px: "0";
+                _focusVisible: {
+                    borderColor: "var(--focus-color)";
+                    boxShadow: "0px 1px 0px 0px var(--focus-color)";
+                };
+            };
+        };
+        flushed: {
+            input: {
+                bg: "transparent";
+                borderWidth: "1px";
+                borderColor: "border";
+                focusVisibleRing: "inside";
+                focusRingWidth: "0";
+                _hover: {
+                    borderColor: "border.emphasized";
+                    _focusVisible: {
+                        borderColor: "var(--focus-ring-color)";
+                    };
+                };
+            } | {
+                borderWidth: "1px";
+                borderColor: "transparent";
+                bg: "bg.muted";
+                focusVisibleRing: "inside";
+            } | {
+                bg: "transparent";
+                borderBottomWidth: "1px";
+                borderBottomColor: "border";
+                borderRadius: "0";
+                px: "0";
+                _focusVisible: {
+                    borderColor: "var(--focus-color)";
+                    boxShadow: "0px 1px 0px 0px var(--focus-color)";
+                };
+            };
+        };
+    };
+}>;