@nick-skriabin/glyph 0.1.30 → 0.1.32

package/README.md

@@ -135,6 +135,16 @@ Text input field with cursor and placeholder support.
 
 Supports `multiline` for multi-line editing, `autoFocus` for automatic focus on mount. The cursor is always visible when focused.
 
+**Input types** for validation:
+
+```tsx
+// Text input (default) - accepts any character
+<Input type="text" value={name} onChange={setName} />
+
+// Number input - only accepts digits, decimal point, minus sign
+<Input type="number" value={age} onChange={setAge} placeholder="0" />
+```
+
 **Input masking** with `onBeforeChange` for validation/formatting:
 
 ```tsx
@@ -336,6 +346,25 @@ Declarative keyboard shortcut. Renders nothing.
 <Keybind keypress="q" onPress={() => exit()} />
 ```
 
+**Modifiers:** `ctrl`, `alt`, `shift`, `meta` (Cmd/Super). Combine with `+`: `"ctrl+shift+p"`, `"alt+return"`.
+
+**Priority keybinds:** Use `priority` prop to run BEFORE focused input handlers. Useful for keybinds that should work even when an Input is focused:
+
+```tsx
+<Keybind keypress="ctrl+return" onPress={submit} priority />
+<Keybind keypress="alt+return" onPress={submit} priority />
+```
+
+**Terminal configuration:** Some keybinds like `ctrl+return` require terminal support:
+
+| Terminal | Configuration |
+|----------|---------------|
+| **Ghostty** | Add to `~/.config/ghostty/config`: `keybind = ctrl+enter=text:\x1b[13;5~` |
+| **iTerm2** | Profiles → Keys → General → Enable "CSI u" mode |
+| **Kitty/WezTerm** | Works out of the box |
+
+`alt+return` works universally without configuration.
+
 ### `<Progress>`
 
 Determinate or indeterminate progress bar. Uses `useLayout` to measure actual width and renders block characters.
