@0610studio/zs-ui 0.18.1 → 0.19.1

package/build/ui/ZSCheckBox/index.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { Pressable, StyleSheet } from 'react-native';
+import ViewAtom from '../atoms/ViewAtom';
+import ZSText from '../ZSText';
+import { useTheme } from '../../context/ThemeContext';
+import { DISABLED_OPACITY, RADIUS } from '../../theme/tokens';
+import { SvgCheck } from '../../assets/SvgCheck';
+// size 기본값(18) 기준 곡률·보더 비율 유지용
+const BASE_SIZE = 18;
+const BASE_BORDER_WIDTH = 1.6;
+function ZSCheckBox({ value, onChange, size = 18, activeColor, label, labelStyle, labelComponent, moreComponent, disabled = false, style, ...props }) {
+    const { palette } = useTheme();
+    const checkedColor = activeColor ?? palette.primary.main;
+    const handlePress = useCallback(() => {
+        if (!disabled) {
+            onChange(!value);
+        }
+    }, [disabled, onChange, value]);
+    return (_jsxs(ViewAtom, { style: [styles.container, disabled && styles.disabled, style], ...props, children: [_jsxs(Pressable, { onPress: handlePress, disabled: disabled, style: styles.checkContainer, accessibilityRole: 'checkbox', accessibilityState: { checked: value, disabled }, children: [_jsx(ViewAtom, { style: [
+                            styles.box,
+                            {
+                                width: size,
+                                height: size,
+                                borderRadius: RADIUS.xs * (size / BASE_SIZE),
+                                borderWidth: BASE_BORDER_WIDTH * (size / BASE_SIZE),
+                                backgroundColor: value ? checkedColor : 'transparent',
+                                borderColor: value ? checkedColor : palette.grey[30],
+                            },
+                        ], children: value && (_jsx(ViewAtom, { style: styles.checkmark, children: _jsx(SvgCheck, { size: size - 4, strokeWidth: "3.5" }) })) }), labelComponent ?? (label !== undefined && _jsx(ZSText, { ...labelStyle, children: label }))] }), moreComponent] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    disabled: {
+        opacity: DISABLED_OPACITY,
+    },
+    checkContainer: {
+        flex: 1,
+        alignItems: 'center',
+        flexDirection: 'row',
+        paddingVertical: 2,
+        gap: 12,
+    },
+    box: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    checkmark: {
+        position: 'absolute',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+export default React.memo(ZSCheckBox);
+//# sourceMappingURL=index.js.map

package/build/ui/ZSCheckBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSCheckBox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\nimport { Pressable, StyleSheet, ViewProps } from 'react-native';\nimport ViewAtom from '../atoms/ViewAtom';\nimport ZSText, { ZSTextProps } from '../ZSText';\nimport { useTheme } from '../../context/ThemeContext';\nimport { DISABLED_OPACITY, RADIUS } from '../../theme/tokens';\nimport { SvgCheck } from '../../assets/SvgCheck';\n\n// size 기본값(18) 기준 곡률·보더 비율 유지용\nconst BASE_SIZE = 18;\nconst BASE_BORDER_WIDTH = 1.6;\n\nexport interface ZSCheckBoxProps extends ViewProps {\n  value: boolean;\n  onChange: (value: boolean) => void;\n  size?: number;\n  activeColor?: string;\n  label?: string;\n  labelStyle?: ZSTextProps;\n  labelComponent?: React.ReactNode;\n  moreComponent?: React.ReactNode;\n  disabled?: boolean;\n}\n\nfunction ZSCheckBox({\n  value,\n  onChange,\n  size = 18,\n  activeColor,\n  label,\n  labelStyle,\n  labelComponent,\n  moreComponent,\n  disabled = false,\n  style,\n  ...props\n}: ZSCheckBoxProps) {\n  const { palette } = useTheme();\n  const checkedColor = activeColor ?? palette.primary.main;\n\n  const handlePress = useCallback(() => {\n    if (!disabled) {\n      onChange(!value);\n    }\n  }, [disabled, onChange, value]);\n\n  return (\n    <ViewAtom style={[styles.container, disabled && styles.disabled, style]} {...props}>\n      <Pressable\n        onPress={handlePress}\n        disabled={disabled}\n        style={styles.checkContainer}\n        accessibilityRole='checkbox'\n        accessibilityState={{ checked: value, disabled }}\n      >\n        <ViewAtom\n          style={[\n            styles.box,\n            {\n              width: size,\n              height: size,\n              borderRadius: RADIUS.xs * (size / BASE_SIZE),\n              borderWidth: BASE_BORDER_WIDTH * (size / BASE_SIZE),\n              backgroundColor: value ? checkedColor : 'transparent',\n              borderColor: value ? checkedColor : palette.grey[30],\n            },\n          ]}\n        >\n          {value && (\n            <ViewAtom style={styles.checkmark}>\n              <SvgCheck size={size - 4} strokeWidth=\"3.5\" />\n            </ViewAtom>\n          )}\n        </ViewAtom>\n        {labelComponent ?? (label !== undefined && <ZSText {...labelStyle}>{label}</ZSText>)}\n      </Pressable>\n      {moreComponent}\n    </ViewAtom>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    width: '100%',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  },\n  disabled: {\n    opacity: DISABLED_OPACITY,\n  },\n  checkContainer: {\n    flex: 1,\n    alignItems: 'center',\n    flexDirection: 'row',\n    paddingVertical: 2,\n    gap: 12,\n  },\n  box: {\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  checkmark: {\n    position: 'absolute',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n});\n\nexport default React.memo(ZSCheckBox);\n"]}

package/build/ui/ZSChip/index.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import type { IntentOptions, TypoSubStyle } from "../../theme/types";
+export type ZSChipVariant = 'pastel' | 'solid' | 'stroke';
+export interface ZSChipProps extends ViewProps {
+    /** 칩 라벨 */
+    label: string;
+    /** 선택 상태를 외부에서 제어할 때 사용 (미지정 시 내부 상태로 토글) */
+    selected?: boolean;
+    /** 비제어 모드의 초기 선택 상태 */
+    initialSelected?: boolean;
+    /** 토글 시 다음 선택 상태를 전달 */
+    onChange?: (selected: boolean) => void;
+    intent?: IntentOptions;
+    /** 선택 상태 스타일 (기본: pastel) */
+    variant?: ZSChipVariant;
+    textSize?: TypoSubStyle;
+    /** true면 선택 시 체크 아이콘 표시 */
+    checkIcon?: boolean;
+    /** 라벨 왼쪽 커스텀 요소 */
+    leftIcon?: React.ReactNode;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function ZSChip({ label, selected, initialSelected, onChange, intent, variant, textSize, checkIcon, leftIcon, disabled, style, ...props }: ZSChipProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ZSChip>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/build/ui/ZSChip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSChip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAyB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAMrG,OAAO,KAAK,EAAE,aAAa,EAAoB,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAQvF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAO1D,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,WAAW;IACX,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wBAAwB;IACxB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,MAAM,CAAC,EACd,KAAK,EACL,QAAQ,EACR,eAAuB,EACvB,QAAQ,EACR,MAAkB,EAClB,OAAkB,EAClB,QAAc,EACd,SAAiB,EACjB,QAAQ,EACR,QAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,WAAW,qBAiFb;;AAED,wBAAkC"}

package/build/ui/ZSChip/index.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import Animated, { Easing, interpolateColor, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import ZSText from "../ZSText";
+import { useTheme } from "../../context/ThemeContext";
+import { resolveTextColor } from "../../theme/resolveColor";
+import { SvgCheck } from "../../assets/SvgCheck";
+import { PASTEL_TEXT_COLOR, SOLID_TEXT_COLOR, STROKE_TEXT_COLOR } from "../../theme/intentColors";
+import { DISABLED_OPACITY, DURATION, RADIUS } from "../../theme/tokens";
+const ANIMATION_DURATION = DURATION.base;
+const PRESS_DURATION = DURATION.press;
+const PRESS_SCALE = 0.04;
+// typo 크기(subStyle)별 패딩 · 체크 아이콘 크기
+const PADDING_HORIZONTAL = { '1': 18, '2': 16, '3': 14, '4': 12, '5': 10, '6': 9 };
+const PADDING_VERTICAL = { '1': 10, '2': 9, '3': 8, '4': 7, '5': 5, '6': 4 };
+const CHECK_ICON_SIZE = { '1': 18, '2': 17, '3': 15, '4': 14, '5': 12, '6': 11 };
+function ZSChip({ label, selected, initialSelected = false, onChange, intent = 'primary', variant = 'pastel', textSize = '3', checkIcon = false, leftIcon, disabled = false, style, ...props }) {
+    const { palette } = useTheme();
+    const [internalSelected, setInternalSelected] = useState(initialSelected);
+    const isSelected = selected ?? internalSelected;
+    const progress = useSharedValue(isSelected ? 1 : 0);
+    const pressProgress = useSharedValue(0);
+    const unselectedBackground = palette.background.base;
+    const unselectedBorder = palette.grey[30];
+    const selectedColors = variant === 'solid'
+        ? { background: palette[intent][50], border: palette[intent][50], text: SOLID_TEXT_COLOR[intent] }
+        : variant === 'pastel'
+            ? { background: palette[intent][10], border: palette[intent][30], text: PASTEL_TEXT_COLOR[intent] }
+            : { background: unselectedBackground, border: palette[intent][50], text: STROKE_TEXT_COLOR[intent] };
+    useEffect(() => {
+        progress.value = withTiming(isSelected ? 1 : 0, {
+            duration: ANIMATION_DURATION,
+            easing: Easing.out(Easing.quad),
+        });
+    }, [isSelected, progress]);
+    const chipAnimatedStyle = useAnimatedStyle(() => ({
+        backgroundColor: interpolateColor(progress.value, [0, 1], [unselectedBackground, selectedColors.background]),
+        borderColor: interpolateColor(progress.value, [0, 1], [unselectedBorder, selectedColors.border]),
+        transform: [{ scale: 1 - pressProgress.value * PRESS_SCALE }],
+    }));
+    const handlePress = () => {
+        if (disabled)
+            return;
+        const next = !isSelected;
+        if (selected === undefined)
+            setInternalSelected(next);
+        onChange?.(next);
+    };
+    const textColor = isSelected ? selectedColors.text : 'secondary';
+    return (_jsx(Pressable, { onPress: handlePress, onPressIn: () => { pressProgress.value = withTiming(1, { duration: PRESS_DURATION }); }, onPressOut: () => { pressProgress.value = withTiming(0, { duration: PRESS_DURATION }); }, disabled: disabled, accessibilityRole: 'button', accessibilityState: { selected: isSelected, disabled }, style: styles.pressable, ...props, children: _jsxs(Animated.View, { style: [
+                styles.chip,
+                {
+                    paddingHorizontal: PADDING_HORIZONTAL[textSize],
+                    paddingVertical: PADDING_VERTICAL[textSize],
+                    opacity: disabled ? DISABLED_OPACITY : 1,
+                },
+                chipAnimatedStyle,
+                style,
+            ], children: [leftIcon, checkIcon && isSelected && (_jsx(Animated.View, { testID: 'zs-chip-check', children: _jsx(SvgCheck, { size: CHECK_ICON_SIZE[textSize], color: resolveTextColor(palette, textColor), strokeWidth: '2.4' }) })), _jsx(ZSText, { typo: `body.${textSize}`, color: textColor, allowFontScaling: false, numberOfLines: 1, children: label })] }) }));
+}
+export default React.memo(ZSChip);
+const styles = StyleSheet.create({
+    // flexWrap 부모에서 콘텐츠 폭으로 렌더링되도록 hug
+    pressable: {
+        alignSelf: 'flex-start',
+    },
+    chip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        borderWidth: 1,
+        borderRadius: RADIUS.pill,
+    },
+});
+//# sourceMappingURL=index.js.map

package/build/ui/ZSChip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSChip/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { Pressable, StyleSheet, type StyleProp, type ViewProps, type ViewStyle } from \"react-native\";\nimport Animated, { Easing, interpolateColor, useAnimatedStyle, useSharedValue, withTiming } from \"react-native-reanimated\";\nimport ZSText from \"../ZSText\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { resolveTextColor } from \"../../theme/resolveColor\";\nimport { SvgCheck } from \"../../assets/SvgCheck\";\nimport type { IntentOptions, TypoColorOptions, TypoSubStyle } from \"../../theme/types\";\nimport { PASTEL_TEXT_COLOR, SOLID_TEXT_COLOR, STROKE_TEXT_COLOR } from \"../../theme/intentColors\";\nimport { DISABLED_OPACITY, DURATION, RADIUS } from \"../../theme/tokens\";\n\nconst ANIMATION_DURATION = DURATION.base;\nconst PRESS_DURATION = DURATION.press;\nconst PRESS_SCALE = 0.04;\n\nexport type ZSChipVariant = 'pastel' | 'solid' | 'stroke';\n\n// typo 크기(subStyle)별 패딩 · 체크 아이콘 크기\nconst PADDING_HORIZONTAL: Record<TypoSubStyle, number> = { '1': 18, '2': 16, '3': 14, '4': 12, '5': 10, '6': 9 };\nconst PADDING_VERTICAL: Record<TypoSubStyle, number> = { '1': 10, '2': 9, '3': 8, '4': 7, '5': 5, '6': 4 };\nconst CHECK_ICON_SIZE: Record<TypoSubStyle, number> = { '1': 18, '2': 17, '3': 15, '4': 14, '5': 12, '6': 11 };\n\nexport interface ZSChipProps extends ViewProps {\n  /** 칩 라벨 */\n  label: string;\n  /** 선택 상태를 외부에서 제어할 때 사용 (미지정 시 내부 상태로 토글) */\n  selected?: boolean;\n  /** 비제어 모드의 초기 선택 상태 */\n  initialSelected?: boolean;\n  /** 토글 시 다음 선택 상태를 전달 */\n  onChange?: (selected: boolean) => void;\n  intent?: IntentOptions;\n  /** 선택 상태 스타일 (기본: pastel) */\n  variant?: ZSChipVariant;\n  textSize?: TypoSubStyle;\n  /** true면 선택 시 체크 아이콘 표시 */\n  checkIcon?: boolean;\n  /** 라벨 왼쪽 커스텀 요소 */\n  leftIcon?: React.ReactNode;\n  disabled?: boolean;\n  style?: StyleProp<ViewStyle>;\n}\n\nfunction ZSChip({\n  label,\n  selected,\n  initialSelected = false,\n  onChange,\n  intent = 'primary',\n  variant = 'pastel',\n  textSize = '3',\n  checkIcon = false,\n  leftIcon,\n  disabled = false,\n  style,\n  ...props\n}: ZSChipProps) {\n  const { palette } = useTheme();\n  const [internalSelected, setInternalSelected] = useState(initialSelected);\n  const isSelected = selected ?? internalSelected;\n  const progress = useSharedValue(isSelected ? 1 : 0);\n  const pressProgress = useSharedValue(0);\n\n  const unselectedBackground = palette.background.base;\n  const unselectedBorder = palette.grey[30];\n  const selectedColors: { background: string; border: string; text: TypoColorOptions } = variant === 'solid'\n    ? { background: palette[intent][50], border: palette[intent][50], text: SOLID_TEXT_COLOR[intent] }\n    : variant === 'pastel'\n      ? { background: palette[intent][10], border: palette[intent][30], text: PASTEL_TEXT_COLOR[intent] }\n      : { background: unselectedBackground, border: palette[intent][50], text: STROKE_TEXT_COLOR[intent] };\n\n  useEffect(() => {\n    progress.value = withTiming(isSelected ? 1 : 0, {\n      duration: ANIMATION_DURATION,\n      easing: Easing.out(Easing.quad),\n    });\n  }, [isSelected, progress]);\n\n  const chipAnimatedStyle = useAnimatedStyle(() => ({\n    backgroundColor: interpolateColor(progress.value, [0, 1], [unselectedBackground, selectedColors.background]),\n    borderColor: interpolateColor(progress.value, [0, 1], [unselectedBorder, selectedColors.border]),\n    transform: [{ scale: 1 - pressProgress.value * PRESS_SCALE }],\n  }));\n\n  const handlePress = () => {\n    if (disabled) return;\n    const next = !isSelected;\n    if (selected === undefined) setInternalSelected(next);\n    onChange?.(next);\n  };\n\n  const textColor: TypoColorOptions = isSelected ? selectedColors.text : 'secondary';\n\n  return (\n    <Pressable\n      onPress={handlePress}\n      onPressIn={() => { pressProgress.value = withTiming(1, { duration: PRESS_DURATION }); }}\n      onPressOut={() => { pressProgress.value = withTiming(0, { duration: PRESS_DURATION }); }}\n      disabled={disabled}\n      accessibilityRole='button'\n      accessibilityState={{ selected: isSelected, disabled }}\n      style={styles.pressable}\n      {...props}\n    >\n      <Animated.View\n        style={[\n          styles.chip,\n          {\n            paddingHorizontal: PADDING_HORIZONTAL[textSize],\n            paddingVertical: PADDING_VERTICAL[textSize],\n            opacity: disabled ? DISABLED_OPACITY : 1,\n          },\n          chipAnimatedStyle,\n          style,\n        ]}\n      >\n        {leftIcon}\n        {checkIcon && isSelected && (\n          <Animated.View testID='zs-chip-check'>\n            <SvgCheck\n              size={CHECK_ICON_SIZE[textSize]}\n              color={resolveTextColor(palette, textColor)}\n              strokeWidth='2.4'\n            />\n          </Animated.View>\n        )}\n        <ZSText\n          typo={`body.${textSize}`}\n          color={textColor}\n          allowFontScaling={false}\n          numberOfLines={1}\n        >\n          {label}\n        </ZSText>\n      </Animated.View>\n    </Pressable>\n  );\n}\n\nexport default React.memo(ZSChip);\n\nconst styles = StyleSheet.create({\n  // flexWrap 부모에서 콘텐츠 폭으로 렌더링되도록 hug\n  pressable: {\n    alignSelf: 'flex-start',\n  },\n  chip: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 5,\n    borderWidth: 1,\n    borderRadius: RADIUS.pill,\n  },\n});\n"]}

package/build/ui/ZSContainer/index.d.ts

@@ -63,7 +63,6 @@ export declare const styles: {
     outerLayer: {
         flex: number;
         width: "100%";
-        backgroundColor: string;
     };
     row: {
         flex: number;

package/build/ui/ZSContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAsF,MAAM,OAAO,CAAC;AAC7H,OAAO,EAAE,SAAS,EAAyB,UAAU,EAAE,oBAAoB,EAAE,iBAAiB,EAA6B,MAAM,cAAc,CAAC;AAehJ,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC;IACnD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC;;;OAGG;IACH,0BAA0B,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,QAAA,MAAM,WAAW;sBAzBG,MAAM;qBACP,MAAM;eACZ,eAAe,GAAG,cAAc;YACnC,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;yBAC7B,OAAO;mBACb,SAAS;sBACN,SAAS;qBACV,SAAS;mCACK,OAAO;gCACV,MAAM;kBACpB,OAAO;eACV,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI;0BAC7C,MAAM;2BACL,OAAO;2BACP,OAAO;2BACP,SAAS;IAChC;;;OAGG;iCAC0B,MAAM,GAAG,KAAK;oCAyO3C,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAMjB,CAAC;AAEH,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAsF,MAAM,OAAO,CAAC;AAC7H,OAAO,EAAE,SAAS,EAAyB,UAAU,EAAE,oBAAoB,EAAE,iBAAiB,EAA6B,MAAM,cAAc,CAAC;AAgBhJ,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;IAC5C,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC,CAAC;IACnD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,SAAS,CAAC;IACjC;;;OAGG;IACH,0BAA0B,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,QAAA,MAAM,WAAW;sBAzBG,MAAM;qBACP,MAAM;eACZ,eAAe,GAAG,cAAc;YACnC,KAAK,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;yBAC7B,OAAO;mBACb,SAAS;sBACN,SAAS;qBACV,SAAS;mCACK,OAAO;gCACV,MAAM;kBACpB,OAAO;eACV,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI;0BAC7C,MAAM;2BACL,OAAO;2BACP,OAAO;2BACP,SAAS;IAChC;;;OAGG;iCAC0B,MAAM,GAAG,KAAK;oCA0O3C,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;CAMjB,CAAC;AAEH,eAAe,WAAW,CAAC"}

package/build/ui/ZSContainer/index.js

@@ -3,6 +3,7 @@ import { useEffect, useImperativeHandle, forwardRef, useRef, useState, useCallba
 import { StatusBar, StyleSheet, ScrollView, View, useWindowDimensions } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useTheme } from '../../context/ThemeContext';
+import { transparency } from '../../theme/palette';
 import useKeyboard from '../../model/useKeyboard';
 import useFoldingState from '../../model/useFoldingState';
 import { FoldingState } from '../../model/types';
@@ -127,13 +128,13 @@ const ZSContainer = forwardRef(function ZSContainer({ backgroundColor, statusBar
         },
     ], [innerMaxWidth, palette.background.base]);
     const shouldShowStatusBar = useMemo(() => Boolean(barStyle || statusBarColor || translucent), [barStyle, statusBarColor, translucent]);
-    return (_jsxs(SafeAreaView, { style: safeAreaStyle, edges: edges, children: [_jsx(View, { style: styles.outerLayer, children: _jsxs(View, { style: innerContainerStyle, children: [topComponent, _jsxs(View, { style: styles.row, children: [_jsx(View, { style: styles.flex1, children: scrollViewDisabled ? (_jsx(View, { style: [styles.flex1, containerStyle], children: props.children })) : (_jsx(ScrollView, { ref: scrollViewRef, style: styles.w100, showsVerticalScrollIndicator: showsVerticalScrollIndicator, contentContainerStyle: scrollContentStyle, scrollEventThrottle: scrollEventThrottle, onScroll: (event) => { handleScroll(event, 1); }, onTouchStart: (evt) => handleTouch(evt, 1), ...SCROLL_VIEW_OPTIONS, children: _jsx(View, { style: [styles.flex1, containerStyle], children: props.children }) })) }), foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && dividerLineComponent && dividerLineComponent, foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && (_jsx(View, { style: styles.flex1, children: scrollViewDisabled ? (_jsx(View, { style: [styles.flex1, containerStyle], children: rightComponent })) : (_jsx(ScrollView, { ref: scrollView2Ref, style: styles.w100, showsVerticalScrollIndicator: showsVerticalScrollIndicator, contentContainerStyle: scrollContentStyle, scrollEventThrottle: scrollEventThrottle, onScroll: (event) => { handleScroll(event, 2); }, onTouchStart: (evt) => handleTouch(evt, 2), ...SCROLL_VIEW_OPTIONS, children: _jsx(View, { style: [styles.flex1, containerStyle], children: rightComponent }) })) }))] }), bottomComponent] }) }), shouldShowStatusBar && (_jsx(StatusBar, { barStyle: barStyle, backgroundColor: statusBarColor || palette.background.base, translucent: translucent }))] }));
+    return (_jsxs(SafeAreaView, { style: safeAreaStyle, edges: edges, children: [_jsx(View, { style: [styles.outerLayer, { backgroundColor: palette.grey[100] + transparency['4%'] }], children: _jsxs(View, { style: innerContainerStyle, children: [topComponent, _jsxs(View, { style: styles.row, children: [_jsx(View, { style: styles.flex1, children: scrollViewDisabled ? (_jsx(View, { style: [styles.flex1, containerStyle], children: props.children })) : (_jsx(ScrollView, { ref: scrollViewRef, style: styles.w100, showsVerticalScrollIndicator: showsVerticalScrollIndicator, contentContainerStyle: scrollContentStyle, scrollEventThrottle: scrollEventThrottle, onScroll: (event) => { handleScroll(event, 1); }, onTouchStart: (evt) => handleTouch(evt, 1), ...SCROLL_VIEW_OPTIONS, children: _jsx(View, { style: [styles.flex1, containerStyle], children: props.children }) })) }), foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && dividerLineComponent && dividerLineComponent, foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && (_jsx(View, { style: styles.flex1, children: scrollViewDisabled ? (_jsx(View, { style: [styles.flex1, containerStyle], children: rightComponent })) : (_jsx(ScrollView, { ref: scrollView2Ref, style: styles.w100, showsVerticalScrollIndicator: showsVerticalScrollIndicator, contentContainerStyle: scrollContentStyle, scrollEventThrottle: scrollEventThrottle, onScroll: (event) => { handleScroll(event, 2); }, onTouchStart: (evt) => handleTouch(evt, 2), ...SCROLL_VIEW_OPTIONS, children: _jsx(View, { style: [styles.flex1, containerStyle], children: rightComponent }) })) }))] }), bottomComponent] }) }), shouldShowStatusBar && (_jsx(StatusBar, { barStyle: barStyle, backgroundColor: statusBarColor || palette.background.base, translucent: translucent }))] }));
 });
 export const styles = StyleSheet.create({
     flex1: { flex: 1 },
     w100: { flex: 1, width: '100%' },
     scrollContainerStyle: { alignItems: 'center', width: '100%', flexGrow: 1 },
-    outerLayer: { flex: 1, width: '100%', backgroundColor: '#00000009' },
+    outerLayer: { flex: 1, width: '100%' },
     row: { flex: 1, width: '100%', flexDirection: 'row' },
 });
 export default ZSContainer;

package/build/ui/ZSContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useEffect, useImperativeHandle, forwardRef, useRef, useState, useCallback, useMemo } from 'react';\nimport { ViewProps, StatusBar, StyleSheet, ScrollView, NativeSyntheticEvent, NativeScrollEvent, View, useWindowDimensions } from 'react-native';\nimport { SafeAreaView } from 'react-native-safe-area-context';\nimport { useTheme } from '../../context/ThemeContext';\nimport useKeyboard from '../../model/useKeyboard';\nimport useFoldingState from '../../model/useFoldingState';\nimport { FoldingState } from '../../model/types';\n\nconst KEYBOARD_ANIMATION_DELAY = 50;\nconst SCROLL_VIEW_OPTIONS = {\n  bounces: false,\n  overScrollMode: \"never\" as const,\n  keyboardShouldPersistTaps: \"handled\" as const,\n  automaticallyAdjustKeyboardInsets: false\n}\n\nexport type ZSContainerProps = ViewProps & {\n  backgroundColor?: string;\n  statusBarColor?: string;\n  barStyle?: 'light-content' | 'dark-content';\n  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\n  scrollViewDisabled?: boolean;\n  topComponent?: ReactNode;\n  bottomComponent?: ReactNode;\n  rightComponent?: ReactNode;\n  showsVerticalScrollIndicator?: boolean;\n  keyboardScrollExtraOffset?: number;\n  translucent?: boolean;\n  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n  scrollEventThrottle?: number;\n  scrollToFocusedInput?: boolean;\n  foldableSingleScreen?: boolean;\n  dividerLineComponent?: ReactNode;\n  /**\n   * 언폴딩 상태에서 rightComponent가 없을 때(단일 화면) 콘텐츠 최대 가로 길이(px).\n   * 전폭으로 늘리려면 false. 미지정 시 ThemeProvider의 foldable 설정값을 따른다.\n   */\n  unfoldedSinglePaneMaxWidth?: number | false;\n};\n\nexport type ZSContainerRef = ScrollView;\n\nconst ZSContainer = forwardRef<ZSContainerRef, ZSContainerProps>(function ZSContainer(\n  {\n    backgroundColor,\n    statusBarColor,\n    barStyle,\n    edges = ['bottom'],\n    scrollViewDisabled = false,\n    topComponent,\n    bottomComponent,\n    showsVerticalScrollIndicator = true,\n    keyboardScrollExtraOffset = 30,\n    translucent,\n    scrollEventThrottle = 16,\n    scrollToFocusedInput = true,\n    foldableSingleScreen,\n    dividerLineComponent,\n    rightComponent,\n    unfoldedSinglePaneMaxWidth,\n    ...props\n  },\n  forwardedRef\n) {\n  const { palette, foldable } = useTheme();\n  const { height: windowHeight } = useWindowDimensions();\n  const { foldingState, width } = useFoldingState();\n  const positionRef = useRef<number | null>(0);\n  const position2Ref = useRef<number | null>(0);\n  const scrollViewRef = useRef<ScrollView>(null);\n  const scrollView2Ref = useRef<ScrollView>(null);\n  const touchPositionRef = useRef<number | null>(0);\n  const lastTouchY = useRef<number | null>(0);\n  const [keyboardHeight, setKeyboardHeight] = useState<number | null>(0);\n  const scrollTimeoutRef = useRef<number | null>(null);\n\n  useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, [scrollViewDisabled]);\n\n  const handleKeyboardShow = useCallback((e: any) => {\n    setKeyboardHeight(e.endCoordinates.height);\n\n    if ((scrollViewRef.current || scrollView2Ref.current) && scrollToFocusedInput) {\n      const keyboardHeight = e.endCoordinates.height;\n      const safeAreaBottom = 0;\n      const availableScreenHeight = windowHeight - keyboardHeight - safeAreaBottom;\n\n      const currentScrollPosition = touchPositionRef.current === 1\n        ? positionRef.current || 0\n        : position2Ref.current || 0;\n\n      const touchPosition = lastTouchY.current || 0;\n\n      const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;\n\n      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);\n      scrollTimeoutRef.current = setTimeout(() => {\n        if (touchPositionRef.current === 1) {\n          scrollViewRef.current?.scrollTo({\n            y: currentScrollPosition + scrollOffset,\n            animated: true,\n          });\n        } else {\n          scrollView2Ref.current?.scrollTo({\n            y: currentScrollPosition + scrollOffset,\n            animated: true,\n          });\n        }\n        scrollTimeoutRef.current = null;\n      }, KEYBOARD_ANIMATION_DELAY);\n    }\n  }, [scrollToFocusedInput, keyboardScrollExtraOffset, windowHeight]);\n\n  const handleKeyboardHide = useCallback(() => {\n    setKeyboardHeight(0);\n  }, []);\n\n  useKeyboard({\n    handleKeyboardShow,\n    handleKeyboardHide,\n  });\n\n  useEffect(() => {\n    return () => {\n      positionRef.current = null;\n      lastTouchY.current = null;\n      if (scrollTimeoutRef.current) {\n        clearTimeout(scrollTimeoutRef.current);\n        scrollTimeoutRef.current = null;\n      }\n    };\n  }, []);\n  \n  useEffect(() => {\n    if (foldableSingleScreen && (rightComponent || dividerLineComponent)) {\n      console.error('[ZSContainer] foldableSingleScreen일 때는 rightComponent/dividerLineComponent를 사용할 수 없습니다.');\n    }\n  }, [foldableSingleScreen, rightComponent, dividerLineComponent]);\n\n  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>, position: 1 | 2) => {\n    if (props.onScroll) props.onScroll(event);\n\n    if (position === 1) {\n      positionRef.current = event.nativeEvent.contentOffset.y;\n    } else {\n      position2Ref.current = event.nativeEvent.contentOffset.y;\n    }\n  }, [props.onScroll]);\n\n  const handleTouch = useCallback((evt: any, position: 1 | 2) => {\n    lastTouchY.current = evt.nativeEvent.pageY;\n    touchPositionRef.current = position;\n  }, []);\n\n  const safeAreaStyle = useMemo(() => [\n    { backgroundColor: backgroundColor || palette.background.base },\n    styles.w100\n  ], [backgroundColor, palette.background.base]);\n\n  const scrollContentStyle = useMemo(() => [\n    styles.scrollContainerStyle,\n    {\n      paddingBottom: keyboardHeight ? keyboardHeight : 0\n    }\n  ], [keyboardHeight]);\n\n  const containerStyle = useMemo(() => [\n    styles.w100,\n    props.style\n  ], [props.style]);\n\n  // prop > ThemeProvider foldable 설정 순으로 적용. 기본값(폴백) 없음 — 미주입(undefined)이거나 false면 전폭으로 채움\n  const effectiveUnfoldedMaxWidth = unfoldedSinglePaneMaxWidth ?? foldable?.unfoldedSinglePaneMaxWidth;\n  const hasRightComponent = !!rightComponent;\n\n  const innerMaxWidth = useMemo(() => {\n    // foldableSingleScreen 이거나, 언폴딩 + rightComponent 미지원인 단일 화면일 때 폭 제한 대상\n    const isSinglePane = foldableSingleScreen || (foldingState === FoldingState.UNFOLDED && !hasRightComponent);\n    // 주입된 폭(number)이 있을 때만 제한, 없으면 전폭으로 채움\n    if (isSinglePane && typeof effectiveUnfoldedMaxWidth === 'number') {\n      return Math.min(width, effectiveUnfoldedMaxWidth);\n    }\n    return '100%' as const;\n  }, [foldableSingleScreen, foldingState, hasRightComponent, effectiveUnfoldedMaxWidth, width]);\n\n  const innerContainerStyle = useMemo(() => [\n    styles.w100,\n    {\n      maxWidth: innerMaxWidth,\n      alignSelf: 'center' as const,\n      backgroundColor: palette.background.base,\n    },\n  ], [innerMaxWidth, palette.background.base]);\n\n  const shouldShowStatusBar = useMemo(() =>\n    Boolean(barStyle || statusBarColor || translucent),\n    [barStyle, statusBarColor, translucent]\n  );\n\n  return (\n    <SafeAreaView\n      style={safeAreaStyle}\n      edges={edges}\n    >\n      <View style={styles.outerLayer}>\n        <View style={innerContainerStyle}>\n          {topComponent}\n          <View style={styles.row}>\n            <View style={styles.flex1}>\n              {scrollViewDisabled ? (\n                <View style={[styles.flex1, containerStyle]}>\n                  {props.children}\n                </View>\n              ) : (\n                <ScrollView\n                  ref={scrollViewRef}\n                  style={styles.w100}\n                  showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n                  contentContainerStyle={scrollContentStyle}\n                  scrollEventThrottle={scrollEventThrottle}\n                  onScroll={(event) => { handleScroll(event, 1); }}\n                  onTouchStart={(evt) => handleTouch(evt, 1)}\n                  {...SCROLL_VIEW_OPTIONS}\n                >\n                  <View style={[styles.flex1, containerStyle]}>\n                    {props.children}\n                  </View>\n                </ScrollView>\n              )}\n            </View>\n            {foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && dividerLineComponent && dividerLineComponent}\n            {\n              foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && (\n                <View style={styles.flex1}>\n                  {scrollViewDisabled ? (\n                    <View style={[styles.flex1, containerStyle]}>\n                      {rightComponent}\n                    </View>\n                  ) : (\n                    <ScrollView\n                      ref={scrollView2Ref}\n                      style={styles.w100}\n                      showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n                      contentContainerStyle={scrollContentStyle}\n                      scrollEventThrottle={scrollEventThrottle}\n                      onScroll={(event) => { handleScroll(event, 2); }}\n                      onTouchStart={(evt) => handleTouch(evt, 2)}\n                      {...SCROLL_VIEW_OPTIONS}\n                    >\n                      <View style={[styles.flex1, containerStyle]}>\n                        {rightComponent}\n                      </View>\n                    </ScrollView>\n                  )}\n                </View>\n              )\n            }\n          </View>\n          {bottomComponent}\n        </View>\n      </View>\n\n      {shouldShowStatusBar && (\n        <StatusBar\n          barStyle={barStyle}\n          backgroundColor={statusBarColor || palette.background.base}\n          translucent={translucent}\n        />\n      )}\n    </SafeAreaView>\n  );\n});\n\nexport const styles = StyleSheet.create({\n  flex1: { flex: 1 },\n  w100: { flex: 1, width: '100%' },\n  scrollContainerStyle: { alignItems: 'center', width: '100%', flexGrow: 1 },\n  outerLayer: { flex: 1, width: '100%', backgroundColor: '#00000009' },\n  row: { flex: 1, width: '100%', flexDirection: 'row' },\n});\n\nexport default ZSContainer;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSContainer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useEffect, useImperativeHandle, forwardRef, useRef, useState, useCallback, useMemo } from 'react';\nimport { ViewProps, StatusBar, StyleSheet, ScrollView, NativeSyntheticEvent, NativeScrollEvent, View, useWindowDimensions } from 'react-native';\nimport { SafeAreaView } from 'react-native-safe-area-context';\nimport { useTheme } from '../../context/ThemeContext';\nimport { transparency } from '../../theme/palette';\nimport useKeyboard from '../../model/useKeyboard';\nimport useFoldingState from '../../model/useFoldingState';\nimport { FoldingState } from '../../model/types';\n\nconst KEYBOARD_ANIMATION_DELAY = 50;\nconst SCROLL_VIEW_OPTIONS = {\n  bounces: false,\n  overScrollMode: \"never\" as const,\n  keyboardShouldPersistTaps: \"handled\" as const,\n  automaticallyAdjustKeyboardInsets: false\n}\n\nexport type ZSContainerProps = ViewProps & {\n  backgroundColor?: string;\n  statusBarColor?: string;\n  barStyle?: 'light-content' | 'dark-content';\n  edges?: Array<'top' | 'right' | 'bottom' | 'left'>;\n  scrollViewDisabled?: boolean;\n  topComponent?: ReactNode;\n  bottomComponent?: ReactNode;\n  rightComponent?: ReactNode;\n  showsVerticalScrollIndicator?: boolean;\n  keyboardScrollExtraOffset?: number;\n  translucent?: boolean;\n  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;\n  scrollEventThrottle?: number;\n  scrollToFocusedInput?: boolean;\n  foldableSingleScreen?: boolean;\n  dividerLineComponent?: ReactNode;\n  /**\n   * 언폴딩 상태에서 rightComponent가 없을 때(단일 화면) 콘텐츠 최대 가로 길이(px).\n   * 전폭으로 늘리려면 false. 미지정 시 ThemeProvider의 foldable 설정값을 따른다.\n   */\n  unfoldedSinglePaneMaxWidth?: number | false;\n};\n\nexport type ZSContainerRef = ScrollView;\n\nconst ZSContainer = forwardRef<ZSContainerRef, ZSContainerProps>(function ZSContainer(\n  {\n    backgroundColor,\n    statusBarColor,\n    barStyle,\n    edges = ['bottom'],\n    scrollViewDisabled = false,\n    topComponent,\n    bottomComponent,\n    showsVerticalScrollIndicator = true,\n    keyboardScrollExtraOffset = 30,\n    translucent,\n    scrollEventThrottle = 16,\n    scrollToFocusedInput = true,\n    foldableSingleScreen,\n    dividerLineComponent,\n    rightComponent,\n    unfoldedSinglePaneMaxWidth,\n    ...props\n  },\n  forwardedRef\n) {\n  const { palette, foldable } = useTheme();\n  const { height: windowHeight } = useWindowDimensions();\n  const { foldingState, width } = useFoldingState();\n  const positionRef = useRef<number | null>(0);\n  const position2Ref = useRef<number | null>(0);\n  const scrollViewRef = useRef<ScrollView>(null);\n  const scrollView2Ref = useRef<ScrollView>(null);\n  const touchPositionRef = useRef<number | null>(0);\n  const lastTouchY = useRef<number | null>(0);\n  const [keyboardHeight, setKeyboardHeight] = useState<number | null>(0);\n  const scrollTimeoutRef = useRef<number | null>(null);\n\n  useImperativeHandle(forwardedRef, () => scrollViewRef.current as ScrollView, [scrollViewDisabled]);\n\n  const handleKeyboardShow = useCallback((e: any) => {\n    setKeyboardHeight(e.endCoordinates.height);\n\n    if ((scrollViewRef.current || scrollView2Ref.current) && scrollToFocusedInput) {\n      const keyboardHeight = e.endCoordinates.height;\n      const safeAreaBottom = 0;\n      const availableScreenHeight = windowHeight - keyboardHeight - safeAreaBottom;\n\n      const currentScrollPosition = touchPositionRef.current === 1\n        ? positionRef.current || 0\n        : position2Ref.current || 0;\n\n      const touchPosition = lastTouchY.current || 0;\n\n      const scrollOffset = touchPosition - availableScreenHeight + keyboardScrollExtraOffset;\n\n      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);\n      scrollTimeoutRef.current = setTimeout(() => {\n        if (touchPositionRef.current === 1) {\n          scrollViewRef.current?.scrollTo({\n            y: currentScrollPosition + scrollOffset,\n            animated: true,\n          });\n        } else {\n          scrollView2Ref.current?.scrollTo({\n            y: currentScrollPosition + scrollOffset,\n            animated: true,\n          });\n        }\n        scrollTimeoutRef.current = null;\n      }, KEYBOARD_ANIMATION_DELAY);\n    }\n  }, [scrollToFocusedInput, keyboardScrollExtraOffset, windowHeight]);\n\n  const handleKeyboardHide = useCallback(() => {\n    setKeyboardHeight(0);\n  }, []);\n\n  useKeyboard({\n    handleKeyboardShow,\n    handleKeyboardHide,\n  });\n\n  useEffect(() => {\n    return () => {\n      positionRef.current = null;\n      lastTouchY.current = null;\n      if (scrollTimeoutRef.current) {\n        clearTimeout(scrollTimeoutRef.current);\n        scrollTimeoutRef.current = null;\n      }\n    };\n  }, []);\n  \n  useEffect(() => {\n    if (foldableSingleScreen && (rightComponent || dividerLineComponent)) {\n      console.error('[ZSContainer] foldableSingleScreen일 때는 rightComponent/dividerLineComponent를 사용할 수 없습니다.');\n    }\n  }, [foldableSingleScreen, rightComponent, dividerLineComponent]);\n\n  const handleScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>, position: 1 | 2) => {\n    if (props.onScroll) props.onScroll(event);\n\n    if (position === 1) {\n      positionRef.current = event.nativeEvent.contentOffset.y;\n    } else {\n      position2Ref.current = event.nativeEvent.contentOffset.y;\n    }\n  }, [props.onScroll]);\n\n  const handleTouch = useCallback((evt: any, position: 1 | 2) => {\n    lastTouchY.current = evt.nativeEvent.pageY;\n    touchPositionRef.current = position;\n  }, []);\n\n  const safeAreaStyle = useMemo(() => [\n    { backgroundColor: backgroundColor || palette.background.base },\n    styles.w100\n  ], [backgroundColor, palette.background.base]);\n\n  const scrollContentStyle = useMemo(() => [\n    styles.scrollContainerStyle,\n    {\n      paddingBottom: keyboardHeight ? keyboardHeight : 0\n    }\n  ], [keyboardHeight]);\n\n  const containerStyle = useMemo(() => [\n    styles.w100,\n    props.style\n  ], [props.style]);\n\n  // prop > ThemeProvider foldable 설정 순으로 적용. 기본값(폴백) 없음 — 미주입(undefined)이거나 false면 전폭으로 채움\n  const effectiveUnfoldedMaxWidth = unfoldedSinglePaneMaxWidth ?? foldable?.unfoldedSinglePaneMaxWidth;\n  const hasRightComponent = !!rightComponent;\n\n  const innerMaxWidth = useMemo(() => {\n    // foldableSingleScreen 이거나, 언폴딩 + rightComponent 미지원인 단일 화면일 때 폭 제한 대상\n    const isSinglePane = foldableSingleScreen || (foldingState === FoldingState.UNFOLDED && !hasRightComponent);\n    // 주입된 폭(number)이 있을 때만 제한, 없으면 전폭으로 채움\n    if (isSinglePane && typeof effectiveUnfoldedMaxWidth === 'number') {\n      return Math.min(width, effectiveUnfoldedMaxWidth);\n    }\n    return '100%' as const;\n  }, [foldableSingleScreen, foldingState, hasRightComponent, effectiveUnfoldedMaxWidth, width]);\n\n  const innerContainerStyle = useMemo(() => [\n    styles.w100,\n    {\n      maxWidth: innerMaxWidth,\n      alignSelf: 'center' as const,\n      backgroundColor: palette.background.base,\n    },\n  ], [innerMaxWidth, palette.background.base]);\n\n  const shouldShowStatusBar = useMemo(() =>\n    Boolean(barStyle || statusBarColor || translucent),\n    [barStyle, statusBarColor, translucent]\n  );\n\n  return (\n    <SafeAreaView\n      style={safeAreaStyle}\n      edges={edges}\n    >\n      {/* 테마 대응 딤 레이어 (light: 검정 4% · dark: 흰색 4%) */}\n      <View style={[styles.outerLayer, { backgroundColor: palette.grey[100] + transparency['4%'] }]}>\n        <View style={innerContainerStyle}>\n          {topComponent}\n          <View style={styles.row}>\n            <View style={styles.flex1}>\n              {scrollViewDisabled ? (\n                <View style={[styles.flex1, containerStyle]}>\n                  {props.children}\n                </View>\n              ) : (\n                <ScrollView\n                  ref={scrollViewRef}\n                  style={styles.w100}\n                  showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n                  contentContainerStyle={scrollContentStyle}\n                  scrollEventThrottle={scrollEventThrottle}\n                  onScroll={(event) => { handleScroll(event, 1); }}\n                  onTouchStart={(evt) => handleTouch(evt, 1)}\n                  {...SCROLL_VIEW_OPTIONS}\n                >\n                  <View style={[styles.flex1, containerStyle]}>\n                    {props.children}\n                  </View>\n                </ScrollView>\n              )}\n            </View>\n            {foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && dividerLineComponent && dividerLineComponent}\n            {\n              foldingState === FoldingState.UNFOLDED && !foldableSingleScreen && rightComponent && (\n                <View style={styles.flex1}>\n                  {scrollViewDisabled ? (\n                    <View style={[styles.flex1, containerStyle]}>\n                      {rightComponent}\n                    </View>\n                  ) : (\n                    <ScrollView\n                      ref={scrollView2Ref}\n                      style={styles.w100}\n                      showsVerticalScrollIndicator={showsVerticalScrollIndicator}\n                      contentContainerStyle={scrollContentStyle}\n                      scrollEventThrottle={scrollEventThrottle}\n                      onScroll={(event) => { handleScroll(event, 2); }}\n                      onTouchStart={(evt) => handleTouch(evt, 2)}\n                      {...SCROLL_VIEW_OPTIONS}\n                    >\n                      <View style={[styles.flex1, containerStyle]}>\n                        {rightComponent}\n                      </View>\n                    </ScrollView>\n                  )}\n                </View>\n              )\n            }\n          </View>\n          {bottomComponent}\n        </View>\n      </View>\n\n      {shouldShowStatusBar && (\n        <StatusBar\n          barStyle={barStyle}\n          backgroundColor={statusBarColor || palette.background.base}\n          translucent={translucent}\n        />\n      )}\n    </SafeAreaView>\n  );\n});\n\nexport const styles = StyleSheet.create({\n  flex1: { flex: 1 },\n  w100: { flex: 1, width: '100%' },\n  scrollContainerStyle: { alignItems: 'center', width: '100%', flexGrow: 1 },\n  outerLayer: { flex: 1, width: '100%' },\n  row: { flex: 1, width: '100%', flexDirection: 'row' },\n});\n\nexport default ZSContainer;\n"]}

package/build/ui/ZSPressable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAMvE,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAkB,EAClB,sBAAmD,EACnD,6BAAkC,EAClC,cAAc,EACd,SAAiB,EACjB,KAAK,EACL,SAAiB,EACjB,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA0ElB;;AAED,wBAAuC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAmB,SAAS,EAAE,MAAM,cAAc,CAAC;AAM1D,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAMvE,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,WAAW,EACX,WAAkB,EAClB,sBAAsB,EACtB,6BAAyC,EACzC,cAAc,EACd,SAAiB,EACjB,KAAK,EACL,SAAiB,EACjB,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,gBAAgB,qBA4ElB;;AAED,wBAAuC"}

package/build/ui/ZSPressable/index.js

@@ -3,12 +3,17 @@ import React, { useRef } from "react";
 import { Pressable, View } from "react-native";
 import Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import AnimatedWrapper from "../atoms/AnimatedWrapper";
-const DEFAULT_DURATION = { duration: 100 };
+import { useTheme } from "../../context/ThemeContext";
+import { transparency } from "../../theme/palette";
+import { DISABLED_OPACITY, DURATION, RADIUS } from "../../theme/tokens";
+const DEFAULT_DURATION = { duration: DURATION.press };
 const SCALE_VALUES = [1, 0.96];
 const DEBOUNCE_TIME = 300;
-function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)', pressedBackgroundBorderRadius = 16, elevationLevel, fullWidth = false, color, isLoading = false, disabled = false, ...props }) {
+function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgroundColor, pressedBackgroundBorderRadius = RADIUS.xl, elevationLevel, fullWidth = false, color, isLoading = false, disabled = false, ...props }) {
+    const { palette } = useTheme();
     const isButtonPress = useSharedValue(0);
     const lastClickTime = useRef(0);
+    const pressedBgColor = pressedBackgroundColor ?? palette.grey[50] + transparency['10%'];
     const createPressHandler = (callback) => {
         return () => {
             const now = Date.now();
@@ -37,7 +42,7 @@ function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgrou
     const handlePressStyle = (pressed) => {
         return pressed
             ? {
-                backgroundColor: pressedBackgroundColor,
+                backgroundColor: pressedBgColor,
                 borderRadius: pressedBackgroundBorderRadius,
             }
             : {
@@ -45,7 +50,7 @@ function ZSPressable({ onPress, onLongPress, isAnimation = true, pressedBackgrou
                 borderRadius: pressedBackgroundBorderRadius,
             };
     };
-    return (_jsx(View, { style: [fullWidth ? { width: '100%' } : undefined, { opacity: (isLoading || disabled) ? 0.55 : 1 }], children: _jsx(Pressable, { ...props, onPress: handlePress, onLongPress: handleLongPress, onPressIn: handlePressIn, onPressOut: handlePressOut, disabled: isLoading || disabled, style: ({ pressed }) => handlePressStyle(pressed), children: _jsx(Animated.View, { style: boxAnimation, children: _jsx(AnimatedWrapper, { color: color, isAnimation: isAnimation, elevationLevel: elevationLevel, style: props.style, children: props.children }) }) }) }));
+    return (_jsx(View, { style: [fullWidth ? { width: '100%' } : undefined, { opacity: (isLoading || disabled) ? DISABLED_OPACITY : 1 }], children: _jsx(Pressable, { ...props, onPress: handlePress, onLongPress: handleLongPress, onPressIn: handlePressIn, onPressOut: handlePressOut, disabled: isLoading || disabled, style: ({ pressed }) => handlePressStyle(pressed), children: _jsx(Animated.View, { style: boxAnimation, children: _jsx(AnimatedWrapper, { color: color, isAnimation: isAnimation, elevationLevel: elevationLevel, style: props.style, children: props.children }) }) }) }));
 }
 export default React.memo(ZSPressable);
 //# sourceMappingURL=index.js.map

package/build/ui/ZSPressable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useRef } from \"react\";\nimport { Pressable, View, ViewProps } from \"react-native\";\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from \"react-native-reanimated\";\nimport AnimatedWrapper from \"../atoms/AnimatedWrapper\";\nimport type { ShadowLevel, ViewColorOptions } from \"../../theme/types\";\n\nconst DEFAULT_DURATION = { duration: 100 } as const;\nconst SCALE_VALUES = [1, 0.96] as const;\nconst DEBOUNCE_TIME = 300;\n\ninterface ZSPressableProps extends ViewProps {\n  onPress?: (value?: any) => void;\n  onLongPress?: (value?: any) => void;\n  pressedBackgroundColor?: string;\n  pressedBackgroundBorderRadius?: number;\n  isAnimation?: boolean;\n  elevationLevel?: ShadowLevel;\n  fullWidth?: boolean;\n  color?: ViewColorOptions;\n  isLoading?: boolean;\n  disabled?: boolean;\n}\n\nfunction ZSPressable({\n  onPress,\n  onLongPress,\n  isAnimation = true,\n  pressedBackgroundColor = 'rgba(180, 180, 180, 0.1)',\n  pressedBackgroundBorderRadius = 16,\n  elevationLevel,\n  fullWidth = false,\n  color,\n  isLoading = false,\n  disabled = false,\n  ...props\n}: ZSPressableProps) {\n  const isButtonPress = useSharedValue(0);\n  const lastClickTime = useRef<number>(0);\n\n  const createPressHandler = (callback?: () => void) => {\n    return () => {\n      const now = Date.now();\n      if (now - lastClickTime.current < DEBOUNCE_TIME) return;\n      if (isLoading || disabled) return;\n      lastClickTime.current = now;\n\n      callback?.();\n    };\n  };\n\n  const handlePress = createPressHandler(onPress);\n  const handleLongPress = createPressHandler(onLongPress);\n\n  const boxAnimation = useAnimatedStyle(() => {\n    const scale = interpolate(\n      isButtonPress.value,\n      [0, 1],\n      SCALE_VALUES,\n      'clamp'\n    );\n    return {\n      transform: [{ scale }],\n    };\n  }, []);\n\n  const handlePressIn = () => {\n    isButtonPress.value = withTiming(1, DEFAULT_DURATION);\n  };\n\n  const handlePressOut = () => {\n    isButtonPress.value = withTiming(0, DEFAULT_DURATION);\n  };\n\n  const handlePressStyle = (pressed: boolean) => {\n    return pressed\n      ? {\n        backgroundColor: pressedBackgroundColor,\n        borderRadius: pressedBackgroundBorderRadius,\n      }\n      : {\n        backgroundColor: 'transparent',\n        borderRadius: pressedBackgroundBorderRadius,\n      };\n  };\n\n  return (\n    <View style={[fullWidth ? { width: '100%' as const } : undefined, { opacity: (isLoading || disabled) ? 0.55 : 1 }]}>\n      <Pressable\n        {...props}\n        onPress={handlePress}\n        onLongPress={handleLongPress}\n        onPressIn={handlePressIn}\n        onPressOut={handlePressOut}\n        disabled={isLoading || disabled}\n        style={({ pressed }) => handlePressStyle(pressed)}\n      >\n        <Animated.View style={boxAnimation}>\n          <AnimatedWrapper\n            color={color}\n            isAnimation={isAnimation}\n            elevationLevel={elevationLevel}\n            style={props.style}\n          >\n            {props.children}\n          </AnimatedWrapper>\n        </Animated.View>\n      </Pressable>\n    </View>\n  );\n}\n\nexport default React.memo(ZSPressable);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSPressable/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useRef } from \"react\";\nimport { Pressable, View, ViewProps } from \"react-native\";\nimport Animated, { interpolate, useAnimatedStyle, useSharedValue, withTiming } from \"react-native-reanimated\";\nimport AnimatedWrapper from \"../atoms/AnimatedWrapper\";\nimport { useTheme } from \"../../context/ThemeContext\";\nimport { transparency } from \"../../theme/palette\";\nimport { DISABLED_OPACITY, DURATION, RADIUS } from \"../../theme/tokens\";\nimport type { ShadowLevel, ViewColorOptions } from \"../../theme/types\";\n\nconst DEFAULT_DURATION = { duration: DURATION.press } as const;\nconst SCALE_VALUES = [1, 0.96] as const;\nconst DEBOUNCE_TIME = 300;\n\ninterface ZSPressableProps extends ViewProps {\n  onPress?: (value?: any) => void;\n  onLongPress?: (value?: any) => void;\n  pressedBackgroundColor?: string;\n  pressedBackgroundBorderRadius?: number;\n  isAnimation?: boolean;\n  elevationLevel?: ShadowLevel;\n  fullWidth?: boolean;\n  color?: ViewColorOptions;\n  isLoading?: boolean;\n  disabled?: boolean;\n}\n\nfunction ZSPressable({\n  onPress,\n  onLongPress,\n  isAnimation = true,\n  pressedBackgroundColor,\n  pressedBackgroundBorderRadius = RADIUS.xl,\n  elevationLevel,\n  fullWidth = false,\n  color,\n  isLoading = false,\n  disabled = false,\n  ...props\n}: ZSPressableProps) {\n  const { palette } = useTheme();\n  const isButtonPress = useSharedValue(0);\n  const lastClickTime = useRef<number>(0);\n  const pressedBgColor = pressedBackgroundColor ?? palette.grey[50] + transparency['10%'];\n\n  const createPressHandler = (callback?: () => void) => {\n    return () => {\n      const now = Date.now();\n      if (now - lastClickTime.current < DEBOUNCE_TIME) return;\n      if (isLoading || disabled) return;\n      lastClickTime.current = now;\n\n      callback?.();\n    };\n  };\n\n  const handlePress = createPressHandler(onPress);\n  const handleLongPress = createPressHandler(onLongPress);\n\n  const boxAnimation = useAnimatedStyle(() => {\n    const scale = interpolate(\n      isButtonPress.value,\n      [0, 1],\n      SCALE_VALUES,\n      'clamp'\n    );\n    return {\n      transform: [{ scale }],\n    };\n  }, []);\n\n  const handlePressIn = () => {\n    isButtonPress.value = withTiming(1, DEFAULT_DURATION);\n  };\n\n  const handlePressOut = () => {\n    isButtonPress.value = withTiming(0, DEFAULT_DURATION);\n  };\n\n  const handlePressStyle = (pressed: boolean) => {\n    return pressed\n      ? {\n        backgroundColor: pressedBgColor,\n        borderRadius: pressedBackgroundBorderRadius,\n      }\n      : {\n        backgroundColor: 'transparent',\n        borderRadius: pressedBackgroundBorderRadius,\n      };\n  };\n\n  return (\n    <View style={[fullWidth ? { width: '100%' as const } : undefined, { opacity: (isLoading || disabled) ? DISABLED_OPACITY : 1 }]}>\n      <Pressable\n        {...props}\n        onPress={handlePress}\n        onLongPress={handleLongPress}\n        onPressIn={handlePressIn}\n        onPressOut={handlePressOut}\n        disabled={isLoading || disabled}\n        style={({ pressed }) => handlePressStyle(pressed)}\n      >\n        <Animated.View style={boxAnimation}>\n          <AnimatedWrapper\n            color={color}\n            isAnimation={isAnimation}\n            elevationLevel={elevationLevel}\n            style={props.style}\n          >\n            {props.children}\n          </AnimatedWrapper>\n        </Animated.View>\n      </Pressable>\n    </View>\n  );\n}\n\nexport default React.memo(ZSPressable);\n"]}

package/build/ui/ZSRadioGroup/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ViewProps } from 'react-native';
 import { RadioOption } from '../types';
 import { ZSTextProps } from '../ZSText';
