@agimon-ai/po-native-components 0.0.0-alpha.98 → 0.0.0-alpha.99

package/dist/components/Select.d.mts

@@ -0,0 +1,33 @@
+import { StyleProp, ViewStyle } from "react-native";
+//#region src/components/Select.d.ts
+export interface SelectOption {
+  value: string;
+  label: string;
+  /** Options sharing a group sit under one heading, in the order the groups first appear. */
+  group?: string;
+  /** A quieter line under the label. */
+  detail?: string;
+}
+export interface SelectProps {
+  options: readonly SelectOption[];
+  /** The chosen value; unset or unknown shows the placeholder. */
+  value?: string;
+  onValueChange: (value: string) => void;
+  /** The sheet's heading and the trigger's accessible name, such as "Narration engine". */
+  title: string;
+  placeholder?: string;
+  /** Offer a way back to no value, such as "Use the default". Shown only with onClear. */
+  clearLabel?: string;
+  onClear?: () => void;
+  disabled?: boolean;
+  /** Start with the sheet up, as a story shows it. */
+  defaultOpen?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+/**
+ * The web Select as a phone picker: the current value and a chevron, which open a bottom sheet of
+ * the options, grouped, with a tick on the chosen one. Choosing ticks once and closes the sheet.
+ */
+export declare function Select({ options, value, onValueChange, title, placeholder, clearLabel, onClear, disabled, defaultOpen, style }: SelectProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Select.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.mts","names":[],"sources":["../../src/components/Select.tsx"],"mappings":";;iBAeiB;EACf;EACA;;EAEA;;EAEA;;iBAGe;EACf,kBAAkB;;EAElB;EACA,gBAAgB;;EAEhB;EACA;;EAEA;EACA;EACA;;EAEA;EACA,QAAQ,UAAU;;;;;;wBAOJ,SACd,SACA,OACA,eACA,OACA,aACA,YACA,SACA,UACA,aACA,SACC,8BAAW,IAAA"}

package/dist/components/Select.mjs

@@ -0,0 +1,222 @@
+import { fontOf } from "../lib/fonts.mjs";
+import { selectionTick } from "../lib/haptics.mjs";
+import { Button } from "./Button.mjs";
+import { CheckIcon, ChevronDownIcon } from "../icons/icons.mjs";
+import { SheetFrame } from "./SheetFrame.mjs";
+import { View } from "react-native-unistyles/components/native/View";
+import { Text } from "react-native-unistyles/components/native/Text";
+import { StyleSheet } from "react-native-unistyles";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Pressable } from "react-native-unistyles/components/native/Pressable";
+
+//#region src/components/Select.tsx
+const MIN_ROW_HEIGHT = 44;
+const DISABLED_OPACITY = .4;
+/** A long value gives way to the row's title rather than pushing it off screen. */
+const MAX_VALUE_WIDTH = 180;
+/**
+* The web Select as a phone picker: the current value and a chevron, which open a bottom sheet of
+* the options, grouped, with a tick on the chosen one. Choosing ticks once and closes the sheet.
+*/
+function Select({ options, value, onValueChange, title, placeholder = "Choose", clearLabel, onClear, disabled = false, defaultOpen = false, style }) {
+	const [open, setOpen] = useState(defaultOpen);
+	const chosen = options.find((option) => option.value === value);
+	const groups = [...new Set(options.map((option) => option.group))];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Pressable, {
+		accessibilityRole: "button",
+		accessibilityLabel: title,
+		accessibilityValue: { text: chosen?.label ?? placeholder },
+		accessibilityState: {
+			disabled,
+			expanded: open
+		},
+		disabled,
+		hitSlop: 8,
+		onPress: () => setOpen(true),
+		style: ({ pressed }) => [
+			styles.trigger,
+			pressed && styles.pressed,
+			disabled && styles.disabled,
+			style
+		],
+		children: [/* @__PURE__ */ jsx(Text, {
+			numberOfLines: 1,
+			style: chosen ? styles.value : styles.placeholder,
+			children: chosen?.label ?? placeholder
+		}), /* @__PURE__ */ jsx(ChevronDownIcon, {
+			size: 14,
+			color: "faint"
+		})]
+	}), /* @__PURE__ */ jsx(SheetFrame, {
+		open,
+		onClose: () => setOpen(false),
+		children: /* @__PURE__ */ jsxs(View, {
+			style: styles.sheet,
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					accessibilityRole: "header",
+					style: styles.title,
+					children: title
+				}),
+				groups.map((group) => /* @__PURE__ */ jsxs(View, {
+					accessibilityRole: "radiogroup",
+					style: styles.group,
+					children: [group === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+						style: styles.groupLabel,
+						children: group
+					}), /* @__PURE__ */ jsx(View, {
+						style: styles.card,
+						children: options.filter((option) => option.group === group).map((option, index, rows) => {
+							const selected = option.value === value;
+							return /* @__PURE__ */ jsxs(Pressable, {
+								accessibilityRole: "radio",
+								accessibilityState: { checked: selected },
+								onPress: () => {
+									selectionTick();
+									setOpen(false);
+									if (!selected) onValueChange(option.value);
+								},
+								style: ({ pressed }) => [
+									styles.option,
+									index < rows.length - 1 && styles.divider,
+									pressed && styles.pressed
+								],
+								children: [/* @__PURE__ */ jsxs(View, {
+									style: styles.optionText,
+									children: [/* @__PURE__ */ jsx(Text, {
+										style: [styles.optionLabel, selected && styles.selected],
+										children: option.label
+									}), option.detail ? /* @__PURE__ */ jsx(Text, {
+										style: styles.detail,
+										children: option.detail
+									}) : null]
+								}), /* @__PURE__ */ jsx(View, {
+									style: styles.tick,
+									children: selected ? /* @__PURE__ */ jsx(CheckIcon, {
+										size: 18,
+										color: "green"
+									}) : null
+								})]
+							}, option.value);
+						})
+					})]
+				}, group ?? "")),
+				onClear === void 0 ? null : /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "md",
+					onPress: () => {
+						setOpen(false);
+						onClear();
+					},
+					children: clearLabel ?? "Clear"
+				})
+			]
+		})
+	})] });
+}
+const styles = StyleSheet.create((theme) => {
+	const text = (size) => ({
+		fontFamily: fontOf(theme.fontFamily.sans),
+		fontSize: theme.fontSize[size],
+		lineHeight: theme.lineHeight[size]
+	});
+	return {
+		trigger: {
+			flexDirection: "row",
+			alignItems: "center",
+			gap: theme.spacing(1.5),
+			minHeight: MIN_ROW_HEIGHT,
+			borderRadius: theme.borderRadius.md,
+			uni__dependencies: [0]
+		},
+		pressed: { opacity: .6 },
+		disabled: { opacity: DISABLED_OPACITY },
+		value: {
+			...text("sm"),
+			color: theme.colors.text,
+			maxWidth: MAX_VALUE_WIDTH,
+			uni__dependencies: [0]
+		},
+		placeholder: {
+			...text("sm"),
+			color: theme.colors.faint,
+			maxWidth: MAX_VALUE_WIDTH,
+			uni__dependencies: [0]
+		},
+		sheet: {
+			gap: theme.spacing(4),
+			paddingHorizontal: theme.spacing(5),
+			paddingTop: theme.spacing(1),
+			paddingBottom: theme.spacing(4),
+			uni__dependencies: [0]
+		},
+		title: {
+			...text("lg"),
+			color: theme.colors.hi,
+			fontWeight: theme.fontWeight.semibold,
+			uni__dependencies: [0]
+		},
+		group: {
+			gap: theme.spacing(2),
+			uni__dependencies: [0]
+		},
+		groupLabel: {
+			...text("sm"),
+			color: theme.colors.dim,
+			fontWeight: theme.fontWeight.semibold,
+			uni__dependencies: [0]
+		},
+		card: {
+			overflow: "hidden",
+			borderRadius: theme.borderRadius.lg,
+			borderWidth: StyleSheet.hairlineWidth,
+			borderColor: theme.colors.border,
+			backgroundColor: theme.colors.panel,
+			uni__dependencies: [0]
+		},
+		option: {
+			flexDirection: "row",
+			alignItems: "flex-start",
+			gap: theme.spacing(3),
+			minHeight: MIN_ROW_HEIGHT,
+			paddingHorizontal: theme.spacing(4),
+			paddingVertical: theme.spacing(3),
+			uni__dependencies: [0]
+		},
+		divider: {
+			borderBottomWidth: StyleSheet.hairlineWidth,
+			borderBottomColor: theme.colors["border-soft"],
+			uni__dependencies: [0]
+		},
+		optionText: {
+			flex: 1,
+			minWidth: 0,
+			gap: 2
+		},
+		optionLabel: {
+			...text("base"),
+			color: theme.colors.hi,
+			fontWeight: theme.fontWeight.medium,
+			uni__dependencies: [0]
+		},
+		selected: {
+			color: theme.colors.green,
+			uni__dependencies: [0]
+		},
+		detail: {
+			...text("sm"),
+			color: theme.colors.dim,
+			lineHeight: theme.lineHeightRelaxed.sm,
+			uni__dependencies: [0]
+		},
+		tick: {
+			width: 18,
+			paddingTop: 2
+		}
+	};
+});
+
+//#endregion
+export { Select };
+//# sourceMappingURL=Select.mjs.map

