tguikit 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -1,5 +1,27 @@
 import * as react from 'react';
-import { HTMLAttributes, Ref, ReactNode, AllHTMLAttributes, ElementType, InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { HTMLAttributes, Ref, ReactNode, BlockquoteHTMLAttributes, AllHTMLAttributes, ElementType, InputHTMLAttributes, ImgHTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    ref?: Ref<HTMLDivElement>;
+    multiple?: boolean;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onChange?: (value: string[]) => void;
+}
+declare function Accordion({ ref, multiple, value: valueProp, defaultValue, onChange, className, children, ...rest }: AccordionProps): react.JSX.Element;
+declare namespace Accordion {
+    var displayName: string;
+}
+
+interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    value: string;
+    header: ReactNode;
+}
+declare function AccordionItem({ ref, value, header, className, children, ...rest }: AccordionItemProps): react.JSX.Element;
+declare namespace AccordionItem {
+    var displayName: string;
+}
 
 type AvatarSize = 20 | 24 | 28 | 40 | 48 | 96;
 
@@ -16,6 +38,15 @@ declare namespace Avatar {
     var displayName: string;
 }
 
+interface AvatarStackProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    overlap?: number;
+}
+declare function AvatarStack({ ref, overlap, className, style, ...rest }: AvatarStackProps): react.JSX.Element;
+declare namespace AvatarStack {
+    var displayName: string;
+}
+
 type BadgeType = 'number' | 'dot';
 type BadgeMode = 'primary' | 'critical' | 'secondary' | 'gray' | 'white';
 
@@ -31,6 +62,50 @@ declare namespace Badge {
     var displayName: string;
 }
 
+type BannerType = 'section' | 'image';
+
+interface BannerProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+    type?: BannerType;
+    before?: ReactNode;
+    callout?: ReactNode;
+    header?: ReactNode;
+    subheader?: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    background?: ReactNode;
+    onClose?: () => void;
+    closeLabel?: string;
+}
+declare function Banner({ ref, type, before, callout, header, subheader, description, actions, background, onClose, closeLabel, className, children, ...rest }: BannerProps): react.JSX.Element;
+declare namespace Banner {
+    var displayName: string;
+}
+
+interface BlockquoteProps extends BlockquoteHTMLAttributes<HTMLQuoteElement> {
+    ref?: Ref<HTMLQuoteElement>;
+    author?: ReactNode;
+}
+declare function Blockquote({ ref, author, className, children, ...rest }: BlockquoteProps): react.JSX.Element;
+declare namespace Blockquote {
+    var displayName: string;
+}
+
+interface BreadcrumbItem {
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbsProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    ref?: Ref<HTMLElement>;
+    items: BreadcrumbItem[];
+    maxItems?: number;
+}
+declare function Breadcrumbs({ ref, items, maxItems, className, ...rest }: BreadcrumbsProps): react.JSX.Element;
+declare namespace Breadcrumbs {
+    var displayName: string;
+}
+
 type TguiPlatform = 'ios' | 'base';
 type Appearance = 'light' | 'dark';
 interface TguiContextValue {
@@ -136,6 +211,23 @@ declare namespace Checkbox {
     var displayName: string;
 }
 
+type ChipMode = 'elevated' | 'outline';
+
+interface ChipProps extends Omit<AllHTMLAttributes<HTMLElement>, 'onClick'> {
+    ref?: Ref<HTMLElement>;
+    Component?: ElementType;
+    mode?: ChipMode;
+    before?: ReactNode;
+    after?: ReactNode;
+    onClick?: () => void;
+    onRemove?: () => void;
+    removeLabel?: string;
+}
+declare function Chip({ ref, Component, mode, before, after, onClick, onRemove, removeLabel, className, children, ...rest }: ChipProps): react.JSX.Element;
+declare namespace Chip {
+    var displayName: string;
+}
+
 type CircularProgressSize = 's' | 'm' | 'l';
 
 interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'size'> {
@@ -156,6 +248,15 @@ declare namespace Divider {
     var displayName: string;
 }
 
+interface FixedLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    vertical?: 'top' | 'bottom';
+}
+declare function FixedLayout({ ref, vertical, className, ...rest }: FixedLayoutProps): react.JSX.Element;
+declare namespace FixedLayout {
+    var displayName: string;
+}
+
 interface HeadlineProps extends TypographyProps {
     ref?: Ref<HTMLElement>;
 }
@@ -164,6 +265,16 @@ declare namespace Headline {
     var displayName: string;
 }
 
+interface HorizontalScrollProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    snap?: boolean;
+    fade?: boolean;
+}
+declare function HorizontalScroll({ ref, snap, fade, className, children, ...rest }: HorizontalScrollProps): react.JSX.Element;
+declare namespace HorizontalScroll {
+    var displayName: string;
+}
+
 type IconButtonMode = 'bezeled' | 'plain' | 'gray' | 'outline';
 type IconButtonSize = 's' | 'm' | 'l';
 