@@ -13,7 +12,7 @@ interface ZSRadioGroupProps extends ViewProps {
     disabled?: boolean;
     rowCount?: 1 | 2 | 3;
 }
-declare function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled, selectStyle, selectLabel, rowCount, ...props }: ZSRadioGroupProps): React.JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof ZSRadioGroup>;
+declare function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled, selectStyle, selectLabel, rowCount, ...props }: ZSRadioGroupProps): import("react").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ZSRadioGroup>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/build/ui/ZSRadioGroup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAsFhD,UAAU,iBAAkB,SAAQ,SAAS;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAgB,EAChB,WAAW,EACX,WAAkB,EAClB,QAAY,EACZ,GAAG,KAAK,EACT,EAAE,iBAAiB,qBAyCnB;;AA8CD,wBAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,SAAS,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AA6FhD,UAAU,iBAAkB,SAAQ,SAAS;IAC3C,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CACtB;AAED,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAgB,EAChB,WAAW,EACX,WAAkB,EAClB,QAAY,EACZ,GAAG,KAAK,EACT,EAAE,iBAAiB,+BAgDnB;;AA8CD,wBAAkC"}

package/build/ui/ZSRadioGroup/index.js

@@ -5,6 +5,7 @@ import ViewAtom from '../atoms/ViewAtom';
 import ZSText from '../ZSText';
 import ZSPressable from '../ZSPressable';
 import { useTheme } from '../../context/ThemeContext';
