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

package/lib/components/Box/Box.jsx

@@ -0,0 +1,14 @@
+import { useStyleProps } from "../../utils/styled.js";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+//#region src/components/Box/Box.tsx
+var Box = React.forwardRef((props, ref) => {
+	const { style, restProps } = useStyleProps(props);
+	const { children, className, ...nativeProps } = restProps;
+	return <view {...ref ? { ref } : {}} {...nativeProps} className={clsx(className)} style={style}>
+      {children}
+    </view>;
+});
+Box.displayName = "Box";
+//#endregion
+export { 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/Checkbox/Checkbox.d.ts

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

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

@@ -1 +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;IACpC,0BAA0B,CAAC,EAAE,MAAM,IAAI,CAAC;CACzC,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"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAInE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAEnF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAKrF,OAAO,KAAK,EACV,oBAAoB,EACpB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAuDrB,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,eAAe,CAAC,EAC9E,sBAAsB;IACxB,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,mFA8DvB,CAAC;AAKH,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,qBAAqB,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC,EAC9D,sBAAsB;CAAG;AAE7B,eAAO,MAAM,eAAe,sFA2B1B,CAAC;AAKH,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,WAAW,GAAG,OAAO,CAAC;IAC3D,sEAAsE;IACtE,SAAS,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAC/C,mEAAmE;IACnE,OAAO,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IAC5C,+CAA+C;IAC/C,aAAa,CAAC,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;CACpD;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,4BAwC9D;yBAxCe,iBAAiB;;;AA6CjC,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;CAAG;AAErE,eAAO,MAAM,aAAa,oFAiBxB,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;CAAG;AAErE,eAAO,MAAM,aAAa,oFAaxB,CAAC"}

package/lib/components/Checkbox/Checkbox.jsx

@@ -1,121 +1,130 @@
-import * as React from "react";
-import { cloneElement, isValidElement } from "react";
+import { usePressTap } from "../../hooks/usePressTap.js";
+import { InternalIcon } from "../Icon/Icon.jsx";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props.js";
 import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { isValidElement } from "@lynx-js/react";
 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);
+//#region src/components/Checkbox/Checkbox.tsx
+var 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 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;
+var CheckmarkControlContext = React.createContext(null);
+function useCheckmarkControlContext(consumer) {
+	const ctx = React.useContext(CheckmarkControlContext);
+	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}>
+var 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 [checked, setChecked] = useControllableState({
+		value: checkedProp,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
+	const { pressed, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: toggle
+	});
+	const rootClassName = checkbox({
+		...checkboxVariantProps,
+		disabled
+	}).root;
+	const contextValue = React.useMemo(() => ({
+		checked,
+		indeterminate,
+		disabled,
+		pressed,
+		checkboxVariantProps,
+		checkmarkVariantProps,
+		toggle
+	}), [
+		checked,
+		indeterminate,
+		disabled,
+		pressed,
+		checkboxVariantProps,
+		checkmarkVariantProps,
+		toggle
+	]);
+	return <CheckboxContext.Provider value={contextValue}>
+      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} {...pressHandlers} {...nativeProps}>
         {children}
       </view>
-    </CheckboxContext.Provider>);
+    </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}>
+var CheckboxControl = React.forwardRef((props, ref) => {
+	const [variantProps, restProps] = checkmark.splitVariantProps(props);
+	const { children, className, ...nativeProps } = restProps;
+	const context = useCheckboxContext("CheckboxControl");
+	const checkmarkVariantProps = {
+		...context.checkmarkVariantProps,
+		...variantProps,
+		checked: context.checked,
+		disabled: context.disabled,
+		indeterminate: context.indeterminate,
+		pressed: context.pressed
+	};
+	const classes = checkmark(checkmarkVariantProps);
+	return <CheckmarkControlContext.Provider value={{
+		iconClassName: classes.icon,
+		checkmarkVariantProps
+	}}>
+      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
         {children}
       </view>
-    </CheckmarkIconClassContext.Provider>);
+    </CheckmarkControlContext.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 },
-    });
+function CheckboxIndicator(props) {
+	const { unchecked, checked: checkedIcon, indeterminate: indeterminateIcon, className, style } = props;
+	const context = useCheckboxContext("CheckboxIndicator");
+	const { iconClassName, checkmarkVariantProps } = useCheckmarkControlContext("CheckboxIndicator");
+	if (process.env.NODE_ENV !== "production" && context.indeterminate && !indeterminateIcon) console.warn("[seed-design] CheckboxIndicator: `indeterminate` prop must be provided when the checkbox is in an indeterminate state.");
+	const icon = context.indeterminate ? indeterminateIcon : context.checked ? checkedIcon : unchecked;
+	if (!icon || !isValidElement(icon)) return null;
+	return <InternalIcon icon={icon} className={clsx(iconClassName, className)} style={style} deps={[
+		context.checked,
+		context.indeterminate,
+		context.disabled,
+		context.pressed,
+		checkmarkVariantProps.tone,
+		checkmarkVariantProps.variant,
+		checkmarkVariantProps.size
+	]} />;
 }
 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}>