@@ -179,6 +290,45 @@ declare namespace IconButton {
     var displayName: string;
 }
 
+type Fit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'width' | 'height'> {
+    ref?: Ref<HTMLImageElement>;
+    size?: number;
+    width?: number | string;
+    height?: number | string;
+    aspectRatio?: number | string;
+    fit?: Fit;
+    radius?: number | 'full';
+    bordered?: boolean;
+    fallback?: ReactNode;
+}
+declare function Image({ ref, size, width, height, aspectRatio, fit, radius, bordered, fallback, src, alt, className, style, onLoad, onError, ...rest }: ImageProps): react.JSX.Element;
+declare namespace Image {
+    var displayName: string;
+}
+
+type InlineButtonsMode = 'bezeled' | 'plain' | 'gray';
+
+interface InlineButtonsItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    ref?: Ref<HTMLButtonElement>;
+    icon: ReactNode;
+    children: ReactNode;
+}
+declare function InlineButtonsItem({ ref, icon, children, className, ...rest }: InlineButtonsItemProps): react.JSX.Element;
+declare namespace InlineButtonsItem {
+    var displayName: string;
+}
+
+interface InlineButtonsProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    mode?: InlineButtonsMode;
+}
+declare function InlineButtons({ ref, mode, className, children, ...rest }: InlineButtonsProps): react.JSX.Element;
+declare namespace InlineButtons {
+    var displayName: string;
+    var Item: typeof InlineButtonsItem;
+}
+
 type InputStatus = 'default' | 'error' | 'focused';
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     ref?: Ref<HTMLInputElement>;
@@ -200,6 +350,14 @@ declare namespace LargeTitle {
     var displayName: string;
 }
 
+interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    ref?: Ref<HTMLAnchorElement>;
+}
+declare function Link({ ref, target, rel, className, children, ...rest }: LinkProps): react.JSX.Element;
+declare namespace Link {
+    var displayName: string;
+}
+
 interface ListProps extends HTMLAttributes<HTMLElement> {
     ref?: Ref<HTMLElement>;
     Component?: ElementType;
@@ -209,6 +367,50 @@ declare namespace List {
     var displayName: string;
 }
 
+interface CompactPaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    ref?: Ref<HTMLElement>;
+    page: number;
+    count: number;
+    onChange: (page: number) => void;
+    siblingCount?: number;
+}
+declare function CompactPagination({ ref, page, count, onChange, siblingCount, className, ...rest }: CompactPaginationProps): react.JSX.Element;
+declare namespace CompactPagination {
+    var displayName: string;
+}
+
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    ref?: Ref<HTMLElement>;
+    page: number;
+    count: number;
+    onChange: (page: number) => void;
+    siblingCount?: number;
+}
+declare function Pagination({ ref, page, count, onChange, siblingCount, className, ...rest }: PaginationProps): react.JSX.Element;
+declare namespace Pagination {
+    var displayName: string;
+}
+
+interface PinInputProps {
+    ref?: Ref<HTMLDivElement>;
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    type?: 'numeric' | 'alphanumeric';
+    mask?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    name?: string;
+    'aria-label'?: string;
+    className?: string;
+}
+declare function PinInput({ ref, length, value: valueProp, defaultValue, onChange, onComplete, type, mask, disabled, invalid, name, 'aria-label': ariaLabel, className, }: PinInputProps): react.JSX.Element;
+declare namespace PinInput {
+    var displayName: string;
+}
+
 interface PlaceholderProps extends HTMLAttributes<HTMLElement> {
     ref?: Ref<HTMLElement>;
     children?: ReactNode;
@@ -221,6 +423,15 @@ declare namespace Placeholder {
     var displayName: string;
 }
 
+interface PortalProps {
+    children?: ReactNode;
+    container?: Element | DocumentFragment | null;
+}
+declare function Portal({ children, container }: PortalProps): react.ReactPortal | null;
+declare namespace Portal {
+    var displayName: string;
+}
+
 interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
     value?: number;
@@ -238,6 +449,37 @@ declare namespace Radio {
     var displayName: string;
 }
 
+interface RatingProps {
+    ref?: Ref<HTMLDivElement>;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    count?: number;
+    readOnly?: boolean;
+    disabled?: boolean;
+    icon?: ReactNode;
+    name?: string;
+    'aria-label'?: string;
+    className?: string;
+}
+declare function Rating({ ref, value: valueProp, defaultValue, onChange, count, readOnly, disabled, icon, name, 'aria-label': ariaLabel, className, }: RatingProps): react.JSX.Element;
+declare namespace Rating {
+    var displayName: string;
+}
+
+interface SearchBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    ref?: Ref<HTMLDivElement>;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    onCancel?: () => void;
+    label?: string;
+}
+declare function SearchBar({ ref, value, onChange, placeholder, onCancel, label, className, ...rest }: SearchBarProps): react.JSX.Element;
+declare namespace SearchBar {
+    var displayName: string;
+}
+
 interface SectionFooterProps extends HTMLAttributes<HTMLElement> {
     ref?: Ref<HTMLElement>;
     centered?: boolean;
@@ -268,6 +510,23 @@ declare namespace Section {
     var Footer: typeof SectionFooter;
 }
 
+interface SegmentedControlProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+declare function SegmentedControl({ ref, className, children, onKeyDown, ...rest }: SegmentedControlProps): react.JSX.Element;
+declare namespace SegmentedControl {
+    var displayName: string;
+}
+
+interface SegmentedControlItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLButtonElement>;
+    selected?: boolean;
+}
+declare function SegmentedControlItem({ ref, selected, className, ...rest }: SegmentedControlItemProps): react.JSX.Element;
+declare namespace SegmentedControlItem {
+    var displayName: string;
+}
+
 interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
     ref?: Ref<HTMLSelectElement>;
     header?: ReactNode;
