@agimon-ai/po-native-components 0.0.0-alpha.0 → 0.0.0-alpha.10

package/dist/components/Badge.mjs

@@ -7,7 +7,7 @@ import { StyleSheet, useUnistyles } from "react-native-unistyles";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Badge.tsx
-/** `border-doom-<accent>/40`. */
+/** `border-po-<accent>/40`. */
 const EDGE_ALPHA_PERCENT = 40;
 /** An outlined chip in one of the accent tones. */
 function Badge({ tone = "neutral", size = "sm", children, style, ...props }) {

package/dist/components/Badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.mjs","names":["ChipTone","withAlpha","ReactNode","StyleProp","ViewProps","ViewStyle","StyleSheet","useUnistyles","fontOf","CHIP_INK","wrapText","BadgeTone","BadgeSize","EDGE_ALPHA_PERCENT","BadgeProps","Omit","tone","size","children","style","Badge","props","theme","_styles","styles","useVariants","edge","undefined","borderColor","colors","badge","label","create","ink","color","flexDirection","alignItems","alignSelf","gap","spacing","borderRadius","DEFAULT","borderWidth","border","variants","xs","paddingHorizontal","paddingVertical","sm","md","lg","uni__dependencies","fontFamily","sans","neutral","blue","green","yellow","red","magenta","violet","cyan","orange","teal","fontSize","lineHeight","fontWeight","semibold","base"],"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import { type ChipTone, withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport type { ReactNode } from 'react';\nimport { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { CHIP_INK } from '../lib/tone';\nimport { wrapText } from '../lib/wrapText';\n\nexport type BadgeTone = ChipTone;\nexport type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** `border-doom-<accent>/40`. */\nconst EDGE_ALPHA_PERCENT = 40;\n\nexport interface BadgeProps extends Omit<ViewProps, 'children' | 'style'> {\n  tone?: BadgeTone;\n  /** The same rungs Button names, so a chip can sit beside a button of any size. */\n  size?: BadgeSize;\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** An outlined chip in one of the accent tones. */\nexport function Badge({ tone = 'neutral', size = 'sm', children, style, ...props }: BadgeProps) {\n  const { theme } = useUnistyles();\n  styles.useVariants({ tone, size });\n  // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n  // the stylesheet CSS variables, which withAlpha cannot read.\n  const edge =\n    tone === 'neutral' ? undefined : { borderColor: withAlpha(theme.colors[CHIP_INK[tone]], EDGE_ALPHA_PERCENT) };\n  return (\n    <View style={[styles.badge, edge, style]} {...props}>\n      {wrapText(children, styles.label)}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => {\n  const ink = (tone: ChipTone) => ({ color: theme.colors[CHIP_INK[tone]] });\n  return {\n    badge: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      gap: theme.spacing(1.5),\n      borderRadius: theme.borderRadius.DEFAULT,\n      borderWidth: 1,\n      borderColor: theme.colors.border,\n      variants: {\n        size: {\n          xs: { paddingHorizontal: theme.spacing(1.5), paddingVertical: 1 },\n          sm: { paddingHorizontal: theme.spacing(2), paddingVertical: theme.spacing(0.5) },\n          md: { paddingHorizontal: theme.spacing(2.5), paddingVertical: theme.spacing(1) },\n          lg: { paddingHorizontal: theme.spacing(3), paddingVertical: theme.spacing(1.5) },\n        },\n      },\n    },\n    label: {\n      fontFamily: fontOf(theme.fontFamily.sans),\n      variants: {\n        tone: {\n          neutral: ink('neutral'),\n          blue: ink('blue'),\n          green: ink('green'),\n          yellow: ink('yellow'),\n          red: ink('red'),\n          magenta: ink('magenta'),\n          violet: ink('violet'),\n          cyan: ink('cyan'),\n          orange: ink('orange'),\n          teal: ink('teal'),\n        },\n        size: {\n          xs: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm, fontWeight: theme.fontWeight.semibold },\n          sm: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n          md: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n          lg: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        },\n      },\n    },\n  };\n});\n"],"mappings":";;;;;;;;;;AAaA,MAAMa,qBAAqB;;AAW3B,SAAgBO,MAAM,EAAEJ,OAAO,WAAWC,OAAO,MAAMC,UAAUC,OAAO,GAAGE,SAAqB;CAC9F,MAAM,EAAEC,UAAUf,aAAa;CAAE,MAAAgB,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACd;GAAET;GAAMC;EAAK,CAAC;EAGjC,MAAMS,OACJV,SAAS,YAAYW,SAAY,EAAEC,aAAa3B,UAAUqB,MAAMO,OAAOpB,SAASO,QAAQH,kBAAkB,EAAE;EAC9G,OACE,oBAAC,MAAD;GAAM,OAAO;IAACW,OAAOM;IAAOJ;IAAMP;GAAK;GAAG,GAAIE;aAC3CX,SAASQ,UAAUM,OAAOO,KAAK;EAC5B;CACN;AACJ;AAEA,MAAMP,SAASlB,WAAW0B,QAAQV,UAAU;CAC1C,MAAMW,OAAOjB,UAAoB,EAAEkB,OAAOZ,MAAMO,OAAOpB,SAASO,OAAO;CACvE,OAAO;EACLc,OAAO;GACLK,eAAe;GACfC,YAAY;GACZC,WAAW;GACXC,KAAKhB,MAAMiB,QAAQ,GAAG;GACtBC,cAAclB,MAAMkB,aAAaC;GACjCC,aAAa;GACbd,aAAaN,MAAMO,OAAOc;GAC1BC,UAAU,EACR3B,MAAM;IACJ4B,IAAI;KAAEC,mBAAmBxB,MAAMiB,QAAQ,GAAG;KAAGQ,iBAAiB;IAAE;IAChEC,IAAI;KAAEF,mBAAmBxB,MAAMiB,QAAQ,CAAC;KAAGQ,iBAAiBzB,MAAMiB,QAAQ,EAAG;IAAE;IAC/EU,IAAI;KAAEH,mBAAmBxB,MAAMiB,QAAQ,GAAG;KAAGQ,iBAAiBzB,MAAMiB,QAAQ,CAAC;IAAE;IAC/EW,IAAI;KAAEJ,mBAAmBxB,MAAMiB,QAAQ,CAAC;KAAGQ,iBAAiBzB,MAAMiB,QAAQ,GAAG;IAAE;GACjF,EACF;GAACY,mBAAA,CAAA,GAAA,CAAA;EACH;EACApB,OAAO;GACLqB,YAAY5C,OAAOc,MAAM8B,WAAWC,IAAI;GACxCT,UAAU;IACR5B,MAAM;KACJsC,SAASrB,IAAI,SAAS;KACtBsB,MAAMtB,IAAI,MAAM;KAChBuB,OAAOvB,IAAI,OAAO;KAClBwB,QAAQxB,IAAI,QAAQ;KACpByB,KAAKzB,IAAI,KAAK;KACd0B,SAAS1B,IAAI,SAAS;KACtB2B,QAAQ3B,IAAI,QAAQ;KACpB4B,MAAM5B,IAAI,MAAM;KAChB6B,QAAQ7B,IAAI,QAAQ;KACpB8B,MAAM9B,IAAI,MAAM;IAClB;IACAhB,MAAM;KACJ4B,IAAI;MAAEmB,UAAU1C,MAAM0C,SAAShB;MAAIiB,YAAY3C,MAAM2C,WAAWjB;MAAIkB,YAAY5C,MAAM4C,WAAWC;KAAS;KAC1GnB,IAAI;MAAEgB,UAAU1C,MAAM0C,SAAShB;MAAIiB,YAAY3C,MAAM2C,WAAWjB;KAAG;KACnEC,IAAI;MAAEe,UAAU1C,MAAM0C,SAAShB;MAAIiB,YAAY3C,MAAM2C,WAAWjB;KAAG;KACnEE,IAAI;MAAEc,UAAU1C,MAAM0C,SAASI;MAAMH,YAAY3C,MAAM2C,WAAWG;KAAK;IACzE;GACF;GAACjB,mBAAA,CAAA,GAAA,CAAA;EACH;CACF;AACF,CAAC"}
+{"version":3,"file":"Badge.mjs","names":["ChipTone","withAlpha","ReactNode","StyleProp","ViewProps","ViewStyle","StyleSheet","useUnistyles","fontOf","CHIP_INK","wrapText","BadgeTone","BadgeSize","EDGE_ALPHA_PERCENT","BadgeProps","Omit","tone","size","children","style","Badge","props","theme","_styles","styles","useVariants","edge","undefined","borderColor","colors","badge","label","create","ink","color","flexDirection","alignItems","alignSelf","gap","spacing","borderRadius","DEFAULT","borderWidth","border","variants","xs","paddingHorizontal","paddingVertical","sm","md","lg","uni__dependencies","fontFamily","sans","neutral","blue","green","yellow","red","magenta","violet","cyan","orange","teal","fontSize","lineHeight","fontWeight","semibold","base"],"sources":["../../src/components/Badge.tsx"],"sourcesContent":["import { type ChipTone, withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport type { ReactNode } from 'react';\nimport { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { CHIP_INK } from '../lib/tone';\nimport { wrapText } from '../lib/wrapText';\n\nexport type BadgeTone = ChipTone;\nexport type BadgeSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** `border-po-<accent>/40`. */\nconst EDGE_ALPHA_PERCENT = 40;\n\nexport interface BadgeProps extends Omit<ViewProps, 'children' | 'style'> {\n  tone?: BadgeTone;\n  /** The same rungs Button names, so a chip can sit beside a button of any size. */\n  size?: BadgeSize;\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** An outlined chip in one of the accent tones. */\nexport function Badge({ tone = 'neutral', size = 'sm', children, style, ...props }: BadgeProps) {\n  const { theme } = useUnistyles();\n  styles.useVariants({ tone, size });\n  // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n  // the stylesheet CSS variables, which withAlpha cannot read.\n  const edge =\n    tone === 'neutral' ? undefined : { borderColor: withAlpha(theme.colors[CHIP_INK[tone]], EDGE_ALPHA_PERCENT) };\n  return (\n    <View style={[styles.badge, edge, style]} {...props}>\n      {wrapText(children, styles.label)}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => {\n  const ink = (tone: ChipTone) => ({ color: theme.colors[CHIP_INK[tone]] });\n  return {\n    badge: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      gap: theme.spacing(1.5),\n      borderRadius: theme.borderRadius.DEFAULT,\n      borderWidth: 1,\n      borderColor: theme.colors.border,\n      variants: {\n        size: {\n          xs: { paddingHorizontal: theme.spacing(1.5), paddingVertical: 1 },\n          sm: { paddingHorizontal: theme.spacing(2), paddingVertical: theme.spacing(0.5) },\n          md: { paddingHorizontal: theme.spacing(2.5), paddingVertical: theme.spacing(1) },\n          lg: { paddingHorizontal: theme.spacing(3), paddingVertical: theme.spacing(1.5) },\n        },\n      },\n    },\n    label: {\n      fontFamily: fontOf(theme.fontFamily.sans),\n      variants: {\n        tone: {\n          neutral: ink('neutral'),\n          blue: ink('blue'),\n          green: ink('green'),\n          yellow: ink('yellow'),\n          red: ink('red'),\n          magenta: ink('magenta'),\n          violet: ink('violet'),\n          cyan: ink('cyan'),\n          orange: ink('orange'),\n          teal: ink('teal'),\n        },\n        size: {\n          xs: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm, fontWeight: theme.fontWeight.semibold },\n          sm: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n          md: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n          lg: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        },\n      },\n    },\n  };\n});\n"],"mappings":";;;;;;;;;;AAaA,MAAMa,qBAAqB;;AAW3B,SAAgBO,MAAM,EAAEJ,OAAO,WAAWC,OAAO,MAAMC,UAAUC,OAAO,GAAGE,SAAqB;CAC9F,MAAM,EAAEC,UAAUf,aAAa;CAAE,MAAAgB,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACd;GAAET;GAAMC;EAAK,CAAC;EAGjC,MAAMS,OACJV,SAAS,YAAYW,SAAY,EAAEC,aAAa3B,UAAUqB,MAAMO,OAAOpB,SAASO,QAAQH,kBAAkB,EAAE;EAC9G,OACE,oBAAC,MAAD;GAAM,OAAO;IAACW,OAAOM;IAAOJ;IAAMP;GAAK;GAAG,GAAIE;aAC3CX,SAASQ,UAAUM,OAAOO,KAAK;EAC5B;CACN;AACJ;AAEA,MAAMP,SAASlB,WAAW0B,QAAQV,UAAU;CAC1C,MAAMW,OAAOjB,UAAoB,EAAEkB,OAAOZ,MAAMO,OAAOpB,SAASO,OAAO;CACvE,OAAO;EACLc,OAAO;GACLK,eAAe;GACfC,YAAY;GACZC,WAAW;GACXC,KAAKhB,MAAMiB,QAAQ,GAAG;GACtBC,cAAclB,MAAMkB,aAAaC;GACjCC,aAAa;GACbd,aAAaN,MAAMO,OAAOc;GAC1BC,UAAU,EACR3B,MAAM;IACJ4B,IAAI;KAAEC,mBAAmBxB,MAAMiB,QAAQ,GAAG;KAAGQ,iBAAiB;IAAE;IAChEC,IAAI;KAAEF,mBAAmBxB,MAAMiB,QAAQ,CAAC;KAAGQ,iBAAiBzB,MAAMiB,QAAQ,EAAG;IAAE;IAC/EU,IAAI;KAAEH,mBAAmBxB,MAAMiB,QAAQ,GAAG;KAAGQ,iBAAiBzB,MAAMiB,QAAQ,CAAC;IAAE;IAC/EW,IAAI;KAAEJ,mBAAmBxB,MAAMiB,QAAQ,CAAC;KAAGQ,iBAAiBzB,MAAMiB,QAAQ,GAAG;IAAE;GACjF,EACF;GAACY,mBAAA,CAAA,GAAA,CAAA;EACH;EACApB,OAAO;GACLqB,YAAY5C,OAAOc,MAAM8B,WAAWC,IAAI;GACxCT,UAAU;IACR5B,MAAM;KACJsC,SAASrB,IAAI,SAAS;KACtBsB,MAAMtB,IAAI,MAAM;KAChBuB,OAAOvB,IAAI,OAAO;KAClBwB,QAAQxB,IAAI,QAAQ;KACpByB,KAAKzB,IAAI,KAAK;KACd0B,SAAS1B,IAAI,SAAS;KACtB2B,QAAQ3B,IAAI,QAAQ;KACpB4B,MAAM5B,IAAI,MAAM;KAChB6B,QAAQ7B,IAAI,QAAQ;KACpB8B,MAAM9B,IAAI,MAAM;IAClB;IACAhB,MAAM;KACJ4B,IAAI;MAAEmB,UAAU1C,MAAM0C,SAAShB;MAAIiB,YAAY3C,MAAM2C,WAAWjB;MAAIkB,YAAY5C,MAAM4C,WAAWC;KAAS;KAC1GnB,IAAI;MAAEgB,UAAU1C,MAAM0C,SAAShB;MAAIiB,YAAY3C,MAAM2C,WAAWjB;KAAG;KACnEC,IAAI;MAAEe,UAAU1C,MAAM0C,SAAShB;MAAIiB,YAAY3C,MAAM2C,WAAWjB;KAAG;KACnEE,IAAI;MAAEc,UAAU1C,MAAM0C,SAASI;MAAMH,YAAY3C,MAAM2C,WAAWG;KAAK;IACzE;GACF;GAACjB,mBAAA,CAAA,GAAA,CAAA;EACH;CACF;AACF,CAAC"}

package/dist/components/Button.mjs

@@ -14,7 +14,7 @@ const MIN_TAP_TARGET = 44;
 const DISABLED_OPACITY = .4;
 const PRESSED_FILL_OPACITY = .85;
 const RIPPLE_ALPHA_PERCENT = 20;
-/** `hover:border-doom-green/50`. */
+/** `hover:border-po-green/50`. */
 const PRESSED_EDGE_ALPHA_PERCENT = 50;
 /** The visual height of each size, from which hitSlop pads the tap target to 44pt. */
 const SIZE_HEIGHT = {

package/dist/components/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["NativeColorToken","withAlpha","ReactNode","PressableProps","StyleProp","ViewStyle","StyleSheet","useUnistyles","IconColorContext","fontOf","impactLight","wrapText","Spinner","ButtonVariant","ButtonSize","MIN_TAP_TARGET","DISABLED_OPACITY","PRESSED_FILL_OPACITY","RIPPLE_ALPHA_PERCENT","PRESSED_EDGE_ALPHA_PERCENT","SIZE_HEIGHT","Readonly","Record","xs","sm","md","lg","icon","card","INK","rest","pressed","primary","secondary","outline","ghost","subtle","danger","success","link","HAPTIC_VARIANTS","ReadonlySet","Set","ButtonProps","Omit","variant","size","loading","loadingLabel","children","style","Button","disabled","onPress","hitSlop","accessibilityState","props","theme","_styles","styles","useVariants","inactive","slop","Math","max","ink","busy","undefined","text","color","colors","borderless","event","has","button","borderColor","green","token","label","labelPressed","create","flexDirection","alignItems","justifyContent","gap","spacing","borderRadius","borderWidth","overflow","variants","backgroundColor","selected","border","panel","red","height","paddingHorizontal","DEFAULT","width","padding","alignSelf","minHeight","paddingVertical","uni__dependencies","opacity","deep","fontFamily","sans","fontWeight","medium","semibold","fontSize","lineHeight","base","textDecorationLine"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import { type NativeColorToken, withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport type { ReactNode } from 'react';\nimport { Pressable, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { IconColorContext } from '../icons/IconColorContext';\nimport { fontOf } from '../lib/fonts';\nimport { impactLight } from '../lib/haptics';\nimport { wrapText } from '../lib/wrapText';\nimport { Spinner } from './Spinner';\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'ghost'\n  | 'subtle'\n  | 'danger'\n  | 'danger-outline'\n  | 'success'\n  | 'link';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon' | 'icon-md' | 'card';\n\n/** Apple's and Google's minimum tap target; a smaller visual box makes up the rest with hitSlop. */\nconst MIN_TAP_TARGET = 44;\nconst DISABLED_OPACITY = 0.4;\nconst PRESSED_FILL_OPACITY = 0.85;\nconst RIPPLE_ALPHA_PERCENT = 20;\n/** `hover:border-doom-green/50`. */\nconst PRESSED_EDGE_ALPHA_PERCENT = 50;\n\n/** The visual height of each size, from which hitSlop pads the tap target to 44pt. */\nconst SIZE_HEIGHT: Readonly<Record<ButtonSize, number>> = {\n  xs: 24,\n  sm: 28,\n  md: 32,\n  lg: 36,\n  icon: 24,\n  'icon-md': 32,\n  card: MIN_TAP_TARGET,\n};\n\n/** The label ink of each variant, and the ink it lifts to while pressed (the web hover). */\nconst INK: Readonly<Record<ButtonVariant, { rest: NativeColorToken; pressed: NativeColorToken }>> = {\n  primary: { rest: 'on-selected', pressed: 'on-selected' },\n  secondary: { rest: 'magenta', pressed: 'magenta' },\n  outline: { rest: 'dim', pressed: 'hi' },\n  ghost: { rest: 'dim', pressed: 'hi' },\n  subtle: { rest: 'dim', pressed: 'hi' },\n  danger: { rest: 'rail', pressed: 'rail' },\n  'danger-outline': { rest: 'red', pressed: 'red' },\n  success: { rest: 'rail', pressed: 'rail' },\n  link: { rest: 'blue', pressed: 'blue' },\n};\n\n/** Presses that commit something get a light impact; the rest stay quiet. */\nconst HAPTIC_VARIANTS: ReadonlySet<ButtonVariant> = new Set(['primary', 'danger', 'success']);\n\nexport interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** Work is in flight: the button shows a spinner and stops accepting presses. */\n  loading?: boolean;\n  /** What the spinner announces while loading; omit it and the wait is silent. */\n  loadingLabel?: string;\n  /** A bare string is drawn as the label; elements (an icon, a card's lines) render as given. */\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The one button: every variant is a theme token, a press dims or lifts it, and committing presses buzz once. */\nexport function Button({\n  variant = 'outline',\n  size = 'md',\n  loading = false,\n  loadingLabel,\n  disabled,\n  onPress,\n  children,\n  style,\n  hitSlop,\n  accessibilityState,\n  ...props\n}: ButtonProps) {\n  const { theme } = useUnistyles();\n  styles.useVariants({ variant, size });\n  const inactive = (disabled ?? false) || loading;\n  const slop = Math.max(0, (MIN_TAP_TARGET - SIZE_HEIGHT[size]) / 2);\n  const ink = INK[variant];\n  return (\n    <Pressable\n      accessibilityRole={variant === 'link' ? 'link' : 'button'}\n      accessibilityState={{ ...accessibilityState, disabled: inactive, busy: loading }}\n      accessibilityValue={loading && loadingLabel !== undefined ? { text: loadingLabel } : undefined}\n      disabled={inactive}\n      hitSlop={hitSlop ?? slop}\n      android_ripple={{ color: withAlpha(theme.colors[ink.pressed], RIPPLE_ALPHA_PERCENT), borderless: false }}\n      onPress={(event) => {\n        if (HAPTIC_VARIANTS.has(variant)) impactLight();\n        onPress?.(event);\n      }}\n      style={({ pressed }) => [\n        styles.button,\n        pressed && styles.pressed,\n        // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n        // the stylesheet CSS variables, which withAlpha cannot read.\n        pressed && variant === 'outline' && { borderColor: withAlpha(theme.colors.green, PRESSED_EDGE_ALPHA_PERCENT) },\n        inactive && styles.disabled,\n        style,\n      ]}\n      {...props}\n    >\n      {({ pressed }) => {\n        const token = pressed ? ink.pressed : ink.rest;\n        return (\n          <IconColorContext.Provider value={token}>\n            {loading ? <Spinner color={token} /> : null}\n            {wrapText(children, [styles.label, pressed && styles.labelPressed, { color: theme.colors[token] }])}\n          </IconColorContext.Provider>\n        );\n      }}\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  button: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing(1.5),\n    borderRadius: theme.borderRadius.md,\n    borderWidth: 1,\n    borderColor: 'transparent',\n    overflow: 'hidden',\n    variants: {\n      variant: {\n        primary: { backgroundColor: theme.colors.selected },\n        secondary: { borderColor: theme.colors['edge-magenta'], backgroundColor: theme.colors['tint-magenta'] },\n        outline: { borderColor: theme.colors.border },\n        ghost: {},\n        subtle: { backgroundColor: theme.colors.panel },\n        danger: { backgroundColor: theme.colors.red },\n        'danger-outline': { borderColor: theme.colors['edge-red'], backgroundColor: theme.colors['tint-red'] },\n        success: { backgroundColor: theme.colors.green },\n        link: {},\n      },\n      size: {\n        xs: { height: SIZE_HEIGHT.xs, paddingHorizontal: theme.spacing(1.5), borderRadius: theme.borderRadius.DEFAULT },\n        sm: { height: SIZE_HEIGHT.sm, paddingHorizontal: theme.spacing(2.5) },\n        md: { height: SIZE_HEIGHT.md, paddingHorizontal: theme.spacing(3) },\n        lg: { height: SIZE_HEIGHT.lg, paddingHorizontal: theme.spacing(3.5) },\n        icon: {\n          width: SIZE_HEIGHT.icon,\n          height: SIZE_HEIGHT.icon,\n          padding: 0,\n          borderRadius: theme.borderRadius.DEFAULT,\n        },\n        'icon-md': { width: SIZE_HEIGHT['icon-md'], height: SIZE_HEIGHT['icon-md'], padding: 0 },\n        card: {\n          alignSelf: 'stretch',\n          flexDirection: 'column',\n          alignItems: 'stretch',\n          justifyContent: 'flex-start',\n          gap: theme.spacing(1),\n          minHeight: SIZE_HEIGHT.card,\n          paddingHorizontal: 11,\n          paddingVertical: theme.spacing(2.5),\n        },\n      },\n    },\n  },\n  pressed: {\n    variants: {\n      variant: {\n        primary: { opacity: PRESSED_FILL_OPACITY },\n        secondary: { opacity: PRESSED_FILL_OPACITY },\n        outline: {},\n        ghost: { backgroundColor: theme.colors.panel },\n        subtle: { backgroundColor: theme.colors.deep },\n        danger: { opacity: PRESSED_FILL_OPACITY },\n        'danger-outline': { opacity: PRESSED_FILL_OPACITY },\n        success: { opacity: PRESSED_FILL_OPACITY },\n        link: {},\n      },\n    },\n  },\n  disabled: { opacity: DISABLED_OPACITY },\n  label: {\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontWeight: theme.fontWeight.medium,\n    variants: {\n      variant: {\n        primary: { fontWeight: theme.fontWeight.semibold },\n        secondary: { fontWeight: theme.fontWeight.semibold },\n        outline: {},\n        ghost: {},\n        subtle: {},\n        danger: { fontWeight: theme.fontWeight.semibold },\n        'danger-outline': { fontWeight: theme.fontWeight.semibold },\n        success: { fontWeight: theme.fontWeight.semibold },\n        link: {},\n      },\n      size: {\n        xs: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n        sm: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n        md: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        lg: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        icon: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        'icon-md': { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        card: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n      },\n    },\n  },\n  labelPressed: {\n    variants: {\n      variant: {\n        primary: {},\n        secondary: {},\n        outline: {},\n        ghost: {},\n        subtle: {},\n        danger: {},\n        'danger-outline': {},\n        success: {},\n        link: { textDecorationLine: 'underline' },\n      },\n    },\n  },\n}));\n"],"mappings":"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"}
+{"version":3,"file":"Button.mjs","names":["NativeColorToken","withAlpha","ReactNode","PressableProps","StyleProp","ViewStyle","StyleSheet","useUnistyles","IconColorContext","fontOf","impactLight","wrapText","Spinner","ButtonVariant","ButtonSize","MIN_TAP_TARGET","DISABLED_OPACITY","PRESSED_FILL_OPACITY","RIPPLE_ALPHA_PERCENT","PRESSED_EDGE_ALPHA_PERCENT","SIZE_HEIGHT","Readonly","Record","xs","sm","md","lg","icon","card","INK","rest","pressed","primary","secondary","outline","ghost","subtle","danger","success","link","HAPTIC_VARIANTS","ReadonlySet","Set","ButtonProps","Omit","variant","size","loading","loadingLabel","children","style","Button","disabled","onPress","hitSlop","accessibilityState","props","theme","_styles","styles","useVariants","inactive","slop","Math","max","ink","busy","undefined","text","color","colors","borderless","event","has","button","borderColor","green","token","label","labelPressed","create","flexDirection","alignItems","justifyContent","gap","spacing","borderRadius","borderWidth","overflow","variants","backgroundColor","selected","border","panel","red","height","paddingHorizontal","DEFAULT","width","padding","alignSelf","minHeight","paddingVertical","uni__dependencies","opacity","deep","fontFamily","sans","fontWeight","medium","semibold","fontSize","lineHeight","base","textDecorationLine"],"sources":["../../src/components/Button.tsx"],"sourcesContent":["import { type NativeColorToken, withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport type { ReactNode } from 'react';\nimport { Pressable, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { IconColorContext } from '../icons/IconColorContext';\nimport { fontOf } from '../lib/fonts';\nimport { impactLight } from '../lib/haptics';\nimport { wrapText } from '../lib/wrapText';\nimport { Spinner } from './Spinner';\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'outline'\n  | 'ghost'\n  | 'subtle'\n  | 'danger'\n  | 'danger-outline'\n  | 'success'\n  | 'link';\nexport type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'icon' | 'icon-md' | 'card';\n\n/** Apple's and Google's minimum tap target; a smaller visual box makes up the rest with hitSlop. */\nconst MIN_TAP_TARGET = 44;\nconst DISABLED_OPACITY = 0.4;\nconst PRESSED_FILL_OPACITY = 0.85;\nconst RIPPLE_ALPHA_PERCENT = 20;\n/** `hover:border-po-green/50`. */\nconst PRESSED_EDGE_ALPHA_PERCENT = 50;\n\n/** The visual height of each size, from which hitSlop pads the tap target to 44pt. */\nconst SIZE_HEIGHT: Readonly<Record<ButtonSize, number>> = {\n  xs: 24,\n  sm: 28,\n  md: 32,\n  lg: 36,\n  icon: 24,\n  'icon-md': 32,\n  card: MIN_TAP_TARGET,\n};\n\n/** The label ink of each variant, and the ink it lifts to while pressed (the web hover). */\nconst INK: Readonly<Record<ButtonVariant, { rest: NativeColorToken; pressed: NativeColorToken }>> = {\n  primary: { rest: 'on-selected', pressed: 'on-selected' },\n  secondary: { rest: 'magenta', pressed: 'magenta' },\n  outline: { rest: 'dim', pressed: 'hi' },\n  ghost: { rest: 'dim', pressed: 'hi' },\n  subtle: { rest: 'dim', pressed: 'hi' },\n  danger: { rest: 'rail', pressed: 'rail' },\n  'danger-outline': { rest: 'red', pressed: 'red' },\n  success: { rest: 'rail', pressed: 'rail' },\n  link: { rest: 'blue', pressed: 'blue' },\n};\n\n/** Presses that commit something get a light impact; the rest stay quiet. */\nconst HAPTIC_VARIANTS: ReadonlySet<ButtonVariant> = new Set(['primary', 'danger', 'success']);\n\nexport interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** Work is in flight: the button shows a spinner and stops accepting presses. */\n  loading?: boolean;\n  /** What the spinner announces while loading; omit it and the wait is silent. */\n  loadingLabel?: string;\n  /** A bare string is drawn as the label; elements (an icon, a card's lines) render as given. */\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The one button: every variant is a theme token, a press dims or lifts it, and committing presses buzz once. */\nexport function Button({\n  variant = 'outline',\n  size = 'md',\n  loading = false,\n  loadingLabel,\n  disabled,\n  onPress,\n  children,\n  style,\n  hitSlop,\n  accessibilityState,\n  ...props\n}: ButtonProps) {\n  const { theme } = useUnistyles();\n  styles.useVariants({ variant, size });\n  const inactive = (disabled ?? false) || loading;\n  const slop = Math.max(0, (MIN_TAP_TARGET - SIZE_HEIGHT[size]) / 2);\n  const ink = INK[variant];\n  return (\n    <Pressable\n      accessibilityRole={variant === 'link' ? 'link' : 'button'}\n      accessibilityState={{ ...accessibilityState, disabled: inactive, busy: loading }}\n      accessibilityValue={loading && loadingLabel !== undefined ? { text: loadingLabel } : undefined}\n      disabled={inactive}\n      hitSlop={hitSlop ?? slop}\n      android_ripple={{ color: withAlpha(theme.colors[ink.pressed], RIPPLE_ALPHA_PERCENT), borderless: false }}\n      onPress={(event) => {\n        if (HAPTIC_VARIANTS.has(variant)) impactLight();\n        onPress?.(event);\n      }}\n      style={({ pressed }) => [\n        styles.button,\n        pressed && styles.pressed,\n        // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n        // the stylesheet CSS variables, which withAlpha cannot read.\n        pressed && variant === 'outline' && { borderColor: withAlpha(theme.colors.green, PRESSED_EDGE_ALPHA_PERCENT) },\n        inactive && styles.disabled,\n        style,\n      ]}\n      {...props}\n    >\n      {({ pressed }) => {\n        const token = pressed ? ink.pressed : ink.rest;\n        return (\n          <IconColorContext.Provider value={token}>\n            {loading ? <Spinner color={token} /> : null}\n            {wrapText(children, [styles.label, pressed && styles.labelPressed, { color: theme.colors[token] }])}\n          </IconColorContext.Provider>\n        );\n      }}\n    </Pressable>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  button: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing(1.5),\n    borderRadius: theme.borderRadius.md,\n    borderWidth: 1,\n    borderColor: 'transparent',\n    overflow: 'hidden',\n    variants: {\n      variant: {\n        primary: { backgroundColor: theme.colors.selected },\n        secondary: { borderColor: theme.colors['edge-magenta'], backgroundColor: theme.colors['tint-magenta'] },\n        outline: { borderColor: theme.colors.border },\n        ghost: {},\n        subtle: { backgroundColor: theme.colors.panel },\n        danger: { backgroundColor: theme.colors.red },\n        'danger-outline': { borderColor: theme.colors['edge-red'], backgroundColor: theme.colors['tint-red'] },\n        success: { backgroundColor: theme.colors.green },\n        link: {},\n      },\n      size: {\n        xs: { height: SIZE_HEIGHT.xs, paddingHorizontal: theme.spacing(1.5), borderRadius: theme.borderRadius.DEFAULT },\n        sm: { height: SIZE_HEIGHT.sm, paddingHorizontal: theme.spacing(2.5) },\n        md: { height: SIZE_HEIGHT.md, paddingHorizontal: theme.spacing(3) },\n        lg: { height: SIZE_HEIGHT.lg, paddingHorizontal: theme.spacing(3.5) },\n        icon: {\n          width: SIZE_HEIGHT.icon,\n          height: SIZE_HEIGHT.icon,\n          padding: 0,\n          borderRadius: theme.borderRadius.DEFAULT,\n        },\n        'icon-md': { width: SIZE_HEIGHT['icon-md'], height: SIZE_HEIGHT['icon-md'], padding: 0 },\n        card: {\n          alignSelf: 'stretch',\n          flexDirection: 'column',\n          alignItems: 'stretch',\n          justifyContent: 'flex-start',\n          gap: theme.spacing(1),\n          minHeight: SIZE_HEIGHT.card,\n          paddingHorizontal: 11,\n          paddingVertical: theme.spacing(2.5),\n        },\n      },\n    },\n  },\n  pressed: {\n    variants: {\n      variant: {\n        primary: { opacity: PRESSED_FILL_OPACITY },\n        secondary: { opacity: PRESSED_FILL_OPACITY },\n        outline: {},\n        ghost: { backgroundColor: theme.colors.panel },\n        subtle: { backgroundColor: theme.colors.deep },\n        danger: { opacity: PRESSED_FILL_OPACITY },\n        'danger-outline': { opacity: PRESSED_FILL_OPACITY },\n        success: { opacity: PRESSED_FILL_OPACITY },\n        link: {},\n      },\n    },\n  },\n  disabled: { opacity: DISABLED_OPACITY },\n  label: {\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontWeight: theme.fontWeight.medium,\n    variants: {\n      variant: {\n        primary: { fontWeight: theme.fontWeight.semibold },\n        secondary: { fontWeight: theme.fontWeight.semibold },\n        outline: {},\n        ghost: {},\n        subtle: {},\n        danger: { fontWeight: theme.fontWeight.semibold },\n        'danger-outline': { fontWeight: theme.fontWeight.semibold },\n        success: { fontWeight: theme.fontWeight.semibold },\n        link: {},\n      },\n      size: {\n        xs: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n        sm: { fontSize: theme.fontSize.sm, lineHeight: theme.lineHeight.sm },\n        md: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        lg: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        icon: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        'icon-md': { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        card: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n      },\n    },\n  },\n  labelPressed: {\n    variants: {\n      variant: {\n        primary: {},\n        secondary: {},\n        outline: {},\n        ghost: {},\n        subtle: {},\n        danger: {},\n        'danger-outline': {},\n        success: {},\n        link: { textDecorationLine: 'underline' },\n      },\n    },\n  },\n}));\n"],"mappings":"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"}

package/dist/components/Dialog.mjs

@@ -14,9 +14,9 @@ import { Pressable } from "react-native-unistyles/components/native/Pressable";
 import { Animated } from "react-native-unistyles/components/native/Animated";
 
 //#region src/components/Dialog.tsx
-/** `bg-doom-deep/70`. */
+/** `bg-po-deep/70`. */
 const BACKDROP_ALPHA_PERCENT = 70;
-/** `animate-doom-pop` starts the card slightly small and grows it into place. */
+/** `animate-po-pop` starts the card slightly small and grows it into place. */
 const POP_FROM_SCALE = .96;
 /** `max-w-[calc(100vw-24px)]`: 12pt clear of each screen edge. */
 const SCREEN_MARGIN = 12;

package/dist/components/Dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.mjs","names":["withAlpha","createContext","ReactNode","useContext","useEffect","useRef","Easing","Modal","Platform","StyleProp","TextProps","ViewProps","ViewStyle","StyleSheet","useUnistyles","CloseIcon","fontOf","useControllable","wrapText","Button","ButtonProps","BACKDROP_ALPHA_PERCENT","POP_FROM_SCALE","SCREEN_MARGIN","DialogWidth","DialogState","open","setOpen","DialogContext","undefined","DialogProps","defaultOpen","onOpenChange","children","Dialog","current","DialogTrigger","onPress","props","event","DialogClose","DialogContentProps","width","style","closeLabel","DialogContent","theme","progress","Animated","Value","x1","y1","x2","y2","motion","easing","setValue","timing","toValue","duration","pop","bezier","useNativeDriver","OS","start","_styles","styles","useVariants","root","backdrop","backgroundColor","colors","deep","card","opacity","transform","scale","interpolate","inputRange","outputRange","DialogPartProps","Omit","DialogHeaderProps","dismissible","DialogHeader","header","DialogTitle","title","DialogDescription","description","DialogBody","body","DialogFooterVariant","DialogFooterProps","variant","DialogFooter","_styles2","footer","hint","create","flex","alignItems","justifyContent","padding","position","top","right","bottom","left","maxHeight","overflow","borderRadius","lg","borderWidth","borderColor","border","panel","variants","sm","maxWidth","md","uni__dependencies","flexDirection","gap","spacing","minWidth","borderBottomWidth","borderBottomColor","flexShrink","color","hi","fontFamily","sans","fontSize","xl","lineHeight","letterSpacing","fontWeight","semibold","dim","lineHeightRelaxed","plain","bar","flexWrap","minHeight","borderTopWidth","borderTopColor","paddingHorizontal","paddingVertical","faint"],"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["import { withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { createContext, type ReactNode, useContext, useEffect, useRef } from 'react';\nimport {\n  Animated,\n  Easing,\n  Modal,\n  Platform,\n  Pressable,\n  type StyleProp,\n  Text,\n  type TextProps,\n  View,\n  type ViewProps,\n  type ViewStyle,\n} from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { CloseIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\nimport { useControllable } from '../lib/useControllable';\nimport { wrapText } from '../lib/wrapText';\nimport { Button, type ButtonProps } from './Button';\n\n/*\n * The web Dialog as a centred card in an RN Modal: the native shape for a\n * question that blocks, such as a destructive confirmation. Android back and\n * a backdrop tap close it, as Escape and an outside click do on the web.\n */\n\n/** `bg-doom-deep/70`. */\nconst BACKDROP_ALPHA_PERCENT = 70;\n/** `animate-doom-pop` starts the card slightly small and grows it into place. */\nconst POP_FROM_SCALE = 0.96;\n/** `max-w-[calc(100vw-24px)]`: 12pt clear of each screen edge. */\nconst SCREEN_MARGIN = 12;\n\nexport type DialogWidth = 'sm' | 'md' | 'lg';\n\ninterface DialogState {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nconst DialogContext = createContext<DialogState>({ open: false, setOpen: () => undefined });\n\nexport interface DialogProps {\n  /** Controlled mode; pair with onOpenChange. Omit it and the dialog keeps its own state. */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function Dialog({ open, defaultOpen = false, onOpenChange, children }: DialogProps) {\n  const [current, setOpen] = useControllable(open, defaultOpen, onOpenChange);\n  return <DialogContext.Provider value={{ open: current, setOpen }}>{children}</DialogContext.Provider>;\n}\n\n/** A Button that opens the enclosing dialog. */\nexport function DialogTrigger({ onPress, ...props }: ButtonProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <Button\n      onPress={(event) => {\n        onPress?.(event);\n        setOpen(true);\n      }}\n      {...props}\n    />\n  );\n}\n\n/** A Button that closes the enclosing dialog. */\nexport function DialogClose({ onPress, ...props }: ButtonProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <Button\n      onPress={(event) => {\n        onPress?.(event);\n        setOpen(false);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface DialogContentProps {\n  /** Width preset; `style` may still override. */\n  width?: DialogWidth;\n  /** Applied to the card, after the preset. */\n  style?: StyleProp<ViewStyle>;\n  /** What the backdrop announces as its close action. */\n  closeLabel?: string;\n  children?: ReactNode;\n}\n\nexport function DialogContent({ width = 'md', style, closeLabel = 'close', children }: DialogContentProps) {\n  const { open, setOpen } = useContext(DialogContext);\n  const { theme } = useUnistyles();\n  const progress = useRef(new Animated.Value(0)).current;\n  const [x1, y1, x2, y2] = theme.motion.easing;\n  useEffect(() => {\n    if (!open) return;\n    progress.setValue(0);\n    Animated.timing(progress, {\n      toValue: 1,\n      duration: theme.motion.pop,\n      easing: Easing.bezier(x1, y1, x2, y2),\n      useNativeDriver: Platform.OS !== 'web',\n    }).start();\n  }, [open, progress, theme.motion.pop, x1, y1, x2, y2]);\n  styles.useVariants({ width });\n  return (\n    <Modal visible={open} transparent animationType=\"fade\" statusBarTranslucent onRequestClose={() => setOpen(false)}>\n      <View style={styles.root}>\n        <Pressable\n          accessibilityRole=\"button\"\n          accessibilityLabel={closeLabel}\n          onPress={() => setOpen(false)}\n          // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n          // the stylesheet CSS variables, which withAlpha cannot read.\n          style={[styles.backdrop, { backgroundColor: withAlpha(theme.colors.deep, BACKDROP_ALPHA_PERCENT) }]}\n        />\n        <Animated.View\n          accessibilityViewIsModal\n          style={[\n            styles.card,\n            style,\n            {\n              opacity: progress,\n              transform: [{ scale: progress.interpolate({ inputRange: [0, 1], outputRange: [POP_FROM_SCALE, 1] }) }],\n            },\n          ]}\n        >\n          {children}\n        </Animated.View>\n      </View>\n    </Modal>\n  );\n}\n\nexport interface DialogPartProps extends Omit<ViewProps, 'children' | 'style'> {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\nexport interface DialogHeaderProps extends DialogPartProps {\n  /**\n   * Show the close control at the right of the strip. Off by default, as on\n   * the web: Android back and a backdrop tap already close every dialog.\n   */\n  dismissible?: boolean;\n  /** What the close control announces. */\n  closeLabel?: string;\n}\n\nexport function DialogHeader({\n  dismissible = false,\n  closeLabel = 'close',\n  style,\n  children,\n  ...props\n}: DialogHeaderProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <View style={[styles.header, style]} {...props}>\n      {children}\n      {dismissible ? (\n        <Button variant=\"ghost\" size=\"icon\" accessibilityLabel={closeLabel} onPress={() => setOpen(false)}>\n          <CloseIcon size={12} color=\"faint\" />\n        </Button>\n      ) : null}\n    </View>\n  );\n}\n\nexport function DialogTitle({ style, ...props }: TextProps) {\n  return <Text accessibilityRole=\"header\" style={[styles.title, style]} {...props} />;\n}\n\nexport function DialogDescription({ style, ...props }: TextProps) {\n  return <Text style={[styles.description, style]} {...props} />;\n}\n\nexport function DialogBody({ style, children, ...props }: DialogPartProps) {\n  return (\n    <View style={[styles.body, style]} {...props}>\n      {wrapText(children, styles.description)}\n    </View>\n  );\n}\n\nexport type DialogFooterVariant = 'plain' | 'bar';\n\nexport interface DialogFooterProps extends DialogPartProps {\n  /** `plain`: buttons alone, inside the body's padding. `bar`: the recessed full-width strip with a hint at the left. */\n  variant?: DialogFooterVariant;\n}\n\nexport function DialogFooter({ variant = 'plain', style, children, ...props }: DialogFooterProps) {\n  styles.useVariants({ footer: variant });\n  return (\n    <View style={[styles.footer, style]} {...props}>\n      {wrapText(children, styles.hint)}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  root: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: SCREEN_MARGIN },\n  backdrop: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },\n  card: {\n    width: '100%',\n    maxHeight: '100%',\n    overflow: 'hidden',\n    borderRadius: theme.borderRadius.lg,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    backgroundColor: theme.colors.panel,\n    variants: {\n      width: {\n        sm: { maxWidth: 360 },\n        md: { maxWidth: 480 },\n        lg: { maxWidth: 620 },\n      },\n    },\n  },\n  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: theme.spacing(3),\n    minWidth: 0,\n    borderBottomWidth: 1,\n    borderBottomColor: theme.colors.border,\n    padding: theme.spacing(3),\n  },\n  title: {\n    flexShrink: 1,\n    color: theme.colors.hi,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.xl,\n    lineHeight: theme.lineHeight.xl,\n    letterSpacing: theme.letterSpacing.xl,\n    fontWeight: theme.fontWeight.semibold,\n  },\n  description: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeightRelaxed.sm,\n  },\n  body: { gap: theme.spacing(3), padding: theme.spacing(3) },\n  footer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    variants: {\n      footer: {\n        plain: { justifyContent: 'flex-end' },\n        bar: {\n          flexWrap: 'wrap',\n          justifyContent: 'space-between',\n          minHeight: 34,\n          borderTopWidth: 1,\n          borderTopColor: theme.colors['border-soft'],\n          backgroundColor: theme.colors.deep,\n          paddingHorizontal: theme.spacing(3),\n          paddingVertical: theme.spacing(1.5),\n        },\n      },\n    },\n  },\n  hint: {\n    color: theme.colors.faint,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize['2xs'],\n    lineHeight: theme.lineHeight['2xs'],\n  },\n}));\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.mjs","names":["withAlpha","createContext","ReactNode","useContext","useEffect","useRef","Easing","Modal","Platform","StyleProp","TextProps","ViewProps","ViewStyle","StyleSheet","useUnistyles","CloseIcon","fontOf","useControllable","wrapText","Button","ButtonProps","BACKDROP_ALPHA_PERCENT","POP_FROM_SCALE","SCREEN_MARGIN","DialogWidth","DialogState","open","setOpen","DialogContext","undefined","DialogProps","defaultOpen","onOpenChange","children","Dialog","current","DialogTrigger","onPress","props","event","DialogClose","DialogContentProps","width","style","closeLabel","DialogContent","theme","progress","Animated","Value","x1","y1","x2","y2","motion","easing","setValue","timing","toValue","duration","pop","bezier","useNativeDriver","OS","start","_styles","styles","useVariants","root","backdrop","backgroundColor","colors","deep","card","opacity","transform","scale","interpolate","inputRange","outputRange","DialogPartProps","Omit","DialogHeaderProps","dismissible","DialogHeader","header","DialogTitle","title","DialogDescription","description","DialogBody","body","DialogFooterVariant","DialogFooterProps","variant","DialogFooter","_styles2","footer","hint","create","flex","alignItems","justifyContent","padding","position","top","right","bottom","left","maxHeight","overflow","borderRadius","lg","borderWidth","borderColor","border","panel","variants","sm","maxWidth","md","uni__dependencies","flexDirection","gap","spacing","minWidth","borderBottomWidth","borderBottomColor","flexShrink","color","hi","fontFamily","sans","fontSize","xl","lineHeight","letterSpacing","fontWeight","semibold","dim","lineHeightRelaxed","plain","bar","flexWrap","minHeight","borderTopWidth","borderTopColor","paddingHorizontal","paddingVertical","faint"],"sources":["../../src/components/Dialog.tsx"],"sourcesContent":["import { withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { createContext, type ReactNode, useContext, useEffect, useRef } from 'react';\nimport {\n  Animated,\n  Easing,\n  Modal,\n  Platform,\n  Pressable,\n  type StyleProp,\n  Text,\n  type TextProps,\n  View,\n  type ViewProps,\n  type ViewStyle,\n} from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { CloseIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\nimport { useControllable } from '../lib/useControllable';\nimport { wrapText } from '../lib/wrapText';\nimport { Button, type ButtonProps } from './Button';\n\n/*\n * The web Dialog as a centred card in an RN Modal: the native shape for a\n * question that blocks, such as a destructive confirmation. Android back and\n * a backdrop tap close it, as Escape and an outside click do on the web.\n */\n\n/** `bg-po-deep/70`. */\nconst BACKDROP_ALPHA_PERCENT = 70;\n/** `animate-po-pop` starts the card slightly small and grows it into place. */\nconst POP_FROM_SCALE = 0.96;\n/** `max-w-[calc(100vw-24px)]`: 12pt clear of each screen edge. */\nconst SCREEN_MARGIN = 12;\n\nexport type DialogWidth = 'sm' | 'md' | 'lg';\n\ninterface DialogState {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nconst DialogContext = createContext<DialogState>({ open: false, setOpen: () => undefined });\n\nexport interface DialogProps {\n  /** Controlled mode; pair with onOpenChange. Omit it and the dialog keeps its own state. */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function Dialog({ open, defaultOpen = false, onOpenChange, children }: DialogProps) {\n  const [current, setOpen] = useControllable(open, defaultOpen, onOpenChange);\n  return <DialogContext.Provider value={{ open: current, setOpen }}>{children}</DialogContext.Provider>;\n}\n\n/** A Button that opens the enclosing dialog. */\nexport function DialogTrigger({ onPress, ...props }: ButtonProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <Button\n      onPress={(event) => {\n        onPress?.(event);\n        setOpen(true);\n      }}\n      {...props}\n    />\n  );\n}\n\n/** A Button that closes the enclosing dialog. */\nexport function DialogClose({ onPress, ...props }: ButtonProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <Button\n      onPress={(event) => {\n        onPress?.(event);\n        setOpen(false);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface DialogContentProps {\n  /** Width preset; `style` may still override. */\n  width?: DialogWidth;\n  /** Applied to the card, after the preset. */\n  style?: StyleProp<ViewStyle>;\n  /** What the backdrop announces as its close action. */\n  closeLabel?: string;\n  children?: ReactNode;\n}\n\nexport function DialogContent({ width = 'md', style, closeLabel = 'close', children }: DialogContentProps) {\n  const { open, setOpen } = useContext(DialogContext);\n  const { theme } = useUnistyles();\n  const progress = useRef(new Animated.Value(0)).current;\n  const [x1, y1, x2, y2] = theme.motion.easing;\n  useEffect(() => {\n    if (!open) return;\n    progress.setValue(0);\n    Animated.timing(progress, {\n      toValue: 1,\n      duration: theme.motion.pop,\n      easing: Easing.bezier(x1, y1, x2, y2),\n      useNativeDriver: Platform.OS !== 'web',\n    }).start();\n  }, [open, progress, theme.motion.pop, x1, y1, x2, y2]);\n  styles.useVariants({ width });\n  return (\n    <Modal visible={open} transparent animationType=\"fade\" statusBarTranslucent onRequestClose={() => setOpen(false)}>\n      <View style={styles.root}>\n        <Pressable\n          accessibilityRole=\"button\"\n          accessibilityLabel={closeLabel}\n          onPress={() => setOpen(false)}\n          // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n          // the stylesheet CSS variables, which withAlpha cannot read.\n          style={[styles.backdrop, { backgroundColor: withAlpha(theme.colors.deep, BACKDROP_ALPHA_PERCENT) }]}\n        />\n        <Animated.View\n          accessibilityViewIsModal\n          style={[\n            styles.card,\n            style,\n            {\n              opacity: progress,\n              transform: [{ scale: progress.interpolate({ inputRange: [0, 1], outputRange: [POP_FROM_SCALE, 1] }) }],\n            },\n          ]}\n        >\n          {children}\n        </Animated.View>\n      </View>\n    </Modal>\n  );\n}\n\nexport interface DialogPartProps extends Omit<ViewProps, 'children' | 'style'> {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\nexport interface DialogHeaderProps extends DialogPartProps {\n  /**\n   * Show the close control at the right of the strip. Off by default, as on\n   * the web: Android back and a backdrop tap already close every dialog.\n   */\n  dismissible?: boolean;\n  /** What the close control announces. */\n  closeLabel?: string;\n}\n\nexport function DialogHeader({\n  dismissible = false,\n  closeLabel = 'close',\n  style,\n  children,\n  ...props\n}: DialogHeaderProps) {\n  const { setOpen } = useContext(DialogContext);\n  return (\n    <View style={[styles.header, style]} {...props}>\n      {children}\n      {dismissible ? (\n        <Button variant=\"ghost\" size=\"icon\" accessibilityLabel={closeLabel} onPress={() => setOpen(false)}>\n          <CloseIcon size={12} color=\"faint\" />\n        </Button>\n      ) : null}\n    </View>\n  );\n}\n\nexport function DialogTitle({ style, ...props }: TextProps) {\n  return <Text accessibilityRole=\"header\" style={[styles.title, style]} {...props} />;\n}\n\nexport function DialogDescription({ style, ...props }: TextProps) {\n  return <Text style={[styles.description, style]} {...props} />;\n}\n\nexport function DialogBody({ style, children, ...props }: DialogPartProps) {\n  return (\n    <View style={[styles.body, style]} {...props}>\n      {wrapText(children, styles.description)}\n    </View>\n  );\n}\n\nexport type DialogFooterVariant = 'plain' | 'bar';\n\nexport interface DialogFooterProps extends DialogPartProps {\n  /** `plain`: buttons alone, inside the body's padding. `bar`: the recessed full-width strip with a hint at the left. */\n  variant?: DialogFooterVariant;\n}\n\nexport function DialogFooter({ variant = 'plain', style, children, ...props }: DialogFooterProps) {\n  styles.useVariants({ footer: variant });\n  return (\n    <View style={[styles.footer, style]} {...props}>\n      {wrapText(children, styles.hint)}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  root: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: SCREEN_MARGIN },\n  backdrop: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },\n  card: {\n    width: '100%',\n    maxHeight: '100%',\n    overflow: 'hidden',\n    borderRadius: theme.borderRadius.lg,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    backgroundColor: theme.colors.panel,\n    variants: {\n      width: {\n        sm: { maxWidth: 360 },\n        md: { maxWidth: 480 },\n        lg: { maxWidth: 620 },\n      },\n    },\n  },\n  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: theme.spacing(3),\n    minWidth: 0,\n    borderBottomWidth: 1,\n    borderBottomColor: theme.colors.border,\n    padding: theme.spacing(3),\n  },\n  title: {\n    flexShrink: 1,\n    color: theme.colors.hi,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.xl,\n    lineHeight: theme.lineHeight.xl,\n    letterSpacing: theme.letterSpacing.xl,\n    fontWeight: theme.fontWeight.semibold,\n  },\n  description: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeightRelaxed.sm,\n  },\n  body: { gap: theme.spacing(3), padding: theme.spacing(3) },\n  footer: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    variants: {\n      footer: {\n        plain: { justifyContent: 'flex-end' },\n        bar: {\n          flexWrap: 'wrap',\n          justifyContent: 'space-between',\n          minHeight: 34,\n          borderTopWidth: 1,\n          borderTopColor: theme.colors['border-soft'],\n          backgroundColor: theme.colors.deep,\n          paddingHorizontal: theme.spacing(3),\n          paddingVertical: theme.spacing(1.5),\n        },\n      },\n    },\n  },\n  hint: {\n    color: theme.colors.faint,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize['2xs'],\n    lineHeight: theme.lineHeight['2xs'],\n  },\n}));\n"],"mappings":"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"}

package/dist/components/Dot.mjs

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 import { Animated } from "react-native-unistyles/components/native/Animated";
 
 //#region src/components/Dot.tsx
-/** `bg-doom-faint/40`: a thing that exists but is not live. */
+/** `bg-po-faint/40`: a thing that exists but is not live. */
 const MUTED_ALPHA_PERCENT = 40;
 /** Tailwind's `animate-pulse`: a 2s cycle down to half opacity and back. */
 const PULSE_HALF_CYCLE_MS = 1e3;

package/dist/components/Dot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dot.mjs","names":["DotTone","Tone","withAlpha","useEffect","useRef","StyleProp","ViewStyle","StyleSheet","useUnistyles","DotSize","MUTED_ALPHA_PERCENT","PULSE_HALF_CYCLE_MS","PULSE_LOW_OPACITY","DotProps","tone","size","pulse","style","Dot","theme","_styles","styles","useVariants","opacity","Animated","Value","current","setValue","undefined","loop","sequence","timing","toValue","duration","useNativeDriver","start","stop","dot","backgroundColor","colors","faint","create","flexShrink","borderRadius","full","variants","neutral","muted","blue","green","yellow","red","magenta","violet","cyan","orange","teal","xs","width","spacing","height","sm","md","lg","uni__dependencies"],"sources":["../../src/components/Dot.tsx"],"sourcesContent":["import { type DotTone as Tone, withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { useEffect, useRef } from 'react';\nimport { Animated, type StyleProp, type ViewStyle } from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nexport type DotTone = Tone;\nexport type DotSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** `bg-doom-faint/40`: a thing that exists but is not live. */\nconst MUTED_ALPHA_PERCENT = 40;\n/** Tailwind's `animate-pulse`: a 2s cycle down to half opacity and back. */\nconst PULSE_HALF_CYCLE_MS = 1000;\nconst PULSE_LOW_OPACITY = 0.5;\n\nexport interface DotProps {\n  tone?: DotTone;\n  size?: DotSize;\n  /** Something is live: the dot breathes. */\n  pulse?: boolean;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The status dot: a colour and, while something is live, a pulse. Hidden from screen readers. */\nexport function Dot({ tone = 'neutral', size = 'sm', pulse = false, style }: DotProps) {\n  const { theme } = useUnistyles();\n  styles.useVariants({ tone, size });\n  const opacity = useRef(new Animated.Value(1)).current;\n  useEffect(() => {\n    if (!pulse) {\n      opacity.setValue(1);\n      return undefined;\n    }\n    const loop = Animated.loop(\n      Animated.sequence([\n        Animated.timing(opacity, { toValue: PULSE_LOW_OPACITY, duration: PULSE_HALF_CYCLE_MS, useNativeDriver: true }),\n        Animated.timing(opacity, { toValue: 1, duration: PULSE_HALF_CYCLE_MS, useNativeDriver: true }),\n      ]),\n    );\n    loop.start();\n    return () => loop.stop();\n  }, [pulse, opacity]);\n  return (\n    <Animated.View\n      accessible={false}\n      importantForAccessibility=\"no-hide-descendants\"\n      accessibilityElementsHidden\n      style={[\n        styles.dot,\n        // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n        // the stylesheet CSS variables, which withAlpha cannot read.\n        tone === 'muted' && { backgroundColor: withAlpha(theme.colors.faint, MUTED_ALPHA_PERCENT) },\n        { opacity },\n        style,\n      ]}\n    />\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  dot: {\n    flexShrink: 0,\n    borderRadius: theme.borderRadius.full,\n    variants: {\n      tone: {\n        neutral: { backgroundColor: theme.colors.faint },\n        muted: {},\n        blue: { backgroundColor: theme.colors.blue },\n        green: { backgroundColor: theme.colors.green },\n        yellow: { backgroundColor: theme.colors.yellow },\n        red: { backgroundColor: theme.colors.red },\n        magenta: { backgroundColor: theme.colors.magenta },\n        violet: { backgroundColor: theme.colors.violet },\n        cyan: { backgroundColor: theme.colors.cyan },\n        orange: { backgroundColor: theme.colors.orange },\n        teal: { backgroundColor: theme.colors.teal },\n      },\n      size: {\n        xs: { width: theme.spacing(1), height: theme.spacing(1) },\n        sm: { width: theme.spacing(1.5), height: theme.spacing(1.5) },\n        md: { width: theme.spacing(2), height: theme.spacing(2) },\n        lg: { width: theme.spacing(2.5), height: theme.spacing(2.5) },\n      },\n    },\n  },\n}));\n"],"mappings":";;;;;;;;AASA,MAAMU,sBAAsB;;AAE5B,MAAMC,sBAAsB;AAC5B,MAAMC,oBAAoB;;AAW1B,SAAgBM,IAAI,EAAEJ,OAAO,WAAWC,OAAO,MAAMC,QAAQ,OAAOC,SAAmB;CACrF,MAAM,EAAEE,UAAUX,aAAa;CAAE,MAAAY,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACd;GAAER;GAAMC;EAAK,CAAC;EACjC,MAAMQ,UAAUnB,OAAO,IAAIoB,SAASC,MAAM,CAAC,CAAC,CAAC,CAACC;EAC9CvB,gBAAgB;GACd,IAAI,CAACa,OAAO;IACVO,QAAQI,SAAS,CAAC;IAClB;GACF;GACA,MAAME,OAAOL,SAASK,KACpBL,SAASM,SAAS,CAChBN,SAASO,OAAOR,SAAS;IAAES,SAASpB;IAAmBqB,UAAUtB;IAAqBuB,iBAAiB;GAAK,CAAC,GAC7GV,SAASO,OAAOR,SAAS;IAAES,SAAS;IAAGC,UAAUtB;IAAqBuB,iBAAiB;GAAK,CAAC,CAAC,CAC/F,CACH;GACAL,KAAKM,MAAM;GACX,aAAaN,KAAKO,KAAK;EACzB,GAAG,CAACpB,OAAOO,OAAO,CAAC;EACnB,OACE,oBAAC,SAAS,MAAV;GACE,YAAY;GACZ,2BAA0B;GAC1B;GACA,OAAO;IACLF,OAAOgB;IAGPvB,SAAS,WAAW,EAAEwB,iBAAiBpC,UAAUiB,MAAMoB,OAAOC,OAAO9B,mBAAmB,EAAE;IAC1F,EAAEa,QAAQ;IACVN;GAAK;EACL;CAEJ;AACJ;AAEA,MAAMI,SAASd,WAAWkC,QAAQtB,WAAW,EAC3CkB,KAAK;CACHK,YAAY;CACZC,cAAcxB,MAAMwB,aAAaC;CACjCC,UAAU;EACR/B,MAAM;GACJgC,SAAS,EAAER,iBAAiBnB,MAAMoB,OAAOC,MAAM;GAC/CO,OAAO,CAAC;GACRC,MAAM,EAAEV,iBAAiBnB,MAAMoB,OAAOS,KAAK;GAC3CC,OAAO,EAAEX,iBAAiBnB,MAAMoB,OAAOU,MAAM;GAC7CC,QAAQ,EAAEZ,iBAAiBnB,MAAMoB,OAAOW,OAAO;GAC/CC,KAAK,EAAEb,iBAAiBnB,MAAMoB,OAAOY,IAAI;GACzCC,SAAS,EAAEd,iBAAiBnB,MAAMoB,OAAOa,QAAQ;GACjDC,QAAQ,EAAEf,iBAAiBnB,MAAMoB,OAAOc,OAAO;GAC/CC,MAAM,EAAEhB,iBAAiBnB,MAAMoB,OAAOe,KAAK;GAC3CC,QAAQ,EAAEjB,iBAAiBnB,MAAMoB,OAAOgB,OAAO;GAC/CC,MAAM,EAAElB,iBAAiBnB,MAAMoB,OAAOiB,KAAK;EAC7C;EACAzC,MAAM;GACJ0C,IAAI;IAAEC,OAAOvC,MAAMwC,QAAQ,CAAC;IAAGC,QAAQzC,MAAMwC,QAAQ,CAAC;GAAE;GACxDE,IAAI;IAAEH,OAAOvC,MAAMwC,QAAQ,GAAG;IAAGC,QAAQzC,MAAMwC,QAAQ,GAAG;GAAE;GAC5DG,IAAI;IAAEJ,OAAOvC,MAAMwC,QAAQ,CAAC;IAAGC,QAAQzC,MAAMwC,QAAQ,CAAC;GAAE;GACxDI,IAAI;IAAEL,OAAOvC,MAAMwC,QAAQ,GAAG;IAAGC,QAAQzC,MAAMwC,QAAQ,GAAG;GAAE;EAC9D;CACF;CAACK,mBAAA,CAAA,GAAA,CAAA;AACH,EACF,EAAE"}
+{"version":3,"file":"Dot.mjs","names":["DotTone","Tone","withAlpha","useEffect","useRef","StyleProp","ViewStyle","StyleSheet","useUnistyles","DotSize","MUTED_ALPHA_PERCENT","PULSE_HALF_CYCLE_MS","PULSE_LOW_OPACITY","DotProps","tone","size","pulse","style","Dot","theme","_styles","styles","useVariants","opacity","Animated","Value","current","setValue","undefined","loop","sequence","timing","toValue","duration","useNativeDriver","start","stop","dot","backgroundColor","colors","faint","create","flexShrink","borderRadius","full","variants","neutral","muted","blue","green","yellow","red","magenta","violet","cyan","orange","teal","xs","width","spacing","height","sm","md","lg","uni__dependencies"],"sources":["../../src/components/Dot.tsx"],"sourcesContent":["import { type DotTone as Tone, withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { useEffect, useRef } from 'react';\nimport { Animated, type StyleProp, type ViewStyle } from 'react-native';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nexport type DotTone = Tone;\nexport type DotSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** `bg-po-faint/40`: a thing that exists but is not live. */\nconst MUTED_ALPHA_PERCENT = 40;\n/** Tailwind's `animate-pulse`: a 2s cycle down to half opacity and back. */\nconst PULSE_HALF_CYCLE_MS = 1000;\nconst PULSE_LOW_OPACITY = 0.5;\n\nexport interface DotProps {\n  tone?: DotTone;\n  size?: DotSize;\n  /** Something is live: the dot breathes. */\n  pulse?: boolean;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The status dot: a colour and, while something is live, a pulse. Hidden from screen readers. */\nexport function Dot({ tone = 'neutral', size = 'sm', pulse = false, style }: DotProps) {\n  const { theme } = useUnistyles();\n  styles.useVariants({ tone, size });\n  const opacity = useRef(new Animated.Value(1)).current;\n  useEffect(() => {\n    if (!pulse) {\n      opacity.setValue(1);\n      return undefined;\n    }\n    const loop = Animated.loop(\n      Animated.sequence([\n        Animated.timing(opacity, { toValue: PULSE_LOW_OPACITY, duration: PULSE_HALF_CYCLE_MS, useNativeDriver: true }),\n        Animated.timing(opacity, { toValue: 1, duration: PULSE_HALF_CYCLE_MS, useNativeDriver: true }),\n      ]),\n    );\n    loop.start();\n    return () => loop.stop();\n  }, [pulse, opacity]);\n  return (\n    <Animated.View\n      accessible={false}\n      importantForAccessibility=\"no-hide-descendants\"\n      accessibilityElementsHidden\n      style={[\n        styles.dot,\n        // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n        // the stylesheet CSS variables, which withAlpha cannot read.\n        tone === 'muted' && { backgroundColor: withAlpha(theme.colors.faint, MUTED_ALPHA_PERCENT) },\n        { opacity },\n        style,\n      ]}\n    />\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  dot: {\n    flexShrink: 0,\n    borderRadius: theme.borderRadius.full,\n    variants: {\n      tone: {\n        neutral: { backgroundColor: theme.colors.faint },\n        muted: {},\n        blue: { backgroundColor: theme.colors.blue },\n        green: { backgroundColor: theme.colors.green },\n        yellow: { backgroundColor: theme.colors.yellow },\n        red: { backgroundColor: theme.colors.red },\n        magenta: { backgroundColor: theme.colors.magenta },\n        violet: { backgroundColor: theme.colors.violet },\n        cyan: { backgroundColor: theme.colors.cyan },\n        orange: { backgroundColor: theme.colors.orange },\n        teal: { backgroundColor: theme.colors.teal },\n      },\n      size: {\n        xs: { width: theme.spacing(1), height: theme.spacing(1) },\n        sm: { width: theme.spacing(1.5), height: theme.spacing(1.5) },\n        md: { width: theme.spacing(2), height: theme.spacing(2) },\n        lg: { width: theme.spacing(2.5), height: theme.spacing(2.5) },\n      },\n    },\n  },\n}));\n"],"mappings":";;;;;;;;AASA,MAAMU,sBAAsB;;AAE5B,MAAMC,sBAAsB;AAC5B,MAAMC,oBAAoB;;AAW1B,SAAgBM,IAAI,EAAEJ,OAAO,WAAWC,OAAO,MAAMC,QAAQ,OAAOC,SAAmB;CACrF,MAAM,EAAEE,UAAUX,aAAa;CAAE,MAAAY,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACd;GAAER;GAAMC;EAAK,CAAC;EACjC,MAAMQ,UAAUnB,OAAO,IAAIoB,SAASC,MAAM,CAAC,CAAC,CAAC,CAACC;EAC9CvB,gBAAgB;GACd,IAAI,CAACa,OAAO;IACVO,QAAQI,SAAS,CAAC;IAClB;GACF;GACA,MAAME,OAAOL,SAASK,KACpBL,SAASM,SAAS,CAChBN,SAASO,OAAOR,SAAS;IAAES,SAASpB;IAAmBqB,UAAUtB;IAAqBuB,iBAAiB;GAAK,CAAC,GAC7GV,SAASO,OAAOR,SAAS;IAAES,SAAS;IAAGC,UAAUtB;IAAqBuB,iBAAiB;GAAK,CAAC,CAAC,CAC/F,CACH;GACAL,KAAKM,MAAM;GACX,aAAaN,KAAKO,KAAK;EACzB,GAAG,CAACpB,OAAOO,OAAO,CAAC;EACnB,OACE,oBAAC,SAAS,MAAV;GACE,YAAY;GACZ,2BAA0B;GAC1B;GACA,OAAO;IACLF,OAAOgB;IAGPvB,SAAS,WAAW,EAAEwB,iBAAiBpC,UAAUiB,MAAMoB,OAAOC,OAAO9B,mBAAmB,EAAE;IAC1F,EAAEa,QAAQ;IACVN;GAAK;EACL;CAEJ;AACJ;AAEA,MAAMI,SAASd,WAAWkC,QAAQtB,WAAW,EAC3CkB,KAAK;CACHK,YAAY;CACZC,cAAcxB,MAAMwB,aAAaC;CACjCC,UAAU;EACR/B,MAAM;GACJgC,SAAS,EAAER,iBAAiBnB,MAAMoB,OAAOC,MAAM;GAC/CO,OAAO,CAAC;GACRC,MAAM,EAAEV,iBAAiBnB,MAAMoB,OAAOS,KAAK;GAC3CC,OAAO,EAAEX,iBAAiBnB,MAAMoB,OAAOU,MAAM;GAC7CC,QAAQ,EAAEZ,iBAAiBnB,MAAMoB,OAAOW,OAAO;GAC/CC,KAAK,EAAEb,iBAAiBnB,MAAMoB,OAAOY,IAAI;GACzCC,SAAS,EAAEd,iBAAiBnB,MAAMoB,OAAOa,QAAQ;GACjDC,QAAQ,EAAEf,iBAAiBnB,MAAMoB,OAAOc,OAAO;GAC/CC,MAAM,EAAEhB,iBAAiBnB,MAAMoB,OAAOe,KAAK;GAC3CC,QAAQ,EAAEjB,iBAAiBnB,MAAMoB,OAAOgB,OAAO;GAC/CC,MAAM,EAAElB,iBAAiBnB,MAAMoB,OAAOiB,KAAK;EAC7C;EACAzC,MAAM;GACJ0C,IAAI;IAAEC,OAAOvC,MAAMwC,QAAQ,CAAC;IAAGC,QAAQzC,MAAMwC,QAAQ,CAAC;GAAE;GACxDE,IAAI;IAAEH,OAAOvC,MAAMwC,QAAQ,GAAG;IAAGC,QAAQzC,MAAMwC,QAAQ,GAAG;GAAE;GAC5DG,IAAI;IAAEJ,OAAOvC,MAAMwC,QAAQ,CAAC;IAAGC,QAAQzC,MAAMwC,QAAQ,CAAC;GAAE;GACxDI,IAAI;IAAEL,OAAOvC,MAAMwC,QAAQ,GAAG;IAAGC,QAAQzC,MAAMwC,QAAQ,GAAG;GAAE;EAC9D;CACF;CAACK,mBAAA,CAAA,GAAA,CAAA;AACH,EACF,EAAE"}

package/dist/components/Input.mjs

@@ -8,7 +8,7 @@ import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
 import { TextInput } from "react-native-unistyles/components/native/TextInput";
 
 //#region src/components/Input.tsx
-/** `focus:border-doom-green/60`. */
+/** `focus:border-po-green/60`. */
 const FOCUS_EDGE_ALPHA_PERCENT = 60;
 const DISABLED_OPACITY = .5;
 const ThemedSheetTextInput = withUnistyles(BottomSheetTextInput);

package/dist/components/Input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["withAlpha","BottomSheetTextInput","useState","TextInputProps","StyleSheet","useUnistyles","withUnistyles","fontOf","useInsideSheet","FieldVariant","FieldSize","FOCUS_EDGE_ALPHA_PERCENT","DISABLED_OPACITY","ThemedSheetTextInput","InputProps","Omit","variant","size","invalid","disabled","Input","style","onFocus","onBlur","accessibilityState","props","theme","focused","setFocused","Field","TextInput","_styles","styles","useVariants","undefined","colors","faint","green","event","field","borderColor","create","minWidth","minHeight","color","hi","fontFamily","sans","variants","default","borderRadius","DEFAULT","borderWidth","border","backgroundColor","deep","bare","padding","xs","paddingHorizontal","spacing","paddingVertical","fontSize","sm","md","base","lg","compoundVariants","uni__dependencies","red","opacity"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import { withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { BottomSheetTextInput } from '@gorhom/bottom-sheet';\nimport { useState } from 'react';\nimport { TextInput, type TextInputProps } from 'react-native';\nimport { StyleSheet, useUnistyles, withUnistyles } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { useInsideSheet } from '../lib/insideSheet';\n\nexport type FieldVariant = 'default' | 'bare';\nexport type FieldSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** `focus:border-doom-green/60`. */\nconst FOCUS_EDGE_ALPHA_PERCENT = 60;\nconst DISABLED_OPACITY = 0.5;\n\nconst ThemedSheetTextInput = withUnistyles(BottomSheetTextInput);\nexport interface InputProps extends Omit<TextInputProps, 'editable'> {\n  variant?: FieldVariant;\n  /** The same rungs Button names, so a field and the button beside it line up. */\n  size?: FieldSize;\n  /** The value is wrong: red edge and red text, as `aria-invalid` on the web. */\n  invalid?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * The one text field: deep well, quiet border, jade edge and cursor on focus,\n * red edge when invalid. Inside a Sheet it becomes the sheet's own input.\n */\nexport function Input({\n  variant = 'default',\n  size = 'md',\n  invalid = false,\n  disabled = false,\n  style,\n  onFocus,\n  onBlur,\n  accessibilityState,\n  ...props\n}: InputProps) {\n  const { theme } = useUnistyles();\n  const [focused, setFocused] = useState(false);\n  // Inside a Sheet the field must be the sheet's own input, so the sheet rises with the keyboard.\n  const Field = useInsideSheet() ? ThemedSheetTextInput : TextInput;\n  // Unistyles reserves a variant named `default` as the fallback for an unset variant.\n  styles.useVariants({ variant: variant === 'bare' ? 'bare' : undefined, size });\n  return (\n    <Field\n      autoCorrect={false}\n      spellCheck={false}\n      placeholderTextColor={theme.colors.faint}\n      selectionColor={theme.colors.green}\n      cursorColor={theme.colors.green}\n      editable={!disabled}\n      accessibilityState={{ ...accessibilityState, disabled }}\n      onFocus={(event) => {\n        setFocused(true);\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        setFocused(false);\n        onBlur?.(event);\n      }}\n      style={[\n        styles.field,\n        // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n        // the stylesheet CSS variables, which withAlpha cannot read.\n        focused && variant === 'default' && { borderColor: withAlpha(theme.colors.green, FOCUS_EDGE_ALPHA_PERCENT) },\n        invalid && styles.invalid,\n        disabled && styles.disabled,\n        style,\n      ]}\n      {...props}\n    />\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  field: {\n    minWidth: 0,\n    minHeight: 44,\n    color: theme.colors.hi,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    variants: {\n      variant: {\n        default: {\n          borderRadius: theme.borderRadius.DEFAULT,\n          borderWidth: 1,\n          borderColor: theme.colors.border,\n          backgroundColor: theme.colors.deep,\n        },\n        /** No well: a composer or a search that draws its own surface keeps the type and drops the box. */\n        bare: { borderWidth: 0, backgroundColor: 'transparent', padding: 0 },\n      },\n      size: {\n        xs: {\n          paddingHorizontal: theme.spacing(1.5),\n          paddingVertical: theme.spacing(0.5),\n          fontSize: theme.fontSize.sm,\n        },\n        sm: {\n          paddingHorizontal: theme.spacing(2),\n          paddingVertical: theme.spacing(1),\n          fontSize: theme.fontSize.sm,\n        },\n        md: {\n          paddingHorizontal: theme.spacing(2.5),\n          paddingVertical: theme.spacing(1.5),\n          fontSize: theme.fontSize.base,\n        },\n        lg: {\n          paddingHorizontal: theme.spacing(3),\n          paddingVertical: theme.spacing(1.5),\n          fontSize: theme.fontSize.base,\n        },\n      },\n    },\n    compoundVariants: [{ variant: 'bare', styles: { padding: 0, paddingHorizontal: 0, paddingVertical: 0 } }],\n  },\n  invalid: { borderColor: theme.colors['edge-red'], color: theme.colors.red },\n  disabled: { opacity: DISABLED_OPACITY },\n}));\n"],"mappings":";;;;;;;;;;;AAaA,MAAMW,2BAA2B;AACjC,MAAMC,mBAAmB;AAEzB,MAAMC,uBAAuBP,cAAcL,oBAAoB;;;;;AAc/D,SAAgBmB,MAAM,EACpBJ,UAAU,WACVC,OAAO,MACPC,UAAU,OACVC,WAAW,OACXE,OACAC,SACAC,QACAC,oBACA,GAAGC,SACU;CACb,MAAM,EAAEC,UAAUrB,aAAa;CAC/B,MAAM,CAACsB,SAASC,cAAc1B,SAAS,KAAK;CAE5C,MAAM2B,QAAQrB,eAAe,IAAIK,uBAAuBiB;CACxD,MAAAC,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACmB;GAAEjB,SAASA,YAAY,SAAS,SAASkB;GAAWjB;EAAK,CAAC;EAC7E,OACE,oBAAC,OAAD;GACE,aAAa;GACb,YAAY;GACZ,sBAAsBS,MAAMS,OAAOC;GACnC,gBAAgBV,MAAMS,OAAOE;GAC7B,aAAaX,MAAMS,OAAOE;GAC1B,UAAU,CAAClB;GACX,oBAAoB;IAAE,GAAGK;IAAoBL;GAAS;GACtD,UAAUmB,UAAU;IAClBV,WAAW,IAAI;IACfN,UAAUgB,KAAK;GACjB;GACA,SAASA,UAAU;IACjBV,WAAW,KAAK;IAChBL,SAASe,KAAK;GAChB;GACA,OAAO;IACLN,OAAOO;IAGPZ,WAAWX,YAAY,aAAa,EAAEwB,aAAaxC,UAAU0B,MAAMS,OAAOE,OAAO1B,wBAAwB,EAAE;IAC3GO,WAAWc,OAAOd;IAClBC,YAAYa,OAAOb;IACnBE;GAAK;GAEP,GAAII;EAAM;CAEZ;AACJ;AAEA,MAAMO,SAAS5B,WAAWqC,QAAQf,WAAW;CAC3Ca,OAAO;EACLG,UAAU;EACVC,WAAW;EACXC,OAAOlB,MAAMS,OAAOU;EACpBC,YAAYvC,OAAOmB,MAAMoB,WAAWC,IAAI;EACxCC,UAAU;GACRhC,SAAS;IACPiC,SAAS;KACPC,cAAcxB,MAAMwB,aAAaC;KACjCC,aAAa;KACbZ,aAAad,MAAMS,OAAOkB;KAC1BC,iBAAiB5B,MAAMS,OAAOoB;IAChC;;IAEAC,MAAM;KAAEJ,aAAa;KAAGE,iBAAiB;KAAeG,SAAS;IAAE;GACrE;GACAxC,MAAM;IACJyC,IAAI;KACFC,mBAAmBjC,MAAMkC,QAAQ,GAAG;KACpCC,iBAAiBnC,MAAMkC,QAAQ,EAAG;KAClCE,UAAUpC,MAAMoC,SAASC;IAC3B;IACAA,IAAI;KACFJ,mBAAmBjC,MAAMkC,QAAQ,CAAC;KAClCC,iBAAiBnC,MAAMkC,QAAQ,CAAC;KAChCE,UAAUpC,MAAMoC,SAASC;IAC3B;IACAC,IAAI;KACFL,mBAAmBjC,MAAMkC,QAAQ,GAAG;KACpCC,iBAAiBnC,MAAMkC,QAAQ,GAAG;KAClCE,UAAUpC,MAAMoC,SAASG;IAC3B;IACAC,IAAI;KACFP,mBAAmBjC,MAAMkC,QAAQ,CAAC;KAClCC,iBAAiBnC,MAAMkC,QAAQ,GAAG;KAClCE,UAAUpC,MAAMoC,SAASG;IAC3B;GACF;EACF;EACAE,kBAAkB,CAAC;GAAEnD,SAAS;GAAQgB,QAAQ;IAAEyB,SAAS;IAAGE,mBAAmB;IAAGE,iBAAiB;GAAE;EAAE,CAAC;EAACO,mBAAA,CAAA,GAAA,CAAA;CAC3G;CACAlD,SAAS;EAAEsB,aAAad,MAAMS,OAAO;EAAaS,OAAOlB,MAAMS,OAAOkC;EAAGD,mBAAA,CAAA,CAAA;CAAC;CAC1EjD,UAAU,EAAEmD,SAAS1D,iBAAiB;AACxC,EAAE"}
+{"version":3,"file":"Input.mjs","names":["withAlpha","BottomSheetTextInput","useState","TextInputProps","StyleSheet","useUnistyles","withUnistyles","fontOf","useInsideSheet","FieldVariant","FieldSize","FOCUS_EDGE_ALPHA_PERCENT","DISABLED_OPACITY","ThemedSheetTextInput","InputProps","Omit","variant","size","invalid","disabled","Input","style","onFocus","onBlur","accessibilityState","props","theme","focused","setFocused","Field","TextInput","_styles","styles","useVariants","undefined","colors","faint","green","event","field","borderColor","create","minWidth","minHeight","color","hi","fontFamily","sans","variants","default","borderRadius","DEFAULT","borderWidth","border","backgroundColor","deep","bare","padding","xs","paddingHorizontal","spacing","paddingVertical","fontSize","sm","md","base","lg","compoundVariants","uni__dependencies","red","opacity"],"sources":["../../src/components/Input.tsx"],"sourcesContent":["import { withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport { BottomSheetTextInput } from '@gorhom/bottom-sheet';\nimport { useState } from 'react';\nimport { TextInput, type TextInputProps } from 'react-native';\nimport { StyleSheet, useUnistyles, withUnistyles } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { useInsideSheet } from '../lib/insideSheet';\n\nexport type FieldVariant = 'default' | 'bare';\nexport type FieldSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** `focus:border-po-green/60`. */\nconst FOCUS_EDGE_ALPHA_PERCENT = 60;\nconst DISABLED_OPACITY = 0.5;\n\nconst ThemedSheetTextInput = withUnistyles(BottomSheetTextInput);\nexport interface InputProps extends Omit<TextInputProps, 'editable'> {\n  variant?: FieldVariant;\n  /** The same rungs Button names, so a field and the button beside it line up. */\n  size?: FieldSize;\n  /** The value is wrong: red edge and red text, as `aria-invalid` on the web. */\n  invalid?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * The one text field: deep well, quiet border, jade edge and cursor on focus,\n * red edge when invalid. Inside a Sheet it becomes the sheet's own input.\n */\nexport function Input({\n  variant = 'default',\n  size = 'md',\n  invalid = false,\n  disabled = false,\n  style,\n  onFocus,\n  onBlur,\n  accessibilityState,\n  ...props\n}: InputProps) {\n  const { theme } = useUnistyles();\n  const [focused, setFocused] = useState(false);\n  // Inside a Sheet the field must be the sheet's own input, so the sheet rises with the keyboard.\n  const Field = useInsideSheet() ? ThemedSheetTextInput : TextInput;\n  // Unistyles reserves a variant named `default` as the fallback for an unset variant.\n  styles.useVariants({ variant: variant === 'bare' ? 'bare' : undefined, size });\n  return (\n    <Field\n      autoCorrect={false}\n      spellCheck={false}\n      placeholderTextColor={theme.colors.faint}\n      selectionColor={theme.colors.green}\n      cursorColor={theme.colors.green}\n      editable={!disabled}\n      accessibilityState={{ ...accessibilityState, disabled }}\n      onFocus={(event) => {\n        setFocused(true);\n        onFocus?.(event);\n      }}\n      onBlur={(event) => {\n        setFocused(false);\n        onBlur?.(event);\n      }}\n      style={[\n        styles.field,\n        // Alpha mixes are computed in render from useUnistyles(), not in StyleSheet.create: on web Unistyles hands\n        // the stylesheet CSS variables, which withAlpha cannot read.\n        focused && variant === 'default' && { borderColor: withAlpha(theme.colors.green, FOCUS_EDGE_ALPHA_PERCENT) },\n        invalid && styles.invalid,\n        disabled && styles.disabled,\n        style,\n      ]}\n      {...props}\n    />\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  field: {\n    minWidth: 0,\n    minHeight: 44,\n    color: theme.colors.hi,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    variants: {\n      variant: {\n        default: {\n          borderRadius: theme.borderRadius.DEFAULT,\n          borderWidth: 1,\n          borderColor: theme.colors.border,\n          backgroundColor: theme.colors.deep,\n        },\n        /** No well: a composer or a search that draws its own surface keeps the type and drops the box. */\n        bare: { borderWidth: 0, backgroundColor: 'transparent', padding: 0 },\n      },\n      size: {\n        xs: {\n          paddingHorizontal: theme.spacing(1.5),\n          paddingVertical: theme.spacing(0.5),\n          fontSize: theme.fontSize.sm,\n        },\n        sm: {\n          paddingHorizontal: theme.spacing(2),\n          paddingVertical: theme.spacing(1),\n          fontSize: theme.fontSize.sm,\n        },\n        md: {\n          paddingHorizontal: theme.spacing(2.5),\n          paddingVertical: theme.spacing(1.5),\n          fontSize: theme.fontSize.base,\n        },\n        lg: {\n          paddingHorizontal: theme.spacing(3),\n          paddingVertical: theme.spacing(1.5),\n          fontSize: theme.fontSize.base,\n        },\n      },\n    },\n    compoundVariants: [{ variant: 'bare', styles: { padding: 0, paddingHorizontal: 0, paddingVertical: 0 } }],\n  },\n  invalid: { borderColor: theme.colors['edge-red'], color: theme.colors.red },\n  disabled: { opacity: DISABLED_OPACITY },\n}));\n"],"mappings":";;;;;;;;;;;AAaA,MAAMW,2BAA2B;AACjC,MAAMC,mBAAmB;AAEzB,MAAMC,uBAAuBP,cAAcL,oBAAoB;;;;;AAc/D,SAAgBmB,MAAM,EACpBJ,UAAU,WACVC,OAAO,MACPC,UAAU,OACVC,WAAW,OACXE,OACAC,SACAC,QACAC,oBACA,GAAGC,SACU;CACb,MAAM,EAAEC,UAAUrB,aAAa;CAC/B,MAAM,CAACsB,SAASC,cAAc1B,SAAS,KAAK;CAE5C,MAAM2B,QAAQrB,eAAe,IAAIK,uBAAuBiB;CACxD,MAAAC,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACmB;GAAEjB,SAASA,YAAY,SAAS,SAASkB;GAAWjB;EAAK,CAAC;EAC7E,OACE,oBAAC,OAAD;GACE,aAAa;GACb,YAAY;GACZ,sBAAsBS,MAAMS,OAAOC;GACnC,gBAAgBV,MAAMS,OAAOE;GAC7B,aAAaX,MAAMS,OAAOE;GAC1B,UAAU,CAAClB;GACX,oBAAoB;IAAE,GAAGK;IAAoBL;GAAS;GACtD,UAAUmB,UAAU;IAClBV,WAAW,IAAI;IACfN,UAAUgB,KAAK;GACjB;GACA,SAASA,UAAU;IACjBV,WAAW,KAAK;IAChBL,SAASe,KAAK;GAChB;GACA,OAAO;IACLN,OAAOO;IAGPZ,WAAWX,YAAY,aAAa,EAAEwB,aAAaxC,UAAU0B,MAAMS,OAAOE,OAAO1B,wBAAwB,EAAE;IAC3GO,WAAWc,OAAOd;IAClBC,YAAYa,OAAOb;IACnBE;GAAK;GAEP,GAAII;EAAM;CAEZ;AACJ;AAEA,MAAMO,SAAS5B,WAAWqC,QAAQf,WAAW;CAC3Ca,OAAO;EACLG,UAAU;EACVC,WAAW;EACXC,OAAOlB,MAAMS,OAAOU;EACpBC,YAAYvC,OAAOmB,MAAMoB,WAAWC,IAAI;EACxCC,UAAU;GACRhC,SAAS;IACPiC,SAAS;KACPC,cAAcxB,MAAMwB,aAAaC;KACjCC,aAAa;KACbZ,aAAad,MAAMS,OAAOkB;KAC1BC,iBAAiB5B,MAAMS,OAAOoB;IAChC;;IAEAC,MAAM;KAAEJ,aAAa;KAAGE,iBAAiB;KAAeG,SAAS;IAAE;GACrE;GACAxC,MAAM;IACJyC,IAAI;KACFC,mBAAmBjC,MAAMkC,QAAQ,GAAG;KACpCC,iBAAiBnC,MAAMkC,QAAQ,EAAG;KAClCE,UAAUpC,MAAMoC,SAASC;IAC3B;IACAA,IAAI;KACFJ,mBAAmBjC,MAAMkC,QAAQ,CAAC;KAClCC,iBAAiBnC,MAAMkC,QAAQ,CAAC;KAChCE,UAAUpC,MAAMoC,SAASC;IAC3B;IACAC,IAAI;KACFL,mBAAmBjC,MAAMkC,QAAQ,GAAG;KACpCC,iBAAiBnC,MAAMkC,QAAQ,GAAG;KAClCE,UAAUpC,MAAMoC,SAASG;IAC3B;IACAC,IAAI;KACFP,mBAAmBjC,MAAMkC,QAAQ,CAAC;KAClCC,iBAAiBnC,MAAMkC,QAAQ,GAAG;KAClCE,UAAUpC,MAAMoC,SAASG;IAC3B;GACF;EACF;EACAE,kBAAkB,CAAC;GAAEnD,SAAS;GAAQgB,QAAQ;IAAEyB,SAAS;IAAGE,mBAAmB;IAAGE,iBAAiB;GAAE;EAAE,CAAC;EAACO,mBAAA,CAAA,GAAA,CAAA;CAC3G;CACAlD,SAAS;EAAEsB,aAAad,MAAMS,OAAO;EAAaS,OAAOlB,MAAMS,OAAOkC;EAAGD,mBAAA,CAAA,CAAA;CAAC;CAC1EjD,UAAU,EAAEmD,SAAS1D,iBAAiB;AACxC,EAAE"}

package/dist/components/SegmentedControl.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.mts","names":[],"sources":["../../src/components/SegmentedControl.tsx"],"mappings":";;iBA0BiB;EACf;EACA;;iBAGe;;EAEf,kBAAkB;;EAElB;EACA,gBAAgB;EAChB;;EAEA;EACA,QAAQ,UAAU;;;;;;;;wBASJ,mBACd,SACA,OACA,eACA,UACA,oBACA,SACC,wCAAqB,IAAA"}
+{"version":3,"file":"SegmentedControl.d.mts","names":[],"sources":["../../src/components/SegmentedControl.tsx"],"mappings":";;iBA6BiB;EACf;EACA;;iBAGe;;EAEf,kBAAkB;;EAElB;EACA,gBAAgB;EAChB;;EAEA;EACA,QAAQ,UAAU;;;;;;;;wBASJ,mBACd,SACA,OACA,eACA,UACA,oBACA,SACC,wCAAqB,IAAA"}

package/dist/components/SegmentedControl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.mjs","names":["RNSegmentedControl","StyleProp","ViewStyle","StyleSheet","withUnistyles","fontOf","selectionTick","ThemedSegmentedControl","theme","backgroundColor","colors","deep","tintColor","fontStyle","color","dim","fontFamily","sans","fontSize","base","fontWeight","medium","activeFontStyle","green","semibold","appearance","scheme","SegmentedControlOption","value","label","SegmentedControlProps","options","onValueChange","disabled","accessibilityLabel","style","SegmentedControl","map","option","findIndex","event","next","nativeEvent","selectedSegmentIndex","undefined","styles","control","create","minHeight","borderRadius","md","uni__dependencies"],"sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import RNSegmentedControl from '@react-native-segmented-control/segmented-control';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { StyleSheet, withUnistyles } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { selectionTick } from '../lib/haptics';\n\n/** Theme colours reach the third-party control through withUnistyles, so it follows theme changes. */\nconst ThemedSegmentedControl = withUnistyles(RNSegmentedControl, (theme) => ({\n  backgroundColor: theme.colors.deep,\n  tintColor: theme.colors['tint-green'],\n  fontStyle: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    fontWeight: theme.fontWeight.medium,\n  },\n  activeFontStyle: {\n    color: theme.colors.green,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    fontWeight: theme.fontWeight.semibold,\n  },\n  appearance: theme.scheme,\n}));\n\nexport interface SegmentedControlOption {\n  value: string;\n  label: string;\n}\n\nexport interface SegmentedControlProps {\n  /** The segments, in order. */\n  options: readonly SegmentedControlOption[];\n  /** The selected option's value. */\n  value: string;\n  onValueChange: (value: string) => void;\n  disabled?: boolean;\n  /** What the control is for, such as \"Status\". */\n  accessibilityLabel?: string;\n  style?: StyleProp<ViewStyle>;\n}\n\n/**\n * A short exclusive choice, such as a task's status: the platform's own\n * segmented control on iOS, the library's drawn fallback elsewhere, with a\n * selection tick on each change. It is the native stand-in for a web Select\n * with a handful of options.\n */\nexport function SegmentedControl({\n  options,\n  value,\n  onValueChange,\n  disabled = false,\n  accessibilityLabel,\n  style,\n}: SegmentedControlProps) {\n  return (\n    <ThemedSegmentedControl\n      values={options.map((option) => option.label)}\n      selectedIndex={options.findIndex((option) => option.value === value)}\n      enabled={!disabled}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityState={{ disabled }}\n      onChange={(event) => {\n        const next = options[event.nativeEvent.selectedSegmentIndex];\n        if (next === undefined || next.value === value) return;\n        selectionTick();\n        onValueChange(next.value);\n      }}\n      style={[styles.control, style]}\n    />\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  control: { minHeight: 32, borderRadius: theme.borderRadius.md },\n}));\n"],"mappings":";;;;;;;;AAQA,MAAMO,yBAAyBH,cAAcJ,qBAAqBQ,WAAW;CAC3EC,iBAAiBD,MAAME,OAAOC;CAC9BC,WAAWJ,MAAME,OAAO;CACxBG,WAAW;EACTC,OAAON,MAAME,OAAOK;EACpBC,YAAYX,OAAOG,MAAMQ,WAAWC,IAAI;EACxCC,UAAUV,MAAMU,SAASC;EACzBC,YAAYZ,MAAMY,WAAWC;CAC/B;CACAC,iBAAiB;EACfR,OAAON,MAAME,OAAOa;EACpBP,YAAYX,OAAOG,MAAMQ,WAAWC,IAAI;EACxCC,UAAUV,MAAMU,SAASC;EACzBC,YAAYZ,MAAMY,WAAWI;CAC/B;CACAC,YAAYjB,MAAMkB;AACpB,EAAE;;;;;;;AAyBF,SAAgBU,iBAAiB,EAC/BL,SACAH,OACAI,eACAC,WAAW,OACXC,oBACAC,SACwB;CACxB,OACE,oBAAC,wBAAD;EACE,QAAQJ,QAAQM,KAAKC,WAAWA,OAAOT,KAAK;EAC5C,eAAeE,QAAQQ,WAAWD,WAAWA,OAAOV,UAAUA,KAAK;EACnE,SAAS,CAACK;EACUC;EACpB,oBAAoB,EAAED,SAAS;EAC/B,WAAWO,UAAU;GACnB,MAAMC,OAAOV,QAAQS,MAAME,YAAYC;GACvC,IAAIF,SAASG,UAAaH,KAAKb,UAAUA,OAAO;GAChDtB,cAAc;GACd0B,cAAcS,KAAKb,KAAK;EAC1B;EACA,OAAO,CAACiB,OAAOC,SAASX,KAAK;CAAE;AAGrC;AAEA,MAAMU,SAAS1C,WAAW4C,QAAQvC,WAAW,EAC3CsC,SAAS;CAAEE,WAAW;CAAIC,cAAczC,MAAMyC,aAAaC;CAAEC,mBAAA,CAAA,CAAA;AAAC,EAChE,EAAE"}
+{"version":3,"file":"SegmentedControl.mjs","names":["RNSegmentedControl","SegmentedControlProps","RNSegmentedControlProps","ComponentType","StyleProp","ViewStyle","StyleSheet","withUnistyles","fontOf","selectionTick","ThemedSegmentedControl","theme","backgroundColor","colors","deep","tintColor","fontStyle","color","dim","fontFamily","sans","fontSize","base","fontWeight","medium","activeFontStyle","green","semibold","appearance","scheme","SegmentedControlOption","value","label","options","onValueChange","disabled","accessibilityLabel","style","SegmentedControl","map","option","findIndex","event","next","nativeEvent","selectedSegmentIndex","undefined","styles","control","create","minHeight","borderRadius","md","uni__dependencies"],"sources":["../../src/components/SegmentedControl.tsx"],"sourcesContent":["import RNSegmentedControl, {\n  type SegmentedControlProps as RNSegmentedControlProps,\n} from '@react-native-segmented-control/segmented-control';\nimport type { ComponentType } from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { StyleSheet, withUnistyles } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { selectionTick } from '../lib/haptics';\n\n/** Theme colours reach the third-party control through withUnistyles, so it follows theme changes. */\nconst ThemedSegmentedControl = withUnistyles(RNSegmentedControl as ComponentType<RNSegmentedControlProps>, (theme) => ({\n  backgroundColor: theme.colors.deep,\n  tintColor: theme.colors['tint-green'],\n  fontStyle: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    fontWeight: theme.fontWeight.medium,\n  },\n  activeFontStyle: {\n    color: theme.colors.green,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    fontWeight: theme.fontWeight.semibold,\n  },\n  appearance: theme.scheme,\n}));\n\nexport interface SegmentedControlOption {\n  value: string;\n  label: string;\n}\n\nexport interface SegmentedControlProps {\n  /** The segments, in order. */\n  options: readonly SegmentedControlOption[];\n  /** The selected option's value. */\n  value: string;\n  onValueChange: (value: string) => void;\n  disabled?: boolean;\n  /** What the control is for, such as \"Status\". */\n  accessibilityLabel?: string;\n  style?: StyleProp<ViewStyle>;\n}\n\n/**\n * A short exclusive choice, such as a task's status: the platform's own\n * segmented control on iOS, the library's drawn fallback elsewhere, with a\n * selection tick on each change. It is the native stand-in for a web Select\n * with a handful of options.\n */\nexport function SegmentedControl({\n  options,\n  value,\n  onValueChange,\n  disabled = false,\n  accessibilityLabel,\n  style,\n}: SegmentedControlProps) {\n  return (\n    <ThemedSegmentedControl\n      values={options.map((option) => option.label)}\n      selectedIndex={options.findIndex((option) => option.value === value)}\n      enabled={!disabled}\n      accessibilityLabel={accessibilityLabel}\n      accessibilityState={{ disabled }}\n      onChange={(event) => {\n        const next = options[event.nativeEvent.selectedSegmentIndex];\n        if (next === undefined || next.value === value) return;\n        selectionTick();\n        onValueChange(next.value);\n      }}\n      style={[styles.control, style]}\n    />\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  control: { minHeight: 32, borderRadius: theme.borderRadius.md },\n}));\n"],"mappings":";;;;;;;;AAWA,MAAMU,yBAAyBH,cAAcP,qBAA+DW,WAAW;CACrHC,iBAAiBD,MAAME,OAAOC;CAC9BC,WAAWJ,MAAME,OAAO;CACxBG,WAAW;EACTC,OAAON,MAAME,OAAOK;EACpBC,YAAYX,OAAOG,MAAMQ,WAAWC,IAAI;EACxCC,UAAUV,MAAMU,SAASC;EACzBC,YAAYZ,MAAMY,WAAWC;CAC/B;CACAC,iBAAiB;EACfR,OAAON,MAAME,OAAOa;EACpBP,YAAYX,OAAOG,MAAMQ,WAAWC,IAAI;EACxCC,UAAUV,MAAMU,SAASC;EACzBC,YAAYZ,MAAMY,WAAWI;CAC/B;CACAC,YAAYjB,MAAMkB;AACpB,EAAE;;;;;;;AAyBF,SAAgBS,iBAAiB,EAC/BL,SACAF,OACAG,eACAC,WAAW,OACXC,oBACAC,SACwB;CACxB,OACE,oBAAC,wBAAD;EACE,QAAQJ,QAAQM,KAAKC,WAAWA,OAAOR,KAAK;EAC5C,eAAeC,QAAQQ,WAAWD,WAAWA,OAAOT,UAAUA,KAAK;EACnE,SAAS,CAACI;EACUC;EACpB,oBAAoB,EAAED,SAAS;EAC/B,WAAWO,UAAU;GACnB,MAAMC,OAAOV,QAAQS,MAAME,YAAYC;GACvC,IAAIF,SAASG,UAAaH,KAAKZ,UAAUA,OAAO;GAChDtB,cAAc;GACdyB,cAAcS,KAAKZ,KAAK;EAC1B;EACA,OAAO,CAACgB,OAAOC,SAASX,KAAK;CAAE;AAGrC;AAEA,MAAMU,SAASzC,WAAW2C,QAAQtC,WAAW,EAC3CqC,SAAS;CAAEE,WAAW;CAAIC,cAAcxC,MAAMwC,aAAaC;CAAEC,mBAAA,CAAA,CAAA;AAAC,EAChE,EAAE"}

package/dist/components/SheetFrame.mjs

@@ -8,7 +8,7 @@ import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from "@g
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
 
 //#region src/components/SheetFrame.tsx
-/** `bg-doom-deep/70`, the overlay every web sheet and dialog draws. */
+/** `bg-po-deep/70`, the overlay every web sheet and dialog draws. */
 const BACKDROP_ALPHA_PERCENT = 70;
 /**
 * The bottom sheet both Sheet and DropdownMenu sit in: a drag handle, sized

package/dist/components/SheetFrame.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SheetFrame.mjs","names":["withAlpha","BottomSheetBackdrop","BottomSheetBackdropProps","BottomSheetModal","BottomSheetScrollView","ReactNode","useCallback","useContext","useEffect","useRef","BackHandler","SafeAreaInsetsContext","StyleSheet","useUnistyles","InsideSheetContext","BACKDROP_ALPHA_PERCENT","SheetFrameProps","open","onClose","children","SheetFrame","theme","insets","sheet","openRef","presented","current","present","dismiss","undefined","subscription","addEventListener","remove","backdropColor","colors","deep","renderBackdrop","props","style","backgroundColor","top","rail","borderRadius","lg","border","styles","content","paddingBottom","bottom","create","flexGrow"],"sources":["../../src/components/SheetFrame.tsx"],"sourcesContent":["import { withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport {\n  BottomSheetBackdrop,\n  type BottomSheetBackdropProps,\n  BottomSheetModal,\n  BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\nimport { type ReactNode, useCallback, useContext, useEffect, useRef } from 'react';\nimport { BackHandler } from 'react-native';\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { InsideSheetContext } from '../lib/insideSheet';\n\n/** `bg-doom-deep/70`, the overlay every web sheet and dialog draws. */\nconst BACKDROP_ALPHA_PERCENT = 70;\n\nexport interface SheetFrameProps {\n  open: boolean;\n  /** The sheet asked to close: a drag down, a backdrop tap or Android back. */\n  onClose: () => void;\n  children?: ReactNode;\n}\n\n/**\n * The bottom sheet both Sheet and DropdownMenu sit in: a drag handle, sized\n * to its content, closed by dragging down, tapping the backdrop or Android\n * back, clear of the safe area and lifted by the keyboard. Private: the public\n * parts keep bottom-sheet types out of the package API.\n */\nexport function SheetFrame({ open, onClose, children }: SheetFrameProps) {\n  const { theme } = useUnistyles();\n  const insets = useContext(SafeAreaInsetsContext);\n  const sheet = useRef<BottomSheetModal>(null);\n  const openRef = useRef(open);\n  const presented = useRef(false);\n\n  useEffect(() => {\n    openRef.current = open;\n    if (open) {\n      presented.current = true;\n      sheet.current?.present();\n    } else if (presented.current) {\n      // Only a presented sheet is dismissed. Dismissing one that never opened leaves bottom-sheet's\n      // modal stuck in its dismissing status, and the next present() then never draws.\n      presented.current = false;\n      sheet.current?.dismiss();\n    }\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return undefined;\n    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {\n      onClose();\n      return true;\n    });\n    return () => subscription.remove();\n  }, [open, onClose]);\n\n  const backdropColor = withAlpha(theme.colors.deep, BACKDROP_ALPHA_PERCENT);\n  const renderBackdrop = useCallback(\n    (props: BottomSheetBackdropProps) => (\n      <BottomSheetBackdrop\n        {...props}\n        appearsOnIndex={0}\n        disappearsOnIndex={-1}\n        opacity={1}\n        pressBehavior=\"close\"\n        style={[props.style, { backgroundColor: backdropColor }]}\n      />\n    ),\n    [backdropColor],\n  );\n\n  return (\n    <BottomSheetModal\n      ref={sheet}\n      stackBehavior=\"push\"\n      enablePanDownToClose\n      topInset={insets?.top ?? 0}\n      keyboardBehavior=\"interactive\"\n      keyboardBlurBehavior=\"restore\"\n      android_keyboardInputMode=\"adjustResize\"\n      backdropComponent={renderBackdrop}\n      backgroundStyle={{ backgroundColor: theme.colors.rail, borderRadius: theme.borderRadius.lg }}\n      handleIndicatorStyle={{ backgroundColor: theme.colors.border }}\n      // A sheet the caller closed is already shut; only a close the sheet started is reported.\n      onDismiss={() => {\n        // Already shut, so the close the parent answers with must not dismiss it a second time.\n        presented.current = false;\n        if (openRef.current) onClose();\n      }}\n    >\n      <BottomSheetScrollView\n        keyboardShouldPersistTaps=\"handled\"\n        contentContainerStyle={[styles.content, { paddingBottom: insets?.bottom ?? 0 }]}\n      >\n        <InsideSheetContext.Provider value>{children}</InsideSheetContext.Provider>\n      </BottomSheetScrollView>\n    </BottomSheetModal>\n  );\n}\n\nconst styles = StyleSheet.create({ content: { flexGrow: 1 } });\n"],"mappings":";;;;;;;;;;;AAeA,MAAMe,yBAAyB;;;;;;;AAe/B,SAAgBK,WAAW,EAAEH,MAAMC,SAASC,YAA6B;CACvE,MAAM,EAAEE,UAAUR,aAAa;CAC/B,MAAMS,SAASf,WAAWI,qBAAqB;CAC/C,MAAMY,QAAQd,OAAyB,IAAI;CAC3C,MAAMe,UAAUf,OAAOQ,IAAI;CAC3B,MAAMQ,YAAYhB,OAAO,KAAK;CAE9BD,gBAAgB;EACdgB,QAAQE,UAAUT;EAClB,IAAIA,MAAM;GACRQ,UAAUC,UAAU;GACpBH,MAAMG,SAASC,QAAQ;EACzB,OAAO,IAAIF,UAAUC,SAAS;GAG5BD,UAAUC,UAAU;GACpBH,MAAMG,SAASE,QAAQ;EACzB;CACF,GAAG,CAACX,IAAI,CAAC;CAETT,gBAAgB;EACd,IAAI,CAACS,MAAM,OAAOY;EAClB,MAAMC,eAAepB,YAAYqB,iBAAiB,2BAA2B;GAC3Eb,QAAQ;GACR,OAAO;EACT,CAAC;EACD,aAAaY,aAAaE,OAAO;CACnC,GAAG,CAACf,MAAMC,OAAO,CAAC;CAElB,MAAMe,gBAAgBjC,UAAUqB,MAAMa,OAAOC,MAAMpB,sBAAsB;CACzE,MAAMqB,iBAAiB9B,aACpB+B,UACC,oBAAC,qBAAD;EACE,GAAIA;EACJ,gBAAgB;EAChB,mBAAmB;EACnB,SAAS;EACT,eAAc;EACd,OAAO,CAACA,MAAMC,OAAO,EAAEC,iBAAiBN,cAAc,CAAC;CAAE,IAG7D,CAACA,aAAa,CAChB;CAEA,OACE,oBAAC,kBAAD;EACE,KAAKV;EACL,eAAc;EACd;EACA,UAAUD,QAAQkB,OAAO;EACzB,kBAAiB;EACjB,sBAAqB;EACrB,2BAA0B;EAC1B,mBAAmBJ;EACnB,iBAAiB;GAAEG,iBAAiBlB,MAAMa,OAAOO;GAAMC,cAAcrB,MAAMqB,aAAaC;EAAG;EAC3F,sBAAsB,EAAEJ,iBAAiBlB,MAAMa,OAAOU,OAAO;EAE7D,iBAAiB;GAEfnB,UAAUC,UAAU;GACpB,IAAIF,QAAQE,SAASR,QAAQ;EAC/B;YAEA,oBAAC,uBAAD;GACE,2BAA0B;GAC1B,uBAAuB,CAAC2B,OAAOC,SAAS,EAAEC,eAAezB,QAAQ0B,UAAU,EAAE,CAAC;aAE9E,oBAAC,mBAAmB,UAApB;IAA6B;IAAO7B;GAAsC;EACrD;CACP;AAEtB;AAEA,MAAM0B,SAASjC,WAAWqC,OAAO,EAAEH,SAAS,EAAEI,UAAU,EAAE,EAAE,CAAC"}
+{"version":3,"file":"SheetFrame.mjs","names":["withAlpha","BottomSheetBackdrop","BottomSheetBackdropProps","BottomSheetModal","BottomSheetScrollView","ReactNode","useCallback","useContext","useEffect","useRef","BackHandler","SafeAreaInsetsContext","StyleSheet","useUnistyles","InsideSheetContext","BACKDROP_ALPHA_PERCENT","SheetFrameProps","open","onClose","children","SheetFrame","theme","insets","sheet","openRef","presented","current","present","dismiss","undefined","subscription","addEventListener","remove","backdropColor","colors","deep","renderBackdrop","props","style","backgroundColor","top","rail","borderRadius","lg","border","styles","content","paddingBottom","bottom","create","flexGrow"],"sources":["../../src/components/SheetFrame.tsx"],"sourcesContent":["import { withAlpha } from '@agimon-ai/po-web-components/nativeTheme';\nimport {\n  BottomSheetBackdrop,\n  type BottomSheetBackdropProps,\n  BottomSheetModal,\n  BottomSheetScrollView,\n} from '@gorhom/bottom-sheet';\nimport { type ReactNode, useCallback, useContext, useEffect, useRef } from 'react';\nimport { BackHandler } from 'react-native';\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context';\nimport { StyleSheet, useUnistyles } from 'react-native-unistyles';\n\nimport { InsideSheetContext } from '../lib/insideSheet';\n\n/** `bg-po-deep/70`, the overlay every web sheet and dialog draws. */\nconst BACKDROP_ALPHA_PERCENT = 70;\n\nexport interface SheetFrameProps {\n  open: boolean;\n  /** The sheet asked to close: a drag down, a backdrop tap or Android back. */\n  onClose: () => void;\n  children?: ReactNode;\n}\n\n/**\n * The bottom sheet both Sheet and DropdownMenu sit in: a drag handle, sized\n * to its content, closed by dragging down, tapping the backdrop or Android\n * back, clear of the safe area and lifted by the keyboard. Private: the public\n * parts keep bottom-sheet types out of the package API.\n */\nexport function SheetFrame({ open, onClose, children }: SheetFrameProps) {\n  const { theme } = useUnistyles();\n  const insets = useContext(SafeAreaInsetsContext);\n  const sheet = useRef<BottomSheetModal>(null);\n  const openRef = useRef(open);\n  const presented = useRef(false);\n\n  useEffect(() => {\n    openRef.current = open;\n    if (open) {\n      presented.current = true;\n      sheet.current?.present();\n    } else if (presented.current) {\n      // Only a presented sheet is dismissed. Dismissing one that never opened leaves bottom-sheet's\n      // modal stuck in its dismissing status, and the next present() then never draws.\n      presented.current = false;\n      sheet.current?.dismiss();\n    }\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return undefined;\n    const subscription = BackHandler.addEventListener('hardwareBackPress', () => {\n      onClose();\n      return true;\n    });\n    return () => subscription.remove();\n  }, [open, onClose]);\n\n  const backdropColor = withAlpha(theme.colors.deep, BACKDROP_ALPHA_PERCENT);\n  const renderBackdrop = useCallback(\n    (props: BottomSheetBackdropProps) => (\n      <BottomSheetBackdrop\n        {...props}\n        appearsOnIndex={0}\n        disappearsOnIndex={-1}\n        opacity={1}\n        pressBehavior=\"close\"\n        style={[props.style, { backgroundColor: backdropColor }]}\n      />\n    ),\n    [backdropColor],\n  );\n\n  return (\n    <BottomSheetModal\n      ref={sheet}\n      stackBehavior=\"push\"\n      enablePanDownToClose\n      topInset={insets?.top ?? 0}\n      keyboardBehavior=\"interactive\"\n      keyboardBlurBehavior=\"restore\"\n      android_keyboardInputMode=\"adjustResize\"\n      backdropComponent={renderBackdrop}\n      backgroundStyle={{ backgroundColor: theme.colors.rail, borderRadius: theme.borderRadius.lg }}\n      handleIndicatorStyle={{ backgroundColor: theme.colors.border }}\n      // A sheet the caller closed is already shut; only a close the sheet started is reported.\n      onDismiss={() => {\n        // Already shut, so the close the parent answers with must not dismiss it a second time.\n        presented.current = false;\n        if (openRef.current) onClose();\n      }}\n    >\n      <BottomSheetScrollView\n        keyboardShouldPersistTaps=\"handled\"\n        contentContainerStyle={[styles.content, { paddingBottom: insets?.bottom ?? 0 }]}\n      >\n        <InsideSheetContext.Provider value>{children}</InsideSheetContext.Provider>\n      </BottomSheetScrollView>\n    </BottomSheetModal>\n  );\n}\n\nconst styles = StyleSheet.create({ content: { flexGrow: 1 } });\n"],"mappings":";;;;;;;;;;;AAeA,MAAMe,yBAAyB;;;;;;;AAe/B,SAAgBK,WAAW,EAAEH,MAAMC,SAASC,YAA6B;CACvE,MAAM,EAAEE,UAAUR,aAAa;CAC/B,MAAMS,SAASf,WAAWI,qBAAqB;CAC/C,MAAMY,QAAQd,OAAyB,IAAI;CAC3C,MAAMe,UAAUf,OAAOQ,IAAI;CAC3B,MAAMQ,YAAYhB,OAAO,KAAK;CAE9BD,gBAAgB;EACdgB,QAAQE,UAAUT;EAClB,IAAIA,MAAM;GACRQ,UAAUC,UAAU;GACpBH,MAAMG,SAASC,QAAQ;EACzB,OAAO,IAAIF,UAAUC,SAAS;GAG5BD,UAAUC,UAAU;GACpBH,MAAMG,SAASE,QAAQ;EACzB;CACF,GAAG,CAACX,IAAI,CAAC;CAETT,gBAAgB;EACd,IAAI,CAACS,MAAM,OAAOY;EAClB,MAAMC,eAAepB,YAAYqB,iBAAiB,2BAA2B;GAC3Eb,QAAQ;GACR,OAAO;EACT,CAAC;EACD,aAAaY,aAAaE,OAAO;CACnC,GAAG,CAACf,MAAMC,OAAO,CAAC;CAElB,MAAMe,gBAAgBjC,UAAUqB,MAAMa,OAAOC,MAAMpB,sBAAsB;CACzE,MAAMqB,iBAAiB9B,aACpB+B,UACC,oBAAC,qBAAD;EACE,GAAIA;EACJ,gBAAgB;EAChB,mBAAmB;EACnB,SAAS;EACT,eAAc;EACd,OAAO,CAACA,MAAMC,OAAO,EAAEC,iBAAiBN,cAAc,CAAC;CAAE,IAG7D,CAACA,aAAa,CAChB;CAEA,OACE,oBAAC,kBAAD;EACE,KAAKV;EACL,eAAc;EACd;EACA,UAAUD,QAAQkB,OAAO;EACzB,kBAAiB;EACjB,sBAAqB;EACrB,2BAA0B;EAC1B,mBAAmBJ;EACnB,iBAAiB;GAAEG,iBAAiBlB,MAAMa,OAAOO;GAAMC,cAAcrB,MAAMqB,aAAaC;EAAG;EAC3F,sBAAsB,EAAEJ,iBAAiBlB,MAAMa,OAAOU,OAAO;EAE7D,iBAAiB;GAEfnB,UAAUC,UAAU;GACpB,IAAIF,QAAQE,SAASR,QAAQ;EAC/B;YAEA,oBAAC,uBAAD;GACE,2BAA0B;GAC1B,uBAAuB,CAAC2B,OAAOC,SAAS,EAAEC,eAAezB,QAAQ0B,UAAU,EAAE,CAAC;aAE9E,oBAAC,mBAAmB,UAApB;IAA6B;IAAO7B;GAAsC;EACrD;CACP;AAEtB;AAEA,MAAM0B,SAASjC,WAAWqC,OAAO,EAAEH,SAAS,EAAEI,UAAU,EAAE,EAAE,CAAC"}

package/dist/icons/iconGlyphs.d.mts

@@ -7,112 +7,112 @@
  */
 export declare const ICON_GLYPHS: {
   readonly Check: {
-    readonly sf: 'checkmark';
-    readonly material: 'check';
+    readonly sf: "checkmark";
+    readonly material: "check";
   };
   readonly ChevronDown: {
-    readonly sf: 'chevron.down';
-    readonly material: 'expand-more';
+    readonly sf: "chevron.down";
+    readonly material: "expand-more";
   };
   readonly ChevronRight: {
-    readonly sf: 'chevron.right';
-    readonly material: 'chevron-right';
+    readonly sf: "chevron.right";
+    readonly material: "chevron-right";
   };
   readonly Alert: {
-    readonly sf: 'exclamationmark.circle';
-    readonly material: 'error-outline';
+    readonly sf: "exclamationmark.circle";
+    readonly material: "error-outline";
   };
   readonly Copy: {
-    readonly sf: 'doc.on.doc';
-    readonly material: 'content-copy';
+    readonly sf: "doc.on.doc";
+    readonly material: "content-copy";
   };
   readonly Message: {
-    readonly sf: 'message';
-    readonly material: 'chat-bubble-outline';
+    readonly sf: "message";
+    readonly material: "chat-bubble-outline";
   };
   readonly Kebab: {
-    readonly sf: 'ellipsis';
-    readonly material: 'more-vert';
+    readonly sf: "ellipsis";
+    readonly material: "more-vert";
   };
   readonly Edit: {
-    readonly sf: 'pencil';
-    readonly material: 'edit';
+    readonly sf: "pencil";
+    readonly material: "edit";
   };
   readonly Gear: {
-    readonly sf: 'gearshape';
-    readonly material: 'settings';
+    readonly sf: "gearshape";
+    readonly material: "settings";
   };
   readonly Send: {
-    readonly sf: 'paperplane';
-    readonly material: 'send';
+    readonly sf: "paperplane";
+    readonly material: "send";
   };
   readonly Task: {
-    readonly sf: 'checkmark.square';
-    readonly material: 'check-box';
+    readonly sf: "checkmark.square";
+    readonly material: "check-box";
   };
   readonly Trash: {
-    readonly sf: 'trash';
-    readonly material: 'delete-outline';
+    readonly sf: "trash";
+    readonly material: "delete-outline";
   };
   readonly Wrench: {
-    readonly sf: 'wrench.and.screwdriver';
-    readonly material: 'build';
+    readonly sf: "wrench.and.screwdriver";
+    readonly material: "build";
   };
   readonly Close: {
-    readonly sf: 'xmark';
-    readonly material: 'close';
+    readonly sf: "xmark";
+    readonly material: "close";
   };
   readonly Folder: {
-    readonly sf: 'folder';
-    readonly material: 'folder';
+    readonly sf: "folder";
+    readonly material: "folder";
   };
   readonly Branch: {
-    readonly sf: 'arrow.triangle.branch';
-    readonly material: 'call-split';
+    readonly sf: "arrow.triangle.branch";
+    readonly material: "call-split";
   };
   readonly Home: {
-    readonly sf: 'house';
-    readonly material: 'home';
+    readonly sf: "house";
+    readonly material: "home";
   };
   readonly Activity: {
-    readonly sf: 'waveform.path.ecg';
-    readonly material: 'monitor-heart';
+    readonly sf: "waveform.path.ecg";
+    readonly material: "monitor-heart";
   };
   readonly ArrowRight: {
-    readonly sf: 'arrow.right';
-    readonly material: 'arrow-forward';
+    readonly sf: "arrow.right";
+    readonly material: "arrow-forward";
   };
   readonly Plus: {
-    readonly sf: 'plus';
-    readonly material: 'add';
+    readonly sf: "plus";
+    readonly material: "add";
   };
   readonly Users: {
-    readonly sf: 'person.2';
-    readonly material: 'group';
+    readonly sf: "person.2";
+    readonly material: "group";
   };
   readonly PlayCircle: {
-    readonly sf: 'play.circle';
-    readonly material: 'play-circle-outline';
+    readonly sf: "play.circle";
+    readonly material: "play-circle-outline";
   };
   readonly Workflow: {
-    readonly sf: 'flowchart';
-    readonly material: 'account-tree';
+    readonly sf: "flowchart";
+    readonly material: "account-tree";
   };
   readonly Palette: {
-    readonly sf: 'paintpalette';
-    readonly material: 'palette';
+    readonly sf: "paintpalette";
+    readonly material: "palette";
   };
   readonly Lightbulb: {
-    readonly sf: 'lightbulb';
-    readonly material: 'lightbulb-outline';
+    readonly sf: "lightbulb";
+    readonly material: "lightbulb-outline";
   };
   readonly Sparkles: {
-    readonly sf: 'sparkles';
-    readonly material: 'auto-awesome';
+    readonly sf: "sparkles";
+    readonly material: "auto-awesome";
   };
   readonly Lock: {
-    readonly sf: 'lock';
-    readonly material: 'lock-outline';
+    readonly sf: "lock";
+    readonly material: "lock-outline";
   };
 };
 export type IconName = keyof typeof ICON_GLYPHS;

package/dist/icons/iconGlyphs.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"iconGlyphs.d.mts","names":[],"sources":["../../src/icons/iconGlyphs.ts"],"mappings":";;;;;;;qBAMa;WACX;aAAS;aAAiB;;WAC1B;aAAe;aAAoB;;WACnC;aAAgB;aAAqB;;WACrC;aAAS;aAA8B;;WACvC;aAAQ;aAAkB;;WAC1B;aAAW;aAAe;;WAE1B;aAAS;aAAgB;;WACzB;aAAQ;aAAc;;WACtB;aAAQ;aAAiB;;WACzB;aAAQ;aAAkB;;WAC1B;aAAQ;aAAwB;;WAChC;aAAS;aAAa;;WACtB;aAAU;aAA8B;;WACxC;aAAS;aAAa;;WACtB;aAAU;aAAc;;WACxB;aAAU;aAA6B;;WACvC;aAAQ;aAAa;;WACrB;aAAY;aAAyB;;WACrC;aAAc;aAAmB;;WACjC;aAAQ;aAAY;;WACpB;aAAS;aAAgB;;WACzB;aAAc;aAAmB;;WACjC;aAAY;aAAiB;;WAC7B;aAAW;aAAoB;;WAC/B;aAAa;aAAiB;;WAC9B;aAAY;aAAgB;;WAC5B;aAAQ;aAAY;;;YAGV,wBAAwB"}
+{"version":3,"file":"iconGlyphs.d.mts","names":[],"sources":["../../src/icons/iconGlyphs.ts"],"mappings":";;;;;;;qBAMa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA+BD,wBAAwB"}

package/dist/index.d.mts

@@ -24,4 +24,5 @@ import { IconName } from "./icons/iconGlyphs.mjs";
 import { fontOf } from "./lib/fonts.mjs";
 import { IconColorContext } from "./icons/IconColorContext.mjs";
 import { impactLight, selectionTick } from "./lib/haptics.mjs";
-export { ActivityIcon, AlertIcon, ArrowRightIcon, Badge, type BadgeProps, type BadgeSize, type BadgeTone, BranchIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckIcon, ChevronDownIcon, ChevronRightIcon, CloseIcon, CodeBlock, type CodeBlockProps, CopyIcon, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, type DialogFooterProps, type DialogFooterVariant, DialogHeader, type DialogHeaderProps, type DialogPartProps, type DialogProps, DialogTitle, DialogTrigger, type DialogWidth, Dot, type DotProps, type DotSize, type DotTone, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuPartProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, type EmptyStateProps, type FieldSize, type FieldVariant, type FileLinkHandler, FolderIcon, GearIcon, HomeIcon, IconColorContext, type IconName, type IconProps, Input, type InputProps, KebabIcon, Label, type LabelProps, LightbulbIcon, List, type ListProps, ListRow, type ListRowProps, LockIcon, Markdown, type MarkdownProps, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, type MessageItemGroupProps, MessageItemHeader, type MessageItemHeaderProps, type MessageItemPartProps, type MessageItemProps, type MessageItemState, MessageItemStatus, type MessageItemStatusProps, PaletteIcon, Panel, PanelBody, PanelHeader, type PanelPartProps, PlayCircleIcon, PlusIcon, PoNativeProvider, type PoNativeProviderProps, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SectionLabel, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetPartProps, type SheetProps, SheetTitle, SheetTrigger, SparklesIcon, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusTone, TabBadge, type TabBadgeProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TaskIcon, Textarea, type TextareaProps, TrashIcon, UsersIcon, WorkflowIcon, WrenchIcon, fontOf, impactLight, selectionTick, toolTone, useMessageItem };
+import { AnsiSpan, ReviewComment, ansiSpans, buildReviewPrompt } from "@agimon-ai/po-web-components/text";
+export { ActivityIcon, AlertIcon, type AnsiSpan, ArrowRightIcon, Badge, type BadgeProps, type BadgeSize, type BadgeTone, BranchIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckIcon, ChevronDownIcon, ChevronRightIcon, CloseIcon, CodeBlock, type CodeBlockProps, CopyIcon, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, type DialogFooterProps, type DialogFooterVariant, DialogHeader, type DialogHeaderProps, type DialogPartProps, type DialogProps, DialogTitle, DialogTrigger, type DialogWidth, Dot, type DotProps, type DotSize, type DotTone, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuPartProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, type EmptyStateProps, type FieldSize, type FieldVariant, type FileLinkHandler, FolderIcon, GearIcon, HomeIcon, IconColorContext, type IconName, type IconProps, Input, type InputProps, KebabIcon, Label, type LabelProps, LightbulbIcon, List, type ListProps, ListRow, type ListRowProps, LockIcon, Markdown, type MarkdownProps, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, type MessageItemGroupProps, MessageItemHeader, type MessageItemHeaderProps, type MessageItemPartProps, type MessageItemProps, type MessageItemState, MessageItemStatus, type MessageItemStatusProps, PaletteIcon, Panel, PanelBody, PanelHeader, type PanelPartProps, PlayCircleIcon, PlusIcon, PoNativeProvider, type PoNativeProviderProps, type ReviewComment, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SectionLabel, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, type SheetPartProps, type SheetProps, SheetTitle, SheetTrigger, SparklesIcon, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusTone, TabBadge, type TabBadgeProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TaskIcon, Textarea, type TextareaProps, TrashIcon, UsersIcon, WorkflowIcon, WrenchIcon, ansiSpans, buildReviewPrompt, fontOf, impactLight, selectionTick, toolTone, useMessageItem };

package/dist/index.mjs

@@ -23,5 +23,6 @@ import { SegmentedControl } from "./components/SegmentedControl.mjs";
 import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/Sheet.mjs";
 import { TabBadge, Tabs, TabsContent, TabsList, TabsTrigger } from "./components/Tabs.mjs";
 import { Textarea } from "./components/Textarea.mjs";
+import { ansiSpans, buildReviewPrompt } from "@agimon-ai/po-web-components/text";
 
-export { ActivityIcon, AlertIcon, ArrowRightIcon, Badge, BranchIcon, Button, CheckIcon, ChevronDownIcon, ChevronRightIcon, CloseIcon, CodeBlock, CopyIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Dot, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, FolderIcon, GearIcon, HomeIcon, IconColorContext, Input, KebabIcon, Label, LightbulbIcon, List, ListRow, LockIcon, Markdown, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, MessageItemHeader, MessageItemStatus, PaletteIcon, Panel, PanelBody, PanelHeader, PlayCircleIcon, PlusIcon, PoNativeProvider, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SectionLabel, SegmentedControl, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SparklesIcon, Spinner, StatusBadge, TabBadge, Tabs, TabsContent, TabsList, TabsTrigger, TaskIcon, Textarea, TrashIcon, UsersIcon, WorkflowIcon, WrenchIcon, fontOf, impactLight, selectionTick, toolTone, useMessageItem };
+export { ActivityIcon, AlertIcon, ArrowRightIcon, Badge, BranchIcon, Button, CheckIcon, ChevronDownIcon, ChevronRightIcon, CloseIcon, CodeBlock, CopyIcon, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Dot, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, FolderIcon, GearIcon, HomeIcon, IconColorContext, Input, KebabIcon, Label, LightbulbIcon, List, ListRow, LockIcon, Markdown, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, MessageItemHeader, MessageItemStatus, PaletteIcon, Panel, PanelBody, PanelHeader, PlayCircleIcon, PlusIcon, PoNativeProvider, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SectionLabel, SegmentedControl, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SparklesIcon, Spinner, StatusBadge, TabBadge, Tabs, TabsContent, TabsList, TabsTrigger, TaskIcon, Textarea, TrashIcon, UsersIcon, WorkflowIcon, WrenchIcon, ansiSpans, buildReviewPrompt, fontOf, impactLight, selectionTick, toolTone, useMessageItem };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@agimon-ai/po-native-components",
-  "version": "0.0.0-alpha.0",
-  "description": "Shared React Native components for Po and its native plugins: the web component library's look and API on native parts, tuned to the Doom palette.",
+  "version": "0.0.0-alpha.10",
+  "description": "Shared React Native components for Po and its native plugins: the web component library's look and API on native parts, tuned to the Po palette.",
   "keywords": [
     "ai",
     "coding-agent",
@@ -45,18 +45,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@agimon-ai/po-web-components": "0.0.0-alpha.0"
+    "@agimon-ai/po-web-components": "0.0.0-alpha.10"
   },
   "devDependencies": {
-    "@agimon-ai/po-build": "0.0.0-alpha.0",
-    "@agimon-ai/vibe-lint-plugin-doom-web": "0.0.0-alpha.0",
+    "@agimon-ai/po-build": "0.0.0-alpha.10",
+    "@agimon-ai/vibe-lint-plugin-po-web": "0.0.0-alpha.10",
     "@babel/core": "7.29.7",
     "@expo/vector-icons": "15.1.1",
     "@gorhom/bottom-sheet": "5.2.14",
     "@react-native-segmented-control/segmented-control": "2.5.7",
     "@shopify/flash-list": "2.0.2",
-    "@types/node": "26.6.4",
-    "@types/react": "19.3.0",
+    "@types/node": "26.6.5",
+    "@types/react": "~19.2.4",
     "expo": "57.0.27",
     "expo-clipboard": "~57.0.2",
     "expo-font": "~57.0.4",
@@ -66,14 +66,14 @@
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-native": "0.86.3",
-    "react-native-gesture-handler": "~3.3.0",
+    "react-native-gesture-handler": "~2.32.0",
     "react-native-reanimated": "4.5.1",
     "react-native-safe-area-context": "~5.7.0",
-    "react-native-unistyles": "3.5.2",
+    "react-native-unistyles": "3.5.3",
     "react-native-worklets": "0.10.1",
-    "tsdown": "0.23.0",
-    "typescript": "7.0.2",
-    "vitest": "5.0.3"
+    "tsdown": "0.23.1",
+    "typescript": "~6.0.3",
+    "vitest": "5.0.4"
   },
   "peerDependencies": {
     "@expo/vector-icons": "^15.0.0",