+var CheckboxLabel = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useCheckboxContext("CheckboxLabel");
+	const labelClassName = checkbox({
+		...context.checkboxVariantProps,
+		disabled: context.disabled
+	}).label;
+	return <text {...ref ? { ref } : {}} className={clsx(labelClassName, className)} {...nativeProps}>
       {children}
-    </text>);
+    </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}>
+var CheckboxGroup = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const classes = checkboxGroup();
+	return <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
       {children}
-    </view>);
+    </view>;
 });
 CheckboxGroup.displayName = "CheckboxGroup";
+//#endregion
+export { CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot };

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

@@ -1,2 +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";
+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.js

@@ -1 +1,12 @@
-export { CheckboxControl as Control, CheckboxGroup as Group, CheckboxIndicator as Indicator, CheckboxLabel as Label, CheckboxRoot as Root, } from "./Checkbox";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from "./Checkbox.jsx";
+//#region src/components/Checkbox/Checkbox.namespace.ts
+var Checkbox_namespace_exports = /* @__PURE__ */ __exportAll({
+	Control: () => CheckboxControl,
+	Group: () => CheckboxGroup,
+	Indicator: () => CheckboxIndicator,
+	Label: () => CheckboxLabel,
+	Root: () => CheckboxRoot
+});
+//#endregion
+export { Checkbox_namespace_exports };

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

@@ -1,3 +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";
+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/Icon/Icon.d.ts

