tguikit 0.3.0 → 0.5.0

package/MIGRATION.md

@@ -0,0 +1,67 @@
+# Migrating from 0.4 to 0.5
+
+0.5 rebuilds the token system on Apple's HIG and standardises the component API. It is a hard break — no compatibility layer. This guide lists every change that can affect your code.
+
+## Tokens
+
+Every `--tgui--*_color` / `--tgui--*_*` custom property was renamed to a hyphenated, HIG-semantic name. If you read `--tgui--*` variables in your own CSS or inline styles, remap them:
+
+| 0.4 | 0.5 |
+| --- | --- |
+| `--tgui--bg_color` | `--tgui--bg` |
+| `--tgui--secondary_bg_color` | `--tgui--bg-secondary` |
+| `--tgui--tertiary_bg_color` | `--tgui--fill` (no direct equivalent) |
+| `--tgui--section_bg_color` / `--tgui--card_bg_color` / `--tgui--header_bg_color` | `--tgui--bg-elevated` |
+| `--tgui--text_color` | `--tgui--label` |
+| `--tgui--hint_color` | `--tgui--label-secondary` |
+| `--tgui--secondary_hint_color` / `--tgui--subtitle_text_color` | `--tgui--label-tertiary` |
+| `--tgui--section_header_text_color` | `--tgui--label-secondary` |
+| `--tgui--link_color` | `--tgui--link` |
+| `--tgui--button_color` | `--tgui--accent` |
+| `--tgui--button_text_color` / `--tgui--accent_text_color` | `--tgui--accent-label` |
+| `--tgui--destructive_text_color` | `--tgui--destructive` |
+| `--tgui--destructive_background` | `--tgui--destructive` |
+| `--tgui--outline` / `--tgui--divider` | `--tgui--separator` |
+| `--tgui--border--width` | `--tgui--hairline` |
+| `--tgui--green` | `--tgui--success` |
+| `--tgui--secondary_fill` | `--tgui--fill-secondary` |
+| `--tgui--field_radius` / `--tgui--field_gap` / `--tgui--field_padding_x` … | `--tgui--field-radius` / `--tgui--field-gap` / `--tgui--field-padding-x` … |
+| `--tgui--z-index--overlay` / `--z-index--simple` / `--z-index--skeleton` | `--tgui--z-overlay` / `--tgui--z-raised` / `--tgui--z-base` |
+| `--tgui--headline--font_size`, `--tgui--text--line_height`, `--tgui--title`, `--tgui--caption`, … (the per-style type tokens) | removed — the type scale now lives inside the typography components; use `<Headline>`, `<Text>`, `<Caption>` etc. rather than the raw values |
+| `--tgui--segmented_control_active_bg` | removed — `SegmentedControl` owns its pill |
+| `--tgui--skeleton`, `--tgui--*_code_highlight`, `--tgui--surface_*`, `--tgui--tooltip_background_dark`, `--tgui--toast_accent_color`, `--tgui--plain_*` | removed |
+
+New in 0.5: `--tgui--accent-strong` / `--tgui--link-strong` / `--tgui--destructive-strong` (WCAG-AA-safe variants of the accent hues), `--tgui--focus-ring` / `--tgui--focus-ring-offset` / `--tgui--focus-ring-shadow`, `--tgui--bg-elevated`, the `--tgui--fill-*` ladder, `--tgui--material-*`, `--tgui--surface-bg` (one background for every raised surface — cards, sections, tab bar, and every floating overlay) + `--tgui--overlay-shadow` (the floating elevation, worn only by overlays), `--tgui--radius` + derivatives, motion duration/easing tokens.
+
+### `--tgui--focus-ring` changed shape
+
+It was a `box-shadow` value; it is now an `outline` value (`2px solid var(--tgui--accent)`). If you applied it as `box-shadow: var(--tgui--focus-ring)`, switch to `outline: var(--tgui--focus-ring); outline-offset: var(--tgui--focus-ring-offset)`.
+
+## Component API
+
+| Component | 0.4 | 0.5 |
+| --- | --- | --- |
+| `Accordion`, `Slider`, `PinInput`, `Rating`, `Stepper` | `onChange` | `onValueChange` |
+| `Stepper` | `value` + `onChange` required | `value` / `defaultValue` / `onValueChange` all optional (works uncontrolled) |
+| `SegmentedControl` | manual `<SegmentedControlItem selected onClick>` per item | `<SegmentedControl value onValueChange>` + `<SegmentedControlItem value="…">` (the old per-item props still work) |
+| `Sheet` | `onClose: () => void` | `onOpenChange: (open: boolean) => void` |
+| `Spoiler` | `revealed` / `defaultRevealed` / `onRevealedChange` | `open` / `defaultOpen` / `onOpenChange` |
+| `Tooltip` | `open` / `onOpenChange` | unchanged, gains `defaultOpen` |
+
+Every stateful component now follows one of two prop triads: `value` / `defaultValue` / `onValueChange`, or `open` / `defaultOpen` / `onOpenChange`.
+
+## Styling hooks
+
+Every component now emits `data-slot="<component>"` on its root and `data-slot="<component>-<part>"` on sub-parts. Visual state is exposed via `data-state`, `data-disabled`, `data-loading`, `data-selected`, `aria-*` — not internal class names. Prefer these over targeting hashed CSS-module classes.
+
+## Semantics
+
+- `Button`, `Cell`, `SectionFooter` labels render as `<span>`, not `<h6>`.
+- `FormField` / `Select` headers now sit inside the `<label>` (visually hidden on iOS) so they always name the control.
+- `Progress`, `CircularProgress`, `Steps` carry a default `aria-label` on the `progressbar` role — pass `aria-label` to override.
+- `HorizontalScroll` scroll region is keyboard-focusable; name it with the `scrollLabel` prop.
+
+## New
+
+- `Popover` (`Popover` / `Popover.Trigger` / `Popover.Content`).
+- `Footnote`, `Callout` typography components.

