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

package/dist/components/DropdownMenu.mjs

@@ -0,0 +1,256 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { wrapText } from "../lib/wrapText.mjs";
+import { selectionTick } from "../lib/haptics.mjs";
+import { Button } from "./Button.mjs";
+import { CheckIcon } 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";
+import { Pressable } from "react-native-unistyles/components/native/Pressable";
+
+//#region src/components/DropdownMenu.tsx
+/** A row that carries a check or bullet keeps a gutter for it, so labels line up whether or not one is set. */
+const INDICATOR_GUTTER = 28;
+const MIN_ROW_HEIGHT = 44;
+const DISABLED_OPACITY = .4;
+const RADIO_DOT = 6;
+const MenuContext = createContext({
+	open: false,
+	setOpen: () => void 0
+});
+const RadioContext = createContext({
+	value: void 0,
+	onValueChange: void 0
+});
+function DropdownMenu({ open, defaultOpen = false, onOpenChange, children }) {
+	const [current, setOpen] = useControllable(open, defaultOpen, onOpenChange);
+	return /* @__PURE__ */ jsx(MenuContext.Provider, {
+		value: {
+			open: current,
+			setOpen
+		},
+		children
+	});
+}
+/** A Button that opens the menu; announces that it opens a menu. */
+function DropdownMenuTrigger({ onPress, accessibilityState, ...props }) {
+	const { open, setOpen } = useContext(MenuContext);
+	return /* @__PURE__ */ jsx(Button, {
+		accessibilityState: {
+			...accessibilityState,
+			expanded: open
+		},
+		onPress: (event) => {
+			onPress?.(event);
+			setOpen(true);
+		},
+		...props
+	});
+}
+/** The action list, in a bottom sheet. */
+function DropdownMenuContent({ children }) {
+	const { open, setOpen } = useContext(MenuContext);
+	return /* @__PURE__ */ jsx(SheetFrame, {
+		open,
+		onClose: () => setOpen(false),
+		children: /* @__PURE__ */ jsx(View, {
+			accessibilityRole: "menu",
+			style: styles.content,
+			children
+		})
+	});
+}
+/** A run of items under one label, so the separator between groups is structural. */
+function DropdownMenuGroup({ children, ...props }) {
+	return /* @__PURE__ */ jsx(View, {
+		...props,
+		children
+	});
+}
+function ItemRow({ variant = "default", indented = false, disabled = false, onSelect, role, checked, indicator, children, style }) {
+	const { setOpen } = useContext(MenuContext);
+	const _styles = styles;
+	{
+		const styles = _styles.useVariants({ variant: variant === "destructive" ? "destructive" : void 0 });
+		return /* @__PURE__ */ jsxs(Pressable, {
+			accessibilityRole: role,
+			accessibilityState: {
+				disabled,
+				checked
+			},
+			disabled,
+			onPress: () => {
+				selectionTick();
+				onSelect?.();
+				setOpen(false);
+			},
+			style: ({ pressed }) => [
+				styles.item,
+				(indented || indicator !== void 0) && styles.indented,
+				pressed && styles.pressed,
+				disabled && styles.disabled,
+				style
+			],
+			children: [indicator !== void 0 ? /* @__PURE__ */ jsx(View, {
+				style: styles.indicator,
+				children: indicator
+			}) : null, wrapText(children, styles.label)]
+		});
+	}
+}
+function DropdownMenuItem(props) {
+	return /* @__PURE__ */ jsx(ItemRow, {
+		role: "menuitem",
+		...props
+	});
+}
+/** A row that toggles: the check lives in the gutter so the label never shifts. */
+function DropdownMenuCheckboxItem({ checked = false, onCheckedChange, onSelect, ...props }) {
+	return /* @__PURE__ */ jsx(ItemRow, {
+		role: "checkbox",
+		checked,
+		indicator: checked ? /* @__PURE__ */ jsx(CheckIcon, {
+			size: 12,
+			color: "blue"
+		}) : null,
+		onSelect: () => {
+			onCheckedChange?.(!checked);
+			onSelect?.();
+		},
+		...props
+	});
+}
+/** The exclusive-choice group; pair it with DropdownMenuRadioItem. */
+function DropdownMenuRadioGroup({ value, onValueChange, children, ...props }) {
+	return /* @__PURE__ */ jsx(RadioContext.Provider, {
+		value: {
+			value,
+			onValueChange
+		},
+		children: /* @__PURE__ */ jsx(View, {
+			accessibilityRole: "radiogroup",
+			...props,
+			children
+		})
+	});
+}
+function DropdownMenuRadioItem({ value, onSelect, ...props }) {
+	const radio = useContext(RadioContext);
+	const checked = radio.value === value;
+	return /* @__PURE__ */ jsx(ItemRow, {
+		role: "radio",
+		checked,
+		indicator: checked ? /* @__PURE__ */ jsx(View, { style: styles.radioDot }) : null,
+		onSelect: () => {
+			radio.onValueChange?.(value);
+			onSelect?.();
+		},
+		...props
+	});
+}
+/** The heading over a run of items, raised to sentence case as the web's `first-letter:uppercase`. */
+function DropdownMenuLabel({ style, children, ...props }) {
+	const label = typeof children === "string" ? children.charAt(0).toUpperCase() + children.slice(1) : children;
+	return /* @__PURE__ */ jsx(Text, {
+		accessibilityRole: "header",
+		style: [styles.menuLabel, style],
+		...props,
+		children: label
+	});
+}
+/** The keystroke printed at the right of a row; the row supplies the gap. */
+function DropdownMenuShortcut({ style, ...props }) {
+	return /* @__PURE__ */ jsx(Text, {
+		style: [styles.shortcut, style],
+		...props
+	});
+}
+function DropdownMenuSeparator({ style }) {
+	return /* @__PURE__ */ jsx(View, {
+		accessible: false,
+		style: [styles.separator, style]
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	content: {
+		paddingVertical: theme.spacing(1),
+		uni__dependencies: [0]
+	},
+	item: {
+		flexDirection: "row",
+		alignItems: "center",
+		gap: theme.spacing(2),
+		minHeight: MIN_ROW_HEIGHT,
+		paddingHorizontal: theme.spacing(4),
+		uni__dependencies: [0]
+	},
+	indented: {
+		paddingLeft: theme.spacing(4) + INDICATOR_GUTTER,
+		uni__dependencies: [0]
+	},
+	indicator: {
+		position: "absolute",
+		left: theme.spacing(4),
+		width: theme.spacing(3),
+		height: theme.spacing(3),
+		alignItems: "center",
+		justifyContent: "center",
+		uni__dependencies: [0]
+	},
+	radioDot: {
+		width: RADIO_DOT,
+		height: RADIO_DOT,
+		borderRadius: theme.borderRadius.full,
+		backgroundColor: theme.colors.blue,
+		uni__dependencies: [0]
+	},
+	pressed: {
+		backgroundColor: theme.colors.deep,
+		uni__dependencies: [0]
+	},
+	disabled: { opacity: DISABLED_OPACITY },
+	label: {
+		flexShrink: 1,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		variants: { variant: {
+			default: { color: theme.colors.hi },
+			destructive: { color: theme.colors.red }
+		} },
+		uni__dependencies: [0, 4]
+	},
+	menuLabel: {
+		paddingHorizontal: theme.spacing(4),
+		paddingVertical: theme.spacing(1),
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		fontWeight: theme.fontWeight.semibold,
+		uni__dependencies: [0]
+	},
+	shortcut: {
+		marginLeft: "auto",
+		flexShrink: 0,
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.sm,
+		lineHeight: theme.lineHeight.sm,
+		uni__dependencies: [0]
+	},
+	separator: {
+		height: 1,
+		marginVertical: theme.spacing(1),
+		backgroundColor: theme.colors["border-soft"],
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger };
+//# sourceMappingURL=DropdownMenu.mjs.map

package/dist/components/DropdownMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.mjs","names":["createContext","ReactNode","useContext","StyleProp","TextProps","ViewProps","ViewStyle","StyleSheet","CheckIcon","fontOf","selectionTick","useControllable","wrapText","Button","ButtonProps","SheetFrame","INDICATOR_GUTTER","MIN_ROW_HEIGHT","DISABLED_OPACITY","RADIO_DOT","MenuState","open","setOpen","MenuContext","undefined","RadioState","value","onValueChange","RadioContext","DropdownMenuProps","defaultOpen","onOpenChange","children","DropdownMenu","current","DropdownMenuTrigger","onPress","accessibilityState","props","expanded","event","DropdownMenuContentProps","DropdownMenuContent","styles","content","DropdownMenuPartProps","Omit","style","DropdownMenuGroup","DropdownMenuItemVariant","DropdownMenuItemProps","variant","indented","disabled","onSelect","ItemRowProps","role","checked","indicator","ItemRow","_styles","useVariants","pressed","item","label","DropdownMenuItem","DropdownMenuCheckboxItemProps","onCheckedChange","DropdownMenuCheckboxItem","DropdownMenuRadioGroupProps","DropdownMenuRadioGroup","DropdownMenuRadioItemProps","DropdownMenuRadioItem","radio","radioDot","DropdownMenuLabel","charAt","toUpperCase","slice","menuLabel","DropdownMenuShortcut","shortcut","DropdownMenuSeparator","separator","create","theme","paddingVertical","spacing","uni__dependencies","flexDirection","alignItems","gap","minHeight","paddingHorizontal","paddingLeft","position","left","width","height","justifyContent","borderRadius","full","backgroundColor","colors","blue","deep","opacity","flexShrink","fontFamily","sans","fontSize","base","lineHeight","variants","default","color","hi","destructive","red","dim","sm","fontWeight","semibold","marginLeft","marginVertical"],"sources":["../../src/components/DropdownMenu.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from 'react';\nimport { Pressable, type StyleProp, Text, type TextProps, View, type ViewProps, type ViewStyle } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { CheckIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\nimport { selectionTick } from '../lib/haptics';\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 DropdownMenu as an action sheet: the same items rise in a bottom\n * sheet, each a full-width 44pt row, choosing one ticks once and closes the\n * menu, and destructive rows are red.\n *\n * ponytail: submenus are not ported; a native action list nests by opening a\n * second menu from an item.\n */\n\n/** A row that carries a check or bullet keeps a gutter for it, so labels line up whether or not one is set. */\nconst INDICATOR_GUTTER = 28;\nconst MIN_ROW_HEIGHT = 44;\nconst DISABLED_OPACITY = 0.4;\nconst RADIO_DOT = 6;\n\ninterface MenuState {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nconst MenuContext = createContext<MenuState>({ open: false, setOpen: () => undefined });\n\ninterface RadioState {\n  value: string | undefined;\n  onValueChange: ((value: string) => void) | undefined;\n}\n\nconst RadioContext = createContext<RadioState>({ value: undefined, onValueChange: undefined });\n\nexport interface DropdownMenuProps {\n  /** Controlled mode; pair with onOpenChange. Omit it and the menu keeps its own state. */\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function DropdownMenu({ open, defaultOpen = false, onOpenChange, children }: DropdownMenuProps) {\n  const [current, setOpen] = useControllable(open, defaultOpen, onOpenChange);\n  return <MenuContext.Provider value={{ open: current, setOpen }}>{children}</MenuContext.Provider>;\n}\n\n/** A Button that opens the menu; announces that it opens a menu. */\nexport function DropdownMenuTrigger({ onPress, accessibilityState, ...props }: ButtonProps) {\n  const { open, setOpen } = useContext(MenuContext);\n  return (\n    <Button\n      accessibilityState={{ ...accessibilityState, expanded: open }}\n      onPress={(event) => {\n        onPress?.(event);\n        setOpen(true);\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface DropdownMenuContentProps {\n  children?: ReactNode;\n}\n\n/** The action list, in a bottom sheet. */\nexport function DropdownMenuContent({ children }: DropdownMenuContentProps) {\n  const { open, setOpen } = useContext(MenuContext);\n  return (\n    <SheetFrame open={open} onClose={() => setOpen(false)}>\n      <View accessibilityRole=\"menu\" style={styles.content}>\n        {children}\n      </View>\n    </SheetFrame>\n  );\n}\n\nexport interface DropdownMenuPartProps extends Omit<ViewProps, 'children' | 'style'> {\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** A run of items under one label, so the separator between groups is structural. */\nexport function DropdownMenuGroup({ children, ...props }: DropdownMenuPartProps) {\n  return <View {...props}>{children}</View>;\n}\n\nexport type DropdownMenuItemVariant = 'default' | 'destructive';\n\nexport interface DropdownMenuItemProps {\n  variant?: DropdownMenuItemVariant;\n  /** Keep the indicator gutter, so the label lines up with checkbox and radio rows. */\n  indented?: boolean;\n  disabled?: boolean;\n  /** Chosen: the menu ticks, runs this, then closes. */\n  onSelect?: () => void;\n  /** The label, optionally followed by a DropdownMenuShortcut. */\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\ninterface ItemRowProps extends DropdownMenuItemProps {\n  role: 'menuitem' | 'checkbox' | 'radio';\n  checked?: boolean;\n  indicator?: ReactNode;\n}\n\nfunction ItemRow({\n  variant = 'default',\n  indented = false,\n  disabled = false,\n  onSelect,\n  role,\n  checked,\n  indicator,\n  children,\n  style,\n}: ItemRowProps) {\n  const { setOpen } = useContext(MenuContext);\n  styles.useVariants({ variant: variant === 'destructive' ? 'destructive' : undefined });\n  return (\n    <Pressable\n      accessibilityRole={role}\n      accessibilityState={{ disabled, checked }}\n      disabled={disabled}\n      onPress={() => {\n        selectionTick();\n        onSelect?.();\n        setOpen(false);\n      }}\n      style={({ pressed }) => [\n        styles.item,\n        (indented || indicator !== undefined) && styles.indented,\n        pressed && styles.pressed,\n        disabled && styles.disabled,\n        style,\n      ]}\n    >\n      {indicator !== undefined ? <View style={styles.indicator}>{indicator}</View> : null}\n      {wrapText(children, styles.label)}\n    </Pressable>\n  );\n}\n\nexport function DropdownMenuItem(props: DropdownMenuItemProps) {\n  return <ItemRow role=\"menuitem\" {...props} />;\n}\n\nexport interface DropdownMenuCheckboxItemProps extends Omit<DropdownMenuItemProps, 'indented'> {\n  checked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n}\n\n/** A row that toggles: the check lives in the gutter so the label never shifts. */\nexport function DropdownMenuCheckboxItem({\n  checked = false,\n  onCheckedChange,\n  onSelect,\n  ...props\n}: DropdownMenuCheckboxItemProps) {\n  return (\n    <ItemRow\n      role=\"checkbox\"\n      checked={checked}\n      indicator={checked ? <CheckIcon size={12} color=\"blue\" /> : null}\n      onSelect={() => {\n        onCheckedChange?.(!checked);\n        onSelect?.();\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface DropdownMenuRadioGroupProps extends DropdownMenuPartProps {\n  value?: string;\n  onValueChange?: (value: string) => void;\n}\n\n/** The exclusive-choice group; pair it with DropdownMenuRadioItem. */\nexport function DropdownMenuRadioGroup({ value, onValueChange, children, ...props }: DropdownMenuRadioGroupProps) {\n  return (\n    <RadioContext.Provider value={{ value, onValueChange }}>\n      <View accessibilityRole=\"radiogroup\" {...props}>\n        {children}\n      </View>\n    </RadioContext.Provider>\n  );\n}\n\nexport interface DropdownMenuRadioItemProps extends Omit<DropdownMenuItemProps, 'indented'> {\n  value: string;\n}\n\nexport function DropdownMenuRadioItem({ value, onSelect, ...props }: DropdownMenuRadioItemProps) {\n  const radio = useContext(RadioContext);\n  const checked = radio.value === value;\n  return (\n    <ItemRow\n      role=\"radio\"\n      checked={checked}\n      indicator={checked ? <View style={styles.radioDot} /> : null}\n      onSelect={() => {\n        radio.onValueChange?.(value);\n        onSelect?.();\n      }}\n      {...props}\n    />\n  );\n}\n\n/** The heading over a run of items, raised to sentence case as the web's `first-letter:uppercase`. */\nexport function DropdownMenuLabel({ style, children, ...props }: TextProps) {\n  const label = typeof children === 'string' ? children.charAt(0).toUpperCase() + children.slice(1) : children;\n  return (\n    <Text accessibilityRole=\"header\" style={[styles.menuLabel, style]} {...props}>\n      {label}\n    </Text>\n  );\n}\n\n/** The keystroke printed at the right of a row; the row supplies the gap. */\nexport function DropdownMenuShortcut({ style, ...props }: TextProps) {\n  return <Text style={[styles.shortcut, style]} {...props} />;\n}\n\nexport function DropdownMenuSeparator({ style }: { style?: StyleProp<ViewStyle> }) {\n  return <View accessible={false} style={[styles.separator, style]} />;\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  content: { paddingVertical: theme.spacing(1) },\n  item: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    minHeight: MIN_ROW_HEIGHT,\n    paddingHorizontal: theme.spacing(4),\n  },\n  indented: { paddingLeft: theme.spacing(4) + INDICATOR_GUTTER },\n  indicator: {\n    position: 'absolute',\n    left: theme.spacing(4),\n    width: theme.spacing(3),\n    height: theme.spacing(3),\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  radioDot: {\n    width: RADIO_DOT,\n    height: RADIO_DOT,\n    borderRadius: theme.borderRadius.full,\n    backgroundColor: theme.colors.blue,\n  },\n  pressed: { backgroundColor: theme.colors.deep },\n  disabled: { opacity: DISABLED_OPACITY },\n  label: {\n    flexShrink: 1,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeight.base,\n    variants: {\n      variant: {\n        default: { color: theme.colors.hi },\n        destructive: { color: theme.colors.red },\n      },\n    },\n  },\n  menuLabel: {\n    paddingHorizontal: theme.spacing(4),\n    paddingVertical: theme.spacing(1),\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeight.sm,\n    fontWeight: theme.fontWeight.semibold,\n  },\n  shortcut: {\n    marginLeft: 'auto',\n    flexShrink: 0,\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.sm,\n    lineHeight: theme.lineHeight.sm,\n  },\n  separator: { height: 1, marginVertical: theme.spacing(1), backgroundColor: theme.colors['border-soft'] },\n}));\n"],"mappings":"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"}

package/dist/components/EmptyState.d.mts

@@ -0,0 +1,14 @@
+import { StyleProp, ViewStyle } from "react-native";
+import { ReactNode } from "react";
+//#region src/components/EmptyState.d.ts
+export interface EmptyStateProps {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Optional calls to action under the copy. */
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+/** The centred "nothing here yet" block every empty screen and panel shares. */
+export declare function EmptyState({ title, description, children, style }: EmptyStateProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=EmptyState.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.mts","names":[],"sources":["../../src/components/EmptyState.tsx"],"mappings":";;;iBAOiB;EACf,OAAO;EACP,cAAc;;EAEd,WAAW;EACX,QAAQ,UAAU;;;wBAIJ,aAAa,OAAO,aAAa,UAAU,SAAS,kCAAe,IAAA"}

package/dist/components/EmptyState.mjs

@@ -0,0 +1,64 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { wrapText } from "../lib/wrapText.mjs";
+import { View } from "react-native-unistyles/components/native/View";
+import { StyleSheet } from "react-native-unistyles";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/EmptyState.tsx
+/** The centred "nothing here yet" block every empty screen and panel shares. */
+function EmptyState({ title, description, children, style }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: [styles.frame, style],
+		children: /* @__PURE__ */ jsxs(View, {
+			style: styles.column,
+			children: [
+				/* @__PURE__ */ jsx(View, {
+					accessibilityRole: "header",
+					children: wrapText(title, styles.title)
+				}),
+				description ? wrapText(description, styles.description) : null,
+				children
+			]
+		})
+	});
+}
+const styles = StyleSheet.create((theme) => ({
+	frame: {
+		flex: 1,
+		minWidth: 0,
+		alignItems: "center",
+		justifyContent: "center",
+		paddingHorizontal: theme.spacing(3),
+		paddingVertical: theme.spacing(4),
+		uni__dependencies: [0]
+	},
+	column: {
+		width: "100%",
+		maxWidth: 520,
+		minWidth: 0,
+		alignItems: "center",
+		gap: theme.spacing(3),
+		uni__dependencies: [0]
+	},
+	title: {
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.lg,
+		lineHeight: theme.lineHeight.lg,
+		fontWeight: theme.fontWeight.semibold,
+		textAlign: "center",
+		uni__dependencies: [0]
+	},
+	description: {
+		color: theme.colors.dim,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeightRelaxed.base,
+		textAlign: "center",
+		uni__dependencies: [0]
+	}
+}));
+
+//#endregion
+export { EmptyState };
+//# sourceMappingURL=EmptyState.mjs.map

package/dist/components/EmptyState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.mjs","names":["ReactNode","StyleProp","ViewStyle","StyleSheet","fontOf","wrapText","EmptyStateProps","title","description","children","style","EmptyState","styles","frame","column","create","theme","flex","minWidth","alignItems","justifyContent","paddingHorizontal","spacing","paddingVertical","uni__dependencies","width","maxWidth","gap","color","colors","hi","fontFamily","sans","fontSize","lg","lineHeight","fontWeight","semibold","textAlign","dim","base","lineHeightRelaxed"],"sources":["../../src/components/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { type StyleProp, View, type ViewStyle } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\nimport { wrapText } from '../lib/wrapText';\n\nexport interface EmptyStateProps {\n  title: ReactNode;\n  description?: ReactNode;\n  /** Optional calls to action under the copy. */\n  children?: ReactNode;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The centred \"nothing here yet\" block every empty screen and panel shares. */\nexport function EmptyState({ title, description, children, style }: EmptyStateProps) {\n  return (\n    <View style={[styles.frame, style]}>\n      <View style={styles.column}>\n        <View accessibilityRole=\"header\">{wrapText(title, styles.title)}</View>\n        {description ? wrapText(description, styles.description) : null}\n        {children}\n      </View>\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => ({\n  frame: {\n    flex: 1,\n    minWidth: 0,\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: theme.spacing(3),\n    paddingVertical: theme.spacing(4),\n  },\n  column: {\n    width: '100%',\n    maxWidth: 520,\n    minWidth: 0,\n    alignItems: 'center',\n    gap: theme.spacing(3),\n  },\n  title: {\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    textAlign: 'center',\n  },\n  description: {\n    color: theme.colors.dim,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeightRelaxed.base,\n    textAlign: 'center',\n  },\n}));\n"],"mappings":";;;;;;;;AAgBA,SAAgBW,WAAW,EAAEJ,OAAOC,aAAaC,UAAUC,SAA0B;CACnF,OACE,oBAAC,MAAD;EAAM,OAAO,CAACE,OAAOC,OAAOH,KAAK;YAC/B,qBAAC,MAAD;GAAM,OAAOE,OAAOE;aAApB;IACE,oBAAC,MAAD;KAAM,mBAAkB;eAAUT,SAASE,OAAOK,OAAOL,KAAK;IAAQ;IACrEC,cAAcH,SAASG,aAAaI,OAAOJ,WAAW,IAAI;IAC1DC;GACG;;CACF;AAEV;AAEA,MAAMG,SAAST,WAAWY,QAAQC,WAAW;CAC3CH,OAAO;EACLI,MAAM;EACNC,UAAU;EACVC,YAAY;EACZC,gBAAgB;EAChBC,mBAAmBL,MAAMM,QAAQ,CAAC;EAClCC,iBAAiBP,MAAMM,QAAQ,CAAC;EAACE,mBAAA,CAAA,CAAA;CACnC;CACAV,QAAQ;EACNW,OAAO;EACPC,UAAU;EACVR,UAAU;EACVC,YAAY;EACZQ,KAAKX,MAAMM,QAAQ,CAAC;EAACE,mBAAA,CAAA,CAAA;CACvB;CACAjB,OAAO;EACLqB,OAAOZ,MAAMa,OAAOC;EACpBC,YAAY3B,OAAOY,MAAMe,WAAWC,IAAI;EACxCC,UAAUjB,MAAMiB,SAASC;EACzBC,YAAYnB,MAAMmB,WAAWD;EAC7BE,YAAYpB,MAAMoB,WAAWC;EAC7BC,WAAW;EAAQd,mBAAA,CAAA,CAAA;CACrB;CACAhB,aAAa;EACXoB,OAAOZ,MAAMa,OAAOU;EACpBR,YAAY3B,OAAOY,MAAMe,WAAWC,IAAI;EACxCC,UAAUjB,MAAMiB,SAASO;EACzBL,YAAYnB,MAAMyB,kBAAkBD;EACpCF,WAAW;EAAQd,mBAAA,CAAA,CAAA;CACrB;AACF,EAAE"}

package/dist/components/Input.d.mts

@@ -0,0 +1,19 @@
+import { TextInputProps } from "react-native";
+//#region src/components/Input.d.ts
+export type FieldVariant = 'default' | 'bare';
+export type FieldSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface InputProps extends Omit<TextInputProps, 'editable'> {
+  variant?: FieldVariant;
+  /** The same rungs Button names, so a field and the button beside it line up. */
+  size?: FieldSize;
+  /** The value is wrong: red edge and red text, as `aria-invalid` on the web. */
+  invalid?: boolean;
+  disabled?: boolean;
+}
+/**
+ * The one text field: deep well, quiet border, jade edge and cursor on focus,
+ * red edge when invalid. Inside a Sheet it becomes the sheet's own input.
+ */
+export declare function Input({ variant, size, invalid, disabled, style, onFocus, onBlur, accessibilityState, ...props }: InputProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Input.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.mts","names":[],"sources":["../../src/components/Input.tsx"],"mappings":";;YASY;YACA;iBAOK,mBAAmB,KAAK;EACvC,UAAU;;EAEV,OAAO;;EAEP;EACA;;;;;;wBAOc,QACd,SACA,MACA,SACA,UACA,OACA,SACA,QACA,uBACG,SACF,6BAAU,IAAA"}

package/dist/components/Input.mjs

@@ -0,0 +1,123 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { useInsideSheet } from "../lib/insideSheet.mjs";
+import { withAlpha } from "@agimon-ai/po-web-components/nativeTheme";
+import { StyleSheet, useUnistyles, withUnistyles } from "react-native-unistyles";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
+import { TextInput } from "react-native-unistyles/components/native/TextInput";
+
+//#region src/components/Input.tsx
+/** `focus:border-doom-green/60`. */
+const FOCUS_EDGE_ALPHA_PERCENT = 60;
+const DISABLED_OPACITY = .5;
+const ThemedSheetTextInput = withUnistyles(BottomSheetTextInput);
+/**
+* The one text field: deep well, quiet border, jade edge and cursor on focus,
+* red edge when invalid. Inside a Sheet it becomes the sheet's own input.
+*/
+function Input({ variant = "default", size = "md", invalid = false, disabled = false, style, onFocus, onBlur, accessibilityState, ...props }) {
+	const { theme } = useUnistyles();
+	const [focused, setFocused] = useState(false);
+	const Field = useInsideSheet() ? ThemedSheetTextInput : TextInput;
+	const _styles = styles;
+	{
+		const styles = _styles.useVariants({
+			variant: variant === "bare" ? "bare" : void 0,
+			size
+		});
+		return /* @__PURE__ */ jsx(Field, {
+			autoCorrect: false,
+			spellCheck: false,
+			placeholderTextColor: theme.colors.faint,
+			selectionColor: theme.colors.green,
+			cursorColor: theme.colors.green,
+			editable: !disabled,
+			accessibilityState: {
+				...accessibilityState,
+				disabled
+			},
+			onFocus: (event) => {
+				setFocused(true);
+				onFocus?.(event);
+			},
+			onBlur: (event) => {
+				setFocused(false);
+				onBlur?.(event);
+			},
+			style: [
+				styles.field,
+				focused && variant === "default" && { borderColor: withAlpha(theme.colors.green, FOCUS_EDGE_ALPHA_PERCENT) },
+				invalid && styles.invalid,
+				disabled && styles.disabled,
+				style
+			],
+			...props
+		});
+	}
+}
+const styles = StyleSheet.create((theme) => ({
+	field: {
+		minWidth: 0,
+		minHeight: 44,
+		color: theme.colors.hi,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		variants: {
+			variant: {
+				default: {
+					borderRadius: theme.borderRadius.DEFAULT,
+					borderWidth: 1,
+					borderColor: theme.colors.border,
+					backgroundColor: theme.colors.deep
+				},
+				/** No well: a composer or a search that draws its own surface keeps the type and drops the box. */
+				bare: {
+					borderWidth: 0,
+					backgroundColor: "transparent",
+					padding: 0
+				}
+			},
+			size: {
+				xs: {
+					paddingHorizontal: theme.spacing(1.5),
+					paddingVertical: theme.spacing(.5),
+					fontSize: theme.fontSize.sm
+				},
+				sm: {
+					paddingHorizontal: theme.spacing(2),
+					paddingVertical: theme.spacing(1),
+					fontSize: theme.fontSize.sm
+				},
+				md: {
+					paddingHorizontal: theme.spacing(2.5),
+					paddingVertical: theme.spacing(1.5),
+					fontSize: theme.fontSize.base
+				},
+				lg: {
+					paddingHorizontal: theme.spacing(3),
+					paddingVertical: theme.spacing(1.5),
+					fontSize: theme.fontSize.base
+				}
+			}
+		},
+		compoundVariants: [{
+			variant: "bare",
+			styles: {
+				padding: 0,
+				paddingHorizontal: 0,
+				paddingVertical: 0
+			}
+		}],
+		uni__dependencies: [0, 4]
+	},
+	invalid: {
+		borderColor: theme.colors["edge-red"],
+		color: theme.colors.red,
+		uni__dependencies: [0]
+	},
+	disabled: { opacity: DISABLED_OPACITY }
+}));
+
+//#endregion
+export { Input };
+//# sourceMappingURL=Input.mjs.map

package/dist/components/Input.mjs.map

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

package/dist/components/Label.d.mts

@@ -0,0 +1,13 @@
+import { TextProps } from "react-native";
+//#region src/components/Label.d.ts
+export interface LabelProps extends TextProps {
+  /** The field it names is disabled; the label fades with it. */
+  disabled?: boolean;
+}
+/**
+ * A field's name. Give it a `nativeID` and point the field's
+ * `accessibilityLabelledBy` at it so a screen reader reads the two together.
+ */
+export declare function Label({ disabled, style, ...props }: LabelProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Label.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.mts","names":[],"sources":["../../src/components/Label.tsx"],"mappings":";;iBAKiB,mBAAmB;;EAElC;;;;;;wBAOc,QAAQ,UAAkB,UAAU,SAAS,6BAAU,IAAA"}

package/dist/components/Label.mjs

@@ -0,0 +1,36 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { StyleSheet } from "react-native-unistyles";
+import { Text } from "react-native-unistyles/components/native/Text";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Label.tsx
+/**
+* A field's name. Give it a `nativeID` and point the field's
+* `accessibilityLabelledBy` at it so a screen reader reads the two together.
+*/
+function Label({ disabled = false, style, ...props }) {
+	return /* @__PURE__ */ jsx(Text, {
+		style: [
+			styles.label,
+			disabled && styles.disabled,
+			style
+		],
+		...props
+	});
+}
+const DISABLED_OPACITY = .5;
+const styles = StyleSheet.create((theme) => ({
+	label: {
+		color: theme.colors.text,
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize.base,
+		lineHeight: theme.lineHeight.base,
+		fontWeight: theme.fontWeight.medium,
+		uni__dependencies: [0]
+	},
+	disabled: { opacity: DISABLED_OPACITY }
+}));
+
+//#endregion
+export { Label };
+//# sourceMappingURL=Label.mjs.map

package/dist/components/Label.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.mjs","names":["TextProps","StyleSheet","fontOf","LabelProps","disabled","Label","style","props","styles","label","DISABLED_OPACITY","create","theme","color","colors","text","fontFamily","sans","fontSize","base","lineHeight","fontWeight","medium","uni__dependencies","opacity"],"sources":["../../src/components/Label.tsx"],"sourcesContent":["import { Text, type TextProps } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { fontOf } from '../lib/fonts';\n\nexport interface LabelProps extends TextProps {\n  /** The field it names is disabled; the label fades with it. */\n  disabled?: boolean;\n}\n\n/**\n * A field's name. Give it a `nativeID` and point the field's\n * `accessibilityLabelledBy` at it so a screen reader reads the two together.\n */\nexport function Label({ disabled = false, style, ...props }: LabelProps) {\n  return <Text style={[styles.label, disabled && styles.disabled, style]} {...props} />;\n}\n\nconst DISABLED_OPACITY = 0.5;\n\nconst styles = StyleSheet.create((theme) => ({\n  label: {\n    color: theme.colors.text,\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize.base,\n    lineHeight: theme.lineHeight.base,\n    fontWeight: theme.fontWeight.medium,\n  },\n  disabled: { opacity: DISABLED_OPACITY },\n}));\n"],"mappings":";;;;;;;;;;AAcA,SAAgBK,MAAM,EAAED,WAAW,OAAOE,OAAO,GAAGC,SAAqB;CACvE,OAAO,oBAAC,MAAD;EAAM,OAAO;GAACC,OAAOC;GAAOL,YAAYI,OAAOJ;GAAUE;EAAK;EAAG,GAAIC;CAAM;AACpF;AAEA,MAAMG,mBAAmB;AAEzB,MAAMF,SAASP,WAAWU,QAAQC,WAAW;CAC3CH,OAAO;EACLI,OAAOD,MAAME,OAAOC;EACpBC,YAAYd,OAAOU,MAAMI,WAAWC,IAAI;EACxCC,UAAUN,MAAMM,SAASC;EACzBC,YAAYR,MAAMQ,WAAWD;EAC7BE,YAAYT,MAAMS,WAAWC;EAAMC,mBAAA,CAAA,CAAA;CACrC;CACAnB,UAAU,EAAEoB,SAASd,iBAAiB;AACxC,EAAE"}

package/dist/components/List.d.mts

@@ -0,0 +1,48 @@
+import { StyleProp, ViewStyle } from "react-native";
+import { ReactElement, ReactNode } from "react";
+//#region src/components/List.d.ts
+export interface ListProps<T> {
+  data: readonly T[];
+  renderItem: (item: T, index: number) => ReactElement | null;
+  /** A stable key per row; FlashList recycles views by it. */
+  keyExtractor: (item: T, index: number) => string;
+  /**
+   * A chat list: render from the bottom and keep the newest row in view as
+   * rows arrive, while the reader is near the bottom.
+   */
+  startAtBottom?: boolean;
+  /** Hairline separators between rows. On by default. */
+  separators?: boolean;
+  /** Shown when `data` is empty. */
+  empty?: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  onEndReached?: () => void;
+  accessibilityLabel?: string;
+  /** The list's frame; give it a height or a flex parent, since a virtualised list needs bounds. */
+  style?: StyleProp<ViewStyle>;
+  /** Padding around the rows. */
+  contentPadding?: number;
+}
+export declare function List<T>({ data, renderItem, keyExtractor, startAtBottom, separators, empty, header, footer, onEndReached, accessibilityLabel, style, contentPadding }: ListProps<T>): import("react").JSX.Element;
+export interface ListRowProps {
+  title: ReactNode;
+  /** A second, quieter line under the title. */
+  description?: ReactNode;
+  /** Before the text: a Dot, an icon. */
+  leading?: ReactNode;
+  /** After the text: a Badge, a ghost button, a count. */
+  trailing?: ReactNode;
+  /** Selected rows sit on a green tint. */
+  selected?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  /** The iOS disclosure chevron. Defaults to on for a pressable row on iOS, where rows that navigate wear one. */
+  disclosure?: boolean;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+/** One list row: 44pt tall, optional leading and trailing slots, pressable when it navigates. */
+export declare function ListRow({ title, description, leading, trailing, selected, disabled, onPress, disclosure, accessibilityLabel, style }: ListRowProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=List.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.mts","names":[],"sources":["../../src/components/List.tsx"],"mappings":";;;iBAoBiB,UAAU;EACzB,eAAe;EACf,aAAa,MAAM,GAAG,kBAAkB;;EAExC,eAAe,MAAM,GAAG;;;;;EAKxB;;EAEA;;EAEA,QAAQ;EACR,SAAS;EACT,SAAS;EACT;EACA;;EAEA,QAAQ,UAAU;;EAElB;;wBAOc,KAAK,KACnB,MACA,YACA,cACA,eACA,YACA,OACA,QACA,QACA,cACA,oBACA,OACA,kBACC,UAAU,qBAAE,IAAA;iBAuBE;EACf,OAAO;;EAEP,cAAc;;EAEd,UAAU;;EAEV,WAAW;;EAEX;EACA;EACA;;EAEA;EACA;EACA,QAAQ,UAAU;;;wBAIJ,UACd,OACA,aACA,SACA,UACA,UACA,UACA,SACA,YACA,oBACA,SACC,+BAAY,IAAA"}