@ezpg/app-ui 0.0.0-stage → 0.1.0

package/lib/module/components/segmented-tabs/segmented-tabs.js

@@ -0,0 +1,74 @@
+"use strict";
+
+import { Text, View } from 'react-native';
+import { PressableBase } from "../../internal/pressable-base.js";
+import { useTheme } from "../../theme/theme-provider.js";
+import { makeStyles } from "../../utils/styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const HEIGHT = 40;
+const useStyles = makeStyles(t => ({
+  track: {
+    flexDirection: 'row',
+    height: HEIGHT,
+    padding: t.space[1],
+    gap: t.space[1],
+    borderRadius: t.radius.md,
+    backgroundColor: t.colors.muted
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: t.radius.sm
+  },
+  selected: {
+    backgroundColor: t.colors.background,
+    boxShadow: t.shadow.sm
+  },
+  label: {
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '500',
+    color: t.colors.mutedForeground
+  },
+  selectedLabel: {
+    color: t.colors.foreground
+  }
+}));
+export function SegmentedTabs({
+  items,
+  value,
+  onValueChange,
+  style
+}) {
+  const t = useTheme();
+  const s = useStyles();
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "tablist",
+    style: [s.track, style],
+    children: items.map(item => {
+      const selected = item.value === value;
+      return /*#__PURE__*/_jsx(PressableBase, {
+        accessibilityRole: "tab",
+        accessibilityState: {
+          selected
+        },
+        accessibilityLabel: item.label,
+        touchHeight: HEIGHT,
+        pressedStyle: {},
+        onPress: () => {
+          if (!selected) onValueChange(item.value);
+        },
+        style: [s.tab, selected && s.selected],
+        children: /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          maxFontSizeMultiplier: t.maxFontScale,
+          style: [s.label, selected && s.selectedLabel],
+          children: item.label
+        })
+      }, item.value);
+    })
+  });
+}
+//# sourceMappingURL=segmented-tabs.js.map

package/lib/module/components/segmented-tabs/segmented-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","View","PressableBase","useTheme","makeStyles","jsx","_jsx","HEIGHT","useStyles","t","track","flexDirection","height","padding","space","gap","borderRadius","radius","md","backgroundColor","colors","muted","tab","flex","alignItems","justifyContent","sm","selected","background","boxShadow","shadow","label","fontFamily","fontSize","lineHeight","fontWeight","color","mutedForeground","selectedLabel","foreground","SegmentedTabs","items","value","onValueChange","style","s","accessibilityRole","children","map","item","accessibilityState","accessibilityLabel","touchHeight","pressedStyle","onPress","numberOfLines","maxFontSizeMultiplier","maxFontScale"],"sourceRoot":"../../../../src","sources":["components/segmented-tabs/segmented-tabs.tsx"],"mappings":";;AAAA,SAASA,IAAI,EAAEC,IAAI,QAAwC,cAAc;AACzE,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,QAAQ,QAAQ,+BAA4B;AACrD,SAASC,UAAU,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAYhD,MAAMC,MAAM,GAAG,EAAE;AAEjB,MAAMC,SAAS,GAAGJ,UAAU,CAAEK,CAAC,KAAM;EACnCC,KAAK,EAAE;IACLC,aAAa,EAAE,KAAK;IACpBC,MAAM,EAAEL,MAAM;IACdM,OAAO,EAAEJ,CAAC,CAACK,KAAK,CAAC,CAAC,CAAC;IACnBC,GAAG,EAAEN,CAAC,CAACK,KAAK,CAAC,CAAC,CAAC;IACfE,YAAY,EAAEP,CAAC,CAACQ,MAAM,CAACC,EAAE;IACzBC,eAAe,EAAEV,CAAC,CAACW,MAAM,CAACC;EAC5B,CAAC;EACDC,GAAG,EAAE;IACHC,IAAI,EAAE,CAAC;IACPC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBT,YAAY,EAAEP,CAAC,CAACQ,MAAM,CAACS;EACzB,CAAC;EACDC,QAAQ,EAAE;IAAER,eAAe,EAAEV,CAAC,CAACW,MAAM,CAACQ,UAAU;IAAEC,SAAS,EAAEpB,CAAC,CAACqB,MAAM,CAACJ;EAAG,CAAC;EAC1EK,KAAK,EAAE;IACLC,UAAU,EAAEvB,CAAC,CAACuB,UAAU;IACxBC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE,EAAE;IACdC,UAAU,EAAE,KAAK;IACjBC,KAAK,EAAE3B,CAAC,CAACW,MAAM,CAACiB;EAClB,CAAC;EACDC,aAAa,EAAE;IAAEF,KAAK,EAAE3B,CAAC,CAACW,MAAM,CAACmB;EAAW;AAC9C,CAAC,CAAC,CAAC;AAEH,OAAO,SAASC,aAAaA,CAAmB;EAC9CC,KAAK;EACLC,KAAK;EACLC,aAAa;EACbC;AACqB,CAAC,EAAE;EACxB,MAAMnC,CAAC,GAAGN,QAAQ,CAAC,CAAC;EACpB,MAAM0C,CAAC,GAAGrC,SAAS,CAAC,CAAC;EACrB,oBACEF,IAAA,CAACL,IAAI;IAAC6C,iBAAiB,EAAC,SAAS;IAACF,KAAK,EAAE,CAACC,CAAC,CAACnC,KAAK,EAAEkC,KAAK,CAAE;IAAAG,QAAA,EACvDN,KAAK,CAACO,GAAG,CAAEC,IAAI,IAAK;MACnB,MAAMtB,QAAQ,GAAGsB,IAAI,CAACP,KAAK,KAAKA,KAAK;MACrC,oBACEpC,IAAA,CAACJ,aAAa;QAEZ4C,iBAAiB,EAAC,KAAK;QACvBI,kBAAkB,EAAE;UAAEvB;QAAS,CAAE;QACjCwB,kBAAkB,EAAEF,IAAI,CAAClB,KAAM;QAC/BqB,WAAW,EAAE7C,MAAO;QACpB8C,YAAY,EAAE,CAAC,CAAE;QACjBC,OAAO,EAAEA,CAAA,KAAM;UACb,IAAI,CAAC3B,QAAQ,EAAEgB,aAAa,CAACM,IAAI,CAACP,KAAK,CAAC;QAC1C,CAAE;QACFE,KAAK,EAAE,CAACC,CAAC,CAACvB,GAAG,EAAEK,QAAQ,IAAIkB,CAAC,CAAClB,QAAQ,CAAE;QAAAoB,QAAA,eAEvCzC,IAAA,CAACN,IAAI;UACHuD,aAAa,EAAE,CAAE;UACjBC,qBAAqB,EAAE/C,CAAC,CAACgD,YAAa;UACtCb,KAAK,EAAE,CAACC,CAAC,CAACd,KAAK,EAAEJ,QAAQ,IAAIkB,CAAC,CAACP,aAAa,CAAE;UAAAS,QAAA,EAE7CE,IAAI,CAAClB;QAAK,CACP;MAAC,GAjBFkB,IAAI,CAACP,KAkBG,CAAC;IAEpB,CAAC;EAAC,CACE,CAAC;AAEX","ignoreList":[]}