package/dist/index.d.ts

@@ -1,14 +1,14 @@
 import * as react from 'react';
-import { HTMLAttributes, Ref, ReactNode, BlockquoteHTMLAttributes, AllHTMLAttributes, ElementType, InputHTMLAttributes, ImgHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { HTMLAttributes, Ref, ReactNode, BlockquoteHTMLAttributes, AllHTMLAttributes, ElementType, InputHTMLAttributes, ButtonHTMLAttributes, ReactElement, ImgHTMLAttributes, 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;
+    onValueChange?: (value: string[]) => void;
 }
-declare function Accordion({ ref, multiple, value: valueProp, defaultValue, onChange, className, children, ...rest }: AccordionProps): react.JSX.Element;
+declare function Accordion({ ref, multiple, value: valueProp, defaultValue, onValueChange, className, children, ...rest }: AccordionProps): react.JSX.Element;
 declare namespace Accordion {
     var displayName: string;
 }
@@ -91,12 +91,28 @@ 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 {
     platform: TguiPlatform;
     appearance: Appearance;
     portalContainer: HTMLElement | null;
+    haptics: boolean;
 }
 
 type ButtonMode = 'filled' | 'bezeled' | 'plain' | 'gray' | 'outline' | 'white';
@@ -128,6 +144,14 @@ declare namespace Typography {
     var displayName: string;
 }
 
+interface CalloutProps extends TypographyProps {
+    ref?: Ref<HTMLElement>;
+}
+declare function Callout({ ref, className, Component, ...rest }: CalloutProps): react.JSX.Element;
+declare namespace Callout {
+    var displayName: string;
+}
+
 type CaptionLevel = '1' | '2';
 
 interface CaptionProps extends TypographyProps {
@@ -144,7 +168,7 @@ type CardType = 'plain' | 'ambient';
 interface TappableProps extends AllHTMLAttributes<HTMLElement> {
     ref?: Ref<HTMLElement>;
     Component?: ElementType;
-    interactiveAnimation?: 'background' | 'opacity';
+    interactiveAnimation?: 'background' | 'opacity' | 'none';
 }
 declare function Tappable({ ref, Component, interactiveAnimation, className, children, onPointerDown, onPointerCancel, ...rest }: TappableProps): react.JSX.Element;
 declare namespace Tappable {
@@ -191,7 +215,7 @@ interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     ref?: Ref<HTMLInputElement>;
     indeterminate?: boolean;
 }
-declare function Checkbox({ ref, indeterminate, disabled, className, style, ...rest }: CheckboxProps): react.JSX.Element;
+declare function Checkbox({ ref, indeterminate, disabled, className, style, onChange, ...rest }: CheckboxProps): react.JSX.Element;
 declare namespace Checkbox {
     var displayName: string;
 }
@@ -220,11 +244,31 @@ interface CircularProgressProps extends Omit<HTMLAttributes<HTMLSpanElement>, 's
     value?: number;
     size?: CircularProgressSize;
 }
-declare function CircularProgress({ ref, value, size, className, ...rest }: CircularProgressProps): react.JSX.Element;
+declare function CircularProgress({ ref, value, size, className, 'aria-label': ariaLabel, ...rest }: CircularProgressProps): react.JSX.Element;
 declare namespace CircularProgress {
     var displayName: string;
 }
 
+type DialogActionRole = 'default' | 'cancel' | 'destructive';
+interface DialogAction {
+    label: ReactNode;
+    onClick?: () => void;
+    role?: DialogActionRole;
+}
+interface DialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    actions: DialogAction[];
+    cancelLabel?: string;
+    container?: Element | DocumentFragment | null;
+}
+declare function Dialog({ open, onOpenChange, title, description, actions, cancelLabel, container, }: DialogProps): react.JSX.Element | null;
+declare namespace Dialog {
+    var displayName: string;
+}
+
 interface DividerProps extends HTMLAttributes<HTMLHRElement> {
     ref?: Ref<HTMLHRElement>;
 }
