@seed-design/lynx-react 0.1.1-alpha.0

package/lib/components/ActionButton/ActionButton.d.ts

@@ -0,0 +1,24 @@
+import type { ActionButtonVariantProps } from "@seed-design/lynx-css/recipes/action-button";
+import * as React from "react";
+/**
+ * @platform Lynx
+ *
+ * 미지원 기능 (Lynx 3.7 SVG 지원 후 추가 예정):
+ * - loading: SVG 기반 spinner 필요
+ * - layout: "iconOnly": SVG 아이콘 렌더링 필요
+ * - PrefixIcon / SuffixIcon: SVG 아이콘 렌더링 필요
+ *
+ * 웹 대비 미지원 기능:
+ * - color / fontWeight props: CSS variable 동적 주입 제한
+ * - bleedX / bleedY props: CSS variable 동적 주입 제한
+ */
+export interface ActionButtonProps extends Omit<ActionButtonVariantProps, "loading" | "layout"> {
+    children?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+    flexGrow?: number;
+    bindtap?: () => void;
+    "main-thread:bindtap"?: () => void;
+}
+export declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=ActionButton.d.ts.map

package/lib/components/ActionButton/ActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/ActionButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAC;AAE5F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,wBAAwB,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC7F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,mFAkCvB,CAAC"}

package/lib/components/ActionButton/ActionButton.jsx

@@ -0,0 +1,21 @@
+import { actionButton } from "@seed-design/lynx-css/recipes/action-button";
+import clsx from "clsx";
+import * as React from "react";
+export const ActionButton = React.forwardRef((props, ref) => {
+    const [variantProps, restProps] = actionButton.splitVariantProps(props);
+    const { children, className, flexGrow, bindtap, "main-thread:bindtap": mainThreadBindtap, ...nativeProps } = restProps;
+    const { disabled = false } = variantProps;
+    const classes = actionButton({
+        ...variantProps,
+        layout: "withText",
+        disabled: disabled ? true : undefined,
+    });
+    const isInteractive = !disabled;
+    return (<view {...(ref ? { ref: ref } : {})} className={clsx(classes.root, className)} style={flexGrow != null ? { flexGrow } : undefined} {...(isInteractive && bindtap && { bindtap })} {...(isInteractive &&
+        mainThreadBindtap && {
+        "main-thread:bindtap": mainThreadBindtap,
+    })} {...nativeProps}>
+      <text className={classes.text}>{children}</text>
+    </view>);
+});
+ActionButton.displayName = "ActionButton";

package/lib/components/ActionButton/index.d.ts

@@ -0,0 +1,2 @@
+export { ActionButton, type ActionButtonProps } from "./ActionButton";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ActionButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ActionButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/ActionButton/index.js

@@ -0,0 +1 @@
+export { ActionButton } from "./ActionButton";

package/lib/components/Box/Box.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { type StyleProps } from "../../utils/styled";
+export interface BoxProps extends StyleProps {
+    asChild?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: ReactNode;
+}
+export declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<any>>;
+//# sourceMappingURL=Box.d.ts.map

package/lib/components/Box/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,MAAM,WAAW,QAAS,SAAQ,UAAU;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,GAAG,0FAgBd,CAAC"}

package/lib/components/Box/Box.jsx

@@ -0,0 +1,19 @@
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { Slot } from "@seed-design/lynx-primitive";
+import { useStyleProps } from "../../utils/styled";
+export const Box = forwardRef((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    const { asChild = false, className, children, ...nativeProps } = restProps;
+    const mergedProps = {
+        ...(ref ? { ref } : {}),
+        className: clsx("seed-box", className),
+        style: style,
+        ...nativeProps,
+    };
+    if (asChild) {
+        return <Slot {...mergedProps}>{children}</Slot>;
+    }
+    return <view {...mergedProps}>{children}</view>;
+});
+Box.displayName = "Box";

package/lib/components/Box/index.d.ts