+import { DISABLED_OPACITY, RADIUS } from '../../theme/tokens';
 import { SvgCheck } from '../../assets/SvgCheck';
 const ROW_WIDTH = {
     1: '100%',
@@ -22,7 +23,7 @@ const RadioRow = memo(function RadioRow({ option, index, optionCount, rowCount,
                 paddingLeft: isFullWidth ? 0 : isLastCol ? 3 : 0,
                 paddingBottom: isLastRow ? 0 : 10,
             },
-        ], children: _jsx(ZSPressable, { onPress: () => onSelect(option), pressedBackgroundColor: "transparent", fullWidth: true, children: _jsxs(ViewAtom, { style: [styles.row, { borderColor: setColor, backgroundColor: innerColor }], children: [!isFullWidth && (_jsx(ViewAtom, { style: [styles.radioOuter, { borderColor: setColor }], children: _jsx(ViewAtom, { style: [styles.radioInner, { backgroundColor: setColor }] }) })), _jsx(ViewAtom, { style: styles.label, children: _jsx(ZSText, { ...valueStyle, children: option.value }) }), isFullWidth && (_jsx(ViewAtom, { style: [styles.selectButton, { backgroundColor: selectColor }], children: isSelected ? (_jsx(SvgCheck, { size: 18 })) : (_jsx(ZSText, { typo: "body.5", numberOfLines: 1, ...selectStyle, children: selectLabel })) }))] }) }) }));
+        ], children: _jsx(ZSPressable, { onPress: () => onSelect(option), pressedBackgroundColor: "transparent", fullWidth: true, accessibilityRole: 'radio', accessibilityState: { checked: isSelected }, children: _jsxs(ViewAtom, { style: [styles.row, { borderColor: setColor, backgroundColor: innerColor }], children: [!isFullWidth && (_jsx(ViewAtom, { style: [styles.radioOuter, { borderColor: setColor }], children: _jsx(ViewAtom, { style: [styles.radioInner, { backgroundColor: setColor }] }) })), _jsx(ViewAtom, { style: styles.label, children: _jsx(ZSText, { ...valueStyle, children: option.value }) }), isFullWidth && (_jsx(ViewAtom, { style: [styles.selectButton, { backgroundColor: selectColor }], children: isSelected ? (_jsx(SvgCheck, { size: 18 })) : (_jsx(ZSText, { typo: "body.5", numberOfLines: 1, ...selectStyle, children: selectLabel })) }))] }) }) }));
 });
 function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, disabled = false, selectStyle, selectLabel = '선택', rowCount = 1, ...props }) {
     const { palette } = useTheme();
@@ -32,7 +33,14 @@ function ZSRadioGroup({ options, value, onSelect, containerStyle, valueStyle, di
             onSelect(option);
         }
     }, [disabled, onSelect]);
