@seed-design/lynx-react 0.4.0 → 0.5.0

package/lib/components/TextField/TextField.jsx

@@ -3,14 +3,20 @@ import { InternalIcon } from "../Icon/Icon.jsx";
 import { useFieldContext } from "../Field/context.js";
 import { useKeyboardAvoidanceActions } from "../KeyboardAvoidingScrollView/context.js";
 import { NATIVE_TEXT_MAX_LENGTH_UNLIMITED, TextFieldContext } from "./context.js";
-import { textInput } from "@seed-design/lynx-css/vars/component";
-import clsx from "clsx";
 import * as React from "@lynx-js/react";
+import clsx from "clsx";
+import { textInput } from "@seed-design/lynx-css/vars/component";
 import { textInput as textInput$1 } from "@seed-design/lynx-css/recipes/text-input";
 //#region src/components/TextField/TextField.tsx
 var ANDROID_TEXTAREA_DEFAULT_LINE_SPACING = "3.2px";
+function getRuntimePlatform() {
+	return (globalThis.SystemInfo ?? (typeof SystemInfo === "undefined" ? void 0 : SystemInfo))?.platform;
+}
 function isAndroidRuntime() {
-	return (globalThis.SystemInfo ?? (typeof SystemInfo === "undefined" ? void 0 : SystemInfo))?.platform === "Android";
+	return getRuntimePlatform() === "Android";
+}
+function isIOSRuntime() {
+	return getRuntimePlatform() === "iOS";
 }
 var { ClassNamesProvider, useClassNames } = createSlotRecipeContext(textInput$1);
 var TextFieldRoot = React.forwardRef((props, forwardedRef) => {
@@ -340,7 +346,7 @@ var TextFieldInput = React.forwardRef((props, ref) => {
         {displayValue}
       </text>;
 	}
-	return <input {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={control.readOnly ? false : showSoftInputOnFocus} android-set-soft-input-mode={androidSetSoftInputMode} name={name ?? control.context.name} maxlength={resolvedMaxLength} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} {...nativeProps} />;
+	return <input {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={showSoftInputOnFocus ?? true} android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"} name={name ?? control.context.name} {...resolvedMaxLength === void 0 ? {} : { maxlength: resolvedMaxLength }} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} {...nativeProps} />;
 });
 TextFieldInput.displayName = "TextFieldInput";
 var TextFieldTextarea = React.forwardRef((props, ref) => {
@@ -356,17 +362,27 @@ var TextFieldTextarea = React.forwardRef((props, ref) => {
 	});
 	const resolvedMaxLength = useResolvedNativeMaxLength(maxlength, control.nativeInsertionMaxLength);
 	const isAndroid = isAndroidRuntime();
+	const usesIOSAutoresizeWrapper = autoresize && isIOSRuntime();
 	const resolvedLineSpacing = lineSpacing !== void 0 ? lineSpacing : isAndroid ? ANDROID_TEXTAREA_DEFAULT_LINE_SPACING : void 0;
 	const handleSelection = React.useCallback((event) => {
 		"background only";
 		control.handleSelectionChange(event.detail);
 		bindselection?.(event);
 	}, [bindselection, control.handleSelectionChange]);
+	const handleLayoutChange = React.useCallback((event) => {
+		"background only";
+		if (autoresize) control.notifyLayoutChanged();
+		bindlayoutchange?.(event);
+	}, [
+		autoresize,
+		bindlayoutchange,
+		control.notifyLayoutChanged
+	]);
 	const handleTextareaRootTap = React.useCallback((event) => {
 		"background only";
-		if (event.target.uid !== event.currentTarget.uid) return;
+		if (control.disabled || event.target.uid !== event.currentTarget.uid) return;
 		control.focusNativeControl();
-	}, [control.focusNativeControl]);
+	}, [control.disabled, control.focusNativeControl]);
 	if (control.readOnly) {
 		const value = control.context.value;
 		const isPlaceholder = value === "";
@@ -379,9 +395,9 @@ var TextFieldTextarea = React.forwardRef((props, ref) => {
           {isPlaceholder ? props.placeholder : value}
         </text>;
 	}
-	const textarea = <textarea {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, classes.textareaValue, autoresize ? classes.textareaNativeAutoresize : classes.textareaFixed, autoresize && isAndroid && classes.textareaAndroidAutoresize, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={control.readOnly ? false : showSoftInputOnFocus} bounces={bounces ?? (autoresize ? false : void 0)} line-spacing={resolvedLineSpacing} android-fullscreen-mode={androidFullscreenMode ?? false} android-set-soft-input-mode={androidSetSoftInputMode} name={name ?? control.context.name} maxlength={resolvedMaxLength} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} bindlayoutchange={bindlayoutchange} {...nativeProps} />;
-	if (!autoresize) return textarea;
-	return <view className={clsx(classes.textareaRoot, !isAndroid && classes.textareaAutoresizeRoot)} bindtap={handleTextareaRootTap} bindlayoutchange={control.notifyLayoutChanged}>
+	const textarea = <textarea {...control.defaultValueProps} ref={control.mergedRef} className={clsx(classes.value, classes.textareaValue, !autoresize && classes.textareaFixed, usesIOSAutoresizeWrapper && classes.textareaNativeAutoresize, autoresize && !usesIOSAutoresizeWrapper && classes.textareaAndroidAutoresize, className)} disabled={control.disabled} readonly={control.readOnly} show-soft-input-on-focus={showSoftInputOnFocus ?? true} bounces={bounces ?? (autoresize ? false : void 0)} line-spacing={resolvedLineSpacing} android-fullscreen-mode={androidFullscreenMode ?? false} android-set-soft-input-mode={androidSetSoftInputMode ?? "unspecified"} name={name ?? control.context.name} {...resolvedMaxLength === void 0 ? {} : { maxlength: resolvedMaxLength }} bindinput={control.handleInput} bindselection={handleSelection} bindfocus={control.handleFocus} bindblur={control.handleBlur} bindlayoutchange={usesIOSAutoresizeWrapper ? bindlayoutchange : handleLayoutChange} {...nativeProps} />;
+	if (!usesIOSAutoresizeWrapper) return textarea;
+	return <view ignore-focus={true} className={clsx(classes.textareaRoot, classes.textareaAutoresizeRoot)} bindtap={handleTextareaRootTap} bindlayoutchange={control.notifyLayoutChanged}>
         {textarea}
       </view>;
 });

package/lib/components/index.d.ts

@@ -1,9 +1,13 @@
+export * from './Accordion';
 export * from './ActionButton';
 export * from './AppBar';
 export * from './Badge';
 export * from './Box';
 export * from './BottomSheet';
+export * from './Callout';
 export * from './Checkbox';
+export * from './Chip';
+export * from './Divider';
 export * from './Field';
 export * from './Icon';
 export * from './KeyboardAvoidingScrollView';
@@ -11,6 +15,7 @@ export * from './ProgressCircle';
 export * from './RadioGroup';
 export * from './Stack';
 export * from './Switch';
+export * from './Tabs';
 export * from './TagGroup';
 export * from './Text';
 export * from './TextField';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC"}

package/lib/hooks/useIconColor.d.ts

@@ -5,7 +5,8 @@ export interface UseIconColorOptions {
 }
 /**
  * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
- * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
+ * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
+ * 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
  *
  * ```tsx
  * const iconColorProps = useIconColor([variant, disabled, loading]);

package/lib/hooks/useIconColor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;CAC3C;AAyBD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAeA"}
+{"version":3,"file":"useIconColor.d.ts","sourceRoot":"","sources":["../../src/hooks/useIconColor.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;CAC3C;AA0DD;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,mBAAmB,GAC5B;IACD,GAAG,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACnC,0BAA0B,EAAE,MAAM,IAAI,CAAC;CACxC,CAmBA"}

package/lib/hooks/useIconColor.js

@@ -1,6 +1,6 @@
 import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
 //#region src/hooks/useIconColor.ts
-function syncTintColor(targetRef, sourceRef) {
+function syncTintColorOnce(targetRef, sourceRef) {
 	"main thread";
 	const target = targetRef.current;
 	if (!target) return;
@@ -8,11 +8,31 @@ function syncTintColor(targetRef, sourceRef) {
 	let color;
 	if (typeof source.getComputedStyleProperty === "function") color = source.getComputedStyleProperty("color");
 	else if (typeof source.getComputedCssProperty === "function") color = source.getComputedCssProperty("color");
-	if (color) target.setAttribute("tint-color", color);
+	if (color && target.getAttribute("tint-color") !== color) target.setAttribute("tint-color", color);
+}
+function scheduleTintColorSync(targetRef, sourceRef, frameRef) {
+	"main thread";
+	if (frameRef.current && typeof cancelAnimationFrame === "function") {
+		cancelAnimationFrame(frameRef.current);
+		frameRef.current = 0;
+	}
+	if (typeof requestAnimationFrame === "function") frameRef.current = requestAnimationFrame(() => {
+		frameRef.current = 0;
+		syncTintColorOnce(targetRef, sourceRef);
+	});
+	else syncTintColorOnce(targetRef, sourceRef);
+}
+function cancelTintColorSync(frameRef) {
+	"main thread";
+	if (frameRef.current && typeof cancelAnimationFrame === "function") {
+		cancelAnimationFrame(frameRef.current);
+		frameRef.current = 0;
+	}
 }
 /**
 * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
-* `tint-color` attribute 로 mirror. `deps` 가 바뀌면 재동기화.
+* `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
+* 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
 *
 * ```tsx
 * const iconColorProps = useIconColor([variant, disabled, loading]);
@@ -22,12 +42,16 @@ function syncTintColor(targetRef, sourceRef) {
 function useIconColor(deps, options) {
 	const ref = useMainThreadRef(null);
 	const sourceRef = options?.sourceRef;
+	const frameRef = useMainThreadRef(0);
 	function syncOnUiAppear() {
 		"main thread";
-		syncTintColor(ref, sourceRef);
+		syncTintColorOnce(ref, sourceRef);
 	}
 	useEffect(() => {
-		runOnMainThread(syncTintColor)(ref, sourceRef);
+		runOnMainThread(scheduleTintColorSync)(ref, sourceRef, frameRef);
+		return () => {
+			runOnMainThread(cancelTintColorSync)(frameRef);
+		};
 	}, deps);
 	return {
 		ref,

package/lib/hooks/usePressTap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePressTap.d.ts","sourceRoot":"","sources":["../../src/hooks/usePressTap.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,KAAK,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AAEzD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,cAAc,EAAE,YAAY,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,YAAY,CAAC;IAC9B,qBAAqB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CAC/D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA0B/E"}
+{"version":3,"file":"usePressTap.d.ts","sourceRoot":"","sources":["../../src/hooks/usePressTap.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,KAAK,YAAY,GAAG,YAAY,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AAEzD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CACzD;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,YAAY,CAAC;IACtB,cAAc,EAAE,YAAY,CAAC;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,YAAY,CAAC;IAC9B,qBAAqB,CAAC,EAAE,cAAc,CAAC,qBAAqB,CAAC,CAAC;CAC/D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAE,kBAAuB,GAAG,iBAAiB,CA2B/E"}

package/lib/hooks/usePressTap.js

@@ -23,6 +23,7 @@ function usePressTap(options = {}) {
 		pressed,
 		bindtap: useMemoizedFn((...args) => {
 			if (disabled) return;
+			setPressed(false);
 			onTap?.(...args);
 		}),
 		bindtouchstart: press,

package/lib/index.js

@@ -1,11 +1,14 @@
+import { useControllableState } from "./hooks/useControllableState.js";
 import { usePressTap } from "./hooks/usePressTap.js";
 import { createSlotRecipeContext } from "./utils/create-slot-recipe-context.jsx";
-import { capitalize, resolveRecipeToken } from "./utils/resolve-recipe-token.js";
+import { useIconColor } from "./hooks/useIconColor.js";
 import { useSafeArea } from "./hooks/useSafeArea.js";
+import { Icon, PrefixIcon, SuffixIcon } from "./components/Icon/Icon.jsx";
+import { AccordionBody, AccordionContent, AccordionDescription, AccordionHeader, AccordionItem, AccordionPrefix, AccordionRoot, AccordionSuffixIcon, AccordionTitle, AccordionTrigger } from "./components/Accordion/Accordion.jsx";
+import { Accordion_namespace_exports } from "./components/Accordion/Accordion.namespace.js";
+import { capitalize, resolveRecipeToken } from "./utils/resolve-recipe-token.js";
 import { ProgressCircleRange, ProgressCircleRoot } from "./components/ProgressCircle/ProgressCircle.jsx";
 import { ProgressCircle_namespace_exports } from "./components/ProgressCircle/ProgressCircle.namespace.js";
-import { useIconColor } from "./hooks/useIconColor.js";
-import { Icon, PrefixIcon, SuffixIcon } from "./components/Icon/Icon.jsx";
 import { ActionButton } from "./components/ActionButton/ActionButton.jsx";
 import { AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle } from "./components/AppBar/AppBar.jsx";
 import { AppBar_namespace_exports } from "./components/AppBar/AppBar.namespace.js";
@@ -13,10 +16,14 @@ import { Badge } from "./components/Badge/Badge.jsx";
 import { Box } from "./components/Box/Box.jsx";
 import { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger } from "./components/BottomSheet/BottomSheet.jsx";
 import { BottomSheet_namespace_exports } from "./components/BottomSheet/BottomSheet.namespace.js";
-import { useControllableState } from "./hooks/useControllableState.js";
+import { CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle } from "./components/Callout/Callout.jsx";
+import { Callout_namespace_exports } from "./components/Callout/Callout.namespace.js";
 import { splitMultipleVariantsProps } from "./utils/split-multiple-variants-props.js";
 import { CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from "./components/Checkbox/Checkbox.jsx";
 import { Checkbox_namespace_exports } from "./components/Checkbox/Checkbox.namespace.js";
+import { ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle } from "./components/Chip/Chip.jsx";
+import { Chip_namespace_exports } from "./components/Chip/Chip.namespace.js";
+import { Divider } from "./components/Divider/Divider.jsx";
 import { FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot } from "./components/Field/Field.jsx";
 import { Field_namespace_exports } from "./components/Field/Field.namespace.js";
 import { KeyboardAvoidingScrollView } from "./components/KeyboardAvoidingScrollView/KeyboardAvoidingScrollView.jsx";
@@ -25,6 +32,8 @@ import { RadioGroup_namespace_exports } from "./components/RadioGroup/RadioGroup
 import { HStack, VStack } from "./components/Stack/Stack.jsx";
 import { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb } from "./components/Switch/Switch.jsx";
 import { Switch_namespace_exports } from "./components/Switch/Switch.namespace.js";
+import { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from "./components/Tabs/Tabs.jsx";
+import { Tabs_namespace_exports } from "./components/Tabs/Tabs.namespace.js";
 import { TagGroupItem, TagGroupItemLabel, TagGroupRoot } from "./components/TagGroup/TagGroup.jsx";
 import { TagGroup_namespace_exports } from "./components/TagGroup/TagGroup.namespace.js";
 import { Text } from "./components/Text/Text.jsx";
@@ -33,4 +42,4 @@ import { useTextFieldWithGraphemes } from "./components/TextField/useTextFieldWi
 import { TextField_namespace_exports } from "./components/TextField/TextField.namespace.js";
 import { getSeedClassName } from "./utils/get-seed-class-name.js";
 import { useSeedClassName } from "./hooks/useSeedClassName.js";
-export { ActionButton, AppBar_namespace_exports as AppBar, AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, Badge, BottomSheet_namespace_exports as BottomSheet, BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, Box, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, Field_namespace_exports as Field, FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot, HStack, Icon, KeyboardAvoidingScrollView, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, SuffixIcon, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, TextField_namespace_exports as TextField, TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea, useSeedClassName, useTextFieldWithGraphemes };
+export { Accordion_namespace_exports as Accordion, AccordionBody, AccordionContent, AccordionDescription, AccordionHeader, AccordionItem, AccordionPrefix, AccordionRoot, AccordionSuffixIcon, AccordionTitle, AccordionTrigger, ActionButton, AppBar_namespace_exports as AppBar, AppBarIconButton, AppBarLeft, AppBarMain, AppBarRight, AppBarRoot, AppBarSlot, AppBarSubtitle, AppBarTitle, Badge, BottomSheet_namespace_exports as BottomSheet, BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, Box, Callout_namespace_exports as Callout, CalloutCloseButton, CalloutContent, CalloutDescription, CalloutLink, CalloutRoot, CalloutTitle, Checkbox_namespace_exports as Checkbox, CheckboxControl, CheckboxGroup, CheckboxIndicator, CheckboxLabel, CheckboxRoot, Chip_namespace_exports as Chip, ChipButton, ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRadioItem, ChipRadioRoot, ChipRoot, ChipSuffixIcon, ChipToggle, Divider, Field_namespace_exports as Field, FieldCharacterCount, FieldDescription, FieldErrorMessage, FieldFooter, FieldHeader, FieldIndicatorText, FieldLabel, FieldRequiredIndicator, FieldRoot, HStack, Icon, KeyboardAvoidingScrollView, PrefixIcon, ProgressCircle_namespace_exports as ProgressCircle, ProgressCircleRange, ProgressCircleRoot, RadioGroup_namespace_exports as RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot, SuffixIcon, Switch_namespace_exports as Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, Tabs_namespace_exports as Tabs, TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, TagGroup_namespace_exports as TagGroup, TagGroupItem, TagGroupItemLabel, TagGroupRoot, Text, TextField_namespace_exports as TextField, TextFieldInput, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea, VStack, capitalize, createSlotRecipeContext, getSeedClassName, resolveRecipeToken, splitMultipleVariantsProps, useControllableState, useIconColor, usePressTap, useSafeArea, useSeedClassName, useTextFieldWithGraphemes };

package/lib/utils/create-slot-recipe-context.jsx

@@ -1,5 +1,5 @@
-import clsx from "clsx";
 import { createContext, forwardRef, useContext } from "@lynx-js/react";
+import clsx from "clsx";
 //#region src/utils/create-slot-recipe-context.tsx
 function assertNotIntrinsicComponent(Component, caller) {
 	if (typeof Component !== "string") return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/lynx-react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -34,12 +34,12 @@
   "peerDependencies": {
     "@lynx-js/react": ">=0.117.0",
     "@lynx-js/types": ">=3.7.0",
-    "@seed-design/lynx-css": "0.0.0 || >=0.1.0 <1.0.0"
+    "@seed-design/lynx-css": "0.0.0 || >=0.8.0 <1.0.0"
   },
   "devDependencies": {
     "@lynx-js/react": "^0.117.0",
     "@lynx-js/types": "^3.7.0",
-    "@seed-design/lynx-css": "0.8.0",
+    "@seed-design/lynx-css": "0.9.0",
     "@testing-library/jest-dom": "^6.9.1",
     "jsdom": "^29.0.2",
     "preact": "npm:@lynx-js/internal-preact@10.28.4-ee7bb26",

package/src/components/Accordion/Accordion.namespace.ts

@@ -0,0 +1,22 @@
+export {
+  AccordionBody as Body,
+  AccordionContent as Content,
+  AccordionDescription as Description,
+  AccordionHeader as Header,
+  AccordionItem as Item,
+  AccordionPrefix as Prefix,
+  AccordionRoot as Root,
+  AccordionSuffixIcon as SuffixIcon,
+  AccordionTitle as Title,
+  AccordionTrigger as Trigger,
+  type AccordionBodyProps as BodyProps,
+  type AccordionContentProps as ContentProps,
+  type AccordionDescriptionProps as DescriptionProps,
+  type AccordionHeaderProps as HeaderProps,
+  type AccordionItemProps as ItemProps,
+  type AccordionPrefixProps as PrefixProps,
+  type AccordionRootProps as RootProps,
+  type AccordionSuffixIconProps as SuffixIconProps,
+  type AccordionTitleProps as TitleProps,
+  type AccordionTriggerProps as TriggerProps,
+} from "./Accordion";

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,129 @@
+import "@testing-library/jest-dom";
+import { act, fireEvent, render } from "@lynx-js/react/testing-library";
+import type * as React from "@lynx-js/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { Accordion } from "./index";
+
+function getRenderedRoot() {
+  const root = elementTree.root;
+
+  if (!root) {
+    throw new Error("Expected Lynx render root to exist.");
+  }
+
+  return root;
+}
+
+function TestAccordion(props: React.ComponentProps<typeof Accordion.Root> = {}) {
+  return (
+    <Accordion.Root {...props}>
+      <Accordion.Item value="first">
+        <Accordion.Header>
+          <Accordion.Trigger className="first-trigger" accessibility-label="첫 번째">
+            <Accordion.Body>
+              <Accordion.Title>첫 번째</Accordion.Title>
+            </Accordion.Body>
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content className="first-content">
+          <text>첫 번째 내용</text>
+        </Accordion.Content>
+      </Accordion.Item>
+      <Accordion.Item value="second">
+        <Accordion.Header>
+          <Accordion.Trigger className="second-trigger" accessibility-label="두 번째">
+            <Accordion.Body>
+              <Accordion.Title>두 번째</Accordion.Title>
+            </Accordion.Body>
+          </Accordion.Trigger>
+        </Accordion.Header>
+        <Accordion.Content>
+          <text>두 번째 내용</text>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  );
+}
+
+describe("Accordion", () => {
+  it("opens and closes an item in uncontrolled mode", () => {
+    render(<TestAccordion />);
+
+    const trigger = getRenderedRoot().querySelector<HTMLElement>(".first-trigger");
+    const pressedOverlay = trigger?.querySelector<HTMLElement>(".seed-accordion__pressedOverlay");
+    expect(trigger).not.toBeNull();
+    expect(pressedOverlay).not.toBeNull();
+    expect(pressedOverlay).toHaveAttribute("accessibility-elements-hidden", "true");
+    expect(trigger).toHaveAttribute("accessibility-value", "접힘");
+
+    fireEvent.tap(trigger as HTMLElement);
+    expect(trigger).toHaveAttribute("accessibility-value", "펼쳐짐");
+
+    fireEvent.tap(trigger as HTMLElement);
+    expect(trigger).toHaveAttribute("accessibility-value", "접힘");
+  });
+
+  it("transitions content between zero and its measured height", () => {
+    render(<TestAccordion defaultValues={["first"]} />);
+
+    const root = getRenderedRoot();
+    const trigger = root.querySelector<HTMLElement>(".first-trigger");
+    const content = root.querySelector<HTMLElement>(".first-content");
+    const contentInner = content?.querySelector<HTMLElement>(".seed-accordion__contentInner");
+
+    expect(content).not.toBeNull();
+    expect(contentInner).not.toBeNull();
+    expect(content).toHaveStyle({ height: "0px" });
+
+    act(() => {
+      fireEvent.layoutchange(contentInner as HTMLElement, { height: 84 });
+    });
+
+    expect(content).toHaveStyle({ height: "84px" });
+
+    fireEvent.tap(trigger as HTMLElement);
+    expect(content).toHaveStyle({ height: "0px" });
+  });
+
+  it("keeps one item open by default and supports multiple mode", () => {
+    render(<TestAccordion multiple defaultValues={["first"]} />);
+
+    const root = getRenderedRoot();
+    const first = root.querySelector<HTMLElement>(".first-trigger");
+    const second = root.querySelector<HTMLElement>(".second-trigger");
+
+    expect(first).toHaveAttribute("accessibility-value", "펼쳐짐");
+    expect(second).toHaveAttribute("accessibility-value", "접힘");
+
+    fireEvent.tap(second as HTMLElement);
+    expect(first).toHaveAttribute("accessibility-value", "펼쳐짐");
+    expect(second).toHaveAttribute("accessibility-value", "펼쳐짐");
+  });
+
+  it("reports controlled value changes without mutating the rendered state", () => {
+    const onValuesChange = vi.fn();
+    render(<TestAccordion values={[]} onValuesChange={onValuesChange} />);
+
+    const trigger = getRenderedRoot().querySelector<HTMLElement>(".first-trigger");
+    fireEvent.tap(trigger as HTMLElement);
+
+    expect(onValuesChange).toHaveBeenCalledWith(["first"]);
+    expect(trigger).toHaveAttribute("accessibility-value", "접힘");
+  });
+
+  it("ignores tap when the root is disabled", () => {
+    const onValuesChange = vi.fn();
+    render(<TestAccordion disabled onValuesChange={onValuesChange} />);
+
+    const trigger = getRenderedRoot().querySelector<HTMLElement>(".first-trigger");
+    fireEvent.tap(trigger as HTMLElement);
+
+    expect(onValuesChange).not.toHaveBeenCalled();
+    expect(trigger).toHaveAttribute("accessibility-traits", "disabled");
+    expect(getRenderedRoot().querySelector(".first-content")).toHaveAttribute(
+      "accessibility-elements-hidden",
+      "true",
+    );
+  });
+});