@gnome-ui/react 1.45.1 → 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`};function 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 function 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.d.ts

@@ -43,4 +43,4 @@ export interface AboutDialogProps {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AboutDialog.html
  */
-export declare function AboutDialog({ open, onClose, applicationName, applicationIcon, version, comments, developerName, website, websiteLabel, developers, designers, artists, copyright, licenseType, licenseText, links, }: AboutDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const AboutDialog: ({ open, onClose, applicationName, applicationIcon, version, comments, developerName, website, websiteLabel, developers, designers, artists, copyright, licenseType, licenseText, links, }: AboutDialogProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/AboutDialog/AboutDialog.js

@@ -1,185 +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"
-};
-function 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 function 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/AboutDialog/AboutDialog.module.css.cjs

@@ -1,2 +1,2 @@
-var e=`_backdrop_34vn5_3`,t=`_dialog_34vn5_30`,n=`_header_34vn5_63`,r=`_icon_34vn5_72`,i=`_appName_34vn5_81`,a=`_version_34vn5_88`,o=`_tabBar_34vn5_96`,s=`_tabBtn_34vn5_103`,c=`_tabBtnActive_34vn5_125`,l=`_tabContent_34vn5_139`,u=`_section_34vn5_144`,d=`_comments_34vn5_149`,f=`_infoList_34vn5_158`,p=`_infoLabel_34vn5_165`,m=`_infoValue_34vn5_173`,h=`_link_34vn5_181`,g=`_creditGroup_34vn5_191`,_=`_creditTitle_34vn5_195`,v=`_creditList_34vn5_205`,y=`_creditItem_34vn5_214`,b=`_copyright_34vn5_220`,x=`_licenseType_34vn5_227`,S=`_licenseText_34vn5_234`,C=`_footer_34vn5_248`,w=`_btn_34vn5_254`,T=`_btnDefault_34vn5_294`,E={backdrop:e,"backdrop-in":`_backdrop-in_34vn5_1`,dialog:t,"dialog-in":`_dialog-in_34vn5_1`,header:n,icon:r,appName:i,version:a,tabBar:o,tabBtn:s,tabBtnActive:c,tabContent:l,section:u,comments:d,infoList:f,infoLabel:p,infoValue:m,link:h,creditGroup:g,creditTitle:_,creditList:v,creditItem:y,copyright:b,licenseType:x,licenseText:S,footer:C,btn:w,btnDefault:T};exports.default=E;
+var e={backdrop:`_backdrop_34vn5_3`,"backdrop-in":`_backdrop-in_34vn5_1`,dialog:`_dialog_34vn5_30`,"dialog-in":`_dialog-in_34vn5_1`,header:`_header_34vn5_63`,icon:`_icon_34vn5_72`,appName:`_appName_34vn5_81`,version:`_version_34vn5_88`,tabBar:`_tabBar_34vn5_96`,tabBtn:`_tabBtn_34vn5_103`,tabBtnActive:`_tabBtnActive_34vn5_125`,tabContent:`_tabContent_34vn5_139`,section:`_section_34vn5_144`,comments:`_comments_34vn5_149`,infoList:`_infoList_34vn5_158`,infoLabel:`_infoLabel_34vn5_165`,infoValue:`_infoValue_34vn5_173`,link:`_link_34vn5_181`,creditGroup:`_creditGroup_34vn5_191`,creditTitle:`_creditTitle_34vn5_195`,creditList:`_creditList_34vn5_205`,creditItem:`_creditItem_34vn5_214`,copyright:`_copyright_34vn5_220`,licenseType:`_licenseType_34vn5_227`,licenseText:`_licenseText_34vn5_234`,footer:`_footer_34vn5_248`,btn:`_btn_34vn5_254`,btnDefault:`_btnDefault_34vn5_294`};exports.default=e;
 //# sourceMappingURL=AboutDialog.module.css.cjs.map

package/dist/components/AboutDialog/AboutDialog.module.css.js

@@ -1,35 +1,34 @@
-//#region src/components/AboutDialog/AboutDialog.module.css
-var e = "_backdrop_34vn5_3", t = "_dialog_34vn5_30", n = "_header_34vn5_63", r = "_icon_34vn5_72", i = "_appName_34vn5_81", a = "_version_34vn5_88", o = "_tabBar_34vn5_96", s = "_tabBtn_34vn5_103", c = "_tabBtnActive_34vn5_125", l = "_tabContent_34vn5_139", u = "_section_34vn5_144", d = "_comments_34vn5_149", f = "_infoList_34vn5_158", p = "_infoLabel_34vn5_165", m = "_infoValue_34vn5_173", h = "_link_34vn5_181", g = "_creditGroup_34vn5_191", _ = "_creditTitle_34vn5_195", v = "_creditList_34vn5_205", y = "_creditItem_34vn5_214", b = "_copyright_34vn5_220", x = "_licenseType_34vn5_227", S = "_licenseText_34vn5_234", C = "_footer_34vn5_248", w = "_btn_34vn5_254", T = "_btnDefault_34vn5_294", E = {
-	backdrop: e,
+var e = {
+	backdrop: "_backdrop_34vn5_3",
 	"backdrop-in": "_backdrop-in_34vn5_1",
-	dialog: t,
+	dialog: "_dialog_34vn5_30",
 	"dialog-in": "_dialog-in_34vn5_1",
-	header: n,
-	icon: r,
-	appName: i,
-	version: a,
-	tabBar: o,
-	tabBtn: s,
-	tabBtnActive: c,
-	tabContent: l,
-	section: u,
-	comments: d,
-	infoList: f,
-	infoLabel: p,
-	infoValue: m,
-	link: h,
-	creditGroup: g,
-	creditTitle: _,
-	creditList: v,
-	creditItem: y,
-	copyright: b,
-	licenseType: x,
-	licenseText: S,
-	footer: C,
-	btn: w,
-	btnDefault: T
+	header: "_header_34vn5_63",
+	icon: "_icon_34vn5_72",
+	appName: "_appName_34vn5_81",
+	version: "_version_34vn5_88",
+	tabBar: "_tabBar_34vn5_96",
+	tabBtn: "_tabBtn_34vn5_103",
+	tabBtnActive: "_tabBtnActive_34vn5_125",
+	tabContent: "_tabContent_34vn5_139",
+	section: "_section_34vn5_144",
+	comments: "_comments_34vn5_149",
+	infoList: "_infoList_34vn5_158",
+	infoLabel: "_infoLabel_34vn5_165",
+	infoValue: "_infoValue_34vn5_173",
+	link: "_link_34vn5_181",
+	creditGroup: "_creditGroup_34vn5_191",
+	creditTitle: "_creditTitle_34vn5_195",
+	creditList: "_creditList_34vn5_205",
+	creditItem: "_creditItem_34vn5_214",
+	copyright: "_copyright_34vn5_220",
+	licenseType: "_licenseType_34vn5_227",
+	licenseText: "_licenseText_34vn5_234",
+	footer: "_footer_34vn5_248",
+	btn: "_btn_34vn5_254",
+	btnDefault: "_btnDefault_34vn5_294"
 };
 //#endregion
-export { E as default };
+export { e as default };
 
 //# sourceMappingURL=AboutDialog.module.css.js.map

package/dist/components/AboutDialog.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./AboutDialog/AboutDialog.cjs`);exports.AboutDialog=e.AboutDialog;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./AboutDialog/AboutDialog.cjs");exports.AboutDialog=e.AboutDialog;

