@hanzogui/web 2.0.0

package/types/helpers/useRenderElement.d.ts

@@ -0,0 +1,13 @@
+import type React from 'react';
+import type { GuiComponentState } from '../types';
+export type RenderProp<Props = Record<string, any>> = string | React.ReactElement | ((props: Props, state: GuiComponentState) => React.ReactElement);
+/**
+ * Evaluates a render prop and returns the element to render.
+ *
+ * @param render - The render prop (tag string, JSX element, or function)
+ * @param props - Props to pass to the rendered element (including ref)
+ * @param state - Component state for render functions
+ * @param defaultElement - Fallback element if render prop is not provided
+ */
+export declare function evaluateRenderProp(render: RenderProp | undefined, props: Record<string, any>, state: GuiComponentState, defaultElement: React.ReactElement<any>): React.ReactElement;
+//# sourceMappingURL=useRenderElement.d.ts.map

package/types/helpers/webPropsToSkip.d.ts

@@ -0,0 +1,2 @@
+export declare const webPropsToSkip: {};
+//# sourceMappingURL=webPropsToSkip.d.ts.map

package/types/helpers/webPropsToSkip.native.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Web-only props and event handlers that should be skipped on native
+ */
+export declare const webPropsToSkip: {
+    onClick: number;
+    onDoubleClick: number;
+    onContextMenu: number;
+    onMouseEnter: number;
+    onMouseLeave: number;
+    onMouseMove: number;
+    onMouseOver: number;
+    onMouseOut: number;
+    onMouseDown: number;
+    onMouseUp: number;
+    onWheel: number;
+    onKeyDown: number;
+    onKeyUp: number;
+    onKeyPress: number;
+    onPointerDown: number;
+    onPointerMove: number;
+    onPointerUp: number;
+    onPointerCancel: number;
+    onPointerEnter: number;
+    onPointerLeave: number;
+    onDrag: number;
+    onDragStart: number;
+    onDragEnd: number;
+    onDragEnter: number;
+    onDragLeave: number;
+    onDragOver: number;
+    onDrop: number;
+    onChange: number;
+    onInput: number;
+    onBeforeInput: number;
+    onScroll: number;
+    onCopy: number;
+    onCut: number;
+    onPaste: number;
+    htmlFor: number;
+    dangerouslySetInnerHTML: number;
+    textDecorationDistance: boolean;
+    WebkitLineClamp: boolean;
+    whiteSpace: boolean;
+    wordWrap: boolean;
+    textOverflow: boolean;
+    WebkitBoxOrient: boolean;
+    transition: boolean;
+    backdropFilter: boolean;
+    WebkitBackdropFilter: boolean;
+    background: boolean;
+    borderTop: boolean;
+    borderRight: boolean;
+    borderBottom: boolean;
+    borderLeft: boolean;
+    backgroundPosition: boolean;
+    backgroundSize: boolean;
+    borderImage: boolean;
+    caretColor: boolean;
+    clipPath: boolean;
+    mask: boolean;
+    maskBorder: boolean;
+    maskBorderOutset: boolean;
+    maskBorderSlice: boolean;
+    maskBorderSource: boolean;
+    maskBorderWidth: boolean;
+    maskImage: boolean;
+    maskPosition: boolean;
+    maskSize: boolean;
+    objectPosition: boolean;
+    textEmphasis: boolean;
+    userSelect: boolean;
+    backgroundAttachment: boolean;
+    backgroundBlendMode: boolean;
+    backgroundClip: boolean;
+    backgroundOrigin: boolean;
+    backgroundRepeat: boolean;
+    borderBottomStyle: boolean;
+    borderLeftStyle: boolean;
+    borderRightStyle: boolean;
+    borderTopStyle: boolean;
+    contain: boolean;
+    containerType: boolean;
+    content: boolean;
+    float: boolean;
+    maskBorderMode: boolean;
+    maskBorderRepeat: boolean;
+    maskClip: boolean;
+    maskComposite: boolean;
+    maskMode: boolean;
+    maskOrigin: boolean;
+    maskRepeat: boolean;
+    maskType: boolean;
+    objectFit: boolean;
+    overflowBlock: boolean;
+    overflowInline: boolean;
+    overflowX: boolean;
+    overflowY: boolean;
+    scrollbarWidth: boolean;
+    textWrap: boolean;
+    touchAction: boolean;
+    transformStyle: boolean;
+    willChange: boolean;
+};
+//# sourceMappingURL=webPropsToSkip.native.d.ts.map

package/types/helpers/wrapStyleTags.d.ts