@@ -0,0 +1,37 @@
+import { DependencyList, ReactElement } from '@lynx-js/react';
+import { LynxIconElementProps, LynxStyledElementProps } from '../../types';
+import { StyleProps } from '../../utils/styled';
+import * as React from "@lynx-js/react";
+export type IconSlotName = "icon" | "prefixIcon" | "suffixIcon";
+interface IconSlotContextValue {
+    classNames?: Partial<Record<IconSlotName, string>>;
+    deps?: DependencyList;
+}
+export declare function IconRequired({ children, enabled, }: {
+    children: React.ReactNode;
+    enabled: boolean;
+}): React.JSX.Element;
+export declare function IconSlotProvider({ value, children, }: {
+    value: IconSlotContextValue;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function getIconSlotName(node: React.ReactNode): IconSlotName | null;
+export interface IconProps extends LynxStyledElementProps {
+    icon: ReactElement<LynxIconElementProps>;
+    size?: StyleProps["height"] | number;
+    color?: StyleProps["color"];
+}
+export interface PrefixIconProps extends IconProps {
+}
+export interface SuffixIconProps extends IconProps {
+}
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<unknown>>;
+export declare const PrefixIcon: React.ForwardRefExoticComponent<PrefixIconProps & React.RefAttributes<unknown>>;
+export declare const SuffixIcon: React.ForwardRefExoticComponent<SuffixIconProps & React.RefAttributes<unknown>>;
+export interface InternalIconProps extends LynxStyledElementProps {
+    icon: ReactElement<LynxIconElementProps>;
+    deps?: DependencyList;
+}
+export declare const InternalIcon: React.ForwardRefExoticComponent<InternalIconProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=Icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,oBAAoB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC7F,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEnF,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,YAAY,GAAG,YAAY,CAAC;AAIhE,UAAU,oBAAoB;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACnD,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAWD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;CAClB,qBAyCA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAEA;AAUD,wBAAgB,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,GAAG,YAAY,GAAG,IAAI,CAI1E;AAID,MAAM,WAAW,SAAU,SAAQ,sBAAsB;IACvD,IAAI,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,MAAM,CAAC;IACrC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC7B;AAED,MAAM,WAAW,eAAgB,SAAQ,SAAS;CAAG;AAErD,MAAM,WAAW,eAAgB,SAAQ,SAAS;CAAG;AAqGrD,eAAO,MAAM,IAAI,2EAA8D,CAAC;AAChF,eAAO,MAAM,UAAU,iFAItB,CAAC;AACF,eAAO,MAAM,UAAU,iFAItB,CAAC;AAIF,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,IAAI,EAAE,YAAY,CAAC,oBAAoB,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,mFA2BvB,CAAC"}

package/lib/components/Icon/Icon.jsx

@@ -0,0 +1,143 @@
+import { handleColor, handleDimension } from "../../utils/styled.js";
+import { useIconColor } from "../../hooks/useIconColor.js";
+import clsx from "clsx";
+import * as React from "@lynx-js/react";
+import { cloneElement, isValidElement, useMainThreadRef } from "@lynx-js/react";
+//#region src/components/Icon/Icon.tsx
+var IconSlotContext = React.createContext(null);
+var IconRequiredContext = React.createContext(null);
+function IconRequired({ children, enabled }) {
+	const registeredCountRef = React.useRef(0);
+	const parentContext = React.useContext(IconRequiredContext);
+	const register = React.useCallback(() => {
+		registeredCountRef.current += 1;
+		if (process.env.NODE_ENV !== "production" && registeredCountRef.current > 1) throw new Error("Icon-only Component must render only one <Icon /> under children. Check if you are rendering multiple <Icon />.");
+	}, []);
+	const unregister = React.useCallback(() => {
+		registeredCountRef.current = Math.max(0, registeredCountRef.current - 1);
+	}, []);
+	React.useLayoutEffect(() => {
+		if (!enabled) return;
+		if (process.env.NODE_ENV !== "production") {
+			if (parentContext) throw new Error("Icon-only Component must not be nested within another Icon-Only. Check if you are using Icon-Only inside another Icon-Only.");
+			if (registeredCountRef.current === 0) throw new Error("Icon-only Component must render <Icon /> as a child. Check if you are using raw icon element instead of <Icon icon={} />.");
+		}
+	}, [enabled, parentContext]);
+	const value = React.useMemo(() => {
+		if (!enabled) return parentContext ?? null;
+		return {
+			register,
+			unregister
+		};
+	}, [
+		enabled,
+		parentContext,
+		register,
+		unregister
+	]);
+	return <IconRequiredContext.Provider value={value}>{children}</IconRequiredContext.Provider>;
+}
+function IconSlotProvider({ value, children }) {
+	return <IconSlotContext.Provider value={value}>{children}</IconSlotContext.Provider>;
+}
+var iconSlotMarker = Symbol.for("@seed-design/lynx-react/icon-slot");
+function getIconSlotName(node) {
+	if (!isValidElement(node)) return null;
+	return node.type[iconSlotMarker] ?? null;
+}
+function mergeWrapperStyle({ size, color, style }) {
+	const dimension = handleDimension(size);
+	const resolvedColor = handleColor(color);
+	if (dimension == null && resolvedColor == null) return style;
+	return {
+		...dimension != null ? {
+			width: dimension,
+			height: dimension
+		} : {},
+		...resolvedColor != null ? { color: resolvedColor } : {},
+		...style
+	};
+}
+function getStyleColor(style) {
+	return style?.color;
+}
+var IconSlotBase = React.forwardRef((props, ref) => {
+	const { icon, slot, baseClassName, className, style, size, color, children: _children, ...nativeProps } = props;
+	const context = React.useContext(IconSlotContext);
+	const iconRequiredContext = React.useContext(IconRequiredContext);
+	const sourceRef = useMainThreadRef(null);
+	const slotClassName = slot != null ? context?.classNames?.[slot] : void 0;
+	const iconColor = useIconColor([
+		baseClassName,
+		slotClassName,
+		className,
+		size,
+		color,
+		getStyleColor(style),
+		...context?.deps ?? []
+	], { sourceRef });
+	const hasValidIcon = isValidElement(icon);
+	React.useLayoutEffect(() => {
+		if (slot !== "icon" || !hasValidIcon) return;
+		iconRequiredContext?.register();
+		return () => {
+			iconRequiredContext?.unregister();
+		};
+	}, [
+		hasValidIcon,
+		iconRequiredContext,
+		slot
+	]);
+	if (!hasValidIcon) return null;
+	return <view {...ref ? { ref } : {}} {...nativeProps} main-thread:ref={sourceRef} className={clsx(baseClassName, slotClassName, className)} style={mergeWrapperStyle({
+		size,
+		color,
+		style
+	})}>
+      {cloneElement(icon, {
+		...iconColor,
+		className: icon.props.className,
+		style: {
+			...icon.props.style,
+			width: "100%",
+			height: "100%"
+		}
+	})}
+    </view>;
+});
+IconSlotBase.displayName = "IconSlotBase";
+function createIconComponent(displayName, slot, baseClassName) {
+	const Component = React.forwardRef((props, ref) => {
+		return <IconSlotBase ref={ref} slot={slot} baseClassName={baseClassName} {...props} />;
+	});
+	Component.displayName = displayName;
+	Component[iconSlotMarker] = slot;
+	return Component;
+}
+var Icon = createIconComponent("Icon", "icon", "seed-icon");
+var PrefixIcon = createIconComponent("PrefixIcon", "prefixIcon", "seed-prefix-icon");
+var SuffixIcon = createIconComponent("SuffixIcon", "suffixIcon", "seed-suffix-icon");
+var InternalIcon = React.forwardRef((props, ref) => {
+	const { icon, deps = [], className, style, children: _children, ...nativeProps } = props;
+	const sourceRef = useMainThreadRef(null);
+	const iconColor = useIconColor([
+		className,
+		getStyleColor(style),
+		...deps ?? []
+	], { sourceRef });
+	if (!isValidElement(icon)) return null;
+	return <view {...ref ? { ref } : {}} {...nativeProps} main-thread:ref={sourceRef} className={className} style={style}>
+      {cloneElement(icon, {
+		...iconColor,
+		className: icon.props.className,
+		style: {
+			...icon.props.style,
+			width: "100%",
+			height: "100%"
+		}
+	})}
+    </view>;
+});
+InternalIcon.displayName = "InternalIcon";
+//#endregion
+export { Icon, IconRequired, IconSlotProvider, InternalIcon, PrefixIcon, SuffixIcon, getIconSlotName };

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

@@ -0,0 +1,2 @@
+export { Icon, PrefixIcon, SuffixIcon, type IconProps, type PrefixIconProps, type SuffixIconProps, } from './Icon';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,KAAK,SAAS,EACd,KAAK,eAAe,EACpB,KAAK,eAAe,GACrB,MAAM,QAAQ,CAAC"}

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

@@ -1,11 +1,10 @@
+import { ProgressCircleVariantProps } from '@seed-design/lynx-css/recipes/progress-circle';
+import { LynxStyledElementProps } from '../../types';
 import type * as React from "@lynx-js/react";
-import type { ProgressCircleVariantProps } from "@seed-design/lynx-css/recipes/progress-circle";
-export interface ProgressCircleRootProps extends ProgressCircleVariantProps {
+export interface ProgressCircleRootProps extends ProgressCircleVariantProps, LynxStyledElementProps {
     minValue?: number;
     maxValue?: number;
     value?: number;
-    children?: React.ReactNode;
-    className?: string;
 }
 export type RootProps = ProgressCircleRootProps;
 /**
@@ -18,10 +17,7 @@ export type RootProps = ProgressCircleRootProps;
  *
  * Lynx SVG + stroke-dasharray 지원 시 CSS-only 애니메이션으로 전환 예정.
  */
-export declare const ProgressCircleRoot: {
-    (props: ProgressCircleRootProps): React.JSX.Element;
-    displayName: string;
-};
+export declare const ProgressCircleRoot: React.ForwardRefExoticComponent<ProgressCircleRootProps & React.RefAttributes<unknown>>;
 export declare const ProgressCircleRange: {
     (): React.JSX.Element;
     displayName: string;

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":"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"}
+{"version":3,"file":"ProgressCircle.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressCircle/ProgressCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAa7C,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAChG,OAAO,KAAK,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AA2GvE,MAAM,WAAW,uBACf,SAAQ,0BAA0B,EAChC,sBAAsB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,SAAS,GAAG,uBAAuB,CAAC;AAIhD;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,yFA8B7B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;;CAQ/B,CAAC"}