package/lib/module/components/sheet/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Sheet } from "./sheet.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/sheet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Sheet"],"sourceRoot":"../../../../src","sources":["components/sheet/index.ts"],"mappings":";;AAAA,SAASA,KAAK,QAAyB,YAAS","ignoreList":[]}

package/lib/module/components/sheet/sheet.js

@@ -0,0 +1,97 @@
+"use strict";
+
+import { Animated, KeyboardAvoidingView, Modal, Text, useWindowDimensions, View } from 'react-native';
+import { Backdrop, useOverlayTransition } from "../../internal/overlay.js";
+import { useTheme } from "../../theme/theme-provider.js";
+import { makeStyles } from "../../utils/styles.js";
+import { ToastHost } from "../toast/toast.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles(t => ({
+  root: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  panel: {
+    maxHeight: '90%',
+    paddingTop: t.space[2],
+    paddingHorizontal: t.space[4],
+    gap: t.space[3],
+    borderTopLeftRadius: t.radius.lg,
+    borderTopRightRadius: t.radius.lg,
+    backgroundColor: t.colors.background,
+    boxShadow: t.shadow.md
+  },
+  handle: {
+    alignSelf: 'center',
+    width: 36,
+    height: 4,
+    borderRadius: t.radius.full,
+    backgroundColor: t.colors.border
+  },
+  title: {
+    ...t.typography.title,
+    fontFamily: t.fontFamily,
+    color: t.colors.foreground
+  }
+}));
+export function Sheet({
+  open,
+  onOpenChange,
+  title,
+  bottomInset = 0,
+  dismissible = true,
+  closeLabel = '닫기',
+  children,
+  style
+}) {
+  const t = useTheme();
+  const s = useStyles();
+  const {
+    height
+  } = useWindowDimensions();
+  const {
+    mounted,
+    progress
+  } = useOverlayTransition(open);
+  const close = () => {
+    if (dismissible) onOpenChange(false);
+  };
+  return /*#__PURE__*/_jsxs(Modal, {
+    visible: mounted,
+    transparent: true,
+    animationType: "none",
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
+    onRequestClose: close,
+    children: [/*#__PURE__*/_jsxs(KeyboardAvoidingView, {
+      behavior: "padding",
+      style: s.root,
+      children: [/*#__PURE__*/_jsx(Backdrop, {
+        progress: progress,
+        onPress: close,
+        label: closeLabel
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        accessibilityViewIsModal: true,
+        style: [s.panel, {
+          paddingBottom: t.space[4] + bottomInset
+        }, {
+          transform: [{
+            translateY: progress.interpolate({
+              inputRange: [0, 1],
+              outputRange: [height, 0]
+            })
+          }]
+        }, style],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: s.handle
+        }), title ? /*#__PURE__*/_jsx(Text, {
+          accessibilityRole: "header",
+          maxFontSizeMultiplier: t.maxFontScale,
+          style: s.title,
+          children: title
+        }) : null, children]
+      })]
+    }), /*#__PURE__*/_jsx(ToastHost, {})]
+  });
+}
+//# sourceMappingURL=sheet.js.map