@@ -0,0 +1,3 @@
+import type { StyleObject } from '../types';
+export declare function getStyleTags(styles: StyleObject[]): import("react/jsx-runtime").JSX.Element | undefined;
+//# sourceMappingURL=wrapStyleTags.d.ts.map

package/types/hooks/doesRootSchemeMatchSystem.d.ts

@@ -0,0 +1,2 @@
+export declare function doesRootSchemeMatchSystem(): boolean;
+//# sourceMappingURL=doesRootSchemeMatchSystem.d.ts.map

package/types/hooks/doesRootSchemeMatchSystem.native.d.ts

@@ -0,0 +1,2 @@
+export declare function doesRootSchemeMatchSystem(): boolean;
+//# sourceMappingURL=doesRootSchemeMatchSystem.native.d.ts.map

package/types/hooks/getThemeProxied.d.ts

@@ -0,0 +1,23 @@
+import type { MutableRefObject } from 'react';
+import type { ThemeParsed, ThemeState, Tokens, UseThemeWithStateProps, Variable, VariableVal, VariableValGeneric } from '../types';
+export type ThemeProxied = {
+    [Key in keyof ThemeParsed | keyof Tokens['color']]: ThemeGettable<Key extends keyof ThemeParsed ? ThemeParsed[Key] : Variable<any>>;
+} & {
+    [Key in string & {}]?: ThemeGettable<Variable<any>>;
+};
+type ThemeGettable<Val> = Val & {
+    /**
+     * Tries to return an optimized value that avoids the need for re-rendering:
+     * On web a CSS variable, on iOS a dynamic color, on Android it doesn't
+     * optimize and returns the underyling value.
+     *
+     * See: https://reactnative.dev/docs/dynamiccolorios
+     *
+     * @param platform when "web" it will only return the dynamic value for web, avoiding the iOS dynamic value.
+     * For things like SVG, gradients, or other external components that don't support it, use this option.
+     */
+    get: (platform?: 'web') => string | (Val extends Variable<infer X> ? X extends VariableValGeneric ? any : Exclude<X, Variable> : Val extends VariableVal ? string | number : unknown);
+};
+export declare function getThemeProxied(_props: UseThemeWithStateProps, _state: ThemeState | null, _keys: MutableRefObject<Set<string> | null>, _schemeKeys?: MutableRefObject<Set<string> | null>): ThemeProxied;
+export {};
+//# sourceMappingURL=getThemeProxied.d.ts.map

package/types/hooks/useComponentState.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentContextI, StaticConfig, GuiComponentState, GuiComponentStateRef, GuiInternalConfig, TextProps } from '../types';
+import type { ViewProps } from '../views/View';
+export declare const useComponentState: (props: ViewProps | TextProps | Record<string, any>, animationDriver: ComponentContextI["animationDriver"], staticConfig: StaticConfig, config: GuiInternalConfig) => {
+    startedUnhydrated: boolean;
+    curStateRef: GuiComponentStateRef;
+    disabled: any;
+    groupName: string | undefined;
+    hasAnimationProp: boolean;
+    hasEnterStyle: boolean;
+    isAnimated: boolean;
+    isExiting: boolean;
+    isHydrated: boolean;
+    presence: import("../types").UsePresenceResult | null;
+    presenceState: import("../types").PresenceContextProps | null | undefined;
+    setState: import("react").Dispatch<import("react").SetStateAction<GuiComponentState>>;
+    setStateShallow: import("react").Dispatch<import("react").SetStateAction<Partial<GuiComponentState>>>;
+    noClass: boolean;
+    state: GuiComponentState;
+    stateRef: import("react").RefObject<GuiComponentStateRef>;
+    inputStyle: "css" | "value";
+    outputStyle: "css" | "inline";
+    willBeAnimated: boolean;
+    willBeAnimatedClient: boolean;
+};
+//# sourceMappingURL=useComponentState.d.ts.map

package/types/hooks/useDisableSSR.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentContextI } from '../types';
+export declare function getDisableSSR(componentContext?: ComponentContextI): boolean | undefined;
+//# sourceMappingURL=useDisableSSR.d.ts.map

package/types/hooks/useIsTouchDevice.d.ts

@@ -0,0 +1,2 @@
+export declare const useIsTouchDevice: () => boolean;
+//# sourceMappingURL=useIsTouchDevice.d.ts.map

