@hanzo/ui 8.0.25 → 8.0.27

package/README.md

@@ -2,7 +2,7 @@
 
 The **one** Hanzo component library, built on [`@hanzo/gui`](https://github.com/hanzoai/gui) (Tamagui) so every component runs on **web, native (iOS), and desktop**. It unifies what used to be three fragmented homes — `@hanzo/data`, the console's in-app `components/ui/*`, and ad-hoc duplicates — into one canonical, presentational, host-agnostic, clean-room library.
 
-> This is the gui-based line (**v8+**). The legacy shadcn/Radix `@hanzo/ui` (v5.x) is a different architecture; it is being retired to `@hanzo/ui-shadcn` so the `@hanzo/ui` name carries the unified gui-based library forward — see `CONSOLIDATION.md` at the repo root.
+> **v8+** is one substrate: every component renders through `@hanzo/gui`, so one import works on web, native and desktop. The v5.x Radix + Tailwind line is a different architecture and is retired — see `CONSOLIDATION.md` at the repo root.
 
 ## Install
 

package/dist/backends/gui/aspect-ratio.d.ts

@@ -0,0 +1,14 @@
+/**
+ * AspectRatio — a box that holds a width-to-height ratio.
+ *
+ * `aspectRatio` is a first-class layout property of the gui/Yoga box model, so
+ * there is nothing to compute and no padding-bottom trick: the ratio is the
+ * style. That is why this is the whole component on web, native and desktop.
+ */
+import { type YStackProps } from '@hanzo/gui';
+export interface AspectRatioProps extends YStackProps {
+    /** Width divided by height. Square by default. */
+    ratio?: number;
+}
+declare const AspectRatio: ({ ratio, ...props }: AspectRatioProps) => import("react/jsx-runtime").JSX.Element;
+export { AspectRatio };

package/dist/backends/gui/avatar.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Avatar — circular image with a text fallback.
+ *
+ * @hanzogui/avatar owns the load/error state machine and the fallback delay, so
+ * this only names the three parts and dresses them in tokens.
+ */
+import { Avatar as GuiAvatar } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+export type AvatarProps = ComponentProps<typeof GuiAvatar>;
+export type AvatarImageProps = ComponentProps<typeof GuiAvatar.Image>;
+export type AvatarFallbackProps = ComponentProps<typeof GuiAvatar.Fallback>;
+declare const Avatar: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+declare const AvatarImage: (props: AvatarImageProps) => import("react/jsx-runtime").JSX.Element;
+/** Bare text needs a Text host to render on native; elements pass through. */
+declare const AvatarFallback: ({ children, ...props }: AvatarFallbackProps) => import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/backends/gui/badge.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'inputAdornment' | 'tags';
+/**
+ * A stable class handle for hosts that hook badges from CSS. Styling lives in
+ * the tokens; this only names the variant.
+ */
+export declare const badgeVariants: ({ variant }?: {
+    variant?: BadgeVariant | null;
+}) => string;
+/**
+ * Typed as span props because that is the contract every existing call site was
+ * written against; the leftovers are handed to gui, which forwards unknown props
+ * to the host element on web and drops them on native.
+ */
+export type BadgeProps = React.ComponentProps<'span'> & {
+    variant?: BadgeVariant | null;
+    asChild?: boolean;
+};
+export declare function Badge({ className, variant, asChild, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/backends/gui/button.d.ts

@@ -0,0 +1,50 @@
+import type { ComponentProps, ReactNode } from 'react';
+export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'primary' | 'linkFG' | 'linkMuted';
+export type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+declare const Frame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/web").StackNonStyleProps & {
+    icon?: import("react").JSX.Element | import("react").FunctionComponent<{
+        color?: any;
+        size?: any;
+    }> | null;
+    iconAfter?: import("react").JSX.Element | import("react").FunctionComponent<{
+        color?: any;
+        size?: any;
+    }> | null;
+    scaleIcon?: number;
+    iconSize?: import("@hanzogui/web").SizeTokens;
+    type?: "submit" | "reset" | "button";
+    form?: string;
+    formAction?: string;
+    formEncType?: string;
+    formMethod?: string;
+    formNoValidate?: boolean;
+    formTarget?: string;
+    name?: string;
+    value?: string | readonly string[] | number;
+}, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    size?: number | "sm" | "lg" | "default" | import("@hanzogui/web").SizeTokens | "icon" | "icon-sm" | "icon-lg" | undefined;
+    disabled?: boolean | undefined;
+    unstyled?: boolean | undefined;
+    variant?: "link" | "outline" | "default" | "secondary" | "destructive" | "ghost" | "primary" | "linkFG" | "linkMuted" | "outlined" | undefined;
+    circular?: boolean | undefined;
+    chromeless?: boolean | "all" | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+/**
+ * A stable class handle for hosts that hook buttons from CSS. Styling lives in
+ * the tokens; this only names the variant and size.
+ */
+export declare const buttonVariants: ({ variant, size, className, }?: {
+    variant?: ButtonVariant | null;
+    size?: ButtonSize | null;
+    className?: string;
+}) => string;
+export type ButtonProps = Omit<ComponentProps<typeof Frame>, 'variant' | 'size' | 'children'> & {
+    variant?: ButtonVariant | null;
+    size?: ButtonSize | null;
+    asChild?: boolean;
+    isLoading?: boolean;
+    children?: ReactNode;
+};
+declare function Button({ className, variant, size, asChild, isLoading, disabled, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export { Button };

package/dist/backends/gui/card.d.ts

@@ -0,0 +1,44 @@
+import type { ComponentProps } from 'react';
+declare const CardFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+declare const HeaderFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+declare const TitleFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiTextElement, import("@hanzogui/web").TextNonStyleProps, import("@hanzogui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@hanzogui/web").FontSizeTokens | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+declare const DescriptionFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiTextElement, import("@hanzogui/web").TextNonStyleProps, import("@hanzogui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@hanzogui/web").FontSizeTokens | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+declare const ActionFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+declare const ContentFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+declare const FooterFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type CardProps = ComponentProps<typeof CardFrame>;
+export type CardHeaderProps = ComponentProps<typeof HeaderFrame>;
+export type CardTitleProps = ComponentProps<typeof TitleFrame>;
+export type CardDescriptionProps = ComponentProps<typeof DescriptionFrame>;
+export type CardActionProps = ComponentProps<typeof ActionFrame>;
+export type CardContentProps = ComponentProps<typeof ContentFrame>;
+export type CardFooterProps = ComponentProps<typeof FooterFrame>;
+declare const Card: (p: CardProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardHeader: (p: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardTitle: (p: CardTitleProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardDescription: (p: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardAction: (p: CardActionProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardContent: (p: CardContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const CardFooter: (p: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/dist/backends/gui/checkbox.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Checkbox — 16px box, `hitSlop` to the 44px touch floor.
+ * @hanzogui/checkbox owns the checked/indeterminate state and a11y.
+ */
+import { Checkbox as GuiCheckbox } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+export type CheckboxProps = ComponentProps<typeof GuiCheckbox>;
+declare const Checkbox: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/backends/gui/collapsible.d.ts

@@ -0,0 +1,10 @@
+/** Collapsible — @hanzogui/collapsible's three parts under the flat names. */
+import { Collapsible as GuiCollapsible } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+export type CollapsibleProps = ComponentProps<typeof GuiCollapsible>;
+export type CollapsibleTriggerProps = ComponentProps<typeof GuiCollapsible.Trigger>;
+export type CollapsibleContentProps = ComponentProps<typeof GuiCollapsible.Content>;
+declare const Collapsible: (p: CollapsibleProps) => import("react/jsx-runtime").JSX.Element;
+declare const CollapsibleTrigger: (p: CollapsibleTriggerProps) => import("react/jsx-runtime").JSX.Element;
+declare const CollapsibleContent: (p: CollapsibleContentProps) => import("react/jsx-runtime").JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/backends/gui/command.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Command — the filterable command palette, native to gui.
+ *
+ * cmdk is gone. What it gave us was one thing: a list whose items each know
+ * whether they match the current search, plus a cursor that walks the ones that
+ * do. That is a small state machine over VALUES (a search string, a registry of
+ * item values, a selected value) — it does not need a DOM, so it works the same
+ * on web, native and desktop.
+ *
+ * Two decisions carry the whole file:
+ *
+ *  • Filtered-out items are HIDDEN (`display="none"`), never unmounted. `display`
+ *    is a real Yoga property, so this is one behaviour on both platforms — and
+ *    because items stay mounted, registration order is fixed at first mount and
+ *    stays true to source order. Arrow-key traversal therefore needs no DOM query.
+ *  • An item registers a mutable REF of itself, not a snapshot. Inline props
+ *    (`keywords={['a']}`, `onSelect={() => …}`) change identity every render;
+ *    registering the ref means the registry is always fresh without an effect
+ *    that re-fires forever.
+ *
+ * Keyboard navigation is web-only by construction (`isWeb` guards `onKeyDown`);
+ * on touch the list is driven by press, which is the native idiom anyway.
+ */
+import { type ComponentProps, type FC, type ReactNode, type RefAttributes } from 'react';
+import { Dialog, Input, ListItem, ScrollView, Separator, SizableText, YStack, type GuiElement } from '@hanzo/gui';
+import { type CommandFilter } from './command.logic';
+export type { CommandFilter };
+export type CommandProps = Omit<ComponentProps<typeof YStack>, 'onSelect'> & {
+    /** Selected item value (controlled). */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    filter?: CommandFilter;
+    shouldFilter?: boolean;
+    /** Arrow keys wrap around at the ends. */
+    loop?: boolean;
+    label?: string;
+    /** ctrl/cmd + n/p/j/k also move the cursor. */
+    vimBindings?: boolean;
+    /** Hovering an item no longer selects it. */
+    disablePointerSelection?: boolean;
+};
+declare const Command: import("react").ForwardRefExoticComponent<Omit<CommandProps, "ref"> & RefAttributes<GuiElement>>;
+export type CommandDialogProps = ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+};
+declare const CommandDialog: ({ title, description, children, ...props }: CommandDialogProps) => import("react/jsx-runtime").JSX.Element;
+export type CommandInputProps = Omit<ComponentProps<typeof Input>, 'value' | 'onChangeText'> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+};
+declare const CommandInput: import("react").ForwardRefExoticComponent<Omit<CommandInputProps, "ref"> & RefAttributes<GuiElement>>;
+export type CommandListProps = ComponentProps<typeof ScrollView>;
+declare const CommandList: FC<CommandListProps & RefAttributes<GuiElement>>;
+export type CommandEmptyProps = ComponentProps<typeof YStack>;
+declare const CommandEmpty: import("react").ForwardRefExoticComponent<Omit<Omit<import("@hanzogui/core").RNViewNonStyleProps, "elevation" | keyof import("@hanzogui/web").StackStyleBase | "fullscreen"> & import("@hanzogui/web").WithThemeValues<Omit<import("@hanzogui/web").StackStyleBase, import("@hanzogui/web").Longhands>> & {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+} & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>> & import("@hanzogui/web").WithPseudoProps<import("@hanzogui/web").WithThemeValues<Omit<import("@hanzogui/web").StackStyleBase, import("@hanzogui/web").Longhands>> & {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+} & import("@hanzogui/web").WithShorthands<import("@hanzogui/web").WithThemeValues<import("@hanzogui/web").StackStyleBase>>> & import("@hanzogui/web").WithMediaProps<import("@hanzogui/web").WithThemeShorthandsAndPseudos<import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}>> & RefAttributes<GuiElement>, "ref"> & RefAttributes<GuiElement>>;
+export type CommandGroupProps = ComponentProps<typeof YStack> & {
+    heading?: ReactNode;
+};
+declare const CommandGroup: import("react").ForwardRefExoticComponent<Omit<CommandGroupProps, "ref"> & RefAttributes<GuiElement>>;
+export type CommandSeparatorProps = ComponentProps<typeof Separator> & {
+    /** Keep the rule while a search is active. */
+    alwaysRender?: boolean;
+};
+declare const CommandSeparator: FC<CommandSeparatorProps & RefAttributes<GuiElement>>;
+export type CommandItemProps = Omit<ComponentProps<typeof ListItem>, 'onSelect' | 'value'> & {
+    value?: string;
+    keywords?: string[];
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+};
+declare const CommandItem: FC<CommandItemProps & RefAttributes<GuiElement>>;
+/** The trailing key hint. `SizableText` renders a span on web, Text on native. */
+export type CommandShortcutProps = ComponentProps<typeof SizableText>;
+declare const CommandShortcut: (props: CommandShortcutProps) => import("react/jsx-runtime").JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/backends/gui/command.logic.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The Command palette's decisions, as pure functions over plain values.
+ *
+ * cmdk shipped its matcher and its cursor welded to a DOM store. They are neither
+ * DOM nor React: `score` answers "does this item survive the search", `step`
+ * answers "where does the cursor land". Keeping them here means they are testable
+ * in the node env (this module imports no @hanzo/gui runtime), and `command.tsx`
+ * is left holding only the view.
+ */
+/** `0` hides the item; anything higher keeps it and ranks it. */
+export type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
+/** Exact › prefix › substring (earlier wins) › subsequence › no match. */
+export declare const score: CommandFilter;
+/**
+ * Where the cursor goes. `from` is -1 when nothing is selected yet; `count` is
+ * the number of REACHABLE (visible, enabled) items, so skipping disabled rows is
+ * the caller's filter rather than a second concept in here. Returns -1 for an
+ * empty list.
+ */
+export declare const step: (count: number, from: number, delta: number, loop?: boolean) => number;

package/dist/backends/gui/dialog.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Dialog — modal surface, flattened from @hanzogui/dialog's compound parts.
+ *
+ * `DialogContent` mounts its OWN portal + overlay (so callers never wrap it) and
+ * re-applies the trigger's resolved theme inside the portal via `PortalTheme` —
+ * gui portals re-root the subtree, so React theme context does not flow.
+ */
+import { Dialog as GuiDialog, XStack, YStack } from '@hanzo/gui';
+import type { ComponentProps, ReactNode } from 'react';
+declare const Dialog: (p: ComponentProps<typeof GuiDialog>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogTrigger: typeof GuiDialog.Trigger;
+declare const DialogPortal: typeof GuiDialog.Portal;
+declare const DialogClose: typeof GuiDialog.Close;
+export type DialogOverlayProps = ComponentProps<typeof GuiDialog.Overlay>;
+declare const DialogOverlay: (props: DialogOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export type DialogContentProps = ComponentProps<typeof GuiDialog.Content> & {
+    showCloseButton?: boolean;
+};
+declare const DialogContent: ({ showCloseButton, children, ...props }: DialogContentProps) => import("react/jsx-runtime").JSX.Element;
+export type DialogSectionProps = ComponentProps<typeof YStack> & {
+    children?: ReactNode;
+};
+declare const DialogHeader: (props: DialogSectionProps) => import("react/jsx-runtime").JSX.Element;
+declare const DialogFooter: (props: ComponentProps<typeof XStack>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogTitle: (props: ComponentProps<typeof GuiDialog.Title>) => import("react/jsx-runtime").JSX.Element;
+declare const DialogDescription: (props: ComponentProps<typeof GuiDialog.Description>) => import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/backends/gui/dropdown-menu.d.ts

@@ -0,0 +1,98 @@
+/**
+ * DropdownMenu — the ONE compound menu, native to @hanzo/gui.
+ *
+ * @hanzogui/menu already ships the whole compound surface (Root/Trigger/Portal/
+ * Content/Group/Label/Item/CheckboxItem/RadioGroup/RadioItem/ItemIndicator/
+ * Separator/Sub/SubTrigger/SubContent) with the a11y, roving focus, popper
+ * placement and dismiss behaviour. This file only FLATTENS `Menu.X` into the 15
+ * `DropdownMenuX` names and dresses them in the Hanzo tokens, so there is one
+ * menu component rather than two shapes of the same idea.
+ *
+ * Cross-platform: gui style props only — no Tailwind class strings, no Radix, no
+ * DOM APIs. Rows are 32px tall (the design density) with a 6px vertical `hitSlop`
+ * so the real tap target is 44px on touch hosts.
+ *
+ * `DropdownMenuContent` mounts its OWN `Menu.Portal`, so callers never wrap it —
+ * and re-applies the trigger's resolved theme inside the portal via `PortalTheme`
+ * (gui portals re-root the subtree, so React theme context does not flow).
+ */
+import * as React from "react";
+import { Menu, Text, type GuiElement } from "@hanzo/gui";
+import type { MenuItemSpec } from "../../product/menu/items";
+export type DropdownMenuProps = Omit<React.ComponentProps<typeof Menu>, "offset"> & {
+    offset?: number;
+    /**
+     * Declarative form. Give a `trigger` element and an `items` spec and the menu
+     * builds itself out of the very same compound parts a hand-written `children`
+     * tree would use — one component, one API, one rendering, whichever form the
+     * call site prefers.
+     */
+    trigger?: React.ReactElement;
+    items?: MenuItemSpec[];
+    minWidth?: number;
+    maxHeight?: number;
+};
+declare function DropdownMenu({ offset, trigger, items, minWidth, maxHeight, children, ...props }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+declare const DropdownMenuTrigger: typeof Menu.Trigger;
+declare const DropdownMenuGroup: typeof Menu.Group;
+declare const DropdownMenuPortal: typeof Menu.Portal;
+declare const DropdownMenuSub: typeof Menu.Sub;
+declare const DropdownMenuRadioGroup: typeof Menu.RadioGroup;
+type ContentProps = React.ComponentProps<typeof Menu.Content> & {
+    sideOffset?: number;
+};
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & React.RefAttributes<GuiElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<import("@hanzo/gui").MenuSubContentProps & {
+    scope?: string;
+} & React.RefAttributes<GuiElement> & Partial<Omit<import("@hanzo/gui").NativeMenuSubContentProps, keyof React.RefAttributes<GuiElement> | keyof import("@hanzo/gui").MenuSubContentProps>>, "ref"> & React.RefAttributes<GuiElement>>;
+type ItemProps = Omit<React.ComponentProps<typeof Menu.Item>, "variant"> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+};
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & React.RefAttributes<GuiElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<Omit<import("@hanzogui/web").GetFinalProps<import("@hanzogui/web").StackNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    unstyled?: boolean | undefined;
+}>, "scope" | keyof import("@hanzo/gui").MenuCheckboxItemProps> & import("@hanzo/gui").MenuCheckboxItemProps & {
+    scope?: string;
+} & React.RefAttributes<GuiElement> & Partial<Omit<Omit<import("@hanzo/gui").NativeMenuItemProps, "onSelect"> & {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    value?: "mixed" | "on" | "off" | boolean;
+    onValueChange?: (state: "mixed" | "on" | "off", prevState: "mixed" | "on" | "off") => void;
+    key: string;
+}, keyof React.RefAttributes<GuiElement> | "scope" | keyof import("@hanzo/gui").MenuCheckboxItemProps>>, "ref"> & React.RefAttributes<GuiElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<Omit<import("@hanzogui/web").GetFinalProps<import("@hanzogui/web").StackNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    unstyled?: boolean | undefined;
+}>, "scope" | keyof import("@hanzo/gui").MenuRadioItemProps> & import("@hanzo/gui").MenuRadioItemProps & {
+    scope?: string;
+} & React.RefAttributes<GuiElement> & Partial<Omit<{
+    children: React.ReactNode;
+}, keyof React.RefAttributes<GuiElement> | "scope" | keyof import("@hanzo/gui").MenuRadioItemProps>>, "ref"> & React.RefAttributes<GuiElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<import("@hanzo/gui").MenuSubTriggerProps & {
+    scope?: string;
+} & React.RefAttributes<GuiElement> & Partial<Omit<{
+    children: React.ReactNode;
+    textValue?: string;
+    onSelect?: (event?: Event) => void;
+} & {
+    disabled?: boolean;
+    hidden?: boolean;
+    destructive?: boolean;
+    key: string;
+} & {
+    key: string;
+}, keyof React.RefAttributes<GuiElement> | "scope" | keyof import("@hanzo/gui").MenuSubTriggerProps>> & {
+    inset?: boolean;
+}, "ref"> & React.RefAttributes<GuiElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<Omit<import("@hanzogui/web").GetFinalProps<import("@hanzogui/web").TextNonStyleProps, import("@hanzogui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@hanzogui/web").FontSizeTokens | undefined;
+}>, keyof import("@hanzo/gui").MenuLabelProps> & import("@hanzo/gui").MenuLabelProps & React.RefAttributes<import("@hanzogui/web").GuiTextElement> & Partial<Omit<import("@hanzo/gui").NativeMenuLabelProps, "color" | "elevation" | "fontFamily" | "fontSize" | "fontStyle" | "fontVariant" | "fontWeight" | "letterSpacing" | "size" | "textAlign" | "lineHeight" | "textTransform" | "textShadowColor" | "allowFontScaling" | "ellipsizeMode" | "lineBreakMode" | "numberOfLines" | "maxFontSizeMultiplier" | "minimumFontScale" | "pressRetentionOffset" | "adjustsFontSizeToFit" | "dynamicTypeRamp" | "suppressHighlighting" | "lineBreakStrategyIOS" | "selectable" | "selectionColor" | "textBreakStrategy" | "dataDetectorType" | "android_hyphenationFrequency" | "textDecorationLine" | "textDecorationStyle" | "textDecorationColor" | "textShadowOffset" | "textShadowRadius" | "writingDirection" | "textAlignVertical" | "includeFontPadding" | "ellipsis" | "textDecorationDistance" | "textOverflow" | "whiteSpace" | "wordWrap" | "textShadow" | keyof import("@hanzo/gui").MenuLabelProps | keyof React.RefAttributes<import("@hanzogui/web").GuiTextElement>>> & {
+    inset?: boolean;
+}, "ref"> & React.RefAttributes<GuiElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<Omit<import("@hanzogui/web").GetFinalProps<import("@hanzogui/web").StackNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    unstyled?: boolean | undefined;
+}>, keyof import("@hanzo/gui").MenuSeparatorProps> & import("@hanzo/gui").MenuSeparatorProps & React.RefAttributes<GuiElement> & Partial<Omit<import("@hanzo/gui").NativeMenuSeparatorProps, keyof React.RefAttributes<GuiElement> | keyof import("@hanzo/gui").MenuSeparatorProps>>, "ref"> & React.RefAttributes<GuiElement>>;
+/** Right-aligned shortcut hint. gui `Text`, not a raw `<span>`, so it renders on native. */
+declare function DropdownMenuShortcut(props: React.ComponentProps<typeof Text>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/backends/gui/index.d.ts

@@ -1,2 +1,24 @@
-export * from '../../product';
-export { tokens, TAG_TONES, tagTone, type TagTone } from '@hanzo/data';
+export { AspectRatio, type AspectRatioProps } from './aspect-ratio';
+export { Avatar, AvatarImage, AvatarFallback } from './avatar';
+export { Badge, badgeVariants, type BadgeProps, type BadgeVariant } from './badge';
+export { Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant } from './button';
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './card';
+export { Checkbox } from './checkbox';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible';
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, type CommandFilter, type CommandProps, } from './command';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './dialog';
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, type DropdownMenuProps, } from './dropdown-menu';
+export { Input, type InputProps } from './input';
+export { Label } from './label';
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose } from './popover';
+export { Progress } from './progress';
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle, type ResizablePanelGroupProps, type ResizablePanelProps, type ResizableHandleProps, } from './resizable';
+export { ScrollArea, ScrollBar } from './scroll-area';
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } from './select';
+export { Separator } from './separator';
+export { Slider } from './slider';
+export { Switch } from './switch';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+export { Textarea } from './textarea';
+export { Toaster, toast } from './toaster';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tooltip';

package/dist/backends/gui/ink.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentType, type ReactNode } from 'react';
+/**
+ * Bare text needs a Text host to render on native; elements pass through.
+ * Every component in this backend that accepts free-form children runs them
+ * through here, so a string child behaves identically on web and native.
+ */
+export declare const ink: (children: ReactNode, Wrap?: ComponentType<Record<string, unknown>>, props?: Record<string, unknown>) => (bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined>)[] | null | undefined;

package/dist/backends/gui/input.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Input — single-line field with optional adornments and a password reveal.
+ *
+ * @hanzogui/input owns the field; the adornment wrapper only appears when an
+ * adornment (or the password toggle) is actually asked for, so the common path
+ * stays one element.
+ */
+import { Input as GuiInput } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+export type InputProps = Omit<ComponentProps<typeof GuiInput>, 'children'> & {
+    /** Optional leading affordance (icon/text) rendered inside the field. */
+    startAdornment?: ReactNode;
+    /** Optional trailing affordance rendered inside the field. */
+    endAdornment?: ReactNode;
+    /** Suppress the built-in show/hide control for `secureTextEntry`/`type="password"`. */
+    hidePasswordToggle?: boolean;
+};
+declare const Input: import("react").ForwardRefExoticComponent<Omit<InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/backends/gui/label.d.ts

@@ -0,0 +1,6 @@
+/** Label — form-control caption bound to its field by @hanzogui/label. */
+import { Label as GuiLabel } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+export type LabelProps = ComponentProps<typeof GuiLabel>;
+declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export { Label };

package/dist/backends/gui/popover.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Popover — floating panel anchored to a trigger.
+ *
+ * `PopoverContent` mounts its own portal and re-applies the trigger's resolved
+ * theme inside it (gui portals re-root the subtree, so theme context does not
+ * flow). `sideOffset` lands on the popper root, which is where gui keeps it.
+ */
+import { Popover as GuiPopover } from '@hanzo/gui';
+import { type ComponentProps } from 'react';
+export type PopoverProps = Omit<ComponentProps<typeof GuiPopover>, 'offset'> & {
+    offset?: number;
+};
+declare function Popover({ offset, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+declare const PopoverTrigger: typeof GuiPopover.Trigger;
+declare const PopoverAnchor: typeof GuiPopover.Anchor;
+declare const PopoverClose: typeof GuiPopover.Close;
+export type PopoverContentProps = ComponentProps<typeof GuiPopover.Content> & {
+    sideOffset?: number;
+    align?: 'start' | 'center' | 'end';
+};
+declare const PopoverContent: ({ sideOffset, align: _align, ...props }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };

package/dist/backends/gui/progress.d.ts

@@ -0,0 +1,6 @@
+/** Progress — determinate bar; `value` is 0–100. */
+import { Progress as GuiProgress } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+export type ProgressProps = ComponentProps<typeof GuiProgress>;
+declare const Progress: ({ value, ...props }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
+export { Progress };

package/dist/backends/gui/resizable.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Resizable panel group — native to @hanzo/gui, no `react-resizable-panels`.
+ *
+ * The upstream package dropped `PanelGroup`/`PanelResizeHandle` in v4 (it now
+ * exports `Group`/`Panel`/`Separator` and renamed `direction` → `orientation`),
+ * so every consumer pinned to the old shape is unbuildable. Rather than pin a
+ * dead version we own the primitive: it is ~200 lines of percentage arithmetic
+ * over a flexbox, which is cheaper to keep than a dependency that renames its
+ * public surface.
+ *
+ * Layout is PERCENTAGES, never pixels: a panel's share becomes its `flexGrow`
+ * over a zero `flexBasis`, so the browser/RN layout engine handles container
+ * resize for free (and rounding can never leave a gap). The only thing this
+ * module owns is "where is the boundary" — pure functions (`defaultLayout`,
+ * `resizeAt`) with the min/max/collapse clamping in ONE place.
+ *
+ * Cross-platform by construction: the group measures itself with `onLayout`
+ * (gui implements it on web too), and the handle drives web with Pointer Events
+ * + pointer capture and native with the responder system. Both prop sets are
+ * typed on gui's stacks, and pointer capture is feature-detected, so nothing
+ * here reaches for the DOM on expo. Keyboard resize is arrow keys (Shift for a
+ * fine step). Touch target is the 4px handle plus a 20px hitSlop = 44px.
+ */
+import { type ReactNode } from "react";
+import { type XStackProps } from "@hanzo/gui";
+import { defaultLayout, resizeAt, type ResizeDirection } from "./resizable.logic";
+export type { ResizeDirection, PanelSpec } from "./resizable.logic";
+export { defaultLayout, resizeAt };
+export type ResizablePanelGroupProps = Omit<XStackProps, "onLayout" | "direction"> & {
+    direction: ResizeDirection;
+    autoSaveId?: string;
+    onLayout?: (sizes: number[]) => void;
+    children?: ReactNode;
+};
+export declare function ResizablePanelGroup({ direction, autoSaveId, onLayout, children, ...rest }: ResizablePanelGroupProps): import("react/jsx-runtime").JSX.Element;
+export type ResizablePanelProps = Omit<XStackProps, "id" | "onLayout"> & {
+    id?: string;
+    order?: number;
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    collapsible?: boolean;
+    collapsedSize?: number;
+    onResize?: (size: number) => void;
+    children?: ReactNode;
+};
+export declare function ResizablePanel({ id, order, defaultSize, minSize, maxSize, collapsible, collapsedSize, onResize, children, ...rest }: ResizablePanelProps): import("react/jsx-runtime").JSX.Element;
+export type ResizableHandleProps = Omit<XStackProps, "disabled" | "onLayout"> & {
+    withHandle?: boolean;
+    disabled?: boolean;
+};
+export declare function ResizableHandle({ withHandle, disabled, ...rest }: ResizableHandleProps): import("react/jsx-runtime").JSX.Element;

package/dist/backends/gui/resizable.logic.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The panel-sizing math — pure values, no React and no @hanzo/gui, so the
+ * boundary rules can be reasoned about and tested on their own.
+ */
+export type ResizeDirection = "horizontal" | "vertical";
+/** Everything the boundary math needs to know about a panel. */
+export type PanelSpec = {
+    id: string;
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    collapsible?: boolean;
+    collapsedSize?: number;
+    onResize?: (size: number) => void;
+};
+/** Starting percentages: honour every `defaultSize`, split the remainder evenly, normalise to 100. PURE. */
+export declare function defaultLayout(specs: PanelSpec[]): number[];
+/**
+ * Move the boundary AFTER panel `i` by `delta` percent. Only the two adjacent
+ * panels change, so their sum is invariant and the layout always totals 100.
+ * Returns the original array when the move is fully clamped. PURE.
+ */
+export declare function resizeAt(sizes: number[], specs: PanelSpec[], i: number, delta: number): number[];