@fpkit/acss 0.5.13 → 0.6.1

package/libs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/images/img.tsx","../src/components/text-to-speech/TextToSpeech.tsx","../src/components/text-to-speech/useTextToSpeech.tsx","../src/components/text-to-speech/views/TextToSpeechControls.tsx","../src/components/layout/landmarks.tsx","../src/components/badge/badge.tsx","../src/components/tag/tag.tsx","../src/components/details/details.tsx"],"names":["React","useMemo","Img","src","alt","width","height","styles","loading","placeholder","fetchpriority","decoding","srcSet","sizes","onError","onLoad","props","defaultPlaceholder","w","h","svg","fallbackPlaceholder","ui_default","e","useState","useEffect","useTextToSpeech","initialVoice","availableVoices","setAvailableVoices","currentVoice","setCurrentVoice","isSpeaking","setIsSpeaking","isPaused","setIsPaused","utterance","setUtterance","updateVoices","voices","googleVoice","voice","englishVoice","text","options","onEnd","TTSButtonComponent","children","onClick","TTSButton","TextToSpeechControls","label","onSpeak","onPause","onResume","onCancel","icon_default","TextToSpeechControls_default","TextToSpeech","initialText","showTextInput","pitch","rate","language","speak","pause","resume","cancel","getAvailableLanguages","setText","handleSpeak","handleEnd","handleChange","textarea_default","Landmarks","Header","id","headerBackground","classes","Main","Footer","Aside","Section","Article","Badge","variant","Tag","elm","role","useCallback","Details","summary","icon","ariaLabel","name","open","onPointerDown","onToggle","ref","handlePointerDown","handleToggle"],"mappings":"w2BACA,OAAOA,IAAS,WAAAC,OAAe,QA6GxB,IAAMC,EAAM,CAAC,CAClB,IAAAC,EAAM,KACN,IAAAC,EACA,MAAAC,EAAQ,IACR,OAAAC,EACA,OAAAC,EACA,QAAAC,EAAU,OACV,YAAAC,EACA,cAAAC,EAAgB,MAChB,SAAAC,EAAW,OACX,OAAAC,EACA,MAAAC,EACA,QAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAgB,CAad,IAAMC,EAAqBhB,GAAQ,IAAM,CACvC,IAAMiB,EAAI,OAAOb,GAAU,SAAWA,EAAQ,IACxCc,EAAI,OAAOb,GAAW,SAAWA,EAAS,KAAK,MAAMY,EAAI,GAAI,EAG7DE,EAAM,wDAAwDF,CAAC,IAAIC,CAAC;AAAA;AAAA,mCAE3CD,CAAC,IAAIC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMpBD,CAAC,aAAaC,CAAC,qBAAqBD,CAAC,IAAIC,CAAC;AAAA,oBAC3CD,EAAI,GAAI,SAASC,EAAI,EAAG,QAAQ,KAAK,IAAID,EAAGC,CAAC,EAAI,GAAI;AAAA,oBACrDA,EAAI,GAAI,KAAKD,EAAI,GAAI,IAAIC,EAAI,GAAI,IAAID,EAAI,EAAG,IAAIC,EAAI,GAAI,KAAKD,CAAC,IAAIC,EAAI,GAAI,KAAKD,CAAC,IAAIC,CAAC,OAAOA,CAAC;AAAA,0IACyB,KAAK,IAAI,GAAI,KAAK,IAAID,EAAGC,CAAC,EAAI,GAAI,CAAC,oDAAoDD,CAAC,OAAIC,CAAC;AAAA,YAGnO,MAAO,sBAAsB,mBAAmBC,CAAG,CAAC,EACtD,EAAG,CAACf,EAAOC,CAAM,CAAC,EAEZe,EAAsBZ,GAAeQ,EAkC3C,OACEjB,GAAA,cAACsB,EAAA,CACC,GAAG,MACH,IAAKnB,EACL,IAAKC,EACL,MAAOC,EACP,OAAQC,GAAU,OAClB,QAASE,EACT,MAAOD,EACP,OAAQK,EACR,MAAOC,EACP,QArCFU,GACS,CAELT,GACFA,EAAQS,CAAC,EAINA,EAAE,kBAEDA,EAAE,cAAc,MAAQF,IAC1BE,EAAE,cAAc,IAAMF,EAG5B,EAwBI,OAjBFE,GACS,CACTR,IAASQ,CAAC,CACZ,EAeI,SAAUZ,EACT,GAAGK,EACH,GAAIN,GAAiB,CAAE,cAAAA,CAAc,EACxC,CAEJ,EAGAR,EAAI,YAAc,MCvNlB,OAAOF,GAAS,YAAAwB,GAAuB,aAAAC,OAAiB,QCAxD,OAAS,YAAAD,EAAU,aAAAC,OAAiB,QAwB7B,IAAMC,EAAmBC,GAAwC,CACtE,GAAM,CAACC,EAAiBC,CAAkB,EAAIL,EAE5C,CAAC,CAAC,EACE,CAACM,EAAcC,CAAe,EAAIP,EAEtCG,CAAY,EAER,CAACK,EAAYC,CAAa,EAAIT,EAAkB,EAAK,EACrD,CAACU,EAAUC,CAAW,EAAIX,EAAkB,EAAK,EACjD,CAACY,EAAWC,CAAY,EAAIb,EAChC,IACF,EAEA,OAAAC,GAAU,IAAM,CACd,IAAMa,EAAe,IAAM,CACzB,IAAMC,EAAS,OAAO,gBAAgB,UAAU,EAChDV,EAAmBU,CAAM,EAGzB,IAAMC,EAAcD,EAAO,KACxBE,GAAUA,EAAM,OAAS,mBAC5B,EACA,GAAID,EACFT,EAAgBS,CAAW,MACtB,CAEL,IAAME,EAAeH,EAAO,KAAME,GAChCA,EAAM,KAAK,WAAW,KAAK,CAC7B,EACIC,GACFX,EAAgBW,CAAY,CAEhC,CACF,EAEA,OAAAJ,EAAa,EACb,OAAO,gBAAgB,gBAAkBA,EAElC,IAAM,CACX,OAAO,gBAAgB,gBAAkB,IAC3C,CACF,EAAG,CAAC,CAAC,EAuFE,CAEL,MAxEY,CACZK,EACAC,EAAyB,CAAC,EAC1BC,IACG,CACH,IAAMT,EAAY,IAAI,yBAAyBO,CAAI,EAEnDP,EAAU,KAAOQ,EAAQ,MAAQ,QACjCR,EAAU,MAAQQ,EAAQ,OAAS,EACnCR,EAAU,KAAOQ,EAAQ,MAAQ,EACjCR,EAAU,MAAQN,GAAgBc,EAAQ,OAAS,KAEnDR,EAAU,MAAQ,IAAM,CACtBH,EAAc,EAAK,EACnBE,EAAY,EAAK,EACbU,GACFA,EAAM,CAEV,EAEI,oBAAqB,QACvB,OAAO,gBAAgB,MAAMT,CAAS,EACtCC,EAAaD,CAAS,EACtBH,EAAc,EAAI,EAClBE,EAAY,EAAK,GAEjB,QAAQ,MAAM,gCAAgC,CAGlD,EA6CE,MAhCY,IAAM,CACdH,GAAc,CAACE,IACjB,OAAO,gBAAgB,MAAM,EAC7BC,EAAY,EAAI,EAEpB,EA6BE,OAxBa,IAAM,CACfH,GAAcE,IAChB,OAAO,gBAAgB,OAAO,EAC9BC,EAAY,EAAK,EAErB,EAqBE,OAhBa,IAAM,CACfH,IACF,OAAO,gBAAgB,OAAO,EAC9BC,EAAc,EAAK,EACnBE,EAAY,EAAK,EAErB,EAYE,WAAAH,EAEA,SAAAE,EAEA,gBAAAN,EAEA,YAnDmBa,GAAgC,CACnDV,EAAgBU,CAAK,CACvB,EAmDE,aAAAX,EAEA,sBArG4B,IACrB,CAAC,GAAG,IAAI,IAAIF,EAAgB,IAAKa,GAAUA,EAAM,IAAI,CAAC,CAAC,CAqGhE,CACF,EC/KA,OAAOzC,MAAW,QA0CX,IAAM8C,GAAwD,CAAC,CACpE,SAAAC,EACA,QAAAC,CACF,IAEIhD,EAAA,cAACsB,EAAA,CACC,GAAG,SACH,KAAK,SACL,UAAU,aACV,WAAS,eACT,QAAS0B,GAERD,CACH,EAISE,EAAYjD,EAAM,KAAK8C,EAAkB,EAkBhDI,EAAsD,CAAC,CAC3D,MAAAC,EACA,WAAAnB,EACA,SAAAE,EACA,QAAAkB,EACA,QAAAC,EACA,SAAAC,EACA,SAAAC,CACF,IAIIvD,EAAA,cAACsB,EAAA,CAAG,GAAG,MAAM,WAAQ,IAClB6B,GAASnD,EAAA,cAAC,SAAGmD,CAAM,EACnB,CAACnB,GACAhC,EAAA,cAACiD,EAAA,CAAU,aAAW,QAAQ,QAASG,GACrCpD,EAAA,cAACwD,EAAK,UAAL,CAAe,KAAM,GAAU,CAClC,EAEDxB,GAAc,CAACE,GACdlC,EAAA,cAACiD,EAAA,CAAU,aAAW,QAAQ,QAASI,GACrCrD,EAAA,cAACwD,EAAK,WAAL,CAAgB,KAAM,GAAU,CACnC,EAEDtB,GACClC,EAAA,cAACiD,EAAA,CAAU,aAAW,SAAS,QAASK,GACtCtD,EAAA,cAACwD,EAAK,YAAL,CAAiB,KAAM,GAAU,CACpC,EAEFxD,EAAA,cAACiD,EAAA,CAAU,aAAW,OAAO,QAASM,GACpCvD,EAAA,cAACwD,EAAK,UAAL,CAAe,KAAM,GAAU,CAClC,CACF,EAIJN,EAAqB,YAAc,uBACnCA,EAAqB,UAAYD,EAEjC,IAAOQ,EAAQP,EFnFR,IAAMQ,EAAqD,CAAC,CACjE,YAAAC,EAAc,GACd,cAAAC,EAAgB,GAChB,MAAAnB,EACA,MAAAoB,EAAQ,EACR,KAAAC,EAAO,EACP,SAAAC,EACA,MAAAZ,EACA,MAAAN,CACF,IAAM,CACJ,GAAM,CACJ,MAAAmB,EACA,MAAAC,EACA,OAAAC,EACA,OAAAC,EACA,WAAAnC,EACA,SAAAE,EACA,sBAAAkC,EACA,gBAAAxC,CACF,EAAIF,EAAgB,EACd,CAACiB,EAAM0B,CAAO,EAAI7C,GAAiBmC,CAAW,EACpD,QAAQ,IAAIS,EAAsB,CAAC,EAEnC3C,GAAU,IAAM,CACd4C,EAAQV,CAAW,CACrB,EAAG,CAACA,CAAW,CAAC,EAEhB,IAAMW,EAAc,IAAY,CAC1B3B,EAAK,KAAK,IAAM,IAClBqB,EAAMrB,EAAM,CAAE,MAAAF,EAAO,MAAAoB,EAAO,KAAAC,CAAK,EAAGS,CAAS,CAEjD,EAEMC,EAAgBjD,GAA8C,CAClE8C,EAAQ9C,EAAE,OAAO,KAAK,CACxB,EAEMgD,EAAY,IAAY,CACxB1B,GACFA,EAAM,CAEV,EAEA,OACE7C,EAAA,cAAAA,EAAA,cACG4D,GAAiB5D,EAAA,cAACyE,EAAA,CAAS,MAAO9B,EAAM,SAAU6B,EAAc,EACjExE,EAAA,cAACyD,EAAA,CACC,MAAON,EACP,WAAYnB,EACZ,SAAUE,EACV,QAASoC,EACT,QAASL,EACT,SAAUC,EACV,SAAUC,EACZ,CACF,CAEJ,EAGAT,EAAa,YAAc,wBG5F3B,OAAO1D,MAA0B,QAQ1B,IAAM0E,EAAa3B,GAAwB/C,EAAA,cAAAA,EAAA,cAAG+C,CAAS,EAcjD4B,GAAS,CAAC,CACrB,GAAAC,EACA,SAAA7B,EACA,iBAAA8B,EACA,OAAAtE,EACA,QAAAuE,EACA,GAAG9D,CACL,IAEIhB,EAAA,cAACsB,EAAA,CAAG,GAAG,SAAS,GAAIsD,EAAI,OAAQrE,EAAQ,UAAWuE,EAAU,GAAG9D,GAC7D6D,EACD7E,EAAA,cAACsB,EAAA,CAAG,GAAG,WAAWyB,CAAS,CAC7B,EAaSgC,GAAO,CAAC,CACnB,GAAAH,EACA,SAAA7B,EACA,OAAAxC,EACA,QAAAuE,EACA,GAAG9D,CACL,IAEIhB,EAAA,cAACsB,EAAA,CAAG,GAAG,OAAO,GAAIsD,EAAI,OAAQrE,EAAS,GAAGS,EAAO,UAAW8D,GACzD/B,CACH,EAWSiC,GAAS,CAAC,CACrB,GAAAJ,EACA,QAAAE,EACA,SAAA/B,EACA,OAAAxC,EAAS,CAAC,EACV,GAAGS,CACL,IAEIhB,EAAA,cAACsB,EAAA,CAAG,GAAG,SAAS,GAAIsD,EAAI,UAAWE,EAAS,OAAQvE,EAAS,GAAGS,GAC9DhB,EAAA,cAACsB,EAAA,CAAG,GAAG,WAAWyB,GAAY,qBAAmB,CACnD,EAISkC,GAAQ,CAAC,CACpB,GAAAL,EACA,SAAA7B,EACA,OAAAxC,EAAS,CAAC,EACV,QAAAuE,EACA,GAAG9D,CACL,IAEIhB,EAAA,cAACsB,EAAA,CAAG,GAAG,QAAQ,GAAIsD,EAAI,OAAQrE,EAAQ,UAAWuE,EAAU,GAAG9D,GAC7DhB,EAAA,cAACsB,EAAA,CAAG,GAAG,WAAWyB,CAAS,CAC7B,EAWSmC,GAAU,CAAC,CACtB,GAAAN,EACA,SAAA7B,EACA,OAAAxC,EACA,QAAAuE,EACA,GAAG9D,CACL,IAEIhB,EAAA,cAACsB,EAAA,CAAG,GAAG,UAAU,GAAIsD,EAAI,OAAQrE,EAAQ,UAAWuE,EAAU,GAAG9D,GAC9D+B,CACH,EAWSoC,GAAU,CAAC,CACtB,GAAAP,EACA,SAAA7B,EAEA,OAAAxC,EACA,QAAAuE,EACA,GAAG9D,CACL,IAEIhB,EAAA,cAACsB,EAAA,CAAG,GAAG,UAAU,GAAIsD,EAAI,OAAQrE,EAAQ,UAAWuE,EAAU,GAAG9D,GAC9D+B,CACH,EAMJ2B,EAAU,YAAc,YACxBA,EAAU,OAASC,GACnBD,EAAU,KAAOK,GACjBL,EAAU,OAASM,GACnBN,EAAU,MAAQO,GAClBP,EAAU,QAAUQ,GACpBR,EAAU,QAAUS,GCnJpB,OAAOnF,MAAW,QAwFX,IAAMoF,EAAQ,CAAC,CAAE,GAAAR,EAAI,OAAArE,EAAQ,QAAAuE,EAAS,SAAA/B,EAAU,QAAAsC,EAAS,GAAGrE,CAAM,IAKrEhB,EAAA,cAACsB,EAAA,CACC,GAAG,MACH,GAAIsD,EACJ,OAAQrE,EACR,UAAWuE,EACX,aARcO,GAAoB,OASlC,KAAK,SACJ,GAAGrE,GAEJhB,EAAA,cAACsB,EAAA,CAAG,GAAG,QAAQyB,CAAS,CAC1B,EAIJqC,EAAM,YAAc,QC5GpB,OAAOpF,OAAW,QAUX,IAAMsF,GAAM,CAAC,CAClB,IAAAC,EAAM,OACN,KAAAC,EAAO,OACP,SAAAzC,EACA,OAAAxC,EACA,GAAGS,CACL,IAEIhB,GAAA,cAACsB,EAAA,CAAG,GAAIiE,EAAK,KAAMC,EAAM,OAAQjF,EAAS,GAAGS,GAC1C+B,CACH,EAIJuC,GAAI,YAAc,MCvBlB,OAAOtF,GAAS,eAAAyF,MAAmB,QAoD5B,IAAMC,GAAU1F,EAAM,WAC3B,CACE,CACE,QAAA2F,EACA,KAAAC,EACA,OAAArF,EACA,QAAAuE,EACA,UAAAe,EACA,KAAAC,EACA,KAAAC,EACA,cAAAC,EACA,SAAAC,EACA,SAAAlD,EACA,GAAG/B,CACL,EACAkF,IACG,CAEH,IAAMC,EAAoBV,EACvBlE,GAAuC,CACtCyE,IAAgBzE,CAA2C,CAC7D,EACA,CAACyE,CAAa,CAChB,EAEMI,EAAeX,EAClBlE,GAAgD,CAC/C0E,IAAW1E,CAAC,CACd,EACA,CAAC0E,CAAQ,CACX,EAEA,OACEjG,EAAA,cAACsB,EAAA,CACC,GAAG,UACH,OAAQf,EACR,QAASuE,EACT,SAAUsB,EACV,IAAKF,EACL,KAAMH,EACN,aAAYF,EACZ,KAAMC,EACL,GAAG9E,GAEJhB,EAAA,cAACsB,EAAA,CAAG,GAAG,UAAU,cAAe6E,GAC7BP,EACAD,CACH,EACA3F,EAAA,cAACsB,EAAA,CAAG,GAAG,WAAWyB,CAAS,CAC7B,CAEJ,CACF,EAEA2C,GAAQ,YAAc","sourcesContent":["import UI from \"../ui\";\nimport React, { useMemo } from \"react\";\nimport type { ImgProps } from \"./img.types\";\n\n/**\n * Img - A semantic image component with accessibility and performance best practices.\n *\n * This component wraps the native `<img>` element with enhanced features:\n * - **Responsive images** via optional srcset/sizes\n * - **Lazy loading** by default for performance\n * - **Error handling** with configurable fallback placeholders\n * - **Type safety** with full TypeScript support\n *\n * ## Accessibility Patterns (WCAG 2.1 AA)\n *\n * ### Decorative Images\n * Images that are purely visual decoration should use an empty alt attribute.\n * These images are typically borders, patterns, or visual separators.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Decorative border image\n * <Img src=\"/decorative-border.png\" alt=\"\" />\n *\n * // ✅ GOOD: Background pattern\n * <Img src=\"/pattern.svg\" alt=\"\" loading=\"eager\" />\n * ```\n *\n * ### Semantic Images\n * Images that convey information must have descriptive alt text that explains\n * the content and purpose of the image.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Informative image with descriptive alt\n * <Img\n *   src=\"/sales-chart.png\"\n *   alt=\"Sales chart showing 30% revenue growth in Q4 2024\"\n * />\n *\n * // ✅ GOOD: Product photo with context\n * <Img\n *   src=\"/laptop.jpg\"\n *   alt=\"Silver MacBook Pro 14-inch on wooden desk\"\n * />\n * ```\n *\n * ## Performance Optimization\n *\n * ### Lazy Loading\n * By default, images use lazy loading to improve page load performance.\n * Only use `loading=\"eager\"` for above-the-fold images.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Lazy load below-the-fold image\n * <Img src=\"/photo.jpg\" alt=\"Photo\" />\n *\n * // ✅ GOOD: Eager load hero image\n * <Img\n *   src=\"/hero.jpg\"\n *   alt=\"Hero banner\"\n *   loading=\"eager\"\n *   fetchpriority=\"high\"\n * />\n * ```\n *\n * ### Responsive Images\n * Use srcset and sizes for responsive images to serve appropriate image sizes\n * based on viewport width, improving performance and bandwidth usage.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Responsive image with multiple sizes\n * <Img\n *   src=\"/photo.jpg\"\n *   srcSet=\"/photo-320w.jpg 320w, /photo-640w.jpg 640w, /photo-1024w.jpg 1024w\"\n *   sizes=\"(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px\"\n *   alt=\"Responsive image adapts to viewport\"\n * />\n * ```\n *\n * ## Error Handling\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Custom placeholder on error\n * <Img\n *   src=\"/photo.jpg\"\n *   placeholder=\"/fallback.png\"\n *   alt=\"User profile photo\"\n * />\n *\n * // ✅ GOOD: Custom error handler\n * <Img\n *   src=\"/photo.jpg\"\n *   onError={(e) => {\n *     console.error('Image failed to load')\n *     logToAnalytics('image_error', { src: e.currentTarget.src })\n *   }}\n *   alt=\"Photo\"\n * />\n * ```\n *\n * @param {ImgProps} props - Component props extending native img attributes\n * @returns {React.ReactElement} Image element with enhanced functionality\n *\n * @see {@link ImgProps} for complete prop documentation\n * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html\n */\nexport const Img = ({\n  src = \"//\",\n  alt,\n  width = 480,\n  height,\n  styles,\n  loading = \"lazy\",\n  placeholder,\n  fetchpriority = \"low\",\n  decoding = \"auto\",\n  srcSet,\n  sizes,\n  onError,\n  onLoad,\n  ...props\n}: ImgProps) => {\n  /**\n   * Generates a performant, responsive SVG gradient placeholder.\n   * Uses data URI to avoid network requests and memoizes based on dimensions.\n   * The SVG uses viewBox for perfect scaling at any size.\n   *\n   * Features:\n   * - Zero network requests (works offline)\n   * - ~900 bytes vs. 5-10KB external image\n   * - Responsive with viewBox\n   * - Attractive gradient (indigo → purple → pink)\n   * - Dimension text for debugging\n   */\n  const defaultPlaceholder = useMemo(() => {\n    const w = typeof width === \"number\" ? width : 480;\n    const h = typeof height === \"number\" ? height : Math.round(w * 0.75);\n\n    // Responsive SVG with attractive gradient and dimension text\n    const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${w} ${h}\">\n      <defs>\n        <linearGradient id=\"grad-${w}-${h}\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n          <stop offset=\"0%\" style=\"stop-color:#6366f1;stop-opacity:1\" />\n          <stop offset=\"50%\" style=\"stop-color:#8b5cf6;stop-opacity:1\" />\n          <stop offset=\"100%\" style=\"stop-color:#ec4899;stop-opacity:1\" />\n        </linearGradient>\n      </defs>\n      <rect width=\"${w}\" height=\"${h}\" fill=\"url(#grad-${w}-${h})\"/>\n      <circle cx=\"${w * 0.15}\" cy=\"${h * 0.2}\" r=\"${Math.min(w, h) * 0.08}\" fill=\"rgba(255,255,255,0.2)\"/>\n      <path d=\"M0,${h * 0.75} Q${w * 0.25},${h * 0.65} ${w * 0.5},${h * 0.75} T${w},${h * 0.75} L${w},${h} L0,${h} Z\" fill=\"rgba(0,0,0,0.15)\"/>\n      <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-family=\"system-ui,-apple-system,sans-serif\" font-size=\"${Math.max(16, Math.min(w, h) * 0.05)}\" font-weight=\"500\" fill=\"rgba(255,255,255,0.9)\">${w}×${h}</text>\n    </svg>`;\n\n    return `data:image/svg+xml,${encodeURIComponent(svg)}`;\n  }, [width, height]);\n\n  const fallbackPlaceholder = placeholder ?? defaultPlaceholder;\n\n  /**\n   * Handles image load errors.\n   * Calls custom error handler if provided, then applies fallback placeholder.\n   * The custom handler can prevent the default fallback by calling e.preventDefault().\n   */\n  const handleImgError = (\n    e: React.SyntheticEvent<HTMLImageElement, Event>\n  ): void => {\n    // Call custom error handler first (for logging, analytics, etc.)\n    if (onError) {\n      onError(e);\n    }\n\n    // Apply fallback unless preventDefault() was called\n    if (!e.defaultPrevented) {\n      // Avoid infinite error loop by checking if already showing placeholder\n      if (e.currentTarget.src !== fallbackPlaceholder) {\n        e.currentTarget.src = fallbackPlaceholder;\n      }\n    }\n  };\n\n  /**\n   * Handles successful image load.\n   * Calls custom load handler if provided.\n   */\n  const handleImgLoad = (\n    e: React.SyntheticEvent<HTMLImageElement, Event>\n  ): void => {\n    onLoad?.(e);\n  };\n\n  return (\n    <UI\n      as=\"img\"\n      src={src}\n      alt={alt}\n      width={width}\n      height={height || \"auto\"}\n      loading={loading}\n      style={styles}\n      srcSet={srcSet}\n      sizes={sizes}\n      onError={handleImgError}\n      onLoad={handleImgLoad}\n      decoding={decoding}\n      {...props}\n      {...(fetchpriority && { fetchpriority })}\n    />\n  );\n};\n\nexport default Img;\nImg.displayName = \"Img\";\n","import React, { useState, ChangeEvent, useEffect } from 'react'\nimport { useTextToSpeech } from './useTextToSpeech'\nimport Textarea from '#components/form/textarea.jsx'\nimport TextToSpeechControls from './views/TextToSpeechControls'\n\n/**\n * Props for the TextToSpeechComponent.\n * @interface TextToSpeechComponentProps\n */\ninterface TextToSpeechComponentProps {\n  /** Initial text to be spoken. Defaults to an empty string. */\n  initialText?: string\n  /** Whether to show the text input field. Defaults to true. */\n  showTextInput?: boolean\n  /** The voice to be used for speech synthesis. */\n  voice?: SpeechSynthesisVoice | undefined\n  /** The pitch of the voice. Defaults to 1. */\n  pitch?: number\n  /** The rate of speech. Defaults to 1. */\n  rate?: number\n  /** The language to be used for speech synthesis. */\n  language?: string\n  /** Player label */\n  label?: string | React.ReactNode\n  /** Callback function to be called when speech ends. */\n  onEnd?: () => void\n}\n\n/**\n * A component that converts text to speech using the Web Speech API.\n * @param {TextToSpeechComponentProps} props - The props for the component.\n * @returns {JSX.Element} The rendered TextToSpeechComponent.\n */\nexport const TextToSpeech: React.FC<TextToSpeechComponentProps> = ({\n  initialText = '',\n  showTextInput = false,\n  voice,\n  pitch = 1,\n  rate = 1,\n  language,\n  label,\n  onEnd,\n}) => {\n  const {\n    speak,\n    pause,\n    resume,\n    cancel,\n    isSpeaking,\n    isPaused,\n    getAvailableLanguages,\n    availableVoices,\n  } = useTextToSpeech()\n  const [text, setText] = useState<string>(initialText)\n  console.log(getAvailableLanguages())\n\n  useEffect(() => {\n    setText(initialText)\n  }, [initialText])\n\n  const handleSpeak = (): void => {\n    if (text.trim() !== '') {\n      speak(text, { voice, pitch, rate }, handleEnd)\n    }\n  }\n\n  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {\n    setText(e.target.value)\n  }\n\n  const handleEnd = (): void => {\n    if (onEnd) {\n      onEnd()\n    }\n  }\n\n  return (\n    <>\n      {showTextInput && <Textarea value={text} onChange={handleChange} />}\n      <TextToSpeechControls\n        label={label}\n        isSpeaking={isSpeaking}\n        isPaused={isPaused}\n        onSpeak={handleSpeak}\n        onPause={pause}\n        onResume={resume}\n        onCancel={cancel}\n      />\n    </>\n  )\n}\n\nexport default TextToSpeech\nTextToSpeech.displayName = 'TextToSpeechComponent'\n","import { useState, useEffect } from 'react'\n\n/**\n * Options for configuring speech synthesis.\n * @interface SpeechOptions\n */\ninterface SpeechOptions {\n  /** The language for speech synthesis (e.g., 'en-US') */\n  lang?: string\n\n  /** The pitch of the voice (0 to 2) */\n  pitch?: number\n  /** The speed of the voice (0.1 to 10) */\n  rate?: number\n\n  /** The voice to use for speech synthesis */\n  voice?: SpeechSynthesisVoice\n}\n/**\n * Custom hook to handle text-to-speech functionality.\n *\n * @param {SpeechSynthesisVoice} [initialVoice] - The initial voice to use for speech synthesis.\n * @returns {Object} An object containing methods to control speech synthesis and state variables.\n */\nexport const useTextToSpeech = (initialVoice?: SpeechSynthesisVoice) => {\n  const [availableVoices, setAvailableVoices] = useState<\n    SpeechSynthesisVoice[]\n  >([])\n  const [currentVoice, setCurrentVoice] = useState<\n    SpeechSynthesisVoice | undefined\n  >(initialVoice)\n\n  const [isSpeaking, setIsSpeaking] = useState<boolean>(false)\n  const [isPaused, setIsPaused] = useState<boolean>(false)\n  const [utterance, setUtterance] = useState<SpeechSynthesisUtterance | null>(\n    null,\n  )\n\n  useEffect(() => {\n    const updateVoices = () => {\n      const voices = window.speechSynthesis.getVoices()\n      setAvailableVoices(voices)\n\n      // Set default voice to Google US English if available\n      const googleVoice = voices.find(\n        (voice) => voice.name === 'Google US English',\n      )\n      if (googleVoice) {\n        setCurrentVoice(googleVoice)\n      } else {\n        // Fallback to the first English voice if Google voice is not available\n        const englishVoice = voices.find((voice) =>\n          voice.lang.startsWith('en-'),\n        )\n        if (englishVoice) {\n          setCurrentVoice(englishVoice)\n        }\n      }\n    }\n\n    updateVoices()\n    window.speechSynthesis.onvoiceschanged = updateVoices\n\n    return () => {\n      window.speechSynthesis.onvoiceschanged = null\n    }\n  }, [])\n\n  /**\n   * Gets the list of available languages for speech synthesis.\n   * @returns {string[]} An array of available language codes.\n   */\n  const getAvailableLanguages = () => {\n    return [...new Set(availableVoices.map((voice) => voice.lang))]\n  }\n\n  /**\n   * Initiates speech synthesis for the given text.\n   *\n   * @param {string} text - The text to be spoken.\n   * @param {SpeechOptions} [options={}] - Options for speech synthesis.\n   * @param {Function} [onEnd] - Callback function to be called when speech ends.\n   */\n  const speak = (\n    text: string,\n    options: SpeechOptions = {},\n    onEnd?: () => void,\n  ) => {\n    const utterance = new SpeechSynthesisUtterance(text)\n\n    utterance.lang = options.lang ?? 'en-US'\n    utterance.pitch = options.pitch ?? 1\n    utterance.rate = options.rate ?? 1\n    utterance.voice = currentVoice ?? options.voice ?? null\n\n    utterance.onend = () => {\n      setIsSpeaking(false)\n      setIsPaused(false)\n      if (onEnd) {\n        onEnd()\n      }\n    }\n\n    if ('speechSynthesis' in window) {\n      window.speechSynthesis.speak(utterance)\n      setUtterance(utterance)\n      setIsSpeaking(true)\n      setIsPaused(false)\n    } else {\n      console.error('Speech synthesis not supported')\n      // Handle the error appropriately\n    }\n  }\n\n  /**\n   * Changes the current voice used for speech synthesis.\n   * @param {SpeechSynthesisVoice} voice - The new voice to use.\n   */\n  const changeVoice = (voice: SpeechSynthesisVoice) => {\n    setCurrentVoice(voice)\n  }\n\n  /**\n   * Pauses the ongoing speech synthesis.\n   */\n  const pause = () => {\n    if (isSpeaking && !isPaused) {\n      window.speechSynthesis.pause()\n      setIsPaused(true)\n    }\n  }\n\n  /**\n   * Resumes the paused speech synthesis.\n   */\n  const resume = () => {\n    if (isSpeaking && isPaused) {\n      window.speechSynthesis.resume()\n      setIsPaused(false)\n    }\n  }\n\n  /**\n   * Cancels the ongoing speech synthesis.\n   */\n  const cancel = () => {\n    if (isSpeaking) {\n      window.speechSynthesis.cancel()\n      setIsSpeaking(false)\n      setIsPaused(false)\n    }\n  }\n\n  return {\n    /** Initiates speech synthesis for the given text */\n    speak,\n    /** Pauses the ongoing speech synthesis */\n    pause,\n    /** Resumes the paused speech synthesis */\n    resume,\n    /** Cancels the ongoing speech synthesis */\n    cancel,\n    /** Indicates whether speech synthesis is currently active */\n    isSpeaking,\n    /** Indicates whether speech synthesis is currently paused */\n    isPaused,\n    /** Array of available voices for speech synthesis */\n    availableVoices,\n    /** Changes the current voice used for speech synthesis */\n    changeVoice,\n    /** The currently selected voice for speech synthesis */\n    currentVoice,\n    /** Gets the list of available languages for speech synthesis */\n    getAvailableLanguages,\n  }\n}\n","import React from 'react'\nimport Icon from '#components/icons/icon'\nimport UI from '#components/ui'\nimport { FC } from 'react'\n\n/**\n * Props for the TextToSpeechControls component.\n * @interface TextToSpeechControlsProps\n */\ninterface TextToSpeechControlsProps {\n  /** Optional label for the controls */\n  label?: string | React.ReactNode\n  /** Indicates if the text-to-speech is currently speaking */\n  isSpeaking: boolean\n  /** Indicates if the text-to-speech is paused */\n  isPaused: boolean\n  /** Function to start speaking */\n  onSpeak: () => void\n  /** Function to pause speaking */\n  onPause: () => void\n  /** Function to resume speaking */\n  onResume: () => void\n  /** Function to cancel speaking */\n  onCancel: () => void\n}\n\n/**\n * TTSButtonComponent props\n * @interface TTSButtonComponentProps\n */\ninterface TTSButtonComponentProps {\n  /** The content of the button */\n  children: React.ReactNode\n  /** Function to call when the button is clicked */\n  onClick: () => void\n}\n\n/**\n * TTSButtonComponent is a reusable button component for text-to-speech controls.\n * @param {TTSButtonComponentProps} props - The component props\n * @returns {React.ReactElement} The rendered button\n */\nexport const TTSButtonComponent: React.FC<TTSButtonComponentProps> = ({\n  children,\n  onClick,\n}) => {\n  return (\n    <UI\n      as=\"button\"\n      type=\"button\"\n      className=\"tts-border\"\n      data-btn=\"sm text pill\"\n      onClick={onClick}\n    >\n      {children}\n    </UI>\n  )\n}\n\nexport const TTSButton = React.memo(TTSButtonComponent)\n\n/**\n * TextToSpeechControlsComponent interface extends FC<TextToSpeechControlsProps>\n * and includes a TTSButton property.\n * @interface TextToSpeechControlsComponent\n * @extends {FC<TextToSpeechControlsProps>}\n */\ninterface TextToSpeechControlsComponent extends FC<TextToSpeechControlsProps> {\n  /** The TTSButton component used within TextToSpeechControls */\n  TTSButton: typeof TTSButton\n}\n\n/**\n * TextToSpeechControls component provides a user interface for controlling text-to-speech functionality.\n * @param {TextToSpeechControlsProps} props - The component props\n * @returns {React.ReactElement} The rendered TextToSpeechControls component\n */\nconst TextToSpeechControls: TextToSpeechControlsComponent = ({\n  label,\n  isSpeaking,\n  isPaused,\n  onSpeak,\n  onPause,\n  onResume,\n  onCancel,\n}) => {\n  const iconSize = 16\n\n  return (\n    <UI as=\"div\" data-tts>\n      {label && <p>{label}</p>}\n      {!isSpeaking && (\n        <TTSButton aria-label=\"Speak\" onClick={onSpeak}>\n          <Icon.PlaySolid size={iconSize} />\n        </TTSButton>\n      )}\n      {isSpeaking && !isPaused && (\n        <TTSButton aria-label=\"Pause\" onClick={onPause}>\n          <Icon.PauseSolid size={iconSize} />\n        </TTSButton>\n      )}\n      {isPaused && (\n        <TTSButton aria-label=\"Resume\" onClick={onResume}>\n          <Icon.ResumeSolid size={iconSize} />\n        </TTSButton>\n      )}\n      <TTSButton aria-label=\"Stop\" onClick={onCancel}>\n        <Icon.StopSolid size={iconSize} />\n      </TTSButton>\n    </UI>\n  )\n}\n\nTextToSpeechControls.displayName = 'TextToSpeechControls'\nTextToSpeechControls.TTSButton = TTSButton\n\nexport default TextToSpeechControls\n","import UI from '../ui'\nimport React, { ReactNode } from 'react'\n\ntype ComponentProps = React.ComponentProps<typeof UI>\n\n/**\n * Renders children elements without any wrapping component.\n * Can be used as a placeholder when no semantic landmark is needed.\n */\nexport const Landmarks = (children?: React.FC) => <>{children}</>\n\ntype HeaderProps = {\n  headerBackground?: ReactNode\n} & ComponentProps\n/**\n * Header component.\n *\n * Renders a header landmark with a section child.\n *\n * @param children - The content to render inside the header.\n * @param styles - Optional styles object.\n * @param props - Other props.\n */\nexport const Header = ({\n  id,\n  children,\n  headerBackground,\n  styles,\n  classes,\n  ...props\n}: HeaderProps) => {\n  return (\n    <UI as=\"header\" id={id} styles={styles} className={classes} {...props}>\n      {headerBackground}\n      <UI as=\"section\">{children}</UI>\n    </UI>\n  )\n}\n\n/**\n * Main component.\n *\n * Renders a main landmark.\n *\n * @param children - The content to render inside the main element.\n * @param styles - Optional styles object.\n * @param props - Other props.\n */\nexport const Main = ({\n  id,\n  children,\n  styles,\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"main\" id={id} styles={styles} {...props} className={classes}>\n      {children}\n    </UI>\n  )\n}\n\n/**\n * Footer component that renders a footer element with a section element inside.\n * @param {ReactNode} children - Child elements to render inside the section element.\n * @param styles - CSS styles to apply to the footer element.\n * @param props - Additional props to pass to the footer element.\n * @returns A React component that renders a footer element with a section element inside.\n */\nexport const Footer = ({\n  id,\n  classes,\n  children,\n  styles = {},\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"footer\" id={id} className={classes} styles={styles} {...props}>\n      <UI as=\"section\">{children || 'Copyright © 2022'}</UI>\n    </UI>\n  )\n}\n\nexport const Aside = ({\n  id,\n  children,\n  styles = {},\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"aside\" id={id} styles={styles} className={classes} {...props}>\n      <UI as=\"section\">{children}</UI>\n    </UI>\n  )\n}\n\n/**\n * Section component that renders a section element.\n *\n * @param children - Child elements to render inside the section.\n * @param styles - CSS styles to apply to the section.\n * @param props - Other props.\n */\nexport const Section = ({\n  id,\n  children,\n  styles,\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"section\" id={id} styles={styles} className={classes} {...props}>\n      {children}\n    </UI>\n  )\n}\n\n/**\n * Article component renders an HTML <article> element.\n *\n * @param children - Child elements to render inside the article.\n * @param styles - CSS styles to apply to the article.\n * @param props - Additional props to pass to the article element.\n */\nexport const Article = ({\n  id,\n  children,\n\n  styles,\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"article\" id={id} styles={styles} className={classes} {...props}>\n      {children}\n    </UI>\n  )\n}\n\nexport default Landmarks\n\nLandmarks.displayName = 'Landmarks'\nLandmarks.Header = Header\nLandmarks.Main = Main\nLandmarks.Footer = Footer\nLandmarks.Aside = Aside\nLandmarks.Section = Section\nLandmarks.Article = Article\n","import UI from '#components/ui'\nimport React from 'react'\n\n/**\n * Props for the Badge component\n *\n * @property {React.ReactNode} children - Content to display inside the badge (typically numbers or short text)\n * @property {string} [id] - Optional HTML id attribute for the badge element\n * @property {React.CSSProperties} [styles] - Inline styles to apply to the badge\n * @property {string} [classes] - CSS class names to apply to the badge\n * @property {'rounded'} [variant] - Visual variant of the badge. Use 'rounded' for circular badges (fixed size with ellipsis for overflow)\n * @property {string} [aria-label] - Accessible label for screen readers. Required for icon-only or number-only badges\n * @property {'status' | 'note'} [role] - ARIA role for the badge. Defaults to 'status' for dynamic content\n */\nexport type BadgeProps = {\n  /**\n   * Content to display inside the badge (typically numbers or short text)\n   */\n  children?: React.ReactNode\n  /**\n   * Visual variant of the badge\n   * - 'rounded': Circular badge style\n   */\n  variant?: 'rounded'\n} & React.ComponentProps<typeof UI>\n\n/**\n * Badge - A small label component for displaying status, counts, or notifications\n *\n * The Badge component is used to display supplementary information alongside other content,\n * such as notification counts, status indicators, or labels. It renders as a semantic `<sup>`\n * element with a nested `<span>` required for the component's styling architecture.\n *\n * ## Styling Architecture\n *\n * The Badge uses a nested structure (`<sup><span>content</span></sup>`) which is required\n * for the SCSS styling system. The outer `<sup>` element provides positioning context,\n * while the inner `<span>` receives the visual styling (background, padding, border-radius).\n *\n * ## Rounded Variant Behavior\n *\n * The `rounded` variant creates a perfect circular badge with fixed dimensions (1.5625rem).\n * Content that exceeds the available space will be truncated with an ellipsis (...).\n * **Best practice**: Format large numbers yourself (e.g., pass \"99+\" instead of \"999\").\n *\n * ## Accessibility Considerations\n *\n * - **Semantic HTML**: Uses `<sup>` (superscript) element for proper positioning context\n * - **ARIA Role**: Defaults to `role=\"status\"` for dynamic badges (e.g., unread counts)\n * - **Accessible Names**: For icon-only or number-only badges, provide an `aria-label`\n *   to give context (e.g., \"3 unread messages\" instead of just \"3\")\n * - **Live Regions**: The `role=\"status\"` makes badges announce updates to screen readers\n *\n * @param {BadgeProps} props - Component props\n * @returns {React.ReactElement} A Badge component\n *\n * @example\n * // Basic badge with notification count\n * <p>\n *   Messages\n *   <Badge aria-label=\"3 unread messages\">3</Badge>\n * </p>\n *\n * @example\n * // Rounded badge variant (perfect circle)\n * <p>\n *   Notifications\n *   <Badge variant=\"rounded\" aria-label=\"99 or more notifications\">99+</Badge>\n * </p>\n *\n * @example\n * // Status badge with custom styling\n * <p>\n *   Active Users\n *   <Badge styles={{ backgroundColor: 'green', color: 'white' }}>21</Badge>\n * </p>\n *\n * @example\n * // ✅ GOOD: Accessible badge with descriptive label and formatted content\n * <Badge variant=\"rounded\" aria-label=\"12 items in cart\">12</Badge>\n *\n * @example\n * // ✅ GOOD: Large numbers formatted by developer\n * <Badge variant=\"rounded\" aria-label=\"More than 99 notifications\">99+</Badge>\n *\n * @example\n * // ❌ BAD: Number-only badge without context for screen readers\n * <Badge>12</Badge>\n */\nexport const Badge = ({ id, styles, classes, children, variant, ...props }: BadgeProps) => {\n  // Build data-badge attribute for variant styling\n  const dataBadge = variant ? variant : undefined\n\n  return (\n    <UI\n      as=\"sup\"\n      id={id}\n      styles={styles}\n      className={classes}\n      data-badge={dataBadge}\n      role=\"status\"\n      {...props}\n    >\n      <UI as=\"span\">{children}</UI>\n    </UI>\n  )\n}\n\nBadge.displayName = 'Badge'\nexport default Badge\n","import React from 'react'\nimport UI from '#components/ui'\n\nexport type TagProps = {\n  /** HTML element to display the badge as span or p */\n  elm?: 'span' | 'p'\n  /**  Aria role for the component - conditional */\n  role: 'note' | 'status'\n} & React.ComponentProps<typeof UI>\n\nexport const Tag = ({\n  elm = 'span',\n  role = 'note',\n  children,\n  styles,\n  ...props\n}: TagProps) => {\n  return (\n    <UI as={elm} role={role} styles={styles} {...props}>\n      {children}\n    </UI>\n  )\n}\nexport default Tag\nTag.displayName = 'Tag'\n","import UI from \"#components/ui\";\nimport React, { useCallback } from \"react\";\nimport type { DetailsProps } from \"./details.types\";\n\n/**\n * Details - A progressive disclosure component using native HTML `<details>` element.\n *\n * This component wraps the native `<details>` and `<summary>` elements to provide\n * an accessible, semantic way to show and hide content. It supports accordion behavior\n * through the `name` attribute and includes proper keyboard navigation out of the box.\n *\n * ## Key Features:\n * - **Semantic HTML**: Uses native `<details>` for built-in accessibility\n * - **Keyboard Support**: Space/Enter to toggle, fully accessible by default\n * - **Accordion Mode**: Group multiple details with `name` for exclusive expansion\n * - **Customizable**: Supports icons, custom styles, and event handlers\n *\n * ## Accessibility:\n * - ✅ WCAG 2.1 AA compliant using semantic HTML\n * - ✅ Native keyboard support (Space, Enter)\n * - ✅ Screen reader compatible (announced as \"disclosure\" or \"expandable\")\n * - ✅ Focus indicators automatically applied via CSS\n * - ✅ `aria-expanded` managed automatically by browser\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Details summary=\"Click to expand\">\n *   <p>Hidden content here</p>\n * </Details>\n * ```\n *\n * @example\n * ```tsx\n * // With icon and custom styling\n * <Details\n *   summary=\"Shipping Information\"\n *   icon={<ChevronDownIcon />}\n *   classes=\"custom-details\"\n *   onToggle={(e) => console.log('Open:', e.currentTarget.open)}\n * >\n *   <p>Ships within 2-3 business days</p>\n * </Details>\n * ```\n *\n * @example\n * ```tsx\n * // Accordion mode - only one open at a time\n * <Details name=\"faq\" summary=\"Question 1\">Answer 1</Details>\n * <Details name=\"faq\" summary=\"Question 2\">Answer 2</Details>\n * <Details name=\"faq\" summary=\"Question 3\">Answer 3</Details>\n * ```\n */\nexport const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(\n  (\n    {\n      summary,\n      icon,\n      styles,\n      classes,\n      ariaLabel,\n      name,\n      open,\n      onPointerDown,\n      onToggle,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Memoize callbacks to prevent unnecessary re-renders of child components\n    const handlePointerDown = useCallback(\n      (e: React.PointerEvent<HTMLElement>) => {\n        onPointerDown?.(e as React.PointerEvent<HTMLDetailsElement>);\n      },\n      [onPointerDown]\n    );\n\n    const handleToggle = useCallback(\n      (e: React.SyntheticEvent<HTMLDetailsElement>) => {\n        onToggle?.(e);\n      },\n      [onToggle]\n    );\n\n    return (\n      <UI\n        as=\"details\"\n        styles={styles}\n        classes={classes}\n        onToggle={handleToggle}\n        ref={ref}\n        open={open}\n        aria-label={ariaLabel}\n        name={name}\n        {...props}\n      >\n        <UI as=\"summary\" onPointerDown={handlePointerDown}>\n          {icon}\n          {summary}\n        </UI>\n        <UI as=\"section\">{children}</UI>\n      </UI>\n    );\n  }\n);\n\nDetails.displayName = \"Details\";\n\nexport default Details;\n"]}
+{"version":3,"sources":["../src/components/images/img.tsx","../src/components/text-to-speech/TextToSpeech.tsx","../src/components/text-to-speech/useTextToSpeech.tsx","../src/components/text-to-speech/views/TextToSpeechControls.tsx","../src/components/layout/landmarks.tsx","../src/components/badge/badge.tsx","../src/components/tag/tag.tsx","../src/components/details/details.tsx"],"names":["React","useMemo","Img","src","alt","width","height","styles","loading","placeholder","fetchpriority","decoding","srcSet","sizes","onError","onLoad","props","defaultPlaceholder","w","h","svg","fallbackPlaceholder","ui_default","e","useState","useEffect","useTextToSpeech","initialVoice","availableVoices","setAvailableVoices","currentVoice","setCurrentVoice","isSpeaking","setIsSpeaking","isPaused","setIsPaused","utterance","setUtterance","updateVoices","voices","googleVoice","voice","englishVoice","text","options","onEnd","TTSButtonComponent","children","onClick","TTSButton","TextToSpeechControls","label","onSpeak","onPause","onResume","onCancel","icon_default","TextToSpeechControls_default","TextToSpeech","initialText","showTextInput","pitch","rate","language","speak","pause","resume","cancel","getAvailableLanguages","setText","handleSpeak","handleEnd","handleChange","textarea_default","Landmarks","Header","id","headerBackground","classes","Main","Footer","Aside","Section","Article","Badge","variant","Tag","elm","role","useCallback","Details","summary","icon","ariaLabel","name","open","onPointerDown","onToggle","ref","handlePointerDown","handleToggle"],"mappings":"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","sourcesContent":["import UI from \"../ui\";\nimport React, { useMemo } from \"react\";\nimport type { ImgProps } from \"./img.types\";\n\n/**\n * Img - A semantic image component with accessibility and performance best practices.\n *\n * This component wraps the native `<img>` element with enhanced features:\n * - **Responsive images** via optional srcset/sizes\n * - **Lazy loading** by default for performance\n * - **Error handling** with configurable fallback placeholders\n * - **Type safety** with full TypeScript support\n *\n * ## Accessibility Patterns (WCAG 2.1 AA)\n *\n * ### Decorative Images\n * Images that are purely visual decoration should use an empty alt attribute.\n * These images are typically borders, patterns, or visual separators.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Decorative border image\n * <Img src=\"/decorative-border.png\" alt=\"\" />\n *\n * // ✅ GOOD: Background pattern\n * <Img src=\"/pattern.svg\" alt=\"\" loading=\"eager\" />\n * ```\n *\n * ### Semantic Images\n * Images that convey information must have descriptive alt text that explains\n * the content and purpose of the image.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Informative image with descriptive alt\n * <Img\n *   src=\"/sales-chart.png\"\n *   alt=\"Sales chart showing 30% revenue growth in Q4 2024\"\n * />\n *\n * // ✅ GOOD: Product photo with context\n * <Img\n *   src=\"/laptop.jpg\"\n *   alt=\"Silver MacBook Pro 14-inch on wooden desk\"\n * />\n * ```\n *\n * ## Performance Optimization\n *\n * ### Lazy Loading\n * By default, images use lazy loading to improve page load performance.\n * Only use `loading=\"eager\"` for above-the-fold images.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Lazy load below-the-fold image\n * <Img src=\"/photo.jpg\" alt=\"Photo\" />\n *\n * // ✅ GOOD: Eager load hero image\n * <Img\n *   src=\"/hero.jpg\"\n *   alt=\"Hero banner\"\n *   loading=\"eager\"\n *   fetchpriority=\"high\"\n * />\n * ```\n *\n * ### Responsive Images\n * Use srcset and sizes for responsive images to serve appropriate image sizes\n * based on viewport width, improving performance and bandwidth usage.\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Responsive image with multiple sizes\n * <Img\n *   src=\"/photo.jpg\"\n *   srcSet=\"/photo-320w.jpg 320w, /photo-640w.jpg 640w, /photo-1024w.jpg 1024w\"\n *   sizes=\"(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px\"\n *   alt=\"Responsive image adapts to viewport\"\n * />\n * ```\n *\n * ## Error Handling\n *\n * @example\n * ```tsx\n * // ✅ GOOD: Custom placeholder on error\n * <Img\n *   src=\"/photo.jpg\"\n *   placeholder=\"/fallback.png\"\n *   alt=\"User profile photo\"\n * />\n *\n * // ✅ GOOD: Custom error handler\n * <Img\n *   src=\"/photo.jpg\"\n *   onError={(e) => {\n *     console.error('Image failed to load')\n *     logToAnalytics('image_error', { src: e.currentTarget.src })\n *   }}\n *   alt=\"Photo\"\n * />\n * ```\n *\n * @param {ImgProps} props - Component props extending native img attributes\n * @returns {React.ReactElement} Image element with enhanced functionality\n *\n * @see {@link ImgProps} for complete prop documentation\n * @see https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html\n */\nexport const Img = ({\n  src = \"//\",\n  alt,\n  width = 480,\n  height,\n  styles,\n  loading = \"lazy\",\n  placeholder,\n  fetchpriority = \"low\",\n  decoding = \"auto\",\n  srcSet,\n  sizes,\n  onError,\n  onLoad,\n  ...props\n}: ImgProps) => {\n  /**\n   * Generates a performant, responsive SVG gradient placeholder.\n   * Uses data URI to avoid network requests and memoizes based on dimensions.\n   * The SVG uses viewBox for perfect scaling at any size.\n   *\n   * Features:\n   * - Zero network requests (works offline)\n   * - ~900 bytes vs. 5-10KB external image\n   * - Responsive with viewBox\n   * - Attractive gradient (indigo → purple → pink)\n   * - Dimension text for debugging\n   */\n  const defaultPlaceholder = useMemo(() => {\n    const w = typeof width === \"number\" ? width : 480;\n    const h = typeof height === \"number\" ? height : Math.round(w * 0.75);\n\n    // Responsive SVG with attractive gradient and dimension text\n    const svg = `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${w} ${h}\">\n      <defs>\n        <linearGradient id=\"grad-${w}-${h}\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n          <stop offset=\"0%\" style=\"stop-color:#6366f1;stop-opacity:1\" />\n          <stop offset=\"50%\" style=\"stop-color:#8b5cf6;stop-opacity:1\" />\n          <stop offset=\"100%\" style=\"stop-color:#ec4899;stop-opacity:1\" />\n        </linearGradient>\n      </defs>\n      <rect width=\"${w}\" height=\"${h}\" fill=\"url(#grad-${w}-${h})\"/>\n      <circle cx=\"${w * 0.15}\" cy=\"${h * 0.2}\" r=\"${Math.min(w, h) * 0.08}\" fill=\"rgba(255,255,255,0.2)\"/>\n      <path d=\"M0,${h * 0.75} Q${w * 0.25},${h * 0.65} ${w * 0.5},${h * 0.75} T${w},${h * 0.75} L${w},${h} L0,${h} Z\" fill=\"rgba(0,0,0,0.15)\"/>\n      <text x=\"50%\" y=\"50%\" dominant-baseline=\"middle\" text-anchor=\"middle\" font-family=\"system-ui,-apple-system,sans-serif\" font-size=\"${Math.max(16, Math.min(w, h) * 0.05)}\" font-weight=\"500\" fill=\"rgba(255,255,255,0.9)\">${w}×${h}</text>\n    </svg>`;\n\n    return `data:image/svg+xml,${encodeURIComponent(svg)}`;\n  }, [width, height]);\n\n  const fallbackPlaceholder = placeholder ?? defaultPlaceholder;\n\n  /**\n   * Handles image load errors.\n   * Calls custom error handler if provided, then applies fallback placeholder.\n   * The custom handler can prevent the default fallback by calling e.preventDefault().\n   */\n  const handleImgError = (\n    e: React.SyntheticEvent<HTMLImageElement, Event>\n  ): void => {\n    // Call custom error handler first (for logging, analytics, etc.)\n    if (onError) {\n      onError(e);\n    }\n\n    // Apply fallback unless preventDefault() was called\n    if (!e.defaultPrevented) {\n      // Avoid infinite error loop by checking if already showing placeholder\n      if (e.currentTarget.src !== fallbackPlaceholder) {\n        e.currentTarget.src = fallbackPlaceholder;\n      }\n    }\n  };\n\n  /**\n   * Handles successful image load.\n   * Calls custom load handler if provided.\n   */\n  const handleImgLoad = (\n    e: React.SyntheticEvent<HTMLImageElement, Event>\n  ): void => {\n    onLoad?.(e);\n  };\n\n  return (\n    <UI\n      as=\"img\"\n      src={src}\n      alt={alt}\n      width={width}\n      height={height || \"auto\"}\n      loading={loading}\n      style={styles}\n      srcSet={srcSet}\n      sizes={sizes}\n      onError={handleImgError}\n      onLoad={handleImgLoad}\n      decoding={decoding}\n      {...props}\n      {...(fetchpriority && { fetchpriority })}\n    />\n  );\n};\n\nexport default Img;\nImg.displayName = \"Img\";\n","import React, { useState, ChangeEvent, useEffect } from 'react'\nimport { useTextToSpeech } from './useTextToSpeech'\nimport Textarea from '#components/form/textarea.jsx'\nimport TextToSpeechControls from './views/TextToSpeechControls'\n\n/**\n * Props for the TextToSpeechComponent.\n * @interface TextToSpeechComponentProps\n */\ninterface TextToSpeechComponentProps {\n  /** Initial text to be spoken. Defaults to an empty string. */\n  initialText?: string\n  /** Whether to show the text input field. Defaults to true. */\n  showTextInput?: boolean\n  /** The voice to be used for speech synthesis. */\n  voice?: SpeechSynthesisVoice | undefined\n  /** The pitch of the voice. Defaults to 1. */\n  pitch?: number\n  /** The rate of speech. Defaults to 1. */\n  rate?: number\n  /** The language to be used for speech synthesis. */\n  language?: string\n  /** Player label */\n  label?: string | React.ReactNode\n  /** Callback function to be called when speech ends. */\n  onEnd?: () => void\n}\n\n/**\n * A component that converts text to speech using the Web Speech API.\n * @param {TextToSpeechComponentProps} props - The props for the component.\n * @returns {JSX.Element} The rendered TextToSpeechComponent.\n */\nexport const TextToSpeech: React.FC<TextToSpeechComponentProps> = ({\n  initialText = '',\n  showTextInput = false,\n  voice,\n  pitch = 1,\n  rate = 1,\n  language,\n  label,\n  onEnd,\n}) => {\n  const {\n    speak,\n    pause,\n    resume,\n    cancel,\n    isSpeaking,\n    isPaused,\n    getAvailableLanguages,\n    availableVoices,\n  } = useTextToSpeech()\n  const [text, setText] = useState<string>(initialText)\n  console.log(getAvailableLanguages())\n\n  useEffect(() => {\n    setText(initialText)\n  }, [initialText])\n\n  const handleSpeak = (): void => {\n    if (text.trim() !== '') {\n      speak(text, { voice, pitch, rate }, handleEnd)\n    }\n  }\n\n  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>): void => {\n    setText(e.target.value)\n  }\n\n  const handleEnd = (): void => {\n    if (onEnd) {\n      onEnd()\n    }\n  }\n\n  return (\n    <>\n      {showTextInput && <Textarea value={text} onChange={handleChange} />}\n      <TextToSpeechControls\n        label={label}\n        isSpeaking={isSpeaking}\n        isPaused={isPaused}\n        onSpeak={handleSpeak}\n        onPause={pause}\n        onResume={resume}\n        onCancel={cancel}\n      />\n    </>\n  )\n}\n\nexport default TextToSpeech\nTextToSpeech.displayName = 'TextToSpeechComponent'\n","import { useState, useEffect } from 'react'\n\n/**\n * Options for configuring speech synthesis.\n * @interface SpeechOptions\n */\ninterface SpeechOptions {\n  /** The language for speech synthesis (e.g., 'en-US') */\n  lang?: string\n\n  /** The pitch of the voice (0 to 2) */\n  pitch?: number\n  /** The speed of the voice (0.1 to 10) */\n  rate?: number\n\n  /** The voice to use for speech synthesis */\n  voice?: SpeechSynthesisVoice\n}\n/**\n * Custom hook to handle text-to-speech functionality.\n *\n * @param {SpeechSynthesisVoice} [initialVoice] - The initial voice to use for speech synthesis.\n * @returns {Object} An object containing methods to control speech synthesis and state variables.\n */\nexport const useTextToSpeech = (initialVoice?: SpeechSynthesisVoice) => {\n  const [availableVoices, setAvailableVoices] = useState<\n    SpeechSynthesisVoice[]\n  >([])\n  const [currentVoice, setCurrentVoice] = useState<\n    SpeechSynthesisVoice | undefined\n  >(initialVoice)\n\n  const [isSpeaking, setIsSpeaking] = useState<boolean>(false)\n  const [isPaused, setIsPaused] = useState<boolean>(false)\n  const [utterance, setUtterance] = useState<SpeechSynthesisUtterance | null>(\n    null,\n  )\n\n  useEffect(() => {\n    const updateVoices = () => {\n      const voices = window.speechSynthesis.getVoices()\n      setAvailableVoices(voices)\n\n      // Set default voice to Google US English if available\n      const googleVoice = voices.find(\n        (voice) => voice.name === 'Google US English',\n      )\n      if (googleVoice) {\n        setCurrentVoice(googleVoice)\n      } else {\n        // Fallback to the first English voice if Google voice is not available\n        const englishVoice = voices.find((voice) =>\n          voice.lang.startsWith('en-'),\n        )\n        if (englishVoice) {\n          setCurrentVoice(englishVoice)\n        }\n      }\n    }\n\n    updateVoices()\n    window.speechSynthesis.onvoiceschanged = updateVoices\n\n    return () => {\n      window.speechSynthesis.onvoiceschanged = null\n    }\n  }, [])\n\n  /**\n   * Gets the list of available languages for speech synthesis.\n   * @returns {string[]} An array of available language codes.\n   */\n  const getAvailableLanguages = () => {\n    return [...new Set(availableVoices.map((voice) => voice.lang))]\n  }\n\n  /**\n   * Initiates speech synthesis for the given text.\n   *\n   * @param {string} text - The text to be spoken.\n   * @param {SpeechOptions} [options={}] - Options for speech synthesis.\n   * @param {Function} [onEnd] - Callback function to be called when speech ends.\n   */\n  const speak = (\n    text: string,\n    options: SpeechOptions = {},\n    onEnd?: () => void,\n  ) => {\n    const utterance = new SpeechSynthesisUtterance(text)\n\n    utterance.lang = options.lang ?? 'en-US'\n    utterance.pitch = options.pitch ?? 1\n    utterance.rate = options.rate ?? 1\n    utterance.voice = currentVoice ?? options.voice ?? null\n\n    utterance.onend = () => {\n      setIsSpeaking(false)\n      setIsPaused(false)\n      if (onEnd) {\n        onEnd()\n      }\n    }\n\n    if ('speechSynthesis' in window) {\n      window.speechSynthesis.speak(utterance)\n      setUtterance(utterance)\n      setIsSpeaking(true)\n      setIsPaused(false)\n    } else {\n      console.error('Speech synthesis not supported')\n      // Handle the error appropriately\n    }\n  }\n\n  /**\n   * Changes the current voice used for speech synthesis.\n   * @param {SpeechSynthesisVoice} voice - The new voice to use.\n   */\n  const changeVoice = (voice: SpeechSynthesisVoice) => {\n    setCurrentVoice(voice)\n  }\n\n  /**\n   * Pauses the ongoing speech synthesis.\n   */\n  const pause = () => {\n    if (isSpeaking && !isPaused) {\n      window.speechSynthesis.pause()\n      setIsPaused(true)\n    }\n  }\n\n  /**\n   * Resumes the paused speech synthesis.\n   */\n  const resume = () => {\n    if (isSpeaking && isPaused) {\n      window.speechSynthesis.resume()\n      setIsPaused(false)\n    }\n  }\n\n  /**\n   * Cancels the ongoing speech synthesis.\n   */\n  const cancel = () => {\n    if (isSpeaking) {\n      window.speechSynthesis.cancel()\n      setIsSpeaking(false)\n      setIsPaused(false)\n    }\n  }\n\n  return {\n    /** Initiates speech synthesis for the given text */\n    speak,\n    /** Pauses the ongoing speech synthesis */\n    pause,\n    /** Resumes the paused speech synthesis */\n    resume,\n    /** Cancels the ongoing speech synthesis */\n    cancel,\n    /** Indicates whether speech synthesis is currently active */\n    isSpeaking,\n    /** Indicates whether speech synthesis is currently paused */\n    isPaused,\n    /** Array of available voices for speech synthesis */\n    availableVoices,\n    /** Changes the current voice used for speech synthesis */\n    changeVoice,\n    /** The currently selected voice for speech synthesis */\n    currentVoice,\n    /** Gets the list of available languages for speech synthesis */\n    getAvailableLanguages,\n  }\n}\n","import React from 'react'\nimport Icon from '#components/icons/icon'\nimport UI from '#components/ui'\nimport { FC } from 'react'\n\n/**\n * Props for the TextToSpeechControls component.\n * @interface TextToSpeechControlsProps\n */\ninterface TextToSpeechControlsProps {\n  /** Optional label for the controls */\n  label?: string | React.ReactNode\n  /** Indicates if the text-to-speech is currently speaking */\n  isSpeaking: boolean\n  /** Indicates if the text-to-speech is paused */\n  isPaused: boolean\n  /** Function to start speaking */\n  onSpeak: () => void\n  /** Function to pause speaking */\n  onPause: () => void\n  /** Function to resume speaking */\n  onResume: () => void\n  /** Function to cancel speaking */\n  onCancel: () => void\n}\n\n/**\n * TTSButtonComponent props\n * @interface TTSButtonComponentProps\n */\ninterface TTSButtonComponentProps {\n  /** The content of the button */\n  children: React.ReactNode\n  /** Function to call when the button is clicked */\n  onClick: () => void\n}\n\n/**\n * TTSButtonComponent is a reusable button component for text-to-speech controls.\n * @param {TTSButtonComponentProps} props - The component props\n * @returns {React.ReactElement} The rendered button\n */\nexport const TTSButtonComponent: React.FC<TTSButtonComponentProps> = ({\n  children,\n  onClick,\n}) => {\n  return (\n    <UI\n      as=\"button\"\n      type=\"button\"\n      className=\"tts-border\"\n      data-btn=\"sm text pill\"\n      onClick={onClick}\n    >\n      {children}\n    </UI>\n  )\n}\n\nexport const TTSButton = React.memo(TTSButtonComponent)\n\n/**\n * TextToSpeechControlsComponent interface extends FC<TextToSpeechControlsProps>\n * and includes a TTSButton property.\n * @interface TextToSpeechControlsComponent\n * @extends {FC<TextToSpeechControlsProps>}\n */\ninterface TextToSpeechControlsComponent extends FC<TextToSpeechControlsProps> {\n  /** The TTSButton component used within TextToSpeechControls */\n  TTSButton: typeof TTSButton\n}\n\n/**\n * TextToSpeechControls component provides a user interface for controlling text-to-speech functionality.\n * @param {TextToSpeechControlsProps} props - The component props\n * @returns {React.ReactElement} The rendered TextToSpeechControls component\n */\nconst TextToSpeechControls: TextToSpeechControlsComponent = ({\n  label,\n  isSpeaking,\n  isPaused,\n  onSpeak,\n  onPause,\n  onResume,\n  onCancel,\n}) => {\n  const iconSize = 16\n\n  return (\n    <UI as=\"div\" data-tts>\n      {label && <p>{label}</p>}\n      {!isSpeaking && (\n        <TTSButton aria-label=\"Speak\" onClick={onSpeak}>\n          <Icon.PlaySolid size={iconSize} />\n        </TTSButton>\n      )}\n      {isSpeaking && !isPaused && (\n        <TTSButton aria-label=\"Pause\" onClick={onPause}>\n          <Icon.PauseSolid size={iconSize} />\n        </TTSButton>\n      )}\n      {isPaused && (\n        <TTSButton aria-label=\"Resume\" onClick={onResume}>\n          <Icon.ResumeSolid size={iconSize} />\n        </TTSButton>\n      )}\n      <TTSButton aria-label=\"Stop\" onClick={onCancel}>\n        <Icon.StopSolid size={iconSize} />\n      </TTSButton>\n    </UI>\n  )\n}\n\nTextToSpeechControls.displayName = 'TextToSpeechControls'\nTextToSpeechControls.TTSButton = TTSButton\n\nexport default TextToSpeechControls\n","import UI from '../ui'\nimport React, { ReactNode } from 'react'\n\ntype ComponentProps = React.ComponentProps<typeof UI>\n\n/**\n * Renders children elements without any wrapping component.\n * Can be used as a placeholder when no semantic landmark is needed.\n */\nexport const Landmarks = (children?: React.FC) => <>{children}</>\n\ntype HeaderProps = {\n  headerBackground?: ReactNode\n} & ComponentProps\n/**\n * Header component.\n *\n * Renders a header landmark with a section child.\n *\n * @param children - The content to render inside the header.\n * @param styles - Optional styles object.\n * @param props - Other props.\n */\nexport const Header = ({\n  id,\n  children,\n  headerBackground,\n  styles,\n  classes,\n  ...props\n}: HeaderProps) => {\n  return (\n    <UI as=\"header\" id={id} styles={styles} className={classes} {...props}>\n      {headerBackground}\n      <UI as=\"section\">{children}</UI>\n    </UI>\n  )\n}\n\n/**\n * Main component.\n *\n * Renders a main landmark.\n *\n * @param children - The content to render inside the main element.\n * @param styles - Optional styles object.\n * @param props - Other props.\n */\nexport const Main = ({\n  id,\n  children,\n  styles,\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"main\" id={id} styles={styles} {...props} className={classes}>\n      {children}\n    </UI>\n  )\n}\n\n/**\n * Footer component that renders a footer element with a section element inside.\n * @param {ReactNode} children - Child elements to render inside the section element.\n * @param styles - CSS styles to apply to the footer element.\n * @param props - Additional props to pass to the footer element.\n * @returns A React component that renders a footer element with a section element inside.\n */\nexport const Footer = ({\n  id,\n  classes,\n  children,\n  styles = {},\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"footer\" id={id} className={classes} styles={styles} {...props}>\n      <UI as=\"section\">{children || 'Copyright © 2022'}</UI>\n    </UI>\n  )\n}\n\nexport const Aside = ({\n  id,\n  children,\n  styles = {},\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"aside\" id={id} styles={styles} className={classes} {...props}>\n      <UI as=\"section\">{children}</UI>\n    </UI>\n  )\n}\n\n/**\n * Section component that renders a section element.\n *\n * @param children - Child elements to render inside the section.\n * @param styles - CSS styles to apply to the section.\n * @param props - Other props.\n */\nexport const Section = ({\n  id,\n  children,\n  styles,\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"section\" id={id} styles={styles} className={classes} {...props}>\n      {children}\n    </UI>\n  )\n}\n\n/**\n * Article component renders an HTML <article> element.\n *\n * @param children - Child elements to render inside the article.\n * @param styles - CSS styles to apply to the article.\n * @param props - Additional props to pass to the article element.\n */\nexport const Article = ({\n  id,\n  children,\n\n  styles,\n  classes,\n  ...props\n}: ComponentProps) => {\n  return (\n    <UI as=\"article\" id={id} styles={styles} className={classes} {...props}>\n      {children}\n    </UI>\n  )\n}\n\nexport default Landmarks\n\nLandmarks.displayName = 'Landmarks'\nLandmarks.Header = Header\nLandmarks.Main = Main\nLandmarks.Footer = Footer\nLandmarks.Aside = Aside\nLandmarks.Section = Section\nLandmarks.Article = Article\n","import UI from '#components/ui'\nimport React from 'react'\n\n/**\n * Props for the Badge component\n *\n * @property {React.ReactNode} children - Content to display inside the badge (typically numbers or short text)\n * @property {string} [id] - Optional HTML id attribute for the badge element\n * @property {React.CSSProperties} [styles] - Inline styles to apply to the badge\n * @property {string} [classes] - CSS class names to apply to the badge\n * @property {'rounded'} [variant] - Visual variant of the badge. Use 'rounded' for circular badges (fixed size with ellipsis for overflow)\n * @property {string} [aria-label] - Accessible label for screen readers. Required for icon-only or number-only badges\n * @property {'status' | 'note'} [role] - ARIA role for the badge. Defaults to 'status' for dynamic content\n */\nexport type BadgeProps = {\n  /**\n   * Content to display inside the badge (typically numbers or short text)\n   */\n  children?: React.ReactNode\n  /**\n   * Visual variant of the badge\n   * - 'rounded': Circular badge style\n   */\n  variant?: 'rounded'\n} & React.ComponentProps<typeof UI>\n\n/**\n * Badge - A small label component for displaying status, counts, or notifications\n *\n * The Badge component is used to display supplementary information alongside other content,\n * such as notification counts, status indicators, or labels. It renders as a semantic `<sup>`\n * element with a nested `<span>` required for the component's styling architecture.\n *\n * ## Styling Architecture\n *\n * The Badge uses a nested structure (`<sup><span>content</span></sup>`) which is required\n * for the SCSS styling system. The outer `<sup>` element provides positioning context,\n * while the inner `<span>` receives the visual styling (background, padding, border-radius).\n *\n * ## Rounded Variant Behavior\n *\n * The `rounded` variant creates a perfect circular badge with fixed dimensions (1.5625rem).\n * Content that exceeds the available space will be truncated with an ellipsis (...).\n * **Best practice**: Format large numbers yourself (e.g., pass \"99+\" instead of \"999\").\n *\n * ## Accessibility Considerations\n *\n * - **Semantic HTML**: Uses `<sup>` (superscript) element for proper positioning context\n * - **ARIA Role**: Defaults to `role=\"status\"` for dynamic badges (e.g., unread counts)\n * - **Accessible Names**: For icon-only or number-only badges, provide an `aria-label`\n *   to give context (e.g., \"3 unread messages\" instead of just \"3\")\n * - **Live Regions**: The `role=\"status\"` makes badges announce updates to screen readers\n *\n * @param {BadgeProps} props - Component props\n * @returns {React.ReactElement} A Badge component\n *\n * @example\n * // Basic badge with notification count\n * <p>\n *   Messages\n *   <Badge aria-label=\"3 unread messages\">3</Badge>\n * </p>\n *\n * @example\n * // Rounded badge variant (perfect circle)\n * <p>\n *   Notifications\n *   <Badge variant=\"rounded\" aria-label=\"99 or more notifications\">99+</Badge>\n * </p>\n *\n * @example\n * // Status badge with custom styling\n * <p>\n *   Active Users\n *   <Badge styles={{ backgroundColor: 'green', color: 'white' }}>21</Badge>\n * </p>\n *\n * @example\n * // ✅ GOOD: Accessible badge with descriptive label and formatted content\n * <Badge variant=\"rounded\" aria-label=\"12 items in cart\">12</Badge>\n *\n * @example\n * // ✅ GOOD: Large numbers formatted by developer\n * <Badge variant=\"rounded\" aria-label=\"More than 99 notifications\">99+</Badge>\n *\n * @example\n * // ❌ BAD: Number-only badge without context for screen readers\n * <Badge>12</Badge>\n */\nexport const Badge = ({ id, styles, classes, children, variant, ...props }: BadgeProps) => {\n  // Build data-badge attribute for variant styling\n  const dataBadge = variant ? variant : undefined\n\n  return (\n    <UI\n      as=\"sup\"\n      id={id}\n      styles={styles}\n      className={classes}\n      data-badge={dataBadge}\n      role=\"status\"\n      {...props}\n    >\n      <UI as=\"span\">{children}</UI>\n    </UI>\n  )\n}\n\nBadge.displayName = 'Badge'\nexport default Badge\n","import React from 'react'\nimport UI from '#components/ui'\nimport type { TagProps, TagVariant } from './tag.types'\n\n/**\n * Tag - A small inline label component for displaying status, versions, or environment indicators\n *\n * The Tag component is used to highlight supplementary information such as release stages\n * (alpha, beta, stable), environment indicators (production), or version labels. It renders\n * as either a `<span>` (inline) or `<p>` (block) element with semantic ARIA roles.\n *\n * ## Design Philosophy\n *\n * Tags serve as visual and semantic indicators that:\n * - Communicate the state or stage of features, releases, or environments\n * - Provide quick visual scanning through color-coded variants\n * - Maintain accessibility through proper ARIA roles and labels\n *\n * ## Styling Architecture\n *\n * The Tag component uses CSS custom properties (CSS variables) for theming and styling,\n * allowing for easy customization through the `data-tag` attribute. Each variant\n * (alpha, beta, stable, production) applies predefined color schemes defined in SCSS.\n *\n * ## Accessibility Considerations (WCAG 2.1 AA Compliance)\n *\n * - **Semantic Roles**: Uses `role=\"note\"` for static tags or `role=\"status\"` for dynamic content\n *   - `role=\"note\"`: Read once by screen readers, suitable for static labels (default)\n *   - `role=\"status\"`: Announces updates to screen readers, use for changing status indicators\n * - **Color Independence**: Don't rely solely on color to convey meaning - include text labels\n * - **Text Alternatives**: For icon-only tags, provide `aria-label` for screen reader context\n * - **Contrast Ratios**: All variants meet WCAG AA contrast requirements (4.5:1 for normal text)\n * - **Live Regions**: When using `role=\"status\"`, tag becomes a live region for accessibility\n *\n * ## When to Use Each Role\n *\n * **Use `role=\"note\"` (default) when:**\n * - Displaying static version numbers (e.g., \"v2.1.0\")\n * - Showing fixed environment indicators (e.g., \"Beta Feature\")\n * - Labeling unchanging content categories\n *\n * **Use `role=\"status\"` when:**\n * - Indicating real-time status that may change (e.g., \"Processing\" → \"Complete\")\n * - Displaying live build/deployment states\n * - Showing dynamic feature flags that toggle\n *\n * @param {TagProps} props - Component props\n * @returns {React.ReactElement} A Tag component\n *\n * @example\n * // Basic tag with beta variant (default inline span)\n * <Tag variant=\"beta\">Beta</Tag>\n *\n * @example\n * // Production environment indicator as block element\n * <Tag elm=\"p\" variant=\"production\">Production Environment</Tag>\n *\n * @example\n * // Dynamic status tag with live updates\n * <Tag role=\"status\" variant=\"stable\">\n *   {isDeployed ? 'Deployed' : 'Deploying...'}\n * </Tag>\n *\n * @example\n * // Tag with custom styling and accessibility label\n * <Tag\n *   variant=\"alpha\"\n *   aria-label=\"Alpha version - may contain bugs\"\n *   styles={{ fontSize: '0.75rem' }}\n * >\n *   Alpha\n * </Tag>\n *\n * @example\n * // ✅ GOOD: Clear text content with variant for visual enhancement\n * <Tag variant=\"stable\">v2.0 Stable</Tag>\n *\n * @example\n * // ✅ GOOD: Dynamic status with proper role\n * <Tag role=\"status\" variant=\"production\">{deploymentStatus}</Tag>\n *\n * @example\n * // ✅ GOOD: Accessible tag with descriptive label\n * <Tag variant=\"beta\" aria-label=\"Beta feature - feedback welcome\">\n *   Beta\n * </Tag>\n *\n * @example\n * // ❌ BAD: Relying only on color without text\n * <Tag variant=\"production\" aria-label=\"Production\" />\n *\n * @example\n * // ❌ BAD: Using status role for static content\n * <Tag role=\"status\" variant=\"stable\">v1.0</Tag>\n */\nexport const Tag = ({\n  elm = 'span',\n  role = 'note',\n  variant,\n  children,\n  styles,\n  ...props\n}: TagProps) => {\n  // Map variant to data-tag attribute for SCSS styling\n  const dataTag = variant ? variant : undefined\n\n  return (\n    <UI\n      as={elm}\n      role={role}\n      data-tag={dataTag}\n      styles={styles}\n      {...props}\n    >\n      {children}\n    </UI>\n  )\n}\n\nTag.displayName = 'Tag'\nexport default Tag\nexport type { TagProps, TagVariant }\n","import UI from \"#components/ui\";\nimport React, { useCallback } from \"react\";\nimport type { DetailsProps } from \"./details.types\";\n\n/**\n * Details - A progressive disclosure component using native HTML `<details>` element.\n *\n * This component wraps the native `<details>` and `<summary>` elements to provide\n * an accessible, semantic way to show and hide content. It supports accordion behavior\n * through the `name` attribute and includes proper keyboard navigation out of the box.\n *\n * ## Key Features:\n * - **Semantic HTML**: Uses native `<details>` for built-in accessibility\n * - **Keyboard Support**: Space/Enter to toggle, fully accessible by default\n * - **Accordion Mode**: Group multiple details with `name` for exclusive expansion\n * - **Customizable**: Supports icons, custom styles, and event handlers\n *\n * ## Accessibility:\n * - ✅ WCAG 2.1 AA compliant using semantic HTML\n * - ✅ Native keyboard support (Space, Enter)\n * - ✅ Screen reader compatible (announced as \"disclosure\" or \"expandable\")\n * - ✅ Focus indicators automatically applied via CSS\n * - ✅ `aria-expanded` managed automatically by browser\n *\n * @example\n * ```tsx\n * // Basic usage\n * <Details summary=\"Click to expand\">\n *   <p>Hidden content here</p>\n * </Details>\n * ```\n *\n * @example\n * ```tsx\n * // With icon and custom styling\n * <Details\n *   summary=\"Shipping Information\"\n *   icon={<ChevronDownIcon />}\n *   classes=\"custom-details\"\n *   onToggle={(e) => console.log('Open:', e.currentTarget.open)}\n * >\n *   <p>Ships within 2-3 business days</p>\n * </Details>\n * ```\n *\n * @example\n * ```tsx\n * // Accordion mode - only one open at a time\n * <Details name=\"faq\" summary=\"Question 1\">Answer 1</Details>\n * <Details name=\"faq\" summary=\"Question 2\">Answer 2</Details>\n * <Details name=\"faq\" summary=\"Question 3\">Answer 3</Details>\n * ```\n */\nexport const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(\n  (\n    {\n      summary,\n      icon,\n      styles,\n      classes,\n      ariaLabel,\n      name,\n      open,\n      onPointerDown,\n      onToggle,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // Memoize callbacks to prevent unnecessary re-renders of child components\n    const handlePointerDown = useCallback(\n      (e: React.PointerEvent<HTMLElement>) => {\n        onPointerDown?.(e as React.PointerEvent<HTMLDetailsElement>);\n      },\n      [onPointerDown]\n    );\n\n    const handleToggle = useCallback(\n      (e: React.SyntheticEvent<HTMLDetailsElement>) => {\n        onToggle?.(e);\n      },\n      [onToggle]\n    );\n\n    return (\n      <UI\n        as=\"details\"\n        styles={styles}\n        classes={classes}\n        onToggle={handleToggle}\n        ref={ref}\n        open={open}\n        aria-label={ariaLabel}\n        name={name}\n        {...props}\n      >\n        <UI as=\"summary\" onPointerDown={handlePointerDown}>\n          {icon}\n          {summary}\n        </UI>\n        <UI as=\"section\">{children}</UI>\n      </UI>\n    );\n  }\n);\n\nDetails.displayName = \"Details\";\n\nexport default Details;\n"]}

