@seed-design/lynx-react 0.5.2 → 0.6.1

package/lib/components/SegmentedControl/SegmentedControl.jsx

@@ -0,0 +1,120 @@
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { usePressTap } from "../../hooks/usePressTap.js";
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+import { segmentedControl } from "@seed-design/lynx-css/recipes/segmented-control";
+//#region src/components/SegmentedControl/SegmentedControl.tsx
+var SegmentedControlContext = React.createContext(null);
+var { ClassNamesProvider, useClassNames } = createSlotRecipeContext(segmentedControl);
+function useSegmentedControlContext(consumer) {
+	const context = React.useContext(SegmentedControlContext);
+	if (!context) throw new Error(`<${consumer}/> must be rendered inside <SegmentedControlRoot/>.`);
+	return context;
+}
+var SegmentedControlRoot = React.forwardRef((props, ref) => {
+	const { children, className, style, value: valueProp, defaultValue, disabled = false, onValueChange, "accessibility-element": accessibilityElement = true, "accessibility-role-description": accessibilityRoleDescription = "radiogroup", ...nativeProps } = props;
+	const [value, setValue] = useControllableState({
+		value: valueProp,
+		defaultValue,
+		onChange(nextValue) {
+			"background only";
+			if (nextValue !== void 0) onValueChange?.(nextValue);
+		}
+	});
+	const [items, setItems] = React.useState([]);
+	const registerItem = React.useCallback((itemValue) => {
+		setItems((current) => {
+			if (current.includes(itemValue)) return current;
+			return [...current, itemValue];
+		});
+		return () => {
+			"background only";
+			setItems((current) => current.filter((item) => item !== itemValue));
+		};
+	}, []);
+	const selectValue = React.useCallback((nextValue) => {
+		if (!disabled) setValue(nextValue);
+	}, [disabled, setValue]);
+	const selectedIndex = items.indexOf(value ?? "");
+	const classNames = segmentedControl({ hasSelection: selectedIndex >= 0 });
+	const contextValue = React.useMemo(() => ({
+		value,
+		disabled,
+		items,
+		selectValue,
+		registerItem
+	}), [
+		value,
+		disabled,
+		items,
+		selectValue,
+		registerItem
+	]);
+	return <SegmentedControlContext.Provider value={contextValue}>
+        <ClassNamesProvider value={classNames}>
+          <view {...ref ? { ref } : {}} {...nativeProps} accessibility-element={accessibilityElement} accessibility-role-description={accessibilityRoleDescription} className={clsx(classNames.root, className)} style={{
+		"--segment-count": Math.max(items.length, 1).toString(),
+		"--segment-index": Math.max(selectedIndex, 0).toString(),
+		...style
+	}}>
+            {children}
+          </view>
+        </ClassNamesProvider>
+      </SegmentedControlContext.Provider>;
+});
+SegmentedControlRoot.displayName = "SegmentedControlRoot";
+var SegmentedControlItem = React.forwardRef((props, ref) => {
+	const { children, className, style, value: itemValue, disabled: itemDisabled = false, bindtap, "main-thread:bindtap": mainThreadBindtap, "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-role-description": accessibilityRoleDescription = "radio", "accessibility-traits": accessibilityTraits, ...nativeProps } = props;
+	const context = useSegmentedControlContext("SegmentedControlItem");
+	const disabled = context.disabled || itemDisabled;
+	const selected = context.value === itemValue;
+	React.useEffect(() => {
+		"background only";
+		return context.registerItem(itemValue);
+	}, [context.registerItem, itemValue]);
+	const handleTap = React.useCallback((...args) => {
+		"background only";
+		if (!selected) context.selectValue(itemValue);
+		bindtap?.(...args);
+	}, [
+		bindtap,
+		context.selectValue,
+		itemValue,
+		selected
+	]);
+	const pressSelectionRef = React.useRef(selected);
+	const { pressed, bindtouchstart, ...pressHandlers } = usePressTap({
+		disabled,
+		onTap: handleTap,
+		mainThreadOnTap: mainThreadBindtap
+	});
+	const handleTouchStart = React.useCallback((...args) => {
+		pressSelectionRef.current = selected;
+		bindtouchstart(...args);
+	}, [bindtouchstart, selected]);
+	const classes = segmentedControl({
+		selected,
+		disabled,
+		pressed
+	});
+	const pressStartClasses = segmentedControl({
+		selected: pressSelectionRef.current,
+		disabled,
+		pressed
+	});
+	const label = typeof children === "string" || typeof children === "number" ? String(children) : void 0;
+	return <view {...ref ? { ref } : {}} {...nativeProps} bindtouchstart={handleTouchStart} {...pressHandlers} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel ?? label} accessibility-role-description={accessibilityRoleDescription} accessibility-value={selected ? "selected" : "not selected"} accessibility-traits={disabled ? "disabled" : selected ? "selected" : accessibilityTraits ?? "button"} className={clsx(classes.item, className)} style={style}>
+        <view accessibility-elements-hidden={true} className={pressStartClasses.itemBackground} />
+        <text className={classes.label}>{children}</text>
+      </view>;
+});
+SegmentedControlItem.displayName = "SegmentedControlItem";
+var SegmentedControlIndicator = React.forwardRef((props, ref) => {
+	const { className, style, ...nativeProps } = props;
+	const classNames = useClassNames();
+	return <view {...ref ? { ref } : {}} {...nativeProps} accessibility-elements-hidden={true} className={clsx(classNames.indicator, className)} style={style} />;
+});
+SegmentedControlIndicator.displayName = "SegmentedControlIndicator";
+//#endregion
+export { SegmentedControlIndicator, SegmentedControlItem, SegmentedControlRoot };

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