package/types/hooks/useMedia.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentContextI, DebugProp, GetStyleState, IsMediaType, GuiInternalConfig, UseMediaState, WidthHeight } from '../types';
+export declare const isMediaKey: (key: string) => boolean;
+export declare const getMediaKey: (key: string) => IsMediaType;
+export declare const getMediaKeyImportance: (key: string) => number;
+export declare const configureMedia: (config: GuiInternalConfig) => void;
+export declare function setupMediaListeners(): void;
+export declare function updateMediaListeners(): void;
+type MediaState = {
+    enabled?: boolean;
+    keys?: Set<string> | null;
+};
+export declare function setMediaShouldUpdate(ref: any, enabled?: boolean, keys?: MediaState['keys']): void;
+export declare function useMedia(componentContext?: ComponentContextI, debug?: DebugProp): UseMediaState;
+export declare function _disableMediaTouch(val: boolean): void;
+export declare function getMediaState(mediaGroups: Set<string>, layout: WidthHeight): Record<string, boolean>;
+export declare const getMediaImportanceIfMoreImportant: (mediaKey: string, key: string, styleState: GetStyleState, isSizeMedia: boolean) => number | null;
+export declare function mediaKeyToQuery(key: string): string;
+export declare function mediaKeyMatch(key: string, dimensions: {
+    width: number;
+    height: number;
+}): boolean;
+export {};
+//# sourceMappingURL=useMedia.d.ts.map

package/types/hooks/useProps.d.ts

@@ -0,0 +1,41 @@
+import type { SplitStyleProps, StaticConfig, ThemeParsed, UseMediaState } from '../types';
+import type { ViewProps, ViewStyle } from '../views/View';
+type UsePropsOptions = Pick<SplitStyleProps, 'noExpand' | 'noNormalize' | 'noClass' | 'resolveValues'> & {
+    disableExpandShorthands?: boolean;
+    forComponent?: {
+        staticConfig: StaticConfig;
+    };
+    noClass?: boolean;
+    /**
+     * Disable watching for media queries
+     */
+    noMedia?: boolean;
+};
+export type PropsWithoutMediaStyles<A> = {
+    [Key in keyof A as Key extends `$${string}` ? never : Key]?: A[Key];
+};
+type PropsLikeObject = (ViewProps & Record<string, any>) | object;
+type StyleLikeObject = (ViewStyle & Record<string, any>) | object;
+/**
+ * Returns props and style as a single object, expanding and merging shorthands and media queries.
+ *
+ * Use sparingly, it will loop props and trigger re-render on all media queries you access.
+ *
+ * */
+export declare function useProps<A extends PropsLikeObject>(props: A, opts?: UsePropsOptions): PropsWithoutMediaStyles<A>;
+/**
+ * Returns only style values fully resolved and flattened with merged media queries and shorthands with all theme and token values resolved.
+ *
+ * Use sparingly, it will loop props and trigger re-render on all media queries you access.
+ *
+ * */
+export declare function useStyle<A extends StyleLikeObject>(props: A, opts?: UsePropsOptions): PropsWithoutMediaStyles<A>;
+/**
+ * Returns [props, styles, theme, media] fully resolved and flattened with merged media queries and shorthands with all theme and token values resolved.
+ *
+ * Use sparingly, it will loop props and trigger re-render on all media queries you access.
+ *
+ * */
+export declare function usePropsAndStyle<A extends PropsLikeObject>(props: A, opts?: UsePropsOptions): [PropsWithoutMediaStyles<A>, PropsWithoutMediaStyles<A>, ThemeParsed, UseMediaState];
+export {};
+//# sourceMappingURL=useProps.d.ts.map

package/types/hooks/useTheme.d.ts

@@ -0,0 +1,9 @@
+import type { ThemeParsed, ThemeState, UseThemeWithStateProps } from '../types';
+import { type ThemeProxied } from './getThemeProxied';
+export declare const useTheme: () => ThemeProxied;
+export type ThemeWithState = [ThemeParsed, ThemeState];
+/**
+ * Adds a proxy around themeState that tracks update keys
+ */
+export declare const useThemeWithState: (props: UseThemeWithStateProps, isRoot?: boolean) => ThemeWithState;
+//# sourceMappingURL=useTheme.d.ts.map

package/types/hooks/useThemeName.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeName } from '../types';
+export declare function useThemeName(): ThemeName;
+//# sourceMappingURL=useThemeName.d.ts.map

package/types/hooks/useThemeState.d.ts

@@ -0,0 +1,11 @@
+import { type MutableRefObject } from 'react';
+import type { ThemeProps, ThemeState, UseThemeWithStateProps } from '../types';
+type ID = string;
+export declare const ThemeStateContext: import("react").Context<string>;
+export declare const forceUpdateThemes: () => void;
+export declare const getThemeState: (id: ID) => ThemeState | undefined;
+export declare const getRootThemeState: () => ThemeState | null;
+export declare const useThemeState: (props: UseThemeWithStateProps, isRoot: boolean | undefined, keys: MutableRefObject<Set<string> | null>, schemeKeys?: MutableRefObject<Set<string> | null>) => ThemeState;
+export declare const hasThemeUpdatingProps: (props: ThemeProps) => boolean;
+export {};
+//# sourceMappingURL=useThemeState.d.ts.map

