@seed-design/lynx-react 0.4.1 → 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.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() {

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.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;

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

package/lib/components/Tabs/Tabs.d.ts

@@ -0,0 +1,59 @@
+import { TabsVariantProps } from '@seed-design/lynx-css/recipes/tabs';
+import { IntrinsicElements } from '@lynx-js/types';
+import { LynxAccessibilityProps, LynxStyledElementProps } from '../../types';
+import * as React from "@lynx-js/react";
+type NativeViewPagerProps = IntrinsicElements["viewpager"];
+type TabsPublicVariantProps = Omit<TabsVariantProps, "selected" | "disabled" | "inCarousel">;
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - `orientation`: Lynx Tabs는 수평 방향만 지원
+ * - `lazyMount`, `unmountOnExit`: native viewpager가 모든 page slot을 유지해야 함
+ * - 키보드 포커스와 roving tabindex
+ */
+export interface TabsRootProps extends TabsPublicVariantProps, LynxStyledElementProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export declare const TabsRoot: React.ForwardRefExoticComponent<TabsRootProps & React.RefAttributes<unknown>>;
+export interface TabsListProps extends LynxStyledElementProps {
+}
+export declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<unknown>>;
+export interface TabsTriggerProps extends LynxStyledElementProps {
+    value: string;
+    disabled?: boolean;
+    "accessibility-label"?: LynxAccessibilityProps["accessibility-label"];
+}
+export declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<unknown>>;
+export interface TabsIndicatorProps extends LynxStyledElementProps {
+}
+export declare const TabsIndicator: React.ForwardRefExoticComponent<TabsIndicatorProps & React.RefAttributes<unknown>>;
+export interface TabsContentProps extends LynxStyledElementProps {
+    value: string;
+}
+export declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<unknown>>;
+/**
+ * @platform Lynx
+ *
+ * native viewpager를 사용하므로 웹의 `loop`, `autoHeight`, `dragThreshold`,
+ * `carouselPreventDrag`는 지원하지 않습니다.
+ */
+export interface TabsCarouselProps extends LynxStyledElementProps {
+    swipeable?: boolean;
+    /** iOS 뒤로가기 제스처를 우선하는 화면 왼쪽 가장자리 너비입니다. */
+    iosBackGestureEdgeWidth?: number;
+    onSettle?: () => void;
+    onSwipeStart?: () => void;
+    onSwipeEnd?: () => void;
+}
+export declare const TabsCarousel: React.ForwardRefExoticComponent<TabsCarouselProps & React.RefAttributes<unknown>>;
+export interface TabsCarouselCameraProps extends LynxStyledElementProps {
+    bindchange?: NativeViewPagerProps["bindchange"];
+    bindwillchange?: NativeViewPagerProps["bindwillchange"];
+    bindoffsetchange?: NativeViewPagerProps["bindoffsetchange"];
+}
+export declare const TabsCarouselCamera: React.ForwardRefExoticComponent<TabsCarouselCameraProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,oCAAoC,CAAC;AACjF,OAAO,KAAK,KAAK,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EACV,iBAAiB,EAMlB,MAAM,gBAAgB,CAAC;AAKxB,OAAO,KAAK,EACV,sBAAsB,EACtB,sBAAsB,EAGvB,MAAM,aAAa,CAAC;AAIrB,KAAK,oBAAoB,GAAG,iBAAiB,CAAC,WAAW,CAAC,CAAC;AAI3D,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,GAAG,YAAY,CAAC,CAAC;AAyF7F;;;;;;;GAOG;AACH,MAAM,WAAW,aAAc,SAAQ,sBAAsB,EAAE,sBAAsB;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,QAAQ,+EAmMnB,CAAC;AAKH,MAAM,WAAW,aAAc,SAAQ,sBAAsB;CAAG;AAEhE,eAAO,MAAM,QAAQ,+EAsCnB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,sBAAsB,CAAC,qBAAqB,CAAC,CAAC;CACvE;AAED,eAAO,MAAM,WAAW,kFAiEtB,CAAC;AAKH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;CAAG;AAErE,eAAO,MAAM,aAAa,oFAkCxB,CAAC;AAKH,MAAM,WAAW,gBAAiB,SAAQ,sBAAsB;IAC9D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,WAAW,kFAgCtB,CAAC;AAKH;;;;;GAKG;AACH,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,mFA8BvB,CAAC;AAKH,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,UAAU,CAAC,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;IAChD,cAAc,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACxD,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;CAC7D;AAED,eAAO,MAAM,kBAAkB,yFAmH9B,CAAC"}