@hanzogui/react-native-web-lite 2.0.0

package/package.json

@@ -0,0 +1,125 @@
+{
+  "name": "@hanzogui/react-native-web-lite",
+  "version": "2.0.0",
+  "description": "React Native for Web",
+  "keywords": [
+    "react",
+    "react-component",
+    "react-native",
+    "web"
+  ],
+  "bugs": {
+    "url": "https://github.com/hanzoai/gui/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hanzoai/gui.git",
+    "directory": "packages/react-native-web-lite"
+  },
+  "files": [
+    "types",
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    },
+    "./without-animated": {
+      "browser": "./dist/esm/without-animated.mjs",
+      "module": "./dist/esm/without-animated.mjs",
+      "import": "./dist/esm/without-animated.mjs",
+      "require": "./dist/cjs/without-animated.cjs"
+    },
+    "./Libraries/Pressability/Pressability": {
+      "browser": "./dist/esm/Libraries/Pressability/Pressability.mjs",
+      "module": "./dist/esm/Libraries/Pressability/Pressability.mjs",
+      "import": "./dist/esm/Libraries/Pressability/Pressability.mjs",
+      "require": "./dist/cjs/Libraries/Pressability/Pressability.cjs"
+    },
+    "./Libraries/Pressability/usePressability": {
+      "browser": "./dist/esm/Libraries/Pressability/usePressability.mjs",
+      "module": "./dist/esm/Libraries/Pressability/usePressability.mjs",
+      "import": "./dist/esm/Libraries/Pressability/usePressability.mjs",
+      "require": "./dist/cjs/Libraries/Pressability/usePressability.cjs"
+    },
+    "./Libraries/Utilities/codegenNativeComponent": {
+      "browser": "./dist/esm/codegenNativeComponent.mjs",
+      "module": "./dist/esm/codegenNativeComponent.mjs",
+      "import": "./dist/esm/codegenNativeComponent.mjs",
+      "require": "./dist/cjs/codegenNativeComponent.cjs"
+    },
+    "./Libraries/Utilities/codegenNativeCommand": {
+      "browser": "./dist/esm/codegenNativeCommand.mjs",
+      "module": "./dist/esm/codegenNativeCommand.mjs",
+      "import": "./dist/esm/codegenNativeCommand.mjs",
+      "require": "./dist/cjs/codegenNativeCommand.cjs"
+    },
+    "./dist/exports/StyleSheet/compiler/createReactDOMStyle": {
+      "browser": "./dist/esm/createReactDOMStyle.mjs",
+      "module": "./dist/esm/createReactDOMStyle.mjs",
+      "import": "./dist/esm/createReactDOMStyle.mjs",
+      "require": "./dist/cjs/createReactDOMStyle.cjs"
+    },
+    "./dist/exports/StyleSheet/preprocess": {
+      "browser": "./dist/esm/preprocess.mjs",
+      "module": "./dist/esm/preprocess.mjs",
+      "import": "./dist/esm/preprocess.mjs",
+      "require": "./dist/cjs/preprocess.cjs"
+    },
+    "./dist/modules/*": {
+      "browser": "./dist/esm/modules/*/index.mjs",
+      "module": "./dist/esm/modules/*/index.mjs",
+      "import": "./dist/esm/modules/*/index.mjs",
+      "require": "./dist/cjs/modules/*/index.cjs"
+    },
+    "./dist/exports/*": {
+      "browser": "./dist/esm/exports/*/index.mjs",
+      "module": "./dist/esm/exports/*/index.mjs",
+      "import": "./dist/esm/exports/*/index.mjs",
+      "require": "./dist/cjs/exports/*/index.cjs"
+    },
+    "./dist/*": {
+      "browser": "./dist/esm/*/index.mjs",
+      "module": "./dist/esm/*/index.mjs",
+      "import": "./dist/esm/*/index.mjs",
+      "require": "./dist/cjs/*/index.cjs"
+    }
+  },
+  "scripts": {
+    "build": "hanzo-gui-build --skip-types --skip-native",
+    "watch": "hanzo-gui-build --watch --skip-types --skip-native",
+    "clean": "hanzo-gui-build clean",
+    "clean:build": "hanzo-gui-build clean:build"
+  },
+  "dependencies": {
+    "@hanzogui/normalize-css-color": "workspace:*",
+    "@hanzogui/react-native-use-pressable": "workspace:*",
+    "@hanzogui/react-native-use-responder-events": "workspace:*",
+    "@hanzogui/react-native-web-internals": "workspace:*",
+    "@hanzogui/web": "workspace:*",
+    "invariant": "^2.2.4",
+    "memoize-one": "^6.0.0"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "workspace:*",
+    "react": ">=19",
+    "react-dom": "*"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": "*"
+  },
+  "tags": [
+    "react"
+  ]
+}

package/src/AccessibilityInfo/index.tsx