@@ -0,0 +1,2 @@
+export { SegmentedControlIndicator as Indicator, SegmentedControlItem as Item, SegmentedControlRoot as Root, type SegmentedControlIndicatorProps as IndicatorProps, type SegmentedControlItemProps as ItemProps, type SegmentedControlRootProps as RootProps, } from './SegmentedControl';
+//# sourceMappingURL=SegmentedControl.namespace.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/SegmentedControl.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,IAAI,SAAS,EACtC,oBAAoB,IAAI,IAAI,EAC5B,oBAAoB,IAAI,IAAI,EAC5B,KAAK,8BAA8B,IAAI,cAAc,EACrD,KAAK,yBAAyB,IAAI,SAAS,EAC3C,KAAK,yBAAyB,IAAI,SAAS,GAC5C,MAAM,oBAAoB,CAAC"}

package/lib/components/SegmentedControl/SegmentedControl.namespace.js

@@ -0,0 +1,10 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SegmentedControlIndicator, SegmentedControlItem, SegmentedControlRoot } from "./SegmentedControl.jsx";
+//#region src/components/SegmentedControl/SegmentedControl.namespace.ts
+var SegmentedControl_namespace_exports = /* @__PURE__ */ __exportAll({
+	Indicator: () => SegmentedControlIndicator,
+	Item: () => SegmentedControlItem,
+	Root: () => SegmentedControlRoot
+});
+//#endregion
+export { SegmentedControl_namespace_exports };

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

@@ -0,0 +1,3 @@
+export { SegmentedControlIndicator, SegmentedControlItem, SegmentedControlRoot, type SegmentedControlIndicatorProps, type SegmentedControlItemProps, type SegmentedControlRootProps, } from './SegmentedControl';
+export * as SegmentedControl from './SegmentedControl.namespace';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,yBAAyB,EACzB,oBAAoB,EACpB,oBAAoB,EACpB,KAAK,8BAA8B,EACnC,KAAK,yBAAyB,EAC9B,KAAK,yBAAyB,GAC/B,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,gBAAgB,MAAM,8BAA8B,CAAC"}

package/lib/components/SelectBox/CheckSelectBox.namespace.d.ts

@@ -0,0 +1,2 @@
+export { CheckSelectBoxBody as Body, CheckSelectBoxCheckmarkControl as CheckmarkControl, CheckSelectBoxCheckmarkIcon as CheckmarkIcon, CheckSelectBoxContent as Content, CheckSelectBoxDescription as Description, CheckSelectBoxFooter as Footer, CheckSelectBoxGroup as Group, CheckSelectBoxLabel as Label, CheckSelectBoxRoot as Root, CheckSelectBoxTrigger as Trigger, type CheckSelectBoxBodyProps as BodyProps, type CheckSelectBoxCheckmarkControlProps as CheckmarkControlProps, type CheckSelectBoxCheckmarkIconProps as CheckmarkIconProps, type CheckSelectBoxContentProps as ContentProps, type CheckSelectBoxDescriptionProps as DescriptionProps, type CheckSelectBoxFooterProps as FooterProps, type CheckSelectBoxGroupProps as GroupProps, type CheckSelectBoxLabelProps as LabelProps, type CheckSelectBoxRootProps as RootProps, type CheckSelectBoxTriggerProps as TriggerProps, } from './SelectBox';
+//# sourceMappingURL=CheckSelectBox.namespace.d.ts.map