package/dist/components/Select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","names":["useState","StyleProp","ViewStyle","StyleSheet","CheckIcon","ChevronDownIcon","fontOf","selectionTick","Button","SheetFrame","MIN_ROW_HEIGHT","DISABLED_OPACITY","MAX_VALUE_WIDTH","SelectOption","value","label","group","detail","SelectProps","options","onValueChange","title","placeholder","clearLabel","onClear","disabled","defaultOpen","style","Select","open","setOpen","chosen","find","option","groups","Set","map","text","expanded","pressed","styles","trigger","sheet","undefined","groupLabel","card","filter","index","rows","selected","checked","length","divider","optionText","optionLabel","tick","create","theme","size","fontFamily","sans","fontSize","lineHeight","flexDirection","alignItems","gap","spacing","minHeight","borderRadius","md","uni__dependencies","opacity","color","colors","maxWidth","faint","paddingHorizontal","paddingTop","paddingBottom","hi","fontWeight","semibold","dim","overflow","lg","borderWidth","hairlineWidth","borderColor","border","backgroundColor","panel","paddingVertical","borderBottomWidth","borderBottomColor","flex","minWidth","medium","green","lineHeightRelaxed","sm","width"],"sources":["../../src/components/Select.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Pressable, type StyleProp, Text, View, type ViewStyle } from 'react-native';\nimport { StyleSheet } from 'react-native-unistyles';\n\nimport { CheckIcon, ChevronDownIcon } from '../icons/icons';\nimport { fontOf } from '../lib/fonts';\nimport { selectionTick } from '../lib/haptics';\nimport { Button } from './Button';\nimport { SheetFrame } from './SheetFrame';\n\nconst MIN_ROW_HEIGHT = 44;\nconst DISABLED_OPACITY = 0.4;\n/** A long value gives way to the row's title rather than pushing it off screen. */\nconst MAX_VALUE_WIDTH = 180;\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  /** Options sharing a group sit under one heading, in the order the groups first appear. */\n  group?: string;\n  /** A quieter line under the label. */\n  detail?: string;\n}\n\nexport interface SelectProps {\n  options: readonly SelectOption[];\n  /** The chosen value; unset or unknown shows the placeholder. */\n  value?: string;\n  onValueChange: (value: string) => void;\n  /** The sheet's heading and the trigger's accessible name, such as \"Narration engine\". */\n  title: string;\n  placeholder?: string;\n  /** Offer a way back to no value, such as \"Use the default\". Shown only with onClear. */\n  clearLabel?: string;\n  onClear?: () => void;\n  disabled?: boolean;\n  /** Start with the sheet up, as a story shows it. */\n  defaultOpen?: boolean;\n  style?: StyleProp<ViewStyle>;\n}\n\n/**\n * The web Select as a phone picker: the current value and a chevron, which open a bottom sheet of\n * the options, grouped, with a tick on the chosen one. Choosing ticks once and closes the sheet.\n */\nexport function Select({\n  options,\n  value,\n  onValueChange,\n  title,\n  placeholder = 'Choose',\n  clearLabel,\n  onClear,\n  disabled = false,\n  defaultOpen = false,\n  style,\n}: SelectProps) {\n  const [open, setOpen] = useState(defaultOpen);\n  const chosen = options.find((option) => option.value === value);\n  const groups = [...new Set(options.map((option) => option.group))];\n  return (\n    <>\n      <Pressable\n        accessibilityRole=\"button\"\n        accessibilityLabel={title}\n        accessibilityValue={{ text: chosen?.label ?? placeholder }}\n        accessibilityState={{ disabled, expanded: open }}\n        disabled={disabled}\n        hitSlop={8}\n        onPress={() => setOpen(true)}\n        style={({ pressed }) => [styles.trigger, pressed && styles.pressed, disabled && styles.disabled, style]}\n      >\n        <Text numberOfLines={1} style={chosen ? styles.value : styles.placeholder}>\n          {chosen?.label ?? placeholder}\n        </Text>\n        <ChevronDownIcon size={14} color=\"faint\" />\n      </Pressable>\n      <SheetFrame open={open} onClose={() => setOpen(false)}>\n        <View style={styles.sheet}>\n          <Text accessibilityRole=\"header\" style={styles.title}>\n            {title}\n          </Text>\n          {groups.map((group) => (\n            <View key={group ?? ''} accessibilityRole=\"radiogroup\" style={styles.group}>\n              {group === undefined ? null : <Text style={styles.groupLabel}>{group}</Text>}\n              <View style={styles.card}>\n                {options\n                  .filter((option) => option.group === group)\n                  .map((option, index, rows) => {\n                    const selected = option.value === value;\n                    return (\n                      <Pressable\n                        key={option.value}\n                        accessibilityRole=\"radio\"\n                        accessibilityState={{ checked: selected }}\n                        onPress={() => {\n                          selectionTick();\n                          setOpen(false);\n                          if (!selected) onValueChange(option.value);\n                        }}\n                        style={({ pressed }) => [\n                          styles.option,\n                          index < rows.length - 1 && styles.divider,\n                          pressed && styles.pressed,\n                        ]}\n                      >\n                        <View style={styles.optionText}>\n                          <Text style={[styles.optionLabel, selected && styles.selected]}>{option.label}</Text>\n                          {option.detail ? <Text style={styles.detail}>{option.detail}</Text> : null}\n                        </View>\n                        <View style={styles.tick}>{selected ? <CheckIcon size={18} color=\"green\" /> : null}</View>\n                      </Pressable>\n                    );\n                  })}\n              </View>\n            </View>\n          ))}\n          {onClear === undefined ? null : (\n            <Button\n              variant=\"ghost\"\n              size=\"md\"\n              onPress={() => {\n                setOpen(false);\n                onClear();\n              }}\n            >\n              {clearLabel ?? 'Clear'}\n            </Button>\n          )}\n        </View>\n      </SheetFrame>\n    </>\n  );\n}\n\nconst styles = StyleSheet.create((theme) => {\n  const text = (size: 'sm' | 'base' | 'lg') => ({\n    fontFamily: fontOf(theme.fontFamily.sans),\n    fontSize: theme.fontSize[size],\n    lineHeight: theme.lineHeight[size],\n  });\n  return {\n    trigger: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: theme.spacing(1.5),\n      minHeight: MIN_ROW_HEIGHT,\n      borderRadius: theme.borderRadius.md,\n    },\n    pressed: { opacity: 0.6 },\n    disabled: { opacity: DISABLED_OPACITY },\n    value: { ...text('sm'), color: theme.colors.text, maxWidth: MAX_VALUE_WIDTH },\n    placeholder: { ...text('sm'), color: theme.colors.faint, maxWidth: MAX_VALUE_WIDTH },\n    sheet: {\n      gap: theme.spacing(4),\n      paddingHorizontal: theme.spacing(5),\n      paddingTop: theme.spacing(1),\n      paddingBottom: theme.spacing(4),\n    },\n    title: { ...text('lg'), color: theme.colors.hi, fontWeight: theme.fontWeight.semibold },\n    group: { gap: theme.spacing(2) },\n    groupLabel: { ...text('sm'), color: theme.colors.dim, fontWeight: theme.fontWeight.semibold },\n    card: {\n      overflow: 'hidden',\n      borderRadius: theme.borderRadius.lg,\n      borderWidth: StyleSheet.hairlineWidth,\n      borderColor: theme.colors.border,\n      backgroundColor: theme.colors.panel,\n    },\n    option: {\n      flexDirection: 'row',\n      alignItems: 'flex-start',\n      gap: theme.spacing(3),\n      minHeight: MIN_ROW_HEIGHT,\n      paddingHorizontal: theme.spacing(4),\n      paddingVertical: theme.spacing(3),\n    },\n    divider: { borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: theme.colors['border-soft'] },\n    optionText: { flex: 1, minWidth: 0, gap: 2 },\n    optionLabel: { ...text('base'), color: theme.colors.hi, fontWeight: theme.fontWeight.medium },\n    selected: { color: theme.colors.green },\n    detail: { ...text('sm'), color: theme.colors.dim, lineHeight: theme.lineHeightRelaxed.sm },\n    tick: { width: 18, paddingTop: 2 },\n  };\n});\n"],"mappings":"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"}