@@ -278,6 +537,22 @@ declare namespace Select {
     var displayName: string;
 }
 
+interface SheetProps {
+    ref?: Ref<HTMLDivElement>;
+    open: boolean;
+    onClose: () => void;
+    header?: ReactNode;
+    children?: ReactNode;
+    dismissable?: boolean;
+    closeLabel?: string;
+    className?: string;
+    container?: Element | DocumentFragment | null;
+}
+declare function Sheet({ ref, open, onClose, header, children, dismissable, closeLabel, className, container, }: SheetProps): react.JSX.Element | null;
+declare namespace Sheet {
+    var displayName: string;
+}
+
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
     visible?: boolean;
@@ -288,6 +563,49 @@ declare namespace Skeleton {
     var displayName: string;
 }
 
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange'> {
+    ref?: Ref<HTMLInputElement>;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    before?: ReactNode;
+    after?: ReactNode;
+}
+declare function Slider({ ref, value: valueProp, defaultValue, onChange, min, max, step, before, after, disabled, className, ...rest }: SliderProps): react.JSX.Element;
+declare namespace Slider {
+    var displayName: string;
+}
+
+interface SnackbarOptions {
+    message: ReactNode;
+    description?: ReactNode;
+    before?: ReactNode;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    duration?: number;
+}
+interface SnackbarApi {
+    show: (options: SnackbarOptions) => string;
+    dismiss: (id: string) => void;
+}
+
+interface SnackbarProviderProps {
+    children: ReactNode;
+    duration?: number;
+    max?: number;
+}
+declare function SnackbarProvider({ children, duration, max }: SnackbarProviderProps): react.JSX.Element;
+declare namespace SnackbarProvider {
+    var displayName: string;
+}
+
+declare function useSnackbar(): SnackbarApi;
+
 type SpinnerSize = 's' | 'm' | 'l';
 
 interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
@@ -299,6 +617,46 @@ declare namespace Spinner {
     var displayName: string;
 }
 