-    return (_jsx(ViewAtom, { style: [styles.container, { flexDirection: isFullWidth ? 'column' : 'row', flexWrap: isFullWidth ? 'nowrap' : 'wrap' }], ...containerStyle, ...props, children: options.map((option, index) => {
+    return (_jsx(ViewAtom, { style: [
+            styles.container,
+            {
+                flexDirection: isFullWidth ? 'column' : 'row',
+                flexWrap: isFullWidth ? 'nowrap' : 'wrap',
+                opacity: disabled ? DISABLED_OPACITY : 1,
+            },
+        ], ...containerStyle, ...props, children: options.map((option, index) => {
             const isSelected = value?.index === option.index;
             const setColor = isSelected ? palette.primary.light : palette.background.neutral;
             return (_jsx(RadioRow, { option: option, index: index, optionCount: options.length, rowCount: rowCount, isSelected: isSelected, isFullWidth: isFullWidth, setColor: setColor, innerColor: isSelected ? palette.background.layer1 : 'transparent', selectColor: isSelected ? palette.primary.main : palette.background.layer2, valueStyle: valueStyle, selectStyle: selectStyle, selectLabel: selectLabel, onSelect: handleSelect }, option.index));
@@ -50,7 +58,7 @@ const styles = StyleSheet.create({
         borderWidth: 1,
         paddingLeft: 10,
         paddingRight: 15,
-        borderRadius: 100,
+        borderRadius: RADIUS.pill,
     },
     radioOuter: {
         width: 20,
@@ -73,7 +81,7 @@ const styles = StyleSheet.create({
     },
     selectButton: {
         paddingHorizontal: 10,
-        borderRadius: 100,
+        borderRadius: RADIUS.pill,
         minWidth: 42,
         minHeight: 24,
         justifyContent: 'center',

package/build/ui/ZSRadioGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, memo } from 'react';\nimport { StyleSheet, ViewProps } from 'react-native';\nimport { RadioOption } from '../types';\nimport ViewAtom from '../atoms/ViewAtom';\nimport ZSText, { ZSTextProps } from '../ZSText';\nimport ZSPressable from '../ZSPressable';\nimport { useTheme } from '../../context/ThemeContext';\nimport { SvgCheck } from '../../assets/SvgCheck';\n\nconst ROW_WIDTH: Record<1 | 2 | 3, '100%' | '50%' | '33.33%'> = {\n  1: '100%',\n  2: '50%',\n  3: '33.33%',\n};\n\ninterface RadioRowProps {\n  option: RadioOption;\n  index: number;\n  optionCount: number;\n  rowCount: 1 | 2 | 3;\n  isSelected: boolean;\n  isFullWidth: boolean;\n  setColor: string;\n  innerColor: string;\n  selectColor: string;\n  valueStyle?: ZSTextProps;\n  selectStyle?: ZSTextProps;\n  selectLabel: string;\n  onSelect: (option: RadioOption) => void;\n}\n\nconst RadioRow = memo(function RadioRow({\n  option,\n  index,\n  optionCount,\n  rowCount,\n  isSelected,\n  isFullWidth,\n  setColor,\n  innerColor,\n  selectColor,\n  valueStyle,\n  selectStyle,\n  selectLabel,\n  onSelect,\n}: RadioRowProps) {\n  const isLastCol = (index + 1) % rowCount === 0;\n  const isLastRow = Math.ceil((index + 1) / rowCount) === Math.ceil(optionCount / rowCount);\n\n  return (\n    <ViewAtom\n      style={[\n        styles.cell,\n        {\n          width: ROW_WIDTH[rowCount],\n          paddingRight: isFullWidth ? 0 : isLastCol ? 0 : 3,\n          paddingLeft: isFullWidth ? 0 : isLastCol ? 3 : 0,\n          paddingBottom: isLastRow ? 0 : 10,\n        },\n      ]}\n    >\n      <ZSPressable onPress={() => onSelect(option)} pressedBackgroundColor=\"transparent\" fullWidth>\n        <ViewAtom style={[styles.row, { borderColor: setColor, backgroundColor: innerColor }]}>\n          {!isFullWidth && (\n            <ViewAtom style={[styles.radioOuter, { borderColor: setColor }]}>\n              <ViewAtom style={[styles.radioInner, { backgroundColor: setColor }]} />\n            </ViewAtom>\n          )}\n\n          <ViewAtom style={styles.label}>\n            <ZSText {...valueStyle}>{option.value}</ZSText>\n          </ViewAtom>\n\n          {isFullWidth && (\n            <ViewAtom style={[styles.selectButton, { backgroundColor: selectColor }]}>\n              {isSelected ? (\n                <SvgCheck size={18} />\n              ) : (\n                <ZSText typo=\"body.5\" numberOfLines={1} {...selectStyle}>\n                  {selectLabel}\n                </ZSText>\n              )}\n            </ViewAtom>\n          )}\n        </ViewAtom>\n      </ZSPressable>\n    </ViewAtom>\n  );\n});\n\ninterface ZSRadioGroupProps extends ViewProps {\n  options: RadioOption[];\n  value?: RadioOption;\n  onSelect: (value: RadioOption) => void;\n  containerStyle?: ViewProps;\n  valueStyle?: ZSTextProps;\n  selectStyle?: ZSTextProps;\n  selectLabel?: string;\n  disabled?: boolean;\n  rowCount?: 1 | 2 | 3;\n}\n\nfunction ZSRadioGroup({\n  options,\n  value,\n  onSelect,\n  containerStyle,\n  valueStyle,\n  disabled = false,\n  selectStyle,\n  selectLabel = '선택',\n  rowCount = 1,\n  ...props\n}: ZSRadioGroupProps) {\n  const { palette } = useTheme();\n  const isFullWidth = rowCount === 1;\n\n  const handleSelect = useCallback((option: RadioOption) => {\n    if (!disabled) {\n      onSelect(option);\n    }\n  }, [disabled, onSelect]);\n\n  return (\n    <ViewAtom\n      style={[styles.container, { flexDirection: isFullWidth ? 'column' : 'row', flexWrap: isFullWidth ? 'nowrap' : 'wrap' }]}\n      {...containerStyle}\n      {...props}\n    >\n      {options.map((option, index) => {\n        const isSelected = value?.index === option.index;\n        const setColor = isSelected ? palette.primary.light : palette.background.neutral;\n\n        return (\n          <RadioRow\n            key={option.index}\n            option={option}\n            index={index}\n            optionCount={options.length}\n            rowCount={rowCount}\n            isSelected={isSelected}\n            isFullWidth={isFullWidth}\n            setColor={setColor}\n            innerColor={isSelected ? palette.background.layer1 : 'transparent'}\n            selectColor={isSelected ? palette.primary.main : palette.background.layer2}\n            valueStyle={valueStyle}\n            selectStyle={selectStyle}\n            selectLabel={selectLabel}\n            onSelect={handleSelect}\n          />\n        );\n      })}\n    </ViewAtom>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    width: '100%',\n  },\n  cell: {},\n  row: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingVertical: 12,\n    borderWidth: 1,\n    paddingLeft: 10,\n    paddingRight: 15,\n    borderRadius: 100,\n  },\n  radioOuter: {\n    width: 20,\n    height: 20,\n    borderWidth: 1,\n    borderRadius: 10,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  radioInner: {\n    width: 12,\n    height: 12,\n    borderRadius: 6,\n  },\n  label: {\n    flex: 1,\n    paddingLeft: 10,\n    paddingRight: 12,\n    minWidth: 0,\n  },\n  selectButton: {\n    paddingHorizontal: 10,\n    borderRadius: 100,\n    minWidth: 42,\n    minHeight: 24,\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexShrink: 0,\n  },\n});\n\nexport default memo(ZSRadioGroup);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/ZSRadioGroup/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, memo } from 'react';\nimport { StyleSheet, ViewProps } from 'react-native';\nimport { RadioOption } from '../types';\nimport ViewAtom from '../atoms/ViewAtom';\nimport ZSText, { ZSTextProps } from '../ZSText';\nimport ZSPressable from '../ZSPressable';\nimport { useTheme } from '../../context/ThemeContext';\nimport { DISABLED_OPACITY, RADIUS } from '../../theme/tokens';\nimport { SvgCheck } from '../../assets/SvgCheck';\n\nconst ROW_WIDTH: Record<1 | 2 | 3, '100%' | '50%' | '33.33%'> = {\n  1: '100%',\n  2: '50%',\n  3: '33.33%',\n};\n\ninterface RadioRowProps {\n  option: RadioOption;\n  index: number;\n  optionCount: number;\n  rowCount: 1 | 2 | 3;\n  isSelected: boolean;\n  isFullWidth: boolean;\n  setColor: string;\n  innerColor: string;\n  selectColor: string;\n  valueStyle?: ZSTextProps;\n  selectStyle?: ZSTextProps;\n  selectLabel: string;\n  onSelect: (option: RadioOption) => void;\n}\n\nconst RadioRow = memo(function RadioRow({\n  option,\n  index,\n  optionCount,\n  rowCount,\n  isSelected,\n  isFullWidth,\n  setColor,\n  innerColor,\n  selectColor,\n  valueStyle,\n  selectStyle,\n  selectLabel,\n  onSelect,\n}: RadioRowProps) {\n  const isLastCol = (index + 1) % rowCount === 0;\n  const isLastRow = Math.ceil((index + 1) / rowCount) === Math.ceil(optionCount / rowCount);\n\n  return (\n    <ViewAtom\n      style={[\n        styles.cell,\n        {\n          width: ROW_WIDTH[rowCount],\n          paddingRight: isFullWidth ? 0 : isLastCol ? 0 : 3,\n          paddingLeft: isFullWidth ? 0 : isLastCol ? 3 : 0,\n          paddingBottom: isLastRow ? 0 : 10,\n        },\n      ]}\n    >\n      <ZSPressable\n        onPress={() => onSelect(option)}\n        pressedBackgroundColor=\"transparent\"\n        fullWidth\n        accessibilityRole='radio'\n        accessibilityState={{ checked: isSelected }}\n      >\n        <ViewAtom style={[styles.row, { borderColor: setColor, backgroundColor: innerColor }]}>\n          {!isFullWidth && (\n            <ViewAtom style={[styles.radioOuter, { borderColor: setColor }]}>\n              <ViewAtom style={[styles.radioInner, { backgroundColor: setColor }]} />\n            </ViewAtom>\n          )}\n\n          <ViewAtom style={styles.label}>\n            <ZSText {...valueStyle}>{option.value}</ZSText>\n          </ViewAtom>\n\n          {isFullWidth && (\n            <ViewAtom style={[styles.selectButton, { backgroundColor: selectColor }]}>\n              {isSelected ? (\n                <SvgCheck size={18} />\n              ) : (\n                <ZSText typo=\"body.5\" numberOfLines={1} {...selectStyle}>\n                  {selectLabel}\n                </ZSText>\n              )}\n            </ViewAtom>\n          )}\n        </ViewAtom>\n      </ZSPressable>\n    </ViewAtom>\n  );\n});\n\ninterface ZSRadioGroupProps extends ViewProps {\n  options: RadioOption[];\n  value?: RadioOption;\n  onSelect: (value: RadioOption) => void;\n  containerStyle?: ViewProps;\n  valueStyle?: ZSTextProps;\n  selectStyle?: ZSTextProps;\n  selectLabel?: string;\n  disabled?: boolean;\n  rowCount?: 1 | 2 | 3;\n}\n\nfunction ZSRadioGroup({\n  options,\n  value,\n  onSelect,\n  containerStyle,\n  valueStyle,\n  disabled = false,\n  selectStyle,\n  selectLabel = '선택',\n  rowCount = 1,\n  ...props\n}: ZSRadioGroupProps) {\n  const { palette } = useTheme();\n  const isFullWidth = rowCount === 1;\n\n  const handleSelect = useCallback((option: RadioOption) => {\n    if (!disabled) {\n      onSelect(option);\n    }\n  }, [disabled, onSelect]);\n\n  return (\n    <ViewAtom\n      style={[\n        styles.container,\n        {\n          flexDirection: isFullWidth ? 'column' : 'row',\n          flexWrap: isFullWidth ? 'nowrap' : 'wrap',\n          opacity: disabled ? DISABLED_OPACITY : 1,\n        },\n      ]}\n      {...containerStyle}\n      {...props}\n    >\n      {options.map((option, index) => {\n        const isSelected = value?.index === option.index;\n        const setColor = isSelected ? palette.primary.light : palette.background.neutral;\n\n        return (\n          <RadioRow\n            key={option.index}\n            option={option}\n            index={index}\n            optionCount={options.length}\n            rowCount={rowCount}\n            isSelected={isSelected}\n            isFullWidth={isFullWidth}\n            setColor={setColor}\n            innerColor={isSelected ? palette.background.layer1 : 'transparent'}\n            selectColor={isSelected ? palette.primary.main : palette.background.layer2}\n            valueStyle={valueStyle}\n            selectStyle={selectStyle}\n            selectLabel={selectLabel}\n            onSelect={handleSelect}\n          />\n        );\n      })}\n    </ViewAtom>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    width: '100%',\n  },\n  cell: {},\n  row: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingVertical: 12,\n    borderWidth: 1,\n    paddingLeft: 10,\n    paddingRight: 15,\n    borderRadius: RADIUS.pill,\n  },\n  radioOuter: {\n    width: 20,\n    height: 20,\n    borderWidth: 1,\n    borderRadius: 10,\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  radioInner: {\n    width: 12,\n    height: 12,\n    borderRadius: 6,\n  },\n  label: {\n    flex: 1,\n    paddingLeft: 10,\n    paddingRight: 12,\n    minWidth: 0,\n  },\n  selectButton: {\n    paddingHorizontal: 10,\n    borderRadius: RADIUS.pill,\n    minWidth: 42,\n    minHeight: 24,\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexShrink: 0,\n  },\n});\n\nexport default memo(ZSRadioGroup);\n"]}

package/build/ui/ZSSegmented/index.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+export type ZSSegmentedTextSize = '1' | '2' | '3' | '4' | '5' | '6';
+export interface ZSSegmentedProps extends ViewProps {
+    /** 세그먼트 라벨 목록 (2개 이상) */
+    options: string[];
+    /** 선택 인덱스를 외부에서 제어할 때 사용 (미지정 시 내부 상태로 동작) */
+    selectedIndex?: number;
+    /** 비제어 모드의 초기 선택 인덱스 */
+    initialIndex?: number;
+    onChange?: (index: number) => void;
+    /** true(기본): 부모 폭을 가득 채움 · false: 가장 긴 라벨 폭에 맞춰 콘텐츠 크기로 렌더링 */
+    fullWidth?: boolean;
+    containerHeight?: number;
+    textSize?: ZSSegmentedTextSize;
+    /** 트랙 배경색 (기본: palette.background.layer2) */
+    trackColor?: string;
+    /** 선택 블럭 색상 (기본: palette.background.base) */
+    thumbColor?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare function ZSSegmented({ options, selectedIndex, initialIndex, onChange, fullWidth, containerHeight, textSize, trackColor, thumbColor, disabled, style, onLayout, ...props }: ZSSegmentedProps): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ZSSegmented>;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/build/ui/ZSSegmented/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/ZSSegmented/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAuD,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUnI,MAAM,MAAM,mBAAmB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEpE,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,yBAAyB;IACzB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,iBAAS,WAAW,CAAC,EACnB,OAAO,EACP,aAAa,EACb,YAAgB,EAChB,QAAQ,EACR,SAAgB,EAChB,eAAoB,EACpB,QAAc,EACd,UAAU,EACV,UAAU,EACV,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAmIlB;;AAED,wBAAuC"}