@techzyapp/ui-library 1.0.43 → 1.0.44

package/dist/{FullscreenToggle-CWlOXLss.cjs.map → FullscreenToggle-CEFZQ5OC.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"FullscreenToggle-CWlOXLss.cjs","sources":["../src/components/FullscreenToggle/FullscreenToggle.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton, type IconButtonProps } from '../IconButton'\n\n/** Inherits `IconButton`'s look (variant, color, size); the icon and toggle behavior are built in. */\nexport type FullscreenToggleProps = Omit<IconButtonProps, 'children'>\n\n/**\n * A one-tap browser fullscreen switch. Renders an `IconButton` that calls the Fullscreen API —\n * `requestFullscreen` to maximize, `exitFullscreen` to restore — and flips its `Maximize3` icon 180°\n * while fullscreen (so it reads as \"minimize\"), keeping state in sync via the `fullscreenchange`\n * event. Renders **nothing** where the Fullscreen API is unavailable (e.g. iOS Safari on iPhone), so\n * it auto-hides on devices that can't go fullscreen. Styling comes from `IconButton`, so `variant`,\n * `color` and `size` pass through.\n */\nexport const FullscreenToggle = forwardRef<HTMLButtonElement, FullscreenToggleProps>(\n  function FullscreenToggle({ variant = 'outlined', ...props }, ref) {\n    // The Fullscreen API is absent on some devices (notably iOS Safari on iPhone); hide the control\n    // there, since tapping it could never do anything.\n    const [supported] = useState(\n      () =>\n        typeof document !== 'undefined' &&\n        typeof document.documentElement.requestFullscreen === 'function',\n    )\n    const [isFullscreen, setIsFullscreen] = useState(false)\n    const t = useT()\n\n    useEffect(() => {\n      const sync = () => setIsFullscreen(document.fullscreenElement != null)\n      sync() // pick up a session that's already fullscreen on mount\n      document.addEventListener('fullscreenchange', sync)\n      return () => document.removeEventListener('fullscreenchange', sync)\n    }, [])\n\n    if (!supported) return null\n\n    const toggle = () => {\n      // `?.` guards environments without the Fullscreen API; `.catch` swallows a blocked request\n      if (document.fullscreenElement) {\n        document.exitFullscreen?.()?.catch(() => {})\n      } else {\n        document.documentElement.requestFullscreen?.()?.catch(() => {})\n      }\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        variant={variant}\n        role=\"switch\"\n        aria-checked={isFullscreen}\n        aria-label={t('fullscreenToggle.label')}\n        {...props}\n        onClick={(event) => {\n          props.onClick?.(event) // preserve a caller-supplied handler, then toggle\n          toggle()\n        }}\n      >\n        <Icon name=\"Maximize3\" style={isFullscreen ? { transform: 'rotate(180deg)' } : undefined} />\n      </IconButton>\n    )\n  },\n)\n"],"names":["FullscreenToggle","forwardRef","variant","props","ref","supported","useState","isFullscreen","setIsFullscreen","t","useT","useEffect","sync","toggle","_b","_a","_e","_d","_c","jsx","IconButton","event","Icon"],"mappings":"wLAgBaA,EAAmBC,EAAAA,WAC9B,SAA0B,CAAE,QAAAC,EAAU,WAAY,GAAGC,CAAA,EAASC,EAAK,CAGjE,KAAM,CAACC,CAAS,EAAIC,EAAAA,SAClB,IACE,OAAO,SAAa,KACpB,OAAO,SAAS,gBAAgB,mBAAsB,UAAA,EAEpD,CAACC,EAAcC,CAAe,EAAIF,EAAAA,SAAS,EAAK,EAChDG,EAAIC,EAAAA,KAAA,EASV,GAPAC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAO,IAAMJ,EAAgB,SAAS,mBAAqB,IAAI,EACrE,OAAAI,EAAA,EACA,SAAS,iBAAiB,mBAAoBA,CAAI,EAC3C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAI,CACpE,EAAG,CAAA,CAAE,EAED,CAACP,EAAW,OAAO,KAEvB,MAAMQ,EAAS,IAAM,eAEf,SAAS,mBACXC,GAAAC,EAAA,SAAS,iBAAT,YAAAA,EAAA,uBAAAD,EAA6B,MAAM,IAAM,CAAC,IAE1CE,GAAAC,GAAAC,EAAA,SAAS,iBAAgB,oBAAzB,YAAAD,EAAA,KAAAC,KAAA,MAAAF,EAAgD,MAAM,IAAM,CAAC,EAEjE,EAEA,OACEG,EAAAA,IAACC,EAAAA,WAAA,CACC,IAAAhB,EACA,QAAAF,EACA,KAAK,SACL,eAAcK,EACd,aAAYE,EAAE,wBAAwB,EACrC,GAAGN,EACJ,QAAUkB,GAAU,QAClBN,EAAAZ,EAAM,UAAN,MAAAY,EAAA,KAAAZ,EAAgBkB,GAChBR,EAAA,CACF,EAEA,SAAAM,EAAAA,IAACG,OAAA,CAAK,KAAK,YAAY,MAAOf,EAAe,CAAE,UAAW,gBAAA,EAAqB,MAAA,CAAW,CAAA,CAAA,CAGhG,CACF"}
+{"version":3,"file":"FullscreenToggle-CEFZQ5OC.cjs","sources":["../src/components/FullscreenToggle/FullscreenToggle.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react'\nimport { useT } from '../../theme'\nimport { Icon } from '../Icon'\nimport { IconButton, type IconButtonProps } from '../IconButton'\n\n/** Inherits `IconButton`'s look (variant, color, size); the icon and toggle behavior are built in. */\nexport type FullscreenToggleProps = Omit<IconButtonProps, 'children'>\n\n/**\n * A one-tap browser fullscreen switch. Renders an `IconButton` that calls the Fullscreen API —\n * `requestFullscreen` to maximize, `exitFullscreen` to restore — and flips its `Maximize3` icon 180°\n * while fullscreen (so it reads as \"minimize\"), keeping state in sync via the `fullscreenchange`\n * event. Renders **nothing** where the Fullscreen API is unavailable (e.g. iOS Safari on iPhone), so\n * it auto-hides on devices that can't go fullscreen. Styling comes from `IconButton`, so `variant`,\n * `color` and `size` pass through.\n */\nexport const FullscreenToggle = forwardRef<HTMLButtonElement, FullscreenToggleProps>(\n  function FullscreenToggle({ variant = 'outlined', ...props }, ref) {\n    // The Fullscreen API is absent on some devices (notably iOS Safari on iPhone); hide the control\n    // there, since tapping it could never do anything.\n    const [supported] = useState(\n      () =>\n        typeof document !== 'undefined' &&\n        typeof document.documentElement.requestFullscreen === 'function',\n    )\n    const [isFullscreen, setIsFullscreen] = useState(false)\n    const t = useT()\n\n    useEffect(() => {\n      const sync = () => setIsFullscreen(document.fullscreenElement != null)\n      sync() // pick up a session that's already fullscreen on mount\n      document.addEventListener('fullscreenchange', sync)\n      return () => document.removeEventListener('fullscreenchange', sync)\n    }, [])\n\n    if (!supported) return null\n\n    const toggle = () => {\n      // `?.` guards environments without the Fullscreen API; `.catch` swallows a blocked request\n      if (document.fullscreenElement) {\n        document.exitFullscreen?.()?.catch(() => {})\n      } else {\n        document.documentElement.requestFullscreen?.()?.catch(() => {})\n      }\n    }\n\n    return (\n      <IconButton\n        ref={ref}\n        variant={variant}\n        role=\"switch\"\n        aria-checked={isFullscreen}\n        aria-label={t('fullscreenToggle.label')}\n        {...props}\n        onClick={(event) => {\n          props.onClick?.(event) // preserve a caller-supplied handler, then toggle\n          toggle()\n        }}\n      >\n        <Icon name=\"Maximize3\" style={isFullscreen ? { transform: 'rotate(180deg)' } : undefined} />\n      </IconButton>\n    )\n  },\n)\n"],"names":["FullscreenToggle","forwardRef","variant","props","ref","supported","useState","isFullscreen","setIsFullscreen","t","useT","useEffect","sync","toggle","_b","_a","_e","_d","_c","jsx","IconButton","event","Icon"],"mappings":"wLAgBaA,EAAmBC,EAAAA,WAC9B,SAA0B,CAAE,QAAAC,EAAU,WAAY,GAAGC,CAAA,EAASC,EAAK,CAGjE,KAAM,CAACC,CAAS,EAAIC,EAAAA,SAClB,IACE,OAAO,SAAa,KACpB,OAAO,SAAS,gBAAgB,mBAAsB,UAAA,EAEpD,CAACC,EAAcC,CAAe,EAAIF,EAAAA,SAAS,EAAK,EAChDG,EAAIC,EAAAA,KAAA,EASV,GAPAC,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAO,IAAMJ,EAAgB,SAAS,mBAAqB,IAAI,EACrE,OAAAI,EAAA,EACA,SAAS,iBAAiB,mBAAoBA,CAAI,EAC3C,IAAM,SAAS,oBAAoB,mBAAoBA,CAAI,CACpE,EAAG,CAAA,CAAE,EAED,CAACP,EAAW,OAAO,KAEvB,MAAMQ,EAAS,IAAM,eAEf,SAAS,mBACXC,GAAAC,EAAA,SAAS,iBAAT,YAAAA,EAAA,uBAAAD,EAA6B,MAAM,IAAM,CAAC,IAE1CE,GAAAC,GAAAC,EAAA,SAAS,iBAAgB,oBAAzB,YAAAD,EAAA,KAAAC,KAAA,MAAAF,EAAgD,MAAM,IAAM,CAAC,EAEjE,EAEA,OACEG,EAAAA,IAACC,EAAAA,WAAA,CACC,IAAAhB,EACA,QAAAF,EACA,KAAK,SACL,eAAcK,EACd,aAAYE,EAAE,wBAAwB,EACrC,GAAGN,EACJ,QAAUkB,GAAU,QAClBN,EAAAZ,EAAM,UAAN,MAAAY,EAAA,KAAAZ,EAAgBkB,GAChBR,EAAA,CACF,EAEA,SAAAM,EAAAA,IAACG,OAAA,CAAK,KAAK,YAAY,MAAOf,EAAe,CAAE,UAAW,gBAAA,EAAqB,MAAA,CAAW,CAAA,CAAA,CAGhG,CACF"}