@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import { canUseDOM } from '@hanzogui/react-native-web-internals'
+
+function isScreenReaderEnabled(): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    resolve(true)
+  })
+}
+
+const prefersReducedMotionMedia =
+  canUseDOM && typeof window.matchMedia === 'function'
+    ? window.matchMedia('(prefers-reduced-motion: reduce)')
+    : null
+
+function isReduceMotionEnabled(): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    resolve(prefersReducedMotionMedia ? prefersReducedMotionMedia.matches : true)
+  })
+}
+
+function addChangeListener(fn) {
+  if (prefersReducedMotionMedia != null) {
+    prefersReducedMotionMedia.addEventListener != null
+      ? prefersReducedMotionMedia.addEventListener('change', fn)
+      : prefersReducedMotionMedia.addListener(fn)
+  }
+}
+
+function removeChangeListener(fn) {
+  if (prefersReducedMotionMedia != null) {
+    prefersReducedMotionMedia.removeEventListener != null
+      ? prefersReducedMotionMedia.removeEventListener('change', fn)
+      : prefersReducedMotionMedia.removeListener(fn)
+  }
+}
+
+const handlers = {}
+
+export const AccessibilityInfo = {
+  /**
+   * Query whether a screen reader is currently enabled.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when a screen reader is enabled and `false` otherwise.
+   */
+  isScreenReaderEnabled,
+
+  /**
+   * Query whether the user prefers reduced motion.
+   *
+   * Returns a promise which resolves to a boolean.
+   * The result is `true` when a screen reader is enabled and `false` otherwise.
+   */
+  isReduceMotionEnabled,
+
+  /**
+   * Deprecated
+   */
+  fetch: isScreenReaderEnabled,
+
+  /**
+   * Add an event handler. Supported events: reduceMotionChanged
+   */
+  addEventListener: function (eventName: string, handler: Function): any {
+    if (eventName === 'reduceMotionChanged') {
+      if (!prefersReducedMotionMedia) {
+        return
+      }
+      const listener = (event) => {
+        handler(event.matches)
+      }
+      addChangeListener(listener)
+      // @ts-ignore
+      handlers[handler] = listener
+    }
+
+    return {
+      remove: () => AccessibilityInfo.removeEventListener(eventName, handler),
+    }
+  },
+
+  /**
+   * Set accessibility focus to a react component.
+   */
+  setAccessibilityFocus: function (reactTag: number): void {},
+
+  /**
+   * Post a string to be announced by the screen reader.
+   */
+  announceForAccessibility: function (announcement: string): void {},
+
+  /**
+   * Remove an event handler.
+   */
+  removeEventListener: function (eventName: string, handler: Function): void {
+    if (eventName === 'reduceMotionChanged') {
+      // @ts-ignore
+      const listener = handlers[handler]
+      if (!listener || !prefersReducedMotionMedia) {
+        return
+      }
+      removeChangeListener(listener)
+    }
+    return
+  },
+}

package/src/ActivityIndicator/__tests__/__snapshots__/index-test.js.snap

@@ -0,0 +1,466 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/ActivityIndicator prop "accessibilityLabel" value is set 1`] = `
+<div
+  aria-label="accessibility label"
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "accessibilityLiveRegion" value is set 1`] = `
+<div
+  aria-live="polite"
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "animating" is "false" 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "animating" is "true" 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "color" 1`] = `
+<svg
+  height="100%"
+  viewBox="0 0 32 32"
+  width="100%"
+>
+  <circle
+    cx="16"
+    cy="16"
+    fill="none"
+    r="14"
+    stroke-width="4"
+    style="stroke: red; opacity: 0.2;"
+  />
+  <circle
+    cx="16"
+    cy="16"
+    fill="none"
+    r="14"
+    stroke-width="4"
+    style="stroke: red; stroke-dasharray: 80; stroke-dashoffset: 60;"
+  />
+</svg>
+`;
+
+exports[`components/ActivityIndicator prop "dataSet" value is set 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  data-one="one"
+  data-two="two"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "hidesWhenStopped" is "false" 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "hidesWhenStopped" is "true" 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0 r-animationPlayState-1abnn5w r-visibility-11j9u27"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "nativeID" value is set 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  id="123"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "size" is "large" 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-1r8g8re r-width-1acpoxo r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "size" is a number 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+    style="height: 30px; width: 30px;"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "style" value is set 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  role="progressbar"
+  style="border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px;"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`components/ActivityIndicator prop "testID" value is set 1`] = `
+<div
+  aria-valuemax="1"
+  aria-valuemin="0"
+  class="css-view-175oi2r r-alignItems-1awozwy r-justifyContent-1777fci"
+  data-testid="123"
+  role="progressbar"
+>
+  <div
+    class="css-view-175oi2r r-height-z80fyv r-width-19wmn03 r-animationDuration-17bb2tj r-animationIterationCount-1muvv40 r-animationKeyframes-127358a r-animationTimingFunction-1ldzwu0"
+  >
+    <svg
+      height="100%"
+      viewBox="0 0 32 32"
+      width="100%"
+    >
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; opacity: 0.2;"
+      />
+      <circle
+        cx="16"
+        cy="16"
+        fill="none"
+        r="14"
+        stroke-width="4"
+        style="stroke: #1976D2; stroke-dasharray: 80; stroke-dashoffset: 60;"
+      />
+    </svg>
+  </div>
+</div>
+`;