@ezpg/app-ui 0.3.0 → 0.5.0

package/src/blocks/selection-bar/selection-bar.tsx

@@ -25,7 +25,7 @@ const useStyles = makeStyles((t) => ({
     backgroundColor: t.colors.background,
     boxShadow: t.shadow.md,
   },
-  info: { flex: 1, gap: 2 },
+  info: { flex: 1, gap: t.space[1] },
   count: { fontVariant: ['tabular-nums'] },
 }));
 

package/src/blocks/shipping-tracking-row/shipping-tracking-row.tsx

@@ -31,7 +31,7 @@ const useStyles = makeStyles((t) => ({
   dot: {
     width: 10,
     height: 10,
-    borderRadius: 5,
+    borderRadius: t.radius.full,
     backgroundColor: t.colors.border,
   },
   on: { backgroundColor: t.colors.primary },

package/src/blocks/site-preview-frame/site-preview-frame.tsx

@@ -45,7 +45,7 @@ const useStyles = makeStyles((t) => ({
   bar: {
     flexDirection: 'row',
     alignItems: 'center',
-    gap: 10,
+    gap: t.space[2],
     minHeight: 60,
     paddingLeft: t.space[4],
     paddingRight: t.space[2],

package/src/blocks/step-screen/step-screen.tsx

@@ -6,6 +6,7 @@ import { ChevronGlyph } from '../../internal/glyphs';
 import { PressableBase } from '../../internal/pressable-base';
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
+import { Notice, type TemplateNotice } from '../../templates/parts';
 
 export type StepAction = {
   label: string;
@@ -22,6 +23,7 @@ export type StepScreenProps = {
   backLabel?: string;
   primaryAction: StepAction;
   secondaryAction?: StepAction;
+  notice?: TemplateNotice;
   bottomInset?: number;
   children?: ReactNode;
 };
@@ -29,14 +31,14 @@ export type StepScreenProps = {
 const useStyles = makeStyles((t) => ({
   root: { flex: 1, backgroundColor: t.colors.background },
   header: {
-    height: 52,
+    height: t.headerHeight,
     flexDirection: 'row',
     alignItems: 'center',
     paddingHorizontal: t.space[1],
   },
   back: {
-    width: 44,
-    height: 44,
+    width: t.minTouchSize,
+    height: t.minTouchSize,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -44,16 +46,19 @@ const useStyles = makeStyles((t) => ({
   track: { height: 3, backgroundColor: t.colors.muted },
   fill: { height: 3, backgroundColor: t.colors.primary },
   body: {
-    gap: t.space[5],
-    paddingTop: t.space[6],
-    paddingHorizontal: t.space[5],
-    paddingBottom: t.space[4],
+    gap: t.layout.titleGap,
+    paddingTop: t.layout.screenTop,
+    paddingHorizontal: t.layout.screenX,
+    paddingBottom: t.layout.footerBottom,
+  },
+  title: {
+    fontSize: t.typography.screenTitle.fontSize,
+    lineHeight: t.typography.screenTitle.lineHeight,
   },
-  title: { fontSize: 24, lineHeight: 32 },
   footer: {
-    gap: t.space[2],
-    paddingHorizontal: t.space[5],
-    paddingTop: t.space[3],
+    gap: t.layout.itemGap,
+    paddingHorizontal: t.layout.screenX,
+    paddingTop: t.layout.footerTop,
     backgroundColor: t.colors.background,
   },
 }));
@@ -66,6 +71,7 @@ export function StepScreen({
   backLabel = '이전',
   primaryAction,
   secondaryAction,
+  notice,
   bottomInset = 0,
   children,
 }: StepScreenProps) {
@@ -106,7 +112,13 @@ export function StepScreen({
         </Text>
         {children}
       </ScrollView>
-      <View style={[s.footer, { paddingBottom: t.space[4] + bottomInset }]}>
+      {notice ? <Notice notice={notice} /> : null}
+      <View
+        style={[
+          s.footer,
+          { paddingBottom: t.layout.footerBottom + bottomInset },
+        ]}
+      >
         <Button
           size="lg"
           onPress={primaryAction.onPress}

package/src/blocks/supply-item-card/supply-item-card.tsx

@@ -39,22 +39,22 @@ const useStyles = makeStyles((t) => ({
   group: {
     borderWidth: 1,
     borderColor: t.colors.border,
-    borderRadius: 10,
+    borderRadius: t.radius.lg,
     overflow: 'hidden',
   },
   row: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: t.space[3],
-    minHeight: 52,
-    paddingHorizontal: 14,
+    minHeight: t.controlSize.lg,
+    paddingHorizontal: t.space[4],
   },
   divided: { borderTopWidth: 1, borderTopColor: t.colors.border },
   pressed: { backgroundColor: t.colors.muted },
   radio: {
     width: 20,
     height: 20,
-    borderRadius: 10,
+    borderRadius: t.radius.full,
     borderWidth: 2,
     borderColor: t.colors.input,
     alignItems: 'center',
@@ -64,7 +64,7 @@ const useStyles = makeStyles((t) => ({
   radioDot: {
     width: 10,
     height: 10,
-    borderRadius: 5,
+    borderRadius: t.radius.full,
     backgroundColor: t.colors.primary,
   },
   quantity: { flex: 1 },

package/src/components/button/button.tsx

@@ -8,9 +8,9 @@ import {
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
-export type ButtonVariant =
-  'solid' | 'secondary' | 'outline' | 'ghost' | 'danger';
-export type ButtonSize = 'sm' | 'md' | 'lg';
+import type { ButtonSize, ButtonVariant } from '../../theme/contract';
+
+export type { ButtonSize, ButtonVariant };
 
 export type ButtonProps = Omit<
   PressableBaseProps,
@@ -24,8 +24,6 @@ export type ButtonProps = Omit<
   children: ReactNode;
 };
 
-const heights: Record<ButtonSize, number> = { sm: 44, md: 48, lg: 52 };
-
 const useStyles = makeStyles((t) => ({
   base: {
     flexDirection: 'row',
@@ -36,17 +34,21 @@ const useStyles = makeStyles((t) => ({
     borderColor: 'transparent',
   },
   sm: {
-    height: heights.sm,
+    height: t.controlSize.sm,
     paddingHorizontal: t.space[3],
     borderRadius: t.radius.md,
   },
-  md: { height: heights.md, paddingHorizontal: t.space[4], borderRadius: 10 },
+  md: {
+    height: t.controlSize.md,
+    paddingHorizontal: t.space[4],
+    borderRadius: t.radius.md,
+  },
   lg: {
-    height: heights.lg,
+    height: t.controlSize.lg,
     paddingHorizontal: t.space[5],
     borderRadius: t.radius.lg,
   },
-  solid: { backgroundColor: t.colors.primary },
+  primary: { backgroundColor: t.colors.primary },
   secondary: { backgroundColor: t.colors.muted },
   outline: {
     backgroundColor: t.colors.background,
@@ -55,16 +57,22 @@ const useStyles = makeStyles((t) => ({
   ghost: { backgroundColor: 'transparent' },
   danger: { backgroundColor: t.colors.danger },
   label: { fontFamily: t.fontFamily, fontWeight: '600' },
-  smLabel: { fontSize: 14, lineHeight: 20 },
+  smLabel: {
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
+  },
   mdLabel: {
     fontSize: t.typography.body.fontSize,
     lineHeight: t.typography.body.lineHeight,
   },
-  lgLabel: { fontSize: 16, lineHeight: 24 },
+  lgLabel: {
+    fontSize: t.typography.bodyLg.fontSize,
+    lineHeight: t.typography.bodyLg.lineHeight,
+  },
 }));
 
 export function Button({
-  variant = 'solid',
+  variant = 'primary',
   size = 'md',
   loading = false,
   disabled,
@@ -78,7 +86,7 @@ export function Button({
   const t = useTheme();
   const s = useStyles();
   const color = {
-    solid: t.colors.primaryForeground,
+    primary: t.colors.primaryForeground,
     secondary: t.colors.foreground,
     outline: t.colors.foreground,
     ghost: t.colors.foreground,
@@ -90,7 +98,7 @@ export function Button({
     <PressableBase
       {...rest}
       disabled={disabled || loading}
-      touchHeight={heights[size]}
+      touchHeight={t.controlSize[size]}
       accessibilityState={{ ...accessibilityState, busy: loading }}
       style={[s.base, s[size], s[variant], style]}
     >

package/src/components/chip/chip.tsx

@@ -35,8 +35,8 @@ const useStyles = makeStyles((t) => ({
   },
   label: {
     fontFamily: t.fontFamily,
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
     fontWeight: '500',
   },
   count: { fontVariant: ['tabular-nums'], fontWeight: '700' },

package/src/components/dialog/dialog.tsx

@@ -23,18 +23,18 @@ const useStyles = makeStyles((t) => ({
     alignSelf: 'center',
     width: '100%',
     maxWidth: 360,
-    paddingTop: 28,
+    paddingTop: t.space[6],
     paddingHorizontal: t.space[5],
     paddingBottom: t.space[5],
     gap: t.space[5],
-    borderRadius: 16,
+    borderRadius: t.radius.lg,
     backgroundColor: t.colors.background,
     boxShadow: t.shadow.md,
   },
   title: {
     fontFamily: t.fontFamily,
-    fontSize: 18,
-    lineHeight: 26,
+    fontSize: t.typography.title.fontSize,
+    lineHeight: t.typography.title.lineHeight,
     fontWeight: '700',
     textAlign: 'center',
     color: t.colors.foreground,
@@ -108,7 +108,7 @@ export function Dialog({
               {cancelLabel}
             </Button>
             <Button
-              variant={danger ? 'danger' : 'solid'}
+              variant={danger ? 'danger' : 'primary'}
               style={s.action}
               loading={loading}
               onPress={onConfirm}

package/src/components/empty-state/empty-state.tsx

@@ -35,19 +35,23 @@ const useStyles = makeStyles((t) => ({
     color: t.colors.foreground,
     textAlign: 'center',
   },
-  button: { marginTop: t.space[5], height: 48, paddingHorizontal: t.space[5] },
+  button: {
+    marginTop: t.space[5],
+    height: t.controlSize.md,
+    paddingHorizontal: t.space[5],
+  },
   section: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: t.space[3],
-    minHeight: 52,
+    minHeight: t.controlSize.lg,
     paddingLeft: t.space[4],
     paddingRight: t.space[1],
   },
   sectionTitle: {
     ...t.typography.body,
     flex: 1,
-    fontSize: 14,
+    fontSize: t.typography.label.fontSize,
     fontFamily: t.fontFamily,
     color: t.colors.mutedForeground,
   },
@@ -57,7 +61,7 @@ const useStyles = makeStyles((t) => ({
     paddingHorizontal: t.space[3],
   },
   linkLabel: {
-    fontSize: 14,
+    fontSize: t.typography.label.fontSize,
     fontWeight: '600',
     fontFamily: t.fontFamily,
     color: t.colors.foreground,

package/src/components/field/field.tsx

@@ -27,8 +27,8 @@ const useStyles = makeStyles((t) => ({
   root: { gap: t.space[2] },
   label: {
     fontFamily: t.fontFamily,
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
     fontWeight: '600',
     color: t.colors.foreground,
   },
@@ -36,9 +36,9 @@ const useStyles = makeStyles((t) => ({
     flexDirection: 'row',
     alignItems: 'center',
     gap: t.space[2],
-    height: 52,
+    height: t.controlSize.lg,
     paddingHorizontal: t.space[4],
-    borderRadius: 10,
+    borderRadius: t.radius.md,
     borderWidth: 1,
     borderColor: t.colors.input,
     backgroundColor: t.colors.background,
@@ -56,16 +56,17 @@ const useStyles = makeStyles((t) => ({
   disabled: { opacity: t.opacity.disabled, backgroundColor: t.colors.muted },
   input: {
     flex: 1,
+    minWidth: 0,
     alignSelf: 'stretch',
     paddingVertical: 0,
     fontFamily: t.fontFamily,
-    fontSize: 16,
+    fontSize: t.typography.bodyLg.fontSize,
     color: t.colors.foreground,
   },
   error: {
     fontFamily: t.fontFamily,
-    fontSize: 13,
-    lineHeight: 18,
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
     paddingLeft: t.space[1],
     color: t.colors.danger,
   },
@@ -73,7 +74,7 @@ const useStyles = makeStyles((t) => ({
   warned: {
     borderWidth: 2,
     paddingHorizontal: t.space[4] - 1,
-    borderColor: t.colors.warning,
+    borderColor: t.colors.warningText,
   },
   noteRow: {
     flexDirection: 'row',
@@ -84,15 +85,15 @@ const useStyles = makeStyles((t) => ({
   grow: { flex: 1, paddingLeft: 0 },
   hint: {
     fontFamily: t.fontFamily,
-    fontSize: 13,
-    lineHeight: 18,
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
     paddingLeft: t.space[1],
     color: t.colors.mutedForeground,
   },
   warning: {
     fontFamily: t.fontFamily,
-    fontSize: 13,
-    lineHeight: 18,
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
     paddingLeft: t.space[1],
     color: t.colors.foreground,
   },
@@ -179,8 +180,8 @@ export function Field({
         <View style={s.noteRow}>
           <AlertGlyph
             filled
-            color={t.colors.warning}
-            onColor={t.colors.warningForeground}
+            color={t.colors.warningText}
+            onColor={t.colors.background}
             size={t.iconSize.sm}
           />
           <Text

package/src/components/list-row/index.ts

@@ -1 +1 @@
-export { ListRow, type ListRowProps } from './list-row';
+export { ListRow, type ListRowProps, type ListRowTone } from './list-row';

package/src/components/list-row/list-row.tsx

@@ -8,12 +8,16 @@ import {
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
+export type ListRowTone = 'muted' | 'warning' | 'danger';
+
 export type ListRowProps = Omit<
   PressableBaseProps,
   'children' | 'touchHeight'
 > & {
   title: string;
   description?: string;
+  overline?: string;
+  overlineTone?: ListRowTone;
   leading?: IconSlot;
   trailing?: IconSlot;
   chevron?: boolean;
@@ -25,20 +29,30 @@ const useStyles = makeStyles((t) => ({
     flexDirection: 'row',
     alignItems: 'center',
     gap: t.space[3],
-    minHeight: Math.max(t.minTouchSize, 56),
-    paddingVertical: t.space[3],
-    paddingHorizontal: t.space[4],
+    minHeight: t.listRow.oneLine,
+    paddingVertical: t.space[2],
+    paddingHorizontal: t.layout.screenX,
     backgroundColor: t.colors.background,
   },
+  twoLine: { minHeight: t.listRow.twoLine },
+  threeLine: { minHeight: t.listRow.threeLine },
   pressed: { backgroundColor: t.colors.muted },
-  body: { flex: 1, gap: 2 },
+  body: { flex: 1 },
+  overline: {
+    ...t.typography.caption,
+    fontFamily: t.fontFamily,
+    fontWeight: '600',
+  },
+  muted: { color: t.colors.mutedForeground },
+  warning: { color: t.colors.warningText },
+  danger: { color: t.colors.danger },
   title: {
-    ...t.typography.body,
+    ...t.typography.bodyLg,
     fontFamily: t.fontFamily,
     color: t.colors.foreground,
   },
   description: {
-    ...t.typography.caption,
+    ...t.typography.label,
     fontFamily: t.fontFamily,
     color: t.colors.mutedForeground,
   },
@@ -48,6 +62,8 @@ const useStyles = makeStyles((t) => ({
 export function ListRow({
   title,
   description,
+  overline,
+  overlineTone = 'muted',
   leading,
   trailing,
   chevron,
@@ -60,11 +76,22 @@ export function ListRow({
   const s = useStyles();
   const icon = { color: t.colors.mutedForeground, size: t.iconSize.md };
   const showChevron = chevron ?? !!onPress;
+  const lines = [overline, description].filter(Boolean).length;
+  const height = lines === 2 ? s.threeLine : lines === 1 ? s.twoLine : null;
 
   const content = (
     <>
       {leading ? renderIcon(leading, icon) : null}
       <View style={s.body}>
+        {overline ? (
+          <Text
+            numberOfLines={1}
+            maxFontSizeMultiplier={t.maxFontScale}
+            style={[s.overline, s[overlineTone]]}
+          >
+            {overline}
+          </Text>
+        ) : null}
         <Text
           numberOfLines={titleLines}
           maxFontSizeMultiplier={t.maxFontScale}
@@ -97,14 +124,14 @@ export function ListRow({
   );
 
   if (!onPress) {
-    return <View style={[s.row, style]}>{content}</View>;
+    return <View style={[s.row, height, style]}>{content}</View>;
   }
   return (
     <PressableBase
       {...rest}
       onPress={onPress}
       pressedStyle={s.pressed}
-      style={[s.row, style]}
+      style={[s.row, height, style]}
     >
       {content}
     </PressableBase>

package/src/components/segmented-tabs/segmented-tabs.tsx

@@ -32,8 +32,8 @@ const useStyles = makeStyles((t) => ({
   selected: { backgroundColor: t.colors.background, boxShadow: t.shadow.sm },
   label: {
     fontFamily: t.fontFamily,
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
     fontWeight: '500',
     color: t.colors.mutedForeground,
   },

package/src/components/status-badge/status-badge.tsx

@@ -1,9 +1,9 @@
 import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { Tone } from '../../theme/contract';
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
-export type StatusBadgeTone =
-  'neutral' | 'info' | 'success' | 'warning' | 'danger';
+export type StatusBadgeTone = Exclude<Tone, 'primary'>;
 
 export type StatusBadgeProps = {
   tone?: StatusBadgeTone;
@@ -15,7 +15,7 @@ const useStyles = makeStyles((t) => ({
   base: {
     alignSelf: 'flex-start',
     paddingHorizontal: t.space[2],
-    paddingVertical: 2,
+    paddingVertical: t.space[1],
     borderRadius: t.radius.full,
   },
   label: {

package/src/components/text/text.tsx

@@ -4,7 +4,7 @@ import type { TypographyVariant } from '../../types';
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
-export type TextTone = 'default' | 'muted' | 'danger' | 'success';
+export type TextTone = 'default' | 'muted' | 'warning' | 'danger' | 'success';
 
 export type TextProps = RNTextProps & {
   ref?: Ref<ComponentRef<typeof RNText>>;
@@ -17,12 +17,15 @@ export type TextWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 
 const useStyles = makeStyles((t) => ({
   caption: t.typography.caption,
+  label: t.typography.label,
   body: t.typography.body,
   bodyLg: t.typography.bodyLg,
   title: t.typography.title,
+  screenTitle: t.typography.screenTitle,
   display: t.typography.display,
   default: { color: t.colors.foreground },
   muted: { color: t.colors.mutedForeground },
+  warning: { color: t.colors.warningText },
   danger: { color: t.colors.danger },
   success: { color: t.colors.success },
   font: { fontFamily: t.fontFamily },

package/src/components/toast/toast.tsx

@@ -18,10 +18,11 @@ import {
 import { useNativeDriver } from '../../internal/overlay';
 import { PressableBase } from '../../internal/pressable-base';
 import { useReducedMotion } from '../../internal/use-reduced-motion';
+import type { Tone } from '../../theme/contract';
 import { useTheme } from '../../theme/theme-provider';
 import { makeStyles } from '../../utils/styles';
 
-export type ToastTone = 'neutral' | 'success' | 'danger';
+export type ToastTone = Extract<Tone, 'neutral' | 'success' | 'danger'>;
 
 export type ToastOptions = {
   message: string;
@@ -124,7 +125,7 @@ const useStyles = makeStyles((t) => ({
     flexDirection: 'row',
     alignItems: 'center',
     maxWidth: 480,
-    minHeight: 48,
+    minHeight: t.controlSize.md,
     paddingHorizontal: t.space[4],
     paddingVertical: t.space[3],
     borderRadius: t.radius.md,
@@ -136,12 +137,12 @@ const useStyles = makeStyles((t) => ({
     paddingRight: t.space[2],
   },
   message: { ...t.typography.body, flexShrink: 1, fontFamily: t.fontFamily },
-  messageFill: { flex: 1, fontSize: 14 },
+  messageFill: { flex: 1, fontSize: t.typography.label.fontSize },
   action: { paddingHorizontal: t.space[3], justifyContent: 'center' },
   actionLabel: {
     fontFamily: t.fontFamily,
-    fontSize: 14,
-    lineHeight: 20,
+    fontSize: t.typography.label.fontSize,
+    lineHeight: t.typography.label.lineHeight,
     fontWeight: '700',
   },
 }));

package/src/index.tsx

@@ -55,3 +55,4 @@ export type {
 } from './types';
 
 export * from './blocks';
+export * from './templates';