@seed-design/lynx-react 0.1.1-alpha.0 → 0.2.0-alpha.2

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

@@ -1,24 +1,55 @@
 import type { ActionButtonVariantProps } from "@seed-design/lynx-css/recipes/action-button";
+import type { MainThread } from "@lynx-js/types";
 import * as React from "react";
+import { type ReactElement } from "react";
+type IconElementProps = {
+    className?: string;
+    style?: React.CSSProperties;
+    ref?: React.Ref<MainThread.Element>;
+};
 /**
  * @platform Lynx
  *
- * 미지원 기능 (Lynx 3.7 SVG 지원 후 추가 예정):
- * - loading: SVG 기반 spinner 필요
- * - layout: "iconOnly": SVG 아이콘 렌더링 필요
- * - PrefixIcon / SuffixIcon: SVG 아이콘 렌더링 필요
+ * 웹 대비 차이:
+ * - 아이콘 전달 방식: 웹의 `<ActionButton.PrefixIcon svg={...} />` 가 아니라 `prefixIcon` /
+ *   `suffixIcon` / `icon` prop 으로 ReactElement 를 직접 넘긴다. Lynx `<text>` 가 flex
+ *   컨테이너가 아니라 children 전체를 text 로 감싸면 아이콘이 flex item 이 안 되기 때문.
+ * - 미지원 prop: `color`, `fontWeight`, `bleedX`, `bleedY` (CSS variable 동적 주입 제한)
+ *
+ * ```tsx
+ * import IconPlusFill from "@karrotmarket/lynx-monochrome-icon/IconPlusFill";
+ * import IconChevronDownFill from "@karrotmarket/lynx-monochrome-icon/IconChevronDownFill";
+ *
+ * // withText (기본)
+ * <ActionButton
+ *   variant="brandSolid"
+ *   prefixIcon={<IconPlusFill />}
+ *   suffixIcon={<IconChevronDownFill />}
+ * >
+ *   라벨
+ * </ActionButton>
  *
- * 웹 대비 미지원 기능:
- * - color / fontWeight props: CSS variable 동적 주입 제한
- * - bleedX / bleedY props: CSS variable 동적 주입 제한
+ * // iconOnly — `icon` prop 과 `aria-label` 필수
+ * <ActionButton
+ *   layout="iconOnly"
+ *   variant="neutralSolid"
+ *   icon={<IconPlusFill />}
+ *   aria-label="추가"
+ * />
+ * ```
  */