+interface SpoilerProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    revealed?: boolean;
+    defaultRevealed?: boolean;
+    onRevealedChange?: (revealed: boolean) => void;
+    revealOn?: 'click' | 'hover';
+    accentColor?: string;
+    density?: number;
+    fps?: number;
+    revealLabel?: string;
+}
+declare function Spoiler({ ref, revealed: revealedProp, defaultRevealed, onRevealedChange, revealOn, accentColor, density, fps, revealLabel, className, style, children, onClick, onKeyDown, onMouseEnter, onMouseLeave, ...rest }: SpoilerProps): react.JSX.Element;
+declare namespace Spoiler {
+    var displayName: string;
+}
+
+interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    ref?: Ref<HTMLDivElement>;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+}
+declare function Stepper({ ref, value, onChange, min, max, step, disabled, className, ...rest }: StepperProps): react.JSX.Element;
+declare namespace Stepper {
+    var displayName: string;
+}
+
+interface StepsProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    count: number;
+    progress: number;
+}
+declare function Steps({ ref, count, progress, className, ...rest }: StepsProps): react.JSX.Element;
+declare namespace Steps {
+    var displayName: string;
+}
+
 type SubheadlineLevel = '1' | '2';
 
 interface SubheadlineProps extends TypographyProps {
@@ -372,6 +730,26 @@ declare namespace TguiProvider {
 
 declare function useTgui(): TguiContextValue;
 
+interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+    ref?: Ref<HTMLOListElement>;
+}
+declare function Timeline({ ref, className, children, ...rest }: TimelineProps): react.JSX.Element;
+declare namespace Timeline {
+    var displayName: string;
+}
+
+interface TimelineItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {
+    ref?: Ref<HTMLLIElement>;
+    title: ReactNode;
+    description?: ReactNode;
+    time?: ReactNode;
+    active?: boolean;
+}
+declare function TimelineItem({ ref, title, description, time, active, className, ...rest }: TimelineItemProps): react.JSX.Element;
+declare namespace TimelineItem {
+    var displayName: string;
+}
+
 type TitleLevel = '1' | '2' | '3';
 
 interface TitleProps extends TypographyProps {
@@ -383,5 +761,20 @@ declare namespace Title {
     var displayName: string;
 }
 
-export { Avatar, Badge, Button, Caption, Card, CardCell, Cell, Checkbox, CircularProgress, Divider, Headline, IconButton, Input, LargeTitle, List, Placeholder, Progress, Radio, Section, SectionFooter, SectionHeader, Select, Skeleton, Spinner, Subheadline, Switch, TabBar, TabBarItem, Tappable, Text, Textarea, TguiProvider, Title, Typography, useTgui };
-export type { AvatarProps, AvatarSize, BadgeMode, BadgeProps, BadgeType, ButtonMode, ButtonProps, ButtonSize, CaptionProps, CardCellProps, CardProps, CardType, CellProps, CheckboxProps, CircularProgressProps, CircularProgressSize, DividerProps, HeadlineProps, IconButtonMode, IconButtonProps, IconButtonSize, InputProps, InputStatus, LargeTitleProps, ListProps, PlaceholderProps, ProgressProps, RadioProps, SectionFooterProps, SectionHeaderProps, SectionProps, SelectProps, SkeletonProps, SpinnerProps, SpinnerSize, SubheadlineProps, SwitchProps, TabBarItemProps, TabBarProps, TappableProps, TextProps, TextareaProps, TextareaStatus, TguiProviderProps, TitleProps, TypographyProps };
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    ref?: Ref<HTMLSpanElement>;
+    children: ReactNode;
+    content: ReactNode;
+    placement?: TooltipPlacement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+declare function Tooltip({ ref, children, content, placement, open: openProp, onOpenChange, className, }: TooltipProps): react.JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
+
+export { Accordion, AccordionItem, Avatar, AvatarStack, Badge, Banner, Blockquote, Breadcrumbs, Button, Caption, Card, CardCell, Cell, Checkbox, Chip, CircularProgress, CompactPagination, Divider, FixedLayout, Headline, HorizontalScroll, IconButton, Image, InlineButtons, InlineButtonsItem, Input, LargeTitle, Link, List, Pagination, PinInput, Placeholder, Portal, Progress, Radio, Rating, SearchBar, Section, SectionFooter, SectionHeader, SegmentedControl, SegmentedControlItem, Select, Sheet, Skeleton, Slider, SnackbarProvider, Spinner, Spoiler, Stepper, Steps, Subheadline, Switch, TabBar, TabBarItem, Tappable, Text, Textarea, TguiProvider, Timeline, TimelineItem, Title, Tooltip, Typography, useSnackbar, useTgui };
+export type { AccordionItemProps, AccordionProps, AvatarProps, AvatarSize, AvatarStackProps, BadgeMode, BadgeProps, BadgeType, BannerProps, BannerType, BlockquoteProps, BreadcrumbItem, BreadcrumbsProps, ButtonMode, ButtonProps, ButtonSize, CaptionProps, CardCellProps, CardProps, CardType, CellProps, CheckboxProps, ChipMode, ChipProps, CircularProgressProps, CircularProgressSize, CompactPaginationProps, DividerProps, FixedLayoutProps, HeadlineProps, HorizontalScrollProps, IconButtonMode, IconButtonProps, IconButtonSize, ImageProps, InlineButtonsItemProps, InlineButtonsMode, InlineButtonsProps, InputProps, InputStatus, LargeTitleProps, LinkProps, ListProps, PaginationProps, PinInputProps, PlaceholderProps, PortalProps, ProgressProps, RadioProps, RatingProps, SearchBarProps, SectionFooterProps, SectionHeaderProps, SectionProps, SegmentedControlItemProps, SegmentedControlProps, SelectProps, SheetProps, SkeletonProps, SliderProps, SnackbarApi, SnackbarOptions, SnackbarProviderProps, SpinnerProps, SpinnerSize, SpoilerProps, StepperProps, StepsProps, SubheadlineProps, SwitchProps, TabBarItemProps, TabBarProps, TappableProps, TextProps, TextareaProps, TextareaStatus, TguiProviderProps, TimelineItemProps, TimelineProps, TitleProps, TooltipPlacement, TooltipProps, TypographyProps };