package/lib/module/components/sheet/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Animated","KeyboardAvoidingView","Modal","Text","useWindowDimensions","View","Backdrop","useOverlayTransition","useTheme","makeStyles","ToastHost","jsx","_jsx","jsxs","_jsxs","useStyles","t","root","flex","justifyContent","panel","maxHeight","paddingTop","space","paddingHorizontal","gap","borderTopLeftRadius","radius","lg","borderTopRightRadius","backgroundColor","colors","background","boxShadow","shadow","md","handle","alignSelf","width","height","borderRadius","full","border","title","typography","fontFamily","color","foreground","Sheet","open","onOpenChange","bottomInset","dismissible","closeLabel","children","style","s","mounted","progress","close","visible","transparent","animationType","statusBarTranslucent","navigationBarTranslucent","onRequestClose","behavior","onPress","label","accessibilityViewIsModal","paddingBottom","transform","translateY","interpolate","inputRange","outputRange","accessibilityRole","maxFontSizeMultiplier","maxFontScale"],"sourceRoot":"../../../../src","sources":["components/sheet/sheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/skeleton/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Skeleton } from "./skeleton.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Skeleton"],"sourceRoot":"../../../../src","sources":["components/skeleton/index.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAA4B,eAAY","ignoreList":[]}

package/lib/module/components/skeleton/skeleton.js

@@ -0,0 +1,49 @@
+"use strict";
+
+import { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import { useNativeDriver } from "../../internal/overlay.js";
+import { useReducedMotion } from "../../internal/use-reduced-motion.js";
+import { useTheme } from "../../theme/theme-provider.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** 불러오는 중인 자리. '동작 줄이기'가 켜져 있으면 깜빡이지 않는다 */
+export function Skeleton({
+  width = '100%',
+  height = 16,
+  radius,
+  style
+}) {
+  const t = useTheme();
+  const reduced = useReducedMotion();
+  const opacity = useRef(new Animated.Value(1)).current;
+  useEffect(() => {
+    if (reduced) {
+      opacity.setValue(0.7);
+      return;
+    }
+    const half = t.motion.duration * 4;
+    const loop = Animated.loop(Animated.sequence([Animated.timing(opacity, {
+      toValue: 0.5,
+      duration: half,
+      useNativeDriver
+    }), Animated.timing(opacity, {
+      toValue: 1,
+      duration: half,
+      useNativeDriver
+    })]));
+    loop.start();
+    return () => loop.stop();
+  }, [opacity, reduced, t.motion.duration]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    accessible: false,
+    importantForAccessibility: "no-hide-descendants",
+    style: [{
+      width,
+      height,
+      borderRadius: radius ?? t.radius.sm,
+      backgroundColor: t.colors.muted,
+      opacity
+    }, style]
+  });
+}
+//# sourceMappingURL=skeleton.js.map