package/lib/components/SelectBox/CheckSelectBox.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckSelectBox.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/CheckSelectBox.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,IAAI,EAC1B,8BAA8B,IAAI,gBAAgB,EAClD,2BAA2B,IAAI,aAAa,EAC5C,qBAAqB,IAAI,OAAO,EAChC,yBAAyB,IAAI,WAAW,EACxC,oBAAoB,IAAI,MAAM,EAC9B,mBAAmB,IAAI,KAAK,EAC5B,mBAAmB,IAAI,KAAK,EAC5B,kBAAkB,IAAI,IAAI,EAC1B,qBAAqB,IAAI,OAAO,EAChC,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,mCAAmC,IAAI,qBAAqB,EACjE,KAAK,gCAAgC,IAAI,kBAAkB,EAC3D,KAAK,0BAA0B,IAAI,YAAY,EAC/C,KAAK,8BAA8B,IAAI,gBAAgB,EACvD,KAAK,yBAAyB,IAAI,WAAW,EAC7C,KAAK,wBAAwB,IAAI,UAAU,EAC3C,KAAK,wBAAwB,IAAI,UAAU,EAC3C,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,0BAA0B,IAAI,YAAY,GAChD,MAAM,aAAa,CAAC"}

package/lib/components/SelectBox/CheckSelectBox.namespace.js

@@ -0,0 +1,17 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { CheckSelectBoxBody, CheckSelectBoxCheckmarkControl, CheckSelectBoxCheckmarkIcon, CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxFooter, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot, CheckSelectBoxTrigger } from "./SelectBox.jsx";
+//#region src/components/SelectBox/CheckSelectBox.namespace.ts
+var CheckSelectBox_namespace_exports = /* @__PURE__ */ __exportAll({
+	Body: () => CheckSelectBoxBody,
+	CheckmarkControl: () => CheckSelectBoxCheckmarkControl,
+	CheckmarkIcon: () => CheckSelectBoxCheckmarkIcon,
+	Content: () => CheckSelectBoxContent,
+	Description: () => CheckSelectBoxDescription,
+	Footer: () => CheckSelectBoxFooter,
+	Group: () => CheckSelectBoxGroup,
+	Label: () => CheckSelectBoxLabel,
+	Root: () => CheckSelectBoxRoot,
+	Trigger: () => CheckSelectBoxTrigger
+});
+//#endregion
+export { CheckSelectBox_namespace_exports };

package/lib/components/SelectBox/RadioSelectBox.namespace.d.ts

@@ -0,0 +1,2 @@
+export { RadioSelectBoxBody as Body, RadioSelectBoxContent as Content, RadioSelectBoxDescription as Description, RadioSelectBoxFooter as Footer, RadioSelectBoxGroup as Group, RadioSelectBoxItem as Item, RadioSelectBoxLabel as Label, RadioSelectBoxTrigger as Trigger, type RadioSelectBoxBodyProps as BodyProps, type RadioSelectBoxContentProps as ContentProps, type RadioSelectBoxDescriptionProps as DescriptionProps, type RadioSelectBoxFooterProps as FooterProps, type RadioSelectBoxGroupProps as GroupProps, type RadioSelectBoxItemProps as ItemProps, type RadioSelectBoxLabelProps as LabelProps, type RadioSelectBoxTriggerProps as TriggerProps, } from './SelectBox';
+//# sourceMappingURL=RadioSelectBox.namespace.d.ts.map

package/lib/components/SelectBox/RadioSelectBox.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioSelectBox.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/RadioSelectBox.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,IAAI,EAC1B,qBAAqB,IAAI,OAAO,EAChC,yBAAyB,IAAI,WAAW,EACxC,oBAAoB,IAAI,MAAM,EAC9B,mBAAmB,IAAI,KAAK,EAC5B,kBAAkB,IAAI,IAAI,EAC1B,mBAAmB,IAAI,KAAK,EAC5B,qBAAqB,IAAI,OAAO,EAChC,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,0BAA0B,IAAI,YAAY,EAC/C,KAAK,8BAA8B,IAAI,gBAAgB,EACvD,KAAK,yBAAyB,IAAI,WAAW,EAC7C,KAAK,wBAAwB,IAAI,UAAU,EAC3C,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,wBAAwB,IAAI,UAAU,EAC3C,KAAK,0BAA0B,IAAI,YAAY,GAChD,MAAM,aAAa,CAAC"}

package/lib/components/SelectBox/RadioSelectBox.namespace.js

