@kjun-ui/native 0.0.0-stage → 0.3.1

package/dist/types/packages/native/src/compound-control.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode, type RefObject } from "react";
+import { View } from "react-native";
+import { type InputSize } from "@kjun-ui/tokens";
+export declare const CompoundControlContext: import("react").Context<{
+    size: InputSize;
+    focusRef?: RefObject<View | null>;
+    onFocusChange?: (focused: boolean) => void;
+    /** First time segment: its value starts on the field text line. */
+    leading?: boolean;
+} | null>;
+export declare function CompoundTarget({ children, square }: {
+    children: ReactNode;
+    square?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/controls.d.cts

@@ -0,0 +1,6 @@
+export { DsCheckbox, DsRadio, DsRadioGroup, DsSwitch } from "./choice-controls.cjs";
+export type { ChoiceOption, ChoiceValue, DsCheckboxProps, DsRadioGroupProps, DsRadioProps, DsSwitchProps } from "./choice-controls.cjs";
+export { DsButtonGroup, DsFilterGroup } from "./selection-groups.cjs";
+export type { DsButtonGroupProps, DsFilterGroupProps } from "./selection-groups.cjs";
+export { DsTextarea } from "./textarea.cjs";
+export type { DsTextareaProps } from "./textarea.cjs";

package/dist/types/packages/native/src/controls.d.ts

@@ -0,0 +1,6 @@
+export { DsCheckbox, DsRadio, DsRadioGroup, DsSwitch } from "./choice-controls.js";
+export type { ChoiceOption, ChoiceValue, DsCheckboxProps, DsRadioGroupProps, DsRadioProps, DsSwitchProps } from "./choice-controls.js";
+export { DsButtonGroup, DsFilterGroup } from "./selection-groups.js";
+export type { DsButtonGroupProps, DsFilterGroupProps } from "./selection-groups.js";
+export { DsTextarea } from "./textarea.js";
+export type { DsTextareaProps } from "./textarea.js";

package/dist/types/packages/native/src/data-state-context.d.cts

@@ -0,0 +1 @@
+export declare const DataStateContentContext: import("react").Context<"empty" | "message" | null>;

package/dist/types/packages/native/src/data-state-context.d.ts

@@ -0,0 +1 @@
+export declare const DataStateContentContext: import("react").Context<"empty" | "message" | null>;

package/dist/types/packages/native/src/data-state.d.cts

@@ -0,0 +1,53 @@
+import { type QueryDisplayProps } from "@kjun-ui/tokens";
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { type DsSkeletonProps } from "./display.cjs";
+export declare function useQueryDisplay(props: QueryDisplayProps): {
+    usesQueryState: boolean;
+    hasCurrentResult: boolean;
+    hasQueryResult: boolean;
+    initialLoading: boolean;
+    queryRefreshing: boolean;
+};
+export interface DsDataStateProps extends QueryDisplayProps {
+    preserveContent?: boolean;
+    refreshing?: boolean;
+    refreshError?: string | null;
+    refreshingText?: string;
+    loadingPadding?: "default" | "none";
+    empty?: boolean;
+    emptyText?: string;
+    emptyIcon?: string;
+    emptyActionText?: string;
+    loadingText?: string;
+    retryText?: string;
+    size?: "sm" | "md" | "lg";
+    skeleton?: boolean;
+    skeletonType?: DsSkeletonProps["type"];
+    skeletonCount?: number;
+    children?: ReactNode;
+    loadingContent?: ReactNode;
+    emptyContent?: ReactNode;
+    errorContent?: ReactNode;
+    onRetry?: () => void;
+    onEmptyAction?: () => void;
+}
+export declare function DsDataState({ preserveContent, refreshing, refreshError, refreshingText, loadingPadding, empty, emptyText, emptyIcon, emptyActionText, loadingText, retryText, size, skeleton, skeletonType, skeletonCount, children, loadingContent, emptyContent, errorContent, onRetry, onEmptyAction, ...query }: DsDataStateProps): import("react/jsx-runtime").JSX.Element;
+export interface DsErrorBoundaryProps {
+    children: ReactNode;
+    fallbackMessage?: string;
+    fallback?: ReactNode;
+    onError?: (error: Error, info: ErrorInfo) => void;
+    onReset?: () => void;
+}
+export declare class DsErrorBoundary extends Component<DsErrorBoundaryProps, {
+    error: boolean;
+}> {
+    state: {
+        error: boolean;
+    };
+    static getDerivedStateFromError(): {
+        error: boolean;
+    };
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}

package/dist/types/packages/native/src/data-state.d.ts

@@ -0,0 +1,53 @@
+import { type QueryDisplayProps } from "@kjun-ui/tokens";
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { type DsSkeletonProps } from "./display.js";
+export declare function useQueryDisplay(props: QueryDisplayProps): {
+    usesQueryState: boolean;
+    hasCurrentResult: boolean;
+    hasQueryResult: boolean;
+    initialLoading: boolean;
+    queryRefreshing: boolean;
+};
+export interface DsDataStateProps extends QueryDisplayProps {
+    preserveContent?: boolean;
+    refreshing?: boolean;
+    refreshError?: string | null;
+    refreshingText?: string;
+    loadingPadding?: "default" | "none";
+    empty?: boolean;
+    emptyText?: string;
+    emptyIcon?: string;
+    emptyActionText?: string;
+    loadingText?: string;
+    retryText?: string;
+    size?: "sm" | "md" | "lg";
+    skeleton?: boolean;
+    skeletonType?: DsSkeletonProps["type"];
+    skeletonCount?: number;
+    children?: ReactNode;
+    loadingContent?: ReactNode;
+    emptyContent?: ReactNode;
+    errorContent?: ReactNode;
+    onRetry?: () => void;
+    onEmptyAction?: () => void;
+}
+export declare function DsDataState({ preserveContent, refreshing, refreshError, refreshingText, loadingPadding, empty, emptyText, emptyIcon, emptyActionText, loadingText, retryText, size, skeleton, skeletonType, skeletonCount, children, loadingContent, emptyContent, errorContent, onRetry, onEmptyAction, ...query }: DsDataStateProps): import("react/jsx-runtime").JSX.Element;
+export interface DsErrorBoundaryProps {
+    children: ReactNode;
+    fallbackMessage?: string;
+    fallback?: ReactNode;
+    onError?: (error: Error, info: ErrorInfo) => void;
+    onReset?: () => void;
+}
+export declare class DsErrorBoundary extends Component<DsErrorBoundaryProps, {
+    error: boolean;
+}> {
+    state: {
+        error: boolean;
+    };
+    static getDerivedStateFromError(): {
+        error: boolean;
+    };
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}

package/dist/types/packages/native/src/date-picker.d.cts

@@ -0,0 +1,14 @@
+import { type InputSize } from "@kjun-ui/tokens";
+export interface DsDatePickerProps {
+    value: string;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    size?: InputSize;
+    disabled?: boolean;
+    ariaLabel?: string;
+    error?: boolean;
+    onValueChange?: (v: string) => void;
+    onChange?: (v: string) => void;
+}
+export declare function DsDatePicker({ value, min, max, placeholder, size, disabled, ariaLabel, error, onValueChange, onChange, }: DsDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/date-picker.d.ts

@@ -0,0 +1,14 @@
+import { type InputSize } from "@kjun-ui/tokens";
+export interface DsDatePickerProps {
+    value: string;
+    min?: string;
+    max?: string;
+    placeholder?: string;
+    size?: InputSize;
+    disabled?: boolean;
+    ariaLabel?: string;
+    error?: boolean;
+    onValueChange?: (v: string) => void;
+    onChange?: (v: string) => void;
+}
+export declare function DsDatePicker({ value, min, max, placeholder, size, disabled, ariaLabel, error, onValueChange, onChange, }: DsDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/display-primitives.d.cts

@@ -0,0 +1,50 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export type DisplaySize = "xs" | "sm" | "md" | "lg" | "xl";
+export type SemanticTone = "primary" | "success" | "warning" | "danger" | "info";
+export interface DsBadgeProps {
+    variant?: "default" | "secondary" | SemanticTone | "price-up" | "price-down";
+    size?: DisplaySize;
+    dot?: boolean;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function DsBadge(props: DsBadgeProps): import("react/jsx-runtime").JSX.Element;
+/** Internal composition keeps KPI dots on their own shared geometry role. */
+export declare function BadgeView({ variant, size, dot, children, style, dotSize, }: DsBadgeProps & {
+    dotSize?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export interface DsEmptyProps {
+    text?: string;
+    description?: string;
+    icon?: string;
+    children?: ReactNode;
+}
+export declare function DsEmpty({ text, description, icon, children, }: DsEmptyProps): import("react/jsx-runtime").JSX.Element;
+export interface DsSpinnerProps {
+    size?: DisplaySize;
+    text?: string;
+}
+export declare function DsSpinner({ size, text }: DsSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export interface DsAlertProps {
+    type?: "info" | "success" | "warning" | "danger" | "error";
+    variant?: SemanticTone;
+    size?: "sm" | "md" | "lg";
+    title?: ReactNode;
+    closable?: boolean;
+    children?: ReactNode;
+    /** Buttons placed under the message; unsized DsButtons follow the alert size. */
+    actions?: ReactNode;
+    onClose?: () => void;
+}
+export declare function DsAlert({ type, variant, size, title, closable, children, actions, onClose, }: DsAlertProps): import("react/jsx-runtime").JSX.Element | null;
+export interface DsProgressProps {
+    value?: number;
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    variant?: SemanticTone;
+    showLabel?: boolean;
+    label?: ReactNode;
+    subLabel?: ReactNode;
+}
+export declare function DsProgress({ value, max, size, variant, showLabel, label, subLabel, }: DsProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/display-primitives.d.ts

@@ -0,0 +1,50 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
+export type DisplaySize = "xs" | "sm" | "md" | "lg" | "xl";
+export type SemanticTone = "primary" | "success" | "warning" | "danger" | "info";
+export interface DsBadgeProps {
+    variant?: "default" | "secondary" | SemanticTone | "price-up" | "price-down";
+    size?: DisplaySize;
+    dot?: boolean;
+    children?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function DsBadge(props: DsBadgeProps): import("react/jsx-runtime").JSX.Element;
+/** Internal composition keeps KPI dots on their own shared geometry role. */
+export declare function BadgeView({ variant, size, dot, children, style, dotSize, }: DsBadgeProps & {
+    dotSize?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export interface DsEmptyProps {
+    text?: string;
+    description?: string;
+    icon?: string;
+    children?: ReactNode;
+}
+export declare function DsEmpty({ text, description, icon, children, }: DsEmptyProps): import("react/jsx-runtime").JSX.Element;
+export interface DsSpinnerProps {
+    size?: DisplaySize;
+    text?: string;
+}
+export declare function DsSpinner({ size, text }: DsSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export interface DsAlertProps {
+    type?: "info" | "success" | "warning" | "danger" | "error";
+    variant?: SemanticTone;
+    size?: "sm" | "md" | "lg";
+    title?: ReactNode;
+    closable?: boolean;
+    children?: ReactNode;
+    /** Buttons placed under the message; unsized DsButtons follow the alert size. */
+    actions?: ReactNode;
+    onClose?: () => void;
+}
+export declare function DsAlert({ type, variant, size, title, closable, children, actions, onClose, }: DsAlertProps): import("react/jsx-runtime").JSX.Element | null;
+export interface DsProgressProps {
+    value?: number;
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    variant?: SemanticTone;
+    showLabel?: boolean;
+    label?: ReactNode;
+    subLabel?: ReactNode;
+}
+export declare function DsProgress({ value, max, size, variant, showLabel, label, subLabel, }: DsProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/display.d.cts

@@ -0,0 +1,6 @@
+export { DsCard } from "./card.cjs";
+export type { DsCardProps } from "./card.cjs";
+export { DsAlert, DsBadge, DsEmpty, DsProgress, DsSpinner } from "./display-primitives.cjs";
+export type { DisplaySize, DsAlertProps, DsBadgeProps, DsEmptyProps, DsProgressProps, DsSpinnerProps, SemanticTone } from "./display-primitives.cjs";
+export { DsSkeleton } from "./skeleton-base.cjs";
+export type { DsSkeletonProps } from "./skeleton-base.cjs";

package/dist/types/packages/native/src/display.d.ts

@@ -0,0 +1,6 @@
+export { DsCard } from "./card.js";
+export type { DsCardProps } from "./card.js";
+export { DsAlert, DsBadge, DsEmpty, DsProgress, DsSpinner } from "./display-primitives.js";
+export type { DisplaySize, DsAlertProps, DsBadgeProps, DsEmptyProps, DsProgressProps, DsSpinnerProps, SemanticTone } from "./display-primitives.js";
+export { DsSkeleton } from "./skeleton-base.js";
+export type { DsSkeletonProps } from "./skeleton-base.js";

package/dist/types/packages/native/src/drawer.d.cts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface DsDrawerProps {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    title?: string;
+    position?: "left" | "right" | "top" | "bottom";
+    width?: number;
+    closable?: boolean;
+    closeOnOverlay?: boolean;
+    closeOnEsc?: boolean;
+    noPadding?: boolean;
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    onClose?: () => void;
+    ariaLabel?: string;
+}
+export declare function DsDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, }: DsDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/drawer.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface DsDrawerProps {
+    open: boolean;
+    onOpenChange: (v: boolean) => void;
+    title?: string;
+    position?: "left" | "right" | "top" | "bottom";
+    width?: number;
+    closable?: boolean;
+    closeOnOverlay?: boolean;
+    closeOnEsc?: boolean;
+    noPadding?: boolean;
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    onClose?: () => void;
+    ariaLabel?: string;
+}
+export declare function DsDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, }: DsDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/dropdown.d.cts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { type DsButtonProps } from "./button.cjs";
+import { type DsTooltipProps } from "./popover.cjs";
+export declare const DropdownContext: import("react").Context<(() => void) | null>;
+export interface DsDropdownProps {
+    disabled?: boolean;
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    menuId?: string;
+    triggerId?: string;
+    trigger: ReactNode;
+    children: ReactNode;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+export declare function DsDropdown({ disabled, placement, trigger, children, onOpen, onClose, }: DsDropdownProps): import("react/jsx-runtime").JSX.Element;
+export interface DsDropdownItemProps {
+    id?: string;
+    variant?: "default" | "danger";
+    icon?: string;
+    disabled?: boolean;
+    selected?: boolean | null;
+    children: ReactNode;
+    onPress?: () => void;
+}
+export declare function DsDropdownItem({ variant, icon, disabled, selected, children, onPress, }: DsDropdownItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DsDropdownDivider(): import("react/jsx-runtime").JSX.Element;
+export interface DsMenuButtonProps extends Omit<DsDropdownProps, "trigger"> {
+    label?: string;
+    size?: DsButtonProps["size"];
+    variant?: DsButtonProps["variant"];
+    /** Show a square dots-vertical button; label remains its accessible name. */
+    compact?: boolean;
+    loading?: boolean;
+    tooltip?: string;
+    tooltipPlacement?: DsTooltipProps["placement"];
+    tooltipDelay?: number;
+    ariaLabel?: string;
+}
+export declare function DsMenuButton({ label, size, variant, compact, loading, tooltip, tooltipPlacement, tooltipDelay, ariaLabel, onOpen, onClose, ...props }: DsMenuButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/dropdown.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import { type DsButtonProps } from "./button.js";
+import { type DsTooltipProps } from "./popover.js";
+export declare const DropdownContext: import("react").Context<(() => void) | null>;
+export interface DsDropdownProps {
+    disabled?: boolean;
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    menuId?: string;
+    triggerId?: string;
+    trigger: ReactNode;
+    children: ReactNode;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+export declare function DsDropdown({ disabled, placement, trigger, children, onOpen, onClose, }: DsDropdownProps): import("react/jsx-runtime").JSX.Element;
+export interface DsDropdownItemProps {
+    id?: string;
+    variant?: "default" | "danger";
+    icon?: string;
+    disabled?: boolean;
+    selected?: boolean | null;
+    children: ReactNode;
+    onPress?: () => void;
+}
+export declare function DsDropdownItem({ variant, icon, disabled, selected, children, onPress, }: DsDropdownItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DsDropdownDivider(): import("react/jsx-runtime").JSX.Element;
+export interface DsMenuButtonProps extends Omit<DsDropdownProps, "trigger"> {
+    label?: string;
+    size?: DsButtonProps["size"];
+    variant?: DsButtonProps["variant"];
+    /** Show a square dots-vertical button; label remains its accessible name. */
+    compact?: boolean;
+    loading?: boolean;
+    tooltip?: string;
+    tooltipPlacement?: DsTooltipProps["placement"];
+    tooltipDelay?: number;
+    ariaLabel?: string;
+}
+export declare function DsMenuButton({ label, size, variant, compact, loading, tooltip, tooltipPlacement, tooltipDelay, ariaLabel, onOpen, onClose, ...props }: DsMenuButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/feedback-context.d.cts

@@ -0,0 +1,3 @@
+import type { KjunFeedback } from "@kjun-ui/tokens";
+export declare const KjunFeedbackContext: import("react").Context<KjunFeedback | null>;
+export declare function useOptionalKjunFeedback(): KjunFeedback | null;

package/dist/types/packages/native/src/feedback-context.d.ts

@@ -0,0 +1,3 @@
+import type { KjunFeedback } from "@kjun-ui/tokens";
+export declare const KjunFeedbackContext: import("react").Context<KjunFeedback | null>;
+export declare function useOptionalKjunFeedback(): KjunFeedback | null;

package/dist/types/packages/native/src/feedback.d.cts

@@ -0,0 +1,7 @@
+import { type KjunFeedback } from "@kjun-ui/tokens";
+import { type ReactNode } from "react";
+export declare function useKjunFeedback(): KjunFeedback;
+export declare function KjunFeedbackProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export type { ConfirmOptions, KjunFeedback, PromptOptions, ToastOptions } from "@kjun-ui/tokens";

package/dist/types/packages/native/src/feedback.d.ts

@@ -0,0 +1,7 @@
+import { type KjunFeedback } from "@kjun-ui/tokens";
+import { type ReactNode } from "react";
+export declare function useKjunFeedback(): KjunFeedback;
+export declare function KjunFeedbackProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export type { ConfirmOptions, KjunFeedback, PromptOptions, ToastOptions } from "@kjun-ui/tokens";

package/dist/types/packages/native/src/field-clear.d.cts

@@ -0,0 +1,8 @@
+import { type InputSize } from "@kjun-ui/tokens";
+/** The visual clear affordance is smaller than its 44px activation target. */
+export declare function FieldClear({ size, disabled, label, onPress }: {
+    size: InputSize;
+    disabled?: boolean;
+    label: string;
+    onPress: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/field-clear.d.ts

@@ -0,0 +1,8 @@
+import { type InputSize } from "@kjun-ui/tokens";
+/** The visual clear affordance is smaller than its 44px activation target. */
+export declare function FieldClear({ size, disabled, label, onPress }: {
+    size: InputSize;
+    disabled?: boolean;
+    label: string;
+    onPress: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/field-surface.d.cts

@@ -0,0 +1,86 @@
+import { Animated, TextInput, type ViewStyle } from "react-native";
+import { type InputSize } from "@kjun-ui/tokens";
+export declare const FieldTextInput: typeof TextInput;
+export declare const FieldPressable: import("react").ForwardRefExoticComponent<import("react-native").PressableProps & {
+    focusRingInset?: boolean;
+    focusRing?: boolean;
+    focusRingRadius?: number;
+} & import("react").RefAttributes<import("react-native").View>> | Animated.AnimatedComponent<import("react").ForwardRefExoticComponent<import("react-native").PressableProps & {
+    focusRingInset?: boolean;
+    focusRing?: boolean;
+    focusRingRadius?: number;
+} & import("react").RefAttributes<import("react-native").View>>>;
+/** Activate only the spare area around a small field, without duplicating child actions. */
+export declare function fieldTarget(action: () => void, disabled: boolean): {
+    onClick: (event: {
+        target: unknown;
+        currentTarget: unknown;
+    }) => void;
+    onTouchEnd?: undefined;
+} | {
+    onTouchEnd: (event: {
+        target: unknown;
+        currentTarget: unknown;
+    }) => void;
+    onClick?: undefined;
+};
+/** Shared field state, independent of each control's value and keyboard model. */
+export declare function useFieldSurface(size: InputSize, { disabled, readOnly, invalid, open }?: {
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    invalid?: boolean | undefined;
+    open?: boolean | undefined;
+}): {
+    spec: {
+        readonly height: 32;
+        readonly fontSize: 16;
+        readonly placeholderSize: 16;
+        readonly radius: 10;
+        readonly padding: 12;
+        readonly iconSize: 16;
+        readonly lineHeight: 24;
+        readonly clearSize: 24;
+        readonly textareaPaddingY: 8;
+        readonly affixGap: 8;
+    } | {
+        readonly height: 40;
+        readonly fontSize: 16;
+        readonly placeholderSize: 16;
+        readonly radius: 12;
+        readonly padding: 16;
+        readonly iconSize: 16;
+        readonly lineHeight: 24;
+        readonly clearSize: 28;
+        readonly textareaPaddingY: 12;
+        readonly affixGap: 8;
+    } | {
+        readonly height: 48;
+        readonly fontSize: 16;
+        readonly placeholderSize: 16;
+        readonly radius: 14;
+        readonly padding: 20;
+        readonly iconSize: 18;
+        readonly lineHeight: 24;
+        readonly clearSize: 32;
+        readonly textareaPaddingY: 16;
+        readonly affixGap: 8;
+    };
+    style: ViewStyle;
+    setFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    active: boolean;
+    hovered: boolean;
+    ink: import("react-native").ColorValue;
+    icon: import("react-native").ColorValue;
+    hit: number;
+    hover: {
+        onHoverIn: () => void;
+        onHoverOut: () => void;
+    };
+    webHover: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    } | {
+        onMouseEnter?: undefined;
+        onMouseLeave?: undefined;
+    };
+};

package/dist/types/packages/native/src/field-surface.d.ts

@@ -0,0 +1,86 @@
+import { Animated, TextInput, type ViewStyle } from "react-native";
+import { type InputSize } from "@kjun-ui/tokens";
+export declare const FieldTextInput: typeof TextInput;
+export declare const FieldPressable: import("react").ForwardRefExoticComponent<import("react-native").PressableProps & {
+    focusRingInset?: boolean;
+    focusRing?: boolean;
+    focusRingRadius?: number;
+} & import("react").RefAttributes<import("react-native").View>> | Animated.AnimatedComponent<import("react").ForwardRefExoticComponent<import("react-native").PressableProps & {
+    focusRingInset?: boolean;
+    focusRing?: boolean;
+    focusRingRadius?: number;
+} & import("react").RefAttributes<import("react-native").View>>>;
+/** Activate only the spare area around a small field, without duplicating child actions. */
+export declare function fieldTarget(action: () => void, disabled: boolean): {
+    onClick: (event: {
+        target: unknown;
+        currentTarget: unknown;
+    }) => void;
+    onTouchEnd?: undefined;
+} | {
+    onTouchEnd: (event: {
+        target: unknown;
+        currentTarget: unknown;
+    }) => void;
+    onClick?: undefined;
+};
+/** Shared field state, independent of each control's value and keyboard model. */
+export declare function useFieldSurface(size: InputSize, { disabled, readOnly, invalid, open }?: {
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    invalid?: boolean | undefined;
+    open?: boolean | undefined;
+}): {
+    spec: {
+        readonly height: 32;
+        readonly fontSize: 16;
+        readonly placeholderSize: 16;
+        readonly radius: 10;
+        readonly padding: 12;
+        readonly iconSize: 16;
+        readonly lineHeight: 24;
+        readonly clearSize: 24;
+        readonly textareaPaddingY: 8;
+        readonly affixGap: 8;
+    } | {
+        readonly height: 40;
+        readonly fontSize: 16;
+        readonly placeholderSize: 16;
+        readonly radius: 12;
+        readonly padding: 16;
+        readonly iconSize: 16;
+        readonly lineHeight: 24;
+        readonly clearSize: 28;
+        readonly textareaPaddingY: 12;
+        readonly affixGap: 8;
+    } | {
+        readonly height: 48;
+        readonly fontSize: 16;
+        readonly placeholderSize: 16;
+        readonly radius: 14;
+        readonly padding: 20;
+        readonly iconSize: 18;
+        readonly lineHeight: 24;
+        readonly clearSize: 32;
+        readonly textareaPaddingY: 16;
+        readonly affixGap: 8;
+    };
+    style: ViewStyle;
+    setFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    active: boolean;
+    hovered: boolean;
+    ink: import("react-native").ColorValue;
+    icon: import("react-native").ColorValue;
+    hit: number;
+    hover: {
+        onHoverIn: () => void;
+        onHoverOut: () => void;
+    };
+    webHover: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+    } | {
+        onMouseEnter?: undefined;
+        onMouseLeave?: undefined;
+    };
+};