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

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

@@ -0,0 +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"}

package/dist/components/SegmentedControl.mjs

@@ -0,0 +1,56 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { selectionTick } from "../lib/haptics.mjs";
+import { StyleSheet, withUnistyles } from "react-native-unistyles";
+import { jsx } from "react/jsx-runtime";
+import RNSegmentedControl from "@react-native-segmented-control/segmented-control";
+
+//#region src/components/SegmentedControl.tsx
+/** Theme colours reach the third-party control through withUnistyles, so it follows theme changes. */
+const ThemedSegmentedControl = withUnistyles(RNSegmentedControl, (theme) => ({
+	backgroundColor: theme.colors.deep,
+	tintColor: theme.colors["tint-green"],
+	fontStyle: {
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		fontWeight: theme.fontWeight.medium
+	},
+	activeFontStyle: {
+		color: theme.colors.green,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		fontWeight: theme.fontWeight.semibold
+	},
+	appearance: theme.scheme
+}));
+/**
+* A short exclusive choice, such as a task's status: the platform's own
+* segmented control on iOS, the library's drawn fallback elsewhere, with a
+* selection tick on each change. It is the native stand-in for a web Select
+* with a handful of options.
+*/
+function SegmentedControl({ options, value, onValueChange, disabled = false, accessibilityLabel, style }) {
+	return /* @__PURE__ */ jsx(ThemedSegmentedControl, {
+		values: options.map((option) => option.label),
+		selectedIndex: options.findIndex((option) => option.value === value),
+		enabled: !disabled,
+		accessibilityLabel,
+		accessibilityState: { disabled },
+		onChange: (event) => {
+			const next = options[event.nativeEvent.selectedSegmentIndex];
+			if (next === void 0 || next.value === value) return;
+			selectionTick();
+			onValueChange(next.value);
+		},
+		style: [styles.control, style]
+	});
+}
+const styles = StyleSheet.create((theme) => ({ control: {
+	minHeight: 32,
+	borderRadius: theme.borderRadius.md,
+	uni__dependencies: [0]
+} }));
+
+//#endregion
+export { SegmentedControl };
+//# sourceMappingURL=SegmentedControl.mjs.map

package/dist/components/SegmentedControl.mjs.map

@@ -0,0 +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"}

package/dist/components/Sheet.d.mts

