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

package/lib/components/Checkbox/Checkbox.jsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { cloneElement, isValidElement } from "react";
+import clsx from "clsx";
+import { checkbox } from "@seed-design/lynx-css/recipes/checkbox";
+import { checkmark } from "@seed-design/lynx-css/recipes/checkmark";
+import { checkboxGroup } from "@seed-design/lynx-css/recipes/checkbox-group";
+import { vars as checkmarkVars } from "@seed-design/lynx-css/vars/component/checkmark";
+import { useControllableState } from "../../hooks/useControllableState";
+import { useIconColor } from "../../hooks/useIconColor";
+import { usePressTap } from "../../hooks/usePressTap";
+import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token";
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
+const CheckboxContext = React.createContext(null);
+function useCheckboxContext(consumer) {
+    const ctx = React.useContext(CheckboxContext);
+    if (!ctx) {
+        throw new Error(`<${consumer}/> must be rendered inside <CheckboxRoot/>.`);
+    }
+    return ctx;
+}
+const CheckmarkIconClassContext = React.createContext(null);
+function useCheckmarkIconClass(consumer) {
+    const ctx = React.useContext(CheckmarkIconClassContext);
+    if (!ctx) {
+        throw new Error(`<${consumer}/> must be rendered inside <CheckboxControl/>.`);
+    }
+    return ctx;
+}
+export const CheckboxRoot = React.forwardRef((props, ref) => {
+    const { children, className, checked: checkedProp, defaultChecked = false, indeterminate = false, disabled = false, onCheckedChange, ...restProps } = props;
+    const [{ checkbox: checkboxVariantProps, checkmark: checkmarkVariantProps }, nativeProps] = splitMultipleVariantsProps(restProps, { checkbox, checkmark });
+    const weight = checkboxVariantProps.weight ?? "regular";
+    const size = checkboxVariantProps.size ?? "medium";
+    const tone = checkmarkVariantProps.tone ?? "brand";
+    const variant = checkmarkVariantProps.variant ?? "square";
+    const [checked, setChecked] = useControllableState({
+        value: checkedProp,
+        defaultValue: defaultChecked,
+        onChange: onCheckedChange,
+    });
+    const { pressed, ...pressHandlers } = usePressTap({
+        disabled,
+        onTap: () => setChecked(!checked),
+    });
+    const rootClassName = checkbox({ weight, size, disabled }).root;
+    const ctx = React.useMemo(() => ({ checked, indeterminate, disabled, pressed, size, weight, tone, variant }), [checked, indeterminate, disabled, pressed, size, weight, tone, variant]);
+    return (<CheckboxContext.Provider value={ctx}>
+      <view {...(ref ? { ref: ref } : {})} className={clsx(rootClassName, className)} {...pressHandlers} {...nativeProps}>
+        {children}
+      </view>
+    </CheckboxContext.Provider>);
+});
+CheckboxRoot.displayName = "CheckboxRoot";
+export const CheckboxControl = React.forwardRef((props, ref) => {
+    const [variantProps, restProps] = checkmark.splitVariantProps(props);
+    const { children, className, ...nativeProps } = restProps;
+    const { checked, indeterminate, disabled, pressed, tone: ctxTone, variant: ctxVariant, size: ctxSize, } = useCheckboxContext("CheckboxControl");
+    const tone = variantProps.tone ?? ctxTone;
+    const variant = variantProps.variant ?? ctxVariant;
+    const size = variantProps.size ?? ctxSize;
+    const classes = React.useMemo(() => checkmark({ variant, tone, size, checked, disabled, indeterminate, pressed }), [variant, tone, size, checked, disabled, indeterminate, pressed]);
+    return (<CheckmarkIconClassContext.Provider value={classes.icon}>
+      <view {...(ref ? { ref: ref } : {})} className={clsx(classes.root, className)} {...nativeProps}>
+        {children}
+      </view>
+    </CheckmarkIconClassContext.Provider>);
+});
+CheckboxControl.displayName = "CheckboxControl";
+export function CheckboxIndicator(props) {
+    const { unchecked, checked: checkedIcon, indeterminate: indeterminateIcon, className, style, } = props;
+    const { checked, indeterminate, disabled, pressed, tone, variant, size } = useCheckboxContext("CheckboxIndicator");
+    const iconClassName = useCheckmarkIconClass("CheckboxIndicator");
+    const iconColor = useIconColor([
+        checked,
+        indeterminate,
+        disabled,
+        pressed,
+        tone,
+        variant,
+        size,
+    ]);
+    if (process.env.NODE_ENV !== "production" && indeterminate && !indeterminateIcon) {
+        console.warn("[seed-design] CheckboxIndicator: `indeterminate` prop must be provided when the checkbox is in an indeterminate state.");
+    }
+    const icon = indeterminate ? indeterminateIcon : checked ? checkedIcon : unchecked;
+    if (!icon || !isValidElement(icon))
+        return null;
+    // lynx-monochrome-icon 이 `<image style={{ width, height, ...style }}>` 로 자체 default size 를 박으므로
+    // recipe 토큰에서 꺼낸 사이즈를 inline 으로 주입해 덮는다.
+    const iconSize = resolveRecipeToken(checkmarkVars, [
+        `variant${capitalize(variant)}Size${capitalize(size)}`,
+        "enabled",
+        "icon",
+        "size",
+    ]);
+    return cloneElement(icon, {
+        ...iconColor,
+        className: clsx(iconClassName, icon.props.className, className),
+        style: iconSize
+            ? { width: iconSize, height: iconSize, ...icon.props.style, ...style }
+            : { ...icon.props.style, ...style },
+    });
+}
+CheckboxIndicator.displayName = "CheckboxIndicator";
+export const CheckboxLabel = React.forwardRef((props, ref) => {
+    const { children, className, ...nativeProps } = props;
+    const { disabled, weight, size } = useCheckboxContext("CheckboxLabel");
+    const labelClassName = checkbox({ weight, size, disabled }).label;
+    return (<text {...(ref ? { ref: ref } : {})} className={clsx(labelClassName, className)} {...nativeProps}>
+      {children}
+    </text>);
+});
+CheckboxLabel.displayName = "CheckboxLabel";
+export const CheckboxGroup = React.forwardRef((props, ref) => {
+    const { children, className, ...nativeProps } = props;
+    const classes = checkboxGroup();
+    return (<view {...(ref ? { ref: ref } : {})} className={clsx(classes, className)} {...nativeProps}>
+      {children}
+    </view>);
+});
+CheckboxGroup.displayName = "CheckboxGroup";

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

