tguikit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vladyslav Skrynnyk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,54 @@
+# tguikit
+
+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
+
+```bash
+bun add tguikit
+```
+
+`react` and `react-dom` 19 are peer dependencies.
+
+## Use
+
+```tsx
+import { TguiProvider, Button } from 'tguikit';
+import 'tguikit/styles.css';
+
+export function App() {
+  return (
+    <TguiProvider>
+      <Button mode="filled" size="l" stretched>
+        Continue
+      </Button>
+    </TguiProvider>
+  );
+}
+```
+
+`TguiProvider` supplies the theme and platform. It follows the Telegram / system light–dark theme automatically; pass `appearance` or `platform` to pin them.
+
+## What it fixes
+
+See [`IMPROVEMENTS.md`](./IMPROVEMENTS.md) — ref forwarding, theme tokens, touch-safe hover, SSR, a real package build, and a bundle roughly a tenth the size of the original.
+
+## Develop
+
+```bash
+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).
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,279 @@
+import * as react from 'react';
+import { AllHTMLAttributes, Ref, ElementType, ReactNode, HTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, ButtonHTMLAttributes } from 'react';
+
+type TguiPlatform = 'ios' | 'base';
+type Appearance = 'light' | 'dark';
+interface TguiContextValue {
+    platform: TguiPlatform;
+    appearance: Appearance;
+    portalContainer: HTMLElement | null;
+}
+
+type ButtonMode = 'filled' | 'bezeled' | 'plain' | 'gray' | 'outline' | 'white';
+type ButtonSize = 's' | 'm' | 'l';
+
+interface ButtonProps extends Omit<AllHTMLAttributes<HTMLElement>, 'size'> {
+    ref?: Ref<HTMLElement>;
+    Component?: ElementType;
+    mode?: ButtonMode;
+    size?: ButtonSize;
+    stretched?: boolean;
+    loading?: boolean;
+    before?: ReactNode;
+    after?: ReactNode;
+}
+declare function Button({ ref, Component, mode, size, stretched, loading, type, before, after, children, className, ...rest }: ButtonProps): react.JSX.Element;
+declare namespace Button {
+    var displayName: string;
+}
+
+interface TypographyProps extends AllHTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+    weight?: '1' | '2' | '3';
+    caps?: boolean;
+    Component?: ElementType;
+}
+declare function Typography({ ref, weight, caps, Component, className, ...rest }: TypographyProps): react.JSX.Element;
+declare namespace Typography {
+    var displayName: string;
+}
+
+type CaptionLevel = '1' | '2';
+
+interface CaptionProps extends TypographyProps {
+    ref?: Ref<HTMLElement>;
+    level?: CaptionLevel;
+}
+declare function Caption({ ref, level, Component, className, ...rest }: CaptionProps): react.JSX.Element;
+declare namespace Caption {
+    var displayName: string;
+}
+
+type CardType = 'plain' | 'ambient';
+
+interface TappableProps extends AllHTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+    Component?: ElementType;
+    interactiveAnimation?: 'background' | 'opacity';
+}
+declare function Tappable({ ref, Component, interactiveAnimation, className, children, onPointerDown, onPointerCancel, ...rest }: TappableProps): react.JSX.Element;
+declare namespace Tappable {
+    var displayName: string;
+}
+
+interface CellProps extends Omit<TappableProps, 'Component'> {
+    ref?: Ref<HTMLElement>;
+    Component?: ElementType;
+    subhead?: ReactNode;
+    hint?: ReactNode;
+    titleBadge?: ReactNode;
+    subtitle?: ReactNode;
+    description?: ReactNode;
+    before?: ReactNode;
+    after?: ReactNode;
+    hovered?: boolean;
+    multiline?: boolean;
+}
+declare function Cell({ ref, Component, subhead, children, hint, titleBadge, subtitle, description, before, after, hovered, multiline, className, ...rest }: CellProps): react.JSX.Element;
+declare namespace Cell {
+    var displayName: string;
+}
+
+interface CardCellProps extends CellProps {
+    ref?: Ref<HTMLElement>;
+}
+declare function CardCell({ ref, children, subtitle, className, ...rest }: CardCellProps): react.JSX.Element;
+declare namespace CardCell {
+    var displayName: string;
+}
+
+interface CardProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+    type?: CardType;
+}
+declare function Card({ ref, type, className, children, ...rest }: CardProps): react.JSX.Element;
+declare namespace Card {
+    var displayName: string;
+    var Cell: typeof CardCell;
+}
+
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    ref?: Ref<HTMLInputElement>;
+    indeterminate?: boolean;
+}
+declare function Checkbox({ ref, indeterminate, disabled, className, style, ...rest }: CheckboxProps): react.JSX.Element;
+declare namespace Checkbox {
+    var displayName: string;
+}
+
+interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    ref?: Ref<HTMLHRElement>;
+}
+declare function Divider({ ref, className, ...rest }: DividerProps): react.JSX.Element;
+declare namespace Divider {
+    var displayName: string;
+}
+
+interface HeadlineProps extends TypographyProps {
+    ref?: Ref<HTMLElement>;
+}
+declare function Headline({ ref, weight, className, Component, ...rest }: HeadlineProps): react.JSX.Element;
+declare namespace Headline {
+    var displayName: string;
+}
+
+type InputStatus = 'default' | 'error' | 'focused';
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    ref?: Ref<HTMLInputElement>;
+    header?: ReactNode;
+    before?: ReactNode;
+    after?: ReactNode;
+    status?: InputStatus;
+}
+declare function Input({ ref, type, header, before, after, status, disabled, className, onFocus, onBlur, ...rest }: InputProps): react.JSX.Element;
+declare namespace Input {
+    var displayName: string;
+}
+
+interface LargeTitleProps extends TypographyProps {
+    ref?: Ref<HTMLElement>;
+}
+declare function LargeTitle({ ref, weight, className, Component, ...rest }: LargeTitleProps): react.JSX.Element;
+declare namespace LargeTitle {
+    var displayName: string;
+}
+
+interface ListProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+    Component?: ElementType;
+}
+declare function List({ ref, Component, className, children, ...rest }: ListProps): react.JSX.Element;
+declare namespace List {
+    var displayName: string;
+}
+
+interface PlaceholderProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+    children?: ReactNode;
+    header?: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+}
+declare function Placeholder({ ref, children, header, description, action, className, ...rest }: PlaceholderProps): react.JSX.Element;
+declare namespace Placeholder {
+    var displayName: string;
+}
+
+interface SectionFooterProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+    centered?: boolean;
+}
+declare function SectionFooter({ ref, centered, className, children, ...rest }: SectionFooterProps): react.JSX.Element;
+declare namespace SectionFooter {
+    var displayName: string;
+}
+
+interface SectionHeaderProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+    large?: boolean;
+}
+declare function SectionHeader({ ref, large, className, children, ...rest }: SectionHeaderProps): react.JSX.Element;
+declare namespace SectionHeader {
+    var displayName: string;
+}
+
+interface SectionProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+    header?: ReactNode;
+    footer?: ReactNode;
+}
+declare function Section({ ref, header, footer, className, children, ...rest }: SectionProps): react.JSX.Element;
+declare namespace Section {
+    var displayName: string;
+    var Header: typeof SectionHeader;
+    var Footer: typeof SectionFooter;
+}
+
+interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    ref?: Ref<HTMLSelectElement>;
+    header?: ReactNode;
+    status?: InputStatus;
+}
+declare function Select({ ref, header, status, disabled, className, onFocus, onBlur, children, ...rest }: SelectProps): react.JSX.Element;
+declare namespace Select {
+    var displayName: string;
+}
+
+type SubheadlineLevel = '1' | '2';
+
+interface SubheadlineProps extends TypographyProps {
+    ref?: Ref<HTMLElement>;
+    level?: SubheadlineLevel;
+}
+declare function Subheadline({ ref, level, Component, className, ...rest }: SubheadlineProps): react.JSX.Element;
+declare namespace Subheadline {
+    var displayName: string;
+}
+
+interface SwitchProps extends InputHTMLAttributes<HTMLInputElement> {
+    ref?: Ref<HTMLInputElement>;
+}
+declare function Switch({ ref, disabled, className, style, ...rest }: SwitchProps): react.JSX.Element;
+declare namespace Switch {
+    var displayName: string;
+}
+
+interface TabBarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: Ref<HTMLElement>;
+    selected?: boolean;
+    text?: string;
+    children?: ReactNode;
+}
+declare function TabBarItem({ ref, selected, text, children, className, ...rest }: TabBarItemProps): react.JSX.Element;
+declare namespace TabBarItem {
+    var displayName: string;
+}
+
+interface TabBarProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement>;
+}
+declare function TabBar({ ref, className, children, ...rest }: TabBarProps): react.JSX.Element;
+declare namespace TabBar {
+    var displayName: string;
+    var Item: typeof TabBarItem;
+}
+
+interface TextProps extends TypographyProps {
+    ref?: Ref<HTMLElement>;
+}
+declare function Text({ ref, className, Component, ...rest }: TextProps): react.JSX.Element;
+declare namespace Text {
+    var displayName: string;
+}
+
+interface TguiProviderProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+    platform?: TguiPlatform;
+    appearance?: Appearance;
+    portalContainer?: HTMLElement | null;
+}
+declare function TguiProvider({ ref, platform: platformProp, appearance: appearanceProp, portalContainer: portalContainerProp, className, children, ...rest }: TguiProviderProps): react.JSX.Element;
+declare namespace TguiProvider {
+    var displayName: string;
+}
+
+declare function useTgui(): TguiContextValue;
+
+type TitleLevel = '1' | '2' | '3';
+
+interface TitleProps extends TypographyProps {
+    ref?: Ref<HTMLElement>;
+    level?: TitleLevel;
+}
+declare function Title({ ref, level, Component, className, ...rest }: TitleProps): react.JSX.Element;
+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 };