@gnome-ui/react 1.45.2 → 1.46.0

package/dist/components/AboutDialog/AboutDialog.cjs

@@ -1,2 +1,2 @@
-const e=require("../Dialog/dialogUtils.cjs"),t=require("./AboutDialog.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a={details:`Details`,credits:`Credits`,legal:`Legal`},o=({open:o,onClose:s,applicationName:c,applicationIcon:l,version:u,comments:d,developerName:f,website:p,websiteLabel:m,developers:h,designers:g,artists:_,copyright:v,licenseType:y,licenseText:b,links:x})=>{let S=(0,n.useRef)(null),C=(0,n.useId)(),w=(0,n.useRef)(null),T=e.useVisualViewport(),[E,D]=(0,n.useState)(`details`);(0,n.useEffect)(()=>{o?(w.current=document.activeElement,(S.current?.querySelector(e.FOCUSABLE))?.focus()):(w.current?.focus(),D(`details`))},[o]);let O=(0,n.useCallback)(t=>{if(t.key===`Escape`){t.preventDefault(),s?.();return}e.trapFocus(t,S)},[s]);if(!o)return null;let k=[`details`,!!(h?.length||g?.length||_?.length)&&`credits`,!!(v||y||b)&&`legal`].filter(Boolean),A=(0,i.jsx)(`div`,{className:t.default.backdrop,style:T,onClick:s,"aria-hidden":`true`,children:(0,i.jsxs)(`div`,{ref:S,role:`dialog`,"aria-modal":`true`,"aria-labelledby":C,className:t.default.dialog,onKeyDown:O,onClick:e=>e.stopPropagation(),children:[(0,i.jsxs)(`div`,{className:t.default.header,children:[l&&(0,i.jsx)(`div`,{className:t.default.icon,children:l}),(0,i.jsx)(`div`,{id:C,className:t.default.appName,children:c}),u&&(0,i.jsx)(`div`,{className:t.default.version,children:u})]}),k.length>1&&(0,i.jsx)(`div`,{className:t.default.tabBar,role:`tablist`,children:k.map(e=>(0,i.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":E===e,className:[t.default.tabBtn,E===e?t.default.tabBtnActive:null].filter(Boolean).join(` `),onClick:()=>D(e),children:a[e]},e))}),(0,i.jsxs)(`div`,{className:t.default.tabContent,children:[E===`details`&&(0,i.jsxs)(`div`,{className:t.default.section,children:[d&&(0,i.jsx)(`p`,{className:t.default.comments,children:d}),(f||p||x?.length)&&(0,i.jsxs)(`dl`,{className:t.default.infoList,children:[f&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`dt`,{className:t.default.infoLabel,children:`Developer`}),(0,i.jsx)(`dd`,{className:t.default.infoValue,children:f})]}),p&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`dt`,{className:t.default.infoLabel,children:`Website`}),(0,i.jsx)(`dd`,{className:t.default.infoValue,children:(0,i.jsx)(`a`,{href:p,target:`_blank`,rel:`noopener noreferrer`,className:t.default.link,children:m??p})})]}),x?.map(e=>(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`dt`,{className:t.default.infoLabel,children:e.label},`${e.label}-dt`),(0,i.jsx)(`dd`,{className:t.default.infoValue,children:(0,i.jsx)(`a`,{href:e.url,target:`_blank`,rel:`noopener noreferrer`,className:t.default.link,children:e.url})},`${e.label}-dd`)]}))]})]}),E===`credits`&&(0,i.jsx)(`div`,{className:t.default.section,children:[{heading:`Developers`,list:h},{heading:`Designers`,list:g},{heading:`Artists`,list:_}].filter(e=>e.list?.length).map(({heading:e,list:n})=>(0,i.jsxs)(`div`,{className:t.default.creditGroup,children:[(0,i.jsx)(`h4`,{className:t.default.creditTitle,children:e}),(0,i.jsx)(`ul`,{className:t.default.creditList,children:n?.map(e=>(0,i.jsx)(`li`,{className:t.default.creditItem,children:e},e))})]},e))}),E===`legal`&&(0,i.jsxs)(`div`,{className:t.default.section,children:[v&&(0,i.jsx)(`p`,{className:t.default.copyright,children:v}),y&&(0,i.jsx)(`p`,{className:t.default.licenseType,children:y}),b&&(0,i.jsx)(`pre`,{className:t.default.licenseText,children:b})]})]}),(0,i.jsx)(`div`,{className:t.default.footer,children:(0,i.jsx)(`button`,{type:`button`,className:[t.default.btn,t.default.btnDefault].join(` `),onClick:s,children:`Close`})})]})});return typeof document>`u`?A:(0,r.createPortal)(A,document.body)};exports.AboutDialog=o;
+const e=require("../Dialog/dialogUtils.cjs"),t=require("./AboutDialog.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a={details:`Details`,credits:`Credits`,legal:`Legal`},o=({open:o,onClose:s,applicationName:c,applicationIcon:l,version:u,comments:d,developerName:f,website:p,websiteLabel:m,developers:h,designers:g,artists:_,copyright:v,licenseType:y,licenseText:b,links:x})=>{let S=(0,n.useRef)(null),C=(0,n.useId)(),w=(0,n.useRef)(null),T=e.useVisualViewport(),[E,D]=(0,n.useState)(`details`);e.useBodyScrollLock(o),(0,n.useEffect)(()=>{o?(w.current=document.activeElement,(S.current?.querySelector(e.FOCUSABLE))?.focus()):(w.current?.focus(),D(`details`))},[o]);let O=(0,n.useCallback)(t=>{if(t.key===`Escape`){t.preventDefault(),s?.();return}e.trapFocus(t,S)},[s]);if(!o)return null;let k=[`details`,!!(h?.length||g?.length||_?.length)&&`credits`,!!(v||y||b)&&`legal`].filter(Boolean),A=(0,i.jsx)(`div`,{className:t.default.backdrop,style:T,onClick:s,children:(0,i.jsxs)(`div`,{ref:S,role:`dialog`,"aria-modal":`true`,"aria-labelledby":C,className:t.default.dialog,onKeyDown:O,onClick:e=>e.stopPropagation(),children:[(0,i.jsxs)(`div`,{className:t.default.header,children:[l&&(0,i.jsx)(`div`,{className:t.default.icon,children:l}),(0,i.jsx)(`div`,{id:C,className:t.default.appName,children:c}),u&&(0,i.jsx)(`div`,{className:t.default.version,children:u})]}),k.length>1&&(0,i.jsx)(`div`,{className:t.default.tabBar,role:`tablist`,children:k.map(e=>(0,i.jsx)(`button`,{type:`button`,role:`tab`,"aria-selected":E===e,className:[t.default.tabBtn,E===e?t.default.tabBtnActive:null].filter(Boolean).join(` `),onClick:()=>D(e),children:a[e]},e))}),(0,i.jsxs)(`div`,{className:t.default.tabContent,children:[E===`details`&&(0,i.jsxs)(`div`,{className:t.default.section,children:[d&&(0,i.jsx)(`p`,{className:t.default.comments,children:d}),(f||p||x?.length)&&(0,i.jsxs)(`dl`,{className:t.default.infoList,children:[f&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`dt`,{className:t.default.infoLabel,children:`Developer`}),(0,i.jsx)(`dd`,{className:t.default.infoValue,children:f})]}),p&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`dt`,{className:t.default.infoLabel,children:`Website`}),(0,i.jsx)(`dd`,{className:t.default.infoValue,children:(0,i.jsx)(`a`,{href:p,target:`_blank`,rel:`noopener noreferrer`,className:t.default.link,children:m??p})})]}),x?.map(e=>(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`dt`,{className:t.default.infoLabel,children:e.label},`${e.label}-dt`),(0,i.jsx)(`dd`,{className:t.default.infoValue,children:(0,i.jsx)(`a`,{href:e.url,target:`_blank`,rel:`noopener noreferrer`,className:t.default.link,children:e.url})},`${e.label}-dd`)]}))]})]}),E===`credits`&&(0,i.jsx)(`div`,{className:t.default.section,children:[{heading:`Developers`,list:h},{heading:`Designers`,list:g},{heading:`Artists`,list:_}].filter(e=>e.list?.length).map(({heading:e,list:n})=>(0,i.jsxs)(`div`,{className:t.default.creditGroup,children:[(0,i.jsx)(`h4`,{className:t.default.creditTitle,children:e}),(0,i.jsx)(`ul`,{className:t.default.creditList,children:n?.map(e=>(0,i.jsx)(`li`,{className:t.default.creditItem,children:e},e))})]},e))}),E===`legal`&&(0,i.jsxs)(`div`,{className:t.default.section,children:[v&&(0,i.jsx)(`p`,{className:t.default.copyright,children:v}),y&&(0,i.jsx)(`p`,{className:t.default.licenseType,children:y}),b&&(0,i.jsx)(`pre`,{className:t.default.licenseText,children:b})]})]}),(0,i.jsx)(`div`,{className:t.default.footer,children:(0,i.jsx)(`button`,{type:`button`,className:[t.default.btn,t.default.btnDefault].join(` `),onClick:s,children:`Close`})})]})});return typeof document>`u`?A:(0,r.createPortal)(A,document.body)};exports.AboutDialog=o;
 //# sourceMappingURL=AboutDialog.cjs.map

package/dist/components/AboutDialog/AboutDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AboutDialog.cjs","names":[],"sources":["../../../src/components/AboutDialog/AboutDialog.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { FOCUSABLE, trapFocus, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './AboutDialog.module.css';\n\nexport interface AboutDialogLink {\n  label: string;\n  url: string;\n}\n\nexport interface AboutDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called on Escape or close button click. */\n  onClose?: () => void;\n  /** Application name. */\n  applicationName: string;\n  /** Icon rendered above the app name. */\n  applicationIcon?: ReactNode;\n  /** Version string (e.g. `\"1.0.0\"`). */\n  version?: string;\n  /** One-sentence description. */\n  comments?: string;\n  /** Developer or organisation name. */\n  developerName?: string;\n  /** Application website URL. */\n  website?: string;\n  /** Label for the website link. Defaults to the URL. */\n  websiteLabel?: string;\n  /** Developer names shown in the Credits tab. */\n  developers?: string[];\n  /** Designer names shown in the Credits tab. */\n  designers?: string[];\n  /** Artist names shown in the Credits tab. */\n  artists?: string[];\n  /** Copyright notice (e.g. `\"© 2024 Jane Smith\"`). */\n  copyright?: string;\n  /** SPDX identifier or short name (e.g. `\"GPL-3.0\"`). */\n  licenseType?: string;\n  /** Full license text shown in the Legal tab. */\n  licenseText?: string;\n  /** Extra links shown in the Details section. */\n  links?: AboutDialogLink[];\n}\n\ntype AboutTab = 'details' | 'credits' | 'legal';\nconst ABOUT_TAB_LABEL: Record<AboutTab, string> = {\n  details: 'Details',\n  credits: 'Credits',\n  legal: 'Legal',\n};\n\n/**\n * Standard app info dialog with details, credits, and legal tabs.\n * Mirrors `AdwAboutDialog`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AboutDialog.html\n */\nexport const AboutDialog = ({\n  open,\n  onClose,\n  applicationName,\n  applicationIcon,\n  version,\n  comments,\n  developerName,\n  website,\n  websiteLabel,\n  developers,\n  designers,\n  artists,\n  copyright,\n  licenseType,\n  licenseText,\n  links,\n}: AboutDialogProps) => {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const [activeTab, setActiveTab] = useState<AboutTab>('details');\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n      setActiveTab('details');\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      trapFocus(e, dialogRef);\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const hasCredits = !!(developers?.length || designers?.length || artists?.length);\n  const hasLegal = !!(copyright || licenseType || licenseText);\n  const tabs = (\n    ['details', hasCredits && 'credits', hasLegal && 'legal'] as (AboutTab | false)[]\n  ).filter(Boolean) as AboutTab[];\n\n  const node = (\n    <div className={styles.backdrop} style={viewportStyle} onClick={onClose} aria-hidden=\"true\">\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className={styles.header}>\n          {applicationIcon && <div className={styles.icon}>{applicationIcon}</div>}\n          <div id={titleId} className={styles.appName}>\n            {applicationName}\n          </div>\n          {version && <div className={styles.version}>{version}</div>}\n        </div>\n\n        {tabs.length > 1 && (\n          <div className={styles.tabBar} role=\"tablist\">\n            {tabs.map((t) => (\n              <button\n                key={t}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={activeTab === t}\n                className={[styles.tabBtn, activeTab === t ? styles.tabBtnActive : null]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={() => setActiveTab(t)}\n              >\n                {ABOUT_TAB_LABEL[t]}\n              </button>\n            ))}\n          </div>\n        )}\n\n        <div className={styles.tabContent}>\n          {activeTab === 'details' && (\n            <div className={styles.section}>\n              {comments && <p className={styles.comments}>{comments}</p>}\n              {(developerName || website || links?.length) && (\n                <dl className={styles.infoList}>\n                  {developerName && (\n                    <>\n                      <dt className={styles.infoLabel}>Developer</dt>\n                      <dd className={styles.infoValue}>{developerName}</dd>\n                    </>\n                  )}\n                  {website && (\n                    <>\n                      <dt className={styles.infoLabel}>Website</dt>\n                      <dd className={styles.infoValue}>\n                        <a\n                          href={website}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className={styles.link}\n                        >\n                          {websiteLabel ?? website}\n                        </a>\n                      </dd>\n                    </>\n                  )}\n                  {links?.map((l) => (\n                    <>\n                      <dt key={`${l.label}-dt`} className={styles.infoLabel}>\n                        {l.label}\n                      </dt>\n                      <dd key={`${l.label}-dd`} className={styles.infoValue}>\n                        <a\n                          href={l.url}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className={styles.link}\n                        >\n                          {l.url}\n                        </a>\n                      </dd>\n                    </>\n                  ))}\n                </dl>\n              )}\n            </div>\n          )}\n\n          {activeTab === 'credits' && (\n            <div className={styles.section}>\n              {[\n                { heading: 'Developers', list: developers },\n                { heading: 'Designers', list: designers },\n                { heading: 'Artists', list: artists },\n              ]\n                .filter((g) => g.list?.length)\n                .map(({ heading, list }) => (\n                  <div key={heading} className={styles.creditGroup}>\n                    <h4 className={styles.creditTitle}>{heading}</h4>\n                    <ul className={styles.creditList}>\n                      {list?.map((name) => (\n                        <li key={name} className={styles.creditItem}>\n                          {name}\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n            </div>\n          )}\n\n          {activeTab === 'legal' && (\n            <div className={styles.section}>\n              {copyright && <p className={styles.copyright}>{copyright}</p>}\n              {licenseType && <p className={styles.licenseType}>{licenseType}</p>}\n              {licenseText && <pre className={styles.licenseText}>{licenseText}</pre>}\n            </div>\n          )}\n        </div>\n\n        <div className={styles.footer}>\n          <button\n            type=\"button\"\n            className={[styles.btn, styles.btnDefault].join(' ')}\n            onClick={onClose}\n          >\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"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"}
+{"version":3,"file":"AboutDialog.cjs","names":[],"sources":["../../../src/components/AboutDialog/AboutDialog.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { FOCUSABLE, trapFocus, useBodyScrollLock, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './AboutDialog.module.css';\n\nexport interface AboutDialogLink {\n  label: string;\n  url: string;\n}\n\nexport interface AboutDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called on Escape or close button click. */\n  onClose?: () => void;\n  /** Application name. */\n  applicationName: string;\n  /** Icon rendered above the app name. */\n  applicationIcon?: ReactNode;\n  /** Version string (e.g. `\"1.0.0\"`). */\n  version?: string;\n  /** One-sentence description. */\n  comments?: string;\n  /** Developer or organisation name. */\n  developerName?: string;\n  /** Application website URL. */\n  website?: string;\n  /** Label for the website link. Defaults to the URL. */\n  websiteLabel?: string;\n  /** Developer names shown in the Credits tab. */\n  developers?: string[];\n  /** Designer names shown in the Credits tab. */\n  designers?: string[];\n  /** Artist names shown in the Credits tab. */\n  artists?: string[];\n  /** Copyright notice (e.g. `\"© 2024 Jane Smith\"`). */\n  copyright?: string;\n  /** SPDX identifier or short name (e.g. `\"GPL-3.0\"`). */\n  licenseType?: string;\n  /** Full license text shown in the Legal tab. */\n  licenseText?: string;\n  /** Extra links shown in the Details section. */\n  links?: AboutDialogLink[];\n}\n\ntype AboutTab = 'details' | 'credits' | 'legal';\nconst ABOUT_TAB_LABEL: Record<AboutTab, string> = {\n  details: 'Details',\n  credits: 'Credits',\n  legal: 'Legal',\n};\n\n/**\n * Standard app info dialog with details, credits, and legal tabs.\n * Mirrors `AdwAboutDialog`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AboutDialog.html\n */\nexport const AboutDialog = ({\n  open,\n  onClose,\n  applicationName,\n  applicationIcon,\n  version,\n  comments,\n  developerName,\n  website,\n  websiteLabel,\n  developers,\n  designers,\n  artists,\n  copyright,\n  licenseType,\n  licenseText,\n  links,\n}: AboutDialogProps) => {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const [activeTab, setActiveTab] = useState<AboutTab>('details');\n\n  useBodyScrollLock(open);\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n      setActiveTab('details');\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      trapFocus(e, dialogRef);\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const hasCredits = !!(developers?.length || designers?.length || artists?.length);\n  const hasLegal = !!(copyright || licenseType || licenseText);\n  const tabs = (\n    ['details', hasCredits && 'credits', hasLegal && 'legal'] as (AboutTab | false)[]\n  ).filter(Boolean) as AboutTab[];\n\n  const node = (\n    <div className={styles.backdrop} style={viewportStyle} onClick={onClose}>\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className={styles.header}>\n          {applicationIcon && <div className={styles.icon}>{applicationIcon}</div>}\n          <div id={titleId} className={styles.appName}>\n            {applicationName}\n          </div>\n          {version && <div className={styles.version}>{version}</div>}\n        </div>\n\n        {tabs.length > 1 && (\n          <div className={styles.tabBar} role=\"tablist\">\n            {tabs.map((t) => (\n              <button\n                key={t}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={activeTab === t}\n                className={[styles.tabBtn, activeTab === t ? styles.tabBtnActive : null]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={() => setActiveTab(t)}\n              >\n                {ABOUT_TAB_LABEL[t]}\n              </button>\n            ))}\n          </div>\n        )}\n\n        <div className={styles.tabContent}>\n          {activeTab === 'details' && (\n            <div className={styles.section}>\n              {comments && <p className={styles.comments}>{comments}</p>}\n              {(developerName || website || links?.length) && (\n                <dl className={styles.infoList}>\n                  {developerName && (\n                    <>\n                      <dt className={styles.infoLabel}>Developer</dt>\n                      <dd className={styles.infoValue}>{developerName}</dd>\n                    </>\n                  )}\n                  {website && (\n                    <>\n                      <dt className={styles.infoLabel}>Website</dt>\n                      <dd className={styles.infoValue}>\n                        <a\n                          href={website}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className={styles.link}\n                        >\n                          {websiteLabel ?? website}\n                        </a>\n                      </dd>\n                    </>\n                  )}\n                  {links?.map((l) => (\n                    <>\n                      <dt key={`${l.label}-dt`} className={styles.infoLabel}>\n                        {l.label}\n                      </dt>\n                      <dd key={`${l.label}-dd`} className={styles.infoValue}>\n                        <a\n                          href={l.url}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className={styles.link}\n                        >\n                          {l.url}\n                        </a>\n                      </dd>\n                    </>\n                  ))}\n                </dl>\n              )}\n            </div>\n          )}\n\n          {activeTab === 'credits' && (\n            <div className={styles.section}>\n              {[\n                { heading: 'Developers', list: developers },\n                { heading: 'Designers', list: designers },\n                { heading: 'Artists', list: artists },\n              ]\n                .filter((g) => g.list?.length)\n                .map(({ heading, list }) => (\n                  <div key={heading} className={styles.creditGroup}>\n                    <h4 className={styles.creditTitle}>{heading}</h4>\n                    <ul className={styles.creditList}>\n                      {list?.map((name) => (\n                        <li key={name} className={styles.creditItem}>\n                          {name}\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n            </div>\n          )}\n\n          {activeTab === 'legal' && (\n            <div className={styles.section}>\n              {copyright && <p className={styles.copyright}>{copyright}</p>}\n              {licenseType && <p className={styles.licenseType}>{licenseType}</p>}\n              {licenseText && <pre className={styles.licenseText}>{licenseText}</pre>}\n            </div>\n          )}\n        </div>\n\n        <div className={styles.footer}>\n          <button\n            type=\"button\"\n            className={[styles.btn, styles.btnDefault].join(' ')}\n            onClick={onClose}\n          >\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"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"}

package/dist/components/AboutDialog/AboutDialog.js

@@ -1,184 +1,183 @@
-import { FOCUSABLE as e, trapFocus as t, useVisualViewport as n } from "../Dialog/dialogUtils.js";
-import r from "./AboutDialog.module.css.js";
-import { useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
-import { createPortal as l } from "react-dom";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { FOCUSABLE as e, trapFocus as t, useBodyScrollLock as n, useVisualViewport as r } from "../Dialog/dialogUtils.js";
+import i from "./AboutDialog.module.css.js";
+import { useCallback as a, useEffect as o, useId as s, useRef as c, useState as l } from "react";
+import { createPortal as u } from "react-dom";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/components/AboutDialog/AboutDialog.tsx
-var p = {
+var m = {
 	details: "Details",
 	credits: "Credits",
 	legal: "Legal"
-}, m = ({ open: m, onClose: h, applicationName: g, applicationIcon: _, version: v, comments: y, developerName: b, website: x, websiteLabel: S, developers: C, designers: w, artists: T, copyright: E, licenseType: D, licenseText: O, links: k }) => {
-	let A = s(null), j = o(), M = s(null), N = n(), [P, F] = c("details");
-	a(() => {
-		m ? (M.current = document.activeElement, (A.current?.querySelector(e))?.focus()) : (M.current?.focus(), F("details"));
-	}, [m]);
-	let I = i((e) => {
+}, h = ({ open: h, onClose: g, applicationName: _, applicationIcon: v, version: y, comments: b, developerName: x, website: S, websiteLabel: C, developers: w, designers: T, artists: E, copyright: D, licenseType: O, licenseText: k, links: A }) => {
+	let j = c(null), M = s(), N = c(null), P = r(), [F, I] = l("details");
+	n(h), o(() => {
+		h ? (N.current = document.activeElement, (j.current?.querySelector(e))?.focus()) : (N.current?.focus(), I("details"));
+	}, [h]);
+	let L = a((e) => {
 		if (e.key === "Escape") {
-			e.preventDefault(), h?.();
+			e.preventDefault(), g?.();
 			return;
 		}
-		t(e, A);
-	}, [h]);
-	if (!m) return null;
-	let L = [
+		t(e, j);
+	}, [g]);
+	if (!h) return null;
+	let R = [
 		"details",
-		!!(C?.length || w?.length || T?.length) && "credits",
-		!!(E || D || O) && "legal"
-	].filter(Boolean), R = /* @__PURE__ */ d("div", {
-		className: r.backdrop,
-		style: N,
-		onClick: h,
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ f("div", {
-			ref: A,
+		!!(w?.length || T?.length || E?.length) && "credits",
+		!!(D || O || k) && "legal"
+	].filter(Boolean), z = /* @__PURE__ */ f("div", {
+		className: i.backdrop,
+		style: P,
+		onClick: g,
+		children: /* @__PURE__ */ p("div", {
+			ref: j,
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-labelledby": j,
-			className: r.dialog,
-			onKeyDown: I,
+			"aria-labelledby": M,
+			className: i.dialog,
+			onKeyDown: L,
 			onClick: (e) => e.stopPropagation(),
 			children: [
-				/* @__PURE__ */ f("div", {
-					className: r.header,
+				/* @__PURE__ */ p("div", {
+					className: i.header,
 					children: [
-						_ && /* @__PURE__ */ d("div", {
-							className: r.icon,
-							children: _
+						v && /* @__PURE__ */ f("div", {
+							className: i.icon,
+							children: v
 						}),
-						/* @__PURE__ */ d("div", {
-							id: j,
-							className: r.appName,
-							children: g
+						/* @__PURE__ */ f("div", {
+							id: M,
+							className: i.appName,
+							children: _
 						}),
-						v && /* @__PURE__ */ d("div", {
-							className: r.version,
-							children: v
+						y && /* @__PURE__ */ f("div", {
+							className: i.version,
+							children: y
 						})
 					]
 				}),
-				L.length > 1 && /* @__PURE__ */ d("div", {
-					className: r.tabBar,
+				R.length > 1 && /* @__PURE__ */ f("div", {
+					className: i.tabBar,
 					role: "tablist",
-					children: L.map((e) => /* @__PURE__ */ d("button", {
+					children: R.map((e) => /* @__PURE__ */ f("button", {
 						type: "button",
 						role: "tab",
-						"aria-selected": P === e,
-						className: [r.tabBtn, P === e ? r.tabBtnActive : null].filter(Boolean).join(" "),
-						onClick: () => F(e),
-						children: p[e]
+						"aria-selected": F === e,
+						className: [i.tabBtn, F === e ? i.tabBtnActive : null].filter(Boolean).join(" "),
+						onClick: () => I(e),
+						children: m[e]
 					}, e))
 				}),
-				/* @__PURE__ */ f("div", {
-					className: r.tabContent,
+				/* @__PURE__ */ p("div", {
+					className: i.tabContent,
 					children: [
-						P === "details" && /* @__PURE__ */ f("div", {
-							className: r.section,
-							children: [y && /* @__PURE__ */ d("p", {
-								className: r.comments,
-								children: y
-							}), (b || x || k?.length) && /* @__PURE__ */ f("dl", {
-								className: r.infoList,
+						F === "details" && /* @__PURE__ */ p("div", {
+							className: i.section,
+							children: [b && /* @__PURE__ */ f("p", {
+								className: i.comments,
+								children: b
+							}), (x || S || A?.length) && /* @__PURE__ */ p("dl", {
+								className: i.infoList,
 								children: [
-									b && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", {
-										className: r.infoLabel,
+									x && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("dt", {
+										className: i.infoLabel,
 										children: "Developer"
-									}), /* @__PURE__ */ d("dd", {
-										className: r.infoValue,
-										children: b
+									}), /* @__PURE__ */ f("dd", {
+										className: i.infoValue,
+										children: x
 									})] }),
-									x && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", {
-										className: r.infoLabel,
+									S && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("dt", {
+										className: i.infoLabel,
 										children: "Website"
-									}), /* @__PURE__ */ d("dd", {
-										className: r.infoValue,
-										children: /* @__PURE__ */ d("a", {
-											href: x,
+									}), /* @__PURE__ */ f("dd", {
+										className: i.infoValue,
+										children: /* @__PURE__ */ f("a", {
+											href: S,
 											target: "_blank",
 											rel: "noopener noreferrer",
-											className: r.link,
-											children: S ?? x
+											className: i.link,
+											children: C ?? S
 										})
 									})] }),
-									k?.map((e) => /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("dt", {
-										className: r.infoLabel,
+									A?.map((e) => /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("dt", {
+										className: i.infoLabel,
 										children: e.label
-									}, `${e.label}-dt`), /* @__PURE__ */ d("dd", {
-										className: r.infoValue,
-										children: /* @__PURE__ */ d("a", {
+									}, `${e.label}-dt`), /* @__PURE__ */ f("dd", {
+										className: i.infoValue,
+										children: /* @__PURE__ */ f("a", {
 											href: e.url,
 											target: "_blank",
 											rel: "noopener noreferrer",
-											className: r.link,
+											className: i.link,
 											children: e.url
 										})
 									}, `${e.label}-dd`)] }))
 								]
 							})]
 						}),
-						P === "credits" && /* @__PURE__ */ d("div", {
-							className: r.section,
+						F === "credits" && /* @__PURE__ */ f("div", {
+							className: i.section,
 							children: [
 								{
 									heading: "Developers",
-									list: C
+									list: w
 								},
 								{
 									heading: "Designers",
-									list: w
+									list: T
 								},
 								{
 									heading: "Artists",
-									list: T
+									list: E
 								}
-							].filter((e) => e.list?.length).map(({ heading: e, list: t }) => /* @__PURE__ */ f("div", {
-								className: r.creditGroup,
-								children: [/* @__PURE__ */ d("h4", {
-									className: r.creditTitle,
+							].filter((e) => e.list?.length).map(({ heading: e, list: t }) => /* @__PURE__ */ p("div", {
+								className: i.creditGroup,
+								children: [/* @__PURE__ */ f("h4", {
+									className: i.creditTitle,
 									children: e
-								}), /* @__PURE__ */ d("ul", {
-									className: r.creditList,
-									children: t?.map((e) => /* @__PURE__ */ d("li", {
-										className: r.creditItem,
+								}), /* @__PURE__ */ f("ul", {
+									className: i.creditList,
+									children: t?.map((e) => /* @__PURE__ */ f("li", {
+										className: i.creditItem,
 										children: e
 									}, e))
 								})]
 							}, e))
 						}),
-						P === "legal" && /* @__PURE__ */ f("div", {
-							className: r.section,
+						F === "legal" && /* @__PURE__ */ p("div", {
+							className: i.section,
 							children: [
-								E && /* @__PURE__ */ d("p", {
-									className: r.copyright,
-									children: E
-								}),
-								D && /* @__PURE__ */ d("p", {
-									className: r.licenseType,
+								D && /* @__PURE__ */ f("p", {
+									className: i.copyright,
 									children: D
 								}),
-								O && /* @__PURE__ */ d("pre", {
-									className: r.licenseText,
+								O && /* @__PURE__ */ f("p", {
+									className: i.licenseType,
 									children: O
+								}),
+								k && /* @__PURE__ */ f("pre", {
+									className: i.licenseText,
+									children: k
 								})
 							]
 						})
 					]
 				}),
-				/* @__PURE__ */ d("div", {
-					className: r.footer,
-					children: /* @__PURE__ */ d("button", {
+				/* @__PURE__ */ f("div", {
+					className: i.footer,
+					children: /* @__PURE__ */ f("button", {
 						type: "button",
-						className: [r.btn, r.btnDefault].join(" "),
-						onClick: h,
+						className: [i.btn, i.btnDefault].join(" "),
+						onClick: g,
 						children: "Close"
 					})
 				})
 			]
 		})
 	});
-	return typeof document > "u" ? R : l(R, document.body);
+	return typeof document > "u" ? z : u(z, document.body);
 };
 //#endregion
-export { m as AboutDialog };
+export { h as AboutDialog };
 
 //# sourceMappingURL=AboutDialog.js.map

package/dist/components/AboutDialog/AboutDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AboutDialog.js","names":[],"sources":["../../../src/components/AboutDialog/AboutDialog.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { FOCUSABLE, trapFocus, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './AboutDialog.module.css';\n\nexport interface AboutDialogLink {\n  label: string;\n  url: string;\n}\n\nexport interface AboutDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called on Escape or close button click. */\n  onClose?: () => void;\n  /** Application name. */\n  applicationName: string;\n  /** Icon rendered above the app name. */\n  applicationIcon?: ReactNode;\n  /** Version string (e.g. `\"1.0.0\"`). */\n  version?: string;\n  /** One-sentence description. */\n  comments?: string;\n  /** Developer or organisation name. */\n  developerName?: string;\n  /** Application website URL. */\n  website?: string;\n  /** Label for the website link. Defaults to the URL. */\n  websiteLabel?: string;\n  /** Developer names shown in the Credits tab. */\n  developers?: string[];\n  /** Designer names shown in the Credits tab. */\n  designers?: string[];\n  /** Artist names shown in the Credits tab. */\n  artists?: string[];\n  /** Copyright notice (e.g. `\"© 2024 Jane Smith\"`). */\n  copyright?: string;\n  /** SPDX identifier or short name (e.g. `\"GPL-3.0\"`). */\n  licenseType?: string;\n  /** Full license text shown in the Legal tab. */\n  licenseText?: string;\n  /** Extra links shown in the Details section. */\n  links?: AboutDialogLink[];\n}\n\ntype AboutTab = 'details' | 'credits' | 'legal';\nconst ABOUT_TAB_LABEL: Record<AboutTab, string> = {\n  details: 'Details',\n  credits: 'Credits',\n  legal: 'Legal',\n};\n\n/**\n * Standard app info dialog with details, credits, and legal tabs.\n * Mirrors `AdwAboutDialog`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AboutDialog.html\n */\nexport const AboutDialog = ({\n  open,\n  onClose,\n  applicationName,\n  applicationIcon,\n  version,\n  comments,\n  developerName,\n  website,\n  websiteLabel,\n  developers,\n  designers,\n  artists,\n  copyright,\n  licenseType,\n  licenseText,\n  links,\n}: AboutDialogProps) => {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const [activeTab, setActiveTab] = useState<AboutTab>('details');\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n      setActiveTab('details');\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      trapFocus(e, dialogRef);\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const hasCredits = !!(developers?.length || designers?.length || artists?.length);\n  const hasLegal = !!(copyright || licenseType || licenseText);\n  const tabs = (\n    ['details', hasCredits && 'credits', hasLegal && 'legal'] as (AboutTab | false)[]\n  ).filter(Boolean) as AboutTab[];\n\n  const node = (\n    <div className={styles.backdrop} style={viewportStyle} onClick={onClose} aria-hidden=\"true\">\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className={styles.header}>\n          {applicationIcon && <div className={styles.icon}>{applicationIcon}</div>}\n          <div id={titleId} className={styles.appName}>\n            {applicationName}\n          </div>\n          {version && <div className={styles.version}>{version}</div>}\n        </div>\n\n        {tabs.length > 1 && (\n          <div className={styles.tabBar} role=\"tablist\">\n            {tabs.map((t) => (\n              <button\n                key={t}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={activeTab === t}\n                className={[styles.tabBtn, activeTab === t ? styles.tabBtnActive : null]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={() => setActiveTab(t)}\n              >\n                {ABOUT_TAB_LABEL[t]}\n              </button>\n            ))}\n          </div>\n        )}\n\n        <div className={styles.tabContent}>\n          {activeTab === 'details' && (\n            <div className={styles.section}>\n              {comments && <p className={styles.comments}>{comments}</p>}\n              {(developerName || website || links?.length) && (\n                <dl className={styles.infoList}>\n                  {developerName && (\n                    <>\n                      <dt className={styles.infoLabel}>Developer</dt>\n                      <dd className={styles.infoValue}>{developerName}</dd>\n                    </>\n                  )}\n                  {website && (\n                    <>\n                      <dt className={styles.infoLabel}>Website</dt>\n                      <dd className={styles.infoValue}>\n                        <a\n                          href={website}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className={styles.link}\n                        >\n                          {websiteLabel ?? website}\n                        </a>\n                      </dd>\n                    </>\n                  )}\n                  {links?.map((l) => (\n                    <>\n                      <dt key={`${l.label}-dt`} className={styles.infoLabel}>\n                        {l.label}\n                      </dt>\n                      <dd key={`${l.label}-dd`} className={styles.infoValue}>\n                        <a\n                          href={l.url}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className={styles.link}\n                        >\n                          {l.url}\n                        </a>\n                      </dd>\n                    </>\n                  ))}\n                </dl>\n              )}\n            </div>\n          )}\n\n          {activeTab === 'credits' && (\n            <div className={styles.section}>\n              {[\n                { heading: 'Developers', list: developers },\n                { heading: 'Designers', list: designers },\n                { heading: 'Artists', list: artists },\n              ]\n                .filter((g) => g.list?.length)\n                .map(({ heading, list }) => (\n                  <div key={heading} className={styles.creditGroup}>\n                    <h4 className={styles.creditTitle}>{heading}</h4>\n                    <ul className={styles.creditList}>\n                      {list?.map((name) => (\n                        <li key={name} className={styles.creditItem}>\n                          {name}\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n            </div>\n          )}\n\n          {activeTab === 'legal' && (\n            <div className={styles.section}>\n              {copyright && <p className={styles.copyright}>{copyright}</p>}\n              {licenseType && <p className={styles.licenseType}>{licenseType}</p>}\n              {licenseText && <pre className={styles.licenseText}>{licenseText}</pre>}\n            </div>\n          )}\n        </div>\n\n        <div className={styles.footer}>\n          <button\n            type=\"button\"\n            className={[styles.btn, styles.btnDefault].join(' ')}\n            onClick={onClose}\n          >\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"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"}
+{"version":3,"file":"AboutDialog.js","names":[],"sources":["../../../src/components/AboutDialog/AboutDialog.tsx"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { FOCUSABLE, trapFocus, useBodyScrollLock, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './AboutDialog.module.css';\n\nexport interface AboutDialogLink {\n  label: string;\n  url: string;\n}\n\nexport interface AboutDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called on Escape or close button click. */\n  onClose?: () => void;\n  /** Application name. */\n  applicationName: string;\n  /** Icon rendered above the app name. */\n  applicationIcon?: ReactNode;\n  /** Version string (e.g. `\"1.0.0\"`). */\n  version?: string;\n  /** One-sentence description. */\n  comments?: string;\n  /** Developer or organisation name. */\n  developerName?: string;\n  /** Application website URL. */\n  website?: string;\n  /** Label for the website link. Defaults to the URL. */\n  websiteLabel?: string;\n  /** Developer names shown in the Credits tab. */\n  developers?: string[];\n  /** Designer names shown in the Credits tab. */\n  designers?: string[];\n  /** Artist names shown in the Credits tab. */\n  artists?: string[];\n  /** Copyright notice (e.g. `\"© 2024 Jane Smith\"`). */\n  copyright?: string;\n  /** SPDX identifier or short name (e.g. `\"GPL-3.0\"`). */\n  licenseType?: string;\n  /** Full license text shown in the Legal tab. */\n  licenseText?: string;\n  /** Extra links shown in the Details section. */\n  links?: AboutDialogLink[];\n}\n\ntype AboutTab = 'details' | 'credits' | 'legal';\nconst ABOUT_TAB_LABEL: Record<AboutTab, string> = {\n  details: 'Details',\n  credits: 'Credits',\n  legal: 'Legal',\n};\n\n/**\n * Standard app info dialog with details, credits, and legal tabs.\n * Mirrors `AdwAboutDialog`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AboutDialog.html\n */\nexport const AboutDialog = ({\n  open,\n  onClose,\n  applicationName,\n  applicationIcon,\n  version,\n  comments,\n  developerName,\n  website,\n  websiteLabel,\n  developers,\n  designers,\n  artists,\n  copyright,\n  licenseType,\n  licenseText,\n  links,\n}: AboutDialogProps) => {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const [activeTab, setActiveTab] = useState<AboutTab>('details');\n\n  useBodyScrollLock(open);\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n      setActiveTab('details');\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      trapFocus(e, dialogRef);\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const hasCredits = !!(developers?.length || designers?.length || artists?.length);\n  const hasLegal = !!(copyright || licenseType || licenseText);\n  const tabs = (\n    ['details', hasCredits && 'credits', hasLegal && 'legal'] as (AboutTab | false)[]\n  ).filter(Boolean) as AboutTab[];\n\n  const node = (\n    <div className={styles.backdrop} style={viewportStyle} onClick={onClose}>\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        <div className={styles.header}>\n          {applicationIcon && <div className={styles.icon}>{applicationIcon}</div>}\n          <div id={titleId} className={styles.appName}>\n            {applicationName}\n          </div>\n          {version && <div className={styles.version}>{version}</div>}\n        </div>\n\n        {tabs.length > 1 && (\n          <div className={styles.tabBar} role=\"tablist\">\n            {tabs.map((t) => (\n              <button\n                key={t}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={activeTab === t}\n                className={[styles.tabBtn, activeTab === t ? styles.tabBtnActive : null]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={() => setActiveTab(t)}\n              >\n                {ABOUT_TAB_LABEL[t]}\n              </button>\n            ))}\n          </div>\n        )}\n\n        <div className={styles.tabContent}>\n          {activeTab === 'details' && (\n            <div className={styles.section}>\n              {comments && <p className={styles.comments}>{comments}</p>}\n              {(developerName || website || links?.length) && (\n                <dl className={styles.infoList}>\n                  {developerName && (\n                    <>\n                      <dt className={styles.infoLabel}>Developer</dt>\n                      <dd className={styles.infoValue}>{developerName}</dd>\n                    </>\n                  )}\n                  {website && (\n                    <>\n                      <dt className={styles.infoLabel}>Website</dt>\n                      <dd className={styles.infoValue}>\n                        <a\n                          href={website}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className={styles.link}\n                        >\n                          {websiteLabel ?? website}\n                        </a>\n                      </dd>\n                    </>\n                  )}\n                  {links?.map((l) => (\n                    <>\n                      <dt key={`${l.label}-dt`} className={styles.infoLabel}>\n                        {l.label}\n                      </dt>\n                      <dd key={`${l.label}-dd`} className={styles.infoValue}>\n                        <a\n                          href={l.url}\n                          target=\"_blank\"\n                          rel=\"noopener noreferrer\"\n                          className={styles.link}\n                        >\n                          {l.url}\n                        </a>\n                      </dd>\n                    </>\n                  ))}\n                </dl>\n              )}\n            </div>\n          )}\n\n          {activeTab === 'credits' && (\n            <div className={styles.section}>\n              {[\n                { heading: 'Developers', list: developers },\n                { heading: 'Designers', list: designers },\n                { heading: 'Artists', list: artists },\n              ]\n                .filter((g) => g.list?.length)\n                .map(({ heading, list }) => (\n                  <div key={heading} className={styles.creditGroup}>\n                    <h4 className={styles.creditTitle}>{heading}</h4>\n                    <ul className={styles.creditList}>\n                      {list?.map((name) => (\n                        <li key={name} className={styles.creditItem}>\n                          {name}\n                        </li>\n                      ))}\n                    </ul>\n                  </div>\n                ))}\n            </div>\n          )}\n\n          {activeTab === 'legal' && (\n            <div className={styles.section}>\n              {copyright && <p className={styles.copyright}>{copyright}</p>}\n              {licenseType && <p className={styles.licenseType}>{licenseType}</p>}\n              {licenseText && <pre className={styles.licenseText}>{licenseText}</pre>}\n            </div>\n          )}\n        </div>\n\n        <div className={styles.footer}>\n          <button\n            type=\"button\"\n            className={[styles.btn, styles.btnDefault].join(' ')}\n            onClick={onClose}\n          >\n            Close\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"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"}

package/dist/components/BottomSheet/BottomSheet.cjs

@@ -1,2 +1,2 @@
-const e=require("./BottomSheet.module.css.cjs");let t=require("react"),n=require("react-dom"),r=require("react/jsx-runtime");var i=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`,a=({open:a,title:o,children:s,onClose:c,closeOnBackdrop:l=!0,className:u,...d})=>{let f=(0,t.useRef)(null),p=(0,t.useId)(),m=(0,t.useRef)(null);(0,t.useEffect)(()=>{a?(m.current=document.activeElement,(f.current?.querySelector(i))?.focus()):m.current?.focus()},[a]);let h=(0,t.useCallback)(e=>{if(e.key===`Escape`){e.preventDefault(),c?.();return}if(e.key!==`Tab`)return;let t=Array.from(f.current?.querySelectorAll(i)??[]);if(t.length===0)return;let n=t[0],r=t[t.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus())},[c]);if(!a)return null;let g=(0,r.jsx)(`div`,{className:e.default.backdrop,onClick:l?c:void 0,"aria-hidden":`true`,children:(0,r.jsxs)(`div`,{ref:f,role:`dialog`,"aria-modal":`true`,"aria-labelledby":o?p:void 0,className:[e.default.sheet,u].filter(Boolean).join(` `),onKeyDown:h,onClick:e=>e.stopPropagation(),...d,children:[(0,r.jsx)(`div`,{className:e.default.handle,"aria-hidden":`true`,children:(0,r.jsx)(`div`,{className:e.default.handleBar})}),o&&(0,r.jsx)(`div`,{id:p,className:e.default.title,children:o}),s&&(0,r.jsx)(`div`,{className:e.default.content,children:s})]})});return typeof document>`u`?g:(0,n.createPortal)(g,document.body)};exports.BottomSheet=a;
+const e=require("../Dialog/dialogUtils.cjs"),t=require("./BottomSheet.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`,o=({open:o,title:s,children:c,onClose:l,closeOnBackdrop:u=!0,className:d,...f})=>{let p=(0,n.useRef)(null),m=(0,n.useId)(),h=(0,n.useRef)(null);e.useBodyScrollLock(o),(0,n.useEffect)(()=>{o?(h.current=document.activeElement,(p.current?.querySelector(a))?.focus()):h.current?.focus()},[o]);let g=(0,n.useCallback)(e=>{if(e.key===`Escape`){e.preventDefault(),l?.();return}if(e.key!==`Tab`)return;let t=Array.from(p.current?.querySelectorAll(a)??[]);if(t.length===0)return;let n=t[0],r=t[t.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus())},[l]);if(!o)return null;let _=(0,i.jsx)(`div`,{className:t.default.backdrop,onClick:u?l:void 0,children:(0,i.jsxs)(`div`,{ref:p,role:`dialog`,"aria-modal":`true`,"aria-labelledby":s?m:void 0,className:[t.default.sheet,d].filter(Boolean).join(` `),onKeyDown:g,onClick:e=>e.stopPropagation(),...f,children:[(0,i.jsx)(`div`,{className:t.default.handle,"aria-hidden":`true`,children:(0,i.jsx)(`div`,{className:t.default.handleBar})}),s&&(0,i.jsx)(`div`,{id:m,className:t.default.title,children:s}),c&&(0,i.jsx)(`div`,{className:t.default.content,children:c})]})});return typeof document>`u`?_:(0,r.createPortal)(_,document.body)};exports.BottomSheet=o;
 //# sourceMappingURL=BottomSheet.cjs.map

package/dist/components/BottomSheet/BottomSheet.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.cjs","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the sheet is visible. */\n  open: boolean;\n  /**\n   * Optional heading shown in the drag handle area.\n   */\n  title?: ReactNode;\n  children?: ReactNode;\n  /** Called when the user dismisses the sheet (Escape or backdrop click). */\n  onClose?: () => void;\n  /**\n   * Whether clicking the backdrop closes the sheet.\n   * Defaults to `true`.\n   */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-up panel that overlays content from the bottom edge.\n *\n * Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n */\nexport const BottomSheet = ({\n  open,\n  title,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: BottomSheetProps) => {\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      onClick={closeOnBackdrop ? onClose : undefined}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={sheetRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className={[styles.sheet, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {/* Handle bar */}\n        <div className={styles.handle} aria-hidden=\"true\">\n          <div className={styles.handleBar} />\n        </div>\n\n        {/* Optional title */}\n        {title && (\n          <div id={titleId} className={styles.title}>\n            {title}\n          </div>\n        )}\n\n        {/* Content */}\n        {children && <div className={styles.content}>{children}</div>}\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"6HAcA,IAAM,EACJ,2IA4BW,GAAe,CAC1B,OACA,QACA,WACA,UACA,kBAAkB,GAClB,YACA,GAAG,KACmB,CACtB,IAAM,GAAA,EAAA,EAAA,QAAkC,IAAI,EACtC,GAAA,EAAA,EAAA,OAAgB,EAChB,GAAA,EAAA,EAAA,QAA2C,IAAI,GAGrD,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,eAC1B,EAAS,SAAS,cAA2B,CAAS,IAE7D,MAAM,GAEV,EAAmB,SAAgC,MAAM,CAE7D,EAAG,CAAC,CAAI,CAAC,EAGT,IAAM,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,GAAI,EAAE,MAAQ,SAAU,CACtB,EAAE,eAAe,EACjB,IAAU,EAEV,MACF,CAEA,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,CAAS,GAAK,CAAC,CACjE,EAEA,GAAI,EAAU,SAAW,EACvB,OAGF,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GAEtC,EAAE,SACA,SAAS,gBAAkB,IAC7B,EAAE,eAAe,EACjB,EAAK,MAAM,GAGT,SAAS,gBAAkB,IAC7B,EAAE,eAAe,EACjB,EAAM,MAAM,EAGlB,EACA,CAAC,CAAO,CACV,EAEA,GAAI,CAAC,EACH,OAAO,KAGT,IAAM,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,QAAO,SAClB,QAAS,EAAkB,EAAU,IAAA,GACrC,cAAY,iBAEZ,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,UAAW,EACX,QAAU,GAAM,EAAE,gBAAgB,EAClC,GAAI,WARN,EAWE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAQ,cAAY,iBACzC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,SAAY,CAAA,CAChC,CAAA,EAGJ,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,eACjC,CACE,CAAA,EAIN,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,UAAc,CAAA,CACzD,GACF,CAAA,EAOP,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,IAAI,CACzC"}
+{"version":3,"file":"BottomSheet.cjs","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { useBodyScrollLock } from '../Dialog/dialogUtils';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the sheet is visible. */\n  open: boolean;\n  /**\n   * Optional heading shown in the drag handle area.\n   */\n  title?: ReactNode;\n  children?: ReactNode;\n  /** Called when the user dismisses the sheet (Escape or backdrop click). */\n  onClose?: () => void;\n  /**\n   * Whether clicking the backdrop closes the sheet.\n   * Defaults to `true`.\n   */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-up panel that overlays content from the bottom edge.\n *\n * Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n */\nexport const BottomSheet = ({\n  open,\n  title,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: BottomSheetProps) => {\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  useBodyScrollLock(open);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div className={styles.backdrop} onClick={closeOnBackdrop ? onClose : undefined}>\n      <div\n        ref={sheetRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className={[styles.sheet, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {/* Handle bar */}\n        <div className={styles.handle} aria-hidden=\"true\">\n          <div className={styles.handleBar} />\n        </div>\n\n        {/* Optional title */}\n        {title && (\n          <div id={titleId} className={styles.title}>\n            {title}\n          </div>\n        )}\n\n        {/* Content */}\n        {children && <div className={styles.content}>{children}</div>}\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"oKAgBA,IAAM,EACJ,2IA4BW,GAAe,CAC1B,OACA,QACA,WACA,UACA,kBAAkB,GAClB,YACA,GAAG,KACmB,CACtB,IAAM,GAAA,EAAA,EAAA,QAAkC,IAAI,EACtC,GAAA,EAAA,EAAA,OAAgB,EAChB,GAAA,EAAA,EAAA,QAA2C,IAAI,EAErD,EAAA,kBAAkB,CAAI,GAGtB,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,eAC1B,EAAS,SAAS,cAA2B,CAAS,IAE7D,MAAM,GAEV,EAAmB,SAAgC,MAAM,CAE7D,EAAG,CAAC,CAAI,CAAC,EAGT,IAAM,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,GAAI,EAAE,MAAQ,SAAU,CACtB,EAAE,eAAe,EACjB,IAAU,EAEV,MACF,CAEA,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,CAAS,GAAK,CAAC,CACjE,EAEA,GAAI,EAAU,SAAW,EACvB,OAGF,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GAEtC,EAAE,SACA,SAAS,gBAAkB,IAC7B,EAAE,eAAe,EACjB,EAAK,MAAM,GAGT,SAAS,gBAAkB,IAC7B,EAAE,eAAe,EACjB,EAAM,MAAM,EAGlB,EACA,CAAC,CAAO,CACV,EAEA,GAAI,CAAC,EACH,OAAO,KAGT,IAAM,GACJ,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,SAAU,QAAS,EAAkB,EAAU,IAAA,aACpE,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,UAAW,EACX,QAAU,GAAM,EAAE,gBAAgB,EAClC,GAAI,WARN,EAWE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAQ,cAAY,iBACzC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,SAAY,CAAA,CAChC,CAAA,EAGJ,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,eACjC,CACE,CAAA,EAIN,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,UAAc,CAAA,CACzD,GACF,CAAA,EAOP,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,IAAI,CACzC"}

package/dist/components/BottomSheet/BottomSheet.js

@@ -1,59 +1,59 @@
-import e from "./BottomSheet.module.css.js";
-import { useCallback as t, useEffect as n, useId as r, useRef as i } from "react";
-import { createPortal as a } from "react-dom";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useBodyScrollLock as e } from "../Dialog/dialogUtils.js";
+import t from "./BottomSheet.module.css.js";
+import { useCallback as n, useEffect as r, useId as i, useRef as a } from "react";
+import { createPortal as o } from "react-dom";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/BottomSheet/BottomSheet.tsx
-var c = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", l = ({ open: l, title: u, children: d, onClose: f, closeOnBackdrop: p = !0, className: m, ...h }) => {
-	let g = i(null), _ = r(), v = i(null);
-	n(() => {
-		l ? (v.current = document.activeElement, (g.current?.querySelector(c))?.focus()) : v.current?.focus();
-	}, [l]);
-	let y = t((e) => {
+var l = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", u = ({ open: u, title: d, children: f, onClose: p, closeOnBackdrop: m = !0, className: h, ...g }) => {
+	let _ = a(null), v = i(), y = a(null);
+	e(u), r(() => {
+		u ? (y.current = document.activeElement, (_.current?.querySelector(l))?.focus()) : y.current?.focus();
+	}, [u]);
+	let b = n((e) => {
 		if (e.key === "Escape") {
-			e.preventDefault(), f?.();
+			e.preventDefault(), p?.();
 			return;
 		}
 		if (e.key !== "Tab") return;
-		let t = Array.from(g.current?.querySelectorAll(c) ?? []);
+		let t = Array.from(_.current?.querySelectorAll(l) ?? []);
 		if (t.length === 0) return;
 		let n = t[0], r = t[t.length - 1];
 		e.shiftKey ? document.activeElement === n && (e.preventDefault(), r.focus()) : document.activeElement === r && (e.preventDefault(), n.focus());
-	}, [f]);
-	if (!l) return null;
-	let b = /* @__PURE__ */ o("div", {
-		className: e.backdrop,
-		onClick: p ? f : void 0,
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ s("div", {
-			ref: g,
+	}, [p]);
+	if (!u) return null;
+	let x = /* @__PURE__ */ s("div", {
+		className: t.backdrop,
+		onClick: m ? p : void 0,
+		children: /* @__PURE__ */ c("div", {
+			ref: _,
 			role: "dialog",
 			"aria-modal": "true",
-			"aria-labelledby": u ? _ : void 0,
-			className: [e.sheet, m].filter(Boolean).join(" "),
-			onKeyDown: y,
+			"aria-labelledby": d ? v : void 0,
+			className: [t.sheet, h].filter(Boolean).join(" "),
+			onKeyDown: b,
 			onClick: (e) => e.stopPropagation(),
-			...h,
+			...g,
 			children: [
-				/* @__PURE__ */ o("div", {
-					className: e.handle,
+				/* @__PURE__ */ s("div", {
+					className: t.handle,
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ o("div", { className: e.handleBar })
+					children: /* @__PURE__ */ s("div", { className: t.handleBar })
 				}),
-				u && /* @__PURE__ */ o("div", {
-					id: _,
-					className: e.title,
-					children: u
-				}),
-				d && /* @__PURE__ */ o("div", {
-					className: e.content,
+				d && /* @__PURE__ */ s("div", {
+					id: v,
+					className: t.title,
 					children: d
+				}),
+				f && /* @__PURE__ */ s("div", {
+					className: t.content,
+					children: f
 				})
 			]
 		})
 	});
-	return typeof document > "u" ? b : a(b, document.body);
+	return typeof document > "u" ? x : o(x, document.body);
 };
 //#endregion
-export { l as BottomSheet };
+export { u as BottomSheet };
 
 //# sourceMappingURL=BottomSheet.js.map

package/dist/components/BottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the sheet is visible. */\n  open: boolean;\n  /**\n   * Optional heading shown in the drag handle area.\n   */\n  title?: ReactNode;\n  children?: ReactNode;\n  /** Called when the user dismisses the sheet (Escape or backdrop click). */\n  onClose?: () => void;\n  /**\n   * Whether clicking the backdrop closes the sheet.\n   * Defaults to `true`.\n   */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-up panel that overlays content from the bottom edge.\n *\n * Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n */\nexport const BottomSheet = ({\n  open,\n  title,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: BottomSheetProps) => {\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      onClick={closeOnBackdrop ? onClose : undefined}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={sheetRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className={[styles.sheet, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {/* Handle bar */}\n        <div className={styles.handle} aria-hidden=\"true\">\n          <div className={styles.handleBar} />\n        </div>\n\n        {/* Optional title */}\n        {title && (\n          <div id={titleId} className={styles.title}>\n            {title}\n          </div>\n        )}\n\n        {/* Content */}\n        {children && <div className={styles.content}>{children}</div>}\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":";;;;;AAcA,IAAM,IACJ,8IA4BW,KAAe,EAC1B,SACA,UACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,QACmB;CACtB,IAAM,IAAW,EAAuB,IAAI,GACtC,IAAU,EAAM,GAChB,IAAoB,EAAuB,IAAI;CAGrD,QAAgB;EACd,AAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAS,SAAS,cAA2B,CAAS,IAE7D,MAAM,KAEV,EAAmB,SAAgC,MAAM;CAE7D,GAAG,CAAC,CAAI,CAAC;CAGT,IAAM,IAAgB,GACnB,MAAqC;EACpC,IAAI,EAAE,QAAQ,UAAU;GAEtB,AADA,EAAE,eAAe,GACjB,IAAU;GAEV;EACF;EAEA,IAAI,EAAE,QAAQ,OACZ;EAGF,IAAM,IAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,CAAS,KAAK,CAAC,CACjE;EAEA,IAAI,EAAU,WAAW,GACvB;EAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;EAE1C,AAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAK,MAAM,KAGT,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAM,MAAM;CAGlB,GACA,CAAC,CAAO,CACV;CAEA,IAAI,CAAC,GACH,OAAO;CAGT,IAAM,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,SAAS,IAAkB,IAAU,KAAA;EACrC,eAAY;YAEZ,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;GAC7D,WAAW;GACX,UAAU,MAAM,EAAE,gBAAgB;GAClC,GAAI;aARN;IAWE,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAQ,eAAY;eACzC,kBAAC,OAAD,EAAK,WAAW,EAAO,UAAY,CAAA;IAChC,CAAA;IAGJ,KACC,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eACjC;IACE,CAAA;IAIN,KAAY,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU;IAAc,CAAA;GACzD;;CACF,CAAA;CAOP,OAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,IAAI;AACzC"}
+{"version":3,"file":"BottomSheet.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { useBodyScrollLock } from '../Dialog/dialogUtils';\n\nimport styles from './BottomSheet.module.css';\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nexport interface BottomSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the sheet is visible. */\n  open: boolean;\n  /**\n   * Optional heading shown in the drag handle area.\n   */\n  title?: ReactNode;\n  children?: ReactNode;\n  /** Called when the user dismisses the sheet (Escape or backdrop click). */\n  onClose?: () => void;\n  /**\n   * Whether clicking the backdrop closes the sheet.\n   * Defaults to `true`.\n   */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-up panel that overlays content from the bottom edge.\n *\n * Mirrors `AdwBottomSheet` (libadwaita 1.6+). Renders into a portal on\n * `document.body`. Traps focus, closes on Escape or backdrop click.\n * The handle bar is decorative — drag-to-close is not implemented.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BottomSheet.html\n */\nexport const BottomSheet = ({\n  open,\n  title,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: BottomSheetProps) => {\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  useBodyScrollLock(open);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      const el = sheetRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n      el?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        sheetRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div className={styles.backdrop} onClick={closeOnBackdrop ? onClose : undefined}>\n      <div\n        ref={sheetRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className={[styles.sheet, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {/* Handle bar */}\n        <div className={styles.handle} aria-hidden=\"true\">\n          <div className={styles.handleBar} />\n        </div>\n\n        {/* Optional title */}\n        {title && (\n          <div id={titleId} className={styles.title}>\n            {title}\n          </div>\n        )}\n\n        {/* Content */}\n        {children && <div className={styles.content}>{children}</div>}\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":";;;;;;AAgBA,IAAM,IACJ,8IA4BW,KAAe,EAC1B,SACA,UACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,QACmB;CACtB,IAAM,IAAW,EAAuB,IAAI,GACtC,IAAU,EAAM,GAChB,IAAoB,EAAuB,IAAI;CAKrD,AAHA,EAAkB,CAAI,GAGtB,QAAgB;EACd,AAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAS,SAAS,cAA2B,CAAS,IAE7D,MAAM,KAEV,EAAmB,SAAgC,MAAM;CAE7D,GAAG,CAAC,CAAI,CAAC;CAGT,IAAM,IAAgB,GACnB,MAAqC;EACpC,IAAI,EAAE,QAAQ,UAAU;GAEtB,AADA,EAAE,eAAe,GACjB,IAAU;GAEV;EACF;EAEA,IAAI,EAAE,QAAQ,OACZ;EAGF,IAAM,IAAY,MAAM,KACtB,EAAS,SAAS,iBAA8B,CAAS,KAAK,CAAC,CACjE;EAEA,IAAI,EAAU,WAAW,GACvB;EAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;EAE1C,AAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAK,MAAM,KAGT,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAM,MAAM;CAGlB,GACA,CAAC,CAAO,CACV;CAEA,IAAI,CAAC,GACH,OAAO;CAGT,IAAM,IACJ,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAU,SAAS,IAAkB,IAAU,KAAA;YACpE,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;GAC7D,WAAW;GACX,UAAU,MAAM,EAAE,gBAAgB;GAClC,GAAI;aARN;IAWE,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAQ,eAAY;eACzC,kBAAC,OAAD,EAAK,WAAW,EAAO,UAAY,CAAA;IAChC,CAAA;IAGJ,KACC,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eACjC;IACE,CAAA;IAIN,KAAY,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAU;IAAc,CAAA;GACzD;;CACF,CAAA;CAOP,OAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,IAAI;AACzC"}