@@ -0,0 +1,2 @@
+export { CheckboxControl as Control, CheckboxGroup as Group, CheckboxIndicator as Indicator, CheckboxLabel as Label, CheckboxRoot as Root, type CheckboxControlProps as ControlProps, type CheckboxGroupProps as GroupProps, type CheckboxIndicatorProps as IndicatorProps, type CheckboxLabelProps as LabelProps, type CheckboxRootProps as RootProps, } from "./Checkbox";
+//# sourceMappingURL=Checkbox.namespace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,IAAI,OAAO,EAC1B,aAAa,IAAI,KAAK,EACtB,iBAAiB,IAAI,SAAS,EAC9B,aAAa,IAAI,KAAK,EACtB,YAAY,IAAI,IAAI,EACpB,KAAK,oBAAoB,IAAI,YAAY,EACzC,KAAK,kBAAkB,IAAI,UAAU,EACrC,KAAK,sBAAsB,IAAI,cAAc,EAC7C,KAAK,kBAAkB,IAAI,UAAU,EACrC,KAAK,iBAAiB,IAAI,SAAS,GACpC,MAAM,YAAY,CAAC"}

package/lib/components/Checkbox/Checkbox.namespace.js

@@ -0,0 +1 @@
+export { CheckboxControl as Control, CheckboxGroup as Group, CheckboxIndicator as Indicator, CheckboxLabel as Label, CheckboxRoot as Root, } from "./Checkbox";

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