package/dist/components/ActionRow/ActionRow.cjs

@@ -1,2 +1,2 @@
-const e=require(`./ActionRow.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({title:n,subtitle:r,leading:i,trailing:a,interactive:o=!1,variant:s=`default`,className:c,...l}){let u=o?`button`:`div`,d=s===`property`;return(0,t.jsxs)(u,{className:[e.default.row,o?e.default.interactive:null,d?e.default.property:null,c].filter(Boolean).join(` `),...l,children:[i&&(0,t.jsx)(`span`,{className:e.default.leading,children:i}),(0,t.jsxs)(`span`,{className:e.default.content,children:[(0,t.jsx)(`span`,{className:d?e.default.propertyLabel:e.default.title,children:n}),r&&(0,t.jsx)(`span`,{className:d?e.default.propertyValue:e.default.subtitle,children:r})]}),a&&(0,t.jsx)(`span`,{className:e.default.trailing,children:a})]})}exports.ActionRow=n;
+const e=require("./ActionRow.module.css.cjs");let t=require("react/jsx-runtime");var n=({title:n,subtitle:r,leading:i,trailing:a,interactive:o=!1,variant:s=`default`,className:c,...l})=>{let u=o?`button`:`div`,d=s===`property`;return(0,t.jsxs)(u,{className:[e.default.row,o?e.default.interactive:null,d?e.default.property:null,c].filter(Boolean).join(` `),...l,children:[i&&(0,t.jsx)(`span`,{className:e.default.leading,children:i}),(0,t.jsxs)(`span`,{className:e.default.content,children:[(0,t.jsx)(`span`,{className:d?e.default.propertyLabel:e.default.title,children:n}),r&&(0,t.jsx)(`span`,{className:d?e.default.propertyValue:e.default.subtitle,children:r})]}),a&&(0,t.jsx)(`span`,{className:e.default.trailing,children:a})]})};exports.ActionRow=n;
 //# sourceMappingURL=ActionRow.cjs.map

package/dist/components/ActionRow/ActionRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionRow.cjs","names":[],"sources":["../../../src/components/ActionRow/ActionRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ActionRow.module.css';\n\nexport interface ActionRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge (Switch, Button, Text…).\n   * For interactive end widgets prefer a controlled component and stop\n   * event propagation inside it so the row's own onClick isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * When true the entire row becomes clickable (renders as `<button>`).\n   * Use for rows that navigate or trigger an action.\n   */\n  interactive?: boolean;\n  /**\n   * `\"property\"` flips the visual hierarchy: the subtitle becomes the\n   * prominent value and the title shrinks to a dim label above it.\n   * Use for read-only property display (e.g. \"OS Version / Ubuntu 24.04\").\n   * Mirrors the `.property` style class.\n   */\n  variant?: 'default' | 'property';\n}\n\n/**\n * Standard settings row with title, optional subtitle, and end widget.\n *\n * Mirrors the Adwaita `AdwActionRow` pattern — the fundamental building block\n * inside a `BoxedList`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ActionRow.html\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function ActionRow({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  interactive = false,\n  variant = 'default',\n  className,\n  ...props\n}: ActionRowProps) {\n  const Tag = interactive ? 'button' : 'div';\n  const property = variant === 'property';\n\n  const classes = [\n    styles.row,\n    interactive ? styles.interactive : null,\n    property ? styles.property : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Tag className={classes} {...(props as HTMLAttributes<HTMLElement>)}>\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={property ? styles.propertyLabel : styles.title}>{title}</span>\n        {subtitle && (\n          <span className={property ? styles.propertyValue : styles.subtitle}>{subtitle}</span>\n        )}\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </Tag>\n  );\n}\n"],"mappings":"iFAwCA,SAAgB,EAAU,CACxB,QACA,WACA,UACA,WACA,cAAc,GACd,UAAU,UACV,YACA,GAAG,GACc,CACjB,IAAM,EAAM,EAAc,SAAW,MAC/B,EAAW,IAAY,WAW7B,OACE,EAAA,EAAA,MAAC,EAAD,CAAK,UAVS,CACd,EAAA,QAAO,IACP,EAAc,EAAA,QAAO,YAAc,KACnC,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAGe,GAAK,WAA9B,CACG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAE7D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAW,EAAA,QAAO,cAAgB,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC9E,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAW,EAAA,QAAO,cAAgB,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAElF,GAEN,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC5D"}
+{"version":3,"file":"ActionRow.cjs","names":[],"sources":["../../../src/components/ActionRow/ActionRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ActionRow.module.css';\n\nexport interface ActionRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge (Switch, Button, Text…).\n   * For interactive end widgets prefer a controlled component and stop\n   * event propagation inside it so the row's own onClick isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * When true the entire row becomes clickable (renders as `<button>`).\n   * Use for rows that navigate or trigger an action.\n   */\n  interactive?: boolean;\n  /**\n   * `\"property\"` flips the visual hierarchy: the subtitle becomes the\n   * prominent value and the title shrinks to a dim label above it.\n   * Use for read-only property display (e.g. \"OS Version / Ubuntu 24.04\").\n   * Mirrors the `.property` style class.\n   */\n  variant?: 'default' | 'property';\n}\n\n/**\n * Standard settings row with title, optional subtitle, and end widget.\n *\n * Mirrors the Adwaita `AdwActionRow` pattern — the fundamental building block\n * inside a `BoxedList`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ActionRow.html\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport const ActionRow = ({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  interactive = false,\n  variant = 'default',\n  className,\n  ...props\n}: ActionRowProps) => {\n  const Tag = interactive ? 'button' : 'div';\n  const property = variant === 'property';\n\n  const classes = [\n    styles.row,\n    interactive ? styles.interactive : null,\n    property ? styles.property : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Tag className={classes} {...(props as HTMLAttributes<HTMLElement>)}>\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={property ? styles.propertyLabel : styles.title}>{title}</span>\n        {subtitle && (\n          <span className={property ? styles.propertyValue : styles.subtitle}>{subtitle}</span>\n        )}\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </Tag>\n  );\n};\n"],"mappings":"iFAwCA,IAAa,GAAa,CACxB,QACA,WACA,UACA,WACA,cAAc,GACd,UAAU,UACV,YACA,GAAG,KACiB,CACpB,IAAM,EAAM,EAAc,SAAW,MAC/B,EAAW,IAAY,WAW7B,OACE,EAAA,EAAA,MAAC,EAAD,CAAK,UAVS,CACd,EAAA,QAAO,IACP,EAAc,EAAA,QAAO,YAAc,KACnC,EAAW,EAAA,QAAO,SAAW,KAC7B,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAGU,EAAS,GAAK,WAA9B,CACG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,CAAc,CAAA,GAE5D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAW,EAAA,QAAO,cAAgB,EAAA,QAAO,eAAQ,CAAY,CAAA,EAC7E,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAW,EAAA,QAAO,cAAgB,EAAA,QAAO,kBAAW,CAAe,CAAA,CAElF,IAEL,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,CAAe,CAAA,CAC5D,GAET"}