package/types/index.d.ts

@@ -0,0 +1,77 @@
+export * from './contexts/ComponentContext';
+export * from './contexts/GroupContext';
+export * from '@hanzogui/is-equal-shallow';
+export * from './_withStableStyle';
+export * from './createComponent';
+export * from './helpers/createMediaStyle';
+export * from './helpers/createStyledContext';
+export * from './helpers/getDefaultProps';
+export * from './helpers/expandStyles';
+export * from './helpers/getCSSStylesAtomic';
+export * from './helpers/getExpandedShorthands';
+export * from './helpers/getShorthandValue';
+export * from './helpers/getSplitStyles';
+export * from './helpers/getThemeCSSRules';
+export * from './helpers/getVariantExtras';
+export { autoVariables, mutatedAutoVariables } from './helpers/registerCSSVariable';
+export { insertStyleRules } from './helpers/insertStyleRule';
+export * from './helpers/isGuiComponent';
+export * from './helpers/isGuiElement';
+export * from './helpers/matchMedia';
+export * from './helpers/mergeProps';
+export * from './helpers/mergeSlotStyleProps';
+export * from './helpers/normalizeColor';
+export * from './helpers/normalizeStyle';
+export * from './helpers/normalizeValueWithProperty';
+export * from './helpers/propMapper';
+export * from './helpers/proxyThemeToParents';
+export * from './helpers/proxyThemeVariables';
+export * from './helpers/pseudoDescriptors';
+export * from './helpers/pseudoTransitions';
+export * from './helpers/themeable';
+export * from './helpers/themes';
+export * from './helpers/transformsToString';
+export * from './helpers/wrapStyleTags';
+export * from './createComponent';
+export * from './createFont';
+export * from './createShorthands';
+export * from './createGui';
+export * from './createTokens';
+export * from './createVariable';
+export * from './createVariables';
+export * from './insertFont';
+export * from './setupReactNative';
+export * from './styled';
+export * from './Gui';
+export type { GuiBuildOptions } from '@hanzogui/types';
+export type * from './interfaces/RNExclusiveTypes';
+export type * from './interfaces/GuiComponentEvents';
+export type * from './types';
+export * from './interfaces/GetRef';
+export { getConfig, getSetting, getThemes, getToken, getTokens, getTokenValue, loadAnimationDriver, setConfig, setupDev, updateConfig, } from './config';
+export { setNonce } from './helpers/insertStyleRule';
+export * from './constants/constants';
+export * from './hooks/useIsTouchDevice';
+export { _disableMediaTouch, configureMedia, mediaKeyMatch, useMedia, } from './hooks/useMedia';
+export { mediaObjectToString } from './helpers/mediaObjectToString';
+export { getMedia, mediaQueryConfig, mediaState } from './helpers/mediaState';
+export * from './hooks/useProps';
+export * from './hooks/useTheme';
+export * from './hooks/useThemeName';
+export { forceUpdateThemes } from './hooks/useThemeState';
+export * from './views/Configuration';
+export * from './views/GuiRoot';
+export * from './views/FontLanguage';
+export * from './views/Slot';
+export * from './views/GuiProvider';
+export * from './views/Text';
+export * from './views/Theme';
+export * from './views/ThemeProvider';
+export * from './views/View';
+export * from '@hanzogui/compose-refs';
+export * from '@hanzogui/constants';
+export * from '@hanzogui/helpers';
+export * from '@hanzogui/use-did-finish-ssr';
+export * from '@hanzogui/use-event';
+export * from './setupHooks';
+//# sourceMappingURL=index.d.ts.map

package/types/inject-styles.d.ts

@@ -0,0 +1,7 @@
+interface InjectStylesOptions {
+    filePath: string;
+    css: string;
+}
+export declare const injectStyles: ({ filePath, css }: InjectStylesOptions) => void;
+export {};
+//# sourceMappingURL=inject-styles.d.ts.map

package/types/insertFont.d.ts

@@ -0,0 +1,10 @@
+import type { DeepVariableObject } from './createVariables';
+import type { GenericFont } from './types';
+/**
+ * Runtime dynamic insert font
+ */
+export declare function insertFont<A extends GenericFont>(name: string, fontIn: A): DeepVariableObject<A>;
+export declare const updateFont: typeof insertFont;
+export declare function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A>;
+export declare function registerFontVariables(parsedFont: any): string[];
+//# sourceMappingURL=insertFont.d.ts.map

package/types/interfaces/CSSColorNames.d.ts