@@ -233,6 +277,107 @@ declare namespace Divider {
     var displayName: string;
 }
 
+interface DropdownMenuCheckboxItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    ref?: Ref<HTMLButtonElement>;
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare function DropdownMenuCheckboxItem({ ref, checked, onCheckedChange, disabled, className, children, onClick, ...rest }: DropdownMenuCheckboxItemProps): react.JSX.Element;
+declare namespace DropdownMenuCheckboxItem {
+    var displayName: string;
+}
+
+type FloatingSide = 'top' | 'bottom' | 'left' | 'right';
+type FloatingPlacement = FloatingSide | `${FloatingSide}-start` | `${FloatingSide}-end`;
+
+interface DropdownMenuContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    ref?: Ref<HTMLDivElement>;
+    placement?: FloatingPlacement;
+    gap?: number;
+    container?: Element | DocumentFragment | null;
+    className?: string;
+}
+declare function DropdownMenuContent({ ref, placement, gap, container, className, children, onKeyDown, ...rest }: DropdownMenuContentProps): react.JSX.Element | null;
+declare namespace DropdownMenuContent {
+    var displayName: string;
+}
+
+interface DropdownMenuItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onSelect'> {
+    ref?: Ref<HTMLButtonElement>;
+    icon?: ReactNode;
+    destructive?: boolean;
+    onSelect?: (event: {
+        preventDefault: () => void;
+    }) => void;
+}
+declare function DropdownMenuItem({ ref, icon, destructive, disabled, className, children, onSelect, onClick, ...rest }: DropdownMenuItemProps): react.JSX.Element;
+declare namespace DropdownMenuItem {
+    var displayName: string;
+}
+
+interface DropdownMenuLabelProps extends HTMLAttributes<HTMLDivElement> {
+    ref?: Ref<HTMLDivElement>;
+}
+declare function DropdownMenuLabel({ ref, className, ...rest }: DropdownMenuLabelProps): react.JSX.Element;
+declare namespace DropdownMenuLabel {
+    var displayName: string;
+}
+
+interface DropdownMenuRadioGroupProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+}
+declare function DropdownMenuRadioGroup({ value: valueProp, defaultValue, onValueChange, children, }: DropdownMenuRadioGroupProps): react.JSX.Element;
+declare namespace DropdownMenuRadioGroup {
+    var displayName: string;
+}
+
+interface DropdownMenuRadioItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    ref?: Ref<HTMLButtonElement>;
+    value: string;
+}
+declare function DropdownMenuRadioItem({ ref, value, disabled, className, children, onClick, ...rest }: DropdownMenuRadioItemProps): react.JSX.Element;
+declare namespace DropdownMenuRadioItem {
+    var displayName: string;
+}
+
+interface DropdownMenuSeparatorProps extends HTMLAttributes<HTMLHRElement> {
+    ref?: Ref<HTMLHRElement>;
+}
+declare function DropdownMenuSeparator({ ref, className, ...rest }: DropdownMenuSeparatorProps): react.JSX.Element;
+declare namespace DropdownMenuSeparator {
+    var displayName: string;
+}
+
+interface DropdownMenuTriggerProps {
+    children: ReactElement;
+}
+declare function DropdownMenuTrigger({ children }: DropdownMenuTriggerProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+declare namespace DropdownMenuTrigger {
+    var displayName: string;
+}
+
+interface DropdownMenuProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+declare function DropdownMenu({ open: openProp, defaultOpen, onOpenChange, children, }: DropdownMenuProps): react.JSX.Element;
+declare namespace DropdownMenu {
+    var displayName: string;
+    var Trigger: typeof DropdownMenuTrigger;
+    var Content: typeof DropdownMenuContent;
+    var Item: typeof DropdownMenuItem;
+    var CheckboxItem: typeof DropdownMenuCheckboxItem;
+    var RadioGroup: typeof DropdownMenuRadioGroup;
+    var RadioItem: typeof DropdownMenuRadioItem;
+    var Separator: typeof DropdownMenuSeparator;
+    var Label: typeof DropdownMenuLabel;
+}
+
 interface FixedLayoutProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
     vertical?: 'top' | 'bottom';
@@ -242,6 +387,14 @@ declare namespace FixedLayout {
     var displayName: string;
 }
 
+interface FootnoteProps extends TypographyProps {
+    ref?: Ref<HTMLElement>;
+}
+declare function Footnote({ ref, className, Component, ...rest }: FootnoteProps): react.JSX.Element;
+declare namespace Footnote {
+    var displayName: string;
+}
+
 interface HeadlineProps extends TypographyProps {
     ref?: Ref<HTMLElement>;
 }
@@ -254,8 +407,9 @@ interface HorizontalScrollProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
     snap?: boolean;
     fade?: boolean;
+    scrollLabel?: string;
 }