package/lib/module/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","Animated","useNativeDriver","useReducedMotion","useTheme","jsx","_jsx","Skeleton","width","height","radius","style","t","reduced","opacity","Value","current","setValue","half","motion","duration","loop","sequence","timing","toValue","start","stop","View","accessible","importantForAccessibility","borderRadius","sm","backgroundColor","colors","muted"],"sourceRoot":"../../../../src","sources":["components/skeleton/skeleton.tsx"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACzC,SACEC,QAAQ,QAIH,cAAc;AACrB,SAASC,eAAe,QAAQ,2BAAwB;AACxD,SAASC,gBAAgB,QAAQ,sCAAmC;AACpE,SAASC,QAAQ,QAAQ,+BAA4B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAYtD;AACA,OAAO,SAASC,QAAQA,CAAC;EACvBC,KAAK,GAAG,MAAM;EACdC,MAAM,GAAG,EAAE;EACXC,MAAM;EACNC;AACa,CAAC,EAAE;EAChB,MAAMC,CAAC,GAAGR,QAAQ,CAAC,CAAC;EACpB,MAAMS,OAAO,GAAGV,gBAAgB,CAAC,CAAC;EAClC,MAAMW,OAAO,GAAGd,MAAM,CAAC,IAAIC,QAAQ,CAACc,KAAK,CAAC,CAAC,CAAC,CAAC,CAACC,OAAO;EAErDjB,SAAS,CAAC,MAAM;IACd,IAAIc,OAAO,EAAE;MACXC,OAAO,CAACG,QAAQ,CAAC,GAAG,CAAC;MACrB;IACF;IACA,MAAMC,IAAI,GAAGN,CAAC,CAACO,MAAM,CAACC,QAAQ,GAAG,CAAC;IAClC,MAAMC,IAAI,GAAGpB,QAAQ,CAACoB,IAAI,CACxBpB,QAAQ,CAACqB,QAAQ,CAAC,CAChBrB,QAAQ,CAACsB,MAAM,CAACT,OAAO,EAAE;MACvBU,OAAO,EAAE,GAAG;MACZJ,QAAQ,EAAEF,IAAI;MACdhB;IACF,CAAC,CAAC,EACFD,QAAQ,CAACsB,MAAM,CAACT,OAAO,EAAE;MACvBU,OAAO,EAAE,CAAC;MACVJ,QAAQ,EAAEF,IAAI;MACdhB;IACF,CAAC,CAAC,CACH,CACH,CAAC;IACDmB,IAAI,CAACI,KAAK,CAAC,CAAC;IACZ,OAAO,MAAMJ,IAAI,CAACK,IAAI,CAAC,CAAC;EAC1B,CAAC,EAAE,CAACZ,OAAO,EAAED,OAAO,EAAED,CAAC,CAACO,MAAM,CAACC,QAAQ,CAAC,CAAC;EAEzC,oBACEd,IAAA,CAACL,QAAQ,CAAC0B,IAAI;IACZC,UAAU,EAAE,KAAM;IAClBC,yBAAyB,EAAC,qBAAqB;IAC/ClB,KAAK,EAAE,CACL;MACEH,KAAK;MACLC,MAAM;MACNqB,YAAY,EAAEpB,MAAM,IAAIE,CAAC,CAACF,MAAM,CAACqB,EAAE;MACnCC,eAAe,EAAEpB,CAAC,CAACqB,MAAM,CAACC,KAAK;MAC/BpB;IACF,CAAC,EACDH,KAAK;EACL,CACH,CAAC;AAEN","ignoreList":[]}

package/lib/module/components/status-badge/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { StatusBadge } from "./status-badge.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/status-badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StatusBadge"],"sourceRoot":"../../../../src","sources":["components/status-badge/index.ts"],"mappings":";;AAAA,SACEA,WAAW,QAGN,mBAAgB","ignoreList":[]}

package/lib/module/components/status-badge/status-badge.js

@@ -0,0 +1,48 @@
+"use strict";
+
+import { Text, View } from 'react-native';
+import { useTheme } from "../../theme/theme-provider.js";
+import { makeStyles } from "../../utils/styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles(t => ({
+  base: {
+    alignSelf: 'flex-start',
+    paddingHorizontal: t.space[2],
+    paddingVertical: 2,
+    borderRadius: t.radius.full
+  },
+  label: {
+    ...t.typography.caption,
+    fontFamily: t.fontFamily,
+    fontWeight: '600'
+  }
+}));
+export function StatusBadge({
+  tone = 'neutral',
+  children,
+  style
+}) {
+  const t = useTheme();
+  const s = useStyles();
+  const [bg, fg] = {
+    neutral: [t.colors.muted, t.colors.mutedForeground],
+    info: [t.colors.info, t.colors.infoForeground],
+    success: [t.colors.success, t.colors.successForeground],
+    warning: [t.colors.warning, t.colors.warningForeground],
+    destructive: [t.colors.destructive, t.colors.destructiveForeground]
+  }[tone];
+  return /*#__PURE__*/_jsx(View, {
+    style: [s.base, {
+      backgroundColor: bg
+    }, style],
+    children: /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 1,
+      maxFontSizeMultiplier: t.maxFontScale,
+      style: [s.label, {
+        color: fg
+      }],
+      children: children
+    })
+  });
+}
+//# sourceMappingURL=status-badge.js.map