@@ -0,0 +1,2 @@
+export type CSSColorNames = 'aliceblue' | 'antiquewhite' | 'aqua' | 'aquamarine' | 'azure' | 'beige' | 'bisque' | 'black' | 'blanchedalmond' | 'blue' | 'blueviolet' | 'brown' | 'burlywood' | 'cadetblue' | 'chartreuse' | 'chocolate' | 'coral' | 'cornflowerblue' | 'cornsilk' | 'crimson' | 'cyan' | 'darkblue' | 'darkcyan' | 'darkgoldenrod' | 'darkgray' | 'darkgreen' | 'darkgrey' | 'darkkhaki' | 'darkmagenta' | 'darkolivegreen' | 'darkorange' | 'darkorchid' | 'darkred' | 'darksalmon' | 'darkseagreen' | 'darkslateblue' | 'darkslategray' | 'darkslategrey' | 'darkturquoise' | 'darkviolet' | 'deeppink' | 'deepskyblue' | 'dimgray' | 'dimgrey' | 'dodgerblue' | 'firebrick' | 'floralwhite' | 'forestgreen' | 'fuchsia' | 'gainsboro' | 'ghostwhite' | 'gold' | 'goldenrod' | 'gray' | 'green' | 'greenyellow' | 'grey' | 'honeydew' | 'hotpink' | 'indianred ' | 'indigo' | 'ivory' | 'khaki' | 'lavender' | 'lavenderblush' | 'lawngreen' | 'lemonchiffon' | 'lightblue' | 'lightcoral' | 'lightcyan' | 'lightgoldenrodyellow' | 'lightgray' | 'lightgreen' | 'lightgrey' | 'lightpink' | 'lightsalmon' | 'lightseagreen' | 'lightskyblue' | 'lightslategray' | 'lightslategrey' | 'lightsteelblue' | 'lightyellow' | 'lime' | 'limegreen' | 'linen' | 'magenta' | 'maroon' | 'mediumaquamarine' | 'mediumblue' | 'mediumorchid' | 'mediumpurple' | 'mediumseagreen' | 'mediumslateblue' | 'mediumspringgreen' | 'mediumturquoise' | 'mediumvioletred' | 'midnightblue' | 'mintcream' | 'mistyrose' | 'moccasin' | 'navajowhite' | 'navy' | 'oldlace' | 'olive' | 'olivedrab' | 'orange' | 'orangered' | 'orchid' | 'palegoldenrod' | 'palegreen' | 'paleturquoise' | 'palevioletred' | 'papayawhip' | 'peachpuff' | 'peru' | 'pink' | 'plum' | 'powderblue' | 'purple' | 'rebeccapurple' | 'red' | 'rosybrown' | 'royalblue' | 'saddlebrown' | 'salmon' | 'sandybrown' | 'seagreen' | 'seashell' | 'sienna' | 'silver' | 'skyblue' | 'slateblue' | 'slategray' | 'slategrey' | 'snow' | 'springgreen' | 'steelblue' | 'tan' | 'teal' | 'thistle' | 'tomato' | 'turquoise' | 'violet' | 'wheat' | 'white' | 'whitesmoke' | 'yellow' | 'yellowgreen';
+//# sourceMappingURL=CSSColorNames.d.ts.map

package/types/interfaces/GetRef.d.ts

@@ -0,0 +1,6 @@
+import type { Component, JSX, JSXElementConstructor, Ref } from 'react';
+import type { GuiComponent } from '../types';
+export type GetRef<C> = C extends GuiComponent<any, infer Ref> ? Ref : C extends new (props: any) => Component ? InstanceType<C> : C extends abstract new (...args: any) => any ? InstanceType<C> : C extends Component ? C : (C extends JSXElementConstructor<{
+    ref?: infer R;
+}> ? R : C extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[C]['ref'] : unknown) extends Ref<infer T> | string | undefined ? T : unknown;
+//# sourceMappingURL=GetRef.d.ts.map

package/types/interfaces/GuiComponentEvents.d.ts

@@ -0,0 +1,19 @@
+export type GuiComponentEvents = {
+    cancelable?: boolean | undefined;
+    disabled?: any;
+    hitSlop?: any;
+    delayLongPress?: any;
+    delayPressIn?: any;
+    delayPressOut?: any;
+    focusable?: any;
+    minPressDuration?: number | undefined;
+    onPressIn: ((e: any) => void) | undefined;
+    onPress: ((e: any) => void) | undefined;
+    onLongPress?: ((e: any) => void) | undefined;
+    onMouseEnter?: ((e: any) => void) | undefined;
+    onMouseLeave?: ((e: any) => void) | undefined;
+    onPressOut: ((e: any) => void) | undefined;
+    onFocus?: ((e: any) => void) | undefined;
+    onBlur?: ((e: any) => void) | undefined;
+};
+//# sourceMappingURL=GuiComponentEvents.d.ts.map

