@insession/design-system 1.3.1

package/dist/index.d.ts

@@ -0,0 +1,501 @@
+import * as react from 'react';
+import { ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, MutableRefObject, AnchorHTMLAttributes, RefObject } from 'react';
+
+type AvatarStatus = 'live' | 'offline';
+type AvatarProps = {
+    label?: ReactNode;
+    name?: string | null;
+    src?: string | null;
+    fallback?: string | null;
+    color?: string;
+    bgColor?: string;
+    size?: number;
+    status?: AvatarStatus;
+    ring?: boolean;
+    className?: string;
+    fallbackClassName?: string;
+    alt?: string;
+};
+declare function Avatar({ label, name, src, fallback, color, bgColor, size, status, ring, className, fallbackClassName, alt, }: AvatarProps): react.JSX.Element;
+type AvatarStackPerson = {
+    label?: ReactNode;
+    name?: string | null;
+    src?: string | null;
+    color?: string;
+    bgColor?: string;
+};
+type AvatarStackProps = {
+    people?: AvatarStackPerson[];
+    max?: number;
+    size?: number;
+    className?: string;
+};
+declare function AvatarStack({ people, max, size, className }: AvatarStackProps): react.JSX.Element;
+
+declare const ALL_PATHS: {
+    sticker: string;
+    menu: string;
+    home: string;
+    graphic_eq: string;
+    history: string;
+    settings: string;
+    check: string;
+    check_circle: string;
+    warning: string;
+    edit: string;
+    link: string;
+    volume_off: string;
+    volume_up: string;
+    extension: string;
+    apps: string;
+    timer: string;
+    movie: string;
+    group: string;
+    sports_esports: string;
+    auto_awesome: string;
+    lock: string;
+    play_arrow: string;
+    queue_music: string;
+    account_circle: string;
+    pause: string;
+    fast_forward: string;
+    videocam: string;
+    videocam_off: string;
+    mic: string;
+    mic_off: string;
+    call_end: string;
+    call: string;
+    help: string;
+    screen_share: string;
+    stop_screen_share: string;
+    logout: string;
+    add: string;
+    add_link: string;
+    add_reaction: string;
+    open_in_new: string;
+    expand_more: string;
+    expand_less: string;
+    chat: string;
+    reply: string;
+    close: string;
+    feedback: string;
+    album: string;
+    image: string;
+    send: string;
+    delete: string;
+    star: string;
+    star_outline: string;
+    person_add: string;
+    notifications: string;
+    cd: string;
+    cassette: string;
+    search: string;
+    more_horiz: string;
+    info: string;
+    music_note: string;
+    schedule: string;
+    chevron_right: string;
+    tag: string;
+    play_circle: string;
+    login: string;
+    add_photo_alternate: string;
+    mood: string;
+    diversity_3: string;
+    waving_hand: string;
+    dashboard: string;
+    forum: string;
+    table_view: string;
+    campaign: string;
+    inbox: string;
+    arrow_forward: string;
+    arrow_downward: string;
+    filter_list: string;
+    swap_vert: string;
+    view_column: string;
+    download: string;
+    upload: string;
+    drag_indicator: string;
+    chevron_left: string;
+    flag: string;
+    block: string;
+    meeting_room: string;
+    pending: string;
+    picture_in_picture: string;
+    open_in_full: string;
+    save: string;
+    push_pin: string;
+};
+type IconName = keyof typeof ALL_PATHS;
+type IconProps = {
+    name: IconName;
+    size?: number;
+    className?: string;
+};
+declare function Icon({ name, size, className }: IconProps): react.JSX.Element;
+
+type BadgeTone = 'live' | 'warn' | 'danger' | 'info' | 'neutral' | 'pro';
+type CountChipProps = {
+    children: ReactNode;
+    animated?: boolean;
+    className?: string;
+};
+declare function CountChip({ children, animated, className }: CountChipProps): react.JSX.Element;
+type BadgeProps = {
+    children: ReactNode;
+    tone?: BadgeTone;
+    dot?: boolean;
+    icon?: IconName | ReactNode;
+    shape?: 'pill' | 'rounded';
+    className?: string;
+    variant?: 'new' | 'live';
+};
+declare function Badge({ children, tone, dot, icon, shape, className, variant, }: BadgeProps): react.JSX.Element;
+
+type BottomSheetProps = {
+    open: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    ariaLabel?: string;
+    closeLabel?: string;
+    closeOnEsc?: boolean;
+};
+declare function BottomSheet({ open, onClose, children, ariaLabel, closeLabel, closeOnEsc, }: BottomSheetProps): react.JSX.Element;
+
+declare const MOBILE_LAYOUT_MQ = "(hover: none), (pointer: coarse), (max-width: 560px)";
+
+type ButtonVariant = 'primary' | 'accent' | 'secondary' | 'ghost' | 'danger' | 'live' | 'join';
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+type ButtonProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    pill?: boolean;
+    dot?: boolean;
+    icon?: IconName | ReactNode;
+    iconRight?: IconName | ReactNode;
+    children: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> & {
+    className?: string;
+};
+declare function Button({ variant, size, loading, disabled, pill, dot, icon, iconRight, type, children, className, ...rest }: ButtonProps): react.JSX.Element;
+
+type CheckboxProps = {
+    checked: boolean;
+    label?: ReactNode;
+    className?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'>;
+declare function Checkbox({ checked, label, id, className, ...rest }: CheckboxProps): react.JSX.Element;
+
+type ChipAvatar = {
+    label: ReactNode;
+    color?: string;
+};
+type ChipProps = {
+    selected?: boolean;
+    icon?: ReactNode;
+    avatar?: ChipAvatar;
+    removable?: boolean;
+    onRemove?: () => void;
+    children: ReactNode;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> & {
+    className?: string;
+};
+declare function Chip({ selected, icon, avatar, removable, onRemove, children, type, className, ...rest }: ChipProps): react.JSX.Element;
+
+type ComposerProps = {
+    value: string;
+    onChange: (text: string) => void;
+    onSubmit: (text: string) => void;
+    placeholder?: string;
+    maxLength?: number;
+    disabled?: boolean;
+    sendLabel: string;
+    actions?: ReactNode;
+    flash?: boolean;
+    textareaRef?: MutableRefObject<HTMLTextAreaElement | null>;
+    size?: 'default' | 'compact';
+    className?: string;
+};
+declare function Composer({ value, onChange, onSubmit, placeholder, maxLength, disabled, sendLabel, actions, flash, textareaRef, size, className, }: ComposerProps): react.JSX.Element;
+
+type ConfirmTone = 'danger' | 'warn' | 'info';
+type ConfirmModalProps = {
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    children: ReactNode;
+    confirmLabel: string;
+    cancelLabel: string;
+    confirmVariant?: ButtonVariant;
+    tone?: ConfirmTone;
+    icon?: IconName;
+    loading?: boolean;
+    ariaLabel?: string;
+    className?: string;
+};
+declare function ConfirmModal({ onClose, onConfirm, title, children, confirmLabel, cancelLabel, confirmVariant, tone, icon, loading, ariaLabel, className, }: ConfirmModalProps): react.JSX.Element;
+
+type EmptyNoteProps = {
+    children: ReactNode;
+    variant?: 'default' | 'compact' | 'dropdown';
+};
+declare function EmptyNote({ children, variant }: EmptyNoteProps): react.JSX.Element;
+
+type IconButtonVariant = 'surface' | 'accent' | 'ghost';
+type IconButtonProps = {
+    label: string;
+    icon: ReactNode;
+    variant?: IconButtonVariant;
+    size?: number;
+    className?: string;
+} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'>;
+declare function IconButton({ label, icon, variant, size, type, className, disabled, ...rest }: IconButtonProps): react.JSX.Element;
+
+declare function GoogleIcon(): react.JSX.Element;
+
+declare function PersonIcon(): react.JSX.Element;
+
+type InputProps = {
+    label?: ReactNode;
+    error?: ReactNode;
+    prefix?: ReactNode;
+    className?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'className'>;
+declare function Input({ label, error, prefix, id, onFocus, onBlur, className, ...rest }: InputProps): react.JSX.Element;
+
+type LinkVariant = 'inline' | 'subtle' | 'pill' | 'wrapper';
+declare function linkClass(variant?: LinkVariant, className?: string): string;
+type LinkProps = {
+    variant?: LinkVariant;
+    asChild?: boolean;
+    className?: string;
+    children: ReactNode;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'>;
+declare function Link({ variant, asChild, className, children, ...rest }: LinkProps): react.JSX.Element;
+
+type LogoMarkVariant = 'row' | 'cluster';
+type LogoMarkProps = {
+    variant?: LogoMarkVariant;
+    size?: number;
+    showWordmark?: boolean;
+    wordmarkSize?: number;
+    className?: string;
+};
+declare function LogoMark({ variant, size, showWordmark, wordmarkSize, className, }: LogoMarkProps): react.JSX.Element;
+
+type LozengeTone = 'success' | 'warning' | 'accent' | 'info' | 'neutral';
+type LozengeProps = {
+    tone?: LozengeTone;
+    dot?: boolean;
+    children: ReactNode;
+    className?: string;
+};
+declare function Lozenge({ tone, dot, children, className, }: LozengeProps): react.JSX.Element;
+
+type MenuProps = {
+    children: ReactNode;
+    ariaLabel?: string;
+    className?: string;
+};
+declare function Menu({ children, ariaLabel, className }: MenuProps): react.JSX.Element;
+type MenuItemProps = {
+    onSelect: () => void;
+    children: ReactNode;
+    icon?: ReactNode;
+    trailing?: ReactNode;
+    active?: boolean;
+    danger?: boolean;
+    disabled?: boolean;
+    role?: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox';
+};
+declare function MenuItem({ onSelect, children, icon, trailing, active, danger, disabled, role, }: MenuItemProps): react.JSX.Element;
+
+type ModalProps = {
+    onClose: () => void;
+    children: ReactNode;
+    width?: string;
+    className?: string;
+    ariaLabel?: string;
+    closeLabel?: string;
+    as?: 'div' | 'form';
+    onSubmit?: (e: any) => void;
+    closeOnEsc?: boolean;
+    title?: ReactNode;
+    footer?: ReactNode;
+};
+declare function Modal({ onClose, children, width, className, ariaLabel, closeLabel, as, onSubmit, closeOnEsc, title, footer, }: ModalProps): react.JSX.Element;
+
+type PopoverPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+type PopoverProps = {
+    open: boolean;
+    onClose: () => void;
+    trigger: ReactNode;
+    children: ReactNode;
+    placement?: PopoverPlacement;
+    ariaLabel?: string;
+    role?: string;
+    panelClassName?: string;
+    panelShadow?: string;
+    panelPadding?: boolean;
+    panelScroll?: boolean;
+    mobileSheet?: boolean;
+    portal?: boolean;
+    closeOnEsc?: boolean;
+    closeOnOutside?: boolean;
+};
+declare function Popover({ open, onClose, trigger, children, placement, ariaLabel, role, panelClassName, panelShadow, panelPadding, panelScroll, mobileSheet, portal, closeOnEsc, closeOnOutside, }: PopoverProps): react.JSX.Element;
+
+type OpenProfile = (uid?: string) => void;
+declare const ProfileModalContext: react.Context<OpenProfile>;
+declare function useOpenProfile(): OpenProfile;
+
+type RadioProps = {
+    checked: boolean;
+    label?: ReactNode;
+    className?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'>;
+declare function Radio({ checked, label, id, className, ...rest }: RadioProps): react.JSX.Element;
+
+type RingTimerProps = {
+    secondsLeft: number;
+    totalSeconds: number;
+    size?: number;
+    urgentThreshold?: number;
+    caption?: string;
+    className?: string;
+};
+declare function RingTimer({ secondsLeft, totalSeconds, size, urgentThreshold, caption, className, }: RingTimerProps): react.JSX.Element;
+
+type SearchFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> & {
+    className?: string;
+};
+declare function SearchField({ className, ...rest }: SearchFieldProps): react.JSX.Element;
+
+type SpinnerProps = {
+    size?: number;
+    thickness?: number;
+    label?: string;
+    className?: string;
+};
+declare function Spinner({ size, thickness, label, className }: SpinnerProps): react.JSX.Element;
+
+type SplitModalItem = {
+    id: string;
+    label: string;
+    icon?: IconName;
+};
+type SplitModalProps = {
+    items: SplitModalItem[];
+    value: string;
+    onSelect: (id: string) => void;
+    children: ReactNode;
+    onClose: () => void;
+    navLabel: string;
+    navTitle?: string;
+    navFooter?: ReactNode;
+    title?: string;
+    description?: string;
+    footer?: ReactNode;
+    ariaLabel?: string;
+    closeLabel?: string;
+    backLabel?: string;
+    asSheet?: boolean;
+    width?: string;
+    navWidth?: number;
+    className?: string;
+    narrow?: boolean;
+};
+declare function SplitModal({ items, value, onSelect, children, onClose, navLabel, navTitle, navFooter, title, description, footer, ariaLabel, closeLabel, backLabel, asSheet, width, navWidth, className, narrow, }: SplitModalProps): react.JSX.Element;
+
+type StatusTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+type StatusDotProps = {
+    tone?: StatusTone;
+    size?: number;
+    pulse?: boolean;
+    label?: string;
+    className?: string;
+};
+declare function StatusDot({ tone, size, pulse, label, className, }: StatusDotProps): react.JSX.Element;
+type StatusBadgeProps = {
+    tone?: StatusTone;
+    children: ReactNode;
+    dot?: boolean;
+    pulse?: boolean;
+    className?: string;
+};
+declare function StatusBadge({ tone, children, dot, pulse, className, }: StatusBadgeProps): react.JSX.Element;
+
+type StepFlowStep = {
+    key: string;
+    label: string;
+};
+type StepFlowProps = {
+    steps: StepFlowStep[];
+    currentIndex: number;
+    direction?: 'row' | 'column';
+    className?: string;
+};
+declare function StepFlow({ steps, currentIndex, direction, className, }: StepFlowProps): react.JSX.Element;
+
+type StepperProps = {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    onChange: (next: number) => void;
+    disabled?: boolean;
+    decLabel?: string;
+    incLabel?: string;
+};
+declare function Stepper({ value, min, max, step, onChange, disabled, decLabel, incLabel, }: StepperProps): react.JSX.Element;
+
+type TabItem = {
+    key: string;
+    label: ReactNode;
+    badge?: ReactNode;
+};
+type TabsProps = {
+    tabs: TabItem[];
+    value: string;
+    onChange: (key: string) => void;
+    ariaLabel?: string;
+    trailing?: ReactNode;
+    className?: string;
+    variant?: 'default' | 'fill';
+};
+declare function Tabs({ tabs, value, onChange, ariaLabel, trailing, className, variant, }: TabsProps): react.JSX.Element;
+
+type ToastTone = 'success' | 'error' | 'info' | 'warn' | 'danger';
+type ToastVariant = 'default' | 'snackbar';
+type ToastProps = {
+    children?: ReactNode;
+    tone?: ToastTone;
+    variant?: ToastVariant;
+    icon?: ReactNode;
+    title?: ReactNode;
+    message?: ReactNode;
+    action?: ReactNode;
+    onAction?: () => void;
+    onClose?: () => void;
+    fixed?: boolean;
+    role?: 'status' | 'alert';
+    className?: string;
+};
+declare function Toast({ children, tone, variant, icon, title, message, action, onAction, onClose, fixed, role, className, }: ToastProps): react.JSX.Element;
+
+type ToggleProps = {
+    checked?: boolean;
+    onChange?: () => void;
+    label?: string;
+    disabled?: boolean;
+};
+declare function Toggle({ checked, onChange, label, disabled, }: ToggleProps): react.JSX.Element;
+
+type Ref = RefObject<HTMLElement | null>;
+declare function useDismiss(open: boolean, ref: Ref | Ref[], onDismiss: () => void, options?: {
+    closeOnEsc?: boolean;
+    closeOnOutside?: boolean;
+    ignore?: (target: Node) => boolean;
+}): void;
+
+export { Avatar, type AvatarProps, AvatarStack, type AvatarStackPerson, type AvatarStackProps, type AvatarStatus, Badge, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, Chip, type ChipAvatar, type ChipProps, Composer, type ComposerProps, ConfirmModal, type ConfirmModalProps, type ConfirmTone, CountChip, type CountChipProps, EmptyNote, type EmptyNoteProps, GoogleIcon, Icon, IconButton, type IconButtonProps, type IconButtonVariant, type IconName, type IconProps, Input, type InputProps, Link, type LinkProps, type LinkVariant, LogoMark, type LogoMarkProps, type LogoMarkVariant, Lozenge, type LozengeProps, type LozengeTone, MOBILE_LAYOUT_MQ, Menu, MenuItem, type MenuItemProps, type MenuProps, Modal, type ModalProps, type OpenProfile, PersonIcon, Popover, type PopoverPlacement, type PopoverProps, ProfileModalContext, Radio, type RadioProps, RingTimer, type RingTimerProps, SearchField, type SearchFieldProps, Spinner, type SpinnerProps, SplitModal, type SplitModalItem, type SplitModalProps, StatusBadge, type StatusBadgeProps, StatusDot, type StatusDotProps, type StatusTone, StepFlow, type StepFlowProps, type StepFlowStep, Stepper, type StepperProps, type TabItem, Tabs, type TabsProps, Toast, type ToastProps, type ToastTone, type ToastVariant, Toggle, type ToggleProps, linkClass, useDismiss, useOpenProfile };