@@ -0,0 +1,3 @@
+export { CheckboxRoot, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxGroup, type CheckboxRootProps, type CheckboxControlProps, type CheckboxIndicatorProps, type CheckboxLabelProps, type CheckboxGroupProps, } from "./Checkbox";
+export * as Checkbox from "./Checkbox.namespace";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,aAAa,EACb,aAAa,EACb,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,GACxB,MAAM,YAAY,CAAC;AAEpB,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAC"}

package/lib/components/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { CheckboxRoot, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxGroup, } from "./Checkbox";
+export * as Checkbox from "./Checkbox.namespace";

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

@@ -1,11 +1,13 @@
+import type * as React from "@lynx-js/react";
 import type { ProgressCircleVariantProps } from "@seed-design/lynx-css/recipes/progress-circle";
-export interface RootProps extends ProgressCircleVariantProps {
+export interface ProgressCircleRootProps extends ProgressCircleVariantProps {
     minValue?: number;
     maxValue?: number;
     value?: number;
     children?: React.ReactNode;
     className?: string;
 }
+export type RootProps = ProgressCircleRootProps;
 /**
  * Lynx에서 SVG를 사용할 수 없어 CSS clip-path 기반 pie sector로 구현.
  *
@@ -16,13 +18,12 @@ export interface RootProps extends ProgressCircleVariantProps {
  *
  * 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 declare const ProgressCircleRoot: {
+    (props: ProgressCircleRootProps): React.JSX.Element;
+    displayName: string;
+};
+export declare const ProgressCircleRange: {
+    (): React.JSX.Element;
+    displayName: string;
 };
-export {};
 //# sourceMappingURL=ProgressCircle.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAY7C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAqGhG,MAAM,WAAW,uBAAwB,SAAQ,0BAA0B;IACzE,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,MAAM,MAAM,SAAS,GAAG,uBAAuB,CAAC;AAEhD;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB;YAAW,uBAAuB;;CAgChE,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;CAQ/B,CAAC"}

package/lib/components/ProgressCircle/ProgressCircle.jsx

@@ -89,7 +89,7 @@ const TRANSITION_DURATION = 300;
  *
  * Lynx SVG + stroke-dasharray 지원 시 CSS-only 애니메이션으로 전환 예정.
  */
-function Root(props) {
+export const ProgressCircleRoot = (props) => {
     const size = props.size ?? "40";
     const tone = props.tone ?? "neutral";
     const numSize = Number(size);
@@ -107,17 +107,14 @@ function Root(props) {
         {props.children}
       </view>
     </ProgressCircleContext.Provider>);
-}
-function Track() {
-    return null;
-}
-function Range() {
+};
+export const ProgressCircleRange = () => {
     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);
@@ -185,7 +182,7 @@ function DeterminateRange({ numSize, progress, classes, }) {
         return () => {
             runOnMainThread(cancelAnimation)();
         };
-    }, [progress]);
+    }, [progress, numSize]);
     return (<>
       <view main-thread:ref={rangeRef} className={classes.range} style={{
             position: "absolute",
@@ -256,7 +253,7 @@ function IndeterminateRange({ numSize, classes }) {
         return () => {
             runOnMainThread(stopLoop)();
         };
-    }, []);
+    }, [numSize]);
     const initialClipPath = 'path("M 0 0 Z")';
     return (<view main-thread:ref={containerRef} style={{
             position: "absolute",
@@ -285,8 +282,5 @@ function IndeterminateRange({ numSize, classes }) {
         }}/>
     </view>);
 }
-export const ProgressCircle = {
-    Root,
-    Track,
-    Range,
-};
+ProgressCircleRoot.displayName = "ProgressCircleRoot";
+ProgressCircleRange.displayName = "ProgressCircleRange";

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

@@ -0,0 +1,2 @@
+export { ProgressCircleRange as Range, ProgressCircleRoot as Root, type ProgressCircleRootProps as RootProps, } from "./ProgressCircle";
+//# sourceMappingURL=ProgressCircle.namespace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressCircle.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,IAAI,KAAK,EAC5B,kBAAkB,IAAI,IAAI,EAC1B,KAAK,uBAAuB,IAAI,SAAS,GAC1C,MAAM,kBAAkB,CAAC"}

package/lib/components/ProgressCircle/ProgressCircle.namespace.js

