[
  {
    "path": ".gitignore",
    "content": "node_modules\ndist\n*gitigx*\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2017 Rafael Pedicini\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "README.md",
    "content": "# Fscreen - Fullscreen API\n\n[![npm](https://img.shields.io/npm/dm/fscreen?label=npm)](https://www.npmjs.com/package/fscreen) [![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/fscreen?color=purple)](https://bundlephobia.com/result?p=fscreen)\n\nVendor agnostic access to the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). Build with the Fullscreen API as intended without worrying about vendor prefixes.\n\n---\n\n### [Live demo app for Fscreen](https://fscreen.rafgraph.dev)\n\nCode is in the [`/demo`](/demo) folder.\n\n---\n\n```shell\n$ npm install --save fscreen\n```\n\n```javascript\nimport fscreen from 'fscreen';\n\nfscreen.fullscreenEnabled === true / false;\n// boolean to tell if fullscreen mode is supported\n// replacement for: document.fullscreenEnabled\n// mapped to: document.vendorMappedFullscreenEnabled\n\nfscreen.fullscreenElement === null / undefined / DOM Element;\n// null if not in fullscreen mode, or the DOM element that's in fullscreen mode\n// (if fullscreen is not supported by the device it will be undefined)\n// replacement for: document.fullscreenElement\n// mapped to: document.vendorMappedFullsceenElement\n// note that fscreen.fullscreenElement uses a getter to retrieve the element\n// each time the property is accessed.\n\n\nfscreen.requestFullscreen(element);\n// replacement for: element.requestFullscreen()\n// mapped to: element.vendorMappedRequestFullscreen()\n\nfscreen.requestFullscreenFunction(element);\n// replacement for: element.requestFullscreen - without calling the function\n// mapped to: element.vendorMappedRequestFullscreen\n\nfscreen.exitFullscreen();\n// replacement for: document.exitFullscreen()\n// mapped to: document.vendorMappedExitFullscreen()\n// note that fscreen.exitFullscreen is mapped to\n// document.vendorMappedExitFullscreen - without calling the function\n\n\nfscreen.onfullscreenchange = handler;\n// replacement for: document.onfullscreenchange = handler\n// mapped to: document.vendorMappedOnfullscreenchange = handler\n\nfscreen.addEventListener('fullscreenchange', handler, options);\n// replacement for: document.addEventListener('fullscreenchange', handler, options)\n// mapped to: document.addEventListener('vendorMappedFullscreenchange', handler, options)\n\nfscreen.removeEventListener('fullscreenchange', handler, options);\n// replacement for: document.removeEventListener('fullscreenchange', handler, options)\n// mapped to: document.removeEventListener('vendorMappedFullscreenchange', handler, options)\n\n\nfscreen.onfullscreenerror = handler;\n// replacement for: document.onfullscreenerror = handler\n// mapped to: document.vendorMappedOnfullscreenerror = handler\n\nfscreen.addEventListener('fullscreenerror', handler, options);\n// replacement for: document.addEventListener('fullscreenerror', handler, options)\n// mapped to: document.addEventListener('vendorMappedFullscreenerror', handler, options)\n\nfscreen.removeEventListener('fullscreenerror', handler, options);\n// replacement for: document.removeEventListener('fullscreenerror', handler, options)\n// mapped to: document.removeEventListener('vendorMappedFullscreenerror', handler, options)\n\n\nfscreen.fullscreenPseudoClass;\n// returns: the vendorMapped fullscreen Pseudo Class\n// i.e. :fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen\n// Can be used to find any elements that are fullscreen using the vendorMapped Pseudo Class \n// e.g. document.querySelectorAll(fscreen.fullscreenPseudoClass).forEach(...);\n```\n\n## Usage\n\nUse it just like the spec API.\n\n```javascript\nif (fscreen.fullscreenEnabled) {\n fscreen.addEventListener('fullscreenchange', handler, false);\n fscreen.requestFullscreen(element);\n}\n\nfunction handler() {\n if (fscreen.fullscreenElement !== null) {\n   console.log('Entered fullscreen mode');\n } else {\n   console.log('Exited fullscreen mode');\n }\n}\n```\n"
  },
  {
    "path": "demo/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n.eslintcache\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
  },
  {
    "path": "demo/LICENSE",
    "content": "MIT License\n\nCopyright (c) 2020 Rafael Pedicini\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "demo/README.md",
    "content": "# Demo App for [`fscreen`](https://github.com/rafgraph/fscreen)\n\nLive demo app: https://fscreen.rafgraph.dev\n"
  },
  {
    "path": "demo/package.json",
    "content": "{\n  \"name\": \"fscreen-demo\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@radix-ui/react-icons\": \"^1.0.3\",\n    \"@stitches/react\": \"^0.1.9\",\n    \"fscreen\": \"^1.2.0\",\n    \"react\": \"^17.0.2\",\n    \"react-dom\": \"^17.0.2\",\n    \"react-interactive\": \"^1.1.0\",\n    \"use-dark-mode\": \"^2.3.1\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/jest-dom\": \"^5.12.0\",\n    \"@testing-library/react\": \"^11.2.6\",\n    \"@testing-library/user-event\": \"^13.1.8\",\n    \"@types/fscreen\": \"^1.0.1\",\n    \"@types/jest\": \"^26.0.23\",\n    \"@types/node\": \"^15.0.1\",\n    \"@types/react\": \"^17.0.4\",\n    \"@types/react-dom\": \"^17.0.3\",\n    \"browserslist-config-css-grid\": \"^1.0.0\",\n    \"gh-pages\": \"^3.1.0\",\n    \"react-scripts\": \"4.0.3\",\n    \"typescript\": \"^4.2.4\"\n  },\n  \"scripts\": {\n    \"dev\": \"npm install --save ../ && npm start\",\n    \"devCleanup\": \"npm install --save fscreen@latest\",\n    \"deploy\": \"gh-pages --dist build --message Built-`date +%Y%m%d`-`date +%H%M%S`\",\n    \"predeploy\": \"npm run devCleanup && npm run lint && npm test -- --watchAll=false && npm run build\",\n    \"lint\": \"eslint src\",\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n      \"react-app/jest\"\n    ]\n  },\n  \"browserslist\": {\n    \"production\": [\n      \"last 2 versions or > 0.2% and not dead and extends browserslist-config-css-grid\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "demo/public/404.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n    <title>404</title>\n  </head>\n  <body>\n    <script type=\"text/javascript\">\n      window.location.replace(window.location.origin);\n    </script>\n  </body>\n</html>"
  },
  {
    "path": "demo/public/CNAME",
    "content": "fscreen.rafgraph.dev"
  },
  {
    "path": "demo/public/favicon/site.webmanifest",
    "content": "{\n  \"name\": \"fscreen\",\n  \"icons\": [\n    {\n      \"src\": \"/favicon/green-grid-144-168-192-512x512.png\",\n      \"sizes\": \"512x512\",\n      \"type\": \"image/png\"\n    },\n    {\n      \"src\": \"/favicon/green-grid-144-168-192-180x180.png\",\n      \"sizes\": \"180x180\",\n      \"type\": \"image/png\"\n    },\n    {\n      \"src\": \"/favicon/green-grid-144-168-192.svg\",\n      \"type\": \"image/svg+xml\"\n    }\n  ],\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#007800\",\n  \"display\": \"browser\"\n}\n"
  },
  {
    "path": "demo/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n    <meta\n      name=\"description\"\n      content=\"Fscreen demo app\"\n    />\n\n    <link rel=\"icon\" type=”image/svg+xml” href=\"%PUBLIC_URL%/favicon/green-grid-144-168-192.svg\" />\n    <link rel=\"alternate icon\" type=\"image/png\" href=\"%PUBLIC_URL%/favicon/green-grid-144-168-192-512x512.png\" />\n    <link rel=\"apple-touch-icon\" href=\"%PUBLIC_URL%/favicon/green-grid-144-168-192-180x180.png\" />\n    <link rel=\"manifest\" href=\"%PUBLIC_URL%/favicon/site.webmanifest\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n\n    <!--\n      Notice the use of %PUBLIC_URL% in the tags above.\n      It will be replaced with the URL of the `public` folder during the build.\n      Only files inside the `public` folder can be referenced from the HTML.\n\n      Unlike \"/favicon.ico\" or \"favicon.ico\", \"%PUBLIC_URL%/favicon.ico\" will\n      work correctly both with client-side routing and a non-root public URL.\n      Learn how to configure a non-root public URL by running `npm run build`.\n    -->\n    <title>Fscreen Demo</title>\n\n    <style>\n      html { background-color: rgb(0, 120, 0); }\n    </style>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n    <!--\n      This HTML file is a template.\n      If you open it directly in the browser, you will see an empty page.\n\n      You can add webfonts, meta tags, or analytics to this file.\n      The build step will place the bundled scripts into the <body> tag.\n\n      To begin the development, run `npm start` or `yarn start`.\n      To create a production bundle, use `npm run build` or `yarn build`.\n    -->\n  </body>\n</html>\n"
  },
  {
    "path": "demo/src/App.test.tsx",
    "content": "import { render } from '@testing-library/react';\nimport { App } from './App';\n\ndescribe('renders links', () => {\n  const { container } = render(<App />);\n  const links = container.getElementsByTagName('a');\n  const hrefs = Object.values(links).map((link) => link.getAttribute('href'));\n\n  test('renders link to fscreen', () => {\n    expect(hrefs).toContain('https://github.com/rafgraph/fscreen');\n  });\n});\n"
  },
  {
    "path": "demo/src/App.tsx",
    "content": "import * as React from 'react';\nimport fscreen from 'fscreen';\nimport { DarkModeButton } from './ui/DarkModeButton';\nimport { GitHubIconLink } from './ui/GitHubIconLink';\nimport { Link } from './ui/Link';\nimport { Button } from './ui/Button';\nimport { styled, globalCss } from './stitches.config';\n\nconst AppContainer = styled('div', {\n  minHeight: '100%',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: '$pageBackground',\n});\n\nconst ContentContainer = styled('div', {\n  maxWidth: '300px',\n  margin: '0px 15px 6vh',\n});\n\nconst HeaderContainer = styled('header', {\n  display: 'flex',\n  justifyContent: 'space-between',\n  marginBottom: '18px',\n});\n\nconst H1 = styled('h1', {\n  fontSize: '26px',\n  marginRight: '16px',\n});\n\nconst HeaderIconContainer = styled('span', {\n  width: '78px',\n  display: 'inline-flex',\n  justifyContent: 'space-between',\n  gap: '12px',\n});\n\nconst InfoContainer = styled('p', {\n  fontSize: '14px',\n  margin: '18px 0',\n});\n\nconst Status = styled('p', {\n  margin: '6px 0',\n});\n\nconst Bool = styled('code', {\n  variants: {\n    bool: {\n      true: {\n        color: '$green',\n      },\n      false: {\n        color: '$red',\n      },\n    },\n  },\n});\n\nconst FullscreenButton = styled(Button, {\n  display: 'block',\n  fontSize: '18px',\n  border: '2px solid',\n  borderRadius: '6px',\n  width: '100%',\n  padding: '14px',\n  textAlign: 'center',\n  marginTop: '36px',\n});\n\nexport const App = () => {\n  globalCss();\n\n  const [inFullscreenMode, setInFullscreenMode] = React.useState(false);\n\n  const handleFullscreenChange = React.useCallback((e) => {\n    let change = '';\n    if (fscreen.fullscreenElement !== null) {\n      change = 'Entered fullscreen mode';\n      setInFullscreenMode(true);\n    } else {\n      change = 'Exited fullscreen mode';\n      setInFullscreenMode(false);\n    }\n    console.log(change, e);\n  }, []);\n\n  const handleFullscreenError = React.useCallback((e) => {\n    console.log('Fullscreen Error', e);\n  }, []);\n\n  React.useEffect(() => {\n    if (fscreen.fullscreenEnabled) {\n      fscreen.addEventListener(\n        'fullscreenchange',\n        handleFullscreenChange,\n        false,\n      );\n      fscreen.addEventListener('fullscreenerror', handleFullscreenError, false);\n      return () => {\n        fscreen.removeEventListener('fullscreenchange', handleFullscreenChange);\n        fscreen.removeEventListener('fullscreenerror', handleFullscreenError);\n      };\n    }\n  });\n\n  const appElement = React.useRef<HTMLDivElement>(null!);\n\n  const toggleFullscreen = React.useCallback(() => {\n    if (inFullscreenMode) {\n      fscreen.exitFullscreen();\n    } else {\n      fscreen.requestFullscreen(appElement.current);\n    }\n  }, [inFullscreenMode]);\n\n  return (\n    <AppContainer ref={appElement}>\n      <ContentContainer>\n        <HeaderContainer>\n          <H1>Fscreen Demo</H1>\n          <HeaderIconContainer>\n            <DarkModeButton />\n            <GitHubIconLink\n              title=\"GitHub repository for Fscreen\"\n              href=\"https://github.com/rafgraph/fscreen\"\n            />\n          </HeaderIconContainer>\n        </HeaderContainer>\n        <InfoContainer>\n          Vendor agnostic access to the{' '}\n          <Link href=\"https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API\">\n            Fullscreen API\n          </Link>\n        </InfoContainer>\n\n        <Status>\n          Fullscreen enabled:{' '}\n          <Bool\n            bool={fscreen.fullscreenEnabled}\n          >{`${fscreen.fullscreenEnabled}`}</Bool>\n        </Status>\n        <Status>\n          Currently in fullscreen mode:{' '}\n          <Bool bool={inFullscreenMode}>{`${inFullscreenMode}`}</Bool>\n        </Status>\n\n        <FullscreenButton\n          onClick={toggleFullscreen}\n          disabled={!fscreen.fullscreenEnabled}\n        >\n          {(!fscreen.fullscreenEnabled && 'Fullscreen Is Not Available') ||\n            (inFullscreenMode && 'Exit Fullscreen Mode') ||\n            'Enter Fullscreen Mode'}\n        </FullscreenButton>\n      </ContentContainer>\n    </AppContainer>\n  );\n};\n"
  },
  {
    "path": "demo/src/index.tsx",
    "content": "import { StrictMode } from 'react';\nimport ReactDOM from 'react-dom';\nimport { App } from './App';\n\nReactDOM.render(\n  <StrictMode>\n    <App />\n  </StrictMode>,\n  document.getElementById('root'),\n);\n"
  },
  {
    "path": "demo/src/react-app-env.d.ts",
    "content": "/// <reference types=\"react-scripts\" />\n"
  },
  {
    "path": "demo/src/setupTests.ts",
    "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom';\n"
  },
  {
    "path": "demo/src/stitches.config.ts",
    "content": "import { createCss, StitchesCss } from '@stitches/react';\n\nexport const stitchesConfig = createCss({\n  theme: {\n    colors: {\n      pageBackground: 'rgb(240,240,240)',\n      backgroundContrast: 'rgb(216,216,216)',\n      highContrast: 'rgb(0,0,0)',\n      lowContrast: 'rgb(128,128,128)',\n      red: 'hsl(0,100%,50%)',\n      orange: 'hsl(30,100%,50%)',\n      yellow: 'hsl(51,100%,40%)',\n      green: 'hsl(120,100%,33%)', // same as rgb(0,168,0)\n      blue: 'hsl(240,100%,50%)',\n      purple: 'hsl(270,100%,60%)',\n    },\n    fonts: {\n      mono: 'menlo, monospace',\n    },\n  },\n});\n\nexport type CSS = StitchesCss<typeof stitchesConfig>;\n\nexport const {\n  styled,\n  theme,\n  keyframes,\n  global: createGlobalCss,\n} = stitchesConfig;\n\nexport const darkThemeClass = theme({\n  colors: {\n    pageBackground: 'rgb(32,32,32)',\n    backgroundContrast: 'rgb(64,64,64)',\n    highContrast: 'rgb(192,192,192)',\n    lowContrast: 'rgb(136,136,136)',\n    red: 'hsl(0,100%,50%)',\n    orange: 'hsl(30,90%,50%)',\n    yellow: 'hsl(60,88%,50%)',\n    green: 'hsl(120,85%,42%)',\n    blue: 'hsl(210,100%,60%)',\n    purple: 'hsl(270,85%,60%)',\n  },\n});\n\nexport const globalCss = createGlobalCss({\n  // unset all styles on interactive elements\n  'button, input, select, textarea, a, area': {\n    all: 'unset',\n  },\n  // normalize behavior on all elements\n  '*, *::before, *::after, button, input, select, textarea, a, area': {\n    margin: 0,\n    border: 0,\n    padding: 0,\n    boxSizing: 'inherit',\n    font: 'inherit',\n    fontWeight: 'inherit',\n    textAlign: 'inherit',\n    lineHeight: 'inherit',\n    wordBreak: 'inherit',\n    color: 'inherit',\n    background: 'transparent',\n    outline: 'none',\n    WebkitTapHighlightColor: 'transparent',\n  },\n  // set base styles for the app\n  body: {\n    color: '$highContrast',\n    fontFamily: 'system-ui, Helvetica Neue, sans-serif',\n    // use word-break instead of \"overflow-wrap: anywhere\" because of Safari support\n    wordBreak: 'break-word',\n    WebkitFontSmoothing: 'antialiased',\n    MozOsxFontSmoothing: 'grayscale',\n    fontSize: '16px',\n    boxSizing: 'border-box',\n    textSizeAdjust: 'none',\n  },\n  code: {\n    fontFamily: '$mono',\n  },\n  // pass down height: 100% to the #root div\n  'body, html': {\n    height: '100%',\n  },\n  '#root': {\n    height: '100%',\n    backgroundColor: '$pageBackground',\n  },\n});\n"
  },
  {
    "path": "demo/src/ui/Button.tsx",
    "content": "import { Interactive } from 'react-interactive';\nimport { styled } from '../stitches.config';\n\nexport const Button = styled(Interactive.Button, {\n  color: '$highContrast',\n  '&.hover, &.active': {\n    color: '$green',\n    borderColor: '$green',\n  },\n  '&.disabled': {\n    opacity: 0.5,\n  },\n  variants: {\n    focus: {\n      outline: {\n        '&.focusFromKey': {\n          outline: '2px solid $colors$purple',\n          outlineOffset: '2px',\n        },\n      },\n      boxShadow: {\n        '&.focusFromKey': {\n          boxShadow: '0 0 0 2px $colors$purple',\n        },\n      },\n      boxShadowOffset: {\n        '&.focusFromKey': {\n          boxShadow:\n            '0 0 0 2px $colors$pageBackground, 0 0 0 4px $colors$purple',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    focus: 'boxShadowOffset',\n  },\n});\n"
  },
  {
    "path": "demo/src/ui/DarkModeButton.tsx",
    "content": "import * as React from 'react';\nimport { SunIcon } from '@radix-ui/react-icons';\nimport useDarkMode from 'use-dark-mode';\nimport { Button } from './Button';\nimport { darkThemeClass } from '../stitches.config';\n\ninterface DarkModeButtonProps {\n  css?: React.ComponentProps<typeof Button>['css'];\n}\n\nexport const DarkModeButton: React.VFC<DarkModeButtonProps> = ({\n  css,\n  ...props\n}) => {\n  // put a try catch around localStorage so this app will work in codesandbox\n  // when the user blocks third party cookies in chrome,\n  // which results in a security error when useDarkMode tries to access localStorage\n  // see https://github.com/codesandbox/codesandbox-client/issues/5397\n  let storageProvider: any = null;\n  try {\n    storageProvider = localStorage;\n  } catch {}\n  const darkMode = useDarkMode(undefined, {\n    classNameDark: darkThemeClass,\n    storageProvider,\n  });\n\n  // add color-scheme style to <html> element\n  // so document scroll bars will have native dark mode styling\n  React.useEffect(() => {\n    if (darkMode.value === true) {\n      // @ts-ignore because colorScheme type not added yet\n      document.documentElement.style.colorScheme = 'dark';\n    } else {\n      // @ts-ignore\n      document.documentElement.style.colorScheme = 'light';\n    }\n  }, [darkMode.value]);\n\n  return (\n    <Button\n      {...props}\n      onClick={darkMode.toggle}\n      focus=\"boxShadow\"\n      css={{\n        width: '36px',\n        height: '36px',\n        padding: '3px',\n        margin: '-3px',\n        borderRadius: '50%',\n        // cast as any b/c of Stitches bug: https://github.com/modulz/stitches/issues/407\n        ...(css as any),\n      }}\n      title=\"Toggle dark mode\"\n      aria-label=\"Toggle dark mode\"\n    >\n      <SunIcon width=\"30\" height=\"30\" />\n    </Button>\n  );\n};\n"
  },
  {
    "path": "demo/src/ui/GitHubIconLink.tsx",
    "content": "import * as React from 'react';\nimport { Interactive } from 'react-interactive';\nimport { GitHubLogoIcon } from '@radix-ui/react-icons';\nimport { Button } from './Button';\n\ninterface GitHubIconLinkProps {\n  href?: string;\n  title?: string;\n  newWindow?: boolean;\n  css?: React.ComponentProps<typeof Button>['css'];\n}\n\nexport const GitHubIconLink: React.VFC<GitHubIconLinkProps> = ({\n  newWindow = true,\n  css,\n  title,\n  ...props\n}) => (\n  <Button\n    {...props}\n    as={Interactive.A}\n    title={title}\n    aria-label={title}\n    target={newWindow ? '_blank' : undefined}\n    rel={newWindow ? 'noopener noreferrer' : undefined}\n    focus=\"boxShadow\"\n    css={{\n      display: 'inline-block',\n      width: '36px',\n      height: '36px',\n      padding: '3px',\n      margin: '-3px',\n      borderRadius: '50%',\n      // cast as any b/c of Stitches bug: https://github.com/modulz/stitches/issues/407\n      ...(css as any),\n    }}\n  >\n    <GitHubLogoIcon\n      width=\"30\"\n      height=\"30\"\n      // scale up the svg icon because it doesn't fill the view box\n      // see: https://github.com/radix-ui/icons/issues/73\n      style={{ transform: 'scale(1.1278)' }}\n    />\n  </Button>\n);\n"
  },
  {
    "path": "demo/src/ui/Link.tsx",
    "content": "import * as React from 'react';\nimport { Interactive } from 'react-interactive';\nimport { styled } from '../stitches.config';\n\nconst StyledLink = styled(Interactive.A, {\n  color: '$highContrast',\n  textDecorationLine: 'underline',\n  textDecorationStyle: 'dotted',\n  textDecorationColor: '$green',\n  textDecorationThickness: 'from-font',\n  padding: '2px 3px',\n  margin: '-2px -3px',\n  borderRadius: '3px',\n  '&.hover': {\n    textDecorationColor: '$green',\n    textDecorationStyle: 'solid',\n  },\n  '&.active': {\n    textDecorationColor: '$green',\n    textDecorationStyle: 'solid',\n    color: '$green',\n  },\n  '&.focusFromKey': {\n    boxShadow: '0 0 0 2px $colors$purple',\n  },\n});\n\ninterface LinkProps extends React.ComponentPropsWithoutRef<typeof StyledLink> {\n  newWindow?: boolean;\n}\n\nexport const Link: React.VFC<LinkProps> = ({ newWindow = true, ...props }) => (\n  <StyledLink\n    {...props}\n    target={newWindow ? '_blank' : undefined}\n    rel={newWindow ? 'noopener noreferrer' : undefined}\n  />\n);\n"
  },
  {
    "path": "demo/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"esnext\",\n    \"lib\": [\n      \"dom\",\n      \"dom.iterable\",\n      \"esnext\"\n    ],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"jsx\": \"react-jsx\"\n  },\n  \"include\": [\n    \"src\"\n  ]\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"fscreen\",\n  \"version\": \"1.2.0\",\n  \"description\": \"Vendor agnostic access to the fullscreen spec api\",\n  \"main\": \"dist/fscreen.cjs.js\",\n  \"module\": \"dist/fscreen.esm.js\",\n  \"sideEffects\": false,\n  \"scripts\": {\n    \"build\": \"rollpkg build\",\n    \"watch\": \"rollpkg watch\",\n    \"prepublishOnly\": \"npm run build\",\n    \"lintStaged\": \"lint-staged\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/rafgraph/fscreen.git\"\n  },\n  \"files\": [\n    \"dist\"\n  ],\n  \"keywords\": [\n    \"fullscreen\",\n    \"browser\"\n  ],\n  \"author\": \"Rafael Pedicini <rafael@rafgraph.dev>\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/rafgraph/fscreen/issues\"\n  },\n  \"homepage\": \"https://github.com/rafgraph/fscreen#readme\",\n  \"devDependencies\": {\n    \"lint-staged\": \"^10.5.4\",\n    \"pre-commit\": \"^1.2.2\",\n    \"rollpkg\": \"^0.5.5\"\n  },\n  \"pre-commit\": \"lintStaged\",\n  \"lint-staged\": {\n    \"(src/**/*|demo/src/**/*)\": [\n      \"prettier --write --ignore-unknown\"\n    ]\n  },\n  \"prettier\": \"rollpkg/configs/prettier.json\"\n}\n"
  },
  {
    "path": "src/fscreen.js",
    "content": "const key = {\n  fullscreenEnabled: 0,\n  fullscreenElement: 1,\n  requestFullscreen: 2,\n  exitFullscreen: 3,\n  fullscreenchange: 4,\n  fullscreenerror: 5,\n  fullscreen: 6,\n};\n\nconst webkit = [\n  'webkitFullscreenEnabled',\n  'webkitFullscreenElement',\n  'webkitRequestFullscreen',\n  'webkitExitFullscreen',\n  'webkitfullscreenchange',\n  'webkitfullscreenerror',\n  '-webkit-full-screen',\n];\n\nconst moz = [\n  'mozFullScreenEnabled',\n  'mozFullScreenElement',\n  'mozRequestFullScreen',\n  'mozCancelFullScreen',\n  'mozfullscreenchange',\n  'mozfullscreenerror',\n  '-moz-full-screen',\n];\n\nconst ms = [\n  'msFullscreenEnabled',\n  'msFullscreenElement',\n  'msRequestFullscreen',\n  'msExitFullscreen',\n  'MSFullscreenChange',\n  'MSFullscreenError',\n  '-ms-fullscreen',\n];\n\n// so it doesn't throw if no window or document\nconst document =\n  typeof window !== 'undefined' && typeof window.document !== 'undefined'\n    ? window.document\n    : {};\n\nconst vendor =\n  ('fullscreenEnabled' in document && Object.keys(key)) ||\n  (webkit[0] in document && webkit) ||\n  (moz[0] in document && moz) ||\n  (ms[0] in document && ms) ||\n  [];\n\n// prettier-ignore\nexport default {\n  requestFullscreen: element => element[vendor[key.requestFullscreen]](),\n  requestFullscreenFunction: element => element[vendor[key.requestFullscreen]],\n  get exitFullscreen() { return document[vendor[key.exitFullscreen]].bind(document); },\n  get fullscreenPseudoClass() { return `:${vendor[key.fullscreen]}`; },\n  addEventListener: (type, handler, options) => document.addEventListener(vendor[key[type]], handler, options),\n  removeEventListener: (type, handler, options) => document.removeEventListener(vendor[key[type]], handler, options),\n  get fullscreenEnabled() { return Boolean(document[vendor[key.fullscreenEnabled]]); },\n  set fullscreenEnabled(val) {},\n  get fullscreenElement() { return document[vendor[key.fullscreenElement]]; },\n  set fullscreenElement(val) {},\n  get onfullscreenchange() { return document[`on${vendor[key.fullscreenchange]}`.toLowerCase()]; },\n  set onfullscreenchange(handler) { return document[`on${vendor[key.fullscreenchange]}`.toLowerCase()] = handler; },\n  get onfullscreenerror() { return document[`on${vendor[key.fullscreenerror]}`.toLowerCase()]; },\n  set onfullscreenerror(handler) { return document[`on${vendor[key.fullscreenerror]}`.toLowerCase()] = handler; },\n};\n"
  },
  {
    "path": "src/index.ts",
    "content": "import fscreen from './fscreen';\nexport default fscreen;\n"
  },
  {
    "path": "tsconfig.json",
    "content": "{\n    \"extends\": \"rollpkg/configs/tsconfig.json\",\n    \"compilerOptions\": {\n        \"target\": \"ES5\",\n        \"declaration\": false\n    }\n}"
  }
]