tguikit 0.1.1 → 0.3.0

package/dist/index.d.ts

@@ -1,5 +1,95 @@
 import * as react from 'react';
-import { AllHTMLAttributes, Ref, ElementType, ReactNode, HTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { HTMLAttributes, Ref, ReactNode, BlockquoteHTMLAttributes, AllHTMLAttributes, ElementType, InputHTMLAttributes, ImgHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, 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;
+
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    size?: AvatarSize;
+    src?: string;
+    alt?: string;
+    acronym?: string;
+    fallbackIcon?: ReactNode;
+}
+declare function Avatar({ ref, size, src, alt, acronym, fallbackIcon, className, children, ...rest }: AvatarProps): react.JSX.Element;
+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';
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    type?: BadgeType;
+    mode?: BadgeMode;
+    large?: boolean;
+    children?: ReactNode;
+}
+declare function Badge({ ref, type, mode, large, className, children, ...rest }: BadgeProps): react.JSX.Element;
+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;
+}
 
 type TguiPlatform = 'ios' | 'base';
 type Appearance = 'light' | 'dark';
@@ -106,6 +196,35 @@ 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'> {
+    ref?: Ref<HTMLSpanElement>;
+    value?: number;
+    size?: CircularProgressSize;
+}
+declare function CircularProgress({ ref, value, size, className, ...rest }: CircularProgressProps): react.JSX.Element;
+declare namespace CircularProgress {
+    var displayName: string;
+}
+
 interface DividerProps extends HTMLAttributes<HTMLHRElement> {
     ref?: Ref<HTMLHRElement>;
 }
@@ -114,6 +233,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>;
 }
@@ -122,6 +250,48 @@ 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';
+
+interface IconButtonProps extends Omit<AllHTMLAttributes<HTMLElement>, 'size'> {
+    ref?: Ref<HTMLElement>;
+    Component?: ElementType;
+    mode?: IconButtonMode;
+    size?: IconButtonSize;
+    circle?: boolean;
+}
+declare function IconButton({ ref, Component, mode, size, circle, type, className, children, ...rest }: IconButtonProps): react.JSX.Element;
+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 InputStatus = 'default' | 'error' | 'focused';
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     ref?: Ref<HTMLInputElement>;
@@ -143,6 +313,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;
@@ -152,6 +330,26 @@ declare namespace List {
     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;
@@ -164,6 +362,50 @@ 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;
+}
+declare function Progress({ ref, value, className, ...rest }: ProgressProps): react.JSX.Element;
+declare namespace Progress {
+    var displayName: string;
+}
+
+interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
+    ref?: Ref<HTMLInputElement>;
+}
+declare function Radio({ ref, disabled, className, style, ...rest }: RadioProps): react.JSX.Element;
+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 SectionFooterProps extends HTMLAttributes<HTMLElement> {
     ref?: Ref<HTMLElement>;
     centered?: boolean;
@@ -194,6 +436,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;
@@ -204,6 +463,102 @@ 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;
+    children?: ReactNode;
+}
+declare function Skeleton({ ref, visible, className, children, ...rest }: SkeletonProps): react.JSX.Element;
+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> {
+    ref?: Ref<HTMLSpanElement>;
+    size?: SpinnerSize;
+}
+declare function Spinner({ ref, size, className, ...rest }: SpinnerProps): react.JSX.Element;
+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;
+}
+
 type SubheadlineLevel = '1' | '2';
 
 interface SubheadlineProps extends TypographyProps {
@@ -251,6 +606,19 @@ declare namespace Text {
     var displayName: string;
 }
 
+type TextareaStatus = 'default' | 'error' | 'focused';
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    ref?: Ref<HTMLTextAreaElement>;
+    header?: ReactNode;
+    status?: TextareaStatus;
+    autoGrow?: boolean;
+    maxRows?: number;
+}
+declare function Textarea({ ref, header, status, autoGrow, maxRows, rows, disabled, className, value, defaultValue, onFocus, onBlur, onChange, ...rest }: TextareaProps): react.JSX.Element;
+declare namespace Textarea {
+    var displayName: string;
+}
+
 interface TguiProviderProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
     platform?: TguiPlatform;
@@ -275,5 +643,20 @@ declare namespace Title {
     var displayName: string;
 }
 
-export { Button, Caption, Card, CardCell, Cell, Checkbox, Divider, Headline, Input, LargeTitle, List, Placeholder, Section, SectionFooter, SectionHeader, Select, Subheadline, Switch, TabBar, TabBarItem, Tappable, Text, TguiProvider, Title, Typography, useTgui };
-export type { ButtonMode, ButtonProps, ButtonSize, CaptionProps, CardCellProps, CardProps, CardType, CellProps, CheckboxProps, DividerProps, HeadlineProps, InputProps, InputStatus, LargeTitleProps, ListProps, PlaceholderProps, SectionFooterProps, SectionHeaderProps, SectionProps, SelectProps, SubheadlineProps, SwitchProps, TabBarItemProps, TabBarProps, TappableProps, TextProps, 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, Button, Caption, Card, CardCell, Cell, Checkbox, Chip, CircularProgress, Divider, FixedLayout, Headline, HorizontalScroll, IconButton, Image, Input, LargeTitle, Link, List, PinInput, Placeholder, Portal, Progress, Radio, Rating, Section, SectionFooter, SectionHeader, SegmentedControl, SegmentedControlItem, Select, Sheet, Skeleton, Slider, SnackbarProvider, Spinner, Spoiler, Subheadline, Switch, TabBar, TabBarItem, Tappable, Text, Textarea, TguiProvider, Title, Tooltip, Typography, useSnackbar, useTgui };
+export type { AccordionItemProps, AccordionProps, AvatarProps, AvatarSize, AvatarStackProps, BadgeMode, BadgeProps, BadgeType, BannerProps, BannerType, BlockquoteProps, ButtonMode, ButtonProps, ButtonSize, CaptionProps, CardCellProps, CardProps, CardType, CellProps, CheckboxProps, ChipMode, ChipProps, CircularProgressProps, CircularProgressSize, DividerProps, FixedLayoutProps, HeadlineProps, HorizontalScrollProps, IconButtonMode, IconButtonProps, IconButtonSize, ImageProps, InputProps, InputStatus, LargeTitleProps, LinkProps, ListProps, PinInputProps, PlaceholderProps, PortalProps, ProgressProps, RadioProps, RatingProps, SectionFooterProps, SectionHeaderProps, SectionProps, SegmentedControlItemProps, SegmentedControlProps, SelectProps, SheetProps, SkeletonProps, SliderProps, SnackbarApi, SnackbarOptions, SnackbarProviderProps, SpinnerProps, SpinnerSize, SpoilerProps, SubheadlineProps, SwitchProps, TabBarItemProps, TabBarProps, TappableProps, TextProps, TextareaProps, TextareaStatus, TguiProviderProps, TitleProps, TooltipPlacement, TooltipProps, TypographyProps };