@seed-design/lynx-react 0.4.0 → 0.5.0

package/lib/components/Checkbox/Checkbox.jsx

@@ -1,10 +1,10 @@
+import { useControllableState } from "../../hooks/useControllableState.js";
 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 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";
@@ -33,10 +33,25 @@ var CheckboxRoot = React.forwardRef((props, ref) => {
 		onChange: onCheckedChange
 	});
 	const toggle = React.useCallback(() => setChecked(!checked), [checked, setChecked]);
-	const { pressed, ...pressHandlers } = usePressTap({
+	const pressSelectionRef = React.useRef({
+		checked,
+		indeterminate
+	});
+	const { pressed, bindtouchstart, ...pressHandlers } = usePressTap({
 		disabled,
 		onTap: toggle
 	});
+	const handleTouchStart = React.useCallback((...args) => {
+		pressSelectionRef.current = {
+			checked,
+			indeterminate
+		};
+		bindtouchstart(...args);
+	}, [
+		bindtouchstart,
+		checked,
+		indeterminate
+	]);
 	const rootClassName = checkbox({
 		...checkboxVariantProps,
 		disabled
@@ -46,6 +61,8 @@ var CheckboxRoot = React.forwardRef((props, ref) => {
 		indeterminate,
 		disabled,
 		pressed,
+		pressStartChecked: pressSelectionRef.current.checked,
+		pressStartIndeterminate: pressSelectionRef.current.indeterminate,
 		checkboxVariantProps,
 		checkmarkVariantProps,
 		toggle
@@ -59,7 +76,7 @@ var CheckboxRoot = React.forwardRef((props, ref) => {
 		toggle
 	]);
 	return <CheckboxContext.Provider value={contextValue}>
-      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} {...pressHandlers} {...nativeProps}>
+      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} bindtouchstart={handleTouchStart} {...pressHandlers} {...nativeProps}>
         {children}
       </view>
     </CheckboxContext.Provider>;
@@ -78,11 +95,25 @@ var CheckboxControl = React.forwardRef((props, ref) => {
 		pressed: context.pressed
 	};
 	const classes = checkmark(checkmarkVariantProps);
+	const pressStartClasses = checkmark({
+		...checkmarkVariantProps,
+		checked: context.pressStartChecked,
+		indeterminate: context.pressStartIndeterminate,
+		pressed: context.pressed
+	});
+	const isGhost = checkmarkVariantProps.variant === "ghost";
+	const rootClassName = isGhost ? checkmark({
+		...checkmarkVariantProps,
+		checked: false,
+		indeterminate: false,
+		pressed: false
+	}).root : classes.root;
 	return <CheckmarkControlContext.Provider value={{
 		iconClassName: classes.icon,
 		checkmarkVariantProps
 	}}>
-      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
+      <view {...ref ? { ref } : {}} className={clsx(rootClassName, className)} {...nativeProps}>
+        {isGhost ? <view className={pressStartClasses.background} /> : null}
         {children}
       </view>
     </CheckmarkControlContext.Provider>;

package/lib/components/Chip/Chip.d.ts

@@ -0,0 +1,66 @@
+import { ChipVariantProps } from '@seed-design/lynx-css/recipes/chip';
+import { LynxAccessibilityProps, LynxPressableProps, LynxStyledElementProps } from '../../types';
+import { PrefixIconProps, SuffixIconProps } from '../Icon/Icon';
+import * as React from "@lynx-js/react";
+type ChipPublicVariantProps = Omit<ChipVariantProps, "selected" | "pressed">;
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HTML button 속성 및 native form 제출
+ * - 키보드 focus / focusVisible
+ * - `asChild`
+ */
+export interface ChipButtonProps extends ChipPublicVariantProps, LynxStyledElementProps, LynxPressableProps, LynxAccessibilityProps {
+    disabled?: boolean;
+}
+export declare const ChipButton: React.ForwardRefExoticComponent<ChipButtonProps & React.RefAttributes<unknown>>;
+/** React `Chip.Root`에 대응하는 기본 action chip입니다. */
+export interface ChipRootProps extends ChipButtonProps {
+}
+export declare const ChipRoot: React.ForwardRefExoticComponent<ChipRootProps & React.RefAttributes<unknown>>;
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HiddenInput / inputProps / name / value: Lynx에 HTML form 제출 모델이 없음
+ * - raw DOM `onChange`: `onCheckedChange`로 대체
+ */
+export interface ChipToggleProps extends ChipButtonProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+export declare const ChipToggle: React.ForwardRefExoticComponent<ChipToggleProps & React.RefAttributes<unknown>>;
+export interface ChipRadioRootProps extends LynxStyledElementProps {
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    onValueChange?: (value: string) => void;
+}
+export declare const ChipRadioRoot: React.ForwardRefExoticComponent<ChipRadioRootProps & React.RefAttributes<unknown>>;
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HiddenInput / inputProps / name / required: Lynx에 HTML form 제출 모델이 없음
+ * - raw DOM `onChange`: `Chip.RadioRoot`의 `onValueChange`로 대체
+ */
+export interface ChipRadioItemProps extends ChipButtonProps {
+    value: string;
+}
+export declare const ChipRadioItem: React.ForwardRefExoticComponent<ChipRadioItemProps & React.RefAttributes<unknown>>;
+export interface ChipLabelProps extends LynxStyledElementProps {
+}
+export declare const ChipLabel: React.ForwardRefExoticComponent<ChipLabelProps & React.RefAttributes<unknown>>;
+export interface ChipPrefixIconProps extends PrefixIconProps {
+}
+export declare const ChipPrefixIcon: React.ForwardRefExoticComponent<ChipPrefixIconProps & React.RefAttributes<unknown>>;
+export interface ChipPrefixAvatarProps extends LynxStyledElementProps {
+}
+export declare const ChipPrefixAvatar: React.ForwardRefExoticComponent<ChipPrefixAvatarProps & React.RefAttributes<unknown>>;
+export interface ChipSuffixIconProps extends SuffixIconProps {
+}
+export declare const ChipSuffixIcon: React.ForwardRefExoticComponent<ChipSuffixIconProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=Chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAGxC,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AAIjF,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAErB,OAAO,EAKL,KAAK,eAAe,EACpB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAItB,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;AA6D7E;;;;;;;GAOG;AACH,MAAM,WAAW,eACf,SAAQ,sBAAsB,EAC5B,sBAAsB,EACtB,kBAAkB,EAClB,sBAAsB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,iFA2BrB,CAAC;AAGH,iDAAiD;AACjD,MAAM,WAAW,aAAc,SAAQ,eAAe;CAAG;AAEzD,eAAO,MAAM,QAAQ,+EAEnB,CAAC;AAKH;;;;;;GAMG;AACH,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,UAAU,iFA4CrB,CAAC;AAqBH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,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,aAAa,oFAqCxB,CAAC;AAGH;;;;;;GAMG;AACH,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,aAAa,oFAwCxB,CAAC;AAKH,MAAM,WAAW,cAAe,SAAQ,sBAAsB;CAAG;AAEjE,eAAO,MAAM,SAAS,gFAapB,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;CAAG;AAE/D,eAAO,MAAM,cAAc,qFAEzB,CAAC;AAGH,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;CAAG;AAExE,eAAO,MAAM,gBAAgB,uFAa3B,CAAC;AAGH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;CAAG;AAE/D,eAAO,MAAM,cAAc,qFAEzB,CAAC"}

package/lib/components/Chip/Chip.jsx

@@ -0,0 +1,159 @@
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { usePressTap } from "../../hooks/usePressTap.js";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { IconRequired, IconSlotProvider, PrefixIcon, SuffixIcon } from "../Icon/Icon.jsx";
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+import { chip } from "@seed-design/lynx-css/recipes/chip";
+//#region src/components/Chip/Chip.tsx
+var { ClassNamesProvider, useClassNames } = createSlotRecipeContext(chip);
+var ChipRootView = React.forwardRef((props, ref) => {
+	const [variantProps, otherProps] = chip.splitVariantProps(props);
+	const classes = chip(variantProps);
+	const { children, className, ...nativeProps } = otherProps;
+	const iconSlotContextValue = React.useMemo(() => ({
+		classNames: {
+			icon: classes.icon,
+			prefixIcon: classes.prefixIcon,
+			suffixIcon: classes.suffixIcon
+		},
+		deps: [
+			variantProps.variant,
+			variantProps.size,
+			variantProps.layout,
+			variantProps.selected,
+			variantProps.pressed,
+			variantProps.disabled
+		]
+	}), [
+		classes.icon,
+		classes.prefixIcon,
+		classes.suffixIcon,
+		variantProps.variant,
+		variantProps.size,
+		variantProps.layout,
+		variantProps.selected,
+		variantProps.pressed,
+		variantProps.disabled
+	]);
+	return <ClassNamesProvider value={classes}>
+      <IconSlotProvider value={iconSlotContextValue}>
+        <IconRequired enabled={variantProps.layout === "iconOnly"}>
+          <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} {...nativeProps}>
+            {children}
+          </view>
+        </IconRequired>
+      </IconSlotProvider>
+    </ClassNamesProvider>;
+});
+ChipRootView.displayName = "ChipRootView";
+var ChipButton = React.forwardRef((props, ref) => {
+	const { bindtap, "main-thread:bindtap": mainThreadBindtap, disabled = false, "accessibility-element": accessibilityElement = true, "accessibility-traits": accessibilityTraits, ...restProps } = props;
+	const { pressed, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: bindtap,
+		mainThreadOnTap: mainThreadBindtap
+	});
+	return <ChipRootView ref={ref} {...restProps} disabled={disabled} selected={false} pressed={pressed} accessibility-element={accessibilityElement} accessibility-traits={disabled ? "disabled" : accessibilityTraits ?? "button"} {...pressHandlers} />;
+});
+ChipButton.displayName = "ChipButton";
+var ChipRoot = React.forwardRef((props, ref) => <ChipButton ref={ref} {...props} />);
+ChipRoot.displayName = "ChipRoot";
+var ChipToggle = React.forwardRef((props, ref) => {
+	const { checked: checkedProp, defaultChecked = false, onCheckedChange, bindtap, "main-thread:bindtap": mainThreadBindtap, disabled = false, "accessibility-element": accessibilityElement = true, "accessibility-traits": accessibilityTraits, ...restProps } = props;
+	const [checked, setChecked] = useControllableState({
+		value: checkedProp,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const { pressed, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: React.useCallback((...args) => {
+			setChecked(!checked);
+			bindtap?.(...args);
+		}, [
+			bindtap,
+			checked,
+			setChecked
+		]),
+		mainThreadOnTap: mainThreadBindtap
+	});
+	return <ChipRootView ref={ref} {...restProps} disabled={disabled} selected={checked} pressed={pressed} accessibility-element={accessibilityElement} accessibility-traits={disabled ? "disabled" : checked ? "selected" : accessibilityTraits ?? "button"} {...pressHandlers} />;
+});
+ChipToggle.displayName = "ChipToggle";
+var ChipRadioGroupContext = React.createContext(null);
+function useChipRadioGroupContext(consumer) {
+	const context = React.useContext(ChipRadioGroupContext);
+	if (!context) throw new Error(`<${consumer}/> must be rendered inside <ChipRadioRoot/>.`);
+	return context;
+}
+var ChipRadioRoot = React.forwardRef((props, ref) => {
+	const { value: valueProp, defaultValue, disabled = false, onValueChange, children, className, ...nativeProps } = props;
+	const handleChange = React.useCallback((nextValue) => {
+		if (nextValue !== null) onValueChange?.(nextValue);
+	}, [onValueChange]);
+	const [value, setValueInternal] = useControllableState({
+		value: valueProp !== void 0 ? valueProp : void 0,
+		defaultValue: defaultValue ?? null,
+		onChange: handleChange
+	});
+	const setValue = React.useCallback((nextValue) => setValueInternal(nextValue), [setValueInternal]);
+	const contextValue = React.useMemo(() => ({
+		value,
+		setValue,
+		disabled
+	}), [
+		value,
+		setValue,
+		disabled
+	]);
+	return <ChipRadioGroupContext.Provider value={contextValue}>
+      <view {...ref ? { ref } : {}} className={className} {...nativeProps}>
+        {children}
+      </view>
+    </ChipRadioGroupContext.Provider>;
+});
+ChipRadioRoot.displayName = "ChipRadioRoot";
+var ChipRadioItem = React.forwardRef((props, ref) => {
+	const { value: itemValue, disabled: itemDisabled = false, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-traits": accessibilityTraits, ...restProps } = props;
+	const group = useChipRadioGroupContext("ChipRadioItem");
+	const disabled = group.disabled || itemDisabled;
+	const selected = group.value === itemValue;
+	const { pressed, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: React.useCallback((...args) => {
+			if (!selected) group.setValue(itemValue);
+			bindtap?.(...args);
+		}, [
+			bindtap,
+			group,
+			itemValue,
+			selected
+		]),
+		mainThreadOnTap: mainThreadBindtap
+	});
+	return <ChipRootView ref={ref} {...restProps} disabled={disabled} selected={selected} pressed={pressed} accessibility-element={accessibilityElement} accessibility-traits={disabled ? "disabled" : selected ? "selected" : accessibilityTraits ?? "button"} {...pressHandlers} />;
+});
+ChipRadioItem.displayName = "ChipRadioItem";
+var ChipLabel = React.forwardRef((props, ref) => {
+	const classes = useClassNames();
+	const { children, className, ...nativeProps } = props;
+	return <text {...ref ? { ref } : {}} className={clsx(classes.label, className)} {...nativeProps}>
+      {children}
+    </text>;
+});
+ChipLabel.displayName = "ChipLabel";
+var ChipPrefixIcon = React.forwardRef((props, ref) => <PrefixIcon ref={ref} {...props} />);
+ChipPrefixIcon.displayName = "ChipPrefixIcon";
+var ChipPrefixAvatar = React.forwardRef((props, ref) => {
+	const classes = useClassNames();
+	const { children, className, ...nativeProps } = props;
+	return <view {...ref ? { ref } : {}} className={clsx(classes.prefixAvatar, className)} {...nativeProps}>
+      {children}
+    </view>;
+});
+ChipPrefixAvatar.displayName = "ChipPrefixAvatar";
+var ChipSuffixIcon = React.forwardRef((props, ref) => <SuffixIcon ref={ref} {...props} />);
+ChipSuffixIcon.displayName = "ChipSuffixIcon";
+//#endregion
+export { ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle };

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

@@ -0,0 +1,2 @@
+export { ChipButton as Button, ChipLabel as Label, ChipPrefixAvatar as PrefixAvatar, ChipPrefixIcon as PrefixIcon, ChipRadioItem as RadioItem, ChipRadioRoot as RadioRoot, ChipRoot as Root, ChipSuffixIcon as SuffixIcon, ChipToggle as Toggle, type ChipButtonProps as ButtonProps, type ChipLabelProps as LabelProps, type ChipPrefixAvatarProps as PrefixAvatarProps, type ChipPrefixIconProps as PrefixIconProps, type ChipRadioItemProps as RadioItemProps, type ChipRadioRootProps as RadioRootProps, type ChipRootProps as RootProps, type ChipSuffixIconProps as SuffixIconProps, type ChipToggleProps as ToggleProps, } from './Chip';
+//# sourceMappingURL=Chip.namespace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,MAAM,EACpB,SAAS,IAAI,KAAK,EAClB,gBAAgB,IAAI,YAAY,EAChC,cAAc,IAAI,UAAU,EAC5B,aAAa,IAAI,SAAS,EAC1B,aAAa,IAAI,SAAS,EAC1B,QAAQ,IAAI,IAAI,EAChB,cAAc,IAAI,UAAU,EAC5B,UAAU,IAAI,MAAM,EACpB,KAAK,eAAe,IAAI,WAAW,EACnC,KAAK,cAAc,IAAI,UAAU,EACjC,KAAK,qBAAqB,IAAI,iBAAiB,EAC/C,KAAK,mBAAmB,IAAI,eAAe,EAC3C,KAAK,kBAAkB,IAAI,cAAc,EACzC,KAAK,kBAAkB,IAAI,cAAc,EACzC,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,mBAAmB,IAAI,eAAe,EAC3C,KAAK,eAAe,IAAI,WAAW,GACpC,MAAM,QAAQ,CAAC"}

package/lib/components/Chip/Chip.namespace.js

@@ -0,0 +1,16 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle } from "./Chip.jsx";
+//#region src/components/Chip/Chip.namespace.ts
+var Chip_namespace_exports = /* @__PURE__ */ __exportAll({
+	Button: () => ChipButton,
+	Label: () => ChipLabel,
+	PrefixAvatar: () => ChipPrefixAvatar,
+	PrefixIcon: () => ChipPrefixIcon,
+	RadioItem: () => ChipRadioItem,
+	RadioRoot: () => ChipRadioRoot,
+	Root: () => ChipRoot,
+	SuffixIcon: () => ChipSuffixIcon,
+	Toggle: () => ChipToggle
+});
+//#endregion
+export { Chip_namespace_exports };

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

@@ -0,0 +1,3 @@
+export { ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle, type ChipButtonProps, type ChipLabelProps, type ChipPrefixAvatarProps, type ChipPrefixIconProps, type ChipRadioItemProps, type ChipRadioRootProps, type ChipRootProps, type ChipSuffixIconProps, type ChipToggleProps, } from './Chip';
+export * as Chip from './Chip.namespace';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,aAAa,EACb,QAAQ,EACR,cAAc,EACd,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,KAAK,eAAe,GACrB,MAAM,QAAQ,CAAC;AAEhB,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAC"}

package/lib/components/Divider/Divider.d.ts

@@ -0,0 +1,31 @@
+import { LynxAccessibilityProps, LynxStyledElementProps } from '../../types';
+import { StyleProps } from '../../utils/styled';
+import * as React from "@lynx-js/react";
+export interface DividerProps extends Omit<LynxStyledElementProps, "children">, LynxAccessibilityProps {
+    /**
+     * @default "stroke.neutralMuted"
+     */
+    color?: StyleProps["borderColor"];
+    /**
+     * @default 1
+     */
+    thickness?: StyleProps["borderWidth"];
+    /**
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Adds 16px of spacing to both ends of the divider.
+     * @default false
+     */
+    inset?: boolean;
+}
+/**
+ * @platform Lynx
+ *
+ * 웹의 `<hr>` 대신 native `<view>`를 렌더링합니다. 구분선은 기본적으로 접근성
+ * 요소로 노출되며 `accessibility-role-description="separator"`를 사용합니다.
+ * 장식용 구분선은 `accessibility-element={false}`로 접근성 트리에서 제외하세요.
+ */
+export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<unknown>>;
+//# sourceMappingURL=Divider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,sBAAsB,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAClF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,UAAU,CAAC,EAC9C,sBAAsB;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IAElC;;OAEG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IAEtC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,8EAmClB,CAAC"}

package/lib/components/Divider/Divider.jsx

@@ -0,0 +1,26 @@
+import { Box } from "../Box/Box.jsx";
+import * as React from "@lynx-js/react";
+//#region src/components/Divider/Divider.tsx
+/**
+* @platform Lynx
+*
+* 웹의 `<hr>` 대신 native `<view>`를 렌더링합니다. 구분선은 기본적으로 접근성
+* 요소로 노출되며 `accessibility-role-description="separator"`를 사용합니다.
+* 장식용 구분선은 `accessibility-element={false}`로 접근성 트리에서 제외하세요.
+*/
+var Divider = React.forwardRef((props, ref) => {
+	const { color = "stroke.neutralMuted", thickness = 1, orientation = "horizontal", inset = false, style, "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "separator", ...nativeProps } = props;
+	const isHorizontal = orientation === "horizontal";
+	return <Box {...nativeProps} ref={ref} borderColor={color} borderWidth={0} borderBottomWidth={isHorizontal ? thickness : 0} borderRightWidth={isHorizontal ? 0 : thickness} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} style={{
+		width: isHorizontal ? inset ? "calc(100% - 32px)" : "100%" : void 0,
+		height: isHorizontal ? void 0 : inset ? "calc(100% - 32px)" : "100%",
+		marginLeft: inset && isHorizontal ? "16px" : void 0,
+		marginRight: inset && isHorizontal ? "16px" : void 0,
+		marginTop: inset && !isHorizontal ? "16px" : void 0,
+		marginBottom: inset && !isHorizontal ? "16px" : void 0,
+		...style
+	}} />;
+});
+Divider.displayName = "Divider";
+//#endregion
+export { Divider };

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

@@ -0,0 +1,2 @@
+export { Divider, type DividerProps } from './Divider';
+//# sourceMappingURL=index.d.ts.map

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

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

package/lib/components/Field/Field.jsx

@@ -1,7 +1,7 @@
 import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
 import { FieldContext, useFieldContext } from "./context.js";
-import clsx from "clsx";
 import * as React from "@lynx-js/react";
+import clsx from "clsx";
 import { field } from "@seed-design/lynx-css/recipes/field";
 import { fieldLabel } from "@seed-design/lynx-css/recipes/field-label";
 //#region src/components/Field/Field.tsx

package/lib/components/Icon/Icon.jsx

@@ -1,8 +1,8 @@
-import { handleColor, handleDimension } from "../../utils/styled.js";
 import { useIconColor } from "../../hooks/useIconColor.js";
-import clsx from "clsx";
+import { handleColor, handleDimension } from "../../utils/styled.js";
 import * as React from "@lynx-js/react";
 import { cloneElement, isValidElement, useMainThreadRef } from "@lynx-js/react";
+import clsx from "clsx";
 //#region src/components/Icon/Icon.tsx
 var IconSlotContext = React.createContext(null);
 var IconRequiredContext = React.createContext(null);

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;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"}
+{"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;AA2IvE,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"}

package/lib/components/ProgressCircle/ProgressCircle.jsx

@@ -1,6 +1,6 @@
-import { progressCircle } from "@seed-design/lynx-css/recipes/progress-circle";
-import clsx from "clsx";
 import { createContext, forwardRef, runOnMainThread, useContext, useEffect, useMainThreadRef, useMemo } from "@lynx-js/react";
+import clsx from "clsx";
+import { progressCircle } from "@seed-design/lynx-css/recipes/progress-circle";
 //#region src/components/ProgressCircle/ProgressCircle.tsx
 var ProgressCircleContext = createContext(null);
 function useProgressCircleContext() {
@@ -18,6 +18,34 @@ function computeRingGeometry(numSize) {
 		capSize: halfSize - innerR
 	};
 }
+function bgCubicBezier(rawT, x1, y1, x2, y2) {
+	const t = Math.max(0, Math.min(1, rawT));
+	const cx = 3 * x1;
+	const bx = 3 * (x2 - x1) - cx;
+	const ax = 1 - cx - bx;
+	let currentT = t;
+	for (let i = 0; i < 8; i++) {
+		const currentX = ((ax * currentT + bx) * currentT + cx) * currentT - t;
+		const currentDx = (3 * ax * currentT + 2 * bx) * currentT + cx;
+		if (Math.abs(currentDx) < 1e-6) break;
+		currentT = currentT - currentX / currentDx;
+	}
+	const cy = 3 * y1;
+	const by = 3 * (y2 - y1) - cy;
+	return (((1 - cy - by) * currentT + by) * currentT + cy) * currentT;
+}
+function bgSampleIndeterminate(t) {
+	const containerEased = bgCubicBezier(t, .35, .25, .65, .75);
+	const headEased = bgCubicBezier(t, .35, 0, .65, 1);
+	const tailEased = bgCubicBezier(t, .35, 0, .65, .6);
+	const headLength = headEased <= .75 ? headEased / .75 * 360 : 360;
+	const tailOffset = tailEased <= 1 / 3 ? 0 : (tailEased - 1 / 3) / (2 / 3) * 360;
+	const arcLength = Math.max(0, headLength - tailOffset);
+	return {
+		containerDeg: containerEased * 360 + tailOffset,
+		arcLength
+	};
+}
 function bgPieClipPath(size, angleDeg) {
 	if (angleDeg >= 360) return void 0;
 	if (angleDeg <= 0) return "path(\"M 0 0 Z\")";
@@ -72,6 +100,7 @@ function sampleIndeterminate(t) {
 	};
 }
 var INDETERMINATE_DURATION = 1200;
+var INDETERMINATE_INITIAL_PHASE = 1 / 6;
 var TRANSITION_DURATION = 300;
 /**
 * Lynx에서 SVG를 사용할 수 없어 CSS clip-path 기반 pie sector로 구현.
@@ -220,7 +249,7 @@ function IndeterminateRange({ numSize, classes }) {
 		let startTs = 0;
 		function tick(ts) {
 			if (!startTs) startTs = Number(ts);
-			const state = sampleIndeterminate((ts - startTs) % INDETERMINATE_DURATION / INDETERMINATE_DURATION);
+			const state = sampleIndeterminate((ts - startTs + INDETERMINATE_DURATION * INDETERMINATE_INITIAL_PHASE) % INDETERMINATE_DURATION / INDETERMINATE_DURATION);
 			containerEl?.setStyleProperty("transform", `rotate(${state.containerDeg}deg)`);
 			const clipPath = pieClipPath(numSize, state.arcLength);
 			if (clipPath) rangeEl?.setStyleProperty("clip-path", clipPath);
@@ -247,12 +276,14 @@ function IndeterminateRange({ numSize, classes }) {
 			runOnMainThread(stopLoop)();
 		};
 	}, [numSize]);
-	const initialClipPath = "path(\"M 0 0 Z\")";
+	const initialState = bgSampleIndeterminate(INDETERMINATE_INITIAL_PHASE);
+	const initialClipPath = bgPieClipPath(numSize, initialState.arcLength);
+	const initialHeadRad = initialState.arcLength * Math.PI / 180;
 	return <view main-thread:ref={containerRef} style={{
 		position: "absolute",
 		width: `${numSize}px`,
 		height: `${numSize}px`,
-		transform: "rotate(0deg)"
+		transform: `rotate(${initialState.containerDeg}deg)`
 	}}>
       <view main-thread:ref={rangeRef} className={classes.range} style={{
 		position: "absolute",
@@ -270,8 +301,8 @@ function IndeterminateRange({ numSize, classes }) {
       <view main-thread:ref={headCapRef} className={classes.cap} style={{
 		width: `${capSize}px`,
 		height: `${capSize}px`,
-		left: `${halfSize - capSize / 2}px`,
-		top: `${halfSize - ringCenterR - capSize / 2}px`
+		left: `${halfSize + ringCenterR * Math.sin(initialHeadRad) - capSize / 2}px`,
+		top: `${halfSize - ringCenterR * Math.cos(initialHeadRad) - capSize / 2}px`
 	}} />
     </view>;
 }

package/lib/components/RadioGroup/RadioGroup.jsx

@@ -1,10 +1,10 @@
+import { useControllableState } from "../../hooks/useControllableState.js";
 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 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";

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,KAAK,eAAe,GAChB,SAAS,GACT,eAAe,GACf,YAAY,GACZ,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,YAAY,CAAC;AAEjB,UAAU,cAAe,SAAQ,UAAU,EAAE,sBAAsB,EAAE,kBAAkB;IACrF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC;IACvE,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AAElD,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AA0ClD,eAAO,MAAM,MAAM,6EAIjB,CAAC;AAIH,eAAO,MAAM,MAAM,6EAIjB,CAAC"}
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AAExC,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAe,MAAM,aAAa,CAAC;AAC3F,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,KAAK,eAAe,GAChB,SAAS,GACT,eAAe,GACf,YAAY,GACZ,gBAAgB,GAChB,UAAU,GACV,UAAU,GACV,YAAY,CAAC;AAEjB,UAAU,cAAe,SAAQ,UAAU,EAAE,sBAAsB,EAAE,kBAAkB;IACrF,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC;IACvE,KAAK,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CACvC;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AAElD,MAAM,WAAW,WAAY,SAAQ,UAAU;CAAG;AAwDlD,eAAO,MAAM,MAAM,6EAIjB,CAAC;AAIH,eAAO,MAAM,MAAM,6EAIjB,CAAC"}

package/lib/components/Stack/Stack.jsx

@@ -1,6 +1,6 @@
 import { useStyleProps } from "../../utils/styled.js";
-import clsx from "clsx";
 import * as React from "@lynx-js/react";
+import clsx from "clsx";
 //#region src/components/Stack/Stack.tsx
 function getStackProps(props) {
 	const { align, justify, wrap, grow, shrink, ...restProps } = props;
@@ -14,11 +14,20 @@ function getStackProps(props) {
 	};
 }
 function useStackStyleProps(props, flexDirection) {
-	return useStyleProps({
+	const stackStyleProps = useStyleProps({
 		display: "flex",
 		flexDirection,
 		...getStackProps(props)
 	});
+	const { gap, ...style } = stackStyleProps.style;
+	if (gap == null) return stackStyleProps;
+	return {
+		...stackStyleProps,
+		style: {
+			[flexDirection === "column" ? "rowGap" : "columnGap"]: gap,
+			...style
+		}
+	};
 }
 function renderStackView(stackStyleProps, ref) {
 	const { style, restProps } = stackStyleProps;

package/lib/components/Switch/Switch.jsx

@@ -1,8 +1,8 @@
-import { usePressTap } from "../../hooks/usePressTap.js";
 import { useControllableState } from "../../hooks/useControllableState.js";
+import { usePressTap } from "../../hooks/usePressTap.js";
 import { splitMultipleVariantsProps } from "../../utils/split-multiple-variants-props.js";
-import clsx from "clsx";
 import * as React from "@lynx-js/react";
+import clsx from "clsx";
 import { switchStyle } from "@seed-design/lynx-css/recipes/switch";
 import { switchmark } from "@seed-design/lynx-css/recipes/switchmark";
 //#region src/components/Switch/Switch.tsx