@@ -0,0 +1,15 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { RadioSelectBoxBody, RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxFooter, RadioSelectBoxGroup, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxTrigger } from "./SelectBox.jsx";
+//#region src/components/SelectBox/RadioSelectBox.namespace.ts
+var RadioSelectBox_namespace_exports = /* @__PURE__ */ __exportAll({
+	Body: () => RadioSelectBoxBody,
+	Content: () => RadioSelectBoxContent,
+	Description: () => RadioSelectBoxDescription,
+	Footer: () => RadioSelectBoxFooter,
+	Group: () => RadioSelectBoxGroup,
+	Item: () => RadioSelectBoxItem,
+	Label: () => RadioSelectBoxLabel,
+	Trigger: () => RadioSelectBoxTrigger
+});
+//#endregion
+export { RadioSelectBox_namespace_exports };

package/lib/components/SelectBox/SelectBox.d.ts

@@ -0,0 +1,85 @@
+import { SelectBoxVariantProps } from '@seed-design/lynx-css/recipes/select-box';
+import { LynxAccessibilityProps, LynxStyledElementProps } from '../../types';
+import { CheckboxRootProps } from '../Checkbox/Checkbox';
+import { InternalIconProps } from '../Icon/Icon';
+import { RadioGroupItemProps } from '../RadioGroup/RadioGroup';
+import * as React from "@lynx-js/react";
+/**
+ * @platform Lynx
+ *
+ * 웹 대비 미지원 기능:
+ * - HiddenInput / name / required / invalid: Lynx에 native form 제출 모델이 없음
+ * - focus / focusVisible: Lynx에 키보드 포커스 개념이 없음
+ * - DOM field wrapper: Lynx Registry는 label/error 연결용 wrapper를 제공하지 않음
+ */
+type FooterVisibility = "when-selected" | "when-not-selected" | "always";
+type PublicSelectBoxVariantProps = Omit<SelectBoxVariantProps, "selected" | "pressed" | "disabled" | "footerOpen">;
+export interface SelectBoxGroupProps extends LynxStyledElementProps {
+    /**
+     * 열 개수입니다. 2 이상이면 자식 Select Box의 기본 layout이 vertical이 됩니다.
+     * @default 1
+     */
+    columns?: number;
+}
+export interface CheckSelectBoxGroupProps extends SelectBoxGroupProps {
+}
+export declare const CheckSelectBoxGroup: React.ForwardRefExoticComponent<SelectBoxGroupProps & React.RefAttributes<unknown>>;
+export interface RadioSelectBoxGroupProps extends SelectBoxGroupProps {
+}
+export declare const RadioSelectBoxGroup: React.ForwardRefExoticComponent<SelectBoxGroupProps & React.RefAttributes<unknown>>;
+export interface CheckSelectBoxRootProps extends PublicSelectBoxVariantProps, LynxStyledElementProps, LynxAccessibilityProps, Pick<CheckboxRootProps, "checked" | "defaultChecked" | "indeterminate" | "disabled" | "onCheckedChange"> {
+    /** @default "when-selected" */
+    footerVisibility?: FooterVisibility;
+}
+export declare const CheckSelectBoxRoot: React.ForwardRefExoticComponent<CheckSelectBoxRootProps & React.RefAttributes<unknown>>;
+export interface RadioSelectBoxItemProps extends PublicSelectBoxVariantProps, LynxStyledElementProps, LynxAccessibilityProps, Pick<RadioGroupItemProps, "value" | "disabled"> {
+    /** @default "when-selected" */
+    footerVisibility?: FooterVisibility;
+}
+export declare const RadioSelectBoxItem: React.ForwardRefExoticComponent<RadioSelectBoxItemProps & React.RefAttributes<unknown>>;
+export interface CheckSelectBoxTriggerProps extends LynxStyledElementProps {
+}
+export declare const CheckSelectBoxTrigger: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<unknown>>;
+export interface CheckSelectBoxContentProps extends LynxStyledElementProps {
+}
+export declare const CheckSelectBoxContent: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<unknown>>;
+export interface CheckSelectBoxBodyProps extends LynxStyledElementProps {
+}
+export declare const CheckSelectBoxBody: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<unknown>>;
+export interface CheckSelectBoxLabelProps extends LynxStyledElementProps {
+}
+export declare const CheckSelectBoxLabel: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<unknown>>;
+export interface CheckSelectBoxDescriptionProps extends LynxStyledElementProps {
+}
+export declare const CheckSelectBoxDescription: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<unknown>>;
+export interface RadioSelectBoxTriggerProps extends LynxStyledElementProps {
+}
+export declare const RadioSelectBoxTrigger: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<unknown>>;
+export interface RadioSelectBoxContentProps extends LynxStyledElementProps {
+}
+export declare const RadioSelectBoxContent: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<unknown>>;
+export interface RadioSelectBoxBodyProps extends LynxStyledElementProps {
+}
+export declare const RadioSelectBoxBody: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<unknown>>;
+export interface RadioSelectBoxLabelProps extends LynxStyledElementProps {
+}
+export declare const RadioSelectBoxLabel: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<unknown>>;
+export interface RadioSelectBoxDescriptionProps extends LynxStyledElementProps {
+}
+export declare const RadioSelectBoxDescription: React.ForwardRefExoticComponent<LynxStyledElementProps & React.RefAttributes<unknown>>;
+export interface SelectBoxFooterProps extends LynxStyledElementProps, LynxAccessibilityProps {
+}
+export interface CheckSelectBoxFooterProps extends SelectBoxFooterProps {
+}
+export declare const CheckSelectBoxFooter: React.ForwardRefExoticComponent<SelectBoxFooterProps & React.RefAttributes<unknown>>;
+export interface RadioSelectBoxFooterProps extends SelectBoxFooterProps {
+}
+export declare const RadioSelectBoxFooter: React.ForwardRefExoticComponent<SelectBoxFooterProps & React.RefAttributes<unknown>>;
+export interface CheckSelectBoxCheckmarkControlProps extends LynxStyledElementProps {
+}
+export declare const CheckSelectBoxCheckmarkControl: React.ForwardRefExoticComponent<CheckSelectBoxCheckmarkControlProps & React.RefAttributes<unknown>>;
+export interface CheckSelectBoxCheckmarkIconProps extends Omit<InternalIconProps, "deps"> {
+}
+export declare const CheckSelectBoxCheckmarkIcon: React.ForwardRefExoticComponent<CheckSelectBoxCheckmarkIconProps & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=SelectBox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/SelectBox.tsx"],"names":[],"mappings":"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"}