@@ -0,0 +1,2 @@
+export { Box, type BoxProps } from "./Box";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Box/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC"}

package/lib/components/Box/index.js

@@ -0,0 +1 @@
+export { Box } from "./Box";

package/lib/components/Flex/Flex.d.ts

@@ -0,0 +1,33 @@
+import { type BoxProps } from "../Box/Box";
+export interface FlexProps extends Omit<BoxProps, "display"> {
+    /**
+     * @default "flex"
+     */
+    display?: "flex" | "none";
+    /**
+     * Shorthand for `flexDirection`.
+     */
+    direction?: BoxProps["flexDirection"];
+    /**
+     * Shorthand for `flexWrap`.
+     */
+    wrap?: BoxProps["flexWrap"];
+    /**
+     * Shorthand for `alignItems`.
+     */
+    align?: BoxProps["alignItems"];
+    /**
+     * Shorthand for `justifyContent`.
+     */
+    justify?: BoxProps["justifyContent"];
+    /**
+     * Shorthand for `flexGrow`.
+     */
+    grow?: BoxProps["flexGrow"];
+    /**
+     * Shorthand for `flexShrink`.
+     */
+    shrink?: BoxProps["flexShrink"];
+}
+export declare const Flex: import("react").ForwardRefExoticComponent<FlexProps & import("react").RefAttributes<any>>;
+//# sourceMappingURL=Flex.d.ts.map

package/lib/components/Flex/Flex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/Flex.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC1D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC;IAEtC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAErC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE5B;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC;CACjC;AAED,eAAO,MAAM,IAAI,2FAgBf,CAAC"}

package/lib/components/Flex/Flex.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import { Box } from "../Box/Box";
+export const Flex = forwardRef((props, ref) => {
+    const { direction, wrap, align, justify, grow, shrink, ...rest } = props;
+    return (<Box ref={ref} display="flex" flexDirection={direction} flexWrap={wrap} alignItems={align} justifyContent={justify} flexGrow={grow} flexShrink={shrink} {...rest}/>);
+});
+Flex.displayName = "Flex";

package/lib/components/Flex/index.d.ts

@@ -0,0 +1,2 @@
+export { Flex, type FlexProps } from "./Flex";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Flex/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Flex/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/lib/components/Flex/index.js

@@ -0,0 +1 @@
+export { Flex } from "./Flex";

package/lib/components/List/List.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import { type StyleProps } from "../../utils/styled";
+import type { ListProps as LynxListProps } from "@lynx-js/types";
+export interface ListProps extends StyleProps, Omit<LynxListProps, "style"> {
+    asChild?: boolean;
+    children?: ReactNode;
+}
+export declare const List: import("react").NamedExoticComponent<Omit<ListProps, "ref"> & import("react").RefAttributes<any>>;
+//# sourceMappingURL=List.d.ts.map

package/lib/components/List/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,KAAK,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,WAAW,SAAU,SAAQ,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAuBD,eAAO,MAAM,IAAI,mGAAiB,CAAC"}

package/lib/components/List/List.jsx

@@ -0,0 +1,17 @@
+import { forwardRef, memo } from "react";
+import { Slot } from "@seed-design/lynx-primitive";
+import { useStyleProps } from "../../utils/styled";
+const ListImpl = forwardRef((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    const { asChild = false, className, children, ...nativeProps } = restProps;
+    if (asChild) {
+        return (<Slot {...(ref ? { ref } : {})} className={className} style={style} {...nativeProps}>
+        {children}
+      </Slot>);
+    }
+    return (<list {...(ref ? { ref } : {})} className={className} style={style} {...nativeProps}>
+      {children}
+    </list>);
+});
+ListImpl.displayName = "List";
+export const List = memo(ListImpl);

package/lib/components/List/index.d.ts

@@ -0,0 +1,2 @@
+export { List, type ListProps } from "./List";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC"}

package/lib/components/List/index.js