@@ -0,0 +1,39 @@
+import { ButtonProps } from "./Button.mjs";
+import { StyleProp, TextProps, ViewProps, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+//#region src/components/Sheet.d.ts
+export interface SheetProps {
+  /** Controlled mode; pair with onOpenChange. Omit it and the sheet keeps its own state. */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+}
+export declare function Sheet({ open, defaultOpen, onOpenChange, children }: SheetProps): import("react").JSX.Element;
+/** A Button that opens the enclosing sheet. */
+export declare function SheetTrigger({ onPress, ...props }: ButtonProps): import("react").JSX.Element;
+/** A Button that closes the enclosing sheet. */
+export declare function SheetClose({ onPress, ...props }: ButtonProps): import("react").JSX.Element;
+export interface SheetContentProps {
+  children?: ReactNode;
+}
+/** The sheet surface. Fields inside it switch to the sheet's own input so the keyboard lifts the sheet. */
+export declare function SheetContent({ children }: SheetContentProps): import("react").JSX.Element;
+export interface SheetPartProps extends Omit<ViewProps, 'children' | 'style'> {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+export interface SheetHeaderProps extends SheetPartProps {
+  /** Show the close control at the right of the strip. On by default: a sheet is dismissed, not answered. */
+  dismissible?: boolean;
+  /** What the close control announces. */
+  closeLabel?: string;
+}
+export declare function SheetHeader({ dismissible, closeLabel, style, children, ...props }: SheetHeaderProps): import("react").JSX.Element;
+export declare function SheetTitle({ style, ...props }: TextProps): import("react").JSX.Element;
+export declare function SheetDescription({ style, ...props }: TextProps): import("react").JSX.Element;
+/** The scrolling middle; the sheet itself scrolls, so this only spaces its children. */
+export declare function SheetBody({ style, children, ...props }: SheetPartProps): import("react").JSX.Element;
+export declare function SheetFooter({ style, children, ...props }: SheetPartProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Sheet.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.d.mts","names":[],"sources":["../../src/components/Sheet.tsx"],"mappings":";;;;iBAwBiB;;EAEf;EACA;EACA,gBAAgB;EAChB,WAAW;;wBAGG,QAAQ,MAAM,aAAqB,cAAc,YAAY,6BAAU,IAAA;;wBAMvE,eAAe,YAAY,SAAS,8BAAW,IAAA;;wBAc/C,aAAa,YAAY,SAAS,8BAAW,IAAA;iBAa5C;EACf,WAAW;;;wBAIG,eAAe,YAAY,oCAAiB,IAAA;iBAS3C,uBAAuB,KAAK;EAC3C,WAAW;EACX,QAAQ,UAAU;;iBAGH,yBAAyB;;EAExC;;EAEA;;wBAGc,cAAc,aAAoB,YAAsB,OAAO,aAAa,SAAS,mCAAgB,IAAA;wBAoBrG,aAAa,UAAU,SAAS,4BAAS,IAAA;wBAIzC,mBAAmB,UAAU,SAAS,4BAAS,IAAA;;wBAK/C,YAAY,OAAO,aAAa,SAAS,iCAAc,IAAA;wBAQvD,cAAc,OAAO,aAAa,SAAS,iCAAc,IAAA"}

package/dist/components/Sheet.mjs

@@ -0,0 +1,166 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { wrapText } from "../lib/wrapText.mjs";
+import { Button } from "./Button.mjs";
+import { CloseIcon } from "../icons/icons.mjs";
+import { useControllable } from "../lib/useControllable.mjs";
+import { SheetFrame } from "./SheetFrame.mjs";
+import { View } from "react-native-unistyles/components/native/View";
+import { StyleSheet } from "react-native-unistyles";
+import { Text } from "react-native-unistyles/components/native/Text";
+import { createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Sheet.tsx
+const SheetContext = createContext({
+	open: false,
+	setOpen: () => void 0
+});
+function Sheet({ open, defaultOpen = false, onOpenChange, children }) {
+	const [current, setOpen] = useControllable(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsx(SheetContext.Provider, {
+		value: {
+			open: current,
+			setOpen
+		},
+		children
+	});
+}
+/** A Button that opens the enclosing sheet. */
+function SheetTrigger({ onPress, ...props }) {
+	const { setOpen } = useContext(SheetContext);
+	return /* @__PURE__ */ jsx(Button, {
+		onPress: (event) => {
+			onPress?.(event);
+			setOpen(true);
+		},
+		...props
+	});
+}
+/** A Button that closes the enclosing sheet. */
+function SheetClose({ onPress, ...props }) {
+	const { setOpen } = useContext(SheetContext);
+	return /* @__PURE__ */ jsx(Button, {
+		onPress: (event) => {
+			onPress?.(event);
+			setOpen(false);
+		},
+		...props
+	});
+}
+/** The sheet surface. Fields inside it switch to the sheet's own input so the keyboard lifts the sheet. */
+function SheetContent({ children }) {
+	const { open, setOpen } = useContext(SheetContext);
+	return /* @__PURE__ */ jsx(SheetFrame, {
+		open,
+		onClose: () => setOpen(false),
+		children
+	});
+}
+function SheetHeader({ dismissible = true, closeLabel = "close", style, children, ...props }) {
+	const { setOpen } = useContext(SheetContext);
+	return /* @__PURE__ */ jsxs(View, {
+		style: [styles.header, style],
+		...props,
+		children: [children, dismissible ? /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			accessibilityLabel: closeLabel,
+			onPress: () => setOpen(false),
+			style: styles.close,
+			children: /* @__PURE__ */ jsx(CloseIcon, {
+				size: 12,
+				color: "faint"
+			})
+		}) : null]
+	});
+}
+function SheetTitle({ style, ...props }) {
+	return /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "header",
+		numberOfLines: 1,
+		style: [styles.title, style],
+		...props
+	});
+}
+function SheetDescription({ style, ...props }) {
+	return /* @__PURE__ */ jsx(Text, {
+		style: [styles.description, style],
+		...props
+	});
+}
+/** The scrolling middle; the sheet itself scrolls, so this only spaces its children. */
+function SheetBody({ style, children, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles.body, style],
+		...props,
+		children: wrapText(children, styles.description)
+	});
+}
+function SheetFooter({ style, children, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles.footer, style],
+		...props,
+		children: wrapText(children, styles.hint)
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	header: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2.5),
+		minWidth: 0,
+		height: theme.spacing(11),
+		borderBottomWidth: 1,
+		borderBottomColor: theme.colors.border,
+		paddingHorizontal: theme.spacing(4),
+		uni__dependencies: [0]
+	},
+	close: { marginLeft: "auto" },
+	title: {
+		flexShrink: 1,
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.lg,
+		lineHeight: theme.lineHeight.lg,
+		fontWeight: theme.fontWeight.semibold,
+		uni__dependencies: [0]
+	},
+	description: {
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeightRelaxed.sm,
+		uni__dependencies: [0]
+	},
+	body: {
+		gap: theme.spacing(3),
+		paddingHorizontal: theme.spacing(4),
+		paddingVertical: theme.spacing(3),
+		uni__dependencies: [0]
+	},
+	footer: {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: theme.spacing(2),
+		minHeight: 34,
+		borderTopWidth: 1,
+		borderTopColor: theme.colors["border-soft"],
+		backgroundColor: theme.colors.deep,
+		paddingHorizontal: theme.spacing(4),
+		paddingVertical: theme.spacing(1.5),
+		uni__dependencies: [0]
+	},
+	hint: {
+		color: theme.colors.faint,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize["2xs"],
+		lineHeight: theme.lineHeight["2xs"],
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
+//# sourceMappingURL=Sheet.mjs.map

package/dist/components/Sheet.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.mjs","names":["createContext","ReactNode","useContext","StyleProp","TextProps","ViewProps","ViewStyle","StyleSheet","CloseIcon","fontOf","useControllable","wrapText","Button","ButtonProps","SheetFrame","SheetState","open","setOpen","SheetContext","undefined","SheetProps","defaultOpen","onOpenChange","children","Sheet","current","SheetTrigger","onPress","props","event","SheetClose","SheetContentProps","SheetContent","SheetPartProps","Omit","style","SheetHeaderProps","dismissible","closeLabel","SheetHeader","styles","header","close","SheetTitle","title","SheetDescription","description","SheetBody","body","SheetFooter","footer","hint","create","theme","flexDirection","alignItems","gap","spacing","minWidth","height","borderBottomWidth","borderBottomColor","colors","border","paddingHorizontal","uni__dependencies","marginLeft","flexShrink","color","hi","fontFamily","sans","fontSize","lg","lineHeight","fontWeight","semibold","dim","sm","lineHeightRelaxed","paddingVertical","flexWrap","justifyContent","minHeight","borderTopWidth","borderTopColor","backgroundColor","deep","faint"],"sources":["../../src/components/Sheet.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from 'react';\nimport { type StyleProp, Text, type TextProps, View, type ViewProps, type ViewStyle } from 'react-native';\nimport { StyleSheet } 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';\nimport { SheetFrame } from './SheetFrame';\n\n/*\n * The web Sheet as a bottom sheet: the native shape for a detail view or a\n * short form over what the reader was looking at. `side` and `width` are\n * dropped; a phone sheet rises from the bottom edge and takes the width.\n */\n\ninterface SheetState {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nconst SheetContext = createContext<SheetState>({ open: false, setOpen: () => undefined });\n\nexport interface SheetProps {\n  /** Controlled mode; pair with onOpenChange. Omit it and the sheet keeps its own state. */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function Sheet({ open, defaultOpen = false, onOpenChange, children }: SheetProps) {\n  const [current, setOpen] = useControllable(open, defaultOpen, onOpenChange);\n  return <SheetContext.Provider value={{ open: current, setOpen }}>{children}</SheetContext.Provider>;\n}\n\n/** A Button that opens the enclosing sheet. */\nexport function SheetTrigger({ onPress, ...props }: ButtonProps) {\n  const { setOpen } = useContext(SheetContext);\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 sheet. */\nexport function SheetClose({ onPress, ...props }: ButtonProps) {\n  const { setOpen } = useContext(SheetContext);\n  return (\n    <Button\n      onPress={(event) => {\n        onPress?.(event);\n        setOpen(false);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface SheetContentProps {\n  children?: ReactNode;\n}\n\n/** The sheet surface. Fields inside it switch to the sheet's own input so the keyboard lifts the sheet. */\nexport function SheetContent({ children }: SheetContentProps) {\n  const { open, setOpen } = useContext(SheetContext);\n  return (\n    <SheetFrame open={open} onClose={() => setOpen(false)}>\n      {children}\n    </SheetFrame>\n  );\n}\n\nexport interface SheetPartProps extends Omit<ViewProps, 'children' | 'style'> {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\nexport interface SheetHeaderProps extends SheetPartProps {\n  /** Show the close control at the right of the strip. On by default: a sheet is dismissed, not answered. */\n  dismissible?: boolean;\n  /** What the close control announces. */\n  closeLabel?: string;\n}\n\nexport function SheetHeader({ dismissible = true, closeLabel = 'close', style, children, ...props }: SheetHeaderProps) {\n  const { setOpen } = useContext(SheetContext);\n  return (\n    <View style={[styles.header, style]} {...props}>\n      {children}\n      {dismissible ? (\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          accessibilityLabel={closeLabel}\n          onPress={() => setOpen(false)}\n          style={styles.close}\n        >\n          <CloseIcon size={12} color=\"faint\" />\n        </Button>\n      ) : null}\n    </View>\n  );\n}\n\nexport function SheetTitle({ style, ...props }: TextProps) {\n  return <Text accessibilityRole=\"header\" numberOfLines={1} style={[styles.title, style]} {...props} />;\n}\n\nexport function SheetDescription({ style, ...props }: TextProps) {\n  return <Text style={[styles.description, style]} {...props} />;\n}\n\n/** The scrolling middle; the sheet itself scrolls, so this only spaces its children. */\nexport function SheetBody({ style, children, ...props }: SheetPartProps) {\n  return (\n    <View style={[styles.body, style]} {...props}>\n      {wrapText(children, styles.description)}\n    </View>\n  );\n}\n\nexport function SheetFooter({ style, children, ...props }: SheetPartProps) {\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  header: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.spacing(2.5),\n    minWidth: 0,\n    height: theme.spacing(11),\n    borderBottomWidth: 1,\n    borderBottomColor: theme.colors.border,\n    paddingHorizontal: theme.spacing(4),\n  },\n  close: { marginLeft: 'auto' },\n  title: {\n    flexShrink: 1,\n    color: theme.colors.hi,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.lg,\n    lineHeight: theme.lineHeight.lg,\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: {\n    gap: theme.spacing(3),\n    paddingHorizontal: theme.spacing(4),\n    paddingVertical: theme.spacing(3),\n  },\n  footer: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: theme.spacing(2),\n    minHeight: 34,\n    borderTopWidth: 1,\n    borderTopColor: theme.colors['border-soft'],\n    backgroundColor: theme.colors.deep,\n    paddingHorizontal: theme.spacing(4),\n    paddingVertical: theme.spacing(1.5),\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/SheetFrame.mjs

@@ -0,0 +1,84 @@
+import { InsideSheetContext } from "../lib/insideSheet.mjs";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { BackHandler } from "react-native";
+import { useCallback, useContext, useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { BottomSheetBackdrop, BottomSheetModal, BottomSheetScrollView } from "@gorhom/bottom-sheet";
+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. */
+const BACKDROP_ALPHA_PERCENT = 70;
+/**
+* The bottom sheet both Sheet and DropdownMenu sit in: a drag handle, sized
+* to its content, closed by dragging down, tapping the backdrop or Android
+* back, clear of the safe area and lifted by the keyboard. Private: the public
+* parts keep bottom-sheet types out of the package API.
+*/
+function SheetFrame({ open, onClose, children }) {
+	const { theme } = useUnistyles();
+	const insets = useContext(SafeAreaInsetsContext);
+	const sheet = useRef(null);
+	const openRef = useRef(open);
+	const presented = useRef(false);
+	useEffect(() => {
+		openRef.current = open;
+		if (open) {
+			presented.current = true;
+			sheet.current?.present();
+		} else if (presented.current) {
+			presented.current = false;
+			sheet.current?.dismiss();
+		}
+	}, [open]);
+	useEffect(() => {
+		if (!open) return void 0;
+		const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+			onClose();
+			return true;
+		});
+		return () => subscription.remove();
+	}, [open, onClose]);
+	const backdropColor = withAlpha(theme.colors.deep, BACKDROP_ALPHA_PERCENT);
+	const renderBackdrop = useCallback((props) => /* @__PURE__ */ jsx(BottomSheetBackdrop, {
+		...props,
+		appearsOnIndex: 0,
+		disappearsOnIndex: -1,
+		opacity: 1,
+		pressBehavior: "close",
+		style: [props.style, { backgroundColor: backdropColor }]
+	}), [backdropColor]);
+	return /* @__PURE__ */ jsx(BottomSheetModal, {
+		ref: sheet,
+		stackBehavior: "push",
+		enablePanDownToClose: true,
+		topInset: insets?.top ?? 0,
+		keyboardBehavior: "interactive",
+		keyboardBlurBehavior: "restore",
+		android_keyboardInputMode: "adjustResize",
+		backdropComponent: renderBackdrop,
+		backgroundStyle: {
+			backgroundColor: theme.colors.rail,
+			borderRadius: theme.borderRadius.lg
+		},
+		handleIndicatorStyle: { backgroundColor: theme.colors.border },
+		onDismiss: () => {
+			presented.current = false;
+			if (openRef.current) onClose();
+		},
+		children: /* @__PURE__ */ jsx(BottomSheetScrollView, {
+			keyboardShouldPersistTaps: "handled",
+			contentContainerStyle: [styles.content, { paddingBottom: insets?.bottom ?? 0 }],
+			children: /* @__PURE__ */ jsx(InsideSheetContext.Provider, {
+				value: true,
+				children
+			})
+		})
+	});
+}
+const styles = StyleSheet.create({ content: { flexGrow: 1 } });
+
+//#endregion
+export { SheetFrame };
+//# sourceMappingURL=SheetFrame.mjs.map

package/dist/components/SheetFrame.mjs.map

@@ -0,0 +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"}

package/dist/components/Spinner.d.mts

@@ -0,0 +1,19 @@
+import { NativeColorToken } from "@agimon-ai/po-web-components/nativeTheme";
+import { StyleProp, ViewStyle } from "react-native";
+//#region src/components/Spinner.d.ts
+export interface SpinnerProps {
+  /**
+   * What the wait is for. Given one, the spinner is a progress indicator in a
+   * live region, so a screen reader says "Loading providers" instead of
+   * nothing. Without one it is hidden from screen readers.
+   */
+  label?: string;
+  /** A theme token, never system blue. Defaults to `dim`. */
+  color?: NativeColorToken;
+  size?: 'small' | 'large';
+  style?: StyleProp<ViewStyle>;
+}
+/** The platform's own activity indicator in a theme colour; decorative unless it is given a label. */
+export declare function Spinner({ label, color, size, style }: SpinnerProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Spinner.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.mts","names":[],"sources":["../../src/components/Spinner.tsx"],"mappings":";;;iBAIiB;;;;;;EAMf;;EAEA,QAAQ;EACR;EACA,QAAQ,UAAU;;;wBAIJ,UAAU,OAAO,OAAe,MAAgB,SAAS,+BAAY,IAAA"}

package/dist/components/Spinner.mjs

@@ -0,0 +1,34 @@
+import { View } from "react-native-unistyles/components/native/View";
+import { useUnistyles } from "react-native-unistyles";
+import { jsx } from "react/jsx-runtime";
+import { ActivityIndicator } from "react-native-unistyles/components/native/ActivityIndicator";
+
+//#region src/components/Spinner.tsx
+/** The platform's own activity indicator in a theme colour; decorative unless it is given a label. */
+function Spinner({ label, color = "dim", size = "small", style }) {
+	const { theme } = useUnistyles();
+	const indicator = /* @__PURE__ */ jsx(ActivityIndicator, {
+		color: theme.colors[color],
+		size
+	});
+	if (label === void 0) return /* @__PURE__ */ jsx(View, {
+		style,
+		accessible: false,
+		importantForAccessibility: "no-hide-descendants",
+		accessibilityElementsHidden: true,
+		children: indicator
+	});
+	return /* @__PURE__ */ jsx(View, {
+		style,
+		accessible: true,
+		accessibilityRole: "progressbar",
+		accessibilityLabel: label,
+		accessibilityLiveRegion: "polite",
+		accessibilityState: { busy: true },
+		children: indicator
+	});
+}
+
+//#endregion
+export { Spinner };
+//# sourceMappingURL=Spinner.mjs.map

package/dist/components/Spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.mjs","names":["NativeColorToken","StyleProp","ViewStyle","useUnistyles","SpinnerProps","label","color","size","style","Spinner","theme","indicator","colors","undefined","busy"],"sources":["../../src/components/Spinner.tsx"],"sourcesContent":["import type { NativeColorToken } from '@agimon-ai/po-web-components/nativeTheme';\nimport { ActivityIndicator, type StyleProp, View, type ViewStyle } from 'react-native';\nimport { useUnistyles } from 'react-native-unistyles';\n\nexport interface SpinnerProps {\n  /**\n   * What the wait is for. Given one, the spinner is a progress indicator in a\n   * live region, so a screen reader says \"Loading providers\" instead of\n   * nothing. Without one it is hidden from screen readers.\n   */\n  label?: string;\n  /** A theme token, never system blue. Defaults to `dim`. */\n  color?: NativeColorToken;\n  size?: 'small' | 'large';\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The platform's own activity indicator in a theme colour; decorative unless it is given a label. */\nexport function Spinner({ label, color = 'dim', size = 'small', style }: SpinnerProps) {\n  const { theme } = useUnistyles();\n  const indicator = <ActivityIndicator color={theme.colors[color]} size={size} />;\n  if (label === undefined) {\n    return (\n      <View\n        style={style}\n        accessible={false}\n        importantForAccessibility=\"no-hide-descendants\"\n        accessibilityElementsHidden\n      >\n        {indicator}\n      </View>\n    );\n  }\n  return (\n    <View\n      style={style}\n      accessible\n      accessibilityRole=\"progressbar\"\n      accessibilityLabel={label}\n      accessibilityLiveRegion=\"polite\"\n      accessibilityState={{ busy: true }}\n    >\n      {indicator}\n    </View>\n  );\n}\n"],"mappings":";;;;;;;AAkBA,SAAgBS,QAAQ,EAAEJ,OAAOC,QAAQ,OAAOC,OAAO,SAASC,SAAuB;CACrF,MAAM,EAAEE,UAAUP,aAAa;CAC/B,MAAMQ,YAAY,oBAAC,mBAAD;EAAmB,OAAOD,MAAME,OAAON;EAAcC;CAAK;CAC5E,IAAIF,UAAUQ,QACZ,OACE,oBAAC,MAAD;EACSL;EACP,YAAY;EACZ,2BAA0B;EAC1B;YAECG;CACG;CAGV,OACE,oBAAC,MAAD;EACSH;EACP;EACA,mBAAkB;EAClB,oBAAoBH;EACpB,yBAAwB;EACxB,oBAAoB,EAAES,MAAM,KAAK;YAEhCH;CACG;AAEV"}

package/dist/components/StatusBadge.d.mts

@@ -0,0 +1,23 @@
+import { NativeColorToken, StatusTone } from "@agimon-ai/po-web-components/nativeTheme";
+import { StyleProp, ViewProps, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+//#region src/components/StatusBadge.d.ts
+type StatusTone$1 = StatusTone;
+export type StatusBadgeSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * The border token a card wears for a status, the same tint family as the
+ * badge. MessageItem builds its frame from this table, so a card and its badge
+ * can never disagree about a tone's edge.
+ */
+export declare const STATUS_EDGE: Readonly<Record<StatusTone$1, NativeColorToken>>;
+export interface StatusBadgeProps extends Omit<ViewProps, 'children' | 'style'> {
+  tone?: StatusTone$1;
+  size?: StatusBadgeSize;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+/** The tinted outcome pill: running, ok, error and their kin. */
+export declare function StatusBadge({ tone, size, children, style, ...props }: StatusBadgeProps): import("react").JSX.Element;
+//#endregion
+export { StatusTone$1 as StatusTone };
+//# sourceMappingURL=StatusBadge.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.d.mts","names":["StatusTone","Tone"],"sources":["../../src/components/StatusBadge.tsx"],"mappings":";;;;KASYA,eAAaC;YACb;;;;;;qBAOC,aAAa,SAAS,OAAOD,cAAY;iBASrC,yBAAyB,KAAK;EAC7C,OAAOA;EACP,OAAO;EACP,WAAW;EACX,QAAQ,UAAU;;;wBAIJ,cAAc,MAAkB,MAAa,UAAU,UAAU,SAAS,mCAAgB,IAAA"}

package/dist/components/StatusBadge.mjs

@@ -0,0 +1,116 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { STATUS_COLORS } from "../lib/tone.mjs";
+import { wrapText } from "../lib/wrapText.mjs";
+import { View } from "react-native-unistyles/components/native/View";
+import { StyleSheet } from "react-native-unistyles";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/StatusBadge.tsx
+/**
+* The border token a card wears for a status, the same tint family as the
+* badge. MessageItem builds its frame from this table, so a card and its badge
+* can never disagree about a tone's edge.
+*/
+const STATUS_EDGE = {
+	neutral: "border",
+	running: "edge-yellow",
+	ok: "edge-green",
+	error: "edge-red",
+	info: "edge-blue",
+	accent: "edge-magenta"
+};
+/** The tinted outcome pill: running, ok, error and their kin. */
+function StatusBadge({ tone = "neutral", size = "sm", children, style, ...props }) {
+	const _styles = styles;
+	{
+		const styles = _styles.useVariants({
+			tone,
+			size
+		});
+		return /* @__PURE__ */ jsx(View, {
+			style: [styles.badge, style],
+			...props,
+			children: wrapText(children, styles.label)
+		});
+	}
+}
+const styles = StyleSheet.create((theme) => {
+	const fill = (tone) => ({ backgroundColor: theme.colors[STATUS_COLORS[tone].fill] });
+	const ink = (tone) => ({ color: theme.colors[STATUS_COLORS[tone].ink] });
+	return {
+		badge: {
+			flexDirection: "row",
+			alignItems: "center",
+			alignSelf: "flex-start",
+			flexShrink: 0,
+			gap: theme.spacing(1.5),
+			borderRadius: theme.borderRadius.sm,
+			variants: {
+				tone: {
+					neutral: fill("neutral"),
+					running: fill("running"),
+					ok: fill("ok"),
+					error: fill("error"),
+					info: fill("info"),
+					accent: fill("accent")
+				},
+				size: {
+					xs: {
+						paddingHorizontal: theme.spacing(1.5),
+						paddingVertical: 1
+					},
+					sm: {
+						paddingHorizontal: 7,
+						paddingVertical: 3
+					},
+					md: {
+						height: 21,
+						paddingHorizontal: theme.spacing(2)
+					},
+					lg: {
+						height: theme.spacing(6),
+						paddingHorizontal: theme.spacing(2.5)
+					}
+				}
+			},
+			uni__dependencies: [0, 4]
+		},
+		label: {
+			fontFamily: fontOf(theme.fontFamily.sans),
+			fontWeight: theme.fontWeight.semibold,
+			variants: {
+				tone: {
+					neutral: ink("neutral"),
+					running: ink("running"),
+					ok: ink("ok"),
+					error: ink("error"),
+					info: ink("info"),
+					accent: ink("accent")
+				},
+				size: {
+					xs: {
+						fontSize: theme.fontSize.sm,
+						lineHeight: theme.lineHeight.sm
+					},
+					sm: {
+						fontSize: theme.fontSize.sm,
+						lineHeight: theme.lineHeight.sm
+					},
+					md: {
+						fontSize: theme.fontSize.sm,
+						lineHeight: theme.lineHeight.sm
+					},
+					lg: {
+						fontSize: theme.fontSize.base,
+						lineHeight: theme.lineHeight.base
+					}
+				}
+			},
+			uni__dependencies: [0, 4]
+		}
+	};
+});
+
+//#endregion
+export { STATUS_EDGE, StatusBadge };
+//# sourceMappingURL=StatusBadge.mjs.map

package/dist/components/StatusBadge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.mjs","names":["NativeColorToken","StatusTone","Tone","ReactNode","StyleProp","ViewProps","ViewStyle","StyleSheet","fontOf","STATUS_COLORS","wrapText","StatusBadgeSize","STATUS_EDGE","Readonly","Record","neutral","running","ok","error","info","accent","StatusBadgeProps","Omit","tone","size","children","style","StatusBadge","props","_styles","styles","useVariants","badge","label","create","theme","fill","backgroundColor","colors","ink","color","flexDirection","alignItems","alignSelf","flexShrink","gap","spacing","borderRadius","sm","variants","xs","paddingHorizontal","paddingVertical","md","height","lg","uni__dependencies","fontFamily","sans","fontWeight","semibold","fontSize","lineHeight","base"],"sources":["../../src/components/StatusBadge.tsx"],"sourcesContent":["import type { NativeColorToken, StatusTone as Tone } 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 } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { STATUS_COLORS } from '../lib/tone';\nimport { wrapText } from '../lib/wrapText';\n\nexport type StatusTone = Tone;\nexport type StatusBadgeSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * The border token a card wears for a status, the same tint family as the\n * badge. MessageItem builds its frame from this table, so a card and its badge\n * can never disagree about a tone's edge.\n */\nexport const STATUS_EDGE: Readonly<Record<StatusTone, NativeColorToken>> = {\n  neutral: 'border',\n  running: 'edge-yellow',\n  ok: 'edge-green',\n  error: 'edge-red',\n  info: 'edge-blue',\n  accent: 'edge-magenta',\n};\n\nexport interface StatusBadgeProps extends Omit<ViewProps, 'children' | 'style'> {\n  tone?: StatusTone;\n  size?: StatusBadgeSize;\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The tinted outcome pill: running, ok, error and their kin. */\nexport function StatusBadge({ tone = 'neutral', size = 'sm', children, style, ...props }: StatusBadgeProps) {\n  styles.useVariants({ tone, size });\n  return (\n    <View style={[styles.badge, style]} {...props}>\n      {wrapText(children, styles.label)}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => {\n  const fill = (tone: StatusTone) => ({ backgroundColor: theme.colors[STATUS_COLORS[tone].fill] });\n  const ink = (tone: StatusTone) => ({ color: theme.colors[STATUS_COLORS[tone].ink] });\n  return {\n    badge: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      flexShrink: 0,\n      gap: theme.spacing(1.5),\n      borderRadius: theme.borderRadius.sm,\n      variants: {\n        tone: {\n          neutral: fill('neutral'),\n          running: fill('running'),\n          ok: fill('ok'),\n          error: fill('error'),\n          info: fill('info'),\n          accent: fill('accent'),\n        },\n        size: {\n          xs: { paddingHorizontal: theme.spacing(1.5), paddingVertical: 1 },\n          sm: { paddingHorizontal: 7, paddingVertical: 3 },\n          md: { height: 21, paddingHorizontal: theme.spacing(2) },\n          lg: { height: theme.spacing(6), paddingHorizontal: theme.spacing(2.5) },\n        },\n      },\n    },\n    label: {\n      fontFamily: fontOf(theme.fontFamily.sans),\n      fontWeight: theme.fontWeight.semibold,\n      variants: {\n        tone: {\n          neutral: ink('neutral'),\n          running: ink('running'),\n          ok: ink('ok'),\n          error: ink('error'),\n          info: ink('info'),\n          accent: ink('accent'),\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.sm, lineHeight: theme.lineHeight.sm },\n          lg: { fontSize: theme.fontSize.base, lineHeight: theme.lineHeight.base },\n        },\n      },\n    },\n  };\n});\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAaY,cAA8D;CACzEG,SAAS;CACTC,SAAS;CACTC,IAAI;CACJC,OAAO;CACPC,MAAM;CACNC,QAAQ;AACV;;AAUA,SAAgBO,YAAY,EAAEJ,OAAO,WAAWC,OAAO,MAAMC,UAAUC,OAAO,GAAGE,SAA2B;CAAA,MAAAC,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACvF;GAAER;GAAMC;EAAK,CAAC;EACjC,OACE,oBAAC,MAAD;GAAM,OAAO,CAACM,OAAOE,OAAON,KAAK;GAAG,GAAIE;aACrClB,SAASe,UAAUK,OAAOG,KAAK;EAC5B;CACN;AACJ;AAEA,MAAMH,SAASvB,WAAW2B,QAAQC,UAAU;CAC1C,MAAMC,QAAQb,UAAsB,EAAEc,iBAAiBF,MAAMG,OAAO7B,cAAcc,KAAK,CAACa,MAAM;CAC9F,MAAMG,OAAOhB,UAAsB,EAAEiB,OAAOL,MAAMG,OAAO7B,cAAcc,KAAK,CAACgB,KAAK;CAClF,OAAO;EACLP,OAAO;GACLS,eAAe;GACfC,YAAY;GACZC,WAAW;GACXC,YAAY;GACZC,KAAKV,MAAMW,QAAQ,GAAG;GACtBC,cAAcZ,MAAMY,aAAaC;GACjCC,UAAU;IACR1B,MAAM;KACJR,SAASqB,KAAK,SAAS;KACvBpB,SAASoB,KAAK,SAAS;KACvBnB,IAAImB,KAAK,IAAI;KACblB,OAAOkB,KAAK,OAAO;KACnBjB,MAAMiB,KAAK,MAAM;KACjBhB,QAAQgB,KAAK,QAAQ;IACvB;IACAZ,MAAM;KACJ0B,IAAI;MAAEC,mBAAmBhB,MAAMW,QAAQ,GAAG;MAAGM,iBAAiB;KAAE;KAChEJ,IAAI;MAAEG,mBAAmB;MAAGC,iBAAiB;KAAE;KAC/CC,IAAI;MAAEC,QAAQ;MAAIH,mBAAmBhB,MAAMW,QAAQ,CAAC;KAAE;KACtDS,IAAI;MAAED,QAAQnB,MAAMW,QAAQ,CAAC;MAAGK,mBAAmBhB,MAAMW,QAAQ,GAAG;KAAE;IACxE;GACF;GAACU,mBAAA,CAAA,GAAA,CAAA;EACH;EACAvB,OAAO;GACLwB,YAAYjD,OAAO2B,MAAMsB,WAAWC,IAAI;GACxCC,YAAYxB,MAAMwB,WAAWC;GAC7BX,UAAU;IACR1B,MAAM;KACJR,SAASwB,IAAI,SAAS;KACtBvB,SAASuB,IAAI,SAAS;KACtBtB,IAAIsB,IAAI,IAAI;KACZrB,OAAOqB,IAAI,OAAO;KAClBpB,MAAMoB,IAAI,MAAM;KAChBnB,QAAQmB,IAAI,QAAQ;IACtB;IACAf,MAAM;KACJ0B,IAAI;MAAEW,UAAU1B,MAAM0B,SAASb;MAAIc,YAAY3B,MAAM2B,WAAWd;KAAG;KACnEA,IAAI;MAAEa,UAAU1B,MAAM0B,SAASb;MAAIc,YAAY3B,MAAM2B,WAAWd;KAAG;KACnEK,IAAI;MAAEQ,UAAU1B,MAAM0B,SAASb;MAAIc,YAAY3B,MAAM2B,WAAWd;KAAG;KACnEO,IAAI;MAAEM,UAAU1B,MAAM0B,SAASE;MAAMD,YAAY3B,MAAM2B,WAAWC;KAAK;IACzE;GACF;GAACP,mBAAA,CAAA,GAAA,CAAA;EACH;CACF;AACF,CAAC"}