package/dist/components/ActionRow/ActionRow.d.ts

@@ -34,4 +34,4 @@ export interface ActionRowProps extends HTMLAttributes<HTMLDivElement> {
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ActionRow.html
  * @see https://developer.gnome.org/hig/patterns/containers.html
  */
-export declare function ActionRow({ title, subtitle, leading, trailing, interactive, variant, className, ...props }: ActionRowProps): import("react/jsx-runtime").JSX.Element;
+export declare const ActionRow: ({ title, subtitle, leading, trailing, interactive, variant, className, ...props }: ActionRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ActionRow/ActionRow.js

@@ -1,7 +1,7 @@
 import e from "./ActionRow.module.css.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/ActionRow/ActionRow.tsx
-function r({ title: r, subtitle: i, leading: a, trailing: o, interactive: s = !1, variant: c = "default", className: l, ...u }) {
+var r = ({ title: r, subtitle: i, leading: a, trailing: o, interactive: s = !1, variant: c = "default", className: l, ...u }) => {
 	let d = s ? "button" : "div", f = c === "property";
 	return /* @__PURE__ */ n(d, {
 		className: [
@@ -32,7 +32,7 @@ function r({ title: r, subtitle: i, leading: a, trailing: o, interactive: s = !1
 			})
 		]
 	});
-}
+};
 //#endregion
 export { r as ActionRow };
 

package/dist/components/ActionRow/ActionRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionRow.js","names":[],"sources":["../../../src/components/ActionRow/ActionRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ActionRow.module.css';\n\nexport interface ActionRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge (Switch, Button, Text…).\n   * For interactive end widgets prefer a controlled component and stop\n   * event propagation inside it so the row's own onClick isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * When true the entire row becomes clickable (renders as `<button>`).\n   * Use for rows that navigate or trigger an action.\n   */\n  interactive?: boolean;\n  /**\n   * `\"property\"` flips the visual hierarchy: the subtitle becomes the\n   * prominent value and the title shrinks to a dim label above it.\n   * Use for read-only property display (e.g. \"OS Version / Ubuntu 24.04\").\n   * Mirrors the `.property` style class.\n   */\n  variant?: 'default' | 'property';\n}\n\n/**\n * Standard settings row with title, optional subtitle, and end widget.\n *\n * Mirrors the Adwaita `AdwActionRow` pattern — the fundamental building block\n * inside a `BoxedList`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ActionRow.html\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function ActionRow({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  interactive = false,\n  variant = 'default',\n  className,\n  ...props\n}: ActionRowProps) {\n  const Tag = interactive ? 'button' : 'div';\n  const property = variant === 'property';\n\n  const classes = [\n    styles.row,\n    interactive ? styles.interactive : null,\n    property ? styles.property : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Tag className={classes} {...(props as HTMLAttributes<HTMLElement>)}>\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={property ? styles.propertyLabel : styles.title}>{title}</span>\n        {subtitle && (\n          <span className={property ? styles.propertyValue : styles.subtitle}>{subtitle}</span>\n        )}\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </Tag>\n  );\n}\n"],"mappings":";;;AAwCA,SAAgB,EAAU,EACxB,UACA,aACA,YACA,aACA,iBAAc,IACd,aAAU,WACV,cACA,GAAG,KACc;CACjB,IAAM,IAAM,IAAc,WAAW,OAC/B,IAAW,MAAY;AAW7B,QACE,kBAAC,GAAD;EAAK,WAVS;GACd,EAAO;GACP,IAAc,EAAO,cAAc;GACnC,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAGe,GAAK;YAA9B;GACG,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;IAAe,CAAA;GAE7D,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,QAAD;KAAM,WAAW,IAAW,EAAO,gBAAgB,EAAO;eAAQ;KAAa,CAAA,EAC9E,KACC,kBAAC,QAAD;KAAM,WAAW,IAAW,EAAO,gBAAgB,EAAO;eAAW;KAAgB,CAAA,CAElF;;GAEN,KAAY,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;IAAgB,CAAA;GAC5D"}
+{"version":3,"file":"ActionRow.js","names":[],"sources":["../../../src/components/ActionRow/ActionRow.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './ActionRow.module.css';\n\nexport interface ActionRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge (Switch, Button, Text…).\n   * For interactive end widgets prefer a controlled component and stop\n   * event propagation inside it so the row's own onClick isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * When true the entire row becomes clickable (renders as `<button>`).\n   * Use for rows that navigate or trigger an action.\n   */\n  interactive?: boolean;\n  /**\n   * `\"property\"` flips the visual hierarchy: the subtitle becomes the\n   * prominent value and the title shrinks to a dim label above it.\n   * Use for read-only property display (e.g. \"OS Version / Ubuntu 24.04\").\n   * Mirrors the `.property` style class.\n   */\n  variant?: 'default' | 'property';\n}\n\n/**\n * Standard settings row with title, optional subtitle, and end widget.\n *\n * Mirrors the Adwaita `AdwActionRow` pattern — the fundamental building block\n * inside a `BoxedList`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ActionRow.html\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport const ActionRow = ({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  interactive = false,\n  variant = 'default',\n  className,\n  ...props\n}: ActionRowProps) => {\n  const Tag = interactive ? 'button' : 'div';\n  const property = variant === 'property';\n\n  const classes = [\n    styles.row,\n    interactive ? styles.interactive : null,\n    property ? styles.property : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <Tag className={classes} {...(props as HTMLAttributes<HTMLElement>)}>\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={property ? styles.propertyLabel : styles.title}>{title}</span>\n        {subtitle && (\n          <span className={property ? styles.propertyValue : styles.subtitle}>{subtitle}</span>\n        )}\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </Tag>\n  );\n};\n"],"mappings":";;;AAwCA,IAAa,KAAa,EACxB,UACA,aACA,YACA,aACA,iBAAc,IACd,aAAU,WACV,cACA,GAAG,QACiB;CACpB,IAAM,IAAM,IAAc,WAAW,OAC/B,IAAW,MAAY;CAW7B,OACE,kBAAC,GAAD;EAAK,WAVS;GACd,EAAO;GACP,IAAc,EAAO,cAAc;GACnC,IAAW,EAAO,WAAW;GAC7B;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAGU;EAAS,GAAK;YAA9B;GACG,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;GAAc,CAAA;GAE5D,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,QAAD;KAAM,WAAW,IAAW,EAAO,gBAAgB,EAAO;eAAQ;IAAY,CAAA,GAC7E,KACC,kBAAC,QAAD;KAAM,WAAW,IAAW,EAAO,gBAAgB,EAAO;eAAW;IAAe,CAAA,CAElF;;GAEL,KAAY,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;GAAe,CAAA;EAC5D;;AAET"}

package/dist/components/ActionRow.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./ActionRow/ActionRow.cjs`);exports.ActionRow=e.ActionRow;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ActionRow/ActionRow.cjs");exports.ActionRow=e.ActionRow;