package/lib/components/SelectBox/SelectBox.jsx

@@ -0,0 +1,237 @@
+import { createSlotRecipeContext } from "../../utils/create-slot-recipe-context.jsx";
+import { IconSlotProvider, InternalIcon } from "../Icon/Icon.jsx";
+import { CheckboxRoot, useCheckboxContext } from "../Checkbox/Checkbox.jsx";
+import { RadioGroupItem, useRadioGroupItemContext } from "../RadioGroup/RadioGroup.jsx";
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+import { selectBox } from "@seed-design/lynx-css/recipes/select-box";
+import { selectBoxCheckmark } from "@seed-design/lynx-css/recipes/select-box-checkmark";
+import { selectBoxGroup } from "@seed-design/lynx-css/recipes/select-box-group";
+//#region src/components/SelectBox/SelectBox.tsx
+var SelectBoxRuntimeContext = React.createContext(null);
+var SelectBoxLayoutContext = React.createContext({});
+var { ClassNamesProvider, useClassNames } = createSlotRecipeContext(selectBox);
+function useSelectBoxRuntimeContext(consumer) {
+	const context = React.useContext(SelectBoxRuntimeContext);
+	if (!context) throw new Error(`<${consumer}/> must be rendered inside a SelectBox root or item.`);
+	return context;
+}
+function SelectBoxSurface({ children, className, style, accessibilityProps }) {
+	const context = useSelectBoxRuntimeContext("SelectBoxSurface");
+	const footerOpen = context.footerVisibility === "always" || (context.footerVisibility === "when-selected" ? context.selected : !context.selected);
+	const classes = selectBox({
+		...context.variantProps,
+		selected: context.selected,
+		pressed: context.pressed,
+		disabled: context.disabled,
+		footerOpen
+	});
+	return <ClassNamesProvider value={classes}>
+      <IconSlotProvider value={{
+		classNames: { prefixIcon: classes.prefixIcon },
+		deps: [
+			context.selected,
+			context.pressed,
+			context.disabled
+		]
+	}}>
+        <view className={clsx(classes.root, className)} style={style} accessibility-element={true} accessibility-role-description={context.accessibilityRole} accessibility-value={context.selected ? "selected" : "not selected"} accessibility-traits={context.disabled ? "disabled" : void 0} {...accessibilityProps}>
+          {children}
+          <view className={classes.selectedStroke} accessibility-elements-hidden={true} />
+        </view>
+      </IconSlotProvider>
+    </ClassNamesProvider>;
+}
+var SelectBoxGroup = React.forwardRef((props, ref) => {
+	const { children, columns = 1, className, style, ...nativeProps } = props;
+	const classes = selectBoxGroup({ multiColumn: columns > 1 });
+	const layout = columns > 1 ? "vertical" : "horizontal";
+	return <SelectBoxLayoutContext.Provider value={{ layout }}>
+      <view {...ref ? { ref } : {}} className={clsx(classes, className)} style={{
+		...style,
+		gridTemplateColumns: `repeat(${columns}, 1fr)`
+	}} {...nativeProps}>
+        {children}
+      </view>
+    </SelectBoxLayoutContext.Provider>;
+});
+SelectBoxGroup.displayName = "SelectBoxGroup";
+var CheckSelectBoxGroup = SelectBoxGroup;
+var RadioSelectBoxGroup = SelectBoxGroup;
+function CheckSelectBoxSurface(props) {
+	const checkbox = useCheckboxContext("CheckSelectBoxRoot");
+	const contextValue = React.useMemo(() => ({
+		selected: checkbox.checked,
+		pressed: checkbox.pressed,
+		disabled: checkbox.disabled,
+		footerVisibility: props.footerVisibility,
+		variantProps: props.variantProps,
+		accessibilityRole: "checkbox"
+	}), [
+		checkbox.checked,
+		checkbox.disabled,
+		checkbox.pressed,
+		props.footerVisibility,
+		props.variantProps
+	]);
+	return <SelectBoxRuntimeContext.Provider value={contextValue}>
+      <SelectBoxSurface {...props} />
+    </SelectBoxRuntimeContext.Provider>;
+}
+var CheckSelectBoxRoot = React.forwardRef((props, ref) => {
+	const { children, className, style, checked, defaultChecked, indeterminate, disabled, onCheckedChange, footerVisibility = "when-selected", ...restProps } = props;
+	const inheritedVariantProps = React.useContext(SelectBoxLayoutContext);
+	const [variantProps, accessibilityProps] = selectBox.splitVariantProps(restProps);
+	const resolvedVariantProps = {
+		...variantProps,
+		layout: variantProps.layout ?? inheritedVariantProps.layout
+	};
+	const interactionRootClassName = selectBox(resolvedVariantProps).interactionRoot;
+	return <CheckboxRoot ref={ref} className={interactionRootClassName} checked={checked} defaultChecked={defaultChecked} indeterminate={indeterminate} disabled={disabled} onCheckedChange={onCheckedChange} accessibility-element={false}>
+        <CheckSelectBoxSurface className={className} style={style} footerVisibility={footerVisibility} variantProps={resolvedVariantProps} accessibilityProps={accessibilityProps}>
+          {children}
+        </CheckSelectBoxSurface>
+      </CheckboxRoot>;
+});
+CheckSelectBoxRoot.displayName = "CheckSelectBoxRoot";
+function RadioSelectBoxSurface(props) {
+	const item = useRadioGroupItemContext("RadioSelectBoxItem");
+	const contextValue = React.useMemo(() => ({
+		selected: item.checked,
+		pressed: item.pressed,
+		disabled: item.disabled,
+		footerVisibility: props.footerVisibility,
+		variantProps: props.variantProps,
+		accessibilityRole: "radio"
+	}), [
+		item.checked,
+		item.disabled,
+		item.pressed,
+		props.footerVisibility,
+		props.variantProps
+	]);
+	return <SelectBoxRuntimeContext.Provider value={contextValue}>
+      <SelectBoxSurface {...props} />
+    </SelectBoxRuntimeContext.Provider>;
+}
+var RadioSelectBoxItem = React.forwardRef((props, ref) => {
+	const { children, className, style, value, disabled, footerVisibility = "when-selected", ...restProps } = props;
+	const inheritedVariantProps = React.useContext(SelectBoxLayoutContext);
+	const [variantProps, accessibilityProps] = selectBox.splitVariantProps(restProps);
+	const resolvedVariantProps = {
+		...variantProps,
+		layout: variantProps.layout ?? inheritedVariantProps.layout
+	};
+	const interactionRootClassName = selectBox(resolvedVariantProps).interactionRoot;
+	return <RadioGroupItem ref={ref} className={interactionRootClassName} value={value} disabled={disabled} accessibility-element={false}>
+        <RadioSelectBoxSurface className={className} style={style} footerVisibility={footerVisibility} variantProps={resolvedVariantProps} accessibilityProps={accessibilityProps}>
+          {children}
+        </RadioSelectBoxSurface>
+      </RadioGroupItem>;
+});
+RadioSelectBoxItem.displayName = "RadioSelectBoxItem";
+function createViewSlot(displayName, slot) {
+	const Component = React.forwardRef((props, ref) => {
+		const { children, className, ...nativeProps } = props;
+		const classes = useClassNames();
+		return <view {...ref ? { ref } : {}} className={clsx(classes[slot], className)} {...nativeProps}>
+        {children}
+      </view>;
+	});
+	Component.displayName = displayName;
+	return Component;
+}
+function createTextSlot(displayName, slot) {
+	const Component = React.forwardRef((props, ref) => {
+		const { children, className, ...nativeProps } = props;
+		const classes = useClassNames();
+		return <text {...ref ? { ref } : {}} className={clsx(classes[slot], className)} {...nativeProps}>
+        {children}
+      </text>;
+	});
+	Component.displayName = displayName;
+	return Component;
+}
+function createLabelSlot(displayName) {
+	const Component = React.forwardRef((props, ref) => {
+		const { children, className, ...nativeProps } = props;
+		const classes = useClassNames();
+		const labelChildren = typeof children === "string" || typeof children === "number" ? <text>{children}</text> : children;
+		return <view {...ref ? { ref } : {}} className={clsx(classes.label, className)} {...nativeProps}>
+        {labelChildren}
+      </view>;
+	});
+	Component.displayName = displayName;
+	return Component;
+}
+var CheckSelectBoxTrigger = createViewSlot("CheckSelectBoxTrigger", "trigger");
+var CheckSelectBoxContent = createViewSlot("CheckSelectBoxContent", "content");
+var CheckSelectBoxBody = createViewSlot("CheckSelectBoxBody", "body");
+var CheckSelectBoxLabel = createLabelSlot("CheckSelectBoxLabel");
+var CheckSelectBoxDescription = createTextSlot("CheckSelectBoxDescription", "description");
+var RadioSelectBoxTrigger = createViewSlot("RadioSelectBoxTrigger", "trigger");
+var RadioSelectBoxContent = createViewSlot("RadioSelectBoxContent", "content");
+var RadioSelectBoxBody = createViewSlot("RadioSelectBoxBody", "body");
+var RadioSelectBoxLabel = createLabelSlot("RadioSelectBoxLabel");
+var RadioSelectBoxDescription = createTextSlot("RadioSelectBoxDescription", "description");
+function getFooterLayoutHeight(event) {
+	const eventWithHeight = event;
+	const height = event.detail?.height ?? event.params?.height ?? eventWithHeight.height;
+	if (typeof height !== "number" || !Number.isFinite(height)) return null;
+	return Math.max(0, height);
+}
+var SelectBoxFooter = React.forwardRef((props, ref) => {
+	const { children, className, style, "accessibility-elements-hidden": accessibilityElementsHidden = false, ...nativeProps } = props;
+	const context = useSelectBoxRuntimeContext("SelectBoxFooter");
+	const classes = useClassNames();
+	const [contentHeight, setContentHeight] = React.useState(0);
+	const open = context.footerVisibility === "always" || (context.footerVisibility === "when-selected" ? context.selected : !context.selected);
+	const handleLayoutChange = React.useCallback((event) => {
+		const height = getFooterLayoutHeight(event);
+		if (height !== null) setContentHeight((current) => current === height ? current : height);
+	}, []);
+	return <view {...ref ? { ref } : {}} className={clsx(classes.footer, className)} style={{
+		...style,
+		height: context.footerVisibility === "always" || open && contentHeight === 0 ? "auto" : open ? `${contentHeight}px` : "0px"
+	}} accessibility-elements-hidden={!open || accessibilityElementsHidden} {...nativeProps}>
+      <view className={classes.footerInner} bindlayoutchange={handleLayoutChange}>
+        {children}
+      </view>
+    </view>;
+});
+SelectBoxFooter.displayName = "SelectBoxFooter";
+var CheckSelectBoxFooter = SelectBoxFooter;
+var RadioSelectBoxFooter = SelectBoxFooter;
+var SelectBoxCheckmarkContext = React.createContext(null);
+var CheckSelectBoxCheckmarkControl = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSelectBoxRuntimeContext("CheckSelectBoxCheckmarkControl");
+	const variantProps = {
+		selected: context.selected,
+		pressed: context.pressed,
+		disabled: context.disabled
+	};
+	const classes = selectBoxCheckmark(variantProps);
+	return <SelectBoxCheckmarkContext.Provider value={{
+		iconClassName: classes.icon,
+		variantProps
+	}}>
+      <view {...ref ? { ref } : {}} className={clsx(classes.root, className)} accessibility-elements-hidden={true} {...nativeProps}>
+        {children}
+      </view>
+    </SelectBoxCheckmarkContext.Provider>;
+});
+CheckSelectBoxCheckmarkControl.displayName = "CheckSelectBoxCheckmarkControl";
+var CheckSelectBoxCheckmarkIcon = React.forwardRef((props, ref) => {
+	const { className, ...otherProps } = props;
+	const context = React.useContext(SelectBoxCheckmarkContext);
+	if (!context) throw new Error("<CheckSelectBoxCheckmarkIcon/> must be rendered inside <CheckSelectBoxCheckmarkControl/>.");
+	return <InternalIcon ref={ref} className={clsx(context.iconClassName, className)} deps={[
+		context.variantProps.selected,
+		context.variantProps.pressed,
+		context.variantProps.disabled
+	]} {...otherProps} />;
+});
+CheckSelectBoxCheckmarkIcon.displayName = "CheckSelectBoxCheckmarkIcon";
+//#endregion
+export { CheckSelectBoxBody, CheckSelectBoxCheckmarkControl, CheckSelectBoxCheckmarkIcon, CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxFooter, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot, CheckSelectBoxTrigger, RadioSelectBoxBody, RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxFooter, RadioSelectBoxGroup, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxTrigger };

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

