{"_id":"react-gui","_rev":"28-55768268fe7477b3688e836a2e4ed0ab","name":"react-gui","description":"React UI framework","dist-tags":{"latest":"0.2.1","canary":"0.0.0-c60046238"},"versions":{"0.0.1":{"name":"react-gui","description":"A collection of prebuilt React UI components","version":"0.0.1","author":{"name":"Jeff Wooden","email":"jeff@rocana.com"},"license":"MIT","keywords":["react","react-gui","react-ui","react-components"],"repository":{"type":"git","url":"git+https://github.com/woodenconsulting/react-gui.git"},"bugs":{"url":"https://github.com/woodenconsulting/react-gui/issues"},"dependencies":{"react":"15.3.1","react-dom":"15.3.1"},"gitHead":"f3023a84c40d0157fd1bea05652d0fa707c68426","homepage":"https://github.com/woodenconsulting/react-gui#readme","_id":"react-gui@0.0.1","scripts":{},"_shasum":"f206123a7d7952c330c5f0941df49388d4034292","_from":".","_npmVersion":"3.8.6","_nodeVersion":"4.4.2","_npmUser":{"name":"woodenconsulting","email":"woodenconsulting@gmail.com"},"dist":{"shasum":"f206123a7d7952c330c5f0941df49388d4034292","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.1.tgz","integrity":"sha512-jXZ6xNoVvA77MZT+lKCvGyYodClnI+VbGCYKjBMKbWgentSykWFuloYH3NxAewvUS1mWjQ2vDw8fEppxro4AzQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdVxXpqxPnRVO1QAS1JpLvmUY8C50CFIUNirNiWN/exAIhAMB62m4IYHBRmRNgT7NrqEugvDZNHq/ordrRfv95LjNl"}]},"maintainers":[{"name":"woodenconsulting","email":"woodenconsulting@gmail.com"}],"_npmOperationalInternal":{"host":"packages-16-east.internal.npmjs.com","tmp":"tmp/react-gui-0.0.1.tgz_1475726250781_0.04133354849182069"},"directories":{}},"0.0.0-d319c53":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-d319c53","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0","normalize-css-color":"^1.0.2"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"bugs":{"url":"https://github.com/necolas/react-gui/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-d319c53","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-Zugpb0JR4QAYGT7USFAYt60iftAWNyLmkC4Y8MQBuO2qB5RkPk0lqswuq2ZaXVwL+rwt5hAodC1OO263W/BeEA==","shasum":"11179f7a6a6e1950f6f733903ea52731e5bcf87a","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-d319c53.tgz","fileCount":2,"unpackedSize":2615,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9TBvCRA9TVsSAnZWagAAGQoP/1EMw8jK1Z0n0pojKWri\nbWrCBkBwZY0svy5UYdsaJJ6fE7jhVyecJcvxuw1Knmi4xqdMSaUOdqqVvd1P\nNtttqI1UwboV4Z3rJcXCEak/m3/7xqXcZfZuVl+75R6jWAOvhiJRW0X2SqvQ\nTJMbSN8H4hHNz34voEh/fVYKvPxC/cRxHHRnqXTCt+dbot8BF5f/JuUfKjiC\niViz8KzQRt7lpnG/11Hrsb/qbgpxWsUz7WOubN/69Kr0pDBGQK3IwbMHo/XA\nylJn68OW28PSe74BJJBlzRH9YtBHUAz4k6EpwlFN/SYw10QJqlhzqS44ACMd\nKJtKMPF3WEGXIfkraZnlWebV+f1aLMuRDP3Vyb25CFjfZEahdUVRsai1djlM\nDmZ1Xtzjq4ShYT3khJ8or4K1eCVFfwdvec6ty2le3hzMuuHsCEV8p2FYRGFK\n5ZJwHW8eU3grAjh9ZR8p9nO6gYnchSedBL6jKx4fHKycqebqqfgvQOndeHSc\nIVKd5buu2ywojy+tfFFDbB1u6OV0iZ+f05/Shx4rWIdaV2fw/49qUtg9+0sq\nRTOrQnJudAuiW6lI3Ly22/fCtY7anh681rnwh3vHw8rBFDWo/IrN7eVFntrt\nV9XV6x0RXgkudG5miC3XTwsxU5pSG9OcOYDIounNhcxigGVP6v65hGLJHdME\nZcvg\r\n=oO9R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/XjvJtrF+vDUl0EZWEeGYEx+KrjW3vYfhsJ230quO1AiEA4iZCycxjliVuqtca15C8HgCbM9bY1/UCtOIF61DuyvA="}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-d319c53_1593127022864_0.895568081493618"},"_hasShrinkwrap":false},"0.0.0-65ef3ba":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-65ef3ba","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0","normalize-css-color":"^1.0.2"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"readme":"# react-gui\n\nHooks are the mechanism to work with events, gestures, and other behaviors. This allows for easier composition of behaviors (vs using components and merging props) and helps to limit churn in the component APIs. These Hooks can support the implementation of the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/) in a reusable way.\n\n## Components\n\nThe foundational components are adapted from those used in React Native today. These components can adopt behaviors by linking refs to the event and interaction hooks.\n\n### View\n\nView is the fundamental layout primitive. It has built in accessibility controls, enforces flexbox columns by default (and supports grid and float layout). Raw text nodes are not allowed as children or siblings of View, and no text-related styling is supported. A View nested within a Text will render inline without altering its display or that of its children. The full set of accessibility props can be set on a `View` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the direction of the layout to `ltr` or `rtl`.\n* `focusable`: make the view focusable with a keyboard.\n* `href`: make the view render as a link.\n* `hrefAttrs`: configure the link behavior.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (not typographic styles).\n* `testID`: label the element with a test selector.\n\n### Text\n\nText is the fundamental text primitive. It has built in accessibility controls, enforces inline layout by default, provides limited inheritance of text styles, and supports View as children. It inherits typographic styles from ancestor `Text` elements (as long as the chain of text elements is not interrupted by a `View`). By default, text is rendered using the native platform’s algorithm to determine the directionality of the content language. The full set of accessibility props can be set on a `Text` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the writing direction of the text to `ltr` or `rtl`.\n* `focusable`: make the text focusable with a keyboard.\n* `href`: make the text render as an inline link.\n* `hrefAttrs`: configure the link behavior.\n* `lang`: the language of the content text.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (including typographic styles).\n* `testID`: label the element with a test selector.\n\n## APIs\n\n### StyleSheet\n\nWork with strict styles that provide deterministic rendering and automatically adapt to localized writing direction.\n\n```js\nimport View from 'react-gui/view';\nimport StyleSheet from 'react-gui/style-sheet';\n\nfunction Component() {\n  return <View style={styles.example} />\n}\n\nconst styles = StyleSheet.create({\n  example: {\n    borderWidth: 5\n  }\n});\n```\n\n## Interactions\n\nHigh-level interactions that simplify working with accessible behaviors across devices and platforms. These hooks (and the underlying event hooks) make it easy to work with pointer gestures, keyboard interactions, and layout changes to adjust a component's render tree and styles. The interaction hooks cause a component to update when their return value changes (if this is not desired, use the event hooks).\n\n### useActiveModality\n\nReflects the modality that is currently active: `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport View from 'react-gui/view';\nimport useActiveModality from 'react-gui/use-active-modality';\n\nfunction Component() {\n  const { activeModality } = useActiveModality();\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocused && styles.focus\n      ]}\n    />\n  );\n}\n```\n\n\n### useFocus\n\nReflects whether the element is focused.\n\n```js\nimport View from 'react-gui/view';\nimport useFocus from 'react-gui/use-focus';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocused } = useFocus(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocused && styles.focus\n      ]}\n    />\n  );\n}\n```\n\n### useFocusVisible\n\nReflects whether the element is visibly focused. `isFocusVisible` is true when the focus visibility of the target element changes, i.e., it is called when the element is focused with a keyboard, and when the element either loses focus or is interacted with using a pointer. `isFocusVisibleWithin` is also true when these changes occur in the *subtree* of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusVisible from 'react-gui/use-focus-visible';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusVisible, isFocusVisibleWithin } = useFocusVisible(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusVisible && styles.focusRing,\n        // example: only change styles if the element itself is not visibly focused\n        !isFocusVisible && isFocusVisibleWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\n### useFocusWithin\n\nReflects whether the element is focused or contains the currently focused element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusWithin from 'react-gui/use-focus-within';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusWithin } = useFocusWithin(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\n### useHover\n\nReflects whether the element is hovered and (optionally) where the pointer is on screen.\n\n```js\nimport View from 'react-gui/view';\nimport useHover from 'react-gui/use-hover';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isHovered, x, y } = useHover(ref, {\n    contain: true,\n    updates: true\n  });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\n### useLayout\n\nReflects the `border-box` layout of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useLayout from 'react-gui/use-layout';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { x, y, width, height } = useLayout(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\n## Events\n\nWorking with events from within components is done with hooks. The framework provides platform-agnostic high-level event abstractions for common gestures, as well as providing web-specific, low-level APIs for working directly with specific native events.\n\n### useClickEvents(ref, config)\n\nListen to \"click\" events on the element. The `e.detail` property reflects how many clicks have occurred in short succession.\n\n```js\nimport View from 'react-gui/view';\nimport useClickEvents from 'react-gui/use-click-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useClickEvents(ref, {\n    onClick,\n    onClickCapture\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useFocusEvents(ref, config)\n\nListen to \"focus\" events on the element. The `blur` and `focus` events do not bubble.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusEvents from 'react-gui/use-focus-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useFocusEvents(ref, {\n    onBlur,\n    onBlurCapture,\n    onFocus,\n    onFocusCapture,\n    onFocusChange\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useFocusWithinEvents(ref, config)\n\nListen to \"focus\" events that occur within the subtree of the element. `onBlurWithin` and `onFocusWithin` are called *each time* the focus moves within the subtree, whereas `onFocusWithinChange` is only called once when focus enters and leaves the entire subtree.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusWithinEvents from 'react-gui/use-focus-within-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useFocusWithinEvents(ref, {\n    onBlurWithin,\n    onFocusWithin,\n    onFocusWithinChange\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useHoverEvents(ref, config)\n\nListen to pointer \"hover\" events on the element. These events are only fired for modalities that can hover over elements, e.g., 'mouse' interactions. Hover is not accessible to touch or keyboard interactions. Hover events bubble and the `contain` prop should be used to contain hover events to a specific subtree.\n\n```js\nimport View from 'react-gui/view';\nimport useHoverEvents from 'react-gui/use-hover-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useHoverEvents(ref, {\n    contain: true,\n    onHoverChange,\n    onHoverStart,\n    onHoverUpdate,\n    onHoverEnd,\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useKeyboardEvents(ref, config)\n\nListen to \"keyboard\" events on the element. These events are only fired when IME composition is not taking place.\n\n```js\nimport View from 'react-gui/view';\nimport useKeyboardEvents from 'react-gui/use-keyboard-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useKeyboardEvents(ref, {\n    onKeyDown,\n    onKeyDownCapture,\n    onKeyUp,\n    onKeyUpCapture\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useLayoutEvents(ref, config)\n\nListen to changes in \"layout\" on the element. The `onLayout` event will return a layout object corresponding to the `border-box` dimensions, and `onLayoutContent` the `context-box` dimensions. (This hook is implemented with `ResizeObserver`.)\n\n```js\nimport View from 'react-gui/view';\nimport useLayoutEvents from 'react-gui/use-layout-events';\n\nfunction Component({ onLayout, onLayoutContent }) {\n  const ref = React.useRef(null);\n\n  useLayoutEvents(ref, {\n    onLayout,\n    onLayoutContent\n  });\n\n  return <View ref={ref} />\n}\n```\n\n<!--\n### usePanEvents(ref, config)\n\nListen to pointer \"pan\" events on the element. These events are only fired for pointers, i.e., these interactions are not accessible to keyboards. (This hook is implemented with `useResponderEvents`.)\n\n```js\nimport View from 'react-gui/view';\nimport usePanEvents from 'react-gui/use-pan-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePanEvents(ref, {\n    onStartShouldSet,\n    onMoveShouldSet(e, gestureState) {\n      // start gesture once centroid of pointers has moved horizontally\n      if (MathgestureState.deltaX > 10) {\n        return true;\n      }\n    },\n    onPanStart,\n    onPanUpdate,\n    onPanEnd,\n    onPanCancel\n  });\n\n  return <View ref={ref} />\n}\n```\n-->\n<!--\n### usePressEvents(ref, config)\n\nListen to \"press\" events on the element. The press event collection combines \"tap\", \"keyboard\", and \"click\" interactions, providing an accessible way to listen to user interactions from all modality types. The `onPress` event is equivalent to the native `click` event, which means it may be called in isolation (by assistive technology, etc.) and it may not be bookended by `onPressStart` and `onPressEnd`.\n\n```js\nimport View from 'react-gui/view';\nimport usePressEvents from 'react-gui/use-tap-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePressEvents(ref, {\n    onPressChange,\n    onPressStart,\n    onPressUpdate,\n    onPressEnd,\n    onPressCancel,\n    onPress\n  });\n\n  return <View acessibilityRole=\"button\" ref={ref} />\n}\n```\n-->\n\n### useResponderEvents(ref, config)\n\nListen to pointer \"responder\" events on the element. See the [Responder System README](./use-responder-events/README.nd) for documentation.\n\n```js\nimport View from 'react-gui/view';\nimport useResponderEvents from 'react-gui/use-responder-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useResponderEvents(ref, {\n    disabled,\n    onStartShouldSetResponder,\n    onResponderGrant,\n    onResponderStart,\n    onResponderMove,\n    onResponderEnd,\n    onResponderRelease,\n    onResponderTerminate,\n  });\n\n  return <View ref={ref} />\n}\n```\n\n<!--\n### useTapEvents(ref, config)\n\nListen to pointer \"tap\" events on the element. These events are only fired for pointers, i.e., these interactions are not accessible to keyboards. For generic \"press\" (aka \"click\") interactions you should use `usePressEvents`. (This hook is implemented with `useResponderEvents`.)\n\n```js\nimport View from 'react-gui/view';\nimport useTapEvents from 'react-gui/use-tap-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useTapEvents(ref, {\n    onTapChange,\n    onTapStart,\n    onTapUpdate,\n    onTapEnd,\n    onTapCancel\n  });\n\n  return <View ref={ref} />\n}\n```\n-->\n\n## Imperative methods\n\nMethods for working with refs to host elements.\n\n### activeModality()\n\nReturns the modality last used, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { activeModality } from 'react-gui';\n\nconst activeModality = activeModality();\n```\n\n### blur(ref)\n\nBlur an element.\n\n```js\nimport { blur } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && blurCondition) {\n      blur(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### clear(textInputRef)\n\nClear the text from a text input.\n\n```js\nimport { clear } from 'react-gui';\nimport TextInput from 'react-gui/text-input';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && clearCondition) {\n      clear(ref);\n    }\n  });\n\n  return <TextInput ref={ref} />\n}\n```\n\n### focus(ref, options)\n\nFocus an element.\n\n```js\nimport { focus } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && focusCondition) {\n      focus(ref, { preventScroll: true });\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getLayout(ref, includeTransform)\n\nMeasure the layout (border-box dimensions) of an element. By default the dimension do not account for transforms. Pass `true` as the second argument to include CSS layout transforms in the result.\n\n```js\nimport { getLayout } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && getLayoutcondition) {\n      const { x, y, width, height } = getLayout(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n## Unstable DOM APIs\n\nThese unstable APIs are the DOM-specific abstractions used to create the built-in, platform-agnostic APIs.\n\n### createElement(type, props)\n\nCreate a fundamental element with the core accessibility and style props. The module provides low-level tools that can be used to create custom \"fundamental\" components on the web. The core accessibility and styling props can be filtered by `filterProps`, and \"unsafe\" CSS resets can be created with `createStyleRule`.\n\n```js\nimport createElement, {createStyleRules, filterProps} from 'react-gui/create-element';\n\nfunction View(props) {\n  // Only the props recognized by 'createElement'\n  const filteredProps = createProps(props);\n  // Attach a CSS reset\n  filteredProps.classList = [ css.base ]\n  // Add specific props to forward to the DOM\n  filteredProps.dir = props.direction;\n\n  return createElement('div', filteredProps);\n}\n\nconst css = createStyleRules({\n  base: {\n    display: 'flex',\n    ...\n  }\n});\n```\n\n### createEventHandle(type, options)\n\nListen to arbitrary DOM events from outside of React components. This should be rarely needed. It is available to provide direct access to the web platform's event system for building high-level systems like the built-in \"Responder System\" (for negotiating ownership over pointers) and the \"Modality System\" (for tracking changes in how a person is interacting with the UI).\n\n```js\nimport createEventHandle from 'react-gui/create-event-handle';\n\nconst clickHandle = createEventHandle('click', options);\nclickHandle.setListener(node, clickListener);\nclickHandle.setListener(anotherNode, anotherClickListener);\nclickHandle.clear()\n```\n\n### useEvent(type, options)\n\nListen to arbitrary DOM events on an element. This is the hook-equivalent of `createEventHandle` and would generally only be used to create custom event hooks to complement the built-in event hooks. Note that the first argument to the `setListener` method on the returned event handle is a *host node*, i.e., the value of the ref and not the ref itself.\n\n```js\nimport useEvent from 'react-gui/use-event';\n\nfunction useClick(ref, { onClick }) {\n  const clickHandle = useEvent('click');\n  React.useLayoutEffect(() => {\n    const node = ref.current;\n    if (node != null) {\n      // Listeners must be set in effects or event handlers\n      clickHandle.setListener(node, onClick);\n    }\n  }, ref, onClick);\n}\n```\n\n## Appendix\n\n### Accessibility props\n\nAccessibility props map directly to WAI-ARIA properties (excluding properties and values that are deprecated, redundant, or to be avoided).\n\n* `accessibilityActiveDescendant`\n* `accessibilityAtomic`\n* `accessibilityAutoComplete`\n* `accessibilityBusy`\n* `accessibilityChecked`\n* `accessibilityColumnCount`\n* `accessibilityColumnIndex`\n* `accessibilityColumnSpan`\n* `accessibilityControls`\n* `accessibilityDescribedBy`\n* `accessibilityDetails`\n* `accessibilityDisabled`\n* `accessibilityErrorMessage`\n* `accessibilityExpanded`\n* `accessibilityFlowTo`\n* `accessibilityHasPopup`\n* `accessibilityHidden`\n* `accessibilityInvalid`\n* `accessibilityKeyShortcuts`\n* `accessibilityLabel`\n* `accessibilityLabelledBy`\n* `accessibilityLevel`\n* `accessibilityLiveRegion`\n* `accessibilityModal`\n* `accessibilityMultiline`\n* `accessibilityMultiSelectable`\n* `accessibilityOrientation`\n* `accessibilityOwns`\n* `accessibilityPlaceholder`\n* `accessibilityPosInSet`\n* `accessibilityPressed`\n* `accessibilityReadOnly`\n* `accessibilityRequired`\n* `accessibilityRole`\n* `accessibilityRoleDescription`\n* `accessibilityRowCount`\n* `accessibilityRowIndex`\n* `accessibilityRowSpan`\n* `accessibilitySelected`\n* `accessibilitySetSize`\n* `accessibilitySort`\n* `accessibilityValueMax`\n* `accessibilityValueMin`\n* `accessibilityValueNow`\n* `accessibilityValueText`\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-65ef3ba","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-RZpJ3TEW3PhuO3T9LbqPV5AFstCcBWeo6a1aicUVSvJkQSy+Usl6vMeVCC/V9v7KlkOOEd8B2lHGLBE03P+anw==","shasum":"3bc63bfdb29e4375d1b3279dabefabfdb3c55730","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-65ef3ba.tgz","fileCount":4,"unpackedSize":21618,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9TNuCRA9TVsSAnZWagAADg8QAJbPkwCB+vtaTRnVst55\nw6Dr7G7S39i/9LcwapzTVcw2xOegZ/19egZTbyHMiq2aU2na7woqnvLEJvkN\nklj8HOolgiVQ/keONL6U49Lg1oDHoqj7PLdeNxdUQcBGkFsa1FHzhIRhFTSV\nEc4O4xHne4l1Tq+4vBKcA5/TaGZY755FV+fesEC/r05PRWIt6q5of/1TX3bN\nkLbZh5ovTryrTvmECemov9w79Vbp5eNytxj5vxhZ7A9c04cWULR85GrMcVC1\nnHe00+xHs1O2OokOawUG6NprsVGFvpCbyDpSyoDILZG0bADqSZUZbrlaSVsj\nv+/Q9taXByt/9Lc+XaNLx7kzbrOHumyJ5Y3gKy5UGh3vVJS2fYTw2Cym+kNv\nnKEo+yg3jYT1hFSsJAOGFQhuyUB1uO5nCP8Ugmpa+JdiGfhGykUrC6zmr4HQ\nMMIaPEHbN3FowfWaF3obvCLiVZEAZjz+pCjpNRFvUDCjEQuBH2WPdTM856Mi\nBwuidK44j9r5MsmBn3J4+GLoZDdJ8zJL5haRCeYqPykOoPkEma7zLSVpRayd\ni1Lmh6Ry4Lbc0BESsUww7MqEz4HQuy+29VNw8siqRY0X99IvO6/jfUibDPQE\nXWOoaH30avVmYgStJxBxAqHKZXNQIvWq8Q91UO8LmZ4tiXF5rxJ7rscWlEqB\noELf\r\n=Rhb5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFufMTBs113PebNy1OIVVQERxP0xn18K+t6mOs7mCv6BAiB+ZuR9084wlXsca4lJnRqLLB2TxbMbpnuqCrYkza0h6g=="}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-65ef3ba_1593127789630_0.6770676852191906"},"_hasShrinkwrap":false},"0.0.0-209c42b":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-209c42b","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0","normalize-css-color":"^1.0.2"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"readme":"# react-gui\n\nHooks are the mechanism to work with events, gestures, and other behaviors. This allows for easier composition of behaviors (vs using components and merging props) and helps to limit churn in the component APIs. These Hooks can support the implementation of the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/) in a reusable way.\n\n## Components\n\nThe foundational components are adapted from those used in React Native today. These components can adopt behaviors by linking refs to the event and interaction hooks.\n\n### View\n\nView is the fundamental layout primitive. It has built in accessibility controls, enforces flexbox columns by default (and supports grid and float layout). Raw text nodes are not allowed as children or siblings of View, and no text-related styling is supported. A View nested within a Text will render inline without altering its display or that of its children. The full set of accessibility props can be set on a `View` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the direction of the layout to `ltr` or `rtl`.\n* `focusable`: make the view focusable with a keyboard.\n* `href`: make the view render as a link.\n* `hrefAttrs`: configure the link behavior.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (not typographic styles).\n* `testID`: label the element with a test selector.\n\n### Text\n\nText is the fundamental text primitive. It has built in accessibility controls, enforces inline layout by default, provides limited inheritance of text styles, and supports View as children. It inherits typographic styles from ancestor `Text` elements (as long as the chain of text elements is not interrupted by a `View`). By default, text is rendered using the native platform’s algorithm to determine the directionality of the content language. The full set of accessibility props can be set on a `Text` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the writing direction of the text to `ltr` or `rtl`.\n* `focusable`: make the text focusable with a keyboard.\n* `href`: make the text render as an inline link.\n* `hrefAttrs`: configure the link behavior.\n* `lang`: the language of the content text.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (including typographic styles).\n* `testID`: label the element with a test selector.\n\n## APIs\n\n### StyleSheet\n\nWork with strict styles that provide deterministic rendering and automatically adapt to localized writing direction.\n\n```js\nimport View from 'react-gui/view';\nimport StyleSheet from 'react-gui/style-sheet';\n\nfunction Component() {\n  return <View style={styles.example} />\n}\n\nconst styles = StyleSheet.create({\n  example: {\n    borderWidth: 5\n  }\n});\n```\n\n## Interactions\n\nHigh-level interactions that simplify working with accessible behaviors across devices and platforms. These hooks (and the underlying event hooks) make it easy to work with pointer gestures, keyboard interactions, and layout changes to adjust a component's render tree and styles. The interaction hooks cause a component to update when their return value changes (if this is not desired, use the event hooks).\n\n### useActiveModality\n\nReflects the modality that is currently active: `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport View from 'react-gui/view';\nimport useActiveModality from 'react-gui/use-active-modality';\n\nfunction Component() {\n  const { activeModality } = useActiveModality();\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocused && styles.focus\n      ]}\n    />\n  );\n}\n```\n\n\n### useFocus\n\nReflects whether the element is focused.\n\n```js\nimport View from 'react-gui/view';\nimport useFocus from 'react-gui/use-focus';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocused } = useFocus(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocused && styles.focus\n      ]}\n    />\n  );\n}\n```\n\n### useFocusVisible\n\nReflects whether the element is visibly focused. `isFocusVisible` is true when the focus visibility of the target element changes, i.e., it is called when the element is focused with a keyboard, and when the element either loses focus or is interacted with using a pointer. `isFocusVisibleWithin` is also true when these changes occur in the *subtree* of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusVisible from 'react-gui/use-focus-visible';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusVisible, isFocusVisibleWithin } = useFocusVisible(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusVisible && styles.focusRing,\n        // example: only change styles if the element itself is not visibly focused\n        !isFocusVisible && isFocusVisibleWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\n### useFocusWithin\n\nReflects whether the element is focused or contains the currently focused element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusWithin from 'react-gui/use-focus-within';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusWithin } = useFocusWithin(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\n### useHover\n\nReflects whether the element is hovered and (optionally) where the pointer is on screen.\n\n```js\nimport View from 'react-gui/view';\nimport useHover from 'react-gui/use-hover';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isHovered, x, y } = useHover(ref, {\n    contain: true,\n    updates: true\n  });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\n### useLayout\n\nReflects the `border-box` layout of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useLayout from 'react-gui/use-layout';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { x, y, width, height } = useLayout(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\n## Events\n\nWorking with events from within components is done with hooks. The framework provides platform-agnostic high-level event abstractions for common gestures, as well as providing web-specific, low-level APIs for working directly with specific native events.\n\n### useClickEvents(ref, config)\n\nListen to \"click\" events on the element. The `e.detail` property reflects how many clicks have occurred in short succession.\n\n```js\nimport View from 'react-gui/view';\nimport useClickEvents from 'react-gui/use-click-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useClickEvents(ref, {\n    onClick,\n    onClickCapture\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useFocusEvents(ref, config)\n\nListen to \"focus\" events on the element. The `blur` and `focus` events do not bubble.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusEvents from 'react-gui/use-focus-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useFocusEvents(ref, {\n    onBlur,\n    onBlurCapture,\n    onFocus,\n    onFocusCapture,\n    onFocusChange\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useFocusWithinEvents(ref, config)\n\nListen to \"focus\" events that occur within the subtree of the element. `onBlurWithin` and `onFocusWithin` are called *each time* the focus moves within the subtree, whereas `onFocusWithinChange` is only called once when focus enters and leaves the entire subtree.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusWithinEvents from 'react-gui/use-focus-within-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useFocusWithinEvents(ref, {\n    onBlurWithin,\n    onFocusWithin,\n    onFocusWithinChange\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useHoverEvents(ref, config)\n\nListen to pointer \"hover\" events on the element. These events are only fired for modalities that can hover over elements, e.g., 'mouse' interactions. Hover is not accessible to touch or keyboard interactions. Hover events bubble and the `contain` prop should be used to contain hover events to a specific subtree.\n\n```js\nimport View from 'react-gui/view';\nimport useHoverEvents from 'react-gui/use-hover-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useHoverEvents(ref, {\n    contain: true,\n    onHoverChange,\n    onHoverStart,\n    onHoverUpdate,\n    onHoverEnd,\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useKeyboardEvents(ref, config)\n\nListen to \"keyboard\" events on the element. These events are only fired when IME composition is not taking place.\n\n```js\nimport View from 'react-gui/view';\nimport useKeyboardEvents from 'react-gui/use-keyboard-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useKeyboardEvents(ref, {\n    onKeyDown,\n    onKeyDownCapture,\n    onKeyUp,\n    onKeyUpCapture\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useLayoutEvents(ref, config)\n\nListen to changes in \"layout\" on the element. The `onLayout` event will return a layout object corresponding to the `border-box` dimensions, and `onLayoutContent` the `context-box` dimensions. (This hook is implemented with `ResizeObserver`.)\n\n```js\nimport View from 'react-gui/view';\nimport useLayoutEvents from 'react-gui/use-layout-events';\n\nfunction Component({ onLayout, onLayoutContent }) {\n  const ref = React.useRef(null);\n\n  useLayoutEvents(ref, {\n    onLayout,\n    onLayoutContent\n  });\n\n  return <View ref={ref} />\n}\n```\n\n<!--\n### usePanEvents(ref, config)\n\nListen to pointer \"pan\" events on the element. These events are only fired for pointers, i.e., these interactions are not accessible to keyboards. (This hook is implemented with `useResponderEvents`.)\n\n```js\nimport View from 'react-gui/view';\nimport usePanEvents from 'react-gui/use-pan-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePanEvents(ref, {\n    onStartShouldSet,\n    onMoveShouldSet(e, gestureState) {\n      // start gesture once centroid of pointers has moved horizontally\n      if (MathgestureState.deltaX > 10) {\n        return true;\n      }\n    },\n    onPanStart,\n    onPanUpdate,\n    onPanEnd,\n    onPanCancel\n  });\n\n  return <View ref={ref} />\n}\n```\n-->\n<!--\n### usePressEvents(ref, config)\n\nListen to \"press\" events on the element. The press event collection combines \"tap\", \"keyboard\", and \"click\" interactions, providing an accessible way to listen to user interactions from all modality types. The `onPress` event is equivalent to the native `click` event, which means it may be called in isolation (by assistive technology, etc.) and it may not be bookended by `onPressStart` and `onPressEnd`.\n\n```js\nimport View from 'react-gui/view';\nimport usePressEvents from 'react-gui/use-tap-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePressEvents(ref, {\n    onPressChange,\n    onPressStart,\n    onPressUpdate,\n    onPressEnd,\n    onPressCancel,\n    onPress\n  });\n\n  return <View acessibilityRole=\"button\" ref={ref} />\n}\n```\n-->\n\n### useResponderEvents(ref, config)\n\nListen to pointer \"responder\" events on the element. See the [Responder System README](./use-responder-events/README.nd) for documentation.\n\n```js\nimport View from 'react-gui/view';\nimport useResponderEvents from 'react-gui/use-responder-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useResponderEvents(ref, {\n    disabled,\n    onStartShouldSetResponder,\n    onResponderGrant,\n    onResponderStart,\n    onResponderMove,\n    onResponderEnd,\n    onResponderRelease,\n    onResponderTerminate,\n  });\n\n  return <View ref={ref} />\n}\n```\n\n<!--\n### useTapEvents(ref, config)\n\nListen to pointer \"tap\" events on the element. These events are only fired for pointers, i.e., these interactions are not accessible to keyboards. For generic \"press\" (aka \"click\") interactions you should use `usePressEvents`. (This hook is implemented with `useResponderEvents`.)\n\n```js\nimport View from 'react-gui/view';\nimport useTapEvents from 'react-gui/use-tap-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useTapEvents(ref, {\n    onTapChange,\n    onTapStart,\n    onTapUpdate,\n    onTapEnd,\n    onTapCancel\n  });\n\n  return <View ref={ref} />\n}\n```\n-->\n\n## Imperative methods\n\nMethods for working with refs to host elements.\n\n### activeModality()\n\nReturns the modality last used, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { activeModality } from 'react-gui';\n\nconst activeModality = activeModality();\n```\n\n### blur(ref)\n\nBlur an element.\n\n```js\nimport { blur } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && blurCondition) {\n      blur(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### clear(textInputRef)\n\nClear the text from a text input.\n\n```js\nimport { clear } from 'react-gui';\nimport TextInput from 'react-gui/text-input';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && clearCondition) {\n      clear(ref);\n    }\n  });\n\n  return <TextInput ref={ref} />\n}\n```\n\n### focus(ref, options)\n\nFocus an element.\n\n```js\nimport { focus } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && focusCondition) {\n      focus(ref, { preventScroll: true });\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getLayout(ref, includeTransform)\n\nMeasure the layout (border-box dimensions) of an element. By default the dimension do not account for transforms. Pass `true` as the second argument to include CSS layout transforms in the result.\n\n```js\nimport { getLayout } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && getLayoutcondition) {\n      const { x, y, width, height } = getLayout(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n## Unstable DOM APIs\n\nThese unstable APIs are the DOM-specific abstractions used to create the built-in, platform-agnostic APIs.\n\n### createElement(type, props)\n\nCreate a fundamental element with the core accessibility and style props. The module provides low-level tools that can be used to create custom \"fundamental\" components on the web. The core accessibility and styling props can be filtered by `filterProps`, and \"unsafe\" CSS resets can be created with `createStyleRule`.\n\n```js\nimport createElement, {createStyleRules, filterProps} from 'react-gui/create-element';\n\nfunction View(props) {\n  // Only the props recognized by 'createElement'\n  const filteredProps = createProps(props);\n  // Attach a CSS reset\n  filteredProps.classList = [ css.base ]\n  // Add specific props to forward to the DOM\n  filteredProps.dir = props.direction;\n\n  return createElement('div', filteredProps);\n}\n\nconst css = createStyleRules({\n  base: {\n    display: 'flex',\n    ...\n  }\n});\n```\n\n### createEventHandle(type, options)\n\nListen to arbitrary DOM events from outside of React components. This should be rarely needed. It is available to provide direct access to the web platform's event system for building high-level systems like the built-in \"Responder System\" (for negotiating ownership over pointers) and the \"Modality System\" (for tracking changes in how a person is interacting with the UI).\n\n```js\nimport createEventHandle from 'react-gui/create-event-handle';\n\nconst clickHandle = createEventHandle('click', options);\nclickHandle.setListener(node, clickListener);\nclickHandle.setListener(anotherNode, anotherClickListener);\nclickHandle.clear()\n```\n\n### useEvent(type, options)\n\nListen to arbitrary DOM events on an element. This is the hook-equivalent of `createEventHandle` and would generally only be used to create custom event hooks to complement the built-in event hooks. Note that the first argument to the `setListener` method on the returned event handle is a *host node*, i.e., the value of the ref and not the ref itself.\n\n```js\nimport useEvent from 'react-gui/use-event';\n\nfunction useClick(ref, { onClick }) {\n  const clickHandle = useEvent('click');\n  React.useLayoutEffect(() => {\n    const node = ref.current;\n    if (node != null) {\n      // Listeners must be set in effects or event handlers\n      clickHandle.setListener(node, onClick);\n    }\n  }, ref, onClick);\n}\n```\n\n## Appendix\n\n### Accessibility props\n\nAccessibility props map directly to WAI-ARIA properties (excluding properties and values that are deprecated, redundant, or to be avoided).\n\n* `accessibilityActiveDescendant`\n* `accessibilityAtomic`\n* `accessibilityAutoComplete`\n* `accessibilityBusy`\n* `accessibilityChecked`\n* `accessibilityColumnCount`\n* `accessibilityColumnIndex`\n* `accessibilityColumnSpan`\n* `accessibilityControls`\n* `accessibilityDescribedBy`\n* `accessibilityDetails`\n* `accessibilityDisabled`\n* `accessibilityErrorMessage`\n* `accessibilityExpanded`\n* `accessibilityFlowTo`\n* `accessibilityHasPopup`\n* `accessibilityHidden`\n* `accessibilityInvalid`\n* `accessibilityKeyShortcuts`\n* `accessibilityLabel`\n* `accessibilityLabelledBy`\n* `accessibilityLevel`\n* `accessibilityLiveRegion`\n* `accessibilityModal`\n* `accessibilityMultiline`\n* `accessibilityMultiSelectable`\n* `accessibilityOrientation`\n* `accessibilityOwns`\n* `accessibilityPlaceholder`\n* `accessibilityPosInSet`\n* `accessibilityPressed`\n* `accessibilityReadOnly`\n* `accessibilityRequired`\n* `accessibilityRole`\n* `accessibilityRoleDescription`\n* `accessibilityRowCount`\n* `accessibilityRowIndex`\n* `accessibilityRowSpan`\n* `accessibilitySelected`\n* `accessibilitySetSize`\n* `accessibilitySort`\n* `accessibilityValueMax`\n* `accessibilityValueMin`\n* `accessibilityValueNow`\n* `accessibilityValueText`\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-209c42b","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-2eZE7NyVOlieLm1bD5elZL5hOxxGaMaKxIFcOirhttgXROxsz6/5LpimmXJutbiyTGU9m09oS5+9P7TLqvMPYQ==","shasum":"a9f22e482852bac6154aed45e6aa90bc2ac026ec","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-209c42b.tgz","fileCount":97,"unpackedSize":318951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9TQFCRA9TVsSAnZWagAAMH0P/2sfIWmypqCCGpunDgli\n+dU24xwFS6+Z1VMY/8HUJEGdNNZrQ2kWtugnXprrwE3t4/LJNv2lj/IrJcu0\nSvVU7Ji7rTsenrJGuTD9SyD3ezxWfeM3iGORvtenmbQRnZ7lzwaUqDG0qEsd\nu3VR2uBg5USpOUUmN1rimFc9vwgHOsJfkpNTVnDhHXOMBza6XRSF4HnUcbwR\n41opH72UXLxFNSBL4RoTHISD02qwl1TAxKr6M95pk4MK1H5fg4sM5dBqDNrn\nhkSHScTL94vzzf59BptHwN/xbVUUhKyMmTcGDf2EJcQ04LGASmGbbcrCxmoQ\ni6WNv5ZraFvU+a+FveZLcVuNvX5T4fqHu4eX6KoJzj619iJmGjj2n1/eH0Zd\nSgRqCQ9Rc21Ohw52xgUORVZGX8ej4IQVdM1OhQFu9qIxg8mZZo5fvvbvYAvH\nt01dZiDsMgRKzwAnv4Vep/bzM47PVK/QEMi3CEARu2SV1lV0LUeT1aeeuz6o\n2H3MJykzbWYO1UzGv89Gd4RbAR/WdzT24cbzAXGirYZwf0CWTTgkHytXfGF+\nL2tf0zTQG2ccWTQrMn7zXn/Mi5wk22L1pbCzT3fn5zlEPEex3SyfDhGUXtBG\nc8AxSnnARBJLYCB0pj8bWE4FjTVDi5kv2K5Q/Gn8OTtoymXqbZ/uQO+a0B1S\ntPu6\r\n=mwrE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFg4d9Qfo1Iu2CvGdSJR7w9PrYmWaQT/IGpJ0HFU/fRwIhALoeeijzj6XejDbsSeO3MBrad8n8yVu/JLT7ZyeP59t7"}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-209c42b_1593127941057_0.9604625656124464"},"_hasShrinkwrap":false},"0.0.0-ac0a216":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-ac0a216","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0","normalize-css-color":"^1.0.2"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"readme":"# react-gui\n\nA modern library that helps develop high quality UX that works across devices and interaction modalities.\n\nThe idea behind `react-gui` is to provide a consistent set of UX primitives using modern React features (e.g., hooks) and to adapt the best parts of React Native, which was originally inspired to bring the \"good parts\" of the web to React development for native apps.\n\nThe library provides a set of Hooks as the mechanism to work with events, gestures, and other behaviors. Using Hooks allows for easier composition of behaviors (vs using components and merging props) and helps to limit churn in the component APIs. Hooks can support the implementation of the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/) in a reusable way.\n\n## Components\n\nThe foundational components are adapted from those used in React Native today. These components can adopt behaviors by linking refs to the event and interaction hooks.\n\n### View\n\nView is the fundamental layout primitive. It has built in accessibility controls, enforces flexbox columns by default (and supports grid and float layout). Raw text nodes are not allowed as children or siblings of View, and no text-related styling is supported. A View nested within a Text will render inline without altering its display or that of its children. The full set of accessibility props can be set on a `View` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the direction of the layout to `ltr` or `rtl`.\n* `focusable`: make the view focusable with a keyboard.\n* `href`: make the view render as a link.\n* `hrefAttrs`: configure the link behavior.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (not typographic styles).\n* `testID`: label the element with a test selector.\n\n### Text\n\nText is the fundamental text primitive. It has built in accessibility controls, enforces inline layout by default, provides limited inheritance of text styles, and supports View as children. It inherits typographic styles from ancestor `Text` elements (as long as the chain of text elements is not interrupted by a `View`). By default, text is rendered using the native platform’s algorithm to determine the directionality of the content language. The full set of accessibility props can be set on a `Text` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the writing direction of the text to `ltr` or `rtl`.\n* `focusable`: make the text focusable with a keyboard.\n* `href`: make the text render as an inline link.\n* `hrefAttrs`: configure the link behavior.\n* `lang`: the language of the content text.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (including typographic styles).\n* `testID`: label the element with a test selector.\n\n## APIs\n\n### StyleSheet\n\nWork with strict styles that provide deterministic rendering and automatically adapt to localized writing direction.\n\n```js\nimport View from 'react-gui/view';\nimport StyleSheet from 'react-gui/style-sheet';\n\nfunction Component() {\n  return <View style={styles.example} />\n}\n\nconst styles = StyleSheet.create({\n  example: {\n    borderWidth: 5\n  }\n});\n```\n\n## Interactions\n\nHigh-level interactions that simplify working with accessible behaviors across devices and platforms. These hooks (and the underlying event hooks) make it easy to work with pointer gestures, keyboard interactions, and layout changes to adjust a component's render tree and styles. The interaction hooks cause a component to update when their return value changes (if this is not desired, use the event hooks).\n\n### useFocus\n\nReflects whether the element is focused.\n\n```js\nimport View from 'react-gui/view';\nimport useFocus from 'react-gui/use-focus';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocused } = useFocus(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocused && styles.focus\n      ]}\n    />\n  );\n}\n```\n\n### useFocusVisible\n\nReflects whether the element is visibly focused. `isFocusVisible` is true when the focus visibility of the target element changes, i.e., it is called when the element is focused with a keyboard, and when the element either loses focus or is interacted with using a pointer. `isFocusVisibleWithin` is also true when these changes occur in the *subtree* of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusVisible from 'react-gui/use-focus-visible';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusVisible, isFocusVisibleWithin } = useFocusVisible(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusVisible && styles.focusRing,\n        // example: only change styles if the element itself is not visibly focused\n        !isFocusVisible && isFocusVisibleWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\n### useFocusWithin\n\nReflects whether the element is focused or contains the currently focused element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusWithin from 'react-gui/use-focus-within';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusWithin } = useFocusWithin(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\n### useHover\n\nReflects whether the element is hovered and (optionally) where the pointer is on screen.\n\n```js\nimport View from 'react-gui/view';\nimport useHover from 'react-gui/use-hover';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isHovered, x, y } = useHover(ref, {\n    contain: true,\n    updates: true\n  });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\n\n### useInteractOutside\n\nReflects whether an interaction has occured outside the given element\n\n```js\nimport View from 'react-gui/view';\nimport useInteractOutside from 'react-gui/use-interaction-outside';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  useInteractOutside(ref, {\n    onInteractOutside\n  });\n\n  return <View ref={ref} />;\n}\n```\n\n### useLayout\n\nReflects the `border-box` layout of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useLayout from 'react-gui/use-layout';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { x, y, width, height } = useLayout(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\n### useModality\n\nReflects the modality that is currently active: `keyboard`, `mouse`, `touch`, `pen`. The value of `modality` corresponds to the modality that is being used at any given point in time, whereas `activeModality` corresponds to the last modality that was used to perform an interaction. For example: `activeModality` is updated when a key is pressed, when a mouse button is pressed, and when the screen in touches; whereas `modality` is also updated when a mouse or pointer is moved even if a mouse button is not being pressed.\n\n```js\nimport View from 'react-gui/view';\nimport useActiveModality from 'react-gui/use-active-modality';\n\nfunction Component() {\n  const { activeModality, modality } = useModality();\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        activeModality === 'keyboard' && styles.focusRing\n      ]}\n    />\n  );\n}\n```\n\n## Events\n\nWorking with events from within components is done with hooks. The framework provides platform-agnostic high-level event abstractions for common gestures, as well as providing web-specific, low-level APIs for working directly with specific native events.\n\n### useClickEvents(ref, config)\n\nListen to \"click\" events on the element. The `e.detail` property reflects how many clicks have occurred in short succession.\n\n```js\nimport View from 'react-gui/view';\nimport useClickEvents from 'react-gui/use-click-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useClickEvents(ref, {\n    onClick,\n    onClickCapture\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useFocusEvents(ref, config)\n\nListen to \"focus\" events on the element. The `blur` and `focus` events do not bubble.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusEvents from 'react-gui/use-focus-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useFocusEvents(ref, {\n    onBlur,\n    onBlurCapture,\n    onFocus,\n    onFocusCapture,\n    onFocusChange\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useFocusWithinEvents(ref, config)\n\nListen to \"focus\" events that occur within the subtree of the element. `onBlurWithin` and `onFocusWithin` are called *each time* the focus moves within the subtree, whereas `onFocusWithinChange` is only called once when focus enters and leaves the entire subtree.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusWithinEvents from 'react-gui/use-focus-within-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useFocusWithinEvents(ref, {\n    onBlurWithin,\n    onFocusWithin,\n    onFocusWithinChange\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useHoverEvents(ref, config)\n\nListen to pointer \"hover\" events on the element. These events are only fired for modalities that can hover over elements, e.g., 'mouse' interactions. Hover is not accessible to touch or keyboard interactions. Hover events bubble and the `contain` prop should be used to contain hover events to a specific subtree.\n\n```js\nimport View from 'react-gui/view';\nimport useHoverEvents from 'react-gui/use-hover-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useHoverEvents(ref, {\n    contain: true,\n    onHoverChange,\n    onHoverStart,\n    onHoverUpdate,\n    onHoverEnd,\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useKeyboardEvents(ref, config)\n\nListen to \"keyboard\" events on the element. These events are only fired when IME composition is not taking place.\n\n```js\nimport View from 'react-gui/view';\nimport useKeyboardEvents from 'react-gui/use-keyboard-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useKeyboardEvents(ref, {\n    onKeyDown,\n    onKeyDownCapture,\n    onKeyUp,\n    onKeyUpCapture\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useLayoutEvents(ref, config)\n\nListen to changes in \"layout\" on the element. The `onLayout` event will return a layout object corresponding to the `border-box` dimensions, and `onLayoutContent` the `context-box` dimensions. (This hook is implemented with `ResizeObserver`.)\n\n```js\nimport View from 'react-gui/view';\nimport useLayoutEvents from 'react-gui/use-layout-events';\n\nfunction Component({ onLayout, onLayoutContent }) {\n  const ref = React.useRef(null);\n\n  useLayoutEvents(ref, {\n    onLayout,\n    onLayoutContent\n  });\n\n  return <View ref={ref} />\n}\n```\n\n<!--\n### usePanEvents(ref, config)\n\nListen to pointer \"pan\" events on the element. These events are only fired for pointers, i.e., these interactions are not accessible to keyboards. (This hook is implemented with `useResponderEvents`.)\n\n```js\nimport View from 'react-gui/view';\nimport usePanEvents from 'react-gui/use-pan-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePanEvents(ref, {\n    onStartShouldSet,\n    onMoveShouldSet(e, gestureState) {\n      // start gesture once centroid of pointers has moved horizontally\n      if (MathgestureState.deltaX > 10) {\n        return true;\n      }\n    },\n    onPanStart,\n    onPanUpdate,\n    onPanEnd,\n    onPanCancel\n  });\n\n  return <View ref={ref} />\n}\n```\n-->\n<!--\n### usePressEvents(ref, config)\n\nListen to \"press\" events on the element. The press event collection combines \"tap\", \"keyboard\", and \"click\" interactions, providing an accessible way to listen to user interactions from all modality types. The `onPress` event is equivalent to the native `click` event, which means it may be called in isolation (by assistive technology, etc.) and it may not be bookended by `onPressStart` and `onPressEnd`.\n\n```js\nimport View from 'react-gui/view';\nimport usePressEvents from 'react-gui/use-tap-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePressEvents(ref, {\n    onPressChange,\n    onPressStart,\n    onPressUpdate,\n    onPressEnd,\n    onPressCancel,\n    onPress\n  });\n\n  return <View acessibilityRole=\"button\" ref={ref} />\n}\n```\n-->\n\n### useResponderEvents(ref, config)\n\nListen to pointer \"responder\" events on the element. See the [Responder System README](./use-responder-events/README.nd) for documentation.\n\n```js\nimport View from 'react-gui/view';\nimport useResponderEvents from 'react-gui/use-responder-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useResponderEvents(ref, {\n    disabled,\n    onStartShouldSetResponder,\n    onResponderGrant,\n    onResponderStart,\n    onResponderMove,\n    onResponderEnd,\n    onResponderRelease,\n    onResponderTerminate,\n  });\n\n  return <View ref={ref} />\n}\n```\n\n<!--\n### useTapEvents(ref, config)\n\nListen to pointer \"tap\" events on the element. These events are only fired for pointers, i.e., these interactions are not accessible to keyboards. For generic \"press\" (aka \"click\") interactions you should use `usePressEvents`. (This hook is implemented with `useResponderEvents`.)\n\n```js\nimport View from 'react-gui/view';\nimport useTapEvents from 'react-gui/use-tap-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useTapEvents(ref, {\n    onTapChange,\n    onTapStart,\n    onTapUpdate,\n    onTapEnd,\n    onTapCancel\n  });\n\n  return <View ref={ref} />\n}\n```\n-->\n\n## Imperative methods\n\nMethods for working with refs to host elements.\n\n### blur(ref)\n\nBlur an element.\n\n```js\nimport { blur } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && blurCondition) {\n      blur(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### clear(textInputRef)\n\nClear the text from a text input.\n\n```js\nimport { clear } from 'react-gui';\nimport TextInput from 'react-gui/text-input';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && clearCondition) {\n      clear(ref);\n    }\n  });\n\n  return <TextInput ref={ref} />\n}\n```\n\n### focus(ref, options)\n\nFocus an element.\n\n```js\nimport { focus } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && focusCondition) {\n      focus(ref, { preventScroll: true });\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getActiveModality()\n\nReturns the modality last used to perform an interaction, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getActiveModality } from 'react-gui';\n\nconst activeModality = getActiveModality();\n```\n\n### getLayout(ref, includeTransform)\n\nMeasure the layout (border-box dimensions) of an element. By default the dimension do not account for transforms. Pass `true` as the second argument to include CSS layout transforms in the result.\n\n```js\nimport { getLayout } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && getLayoutcondition) {\n      const { x, y, width, height } = getLayout(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getModality()\n\nReturns the modality that was last used, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getModality } from 'react-gui';\n\nconst modality = getModality();\n```\n\n## Unstable DOM APIs\n\nThese unstable APIs are the DOM-specific abstractions used to create the built-in, platform-agnostic APIs.\n\n### createElement(type, props)\n\nCreate a fundamental element with the core accessibility and style props. The module provides low-level tools that can be used to create custom \"fundamental\" components on the web. The core accessibility and styling props can be filtered by `filterProps`, and \"unsafe\" CSS resets can be created with `createStyleRule`.\n\n```js\nimport createElement, {createStyleRules, filterProps} from 'react-gui/create-element';\n\nfunction View(props) {\n  // Only the props recognized by 'createElement'\n  const filteredProps = createProps(props);\n  // Attach a CSS reset\n  filteredProps.classList = [ css.base ]\n  // Add specific props to forward to the DOM\n  filteredProps.dir = props.direction;\n\n  return createElement('div', filteredProps);\n}\n\nconst css = createStyleRules({\n  base: {\n    display: 'flex',\n    ...\n  }\n});\n```\n\n### createEventHandle(type, options)\n\nListen to arbitrary DOM events from outside of React components. This should be rarely needed. It is available to provide direct access to the web platform's event system for building high-level systems like the built-in \"Responder System\" (for negotiating ownership over pointers) and the \"Modality System\" (for tracking changes in how a person is interacting with the UI).\n\n```js\nimport createEventHandle from 'react-gui/create-event-handle';\n\nconst clickHandle = createEventHandle('click', options);\nclickHandle.setListener(node, clickListener);\nclickHandle.setListener(anotherNode, anotherClickListener);\nclickHandle.clear()\n```\n\n### useEvent(type, options)\n\nListen to arbitrary DOM events on an element. This is the hook-equivalent of `createEventHandle` and would generally only be used to create custom event hooks to complement the built-in event hooks. Note that the first argument to the `setListener` method on the returned event handle is a *host node*, i.e., the value of the ref and not the ref itself.\n\n```js\nimport useEvent from 'react-gui/use-event';\n\nfunction useClick(ref, { onClick }) {\n  const clickHandle = useEvent('click');\n  React.useLayoutEffect(() => {\n    const node = ref.current;\n    if (node != null) {\n      // Listeners must be set in effects or event handlers\n      clickHandle.setListener(node, onClick);\n    }\n  }, ref, onClick);\n}\n```\n\n## Appendix\n\n### Accessibility props\n\nAccessibility props map directly to WAI-ARIA properties (excluding properties and values that are deprecated, redundant, or to be avoided).\n\n* `accessibilityActiveDescendant`\n* `accessibilityAtomic`\n* `accessibilityAutoComplete`\n* `accessibilityBusy`\n* `accessibilityChecked`\n* `accessibilityColumnCount`\n* `accessibilityColumnIndex`\n* `accessibilityColumnSpan`\n* `accessibilityControls`\n* `accessibilityDescribedBy`\n* `accessibilityDetails`\n* `accessibilityDisabled`\n* `accessibilityErrorMessage`\n* `accessibilityExpanded`\n* `accessibilityFlowTo`\n* `accessibilityHasPopup`\n* `accessibilityHidden`\n* `accessibilityInvalid`\n* `accessibilityKeyShortcuts`\n* `accessibilityLabel`\n* `accessibilityLabelledBy`\n* `accessibilityLevel`\n* `accessibilityLiveRegion`\n* `accessibilityModal`\n* `accessibilityMultiline`\n* `accessibilityMultiSelectable`\n* `accessibilityOrientation`\n* `accessibilityOwns`\n* `accessibilityPlaceholder`\n* `accessibilityPosInSet`\n* `accessibilityPressed`\n* `accessibilityReadOnly`\n* `accessibilityRequired`\n* `accessibilityRole`\n* `accessibilityRoleDescription`\n* `accessibilityRowCount`\n* `accessibilityRowIndex`\n* `accessibilityRowSpan`\n* `accessibilitySelected`\n* `accessibilitySetSize`\n* `accessibilitySort`\n* `accessibilityValueMax`\n* `accessibilityValueMin`\n* `accessibilityValueNow`\n* `accessibilityValueText`\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-ac0a216","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-DLY8mUm6JzvQrByRyaoAN7fmgdAz2DWBlfSxk4OQm84RtA3FIZnCxtOz1yTL6ETbuZHZluiCx8zLdy0B2/MMQQ==","shasum":"b011d43974d002a7ab5a8f6805415f350af7e584","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-ac0a216.tgz","fileCount":98,"unpackedSize":324149,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+9klCRA9TVsSAnZWagAA/GkP/iS0+7Sk+xbtJyls1t1c\n2MJ3QaL5jA5yMmiXBoMslZZcojL5eVxk/EWNN1/NqxV1EInNUBNuUldnvusd\nMskesqSyGOKq89GGA7VZgyrHHD5PgqZ3bkyYLH6IZ2NwlAdOaGCjqv0u8oCa\nlG0T05WUHx0fEFJuOEVEFkzvmRdxosztOpCk+gwMvJPnpqr5I8jOwcK49o0E\nBrHTkDjvAfuGiq5VYDBA8l/KqpOqpCz0ziDrof8o/2/zdXmJPEArUQYhtlW6\nhQpaEd76pN8l5QHjGMuKxHY9lLqgkpJP0uInASVGNluXpuMxPAarZfvSd3hH\nQk2wakFOO+/NW1slTuUiOM+l/6pZe/r4GmRFD6SPOfD76qQcCkPEg50xz5xH\nY8f71z9xMrztBCcp5UL98vqnqp7VuUbNXQvjT1zDm9FRJofu1wsFwGC3+nvP\nQ6menM50Wbl7hpPEwKAuNtDwod7iYvnOYMyeb3Dm8bUmzF6b8bTcc5j5OaNH\nlp24wwjS7mqJIn451MmioU9eqaOGak2tu7/2R4yd0WaGNs+3wVP63DabeEIH\nSfr3z/jU4E712UiDxCt1rguY0B0C/O5rNq5woTk49FHRrovQTNKXtRDwemA2\n2HGflpk1VN/gFv7WHhd+a+dv3to+TybM7P7ib6DhPCQRGNlDBOZwAb2KGdPM\ncDPW\r\n=Gx0p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF/5w+VFqWiD//w9dC7MaqqEzpNSs++VUIpHKS2CVNg2AiBSa0yZbcPrDIsUZteFIkYg83yCMgKAFTCftRgyDVU6LA=="}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-ac0a216_1593563429149_0.7092608937289566"},"_hasShrinkwrap":false},"0.0.0-5e96bfb":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-5e96bfb","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0","normalize-css-color":"^1.0.2"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"readme":"# react-gui\n\nA modern library that helps develop high quality UX that works across devices and interaction modalities.\n\nThe idea behind `react-gui` is to provide a consistent set of UX primitives using modern React features (e.g., hooks) and to adapt the best parts of React Native, which was originally inspired to bring the \"good parts\" of the web to React development for native apps.\n\nThe library provides a set of Hooks as the mechanism to work with events, gestures, and other behaviors. Using Hooks allows for easier composition of behaviors (vs using components and merging props) and helps to limit churn in the component APIs. Hooks can support the implementation of the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/) in a reusable way.\n\n## Components\n\nThe foundational components are adapted from those used in React Native today. These components can adopt behaviors by linking refs to the event and interaction hooks.\n\n### View\n\nView is the fundamental layout primitive. It has built in accessibility controls, enforces flexbox columns by default (and supports grid and float layout). Raw text nodes are not allowed as children or siblings of View, and no text-related styling is supported. A View nested within a Text will render inline without altering its display or that of its children. The full set of accessibility props can be set on a `View` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the direction of the layout to `ltr` or `rtl`.\n* `focusable`: make the view focusable with a keyboard.\n* `href`: make the view render as a link.\n* `hrefAttrs`: configure the link behavior.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (not typographic styles).\n* `testID`: label the element with a test selector.\n\n### Text\n\nText is the fundamental text primitive. It has built in accessibility controls, enforces inline layout by default, provides limited inheritance of text styles, and supports View as children. It inherits typographic styles from ancestor `Text` elements (as long as the chain of text elements is not interrupted by a `View`). By default, text is rendered using the native platform’s algorithm to determine the directionality of the content language. The full set of accessibility props can be set on a `Text` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the writing direction of the text to `ltr` or `rtl`.\n* `focusable`: make the text focusable with a keyboard.\n* `href`: make the text render as an inline link.\n* `hrefAttrs`: configure the link behavior.\n* `lang`: the language of the content text.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (including typographic styles).\n* `testID`: label the element with a test selector.\n\n## APIs\n\n### StyleSheet\n\nWork with strict styles that provide deterministic rendering and automatically adapt to localized writing direction.\n\n```js\nimport View from 'react-gui/view';\nimport StyleSheet from 'react-gui/style-sheet';\n\nfunction Component() {\n  return <View style={styles.example} />\n}\n\nconst styles = StyleSheet.create({\n  example: {\n    borderWidth: 5\n  }\n});\n```\n\n## Interactions\n\nHigh-level interactions that simplify working with accessible behaviors across devices and platforms. These hooks (and the underlying event hooks) make it easy to work with pointer gestures, keyboard interactions, and layout changes to adjust a component's render tree and styles. The interaction hooks cause a component to update when their return value changes (if this is not desired, use the event hooks).\n\n### useFocus\n\nReflects whether the element is focused.\n\n```js\nimport View from 'react-gui/view';\nimport useFocus from 'react-gui/use-focus';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocused } = useFocus(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocused && styles.focus\n      ]}\n    />\n  );\n}\n```\n\n### useFocusVisible\n\nReflects whether the element is visibly focused. `isFocusVisible` is true when the focus visibility of the target element changes, i.e., it is called when the element is focused with a keyboard, and when the element either loses focus or is interacted with using a pointer. `isFocusVisibleWithin` is also true when these changes occur in the *subtree* of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusVisible from 'react-gui/use-focus-visible';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusVisible, isFocusVisibleWithin } = useFocusVisible(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusVisible && styles.focusRing,\n        // example: only change styles if the element itself is not visibly focused\n        !isFocusVisible && isFocusVisibleWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\n### useFocusWithin\n\nReflects whether the element is focused or contains the currently focused element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusWithin from 'react-gui/use-focus-within';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusWithin } = useFocusWithin(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\n### useHover\n\nReflects whether the element is hovered and (optionally) where the pointer is on screen.\n\n```js\nimport View from 'react-gui/view';\nimport useHover from 'react-gui/use-hover';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isHovered, x, y } = useHover(ref, {\n    contain: true,\n    updates: true\n  });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\n\n### useInteractOutside\n\nReflects whether an interaction has occured outside the given element\n\n```js\nimport View from 'react-gui/view';\nimport useInteractOutside from 'react-gui/use-interaction-outside';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  useInteractOutside(ref, {\n    onInteractOutside\n  });\n\n  return <View ref={ref} />;\n}\n```\n\n### useLayout\n\nReflects the `border-box` layout of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useLayout from 'react-gui/use-layout';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { x, y, width, height } = useLayout(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\n### useModality\n\nReflects the modality that is currently active: `keyboard`, `mouse`, `touch`, `pen`. The value of `modality` corresponds to the modality that is being used at any given point in time, whereas `activeModality` corresponds to the last modality that was used to perform an interaction. For example: `activeModality` is updated when a key is pressed, when a mouse button is pressed, and when the screen in touches; whereas `modality` is also updated when a mouse or pointer is moved even if a mouse button is not being pressed.\n\n```js\nimport View from 'react-gui/view';\nimport useActiveModality from 'react-gui/use-active-modality';\n\nfunction Component() {\n  const { activeModality, modality } = useModality();\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        activeModality === 'keyboard' && styles.focusRing\n      ]}\n    />\n  );\n}\n```\n\n## Events\n\nWorking with events from within components is done with hooks. The framework provides platform-agnostic high-level event abstractions for common gestures, as well as providing web-specific, low-level APIs for working directly with specific native events.\n\n### useClickEvents(ref, config)\n\nListen to \"click\" events on the element. The `e.detail` property reflects how many clicks have occurred in short succession.\n\n```js\nimport View from 'react-gui/view';\nimport useClickEvents from 'react-gui/use-click-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useClickEvents(ref, {\n    onClick,\n    onClickCapture\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useFocusEvents(ref, config)\n\nListen to \"focus\" events on the element. The `blur` and `focus` events do not bubble.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusEvents from 'react-gui/use-focus-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useFocusEvents(ref, {\n    onBlur,\n    onBlurCapture,\n    onFocus,\n    onFocusCapture,\n    onFocusChange\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useFocusWithinEvents(ref, config)\n\nListen to \"focus\" events that occur within the subtree of the element. `onBlurWithin` and `onFocusWithin` are called *each time* the focus moves within the subtree, whereas `onFocusWithinChange` is only called once when focus enters and leaves the entire subtree.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusWithinEvents from 'react-gui/use-focus-within-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useFocusWithinEvents(ref, {\n    onBlurWithin,\n    onFocusWithin,\n    onFocusWithinChange\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useHoverEvents(ref, config)\n\nListen to pointer \"hover\" events on the element. These events are only fired for modalities that can hover over elements, e.g., 'mouse' interactions. Hover is not accessible to touch or keyboard interactions. Hover events bubble and the `contain` prop should be used to contain hover events to a specific subtree.\n\n```js\nimport View from 'react-gui/view';\nimport useHoverEvents from 'react-gui/use-hover-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useHoverEvents(ref, {\n    contain: true,\n    onHoverChange,\n    onHoverStart,\n    onHoverUpdate,\n    onHoverEnd,\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useKeyboardEvents(ref, config)\n\nListen to \"keyboard\" events on the element. These events are only fired when IME composition is not taking place.\n\n```js\nimport View from 'react-gui/view';\nimport useKeyboardEvents from 'react-gui/use-keyboard-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useKeyboardEvents(ref, {\n    onKeyDown,\n    onKeyDownCapture,\n    onKeyUp,\n    onKeyUpCapture\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### useLayoutEvents(ref, config)\n\nListen to changes in \"layout\" on the element. The `onLayout` event will return a layout object corresponding to the `border-box` dimensions, and `onLayoutContent` the `context-box` dimensions. (This hook is implemented with `ResizeObserver`.)\n\n```js\nimport View from 'react-gui/view';\nimport useLayoutEvents from 'react-gui/use-layout-events';\n\nfunction Component({ onLayout, onLayoutContent }) {\n  const ref = React.useRef(null);\n\n  useLayoutEvents(ref, {\n    onLayout,\n    onLayoutContent\n  });\n\n  return <View ref={ref} />\n}\n```\n\n<!--\n### usePanEvents(ref, config)\n\nListen to pointer \"pan\" events on the element. These events are only fired for pointers, i.e., these interactions are not accessible to keyboards. (This hook is implemented with `useResponderEvents`.)\n\n```js\nimport View from 'react-gui/view';\nimport usePanEvents from 'react-gui/use-pan-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePanEvents(ref, {\n    onStartShouldSet,\n    onMoveShouldSet(e, gestureState) {\n      // start gesture once centroid of pointers has moved horizontally\n      if (MathgestureState.deltaX > 10) {\n        return true;\n      }\n    },\n    onPanStart,\n    onPanUpdate,\n    onPanEnd,\n    onPanCancel\n  });\n\n  return <View ref={ref} />\n}\n```\n-->\n<!--\n### usePressEvents(ref, config)\n\nListen to \"press\" events on the element. The press event collection combines \"tap\", \"keyboard\", and \"click\" interactions, providing an accessible way to listen to user interactions from all modality types. The `onPress` event is equivalent to the native `click` event, which means it may be called in isolation (by assistive technology, etc.) and it may not be bookended by `onPressStart` and `onPressEnd`.\n\n```js\nimport View from 'react-gui/view';\nimport usePressEvents from 'react-gui/use-tap-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePressEvents(ref, {\n    onPressChange,\n    onPressStart,\n    onPressUpdate,\n    onPressEnd,\n    onPressCancel,\n    onPress\n  });\n\n  return <View acessibilityRole=\"button\" ref={ref} />\n}\n```\n-->\n\n### useResponderEvents(ref, config)\n\nListen to pointer \"responder\" events on the element. See the [Responder System README](./use-responder-events/README.nd) for documentation.\n\n```js\nimport View from 'react-gui/view';\nimport useResponderEvents from 'react-gui/use-responder-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useResponderEvents(ref, {\n    disabled,\n    onStartShouldSetResponder,\n    onResponderGrant,\n    onResponderStart,\n    onResponderMove,\n    onResponderEnd,\n    onResponderRelease,\n    onResponderTerminate,\n  });\n\n  return <View ref={ref} />\n}\n```\n\n<!--\n### useTapEvents(ref, config)\n\nListen to pointer \"tap\" events on the element. These events are only fired for pointers, i.e., these interactions are not accessible to keyboards. For generic \"press\" (aka \"click\") interactions you should use `usePressEvents`. (This hook is implemented with `useResponderEvents`.)\n\n```js\nimport View from 'react-gui/view';\nimport useTapEvents from 'react-gui/use-tap-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  useTapEvents(ref, {\n    onTapChange,\n    onTapStart,\n    onTapUpdate,\n    onTapEnd,\n    onTapCancel\n  });\n\n  return <View ref={ref} />\n}\n```\n-->\n\n## Imperative methods\n\nMethods for working with refs to host elements.\n\n### blur(ref)\n\nBlur an element.\n\n```js\nimport { blur } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && blurCondition) {\n      blur(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### clear(textInputRef)\n\nClear the text from a text input.\n\n```js\nimport { clear } from 'react-gui';\nimport TextInput from 'react-gui/text-input';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && clearCondition) {\n      clear(ref);\n    }\n  });\n\n  return <TextInput ref={ref} />\n}\n```\n\n### focus(ref, options)\n\nFocus an element.\n\n```js\nimport { focus } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && focusCondition) {\n      focus(ref, { preventScroll: true });\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getActiveModality()\n\nReturns the modality last used to perform an interaction, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getActiveModality } from 'react-gui';\n\nconst activeModality = getActiveModality();\n```\n\n### getLayout(ref, includeTransform)\n\nMeasure the layout (border-box dimensions) of an element. By default the dimension do not account for transforms. Pass `true` as the second argument to include CSS layout transforms in the result.\n\n```js\nimport { getLayout } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && getLayoutcondition) {\n      const { x, y, width, height } = getLayout(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getModality()\n\nReturns the modality that was last used, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getModality } from 'react-gui';\n\nconst modality = getModality();\n```\n\n## Unstable DOM APIs\n\nThese unstable APIs are the DOM-specific abstractions used to create the built-in, platform-agnostic APIs.\n\n### createElement(type, props)\n\nCreate a fundamental element with the core accessibility and style props. The module provides low-level tools that can be used to create custom \"fundamental\" components on the web. The core accessibility and styling props can be filtered by `filterProps`, and \"unsafe\" CSS resets can be created with `createStyleRule`.\n\n```js\nimport createElement, {createStyleRules, filterProps} from 'react-gui/create-element';\n\nfunction View(props) {\n  // Only the props recognized by 'createElement'\n  const filteredProps = createProps(props);\n  // Attach a CSS reset\n  filteredProps.classList = [ css.base ]\n  // Add specific props to forward to the DOM\n  filteredProps.dir = props.direction;\n\n  return createElement('div', filteredProps);\n}\n\nconst css = createStyleRules({\n  base: {\n    display: 'flex',\n    ...\n  }\n});\n```\n\n### createEventHandle(type, options)\n\nListen to arbitrary DOM events from outside of React components. This should be rarely needed. It is available to provide direct access to the web platform's event system for building high-level systems like the built-in \"Responder System\" (for negotiating ownership over pointers) and the \"Modality System\" (for tracking changes in how a person is interacting with the UI).\n\n```js\nimport createEventHandle from 'react-gui/create-event-handle';\n\nconst clickHandle = createEventHandle('click', options);\nclickHandle.setListener(node, clickListener);\nclickHandle.setListener(anotherNode, anotherClickListener);\nclickHandle.clear()\n```\n\n### useEvent(type, options)\n\nListen to arbitrary DOM events on an element. This is the hook-equivalent of `createEventHandle` and would generally only be used to create custom event hooks to complement the built-in event hooks. Note that the first argument to the `setListener` method on the returned event handle is a *host node*, i.e., the value of the ref and not the ref itself.\n\n```js\nimport useEvent from 'react-gui/use-event';\n\nfunction useClick(ref, { onClick }) {\n  const clickHandle = useEvent('click');\n  React.useLayoutEffect(() => {\n    const node = ref.current;\n    if (node != null) {\n      // Listeners must be set in effects or event handlers\n      clickHandle.setListener(node, onClick);\n    }\n  }, ref, onClick);\n}\n```\n\n## Appendix\n\n### Accessibility props\n\nAccessibility props map directly to WAI-ARIA properties (excluding properties and values that are deprecated, redundant, or to be avoided).\n\n* `accessibilityActiveDescendant`\n* `accessibilityAtomic`\n* `accessibilityAutoComplete`\n* `accessibilityBusy`\n* `accessibilityChecked`\n* `accessibilityColumnCount`\n* `accessibilityColumnIndex`\n* `accessibilityColumnSpan`\n* `accessibilityControls`\n* `accessibilityDescribedBy`\n* `accessibilityDetails`\n* `accessibilityDisabled`\n* `accessibilityErrorMessage`\n* `accessibilityExpanded`\n* `accessibilityFlowTo`\n* `accessibilityHasPopup`\n* `accessibilityHidden`\n* `accessibilityInvalid`\n* `accessibilityKeyShortcuts`\n* `accessibilityLabel`\n* `accessibilityLabelledBy`\n* `accessibilityLevel`\n* `accessibilityLiveRegion`\n* `accessibilityModal`\n* `accessibilityMultiline`\n* `accessibilityMultiSelectable`\n* `accessibilityOrientation`\n* `accessibilityOwns`\n* `accessibilityPlaceholder`\n* `accessibilityPosInSet`\n* `accessibilityPressed`\n* `accessibilityReadOnly`\n* `accessibilityRequired`\n* `accessibilityRole`\n* `accessibilityRoleDescription`\n* `accessibilityRowCount`\n* `accessibilityRowIndex`\n* `accessibilityRowSpan`\n* `accessibilitySelected`\n* `accessibilitySetSize`\n* `accessibilitySort`\n* `accessibilityValueMax`\n* `accessibilityValueMin`\n* `accessibilityValueNow`\n* `accessibilityValueText`\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-5e96bfb","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-Wwo0EQ3LwXBjhPt5CyivmQkQJ9QtyIoqoOx6Vw7jPO0cgSIVuxQhD6qru2YHuMck76FU8iT475f4+BHip0QG6g==","shasum":"b36664489a2a40c77f048e7b2488fb2f620b8289","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-5e96bfb.tgz","fileCount":93,"unpackedSize":300400,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OzLCRA9TVsSAnZWagAACZ4P/32XPxKX/KDYIB2BKfxT\ntiue/6+Elc6tg3ejpcqpQIgLjozlC/66j3uoqzcvhzGIF5xllRXCa0tJB4Cr\n1Vbmpn3XGJdoh80TjJEn0VVFbZAyvGXpGGIwtfbRTYYJPcnqDa4SeYlFJ8xx\noWTAcFNAQWSLEG2h+7mpmS7D01r056OQY9OLPAxWkw/4JhG4Owidjyxv5Lwl\nj7ijIrYfvjg0OvwSNskE3rwIQJnVWDHO6tZJAcsnCTRsAQDsznsa8LrKY6rB\nFme79Vv/RP/ZExb82eg6Rn1tFgD0de1u6yw0LXO6yaiEfVqJL32QTtOPcBEh\ncSkQzeFdsQQ8YXPgyR6GfPq/UsnYE6P8eeDxfiqW0k2YGf9kQZySn7+MMjti\nKSAkpThFySCO7bWS8cOZ7YMfHxckeumf3IKL5JTAoPHrmhqhYYPjuwiAOUaU\n/w7VmftZE4N+Ri+DuSs5HI97g12TyXGEYllc4MTzMSPX8SkA69foamTVmdho\nt192nWHmmnOGpdmu66kVwWfGkaOMC4pUvReSZZukfjrsL6LX/QRvX9FL8PaR\nr1IpY9HYOjCSckL93NMg5L9q5XCJFpYp7urqptZ292BJiwqKZY3eqxhOQT/G\nz8gYflbH2Q1gSvmzQIelFl0vZOId0j0wc61TD4jWip658O2koXZR/RMpA7fi\n41Nd\r\n=yUfG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOL5GHWCU+hf0UcioWr0o74a7CWW+efDVrxOv4fnHoIAIhAOGjVgNSBQ6P5BU0TSJbX2hLpcLf8Y/qz2IkfoQa51BU"}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-5e96bfb_1593633995479_0.11985364243292218"},"_hasShrinkwrap":false},"0.0.0-fde89cb":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-fde89cb","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0","normalize-css-color":"^1.0.2"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"readme":"# react-gui\n\nA modern library that helps develop high quality UX that works across devices and interaction modalities.\n\nThe idea behind `react-gui` is to provide a consistent set of UX primitives using modern React features (e.g., hooks) and to adapt the best parts of React Native, which was originally inspired to bring the \"good parts\" of the web to React development for native apps.\n\nThe library provides a set of Hooks as the mechanism to work with events, gestures, and other behaviors. Using Hooks allows for easier composition of behaviors (vs using components and merging props) and helps to limit churn in the component APIs. Hooks can support the implementation of the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/) in a reusable way.\n\n## Components\n\nThe foundational components are adapted from those used in React Native today. These components can adopt behaviors by linking refs to the event and interaction hooks.\n\n### View\n\nView is the fundamental layout primitive. It has built in accessibility controls, enforces flexbox columns by default (and supports grid and float layout). Raw text nodes are not allowed as children or siblings of View, and no text-related styling is supported. A View nested within a Text will render inline without altering its display or that of its children. The full set of accessibility props can be set on a `View` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the direction of the layout to `ltr` or `rtl`.\n* `focusable`: make the view focusable with a keyboard.\n* `href`: make the view render as a link.\n* `hrefAttrs`: configure the link behavior.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (not typographic styles).\n* `testID`: label the element with a test selector.\n\n### Text\n\nText is the fundamental text primitive. It has built in accessibility controls, enforces inline layout by default, provides limited inheritance of text styles, and supports View as children. It inherits typographic styles from ancestor `Text` elements (as long as the chain of text elements is not interrupted by a `View`). By default, text is rendered using the native platform’s algorithm to determine the directionality of the content language. The full set of accessibility props can be set on a `Text` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the writing direction of the text to `ltr` or `rtl`.\n* `focusable`: make the text focusable with a keyboard.\n* `href`: make the text render as an inline link.\n* `hrefAttrs`: configure the link behavior.\n* `lang`: the language of the content text.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (including typographic styles).\n* `testID`: label the element with a test selector.\n\n## APIs\n\n### StyleSheet\n\nWork with strict styles that provide deterministic rendering and automatically adapt to localized writing direction.\n\n```js\nimport View from 'react-gui/view';\nimport StyleSheet from 'react-gui/style-sheet';\n\nfunction Component() {\n  return <View style={styles.example} />\n}\n\nconst styles = StyleSheet.create({\n  example: {\n    borderWidth: 5\n  }\n});\n```\n\n## Interactions\n\nHigh-level interactions that simplify working with accessible behaviors across devices and platforms. These hooks (and the underlying event hooks) make it easy to work with pointer gestures, keyboard interactions, and layout changes to adjust a component's render tree and styles. The interaction hooks cause a component to update when their return value changes (if this is not desired, use the event hooks).\n\n### use-focus\n\nReflects whether the element is focused.\n\n```js\nimport View from 'react-gui/view';\nimport useFocus from 'react-gui/use-focus';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocused } = useFocus(ref, { disabled });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocused && styles.focus\n      ]}\n    />\n  );\n}\n```\n\nThe focus events hooks can be used to listen to \"focus\" events on the element. The `blur` and `focus` events do not bubble.\n\n```js\nimport { useFocusEvents } from 'react-gui/use-focus';\n\nuseFocusEvents(ref, {\n  disabled,\n  onBlur,\n  onBlurCapture,\n  onFocus,\n  onFocusCapture,\n  onFocusChange\n});\n```\n\n### use-focus-visible\n\nReflects whether the element is visibly focused. `isFocusVisible` is true when the focus visibility of the target element changes, i.e., it is called when the element is focused with a keyboard, and when the element either loses focus or is interacted with using a pointer. `isFocusVisibleWithin` is also true when these changes occur in the *subtree* of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusVisible from 'react-gui/use-focus-visible';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusVisible, isFocusVisibleWithin } = useFocusVisible(ref, { disabled });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusVisible && styles.focusRing,\n        // example: only change styles if the element itself is not visibly focused\n        !isFocusVisible && isFocusVisibleWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\n### use-focus-within\n\nReflects whether the element is focused or contains the currently focused element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusWithin from 'react-gui/use-focus-within';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusWithin } = useFocusWithin(ref, { disabled });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\nThe focus-within events hook can be used to listen to \"focus\" events that occur within the subtree of the element. `onBlurWithin` and `onFocusWithin` are called *each time* the focus moves within the subtree, whereas `onFocusWithinChange` is only called once when focus enters and leaves the entire subtree.\n\n```js\nimport { useFocusWithinEvents } from 'react-gui/use-focus-within';\n\nuseFocusWithinEvents(ref, {\n  disabled,\n  onBlurWithin,\n  onFocusWithin,\n  onFocusWithinChange\n});\n```\n\n### use-hover\n\nReflects whether the element is hovered and (optionally) where the pointer is on screen. The `contain` prop is used to contain the hover state to a specific subtree.\n\n```js\nimport View from 'react-gui/view';\nimport useHover from 'react-gui/use-hover';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isHovered, x, y } = useHover(ref, {\n    contain: true,\n    disabled,\n    updates: true\n  });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\nThe hover events hook can be used to listen to pointer \"hover\" events on the element. These events are only fired for modalities that can hover over elements, e.g., 'mouse' interactions. Hover is not accessible to touch or keyboard interactions.\n\n```js\nimport { useHoverEvents } from 'react-gui/use-hover';\n\nuseHoverEvents(ref, {\n  contain,\n  disabled,\n  onHoverChange,\n  onHoverStart,\n  onHoverUpdate,\n  onHoverEnd,\n});\n```\n\n### use-interact-outside\n\nReflects whether an interaction has occured outside the given element\n\n```js\nimport View from 'react-gui/view';\nimport { useInteractOutside } from 'react-gui/use-interaction-outside';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  useInteractOutside(ref, {\n    onInteractOutside\n  });\n\n  return <View ref={ref} />;\n}\n```\n\n### use-keyboard\n\nListen to \"keyboard\" events on the element. These events are only fired when IME composition is not taking place.\n\n```js\nimport { useKeyboardEvents } from 'react-gui/use-keyboard';\n\nuseKeyboardEvents(ref, {\n  disabled,\n  onKeyDown,\n  onKeyDownCapture,\n  onKeyUp,\n  onKeyUpCapture\n});\n```\n\n### use-layout\n\nReflects the `border-box` layout of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useLayout from 'react-gui/use-layout';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { x, y, width, height } = useLayout(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\nThe layout events hook can be used to listen to changes in \"layout\" on the element. The `onLayout` event will return a layout object corresponding to the `border-box` dimensions, and `onLayoutContent` the `context-box` dimensions. (This hook is implemented with `ResizeObserver`.)\n\n```js\nimport { useLayoutEvents } from 'react-gui/use-layout';\n\nuseLayoutEvents(ref, {\n  onLayout,\n  onLayoutContent\n});\n```\n\n### use-modality\n\nReflects the modality that is currently active: `keyboard`, `mouse`, `touch`, `pen`. The value of `modality` corresponds to the modality that is being used at any given point in time, whereas `activeModality` corresponds to the last modality that was used to perform an interaction. For example: `activeModality` is updated when a key is pressed, when a mouse button is pressed, and when the screen is touched; whereas `modality` is also updated when a mouse or pointer is moved even if a mouse button is not being pressed.\n\n```js\nimport View from 'react-gui/view';\nimport useModality from 'react-gui/use-modality';\n\nfunction Component() {\n  const { activeModality, modality } = useModality();\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        activeModality === 'keyboard' && styles.focusRing\n      ]}\n    />\n  );\n}\n```\n\n<!--\n### usePanEvents(ref, config)\n\nListen to pointer \"pan\" events on the element. These events are only fired for pointers, i.e., these interactions are not accessible to keyboards. (This hook is implemented with `useResponderEvents`.)\n\n```js\nimport View from 'react-gui/view';\nimport usePanEvents from 'react-gui/use-pan-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePanEvents(ref, {\n    onStartShouldSet,\n    onMoveShouldSet(e, gestureState) {\n      // start gesture once centroid of pointers has moved horizontally\n      if (MathgestureState.deltaX > 10) {\n        return true;\n      }\n    },\n    onPanStart,\n    onPanUpdate,\n    onPanEnd,\n    onPanCancel\n  });\n\n  return <View ref={ref} />\n}\n```\n-->\n<!--\n### usePressEvents(ref, config)\n\nListen to \"press\" events on the element. The press event collection combines \"tap\", \"keyboard\", and \"click\" interactions, providing an accessible way to listen to user interactions from all modality types. The `onPress` event is equivalent to the native `click` event, which means it may be called in isolation (by assistive technology, etc.) and it may not be bookended by `onPressStart` and `onPressEnd`. However, it also addresses certain UX issues related to click interactions. For example, if text is selected while pressing, the click and press event is cancelled. This ensures that users can select text in a pressable region without triggering a press. A non-moving long press will have the same effect, as well as cancelling the native context menu on mobile.\n\n```js\nimport View from 'react-gui/view';\nimport usePressEvents from 'react-gui/use-tap-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePressEvents(ref, {\n    onPressChange,\n    onPressStart,\n    onPressUpdate,\n    onPressEnd,\n    onPressCancel,\n    onLongPress,\n    onPress\n  });\n\n  return <View acessibilityRole=\"button\" ref={ref} />\n}\n```\n-->\n\n### use-responder\n\nListen to pointer \"responder\" events on the element. See the [Responder System README](./use-responder/README.nd) for documentation.\n\n```js\nimport { useResponderEvents } from 'react-gui/use-responder';\n\nuseResponderEvents(ref, {\n  onStartShouldSetResponder,\n  onResponderGrant,\n  onResponderStart,\n  onResponderMove,\n  onResponderEnd,\n  onResponderRelease,\n  onResponderTerminate,\n  touchAction\n});\n```\n\n### use-tap\n\nReflects whether the element is tapped by a pointer. The `maxDistance` property will cancel the gesture if it moves more than the given distance. The `maxDuration` property will cancel the gesture it it lasts longer than the given time in `ms`.\n\n```js\nimport View from 'react-gui/view';\nimport useTap from 'react-gui/use-tap';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  const { isTapped } = useTap(ref, {\n    cancelable,\n    disabled,\n    maxDistance,\n    maxDuration,\n    touchAction\n  });\n\n  return <View ref={ref} />\n}\n```\n\nThe tap events hook can be used to listen to pointer \"tap\" events on the element. These events are only fired for pointers, i.e., these interactions are not accessible to keyboards. For specialized \"press\" (aka \"click\") interactions you should use `usePressEvents`. (This hook is implemented with `useResponderEvents`.)\n\n```js\nimport { useTapEvents } from 'react-gui/use-tap';\n\nuseTapEvents(ref, {\n  cancelable,\n  disabled,\n  maxDistance,\n  maxDuration,\n  onTapChange,\n  onTapStart,\n  onTapEnd,\n  onTapCancel,\n  touchAction\n});\n```\n\n\n## Other hooks\n\n### use-preferences\n\nReflects the current user preference. Use this to respond to changes in the user's preferred color scheme and accessibility settings.\n\n```js\nimport { usePrefersColorScheme, usePrefersReducedMotion } from 'react-gui/use-preferences';\n\nfunction Component() {\n  const colorScheme = usePrefersColorScheme();\n  const reducedMotion = usePrefersReducedMotion();\n  // ...\n}\n```\n\n## Imperative methods\n\nMethods for working with refs to host elements.\n\n### blur(ref)\n\nBlur an element.\n\n```js\nimport { blur } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && blurCondition) {\n      blur(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### clear(textInputRef)\n\nClear the text from a text input.\n\n```js\nimport { clear } from 'react-gui';\nimport TextInput from 'react-gui/text-input';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && clearCondition) {\n      clear(ref);\n    }\n  });\n\n  return <TextInput ref={ref} />\n}\n```\n\n### focus(ref, options)\n\nFocus an element.\n\n```js\nimport { focus } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && focusCondition) {\n      focus(ref, { preventScroll: true });\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getActiveModality()\n\nReturns the modality last used to perform an interaction, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getActiveModality } from 'react-gui';\n\nconst activeModality = getActiveModality();\n```\n\n### getLayout(ref, includeTransform)\n\nMeasure the layout (border-box dimensions) of an element. By default the dimension do not account for transforms. Pass `true` as the second argument to include CSS layout transforms in the result.\n\n```js\nimport { getLayout } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && getLayoutcondition) {\n      const { x, y, width, height } = getLayout(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getModality()\n\nReturns the modality that was last used, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getModality } from 'react-gui';\n\nconst modality = getModality();\n```\n\n## Unstable DOM APIs\n\nThese unstable APIs are the DOM-specific abstractions used to create the built-in, platform-agnostic APIs.\n\n### createElement(type, props)\n\nCreate a fundamental element with the core accessibility and style props. The module provides low-level tools that can be used to create custom \"fundamental\" components on the web. The core accessibility and styling props can be filtered by `filterProps`, and \"unsafe\" CSS resets can be created with `createStyleRule`.\n\n```js\nimport createElement, {createStyleRules, filterProps} from 'react-gui/create-element';\n\nfunction View(props) {\n  // Only the props recognized by 'createElement'\n  const filteredProps = createProps(props);\n  // Attach a CSS reset\n  filteredProps.classList = [ css.base ]\n  // Add specific props to forward to the DOM\n  filteredProps.dir = props.direction;\n\n  return createElement('div', filteredProps);\n}\n\nconst css = createStyleRules({\n  base: {\n    display: 'flex',\n    ...\n  }\n});\n```\n\n### createEventHandle(type, options)\n\nListen to arbitrary DOM events from outside of React components. This should be rarely needed. It is available to provide direct access to the web platform's event system for building high-level systems like the built-in \"Responder System\" (for negotiating ownership over pointers) and the \"Modality System\" (for tracking changes in how a person is interacting with the UI).\n\n```js\nimport createEventHandle from 'react-gui/create-event-handle';\n\nconst clickHandle = createEventHandle('click', options);\nclickHandle.setListener(node, clickListener);\nclickHandle.setListener(anotherNode, anotherClickListener);\nclickHandle.clear()\n```\n\n### useEvent(type, options)\n\nListen to arbitrary DOM events on an element. This is the hook-equivalent of `createEventHandle` and would generally only be used to create custom event hooks to complement the built-in event hooks. Note that the first argument to the `setListener` method on the returned event handle is a *host node*, i.e., the value of the ref and not the ref itself.\n\n```js\nimport useEvent from 'react-gui/use-event';\n\nfunction useClick(ref, { onClick }) {\n  const clickHandle = useEvent('click');\n  React.useLayoutEffect(() => {\n    const node = ref.current;\n    if (node != null) {\n      // Listeners must be set in effects or event handlers\n      clickHandle.setListener(node, onClick);\n    }\n  }, ref, onClick);\n}\n```\n\n## Appendix\n\n### Accessibility props\n\nAccessibility props map directly to WAI-ARIA properties (excluding properties and values that are deprecated, redundant, or to be avoided).\n\n* `accessibilityActiveDescendant`\n* `accessibilityAtomic`\n* `accessibilityAutoComplete`\n* `accessibilityBusy`\n* `accessibilityChecked`\n* `accessibilityColumnCount`\n* `accessibilityColumnIndex`\n* `accessibilityColumnSpan`\n* `accessibilityControls`\n* `accessibilityDescribedBy`\n* `accessibilityDetails`\n* `accessibilityDisabled`\n* `accessibilityErrorMessage`\n* `accessibilityExpanded`\n* `accessibilityFlowTo`\n* `accessibilityHasPopup`\n* `accessibilityHidden`\n* `accessibilityInvalid`\n* `accessibilityKeyShortcuts`\n* `accessibilityLabel`\n* `accessibilityLabelledBy`\n* `accessibilityLevel`\n* `accessibilityLiveRegion`\n* `accessibilityModal`\n* `accessibilityMultiline`\n* `accessibilityMultiSelectable`\n* `accessibilityOrientation`\n* `accessibilityOwns`\n* `accessibilityPlaceholder`\n* `accessibilityPosInSet`\n* `accessibilityPressed`\n* `accessibilityReadOnly`\n* `accessibilityRequired`\n* `accessibilityRole`\n* `accessibilityRoleDescription`\n* `accessibilityRowCount`\n* `accessibilityRowIndex`\n* `accessibilityRowSpan`\n* `accessibilitySelected`\n* `accessibilitySetSize`\n* `accessibilitySort`\n* `accessibilityValueMax`\n* `accessibilityValueMin`\n* `accessibilityValueNow`\n* `accessibilityValueText`\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-fde89cb","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-EGgmpRt9KEjPQD/MMny0jBI29hBNhsIDZFpt+lrcI8pFJ9GLW0Wb9jjBxdSZLZoSmMDRoaPTzJ3BwzX1UnFLeA==","shasum":"4760187a4f22e41ee37e7b6fba08e5f59997dc05","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-fde89cb.tgz","fileCount":96,"unpackedSize":302784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCPJQCRA9TVsSAnZWagAAWQUQAIULPnbGCZF7cRNVVDjH\n8InqDF1+fAjz7d9T8Jm8k4/KXsD8ZLKMeoUahMGFAh4Sm+19U3vr02hk9w2U\n3tIihJPZH5hu2++3gC+KcocTIBiUs/X0iYAZXqys1ae6uFGTMp9ne+I4YMqq\nxFYu6c8tGKjKlPz91Yf0QPIPPqAlvvvkzDHtM6FXsmEAouHU/p3/ZSTfTr3y\nq26cUVIjdaKBW8x925SeJYrFCvJhthG75wNcbjWwpUTKcpso3sTfrU/wWU6W\nIEryXi17xqzIlnQRjF1vaPYINMty+zliuZYbr+V1iyUiJnXZRVNUdH8Fvj9+\nOo/rZBUjL+sA3OXhFfgAGyClgLA5NfQALp4aAs/6QU3MWwtj6uSE+wrn9C1s\n+JKRUDf6wzu+hvmZPcyvJq/Z1mvsvkMbEN+57NQaQuKI0KpGiuHcDtQV1Pwv\nnHBo2WADu/xkmCHP8ukD10gfBQglgMhX2VxTPwhmS7uJ1T1lnzcvuKoc6Mbf\nu7L1QUTV0qBBCrb6RQq//BZDx/EZGgPX+6E8Fk9l5mdmlknN0u5y0rJ/e3i2\noK627BFHGI3T1EaqWZUJEJbKBB7kDX3J32D/wXk/H1kaoJstY95aJ0jWEJmh\n1TR7HqwkcLy+EVQXcciMlLpMFMxX72Rd8cbT6AbM/etA9VqWzSOg5/6R6ugc\neCFL\r\n=tzdz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDClSvQwvOtaTDnmf3c8rGXaYTz33cUJAwy1saFO9qQnwIhAIQtPWUQFRTn2UhcUuunlSXaYEPYAiW1uQeJRtH6gZV7"}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-fde89cb_1594421840264_0.762902773447885"},"_hasShrinkwrap":false},"0.0.0-91758dd":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-91758dd","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0","normalize-css-color":"^1.0.2"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"readme":"# react-gui\n\nA modern library that helps develop high quality UX that works across devices and interaction modalities.\n\nThe idea behind `react-gui` is to provide a consistent set of UX primitives using modern React features (e.g., hooks) and to adapt the best parts of React Native, which was originally inspired to bring the \"good parts\" of the web to React development for native apps.\n\nThe library provides a set of Hooks as the mechanism to work with events, gestures, and other behaviors. Using Hooks allows for easier composition of behaviors (vs using components and merging props) and helps to limit churn in the component APIs. Hooks can support the implementation of the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/) in a reusable way.\n\n## Components\n\nThe foundational components are adapted from those used in React Native today. These components can adopt behaviors by linking refs to the event and interaction hooks.\n\n### View\n\nView is the fundamental layout primitive. It has built in accessibility controls, enforces flexbox columns by default (and supports grid and float layout). Raw text nodes are not allowed as children or siblings of View, and no text-related styling is supported. A View nested within a Text will render inline without altering its display or that of its children. The full set of accessibility props can be set on a `View` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the direction of the layout to `ltr` or `rtl`.\n* `focusable`: make the view focusable with a keyboard.\n* `href`: make the view render as a link.\n* `hrefAttrs`: configure the link behavior.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (not typographic styles).\n* `testID`: label the element with a test selector.\n\n### Text\n\nText is the fundamental text primitive. It has built in accessibility controls, enforces inline layout by default, provides limited inheritance of text styles, and supports View as children. It inherits typographic styles from ancestor `Text` elements (as long as the chain of text elements is not interrupted by a `View`). By default, text is rendered using the native platform’s algorithm to determine the directionality of the content language. The full set of accessibility props can be set on a `Text` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the writing direction of the text to `ltr` or `rtl`.\n* `focusable`: make the text focusable with a keyboard.\n* `href`: make the text render as an inline link.\n* `hrefAttrs`: configure the link behavior.\n* `lang`: the language of the content text.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (including typographic styles).\n* `testID`: label the element with a test selector.\n\n## APIs\n\n### StyleSheet\n\nWork with strict styles that provide deterministic rendering and automatically adapt to localized writing direction.\n\n```js\nimport View from 'react-gui/view';\nimport StyleSheet from 'react-gui/style-sheet';\n\nfunction Component() {\n  return <View style={styles.example} />\n}\n\nconst styles = StyleSheet.create({\n  example: {\n    borderWidth: 5\n  }\n});\n```\n\n## Interactions\n\nHigh-level interactions that simplify working with accessible behaviors across devices and platforms. These hooks (and the underlying event hooks) make it easy to work with pointer gestures, keyboard interactions, and layout changes to adjust a component's render tree and styles. The interaction hooks cause a component to update when their return value changes (if this is not desired, use the event hooks).\n\n### use-focus\n\nReflects whether the element is focused.\n\n```js\nimport View from 'react-gui/view';\nimport useFocus from 'react-gui/use-focus';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocused } = useFocus(ref, { disabled });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocused && styles.focus\n      ]}\n    />\n  );\n}\n```\n\nThe focus events hooks can be used to listen to \"focus\" events on the element. The `blur` and `focus` events do not bubble.\n\n```js\nimport { useFocusEvents } from 'react-gui/use-focus';\n\nuseFocusEvents(ref, {\n  disabled,\n  onBlur,\n  onBlurCapture,\n  onFocus,\n  onFocusCapture,\n  onFocusChange\n});\n```\n\n### use-focus-visible\n\nReflects whether the element is visibly focused. `isFocusVisible` is true when the focus visibility of the target element changes, i.e., it is called when the element is focused with a keyboard, and when the element either loses focus or is interacted with using a pointer. `isFocusVisibleWithin` is also true when these changes occur in the *subtree* of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusVisible from 'react-gui/use-focus-visible';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusVisible, isFocusVisibleWithin } = useFocusVisible(ref, { disabled });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusVisible && styles.focusRing,\n        // example: only change styles if the element itself is not visibly focused\n        !isFocusVisible && isFocusVisibleWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\n### use-focus-within\n\nReflects whether the element is focused or contains the currently focused element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusWithin from 'react-gui/use-focus-within';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusWithin } = useFocusWithin(ref, { disabled });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\nThe focus-within events hook can be used to listen to \"focus\" events that occur within the subtree of the element. `onBlurWithin` and `onFocusWithin` are called *each time* the focus moves within the subtree, whereas `onFocusWithinChange` is only called once when focus enters and leaves the entire subtree.\n\n```js\nimport { useFocusWithinEvents } from 'react-gui/use-focus-within';\n\nuseFocusWithinEvents(ref, {\n  disabled,\n  onBlurWithin,\n  onFocusWithin,\n  onFocusWithinChange\n});\n```\n\n### use-hover\n\nReflects whether the element is hovered and (optionally) where the pointer is on screen. The `contain` prop is used to contain the hover state to a specific subtree.\n\n```js\nimport View from 'react-gui/view';\nimport useHover from 'react-gui/use-hover';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isHovered, x, y } = useHover(ref, {\n    contain: true,\n    disabled,\n    updates: true\n  });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\nThe hover events hook can be used to listen to pointer \"hover\" events on the element. These events are only fired for modalities that can hover over elements, e.g., 'mouse' interactions. Hover is not accessible to touch or keyboard interactions.\n\n```js\nimport { useHoverEvents } from 'react-gui/use-hover';\n\nuseHoverEvents(ref, {\n  contain,\n  disabled,\n  onHoverChange,\n  onHoverStart,\n  onHoverUpdate,\n  onHoverEnd,\n});\n```\n\n### use-interact-outside\n\nReflects whether an interaction has occured outside the given element\n\n```js\nimport View from 'react-gui/view';\nimport { useInteractOutside } from 'react-gui/use-interaction-outside';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  useInteractOutside(ref, {\n    onInteractOutside\n  });\n\n  return <View ref={ref} />;\n}\n```\n\n### use-keyboard\n\nListen to \"keyboard\" events on the element. These events are only fired when IME composition is not taking place.\n\n```js\nimport { useKeyboardEvents } from 'react-gui/use-keyboard';\n\nuseKeyboardEvents(ref, {\n  disabled,\n  onKeyDown,\n  onKeyDownCapture,\n  onKeyUp,\n  onKeyUpCapture\n});\n```\n\n### use-layout\n\nReflects the `border-box` layout of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useLayout from 'react-gui/use-layout';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { x, y, width, height } = useLayout(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\nThe layout events hook can be used to listen to changes in \"layout\" on the element. The `onLayout` event will return a layout object corresponding to the `border-box` dimensions, and `onLayoutContent` the `context-box` dimensions. (This hook is implemented with `ResizeObserver`.)\n\n```js\nimport { useLayoutEvents } from 'react-gui/use-layout';\n\nuseLayoutEvents(ref, {\n  onLayout,\n  onLayoutContent\n});\n```\n\n### use-modality\n\nReflects the modality that is currently active: `keyboard`, `mouse`, `touch`, `pen`. The value of `modality` corresponds to the modality that is being used at any given point in time, whereas `activeModality` corresponds to the last modality that was used to perform an interaction. For example: `activeModality` is updated when a key is pressed, when a mouse button is pressed, and when the screen is touched; whereas `modality` is also updated when a mouse or pointer is moved even if a mouse button is not being pressed.\n\n```js\nimport View from 'react-gui/view';\nimport useModality from 'react-gui/use-modality';\n\nfunction Component() {\n  const { activeModality, modality } = useModality();\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        activeModality === 'keyboard' && styles.focusRing\n      ]}\n    />\n  );\n}\n```\n\n<!--\n### usePanEvents(ref, config)\n\nListen to pointer \"pan\" events on the element. These events are only fired for pointers, i.e., these interactions are not accessible to keyboards. (This hook is implemented with `useResponderEvents`.)\n\n```js\nimport View from 'react-gui/view';\nimport usePanEvents from 'react-gui/use-pan-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePanEvents(ref, {\n    onStartShouldSet,\n    onMoveShouldSet(e, gestureState) {\n      // start gesture once centroid of pointers has moved horizontally\n      if (MathgestureState.deltaX > 10) {\n        return true;\n      }\n    },\n    onPanStart,\n    onPanUpdate,\n    onPanEnd,\n    onPanCancel\n  });\n\n  return <View ref={ref} />\n}\n```\n-->\n\n### use-press\n\nListen to \"press\" events on the element. The press event collection provides an accessible way to listen to press interactions from all modality types. The `onPress` event is equivalent to the native `click` event, which means it may be called in isolation (by assistive technology, etc.) and it may not be bookended by `onPressStart` and `onPressEnd`. However, it also addresses certain UX issues related to click interactions. For example, if text is selected by a moving pointer while it is pressing, the press event is cancelled and the native behavior is prevented. This ensures that users can select text in a pressable region without triggering a press or navigation. A non-moving long press will have the same effect, as well as cancelling the native context menu on mobile.\n\n```js\nimport View from 'react-gui/view';\nimport usePress from 'react-gui/use-press';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  const { isPressed } = usePress(ref, {\n    cancelable,\n    disabled,\n    onLongPress,\n    onPress,\n    touchAction\n  });\n\n  return <View acessibilityRole=\"button\" ref={ref} />\n}\n```\n\nThe press events hook can be used to listen to pointer \"press\" events on the element. (This hook is implemented with `useResponderEvents` and `useKeyboardEvents`.)\n\n```js\nimport { usePressEvents } from 'react-gui/use-press';\n\nusePressEvents(ref, {\n  delayLongPress,\n  disabled,\n  onLongPress,\n  onPress,\n  onPressCancel,\n  onPressChange,\n  onPressStart,\n  onPressEnd,\n  touchAction\n});\n```\n\n### use-responder\n\nListen to pointer \"responder\" events on the element. See the [Responder System README](./use-responder/README.nd) for documentation.\n\n```js\nimport { useResponderEvents } from 'react-gui/use-responder';\n\nuseResponderEvents(ref, {\n  onStartShouldSetResponder,\n  onResponderGrant,\n  onResponderStart,\n  onResponderMove,\n  onResponderEnd,\n  onResponderRelease,\n  onResponderTerminate,\n  touchAction\n});\n```\n\n## Other hooks\n\n### use-file-selector\n\nOpen the native file selector. Includes options to select multiple files, the accepted file types, and the capture source – `environment` (e.g., rear camera) or `user` (e.g., front camera).\n\n```js\nimport useFileSelector from 'react-gui/use-file-selector';\n\nfunction Component() {\n  const openFileSelector = useFileSelector((files) => {\n    files.forEach((file: File) => {\n      // do something with file\n    });\n  }, {\n    acceptMultiple: true,\n    acceptTypes: ['image/jpeg','*.jpg']\n    source: 'environment'\n  });\n  // ...\n}\n```\n\n### use-preferences\n\nReflects the current user preference. Use this to respond to changes in the user's preferred color scheme and accessibility settings.\n\n```js\nimport usePreferences from 'react-gui/use-preferences';\n\nfunction Component() {\n  const { colorScheme, reducedMotion } = usePreferences();\n  // ...\n}\n```\n\n## Imperative methods\n\nMethods for working with refs to host elements.\n\n### blur(ref)\n\nBlur an element.\n\n```js\nimport { blur } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && blurCondition) {\n      blur(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### clear(textInputRef)\n\nClear the text from a text input.\n\n```js\nimport { clear } from 'react-gui';\nimport TextInput from 'react-gui/text-input';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && clearCondition) {\n      clear(ref);\n    }\n  });\n\n  return <TextInput ref={ref} />\n}\n```\n\n### focus(ref, options)\n\nFocus an element.\n\n```js\nimport { focus } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && focusCondition) {\n      focus(ref, { preventScroll: true });\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getActiveModality()\n\nReturns the modality last used to perform an interaction, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getActiveModality } from 'react-gui';\n\nconst activeModality = getActiveModality();\n```\n\n### getLayout(ref, includeTransform)\n\nMeasure the layout (border-box dimensions) of an element. By default the dimension do not account for transforms. Pass `true` as the second argument to include CSS layout transforms in the result.\n\n```js\nimport { getLayout } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && getLayoutcondition) {\n      const { x, y, width, height } = getLayout(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getModality()\n\nReturns the modality that was last used, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getModality } from 'react-gui';\n\nconst modality = getModality();\n```\n\n## Unstable DOM APIs\n\nThese unstable APIs are the DOM-specific abstractions used to create the built-in, platform-agnostic APIs.\n\n### createElement(type, props)\n\nCreate a fundamental element with the core accessibility and style props. The module provides low-level tools that can be used to create custom \"fundamental\" components on the web. The core accessibility and styling props can be filtered by `filterProps`, and \"unsafe\" CSS resets can be created with `createStyleRule`.\n\n```js\nimport createElement, {createStyleRules, filterProps} from 'react-gui/create-element';\n\nfunction View(props) {\n  // Only the props recognized by 'createElement'\n  const filteredProps = createProps(props);\n  // Attach a CSS reset\n  filteredProps.classList = [ css.base ]\n  // Add specific props to forward to the DOM\n  filteredProps.dir = props.direction;\n\n  return createElement('div', filteredProps);\n}\n\nconst css = createStyleRules({\n  base: {\n    display: 'flex',\n    ...\n  }\n});\n```\n\n### createEventHandle(type, options)\n\nListen to arbitrary DOM events from outside of React components. This should be rarely needed. It is available to provide direct access to the web platform's event system for building high-level systems like the built-in \"Responder System\" (for negotiating ownership over pointers) and the \"Modality System\" (for tracking changes in how a person is interacting with the UI).\n\n```js\nimport createEventHandle from 'react-gui/create-event-handle';\n\nconst clickHandle = createEventHandle('click', options);\nclickHandle.setListener(node, clickListener);\nclickHandle.setListener(anotherNode, anotherClickListener);\nclickHandle.clear()\n```\n\n### useEvent(type, options)\n\nListen to arbitrary DOM events on an element. This is the hook-equivalent of `createEventHandle` and would generally only be used to create custom event hooks to complement the built-in event hooks. Note that the first argument to the `setListener` method on the returned event handle is a *host node*, i.e., the value of the ref and not the ref itself.\n\n```js\nimport useEvent from 'react-gui/use-event';\n\nfunction useClick(ref, { onClick }) {\n  const clickHandle = useEvent('click');\n  React.useLayoutEffect(() => {\n    const node = ref.current;\n    if (node != null) {\n      // Listeners must be set in effects or event handlers\n      clickHandle.setListener(node, onClick);\n    }\n  }, ref, onClick);\n}\n```\n\n## Appendix\n\n### Accessibility props\n\nAccessibility props map directly to WAI-ARIA properties (excluding properties and values that are deprecated, redundant, or to be avoided).\n\n* `accessibilityActiveDescendant`\n* `accessibilityAtomic`\n* `accessibilityAutoComplete`\n* `accessibilityBusy`\n* `accessibilityChecked`\n* `accessibilityColumnCount`\n* `accessibilityColumnIndex`\n* `accessibilityColumnSpan`\n* `accessibilityControls`\n* `accessibilityDescribedBy`\n* `accessibilityDetails`\n* `accessibilityDisabled`\n* `accessibilityErrorMessage`\n* `accessibilityExpanded`\n* `accessibilityFlowTo`\n* `accessibilityHasPopup`\n* `accessibilityHidden`\n* `accessibilityInvalid`\n* `accessibilityKeyShortcuts`\n* `accessibilityLabel`\n* `accessibilityLabelledBy`\n* `accessibilityLevel`\n* `accessibilityLiveRegion`\n* `accessibilityModal`\n* `accessibilityMultiline`\n* `accessibilityMultiSelectable`\n* `accessibilityOrientation`\n* `accessibilityOwns`\n* `accessibilityPlaceholder`\n* `accessibilityPosInSet`\n* `accessibilityPressed`\n* `accessibilityReadOnly`\n* `accessibilityRequired`\n* `accessibilityRole`\n* `accessibilityRoleDescription`\n* `accessibilityRowCount`\n* `accessibilityRowIndex`\n* `accessibilityRowSpan`\n* `accessibilitySelected`\n* `accessibilitySetSize`\n* `accessibilitySort`\n* `accessibilityValueMax`\n* `accessibilityValueMin`\n* `accessibilityValueNow`\n* `accessibilityValueText`\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-91758dd","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-W4cnKYnH6iHbtPELVHcKyhu95OjV//jsAFL144PTTgQzI8myjasS1baNfBzi80kE8poFyH05t040D9DqkXAHVA==","shasum":"fdca56b27be2c487ddd6c4b72ff4e333d7220b5d","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-91758dd.tgz","fileCount":95,"unpackedSize":291565,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyDtCRA9TVsSAnZWagAANXoP+wZdDC5IIcGEEUIVwNvO\ngnUMehoVvxXIrmwjtT/nqUz8eNtNNM/9YRd/5zWsWvAD7qjzqmytTO+6vI0+\nV9vtnDnHRwsioudg1o7F/8v2PHCEF2weWAZRqKJ/v45lVoJkuN23E+YYU0i6\nNpNSgHk12EjkeAB0//W6Wtq4+e0aLTz+C7xbwoF6A2tETR5NtgUZdKK9f28Q\n3Vq/Ewid/t6v7hB3AcO0Z9hsO06VjTrpWirx+YWAJgA3Vzkyqz3fLNkHzI9H\n/FLoBk0yE3KMDdlWOTYzXuOSCfZ5qYY00Isq+p2iw3ovsVmfpvf9ThO/2tlD\nT4U+D/euoCZpA7gdVn74SBKAf9+rNSZ/8S0FSX2g3QAg+7fDRTAxMKCrL1ub\nYCfVuwBsJESyE5C42a7EBf1ytx7wCk2eQOGMNVWU8DZNvneI3MjZY0md9HX/\nchxHTBNouES+gr2zo4fP6iKXmYN0RtSuk1OwKiRxzc6c+lCGK8xvaXF75A/c\nbkPJ8WRAzUyGnhPD9hy4NVeWFcz8J11ywVOmiCjLVZnkpGXkCeG0m7V0uZVM\nlsMU0Ae9NOp3qsfUXKySkk3e1D7F4MYNl9LuEzU07CPrcymIBZeaRU0fhg2V\nD9UOnKcoXgrznFyFCrQhZlCc1avbiOLZY3P+pkWtqTkhuaYefu24IE6h3xkn\ntjel\r\n=Hz5Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6SEw9I0tRs4cBe3/IT39a4pEuMi1s76Ct0S8V2DS3iAiEAn/7fr/VMIxoZ5pLgMecgILrihCorfa0WlPdx/+5bKLc="}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-91758dd_1595875564730_0.18517836270949917"},"_hasShrinkwrap":false},"0.0.0-2e39cbb":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-2e39cbb","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0","normalize-css-color":"^1.0.2"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"readme":"# react-gui\n\nA modern library that helps develop high quality UX that works across devices and interaction modalities.\n\nThe idea behind `react-gui` is to provide a consistent set of UX primitives using modern React features (e.g., hooks) and to adapt the best parts of React Native, which was originally inspired to bring the \"good parts\" of the web to React development for native apps.\n\nThe library provides a set of Hooks as the mechanism to work with events, gestures, and other behaviors. Using Hooks allows for easier composition of behaviors (vs using components and merging props) and helps to limit churn in the component APIs. Hooks can support the implementation of the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/) in a reusable way.\n\n## Components\n\nThe foundational components are adapted from those used in React Native today. These components can adopt behaviors by linking refs to the event and interaction hooks.\n\n### View\n\nView is the fundamental layout primitive. It has built in accessibility controls, enforces flexbox columns by default (and supports grid and float layout). Raw text nodes are not allowed as children or siblings of View, and no text-related styling is supported. A View nested within a Text will render inline without altering its display or that of its children. The full set of accessibility props can be set on a `View` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the direction of the layout to `ltr` or `rtl`.\n* `focusable`: make the view focusable with a keyboard.\n* `href`: make the view render as a link.\n* `hrefAttrs`: configure the link behavior.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (not typographic styles).\n* `testID`: label the element with a test selector.\n\n### Text\n\nText is the fundamental text primitive. It has built in accessibility controls, enforces inline layout by default, provides limited inheritance of text styles, and supports View as children. It inherits typographic styles from ancestor `Text` elements (as long as the chain of text elements is not interrupted by a `View`). By default, text is rendered using the native platform’s algorithm to determine the directionality of the content language. The full set of accessibility props can be set on a `Text` (e.g., `accessibilityRole`, etc.). In addition, it has the following props:\n\n* `direction`: set the writing direction of the text to `ltr` or `rtl`.\n* `focusable`: make the text focusable with a keyboard.\n* `href`: make the text render as an inline link.\n* `hrefAttrs`: configure the link behavior.\n* `lang`: the language of the content text.\n* `nativeID`: set the native `id`.\n* `style`: apply strict styles (including typographic styles).\n* `testID`: label the element with a test selector.\n\n## APIs\n\n### StyleSheet\n\nWork with strict styles that provide deterministic rendering and automatically adapt to localized writing direction.\n\n```js\nimport View from 'react-gui/view';\nimport StyleSheet from 'react-gui/style-sheet';\n\nfunction Component() {\n  return <View style={styles.example} />\n}\n\nconst styles = StyleSheet.create({\n  example: {\n    borderWidth: 5\n  }\n});\n```\n\n## Interactions\n\nHigh-level interactions that simplify working with accessible behaviors across devices and platforms. These hooks (and the underlying event hooks) make it easy to work with pointer gestures, keyboard interactions, and layout changes to adjust a component's render tree and styles. The interaction hooks cause a component to update when their return value changes (if this is not desired, use the event hooks).\n\n### use-focus\n\nReflects whether the element is focused.\n\n```js\nimport View from 'react-gui/view';\nimport useFocus from 'react-gui/use-focus';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocused } = useFocus(ref, { disabled });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocused && styles.focus\n      ]}\n    />\n  );\n}\n```\n\nThe focus events hooks can be used to listen to \"focus\" events on the element. The `blur` and `focus` events do not bubble.\n\n```js\nimport { useFocusEvents } from 'react-gui/use-focus';\n\nuseFocusEvents(ref, {\n  disabled,\n  onBlur,\n  onBlurCapture,\n  onFocus,\n  onFocusCapture,\n  onFocusChange\n});\n```\n\n### use-focus-visible\n\nReflects whether the element is visibly focused. `isFocusVisible` is true when the focus visibility of the target element changes, i.e., it is called when the element is focused with a keyboard, and when the element either loses focus or is interacted with using a pointer. `isFocusVisibleWithin` is also true when these changes occur in the *subtree* of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusVisible from 'react-gui/use-focus-visible';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusVisible, isFocusVisibleWithin } = useFocusVisible(ref, { disabled });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusVisible && styles.focusRing,\n        // example: only change styles if the element itself is not visibly focused\n        !isFocusVisible && isFocusVisibleWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\n### use-focus-within\n\nReflects whether the element is focused or contains the currently focused element.\n\n```js\nimport View from 'react-gui/view';\nimport useFocusWithin from 'react-gui/use-focus-within';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isFocusWithin } = useFocusWithin(ref, { disabled });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        isFocusWithin && styles.focusWithinRing\n      ]}\n    />\n  );\n}\n```\n\nThe focus-within events hook can be used to listen to \"focus\" events that occur within the subtree of the element. `onBlurWithin` and `onFocusWithin` are called *each time* the focus moves within the subtree, whereas `onFocusWithinChange` is only called once when focus enters and leaves the entire subtree.\n\n```js\nimport { useFocusWithinEvents } from 'react-gui/use-focus-within';\n\nuseFocusWithinEvents(ref, {\n  disabled,\n  onBlurWithin,\n  onFocusWithin,\n  onFocusWithinChange\n});\n```\n\n### use-hover\n\nReflects whether the element is hovered and (optionally) where the pointer is on screen. The `contain` prop is used to contain the hover state to a specific subtree.\n\n```js\nimport View from 'react-gui/view';\nimport useHover from 'react-gui/use-hover';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { isHovered, x, y } = useHover(ref, {\n    contain: true,\n    disabled,\n    updates: true\n  });\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\nThe hover events hook can be used to listen to pointer \"hover\" events on the element. These events are only fired for modalities that can hover over elements, e.g., 'mouse' interactions. Hover is not accessible to touch or keyboard interactions.\n\n```js\nimport { useHoverEvents } from 'react-gui/use-hover';\n\nuseHoverEvents(ref, {\n  contain,\n  disabled,\n  onHoverChange,\n  onHoverStart,\n  onHoverUpdate,\n  onHoverEnd,\n});\n```\n\n### use-interact-outside\n\nReflects whether an interaction has occured outside the given element\n\n```js\nimport View from 'react-gui/view';\nimport { useInteractOutside } from 'react-gui/use-interaction-outside';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  useInteractOutside(ref, {\n    onInteractOutside\n  });\n\n  return <View ref={ref} />;\n}\n```\n\n### use-keyboard\n\nListen to \"keyboard\" events on the element. These events are only fired when IME composition is not taking place.\n\n```js\nimport { useKeyboardEvents } from 'react-gui/use-keyboard';\n\nuseKeyboardEvents(ref, {\n  disabled,\n  onKeyDown,\n  onKeyDownCapture,\n  onKeyUp,\n  onKeyUpCapture\n});\n```\n\n### use-layout\n\nReflects the `border-box` layout of the element.\n\n```js\nimport View from 'react-gui/view';\nimport useLayout from 'react-gui/use-layout';\n\nfunction Component() {\n  const ref = React.useRef(null);\n  const { x, y, width, height } = useLayout(ref);\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        width > 100 && { flexDirection: 'row' }\n      ]}\n    />\n  );\n}\n```\n\nThe layout events hook can be used to listen to changes in \"layout\" on the element. The `onLayout` event will return a layout object corresponding to the `border-box` dimensions, and `onLayoutContent` the `context-box` dimensions. (This hook is implemented with `ResizeObserver`.)\n\n```js\nimport { useLayoutEvents } from 'react-gui/use-layout';\n\nuseLayoutEvents(ref, {\n  onLayout,\n  onLayoutContent\n});\n```\n\n### use-modality\n\nReflects the modality that is currently active: `keyboard`, `mouse`, `touch`, `pen`. The value of `modality` corresponds to the modality that is being used at any given point in time, whereas `activeModality` corresponds to the last modality that was used to perform an interaction. For example: `activeModality` is updated when a key is pressed, when a mouse button is pressed, and when the screen is touched; whereas `modality` is also updated when a mouse or pointer is moved even if a mouse button is not being pressed.\n\n```js\nimport View from 'react-gui/view';\nimport useModality from 'react-gui/use-modality';\n\nfunction Component() {\n  const { activeModality, modality } = useModality();\n\n  return (\n    <View\n      ref={ref}\n      style={[\n        activeModality === 'keyboard' && styles.focusRing\n      ]}\n    />\n  );\n}\n```\n\n### use-pan\n\nListen to \"pan\" events on the element. The pan event collection provides an accessible way to listen to panning pointer interactions. It is not accessible to keyboards. This hook is implemented with `useResponderEvents`. For each handler, it provides a new `gestureState` object alongside the event object.\n\n```js\nimport View from 'react-gui/view';\nimport { usePanEvents } from 'react-gui/use-pan-events';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  usePanEvents(ref, {\n    onStartShouldSetPan,\n    onStartShouldSetPanCapture,\n    onMoveShouldSetPan(e, gestureState) {\n      // start gesture once centroid of pointers has moved horizontally\n      if (gestureState.deltaX > 10) {\n        return true;\n      }\n    },\n    onMoveShouldSetPanCapture,\n    onPanGrant,\n    onPanStart,\n    onPanMove,\n    onPanEnd,\n    onPanRelease,\n    onPanTerminate,\n    onPanTerminationRequest\n  });\n\n  return <View ref={ref} />\n}\n```\n\nA `gestureState` object has the following shape:\n\n* `gestureID` - ID of the gestureState- persisted as long as there at least one touch on screen\n* `x` - the latest screen coordinates of the recently-moved touch\n* `y` - the latest screen coordinates of the recently-moved touch\n* `initialX` - the screen coordinates of the responder grant\n* `initialY` - the screen coordinates of the responder grant\n* `deltaX` - accumulated distance of the gesture since the touch started\n* `deltaY` - accumulated distance of the gesture since the touch started\n* `velocityX` - current velocity of the gesture\n* `velocityY` - current velocity of the gesture\n* `numberActiveTouches` - Number of touches currently on screen\n\nThe \"pan\" gesture can be used as the foundation for drag, swipe, pinch gestures.\n\n### use-press\n\nListen to \"press\" events on the element. The press event collection provides an accessible way to listen to press interactions from all modality types. The `onPress` event is equivalent to the native `click` event, which means it may be called in isolation (by assistive technology, etc.) and it may not be bookended by `onPressStart` and `onPressEnd`. However, it also addresses certain UX issues related to click interactions. For example, if text is selected by a moving pointer while it is pressing, the press event is cancelled and the native behavior is prevented. This ensures that users can select text in a pressable region without triggering a press or navigation. A non-moving long press will have the same effect, as well as cancelling the native context menu on mobile.\n\n```js\nimport View from 'react-gui/view';\nimport usePress from 'react-gui/use-press';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  const { isPressed } = usePress(ref, {\n    disabled,\n    onLongPress,\n    onPress,\n    touchAction\n  });\n\n  return <View acessibilityRole=\"button\" ref={ref} />\n}\n```\n\nThe press events hook can be used to listen to pointer and keyboard \"press\" events on the element. (This hook is implemented with `useResponderEvents` and `useKeyboardEvents`.)\n\n```js\nimport { usePressEvents } from 'react-gui/use-press';\n\nusePressEvents(ref, {\n  delayLongPress,\n  disabled,\n  onLongPress,\n  onPress,\n  onPressCancel,\n  onPressChange,\n  onPressStart,\n  onPressEnd,\n  touchAction\n});\n```\n\n### use-responder\n\nListen to pointer \"responder\" events on the element. See the [Responder System README](./use-responder/README.nd) for documentation.\n\n```js\nimport { useResponderEvents } from 'react-gui/use-responder';\n\nuseResponderEvents(ref, {\n  onStartShouldSetResponder,\n  onResponderGrant,\n  onResponderStart,\n  onResponderMove,\n  onResponderEnd,\n  onResponderRelease,\n  onResponderTerminate,\n  touchAction\n});\n```\n\n## Other hooks\n\n### use-file-selector\n\nOpen the native file selector. Includes options to select multiple files, the accepted file types, and the capture source – `environment` (e.g., rear camera) or `user` (e.g., front camera).\n\n```js\nimport useFileSelector from 'react-gui/use-file-selector';\n\nfunction Component() {\n  const openFileSelector = useFileSelector((files) => {\n    files.forEach((file: File) => {\n      // do something with file\n    });\n  }, {\n    acceptMultiple: true,\n    acceptTypes: ['image/jpeg','*.jpg']\n    source: 'environment'\n  });\n  // ...\n}\n```\n\n### use-preferences\n\nReflects the current user preference. Use this to respond to changes in the user's preferred color scheme and accessibility settings.\n\n```js\nimport usePreferences from 'react-gui/use-preferences';\n\nfunction Component() {\n  const { colorScheme, reducedMotion } = usePreferences();\n  // ...\n}\n```\n\n## Imperative methods\n\nMethods for working with refs to host elements.\n\n### blur(ref)\n\nBlur an element.\n\n```js\nimport { blur } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && blurCondition) {\n      blur(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### clear(textInputRef)\n\nClear the text from a text input.\n\n```js\nimport { clear } from 'react-gui';\nimport TextInput from 'react-gui/text-input';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && clearCondition) {\n      clear(ref);\n    }\n  });\n\n  return <TextInput ref={ref} />\n}\n```\n\n### focus(ref, options)\n\nFocus an element.\n\n```js\nimport { focus } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && focusCondition) {\n      focus(ref, { preventScroll: true });\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getActiveModality()\n\nReturns the modality last used to perform an interaction, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getActiveModality } from 'react-gui';\n\nconst activeModality = getActiveModality();\n```\n\n### getLayout(ref, includeTransform)\n\nMeasure the layout (border-box dimensions) of an element. By default the dimension do not account for transforms. Pass `true` as the second argument to include CSS layout transforms in the result.\n\n```js\nimport { getLayout } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && getLayoutcondition) {\n      const { x, y, width, height } = getLayout(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getModality()\n\nReturns the modality that was last used, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getModality } from 'react-gui';\n\nconst modality = getModality();\n```\n\n## Unstable DOM APIs\n\nThese unstable APIs are the DOM-specific abstractions used to create the built-in, platform-agnostic APIs.\n\n### createElement(type, props)\n\nCreate a fundamental element with the core accessibility and style props. The module provides low-level tools that can be used to create custom \"fundamental\" components on the web. The core accessibility and styling props can be filtered by `filterProps`, and \"unsafe\" CSS resets can be created with `createStyleRule`.\n\n```js\nimport createElement, {createStyleRules, filterProps} from 'react-gui/create-element';\n\nfunction View(props) {\n  // Only the props recognized by 'createElement'\n  const filteredProps = createProps(props);\n  // Attach a CSS reset\n  filteredProps.classList = [ css.base ]\n  // Add specific props to forward to the DOM\n  filteredProps.dir = props.direction;\n\n  return createElement('div', filteredProps);\n}\n\nconst css = createStyleRules({\n  base: {\n    display: 'flex',\n    ...\n  }\n});\n```\n\n### createEventHandle(type, options)\n\nListen to arbitrary DOM events from outside of React components. This should be rarely needed. It is available to provide direct access to the web platform's event system for building high-level systems like the built-in \"Responder System\" (for negotiating ownership over pointers) and the \"Modality System\" (for tracking changes in how a person is interacting with the UI).\n\n```js\nimport createEventHandle from 'react-gui/create-event-handle';\n\nconst clickHandle = createEventHandle('click', options);\nclickHandle.setListener(node, clickListener);\nclickHandle.setListener(anotherNode, anotherClickListener);\nclickHandle.clear()\n```\n\n### useEvent(type, options)\n\nListen to arbitrary DOM events on an element. This is the hook-equivalent of `createEventHandle` and would generally only be used to create custom event hooks to complement the built-in event hooks. Note that the first argument to the `setListener` method on the returned event handle is a *host node*, i.e., the value of the ref and not the ref itself.\n\n```js\nimport useEvent from 'react-gui/use-event';\n\nfunction useClick(ref, { onClick }) {\n  const clickHandle = useEvent('click');\n  React.useLayoutEffect(() => {\n    const node = ref.current;\n    if (node != null) {\n      // Listeners must be set in effects or event handlers\n      clickHandle.setListener(node, onClick);\n    }\n  }, ref, onClick);\n}\n```\n\n## Appendix\n\n### Accessibility props\n\nAccessibility props map directly to WAI-ARIA properties (excluding properties and values that are deprecated, redundant, or to be avoided).\n\n* `accessibilityActiveDescendant`\n* `accessibilityAtomic`\n* `accessibilityAutoComplete`\n* `accessibilityBusy`\n* `accessibilityChecked`\n* `accessibilityColumnCount`\n* `accessibilityColumnIndex`\n* `accessibilityColumnSpan`\n* `accessibilityControls`\n* `accessibilityDescribedBy`\n* `accessibilityDetails`\n* `accessibilityDisabled`\n* `accessibilityErrorMessage`\n* `accessibilityExpanded`\n* `accessibilityFlowTo`\n* `accessibilityHasPopup`\n* `accessibilityHidden`\n* `accessibilityInvalid`\n* `accessibilityKeyShortcuts`\n* `accessibilityLabel`\n* `accessibilityLabelledBy`\n* `accessibilityLevel`\n* `accessibilityLiveRegion`\n* `accessibilityModal`\n* `accessibilityMultiline`\n* `accessibilityMultiSelectable`\n* `accessibilityOrientation`\n* `accessibilityOwns`\n* `accessibilityPlaceholder`\n* `accessibilityPosInSet`\n* `accessibilityPressed`\n* `accessibilityReadOnly`\n* `accessibilityRequired`\n* `accessibilityRole`\n* `accessibilityRoleDescription`\n* `accessibilityRowCount`\n* `accessibilityRowIndex`\n* `accessibilityRowSpan`\n* `accessibilitySelected`\n* `accessibilitySetSize`\n* `accessibilitySort`\n* `accessibilityValueMax`\n* `accessibilityValueMin`\n* `accessibilityValueNow`\n* `accessibilityValueText`\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-2e39cbb","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-44bRJ7d+awvAkS/1CAyTK6tyM0FmJmI26O5jNASItKaHfOVfqPbd7yQEygbl0AXzDqNAzPE0sXtew7lOpAEhNA==","shasum":"73dd4ef47f1800c1e16cb44de899b9f9ede6b32b","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-2e39cbb.tgz","fileCount":94,"unpackedSize":274273,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJG+OCRA9TVsSAnZWagAAalYP/A+C2IIk2dILXGIBp1pD\n8z8n12/kxl1caRGKoXQGzkzAPpHv/7P4rKSHQ49Izj8VGVK6SO+tkmfJICtl\nfYswoLuBqAZpfF5SOmJN0NF6p4lT05v26gMNPCzKB0+T/+w28VbdZXLGYhtK\n/udkszkkm5Bj0XNgHpVRMyGfUSsgONH/1nTHxSCHBB4Girue2MSuN9dUAP/7\nOayNz86arW7SIl2A69l91BabZ1+Nz1OmTm101FL563m3uVgo5SNqcfaB3kWS\nO7MKquNnDjbHjiBguOcJL+8eY/Rqt0D9Xx6B55N1mlPoqBCDkftrG6C1SNi1\nuYBQZbK2imTfSGJa5AV8rvaCorjLfJuNXhCFBp4O/8x9FF18igEVT9iCv9jT\nxoV83WwsJBc8LWMmBdbNxb74XtmlRu6a1FW9mtCFt5f8CqU/yYemEGEjYDBa\n1XkIf73C9Aa8IBm14cw64s3dvehaMCFZyChiDZ740Ym451UTG3PqJ2GwN9Pz\nJqnOvZN7AdJYxT7dZZbNbff4G670qSrOY4kklS63vLQK1JSreVfwtCZvf5xt\nXQtFDPNI1Jsi8Yagey72xwTR7tfvIaTQxyjezMrkk1IFwBdOLJOEyFxVKeBd\n7hHvm54dB8dzQR3Xx+V2/tK/VoV81nzFJmbuHoUBZY8s+zPqYDZWLpCiikJg\nC/hv\r\n=97GE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDFqqGZ83EMLzch35wWpT/NjyBEsIbmjSO6EHkInqPOFAiEA9fBu2gEQ/DxumCs5lKcO50s7PzNJbPH8Ge5pNAwQl5I="}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-2e39cbb_1596223374465_0.3670867596659817"},"_hasShrinkwrap":false},"0.0.0-66b56b5":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-66b56b5","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"bugs":{"url":"https://github.com/necolas/react-gui/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-66b56b5","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-FPbVUkq62gN1a/+RvxzQzpOujbsZvrCb27rkSlOHE19hQtHzTSwCmEYtnC7u6utod6a5ZlVL0TieyrqdI9l5ng==","shasum":"2301532f1ae4c9206b2d7211cb1c86ed03c8d1f8","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-66b56b5.tgz","fileCount":87,"unpackedSize":238979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK1MJCRA9TVsSAnZWagAA+BoP/jVR6bk4b0k5JlkyjgNM\nHc9naiyGvCEwguYW291qTARDrpSJuosz5bLgjuFfVxtWWAvYulu9e7l5PI2W\nFDlgCaoBX7nHt76wKQtPsnctqP+6BmjkMnUw6W1Mq+EqykD8Lq8Gr2vWecqo\naci5Mkt8SN4kRn24ICfaxD1XfkW1suRhUlpBqf+PO2xtH92KoU6nKYtBtVzz\ns4F7ihvPkkWm5zOTn8suVqkJYKe5RT9k1ovOSskgW/lpAaHg08+MaXt/Z/lb\nlIuJZaASMBsx5mkd+K1Hf1bir8o2HEuLZEnj2ZZEdtNOZHUWNjv5KXkfhuOt\n/RKIglvdIL2G/HcqTk5Mu4NRhpzr9INC8P4LpaxscdGzp5OixQYJ8HhyP9xe\nj/8KeLgFz/r8K/VU/kkKHNfVMNS5SCznzG0kPKYXryu16cXLmzqZvvxUbB6g\nix037tPTazemlzVYF6tVbbLGNfmcmSoVQFsGcxsbqPDdYmwR2yTM5NKyz8gy\nmfwEH/72jh+jB4msQBAkhOfnoydiUVq2ukpTPLxBnzXpxN6mi2gHxzZ8VI6q\nuWh9CztIw8HX42v36UGLtWW5YKKpF+e+M3GQT9Jh0KC0ht+1xKih2oFe1Lg2\nQ/iDvGcBRT19Wqj+SUNYqqr5S5cmy/Y2PvnxXK9o37xm0ebY5YpPos3rNwNq\n7oo7\r\n=Ei6o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICjsleLdu6KWZVm1lmoLUjmogcvrgdMsTsPlb6/088ZfAiATf6YWY58qtiLb3+dzPS6zCMNJabxeIzZRTCFqhgX8GA=="}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-66b56b5_1596674824729_0.7843192585364753"},"_hasShrinkwrap":false},"0.0.0-c7f5055":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-c7f5055","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"bugs":{"url":"https://github.com/necolas/react-gui/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-c7f5055","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-FwNW3c49on1bCuyNN/uBerVPUf6tNqBofRXMhxVbz/ZXATzEs6Nqrg3SLX45RpXAB/K+KFs0kxa+7gpKmR0LPQ==","shasum":"79fd36670d5f0ca38a25b73768c1970dd69211d5","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-c7f5055.tgz","fileCount":87,"unpackedSize":237396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHveCRA9TVsSAnZWagAAuvEP/RpJPFBiqS0nkOhLsI6x\nThkFZszthxEOcp/vo9sQDLK4Srlzk+KWqbO3Qj3RE/NE4M7Ek77wJZrZRl+x\nXFrn/y8lV+ntza0Dqb/hxJq5uuEbqGzPBQFP9G9WwIJdQT2NjfiBcMQHxjLf\neFTpLlDPXZPOWk/7o2b5Ctqw+juvnEKIEdq7oiB3HuNAV21ip+9yDZbVMZTw\nhPAPY4NNtIycx+8w02UHW1vqYHEzmGZoU2T2vtYjtbS0XnkbYeI6U+7Erhst\nYJGzAJA0Fe84sm89oyzQh51xcOhdtkQcJm8FhHWPdnk8U4XaKT0lqW0HZaAy\nuQ73mAmmq7ctFqntds1hhlSzOOoT5mkEJhpmTmsj5Vb5Y4kJr4CqtwVaRwA8\nyG/Wq8UpGrW8l2LseDaaPQi8CmvAH75yosKyUEvB+RoOzdjEVHKumEpXhE0N\nN9FzL/3zzy7epZBL/3foLcr4WedztoXJ0H3EFGuZNHcHU9571BcXKEnQvITc\nO6E4Ugr3pbYrsbtO/WJ0gTetHYSl7hBeYUuUdd+sTpb3YWoWOzCVZlDWAiqj\nMWLcDXsFzt9UJ3pu5Tx+aaTgCCBmwpsDnhXU+kOI2owr0qmFXaYCvWmv2K8l\nuCGr+m5lbdcCe7mc6iNrjDGe9fLBFzjoWaLJO9IQ2xXspK+d8pShksarkxzG\n2Mel\r\n=AtRu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrRlfn4IM/I/McB7wFa1uuqFahJqC74a5NDysnT+6y/AiAp+kMczCQfUpwUBATNpOlOsf1feuFaxA6kA8OxEL/n4w=="}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-c7f5055_1596750813857_0.3176784663481411"},"_hasShrinkwrap":false},"0.0.0-b64e6f6":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-b64e6f6","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"bugs":{"url":"https://github.com/necolas/react-gui/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-b64e6f6","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-318uxJu15IWbVX3zSjCTfRx4p8K6hnMCINHINrCLj3N8G1swGwn3jyQSot7dYTjzone13VCYuh+OJua+2M+DqA==","shasum":"454e0119e08650428b4af02f6e4bab5816246da0","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-b64e6f6.tgz","fileCount":87,"unpackedSize":237711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfManjCRA9TVsSAnZWagAAgkMP/3xeSGnVxaaot+aelDjz\nyr/+n9j8zpkPUGW/8Wc5/uXXnCTIMaCitXRJPjNvnbY8xrDRDecWIVdTVc1c\nXBSpei3nBQ4KJVdRdRkR5jojzkz7oOckv/Nu+rUWh9qHQr6ceO2uIoRXAX+B\ncqI63IQBu93Eg0qwfYutjzWRXDc/3sEhVgi1UT8q3zhQuJfin5Vdmb43l1Bw\nQgHjs/33IN0tmR7KdNoVD6yzoZaIsQOh37lmfp2aORPWR2v1UPeWk8WLyuQ3\nA96CPryxBJd8SStOWiy4XJIBv6yK3FddpOtjRLLV5ZDXCs9KISTFzTBIXPr5\n56bLl4VkaCIinW0Al1iu6Kc2p/tdynJwVM2vpZmlDrFULzmZGw0sHrSjI8ef\nOj1g8Cw/zOUqojQVqjNYLkxTygnVmfiozkcNKEMPAcm5azquhaCfATPYIcy2\nAO9vgflDYB1SwkfOzvnwcKlqV9vMJXjCAZVWA3E1krINnnZyhwhvCSjL1sMS\n+Y42gNBLfu+4BacLmjGPhFaHTI6PvDyq3IwiCPAjYcVbUQfuz+zx5DbRB6ii\nYDL7/uehVXaNzu9Dslq0/Etz9nRoPb+tK4KN8iBKEeYeGmire5VOGzDPGACA\nGqp/Czl269SY0zSTzHRyai3pa9DatXiTJL0QebltL65b5FJCGMiN/HYQC3hx\nXc8o\r\n=tcJO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWRtSyRC/KZd6mrTthPqJ3bKR6XRxqnsx/MsXhTa+g0AiA2yK81Ck6wyAb/GXJgU5lE1TatgiF5hQPNe8pdPm0BYQ=="}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-b64e6f6_1597090275030_0.8518833448327017"},"_hasShrinkwrap":false},"0.0.0-a234274":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-a234274","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"bugs":{"url":"https://github.com/necolas/react-gui/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-a234274","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-zNU2DtF1bvYh0+zQ6hcBzlHIKAa7SX8GvZfL617nxGeSsD/bz9l+XjKS9PVEASz6xsmaMo/etCSCVxhckmZrxA==","shasum":"e38a3393d31eacf35bfa846cc46b0e2067f2026f","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-a234274.tgz","fileCount":90,"unpackedSize":247199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPBalCRA9TVsSAnZWagAAyaYQAJ+iogJC68cl7AfNIUnz\nRjkAOH//Z0/+MFHSJ82shlQvaGmiqPY1fdphBH7UtfuT/IUM0iFMH4/P4O8U\nDLD9tgxRWWyvRH1FW2NoxFom/Mp2BvcGlTc6c4TurG8mP5GkLk0VQWlFFhZI\nFPxZk5oUCvTtyv+lhNjrv8wUEWhEHO9TVEcttfaacQfaNH1vWKMxwrcv826I\nW3DH+7ThRIo1bx4xY3aUhjiBq64li0Xwrx4X9QoapQqVLKRCaat5Cb59tFrp\nAGeJ2SCksLIYr2dbJukUr0coQSQ6+7+cDBNl9xq98IZxlyT7Gu90dXsKoGPz\nnZopQehGyB7j2HQ+V1eSuQRNiCgI4LabzZJ+WrIGHP5O6rn6z4WlqLvZbO5B\nlE0VgMPTQXIIiaMuERiY1SN7i0Cy7QAxgl5POJZLjw+PWfWI0Pzbhjiw274a\nVSPLccSY19IneS0OP6WHZ95Yx7BOYiKJoN6cBN9jIOYS5mTPDr3fXlIoLoW6\nj333U1VyZbjT5Zv8UhD67nxyIc4XkuhMPvAP3OLOroTWShRjKNwWWfU9OBR9\nsardFEgm7EpxJd11paXn4wDG1sP1zHNghJoM0lOWA0thHKEWdEhUVWwqf1Hy\nQ9/GcAN+i5JLFBxCmXocONH2I89eLtErRJRVTdXT4RB4C5pjSWTSc5jP6j+W\nvlO/\r\n=qLlP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB5oKTsn2Fm+oORwlh7s3oikwOBMcabyx9njfaKXV6sQIhAKORnY7PcqTKbhSEhq1GuZ0hrQZfApG2hagJnS8FqvRZ"}]},"maintainers":[{"email":"nicolasgallagher@gmail.com","name":"necolas"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-a234274_1597773477230_0.002535641131359956"},"_hasShrinkwrap":false},"0.0.0-1080b62":{"publishConfig":{"registry":"https://registry.npmjs.org/"},"name":"react-gui","version":"0.0.0-1080b62","description":"Experimental React UI","main":"index.js","sideEffects":false,"dependencies":{"debounce":"^1.2.0","inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"bugs":{"url":"https://github.com/necolas/react-gui/issues"},"readme":"ERROR: No README data found!","homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-1080b62","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"dist":{"integrity":"sha512-/gZOdTo8vRnv14qVNhnzCN1zCheeLKO65UU7KKZIMkth0v6ETI0m3E1DaC6QVJzQ21YvK4i7K6d8IYV3cop5hw==","shasum":"5461c491d43447ac4c022b5d9890c09c941dca02","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-1080b62.tgz","fileCount":87,"unpackedSize":241468,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffhSNCRA9TVsSAnZWagAAr7QP/ifLX1KSUnif6Kyr9f47\n7341/MZ7r1guWHt/3n9BR5/kOPeTxIOtGwN4I/QOypxuKwWJnbBgcG40PVpJ\nkuflPMzYouHiCgY5occGDnlBtoXCv98yVPWy+FYSh5eriRPlUQTfkC+oG7gR\nTnVUqAAmUk6Ku2gBdzcyUOmmp/OS25O87BHx/+/DVwmXeNyI80TSJ4vRQnrE\nYXGMw9h83SZRINKx/33Df2iyFpWHRe/+WF+2u0wr/nGggqbt1pKhK+10Z8Fa\nd/IxgQOGrMTP+VZl2JPZO8A7jlIZhSlSMUULYjRxYtxTBIirkmXK0f8UHuix\nwo7oUz8nTWIXFFeXS1RWl50i4X7713qYJ9HZLlTO6/mdNIGTDEm1rxm0BTXe\n6J5JCqGwL6e4+Nlnty0h3JKz0cJW1bILvT0VPwd1kSrz0GQYu6S32mkweADe\nLGhk5goKUovJPKOYrm3GQoXh6V64uglieswaYLIk9ZsvwwZjWiBGy3DmnB2Y\nIai4V9qDAAGzCkFgGcjgugXvSm4hk1lRRWVlJVUA+H/eeRkhzo8ZN+5elB1z\nNVwLSKJmPg9XfChgRpiPKNxoERw+i4sbUXeshioAdRXrWno+EN9A8DucNYO6\n5pznGD1Eob2h8zl81Qo1LtnHOrghKbR10KklgTsyhUTvVxx24dBiIHnJPymF\nVFm0\r\n=0tlI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClzZPehIrpT322mAbxuXY9lTLal6QJESjPeYanaHxeoAIhAKNoYNk7VfXUhVDCGWDi1NDGhYuKN+Q1eHL8sGXSCu/n"}]},"maintainers":[{"name":"necolas","email":"nicolasgallagher@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-1080b62_1602098316936_0.0938089032019771"},"_hasShrinkwrap":false},"0.0.0-660062ed8":{"name":"react-gui","version":"0.0.0-660062ed8","description":"Experimental React UI","main":"./dist/index.js","exports":{"./package.json":"./package.json","./create-element":"./dist/create-element/index.js","./create-event-handle":"./dist/create-event-handle/index.js","./image":"./dist/image/index.js","./rich-text-area":"./dist/rich-text-area/index.js","./style-sheet":"./dist/style-sheet/index.js","./text":"./dist/text/index.js","./text-area":"./dist/text-area/index.js","./text-input":"./dist/text-input/index.js","./use-event":"./dist/use-event/index.js","./use-file-selector":"./dist/use-file-selector/index.js","./use-focus":"./dist/use-focus/index.js","./use-focus-visibility":"./dist/use-focus-visibility/index.js","./use-focus-within":"./dist/use-focus-within/index.js","./use-hover":"./dist/use-hover/index.js","./use-interact-outside":"./dist/use-interact-outside/index.js","./use-keyboard":"./dist/use-keyboard/index.js","./use-layout":"./dist/use-layout/index.js","./use-modality":"./dist/use-modality/index.js","./use-pan":"./dist/use-pan/index.js","./use-preferences":"./dist/use-preferences/index.js","./use-press":"./dist/use-press/index.js","./use-responder":"./dist/use-responder/index.js","./view":"./dist/view/index.js"},"sideEffects":false,"dependencies":{"inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=16.13.1","react-dom":">=16.13.1"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"readme":"# react-gui\n\nA framework for creating accessible, interactive, responsive apps with React.\n\nReact GUI uses modern React features to provide a consistent set of UX primitives for working with views, events, gestures, and other behaviors. The built-in Hook allows for easy composition of behaviors and support the implementation of the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/).\n\nBrowser support: Chrome, Safari 11+, Edge, Firefox, Opera, IE 11.\n\n## Components\n\nThe foundational components are adapted from those used in React Native today. These components can adopt behaviors by linking refs to the event and interaction hooks.\n\n* [View](./src/view)\n* [Text](./src/text)\n* [Image](./src/image)\n* [TextInput](./src/text-input)\n* [TextArea](./src/text-area)\n* [RichTextArea](./src/rich-text-area)\n\n## APIs\n\n* [StyleSheet](./src/style-sheet)\n\n## Interactions\n\nHigh-level interactions that simplify working with accessible behaviors across devices and platforms. These hooks (and the underlying event hooks) make it easy to work with pointer gestures, keyboard interactions, and layout changes to adjust a component's render tree and styles. The interaction hooks cause a component to update when their return value changes (if this is not desired, use the event hooks).\n\n* [useFocus](./src/use-focus)\n* [useFocusVisibility](./src/use-focus-visibility)\n* [useFocusWithin](./src/use-focus-within)\n* [useHover](./src/use-hover)\n* [useInteractOutside](./src/use-interact-outside)\n* [useKeyboard](./src/use-keyboard)\n* [useLayout](./src/use-layout)\n* [useModality](./src/use-modality)\n* [usePan](./src/use-pan)\n* [usePress](./src/use-press)\n* [useResponder](./src/use-responder)\n\n## Other hooks\n\n* [useFileSelector](./src/use-file-selector)\n* [usePreferences](./src/use-preferences)\n\n## Imperative methods\n\nMethods for working imperatively with host elements.\n\n### blur(node)\n\nBlur an element.\n\n```js\nimport { blur } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    const node = ref.current;\n    if (node != null && blurCondition) {\n      blur(node);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### clear(node)\n\nClear the text from a text input.\n\n```js\nimport { clear } from 'react-gui';\nimport TextInput from 'react-gui/text-input';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    const node = ref.current;\n    if (node != null && clearCondition) {\n      clear(node);\n    }\n  });\n\n  return <TextInput ref={ref} />\n}\n```\n\n### focus(node, options)\n\nFocus an element.\n\n```js\nimport { focus } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    const node = ref.current;\n    if (node != null && focusCondition) {\n      focus(node, { preventScroll: true });\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getLayout(ref, includeTransform)\n\nMeasure the layout (border-box dimensions) of an element. By default the dimension do not account for transforms. Pass `true` as the second argument to include CSS layout transforms in the result.\n\n```js\nimport { getLayout } from 'react-gui';\nimport View from 'react-gui/view';\n\nfunction Component() {\n  const ref = React.useRef(null);\n\n  function doSomething() {\n    if (ref != null && getLayoutcondition) {\n      const { x, y, width, height } = getLayout(ref);\n    }\n  });\n\n  return <View ref={ref} />\n}\n```\n\n### getActiveModality()\n\nReturns the modality last used to perform an interaction, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getActiveModality } from 'react-gui';\n\nconst activeModality = getActiveModality();\n```\n\n### getModality()\n\nReturns the modality that was last used, e.g., `keyboard`, `mouse`, `touch`, `pen`.\n\n```js\nimport { getModality } from 'react-gui';\n\nconst modality = getModality();\n```\n\n## Unstable DOM APIs\n\nThese unstable APIs are the DOM-specific abstractions used to create the built-in, platform-agnostic APIs.\n\n### createElement(type, props)\n\nCreate a fundamental element with the core accessibility and style props. The module provides low-level tools that can be used to create custom \"fundamental\" components on the web. The core accessibility and styling props can be filtered by `filterProps`, and \"unsafe\" CSS resets can be created with `createStyleRule`.\n\n```js\nimport createElement, {createStyleRules, filterProps} from 'react-gui/create-element';\n\nfunction View(props) {\n  // Only the props recognized by 'createElement'\n  const filteredProps = createProps(props);\n  // Attach a CSS reset\n  filteredProps.classList = [ css.base ]\n  // Add specific props to forward to the DOM\n  filteredProps.dir = props.direction;\n\n  return createElement('div', filteredProps);\n}\n\nconst css = createStyleRules({\n  base: {\n    display: 'flex',\n    ...\n  }\n});\n```\n\n### createEventHandle(type, options)\n\nListen to arbitrary DOM events from outside of React components. This should be rarely needed. It is available to provide direct access to the web platform's event system for building high-level systems like the built-in \"Responder System\" (for negotiating ownership over pointers) and the \"Modality System\" (for tracking changes in how a person is interacting with the UI).\n\n```js\nimport createEventHandle from 'react-gui/create-event-handle';\n\nconst addClickListener = createEventHandle('click', options);\nconst removeClickListener1 = addClickListener(node, clickListener);\nconst removeClickListener2 = addClickListener(anotherNode, anotherClickListener);\n```\n\n### useEvent(type, options)\n\nListen to arbitrary DOM events on an element. This is the hook-equivalent of `createEventHandle` and can be used to create custom event hooks to complement the built-in event hooks. The first argument to the returned function must be a *host node*, i.e., the value of the ref, and not the ref itself.\n\n```js\nimport useEvent from 'react-gui/use-event';\n\nfunction useClick(ref, { onClick }) {\n  const addClickListener = useEvent('click');\n  React.useLayoutEffect(() => {\n    const node = ref.current;\n    if (node != null) {\n      // Listeners must be set in effects or event handlers\n      addClickListener(node, onClick);\n    }\n  }, [addClickListener, onClick, ref]);\n}\n```\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-660062ed8","_nodeVersion":"15.3.0","_npmVersion":"7.0.14","dist":{"integrity":"sha512-gefOKk0+zczoIy2JYIkBMavgivN2MOU8ALMH/v6FL1U9POWk0FTusBpce7iM7RZsm5kD+W+0EUXlg8A7JDQnrg==","shasum":"00904c3aae0252cf62b5df08bb08787c6da867ab","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-660062ed8.tgz","fileCount":198,"unpackedSize":520234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0BynCRA9TVsSAnZWagAA0lcP/0uTjXyid99loydpMx2X\nmIe+1sib93N2BSnPC6WyqgCEODs9/5y3MPW5ScZvfv7Ea7tfjlmXjoMClBr/\nX2h6VTI04ZkYCf4HNDIbXhpqNkE4P+r+VAvT+vRzosQESUMdwfhenSoK+Jp+\nZQEUCtb3Uu0ZvGppWh6kOOh4HhU7Wnff7+GNkuSIBgY4emiLZOb2b4X4v/+U\nljTIdLy5LfDLFG+m+kO8YNv7CtiO803Pvwb/oAUNzHsi3rESLHIQlYN4/GmC\neXlB41VerHF5XHLJBgwLWde+08xAGHQx8xGUnxme4Z1nq1AxfK+e+O0xiSYl\nw5BqincN2MLoVWFKdrw/HfvwNof9wnHjDIUWoFfiKDR6Xpdo9PCIGWa1x4nQ\n+Je63fWXqz25p5b67BdxUDLSIM7oto1zbm28VRcllC77pNtoms/zTlpv9Vr5\n8x0MKAc7rJAyzGz00G1zy5iCDL2Be5dJyZAiZtfkxG14alNFemCIyjzaKNba\nt5nPyDRKce17VLvkwAqJtaDlh99uyrjZlaebsvsPmyzyPMJlbkyvARNiY5iL\n4BH00Jl9XO9U19RDmwL885EW/omfr1Kx3LtQGLRUSAb3vIKZjdlDp83/HC86\nSRspjG7CLIjY5WdBjo0UUoT+8mibFUlHgTLuBqd326rZthLfdYR9kFIdNn0h\nsUYO\r\n=9BAI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEOaUIKgCKW03DPcIJ8S5PZvPBVW1uuYio4ZtqYBTXT8AiEA+ZHqWw7lS4za0g0BWwCx9byQCy3CVhuN7Lrmjpn0I8I="}]},"_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"directories":{},"maintainers":[{"name":"necolas","email":"nicolasgallagher@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-660062ed8_1607474342403_0.9907271118073242"},"_hasShrinkwrap":false},"0.0.0-12a5867fd":{"name":"react-gui","version":"0.0.0-12a5867fd","description":"React UI framework","main":"./dist/index.js","exports":{"./package.json":"./package.json",".":"./dist/exports/utils/index.js","./create-element":"./dist/exports/create-element/index.js","./create-event-handle":"./dist/exports/create-event-handle/index.js","./image":"./dist/exports/image/index.js","./rich-text-area":"./dist/exports/rich-text-area/index.js","./style-sheet":"./dist/exports/style-sheet/index.js","./text":"./dist/exports/text/index.js","./text-area":"./dist/exports/text-area/index.js","./text-input":"./dist/exports/text-input/index.js","./use-event":"./dist/exports/use-event/index.js","./use-file-selector":"./dist/exports/use-file-selector/index.js","./use-focus":"./dist/exports/use-focus/index.js","./use-focus-visibility":"./dist/exports/use-focus-visibility/index.js","./use-focus-within":"./dist/exports/use-focus-within/index.js","./use-hover":"./dist/exports/use-hover/index.js","./use-interact-outside":"./dist/exports/use-interact-outside/index.js","./use-keyboard":"./dist/exports/use-keyboard/index.js","./use-layout":"./dist/exports/use-layout/index.js","./use-merge-refs":"./dist/exports/use-merge-refs/index.js","./use-modality":"./dist/exports/use-modality/index.js","./use-pan":"./dist/exports/use-pan/index.js","./use-preferences":"./dist/exports/use-preferences/index.js","./use-press":"./dist/exports/use-press/index.js","./use-responder":"./dist/exports/use-responder/index.js","./view":"./dist/exports/view/index.js"},"sideEffects":false,"dependencies":{"inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"engines":{"node":">=12.15.0"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"readme":"# react-gui\n\n[![npm version](https://img.shields.io/npm/v/react-gui.svg?style=flat)](https://www.npmjs.com/package/react-gui)\n\nA framework for creating accessible, interactive, responsive apps with React.\n\nReact GUI uses modern React features to provide a consistent set of UX primitives for working with views, events, gestures, and other behaviors. The built-in Hooks allow for easy composition of behaviors and support the implementation of the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/).\n\n## Requirements\n\n* `node@>=12.15`: Import paths documented for this package rely on [Node.js package entry points](https://nodejs.org/api/packages.html#packages_package_entry_points). Make sure your bundler also supports this Node API (e.g., `webpack@>=5`).\n\n* `react-dom@experimental`: Works best with React DOM's `createRoot` and `createBlockingRoot` APIs, which are curently available only in the experimental builds.\n\n* Browsers: Chrome, Safari 11+, Edge, Firefox, Opera, IE 11.\n\n## Installation\n\n```\nnpm install react-gui\n```\n\n## API\n\n### Components\n\nThe foundational components are adapted from those used in React Native today. These components can adopt behaviors by linking refs to the event and interaction hooks.\n\n* [View](./src/view)\n* [Text](./src/text)\n* [Image](./src/image)\n* [TextInput](./src/text-input)\n* [TextArea](./src/text-area)\n* [RichTextArea](./src/rich-text-area)\n\n### APIs\n\n* [StyleSheet](./src/style-sheet)\n\n### Interactions\n\nHigh-level interactions that simplify working with accessible behaviors across devices and platforms. These hooks (and the underlying event hooks) make it easy to work with pointer gestures, keyboard interactions, and layout changes to adjust a component's render tree and styles. The interaction hooks cause a component to update when their return value changes (if this is not desired, use the event hooks).\n\n* [useFocus](./src/use-focus)\n* [useFocusVisibility](./src/use-focus-visibility)\n* [useFocusWithin](./src/use-focus-within)\n* [useHover](./src/use-hover)\n* [useInteractOutside](./src/use-interact-outside)\n* [useKeyboard](./src/use-keyboard)\n* [useLayout](./src/use-layout)\n* [useModality](./src/use-modality)\n* [usePan](./src/use-pan)\n* [usePress](./src/use-press)\n* [useResponder](./src/use-responder)\n\n### Other hooks\n\n* [useFileSelector](./src/use-file-selector)\n* [useMergeRefs](./src/use-merge-refs)\n* [usePreferences](./src/use-preferences)\n\n### Imperative methods\n\nMethods for working imperatively with host elements.\n\n* [blur](./src/utils#blur)\n* [clear](./src/utils#clear)\n* [focus](./src/utils#focus)\n* [getLayoutRect](./src/utils#getLayoutRect)\n* [getActiveModality](./src/utils#getActiveModality)\n* [getModality](./src/utils#getModality)\n\n### Unstable DOM APIs\n\nThese unstable APIs are the DOM-specific abstractions used to create the built-in, platform-agnostic APIs.\n\n* [createElement](./src/create-element)\n* [createEventHandle](./src/create-event-handle)\n* [useEvent](./src/use-event)\n\n## Other\n\n[CONTRIBUTING](./.github/workflows/CONTRIBUTING.md)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-12a5867fd","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-WL84QpryQe4E1pstP/zFClqlJFDrvj9MUz7WeYp8MYaOj7Z0dkGXK+LGkR4fOfiMrhF1RirT5ECGrtmEVLg4tg==","shasum":"ad66bc6097ff38aa2d3bfa006ed50c8fdd8fd617","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-12a5867fd.tgz","fileCount":222,"unpackedSize":1497669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU7FpCRA9TVsSAnZWagAAFbcQAJ8fVE2uYnF2Ttv8GHsM\n+SNPF8zunyF7p8I9DHiM5SMEB1POPyipso8ojy10OapWcyAQrHa4ae8ldJWz\nqcl9HQWAZK9hcIgOLHNbq9DVuObo/Sh0nU8+3+Kn0I3t5Jhd7iKri4BYOVcy\nXw65Kcax1HYCvO3jNITa6M+vEu3IV9jpazlUGc/SyfWBlX3aKvIrx6hpQFx6\nHdVn/bemldWImh26hUXRfCe2SnJPjiKhmKYbFZZnNpXKun7BUIjEM6jTHlwE\nYKUw2ddIS2BwsfKUaOlz1kv7KB//ggV9bvIm2+dnugD0wRVLwXHwx3pRWEHD\n5vxIrapQk0P68+LVPADRyscI9LBJoXSuawNryCCeqfuRVQpwwepTYQXMb4xF\nq11S3FAcKJ4MpLwpyFpK+Y6dZi+ujzY1UEOdWFW3IFKPBcQG8A7kkJGjgoQK\nMOyp/ckC1Bzw6ATtE07et4zG6B+xRTuTK5SvbZSd7ikUeO3NsIaBZHRnKtTD\nYW47cD0TnY74IBmslZoqyYeigyDt7kPgxphDaGsx5bV4857cMfWpO/9k3TFt\nJ9ujmmN2MP6DlIdQTBQmEN3QH5R4xBxgDz+y8FTn2BDhTjvR6tftTD4sgzxr\nkfAce//AULSNlYPZNC9uSMZjQT6rD2FmgylQDj4BmFANNx58iNkkgP9rlmkR\ndRoP\r\n=A5/2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyjreX/FrguT8ulG3aIol5Z47rcMb3poDLYy+q3a8htQIhALGwSxTqDvleQv/rXeJAF21GGwY5rDZO2IraYThgcAfX"}]},"_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"directories":{},"maintainers":[{"name":"necolas","email":"nicolasgallagher@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-12a5867fd_1616097640795_0.78283681344459"},"_hasShrinkwrap":false},"0.0.0-67d9aeef5":{"name":"react-gui","version":"0.0.0-67d9aeef5","description":"React UI framework","main":"./dist/exports/utils/index.js","sideEffects":false,"dependencies":{"inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"engines":{"node":">=12.15.0"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"readme":"# react-gui\n\n[![npm version](https://img.shields.io/npm/v/react-gui.svg?style=flat)](https://www.npmjs.com/package/react-gui)\n\nA framework for creating accessible, interactive, responsive apps with React.\n\nReact GUI uses modern React features to provide a consistent set of UX primitives for working with views, events, gestures, and other behaviors. The built-in Hooks allow for easy composition of behaviors and support the implementation of the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/).\n\n## Requirements\n\n* `node@>=12.15`: Import paths documented for this package rely on [Node.js package entry points](https://nodejs.org/api/packages.html#packages_package_entry_points). Make sure your bundler also supports this Node API (e.g., `webpack@>=5`).\n\n* `react-dom@experimental`: Works best with React DOM's `createRoot` and `createBlockingRoot` APIs, which are curently available only in the experimental builds.\n\n* Browsers: Chrome, Safari 11+, Edge, Firefox, Opera, IE 11.\n\n## Installation\n\n```\nnpm install react-gui\n```\n\n## API\n\n### Components\n\nThe foundational components are adapted from those used in React Native today. These components can adopt behaviors by linking refs to the event and interaction hooks.\n\n* [View](./src/view)\n* [Text](./src/text)\n* [Image](./src/image)\n* [TextInput](./src/text-input)\n* [TextArea](./src/text-area)\n* [RichTextArea](./src/rich-text-area)\n\n### APIs\n\n* [StyleSheet](./src/style-sheet)\n\n### Interactions\n\nHigh-level interactions that simplify working with accessible behaviors across devices and platforms. These hooks (and the underlying event hooks) make it easy to work with pointer gestures, keyboard interactions, and layout changes to adjust a component's render tree and styles. The interaction hooks cause a component to update when their return value changes (if this is not desired, use the event hooks).\n\n* [useFocus](./src/use-focus)\n* [useFocusVisibility](./src/use-focus-visibility)\n* [useFocusWithin](./src/use-focus-within)\n* [useHover](./src/use-hover)\n* [useInteractOutside](./src/use-interact-outside)\n* [useKeyboard](./src/use-keyboard)\n* [useLayout](./src/use-layout)\n* [useModality](./src/use-modality)\n* [usePan](./src/use-pan)\n* [usePress](./src/use-press)\n* [useResponder](./src/use-responder)\n\n### Other hooks\n\n* [useFileSelector](./src/use-file-selector)\n* [useMergeRefs](./src/use-merge-refs)\n* [usePreferences](./src/use-preferences)\n\n### Imperative methods\n\nMethods for working imperatively with host elements.\n\n* [blur](./src/utils#blur)\n* [clear](./src/utils#clear)\n* [focus](./src/utils#focus)\n* [getLayoutRect](./src/utils#getLayoutRect)\n* [getActiveModality](./src/utils#getActiveModality)\n* [getModality](./src/utils#getModality)\n\n### Unstable DOM APIs\n\nThese unstable APIs are the DOM-specific abstractions used to create the built-in, platform-agnostic APIs.\n\n* [createElement](./src/create-element)\n* [createEventHandle](./src/create-event-handle)\n* [useEvent](./src/use-event)\n\n## Other\n\n[CONTRIBUTING](./.github/workflows/CONTRIBUTING.md)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-67d9aeef5","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-5CHXE+zxkUvc1U00akJfKAUi6PQZxKm444QOMWV3Lp61YEksLsPg2AdprWd3BvzZsThI7op3+yXtbmv/WMGApQ==","shasum":"79d1b85fba3da30f47114752960363194bd9d4f2","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-67d9aeef5.tgz","fileCount":192,"unpackedSize":497257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWOIOCRA9TVsSAnZWagAAP64P+wXnPULC6K4hjUDMue+K\nM9SE1tv8Ai3VfBkNeAfhhawc233vx2SKq/dn7YWJty5+nnLD7Ttay6IKcQ5h\n3ohk1HJaE3FJSnkCTYCIGeOik9gtU/inT3mTS/elwg5nj7BJ6oOgzkQXEWe2\nigAADNnxIb1yZAN3BVMGPQXz1/XUaPbwjQYvm1rGLPflqWBOaJ8KxqfZjxEi\nBjy+zBCKSRGfCD2oPRHR6UBLrrdz3bqu4y73KRETmoS/sOB+9Uqnpd4URlRe\nQQNDVPV/KAgXlwOk2qVQVVfQqSCngJFmKfEgHEUErumYUIfen1kFyQuns/YZ\nG334wFz/KhJvO+0mKfjqG9hxIhM+Tt87h6f4tfDIVu91pdd2z/qeyBAcERVR\naYIB3+cVx4ytRhjrFVe6t1eLlIFFST1po7iZ9JbLtpH+vy5Ax23yMWYUAWxh\nmcJkVD3EOsg2p1BOjE0a5Yw8pBubqryQf/IZPRKU7+ptfai1Ulv705V+R0aY\nEUGxx53T5OCchYvbpI49Itb0yQg5ADRzR9Fu2f2CCj67wltkVDw+9jmx5Pnj\nIbhbyUA8pmKLf2ST1lBH67V4ydgQFDpNde+SM+o+Xdyq3TCXsxCFIkoGxuaU\n/7sfa5gXVfdminf7NWTnnNU2J+3o+lbQddkaHwIIM7FncZ2HcGezNuC9mwca\nP0qi\r\n=cluF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwM8EeXv28abQ3VIWMPw3uRwSa8azGaC48qSHlmDElYAiEArXPBptqDh8xYNgfXYkJn/1eo2WCDbZq3wgiohNwrqak="}]},"_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"directories":{},"maintainers":[{"name":"necolas","email":"nicolasgallagher@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-67d9aeef5_1616437774340_0.23796426882421828"},"_hasShrinkwrap":false},"0.0.0-de24df473":{"name":"react-gui","version":"0.0.0-de24df473","description":"React UI framework","main":"./dist/exports/utils/index.js","sideEffects":false,"dependencies":{"inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"engines":{"node":">=12.15.0"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"readme":"# react-gui\n\n[![npm version](https://img.shields.io/npm/v/react-gui.svg?style=flat)](https://www.npmjs.com/package/react-gui)\n\nA framework for creating accessible, interactive, responsive apps with React.\n\nReact GUI uses modern React features to provide a consistent set of UX primitives for working with views, events, gestures, and other behaviors. The built-in Hooks allow for easy composition of behaviors and support the implementation of the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/).\n\n## Requirements\n\n* `node@>=12.15`: Import paths documented for this package rely on [Node.js package entry points](https://nodejs.org/api/packages.html#packages_package_entry_points). Make sure your bundler also supports this Node API (e.g., `webpack@>=5`).\n\n* `react-dom@experimental`: Works best with React DOM's `createRoot` and `createBlockingRoot` APIs, which are curently available only in the experimental builds.\n\n* Browsers: Chrome, Safari 11+, Edge, Firefox, Opera, IE 11.\n\n## Installation\n\n```\nnpm install react-gui\n```\n\n## API\n\n### Components\n\nThe foundational components are adapted from those used in React Native today. These components can adopt behaviors by linking refs to the event and interaction hooks.\n\n* [View](./src/view)\n* [Text](./src/text)\n* [Image](./src/image)\n* [TextInput](./src/text-input)\n* [TextArea](./src/text-area)\n* [RichTextArea](./src/rich-text-area)\n\n### APIs\n\n* [StyleSheet](./src/style-sheet)\n\n### Interactions\n\nHigh-level interactions that simplify working with accessible behaviors across devices and platforms. These hooks (and the underlying event hooks) make it easy to work with pointer gestures, keyboard interactions, and layout changes to adjust a component's render tree and styles. The interaction hooks cause a component to update when their return value changes (if this is not desired, use the event hooks).\n\n* [useFocus](./src/use-focus)\n* [useFocusVisibility](./src/use-focus-visibility)\n* [useFocusWithin](./src/use-focus-within)\n* [useHover](./src/use-hover)\n* [useInteractOutside](./src/use-interact-outside)\n* [useKeyboard](./src/use-keyboard)\n* [useLayout](./src/use-layout)\n* [useModality](./src/use-modality)\n* [usePan](./src/use-pan)\n* [usePress](./src/use-press)\n* [useResponder](./src/use-responder)\n\n### Other hooks\n\n* [useFileSelector](./src/use-file-selector)\n* [useMergeRefs](./src/use-merge-refs)\n* [usePreferences](./src/use-preferences)\n\n### Imperative methods\n\nMethods for working imperatively with host elements.\n\n* [blur](./src/utils#blur)\n* [clear](./src/utils#clear)\n* [focus](./src/utils#focus)\n* [getLayoutRect](./src/utils#getLayoutRect)\n* [getActiveModality](./src/utils#getActiveModality)\n* [getModality](./src/utils#getModality)\n\n### Unstable DOM APIs\n\nThese unstable APIs are the DOM-specific abstractions used to create the built-in, platform-agnostic APIs.\n\n* [createElement](./src/create-element)\n* [createEventHandle](./src/create-event-handle)\n* [useEvent](./src/use-event)\n\n## Other\n\n[CONTRIBUTING](./.github/workflows/CONTRIBUTING.md)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.0.0-de24df473","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-Fmwsyw5QacqcD6qmfA0629irgLjbTC0hGgVcgvaWWDyDOFqRCv1QAMjQOfBl4vUxdlhbKC34D28IWWnJbttxEQ==","shasum":"be469c4b847c7479a9fb1781f40e05e54217f43a","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-de24df473.tgz","fileCount":229,"unpackedSize":1496740,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWOVdCRA9TVsSAnZWagAAsGEP/jlk9vT2+3fzmIa46C/J\nQfg8D+ZK+c3P4LuP/TM2ziKluIclUwQFrnSWf9rIMJHMIggdapKaPfQwSI6h\nsmclyi9gtGjGKvPG+ifhWQ7ZcOoPGM2rnW9DpjhoaNoTtg195w148K5YArsQ\nU+w8wxVzwy0ur9OO/4bkkahVZsAAvA3e5dp5dbcdnS2123IB1GfW/1yXoPml\nOekgNbx0zWa7B/JYl1ggPHRbKE1vUghdLQG2yDo/8R6xaJF1ldTem7dIWYIH\nxfl9bNC7If0MN/ZoY+r4bdmj/xjn8hfu6ywFkmTHVJKut8u4tdsSBHWdgz1b\n4gSRzpJNzj5H739b+M19BIMsCQlKBYY9CPhCSdRJR9rFEyhH7dE8UplnEBRP\nndoDY8IRquk2RLAIHbW2Z1qcXFODGY47DzZEYTm8RXeozNm/lK5c1GXgGy5p\njX0ERkfGJFvl07HUJuJgR0nURwR/DWln9Dcgb3p9nRuVNv+dOZA+HG61woUE\nfjBSSZhvCrKMGswSU8m9Xfb1e9x6HBE4Rcc9fmV4cteOURKjSaXI17Q+YUnu\nNUfySaW+/l3ffRTl05Tl8qrCaZXZd86azp0KLmoYkHjHWMEdoCvuR10zwIqS\newGcHv3Em5ZjYg474nEJKcHjFfOTKhTb+mSZs27iQsqoLN9/0H2U7+eQeiGJ\n8lLu\r\n=Zuvh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMIeGN7na/rfvnaV1NfHhZcFAk0P6ap45yC2vzNWBAkAiBWrPKfKzIL+DtfbPLVxkVVN6WdfUVCJns004cWu288AA=="}]},"_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"directories":{},"maintainers":[{"name":"necolas","email":"nicolasgallagher@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-de24df473_1616438621076_0.5418520394166955"},"_hasShrinkwrap":false},"0.1.0":{"name":"react-gui","version":"0.1.0","description":"React UI framework","main":"./dist/exports/utils/index.js","sideEffects":false,"dependencies":{"inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"engines":{"node":">=12.15.0"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.1.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-YKXOfcescg6REtmhxI0UtQhqgIHYr+fddVLxEznapjOd5xWO2+h5+/aKBiYFDlz5OWgg7hbRYmzpe2l7uxWgXw==","shasum":"337d9efdef24110c4ef1ee3fababc8368b3cd653","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.1.0.tgz","fileCount":229,"unpackedSize":1496729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWOwYCRA9TVsSAnZWagAA+dAQAKRD3CCKaKXyF3173jaZ\nWgSfSHPU5S20MbJlwqnDplm6NnnSKnWRjEZ/aMUAkSk/3kqpNBrAfJRC8o4M\ndcdCi5F/675ODoVbl4TqVSXObMsRa9AsXowWJgXuHxvivsFpz02qNL4XcHQQ\n/rAh+84J4B82hngHM3MmiTOUkFZc4YWgracyY+YPocC05t0q79Id5I5stZHC\n2VRKNCCzEAF8A6z8dl1SVC1pQDsPxC2AVPi7cyn2qdZKJgo0Tol0YpbHdYzy\nOMGu4Je76ZnY2dxqOSwUJgqi/r5/SqXp7WdxNBUQ2q7ITii1qrZMoWJ2RFSM\nE72iZNXL3RuvvXRyKYJl9NPF0UOj9XWAIRtUqsFQ5LYMyr0FNtmv/8kcFDOZ\nEb8sbisTpKnS4EX0IHWL6dHQJQK6mnJXSVaT9RjX6wtzQcHEeSGqsalEiPGK\n0uHRrD2VirGkb1PPiJhnq9ICUILT6dMmTzt94aCWwTxx1XjpxmyvEYI5BdEx\njwpBLq/lZi9NskL8kRCX1Yf+Rt1M7Zy0Dalh32o6zEeqwakshvMQqeIh2CF0\nZo3KNVr6TFwSsUWGg9yl/VoS7OaaxF4I2/DtCEwdwhqH2Zc3jwneCDEz0obX\nA1Wt1nOnRXK9UompHS8UUZtOjxZQLakp5b9N0BRE8Y9iFBWLx5jvuY8Xp2a+\nE5p4\r\n=Ol+p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGgmmDtkhkoJ3mrjQ5tqxSSQUdIjT9htUO1pjeIKDEi2AiEApG3QQ4NNSGd2aR6xqN/qC9uHN7zznm52/bCFfqmpIqk="}]},"_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"directories":{},"maintainers":[{"name":"necolas","email":"nicolasgallagher@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.1.0_1616440343806_0.8591323628835694"},"_hasShrinkwrap":false},"0.1.1":{"name":"react-gui","version":"0.1.1","description":"React UI framework","main":"./dist/exports/utils/index.js","sideEffects":false,"dependencies":{"inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"engines":{"node":">=12.15.0"},"author":{"name":"Nicolas Gallagher"},"license":"MIT","repository":{"type":"git","url":"git://github.com/necolas/react-gui.git"},"bugs":{"url":"https://github.com/necolas/react-gui/issues"},"homepage":"https://github.com/necolas/react-gui#readme","_id":"react-gui@0.1.1","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-d++LD2E5UqeFp9mHvJmZaM6JLpP4K0QC40lhSABrjsMD6Z9ehdgs0KjR3bji4t580OVTAdB2AbYkFPlenUMFLQ==","shasum":"d2a153eafd60889026cf52027503a42355643302","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.1.1.tgz","fileCount":229,"unpackedSize":1496729,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWPJXCRA9TVsSAnZWagAA/6AQAIGUgNmdP3ZsokpvgDV6\n0vmyuIHAKj5hxW3WmVuwbAHfA5HCjB2tj9pnbJ+WJy5GI4b4e2oTDkBmUtyx\ntTrkb/Gxfu6Lcyi5LtNQM0lKU/BYy4WKNH6p25dkNAdSL7WCRDE3OuvVLejW\nPYlZlSBMkybx/MAoVUx/jqjLMdDjojxQV8DWpw/LWzZ5KNfEnUQL5GtjNm7f\nsnnNaw0wSCoLKw3O3siqcy8slJQDOxuqG4XEiV48wLoyq5LuZdXRI/MWssO5\niFnJU7ifftS+n9WSBbbSpORslfGbaok4N2kNMwrRHM/XdEDiByW2GRT9jMSY\nhJwMSu2ZxYABmoVlvbdAHpTS39f+UFEy0373W7vkWujN25RwO3rr6iRch3Cf\n63JahjlTB3NlqVzDPE7Uy3NuQ+/iVSXldFpiVHlEUGhsaINH7E4glI3XMdL2\nfpg2Fhw7fbLLuxzSUu8FkOqrUx1Od5hBOZ1VtBPngXjcGKUOuaaiRC0PqZxW\nd/vEXEQvyvSiCH+2OCLPN2aerSAABd16bMMtDpl80O8QsXHAEXvk1cQm/AZ5\nY5+0+VjE3kAXoJcnVIEiekXNlWoIiVIxFapq0qpePdTg4hSh+fG1JClZ4Eol\ni5c8Bm/jwVJtJ4cHKvWG5oTpGyLzmt+2KhGCRG9FQtZUYfzbnnL7+ESo8SKO\njz5z\r\n=gL9z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFIYUdzNZKrJkJaO+5Y89k+3TtFyAatBTBaBaOFxZRRXAiEAyL/ZaDbz8wPxw3OjTOxLcUtcLQhjF2Xart6B+Avsuh8="}]},"_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"directories":{},"maintainers":[{"name":"necolas","email":"nicolasgallagher@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.1.1_1616441942504_0.5012361384268293"},"_hasShrinkwrap":false},"0.2.0":{"name":"react-gui","version":"0.2.0","description":"React UI framework","main":"./dist/exports/utils/index.js","sideEffects":false,"dependencies":{"inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"engines":{"node":">=12.15.0"},"license":"MIT","repository":{"type":"git","url":"git://github.com/facebookexternal/react-gui.git"},"bugs":{"url":"https://github.com/facebookexternal/react-gui/issues"},"homepage":"https://github.com/facebookexternal/react-gui#readme","_id":"react-gui@0.2.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-sHue9KcU0Qf3xZ3xBiMS+k5VpqFWYrHSm//EeOi0uC/s29yafxJZhso05moZd8rYH4f3cyDnJnVX3GjyCQVfVA==","shasum":"a8c8600795839e76dcf39c09fc945dffe97a3475","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.2.0.tgz","fileCount":301,"unpackedSize":1792869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1MPOCRA9TVsSAnZWagAAgcUQAIAkYjZuaIBC/UHUWBQP\ngV52eWfS/obYD5zUOC43VGbkZRueKUm4Z5FG0X7a4hOHVQ9UrTBNX43JqXbi\nEJboB1tE/tsbP1s+1J0D97hTuHkwBRsh8KU2ZkLNe4POvmX/XytTLYD0jw+P\nNDc+b3spsrwUBjnObgjO+pwbVR0sHCDvAXtv8c/Iuujz6pJd6TWEHf8JDwNI\ns0R4a4OT+7vUQ300yZKFNKSDEzbXS873PxJUwmIF1dQpfbRPKrZRbLUoEONA\nb1rPXBjk4UOFXuU5P1XjunIjynoSO37uoumABbN7EGtY39KqjkYz0MUQdfGx\nsSagNVvhVlrxpM+iZACUf4NBog6dE0eJrSSpmCzU9ggbTIZmtYixpucuvu5w\nEw/INJzJl2oiO3jLPas9mj/oLWClk1A1XijL+B080Yuw+0brat2dyh0RBfpu\npr1imz7izKBTMPvYDYFL4YCRwwNTzuTc9X712VLz7KyELn7fMDcqmI5Fue3T\nWxQZYjZZ5KSvGCl6UlSWNcjZG/y4nAIisgg0b4iaPyGyE2P+JnP+1igaceei\npgAo+/vDSQYQFz5khE0KPazgm1BiM9exuibq26dCgFFbnAougr01gZxf5fe0\nhQyyje0wJHMpBcjTaGFsmgAT6gwJ7sTS8T8wnZVerVSo7K8di63Y+avciRsr\nHDLv\r\n=t4/T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuLDv4xp2rbJGo3XWL4I9kxhaJafM/dxe0nvIwbRugCAiADY9YfuAx6NJkTYucnJzm9dC5p4ZBAKK7k7uUL5MKqPQ=="}]},"_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"directories":{},"maintainers":[{"name":"necolas","email":"nicolasgallagher@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.2.0_1624556494086_0.8676114590695867"},"_hasShrinkwrap":false},"0.2.1":{"name":"react-gui","version":"0.2.1","description":"React UI framework","main":"./dist/exports/utils/index.js","sideEffects":false,"dependencies":{"inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"engines":{"node":">=12.15.0"},"license":"MIT","repository":{"type":"git","url":"git://github.com/facebookexternal/react-gui.git"},"bugs":{"url":"https://github.com/facebookexternal/react-gui/issues"},"homepage":"https://github.com/facebookexternal/react-gui#readme","_id":"react-gui@0.2.1","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-dO9ONS2qJf8aavkaEO0u0JkvKdFDV25rOsp7Wj5S60KN44vCQb5Bb14gs3RO8doanuO8M4GzIVJpzmQoJkpjrg==","shasum":"913607e3ef8398060268f188d20899509460d489","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.2.1.tgz","fileCount":300,"unpackedSize":1763986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh24WiCRA9TVsSAnZWagAAV2AP/2K2x3unW3FNIzcQ5/sB\nfJIt8nmeOvyRx+yqTWmyYU4JcsFiJRuYH+mGCEZNzUrDiS0ckUj2gimnUCEo\n9m8RwZcTOEWbGnATGMSP/pbaIQEgvtGHE5WVUov8f2yG82a8s612/Ivct9Ar\n5Ay+xf7KbDCiUmo3Ys0mwRWhqFcTot+NTkDZ2LwyJd4CcokpG4IXwwa4BphU\nL/lzATtAFE+i779KQxYy6WIORZfxE3LZ2OHNvzLT7v8mPtok4pSiHIgkC8m/\nAmkYHe8PfCu2gchMAs/AN0Ko16GW1liH1EDoXPP/sw+JlH2cKebETFhTiKZh\nOfT4DObnnyC15XQOMIqQbufIcbc8q3FNB0U/khuO6QRRH896t+1zhnZIujoP\npLmN5+PAXXFegiyEKVMXKc/9u/BhGb+WLGt/b71HYg0a1DRmqJl/GxzpHXg1\ngP6GdBK9oDMWHOz3OHOIdIMg/cw+RqrvL8T2CgCl+mWuBWCWwtyhb4hDdXbh\nE4E3mH6Plic47ZGu4pfh/cM1LI44VMAtWbGRR4yroty0PvH6OTNqph8PpZMl\nwy4aZZJptK1QwOG3j/04zZxM1Bd31YZmXpV1bvdxf58ElK2RarCbMgaT2U2M\nF6BrZjYDwxYfSqE46yjhOgUbkjjaF6VAUISdjhZvvYyeArkNbpsdYdjDGQX7\nc/Qj\r\n=UyPe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB38hfMEiA/YySCAKeuHqzVhG1LTyisONa0Y1SiG/E1jAiAhqljt3x2sF35gh/xdcoRbIb46gtlc3jvQPbuhdM9eTg=="}]},"_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"directories":{},"maintainers":[{"name":"necolas","email":"nicolasgallagher@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.2.1_1624573679226_0.7205455502791926"},"_hasShrinkwrap":false},"0.0.0-c60046238":{"name":"react-gui","version":"0.0.0-c60046238","description":"React UI framework","main":"./dist/exports/core.js","sideEffects":false,"dependencies":{"inline-style-prefixer":"^6.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"engines":{"node":">=12.15.0"},"license":"MIT","repository":{"type":"git","url":"git://github.com/facebookexternal/react-gui.git"},"directories":{"":"./"},"haste_commonjs":true,"readme":"# react-gui\n\nExperimental experiment.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/facebookexternal/react-gui/issues"},"homepage":"https://github.com/facebookexternal/react-gui#readme","_id":"react-gui@0.0.0-c60046238","_nodeVersion":"14.15.1","_npmVersion":"7.20.0","dist":{"integrity":"sha512-xwCMemr8OnEixvJituMPTQ7bSLCNJ2JQZSXWfZRVa+YBMe5TFEUwpWlA/c83v8bHBjFsCYyAPSPzecEcxsxfSw==","shasum":"342779a0de908d29969ca3d02897367679be14de","tarball":"https://registry.npmjs.org/react-gui/-/react-gui-0.0.0-c60046238.tgz","fileCount":251,"unpackedSize":523636,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCT5GVMfX8yZbYrawFCL4FTkm9c9aJ7z4Hx7115ZYeUwIhAOOUQBFqetDo8bvigEqviZMlxu4100twucpIxYpP3ZHM"}]},"_npmUser":{"name":"necolas","email":"nicolasgallagher@gmail.com"},"maintainers":[{"name":"necolas","email":"nicolasgallagher@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-gui_0.0.0-c60046238_1634062485926_0.032575386064665146"},"_hasShrinkwrap":false}},"readme":"","maintainers":[{"name":"necolas","email":"nicolasgallagher@gmail.com"}],"time":{"modified":"2022-06-25T22:55:05.261Z","created":"2016-10-06T03:57:34.325Z","0.0.1":"2016-10-06T03:57:34.325Z","0.0.0-d319c53":"2020-06-25T23:17:03.041Z","0.0.0-65ef3ba":"2020-06-25T23:29:49.782Z","0.0.0-209c42b":"2020-06-25T23:32:21.174Z","0.0.0-ac0a216":"2020-07-01T00:30:29.304Z","0.0.0-5e96bfb":"2020-07-01T20:06:35.625Z","0.0.0-fde89cb":"2020-07-10T22:57:20.361Z","0.0.0-91758dd":"2020-07-27T18:46:04.827Z","0.0.0-2e39cbb":"2020-07-31T19:22:54.657Z","0.0.0-66b56b5":"2020-08-06T00:47:04.874Z","0.0.0-c7f5055":"2020-08-06T21:53:34.050Z","0.0.0-b64e6f6":"2020-08-10T20:11:15.184Z","0.0.0-a234274":"2020-08-18T17:57:57.315Z","0.0.0-1080b62":"2020-10-07T19:18:37.086Z","0.0.0-660062ed8":"2020-12-09T00:39:02.627Z","0.0.0-12a5867fd":"2021-03-18T20:00:41.022Z","0.0.0-67d9aeef5":"2021-03-22T18:29:34.517Z","0.0.0-de24df473":"2021-03-22T18:43:41.400Z","0.1.0":"2021-03-22T19:12:24.255Z","0.1.1":"2021-03-22T19:39:02.732Z","0.2.0":"2021-06-24T17:41:34.209Z","0.2.1":"2021-06-24T22:27:59.540Z","0.0.0-c60046238":"2021-10-12T18:14:46.084Z"},"homepage":"https://github.com/facebookexternal/react-gui#readme","repository":{"type":"git","url":"git://github.com/facebookexternal/react-gui.git"},"bugs":{"url":"https://github.com/facebookexternal/react-gui/issues"},"license":"MIT","readmeFilename":""}