-declare function HorizontalScroll({ ref, snap, fade, className, children, ...rest }: HorizontalScrollProps): react.JSX.Element;
+declare function HorizontalScroll({ ref, snap, fade, scrollLabel, className, children, ...rest }: HorizontalScrollProps): react.JSX.Element;
 declare namespace HorizontalScroll {
     var displayName: string;
 }
@@ -292,6 +446,28 @@ 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>;
@@ -330,12 +506,36 @@ 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;
+    onValueChange?: (value: string) => void;
     onComplete?: (value: string) => void;
     type?: 'numeric' | 'alphanumeric';
     mask?: boolean;
@@ -345,7 +545,7 @@ interface PinInputProps {
     '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 function PinInput({ ref, length, value: valueProp, defaultValue, onValueChange, onComplete, type, mask, disabled, invalid, name, 'aria-label': ariaLabel, className, }: PinInputProps): react.JSX.Element;
 declare namespace PinInput {
     var displayName: string;
 }
@@ -362,6 +562,39 @@ declare namespace Placeholder {
     var displayName: string;
 }
 
+interface PopoverContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    ref?: Ref<HTMLDivElement>;
+    placement?: FloatingPlacement;
+    gap?: number;
+    container?: Element | DocumentFragment | null;
+    className?: string;
+}
+declare function PopoverContent({ ref, placement, gap, container, className, children, ...rest }: PopoverContentProps): react.JSX.Element;
+declare namespace PopoverContent {
+    var displayName: string;
+}
+
+interface PopoverTriggerProps {
+    children: ReactElement;
+}
+declare function PopoverTrigger({ children }: PopoverTriggerProps): ReactElement<Record<string, unknown>, string | react.JSXElementConstructor<any>>;
+declare namespace PopoverTrigger {
+    var displayName: string;
+}
+
+interface PopoverProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode;
+}
+declare function Popover({ open: openProp, defaultOpen, onOpenChange, children, }: PopoverProps): react.JSX.Element;
+declare namespace Popover {
+    var displayName: string;
+    var Trigger: typeof PopoverTrigger;
+    var Content: typeof PopoverContent;
+}
+
 interface PortalProps {
     children?: ReactNode;
     container?: Element | DocumentFragment | null;
@@ -375,7 +608,7 @@ interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
     ref?: Ref<HTMLDivElement>;
     value?: number;
 }
