@bug-on/m3-expressive 1.0.0

package/dist/feedback.d.ts

@@ -0,0 +1,600 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+
+type SafeHTMLSpanAttrs = Omit<React$1.HTMLAttributes<HTMLSpanElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop">;
+interface BadgeProps extends SafeHTMLSpanAttrs {
+    /**
+     * The content to display inside the badge.
+     * - Omitted / undefined → renders as a small 6×6px dot (decorative).
+     * - string | number    → renders as a large badge (min 16px height) with label.
+     *
+     * Numbers exceeding `max` are displayed as `{max}+`.
+     * Strings longer than 4 characters are truncated to 4.
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Maximum numeric value to display before appending "+".
+     * Only applies when `children` is a number.
+     * @example max={99} + children={150} → "99+"
+     */
+    max?: number;
+    /**
+     * Override the background (container) color.
+     * Accepts any valid CSS color value.
+     * Defaults to MD3 `error` token — `bg-m3-error`.
+     */
+    containerColor?: string;
+    /**
+     * Override the text/content color.
+     * Accepts any valid CSS color value.
+     * Defaults to MD3 `on-error` token — `text-m3-on-error`.
+     */
+    contentColor?: string;
+}
+interface BadgedBoxProps {
+    /**
+     * The badge element to overlay on the anchor.
+     * Typically a `<Badge />`.
+     */
+    badge: React$1.ReactNode;
+    /**
+     * The anchor content that the badge is attached to.
+     */
+    children: React$1.ReactNode;
+    /**
+     * Additional className applied to the outer wrapper `span`.
+     */
+    className?: string;
+    /**
+     * Explicitly override size detection for badge positioning.
+     * - `'small'` → BadgeOffset = 6dp → translate(50%, -50%)
+     * - `'large'` → HOffset=12dp/VOffset=14dp → translate(35%, -35%)
+     * When omitted, BadgedBox auto-detects by inspecting `badge` children prop.
+     */
+    badgeSize?: "small" | "large";
+}
+/**
+ * MD3 Expressive Badge — dynamic status indicator.
+ *
+ * @example
+ * ```tsx
+ * // Small dot badge (no content) — decorative
+ * <Badge />
+ *
+ * // Large badge with number (truncated at max)
+ * <Badge max={99}>150</Badge>
+ * // → displays "99+"
+ *
+ * // Large badge with text label
+ * <Badge>NEW</Badge>
+ *
+ * // Custom colors
+ * <Badge containerColor="#6750A4" contentColor="#FFFFFF">3</Badge>
+ * ```
+ *
+ * @see https://m3.material.io/components/badge/overview
+ */
+declare const Badge: React$1.NamedExoticComponent<BadgeProps & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * MD3 BadgedBox — positions a Badge at the top-trailing corner of an anchor.
+ *
+ * Implements MD3 offset specs from Badge.kt:
+ * - Small badge (dot): `BadgeOffset = 6dp` → translate(50%, -50%)
+ * - Large badge (text): `BadgeWithContentHorizontalOffset = 12dp` / `VerticalOffset = 14dp`
+ *   → translate(35%, -35%)
+ *
+ * Auto-detects badge size by inspecting the badge element's children prop,
+ * or accepts an explicit `badgeSize` override.
+ *
+ * @example
+ * ```tsx
+ * // Small dot on mail icon
+ * <BadgedBox badge={<Badge />}>
+ *   <Icon name="mail" />
+ * </BadgedBox>
+ *
+ * // Count badge on notification icon
+ * <BadgedBox badge={<Badge max={99}>{count}</Badge>}>
+ *   <Icon name="notifications" />
+ * </BadgedBox>
+ * ```
+ */
+declare function BadgedBox({ badge, children, className, badgeSize, }: BadgedBoxProps): react_jsx_runtime.JSX.Element;
+
+interface LoadingIndicatorProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Visual style variant.
+     * - `uncontained` (default): bare indicator, no container background
+     * - `contained`: indicator inside a circular container
+     *   (MD3 spec: 38dp container / 24dp active indicator)
+     */
+    variant?: "uncontained" | "contained";
+    /**
+     * Indicator size in dp (pixels). Clamped to the MD3 spec range [24dp, 240dp].
+     * Defaults to 48dp.
+     *
+     * Size guidelines:
+     * - Small displays: 24–48dp
+     * - Medium displays: 48–80dp
+     * - Large/XL displays (desktop): up to 240dp
+     *
+     * @default 48
+     */
+    size?: number;
+    /**
+     * Determinate progress value between 0 and 1.
+     * - **Omit** (default) for indeterminate mode: continuous morphing loop.
+     * - **Provide** for determinate mode: Circle→SoftBurst morph + counterclockwise rotation.
+     *
+     * @example `progress={0.7}` shows 70% progress
+     */
+    progress?: number;
+    /**
+     * Active indicator color override. Falls back to MD3 system color tokens.
+     * Supports any valid CSS color value or CSS variable.
+     * @example "#ff5722" | "var(--brand-color)"
+     */
+    color?: string;
+    /**
+     * Required accessible label describing what is loading.
+     * @example "Loading news article"
+     */
+    "aria-label": string;
+}
+declare const LoadingIndicator: React$1.ForwardRefExoticComponent<LoadingIndicatorProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ProgressBaseProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Giá trị phần trăm tiến trình hiện tại (từ 0 đến 100).
+     * Nếu truyền giá trị này, tiến trình sẽ hiển thị ở trạng thái Determinate.
+     * Nếu bỏ trống (undefined), tiến trình sẽ tự động ở trạng thái Indeterminate.
+     *
+     * @example
+     * ```tsx
+     * <ProgressIndicator value={45} aria-label="Loading profile..." />
+     * ```
+     */
+    value?: number;
+    /**
+     * Nhan đề mô tả mục đích của thanh tiến trình dành cho screen readers (bắt buộc).
+     */
+    "aria-label": string;
+    /**
+     * Độ dày của track (đường nền) của thanh tiến trình (đơn vị: px).
+     * - Với Linear: là chiều cao của thanh.
+     * - Với Circular: là độ dày của viền hình tròn.
+     *
+     * @example
+     * trackHeight={8} // Dày hơn bình thường
+     */
+    trackHeight?: number;
+    /**
+     * Màu sắc của phần tiến trình (phần đã hoàn thành).
+     * Mặc định mượn màu `currentColor` của thẻ wrap, để dễ dàng tuỳ biến qua utility class.
+     *
+     * @example
+     * color="var(--md-sys-color-primary)" // Sử dụng custom token
+     */
+    color?: string;
+    /**
+     * Màu sắc của thanh nền (phần chưa hoàn thành).
+     * Mặc định sử dụng màu được tính toán từ bề mặt hoặc transparency để tạo sự tinh tế.
+     */
+    trackColor?: string;
+}
+interface LinearProgressProps extends ProgressBaseProps {
+    /** Phân loại component sang kiểu dáng Linear (đường thẳng ngang). */
+    variant: "linear";
+    /**
+     * Hình dáng của vạch tiến trình (phần đã hoàn thành).
+     * - `flat`: Đường nét liền phẳng (mặc định)
+     * - `wavy`: Đường lượn sóng động
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Hình dáng của thanh nền chờ (track).
+     * - `flat`: Đường nét liền phẳng (mặc định)
+     * - `wavy`: Đường lượn sóng cố định hoặc động
+     */
+    trackShape?: "flat" | "wavy";
+    /**
+     * Biên độ sóng (áp dụng khi `shape` hoặc `trackShape` là "wavy").
+     * Chỉ định độ lượn cao thấp của con sóng.
+     */
+    amplitude?: number;
+    /**
+     * Chiều dài một nhịp sóng (áp dụng khi `shape` là "wavy" theo determinate).
+     * Khoảng cách giữa 2 đỉnh sóng kề nhau.
+     */
+    wavelength?: number;
+    /**
+     * Nhịp sóng dành riêng cho trạng thái chạy liên tục (Indeterminate Wavy).
+     */
+    indeterminateWavelength?: number;
+    /**
+     * Khoảng hở kết dính giữa cụm vạch đang chạy và thanh nền.
+     * Cho phép truyền \`0\` để hai thanh chạm sát vào nhau liền mạch.
+     *
+     * @example
+     * ```tsx
+     * <ProgressIndicator variant="linear" shape="wavy" gapSize={0} /> // Sóng chạm track liền nét
+     * ```
+     */
+    gapSize?: number;
+    /**
+     * Tốc độ dao động vỗ của sóng (Multiplier). Mặc định là \`1\`.
+     * Tăng giá trị (VD: 1.5, 2) để sóng dao động nhanh hơn.
+     */
+    waveSpeed?: number;
+    /**
+     * Tốc độ lướt / cuộn dải màu dọc trên track (Crawler) đối với trạng thái Indeterminate.
+     * Mặc định là \`1\`.
+     */
+    crawlerSpeed?: number;
+    /**
+     * Cấu hình hiệu ứng gợn khi thanh determinate ở mức xấp xỉ mép viền (<= 10% hoặc >= 90%).
+     * - `md3`: Tự động ép phẳng biên độ sóng thành số 0 một cách mềm mại (Chuẩn Google MD3).
+     * - `continuous`: Bỏ qua các ràng buộc ép phẳng, con sóng vẫn gợn lấp lóa trên mọi giá trị phần trăm.
+     *
+     * @example
+     * ```tsx
+     * <ProgressIndicator variant="linear" shape="wavy" determinateAnimation="continuous" />
+     * ```
+     */
+    determinateAnimation?: "md3" | "continuous";
+    /**
+     * Kiểu kịch bản tịnh tiến cho thanh Indeterminate.
+     * - `md3`: Render 2 vạch song song vọt tới & co giãn mô phỏng vật lý (Chuẩn Google MD3).
+     * - `continuous`: Vạch không ngắt quãng mà tràn lướt vòng lặp mượt mà.
+     *
+     * @example
+     * ```tsx
+     * <ProgressIndicator variant="linear" indeterminateAnimation="continuous" />
+     * ```
+     */
+    indeterminateAnimation?: "md3" | "continuous";
+    /**
+     * Bật/tắt dấm chấm điểm báo kết thúc ở cuối track (Stop Indicator).
+     * - `true`: Luôn thấy một chấm tròn bé xíu ở cuối đường đi
+     * - `false`: Tắt hoàn toàn
+     * - `"auto"`: Chấm tròn chỉ hiển thị và hòa trộn khi progress đạt 100%
+     */
+    showStopIndicator?: boolean | "auto";
+}
+interface CircularProgressProps extends ProgressBaseProps {
+    /** Phân loại component sang kiểu dáng Circular (hình tròn khép kín). */
+    variant: "circular";
+    /**
+     * Đường kính hiển thị của vòng biểu đồ, đơn vị px.
+     *
+     * @example
+     * ```tsx
+     * <ProgressIndicator variant="circular" size={48} aria-label="Loading..." />
+     * ```
+     */
+    size?: number;
+    /**
+     * Phong cách nét vẽ của đường viền trong trạng thái trượt.
+     * - `flat`: Đường nét cứng, vuốt tròn hai đầu stroke.
+     * - `wavy`: Vệt màu chuyển động rung tạo hình răng cưa/gợn sóng.
+     */
+    shape?: "flat" | "wavy";
+    /**
+     * Biên độ gợn của trạng thái `wavy` cho vòng tròn.
+     */
+    amplitude?: number;
+    /** Bước sóng bao trọn chu vi hình tròn. */
+    wavelength?: number;
+    /** Khoảng hở khe đứt ngang nối đỉnh nét vẽ. */
+    gapSize?: number;
+    /**
+     * Xoay nhanh hay chậm theo số nhân cho Crawler Circular quay Indeterminate.
+     */
+    crawlerSpeed?: number;
+}
+type ProgressIndicatorProps = LinearProgressProps | CircularProgressProps;
+
+/**
+ * Thanh tiến trình (Progress Indicator) theo nguyên tắc Material Design 3 Expressive.
+ * Hỗ trợ linh hoạt 2 loại hình hiển thị: Linear (Đường thẳng) và Circular (Hình tròn),
+ * cùng với thiết kế Wavy (Lượn sóng) động rất mềm mại.
+ *
+ * @example
+ * ```tsx
+ * // Determinate Flat Linear
+ * <ProgressIndicator variant="linear" value={60} aria-label="Loading profile..." />
+ *
+ * // Indeterminate Wavy Linear
+ * <ProgressIndicator variant="linear" shape="wavy" aria-label="Connecting to server..." />
+ *
+ * // Determinate Flat Circular
+ * <ProgressIndicator variant="circular" value={45} size={48} aria-label="Syncing..." />
+ * ```
+ */
+declare const ProgressIndicator: React$1.ForwardRefExoticComponent<ProgressIndicatorProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Duration preset for the snackbar auto-dismiss timer.
+ * - `'short'` → 4 000 ms (default, MD3 spec)
+ * - `'long'`  → 7 000 ms
+ * - `number`  → custom milliseconds
+ */
+type SnackbarDuration = "short" | "long" | number;
+/**
+ * Resolution value returned by the `showSnackbar()` promise.
+ * - `'action-performed'` → user clicked the action button
+ * - `'dismissed'`        → auto-dismissed or close button clicked
+ */
+type SnackbarResult = "action-performed" | "dismissed";
+/**
+ * Visual configuration for a single snackbar instance.
+ */
+interface SnackbarVisuals {
+    /** Main message text. */
+    message: string;
+    /** Label for the optional action button. */
+    actionLabel?: string;
+    /** When `true`, renders a close (X) icon button. @default false */
+    withDismissAction?: boolean;
+    /**
+     * When `true`, renders the action button below the message (Column layout).
+     * Use when both message and actionLabel are long.
+     * @default false
+     */
+    actionOnNewLine?: boolean;
+    /**
+     * Auto-dismiss duration.
+     * @default 'short' (4 000 ms)
+     */
+    duration?: SnackbarDuration;
+    /** Additional className applied to the snackbar container. */
+    className?: string;
+}
+/**
+ * Internal runtime data for a currently-displayed snackbar.
+ * Includes the resolve callback to settle the caller's promise.
+ */
+interface SnackbarData {
+    /** Unique key for AnimatePresence element diffing. */
+    id: string;
+    /** Visual configuration. */
+    visuals: SnackbarVisuals;
+    /** Settles the promise returned by `showSnackbar()`. */
+    resolve: (result: SnackbarResult) => void;
+}
+/** Props for the pure `Snackbar` display component. */
+interface SnackbarProps {
+    /** Runtime data including message, actions, and resolve callback. */
+    data: SnackbarData;
+    /** Additional className merged onto the snackbar container. */
+    className?: string;
+}
+/** Props for the `SnackbarHost` component. */
+interface SnackbarHostProps {
+    /** State returned by `useSnackbarState()`. */
+    state: UseSnackbarStateReturn;
+    /** Additional className applied to the fixed host wrapper. */
+    className?: string;
+}
+/** Return type of `useSnackbarState`. */
+interface UseSnackbarStateReturn {
+    /** Currently visible snackbar data, or `null` when idle. */
+    current: SnackbarData | null;
+    /**
+     * Show a snackbar with the given visuals.
+     * Returns a promise that resolves when the snackbar is dismissed or the action is triggered.
+     */
+    showSnackbar: (visuals: SnackbarVisuals) => Promise<SnackbarResult>;
+    /** Internal dismiss handler — called by `SnackbarHost`. */
+    _dismiss: (result: SnackbarResult) => void;
+}
+/**
+ * Low-level hook that manages the snackbar queue and current state.
+ *
+ * Uses a `ref`-based queue (mutex pattern) so that enqueueing never
+ * triggers a re-render storm — only the state transition does.
+ *
+ * @example
+ * ```tsx
+ * // Used internally by SnackbarProvider
+ * const state = useSnackbarState();
+ * return <SnackbarHost state={state} />;
+ * ```
+ */
+declare function useSnackbarState(): UseSnackbarStateReturn;
+/**
+ * MD3 Expressive Snackbar — pure display component.
+ *
+ * Renders a single snackbar with message, optional action button, and
+ * optional dismiss icon button. Handles its own auto-dismiss timer.
+ *
+ * @remarks
+ * - Uses `role="status"` + `aria-live="polite"` for screen reader announcements.
+ * - All entrance/exit animation is handled by the parent `SnackbarHost` via
+ *   `AnimatePresence` + `SNACKBAR_ANIM`.
+ * - Do NOT render this component directly — use `SnackbarHost`.
+ *
+ * @example
+ * ```tsx
+ * // Internal usage inside SnackbarHost — not for direct use
+ * <Snackbar data={currentSnackbarData} />
+ * ```
+ */
+declare const Snackbar: React$1.NamedExoticComponent<SnackbarProps>;
+/**
+ * MD3 SnackbarHost — renders the AnimatePresence container for snackbar queue.
+ *
+ * Place this once in your app layout. It will show snackbars one at a time,
+ * dequeuing the next one as each dismisses.
+ *
+ * @example
+ * ```tsx
+ * // Typically used inside SnackbarProvider — not directly
+ * const state = useSnackbarState();
+ * <SnackbarHost state={state} />
+ * ```
+ */
+declare function SnackbarHost({ state, className }: SnackbarHostProps): react_jsx_runtime.JSX.Element;
+declare namespace SnackbarHost {
+    var displayName: string;
+}
+interface SnackbarContextValue {
+    showSnackbar: (visuals: SnackbarVisuals) => Promise<SnackbarResult>;
+}
+/**
+ * MD3 SnackbarProvider — context provider for imperative snackbar API.
+ *
+ * Wrap your application (or a section of it) with this provider.
+ * Then use `useSnackbar()` in any descendant to show snackbars.
+ *
+ * @example
+ * ```tsx
+ * // In your root layout:
+ * <SnackbarProvider>
+ *   <App />
+ * </SnackbarProvider>
+ *
+ * // In any component:
+ * const { showSnackbar } = useSnackbar();
+ * await showSnackbar({ message: 'Saved!', actionLabel: 'Undo' });
+ * ```
+ */
+declare function SnackbarProvider({ children }: {
+    children: React$1.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare namespace SnackbarProvider {
+    var displayName: string;
+}
+/**
+ * Hook that returns the `showSnackbar` function from the nearest `SnackbarProvider`.
+ *
+ * @throws {Error} if used outside of a `SnackbarProvider`.
+ *
+ * @example
+ * ```tsx
+ * function SaveButton() {
+ *   const { showSnackbar } = useSnackbar();
+ *
+ *   const handleSave = async () => {
+ *     const result = await showSnackbar({
+ *       message: 'Changes saved',
+ *       actionLabel: 'Undo',
+ *     });
+ *     if (result === 'action-performed') undoSave();
+ *   };
+ *
+ *   return <button onClick={handleSave}>Save</button>;
+ * }
+ * ```
+ */
+declare function useSnackbar(): SnackbarContextValue;
+
+type TooltipPlacement = "top" | "bottom" | "left" | "right" | "auto";
+type TooltipTrigger = "hover" | "focus" | "click" | "long-press" | "manual";
+interface TooltipStateConfig {
+    initialVisible?: boolean;
+    isPersistent?: boolean;
+    duration?: number;
+}
+interface TooltipState {
+    isVisible: boolean;
+    show: () => void;
+    dismiss: () => void;
+}
+interface CaretConfig {
+    enabled: boolean;
+    width?: number;
+    height?: number;
+    customPath?: string;
+}
+interface TooltipBoxProps {
+    children: React$1.ReactNode;
+    tooltip: React$1.ReactNode;
+    placement?: TooltipPlacement;
+    trigger?: TooltipTrigger | TooltipTrigger[];
+    state?: TooltipState;
+    spacingFromAnchor?: number;
+    disabled?: boolean;
+    className?: string;
+    showDelay?: number;
+    hideDelay?: number;
+    "aria-label"?: string;
+}
+interface PlainTooltipProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    children: React$1.ReactNode;
+    caret?: CaretConfig | null;
+    maxWidth?: number;
+    className?: string;
+    containerColor?: string;
+    textColor?: string;
+    "data-side"?: "top" | "bottom" | "left" | "right";
+}
+interface RichTooltipProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    children?: React$1.ReactNode;
+    title?: React$1.ReactNode;
+    action?: React$1.ReactNode;
+    caret?: CaretConfig | null;
+    maxWidth?: number;
+    className?: string;
+    colors?: {
+        container?: string;
+        title?: string;
+        body?: string;
+        action?: string;
+    };
+    "data-side"?: "top" | "bottom" | "left" | "right";
+}
+
+declare const PlainTooltip: React$1.ForwardRefExoticComponent<PlainTooltipProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const RichTooltip: React$1.ForwardRefExoticComponent<RichTooltipProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const TooltipTokens: {
+    readonly PlainTooltip: {
+        readonly containerColor: "var(--md-sys-color-inverse-surface)";
+        readonly textColor: "var(--md-sys-color-inverse-on-surface)";
+        readonly shape: "rounded-[4px]";
+        readonly font: "text-[12px] font-normal tracking-[0.4px] leading-[16px]";
+        readonly height: "min-h-6";
+        readonly padding: "px-2 py-1";
+        readonly maxWidth: "max-w-50";
+    };
+    readonly RichTooltip: {
+        readonly containerColor: "var(--md-sys-color-surface-container)";
+        readonly elevation: "shadow-md";
+        readonly shape: "rounded-[12px]";
+        readonly paddingTop: "pt-3";
+        readonly paddingBottom: "pb-2";
+        readonly paddingX: "px-4";
+        readonly maxWidth: "max-w-80";
+        readonly subheadColor: "var(--md-sys-color-on-surface-variant)";
+        readonly subheadFont: "text-[14px] font-medium leading-[20px]";
+        readonly bodyColor: "var(--md-sys-color-on-surface-variant)";
+        readonly bodyFont: "text-[14px] font-normal leading-[20px]";
+        readonly actionColor: "var(--md-sys-color-primary)";
+        readonly actionFont: "text-[14px] font-medium leading-[20px]";
+    };
+};
+
+declare function TooltipBox({ children, tooltip, placement, trigger, state: controlledState, spacingFromAnchor, disabled, className, showDelay, hideDelay, "aria-label": ariaLabel, }: TooltipBoxProps): react_jsx_runtime.JSX.Element;
+
+interface TooltipCaretProps {
+    side: "top" | "bottom" | "left" | "right";
+    width?: number;
+    height?: number;
+    color?: string;
+    customPath?: string;
+    className?: string;
+}
+declare function TooltipCaretShape({ side, width, height, color, customPath, className, }: TooltipCaretProps): react_jsx_runtime.JSX.Element;
+
+interface PositionState {
+    top: number;
+    left: number;
+    actualSide: "top" | "bottom" | "left" | "right";
+}
+declare function useTooltipPosition(anchorRef: React.RefObject<HTMLElement | null>, tooltipRef: React.RefObject<HTMLElement | null>, placement: TooltipPlacement, spacing: number, isVisible: boolean): PositionState;
+
+declare function useTooltipState(config?: TooltipStateConfig): TooltipState;
+
+export { Badge, type BadgeProps, BadgedBox, type BadgedBoxProps, type CaretConfig, type CircularProgressProps, type LinearProgressProps, LoadingIndicator, type LoadingIndicatorProps, PlainTooltip, type PlainTooltipProps, ProgressIndicator, type ProgressIndicatorProps, RichTooltip, type RichTooltipProps, Snackbar, type SnackbarData, type SnackbarDuration, SnackbarHost, type SnackbarHostProps, type SnackbarProps, SnackbarProvider, type SnackbarResult, type SnackbarVisuals, TooltipBox, type TooltipBoxProps, TooltipCaretShape, type TooltipPlacement, type TooltipState, type TooltipStateConfig, TooltipTokens, type TooltipTrigger, type UseSnackbarStateReturn, useSnackbar, useSnackbarState, useTooltipPosition, useTooltipState };