package/libs/link-5192f411.d.ts

@@ -0,0 +1,323 @@
+import React from 'react';
+import { U as UI } from './ui-d01b50d4.js';
+
+/**
+ * Props for the Link component.
+ *
+ * The Link component renders accessible anchor elements with enhanced security,
+ * styling variants, and WCAG 2.1 AA compliance. It supports both traditional
+ * text links and button-styled links for call-to-action scenarios.
+ *
+ * ## Accessibility Considerations
+ *
+ * - External links automatically include `rel="noopener noreferrer"` for security
+ * - Links should have descriptive text or `aria-label` for screen readers
+ * - Focus indicators must meet WCAG 2.4.7 contrast requirements (3:1 minimum)
+ * - Button-styled links maintain semantic `<a>` element for proper navigation
+ *
+ * @example
+ * ```tsx
+ * // Basic link
+ * <Link href="/about">About Us</Link>
+ *
+ * // External link with prefetch
+ * <Link href="https://example.com" target="_blank" prefetch>
+ *   Visit Example
+ * </Link>
+ *
+ * // Button-styled link
+ * <Link href="/signup" btnStyle="primary">
+ *   <b>Sign Up Now</b>
+ * </Link>
+ * ```
+ */
+type LinkProps = {
+    /**
+     * The URL that the hyperlink points to.
+     * Can be relative or absolute, internal or external.
+     *
+     * @example
+     * ```tsx
+     * href="/products"
+     * href="https://example.com"
+     * href="mailto:hello@example.com"
+     * href="tel:+1234567890"
+     * ```
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL.
+     *
+     * - `_self` (default): Current browsing context
+     * - `_blank`: New tab/window (automatically adds security attributes)
+     * - `_parent`: Parent browsing context
+     * - `_top`: Top-level browsing context
+     *
+     * Note: When `target="_blank"`, `rel="noopener noreferrer"` is automatically
+     * added for security unless explicitly overridden.
+     *
+     * @example
+     * ```tsx
+     * target="_blank" // Opens in new tab with security
+     * ```
+     */
+    target?: string;
+    /**
+     * Relationship between current document and linked URL.
+     *
+     * Common values:
+     * - `noopener`: Prevents window.opener access (security)
+     * - `noreferrer`: Prevents referrer header (privacy)
+     * - `nofollow`: Hints search engines not to follow (SEO)
+     * - `prefetch`: Hints to prefetch the resource (performance)
+     *
+     * Note: For `target="_blank"`, this component automatically merges
+     * `noopener noreferrer` with any user-provided values for security.
+     *
+     * @example
+     * ```tsx
+     * rel="nofollow noopener"
+     * rel="author"
+     * ```
+     */
+    rel?: string;
+    /**
+     * Content to display inside the link.
+     *
+     * For accessibility, ensure link text is descriptive and meaningful.
+     * Avoid generic text like "click here" or "read more" without context.
+     *
+     * @example
+     * ```tsx
+     * // ✅ Good: Descriptive link text
+     * <Link href="/products">View all products</Link>
+     *
+     * // ❌ Bad: Generic link text without context
+     * <Link href="/products">Click here</Link>
+     *
+     * // ✅ Good: Icon with accessible label
+     * <Link href="/home" aria-label="Return to homepage">
+     *   <HomeIcon aria-hidden="true" />
+     * </Link>
+     * ```
+     */
+    children: React.ReactNode;
+    /**
+     * Inline CSS styles to apply to the link element.
+     * Can be used to override CSS custom properties.
+     *
+     * @example
+     * ```tsx
+     * styles={{
+     *   '--link-color': '#ff0000',
+     *   '--link-decoration': 'underline',
+     * }}
+     * ```
+     */
+    styles?: React.CSSProperties;
+    /**
+     * Hints to the browser to prefetch the linked resource.
+     *
+     * When `true` and `target="_blank"`, adds `rel="prefetch"` along with
+     * security attributes. This can improve perceived performance but should
+     * be used judiciously as it consumes bandwidth.
+     *
+     * Note: Browser support varies. Modern browsers may ignore this hint.
+     *
+     * @default false
+     * @example
+     * ```tsx
+     * <Link href="/next-page" prefetch>Next Page</Link>
+     * ```
+     */
+    prefetch?: boolean;
+    /**
+     * Applies button-like styling to the link.
+     *
+     * When set, the link renders with button styling including padding,
+     * borders, and hover effects while maintaining semantic anchor behavior.
+     *
+     * Common values:
+     * - `"btn"`: Standard button styling
+     * - `"pill"`: Rounded pill button styling
+     *
+     * Alternative: Wrap children in `<b>` or `<i>` tags for automatic styling:
+     * - `<b>`: Applies button styling
+     * - `<i>`: Applies pill styling
+     *
+     * @example
+     * ```tsx
+     * // Using btnStyle prop
+     * <Link href="/signup" btnStyle="btn">Sign Up</Link>
+     *
+     * // Using child wrapper (automatic detection)
+     * <Link href="/signup"><b>Sign Up</b></Link>
+     * <Link href="/signup"><i>Pill Button</i></Link>
+     * ```
+     */
+    btnStyle?: string;
+    /**
+     * Event handler called when the link is clicked or activated.
+     *
+     * **Recommended for most use cases**, especially analytics and tracking.
+     * This event fires for:
+     * - Mouse clicks
+     * - Touch/tap interactions
+     * - Keyboard activation (Enter key)
+     * - Assistive technology activation
+     *
+     * Use `onClick` when you need to track ALL user activations, including
+     * keyboard users. This ensures full accessibility coverage.
+     *
+     * @param event - The mouse event
+     * @example
+     * ```tsx
+     * // ✅ RECOMMENDED: onClick tracks all activation methods
+     * <Link
+     *   href="/products"
+     *   onClick={(e) => {
+     *     trackEvent('link_click', { href: '/products' });
+     *   }}
+     * >
+     *   Products
+     * </Link>
+     * ```
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * Event handler called when a pointer device button is pressed on the link.
+     *
+     * Use this for specific pointer interactions like:
+     * - Drag-and-drop detection
+     * - Touch gesture recognition
+     * - Distinguishing input types (mouse vs touch vs pen)
+     * - Providing early visual feedback before click completes
+     *
+     * **⚠️ Accessibility Note**: Unlike `onClick`, this does NOT fire for
+     * keyboard activation (Enter key). If you need to track all user interactions
+     * including keyboard users, use `onClick` instead.
+     *
+     * @param event - The pointer event
+     * @example
+     * ```tsx
+     * // Use onPointerDown for pointer-specific interactions
+     * <Link
+     *   href="/products"
+     *   onPointerDown={(e) => {
+     *     // Distinguish between mouse (2), touch (5), and pen (3)
+     *     console.log('Pointer type:', e.pointerType);
+     *   }}
+     * >
+     *   Products
+     * </Link>
+     * ```
+     *
+     * @example
+     * ```tsx
+     * // ✅ Use both handlers together for comprehensive tracking
+     * <Link
+     *   href="/products"
+     *   onClick={(e) => trackAllActivations(e)}
+     *   onPointerDown={(e) => provideFeedback(e)}
+     * >
+     *   Products
+     * </Link>
+     * ```
+     */
+    onPointerDown?: (event: React.PointerEvent<HTMLAnchorElement>) => void;
+} & React.ComponentProps<typeof UI> & React.ComponentPropsWithoutRef<"a">;
+
+/**
+ * Link - A semantic, accessible anchor component with enhanced security and styling.
+ *
+ * The Link component renders accessible `<a>` elements with automatic security
+ * attributes for external links, customizable styling variants, and full WCAG 2.1
+ * AA compliance. It supports traditional text links, button-styled links, and
+ * programmatic focus management via ref forwarding.
+ *
+ * ## Features
+ *
+ * - 🔒 **Automatic Security**: External links get `rel="noopener noreferrer"`
+ * - ♿ **WCAG 2.1 AA Compliant**: Accessible focus indicators and semantic HTML
+ * - 🎨 **Flexible Styling**: Text links, button links, and pill variants
+ * - ⚡ **Performance**: Optional prefetch hints for faster navigation
+ * - 🎯 **Ref Forwarding**: Direct DOM access for focus management and scroll
+ * - 🧪 **Type-Safe**: Full TypeScript support with comprehensive prop types
+ *
+ * ## Accessibility
+ *
+ * - ✅ Semantic `<a>` element for proper keyboard navigation
+ * - ✅ Focus indicators meet WCAG 2.4.7 (3:1 contrast ratio)
+ * - ✅ Screen readers announce link purpose and destination
+ * - ✅ External links include security attributes automatically
+ * - ✅ Supports `aria-label` for icon-only or ambiguous links
+ * - ✅ Ref forwarding enables skip-link patterns
+ *
+ * @example
+ * // Basic internal link
+ * <Link href="/about">About Us</Link>
+ *
+ * @example
+ * // External link with automatic security
+ * <Link href="https://example.com" target="_blank">
+ *   Visit Example
+ * </Link>
+ *
+ * @example
+ * // Button-styled call-to-action link
+ * <Link href="/signup">
+ *   <b>Get Started</b>
+ * </Link>
+ *
+ * @example
+ * // Icon-only link with accessible label
+ * <Link href="/settings" aria-label="Open settings">
+ *   <SettingsIcon aria-hidden="true" />
+ * </Link>
+ *
+ * @example
+ * // Analytics tracking with onClick (includes keyboard users)
+ * <Link
+ *   href="/products"
+ *   onClick={(e) => trackEvent('link_click', { href: '/products' })}
+ * >
+ *   Browse Products
+ * </Link>
+ *
+ * @example
+ * // Skip link with ref forwarding for focus management
+ * const mainRef = useRef<HTMLAnchorElement>(null);
+ *
+ * <Link ref={mainRef} href="#main-content">
+ *   Skip to main content
+ * </Link>
+ *
+ * @example
+ * // Custom styled link with CSS variables
+ * <Link
+ *   href="/products"
+ *   styles={{
+ *     '--link-color': '#0066cc',
+ *     '--link-decoration': 'underline',
+ *   }}
+ * >
+ *   Browse Products
+ * </Link>
+ *
+ * @example
+ * // ✅ GOOD: Descriptive link text
+ * <Link href="/docs/installation">
+ *   Read installation guide
+ * </Link>
+ *
+ * @example
+ * // ❌ BAD: Generic link text (poor for screen readers)
+ * <Link href="/docs/installation">
+ *   Click here
+ * </Link>
+ *
+ * @see {@link LinkProps} for complete prop documentation
+ */
+declare const Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+
+export { Link as L, LinkProps as a };