tguikit 0.1.0 → 0.2.0

package/README.md

@@ -2,8 +2,6 @@
 
 React 19 component library for Telegram Mini Apps — a modern reimplementation of [`@telegram-apps/telegram-ui`](https://github.com/telegram-mini-apps-dev/TelegramUI).
 
-**[Storybook →](https://alwaysgladtobethefirst.github.io/tgui/)**
-
 > Pre-release. The API is still moving before `1.0`.
 
 ## Install
@@ -44,10 +42,7 @@ bun install
 bun run storybook
 ```
 
-Storybook is the workbench — every component has a story. The hosted build is at
-[alwaysgladtobethefirst.github.io/tgui](https://alwaysgladtobethefirst.github.io/tgui/).
-
-See [`CONTRIBUTING.md`](./CONTRIBUTING.md).
+Storybook is the workbench — every component has a story. See [`CONTRIBUTING.md`](./CONTRIBUTING.md).
 
 ## License
 

package/dist/index.d.ts

@@ -1,5 +1,35 @@
 import * as react from 'react';
-import { AllHTMLAttributes, Ref, ElementType, ReactNode, HTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { HTMLAttributes, Ref, ReactNode, AllHTMLAttributes, ElementType, InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes } from 'react';
+
+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;
+}
+
+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 TguiPlatform = 'ios' | 'base';
 type Appearance = 'light' | 'dark';
@@ -106,6 +136,18 @@ declare namespace Checkbox {
     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>;
 }
@@ -122,6 +164,21 @@ declare namespace Headline {
     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 InputStatus = 'default' | 'error' | 'focused';
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     ref?: Ref<HTMLInputElement>;
@@ -164,6 +221,23 @@ declare namespace Placeholder {
     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 SectionFooterProps extends HTMLAttributes<HTMLElement> {
     ref?: Ref<HTMLElement>;
     centered?: boolean;
@@ -204,6 +278,27 @@ declare namespace Select {
     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;
+}
+
+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;
+}
+
 type SubheadlineLevel = '1' | '2';
 
 interface SubheadlineProps extends TypographyProps {
@@ -251,6 +346,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 +383,5 @@ 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 };
+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 };