@@ -0,0 +1,4 @@
+export * from './SelectBox';
+export * as CheckSelectBox from './CheckSelectBox.namespace';
+export * as RadioSelectBox from './RadioSelectBox.namespace';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}

package/lib/components/index.d.ts

@@ -11,8 +11,14 @@ export * from './Divider';
 export * from './Field';
 export * from './Icon';
 export * from './KeyboardAvoidingScrollView';
+export * from './MannerTemp';
+export * from './MannerTempBadge';
+export * from './NotificationBadge';
+export * from './PageBanner';
 export * from './ProgressCircle';
 export * from './RadioGroup';
+export * from './SegmentedControl';
+export * from './SelectBox';
 export * from './Stack';
 export * from './Switch';
 export * from './Tabs';

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,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"}
+{"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,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,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

@@ -2,11 +2,12 @@ import { MainThread } from '@lynx-js/types';
 import { DependencyList, RefObject } from '@lynx-js/react';
 export interface UseIconColorOptions {
     sourceRef?: RefObject<MainThread.Element>;
+    enabled?: boolean;
 }
 /**
  * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
- * `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
- * 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
+ * `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;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"}
+{"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;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;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,CAuBA"}

package/lib/hooks/useIconColor.js

@@ -1,4 +1,4 @@
-import { runOnMainThread, useEffect, useMainThreadRef } from "@lynx-js/react";
+import { runOnMainThread, useEffect, useGlobalProps, useMainThreadRef } from "@lynx-js/react";
 //#region src/hooks/useIconColor.ts
 function syncTintColorOnce(targetRef, sourceRef) {
 	"main thread";
@@ -31,8 +31,8 @@ function cancelTintColorSync(frameRef) {
 }
 /**
 * Lynx `<image>` 의 tint color 를 recipe 의 CSS `color` 로부터 main-thread 에서 읽어
-* `tint-color` attribute 로 mirror. `deps` 가 바뀌면 native class patch가 반영된
-* 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
+* `tint-color` attribute 로 mirror. `deps` 또는 시스템 테마가 바뀌면 native class
+* patch가 반영된 다음 frame에 재동기화하고, UI 표시 이벤트에서는 즉시 동기화.
 *
 * ```tsx
 * const iconColorProps = useIconColor([variant, disabled, loading]);
@@ -42,17 +42,25 @@ function cancelTintColorSync(frameRef) {
 function useIconColor(deps, options) {
 	const ref = useMainThreadRef(null);
 	const sourceRef = options?.sourceRef;
+	const enabled = options?.enabled ?? true;
 	const frameRef = useMainThreadRef(0);
+	const theme = useGlobalProps()?.theme;
 	function syncOnUiAppear() {
 		"main thread";
+		if (!enabled) return;
 		syncTintColorOnce(ref, sourceRef);
 	}
 	useEffect(() => {
+		if (!enabled) return;
 		runOnMainThread(scheduleTintColorSync)(ref, sourceRef, frameRef);
 		return () => {
 			runOnMainThread(cancelTintColorSync)(frameRef);
 		};
-	}, deps);
+	}, [
+		...deps,
+		enabled,
+		theme
+	]);
 	return {
 		ref,
 		"main-thread:binduiappear": syncOnUiAppear