@buoy-gg/time-machine 7.0.41 → 7.0.43

package/lib/module/components/floating/NamePromptModal.js

@@ -1,188 +1 @@
-"use strict";
-
-/**
- * "Name this restore point": the dialog `+` on the restore bar opens.
- *
- * A real Modal rather than a panel under the strip, so it sits centered over
- * the app, above the keyboard, wherever the strip happens to be. An empty
- * name is allowed: the store then names the point after the screen and the
- * time, the same default the tool's capture bar uses.
- */
-import { useEffect, useState } from "react";
-import { KeyboardAvoidingView, Modal, Platform, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
-import { night } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function NamePromptModal({
-  visible,
-  summary,
-  onCapture,
-  onCancel
-}) {
-  const [name, setName] = useState("");
-  // Every opening starts blank, so a cancelled name never comes back.
-  useEffect(() => {
-    if (visible) setName("");
-  }, [visible]);
-  const submit = () => onCapture(name.trim());
-  return /*#__PURE__*/_jsx(Modal, {
-    visible: visible,
-    transparent: true,
-    animationType: "fade",
-    onRequestClose: onCancel,
-    statusBarTranslucent: true,
-    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
-      behavior: Platform.OS === "ios" ? "padding" : undefined,
-      style: styles.fill,
-      children: /*#__PURE__*/_jsx(Pressable, {
-        style: styles.backdrop,
-        onPress: onCancel,
-        accessibilityLabel: "Cancel",
-        testID: "time-machine-bar-name-backdrop",
-        children: /*#__PURE__*/_jsxs(Pressable, {
-          style: styles.card,
-          onPress: event => event.stopPropagation(),
-          testID: "time-machine-bar-name-panel"
-          // A Pressable is one accessibility element by default, which
-          // hid the field and both buttons from VoiceOver and from tests.
-          ,
-          accessible: false,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.title,
-            children: "Name this restore point"
-          }), summary ? /*#__PURE__*/_jsx(Text, {
-            style: styles.summary,
-            testID: "time-machine-bar-name-summary",
-            children: summary
-          }) : null, /*#__PURE__*/_jsx(TextInput, {
-            testID: "time-machine-bar-name-input",
-            accessibilityLabel: "Restore point name",
-            value: name,
-            onChangeText: setName,
-            onSubmitEditing: submit,
-            placeholder: "Screen and time, if left empty",
-            placeholderTextColor: night.color.placeholder,
-            autoFocus: true,
-            autoCorrect: false
-            // Names are labels, not sentences: "bag" should stay "bag".
-            ,
-            autoCapitalize: "none",
-            returnKeyType: "done",
-            style: styles.input
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.hint,
-            children: "Captures the state the app is in right now and arms it on the bar."
-          }), /*#__PURE__*/_jsxs(View, {
-            style: styles.actions,
-            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-              testID: "time-machine-bar-name-cancel",
-              accessibilityRole: "button",
-              onPress: onCancel,
-              style: styles.secondary,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.secondaryText,
-                children: "Cancel"
-              })
-            }), /*#__PURE__*/_jsx(TouchableOpacity, {
-              testID: "time-machine-bar-name-capture",
-              accessibilityRole: "button",
-              accessibilityLabel: "Capture and arm this restore point",
-              onPress: submit,
-              style: styles.primary,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.primaryText,
-                children: "Capture"
-              })
-            })]
-          })]
-        })
-      })
-    })
-  });
-}
-const styles = StyleSheet.create({
-  fill: {
-    flex: 1
-  },
-  backdrop: {
-    flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.55)",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 24
-  },
-  card: {
-    width: "100%",
-    maxWidth: 360,
-    borderRadius: night.radius.sheet,
-    borderWidth: 1,
-    borderColor: night.color.separator,
-    backgroundColor: night.color.surface,
-    padding: 18,
-    gap: 12,
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 12
-    },
-    shadowOpacity: 0.4,
-    shadowRadius: 24,
-    elevation: 12
-  },
-  title: {
-    color: night.color.text,
-    fontSize: night.font.title,
-    fontWeight: "600"
-  },
-  input: {
-    minHeight: 44,
-    borderRadius: night.radius.input,
-    borderWidth: 1,
-    borderColor: night.color.accentBorder,
-    backgroundColor: night.color.surfaceElevated,
-    color: night.color.text,
-    fontSize: night.font.row,
-    paddingHorizontal: 12
-  },
-  summary: {
-    color: night.color.textTertiary,
-    fontSize: night.font.caption,
-    marginTop: -6
-  },
-  hint: {
-    color: night.color.textSecondary,
-    fontSize: night.font.caption,
-    lineHeight: 18
-  },
-  actions: {
-    flexDirection: "row",
-    justifyContent: "flex-end",
-    gap: 10,
-    marginTop: 4
-  },
-  secondary: {
-    minHeight: 40,
-    paddingHorizontal: 14,
-    borderRadius: night.radius.input,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  secondaryText: {
-    color: night.color.textSecondary,
-    fontSize: 14,
-    fontWeight: "600"
-  },
-  primary: {
-    minHeight: 40,
-    paddingHorizontal: 18,
-    borderRadius: night.radius.input,
-    backgroundColor: night.color.accent,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  primaryText: {
-    color: night.color.onAccent,
-    fontSize: 14,
-    fontWeight: "700"
-  }
-});
-//# sourceMappingURL=NamePromptModal.js.map
+"use strict";import{useEffect as y,useState as f}from"react";import{KeyboardAvoidingView as b,Modal as g,Platform as x,Pressable as d,StyleSheet as C,Text as r,TextInput as T,TouchableOpacity as m,View as S}from"react-native";import{night as e}from"@buoy-gg/shared-ui";import{jsx as o,jsxs as u}from"react/jsx-runtime";export function NamePromptModal({visible:i,summary:n,onCapture:p,onCancel:a}){const[s,l]=f("");y(()=>{if(i)l("")},[i]);const c=()=>p(s.trim());return o(g,{visible:i,transparent:true,animationType:"fade",onRequestClose:a,statusBarTranslucent:true,children:o(b,{behavior:x.OS==="ios"?"padding":void 0,style:t.fill,children:o(d,{style:t.backdrop,onPress:a,accessibilityLabel:"Cancel",testID:"time-machine-bar-name-backdrop",children:u(d,{style:t.card,onPress:h=>h.stopPropagation(),testID:"time-machine-bar-name-panel",accessible:false,children:[o(r,{style:t.title,children:"Name this restore point"}),n?o(r,{style:t.summary,testID:"time-machine-bar-name-summary",children:n}):null,o(T,{testID:"time-machine-bar-name-input",accessibilityLabel:"Restore point name",value:s,onChangeText:l,onSubmitEditing:c,placeholder:"Screen and time, if left empty",placeholderTextColor:e.color.placeholder,autoFocus:true,autoCorrect:false,autoCapitalize:"none",returnKeyType:"done",style:t.input}),o(r,{style:t.hint,children:"Captures the state the app is in right now and arms it on the bar."}),u(S,{style:t.actions,children:[o(m,{testID:"time-machine-bar-name-cancel",accessibilityRole:"button",onPress:a,style:t.secondary,children:o(r,{style:t.secondaryText,children:"Cancel"})}),o(m,{testID:"time-machine-bar-name-capture",accessibilityRole:"button",accessibilityLabel:"Capture and arm this restore point",onPress:c,style:t.primary,children:o(r,{style:t.primaryText,children:"Capture"})})]})]})})})})}const t=C.create({fill:{flex:1},backdrop:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.55)",alignItems:"center",justifyContent:"center",padding:24},card:{width:"100%",maxWidth:360,borderRadius:e.radius.sheet,borderWidth:1,borderColor:e.color.separator,backgroundColor:e.color.surface,padding:18,gap:12,shadowColor:"#000",shadowOffset:{width:0,height:12},shadowOpacity:.4,shadowRadius:24,elevation:12},title:{color:e.color.text,fontSize:e.font.title,fontWeight:"600"},input:{minHeight:44,borderRadius:e.radius.input,borderWidth:1,borderColor:e.color.accentBorder,backgroundColor:e.color.surfaceElevated,color:e.color.text,fontSize:e.font.row,paddingHorizontal:12},summary:{color:e.color.textTertiary,fontSize:e.font.caption,marginTop:-6},hint:{color:e.color.textSecondary,fontSize:e.font.caption,lineHeight:18},actions:{flexDirection:"row",justifyContent:"flex-end",gap:10,marginTop:4},secondary:{minHeight:40,paddingHorizontal:14,borderRadius:e.radius.input,alignItems:"center",justifyContent:"center"},secondaryText:{color:e.color.textSecondary,fontSize:14,fontWeight:"600"},primary:{minHeight:40,paddingHorizontal:18,borderRadius:e.radius.input,backgroundColor:e.color.accent,alignItems:"center",justifyContent:"center"},primaryText:{color:e.color.onAccent,fontSize:14,fontWeight:"700"}});