-export interface ActionButtonProps extends Omit<ActionButtonVariantProps, "loading" | "layout"> {
+export interface ActionButtonProps extends Omit<ActionButtonVariantProps, "layout" | "pressed"> {
     children?: React.ReactNode;
-    disabled?: boolean;
     className?: string;
     flexGrow?: number;
+    layout?: "withText" | "iconOnly";
+    icon?: ReactElement<IconElementProps>;
+    prefixIcon?: ReactElement<IconElementProps>;
+    suffixIcon?: ReactElement<IconElementProps>;
+    "aria-label"?: string;
     bindtap?: () => void;
     "main-thread:bindtap"?: () => void;
 }
 export declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<unknown>>;
+export {};
 //# sourceMappingURL=ActionButton.d.ts.map

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

@@ -1 +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"}
+{"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,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAyC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAsBjF,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;CACrC,CAAC;AAuLF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,wBAAwB,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC7F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACjC,IAAI,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5C,UAAU,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,mFA4DvB,CAAC"}

package/lib/components/ActionButton/ActionButton.jsx

@@ -1,21 +1,139 @@
 import { actionButton } from "@seed-design/lynx-css/recipes/action-button";
+import { actionButton as actionButtonVars } from "@seed-design/lynx-css/vars/component";
 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,
+import { cloneElement, isValidElement, useMemo } from "react";
+import { useIconColor } from "../../hooks/use-icon-color";
+import { usePressTap } from "../../hooks/use-press-tap";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token";
+import { ProgressCircleRange, ProgressCircleRoot, } from "../ProgressCircle";
+// Root/TextSlot 은 `withProvider("view", ...)` / `withContext("text", ...)` 를 쓰지 않는다.
+// intrinsic string 인자는 `React.createElement("view", ...)` 로 컴파일되어 Lynx 컴파일러의
+// 리터럴 JSX 정적 분석을 우회하고 `BackgroundSnapshot not found: view` 런타임 에러를 유발한다.
+// (자세한 내용: `packages/lynx-react/AGENTS.md` 의 "Native tag literal JSX constraint" 섹션)
+const { ClassNamesProvider, useClassNames, PropsProvider, useProps } = createSlotRecipeContext(actionButton);
+const progressCircleSizeMap = {
+    xsmall: "14",
+    small: "14",
+    medium: "16",
+    large: "18",
+};
+const ActionButtonRoot = React.forwardRef((innerProps, ref) => {
+    const props = { layout: "withText", ...innerProps };
+    const [variantProps, otherProps] = actionButton.splitVariantProps(props);
+    const classNames = actionButton(variantProps);
+    const { className: userClassName, children, ...rest } = otherProps;
+    const propsForContext = useMemo(() => variantProps, [
+        variantProps.variant,
+        variantProps.size,
+        variantProps.layout,
+        variantProps.pressed,
+        variantProps.disabled,
+        variantProps.loading,
+    ]);
+    return (<ClassNamesProvider value={classNames}>
+      <PropsProvider value={propsForContext}>
+        <view {...(ref ? { ref: ref } : {})} {...rest} className={clsx(classNames.root, userClassName)}>
+          {children}
+        </view>
+      </PropsProvider>
+    </ClassNamesProvider>);
+});
+ActionButtonRoot.displayName = "ActionButtonRoot";
+const ActionButtonTextSlot = React.forwardRef((props, ref) => {
+    const { children, className: userClassName, ...rest } = props;
+    const classNames = useClassNames();
+    return (<text {...(ref ? { ref: ref } : {})} {...rest} className={clsx(classNames.text, userClassName)}>
+      {children}
+    </text>);
+});
+ActionButtonTextSlot.displayName = "ActionButtonTextSlot";
+/**
+ * rootage vars 에서 현재 variant/size/layout 조합의 slot `size` 토큰
+ * (예: `"var(--seed-dimension-x4)"`) 을 꺼낸다. 아이콘 컴포넌트가 inline
+ * `style={{ width, height }}` 를 박기 때문에 style prop 으로 덮어 씌워야 recipe 사이즈가 적용된다.
+ */
+function resolveIconSize(variantProps, slot) {
+    const size = variantProps?.size ?? "medium";
+    // `icon` slot is only rendered under `layout="iconOnly"` and keyed at
+    // `sizeXxxLayoutIconOnly.enabled.icon.size`. prefixIcon/suffixIcon follow
+    // the current `layout` (`withText` by default) path.
+    const layout = slot === "icon" ? "iconOnly" : (variantProps?.layout ?? "withText");
+    return resolveRecipeToken(actionButtonVars, [
+        `size${capitalize(size)}Layout${capitalize(layout)}`,
+        "enabled",
+        slot,
+        "size",
+    ]);
+}
+/**
+ * `prefixIcon` / `suffixIcon` prop 으로 전달된 아이콘 element 에 slot className +
+ * size(style) + main-thread tint-color ref 를 주입한다.
+ */
+function ActionButtonIconSlot({ icon, slot, }) {
+    const classNames = useClassNames();
+    const variantProps = useProps();
+    const { ref } = useIconColor([
+        variantProps?.variant ?? null,
+        variantProps?.disabled ?? false,
+        variantProps?.loading ?? false,
+    ]);
+    const sizeVar = resolveIconSize(variantProps, slot);
+    const childProps = icon.props;
+    return cloneElement(icon, {
+        className: clsx(classNames[slot], childProps.className),
+        style: sizeVar != null ? { width: sizeVar, height: sizeVar, ...childProps.style } : childProps.style,
+        ref: ref,
     });
-    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>
+}
+function ActionButtonContent({ children, isIconOnly, icon, prefixIcon, suffixIcon, }) {
+    if (isIconOnly) {
+        return icon != null && isValidElement(icon) ? (<ActionButtonIconSlot icon={icon} slot="icon"/>) : null;
+    }
+    return (<>
+      {prefixIcon != null && isValidElement(prefixIcon) ? (<ActionButtonIconSlot icon={prefixIcon} slot="prefixIcon"/>) : null}
+      <ActionButtonTextSlot>{children}</ActionButtonTextSlot>
+      {suffixIcon != null && isValidElement(suffixIcon) ? (<ActionButtonIconSlot icon={suffixIcon} slot="suffixIcon"/>) : null}
+    </>);
+}
+function ActionButtonLoadingContent(props) {
+    const classNames = useClassNames();
+    return (<view className={classNames.content}>
+      <ActionButtonContent {...props}/>
     </view>);
+}
+function ActionButtonLoadingIndicator({ size }) {
+    const classNames = useClassNames();
+    return (<view className={classNames.loadingIndicator}>
+      <ProgressCircleRoot size={progressCircleSizeMap[size]} tone="inherit">
+        <ProgressCircleRange />
+      </ProgressCircleRoot>
+    </view>);
+}
+export const ActionButton = React.forwardRef((props, ref) => {
+    const { children, flexGrow, layout, icon, prefixIcon, suffixIcon, bindtap, "main-thread:bindtap": mainThreadBindtap, ...variantAndRest } = props;
+    const { disabled = false, loading = false } = variantAndRest;
+    const isInteractive = !disabled && !loading;
+    const isIconOnly = layout === "iconOnly";
+    const size = variantAndRest.size ?? "medium";
+    if (process.env.NODE_ENV !== "production" && isIconOnly && !props["aria-label"]) {
+        console.warn('ActionButton: `layout="iconOnly"` requires `aria-label` for accessibility.');
+    }
+    const { pressed, ...pressTapHandlers } = usePressTap({
+        disabled: !isInteractive,
+        onTap: bindtap,
+        mainThreadOnTap: mainThreadBindtap,
+    });
+    return (<ActionButtonRoot {...variantAndRest} layout={layout} pressed={pressed} ref={ref} style={flexGrow != null ? { flexGrow } : undefined} {...pressTapHandlers}>
+      {loading ? (<>
+          <ActionButtonLoadingIndicator size={size}/>
+          <ActionButtonLoadingContent isIconOnly={isIconOnly} icon={icon} prefixIcon={prefixIcon} suffixIcon={suffixIcon}>
+            {children}
+          </ActionButtonLoadingContent>
+        </>) : (<ActionButtonContent isIconOnly={isIconOnly} icon={icon} prefixIcon={prefixIcon} suffixIcon={suffixIcon}>
+          {children}
+        </ActionButtonContent>)}
+    </ActionButtonRoot>);
 });
 ActionButton.displayName = "ActionButton";

package/lib/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,92 @@
+import { type BottomSheetVariantProps } from "@seed-design/lynx-css/recipes/bottom-sheet";
+import { type SheetBackdropProps, type SheetContentProps, type SheetHandleProps, type SheetRootProps, type SheetRootRef, type SheetViewProps } from "@lynx-js/lynx-ui-sheet";
+import { type ReactNode } from "@lynx-js/react";
+import type { CSSProperties } from "react";
+export type BottomSheetRootRef = SheetRootRef;
+export interface BottomSheetRootProps extends BottomSheetVariantProps, Omit<SheetRootProps, "show" | "defaultShow" | "onShowChange"> {
+    /**
+     * Whether the sheet is open (controlled mode).
+     * Internally mapped to `show` of `@lynx-js/lynx-ui-sheet`.
+     */
+    open?: boolean;
+    /**
+     * Whether the sheet is open by default (uncontrolled mode).
+     * Internally mapped to `defaultShow`.
+     * @defaultValue false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Called when the sheet's open state is about to change.
+     * Internally mapped to `onShowChange`.
+     */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * @platform Lynx — wraps `@lynx-js/lynx-ui-sheet`
+ *
+ * 웹 대비 미지원 기능:
+ * - `lazyMount`, `unmountOnExit`: lynx-ui-sheet의 `forceMount`로 대체
+ * - `BottomSheetPositioner`: lynx-ui-sheet의 `SheetView`가 자동 처리하므로 별도 슬롯 없음
+ * - `BottomSheetCloseButton`: Tier B (Lynx SVG 지원 후 추가 예정)
+ * - `BottomSheetTrigger`의 `asChild`: 미지원 (기본 `<view>`만)
+ */
+export declare const BottomSheetRoot: import("react").ForwardRefExoticComponent<BottomSheetRootProps & import("react").RefAttributes<SheetRootRef>>;
+export interface BottomSheetTriggerProps {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    bindtap?: () => void;
+}
+export declare const BottomSheetTrigger: import("react").ForwardRefExoticComponent<BottomSheetTriggerProps & import("react").RefAttributes<unknown>>;
+export interface BottomSheetPositionerProps extends SheetViewProps {
+}
+/**
+ * Backdrop/Content는 반드시 `BottomSheetPositioner` 안에 배치해야 한다.
+ *
+ * `SheetView`는 `mounted || forceMount` 조건으로 자식을 gating하므로 시트가 처음
+ * 열리기 전까지는 SheetBackdrop/SheetContent가 마운트되지 않아 motion value
+ * 초기화 레이스를 피할 수 있다. Trigger는 이 컴포넌트 밖에 두어야 탭 가능하다.
+ *
+ * recipe의 `positioner` slot className을 자동 적용해 `position: fixed` + 전체
+ * 뷰포트 커버 레이아웃을 보장한다.
+ */
+export declare const BottomSheetPositioner: import("react").ForwardRefExoticComponent<BottomSheetPositionerProps & import("react").RefAttributes<unknown>>;
+export interface BottomSheetBackdropProps extends SheetBackdropProps {
+}
+export declare const BottomSheetBackdrop: import("react").ForwardRefExoticComponent<BottomSheetBackdropProps & import("react").RefAttributes<unknown>>;
+export interface BottomSheetContentProps extends SheetContentProps {
+}
+export declare const BottomSheetContent: import("react").ForwardRefExoticComponent<BottomSheetContentProps & import("react").RefAttributes<unknown>>;
+export interface BottomSheetHandleProps extends SheetHandleProps {
+}
+/**
+ * @remarks
+ * `SheetHandle`은 forwardRef가 아니므로 ref 시그니처는 제공하지 않는다. touchArea 슬롯은
+ * `SheetHandle` JSX가 정적으로 children을 받지 않는 구조라 적용하지 않는다 (Lynx
+ * BackgroundSnapshot이 정적 slot 외의 동적 children 삽입을 허용하지 않음).
+ */
+export declare function BottomSheetHandle(props: BottomSheetHandleProps): import("react").JSX.Element;
+export declare namespace BottomSheetHandle {
+    var displayName: string;
+}
+export interface BottomSheetSlotProps {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface BottomSheetHeaderProps extends BottomSheetSlotProps {
+}
+export declare const BottomSheetHeader: import("react").ForwardRefExoticComponent<BottomSheetSlotProps & import("react").RefAttributes<unknown>>;
+export interface BottomSheetBodyProps extends BottomSheetSlotProps {
+}
+export declare const BottomSheetBody: import("react").ForwardRefExoticComponent<BottomSheetSlotProps & import("react").RefAttributes<unknown>>;
+export interface BottomSheetFooterProps extends BottomSheetSlotProps {
+}
+export declare const BottomSheetFooter: import("react").ForwardRefExoticComponent<BottomSheetSlotProps & import("react").RefAttributes<unknown>>;
+export interface BottomSheetTitleProps extends BottomSheetSlotProps {
+}
+export declare const BottomSheetTitle: import("react").ForwardRefExoticComponent<BottomSheetSlotProps & import("react").RefAttributes<unknown>>;
+export interface BottomSheetDescriptionProps extends BottomSheetSlotProps {
+}
+export declare const BottomSheetDescription: import("react").ForwardRefExoticComponent<BottomSheetSlotProps & import("react").RefAttributes<unknown>>;
+//# sourceMappingURL=BottomSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACnB,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAOL,KAAK,SAAS,EAGf,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAwE3C,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC;AAE9C,MAAM,WAAW,oBACf,SAAQ,uBAAuB,EAC7B,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,aAAa,GAAG,cAAc,CAAC;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,+GAuD3B,CAAC;AAOF,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,6GA4B7B,CAAC;AAOH,MAAM,WAAW,0BAA2B,SAAQ,cAAc;CAAG;AAErE;;;;;;;;;GASG;AACH,eAAO,MAAM,qBAAqB,gHAGjC,CAAC;AAYF,MAAM,WAAW,wBAAyB,SAAQ,kBAAkB;CAAG;AAEvE,eAAO,MAAM,mBAAmB,8GAG/B,CAAC;AAGF,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;CAAG;AAErE,eAAO,MAAM,kBAAkB,6GAiB7B,CAAC;AAOH,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;CAAG;AAEnE;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,+BAK9D;yBALe,iBAAiB;;;AAkBjC,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAsCD,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,0GAA2B,CAAC;AAG1D,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;CAAG;AACrE,eAAO,MAAM,eAAe,0GAAyB,CAAC;AAGtD,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;CAAG;AACvE,eAAO,MAAM,iBAAiB,0GAA2B,CAAC;AAG1D,MAAM,WAAW,qBAAsB,SAAQ,oBAAoB;CAAG;AACtE,eAAO,MAAM,gBAAgB,0GAA0B,CAAC;AAGxD,MAAM,WAAW,2BAA4B,SAAQ,oBAAoB;CAAG;AAC5E,eAAO,MAAM,sBAAsB,0GAAgC,CAAC"}

package/lib/components/BottomSheet/BottomSheet.jsx

@@ -0,0 +1,178 @@
+import { bottomSheet, } from "@seed-design/lynx-css/recipes/bottom-sheet";
+import { bottomSheetHandle } from "@seed-design/lynx-css/recipes/bottom-sheet-handle";
+import { SheetBackdrop, SheetContent, SheetHandle, SheetRoot, SheetView, } from "@lynx-js/lynx-ui-sheet";
+import { createContext, forwardRef, useCallback, useContext, useMemo, useRef, } from "@lynx-js/react";
+import clsx from "clsx";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context";
+const { ClassNamesProvider, useClassNames, withContext } = createSlotRecipeContext(bottomSheet);
+const DEFAULT_SNAP_POINTS = ["fit"];
+const SKIP_ANIMATION_TRANSITION = {
+    type: "tween",
+    duration: 0,
+};
+////////////////////////////////////////////////////////////////////////////////////
+// SEED Transitions — 웹 SEED BottomSheet (recipe: d6/d4 + enter-expressive/enter/exit)
+// 의 감각을 lynx-ui-sheet의 spring으로 근사한 기본값.
+//
+// spring을 사용하는 이유:
+// - lynx-ui-sheet 내장 main-thread 구현이라 stiffness/damping/mass만 JSON 직렬화로
+//   안전 전달 (ease 함수 크로스스레드 문제 없음)
+// - lynx-ui 공식 예제도 spring 기본 — 런타임 안정성 검증됨
+//
+// 튜닝 기준 (300ms 수준의 빠르고 약간의 탄성감):
+// - 웹 d6 + enter-expressive ≈ stiffness 400, damping 35 (snap 드래그 settle)
+// - 웹 d6 + enter              ≈ stiffness 350, damping 32 (첫 open)
+// - 웹 d4 + exit               ≈ stiffness 400, damping 40 (close, critically damped)
+////////////////////////////////////////////////////////////////////////////////////
+const SEED_SNAP_ANIMATION = {
+    type: "spring",
+    stiffness: 400,
+    damping: 35,
+};
+const SEED_ENTER_ANIMATION = {
+    type: "spring",
+    stiffness: 350,
+    damping: 32,
+};
+const SEED_EXIT_ANIMATION = {
+    type: "spring",
+    stiffness: 400,
+    damping: 40,
+};
+const BottomSheetContext = createContext(null);
+function useBottomSheetContext() {
+    const ctx = useContext(BottomSheetContext);
+    if (!ctx) {
+        throw new Error("BottomSheet compound components must be used within BottomSheetRoot");
+    }
+    return ctx;
+}
+/**
+ * @platform Lynx — wraps `@lynx-js/lynx-ui-sheet`
+ *
+ * 웹 대비 미지원 기능:
+ * - `lazyMount`, `unmountOnExit`: lynx-ui-sheet의 `forceMount`로 대체
+ * - `BottomSheetPositioner`: lynx-ui-sheet의 `SheetView`가 자동 처리하므로 별도 슬롯 없음
+ * - `BottomSheetCloseButton`: Tier B (Lynx SVG 지원 후 추가 예정)
+ * - `BottomSheetTrigger`의 `asChild`: 미지원 (기본 `<view>`만)
+ */
+export const BottomSheetRoot = forwardRef((props, forwardedRef) => {
+    const [variantProps, restProps] = bottomSheet.splitVariantProps(props);
+    const { open, defaultOpen, onOpenChange, snapPoints, children, ...nativeProps } = restProps;
+    const { headerAlign, skipAnimation } = variantProps;
+    const internalRef = useRef(null);
+    // `SheetRoot`에 직접 ref를 넘겨 Trigger 컨텍스트와 외부 ref에 같은 인스턴스를 동기화한다.
+    // `useImperativeHandle([])`은 마운트 시점 값(null)을 고정시키는 함정이 있어 사용하지 않는다.
+    const mergedRef = useCallback((value) => {
+        internalRef.current = value;
+        if (typeof forwardedRef === "function") {
+            forwardedRef(value);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = value;
+        }
+    }, [forwardedRef]);
+    const classNames = useMemo(() => bottomSheet(variantProps), 
+    // variantProps 객체는 매 렌더 새로 생성되므로 개별 variant 값으로 의존성을 고정한다.
+    [headerAlign, skipAnimation]);
+    const shouldSkipAnimation = skipAnimation === true;
+    const context = useMemo(() => ({
+        rootRef: internalRef,
+        options: {
+            skipAnimation: shouldSkipAnimation,
+        },
+    }), [shouldSkipAnimation]);
+    return (<BottomSheetContext.Provider value={context}>
+        <ClassNamesProvider value={classNames}>
+          <SheetRoot ref={mergedRef} show={open} defaultShow={defaultOpen} onShowChange={onOpenChange} snapPoints={snapPoints ?? DEFAULT_SNAP_POINTS} {...nativeProps}>
+            {children}
+          </SheetRoot>
+        </ClassNamesProvider>
+      </BottomSheetContext.Provider>);
+});
+BottomSheetRoot.displayName = "BottomSheetRoot";
+export const BottomSheetTrigger = forwardRef((props, ref) => {
+    const { children, className, style, bindtap: userBindtap } = props;
+    const { rootRef, options } = useBottomSheetContext();
+    // `bindtap`을 직접 prop으로 쓰면 React DOM `<view>` 타입(SVG)이 적용되어 TS가 거부한다.
+    // Lynx JSX 런타임은 이 prop을 올바르게 처리하므로 spread로 우회한다 (ActionButton과 동일 패턴).
+    const handlers = {
+        bindtap: () => {
+            if (options.skipAnimation) {
+                rootRef.current?.open({ animate: false });
+            }
+            else {
+                rootRef.current?.open();
+            }
+            userBindtap?.();
+        },
+    };
+    return (<view {...(ref ? { ref: ref } : {})} {...handlers} className={className} style={style}>
+      {children}
+    </view>);
+});
+BottomSheetTrigger.displayName = "BottomSheetTrigger";
+/**
+ * Backdrop/Content는 반드시 `BottomSheetPositioner` 안에 배치해야 한다.
+ *
+ * `SheetView`는 `mounted || forceMount` 조건으로 자식을 gating하므로 시트가 처음
+ * 열리기 전까지는 SheetBackdrop/SheetContent가 마운트되지 않아 motion value
+ * 초기화 레이스를 피할 수 있다. Trigger는 이 컴포넌트 밖에 두어야 탭 가능하다.
+ *
+ * recipe의 `positioner` slot className을 자동 적용해 `position: fixed` + 전체
+ * 뷰포트 커버 레이아웃을 보장한다.
+ */
+export const BottomSheetPositioner = withContext(SheetView, "positioner");
+BottomSheetPositioner.displayName = "BottomSheetPositioner";
+export const BottomSheetBackdrop = withContext(SheetBackdrop, "backdrop");
+BottomSheetBackdrop.displayName = "BottomSheetBackdrop";
+export const BottomSheetContent = forwardRef((props, ref) => {
+    const { className, snapAnimation, enterAnimation, exitAnimation, ...restProps } = props;
+    const classNames = useClassNames();
+    const { options } = useBottomSheetContext();
+    const defaultAnimation = options.skipAnimation ? SKIP_ANIMATION_TRANSITION : undefined;
+    return (<SheetContent {...(ref ? { ref } : {})} {...restProps} className={clsx(classNames.content, className)} snapAnimation={snapAnimation ?? defaultAnimation ?? SEED_SNAP_ANIMATION} enterAnimation={enterAnimation ?? defaultAnimation ?? SEED_ENTER_ANIMATION} exitAnimation={exitAnimation ?? defaultAnimation ?? SEED_EXIT_ANIMATION}/>);
+});
+BottomSheetContent.displayName = "BottomSheetContent";
+/**
+ * @remarks
+ * `SheetHandle`은 forwardRef가 아니므로 ref 시그니처는 제공하지 않는다. touchArea 슬롯은
+ * `SheetHandle` JSX가 정적으로 children을 받지 않는 구조라 적용하지 않는다 (Lynx
+ * BackgroundSnapshot이 정적 slot 외의 동적 children 삽입을 허용하지 않음).
+ */
+export function BottomSheetHandle(props) {
+    const { className, style, ...rest } = props;
+    const classNames = bottomSheetHandle();
+    return <SheetHandle className={clsx(classNames.root, className)} style={style} {...rest}/>;
+}
+BottomSheetHandle.displayName = "BottomSheetHandle";
+function createViewSlot(slotName) {
+    const Slot = forwardRef((props, ref) => {
+        const { children, className, style } = props;
+        const classNames = useClassNames();
+        return (<view {...(ref ? { ref: ref } : {})} className={clsx(classNames[slotName], className)} style={style}>
+        {children}
+      </view>);
+    });
+    return Slot;
+}
+function createTextSlot(slotName) {
+    const Slot = forwardRef((props, ref) => {
+        const { children, className, style } = props;
+        const classNames = useClassNames();
+        return (<text {...(ref ? { ref: ref } : {})} className={clsx(classNames[slotName], className)} style={style}>
+        {children}
+      </text>);
+    });
+    return Slot;
+}
+export const BottomSheetHeader = createViewSlot("header");
+BottomSheetHeader.displayName = "BottomSheetHeader";
+export const BottomSheetBody = createViewSlot("body");
+BottomSheetBody.displayName = "BottomSheetBody";
+export const BottomSheetFooter = createViewSlot("footer");
+BottomSheetFooter.displayName = "BottomSheetFooter";
+export const BottomSheetTitle = createTextSlot("title");
+BottomSheetTitle.displayName = "BottomSheetTitle";
+export const BottomSheetDescription = createTextSlot("description");
+BottomSheetDescription.displayName = "BottomSheetDescription";

package/lib/components/BottomSheet/BottomSheet.namespace.d.ts

@@ -0,0 +1,2 @@
+export { BottomSheetBackdrop as Backdrop, BottomSheetBody as Body, BottomSheetContent as Content, BottomSheetDescription as Description, BottomSheetFooter as Footer, BottomSheetHandle as Handle, BottomSheetHeader as Header, BottomSheetPositioner as Positioner, BottomSheetRoot as Root, BottomSheetTitle as Title, BottomSheetTrigger as Trigger, type BottomSheetBackdropProps as BackdropProps, type BottomSheetBodyProps as BodyProps, type BottomSheetContentProps as ContentProps, type BottomSheetDescriptionProps as DescriptionProps, type BottomSheetFooterProps as FooterProps, type BottomSheetHandleProps as HandleProps, type BottomSheetHeaderProps as HeaderProps, type BottomSheetPositionerProps as PositionerProps, type BottomSheetRootProps as RootProps, type BottomSheetTitleProps as TitleProps, type BottomSheetTriggerProps as TriggerProps, } from "./BottomSheet";
+//# sourceMappingURL=BottomSheet.namespace.d.ts.map

package/lib/components/BottomSheet/BottomSheet.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/BottomSheet.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,IAAI,QAAQ,EAC/B,eAAe,IAAI,IAAI,EACvB,kBAAkB,IAAI,OAAO,EAC7B,sBAAsB,IAAI,WAAW,EACrC,iBAAiB,IAAI,MAAM,EAC3B,iBAAiB,IAAI,MAAM,EAC3B,iBAAiB,IAAI,MAAM,EAC3B,qBAAqB,IAAI,UAAU,EACnC,eAAe,IAAI,IAAI,EACvB,gBAAgB,IAAI,KAAK,EACzB,kBAAkB,IAAI,OAAO,EAC7B,KAAK,wBAAwB,IAAI,aAAa,EAC9C,KAAK,oBAAoB,IAAI,SAAS,EACtC,KAAK,uBAAuB,IAAI,YAAY,EAC5C,KAAK,2BAA2B,IAAI,gBAAgB,EACpD,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,sBAAsB,IAAI,WAAW,EAC1C,KAAK,0BAA0B,IAAI,eAAe,EAClD,KAAK,oBAAoB,IAAI,SAAS,EACtC,KAAK,qBAAqB,IAAI,UAAU,EACxC,KAAK,uBAAuB,IAAI,YAAY,GAC7C,MAAM,eAAe,CAAC"}

package/lib/components/BottomSheet/BottomSheet.namespace.js

@@ -0,0 +1 @@
+export { BottomSheetBackdrop as Backdrop, BottomSheetBody as Body, BottomSheetContent as Content, BottomSheetDescription as Description, BottomSheetFooter as Footer, BottomSheetHandle as Handle, BottomSheetHeader as Header, BottomSheetPositioner as Positioner, BottomSheetRoot as Root, BottomSheetTitle as Title, BottomSheetTrigger as Trigger, } from "./BottomSheet";

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

@@ -0,0 +1,3 @@
+export { BottomSheetBackdrop, type BottomSheetBackdropProps, BottomSheetBody, type BottomSheetBodyProps, BottomSheetContent, type BottomSheetContentProps, BottomSheetDescription, type BottomSheetDescriptionProps, BottomSheetFooter, type BottomSheetFooterProps, BottomSheetHandle, type BottomSheetHandleProps, BottomSheetHeader, type BottomSheetHeaderProps, BottomSheetPositioner, type BottomSheetPositionerProps, BottomSheetRoot, type BottomSheetRootProps, type BottomSheetRootRef, BottomSheetTitle, type BottomSheetTitleProps, BottomSheetTrigger, type BottomSheetTriggerProps, } from "./BottomSheet";
+export * as BottomSheet from "./BottomSheet.namespace";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,eAAe,EACf,KAAK,oBAAoB,EACzB,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,sBAAsB,EACtB,KAAK,2BAA2B,EAChC,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,iBAAiB,EACjB,KAAK,sBAAsB,EAC3B,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,EACvB,gBAAgB,EAChB,KAAK,qBAAqB,EAC1B,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,WAAW,MAAM,yBAAyB,CAAC"}

package/lib/components/BottomSheet/index.js

@@ -0,0 +1,2 @@
+export { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, } from "./BottomSheet";
+export * as BottomSheet from "./BottomSheet.namespace";

package/lib/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { type CSSProperties, type ReactElement } from "react";
+import type { MainThread } from "@lynx-js/types";
+import type { CheckboxVariantProps } from "@seed-design/lynx-css/recipes/checkbox";
+import type { CheckmarkVariantProps } from "@seed-design/lynx-css/recipes/checkmark";
+export interface CheckboxRootProps extends CheckboxVariantProps, Omit<CheckmarkVariantProps, "size" | "checked" | "disabled" | "indeterminate"> {
+    children?: React.ReactNode;
+    className?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare const CheckboxRoot: React.ForwardRefExoticComponent<CheckboxRootProps & React.RefAttributes<unknown>>;
+export interface CheckboxControlProps extends Pick<CheckmarkVariantProps, "tone" | "variant" | "size"> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const CheckboxControl: React.ForwardRefExoticComponent<CheckboxControlProps & React.RefAttributes<unknown>>;
+type IconElementProps = {
+    className?: string;
+    style?: CSSProperties;
+    ref?: React.Ref<MainThread.Element>;
+};
+export interface CheckboxIndicatorProps {
+    /** Icon rendered when neither checked nor indeterminate. Optional. */
+    unchecked?: ReactElement<IconElementProps>;
+    /** Icon rendered when `checked=true` and `indeterminate=false`. */
+    checked: ReactElement<IconElementProps>;
+    /** Icon rendered when `indeterminate=true`. */
+    indeterminate?: ReactElement<IconElementProps>;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function CheckboxIndicator(props: CheckboxIndicatorProps): React.ReactElement<IconElementProps, string | React.JSXElementConstructor<any>> | null;
+export declare namespace CheckboxIndicator {
+    var displayName: string;
+}
+export interface CheckboxLabelProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const CheckboxLabel: React.ForwardRefExoticComponent<CheckboxLabelProps & React.RefAttributes<unknown>>;
+export interface CheckboxGroupProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=Checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAgC,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAEnF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AA8DrF,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,CAAC;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,YAAY,mFAgDvB,CAAC;AAKH,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,sFAiC1B,CAAC;AAKH,KAAK,gBAAgB,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,sEAAsE;IACtE,SAAS,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC3C,mEAAmE;IACnE,OAAO,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACxC,+CAA+C;IAC/C,aAAa,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,0FA8C9D;yBA9Ce,iBAAiB;;;AAmDjC,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,oFAcxB,CAAC;AAKH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,oFAaxB,CAAC"}