package/lib/module/components/status-badge/status-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","View","useTheme","makeStyles","jsx","_jsx","useStyles","t","base","alignSelf","paddingHorizontal","space","paddingVertical","borderRadius","radius","full","label","typography","caption","fontFamily","fontWeight","StatusBadge","tone","children","style","s","bg","fg","neutral","colors","muted","mutedForeground","info","infoForeground","success","successForeground","warning","warningForeground","destructive","destructiveForeground","backgroundColor","numberOfLines","maxFontSizeMultiplier","maxFontScale","color"],"sourceRoot":"../../../../src","sources":["components/status-badge/status-badge.tsx"],"mappings":";;AAAA,SAASA,IAAI,EAAEC,IAAI,QAAwC,cAAc;AACzE,SAASC,QAAQ,QAAQ,+BAA4B;AACrD,SAASC,UAAU,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAYhD,MAAMC,SAAS,GAAGH,UAAU,CAAEI,CAAC,KAAM;EACnCC,IAAI,EAAE;IACJC,SAAS,EAAE,YAAY;IACvBC,iBAAiB,EAAEH,CAAC,CAACI,KAAK,CAAC,CAAC,CAAC;IAC7BC,eAAe,EAAE,CAAC;IAClBC,YAAY,EAAEN,CAAC,CAACO,MAAM,CAACC;EACzB,CAAC;EACDC,KAAK,EAAE;IACL,GAAGT,CAAC,CAACU,UAAU,CAACC,OAAO;IACvBC,UAAU,EAAEZ,CAAC,CAACY,UAAU;IACxBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC,CAAC;AAEH,OAAO,SAASC,WAAWA,CAAC;EAC1BC,IAAI,GAAG,SAAS;EAChBC,QAAQ;EACRC;AACgB,CAAC,EAAE;EACnB,MAAMjB,CAAC,GAAGL,QAAQ,CAAC,CAAC;EACpB,MAAMuB,CAAC,GAAGnB,SAAS,CAAC,CAAC;EACrB,MAAM,CAACoB,EAAE,EAAEC,EAAE,CAAC,GAAG;IACfC,OAAO,EAAE,CAACrB,CAAC,CAACsB,MAAM,CAACC,KAAK,EAAEvB,CAAC,CAACsB,MAAM,CAACE,eAAe,CAAC;IACnDC,IAAI,EAAE,CAACzB,CAAC,CAACsB,MAAM,CAACG,IAAI,EAAEzB,CAAC,CAACsB,MAAM,CAACI,cAAc,CAAC;IAC9CC,OAAO,EAAE,CAAC3B,CAAC,CAACsB,MAAM,CAACK,OAAO,EAAE3B,CAAC,CAACsB,MAAM,CAACM,iBAAiB,CAAC;IACvDC,OAAO,EAAE,CAAC7B,CAAC,CAACsB,MAAM,CAACO,OAAO,EAAE7B,CAAC,CAACsB,MAAM,CAACQ,iBAAiB,CAAC;IACvDC,WAAW,EAAE,CAAC/B,CAAC,CAACsB,MAAM,CAACS,WAAW,EAAE/B,CAAC,CAACsB,MAAM,CAACU,qBAAqB;EACpE,CAAC,CAACjB,IAAI,CAAC;EACP,oBACEjB,IAAA,CAACJ,IAAI;IAACuB,KAAK,EAAE,CAACC,CAAC,CAACjB,IAAI,EAAE;MAAEgC,eAAe,EAAEd;IAAG,CAAC,EAAEF,KAAK,CAAE;IAAAD,QAAA,eACpDlB,IAAA,CAACL,IAAI;MACHyC,aAAa,EAAE,CAAE;MACjBC,qBAAqB,EAAEnC,CAAC,CAACoC,YAAa;MACtCnB,KAAK,EAAE,CAACC,CAAC,CAACT,KAAK,EAAE;QAAE4B,KAAK,EAAEjB;MAAG,CAAC,CAAE;MAAAJ,QAAA,EAE/BA;IAAQ,CACL;EAAC,CACH,CAAC;AAEX","ignoreList":[]}

package/lib/module/components/switch/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Switch } from "./switch.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Switch"],"sourceRoot":"../../../../src","sources":["components/switch/index.ts"],"mappings":";;AAAA,SAASA,MAAM,QAA0B,aAAU","ignoreList":[]}

package/lib/module/components/switch/switch.js

@@ -0,0 +1,26 @@
+"use strict";
+
+import { Switch as RNSwitch } from 'react-native';
+import { useTheme } from "../../theme/theme-provider.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Switch({
+  disabled,
+  style,
+  ...rest
+}) {
+  const t = useTheme();
+  return /*#__PURE__*/_jsx(RNSwitch, {
+    trackColor: {
+      false: t.colors.border,
+      true: t.colors.primary
+    },
+    thumbColor: t.colors.background,
+    ios_backgroundColor: t.colors.border,
+    ...rest,
+    disabled: disabled,
+    style: [disabled && {
+      opacity: t.opacity.disabled
+    }, style]
+  });
+}
+//# sourceMappingURL=switch.js.map

