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

package/dist/components/CodeBlock.mjs

@@ -0,0 +1,88 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { Button } from "./Button.mjs";
+import { CheckIcon, CopyIcon } from "../icons/icons.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 { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScrollView } from "react-native-unistyles/components/native/ScrollView";
+import { setStringAsync } from "expo-clipboard";
+
+//#region src/components/CodeBlock.tsx
+/** How long the control stays acknowledged before returning to its icon. */
+const FEEDBACK_MS = 1500;
+const LABELS = {
+	idle: "copy",
+	copied: "copied",
+	failed: "copying failed"
+};
+function CodeBlock({ text, language }) {
+	const [state, setState] = useState("idle");
+	useEffect(() => {
+		if (state === "idle") return void 0;
+		const timer = setTimeout(() => setState("idle"), FEEDBACK_MS);
+		return () => clearTimeout(timer);
+	}, [state]);
+	const label = LABELS[state];
+	return /* @__PURE__ */ jsxs(View, {
+		style: styles.block,
+		accessibilityLabel: language === void 0 ? void 0 : `${language} code`,
+		children: [/* @__PURE__ */ jsx(ScrollView, {
+			horizontal: true,
+			showsHorizontalScrollIndicator: false,
+			contentContainerStyle: styles.scroll,
+			children: /* @__PURE__ */ jsx(Text, {
+				selectable: true,
+				style: styles.code,
+				children: text
+			})
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			accessibilityLabel: label,
+			onPress: () => {
+				setStringAsync(text).then((saved) => setState(saved ? "copied" : "failed"), () => setState("failed"));
+			},
+			style: styles.copy,
+			children: state === "copied" ? /* @__PURE__ */ jsx(CheckIcon, {
+				size: 12,
+				color: "green"
+			}) : /* @__PURE__ */ jsx(CopyIcon, {
+				size: 12,
+				color: "faint"
+			})
+		})]
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	block: {
+		borderRadius: theme.borderRadius.DEFAULT,
+		borderWidth: 1,
+		borderColor: theme.colors.border,
+		backgroundColor: theme.colors.deep,
+		uni__dependencies: [0]
+	},
+	scroll: {
+		padding: theme.spacing(2.5),
+		paddingRight: theme.spacing(9),
+		uni__dependencies: [0]
+	},
+	code: {
+		color: theme.colors.text,
+		fontFamily: fontOf(theme.fontFamily.mono),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeightRelaxed.sm,
+		uni__dependencies: [0]
+	},
+	copy: {
+		position: "absolute",
+		top: theme.spacing(1.5),
+		right: theme.spacing(1.5),
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { CodeBlock };
+//# sourceMappingURL=CodeBlock.mjs.map

package/dist/components/CodeBlock.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.mjs","names":["setStringAsync","useEffect","useState","StyleSheet","CheckIcon","CopyIcon","fontOf","Button","FEEDBACK_MS","CopyState","LABELS","Readonly","Record","idle","copied","failed","CodeBlockProps","text","language","CodeBlock","state","setState","undefined","timer","setTimeout","clearTimeout","label","styles","block","scroll","code","then","saved","copy","create","theme","borderRadius","DEFAULT","borderWidth","borderColor","colors","border","backgroundColor","deep","uni__dependencies","padding","spacing","paddingRight","color","fontFamily","mono","fontSize","sm","lineHeight","lineHeightRelaxed","position","top","right"],"sources":["../../src/components/CodeBlock.tsx"],"sourcesContent":["import { setStringAsync } from 'expo-clipboard';\nimport { useEffect, useState } from 'react';\nimport { ScrollView, Text, View } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { CheckIcon, CopyIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\nimport { Button } from './Button';\n\n/*\n * A fenced code block: the source in selectable mono type that scrolls\n * sideways rather than wrapping, and a copy button that says when it worked.\n *\n * ponytail: no syntax colouring and no mermaid diagrams yet; a mermaid fence\n * shows its source, which is still the whole content.\n */\n\n/** How long the control stays acknowledged before returning to its icon. */\nconst FEEDBACK_MS = 1500;\n\ntype CopyState = 'idle' | 'copied' | 'failed';\n\nconst LABELS: Readonly<Record<CopyState, string>> = {\n  idle: 'copy',\n  copied: 'copied',\n  failed: 'copying failed',\n};\n\nexport interface CodeBlockProps {\n  /** The block's source, without the fence lines. */\n  text: string;\n  /** The fence's language word, such as `ts`; the web reads it from a `language-*` class. */\n  language?: string;\n}\n\nexport function CodeBlock({ text, language }: CodeBlockProps) {\n  const [state, setState] = useState<CopyState>('idle');\n\n  useEffect(() => {\n    if (state === 'idle') return undefined;\n    const timer = setTimeout(() => setState('idle'), FEEDBACK_MS);\n    return () => clearTimeout(timer);\n  }, [state]);\n\n  const label = LABELS[state];\n  return (\n    <View style={styles.block} accessibilityLabel={language === undefined ? undefined : `${language} code`}>\n      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scroll}>\n        <Text selectable style={styles.code}>\n          {text}\n        </Text>\n      </ScrollView>\n      <Button\n        variant=\"ghost\"\n        size=\"icon\"\n        accessibilityLabel={label}\n        onPress={() => {\n          setStringAsync(text).then(\n            (saved) => setState(saved ? 'copied' : 'failed'),\n            () => setState('failed'),\n          );\n        }}\n        style={styles.copy}\n      >\n        {state === 'copied' ? <CheckIcon size={12} color=\"green\" /> : <CopyIcon size={12} color=\"faint\" />}\n      </Button>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  block: {\n    borderRadius: theme.borderRadius.DEFAULT,\n    borderWidth: 1,\n    borderColor: theme.colors.border,\n    backgroundColor: theme.colors.deep,\n  },\n  // The right padding keeps the first line clear of the copy button.\n  scroll: { padding: theme.spacing(2.5), paddingRight: theme.spacing(9) },\n  code: {\n    color: theme.colors.text,\n    fontFamily: fontOf(theme.fontFamily.mono),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeightRelaxed.sm,\n  },\n  copy: { position: 'absolute', top: theme.spacing(1.5), right: theme.spacing(1.5) },\n}));\n"],"mappings":";;;;;;;;;;;;;AAkBA,MAAMQ,cAAc;AAIpB,MAAME,SAA8C;CAClDG,MAAM;CACNC,QAAQ;CACRC,QAAQ;AACV;AASA,SAAgBI,UAAU,EAAEF,MAAMC,YAA4B;CAC5D,MAAM,CAACE,OAAOC,YAAYnB,SAAoB,MAAM;CAEpDD,gBAAgB;EACd,IAAImB,UAAU,QAAQ,OAAOE;EAC7B,MAAMC,QAAQC,iBAAiBH,SAAS,MAAM,GAAGb,WAAW;EAC5D,aAAaiB,aAAaF,KAAK;CACjC,GAAG,CAACH,KAAK,CAAC;CAEV,MAAMM,QAAQhB,OAAOU;CACrB,OACE,qBAAC,MAAD;EAAM,OAAOO,OAAOC;EAAO,oBAAoBV,aAAaI,SAAYA,SAAY,GAAGJ,SAAQ;YAA/F,CACE,oBAAC,YAAD;GAAY;GAAW,gCAAgC;GAAO,uBAAuBS,OAAOE;aAC1F,oBAAC,MAAD;IAAM;IAAW,OAAOF,OAAOG;cAC5Bb;GACG;EACI,IACZ,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,oBAAoBS;GACpB,eAAe;IACb1B,eAAeiB,IAAI,CAAC,CAACc,MAClBC,UAAUX,SAASW,QAAQ,WAAW,QAAQ,SACzCX,SAAS,QAAQ,CACzB;GACF;GACA,OAAOM,OAAOM;aAEbb,UAAU,WAAW,oBAAC,WAAD;IAAW,MAAM;IAAI,OAAM;GAAO,KAAM,oBAAC,UAAD;IAAU,MAAM;IAAI,OAAM;GAAO;EACzF,EACJ;;AAEV;AAEA,MAAMO,SAASxB,WAAW+B,QAAQC,WAAW;CAC3CP,OAAO;EACLQ,cAAcD,MAAMC,aAAaC;EACjCC,aAAa;EACbC,aAAaJ,MAAMK,OAAOC;EAC1BC,iBAAiBP,MAAMK,OAAOG;EAAIC,mBAAA,CAAA,CAAA;CACpC;CAEAf,QAAQ;EAAEgB,SAASV,MAAMW,QAAQ,GAAG;EAAGC,cAAcZ,MAAMW,QAAQ,CAAC;EAACF,mBAAA,CAAA,CAAA;CAAC;CACtEd,MAAM;EACJkB,OAAOb,MAAMK,OAAOvB;EACpBgC,YAAY3C,OAAO6B,MAAMc,WAAWC,IAAI;EACxCC,UAAUhB,MAAMgB,SAASC;EACzBC,YAAYlB,MAAMmB,kBAAkBF;EAAER,mBAAA,CAAA,CAAA;CACxC;CACAX,MAAM;EAAEsB,UAAU;EAAYC,KAAKrB,MAAMW,QAAQ,GAAG;EAAGW,OAAOtB,MAAMW,QAAQ,GAAG;EAACF,mBAAA,CAAA,CAAA;CAAC;AACnF,EAAE"}

package/dist/components/Dialog.d.mts

@@ -0,0 +1,52 @@
+import { ButtonProps } from "./Button.mjs";
+import { StyleProp, TextProps, ViewProps, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+//#region src/components/Dialog.d.ts
+export type DialogWidth = 'sm' | 'md' | 'lg';
+export interface DialogProps {
+  /** Controlled mode; pair with onOpenChange. Omit it and the dialog keeps its own state. */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+}
+export declare function Dialog({ open, defaultOpen, onOpenChange, children }: DialogProps): import("react").JSX.Element;
+/** A Button that opens the enclosing dialog. */
+export declare function DialogTrigger({ onPress, ...props }: ButtonProps): import("react").JSX.Element;
+/** A Button that closes the enclosing dialog. */
+export declare function DialogClose({ onPress, ...props }: ButtonProps): import("react").JSX.Element;
+export interface DialogContentProps {
+  /** Width preset; `style` may still override. */
+  width?: DialogWidth;
+  /** Applied to the card, after the preset. */
+  style?: StyleProp<ViewStyle>;
+  /** What the backdrop announces as its close action. */
+  closeLabel?: string;
+  children?: ReactNode;
+}
+export declare function DialogContent({ width, style, closeLabel, children }: DialogContentProps): import("react").JSX.Element;
+export interface DialogPartProps extends Omit<ViewProps, 'children' | 'style'> {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+export interface DialogHeaderProps extends DialogPartProps {
+  /**
+   * Show the close control at the right of the strip. Off by default, as on
+   * the web: Android back and a backdrop tap already close every dialog.
+   */
+  dismissible?: boolean;
+  /** What the close control announces. */
+  closeLabel?: string;
+}
+export declare function DialogHeader({ dismissible, closeLabel, style, children, ...props }: DialogHeaderProps): import("react").JSX.Element;
+export declare function DialogTitle({ style, ...props }: TextProps): import("react").JSX.Element;
+export declare function DialogDescription({ style, ...props }: TextProps): import("react").JSX.Element;
+export declare function DialogBody({ style, children, ...props }: DialogPartProps): import("react").JSX.Element;
+export type DialogFooterVariant = 'plain' | 'bar';
+export interface DialogFooterProps extends DialogPartProps {
+  /** `plain`: buttons alone, inside the body's padding. `bar`: the recessed full-width strip with a hint at the left. */
+  variant?: DialogFooterVariant;
+}
+export declare function DialogFooter({ variant, style, children, ...props }: DialogFooterProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Dialog.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.mts","names":[],"sources":["../../src/components/Dialog.tsx"],"mappings":";;;;YAoCY;iBASK;;EAEf;EACA;EACA,gBAAgB;EAChB,WAAW;;wBAGG,SAAS,MAAM,aAAqB,cAAc,YAAY,8BAAW,IAAA;;wBAMzE,gBAAgB,YAAY,SAAS,8BAAW,IAAA;;wBAchD,cAAc,YAAY,SAAS,8BAAW,IAAA;iBAa7C;;EAEf,QAAQ;;EAER,QAAQ,UAAU;;EAElB;EACA,WAAW;;wBAGG,gBAAgB,OAAc,OAAO,YAAsB,YAAY,qCAAkB,IAAA;iBA6CxF,wBAAwB,KAAK;EAC5C,WAAW;EACX,QAAQ,UAAU;;iBAGH,0BAA0B;;;;;EAKzC;;EAEA;;wBAGc,eACd,aACA,YACA,OACA,aACG,SACF,oCAAiB,IAAA;wBAcJ,cAAc,UAAU,SAAS,4BAAS,IAAA;wBAI1C,oBAAoB,UAAU,SAAS,4BAAS,IAAA;wBAIhD,aAAa,OAAO,aAAa,SAAS,kCAAe,IAAA;YAQ7D;iBAEK,0BAA0B;;EAEzC,UAAU;;wBAGI,eAAe,SAAmB,OAAO,aAAa,SAAS,oCAAiB,IAAA"}

package/dist/components/Dialog.mjs

@@ -0,0 +1,257 @@
+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 { View } from "react-native-unistyles/components/native/View";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { Easing, Modal, Platform } from "react-native";
+import { Text } from "react-native-unistyles/components/native/Text";
+import { createContext, useContext, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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`. */
+const BACKDROP_ALPHA_PERCENT = 70;
+/** `animate-doom-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;
+const DialogContext = createContext({
+	open: false,
+	setOpen: () => void 0
+});
+function Dialog({ open, defaultOpen = false, onOpenChange, children }) {
+	const [current, setOpen] = useControllable(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: {
+			open: current,
+			setOpen
+		},
+		children
+	});
+}
+/** A Button that opens the enclosing dialog. */
+function DialogTrigger({ onPress, ...props }) {
+	const { setOpen } = useContext(DialogContext);
+	return /* @__PURE__ */ jsx(Button, {
+		onPress: (event) => {
+			onPress?.(event);
+			setOpen(true);
+		},
+		...props
+	});
+}
+/** A Button that closes the enclosing dialog. */
+function DialogClose({ onPress, ...props }) {
+	const { setOpen } = useContext(DialogContext);
+	return /* @__PURE__ */ jsx(Button, {
+		onPress: (event) => {
+			onPress?.(event);
+			setOpen(false);
+		},
+		...props
+	});
+}
+function DialogContent({ width = "md", style, closeLabel = "close", children }) {
+	const { open, setOpen } = useContext(DialogContext);
+	const { theme } = useUnistyles();
+	const progress = useRef(new Animated.Value(0)).current;
+	const [x1, y1, x2, y2] = theme.motion.easing;
+	useEffect(() => {
+		if (!open) return;
+		progress.setValue(0);
+		Animated.timing(progress, {
+			toValue: 1,
+			duration: theme.motion.pop,
+			easing: Easing.bezier(x1, y1, x2, y2),
+			useNativeDriver: Platform.OS !== "web"
+		}).start();
+	}, [
+		open,
+		progress,
+		theme.motion.pop,
+		x1,
+		y1,
+		x2,
+		y2
+	]);
+	const _styles = styles;
+	{
+		const styles = _styles.useVariants({ width });
+		return /* @__PURE__ */ jsx(Modal, {
+			visible: open,
+			transparent: true,
+			animationType: "fade",
+			statusBarTranslucent: true,
+			onRequestClose: () => setOpen(false),
+			children: /* @__PURE__ */ jsxs(View, {
+				style: styles.root,
+				children: [/* @__PURE__ */ jsx(Pressable, {
+					accessibilityRole: "button",
+					accessibilityLabel: closeLabel,
+					onPress: () => setOpen(false),
+					style: [styles.backdrop, { backgroundColor: withAlpha(theme.colors.deep, BACKDROP_ALPHA_PERCENT) }]
+				}), /* @__PURE__ */ jsx(Animated.View, {
+					accessibilityViewIsModal: true,
+					style: [
+						styles.card,
+						style,
+						{
+							opacity: progress,
+							transform: [{ scale: progress.interpolate({
+								inputRange: [0, 1],
+								outputRange: [POP_FROM_SCALE, 1]
+							}) }]
+						}
+					],
+					children
+				})]
+			})
+		});
+	}
+}
+function DialogHeader({ dismissible = false, closeLabel = "close", style, children, ...props }) {
+	const { setOpen } = useContext(DialogContext);
+	return /* @__PURE__ */ jsxs(View, {
+		style: [styles.header, style],
+		...props,
+		children: [children, dismissible ? /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			accessibilityLabel: closeLabel,
+			onPress: () => setOpen(false),
+			children: /* @__PURE__ */ jsx(CloseIcon, {
+				size: 12,
+				color: "faint"
+			})
+		}) : null]
+	});
+}
+function DialogTitle({ style, ...props }) {
+	return /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "header",
+		style: [styles.title, style],
+		...props
+	});
+}
+function DialogDescription({ style, ...props }) {
+	return /* @__PURE__ */ jsx(Text, {
+		style: [styles.description, style],
+		...props
+	});
+}
+function DialogBody({ style, children, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles.body, style],
+		...props,
+		children: wrapText(children, styles.description)
+	});
+}
+function DialogFooter({ variant = "plain", style, children, ...props }) {
+	const _styles2 = styles;
+	{
+		const styles = _styles2.useVariants({ footer: variant });
+		return /* @__PURE__ */ jsx(View, {
+			style: [styles.footer, style],
+			...props,
+			children: wrapText(children, styles.hint)
+		});
+	}
+}
+const styles = StyleSheet.create((theme) => ({
+	root: {
+		flex: 1,
+		alignItems: "center",
+		justifyContent: "center",
+		padding: SCREEN_MARGIN
+	},
+	backdrop: {
+		position: "absolute",
+		top: 0,
+		right: 0,
+		bottom: 0,
+		left: 0
+	},
+	card: {
+		width: "100%",
+		maxHeight: "100%",
+		overflow: "hidden",
+		borderRadius: theme.borderRadius.lg,
+		borderWidth: 1,
+		borderColor: theme.colors.border,
+		backgroundColor: theme.colors.panel,
+		variants: { width: {
+			sm: { maxWidth: 360 },
+			md: { maxWidth: 480 },
+			lg: { maxWidth: 620 }
+		} },
+		uni__dependencies: [0, 4]
+	},
+	header: {
+		flexDirection: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		gap: theme.spacing(3),
+		minWidth: 0,
+		borderBottomWidth: 1,
+		borderBottomColor: theme.colors.border,
+		padding: theme.spacing(3),
+		uni__dependencies: [0]
+	},
+	title: {
+		flexShrink: 1,
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.xl,
+		lineHeight: theme.lineHeight.xl,
+		letterSpacing: theme.letterSpacing.xl,
+		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),
+		padding: theme.spacing(3),
+		uni__dependencies: [0]
+	},
+	footer: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2),
+		variants: { footer: {
+			plain: { justifyContent: "flex-end" },
+			bar: {
+				flexWrap: "wrap",
+				justifyContent: "space-between",
+				minHeight: 34,
+				borderTopWidth: 1,
+				borderTopColor: theme.colors["border-soft"],
+				backgroundColor: theme.colors.deep,
+				paddingHorizontal: theme.spacing(3),
+				paddingVertical: theme.spacing(1.5)
+			}
+		} },
+		uni__dependencies: [0, 4]
+	},
+	hint: {
+		color: theme.colors.faint,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize["2xs"],
+		lineHeight: theme.lineHeight["2xs"],
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };
+//# sourceMappingURL=Dialog.mjs.map

package/dist/components/Dialog.mjs.map

@@ -0,0 +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":";;;;;;;;;;;;;;;;;AA8BA,MAAMqB,yBAAyB;;AAE/B,MAAMC,iBAAiB;;AAEvB,MAAMC,gBAAgB;AAStB,MAAMK,gBAAgB3B,cAA2B;CAAEyB,MAAM;CAAOC,eAAeE;AAAU,CAAC;AAU1F,SAAgBK,OAAO,EAAER,MAAMK,cAAc,OAAOC,cAAcC,YAAyB;CACzF,MAAM,CAACE,SAASR,WAAWV,gBAAgBS,MAAMK,aAAaC,YAAY;CAC1E,OAAO,oBAAC,cAAc,UAAf;EAAwB,OAAO;GAAEN,MAAMS;GAASR;EAAQ;EAAIM;CAAiC;AACtG;;AAGA,SAAgBG,cAAc,EAAEC,SAAS,GAAGC,SAAsB;CAChE,MAAM,EAAEX,YAAYxB,WAAWyB,aAAa;CAC5C,OACE,oBAAC,QAAD;EACE,UAAUW,UAAU;GAClBF,UAAUE,KAAK;GACfZ,QAAQ,IAAI;EACd;EACA,GAAIW;CAAM;AAGhB;;AAGA,SAAgBE,YAAY,EAAEH,SAAS,GAAGC,SAAsB;CAC9D,MAAM,EAAEX,YAAYxB,WAAWyB,aAAa;CAC5C,OACE,oBAAC,QAAD;EACE,UAAUW,UAAU;GAClBF,UAAUE,KAAK;GACfZ,QAAQ,KAAK;EACf;EACA,GAAIW;CAAM;AAGhB;AAYA,SAAgBO,cAAc,EAAEH,QAAQ,MAAMC,OAAOC,aAAa,SAASX,YAAgC;CACzG,MAAM,EAAEP,MAAMC,YAAYxB,WAAWyB,aAAa;CAClD,MAAM,EAAEkB,UAAUhC,aAAa;CAC/B,MAAMiC,WAAW1C,OAAO,IAAI2C,SAASC,MAAM,CAAC,CAAC,CAAC,CAACd;CAC/C,MAAM,CAACe,IAAIC,IAAIC,IAAIC,MAAMP,MAAMQ,OAAOC;CACtCnD,gBAAgB;EACd,IAAI,CAACsB,MAAM;EACXqB,SAASS,SAAS,CAAC;EACnBR,SAASS,OAAOV,UAAU;GACxBW,SAAS;GACTC,UAAUb,MAAMQ,OAAOM;GACvBL,QAAQjD,OAAOuD,OAAOX,IAAIC,IAAIC,IAAIC,EAAE;GACpCS,iBAAiBtD,SAASuD,OAAO;EACnC,CAAC,CAAC,CAACC,MAAM;CACX,GAAG;EAACtC;EAAMqB;EAAUD,MAAMQ,OAAOM;EAAKV;EAAIC;EAAIC;EAAIC;CAAE,CAAC;CAAE,MAAAY,UAAAC;CAAA;EAAA,MAAAA,SAAAD,QAAAE,YACpC,EAAEzB,MAAM,CAAC;EAC5B,OACE,oBAAC,OAAD;GAAO,SAAShB;GAAM;GAAY,eAAc;GAAO;GAAqB,sBAAsBC,QAAQ,KAAK;aAC7G,qBAAC,MAAD;IAAM,OAAOuC,OAAOE;cAApB,CACE,oBAAC,WAAD;KACE,mBAAkB;KAClB,oBAAoBxB;KACpB,eAAejB,QAAQ,KAAK;KAG5B,OAAO,CAACuC,OAAOG,UAAU,EAAEC,iBAAiBtE,UAAU8C,MAAMyB,OAAOC,MAAMnD,sBAAsB,EAAE,CAAC;IAAE,IAEtG,oBAAC,SAAS,MAAV;KACE;KACA,OAAO;MACL6C,OAAOO;MACP9B;MACA;OACE+B,SAAS3B;OACT4B,WAAW,CAAC,EAAEC,OAAO7B,SAAS8B,YAAY;QAAEC,YAAY,CAAC,GAAG,CAAC;QAAGC,aAAa,CAACzD,gBAAgB,CAAC;OAAE,CAAC,EAAE,CAAC;MACvG;KAAC;KAGFW;IACY,EACX;;EACD;CACP;AACJ;AAiBA,SAAgBmD,aAAa,EAC3BD,cAAc,OACdvC,aAAa,SACbD,OACAV,UACA,GAAGK,SACiB;CACpB,MAAM,EAAEX,YAAYxB,WAAWyB,aAAa;CAC5C,OACE,qBAAC,MAAD;EAAM,OAAO,CAACsC,OAAOmB,QAAQ1C,KAAK;EAAG,GAAIL;YAAzC,CACGL,UACAkD,cACC,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,MAAK;GAAO,oBAAoBvC;GAAY,eAAejB,QAAQ,KAAK;aAC9F,oBAAC,WAAD;IAAW,MAAM;IAAI,OAAM;GAAO;EAC5B,KACN,IACA;;AAEV;AAEA,SAAgB2D,YAAY,EAAE3C,OAAO,GAAGL,SAAoB;CAC1D,OAAO,oBAAC,MAAD;EAAM,mBAAkB;EAAS,OAAO,CAAC4B,OAAOqB,OAAO5C,KAAK;EAAG,GAAIL;CAAM;AAClF;AAEA,SAAgBkD,kBAAkB,EAAE7C,OAAO,GAAGL,SAAoB;CAChE,OAAO,oBAAC,MAAD;EAAM,OAAO,CAAC4B,OAAOuB,aAAa9C,KAAK;EAAG,GAAIL;CAAM;AAC7D;AAEA,SAAgBoD,WAAW,EAAE/C,OAAOV,UAAU,GAAGK,SAA0B;CACzE,OACE,oBAAC,MAAD;EAAM,OAAO,CAAC4B,OAAOyB,MAAMhD,KAAK;EAAG,GAAIL;YACpCpB,SAASe,UAAUiC,OAAOuB,WAAW;CAClC;AAEV;AASA,SAAgBM,aAAa,EAAED,UAAU,SAASnD,OAAOV,UAAU,GAAGK,SAA4B;CAAA,MAAA0D,WAAA9B;CAAA;EAAA,MAAAA,SAAA8B,SAAA7B,YAC7E,EAAE8B,QAAQH,QAAQ,CAAC;EACtC,OACE,oBAAC,MAAD;GAAM,OAAO,CAAC5B,OAAO+B,QAAQtD,KAAK;GAAG,GAAIL;aACtCpB,SAASe,UAAUiC,OAAOgC,IAAI;EAC3B;CACN;AACJ;AAEA,MAAMhC,SAASrD,WAAWsF,QAAQrD,WAAW;CAC3CsB,MAAM;EAAEgC,MAAM;EAAGC,YAAY;EAAUC,gBAAgB;EAAUC,SAAShF;CAAc;CACxF8C,UAAU;EAAEmC,UAAU;EAAYC,KAAK;EAAGC,OAAO;EAAGC,QAAQ;EAAGC,MAAM;CAAE;CACvEnC,MAAM;EACJ/B,OAAO;EACPmE,WAAW;EACXC,UAAU;EACVC,cAAcjE,MAAMiE,aAAaC;EACjCC,aAAa;EACbC,aAAapE,MAAMyB,OAAO4C;EAC1B7C,iBAAiBxB,MAAMyB,OAAO6C;EAC9BC,UAAU,EACR3E,OAAO;GACL4E,IAAI,EAAEC,UAAU,IAAI;GACpBC,IAAI,EAAED,UAAU,IAAI;GACpBP,IAAI,EAAEO,UAAU,IAAI;EACtB,EACF;EAACE,mBAAA,CAAA,GAAA,CAAA;CACH;CACApC,QAAQ;EACNqC,eAAe;EACfrB,YAAY;EACZC,gBAAgB;EAChBqB,KAAK7E,MAAM8E,QAAQ,CAAC;EACpBC,UAAU;EACVC,mBAAmB;EACnBC,mBAAmBjF,MAAMyB,OAAO4C;EAChCZ,SAASzD,MAAM8E,QAAQ,CAAC;EAACH,mBAAA,CAAA,CAAA;CAC3B;CACAlC,OAAO;EACLyC,YAAY;EACZC,OAAOnF,MAAMyB,OAAO2D;EACpBC,YAAYnH,OAAO8B,MAAMqF,WAAWC,IAAI;EACxCC,UAAUvF,MAAMuF,SAASC;EACzBC,YAAYzF,MAAMyF,WAAWD;EAC7BE,eAAe1F,MAAM0F,cAAcF;EACnCG,YAAY3F,MAAM2F,WAAWC;EAAQjB,mBAAA,CAAA,CAAA;CACvC;CACAhC,aAAa;EACXwC,OAAOnF,MAAMyB,OAAOoE;EACpBR,YAAYnH,OAAO8B,MAAMqF,WAAWC,IAAI;EACxCC,UAAUvF,MAAMuF,SAASf;EACzBiB,YAAYzF,MAAM8F,kBAAkBtB;EAAEG,mBAAA,CAAA,CAAA;CACxC;CACA9B,MAAM;EAAEgC,KAAK7E,MAAM8E,QAAQ,CAAC;EAAGrB,SAASzD,MAAM8E,QAAQ,CAAC;EAACH,mBAAA,CAAA,CAAA;CAAC;CACzDxB,QAAQ;EACNyB,eAAe;EACfrB,YAAY;EACZsB,KAAK7E,MAAM8E,QAAQ,CAAC;EACpBP,UAAU,EACRpB,QAAQ;GACN4C,OAAO,EAAEvC,gBAAgB,WAAW;GACpCwC,KAAK;IACHC,UAAU;IACVzC,gBAAgB;IAChB0C,WAAW;IACXC,gBAAgB;IAChBC,gBAAgBpG,MAAMyB,OAAO;IAC7BD,iBAAiBxB,MAAMyB,OAAOC;IAC9B2E,mBAAmBrG,MAAM8E,QAAQ,CAAC;IAClCwB,iBAAiBtG,MAAM8E,QAAQ,GAAG;GACpC;EACF,EACF;EAACH,mBAAA,CAAA,GAAA,CAAA;CACH;CACAvB,MAAM;EACJ+B,OAAOnF,MAAMyB,OAAO8E;EACpBlB,YAAYnH,OAAO8B,MAAMqF,WAAWC,IAAI;EACxCC,UAAUvF,MAAMuF,SAAS;EACzBE,YAAYzF,MAAMyF,WAAW;EAAMd,mBAAA,CAAA,CAAA;CACrC;AACF,EAAE"}

package/dist/components/Dot.d.mts

@@ -0,0 +1,17 @@
+import { DotTone } from "@agimon-ai/po-web-components/nativeTheme";
+import { StyleProp, ViewStyle } from "react-native";
+//#region src/components/Dot.d.ts
+type DotTone$1 = DotTone;
+export type DotSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface DotProps {
+  tone?: DotTone$1;
+  size?: DotSize;
+  /** Something is live: the dot breathes. */
+  pulse?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+/** The status dot: a colour and, while something is live, a pulse. Hidden from screen readers. */
+export declare function Dot({ tone, size, pulse, style }: DotProps): import("react").JSX.Element;
+//#endregion
+export { DotTone$1 as DotTone };
+//# sourceMappingURL=Dot.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dot.d.mts","names":["DotTone","Tone"],"sources":["../../src/components/Dot.tsx"],"mappings":";;;KAKYA,YAAUC;YACV;iBAQK;EACf,OAAOD;EACP,OAAO;;EAEP;EACA,QAAQ,UAAU;;;wBAIJ,MAAM,MAAkB,MAAa,OAAe,SAAS,2BAAQ,IAAA"}

package/dist/components/Dot.mjs

@@ -0,0 +1,94 @@
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+import { useEffect, useRef } from "react";
+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. */
+const MUTED_ALPHA_PERCENT = 40;
+/** Tailwind's `animate-pulse`: a 2s cycle down to half opacity and back. */
+const PULSE_HALF_CYCLE_MS = 1e3;
+const PULSE_LOW_OPACITY = .5;
+/** The status dot: a colour and, while something is live, a pulse. Hidden from screen readers. */
+function Dot({ tone = "neutral", size = "sm", pulse = false, style }) {
+	const { theme } = useUnistyles();
+	const _styles = styles;
+	{
+		const styles = _styles.useVariants({
+			tone,
+			size
+		});
+		const opacity = useRef(new Animated.Value(1)).current;
+		useEffect(() => {
+			if (!pulse) {
+				opacity.setValue(1);
+				return;
+			}
+			const loop = Animated.loop(Animated.sequence([Animated.timing(opacity, {
+				toValue: PULSE_LOW_OPACITY,
+				duration: PULSE_HALF_CYCLE_MS,
+				useNativeDriver: true
+			}), Animated.timing(opacity, {
+				toValue: 1,
+				duration: PULSE_HALF_CYCLE_MS,
+				useNativeDriver: true
+			})]));
+			loop.start();
+			return () => loop.stop();
+		}, [pulse, opacity]);
+		return /* @__PURE__ */ jsx(Animated.View, {
+			accessible: false,
+			importantForAccessibility: "no-hide-descendants",
+			accessibilityElementsHidden: true,
+			style: [
+				styles.dot,
+				tone === "muted" && { backgroundColor: withAlpha(theme.colors.faint, MUTED_ALPHA_PERCENT) },
+				{ opacity },
+				style
+			]
+		});
+	}
+}
+const styles = StyleSheet.create((theme) => ({ dot: {
+	flexShrink: 0,
+	borderRadius: theme.borderRadius.full,
+	variants: {
+		tone: {
+			neutral: { backgroundColor: theme.colors.faint },
+			muted: {},
+			blue: { backgroundColor: theme.colors.blue },
+			green: { backgroundColor: theme.colors.green },
+			yellow: { backgroundColor: theme.colors.yellow },
+			red: { backgroundColor: theme.colors.red },
+			magenta: { backgroundColor: theme.colors.magenta },
+			violet: { backgroundColor: theme.colors.violet },
+			cyan: { backgroundColor: theme.colors.cyan },
+			orange: { backgroundColor: theme.colors.orange },
+			teal: { backgroundColor: theme.colors.teal }
+		},
+		size: {
+			xs: {
+				width: theme.spacing(1),
+				height: theme.spacing(1)
+			},
+			sm: {
+				width: theme.spacing(1.5),
+				height: theme.spacing(1.5)
+			},
+			md: {
+				width: theme.spacing(2),
+				height: theme.spacing(2)
+			},
+			lg: {
+				width: theme.spacing(2.5),
+				height: theme.spacing(2.5)
+			}
+		}
+	},
+	uni__dependencies: [0, 4]
+} }));
+
+//#endregion
+export { Dot };
+//# sourceMappingURL=Dot.mjs.map

package/dist/components/Dot.mjs.map

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

package/dist/components/DropdownMenu.d.mts

@@ -0,0 +1,63 @@
+import { ButtonProps } from "./Button.mjs";
+import { StyleProp, TextProps, ViewProps, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+//#region src/components/DropdownMenu.d.ts
+export interface DropdownMenuProps {
+  /** Controlled mode; pair with onOpenChange. Omit it and the menu keeps its own state. */
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+}
+export declare function DropdownMenu({ open, defaultOpen, onOpenChange, children }: DropdownMenuProps): import("react").JSX.Element;
+/** A Button that opens the menu; announces that it opens a menu. */
+export declare function DropdownMenuTrigger({ onPress, accessibilityState, ...props }: ButtonProps): import("react").JSX.Element;
+export interface DropdownMenuContentProps {
+  children?: ReactNode;
+}
+/** The action list, in a bottom sheet. */
+export declare function DropdownMenuContent({ children }: DropdownMenuContentProps): import("react").JSX.Element;
+export interface DropdownMenuPartProps extends Omit<ViewProps, 'children' | 'style'> {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+/** A run of items under one label, so the separator between groups is structural. */
+export declare function DropdownMenuGroup({ children, ...props }: DropdownMenuPartProps): import("react").JSX.Element;
+export type DropdownMenuItemVariant = 'default' | 'destructive';
+export interface DropdownMenuItemProps {
+  variant?: DropdownMenuItemVariant;
+  /** Keep the indicator gutter, so the label lines up with checkbox and radio rows. */
+  indented?: boolean;
+  disabled?: boolean;
+  /** Chosen: the menu ticks, runs this, then closes. */
+  onSelect?: () => void;
+  /** The label, optionally followed by a DropdownMenuShortcut. */
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+export declare function DropdownMenuItem(props: DropdownMenuItemProps): import("react").JSX.Element;
+export interface DropdownMenuCheckboxItemProps extends Omit<DropdownMenuItemProps, 'indented'> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+/** A row that toggles: the check lives in the gutter so the label never shifts. */
+export declare function DropdownMenuCheckboxItem({ checked, onCheckedChange, onSelect, ...props }: DropdownMenuCheckboxItemProps): import("react").JSX.Element;
+export interface DropdownMenuRadioGroupProps extends DropdownMenuPartProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+/** The exclusive-choice group; pair it with DropdownMenuRadioItem. */
+export declare function DropdownMenuRadioGroup({ value, onValueChange, children, ...props }: DropdownMenuRadioGroupProps): import("react").JSX.Element;
+export interface DropdownMenuRadioItemProps extends Omit<DropdownMenuItemProps, 'indented'> {
+  value: string;
+}
+export declare function DropdownMenuRadioItem({ value, onSelect, ...props }: DropdownMenuRadioItemProps): import("react").JSX.Element;
+/** The heading over a run of items, raised to sentence case as the web's `first-letter:uppercase`. */
+export declare function DropdownMenuLabel({ style, children, ...props }: TextProps): import("react").JSX.Element;
+/** The keystroke printed at the right of a row; the row supplies the gap. */
+export declare function DropdownMenuShortcut({ style, ...props }: TextProps): import("react").JSX.Element;
+export declare function DropdownMenuSeparator({ style }: {
+  style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=DropdownMenu.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.mts","names":[],"sources":["../../src/components/DropdownMenu.tsx"],"mappings":";;;;iBAyCiB;;EAEf;EACA;EACA,gBAAgB;EAChB,WAAW;;wBAGG,eAAe,MAAM,aAAqB,cAAc,YAAY,oCAAiB,IAAA;;wBAMrF,sBAAsB,SAAS,uBAAuB,SAAS,8BAAW,IAAA;iBAczE;EACf,WAAW;;;wBAIG,sBAAsB,YAAY,2CAAwB,IAAA;iBAWzD,8BAA8B,KAAK;EAClD,WAAW;EACX,QAAQ,UAAU;;;wBAIJ,oBAAoB,aAAa,SAAS,wCAAqB,IAAA;YAInE;iBAEK;EACf,UAAU;;EAEV;EACA;;EAEA;;EAEA,WAAW;EACX,QAAQ,UAAU;;wBA8CJ,iBAAiB,OAAO,wCAAqB,IAAA;iBAI5C,sCAAsC,KAAK;EAC1D;EACA,mBAAmB;;;wBAIL,2BACd,SACA,iBACA,aACG,SACF,gDAA6B,IAAA;iBAef,oCAAoC;EACnD;EACA,iBAAiB;;;wBAIH,yBAAyB,OAAO,eAAe,aAAa,SAAS,8CAA2B,IAAA;iBAU/F,mCAAmC,KAAK;EACvD;;wBAGc,wBAAwB,OAAO,aAAa,SAAS,6CAA0B,IAAA;;wBAkB/E,oBAAoB,OAAO,aAAa,SAAS,4BAAS,IAAA;;wBAU1D,uBAAuB,UAAU,SAAS,4BAAS,IAAA;wBAInD,wBAAwB;EAAW,QAAQ,UAAU;oBAAY,IAAA"}