package/types/interfaces/GuiComponentPropsBaseBase.d.ts

@@ -0,0 +1,95 @@
+import type { DebugProp, ThemeName, GroupNames, Role, GuiComponentState } from '../types';
+export type GuiComponentPropsBaseBase = {
+    target?: string;
+    htmlFor?: string;
+    /**
+     * When truthy passes through all props to a single child element, and avoids rendering its own element.
+     * Must pass just one child React element that will receive all the props.
+     *
+     * The option "except-style" will avoid passing any style related props.
+     *
+     * The option "web" will map all React Native style props to web props (onPress becomes onClick).
+     *
+     * The option "except-style-web" combines the except-style and web options.
+     *
+     */
+    asChild?: boolean | 'except-style' | 'except-style-web' | 'web';
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    };
+    children?: any | any[];
+    debug?: DebugProp;
+    disabled?: boolean;
+    /**
+     * Same as the web className property, useful for applying styles from CSS on web only
+     */
+    className?: string;
+    /**
+     * If given a theme it will only apply to this element, instead of passing down to children
+     */
+    themeShallow?: boolean;
+    /**
+     * Same as the web id property for setting a uid on an element
+     */
+    id?: string;
+    /**
+     * Controls the rendered element on web.
+     * - String: renders as that HTML element (e.g., `render="button"`)
+     * - JSX Element: clones element with merged props (e.g., `render={<a href="/" />}`)
+     * - Function: full control with props and state (e.g., `render={(props) => <Custom {...props} />}`)
+     */
+    render?: keyof HTMLElementTagNameMap | (string & {}) | React.ReactElement | ((props: Record<string, any> & {
+        ref?: React.Ref<any>;
+    }, state: GuiComponentState) => React.ReactElement);
+    /**
+     * Applies a theme to this element
+     */
+    theme?: ThemeName | null;
+    /**
+     * Marks this component as a group for use in styling children based on parents named group
+     * See: https://gui.hanzo.ai/docs/intro/props
+     */
+    group?: GroupNames | boolean;
+    /**
+     * Works only alongside group, when children of the group are using container based sizing on native you can hide them until parent is measured.
+     * See: https://gui.hanzo.ai/docs/intro/props
+     */
+    untilMeasured?: 'hide' | 'show';
+    /**
+     * Equivalent to "name" property on styled() for automatically applying a theme
+     */
+    componentName?: string;
+    /**
+     * Used for controlling the order of focus with keyboard or assistive device enavigation
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+     */
+    tabIndex?: string | number;
+    /**
+     * Equivalent to role="" attribute on web for accessibility
+     */
+    role?: Role;
+    /**
+     * Disable all compiler optimization
+     */
+    disableOptimization?: boolean;
+    /**
+     * Forces the pseudo style state to be on
+     */
+    forceStyle?: 'hover' | 'press' | 'focus' | 'focusVisible' | 'focusWithin';
+    /**
+     * Disables className output of styles, instead using only inline styles
+     */
+    disableClassName?: boolean;
+    /**
+     * Adds some area outside the typical bounds of the component for touch actions to register.
+     * Hanzo GUI uses Pressable internally so it supports `number | Insets` rather than just `Insets`
+     */
+    hitSlop?: number | Insets | null;
+};
+export interface Insets {
+    top?: number;
+    left?: number;
+    bottom?: number;
+    right?: number;
+}
+//# sourceMappingURL=GuiComponentPropsBaseBase.d.ts.map

package/types/interfaces/RNExclusiveTypes.d.ts

@@ -0,0 +1,22 @@
+import type { GestureResponderHandlers, LayoutChangeEvent, TextLayoutEventData, NativeSyntheticEvent } from 'react-native';
+type OnLayout = ((event: LayoutChangeEvent) => void) | undefined;
+type OnTextLayout = ((event: NativeSyntheticEvent<TextLayoutEventData>) => void) | undefined;
+export interface RNExtraProps {
+    onScrollShouldSetResponder?: unknown;
+    onScrollShouldSetResponderCapture?: unknown;
+    onSelectionChangeShouldSetResponder?: unknown;
+    onSelectionChangeShouldSetResponderCapture?: unknown;
+    onLayout?: OnLayout;
+    elevationAndroid?: number | string;
+}
+export interface RNViewProps extends GestureResponderHandlers, RNExtraProps {
+    rel?: any;
+    download?: any;
+}
+export interface RNTextProps extends RNExtraProps {
+    dir?: 'ltr' | 'rtl' | 'auto';
+    onTextLayout?: OnTextLayout;
+}
+export type RNOnlyProps = 'onStartShouldSetResponder' | 'onScrollShouldSetResponder' | 'onScrollShouldSetResponderCapture' | 'onSelectionChangeShouldSetResponder' | 'onSelectionChangeShouldSetResponderCapture' | 'onLayout' | 'onTextLayout' | 'href' | 'hrefAttrs' | 'elevationAndroid' | 'rel' | 'download' | 'dir' | 'onStartShouldSetResponder' | 'onMoveShouldSetResponder' | 'onResponderEnd' | 'onResponderGrant' | 'onResponderReject' | 'onResponderMove' | 'onResponderRelease' | 'onResponderStart' | 'onResponderTerminationRequest' | 'onResponderTerminate' | 'onStartShouldSetResponderCapture' | 'onMoveShouldSetResponderCapture';
+export {};
+//# sourceMappingURL=RNExclusiveTypes.d.ts.map