package/lib/module/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Switch","RNSwitch","useTheme","jsx","_jsx","disabled","style","rest","t","trackColor","false","colors","border","true","primary","thumbColor","background","ios_backgroundColor","opacity"],"sourceRoot":"../../../../src","sources":["components/switch/switch.tsx"],"mappings":";;AACA,SACEA,MAAM,IAAIC,QAAQ,QAEb,cAAc;AACrB,SAASC,QAAQ,QAAQ,+BAA4B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAQtD,OAAO,SAASJ,MAAMA,CAAC;EAAEK,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAkB,CAAC,EAAE;EAChE,MAAMC,CAAC,GAAGN,QAAQ,CAAC,CAAC;EACpB,oBACEE,IAAA,CAACH,QAAQ;IACPQ,UAAU,EAAE;MAAEC,KAAK,EAAEF,CAAC,CAACG,MAAM,CAACC,MAAM;MAAEC,IAAI,EAAEL,CAAC,CAACG,MAAM,CAACG;IAAQ,CAAE;IAC/DC,UAAU,EAAEP,CAAC,CAACG,MAAM,CAACK,UAAW;IAChCC,mBAAmB,EAAET,CAAC,CAACG,MAAM,CAACC,MAAO;IAAA,GACjCL,IAAI;IACRF,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAE,CAACD,QAAQ,IAAI;MAAEa,OAAO,EAAEV,CAAC,CAACU,OAAO,CAACb;IAAS,CAAC,EAAEC,KAAK;EAAE,CAC7D,CAAC;AAEN","ignoreList":[]}

package/lib/module/components/text/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Text } from "./text.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text"],"sourceRoot":"../../../../src","sources":["components/text/index.ts"],"mappings":";;AAAA,SAASA,IAAI,QAAwD,WAAQ","ignoreList":[]}

package/lib/module/components/text/text.js

@@ -0,0 +1,56 @@
+"use strict";
+
+import { Text as RNText } from 'react-native';
+import { useTheme } from "../../theme/theme-provider.js";
+import { makeStyles } from "../../utils/styles.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles(t => ({
+  caption: t.typography.caption,
+  body: t.typography.body,
+  bodyLg: t.typography.bodyLg,
+  title: t.typography.title,
+  display: t.typography.display,
+  default: {
+    color: t.colors.foreground
+  },
+  muted: {
+    color: t.colors.mutedForeground
+  },
+  destructive: {
+    color: t.colors.destructive
+  },
+  success: {
+    color: t.colors.success
+  },
+  font: {
+    fontFamily: t.fontFamily
+  },
+  regular: {
+    fontWeight: '400'
+  },
+  medium: {
+    fontWeight: '500'
+  },
+  semibold: {
+    fontWeight: '600'
+  },
+  bold: {
+    fontWeight: '700'
+  }
+}));
+export function Text({
+  variant = 'body',
+  tone = 'default',
+  weight,
+  style,
+  ...rest
+}) {
+  const t = useTheme();
+  const s = useStyles();
+  return /*#__PURE__*/_jsx(RNText, {
+    maxFontSizeMultiplier: t.maxFontScale,
+    ...rest,
+    style: [s.font, s[variant], s[tone], weight && s[weight], style]
+  });
+}
+//# sourceMappingURL=text.js.map