@@ -0,0 +1 @@
+export { List } from "./List";

package/lib/components/ListItem/ListItem.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+import { type StyleProps } from "../../utils/styled";
+import type { ListItemProps as LynxListItemProps } from "@lynx-js/types";
+export interface ListItemProps extends StyleProps, Omit<LynxListItemProps, "style"> {
+    children?: ReactNode;
+}
+export declare const ListItem: import("react").NamedExoticComponent<Omit<ListItemProps, "ref"> & import("react").RefAttributes<any>>;
+//# sourceMappingURL=ListItem.d.ts.map

package/lib/components/ListItem/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEzE,MAAM,WAAW,aAAc,SAAQ,UAAU,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC;IACjF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAoBD,eAAO,MAAM,QAAQ,uGAAqB,CAAC"}

package/lib/components/ListItem/ListItem.jsx

@@ -0,0 +1,11 @@
+import { forwardRef, memo } from "react";
+import { useStyleProps } from "../../utils/styled";
+const ListItemImpl = forwardRef((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    const { className, children, ...nativeProps } = restProps;
+    return (<list-item {...(ref ? { ref } : {})} className={className} style={style} {...nativeProps}>
+      {children}
+    </list-item>);
+});
+ListItemImpl.displayName = "ListItem";
+export const ListItem = memo(ListItemImpl);

package/lib/components/ListItem/index.d.ts

@@ -0,0 +1,2 @@
+export { ListItem, type ListItemProps } from "./ListItem";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ListItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ListItem/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/lib/components/ListItem/index.js

@@ -0,0 +1 @@
+export { ListItem } from "./ListItem";

package/lib/components/ProgressCircle/ProgressCircle.d.ts