@@ -0,0 +1 @@
+export { ProgressCircleRange as Range, ProgressCircleRoot as Root, } from "./ProgressCircle";

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

@@ -1,2 +1,3 @@
-export { ProgressCircle, type RootProps as ProgressCircleProps } from "./ProgressCircle";
+export { ProgressCircleRange, ProgressCircleRoot, type ProgressCircleRootProps, type ProgressCircleRootProps as ProgressCircleProps, type RootProps, } from "./ProgressCircle";
+export * as ProgressCircle from "./ProgressCircle.namespace";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressCircle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,KAAK,uBAAuB,IAAI,mBAAmB,EACnD,KAAK,SAAS,GACf,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}

package/lib/components/ProgressCircle/index.js

@@ -1 +1,2 @@
-export { ProgressCircle } from "./ProgressCircle";
+export { ProgressCircleRange, ProgressCircleRoot, } from "./ProgressCircle";
+export * as ProgressCircle from "./ProgressCircle.namespace";

package/lib/components/RadioGroup/RadioGroup.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 { RadioVariantProps } from "@seed-design/lynx-css/recipes/radio";
+import type { RadiomarkVariantProps } from "@seed-design/lynx-css/recipes/radiomark";
+export interface RadioGroupRootProps extends RadioVariantProps, Omit<RadiomarkVariantProps, "size" | "checked" | "disabled"> {
+    children?: React.ReactNode;
+    className?: string;
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    onValueChange?: (value: string) => void;
+}
+export declare const RadioGroupRoot: React.ForwardRefExoticComponent<RadioGroupRootProps & React.RefAttributes<unknown>>;
+export interface RadioGroupItemProps {
+    value: string;
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<unknown>>;
+export interface RadioGroupItemControlProps extends Pick<RadiomarkVariantProps, "tone"> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const RadioGroupItemControl: React.ForwardRefExoticComponent<RadioGroupItemControlProps & React.RefAttributes<unknown>>;
+type IconElementProps = {
+    className?: string;
+    style?: CSSProperties;
+    ref?: React.Ref<MainThread.Element>;
+    "main-thread:binduiappear"?: () => void;
+};
+export interface RadioGroupItemIndicatorProps {
+    /** Icon rendered when not checked. Optional — falls back to default `<view>` dot when omitted. */
+    unchecked?: ReactElement<IconElementProps>;
+    /** Icon rendered when the item is checked. Optional — falls back to default `<view>` dot when omitted. */
+    checked?: ReactElement<IconElementProps>;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function RadioGroupItemIndicator(props: RadioGroupItemIndicatorProps): React.JSX.Element;
+export declare namespace RadioGroupItemIndicator {
+    var displayName: string;
+}
+export interface RadioGroupItemLabelProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const RadioGroupItemLabel: React.ForwardRefExoticComponent<RadioGroupItemLabelProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=RadioGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.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,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAE7E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AA6ErF,MAAM,WAAW,mBACf,SAAQ,iBAAiB,EACvB,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,qFAsDzB,CAAC;AAKH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,qFAsDzB,CAAC;AAKH,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACrF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,qBAAqB,4FA+BjC,CAAC;AAKF,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;IACpC,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;CACzC,CAAC;AAEF,MAAM,WAAW,4BAA4B;IAC3C,kGAAkG;IAClG,SAAS,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IAC3C,0GAA0G;IAC1G,OAAO,CAAC,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,qBAgC1E;yBAhCe,uBAAuB;;;AAqCvC,MAAM,WAAW,wBAAwB;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,mBAAmB,0FAiB/B,CAAC"}

package/lib/components/RadioGroup/RadioGroup.jsx

@@ -0,0 +1,144 @@
+import * as React from "react";
+import { cloneElement, isValidElement } from "react";
+import clsx from "clsx";
+import { radio } from "@seed-design/lynx-css/recipes/radio";
+import { radiomark } from "@seed-design/lynx-css/recipes/radiomark";
+import { radioGroup } from "@seed-design/lynx-css/recipes/radio-group";
+import { vars as radiomarkVars } from "@seed-design/lynx-css/vars/component/radiomark";
+import { useControllableState } from "../../hooks/useControllableState";
+import { useIconColor } from "../../hooks/useIconColor";
+import { usePressTap } from "../../hooks/usePressTap";
+import { capitalize, resolveRecipeToken } from "../../utils/resolve-recipe-token";
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
+const RadioGroupContext = React.createContext(null);
+function useRadioGroupContext(consumer) {
+    const ctx = React.useContext(RadioGroupContext);
+    if (!ctx) {
+        throw new Error(`<${consumer}/> must be rendered inside <RadioGroupRoot/>.`);
+    }
+    return ctx;
+}
+const RadioGroupItemContext = React.createContext(null);
+function useRadioGroupItemContext(consumer) {
+    const ctx = React.useContext(RadioGroupItemContext);
+    if (!ctx) {
+        throw new Error(`<${consumer}/> must be rendered inside <RadioGroupItem/>.`);
+    }
+    return ctx;
+}
+const RadiomarkIconClassContext = React.createContext(null);
+function useRadiomarkIconClass(consumer) {
+    const ctx = React.useContext(RadiomarkIconClassContext);
+    if (!ctx) {
+        throw new Error(`<${consumer}/> must be rendered inside <RadioGroupItemControl/>.`);
+    }
+    return ctx;
+}
+export const RadioGroupRoot = React.forwardRef((props, ref) => {
+    const { children, className, value: valueProp, defaultValue, disabled = false, onValueChange, ...restProps } = props;
+    const [{ radio: radioVariantProps, radiomark: radiomarkVariantProps }, nativeProps] = splitMultipleVariantsProps(restProps, { radio, radiomark });
+    const weight = radioVariantProps.weight ?? "regular";
+    const size = radioVariantProps.size ?? "medium";
+    const tone = radiomarkVariantProps.tone ?? "brand";
+    const handleChange = React.useCallback((next) => {
+        if (next !== null)
+            onValueChange?.(next);
+    }, [onValueChange]);
+    const [value, setValueInternal] = useControllableState({
+        value: valueProp !== undefined ? valueProp : undefined,
+        defaultValue: defaultValue ?? null,
+        onChange: handleChange,
+    });
+    const setValue = React.useCallback((next) => {
+        setValueInternal(next);
+    }, [setValueInternal]);
+    const rootClassName = radioGroup();
+    const ctx = React.useMemo(() => ({ value, setValue, disabled, size, weight, tone }), [value, setValue, disabled, size, weight, tone]);
+    return (<RadioGroupContext.Provider value={ctx}>
+      <view {...(ref ? { ref: ref } : {})} className={clsx(rootClassName, className)} {...nativeProps}>
+        {children}
+      </view>
+    </RadioGroupContext.Provider>);
+});
+RadioGroupRoot.displayName = "RadioGroupRoot";
+export const RadioGroupItem = React.forwardRef((props, ref) => {
+    const { value: itemValue, disabled: itemDisabled = false, children, className, ...nativeProps } = props;
+    const { value: groupValue, setValue, disabled: groupDisabled, size, weight, tone, } = useRadioGroupContext("RadioGroupItem");
+    const disabled = groupDisabled || itemDisabled;
+    const checked = groupValue === itemValue;
+    const { pressed, ...pressHandlers } = usePressTap({
+        disabled,
+        onTap: () => {
+            if (checked)
+                return;
+            setValue(itemValue);
+        },
+    });
+    const rootClassName = radio({ weight, size, disabled }).root;
+    const itemCtx = React.useMemo(() => ({
+        value: itemValue,
+        checked,
+        disabled,
+        pressed,
+        tone,
+        size,
+    }), [itemValue, checked, disabled, pressed, tone, size]);
+    return (<RadioGroupItemContext.Provider value={itemCtx}>
+      <view {...(ref ? { ref: ref } : {})} className={clsx(rootClassName, className)} {...pressHandlers} {...nativeProps}>
+        {children}
+      </view>
+    </RadioGroupItemContext.Provider>);
+});
+RadioGroupItem.displayName = "RadioGroupItem";
+export const RadioGroupItemControl = React.forwardRef((props, ref) => {
+    const [variantProps, restProps] = radiomark.splitVariantProps(props);
+    const { children, className, ...nativeProps } = restProps;
+    const { checked, disabled, pressed, tone: ctxTone, size, } = useRadioGroupItemContext("RadioGroupItemControl");
+    const tone = variantProps.tone ?? ctxTone;
+    const classes = React.useMemo(() => radiomark({ tone, size, checked, disabled, pressed }), [tone, size, checked, disabled, pressed]);
+    return (<RadiomarkIconClassContext.Provider value={classes.icon}>
+        <view {...(ref ? { ref: ref } : {})} className={clsx(classes.root, className)} {...nativeProps}>
+          {children}
+        </view>
+      </RadiomarkIconClassContext.Provider>);
+});
+RadioGroupItemControl.displayName = "RadioGroupItemControl";
+export function RadioGroupItemIndicator(props) {
+    const { unchecked, checked: checkedIcon, className, style } = props;
+    const { checked, disabled, pressed, tone, size } = useRadioGroupItemContext("RadioGroupItemIndicator");
+    const iconClassName = useRadiomarkIconClass("RadioGroupItemIndicator");
+    const iconColor = useIconColor([checked, disabled, pressed, tone, size]);
+    const icon = checked ? checkedIcon : unchecked;
+    // 사용자가 custom icon 을 주지 않으면 default `<view>` 로 동그란 점을 그린다.
+    // radiomark.icon recipe 가 borderRadius/backgroundColor/width/height 를 적용해
+    // 라디오의 inner dot 모양을 재현. 웹 RadioGroup 의 default `<svg><circle/></svg>` 동작과 일치.
+    if (!icon || !isValidElement(icon)) {
+        return <view className={clsx(iconClassName, className)} style={style}/>;
+    }
+    // lynx-monochrome-icon 이 `<image style={{ width, height, ...style }}>` 로 자체 default size 를 박으므로
+    // recipe 토큰에서 꺼낸 사이즈를 inline 으로 주입해 덮는다.
+    const iconSize = resolveRecipeToken(radiomarkVars, [
+        `size${capitalize(size)}`,
+        disabled ? "disabled" : "enabled",
+        "icon",
+        "size",
+    ]);
+    return cloneElement(icon, {
+        ...iconColor,
+        className: clsx(iconClassName, icon.props.className, className),
+        style: iconSize
+            ? { width: iconSize, height: iconSize, ...icon.props.style, ...style }
+            : { ...icon.props.style, ...style },
+    });
+}
+RadioGroupItemIndicator.displayName = "RadioGroupItemIndicator";
+export const RadioGroupItemLabel = React.forwardRef((props, ref) => {
+    const { children, className, ...nativeProps } = props;
+    const { disabled } = useRadioGroupItemContext("RadioGroupItemLabel");
+    const { size, weight } = useRadioGroupContext("RadioGroupItemLabel");
+    const labelClassName = radio({ weight, size, disabled }).label;
+    return (<text {...(ref ? { ref: ref } : {})} className={clsx(labelClassName, className)} {...nativeProps}>
+        {children}
+      </text>);
+});
+RadioGroupItemLabel.displayName = "RadioGroupItemLabel";

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

@@ -0,0 +1,2 @@
+export { RadioGroupItem as Item, RadioGroupItemControl as ItemControl, RadioGroupItemIndicator as ItemIndicator, RadioGroupItemLabel as ItemLabel, RadioGroupRoot as Root, type RadioGroupItemControlProps as ItemControlProps, type RadioGroupItemIndicatorProps as ItemIndicatorProps, type RadioGroupItemLabelProps as ItemLabelProps, type RadioGroupItemProps as ItemProps, type RadioGroupRootProps as RootProps, } from "./RadioGroup";
+//# sourceMappingURL=RadioGroup.namespace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,IAAI,IAAI,EACtB,qBAAqB,IAAI,WAAW,EACpC,uBAAuB,IAAI,aAAa,EACxC,mBAAmB,IAAI,SAAS,EAChC,cAAc,IAAI,IAAI,EACtB,KAAK,0BAA0B,IAAI,gBAAgB,EACnD,KAAK,4BAA4B,IAAI,kBAAkB,EACvD,KAAK,wBAAwB,IAAI,cAAc,EAC/C,KAAK,mBAAmB,IAAI,SAAS,EACrC,KAAK,mBAAmB,IAAI,SAAS,GACtC,MAAM,cAAc,CAAC"}

package/lib/components/RadioGroup/RadioGroup.namespace.js

@@ -0,0 +1 @@
+export { RadioGroupItem as Item, RadioGroupItemControl as ItemControl, RadioGroupItemIndicator as ItemIndicator, RadioGroupItemLabel as ItemLabel, RadioGroupRoot as Root, } from "./RadioGroup";

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

@@ -0,0 +1,3 @@
+export { RadioGroupRoot, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, type RadioGroupRootProps, type RadioGroupItemProps, type RadioGroupItemControlProps, type RadioGroupItemIndicatorProps, type RadioGroupItemLabelProps, } from "./RadioGroup";
+export * as RadioGroup from "./RadioGroup.namespace";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,EACnB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,EAC/B,KAAK,4BAA4B,EACjC,KAAK,wBAAwB,GAC9B,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAC"}

package/lib/components/RadioGroup/index.js

@@ -0,0 +1,2 @@
+export { RadioGroupRoot, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, } from "./RadioGroup";
+export * as RadioGroup from "./RadioGroup.namespace";

package/lib/components/Switch/Switch.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import type { SwitchVariantProps } from "@seed-design/lynx-css/recipes/switch";
+import type { SwitchmarkVariantProps } from "@seed-design/lynx-css/recipes/switchmark";
+export interface SwitchRootProps extends SwitchVariantProps, Omit<SwitchmarkVariantProps, "size"> {
+    children?: React.ReactNode;
+    className?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare const SwitchRoot: React.ForwardRefExoticComponent<SwitchRootProps & React.RefAttributes<unknown>>;
+export interface SwitchControlProps extends Pick<SwitchmarkVariantProps, "tone" | "size"> {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const SwitchControl: React.ForwardRefExoticComponent<SwitchControlProps & React.RefAttributes<unknown>>;
+export interface SwitchThumbProps {
+    className?: string;
+}
+export declare const SwitchThumb: React.ForwardRefExoticComponent<SwitchThumbProps & React.RefAttributes<unknown>>;
+export interface SwitchLabelProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const SwitchLabel: React.ForwardRefExoticComponent<SwitchLabelProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AAmDvF,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC;IAC/F,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,UAAU,iFA6CrB,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,MAAM,GAAG,MAAM,CAAC;IACvF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,oFAwBxB,CAAC;AAKH,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,kFAWtB,CAAC;AAKH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,kFActB,CAAC"}

package/lib/components/Switch/Switch.jsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import clsx from "clsx";
+import { switchStyle } from "@seed-design/lynx-css/recipes/switch";
+import { switchmark } from "@seed-design/lynx-css/recipes/switchmark";
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props";
+import { useControllableState } from "../../hooks/useControllableState";
+import { usePressTap } from "../../hooks/usePressTap";
+const SwitchContext = React.createContext(null);
+function useSwitchContext(consumer) {
+    const ctx = React.useContext(SwitchContext);
+    if (!ctx) {
+        throw new Error(`<${consumer}/> must be rendered inside <SwitchRoot/>.`);
+    }
+    return ctx;
+}
+const SwitchmarkThumbClassContext = React.createContext(null);
+function useSwitchmarkThumbClass(consumer) {
+    const ctx = React.useContext(SwitchmarkThumbClassContext);
+    if (!ctx) {
+        throw new Error(`<${consumer}/> must be rendered inside <SwitchControl/>.`);
+    }
+    return ctx;
+}
+export const SwitchRoot = React.forwardRef((props, ref) => {
+    const { children, className, checked: checkedProp, defaultChecked = false, disabled = false, onCheckedChange, ...restProps } = props;
+    const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, nativeProps] = splitMultipleVariantsProps(restProps, { switch: switchStyle, switchmark });
+    const size = switchVariantProps.size ?? "32";
+    const tone = switchmarkVariantProps.tone ?? "brand";
+    const [checked, setChecked] = useControllableState({
+        value: checkedProp,
+        defaultValue: defaultChecked,
+        onChange: onCheckedChange,
+    });
+    const { pressed: _pressed, ...pressHandlers } = usePressTap({
+        disabled,
+        onTap: () => setChecked(!checked),
+    });
+    const rootClassName = switchStyle({ size }).root;
+    const ctx = React.useMemo(() => ({ checked, disabled, size, tone }), [checked, disabled, size, tone]);
+    return (<SwitchContext.Provider value={ctx}>
+      <view {...(ref ? { ref: ref } : {})} className={clsx(rootClassName, className)} {...pressHandlers} {...nativeProps}>
+        {children}
+      </view>
+    </SwitchContext.Provider>);
+});
+SwitchRoot.displayName = "SwitchRoot";
+export const SwitchControl = React.forwardRef((props, ref) => {
+    const [variantProps, restProps] = switchmark.splitVariantProps(props);
+    const { children, className, ...nativeProps } = restProps;
+    const { checked, disabled, tone: ctxTone, size: ctxSize } = useSwitchContext("SwitchControl");
+    const tone = variantProps.tone ?? ctxTone;
+    const size = variantProps.size ?? ctxSize;
+    const classes = React.useMemo(() => switchmark({ tone, size, checked, disabled }), [tone, size, checked, disabled]);
+    return (<SwitchmarkThumbClassContext.Provider value={classes.thumb}>
+      <view {...(ref ? { ref: ref } : {})} className={clsx(classes.root, className)} {...nativeProps}>
+        {children}
+      </view>
+    </SwitchmarkThumbClassContext.Provider>);
+});
+SwitchControl.displayName = "SwitchControl";
+export const SwitchThumb = React.forwardRef((props, ref) => {
+    const { className, ...nativeProps } = props;
+    const thumbClassName = useSwitchmarkThumbClass("SwitchThumb");
+    return (<view {...(ref ? { ref: ref } : {})} className={clsx(thumbClassName, className)} {...nativeProps}/>);
+});
+SwitchThumb.displayName = "SwitchThumb";
+export const SwitchLabel = React.forwardRef((props, ref) => {
+    const { children, className, ...nativeProps } = props;
+    const { disabled, size } = useSwitchContext("SwitchLabel");
+    const labelClassName = switchStyle({ size, disabled }).label;
+    return (<text {...(ref ? { ref: ref } : {})} className={clsx(labelClassName, className)} {...nativeProps}>
+      {children}
+    </text>);
+});
+SwitchLabel.displayName = "SwitchLabel";

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

@@ -0,0 +1,2 @@
+export { SwitchControl as Control, SwitchLabel as Label, SwitchRoot as Root, SwitchThumb as Thumb, type SwitchControlProps as ControlProps, type SwitchLabelProps as LabelProps, type SwitchRootProps as RootProps, type SwitchThumbProps as ThumbProps, } from "./Switch";
+//# sourceMappingURL=Switch.namespace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,IAAI,OAAO,EACxB,WAAW,IAAI,KAAK,EACpB,UAAU,IAAI,IAAI,EAClB,WAAW,IAAI,KAAK,EACpB,KAAK,kBAAkB,IAAI,YAAY,EACvC,KAAK,gBAAgB,IAAI,UAAU,EACnC,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,gBAAgB,IAAI,UAAU,GACpC,MAAM,UAAU,CAAC"}

package/lib/components/Switch/Switch.namespace.js

@@ -0,0 +1 @@
+export { SwitchControl as Control, SwitchLabel as Label, SwitchRoot as Root, SwitchThumb as Thumb, } from "./Switch";

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

@@ -0,0 +1,3 @@
+export { SwitchRoot, SwitchControl, SwitchThumb, SwitchLabel, type SwitchRootProps, type SwitchControlProps, type SwitchThumbProps, type SwitchLabelProps, } from "./Switch";
+export * as Switch from "./Switch.namespace";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,aAAa,EACb,WAAW,EACX,WAAW,EACX,KAAK,eAAe,EACpB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,GACtB,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC"}