@@ -460,6 +489,59 @@ const { focused, focus } = useFocus(ref);
 </Box>
 ```
 
+### `useFocusable(options)`
+
+Make any element focusable with full keyboard support. Perfect for building custom interactive components.
+
+```tsx
+import { useFocusable, Box, Text } from "@nick-skriabin/glyph";
+
+function CustomPicker({ items, onSelect }) {
+  const [selected, setSelected] = useState(0);
+  
+  const { ref, isFocused } = useFocusable({
+    onKeyPress: (key) => {
+      if (key.name === "up") {
+        setSelected(s => Math.max(0, s - 1));
+        return true; // Consume the key
+      }
+      if (key.name === "down") {
+        setSelected(s => Math.min(items.length - 1, s + 1));
+        return true;
+      }
+      if (key.name === "return") {
+        onSelect(items[selected]);
+        return true;
+      }
+      return false; // Let other handlers process
+    },
+    onFocus: () => console.log("Picker focused"),
+    onBlur: () => console.log("Picker blurred"),
+    disabled: false, // Set to true to skip in tab order
+  });
+
+  return (
+    <Box
+      ref={ref}
+      focusable
+      style={{ 
+        border: "round",
+        borderColor: isFocused ? "cyan" : "gray",
+        padding: 1,
+      }}
+    >
+      {items.map((item, i) => (
+        <Text key={i} style={{ inverse: i === selected }}>
+          {i === selected ? "> " : "  "}{item}
+        </Text>
+      ))}
+    </Box>
+  );
+}
+```
+
+Returns `{ ref, isFocused, focus, focusId }`. The `ref` must be attached to an element with `focusable` prop.
+
 ### `useLayout(nodeRef)`
 
 Subscribe to a node's computed layout.

package/dist/index.cjs

@@ -2394,7 +2394,8 @@ function Input(props) {
     style,
     focusedStyle,
     multiline,
-    autoFocus
+    autoFocus,
+    type = "text"
   } = props;
   const [internalValue, setInternalValue] = React15.useState(defaultValue);
   const [cursorPos, setCursorPos] = React15.useState(defaultValue.length);
@@ -2433,7 +2434,8 @@ function Input(props) {
     onKeyPress,
     onBeforeChange,
     multiline: multiline ?? false,
-    innerWidth
+    innerWidth,
+    type
   });
   stateRef.current = {
     isControlled,
@@ -2441,7 +2443,8 @@ function Input(props) {
     onKeyPress,
     onBeforeChange,
     multiline: multiline ?? false,
-    innerWidth
+    innerWidth,
+    type
   };
   React15.useEffect(() => {
     if (!focusCtx || !focusIdRef.current || !nodeRef.current) return;
@@ -2658,6 +2661,15 @@ function Input(props) {
       if (key.name.length > 1) return false;
       const ch = key.sequence;
       if (ch.length === 1 && ch.charCodeAt(0) >= 32) {
+        const { type: inputType } = stateRef.current;
+        if (inputType === "number") {
+          const isDigit = /[0-9]/.test(ch);
+          const isDecimal = ch === "." && !val.includes(".");
+          const isMinus = ch === "-" && pos === 0 && !val.includes("-");
+          if (!isDigit && !isDecimal && !isMinus) {
+            return true;
+          }
+        }
         const newVal = val.slice(0, pos) + ch + val.slice(pos);
         updateValue(newVal, pos + 1);
         return true;
@@ -4299,6 +4311,73 @@ function useFocus(nodeRef) {
   }, [focusCtx, id]);
   return { focused: isFocused, focus };
 }
+function useFocusable(options = {}) {
+  const { disabled, onFocus, onBlur, onKeyPress } = options;
+  const focusCtx = React15.useContext(FocusContext);
+  const inputCtx = React15.useContext(InputContext);
+  const nodeRef = React15.useRef(null);
+  const focusIdRef = React15.useRef(null);
+  const [isFocused, setIsFocused] = React15.useState(false);
+  const onFocusRef = React15.useRef(onFocus);
+  const onBlurRef = React15.useRef(onBlur);
+  const onKeyPressRef = React15.useRef(onKeyPress);
+  onFocusRef.current = onFocus;
+  onBlurRef.current = onBlur;
+  onKeyPressRef.current = onKeyPress;
+  const ref = React15.useCallback((node) => {
+    nodeRef.current = node;
+    if (node) {
+      focusIdRef.current = node.focusId ?? null;
+    } else {
+      focusIdRef.current = null;
+    }
+  }, []);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current || !nodeRef.current) return;
+    return focusCtx.register(focusIdRef.current, nodeRef.current);
+  }, [focusCtx]);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current) return;
+    focusCtx.setSkippable(focusIdRef.current, !!disabled);
+  }, [focusCtx, disabled]);
+  React15.useEffect(() => {
+    if (!focusCtx || !focusIdRef.current) return;
+    const fid = focusIdRef.current;
+    const initiallyFocused = focusCtx.focusedId === fid;
+    setIsFocused(initiallyFocused);
+    return focusCtx.onFocusChange((newId) => {
+      const nowFocused = newId === fid;
+      setIsFocused((wasFocused) => {
+        if (nowFocused && !wasFocused) {
+          onFocusRef.current?.();
+        } else if (!nowFocused && wasFocused) {
+          onBlurRef.current?.();
+        }
+        return nowFocused;
+      });
+    });
+  }, [focusCtx]);
+  React15.useEffect(() => {
+    if (!inputCtx || !focusIdRef.current || disabled) return;
+    const fid = focusIdRef.current;
+    const handler = (key) => {
+      if (focusCtx?.focusedId !== fid) return false;
+      return onKeyPressRef.current?.(key) === true;
+    };
+    return inputCtx.registerInputHandler(fid, handler);
+  }, [inputCtx, focusCtx, disabled]);
+  const focus = React15.useCallback(() => {
+    if (focusCtx && focusIdRef.current) {
+      focusCtx.requestFocus(focusIdRef.current);
+    }
+  }, [focusCtx]);
+  return {
+    ref,
+    isFocused,
+    focus,
+    focusId: focusIdRef.current
+  };
+}
 function useApp() {
   const ctx = React15.useContext(AppContext);
   if (!ctx) {
@@ -4439,6 +4518,7 @@ exports.render = render;
 exports.useApp = useApp;
 exports.useDialog = useDialog;
 exports.useFocus = useFocus;
+exports.useFocusable = useFocusable;
 exports.useInput = useInput;
 exports.useLayout = useLayout;
 exports.useToast = useToast;