@@ -0,0 +1,28 @@
+import type { ProgressCircleVariantProps } from "@seed-design/lynx-css/recipes/progress-circle";
+export interface RootProps extends ProgressCircleVariantProps {
+    minValue?: number;
+    maxValue?: number;
+    value?: number;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Lynx에서 SVG를 사용할 수 없어 CSS clip-path 기반 pie sector로 구현.
+ *
+ * **Known Issues:**
+ * - clip-path가 Lynx에서 animatable이 아니라 JS RAF로 매 프레임 SVG path 생성
+ * - Lynx main thread에서 모듈 레벨 Map 미지원으로 인스턴스 간 RAF 공유 불가
+ * - 다수 인스턴스 동시 렌더링 시 성능 저하 가능
+ *
+ * Lynx SVG + stroke-dasharray 지원 시 CSS-only 애니메이션으로 전환 예정.
+ */
+declare function Root(props: RootProps): import("react").JSX.Element;
+declare function Track(): null;
+declare function Range(): import("react").JSX.Element;
+export declare const ProgressCircle: {
+    Root: typeof Root;
+    Track: typeof Track;
+    Range: typeof Range;
+};
+export {};
+//# sourceMappingURL=ProgressCircle.d.ts.map

package/lib/components/ProgressCircle/ProgressCircle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAqGhG,MAAM,WAAW,SAAU,SAAQ,0BAA0B;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,iBAAS,IAAI,CAAC,KAAK,EAAE,SAAS,+BAgC7B;AAED,iBAAS,KAAK,SAEb;AAED,iBAAS,KAAK,gCAQb;AAyOD,eAAO,MAAM,cAAc;;;;CAI1B,CAAC"}

package/lib/components/ProgressCircle/ProgressCircle.jsx

@@ -0,0 +1,292 @@
+import { createContext, runOnMainThread, useContext, useEffect, useMemo, useMainThreadRef, } from "@lynx-js/react";
+import clsx from "clsx";
+import { progressCircle } from "@seed-design/lynx-css/recipes/progress-circle";
+const ProgressCircleContext = createContext(null);
+function useProgressCircleCtx() {
+    const ctx = useContext(ProgressCircleContext);
+    if (!ctx) {
+        throw new Error("ProgressCircle compound components must be used within ProgressCircle.Root");
+    }
+    return ctx;
+}
+// --- Background-thread-only utilities (for initial render) ---
+function computeRingGeometry(numSize) {
+    const halfSize = numSize / 2;
+    const innerR = 0.53 * Math.SQRT2 * halfSize;
+    const ringCenterR = (halfSize + innerR) / 2;
+    const capSize = halfSize - innerR;
+    return { halfSize, innerR, ringCenterR, capSize };
+}
+function bgPieClipPath(size, angleDeg) {
+    if (angleDeg >= 360)
+        return undefined;
+    if (angleDeg <= 0)
+        return 'path("M 0 0 Z")';
+    const c = size / 2;
+    const r = c + 1;
+    const rad = (angleDeg * Math.PI) / 180;
+    const endX = c + r * Math.sin(rad);
+    const endY = c - r * Math.cos(rad);
+    const largeArc = angleDeg > 180 ? 1 : 0;
+    return `path("M ${c} ${c} L ${c} ${c - r} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY} Z")`;
+}
+// --- Main-thread-only utilities (for animations) ---
+// Compiled into the main thread bundle. Must NOT be called from render code.
+function cubicBezier(rawT, x1, y1, x2, y2) {
+    "main thread";
+    const t = Math.max(0, Math.min(1, rawT));
+    const cx = 3 * x1;
+    const bx = 3 * (x2 - x1) - cx;
+    const ax = 1 - cx - bx;
+    let currentT = t;
+    for (let i = 0; i < 8; i++) {
+        const currentX = ((ax * currentT + bx) * currentT + cx) * currentT - t;
+        const currentDx = (3 * ax * currentT + 2 * bx) * currentT + cx;
+        if (Math.abs(currentDx) < 1e-6)
+            break;
+        currentT = currentT - currentX / currentDx;
+    }
+    const cy = 3 * y1;
+    const by = 3 * (y2 - y1) - cy;
+    const ay = 1 - cy - by;
+    return ((ay * currentT + by) * currentT + cy) * currentT;
+}
+function pieClipPath(size, angleDeg) {
+    "main thread";
+    if (angleDeg >= 360)
+        return undefined;
+    if (angleDeg <= 0)
+        return 'path("M 0 0 Z")';
+    const c = size / 2;
+    const r = c + 1;
+    const rad = (angleDeg * Math.PI) / 180;
+    const endX = c + r * Math.sin(rad);
+    const endY = c - r * Math.cos(rad);
+    const largeArc = angleDeg > 180 ? 1 : 0;
+    return `path("M ${c} ${c} L ${c} ${c - r} A ${r} ${r} 0 ${largeArc} 1 ${endX} ${endY} Z")`;
+}
+function sampleIndeterminate(t) {
+    "main thread";
+    const containerEased = cubicBezier(t, 0.35, 0.25, 0.65, 0.75);
+    const headEased = cubicBezier(t, 0.35, 0, 0.65, 1);
+    const tailEased = cubicBezier(t, 0.35, 0, 0.65, 0.6);
+    const headLength = headEased <= 0.75 ? (headEased / 0.75) * 360 : 360;
+    const tailOffset = tailEased <= 1 / 3 ? 0 : ((tailEased - 1 / 3) / (2 / 3)) * 360;
+    const arcLength = Math.max(0, headLength - tailOffset);
+    const containerDeg = containerEased * 360 + tailOffset;
+    return { containerDeg, arcLength };
+}
+// --- Animation constants ---
+const INDETERMINATE_DURATION = 1200;
+const TRANSITION_DURATION = 300;
+/**
+ * Lynx에서 SVG를 사용할 수 없어 CSS clip-path 기반 pie sector로 구현.
+ *
+ * **Known Issues:**
+ * - clip-path가 Lynx에서 animatable이 아니라 JS RAF로 매 프레임 SVG path 생성
+ * - Lynx main thread에서 모듈 레벨 Map 미지원으로 인스턴스 간 RAF 공유 불가
+ * - 다수 인스턴스 동시 렌더링 시 성능 저하 가능
+ *
+ * Lynx SVG + stroke-dasharray 지원 시 CSS-only 애니메이션으로 전환 예정.
+ */
+function Root(props) {
+    const size = props.size ?? "40";
+    const tone = props.tone ?? "neutral";
+    const numSize = Number(size);
+    const isDeterminate = props.minValue !== undefined && props.maxValue !== undefined && props.value !== undefined;
+    const range = (props.maxValue ?? 1) - (props.minValue ?? 0);
+    const progress = isDeterminate
+        ? range === 0
+            ? 0
+            : ((props.value ?? 0) - (props.minValue ?? 0)) / range
+        : 0;
+    const classes = progressCircle({ tone, size });
+    const ctx = useMemo(() => ({ tone, numSize, isDeterminate, progress, classes }), [tone, numSize, isDeterminate, progress, classes]);
+    return (<ProgressCircleContext.Provider value={ctx}>
+      <view className={clsx(classes.root, props.className)} style={{ width: `${numSize}px`, height: `${numSize}px` }}>
+        {props.children}
+      </view>
+    </ProgressCircleContext.Provider>);
+}
+function Track() {
+    return null;
+}
+function Range() {
+    const { numSize, isDeterminate, progress, classes } = useProgressCircleCtx();
+    if (!isDeterminate) {
+        return <IndeterminateRange numSize={numSize} classes={classes}/>;
+    }
+    return <DeterminateRange numSize={numSize} progress={progress} classes={classes}/>;
+}
+function DeterminateRange({ numSize, progress, classes, }) {
+    const rangeRef = useMainThreadRef(null);
+    const startCapRef = useMainThreadRef(null);
+    const endCapRef = useMainThreadRef(null);
+    const prevProgressRef = useMainThreadRef(progress);
+    const cancelRef = useMainThreadRef(0);
+    const { halfSize, ringCenterR, capSize } = computeRingGeometry(numSize);
+    const initialAngle = progress * 360;
+    const initialClipPath = bgPieClipPath(numSize, initialAngle);
+    const initialEndRad = (initialAngle * Math.PI) / 180;
+    function startAnimation(newProgress) {
+        "main thread";
+        if (cancelRef.current) {
+            cancelAnimationFrame(cancelRef.current);
+            cancelRef.current = 0;
+        }
+        const from = prevProgressRef.current ?? 0;
+        prevProgressRef.current = newProgress;
+        if (from === newProgress)
+            return;
+        const rangeEl = rangeRef.current;
+        const endCapEl = endCapRef.current;
+        let startTs = 0;
+        function applyProgress(p) {
+            const angleDeg = p * 360;
+            const cp = pieClipPath(numSize, angleDeg);
+            if (cp) {
+                rangeEl?.setStyleProperty("clip-path", cp);
+            }
+            else {
+                rangeEl?.setStyleProperty("clip-path", "none");
+            }
+            const rad = (angleDeg * Math.PI) / 180;
+            endCapEl?.setStyleProperties({
+                left: `${halfSize + ringCenterR * Math.sin(rad) - capSize / 2}px`,
+                top: `${halfSize - ringCenterR * Math.cos(rad) - capSize / 2}px`,
+            });
+        }
+        function step(ts) {
+            if (!startTs)
+                startTs = Number(ts);
+            const elapsed = ts - startTs;
+            if (elapsed >= TRANSITION_DURATION) {
+                applyProgress(newProgress);
+                cancelRef.current = 0;
+                return;
+            }
+            const t = elapsed / TRANSITION_DURATION;
+            const eased = cubicBezier(t, 0, 0, 0.15, 1);
+            applyProgress(from + (newProgress - from) * eased);
+            cancelRef.current = requestAnimationFrame(step);
+        }
+        applyProgress(from);
+        cancelRef.current = requestAnimationFrame(step);
+    }
+    function cancelAnimation() {
+        "main thread";
+        if (cancelRef.current) {
+            cancelAnimationFrame(cancelRef.current);
+            cancelRef.current = 0;
+        }
+    }
+    useEffect(() => {
+        runOnMainThread(startAnimation)(progress);
+        return () => {
+            runOnMainThread(cancelAnimation)();
+        };
+    }, [progress]);
+    return (<>
+      <view main-thread:ref={rangeRef} className={classes.range} style={{
+            position: "absolute",
+            width: `${numSize}px`,
+            height: `${numSize}px`,
+            borderRadius: "50%",
+            clipPath: initialClipPath,
+        }}/>
+      <view main-thread:ref={startCapRef} className={classes.cap} style={{
+            width: `${capSize}px`,
+            height: `${capSize}px`,
+            left: `${halfSize - capSize / 2}px`,
+            top: `${halfSize - ringCenterR - capSize / 2}px`,
+        }}/>
+      <view main-thread:ref={endCapRef} className={classes.cap} style={{
+            width: `${capSize}px`,
+            height: `${capSize}px`,
+            left: `${halfSize + ringCenterR * Math.sin(initialEndRad) - capSize / 2}px`,
+            top: `${halfSize - ringCenterR * Math.cos(initialEndRad) - capSize / 2}px`,
+        }}/>
+    </>);
+}
+function IndeterminateRange({ numSize, classes }) {
+    const containerRef = useMainThreadRef(null);
+    const rangeRef = useMainThreadRef(null);
+    const headCapRef = useMainThreadRef(null);
+    const tailCapRef = useMainThreadRef(null);
+    const rafIdRef = useMainThreadRef(0);
+    const { halfSize, ringCenterR, capSize } = computeRingGeometry(numSize);
+    function startLoop() {
+        "main thread";
+        const containerEl = containerRef.current;
+        const rangeEl = rangeRef.current;
+        const headCapEl = headCapRef.current;
+        let startTs = 0;
+        function tick(ts) {
+            if (!startTs)
+                startTs = Number(ts);
+            const elapsed = ts - startTs;
+            const t = (elapsed % INDETERMINATE_DURATION) / INDETERMINATE_DURATION;
+            const state = sampleIndeterminate(t);
+            containerEl?.setStyleProperty("transform", `rotate(${state.containerDeg}deg)`);
+            const clipPath = pieClipPath(numSize, state.arcLength);
+            if (clipPath) {
+                rangeEl?.setStyleProperty("clip-path", clipPath);
+            }
+            else {
+                rangeEl?.setStyleProperty("clip-path", "none");
+            }
+            const headRad = (state.arcLength * Math.PI) / 180;
+            headCapEl?.setStyleProperties({
+                left: `${halfSize + ringCenterR * Math.sin(headRad) - capSize / 2}px`,
+                top: `${halfSize - ringCenterR * Math.cos(headRad) - capSize / 2}px`,
+            });
+            rafIdRef.current = requestAnimationFrame(tick);
+        }
+        rafIdRef.current = requestAnimationFrame(tick);
+    }
+    function stopLoop() {
+        "main thread";
+        if (rafIdRef.current) {
+            cancelAnimationFrame(rafIdRef.current);
+            rafIdRef.current = 0;
+        }
+    }
+    useEffect(() => {
+        runOnMainThread(startLoop)();
+        return () => {
+            runOnMainThread(stopLoop)();
+        };
+    }, []);
+    const initialClipPath = 'path("M 0 0 Z")';
+    return (<view main-thread:ref={containerRef} style={{
+            position: "absolute",
+            width: `${numSize}px`,
+            height: `${numSize}px`,
+            transform: "rotate(0deg)",
+        }}>
+      <view main-thread:ref={rangeRef} className={classes.range} style={{
+            position: "absolute",
+            width: `${numSize}px`,
+            height: `${numSize}px`,
+            borderRadius: "50%",
+            clipPath: initialClipPath,
+        }}/>
+      <view main-thread:ref={tailCapRef} className={classes.cap} style={{
+            width: `${capSize}px`,
+            height: `${capSize}px`,
+            left: `${halfSize - capSize / 2}px`,
+            top: `${halfSize - ringCenterR - capSize / 2}px`,
+        }}/>
+      <view main-thread:ref={headCapRef} className={classes.cap} style={{
+            width: `${capSize}px`,
+            height: `${capSize}px`,
+            left: `${halfSize - capSize / 2}px`,
+            top: `${halfSize - ringCenterR - capSize / 2}px`,
+        }}/>
+    </view>);
+}
+export const ProgressCircle = {
+    Root,
+    Track,
+    Range,
+};

package/lib/components/ProgressCircle/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressCircle, type RootProps as ProgressCircleProps } from "./ProgressCircle";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ProgressCircle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressCircle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,SAAS,IAAI,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/components/ProgressCircle/index.js