-declare function Progress({ ref, value, className, ...rest }: ProgressProps): react.JSX.Element;
+declare function Progress({ ref, value, className, 'aria-label': ariaLabel, ...rest }: ProgressProps): react.JSX.Element;
 declare namespace Progress {
     var displayName: string;
 }
@@ -383,7 +616,7 @@ declare namespace Progress {
 interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
     ref?: Ref<HTMLInputElement>;
 }
-declare function Radio({ ref, disabled, className, style, ...rest }: RadioProps): react.JSX.Element;
+declare function Radio({ ref, disabled, className, style, onChange, ...rest }: RadioProps): react.JSX.Element;
 declare namespace Radio {
     var displayName: string;
 }
@@ -392,7 +625,7 @@ interface RatingProps {
     ref?: Ref<HTMLDivElement>;
     value?: number;
     defaultValue?: number;
-    onChange?: (value: number) => void;
+    onValueChange?: (value: number) => void;
     count?: number;
     readOnly?: boolean;
     disabled?: boolean;
@@ -401,11 +634,24 @@ interface RatingProps {
     '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 function Rating({ ref, value: valueProp, defaultValue, onValueChange, 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;
@@ -436,19 +682,23 @@ declare namespace Section {
     var Footer: typeof SectionFooter;
 }
 
-interface SegmentedControlProps extends HTMLAttributes<HTMLDivElement> {
+interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
     ref?: Ref<HTMLDivElement>;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
 }
-declare function SegmentedControl({ ref, className, children, onKeyDown, ...rest }: SegmentedControlProps): react.JSX.Element;
+declare function SegmentedControl({ ref, value: valueProp, defaultValue, onValueChange, className, children, onKeyDown, ...rest }: SegmentedControlProps): react.JSX.Element;
 declare namespace SegmentedControl {
     var displayName: string;
 }
 
-interface SegmentedControlItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+interface SegmentedControlItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
     ref?: Ref<HTMLButtonElement>;
+    value?: string;
     selected?: boolean;
 }
-declare function SegmentedControlItem({ ref, selected, className, ...rest }: SegmentedControlItemProps): react.JSX.Element;
+declare function SegmentedControlItem({ ref, value, selected: selectedProp, className, onClick, ...rest }: SegmentedControlItemProps): react.JSX.Element;
 declare namespace SegmentedControlItem {
     var displayName: string;
 }
@@ -466,7 +716,7 @@ declare namespace Select {
 interface SheetProps {
     ref?: Ref<HTMLDivElement>;
     open: boolean;
-    onClose: () => void;
+    onOpenChange: (open: boolean) => void;
     header?: ReactNode;
     children?: ReactNode;
     dismissable?: boolean;
@@ -474,7 +724,7 @@ interface SheetProps {
     className?: string;
     container?: Element | DocumentFragment | null;
 }
-declare function Sheet({ ref, open, onClose, header, children, dismissable, closeLabel, className, container, }: SheetProps): react.JSX.Element | null;
+declare function Sheet({ ref, open, onOpenChange, header, children, dismissable, closeLabel, className, container, }: SheetProps): react.JSX.Element | null;
 declare namespace Sheet {
     var displayName: string;
 }
@@ -493,14 +743,14 @@ interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value
     ref?: Ref<HTMLInputElement>;
     value?: number;
     defaultValue?: number;
-    onChange?: (value: number) => void;
+    onValueChange?: (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 function Slider({ ref, value: valueProp, defaultValue, onValueChange, min, max, step, before, after, disabled, className, ...rest }: SliderProps): react.JSX.Element;
 declare namespace Slider {
     var displayName: string;
 }
@@ -545,20 +795,45 @@ declare namespace Spinner {
 
 interface SpoilerProps extends HTMLAttributes<HTMLSpanElement> {
     ref?: Ref<HTMLSpanElement>;
-    revealed?: boolean;
-    defaultRevealed?: boolean;
-    onRevealedChange?: (revealed: boolean) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: 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 function Spoiler({ ref, open: openProp, defaultOpen, onOpenChange, 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' | 'defaultValue'> {
+    ref?: Ref<HTMLDivElement>;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+}
+declare function Stepper({ ref, value: valueProp, defaultValue, onValueChange, 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, 'aria-label': ariaLabel, ...rest }: StepsProps): react.JSX.Element;
+declare namespace Steps {
+    var displayName: string;
+}
+
 type SubheadlineLevel = '1' | '2';
 
 interface SubheadlineProps extends TypographyProps {
@@ -573,7 +848,7 @@ declare namespace Subheadline {
 interface SwitchProps extends InputHTMLAttributes<HTMLInputElement> {
     ref?: Ref<HTMLInputElement>;
 }
-declare function Switch({ ref, disabled, className, style, ...rest }: SwitchProps): react.JSX.Element;
+declare function Switch({ ref, disabled, className, style, onChange, ...rest }: SwitchProps): react.JSX.Element;
 declare namespace Switch {
     var displayName: string;
 }
@@ -624,21 +899,46 @@ interface TguiProviderProps extends HTMLAttributes<HTMLDivElement> {
     platform?: TguiPlatform;
     appearance?: Appearance;
     portalContainer?: HTMLElement | null;
+    haptics?: boolean;
 }
-declare function TguiProvider({ ref, platform: platformProp, appearance: appearanceProp, portalContainer: portalContainerProp, className, children, ...rest }: TguiProviderProps): react.JSX.Element;
+declare function TguiProvider({ ref, platform: platformProp, appearance: appearanceProp, portalContainer: portalContainerProp, haptics, className, children, ...rest }: TguiProviderProps): react.JSX.Element;
 declare namespace TguiProvider {
     var displayName: string;
 }
 
+type HapticIntent = 'tap' | 'press' | 'select' | 'success' | 'warning' | 'error';
+
+declare function useHaptic(): (intent: HapticIntent) => void;
+
 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 {
     ref?: Ref<HTMLElement>;
     level?: TitleLevel;
 }
-declare function Title({ ref, level, Component, className, ...rest }: TitleProps): react.JSX.Element;
+declare function Title({ ref, level, weight, Component, className, ...rest }: TitleProps): react.JSX.Element;
 declare namespace Title {
     var displayName: string;
 }
@@ -650,13 +950,14 @@ interface TooltipProps {
     content: ReactNode;
     placement?: TooltipPlacement;
     open?: boolean;
+    defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     className?: string;
 }
-declare function Tooltip({ ref, children, content, placement, open: openProp, onOpenChange, className, }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ ref, children, content, placement, open: openProp, defaultOpen, 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 };
+export { Accordion, AccordionItem, Avatar, AvatarStack, Badge, Banner, Blockquote, Breadcrumbs, Button, Callout, Caption, Card, CardCell, Cell, Checkbox, Chip, CircularProgress, CompactPagination, Dialog, Divider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, FixedLayout, Footnote, Headline, HorizontalScroll, IconButton, Image, InlineButtons, InlineButtonsItem, Input, LargeTitle, Link, List, Pagination, PinInput, Placeholder, Popover, PopoverContent, PopoverTrigger, 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, useHaptic, useSnackbar, useTgui };
+export type { AccordionItemProps, AccordionProps, AvatarProps, AvatarSize, AvatarStackProps, BadgeMode, BadgeProps, BadgeType, BannerProps, BannerType, BlockquoteProps, BreadcrumbItem, BreadcrumbsProps, ButtonMode, ButtonProps, ButtonSize, CalloutProps, CaptionProps, CardCellProps, CardProps, CardType, CellProps, CheckboxProps, ChipMode, ChipProps, CircularProgressProps, CircularProgressSize, CompactPaginationProps, DialogAction, DialogActionRole, DialogProps, DividerProps, DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuTriggerProps, FixedLayoutProps, FootnoteProps, HeadlineProps, HorizontalScrollProps, IconButtonMode, IconButtonProps, IconButtonSize, ImageProps, InlineButtonsItemProps, InlineButtonsMode, InlineButtonsProps, InputProps, InputStatus, LargeTitleProps, LinkProps, ListProps, PaginationProps, PinInputProps, PlaceholderProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, 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 };