@fpkit/acss 0.5.12 → 0.5.13

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/tag/tag.tsx","../src/components/details/details.tsx"],"names":["React","Img","src","alt","width","height","styles","loading","placeholder","fetchpriority","decoding","imgLoaded","imgError","props","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","Tag","elm","role","Details","summary","icon","ariaLabel","name","open","onPointerDown","onToggle","ref","defaultStyles","onPointerDownCallback"],"mappings":"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","sourcesContent":["import UI from '../ui'\nimport React from 'react'\n/*\n * ImageProps interface\n *\n * Extends ComponentProps and defines additional props for the Img component.\n *\n * @property {string} [src] - The image source URL\n * @property {string} alt - Required alt text for image accessibility\n * @property {number} width - Required width of image\n * @property {number} [height] - Optional height of image\n * @property {\"eager\" | \"lazy\"} [loading=\"lazy\"] - Loading behavior\n * @property {string} [placeholder] - Fallback placeholder image\n * @property {\"high\" | \"low\"} [fetchpriority=\"low\"] - Image fetch priority\n * @property {\"sync\" | \"async\" | \"auto\"} [decoding=\"auto\"] - Decode setting\n * @property {function} [imgError] - Error callback\n * @property {function} [imgLoaded] - Loaded callback\n */\nexport type ImageProps = React.ComponentProps<'img'> &\n  React.ComponentProps<typeof UI>\n\n/*\n * Img component\n *\n * Renders an <img> element with custom props.\n *\n * @param {string} src - The image source URL.\n * @param {string} alt - The alt text for the image.\n * @param {number} [width=480] - The width of the image.\n * @param {number} [height] - The height of the image.\n * @param {Object} [styles] - Additional CSS styles to apply.\n * @param {boolean} [renderStyles=true] - Whether to render the default styles.\n * @param {\"eager\" | \"lazy\"} [loading=\"lazy\"] - The loading attribute.\n * @param {string} [placeholder] - A placeholder image URL.\n * @param {\"high\" | \"low\"} [fetchpriority=\"low\"] - The fetchpriority attribute.\n * @param {\"sync\" | \"async\" | \"auto\"} [decoding=\"auto\"] - The decoding attribute.\n * @param {function} [imgLoaded] - Callback when image loads successfully.\n * @param {function} [imgError] - Callback when image errors.\n *\n * @returns {JSX.Element} The Img component.\n */\nexport const Img = ({\n  src = '//',\n  alt,\n  width = 480,\n  height,\n  styles,\n  loading = 'lazy',\n  placeholder = `https://via.placeholder.com/${width}?text=PLACEHOLDER`,\n  fetchpriority = 'low',\n  decoding = 'auto',\n  imgLoaded,\n  imgError,\n  ...props\n}: ImageProps) => {\n  const handleImgError = (\n    e: React.SyntheticEvent<HTMLImageElement, Event>,\n  ): void => {\n    if (imgError) {\n      imgError?.(e)\n      return\n    }\n    if (e.currentTarget.src !== placeholder) {\n      e.currentTarget.src = placeholder\n    }\n  }\n\n  const handleImgLoad = (\n    e: React.SyntheticEvent<HTMLImageElement, Event>,\n  ): void => {\n    imgLoaded?.(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      onError={handleImgError}\n      onLoad={handleImgLoad}\n      fetchPriority={fetchpriority}\n      decoding={decoding}\n      {...props}\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 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 from \"react\";\n\ntype DetailsProps = {\n  /**\n   * The summary text shown for the details.\n   * Required.\n   */\n  summary: React.ReactNode;\n\n  /**\n   * The aria-label  element for accessibility.\n   */\n  ariaLabel: string;\n} & React.ComponentProps<\"details\"> &\n  Partial<React.ComponentProps<typeof UI>>;\n\n/**3\n * Details component props interface.\n *\n * @param {React.CSSProperties} [styles] - CSS styles object.\n * @param {string} [classes] - Classnames string.\n * @param {boolean} [open] - Whether the details is open.\n * @param {(e: React.PointerEvent<HTMLDetailsElement>) => void} [onToggle] - onToggle callback.\n * @param {(e: React.PointerEvent<HTMLDetailsElement>) => void} [onPointerDown] - onPointerDown callback.\n * @param {ReactNode} children - The content inside the details.\n * @param {string} [ariaLabel] - aria-label for accessibility.\n * @param {React.Ref<any>} [ref] - Ref object.\n * @param {Object} props - Other props.\n */\nexport const Details = ({\n  summary,\n  icon,\n  styles,\n  classes,\n  ariaLabel,\n  name,\n  open,\n  onPointerDown,\n  onToggle,\n  children,\n  ref,\n  ...props\n}: DetailsProps) => {\n  const defaultStyles: React.CSSProperties = { ...styles };\n\n  const onPointerDownCallback = (e: React.PointerEvent<HTMLDetailsElement>) => {\n    if (onPointerDown) onPointerDown?.(e);\n    if (onPointerDown) onPointerDown?.(e);\n  };\n\n  const onToggleCallback = (e: React.PointerEvent<HTMLDetailsElement>) => {\n    if (onToggle) onPointerDown?.(e);\n  };\n  return (\n    <UI\n      as=\"details\"\n      style={defaultStyles}\n      className={classes}\n      onToggle={onToggleCallback}\n      ref={ref}\n      open={open}\n      aria-label={ariaLabel || \"Details dropdown\"}\n      // aria-roledescription=\"detail accordion\"\n      name={name}\n      {...props}\n    >\n      <UI as=\"summary\" onPointerDown={onPointerDownCallback}>\n        {icon}\n        {summary}\n      </UI>\n      <UI as=\"section\">{children}</UI>\n    </UI>\n  );\n};\n\nexport default Details;\nDetails.displayName = \"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'\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"]}

package/libs/ui-645f95b5.d.ts

@@ -0,0 +1,285 @@
+import React__default from 'react';
+
+/**
+ * Extracts the appropriate ref type for a given element type.
+ *
+ * This utility type ensures that refs are properly typed based on the element
+ * being rendered. For example, a button element receives HTMLButtonElement ref.
+ *
+ * @typeParam C - The HTML element type (e.g., 'button', 'div', 'a')
+ * @example
+ * ```typescript
+ * type ButtonRef = PolymorphicRef<'button'>; // React.Ref<HTMLButtonElement>
+ * type DivRef = PolymorphicRef<'div'>; // React.Ref<HTMLDivElement>
+ * ```
+ */
+type PolymorphicRef<C extends React__default.ElementType> = React__default.ComponentPropsWithRef<C>["ref"];
+/**
+ * Defines the 'as' prop that determines which HTML element to render.
+ *
+ * This is the core prop that enables polymorphic behavior, allowing components
+ * to render as any valid React element type while maintaining type safety.
+ *
+ * @typeParam C - The HTML element type to render
+ * @example
+ * ```typescript
+ * <UI as="button">Click me</UI>
+ * <UI as="a" href="/home">Link</UI>
+ * ```
+ */
+type AsProp<C extends React__default.ElementType> = {
+    as?: C;
+};
+/**
+ * Identifies props that should be omitted to prevent type conflicts.
+ *
+ * This type ensures that our custom props don't conflict with native element
+ * props by calculating which keys need to be omitted from the native props.
+ *
+ * @typeParam C - The HTML element type
+ * @typeParam P - The custom props to merge
+ */
+type PropsToOmit<C extends React__default.ElementType, P> = keyof (AsProp<C> & P);
+/**
+ * Merges custom props with native element props while preventing conflicts.
+ *
+ * This creates a union of our custom props and the native props for the chosen
+ * element, omitting any conflicting keys to ensure type safety.
+ *
+ * @typeParam C - The HTML element type
+ * @typeParam Props - The custom props to add
+ * @example
+ * ```typescript
+ * // For a button, this merges custom props with HTMLButtonElement props
+ * type ButtonProps = PolymorphicComponentProp<'button', { variant?: string }>;
+ * ```
+ */
+type PolymorphicComponentProp<C extends React__default.ElementType, Props = {}> = React__default.PropsWithChildren<Props & AsProp<C>> & Omit<React__default.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+/**
+ * Extends PolymorphicComponentProp to include properly-typed ref support.
+ *
+ * This is the final type in the polymorphic type chain, adding ref forwarding
+ * with the correct ref type for the chosen element. The ref is properly typed
+ * to match the element being rendered, enabling focus management and direct
+ * DOM access for accessibility features like programmatic focus control.
+ *
+ * @typeParam C - The HTML element type
+ * @typeParam Props - The custom props to add
+ *
+ * @example
+ * ```typescript
+ * // Using ref for focus management (important for accessibility)
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ * useEffect(() => {
+ *   // Programmatically focus for keyboard navigation
+ *   buttonRef.current?.focus();
+ * }, []);
+ *
+ * return <UI as="button" ref={buttonRef}>Accessible Button</UI>;
+ * ```
+ */
+type PolymorphicComponentPropWithRef<C extends React__default.ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & {
+    ref?: PolymorphicRef<C>;
+};
+/**
+ * Props for the UI component, extending polymorphic props with style and class support.
+ *
+ * The UI component automatically forwards all ARIA attributes and native HTML props
+ * to the rendered element, ensuring full accessibility support. This includes:
+ * - `aria-label`, `aria-labelledby` - Accessible names for screen readers
+ * - `aria-describedby` - Additional descriptive text references
+ * - `aria-expanded`, `aria-controls` - Interactive widget states
+ * - `role` - Semantic role override when needed
+ * - All other ARIA attributes and HTML props
+ *
+ * @typeParam C - The HTML element type to render
+ * @property {boolean} [renderStyles] - Reserved for future use. Currently has no effect.
+ *   Styles are always rendered regardless of this prop value.
+ * @property {React.CSSProperties} [styles] - Inline styles to apply (overrides defaultStyles)
+ * @property {React.CSSProperties} [defaultStyles] - Base styles that can be overridden by styles prop
+ * @property {string} [classes] - CSS class names to apply to the element
+ * @property {string} [id] - HTML id attribute
+ * @property {React.ReactNode} [children] - Child elements to render
+ *
+ * @example
+ * ```typescript
+ * // All ARIA attributes are automatically forwarded
+ * <UI as="button" aria-label="Close dialog" aria-expanded={isOpen}>
+ *   <CloseIcon />
+ * </UI>
+ * ```
+ */
+type UIProps<C extends React__default.ElementType> = PolymorphicComponentPropWithRef<C, {
+    /** @deprecated Reserved for future use. Currently has no effect. Styles are always rendered. */
+    renderStyles?: boolean;
+    styles?: React__default.CSSProperties;
+    defaultStyles?: React__default.CSSProperties;
+    classes?: string;
+    id?: string;
+    children?: React__default.ReactNode;
+}>;
+/**
+ * UI Component function signature.
+ *
+ * Defines the polymorphic component that can render as any HTML element while
+ * maintaining full TypeScript type safety for element-specific props.
+ *
+ * @typeParam C - The HTML element type to render (defaults to 'div')
+ * @param {UIProps<C>} props - Component props including 'as', styles, and native element props
+ * @returns {React.ReactElement} A React element of the specified type
+ * @example
+ * ```typescript
+ * <UI as="button" onClick={handler}>Button</UI>
+ * <UI as="a" href="/link">Link</UI>
+ * <UI>Default div</UI>
+ * ```
+ */
+type UIComponent = (<C extends React__default.ElementType = "div">(props: UIProps<C>) => React__default.ReactElement | any) & {
+    displayName?: string;
+};
+/**
+ * UI - A polymorphic React component that can render as any HTML element.
+ *
+ * The UI component is a foundational primitive used throughout fpkit to create
+ * flexible, type-safe components. It implements the polymorphic component pattern,
+ * allowing a single component to render as different HTML elements while maintaining
+ * full TypeScript type safety for element-specific props.
+ *
+ * ## Accessibility Considerations
+ *
+ * The UI component forwards all ARIA attributes and native HTML props, placing
+ * accessibility responsibility on the consumer. When creating interactive elements,
+ * you MUST ensure WCAG 2.1 AA compliance:
+ *
+ * - **Accessible Names**: All interactive elements need an accessible name via
+ *   `aria-label`, `aria-labelledby`, or visible text content
+ * - **Semantic HTML**: Prefer semantic elements (`button`, `a`, `nav`) over
+ *   generic containers (`div`, `span`) with ARIA roles when possible
+ * - **Focus Indicators**: Ensure focus indicators meet WCAG 2.4.7 (3:1 contrast)
+ * - **Keyboard Support**: Interactive elements must be keyboard accessible
+ *
+ * @typeParam C - The HTML element type to render (e.g., 'button', 'div', 'a')
+ *
+ * @param {C} [as='div'] - The HTML element type to render. Defaults to 'div'.
+ * @param {React.CSSProperties} [styles] - Inline styles to apply. Overrides defaultStyles.
+ * @param {string} [classes] - CSS class names to apply to the element.
+ * @param {React.CSSProperties} [defaultStyles] - Base styles that can be overridden by styles prop.
+ * @param {React.ReactNode} [children] - Child elements to render inside the component.
+ * @param {PolymorphicRef<C>} [ref] - Forwarded ref with proper typing for the element type.
+ * @param {boolean} [renderStyles] - Reserved for future use. Currently has no effect.
+ *
+ * @returns {React.ReactElement} A React element of the specified type with merged props.
+ *
+ * @example
+ * // Basic usage - renders as div
+ * <UI>Hello World</UI>
+ *
+ * @example
+ * // Polymorphic rendering - renders as button with type-safe props
+ * <UI as="button" onClick={handleClick} disabled>
+ *   Click me
+ * </UI>
+ *
+ * @example
+ * // ✅ GOOD: Accessible button with aria-label for icon-only button
+ * <UI as="button" aria-label="Close dialog" onClick={handleClose}>
+ *   <CloseIcon />
+ * </UI>
+ *
+ * @example
+ * // ✅ GOOD: Accessible link with descriptive text
+ * <UI as="a" href="/products">
+ *   View all products
+ * </UI>
+ *
+ * @example
+ * // ✅ GOOD: Interactive element with proper role and keyboard support
+ * <UI
+ *   as="div"
+ *   role="button"
+ *   tabIndex={0}
+ *   aria-label="Toggle menu"
+ *   onClick={handleToggle}
+ *   onKeyDown={(e) => e.key === 'Enter' && handleToggle()}
+ * >
+ *   Menu
+ * </UI>
+ *
+ * @example
+ * // ❌ BAD: Button without accessible name (screen readers can't identify it)
+ * <UI as="button" onClick={handleClose}>
+ *   <CloseIcon />
+ * </UI>
+ *
+ * @example
+ * // ❌ BAD: Non-semantic div with click handler (not keyboard accessible)
+ * <UI as="div" onClick={handleClick}>
+ *   Click me
+ * </UI>
+ *
+ * @example
+ * // ✅ GOOD: Custom focus indicator with WCAG 2.4.7 compliant contrast
+ * <UI
+ *   as="button"
+ *   styles={{
+ *     outline: '2px solid transparent',
+ *     outlineOffset: '2px',
+ *   }}
+ *   classes="focus:outline-blue-500"
+ * >
+ *   Accessible Button
+ * </UI>
+ *
+ * @example
+ * // Style merging - defaultStyles provide base, styles override
+ * <UI
+ *   as="span"
+ *   defaultStyles={{ padding: '0.5rem', color: 'blue' }}
+ *   styles={{ color: 'red' }}
+ * >
+ *   Red text with padding
+ * </UI>
+ *
+ * @example
+ * // Ref forwarding for focus management
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ * useEffect(() => {
+ *   // Programmatically focus for keyboard navigation
+ *   buttonRef.current?.focus();
+ * }, []);
+ * <UI as="button" ref={buttonRef}>Auto-focused Button</UI>
+ *
+ * @example
+ * // Building accessible higher-level components with TypeScript
+ * interface AccessibleButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+ *   variant?: 'primary' | 'secondary';
+ *   // Require either aria-label or children for accessibility
+ *   'aria-label'?: string;
+ *   children?: React.ReactNode;
+ * }
+ *
+ * const AccessibleButton = React.forwardRef<HTMLButtonElement, AccessibleButtonProps>(
+ *   ({ variant = 'primary', ...props }, ref) => {
+ *     // Runtime check: ensure accessible name is provided
+ *     if (!props['aria-label'] && !props.children) {
+ *       console.warn('AccessibleButton requires either aria-label or children');
+ *     }
+ *
+ *     return (
+ *       <UI
+ *         as="button"
+ *         ref={ref}
+ *         defaultStyles={{
+ *           padding: '0.5rem 1rem',
+ *           borderRadius: '0.25rem',
+ *           backgroundColor: variant === 'primary' ? '#007bff' : '#6c757d',
+ *         }}
+ *         {...props}
+ *       />
+ *     );
+ *   }
+ * );
+ */
+declare const UI: UIComponent;
+
+export { UI as U };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fpkit/acss",
   "description": "A lightweight React UI library for building modern and accessible components that leverage CSS custom properties for reactive Styles.",
   "private": false,
-  "version": "0.5.12",
+  "version": "0.5.13",
   "engines": {
     "node": ">=20.9.0",
     "npm": ">=8.0.0"
@@ -11,7 +11,6 @@
     "start": "run-p package:watch sass:watch",
     "dev": "vite --open",
     "build": "run-s package sass build:sass build:css",
-    "build:components": "tsup --config tsup.components.config.cjs",
     "package": "tsc && tsup --dts",
     "package:watch": "tsc && tsup --watch --dts",
     "build::css": "postcss ./libs/components/**/*.css --base libs/components/  --use autoprefixer -d ./libs/components/ --ext min.css",
@@ -82,86 +81,6 @@
       "require": "./libs/index.cjs",
       "default": "./libs/index.js"
     },
-    "./button": {
-      "import": "./libs/components/button.js",
-      "require": "./libs/components/button.cjs",
-      "default": "./libs/components/button.js"
-    },
-    "./card": {
-      "import": "./libs/components/card.js",
-      "require": "./libs/components/card.cjs",
-      "default": "./libs/components/card.js"
-    },
-    "./modal": {
-      "import": "./libs/components/modal.js",
-      "require": "./libs/components/modal.cjs",
-      "default": "./libs/components/modal.js"
-    },
-    "./input": {
-      "import": "./libs/components/input.js",
-      "require": "./libs/components/input.cjs",
-      "default": "./libs/components/input.js"
-    },
-    "./link": {
-      "import": "./libs/components/link.js",
-      "require": "./libs/components/link.cjs",
-      "default": "./libs/components/link.js"
-    },
-    "./list": {
-      "import": "./libs/components/list.js",
-      "require": "./libs/components/list.cjs",
-      "default": "./libs/components/list.js"
-    },
-    "./icon": {
-      "import": "./libs/components/icon.js",
-      "require": "./libs/components/icon.cjs",
-      "default": "./libs/components/icon.js"
-    },
-    "./table": {
-      "import": "./libs/components/table.js",
-      "require": "./libs/components/table.cjs",
-      "default": "./libs/components/table.js"
-    },
-    "./dialog": {
-      "import": "./libs/components/dialog.js",
-      "require": "./libs/components/dialog.cjs",
-      "default": "./libs/components/dialog.js"
-    },
-    "./nav": {
-      "import": "./libs/components/nav.js",
-      "require": "./libs/components/nav.cjs",
-      "default": "./libs/components/nav.js"
-    },
-    "./popover": {
-      "import": "./libs/components/popover.js",
-      "require": "./libs/components/popover.cjs",
-      "default": "./libs/components/popover.js"
-    },
-    "./text": {
-      "import": "./libs/components/text.js",
-      "require": "./libs/components/text.cjs",
-      "default": "./libs/components/text.js"
-    },
-    "./heading": {
-      "import": "./libs/components/heading.js",
-      "require": "./libs/components/heading.cjs",
-      "default": "./libs/components/heading.js"
-    },
-    "./breadcrumb": {
-      "import": "./libs/components/breadcrumb.js",
-      "require": "./libs/components/breadcrumb.cjs",
-      "default": "./libs/components/breadcrumb.js"
-    },
-    "./textarea": {
-      "import": "./libs/components/textarea.js",
-      "require": "./libs/components/textarea.cjs",
-      "default": "./libs/components/textarea.js"
-    },
-    "./field": {
-      "import": "./libs/components/field.js",
-      "require": "./libs/components/field.cjs",
-      "default": "./libs/components/field.js"
-    },
     "./hooks": {
       "import": "./libs/hooks.js",
       "require": "./libs/hooks.cjs",
@@ -208,5 +127,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d43bc984c7cb56b3b37ebb85f71d92b06a1a654f"
+  "gitHead": "00db2b908b9aa637e99c401861de87d43b7009d6"
 }