@@ -0,0 +1 @@
+export { ProgressCircle } from "./ProgressCircle";

package/lib/components/ScrollView/ScrollView.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+import { type StyleProps } from "../../utils/styled";
+import type { ScrollViewProps as LynxScrollViewProps } from "@lynx-js/types";
+export interface ScrollViewProps extends StyleProps, Omit<LynxScrollViewProps, "style"> {
+    asChild?: boolean;
+    children?: ReactNode;
+}
+export declare const ScrollView: import("react").NamedExoticComponent<Omit<ScrollViewProps, "ref"> & import("react").RefAttributes<any>>;
+//# sourceMappingURL=ScrollView.d.ts.map

package/lib/components/ScrollView/ScrollView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollView/ScrollView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACpE,OAAO,KAAK,EAAE,eAAe,IAAI,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE7E,MAAM,WAAW,eAAgB,SAAQ,UAAU,EAAE,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA4BD,eAAO,MAAM,UAAU,yGAAuB,CAAC"}

package/lib/components/ScrollView/ScrollView.jsx

@@ -0,0 +1,17 @@
+import { forwardRef, memo } from "react";
+import { Slot } from "@seed-design/lynx-primitive";
+import { useStyleProps } from "../../utils/styled";
+const ScrollViewImpl = forwardRef((props, ref) => {
+    const { style, restProps } = useStyleProps(props);
+    const { asChild = false, className, children, ...nativeProps } = restProps;
+    if (asChild) {
+        return (<Slot {...(ref ? { ref } : {})} className={className} style={style} {...nativeProps}>
+        {children}
+      </Slot>);
+    }
+    return (<scroll-view {...(ref ? { ref } : {})} className={className} style={style} {...nativeProps}>
+      {children}
+    </scroll-view>);
+});
+ScrollViewImpl.displayName = "ScrollView";
+export const ScrollView = memo(ScrollViewImpl);

package/lib/components/ScrollView/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollView, type ScrollViewProps } from "./ScrollView";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ScrollView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollView/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC"}

package/lib/components/ScrollView/index.js

@@ -0,0 +1 @@
+export { ScrollView } from "./ScrollView";

package/lib/components/Stack/Stack.d.ts

@@ -0,0 +1,6 @@
+import { type FlexProps } from "../Flex/Flex";
+export type VStackProps = Omit<FlexProps, "flexDirection">;
+export type HStackProps = Omit<FlexProps, "flexDirection">;
+export declare const VStack: import("react").ForwardRefExoticComponent<VStackProps & import("react").RefAttributes<any>>;
+export declare const HStack: import("react").ForwardRefExoticComponent<HStackProps & import("react").RefAttributes<any>>;
+//# sourceMappingURL=Stack.d.ts.map

package/lib/components/Stack/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAE3D,eAAO,MAAM,MAAM,6FAEjB,CAAC;AAIH,eAAO,MAAM,MAAM,6FAEjB,CAAC"}