package/types/setupHooks.d.ts

@@ -0,0 +1,17 @@
+import type { GuiComponentStateRef } from './types';
+export declare const hooks: InternalHooks;
+export declare function setupHooks(next: InternalHooks): void;
+type InternalHooks = {
+    usePropsTransform?: (elementType: any, props: Record<string, any>, stateRef: {
+        current: GuiComponentStateRef;
+    }, willHydrate?: boolean) => any;
+    setElementProps?: (node?: any) => void;
+    useChildren?: (elementType: any, children: any, viewProps: Record<string, any>) => any;
+    getBaseViews?: () => {
+        View: any;
+        Text: any;
+        TextAncestor: any;
+    };
+};
+export {};
+//# sourceMappingURL=setupHooks.d.ts.map

package/types/setupReactNative.d.ts

@@ -0,0 +1,5 @@
+import type { StaticConfig } from './types';
+export declare function getReactNativeConfig(Component: any): Partial<StaticConfig> | {
+    isReactNative: true;
+} | null | undefined;
+//# sourceMappingURL=setupReactNative.d.ts.map

package/types/styled.d.ts

@@ -0,0 +1,53 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, FormHTMLAttributes, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import type { GetRef } from './interfaces/GetRef';
+import type { GetBaseStyles, GetNonStyledProps, GetStaticConfig, GetStyledVariants, GetVariantValues, InferStyleProps, InferStyledProps, StackStyle, StaticConfigPublic, StylableComponent, StyledContext, TamaDefer, GuiComponent, GuiComponentPropsBase, TextStyle, TextStylePropsBase, ThemeValueByCategory, VariantDefinitions, VariantSpreadFunction } from './types';
+type AreVariantsUndefined<Variants> = Required<Variants> extends {
+    _isEmpty: 1;
+} ? true : false;
+type GetVariantAcceptedValues<V> = V extends object ? {
+    [Key in keyof V]?: V[Key] extends VariantSpreadFunction<any, infer Val> ? Val : GetVariantValues<keyof V[Key]>;
+} : undefined;
+type TextLikeElements = 'a' | 'abbr' | 'b' | 'bdi' | 'bdo' | 'cite' | 'code' | 'data' | 'del' | 'dfn' | 'em' | 'i' | 'ins' | 'kbd' | 'label' | 'mark' | 'q' | 's' | 'samp' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'time' | 'u' | 'var';
+type ConflictingHTMLProps = 'color' | 'display' | 'height' | 'width' | 'size' | 'left' | 'right' | 'top' | 'bottom' | 'translate' | 'content';
+type HTMLElementSpecificProps<T extends keyof HTMLElementTagNameMap> = T extends 'a' ? Omit<AnchorHTMLAttributes<HTMLAnchorElement>, ConflictingHTMLProps> : T extends 'button' ? Omit<ButtonHTMLAttributes<HTMLButtonElement>, ConflictingHTMLProps> : T extends 'input' ? Omit<InputHTMLAttributes<HTMLInputElement>, ConflictingHTMLProps> : T extends 'select' ? Omit<SelectHTMLAttributes<HTMLSelectElement>, ConflictingHTMLProps> : T extends 'textarea' ? Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, ConflictingHTMLProps> : T extends 'form' ? Omit<FormHTMLAttributes<HTMLFormElement>, ConflictingHTMLProps> : T extends 'label' ? Omit<LabelHTMLAttributes<HTMLLabelElement>, ConflictingHTMLProps> : Omit<HTMLAttributes<HTMLElement>, ConflictingHTMLProps>;
+type HTMLElementStyleBase<T extends keyof HTMLElementTagNameMap> = T extends TextLikeElements ? TextStyle : StackStyle;
+/**
+ * styledHtml() for HTML element tags like 'a', 'button', 'div', etc.
+ * Automatically provides element-specific props (href for anchors, type for buttons, etc.)
+ *
+ * @example
+ * const StyledAnchor = styledHtml('a', {
+ *   color: '$blue10',
+ *   textDecorationLine: 'underline',
+ * })
+ * // StyledAnchor now accepts `href` prop with proper typing
+ * <StyledAnchor href="/path">Link</StyledAnchor>
+ */
+export declare function styledHtml<Tag extends keyof HTMLElementTagNameMap, Variants extends VariantDefinitions<any, any> | undefined = undefined>(tag: Tag, options?: Partial<HTMLElementStyleBase<Tag>> & {
+    name?: string;
+    variants?: Variants;
+    defaultVariants?: GetVariantAcceptedValues<NonNullable<Variants>>;
+    context?: StyledContext;
+}): GuiComponent<TamaDefer, HTMLElementTagNameMap[Tag], GuiComponentPropsBase & HTMLElementSpecificProps<Tag>, HTMLElementStyleBase<Tag>, Variants extends undefined ? {} : AreVariantsUndefined<NonNullable<Variants>> extends true ? {} : GetVariantAcceptedValues<NonNullable<Variants>>, {}>;
+/**
+ * styled() for creating Hanzo GUI components from other components.
+ */
+declare function styled<ParentComponent extends StylableComponent, StyledConfig extends StaticConfigPublic, Variants extends VariantDefinitions<ParentComponent, StyledConfig>>(ComponentIn: ParentComponent, options?: Partial<InferStyledProps<ParentComponent, StyledConfig>> & {
+    name?: string;
+    variants?: Variants | undefined;
+    defaultVariants?: GetVariantAcceptedValues<Variants>;
+    context?: StyledContext;
+    render?: string | React.ReactElement;
+}, config?: StyledConfig): GuiComponent<TamaDefer, GetRef<ParentComponent>, GetNonStyledProps<ParentComponent>, StyledConfig["accept"] extends Record<string, any> ? GetBaseStyles<ParentComponent, StyledConfig> & (StyledConfig["accept"] extends Record<string, any> ? { [Key in keyof StyledConfig["accept"]]?: (Key extends keyof GetBaseStyles<ParentComponent, StyledConfig> ? GetBaseStyles<ParentComponent, StyledConfig>[Key] : never) | (StyledConfig["accept"][Key] extends "style" ? Partial<InferStyleProps<ParentComponent, StyledConfig>> : StyledConfig["accept"][Key] extends "textStyle" ? Partial<InferStyleProps<GuiComponent<import("./types").TextProps, import("./types").GuiTextElement, import("./types").TextNonStyleProps, TextStylePropsBase, {}>, StyledConfig>> : ThemeValueByCategory<StyledConfig["accept"][Key]>) | undefined; } : {}) : GetBaseStyles<ParentComponent, StyledConfig>, AreVariantsUndefined<Variants> extends true ? GetStyledVariants<ParentComponent> : AreVariantsUndefined<GetStyledVariants<ParentComponent>> extends true ? Omit<AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>, "_isEmpty"> : { [Key_1 in Exclude<keyof GetStyledVariants<ParentComponent>, "_isEmpty"> | Exclude<keyof (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>), "_isEmpty">]?: (Key_1 extends keyof GetStyledVariants<ParentComponent> ? GetStyledVariants<ParentComponent>[Key_1] : undefined) | (Key_1 extends keyof (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>) ? (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>)[Key_1] : undefined) | undefined; }, GetStaticConfig<ParentComponent, StyledConfig>>;
+type StyledHtmlFactory<Tag extends keyof HTMLElementTagNameMap> = <Variants extends VariantDefinitions<any, any> | undefined = undefined>(options?: Partial<HTMLElementStyleBase<Tag>> & {
+    name?: string;
+    variants?: Variants;
+    defaultVariants?: GetVariantAcceptedValues<NonNullable<Variants>>;
+    context?: StyledContext;
+}) => GuiComponent<TamaDefer, HTMLElementTagNameMap[Tag], GuiComponentPropsBase & HTMLElementSpecificProps<Tag>, HTMLElementStyleBase<Tag>, Variants extends undefined ? {} : AreVariantsUndefined<NonNullable<Variants>> extends true ? {} : GetVariantAcceptedValues<NonNullable<Variants>>, {}>;
+type StyledHtmlFactories = {
+    [K in keyof HTMLElementTagNameMap]: StyledHtmlFactory<K>;
+};
+declare const styledExport: typeof styled & StyledHtmlFactories;
+export { styledExport as styled };
+//# sourceMappingURL=styled.d.ts.map