package/lib/module/components/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Text","RNText","useTheme","makeStyles","jsx","_jsx","useStyles","t","caption","typography","body","bodyLg","title","display","default","color","colors","foreground","muted","mutedForeground","destructive","success","font","fontFamily","regular","fontWeight","medium","semibold","bold","variant","tone","weight","style","rest","s","maxFontSizeMultiplier","maxFontScale"],"sourceRoot":"../../../../src","sources":["components/text/text.tsx"],"mappings":";;AACA,SAASA,IAAI,IAAIC,MAAM,QAAuC,cAAc;AAE5E,SAASC,QAAQ,QAAQ,+BAA4B;AACrD,SAASC,UAAU,QAAQ,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgBhD,MAAMC,SAAS,GAAGH,UAAU,CAAEI,CAAC,KAAM;EACnCC,OAAO,EAAED,CAAC,CAACE,UAAU,CAACD,OAAO;EAC7BE,IAAI,EAAEH,CAAC,CAACE,UAAU,CAACC,IAAI;EACvBC,MAAM,EAAEJ,CAAC,CAACE,UAAU,CAACE,MAAM;EAC3BC,KAAK,EAAEL,CAAC,CAACE,UAAU,CAACG,KAAK;EACzBC,OAAO,EAAEN,CAAC,CAACE,UAAU,CAACI,OAAO;EAC7BC,OAAO,EAAE;IAAEC,KAAK,EAAER,CAAC,CAACS,MAAM,CAACC;EAAW,CAAC;EACvCC,KAAK,EAAE;IAAEH,KAAK,EAAER,CAAC,CAACS,MAAM,CAACG;EAAgB,CAAC;EAC1CC,WAAW,EAAE;IAAEL,KAAK,EAAER,CAAC,CAACS,MAAM,CAACI;EAAY,CAAC;EAC5CC,OAAO,EAAE;IAAEN,KAAK,EAAER,CAAC,CAACS,MAAM,CAACK;EAAQ,CAAC;EACpCC,IAAI,EAAE;IAAEC,UAAU,EAAEhB,CAAC,CAACgB;EAAW,CAAC;EAClCC,OAAO,EAAE;IAAEC,UAAU,EAAE;EAAM,CAAC;EAC9BC,MAAM,EAAE;IAAED,UAAU,EAAE;EAAM,CAAC;EAC7BE,QAAQ,EAAE;IAAEF,UAAU,EAAE;EAAM,CAAC;EAC/BG,IAAI,EAAE;IAAEH,UAAU,EAAE;EAAM;AAC5B,CAAC,CAAC,CAAC;AAEH,OAAO,SAASzB,IAAIA,CAAC;EACnB6B,OAAO,GAAG,MAAM;EAChBC,IAAI,GAAG,SAAS;EAChBC,MAAM;EACNC,KAAK;EACL,GAAGC;AACM,CAAC,EAAE;EACZ,MAAM1B,CAAC,GAAGL,QAAQ,CAAC,CAAC;EACpB,MAAMgC,CAAC,GAAG5B,SAAS,CAAC,CAAC;EACrB,oBACED,IAAA,CAACJ,MAAM;IACLkC,qBAAqB,EAAE5B,CAAC,CAAC6B,YAAa;IAAA,GAClCH,IAAI;IACRD,KAAK,EAAE,CAACE,CAAC,CAACZ,IAAI,EAAEY,CAAC,CAACL,OAAO,CAAC,EAAEK,CAAC,CAACJ,IAAI,CAAC,EAAEC,MAAM,IAAIG,CAAC,CAACH,MAAM,CAAC,EAAEC,KAAK;EAAE,CAClE,CAAC;AAEN","ignoreList":[]}

package/lib/module/components/toast/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { ToastHost, ToastProvider, useToast } from "./toast.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ToastHost","ToastProvider","useToast"],"sourceRoot":"../../../../src","sources":["components/toast/index.ts"],"mappings":";;AAAA,SACEA,SAAS,EACTC,aAAa,EACbC,QAAQ,QAKH,YAAS","ignoreList":[]}

package/lib/module/components/toast/toast.js