package/dist/components/Switch.d.mts

@@ -0,0 +1,14 @@
+import { StyleProp, ViewStyle } from "react-native";
+//#region src/components/Switch.d.ts
+export interface SwitchProps {
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+  /** What the switch turns on, such as "Resize large images". */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+/** The web Switch as the platform's own: jade track when on, a selection tick on each change. */
+export declare function Switch({ value, onValueChange, disabled, accessibilityLabel, style }: SwitchProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Switch.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.mts","names":[],"sources":["../../src/components/Switch.tsx"],"mappings":";;iBAiBiB;EACf;EACA,gBAAgB;EAChB;;EAEA;EACA,QAAQ,UAAU;;;wBAIJ,SAAS,OAAO,eAAe,UAAkB,oBAAoB,SAAS,8BAAW,IAAA"}

package/dist/components/Switch.mjs

@@ -0,0 +1,37 @@
+import { selectionTick } from "../lib/haptics.mjs";
+import { withUnistyles } from "react-native-unistyles";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "react-native-unistyles/components/native/Switch";
+
+//#region src/components/Switch.tsx
+/**
+* Theme colours reach the platform switch through withUnistyles, so it follows theme changes. The thumb
+* is `on-selected` (near white in both schemes, as the platform thumb is), never a surface colour that
+* would go dark in dark mode. `activeThumbColor` only reaches react-native-web, whose own default is teal.
+*/
+const ThemedSwitch = withUnistyles(Switch, (theme) => ({
+	trackColor: {
+		true: theme.colors.green,
+		false: theme.colors.border
+	},
+	ios_backgroundColor: theme.colors.border,
+	thumbColor: theme.colors["on-selected"],
+	activeThumbColor: theme.colors["on-selected"]
+}));
+/** The web Switch as the platform's own: jade track when on, a selection tick on each change. */
+function Switch$1({ value, onValueChange, disabled = false, accessibilityLabel, style }) {
+	return /* @__PURE__ */ jsx(ThemedSwitch, {
+		value,
+		disabled,
+		accessibilityLabel,
+		onValueChange: (next) => {
+			selectionTick();
+			onValueChange(next);
+		},
+		style
+	});
+}
+
+//#endregion
+export { Switch$1 as Switch };
+//# sourceMappingURL=Switch.mjs.map

package/dist/components/Switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.mjs","names":["StyleProp","ViewStyle","withUnistyles","selectionTick","ThemedSwitch","RNSwitch","theme","trackColor","true","colors","green","false","border","ios_backgroundColor","thumbColor","activeThumbColor","SwitchProps","value","onValueChange","disabled","accessibilityLabel","style","Switch","next","RNSwitch","Switch"],"sources":["../../src/components/Switch.tsx"],"sourcesContent":["import { Switch as RNSwitch, type StyleProp, type ViewStyle } from 'react-native';\nimport { withUnistyles } from 'react-native-unistyles';\n\nimport { selectionTick } from '../lib/haptics';\n\n/**\n * Theme colours reach the platform switch through withUnistyles, so it follows theme changes. The thumb\n * is `on-selected` (near white in both schemes, as the platform thumb is), never a surface colour that\n * would go dark in dark mode. `activeThumbColor` only reaches react-native-web, whose own default is teal.\n */\nconst ThemedSwitch = withUnistyles(RNSwitch, (theme) => ({\n  trackColor: { true: theme.colors.green, false: theme.colors.border },\n  ios_backgroundColor: theme.colors.border,\n  thumbColor: theme.colors['on-selected'],\n  activeThumbColor: theme.colors['on-selected'],\n}));\n\nexport interface SwitchProps {\n  value: boolean;\n  onValueChange: (value: boolean) => void;\n  disabled?: boolean;\n  /** What the switch turns on, such as \"Resize large images\". */\n  accessibilityLabel?: string;\n  style?: StyleProp<ViewStyle>;\n}\n\n/** The web Switch as the platform's own: jade track when on, a selection tick on each change. */\nexport function Switch({ value, onValueChange, disabled = false, accessibilityLabel, style }: SwitchProps) {\n  return (\n    <ThemedSwitch\n      value={value}\n      disabled={disabled}\n      accessibilityLabel={accessibilityLabel}\n      onValueChange={(next) => {\n        selectionTick();\n        onValueChange(next);\n      }}\n      style={style}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;AAUA,MAAMI,eAAeF,cAAcG,SAAWC,WAAW;CACvDC,YAAY;EAAEC,MAAMF,MAAMG,OAAOC;EAAOC,OAAOL,MAAMG,OAAOG;CAAO;CACnEC,qBAAqBP,MAAMG,OAAOG;CAClCE,YAAYR,MAAMG,OAAO;CACzBM,kBAAkBT,MAAMG,OAAO;AACjC,EAAE;;AAYF,SAAgBa,SAAO,EAAEL,OAAOC,eAAeC,WAAW,OAAOC,oBAAoBC,SAAsB;CACzG,OACE,oBAAC,cAAD;EACSJ;EACGE;EACUC;EACpB,gBAAgBG,SAAS;GACvBpB,cAAc;GACde,cAAcK,IAAI;EACpB;EACOF;CAAM;AAGnB"}

package/dist/index.d.mts

@@ -20,10 +20,12 @@ import { MessageItem, MessageItemBody, MessageItemGroup, MessageItemGroupProps,
 import { Panel, PanelBody, PanelHeader, PanelPartProps } from "./components/Panel.mjs";
 import { SectionLabel } from "./components/SectionLabel.mjs";
 import { SegmentedControl, SegmentedControlOption, SegmentedControlProps } from "./components/SegmentedControl.mjs";
+import { Select, SelectOption, SelectProps } from "./components/Select.mjs";
 import { Sheet, SheetBody, SheetClose, SheetContent, SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetHeaderProps, SheetPartProps, SheetProps, SheetTitle, SheetTrigger } from "./components/Sheet.mjs";
 import { SheetList, SheetListProps } from "./components/SheetList.mjs";
 import { ShowMore, ShowMoreProps } from "./components/ShowMore.mjs";
 import { Spinner, SpinnerProps } from "./components/Spinner.mjs";
+import { Switch, SwitchProps } from "./components/Switch.mjs";
 import { TabBadge, TabBadgeProps, Tabs, TabsContent, TabsContentProps, TabsList, TabsListProps, TabsProps, TabsTrigger, TabsTriggerProps } from "./components/Tabs.mjs";
 import { SyntaxLine, SyntaxLineProps, useSyntaxLines } from "./components/SyntaxLine.mjs";
 import { Textarea, TextareaProps } from "./components/Textarea.mjs";
@@ -37,4 +39,4 @@ import { HostTag } from "./components/HostTag.mjs";
 import { InfoStrip } from "./components/InfoStrip.mjs";
 import { AnsiSpan, PresentedLine, ReviewComment, ansiSpans, buildReviewPrompt, collapseLines, hashlineBody, resultTextLines } from "@agimon-ai/po-web-components/text";
 import { IconColorContext, LiveDuration, LiveDurationProps, LiveDurationReading, PoNativeProvider, PoNativeProviderProps, sheetsYielded, yieldSheets } from "@agimon-ai/po-native-components/shell";
-export { ActivityIcon, AgentAvatar, type AgentState, AlertIcon, type AnnotationMark, AnnotationSurface, type AnnotationSurfaceProps, type AnsiSpan, ArrowRightIcon, AudioLinesIcon, Badge, type BadgeProps, type BadgeSize, type BadgeTone, BranchIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CodeBlock, type CodeBlockProps, CopyButton, type CopyButtonProps, CopyIcon, CountBadge, type CountBadgeProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, type DialogFooterProps, type DialogFooterVariant, DialogHeader, type DialogHeaderProps, type DialogPartProps, type DialogProps, DialogTitle, DialogTrigger, type DialogWidth, Dot, type DotProps, type DotSize, type DotTone, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuPartProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, type EmptyStateProps, type FieldSize, type FieldVariant, FileIcon, type FileLinkHandler, FolderIcon, ForkIcon, GearIcon, GlobeIcon, HashlineLines, type HashlineLinesProps, HomeIcon, HostFilter, type HostFilterProps, HostTag, IconColorContext, type IconName, type IconProps, ImageIcon, InfoStrip, Input, type InputProps, KebabIcon, Label, type LabelProps, LightbulbIcon, List, type ListProps, ListRow, type ListRowProps, LiveDuration, type LiveDurationProps, type LiveDurationReading, LockIcon, Markdown, type MarkdownImageLoader, type MarkdownProps, MenuIcon, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, type MessageItemGroupProps, MessageItemHeader, type MessageItemHeaderProps, type MessageItemPartProps, type MessageItemProps, type MessageItemState, MessageItemStatus, type MessageItemStatusProps, MicIcon, MonitorIcon, PaletteIcon, Panel, PanelBody, PanelHeader, type PanelPartProps, PlayCircleIcon, PlusIcon, PoNativeProvider, type PoNativeProviderProps, type PresentedLine, type ReviewComment, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SearchIcon, SectionLabel, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, SheetList, type SheetListProps, type SheetPartProps, type SheetProps, SheetTitle, SheetTrigger, ShieldIcon, ShowMore, type ShowMoreProps, SlidersIcon, SparklesIcon, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusTone, StopIcon, SyntaxLine, type SyntaxLineProps, TabBadge, type TabBadgeProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TaskIcon, Textarea, type TextareaProps, ToolPathLink, type ToolPathLinkProps, ToolResultImage, type ToolResultImageProps, TrashIcon, UserIcon, UsersIcon, WorkflowIcon, WrenchIcon, agentInitials, ansiSpans, buildReviewPrompt, collapseLines, fontOf, hashlineBody, impactLight, resultTextLines, selectionTick, sheetsYielded, toolTone, useMessageItem, useSyntaxLines, yieldSheets };
+export { ActivityIcon, AgentAvatar, type AgentState, AlertIcon, type AnnotationMark, AnnotationSurface, type AnnotationSurfaceProps, type AnsiSpan, ArrowRightIcon, AudioLinesIcon, Badge, type BadgeProps, type BadgeSize, type BadgeTone, BranchIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CodeBlock, type CodeBlockProps, CopyButton, type CopyButtonProps, CopyIcon, CountBadge, type CountBadgeProps, Dialog, DialogBody, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, type DialogFooterProps, type DialogFooterVariant, DialogHeader, type DialogHeaderProps, type DialogPartProps, type DialogProps, DialogTitle, DialogTrigger, type DialogWidth, Dot, type DotProps, type DotSize, type DotTone, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuItemVariant, DropdownMenuLabel, type DropdownMenuPartProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, type EmptyStateProps, type FieldSize, type FieldVariant, FileIcon, type FileLinkHandler, FolderIcon, ForkIcon, GearIcon, GlobeIcon, HashlineLines, type HashlineLinesProps, HomeIcon, HostFilter, type HostFilterProps, HostTag, IconColorContext, type IconName, type IconProps, ImageIcon, InfoStrip, Input, type InputProps, KebabIcon, Label, type LabelProps, LightbulbIcon, List, type ListProps, ListRow, type ListRowProps, LiveDuration, type LiveDurationProps, type LiveDurationReading, LockIcon, Markdown, type MarkdownImageLoader, type MarkdownProps, MenuIcon, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, type MessageItemGroupProps, MessageItemHeader, type MessageItemHeaderProps, type MessageItemPartProps, type MessageItemProps, type MessageItemState, MessageItemStatus, type MessageItemStatusProps, MicIcon, MonitorIcon, PaletteIcon, Panel, PanelBody, PanelHeader, type PanelPartProps, PlayCircleIcon, PlusIcon, PoNativeProvider, type PoNativeProviderProps, type PresentedLine, type ReviewComment, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SearchIcon, SectionLabel, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, type SheetHeaderProps, SheetList, type SheetListProps, type SheetPartProps, type SheetProps, SheetTitle, SheetTrigger, ShieldIcon, ShowMore, type ShowMoreProps, SlidersIcon, SparklesIcon, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusTone, StopIcon, Switch, type SwitchProps, SyntaxLine, type SyntaxLineProps, TabBadge, type TabBadgeProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TaskIcon, Textarea, type TextareaProps, ToolPathLink, type ToolPathLinkProps, ToolResultImage, type ToolResultImageProps, TrashIcon, UserIcon, UsersIcon, WorkflowIcon, WrenchIcon, agentInitials, ansiSpans, buildReviewPrompt, collapseLines, fontOf, hashlineBody, impactLight, resultTextLines, selectionTick, sheetsYielded, toolTone, useMessageItem, useSyntaxLines, yieldSheets };

package/dist/index.mjs

@@ -26,8 +26,10 @@ import { MessageItem, MessageItemBody, MessageItemGroup, MessageItemHeader, Mess
 import { Panel, PanelBody, PanelHeader } from "./components/Panel.mjs";
 import { SectionLabel } from "./components/SectionLabel.mjs";
 import { SegmentedControl } from "./components/SegmentedControl.mjs";
+import { Select } from "./components/Select.mjs";
 import { Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/Sheet.mjs";
 import { SheetList } from "./components/SheetList.mjs";
+import { Switch } from "./components/Switch.mjs";
 import { TabBadge, Tabs, TabsContent, TabsList, TabsTrigger } from "./components/Tabs.mjs";
 import { Textarea } from "./components/Textarea.mjs";
 import { ToolPathLink } from "./components/ToolPathLink.mjs";
@@ -37,4 +39,4 @@ import { InfoStrip } from "./components/InfoStrip.mjs";
 import { ansiSpans, buildReviewPrompt, collapseLines, hashlineBody, resultTextLines } from "@agimon-ai/po-web-components/text";
 import { IconColorContext, LiveDuration, PoNativeProvider, sheetsYielded, yieldSheets } from "@agimon-ai/po-native-components/shell";
 
-export { ActivityIcon, AgentAvatar, AlertIcon, AnnotationSurface, ArrowRightIcon, AudioLinesIcon, Badge, BranchIcon, Button, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CodeBlock, CopyButton, CopyIcon, CountBadge, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Dot, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, FileIcon, FolderIcon, ForkIcon, GearIcon, GlobeIcon, HashlineLines, HomeIcon, HostFilter, HostTag, IconColorContext, ImageIcon, InfoStrip, Input, KebabIcon, Label, LightbulbIcon, List, ListRow, LiveDuration, LockIcon, Markdown, MenuIcon, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, MessageItemHeader, MessageItemStatus, MicIcon, MonitorIcon, PaletteIcon, Panel, PanelBody, PanelHeader, PlayCircleIcon, PlusIcon, PoNativeProvider, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SearchIcon, SectionLabel, SegmentedControl, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetTitle, SheetTrigger, ShieldIcon, ShowMore, SlidersIcon, SparklesIcon, Spinner, StatusBadge, StopIcon, SyntaxLine, TabBadge, Tabs, TabsContent, TabsList, TabsTrigger, TaskIcon, Textarea, ToolPathLink, ToolResultImage, TrashIcon, UserIcon, UsersIcon, WorkflowIcon, WrenchIcon, agentInitials, ansiSpans, buildReviewPrompt, collapseLines, fontOf, hashlineBody, impactLight, resultTextLines, selectionTick, sheetsYielded, toolTone, useMessageItem, useSyntaxLines, yieldSheets };
+export { ActivityIcon, AgentAvatar, AlertIcon, AnnotationSurface, ArrowRightIcon, AudioLinesIcon, Badge, BranchIcon, Button, CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CodeBlock, CopyButton, CopyIcon, CountBadge, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Dot, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, EditIcon, EmptyState, FileIcon, FolderIcon, ForkIcon, GearIcon, GlobeIcon, HashlineLines, HomeIcon, HostFilter, HostTag, IconColorContext, ImageIcon, InfoStrip, Input, KebabIcon, Label, LightbulbIcon, List, ListRow, LiveDuration, LockIcon, Markdown, MenuIcon, MessageIcon, MessageItem, MessageItemBody, MessageItemGroup, MessageItemHeader, MessageItemStatus, MicIcon, MonitorIcon, PaletteIcon, Panel, PanelBody, PanelHeader, PlayCircleIcon, PlusIcon, PoNativeProvider, STATUS_EDGE, STATUS_GLYPH, STATUS_LABEL, SearchIcon, SectionLabel, SegmentedControl, Select, SendIcon, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetTitle, SheetTrigger, ShieldIcon, ShowMore, SlidersIcon, SparklesIcon, Spinner, StatusBadge, StopIcon, Switch, SyntaxLine, TabBadge, Tabs, TabsContent, TabsList, TabsTrigger, TaskIcon, Textarea, ToolPathLink, ToolResultImage, TrashIcon, UserIcon, UsersIcon, WorkflowIcon, WrenchIcon, agentInitials, ansiSpans, buildReviewPrompt, collapseLines, fontOf, hashlineBody, impactLight, resultTextLines, selectionTick, sheetsYielded, toolTone, useMessageItem, useSyntaxLines, yieldSheets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agimon-ai/po-native-components",
-  "version": "0.0.0-alpha.98",
+  "version": "0.0.0-alpha.99",
   "description": "Shared React Native components for Po and its native plugins: the web component library's look and API on native parts, tuned to the Po palette.",
   "keywords": [
     "ai",
@@ -49,12 +49,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@agimon-ai/po-web-components": "0.0.0-alpha.98"
+    "@agimon-ai/po-web-components": "0.0.0-alpha.99"
   },
   "devDependencies": {
-    "@agimon-ai/po-build": "0.0.0-alpha.98",
-    "@agimon-ai/po-core": "0.0.0-alpha.98",
-    "@agimon-ai/vibe-lint-plugin-po-web": "0.0.0-alpha.98",
+    "@agimon-ai/po-build": "0.0.0-alpha.99",
+    "@agimon-ai/po-core": "0.0.0-alpha.99",
+    "@agimon-ai/vibe-lint-plugin-po-web": "0.0.0-alpha.99",
     "@babel/core": "7.29.7",
     "@expo/vector-icons": "15.1.1",
     "@fontsource-variable/ibm-plex-sans": "5.3.0",