@@ -0,0 +1,203 @@
+"use strict";
+
+import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from 'react';
+import { AccessibilityInfo, Animated, Platform, Text, View } from 'react-native';
+import { useNativeDriver } from "../../internal/overlay.js";
+import { PressableBase } from "../../internal/pressable-base.js";
+import { useReducedMotion } from "../../internal/use-reduced-motion.js";
+import { useTheme } from "../../theme/theme-provider.js";
+import { makeStyles } from "../../utils/styles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Provider 하나가 가진 상태. show를 불러도 Provider 아래 화면은 다시 렌더링되지 않는다. */
+function createToastStore() {
+  let current = null;
+  let timer;
+  let seq = 0;
+  let hosts = [];
+  const listeners = new Set();
+  const emit = () => listeners.forEach(l => l());
+  const hide = () => {
+    clearTimeout(timer);
+    current = null;
+    emit();
+  };
+  return {
+    bottomInset: 0,
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    getCurrent: () => current,
+    /** 가장 나중에 붙은 host(가장 위의 Modal)만 그린다 */
+    getTopHost: () => hosts[hosts.length - 1],
+    addHost(id) {
+      hosts = [...hosts, id];
+      emit();
+      return () => {
+        hosts = hosts.filter(h => h !== id);
+        emit();
+      };
+    },
+    show({
+      message,
+      tone = 'neutral',
+      duration,
+      action
+    }) {
+      clearTimeout(timer);
+      current = {
+        id: ++seq,
+        message,
+        tone,
+        action
+      };
+      timer = setTimeout(hide, duration ?? (action ? 4000 : 2500));
+      emit();
+      if (Platform.OS === 'ios') AccessibilityInfo.announceForAccessibility(message);
+    },
+    hide
+  };
+}
+const StoreContext = /*#__PURE__*/createContext(null);
+export function ToastProvider({
+  bottomInset = 0,
+  children
+}) {
+  const [store] = useState(createToastStore);
+  store.bottomInset = bottomInset;
+  useEffect(() => () => store.hide(), [store]);
+  return /*#__PURE__*/_jsxs(StoreContext.Provider, {
+    value: store,
+    children: [children, /*#__PURE__*/_jsx(ToastHost, {})]
+  });
+}
+export function useToast() {
+  const store = useContext(StoreContext);
+  if (!store) throw new Error('useToast must be used inside <ToastProvider>.');
+  return store;
+}
+const useStyles = makeStyles(t => ({
+  layer: {
+    position: 'absolute',
+    left: t.space[4],
+    right: t.space[4],
+    alignItems: 'center'
+  },
+  toast: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    maxWidth: 480,
+    minHeight: 48,
+    paddingHorizontal: t.space[4],
+    paddingVertical: t.space[3],
+    borderRadius: t.radius.md,
+    boxShadow: t.shadow.md
+  },
+  withAction: {
+    alignSelf: 'stretch',
+    paddingVertical: 0,
+    paddingRight: t.space[2]
+  },
+  message: {
+    ...t.typography.body,
+    flexShrink: 1,
+    fontFamily: t.fontFamily
+  },
+  messageFill: {
+    flex: 1,
+    fontSize: 14
+  },
+  action: {
+    paddingHorizontal: t.space[3],
+    justifyContent: 'center'
+  },
+  actionLabel: {
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    lineHeight: 20,
+    fontWeight: '700'
+  }
+}));
+
+/**
+ * Toast를 그리는 자리. Provider가 하나 두고, Modal을 쓰는 컴포넌트(Sheet · Dialog)가
+ * Modal 안에 하나씩 더 둔다. 가장 위의 host만 그린다.
+ */
+export function ToastHost() {
+  const store = useContext(StoreContext);
+  return store ? /*#__PURE__*/_jsx(ToastHostInner, {
+    store: store
+  }) : null;
+}
+function ToastHostInner({
+  store
+}) {
+  const t = useTheme();
+  const s = useStyles();
+  const id = useId();
+  const reduced = useReducedMotion();
+  const opacity = useRef(new Animated.Value(0)).current;
+  const current = useSyncExternalStore(store.subscribe, store.getCurrent);
+  const isTop = useSyncExternalStore(store.subscribe, () => store.getTopHost() === id);
+  useEffect(() => store.addHost(id), [store, id]);
+  useEffect(() => {
+    if (!current) return;
+    opacity.setValue(reduced ? 1 : 0);
+    if (reduced) return;
+    const animation = Animated.timing(opacity, {
+      toValue: 1,
+      duration: t.motion.duration,
+      useNativeDriver
+    });
+    animation.start();
+    return () => animation.stop();
+  }, [current, opacity, reduced, t.motion.duration]);
+  if (!current || !isTop) return null;
+  const [bg, fg] = {
+    neutral: [t.colors.foreground, t.colors.background],
+    success: [t.colors.success, t.colors.successForeground],
+    destructive: [t.colors.destructive, t.colors.destructiveForeground]
+  }[current.tone];
+  // 어두운 바탕(light) 위에서는 밝은 파랑, 밝은 바탕(dark) 위에서는 진한 파랑
+  const actionColor = current.tone !== 'neutral' ? fg : t.scheme === 'light' ? '#93c5fd' : '#1d4ed8';
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "box-none",
+    style: [s.layer, {
+      bottom: t.space[4] + store.bottomInset
+    }],
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      accessibilityRole: "alert",
+      accessibilityLiveRegion: "polite",
+      style: [s.toast, !!current.action && s.withAction, {
+        backgroundColor: bg,
+        opacity
+      }],
+      children: [/*#__PURE__*/_jsx(Text, {
+        maxFontSizeMultiplier: t.maxFontScale,
+        style: [s.message, !!current.action && s.messageFill, {
+          color: fg
+        }],
+        children: current.message
+      }), current.action ? /*#__PURE__*/_jsx(PressableBase, {
+        accessibilityRole: "button",
+        accessibilityLabel: current.action.label,
+        touchHeight: 44,
+        style: s.action,
+        onPress: () => {
+          current.action?.onPress();
+          store.hide();
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          maxFontSizeMultiplier: t.maxFontScale,
+          style: [s.actionLabel, {
+            color: actionColor
+          }],
+          children: current.action.label
+        })
+      }) : null]
+    })
+  });
+}
+//# sourceMappingURL=toast.js.map