@gnome-ui/react 1.45.1 → 1.45.2

package/dist/components/CountDownTimer/CountDownTimer.cjs

@@ -1,2 +1,2 @@
-const e=require(`../GnomeProvider/GnomeContext.cjs`),t=require(`./CountDownTimer.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);function i({start:i,end:a,format:o=`time`,variant:s=`accent`,action:c,className:l,...u}){let d=e.useDateTimeFormatter(),[f,p]=(0,n.useState)(null),[m,h]=(0,n.useState)(!1);if((0,n.useEffect)(()=>{let e=()=>{let e=new Date,t=new Date(a).getTime()-e.getTime();return t<=0?{days:0,hours:0,minutes:0,seconds:0,isFinished:!0}:{days:Math.floor(t/(1e3*60*60*24)),hours:Math.floor(t/(1e3*60*60)%24),minutes:Math.floor(t/1e3/60%60),seconds:Math.floor(t/1e3%60),isFinished:!1}};p(e());let t=setInterval(()=>{let t=e();p(t),t.isFinished&&!m&&(c?.(),h(!0))},1e3);return()=>clearInterval(t)},[a,c,m]),!f)return null;let g=()=>{if(o===`date`){let e=new Date(a);return d.format(e)}let{days:e,hours:t,minutes:n,seconds:r,isFinished:i}=f;if(i)return`00:00:00`;if(o===`datetime`){let e=new Date(a);return`${d.format(e)} ${`${String(t).padStart(2,`0`)}:${String(n).padStart(2,`0`)}:${String(r).padStart(2,`0`)}`}`}return e>0?`${e}d ${String(t).padStart(2,`0`)}h ${String(n).padStart(2,`0`)}m`:`${String(t).padStart(2,`0`)}:${String(n).padStart(2,`0`)}:${String(r).padStart(2,`0`)}`},_=f.isFinished?`destructive`:s;return(0,r.jsx)(`div`,{className:[t.default.countdownTimer,t.default[_],f.isFinished?t.default.finished:null,l].filter(Boolean).join(` `),...u,children:(0,r.jsx)(`span`,{className:t.default.value,children:g()})})}exports.CountDownTimer=i;
+const e=require("../GnomeProvider/GnomeContext.cjs"),t=require("./CountDownTimer.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=({start:i,end:a,format:o=`time`,variant:s=`accent`,action:c,className:l,...u})=>{let d=e.useDateTimeFormatter(),[f,p]=(0,n.useState)(null),[m,h]=(0,n.useState)(!1);if((0,n.useEffect)(()=>{let e=()=>{let e=new Date,t=new Date(a).getTime()-e.getTime();return t<=0?{days:0,hours:0,minutes:0,seconds:0,isFinished:!0}:{days:Math.floor(t/(1e3*60*60*24)),hours:Math.floor(t/(1e3*60*60)%24),minutes:Math.floor(t/1e3/60%60),seconds:Math.floor(t/1e3%60),isFinished:!1}};p(e());let t=setInterval(()=>{let t=e();p(t),t.isFinished&&!m&&(c?.(),h(!0))},1e3);return()=>clearInterval(t)},[a,c,m]),!f)return null;let g=()=>{if(o===`date`){let e=new Date(a);return d.format(e)}let{days:e,hours:t,minutes:n,seconds:r,isFinished:i}=f;if(i)return`00:00:00`;if(o===`datetime`){let e=new Date(a);return`${d.format(e)} ${`${String(t).padStart(2,`0`)}:${String(n).padStart(2,`0`)}:${String(r).padStart(2,`0`)}`}`}return e>0?`${e}d ${String(t).padStart(2,`0`)}h ${String(n).padStart(2,`0`)}m`:`${String(t).padStart(2,`0`)}:${String(n).padStart(2,`0`)}:${String(r).padStart(2,`0`)}`},_=f.isFinished?`destructive`:s;return(0,r.jsx)(`div`,{className:[t.default.countdownTimer,t.default[_],f.isFinished?t.default.finished:null,l].filter(Boolean).join(` `),...u,children:(0,r.jsx)(`span`,{className:t.default.value,children:g()})})};exports.CountDownTimer=i;
 //# sourceMappingURL=CountDownTimer.cjs.map

package/dist/components/CountDownTimer/CountDownTimer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CountDownTimer.cjs","names":[],"sources":["../../../src/components/CountDownTimer/CountDownTimer.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDateTimeFormatter } from '../GnomeProvider/GnomeContext';\n\nimport styles from './CountDownTimer.module.css';\n\nexport type CountDownVariant = 'accent' | 'destructive' | 'success' | 'warning';\n\nexport interface CountDownTimerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Start date for the countdown */\n  start: Date;\n  /** End date for the countdown */\n  end: Date;\n  /** Format to display: \"date\", \"time\", or \"datetime\" */\n  format?: 'date' | 'time' | 'datetime';\n  /** Visual style variant. Defaults to `\"accent\"`. */\n  variant?: CountDownVariant;\n  /** Callback action to execute when countdown reaches zero */\n  action?: () => void;\n}\n\ninterface TimeRemaining {\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  isFinished: boolean;\n}\n\n/**\n * CountDown timer component that displays remaining time and executes an action when time runs out.\n *\n * @see https://developer.gnome.org/hig/patterns/\n */\nexport function CountDownTimer({\n  start: _start,\n  end,\n  format = 'time',\n  variant = 'accent',\n  action,\n  className,\n  ...props\n}: CountDownTimerProps) {\n  const dateFormatter = useDateTimeFormatter();\n  const [timeRemaining, setTimeRemaining] = useState<TimeRemaining | null>(null);\n  const [hasExecutedAction, setHasExecutedAction] = useState(false);\n\n  useEffect(() => {\n    const calculateTimeRemaining = (): TimeRemaining => {\n      const now = new Date();\n      const endTime = new Date(end).getTime();\n      const nowTime = now.getTime();\n      const difference = endTime - nowTime;\n\n      if (difference <= 0) {\n        return {\n          days: 0,\n          hours: 0,\n          minutes: 0,\n          seconds: 0,\n          isFinished: true,\n        };\n      }\n\n      const days = Math.floor(difference / (1000 * 60 * 60 * 24));\n      const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);\n      const minutes = Math.floor((difference / 1000 / 60) % 60);\n      const seconds = Math.floor((difference / 1000) % 60);\n\n      return {\n        days,\n        hours,\n        minutes,\n        seconds,\n        isFinished: false,\n      };\n    };\n\n    // Initial calculation\n    setTimeRemaining(calculateTimeRemaining());\n\n    // Update every second\n    const interval = setInterval(() => {\n      const remaining = calculateTimeRemaining();\n\n      setTimeRemaining(remaining);\n\n      // Execute action when countdown finishes\n      if (remaining.isFinished && !hasExecutedAction) {\n        action?.();\n        setHasExecutedAction(true);\n      }\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [end, action, hasExecutedAction]);\n\n  if (!timeRemaining) {\n    return null;\n  }\n\n  const formatTime = (): string => {\n    if (format === 'date') {\n      const endDate = new Date(end);\n\n      return dateFormatter.format(endDate);\n    }\n\n    const { days, hours, minutes, seconds, isFinished } = timeRemaining;\n\n    if (isFinished) {\n      return '00:00:00';\n    }\n\n    if (format === 'datetime') {\n      const endDate = new Date(end);\n      const dateString = dateFormatter.format(endDate);\n      const timeString = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n\n      return `${dateString} ${timeString}`;\n    }\n\n    if (days > 0) {\n      return `${days}d ${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m`;\n    }\n\n    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n  };\n\n  const displayVariant = timeRemaining.isFinished ? 'destructive' : variant;\n\n  return (\n    <div\n      className={[\n        styles.countdownTimer,\n        styles[displayVariant],\n        timeRemaining.isFinished ? styles.finished : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <span className={styles.value}>{formatTime()}</span>\n    </div>\n  );\n}\n"],"mappings":"wJAmCA,SAAgB,EAAe,CAC7B,MAAO,EACP,MACA,SAAS,OACT,UAAU,SACV,SACA,YACA,GAAG,GACmB,CACtB,IAAM,EAAgB,EAAA,sBAAsB,CACtC,CAAC,EAAe,IAAA,EAAA,EAAA,UAAmD,KAAK,CACxE,CAAC,EAAmB,IAAA,EAAA,EAAA,UAAiC,GAAM,CAoDjE,IAlDA,EAAA,EAAA,eAAgB,CACd,IAAM,MAA8C,CAClD,IAAM,EAAM,IAAI,KAGV,EAFU,IAAI,KAAK,EAAI,CAAC,SAAS,CACvB,EAAI,SAAS,CAkB7B,OAfI,GAAc,EACT,CACL,KAAM,EACN,MAAO,EACP,QAAS,EACT,QAAS,EACT,WAAY,GACb,CAQI,CACL,KANW,KAAK,MAAM,GAAc,IAAO,GAAK,GAAK,IAAI,CAOzD,MANY,KAAK,MAAO,GAAc,IAAO,GAAK,IAAO,GAAG,CAO5D,QANc,KAAK,MAAO,EAAa,IAAO,GAAM,GAAG,CAOvD,QANc,KAAK,MAAO,EAAa,IAAQ,GAAG,CAOlD,WAAY,GACb,EAIH,EAAiB,GAAwB,CAAC,CAG1C,IAAM,EAAW,gBAAkB,CACjC,IAAM,EAAY,GAAwB,CAE1C,EAAiB,EAAU,CAGvB,EAAU,YAAc,CAAC,IAC3B,KAAU,CACV,EAAqB,GAAK,GAE3B,IAAK,CAER,UAAa,cAAc,EAAS,EACnC,CAAC,EAAK,EAAQ,EAAkB,CAAC,CAEhC,CAAC,EACH,OAAO,KAGT,IAAM,MAA2B,CAC/B,GAAI,IAAW,OAAQ,CACrB,IAAM,EAAU,IAAI,KAAK,EAAI,CAE7B,OAAO,EAAc,OAAO,EAAQ,CAGtC,GAAM,CAAE,OAAM,QAAO,UAAS,UAAS,cAAe,EAEtD,GAAI,EACF,MAAO,WAGT,GAAI,IAAW,WAAY,CACzB,IAAM,EAAU,IAAI,KAAK,EAAI,CAI7B,MAAO,GAHY,EAAc,OAAO,EAAQ,CAG3B,GAFF,GAAG,OAAO,EAAM,CAAC,SAAS,EAAG,IAAI,CAAC,GAAG,OAAO,EAAQ,CAAC,SAAS,EAAG,IAAI,CAAC,GAAG,OAAO,EAAQ,CAAC,SAAS,EAAG,IAAI,KAS9H,OAJI,EAAO,EACF,GAAG,EAAK,IAAI,OAAO,EAAM,CAAC,SAAS,EAAG,IAAI,CAAC,IAAI,OAAO,EAAQ,CAAC,SAAS,EAAG,IAAI,CAAC,GAGlF,GAAG,OAAO,EAAM,CAAC,SAAS,EAAG,IAAI,CAAC,GAAG,OAAO,EAAQ,CAAC,SAAS,EAAG,IAAI,CAAC,GAAG,OAAO,EAAQ,CAAC,SAAS,EAAG,IAAI,IAG5G,EAAiB,EAAc,WAAa,cAAgB,EAElE,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,eACP,EAAA,QAAO,GACP,EAAc,WAAa,EAAA,QAAO,SAAW,KAC7C,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,YAEJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,GAAY,CAAQ,CAAA,CAChD,CAAA"}
+{"version":3,"file":"CountDownTimer.cjs","names":[],"sources":["../../../src/components/CountDownTimer/CountDownTimer.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDateTimeFormatter } from '../GnomeProvider/GnomeContext';\n\nimport styles from './CountDownTimer.module.css';\n\nexport type CountDownVariant = 'accent' | 'destructive' | 'success' | 'warning';\n\nexport interface CountDownTimerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Start date for the countdown */\n  start: Date;\n  /** End date for the countdown */\n  end: Date;\n  /** Format to display: \"date\", \"time\", or \"datetime\" */\n  format?: 'date' | 'time' | 'datetime';\n  /** Visual style variant. Defaults to `\"accent\"`. */\n  variant?: CountDownVariant;\n  /** Callback action to execute when countdown reaches zero */\n  action?: () => void;\n}\n\ninterface TimeRemaining {\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  isFinished: boolean;\n}\n\n/**\n * CountDown timer component that displays remaining time and executes an action when time runs out.\n *\n * @see https://developer.gnome.org/hig/patterns/\n */\nexport const CountDownTimer = ({\n  start: _start,\n  end,\n  format = 'time',\n  variant = 'accent',\n  action,\n  className,\n  ...props\n}: CountDownTimerProps) => {\n  const dateFormatter = useDateTimeFormatter();\n  const [timeRemaining, setTimeRemaining] = useState<TimeRemaining | null>(null);\n  const [hasExecutedAction, setHasExecutedAction] = useState(false);\n\n  useEffect(() => {\n    const calculateTimeRemaining = (): TimeRemaining => {\n      const now = new Date();\n      const endTime = new Date(end).getTime();\n      const nowTime = now.getTime();\n      const difference = endTime - nowTime;\n\n      if (difference <= 0) {\n        return {\n          days: 0,\n          hours: 0,\n          minutes: 0,\n          seconds: 0,\n          isFinished: true,\n        };\n      }\n\n      const days = Math.floor(difference / (1000 * 60 * 60 * 24));\n      const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);\n      const minutes = Math.floor((difference / 1000 / 60) % 60);\n      const seconds = Math.floor((difference / 1000) % 60);\n\n      return {\n        days,\n        hours,\n        minutes,\n        seconds,\n        isFinished: false,\n      };\n    };\n\n    // Initial calculation\n    setTimeRemaining(calculateTimeRemaining());\n\n    // Update every second\n    const interval = setInterval(() => {\n      const remaining = calculateTimeRemaining();\n\n      setTimeRemaining(remaining);\n\n      // Execute action when countdown finishes\n      if (remaining.isFinished && !hasExecutedAction) {\n        action?.();\n        setHasExecutedAction(true);\n      }\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [end, action, hasExecutedAction]);\n\n  if (!timeRemaining) {\n    return null;\n  }\n\n  const formatTime = (): string => {\n    if (format === 'date') {\n      const endDate = new Date(end);\n\n      return dateFormatter.format(endDate);\n    }\n\n    const { days, hours, minutes, seconds, isFinished } = timeRemaining;\n\n    if (isFinished) {\n      return '00:00:00';\n    }\n\n    if (format === 'datetime') {\n      const endDate = new Date(end);\n      const dateString = dateFormatter.format(endDate);\n      const timeString = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n\n      return `${dateString} ${timeString}`;\n    }\n\n    if (days > 0) {\n      return `${days}d ${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m`;\n    }\n\n    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n  };\n\n  const displayVariant = timeRemaining.isFinished ? 'destructive' : variant;\n\n  return (\n    <div\n      className={[\n        styles.countdownTimer,\n        styles[displayVariant],\n        timeRemaining.isFinished ? styles.finished : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <span className={styles.value}>{formatTime()}</span>\n    </div>\n  );\n};\n"],"mappings":"wJAmCA,IAAa,GAAkB,CAC7B,MAAO,EACP,MACA,SAAS,OACT,UAAU,SACV,SACA,YACA,GAAG,KACsB,CACzB,IAAM,EAAgB,EAAA,qBAAqB,EACrC,CAAC,EAAe,IAAA,EAAA,EAAA,UAAmD,IAAI,EACvE,CAAC,EAAmB,IAAA,EAAA,EAAA,UAAiC,EAAK,EAoDhE,IAlDA,EAAA,EAAA,eAAgB,CACd,IAAM,MAA8C,CAClD,IAAM,EAAM,IAAI,KAGV,EAFU,IAAI,KAAK,CAAG,EAAE,QAEX,EADH,EAAI,QACS,EAiB7B,OAfI,GAAc,EACT,CACL,KAAM,EACN,MAAO,EACP,QAAS,EACT,QAAS,EACT,WAAY,EACd,EAQK,CACL,KANW,KAAK,MAAM,GAAc,IAAO,GAAK,GAAK,GAMrD,EACA,MANY,KAAK,MAAO,GAAc,IAAO,GAAK,IAAO,EAMzD,EACA,QANc,KAAK,MAAO,EAAa,IAAO,GAAM,EAMpD,EACA,QANc,KAAK,MAAO,EAAa,IAAQ,EAM/C,EACA,WAAY,EACd,CACF,EAGA,EAAiB,EAAuB,CAAC,EAGzC,IAAM,EAAW,gBAAkB,CACjC,IAAM,EAAY,EAAuB,EAEzC,EAAiB,CAAS,EAGtB,EAAU,YAAc,CAAC,IAC3B,IAAS,EACT,EAAqB,EAAI,EAE7B,EAAG,GAAI,EAEP,UAAa,cAAc,CAAQ,CACrC,EAAG,CAAC,EAAK,EAAQ,CAAiB,CAAC,EAE/B,CAAC,EACH,OAAO,KAGT,IAAM,MAA2B,CAC/B,GAAI,IAAW,OAAQ,CACrB,IAAM,EAAU,IAAI,KAAK,CAAG,EAE5B,OAAO,EAAc,OAAO,CAAO,CACrC,CAEA,GAAM,CAAE,OAAM,QAAO,UAAS,UAAS,cAAe,EAEtD,GAAI,EACF,MAAO,WAGT,GAAI,IAAW,WAAY,CACzB,IAAM,EAAU,IAAI,KAAK,CAAG,EAI5B,MAAO,GAHY,EAAc,OAAO,CAG9B,EAAW,GAAG,GAFF,OAAO,CAAK,EAAE,SAAS,EAAG,GAAG,EAAE,GAAG,OAAO,CAAO,EAAE,SAAS,EAAG,GAAG,EAAE,GAAG,OAAO,CAAO,EAAE,SAAS,EAAG,GAAG,KAG7H,CAMA,OAJI,EAAO,EACF,GAAG,EAAK,IAAI,OAAO,CAAK,EAAE,SAAS,EAAG,GAAG,EAAE,IAAI,OAAO,CAAO,EAAE,SAAS,EAAG,GAAG,EAAE,GAGlF,GAAG,OAAO,CAAK,EAAE,SAAS,EAAG,GAAG,EAAE,GAAG,OAAO,CAAO,EAAE,SAAS,EAAG,GAAG,EAAE,GAAG,OAAO,CAAO,EAAE,SAAS,EAAG,GAAG,GACjH,EAEM,EAAiB,EAAc,WAAa,cAAgB,EAElE,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,eACP,EAAA,QAAO,GACP,EAAc,WAAa,EAAA,QAAO,SAAW,KAC7C,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,YAEJ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAW,CAAQ,CAAA,CAChD,CAAA,CAET"}

package/dist/components/CountDownTimer/CountDownTimer.d.ts

@@ -17,4 +17,4 @@ export interface CountDownTimerProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see https://developer.gnome.org/hig/patterns/
  */
-export declare function CountDownTimer({ start: _start, end, format, variant, action, className, ...props }: CountDownTimerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const CountDownTimer: ({ start: _start, end, format, variant, action, className, ...props }: CountDownTimerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/CountDownTimer/CountDownTimer.js

@@ -3,7 +3,7 @@ import t from "./CountDownTimer.module.css.js";
 import { useEffect as n, useState as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/components/CountDownTimer/CountDownTimer.tsx
-function a({ start: a, end: o, format: s = "time", variant: c = "accent", action: l, className: u, ...d }) {
+var a = ({ start: a, end: o, format: s = "time", variant: c = "accent", action: l, className: u, ...d }) => {
 	let f = e(), [p, m] = r(null), [h, g] = r(!1);
 	if (n(() => {
 		let e = () => {
@@ -59,7 +59,7 @@ function a({ start: a, end: o, format: s = "time", variant: c = "accent", action
 			children: _()
 		})
 	});
-}
+};
 //#endregion
 export { a as CountDownTimer };
 

package/dist/components/CountDownTimer/CountDownTimer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountDownTimer.js","names":[],"sources":["../../../src/components/CountDownTimer/CountDownTimer.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDateTimeFormatter } from '../GnomeProvider/GnomeContext';\n\nimport styles from './CountDownTimer.module.css';\n\nexport type CountDownVariant = 'accent' | 'destructive' | 'success' | 'warning';\n\nexport interface CountDownTimerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Start date for the countdown */\n  start: Date;\n  /** End date for the countdown */\n  end: Date;\n  /** Format to display: \"date\", \"time\", or \"datetime\" */\n  format?: 'date' | 'time' | 'datetime';\n  /** Visual style variant. Defaults to `\"accent\"`. */\n  variant?: CountDownVariant;\n  /** Callback action to execute when countdown reaches zero */\n  action?: () => void;\n}\n\ninterface TimeRemaining {\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  isFinished: boolean;\n}\n\n/**\n * CountDown timer component that displays remaining time and executes an action when time runs out.\n *\n * @see https://developer.gnome.org/hig/patterns/\n */\nexport function CountDownTimer({\n  start: _start,\n  end,\n  format = 'time',\n  variant = 'accent',\n  action,\n  className,\n  ...props\n}: CountDownTimerProps) {\n  const dateFormatter = useDateTimeFormatter();\n  const [timeRemaining, setTimeRemaining] = useState<TimeRemaining | null>(null);\n  const [hasExecutedAction, setHasExecutedAction] = useState(false);\n\n  useEffect(() => {\n    const calculateTimeRemaining = (): TimeRemaining => {\n      const now = new Date();\n      const endTime = new Date(end).getTime();\n      const nowTime = now.getTime();\n      const difference = endTime - nowTime;\n\n      if (difference <= 0) {\n        return {\n          days: 0,\n          hours: 0,\n          minutes: 0,\n          seconds: 0,\n          isFinished: true,\n        };\n      }\n\n      const days = Math.floor(difference / (1000 * 60 * 60 * 24));\n      const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);\n      const minutes = Math.floor((difference / 1000 / 60) % 60);\n      const seconds = Math.floor((difference / 1000) % 60);\n\n      return {\n        days,\n        hours,\n        minutes,\n        seconds,\n        isFinished: false,\n      };\n    };\n\n    // Initial calculation\n    setTimeRemaining(calculateTimeRemaining());\n\n    // Update every second\n    const interval = setInterval(() => {\n      const remaining = calculateTimeRemaining();\n\n      setTimeRemaining(remaining);\n\n      // Execute action when countdown finishes\n      if (remaining.isFinished && !hasExecutedAction) {\n        action?.();\n        setHasExecutedAction(true);\n      }\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [end, action, hasExecutedAction]);\n\n  if (!timeRemaining) {\n    return null;\n  }\n\n  const formatTime = (): string => {\n    if (format === 'date') {\n      const endDate = new Date(end);\n\n      return dateFormatter.format(endDate);\n    }\n\n    const { days, hours, minutes, seconds, isFinished } = timeRemaining;\n\n    if (isFinished) {\n      return '00:00:00';\n    }\n\n    if (format === 'datetime') {\n      const endDate = new Date(end);\n      const dateString = dateFormatter.format(endDate);\n      const timeString = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n\n      return `${dateString} ${timeString}`;\n    }\n\n    if (days > 0) {\n      return `${days}d ${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m`;\n    }\n\n    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n  };\n\n  const displayVariant = timeRemaining.isFinished ? 'destructive' : variant;\n\n  return (\n    <div\n      className={[\n        styles.countdownTimer,\n        styles[displayVariant],\n        timeRemaining.isFinished ? styles.finished : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <span className={styles.value}>{formatTime()}</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAmCA,SAAgB,EAAe,EAC7B,OAAO,GACP,QACA,YAAS,QACT,aAAU,UACV,WACA,cACA,GAAG,KACmB;CACtB,IAAM,IAAgB,GAAsB,EACtC,CAAC,GAAe,KAAoB,EAA+B,KAAK,EACxE,CAAC,GAAmB,KAAwB,EAAS,GAAM;AAoDjE,KAlDA,QAAgB;EACd,IAAM,UAA8C;GAClD,IAAM,oBAAM,IAAI,MAAM,EAGhB,IAFU,IAAI,KAAK,EAAI,CAAC,SAAS,GACvB,EAAI,SAAS;AAkB7B,UAfI,KAAc,IACT;IACL,MAAM;IACN,OAAO;IACP,SAAS;IACT,SAAS;IACT,YAAY;IACb,GAQI;IACL,MANW,KAAK,MAAM,KAAc,MAAO,KAAK,KAAK,IAAI;IAOzD,OANY,KAAK,MAAO,KAAc,MAAO,KAAK,MAAO,GAAG;IAO5D,SANc,KAAK,MAAO,IAAa,MAAO,KAAM,GAAG;IAOvD,SANc,KAAK,MAAO,IAAa,MAAQ,GAAG;IAOlD,YAAY;IACb;;AAIH,IAAiB,GAAwB,CAAC;EAG1C,IAAM,IAAW,kBAAkB;GACjC,IAAM,IAAY,GAAwB;AAK1C,GAHA,EAAiB,EAAU,EAGvB,EAAU,cAAc,CAAC,MAC3B,KAAU,EACV,EAAqB,GAAK;KAE3B,IAAK;AAER,eAAa,cAAc,EAAS;IACnC;EAAC;EAAK;EAAQ;EAAkB,CAAC,EAEhC,CAAC,EACH,QAAO;CAGT,IAAM,UAA2B;AAC/B,MAAI,MAAW,QAAQ;GACrB,IAAM,IAAU,IAAI,KAAK,EAAI;AAE7B,UAAO,EAAc,OAAO,EAAQ;;EAGtC,IAAM,EAAE,SAAM,UAAO,YAAS,YAAS,kBAAe;AAEtD,MAAI,EACF,QAAO;AAGT,MAAI,MAAW,YAAY;GACzB,IAAM,IAAU,IAAI,KAAK,EAAI;AAI7B,UAAO,GAHY,EAAc,OAAO,EAAQ,CAG3B,GAFF,GAAG,OAAO,EAAM,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,EAAQ,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,EAAQ,CAAC,SAAS,GAAG,IAAI;;AAS9H,SAJI,IAAO,IACF,GAAG,EAAK,IAAI,OAAO,EAAM,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,OAAO,EAAQ,CAAC,SAAS,GAAG,IAAI,CAAC,KAGlF,GAAG,OAAO,EAAM,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,EAAQ,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,EAAQ,CAAC,SAAS,GAAG,IAAI;IAG5G,IAAiB,EAAc,aAAa,gBAAgB;AAElE,QACE,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,EAAO;GACP,EAAc,aAAa,EAAO,WAAW;GAC7C;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAEJ,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAQ,GAAY;GAAQ,CAAA;EAChD,CAAA"}
+{"version":3,"file":"CountDownTimer.js","names":[],"sources":["../../../src/components/CountDownTimer/CountDownTimer.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useDateTimeFormatter } from '../GnomeProvider/GnomeContext';\n\nimport styles from './CountDownTimer.module.css';\n\nexport type CountDownVariant = 'accent' | 'destructive' | 'success' | 'warning';\n\nexport interface CountDownTimerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Start date for the countdown */\n  start: Date;\n  /** End date for the countdown */\n  end: Date;\n  /** Format to display: \"date\", \"time\", or \"datetime\" */\n  format?: 'date' | 'time' | 'datetime';\n  /** Visual style variant. Defaults to `\"accent\"`. */\n  variant?: CountDownVariant;\n  /** Callback action to execute when countdown reaches zero */\n  action?: () => void;\n}\n\ninterface TimeRemaining {\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  isFinished: boolean;\n}\n\n/**\n * CountDown timer component that displays remaining time and executes an action when time runs out.\n *\n * @see https://developer.gnome.org/hig/patterns/\n */\nexport const CountDownTimer = ({\n  start: _start,\n  end,\n  format = 'time',\n  variant = 'accent',\n  action,\n  className,\n  ...props\n}: CountDownTimerProps) => {\n  const dateFormatter = useDateTimeFormatter();\n  const [timeRemaining, setTimeRemaining] = useState<TimeRemaining | null>(null);\n  const [hasExecutedAction, setHasExecutedAction] = useState(false);\n\n  useEffect(() => {\n    const calculateTimeRemaining = (): TimeRemaining => {\n      const now = new Date();\n      const endTime = new Date(end).getTime();\n      const nowTime = now.getTime();\n      const difference = endTime - nowTime;\n\n      if (difference <= 0) {\n        return {\n          days: 0,\n          hours: 0,\n          minutes: 0,\n          seconds: 0,\n          isFinished: true,\n        };\n      }\n\n      const days = Math.floor(difference / (1000 * 60 * 60 * 24));\n      const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);\n      const minutes = Math.floor((difference / 1000 / 60) % 60);\n      const seconds = Math.floor((difference / 1000) % 60);\n\n      return {\n        days,\n        hours,\n        minutes,\n        seconds,\n        isFinished: false,\n      };\n    };\n\n    // Initial calculation\n    setTimeRemaining(calculateTimeRemaining());\n\n    // Update every second\n    const interval = setInterval(() => {\n      const remaining = calculateTimeRemaining();\n\n      setTimeRemaining(remaining);\n\n      // Execute action when countdown finishes\n      if (remaining.isFinished && !hasExecutedAction) {\n        action?.();\n        setHasExecutedAction(true);\n      }\n    }, 1000);\n\n    return () => clearInterval(interval);\n  }, [end, action, hasExecutedAction]);\n\n  if (!timeRemaining) {\n    return null;\n  }\n\n  const formatTime = (): string => {\n    if (format === 'date') {\n      const endDate = new Date(end);\n\n      return dateFormatter.format(endDate);\n    }\n\n    const { days, hours, minutes, seconds, isFinished } = timeRemaining;\n\n    if (isFinished) {\n      return '00:00:00';\n    }\n\n    if (format === 'datetime') {\n      const endDate = new Date(end);\n      const dateString = dateFormatter.format(endDate);\n      const timeString = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n\n      return `${dateString} ${timeString}`;\n    }\n\n    if (days > 0) {\n      return `${days}d ${String(hours).padStart(2, '0')}h ${String(minutes).padStart(2, '0')}m`;\n    }\n\n    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n  };\n\n  const displayVariant = timeRemaining.isFinished ? 'destructive' : variant;\n\n  return (\n    <div\n      className={[\n        styles.countdownTimer,\n        styles[displayVariant],\n        timeRemaining.isFinished ? styles.finished : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <span className={styles.value}>{formatTime()}</span>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAmCA,IAAa,KAAkB,EAC7B,OAAO,GACP,QACA,YAAS,QACT,aAAU,UACV,WACA,cACA,GAAG,QACsB;CACzB,IAAM,IAAgB,EAAqB,GACrC,CAAC,GAAe,KAAoB,EAA+B,IAAI,GACvE,CAAC,GAAmB,KAAwB,EAAS,EAAK;CAoDhE,IAlDA,QAAgB;EACd,IAAM,UAA8C;GAClD,IAAM,oBAAM,IAAI,KAAK,GAGf,IAFU,IAAI,KAAK,CAAG,EAAE,QAEX,IADH,EAAI,QACS;GAiB7B,OAfI,KAAc,IACT;IACL,MAAM;IACN,OAAO;IACP,SAAS;IACT,SAAS;IACT,YAAY;GACd,IAQK;IACL,MANW,KAAK,MAAM,KAAc,MAAO,KAAK,KAAK,GAMrD;IACA,OANY,KAAK,MAAO,KAAc,MAAO,KAAK,MAAO,EAMzD;IACA,SANc,KAAK,MAAO,IAAa,MAAO,KAAM,EAMpD;IACA,SANc,KAAK,MAAO,IAAa,MAAQ,EAM/C;IACA,YAAY;GACd;EACF;EAGA,EAAiB,EAAuB,CAAC;EAGzC,IAAM,IAAW,kBAAkB;GACjC,IAAM,IAAY,EAAuB;GAKzC,AAHA,EAAiB,CAAS,GAGtB,EAAU,cAAc,CAAC,MAC3B,IAAS,GACT,EAAqB,EAAI;EAE7B,GAAG,GAAI;EAEP,aAAa,cAAc,CAAQ;CACrC,GAAG;EAAC;EAAK;EAAQ;CAAiB,CAAC,GAE/B,CAAC,GACH,OAAO;CAGT,IAAM,UAA2B;EAC/B,IAAI,MAAW,QAAQ;GACrB,IAAM,IAAU,IAAI,KAAK,CAAG;GAE5B,OAAO,EAAc,OAAO,CAAO;EACrC;EAEA,IAAM,EAAE,SAAM,UAAO,YAAS,YAAS,kBAAe;EAEtD,IAAI,GACF,OAAO;EAGT,IAAI,MAAW,YAAY;GACzB,IAAM,IAAU,IAAI,KAAK,CAAG;GAI5B,OAAO,GAHY,EAAc,OAAO,CAG9B,EAAW,GAAG,GAFF,OAAO,CAAK,EAAE,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,CAAO,EAAE,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,CAAO,EAAE,SAAS,GAAG,GAAG;EAG7H;EAMA,OAJI,IAAO,IACF,GAAG,EAAK,IAAI,OAAO,CAAK,EAAE,SAAS,GAAG,GAAG,EAAE,IAAI,OAAO,CAAO,EAAE,SAAS,GAAG,GAAG,EAAE,KAGlF,GAAG,OAAO,CAAK,EAAE,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,CAAO,EAAE,SAAS,GAAG,GAAG,EAAE,GAAG,OAAO,CAAO,EAAE,SAAS,GAAG,GAAG;CACjH,GAEM,IAAiB,EAAc,aAAa,gBAAgB;CAElE,OACE,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,EAAO;GACP,EAAc,aAAa,EAAO,WAAW;GAC7C;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;YAEJ,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAQ,EAAW;EAAQ,CAAA;CAChD,CAAA;AAET"}

package/dist/components/CountDownTimer.cjs

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

package/dist/components/Dialog/Dialog.cjs

@@ -1,2 +1,2 @@
-const e=require(`./dialogUtils.cjs`),t=require(`./Dialog.module.css.cjs`);let n=require(`react`),r=require(`react-dom`),i=require(`react/jsx-runtime`);function a({open:a,title:o,children:s,buttons:c=[],onClose:l,closeOnBackdrop:u=!0,role:d=`dialog`,responses:f,onResponse:p,className:m,...h}){let g=(0,n.useRef)(null),_=(0,n.useId)(),v=(0,n.useRef)(null),y=!!f,b=e.useVisualViewport();(0,n.useEffect)(()=>{a?(v.current=document.activeElement,(g.current?.querySelector(e.FOCUSABLE))?.focus()):v.current?.focus()},[a]);let x=(0,n.useCallback)(()=>{let e=f?.find(e=>e.variant!==`destructive`&&!e.disabled);e&&p?.(e.id)},[f,p]),S=y?x:u?l:void 0,C=(0,n.useCallback)(t=>{if(t.key===`Escape`){t.preventDefault(),y?x():l?.();return}e.trapFocus(t,g)},[y,x,l]);if(!a)return null;let w=()=>y&&f?(0,i.jsx)(`div`,{className:t.default.footer,children:f.map(e=>(0,i.jsx)(`button`,{type:`button`,disabled:e.disabled,className:[t.default.btn,t.default[`btn-${e.variant??`default`}`]].filter(Boolean).join(` `),onClick:()=>p?.(e.id),children:e.label},e.id))}):c.length>0?(0,i.jsx)(`div`,{className:t.default.footer,children:c.map(e=>(0,i.jsx)(`button`,{type:`button`,disabled:e.disabled,className:[t.default.btn,t.default[`btn-${e.variant??`default`}`]].filter(Boolean).join(` `),onClick:e.onClick,children:e.label},e.label))}):null,T=(0,i.jsx)(`div`,{className:t.default.backdrop,style:b,onClick:S,"aria-hidden":`true`,children:(0,i.jsxs)(`div`,{ref:g,role:d,"aria-modal":`true`,"aria-labelledby":_,className:[t.default.dialog,m].filter(Boolean).join(` `),onKeyDown:C,onClick:e=>e.stopPropagation(),...h,children:[o&&(0,i.jsx)(`div`,{id:_,className:t.default.title,children:o}),s&&(0,i.jsx)(`div`,{className:t.default.body,children:s}),w()]})});return typeof document>`u`?T:(0,r.createPortal)(T,document.body)}exports.Dialog=a;
+const e=require("./dialogUtils.cjs"),t=require("./Dialog.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a=({open:a,title:o,children:s,buttons:c=[],onClose:l,closeOnBackdrop:u=!0,role:d=`dialog`,responses:f,onResponse:p,className:m,...h})=>{let g=(0,n.useRef)(null),_=(0,n.useId)(),v=(0,n.useRef)(null),y=!!f,b=e.useVisualViewport();(0,n.useEffect)(()=>{a?(v.current=document.activeElement,(g.current?.querySelector(e.FOCUSABLE))?.focus()):v.current?.focus()},[a]);let x=(0,n.useCallback)(()=>{let e=f?.find(e=>e.variant!==`destructive`&&!e.disabled);e&&p?.(e.id)},[f,p]),S=y?x:u?l:void 0,C=(0,n.useCallback)(t=>{if(t.key===`Escape`){t.preventDefault(),y?x():l?.();return}e.trapFocus(t,g)},[y,x,l]);if(!a)return null;let w=()=>y&&f?(0,i.jsx)(`div`,{className:t.default.footer,children:f.map(e=>(0,i.jsx)(`button`,{type:`button`,disabled:e.disabled,className:[t.default.btn,t.default[`btn-${e.variant??`default`}`]].filter(Boolean).join(` `),onClick:()=>p?.(e.id),children:e.label},e.id))}):c.length>0?(0,i.jsx)(`div`,{className:t.default.footer,children:c.map(e=>(0,i.jsx)(`button`,{type:`button`,disabled:e.disabled,className:[t.default.btn,t.default[`btn-${e.variant??`default`}`]].filter(Boolean).join(` `),onClick:e.onClick,children:e.label},e.label))}):null,T=(0,i.jsx)(`div`,{className:t.default.backdrop,style:b,onClick:S,"aria-hidden":`true`,children:(0,i.jsxs)(`div`,{ref:g,role:d,"aria-modal":`true`,"aria-labelledby":_,className:[t.default.dialog,m].filter(Boolean).join(` `),onKeyDown:C,onClick:e=>e.stopPropagation(),...h,children:[o&&(0,i.jsx)(`div`,{id:_,className:t.default.title,children:o}),s&&(0,i.jsx)(`div`,{className:t.default.body,children:s}),w()]})});return typeof document>`u`?T:(0,r.createPortal)(T,document.body)};exports.Dialog=a;
 //# sourceMappingURL=Dialog.cjs.map

package/dist/components/Dialog/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","names":[],"sources":["../../../src/components/Dialog/Dialog.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 './Dialog.module.css';\nimport { FOCUSABLE, trapFocus, useVisualViewport } from './dialogUtils';\n\n// ─── AlertDialog types ────────────────────────────────────────────────────────\n\nexport type AlertDialogResponseVariant = 'default' | 'suggested' | 'destructive';\n\nexport interface AlertDialogResponse {\n  /**\n   * Unique identifier returned via `onResponse`.\n   * Use `\"cancel\"` by convention for the dismissive action.\n   */\n  id: string;\n  /** Button label. */\n  label: string;\n  /** Visual emphasis. Defaults to `\"default\"`. */\n  variant?: AlertDialogResponseVariant;\n  /** Disables the button. */\n  disabled?: boolean;\n}\n\n// ─── Dialog ───────────────────────────────────────────────────────────────────\n\nexport interface DialogButton {\n  /** Button label. */\n  label: string;\n  /** Visual variant. Defaults to `\"default\"`. */\n  variant?: 'default' | 'suggested' | 'destructive';\n  /** Called when the button is clicked. */\n  onClick: () => void;\n  /** Whether the button is disabled. */\n  disabled?: boolean;\n}\n\nexport interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the dialog is visible. */\n  open: boolean;\n\n  // ── Standard dialog ──────────────────────────────────────────────────────\n\n  /** Dialog heading. */\n  title?: ReactNode;\n  /** Body content. */\n  children?: ReactNode;\n  /** Action buttons (standard dialog API). */\n  buttons?: DialogButton[];\n  /** Called on Escape or backdrop click. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the dialog. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n\n  // ── AlertDialog extension ─────────────────────────────────────────────────\n\n  /**\n   * ARIA role. Use `\"alertdialog\"` for confirmations and destructive warnings —\n   * screen readers announce it immediately. Defaults to `\"dialog\"`.\n   *\n   * When using `role=\"alertdialog\"`, prefer the `responses`/`onResponse` API\n   * over `buttons`/`onClick` for semantic clarity.\n   */\n  role?: 'dialog' | 'alertdialog';\n\n  /**\n   * Response buttons (AlertDialog API). Alternative to `buttons` — each\n   * response has a semantic `id` returned via `onResponse`.\n   * Escape and backdrop click fire the first non-destructive response.\n   */\n  responses?: AlertDialogResponse[];\n\n  /**\n   * Called with the `id` of the response button clicked.\n   * Required when `responses` is provided.\n   */\n  onResponse?: (id: string) => void;\n}\n\n/**\n * Blocking modal dialog following the Adwaita pattern.\n *\n * **Standard** — `title` + `children` + `buttons[]`.\n *\n * **Alert** — add `role=\"alertdialog\"` + `responses[]` + `onResponse`.\n * Uses a semantic response id instead of per-button `onClick`.\n * Escape / backdrop fire the first non-destructive response.\n * Mirrors `AdwAlertDialog`.\n *\n * For the app-info dialog, use `<AboutDialog />` instead.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Dialog.html\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AlertDialog.html\n */\nexport function Dialog({\n  open,\n  title,\n  children,\n  buttons = [],\n  onClose,\n  closeOnBackdrop = true,\n  role = 'dialog',\n  responses,\n  onResponse,\n  className,\n  ...props\n}: DialogProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  const isAlert = !!responses;\n  const viewportStyle = useVisualViewport();\n\n  // ── Focus management ───────────────────────────────────────────────────────\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    }\n  }, [open]);\n\n  // ── Dismiss helpers ────────────────────────────────────────────────────────\n  const dismissAlert = useCallback(() => {\n    const cancel = responses?.find((r) => r.variant !== 'destructive' && !r.disabled);\n\n    if (cancel) {\n      onResponse?.(cancel.id);\n    }\n  }, [responses, onResponse]);\n\n  const handleBackdrop = isAlert ? dismissAlert : closeOnBackdrop ? onClose : undefined;\n\n  // ── Keyboard ───────────────────────────────────────────────────────────────\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        if (isAlert) {\n          dismissAlert();\n        } else {\n          onClose?.();\n        }\n\n        return;\n      }\n\n      trapFocus(e, dialogRef);\n    },\n    [isAlert, dismissAlert, onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // ── Render buttons (standard or alert) ────────────────────────────────────\n  const renderButtons = () => {\n    if (isAlert && responses) {\n      return (\n        <div className={styles.footer}>\n          {responses.map((r) => (\n            <button\n              key={r.id}\n              type=\"button\"\n              disabled={r.disabled}\n              className={[styles.btn, styles[`btn-${r.variant ?? 'default'}`]]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={() => onResponse?.(r.id)}\n            >\n              {r.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n\n    if (buttons.length > 0) {\n      return (\n        <div className={styles.footer}>\n          {buttons.map((btn) => (\n            <button\n              key={btn.label}\n              type=\"button\"\n              disabled={btn.disabled}\n              className={[styles.btn, styles[`btn-${btn.variant ?? 'default'}`]]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={btn.onClick}\n            >\n              {btn.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={handleBackdrop}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={dialogRef}\n        role={role}\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={[styles.dialog, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            {title}\n          </div>\n        )}\n        {children && <div className={styles.body}>{children}</div>}\n        {renderButtons()}\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":"uJAuGA,SAAgB,EAAO,CACrB,OACA,QACA,WACA,UAAU,EAAE,CACZ,UACA,kBAAkB,GAClB,OAAO,SACP,YACA,aACA,YACA,GAAG,GACW,CACd,IAAM,GAAA,EAAA,EAAA,QAAmC,KAAK,CACxC,GAAA,EAAA,EAAA,QAAiB,CACjB,GAAA,EAAA,EAAA,QAA2C,KAAK,CAEhD,EAAU,CAAC,CAAC,EACZ,EAAgB,EAAA,mBAAmB,EAGzC,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,eAC1B,EAAU,SAAS,cAA2B,EAAA,UAAU,GAE/D,OAAO,EAEV,EAAkB,SAAgC,OAAO,EAE3D,CAAC,EAAK,CAAC,CAGV,IAAM,GAAA,EAAA,EAAA,iBAAiC,CACrC,IAAM,EAAS,GAAW,KAAM,GAAM,EAAE,UAAY,eAAiB,CAAC,EAAE,SAAS,CAE7E,GACF,IAAa,EAAO,GAAG,EAExB,CAAC,EAAW,EAAW,CAAC,CAErB,EAAiB,EAAU,EAAe,EAAkB,EAAU,IAAA,GAGtE,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,GAAI,EAAE,MAAQ,SAAU,CACtB,EAAE,gBAAgB,CACd,EACF,GAAc,CAEd,KAAW,CAGb,OAGF,EAAA,UAAU,EAAG,EAAU,EAEzB,CAAC,EAAS,EAAc,EAAQ,CACjC,CAED,GAAI,CAAC,EACH,OAAO,KAIT,IAAM,MACA,GAAW,GAEX,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBACpB,EAAU,IAAK,IACd,EAAA,EAAA,KAAC,SAAD,CAEE,KAAK,SACL,SAAU,EAAE,SACZ,UAAW,CAAC,EAAA,QAAO,IAAK,EAAA,QAAO,OAAO,EAAE,SAAW,aAAa,CAC7D,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,YAAe,IAAa,EAAE,GAAG,UAEhC,EAAE,MACI,CATF,EAAE,GASA,CACT,CACE,CAAA,CAIN,EAAQ,OAAS,GAEjB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBACpB,EAAQ,IAAK,IACZ,EAAA,EAAA,KAAC,SAAD,CAEE,KAAK,SACL,SAAU,EAAI,SACd,UAAW,CAAC,EAAA,QAAO,IAAK,EAAA,QAAO,OAAO,EAAI,SAAW,aAAa,CAC/D,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,QAAS,EAAI,iBAEZ,EAAI,MACE,CATF,EAAI,MASF,CACT,CACE,CAAA,CAIH,KAGH,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,QAAO,SAClB,MAAO,EACP,QAAS,EACT,cAAY,iBAEZ,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACC,OACN,aAAW,OACX,kBAAiB,EACjB,UAAW,CAAC,EAAA,QAAO,OAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC/D,UAAW,EACX,QAAU,GAAM,EAAE,iBAAiB,CACnC,GAAI,WARN,CAUG,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,eACjC,EACG,CAAA,CAEP,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAO,WAAe,CAAA,CACzD,GAAe,CACZ,GACF,CAAA,CAOR,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,KAAK"}
+{"version":3,"file":"Dialog.cjs","names":[],"sources":["../../../src/components/Dialog/Dialog.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 './Dialog.module.css';\nimport { FOCUSABLE, trapFocus, useVisualViewport } from './dialogUtils';\n\n// ─── AlertDialog types ────────────────────────────────────────────────────────\n\nexport type AlertDialogResponseVariant = 'default' | 'suggested' | 'destructive';\n\nexport interface AlertDialogResponse {\n  /**\n   * Unique identifier returned via `onResponse`.\n   * Use `\"cancel\"` by convention for the dismissive action.\n   */\n  id: string;\n  /** Button label. */\n  label: string;\n  /** Visual emphasis. Defaults to `\"default\"`. */\n  variant?: AlertDialogResponseVariant;\n  /** Disables the button. */\n  disabled?: boolean;\n}\n\n// ─── Dialog ───────────────────────────────────────────────────────────────────\n\nexport interface DialogButton {\n  /** Button label. */\n  label: string;\n  /** Visual variant. Defaults to `\"default\"`. */\n  variant?: 'default' | 'suggested' | 'destructive';\n  /** Called when the button is clicked. */\n  onClick: () => void;\n  /** Whether the button is disabled. */\n  disabled?: boolean;\n}\n\nexport interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the dialog is visible. */\n  open: boolean;\n\n  // ── Standard dialog ──────────────────────────────────────────────────────\n\n  /** Dialog heading. */\n  title?: ReactNode;\n  /** Body content. */\n  children?: ReactNode;\n  /** Action buttons (standard dialog API). */\n  buttons?: DialogButton[];\n  /** Called on Escape or backdrop click. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the dialog. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n\n  // ── AlertDialog extension ─────────────────────────────────────────────────\n\n  /**\n   * ARIA role. Use `\"alertdialog\"` for confirmations and destructive warnings —\n   * screen readers announce it immediately. Defaults to `\"dialog\"`.\n   *\n   * When using `role=\"alertdialog\"`, prefer the `responses`/`onResponse` API\n   * over `buttons`/`onClick` for semantic clarity.\n   */\n  role?: 'dialog' | 'alertdialog';\n\n  /**\n   * Response buttons (AlertDialog API). Alternative to `buttons` — each\n   * response has a semantic `id` returned via `onResponse`.\n   * Escape and backdrop click fire the first non-destructive response.\n   */\n  responses?: AlertDialogResponse[];\n\n  /**\n   * Called with the `id` of the response button clicked.\n   * Required when `responses` is provided.\n   */\n  onResponse?: (id: string) => void;\n}\n\n/**\n * Blocking modal dialog following the Adwaita pattern.\n *\n * **Standard** — `title` + `children` + `buttons[]`.\n *\n * **Alert** — add `role=\"alertdialog\"` + `responses[]` + `onResponse`.\n * Uses a semantic response id instead of per-button `onClick`.\n * Escape / backdrop fire the first non-destructive response.\n * Mirrors `AdwAlertDialog`.\n *\n * For the app-info dialog, use `<AboutDialog />` instead.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Dialog.html\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AlertDialog.html\n */\nexport const Dialog = ({\n  open,\n  title,\n  children,\n  buttons = [],\n  onClose,\n  closeOnBackdrop = true,\n  role = 'dialog',\n  responses,\n  onResponse,\n  className,\n  ...props\n}: DialogProps) => {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  const isAlert = !!responses;\n  const viewportStyle = useVisualViewport();\n\n  // ── Focus management ───────────────────────────────────────────────────────\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    }\n  }, [open]);\n\n  // ── Dismiss helpers ────────────────────────────────────────────────────────\n  const dismissAlert = useCallback(() => {\n    const cancel = responses?.find((r) => r.variant !== 'destructive' && !r.disabled);\n\n    if (cancel) {\n      onResponse?.(cancel.id);\n    }\n  }, [responses, onResponse]);\n\n  const handleBackdrop = isAlert ? dismissAlert : closeOnBackdrop ? onClose : undefined;\n\n  // ── Keyboard ───────────────────────────────────────────────────────────────\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        if (isAlert) {\n          dismissAlert();\n        } else {\n          onClose?.();\n        }\n\n        return;\n      }\n\n      trapFocus(e, dialogRef);\n    },\n    [isAlert, dismissAlert, onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // ── Render buttons (standard or alert) ────────────────────────────────────\n  const renderButtons = () => {\n    if (isAlert && responses) {\n      return (\n        <div className={styles.footer}>\n          {responses.map((r) => (\n            <button\n              key={r.id}\n              type=\"button\"\n              disabled={r.disabled}\n              className={[styles.btn, styles[`btn-${r.variant ?? 'default'}`]]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={() => onResponse?.(r.id)}\n            >\n              {r.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n\n    if (buttons.length > 0) {\n      return (\n        <div className={styles.footer}>\n          {buttons.map((btn) => (\n            <button\n              key={btn.label}\n              type=\"button\"\n              disabled={btn.disabled}\n              className={[styles.btn, styles[`btn-${btn.variant ?? 'default'}`]]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={btn.onClick}\n            >\n              {btn.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={handleBackdrop}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={dialogRef}\n        role={role}\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={[styles.dialog, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            {title}\n          </div>\n        )}\n        {children && <div className={styles.body}>{children}</div>}\n        {renderButtons()}\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":"uJAuGA,IAAa,GAAU,CACrB,OACA,QACA,WACA,UAAU,CAAC,EACX,UACA,kBAAkB,GAClB,OAAO,SACP,YACA,aACA,YACA,GAAG,KACc,CACjB,IAAM,GAAA,EAAA,EAAA,QAAmC,IAAI,EACvC,GAAA,EAAA,EAAA,OAAgB,EAChB,GAAA,EAAA,EAAA,QAA2C,IAAI,EAE/C,EAAU,CAAC,CAAC,EACZ,EAAgB,EAAA,kBAAkB,GAGxC,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,eAC1B,EAAU,SAAS,cAA2B,EAAA,SAAS,IAE9D,MAAM,GAEV,EAAmB,SAAgC,MAAM,CAE7D,EAAG,CAAC,CAAI,CAAC,EAGT,IAAM,GAAA,EAAA,EAAA,iBAAiC,CACrC,IAAM,EAAS,GAAW,KAAM,GAAM,EAAE,UAAY,eAAiB,CAAC,EAAE,QAAQ,EAE5E,GACF,IAAa,EAAO,EAAE,CAE1B,EAAG,CAAC,EAAW,CAAU,CAAC,EAEpB,EAAiB,EAAU,EAAe,EAAkB,EAAU,IAAA,GAGtE,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,GAAI,EAAE,MAAQ,SAAU,CACtB,EAAE,eAAe,EACb,EACF,EAAa,EAEb,IAAU,EAGZ,MACF,CAEA,EAAA,UAAU,EAAG,CAAS,CACxB,EACA,CAAC,EAAS,EAAc,CAAO,CACjC,EAEA,GAAI,CAAC,EACH,OAAO,KAIT,IAAM,MACA,GAAW,GAEX,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBACpB,EAAU,IAAK,IACd,EAAA,EAAA,KAAC,SAAD,CAEE,KAAK,SACL,SAAU,EAAE,SACZ,UAAW,CAAC,EAAA,QAAO,IAAK,EAAA,QAAO,OAAO,EAAE,SAAW,YAAY,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,EACX,YAAe,IAAa,EAAE,EAAE,WAE/B,EAAE,KACG,EATD,EAAE,EASD,CACT,CACE,CAAA,EAIL,EAAQ,OAAS,GAEjB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBACpB,EAAQ,IAAK,IACZ,EAAA,EAAA,KAAC,SAAD,CAEE,KAAK,SACL,SAAU,EAAI,SACd,UAAW,CAAC,EAAA,QAAO,IAAK,EAAA,QAAO,OAAO,EAAI,SAAW,YAAY,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG,EACX,QAAS,EAAI,iBAEZ,EAAI,KACC,EATD,EAAI,KASH,CACT,CACE,CAAA,EAIF,KAGH,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,QAAO,SAClB,MAAO,EACP,QAAS,EACT,cAAY,iBAEZ,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACC,OACN,aAAW,OACX,kBAAiB,EACjB,UAAW,CAAC,EAAA,QAAO,OAAQ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC9D,UAAW,EACX,QAAU,GAAM,EAAE,gBAAgB,EAClC,GAAI,WARN,CAUG,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,eACjC,CACE,CAAA,EAEN,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAO,UAAc,CAAA,EACxD,EAAc,CACZ,GACF,CAAA,EAOP,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,IAAI,CACzC"}

package/dist/components/Dialog/Dialog.d.ts

@@ -71,4 +71,4 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Dialog.html
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AlertDialog.html
  */
-export declare function Dialog({ open, title, children, buttons, onClose, closeOnBackdrop, role, responses, onResponse, className, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const Dialog: ({ open, title, children, buttons, onClose, closeOnBackdrop, role, responses, onResponse, className, ...props }: DialogProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Dialog/Dialog.js

@@ -4,7 +4,7 @@ import { useCallback as i, useEffect as a, useId as o, useRef as s } from "react
 import { createPortal as c } from "react-dom";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/Dialog/Dialog.tsx
-function d({ open: d, title: f, children: p, buttons: m = [], onClose: h, closeOnBackdrop: g = !0, role: _ = "dialog", responses: v, onResponse: y, className: b, ...x }) {
+var d = ({ open: d, title: f, children: p, buttons: m = [], onClose: h, closeOnBackdrop: g = !0, role: _ = "dialog", responses: v, onResponse: y, className: b, ...x }) => {
 	let S = s(null), C = o(), w = s(null), T = !!v, E = n();
 	a(() => {
 		d ? (w.current = document.activeElement, (S.current?.querySelector(e))?.focus()) : w.current?.focus();
@@ -71,7 +71,7 @@ function d({ open: d, title: f, children: p, buttons: m = [], onClose: h, closeO
 		})
 	});
 	return typeof document > "u" ? j : c(j, document.body);
-}
+};
 //#endregion
 export { d as Dialog };
 

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/Dialog/Dialog.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 './Dialog.module.css';\nimport { FOCUSABLE, trapFocus, useVisualViewport } from './dialogUtils';\n\n// ─── AlertDialog types ────────────────────────────────────────────────────────\n\nexport type AlertDialogResponseVariant = 'default' | 'suggested' | 'destructive';\n\nexport interface AlertDialogResponse {\n  /**\n   * Unique identifier returned via `onResponse`.\n   * Use `\"cancel\"` by convention for the dismissive action.\n   */\n  id: string;\n  /** Button label. */\n  label: string;\n  /** Visual emphasis. Defaults to `\"default\"`. */\n  variant?: AlertDialogResponseVariant;\n  /** Disables the button. */\n  disabled?: boolean;\n}\n\n// ─── Dialog ───────────────────────────────────────────────────────────────────\n\nexport interface DialogButton {\n  /** Button label. */\n  label: string;\n  /** Visual variant. Defaults to `\"default\"`. */\n  variant?: 'default' | 'suggested' | 'destructive';\n  /** Called when the button is clicked. */\n  onClick: () => void;\n  /** Whether the button is disabled. */\n  disabled?: boolean;\n}\n\nexport interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the dialog is visible. */\n  open: boolean;\n\n  // ── Standard dialog ──────────────────────────────────────────────────────\n\n  /** Dialog heading. */\n  title?: ReactNode;\n  /** Body content. */\n  children?: ReactNode;\n  /** Action buttons (standard dialog API). */\n  buttons?: DialogButton[];\n  /** Called on Escape or backdrop click. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the dialog. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n\n  // ── AlertDialog extension ─────────────────────────────────────────────────\n\n  /**\n   * ARIA role. Use `\"alertdialog\"` for confirmations and destructive warnings —\n   * screen readers announce it immediately. Defaults to `\"dialog\"`.\n   *\n   * When using `role=\"alertdialog\"`, prefer the `responses`/`onResponse` API\n   * over `buttons`/`onClick` for semantic clarity.\n   */\n  role?: 'dialog' | 'alertdialog';\n\n  /**\n   * Response buttons (AlertDialog API). Alternative to `buttons` — each\n   * response has a semantic `id` returned via `onResponse`.\n   * Escape and backdrop click fire the first non-destructive response.\n   */\n  responses?: AlertDialogResponse[];\n\n  /**\n   * Called with the `id` of the response button clicked.\n   * Required when `responses` is provided.\n   */\n  onResponse?: (id: string) => void;\n}\n\n/**\n * Blocking modal dialog following the Adwaita pattern.\n *\n * **Standard** — `title` + `children` + `buttons[]`.\n *\n * **Alert** — add `role=\"alertdialog\"` + `responses[]` + `onResponse`.\n * Uses a semantic response id instead of per-button `onClick`.\n * Escape / backdrop fire the first non-destructive response.\n * Mirrors `AdwAlertDialog`.\n *\n * For the app-info dialog, use `<AboutDialog />` instead.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Dialog.html\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AlertDialog.html\n */\nexport function Dialog({\n  open,\n  title,\n  children,\n  buttons = [],\n  onClose,\n  closeOnBackdrop = true,\n  role = 'dialog',\n  responses,\n  onResponse,\n  className,\n  ...props\n}: DialogProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  const isAlert = !!responses;\n  const viewportStyle = useVisualViewport();\n\n  // ── Focus management ───────────────────────────────────────────────────────\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    }\n  }, [open]);\n\n  // ── Dismiss helpers ────────────────────────────────────────────────────────\n  const dismissAlert = useCallback(() => {\n    const cancel = responses?.find((r) => r.variant !== 'destructive' && !r.disabled);\n\n    if (cancel) {\n      onResponse?.(cancel.id);\n    }\n  }, [responses, onResponse]);\n\n  const handleBackdrop = isAlert ? dismissAlert : closeOnBackdrop ? onClose : undefined;\n\n  // ── Keyboard ───────────────────────────────────────────────────────────────\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        if (isAlert) {\n          dismissAlert();\n        } else {\n          onClose?.();\n        }\n\n        return;\n      }\n\n      trapFocus(e, dialogRef);\n    },\n    [isAlert, dismissAlert, onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // ── Render buttons (standard or alert) ────────────────────────────────────\n  const renderButtons = () => {\n    if (isAlert && responses) {\n      return (\n        <div className={styles.footer}>\n          {responses.map((r) => (\n            <button\n              key={r.id}\n              type=\"button\"\n              disabled={r.disabled}\n              className={[styles.btn, styles[`btn-${r.variant ?? 'default'}`]]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={() => onResponse?.(r.id)}\n            >\n              {r.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n\n    if (buttons.length > 0) {\n      return (\n        <div className={styles.footer}>\n          {buttons.map((btn) => (\n            <button\n              key={btn.label}\n              type=\"button\"\n              disabled={btn.disabled}\n              className={[styles.btn, styles[`btn-${btn.variant ?? 'default'}`]]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={btn.onClick}\n            >\n              {btn.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={handleBackdrop}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={dialogRef}\n        role={role}\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={[styles.dialog, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            {title}\n          </div>\n        )}\n        {children && <div className={styles.body}>{children}</div>}\n        {renderButtons()}\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":";;;;;;AAuGA,SAAgB,EAAO,EACrB,SACA,UACA,aACA,aAAU,EAAE,EACZ,YACA,qBAAkB,IAClB,UAAO,UACP,cACA,eACA,cACA,GAAG,KACW;CACd,IAAM,IAAY,EAAuB,KAAK,EACxC,IAAU,GAAO,EACjB,IAAoB,EAAuB,KAAK,EAEhD,IAAU,CAAC,CAAC,GACZ,IAAgB,GAAmB;AAGzC,SAAgB;AACd,EAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAU,SAAS,cAA2B,EAAU,GAE/D,OAAO,IAEV,EAAkB,SAAgC,OAAO;IAE3D,CAAC,EAAK,CAAC;CAGV,IAAM,IAAe,QAAkB;EACrC,IAAM,IAAS,GAAW,MAAM,MAAM,EAAE,YAAY,iBAAiB,CAAC,EAAE,SAAS;AAEjF,EAAI,KACF,IAAa,EAAO,GAAG;IAExB,CAAC,GAAW,EAAW,CAAC,EAErB,IAAiB,IAAU,IAAe,IAAkB,IAAU,KAAA,GAGtE,IAAgB,GACnB,MAAqC;AACpC,MAAI,EAAE,QAAQ,UAAU;AAEtB,GADA,EAAE,gBAAgB,EACd,IACF,GAAc,GAEd,KAAW;AAGb;;AAGF,IAAU,GAAG,EAAU;IAEzB;EAAC;EAAS;EAAc;EAAQ,CACjC;AAED,KAAI,CAAC,EACH,QAAO;CAIT,IAAM,UACA,KAAW,IAEX,kBAAC,OAAD;EAAK,WAAW,EAAO;YACpB,EAAU,KAAK,MACd,kBAAC,UAAD;GAEE,MAAK;GACL,UAAU,EAAE;GACZ,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAE,WAAW,aAAa,CAC7D,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,eAAe,IAAa,EAAE,GAAG;aAEhC,EAAE;GACI,EATF,EAAE,GASA,CACT;EACE,CAAA,GAIN,EAAQ,SAAS,IAEjB,kBAAC,OAAD;EAAK,WAAW,EAAO;YACpB,EAAQ,KAAK,MACZ,kBAAC,UAAD;GAEE,MAAK;GACL,UAAU,EAAI;GACd,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAI,WAAW,aAAa,CAC/D,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,SAAS,EAAI;aAEZ,EAAI;GACE,EATF,EAAI,MASF,CACT;EACE,CAAA,GAIH,MAGH,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;EACP,SAAS;EACT,eAAY;YAEZ,kBAAC,OAAD;GACE,KAAK;GACC;GACN,cAAW;GACX,mBAAiB;GACjB,WAAW,CAAC,EAAO,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC/D,WAAW;GACX,UAAU,MAAM,EAAE,iBAAiB;GACnC,GAAI;aARN;IAUG,KACC,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eACjC;KACG,CAAA;IAEP,KAAY,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO;KAAe,CAAA;IACzD,GAAe;IACZ;;EACF,CAAA;AAOR,QAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,KAAK"}
+{"version":3,"file":"Dialog.js","names":[],"sources":["../../../src/components/Dialog/Dialog.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 './Dialog.module.css';\nimport { FOCUSABLE, trapFocus, useVisualViewport } from './dialogUtils';\n\n// ─── AlertDialog types ────────────────────────────────────────────────────────\n\nexport type AlertDialogResponseVariant = 'default' | 'suggested' | 'destructive';\n\nexport interface AlertDialogResponse {\n  /**\n   * Unique identifier returned via `onResponse`.\n   * Use `\"cancel\"` by convention for the dismissive action.\n   */\n  id: string;\n  /** Button label. */\n  label: string;\n  /** Visual emphasis. Defaults to `\"default\"`. */\n  variant?: AlertDialogResponseVariant;\n  /** Disables the button. */\n  disabled?: boolean;\n}\n\n// ─── Dialog ───────────────────────────────────────────────────────────────────\n\nexport interface DialogButton {\n  /** Button label. */\n  label: string;\n  /** Visual variant. Defaults to `\"default\"`. */\n  variant?: 'default' | 'suggested' | 'destructive';\n  /** Called when the button is clicked. */\n  onClick: () => void;\n  /** Whether the button is disabled. */\n  disabled?: boolean;\n}\n\nexport interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the dialog is visible. */\n  open: boolean;\n\n  // ── Standard dialog ──────────────────────────────────────────────────────\n\n  /** Dialog heading. */\n  title?: ReactNode;\n  /** Body content. */\n  children?: ReactNode;\n  /** Action buttons (standard dialog API). */\n  buttons?: DialogButton[];\n  /** Called on Escape or backdrop click. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the dialog. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n\n  // ── AlertDialog extension ─────────────────────────────────────────────────\n\n  /**\n   * ARIA role. Use `\"alertdialog\"` for confirmations and destructive warnings —\n   * screen readers announce it immediately. Defaults to `\"dialog\"`.\n   *\n   * When using `role=\"alertdialog\"`, prefer the `responses`/`onResponse` API\n   * over `buttons`/`onClick` for semantic clarity.\n   */\n  role?: 'dialog' | 'alertdialog';\n\n  /**\n   * Response buttons (AlertDialog API). Alternative to `buttons` — each\n   * response has a semantic `id` returned via `onResponse`.\n   * Escape and backdrop click fire the first non-destructive response.\n   */\n  responses?: AlertDialogResponse[];\n\n  /**\n   * Called with the `id` of the response button clicked.\n   * Required when `responses` is provided.\n   */\n  onResponse?: (id: string) => void;\n}\n\n/**\n * Blocking modal dialog following the Adwaita pattern.\n *\n * **Standard** — `title` + `children` + `buttons[]`.\n *\n * **Alert** — add `role=\"alertdialog\"` + `responses[]` + `onResponse`.\n * Uses a semantic response id instead of per-button `onClick`.\n * Escape / backdrop fire the first non-destructive response.\n * Mirrors `AdwAlertDialog`.\n *\n * For the app-info dialog, use `<AboutDialog />` instead.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Dialog.html\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.AlertDialog.html\n */\nexport const Dialog = ({\n  open,\n  title,\n  children,\n  buttons = [],\n  onClose,\n  closeOnBackdrop = true,\n  role = 'dialog',\n  responses,\n  onResponse,\n  className,\n  ...props\n}: DialogProps) => {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n\n  const isAlert = !!responses;\n  const viewportStyle = useVisualViewport();\n\n  // ── Focus management ───────────────────────────────────────────────────────\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    }\n  }, [open]);\n\n  // ── Dismiss helpers ────────────────────────────────────────────────────────\n  const dismissAlert = useCallback(() => {\n    const cancel = responses?.find((r) => r.variant !== 'destructive' && !r.disabled);\n\n    if (cancel) {\n      onResponse?.(cancel.id);\n    }\n  }, [responses, onResponse]);\n\n  const handleBackdrop = isAlert ? dismissAlert : closeOnBackdrop ? onClose : undefined;\n\n  // ── Keyboard ───────────────────────────────────────────────────────────────\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        if (isAlert) {\n          dismissAlert();\n        } else {\n          onClose?.();\n        }\n\n        return;\n      }\n\n      trapFocus(e, dialogRef);\n    },\n    [isAlert, dismissAlert, onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // ── Render buttons (standard or alert) ────────────────────────────────────\n  const renderButtons = () => {\n    if (isAlert && responses) {\n      return (\n        <div className={styles.footer}>\n          {responses.map((r) => (\n            <button\n              key={r.id}\n              type=\"button\"\n              disabled={r.disabled}\n              className={[styles.btn, styles[`btn-${r.variant ?? 'default'}`]]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={() => onResponse?.(r.id)}\n            >\n              {r.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n\n    if (buttons.length > 0) {\n      return (\n        <div className={styles.footer}>\n          {buttons.map((btn) => (\n            <button\n              key={btn.label}\n              type=\"button\"\n              disabled={btn.disabled}\n              className={[styles.btn, styles[`btn-${btn.variant ?? 'default'}`]]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={btn.onClick}\n            >\n              {btn.label}\n            </button>\n          ))}\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={handleBackdrop}\n      aria-hidden=\"true\"\n    >\n      <div\n        ref={dialogRef}\n        role={role}\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={[styles.dialog, className].filter(Boolean).join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            {title}\n          </div>\n        )}\n        {children && <div className={styles.body}>{children}</div>}\n        {renderButtons()}\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":";;;;;;AAuGA,IAAa,KAAU,EACrB,SACA,UACA,aACA,aAAU,CAAC,GACX,YACA,qBAAkB,IAClB,UAAO,UACP,cACA,eACA,cACA,GAAG,QACc;CACjB,IAAM,IAAY,EAAuB,IAAI,GACvC,IAAU,EAAM,GAChB,IAAoB,EAAuB,IAAI,GAE/C,IAAU,CAAC,CAAC,GACZ,IAAgB,EAAkB;CAGxC,QAAgB;EACd,AAAI,KACF,EAAkB,UAAU,SAAS,gBAC1B,EAAU,SAAS,cAA2B,CAAS,IAE9D,MAAM,KAEV,EAAmB,SAAgC,MAAM;CAE7D,GAAG,CAAC,CAAI,CAAC;CAGT,IAAM,IAAe,QAAkB;EACrC,IAAM,IAAS,GAAW,MAAM,MAAM,EAAE,YAAY,iBAAiB,CAAC,EAAE,QAAQ;EAEhF,AAAI,KACF,IAAa,EAAO,EAAE;CAE1B,GAAG,CAAC,GAAW,CAAU,CAAC,GAEpB,IAAiB,IAAU,IAAe,IAAkB,IAAU,KAAA,GAGtE,IAAgB,GACnB,MAAqC;EACpC,IAAI,EAAE,QAAQ,UAAU;GAEtB,AADA,EAAE,eAAe,GACb,IACF,EAAa,IAEb,IAAU;GAGZ;EACF;EAEA,EAAU,GAAG,CAAS;CACxB,GACA;EAAC;EAAS;EAAc;CAAO,CACjC;CAEA,IAAI,CAAC,GACH,OAAO;CAIT,IAAM,UACA,KAAW,IAEX,kBAAC,OAAD;EAAK,WAAW,EAAO;YACpB,EAAU,KAAK,MACd,kBAAC,UAAD;GAEE,MAAK;GACL,UAAU,EAAE;GACZ,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAE,WAAW,YAAY,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG;GACX,eAAe,IAAa,EAAE,EAAE;aAE/B,EAAE;EACG,GATD,EAAE,EASD,CACT;CACE,CAAA,IAIL,EAAQ,SAAS,IAEjB,kBAAC,OAAD;EAAK,WAAW,EAAO;YACpB,EAAQ,KAAK,MACZ,kBAAC,UAAD;GAEE,MAAK;GACL,UAAU,EAAI;GACd,WAAW,CAAC,EAAO,KAAK,EAAO,OAAO,EAAI,WAAW,YAAY,EAC9D,OAAO,OAAO,EACd,KAAK,GAAG;GACX,SAAS,EAAI;aAEZ,EAAI;EACC,GATD,EAAI,KASH,CACT;CACE,CAAA,IAIF,MAGH,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;EACP,SAAS;EACT,eAAY;YAEZ,kBAAC,OAAD;GACE,KAAK;GACC;GACN,cAAW;GACX,mBAAiB;GACjB,WAAW,CAAC,EAAO,QAAQ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;GAC9D,WAAW;GACX,UAAU,MAAM,EAAE,gBAAgB;GAClC,GAAI;aARN;IAUG,KACC,kBAAC,OAAD;KAAK,IAAI;KAAS,WAAW,EAAO;eACjC;IACE,CAAA;IAEN,KAAY,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO;IAAc,CAAA;IACxD,EAAc;GACZ;;CACF,CAAA;CAOP,OAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,IAAI;AACzC"}

package/dist/components/Dialog/Dialog.module.css.cjs

@@ -1,2 +1,2 @@
-var e=`_backdrop_1hnot_3`,t=`_dialog_1hnot_30`,n=`_title_1hnot_60`,r=`_body_1hnot_72`,i=`_footer_1hnot_93`,a=`_btn_1hnot_100`,o={backdrop:e,"backdrop-in":`_backdrop-in_1hnot_1`,dialog:t,"dialog-in":`_dialog-in_1hnot_1`,title:n,body:r,footer:i,btn:a,"btn-default":`_btn-default_1hnot_148`,"btn-suggested":`_btn-suggested_1hnot_152`,"btn-destructive":`_btn-destructive_1hnot_157`};exports.default=o;
+var e={backdrop:`_backdrop_1hnot_3`,"backdrop-in":`_backdrop-in_1hnot_1`,dialog:`_dialog_1hnot_30`,"dialog-in":`_dialog-in_1hnot_1`,title:`_title_1hnot_60`,body:`_body_1hnot_72`,footer:`_footer_1hnot_93`,btn:`_btn_1hnot_100`,"btn-default":`_btn-default_1hnot_148`,"btn-suggested":`_btn-suggested_1hnot_152`,"btn-destructive":`_btn-destructive_1hnot_157`};exports.default=e;
 //# sourceMappingURL=Dialog.module.css.cjs.map

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

@@ -1,18 +1,17 @@
-//#region src/components/Dialog/Dialog.module.css
-var e = "_backdrop_1hnot_3", t = "_dialog_1hnot_30", n = "_title_1hnot_60", r = "_body_1hnot_72", i = "_footer_1hnot_93", a = "_btn_1hnot_100", o = {
-	backdrop: e,
+var e = {
+	backdrop: "_backdrop_1hnot_3",
 	"backdrop-in": "_backdrop-in_1hnot_1",
-	dialog: t,
+	dialog: "_dialog_1hnot_30",
 	"dialog-in": "_dialog-in_1hnot_1",
-	title: n,
-	body: r,
-	footer: i,
-	btn: a,
+	title: "_title_1hnot_60",
+	body: "_body_1hnot_72",
+	footer: "_footer_1hnot_93",
+	btn: "_btn_1hnot_100",
 	"btn-default": "_btn-default_1hnot_148",
 	"btn-suggested": "_btn-suggested_1hnot_152",
 	"btn-destructive": "_btn-destructive_1hnot_157"
 };
 //#endregion
-export { o as default };
+export { e as default };
 
 //# sourceMappingURL=Dialog.module.css.js.map

package/dist/components/Dialog/dialogUtils.cjs

@@ -1,2 +1,2 @@
-let e=require(`react`);var t=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`;function n(){let[t,n]=(0,e.useState)({});return(0,e.useEffect)(()=>{let{visualViewport:e}=window;if(!e)return;let t=()=>{let{offsetLeft:t,offsetTop:r,width:i,height:a}=e;n({top:r,left:t,width:i,height:a})};return t(),e.addEventListener(`resize`,t),e.addEventListener(`scroll`,t),()=>{e.removeEventListener(`resize`,t),e.removeEventListener(`scroll`,t)}},[]),t}function r(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.current?.querySelectorAll(`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`)??[]);if(!n.length)return;let r=n[0],i=n[n.length-1];e.shiftKey?document.activeElement===r&&(e.preventDefault(),i.focus()):document.activeElement===i&&(e.preventDefault(),r.focus())}exports.FOCUSABLE=t,exports.trapFocus=r,exports.useVisualViewport=n;
+let e=require("react");var t=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`;function n(){let[t,n]=(0,e.useState)({});return(0,e.useEffect)(()=>{let{visualViewport:e}=window;if(!e)return;let t=()=>{let{offsetLeft:t,offsetTop:r,width:i,height:a}=e;n({top:r,left:t,width:i,height:a})};return t(),e.addEventListener(`resize`,t),e.addEventListener(`scroll`,t),()=>{e.removeEventListener(`resize`,t),e.removeEventListener(`scroll`,t)}},[]),t}function r(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.current?.querySelectorAll(`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`)??[]);if(!n.length)return;let r=n[0],i=n[n.length-1];e.shiftKey?document.activeElement===r&&(e.preventDefault(),i.focus()):document.activeElement===i&&(e.preventDefault(),r.focus())}exports.FOCUSABLE=t,exports.trapFocus=r,exports.useVisualViewport=n;
 //# sourceMappingURL=dialogUtils.cjs.map

package/dist/components/Dialog/dialogUtils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialogUtils.cjs","names":[],"sources":["../../../src/components/Dialog/dialogUtils.ts"],"sourcesContent":["import { type CSSProperties, type KeyboardEvent, type RefObject, useEffect, useState } from 'react';\n\nexport const FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns inline styles that anchor a `position:fixed` backdrop to the visual\n * viewport so the dialog stays centered when the virtual keyboard is open on\n * mobile (iOS Safari / Android Chrome shrink `visualViewport` but not the\n * layout viewport that `position:fixed` is relative to).\n */\nexport function useVisualViewport(): CSSProperties {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useEffect(() => {\n    const { visualViewport } = window;\n\n    if (!visualViewport) {\n      return;\n    }\n\n    const update = (): void => {\n      const { offsetLeft: left, offsetTop: top, width, height } = visualViewport;\n\n      setStyle({\n        top,\n        left,\n        width,\n        height,\n      });\n    };\n\n    update();\n    visualViewport.addEventListener('resize', update);\n    visualViewport.addEventListener('scroll', update);\n\n    return () => {\n      visualViewport.removeEventListener('resize', update);\n      visualViewport.removeEventListener('scroll', update);\n    };\n  }, []);\n\n  return style;\n}\n\nexport function trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n  if (e.key !== 'Tab') {\n    return;\n  }\n\n  const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n  if (!focusable.length) {\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"],"mappings":"uBAEA,IAAa,EACX,2IAQF,SAAgB,GAAmC,CACjD,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAAoC,EAAE,CAAC,CA8BrD,OA5BA,EAAA,EAAA,eAAgB,CACd,GAAM,CAAE,kBAAmB,OAE3B,GAAI,CAAC,EACH,OAGF,IAAM,MAAqB,CACzB,GAAM,CAAE,WAAY,EAAM,UAAW,EAAK,QAAO,UAAW,EAE5D,EAAS,CACP,MACA,OACA,QACA,SACD,CAAC,EAOJ,OAJA,GAAQ,CACR,EAAe,iBAAiB,SAAU,EAAO,CACjD,EAAe,iBAAiB,SAAU,EAAO,KAEpC,CACX,EAAe,oBAAoB,SAAU,EAAO,CACpD,EAAe,oBAAoB,SAAU,EAAO,GAErD,EAAE,CAAC,CAEC,EAGT,SAAgB,EAAU,EAAkC,EAAuC,CACjG,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,2IAAwC,EAAI,EAAE,CAAC,CAEzF,GAAI,CAAC,EAAU,OACb,OAGF,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GAEtC,EAAE,SACA,SAAS,gBAAkB,IAC7B,EAAE,gBAAgB,CAClB,EAAK,OAAO,EAGV,SAAS,gBAAkB,IAC7B,EAAE,gBAAgB,CAClB,EAAM,OAAO"}
+{"version":3,"file":"dialogUtils.cjs","names":[],"sources":["../../../src/components/Dialog/dialogUtils.ts"],"sourcesContent":["import { type CSSProperties, type KeyboardEvent, type RefObject, useEffect, useState } from 'react';\n\nexport const FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns inline styles that anchor a `position:fixed` backdrop to the visual\n * viewport so the dialog stays centered when the virtual keyboard is open on\n * mobile (iOS Safari / Android Chrome shrink `visualViewport` but not the\n * layout viewport that `position:fixed` is relative to).\n */\nexport function useVisualViewport(): CSSProperties {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useEffect(() => {\n    const { visualViewport } = window;\n\n    if (!visualViewport) {\n      return;\n    }\n\n    const update = (): void => {\n      const { offsetLeft: left, offsetTop: top, width, height } = visualViewport;\n\n      setStyle({\n        top,\n        left,\n        width,\n        height,\n      });\n    };\n\n    update();\n    visualViewport.addEventListener('resize', update);\n    visualViewport.addEventListener('scroll', update);\n\n    return () => {\n      visualViewport.removeEventListener('resize', update);\n      visualViewport.removeEventListener('scroll', update);\n    };\n  }, []);\n\n  return style;\n}\n\nexport function trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n  if (e.key !== 'Tab') {\n    return;\n  }\n\n  const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n  if (!focusable.length) {\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"],"mappings":"uBAEA,IAAa,EACX,2IAQF,SAAgB,GAAmC,CACjD,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAAoC,CAAC,CAAC,EA8BpD,OA5BA,EAAA,EAAA,eAAgB,CACd,GAAM,CAAE,kBAAmB,OAE3B,GAAI,CAAC,EACH,OAGF,IAAM,MAAqB,CACzB,GAAM,CAAE,WAAY,EAAM,UAAW,EAAK,QAAO,UAAW,EAE5D,EAAS,CACP,MACA,OACA,QACA,QACF,CAAC,CACH,EAMA,OAJA,EAAO,EACP,EAAe,iBAAiB,SAAU,CAAM,EAChD,EAAe,iBAAiB,SAAU,CAAM,MAEnC,CACX,EAAe,oBAAoB,SAAU,CAAM,EACnD,EAAe,oBAAoB,SAAU,CAAM,CACrD,CACF,EAAG,CAAC,CAAC,EAEE,CACT,CAEA,SAAgB,EAAU,EAAkC,EAAuC,CACjG,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,0IAAuC,GAAK,CAAC,CAAC,EAExF,GAAI,CAAC,EAAU,OACb,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"}

package/dist/components/Dialog/dialogUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialogUtils.js","names":[],"sources":["../../../src/components/Dialog/dialogUtils.ts"],"sourcesContent":["import { type CSSProperties, type KeyboardEvent, type RefObject, useEffect, useState } from 'react';\n\nexport const FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns inline styles that anchor a `position:fixed` backdrop to the visual\n * viewport so the dialog stays centered when the virtual keyboard is open on\n * mobile (iOS Safari / Android Chrome shrink `visualViewport` but not the\n * layout viewport that `position:fixed` is relative to).\n */\nexport function useVisualViewport(): CSSProperties {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useEffect(() => {\n    const { visualViewport } = window;\n\n    if (!visualViewport) {\n      return;\n    }\n\n    const update = (): void => {\n      const { offsetLeft: left, offsetTop: top, width, height } = visualViewport;\n\n      setStyle({\n        top,\n        left,\n        width,\n        height,\n      });\n    };\n\n    update();\n    visualViewport.addEventListener('resize', update);\n    visualViewport.addEventListener('scroll', update);\n\n    return () => {\n      visualViewport.removeEventListener('resize', update);\n      visualViewport.removeEventListener('scroll', update);\n    };\n  }, []);\n\n  return style;\n}\n\nexport function trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n  if (e.key !== 'Tab') {\n    return;\n  }\n\n  const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n  if (!focusable.length) {\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"],"mappings":";;AAEA,IAAa,IACX;AAQF,SAAgB,IAAmC;CACjD,IAAM,CAAC,GAAO,KAAY,EAAwB,EAAE,CAAC;AA8BrD,QA5BA,QAAgB;EACd,IAAM,EAAE,sBAAmB;AAE3B,MAAI,CAAC,EACH;EAGF,IAAM,UAAqB;GACzB,IAAM,EAAE,YAAY,GAAM,WAAW,GAAK,UAAO,cAAW;AAE5D,KAAS;IACP;IACA;IACA;IACA;IACD,CAAC;;AAOJ,SAJA,GAAQ,EACR,EAAe,iBAAiB,UAAU,EAAO,EACjD,EAAe,iBAAiB,UAAU,EAAO,QAEpC;AAEX,GADA,EAAe,oBAAoB,UAAU,EAAO,EACpD,EAAe,oBAAoB,UAAU,EAAO;;IAErD,EAAE,CAAC,EAEC;;AAGT,SAAgB,EAAU,GAAkC,GAAuC;AACjG,KAAI,EAAE,QAAQ,MACZ;CAGF,IAAM,IAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,6IAAwC,IAAI,EAAE,CAAC;AAEzF,KAAI,CAAC,EAAU,OACb;CAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;AAE1C,CAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAK,OAAO,IAGV,SAAS,kBAAkB,MAC7B,EAAE,gBAAgB,EAClB,EAAM,OAAO"}
+{"version":3,"file":"dialogUtils.js","names":[],"sources":["../../../src/components/Dialog/dialogUtils.ts"],"sourcesContent":["import { type CSSProperties, type KeyboardEvent, type RefObject, useEffect, useState } from 'react';\n\nexport const FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Returns inline styles that anchor a `position:fixed` backdrop to the visual\n * viewport so the dialog stays centered when the virtual keyboard is open on\n * mobile (iOS Safari / Android Chrome shrink `visualViewport` but not the\n * layout viewport that `position:fixed` is relative to).\n */\nexport function useVisualViewport(): CSSProperties {\n  const [style, setStyle] = useState<CSSProperties>({});\n\n  useEffect(() => {\n    const { visualViewport } = window;\n\n    if (!visualViewport) {\n      return;\n    }\n\n    const update = (): void => {\n      const { offsetLeft: left, offsetTop: top, width, height } = visualViewport;\n\n      setStyle({\n        top,\n        left,\n        width,\n        height,\n      });\n    };\n\n    update();\n    visualViewport.addEventListener('resize', update);\n    visualViewport.addEventListener('scroll', update);\n\n    return () => {\n      visualViewport.removeEventListener('resize', update);\n      visualViewport.removeEventListener('scroll', update);\n    };\n  }, []);\n\n  return style;\n}\n\nexport function trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n  if (e.key !== 'Tab') {\n    return;\n  }\n\n  const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n  if (!focusable.length) {\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"],"mappings":";;AAEA,IAAa,IACX;AAQF,SAAgB,IAAmC;CACjD,IAAM,CAAC,GAAO,KAAY,EAAwB,CAAC,CAAC;CA8BpD,OA5BA,QAAgB;EACd,IAAM,EAAE,sBAAmB;EAE3B,IAAI,CAAC,GACH;EAGF,IAAM,UAAqB;GACzB,IAAM,EAAE,YAAY,GAAM,WAAW,GAAK,UAAO,cAAW;GAE5D,EAAS;IACP;IACA;IACA;IACA;GACF,CAAC;EACH;EAMA,OAJA,EAAO,GACP,EAAe,iBAAiB,UAAU,CAAM,GAChD,EAAe,iBAAiB,UAAU,CAAM,SAEnC;GAEX,AADA,EAAe,oBAAoB,UAAU,CAAM,GACnD,EAAe,oBAAoB,UAAU,CAAM;EACrD;CACF,GAAG,CAAC,CAAC,GAEE;AACT;AAEA,SAAgB,EAAU,GAAkC,GAAuC;CACjG,IAAI,EAAE,QAAQ,OACZ;CAGF,IAAM,IAAY,MAAM,KAAK,EAAI,SAAS,iBAAA,4IAAuC,KAAK,CAAC,CAAC;CAExF,IAAI,CAAC,EAAU,QACb;CAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;CAE1C,AAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAK,MAAM,KAGT,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAM,MAAM;AAGlB"}

package/dist/components/Dialog.cjs

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

package/dist/components/Drawer/Drawer.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Dialog/dialogUtils.cjs`),t=require(`../Button/Button.cjs`),n=require(`./Drawer.module.css.cjs`);let r=require(`react`),i=require(`react-dom`),a=require(`react/jsx-runtime`);function o({open:o,side:s=`right`,size:c=`classic`,title:l,content:u,children:d,onClose:f,closeOnBackdrop:p=!0,className:m,...h}){let g=(0,r.useRef)(null),_=(0,r.useId)(),v=(0,r.useRef)(null),y=e.useVisualViewport(),b=u===void 0?d:u;(0,r.useEffect)(()=>{o?(v.current=document.activeElement,g.current?.querySelector(e.FOCUSABLE)?.focus()):v.current?.focus()},[o]);let x=(0,r.useCallback)(t=>{if(t.key===`Escape`){t.preventDefault(),f?.();return}e.trapFocus(t,g)},[f]);if(!o)return null;let S=(0,a.jsx)(`div`,{className:n.default.backdrop,style:y,onClick:p?f:void 0,children:(0,a.jsxs)(`div`,{ref:g,role:`dialog`,"aria-modal":`true`,"aria-labelledby":l?_:void 0,"data-side":s,"data-size":c,className:[n.default.drawer,s===`left`?n.default.left:n.default.right,c===`wide`?n.default.wide:n.default.classic,m].filter(Boolean).join(` `),onKeyDown:x,onClick:e=>e.stopPropagation(),...h,children:[l&&(0,a.jsxs)(`div`,{id:_,className:n.default.title,children:[(0,a.jsx)(`span`,{className:n.default.titleText,children:l}),f&&(0,a.jsx)(t.Button,{variant:`flat`,shape:`circular`,size:`sm`,"aria-label":`Close`,onClick:f,children:`✕`})]}),b!==void 0&&(0,a.jsx)(`div`,{className:n.default.content,children:b})]})});return typeof document>`u`?S:(0,i.createPortal)(S,document.body)}exports.Drawer=o;
+const e=require("../Dialog/dialogUtils.cjs"),t=require("../Button/Button.cjs"),n=require("./Drawer.module.css.cjs");let r=require("react"),i=require("react-dom"),a=require("react/jsx-runtime");var o=({open:o,side:s=`right`,size:c=`classic`,title:l,content:u,children:d,onClose:f,closeOnBackdrop:p=!0,className:m,...h})=>{let g=(0,r.useRef)(null),_=(0,r.useId)(),v=(0,r.useRef)(null),y=e.useVisualViewport(),b=u===void 0?d:u;(0,r.useEffect)(()=>{o?(v.current=document.activeElement,g.current?.querySelector(e.FOCUSABLE)?.focus()):v.current?.focus()},[o]);let x=(0,r.useCallback)(t=>{if(t.key===`Escape`){t.preventDefault(),f?.();return}e.trapFocus(t,g)},[f]);if(!o)return null;let S=(0,a.jsx)(`div`,{className:n.default.backdrop,style:y,onClick:p?f:void 0,children:(0,a.jsxs)(`div`,{ref:g,role:`dialog`,"aria-modal":`true`,"aria-labelledby":l?_:void 0,"data-side":s,"data-size":c,className:[n.default.drawer,s===`left`?n.default.left:n.default.right,c===`wide`?n.default.wide:n.default.classic,m].filter(Boolean).join(` `),onKeyDown:x,onClick:e=>e.stopPropagation(),...h,children:[l&&(0,a.jsxs)(`div`,{id:_,className:n.default.title,children:[(0,a.jsx)(`span`,{className:n.default.titleText,children:l}),f&&(0,a.jsx)(t.Button,{variant:`flat`,shape:`circular`,size:`sm`,"aria-label":`Close`,onClick:f,children:`✕`})]}),b!==void 0&&(0,a.jsx)(`div`,{className:n.default.content,children:b})]})});return typeof document>`u`?S:(0,i.createPortal)(S,document.body)};exports.Drawer=o;
 //# sourceMappingURL=Drawer.cjs.map

package/dist/components/Drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.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 { Button } from '../Button/Button';\nimport { FOCUSABLE, trapFocus, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './Drawer.module.css';\n\nexport type DrawerSide = 'left' | 'right';\nexport type DrawerSize = 'classic' | 'wide';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'title'> {\n  /** Whether the drawer is visible. */\n  open: boolean;\n  /** Edge that the drawer slides in from. Defaults to `\"right\"`. */\n  side?: DrawerSide;\n  /** Preset drawer width. Defaults to `\"classic\"`. */\n  size?: DrawerSize;\n  /** Optional drawer heading. */\n  title?: ReactNode;\n  /** Drawer content when a prop is preferred over `children`. */\n  content?: ReactNode;\n  /** Drawer content. Used when `content` is not provided. */\n  children?: ReactNode;\n  /** Called when the user dismisses the drawer with Escape or the backdrop. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the drawer. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-over panel for supplementary content.\n *\n * The drawer is controlled through `open`, renders into `document.body`, and\n * accepts its body as either `content` or `children`.\n */\nexport function Drawer({\n  open,\n  side = 'right',\n  size = 'classic',\n  title,\n  content,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: DrawerProps) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const body = content !== undefined ? content : children;\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      drawerRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      trapFocus(event, drawerRef);\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        data-side={side}\n        data-size={size}\n        className={[\n          styles.drawer,\n          side === 'left' ? styles.left : styles.right,\n          size === 'wide' ? styles.wide : styles.classic,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(event) => event.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            <span className={styles.titleText}>{title}</span>\n            {onClose && (\n              <Button\n                variant=\"flat\"\n                shape=\"circular\"\n                size=\"sm\"\n                aria-label=\"Close\"\n                onClick={onClose}\n              >\n                ✕\n              </Button>\n            )}\n          </div>\n        )}\n        {body !== undefined && <div className={styles.content}>{body}</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":"iMA6CA,SAAgB,EAAO,CACrB,OACA,OAAO,QACP,OAAO,UACP,QACA,UACA,WACA,UACA,kBAAkB,GAClB,YACA,GAAG,GACW,CACd,IAAM,GAAA,EAAA,EAAA,QAAmC,KAAK,CACxC,GAAA,EAAA,EAAA,QAAiB,CACjB,GAAA,EAAA,EAAA,QAA2C,KAAK,CAChD,EAAgB,EAAA,mBAAmB,CACnC,EAAO,IAAY,IAAA,GAAsB,EAAV,GAErC,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,cACrC,EAAU,SAAS,cAA2B,EAAA,UAAU,EAAE,OAAO,EAEhE,EAAkB,SAAgC,OAAO,EAE3D,CAAC,EAAK,CAAC,CAEV,IAAM,GAAA,EAAA,EAAA,aACH,GAAyC,CACxC,GAAI,EAAM,MAAQ,SAAU,CAC1B,EAAM,gBAAgB,CACtB,KAAW,CAEX,OAGF,EAAA,UAAU,EAAO,EAAU,EAE7B,CAAC,EAAQ,CACV,CAED,GAAI,CAAC,EACH,OAAO,KAGT,IAAM,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,QAAO,SAClB,MAAO,EACP,QAAS,EAAkB,EAAU,IAAA,aAErC,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,YAAW,EACX,YAAW,EACX,UAAW,CACT,EAAA,QAAO,OACP,IAAS,OAAS,EAAA,QAAO,KAAO,EAAA,QAAO,MACvC,IAAS,OAAS,EAAA,QAAO,KAAO,EAAA,QAAO,QACvC,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,UAAW,EACX,QAAU,GAAU,EAAM,iBAAiB,CAC3C,GAAI,WAjBN,CAmBG,IACC,EAAA,EAAA,MAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,eAApC,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,EAAa,CAAA,CAChD,IACC,EAAA,EAAA,KAAC,EAAA,OAAD,CACE,QAAQ,OACR,MAAM,WACN,KAAK,KACL,aAAW,QACX,QAAS,WACV,IAEQ,CAAA,CAEP,GAEP,IAAS,IAAA,KAAa,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,EAAW,CAAA,CAC/D,GACF,CAAA,CAOR,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,KAAK"}
+{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/Drawer/Drawer.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 { Button } from '../Button/Button';\nimport { FOCUSABLE, trapFocus, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './Drawer.module.css';\n\nexport type DrawerSide = 'left' | 'right';\nexport type DrawerSize = 'classic' | 'wide';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'title'> {\n  /** Whether the drawer is visible. */\n  open: boolean;\n  /** Edge that the drawer slides in from. Defaults to `\"right\"`. */\n  side?: DrawerSide;\n  /** Preset drawer width. Defaults to `\"classic\"`. */\n  size?: DrawerSize;\n  /** Optional drawer heading. */\n  title?: ReactNode;\n  /** Drawer content when a prop is preferred over `children`. */\n  content?: ReactNode;\n  /** Drawer content. Used when `content` is not provided. */\n  children?: ReactNode;\n  /** Called when the user dismisses the drawer with Escape or the backdrop. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the drawer. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-over panel for supplementary content.\n *\n * The drawer is controlled through `open`, renders into `document.body`, and\n * accepts its body as either `content` or `children`.\n */\nexport const Drawer = ({\n  open,\n  side = 'right',\n  size = 'classic',\n  title,\n  content,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: DrawerProps) => {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const body = content !== undefined ? content : children;\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      drawerRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      trapFocus(event, drawerRef);\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        data-side={side}\n        data-size={size}\n        className={[\n          styles.drawer,\n          side === 'left' ? styles.left : styles.right,\n          size === 'wide' ? styles.wide : styles.classic,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(event) => event.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            <span className={styles.titleText}>{title}</span>\n            {onClose && (\n              <Button\n                variant=\"flat\"\n                shape=\"circular\"\n                size=\"sm\"\n                aria-label=\"Close\"\n                onClick={onClose}\n              >\n                ✕\n              </Button>\n            )}\n          </div>\n        )}\n        {body !== undefined && <div className={styles.content}>{body}</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":"iMA6CA,IAAa,GAAU,CACrB,OACA,OAAO,QACP,OAAO,UACP,QACA,UACA,WACA,UACA,kBAAkB,GAClB,YACA,GAAG,KACc,CACjB,IAAM,GAAA,EAAA,EAAA,QAAmC,IAAI,EACvC,GAAA,EAAA,EAAA,OAAgB,EAChB,GAAA,EAAA,EAAA,QAA2C,IAAI,EAC/C,EAAgB,EAAA,kBAAkB,EAClC,EAAO,IAAY,IAAA,GAAsB,EAAV,GAErC,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,cACrC,EAAU,SAAS,cAA2B,EAAA,SAAS,GAAG,MAAM,GAEhE,EAAmB,SAAgC,MAAM,CAE7D,EAAG,CAAC,CAAI,CAAC,EAET,IAAM,GAAA,EAAA,EAAA,aACH,GAAyC,CACxC,GAAI,EAAM,MAAQ,SAAU,CAC1B,EAAM,eAAe,EACrB,IAAU,EAEV,MACF,CAEA,EAAA,UAAU,EAAO,CAAS,CAC5B,EACA,CAAC,CAAO,CACV,EAEA,GAAI,CAAC,EACH,OAAO,KAGT,IAAM,GACJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,QAAO,SAClB,MAAO,EACP,QAAS,EAAkB,EAAU,IAAA,aAErC,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,EAAU,IAAA,GACnC,YAAW,EACX,YAAW,EACX,UAAW,CACT,EAAA,QAAO,OACP,IAAS,OAAS,EAAA,QAAO,KAAO,EAAA,QAAO,MACvC,IAAS,OAAS,EAAA,QAAO,KAAO,EAAA,QAAO,QACvC,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,UAAW,EACX,QAAU,GAAU,EAAM,gBAAgB,EAC1C,GAAI,WAjBN,CAmBG,IACC,EAAA,EAAA,MAAC,MAAD,CAAK,GAAI,EAAS,UAAW,EAAA,QAAO,eAApC,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAY,CAAY,CAAA,EAC/C,IACC,EAAA,EAAA,KAAC,EAAA,OAAD,CACE,QAAQ,OACR,MAAM,WACN,KAAK,KACL,aAAW,QACX,QAAS,WACV,GAEO,CAAA,CAEP,IAEN,IAAS,IAAA,KAAa,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,iBAAU,CAAU,CAAA,CAC/D,GACF,CAAA,EAOP,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,IAAI,CACzC"}

package/dist/components/Drawer/Drawer.d.ts

@@ -25,4 +25,4 @@ export interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'conte
  * The drawer is controlled through `open`, renders into `document.body`, and
  * accepts its body as either `content` or `children`.
  */
-export declare function Drawer({ open, side, size, title, content, children, onClose, closeOnBackdrop, className, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const Drawer: ({ open, side, size, title, content, children, onClose, closeOnBackdrop, className, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Drawer/Drawer.js

@@ -5,7 +5,7 @@ import { useCallback as a, useEffect as o, useId as s, useRef as c } from "react
 import { createPortal as l } from "react-dom";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/Drawer/Drawer.tsx
-function f({ open: f, side: p = "right", size: m = "classic", title: h, content: g, children: _, onClose: v, closeOnBackdrop: y = !0, className: b, ...x }) {
+var f = ({ open: f, side: p = "right", size: m = "classic", title: h, content: g, children: _, onClose: v, closeOnBackdrop: y = !0, className: b, ...x }) => {
 	let S = c(null), C = s(), w = c(null), T = n(), E = g === void 0 ? _ : g;
 	o(() => {
 		f ? (w.current = document.activeElement, S.current?.querySelector(e)?.focus()) : w.current?.focus();
@@ -59,7 +59,7 @@ function f({ open: f, side: p = "right", size: m = "classic", title: h, content:
 		})
 	});
 	return typeof document > "u" ? O : l(O, document.body);
-}
+};
 //#endregion
 export { f as Drawer };
 

package/dist/components/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/Drawer/Drawer.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 { Button } from '../Button/Button';\nimport { FOCUSABLE, trapFocus, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './Drawer.module.css';\n\nexport type DrawerSide = 'left' | 'right';\nexport type DrawerSize = 'classic' | 'wide';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'title'> {\n  /** Whether the drawer is visible. */\n  open: boolean;\n  /** Edge that the drawer slides in from. Defaults to `\"right\"`. */\n  side?: DrawerSide;\n  /** Preset drawer width. Defaults to `\"classic\"`. */\n  size?: DrawerSize;\n  /** Optional drawer heading. */\n  title?: ReactNode;\n  /** Drawer content when a prop is preferred over `children`. */\n  content?: ReactNode;\n  /** Drawer content. Used when `content` is not provided. */\n  children?: ReactNode;\n  /** Called when the user dismisses the drawer with Escape or the backdrop. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the drawer. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-over panel for supplementary content.\n *\n * The drawer is controlled through `open`, renders into `document.body`, and\n * accepts its body as either `content` or `children`.\n */\nexport function Drawer({\n  open,\n  side = 'right',\n  size = 'classic',\n  title,\n  content,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: DrawerProps) {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const body = content !== undefined ? content : children;\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      drawerRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      trapFocus(event, drawerRef);\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        data-side={side}\n        data-size={size}\n        className={[\n          styles.drawer,\n          side === 'left' ? styles.left : styles.right,\n          size === 'wide' ? styles.wide : styles.classic,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(event) => event.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            <span className={styles.titleText}>{title}</span>\n            {onClose && (\n              <Button\n                variant=\"flat\"\n                shape=\"circular\"\n                size=\"sm\"\n                aria-label=\"Close\"\n                onClick={onClose}\n              >\n                ✕\n              </Button>\n            )}\n          </div>\n        )}\n        {body !== undefined && <div className={styles.content}>{body}</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":";;;;;;;AA6CA,SAAgB,EAAO,EACrB,SACA,UAAO,SACP,UAAO,WACP,UACA,YACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,KACW;CACd,IAAM,IAAY,EAAuB,KAAK,EACxC,IAAU,GAAO,EACjB,IAAoB,EAAuB,KAAK,EAChD,IAAgB,GAAmB,EACnC,IAAO,MAAY,KAAA,IAAsB,IAAV;AAErC,SAAgB;AACd,EAAI,KACF,EAAkB,UAAU,SAAS,eACrC,EAAU,SAAS,cAA2B,EAAU,EAAE,OAAO,IAEhE,EAAkB,SAAgC,OAAO;IAE3D,CAAC,EAAK,CAAC;CAEV,IAAM,IAAgB,GACnB,MAAyC;AACxC,MAAI,EAAM,QAAQ,UAAU;AAE1B,GADA,EAAM,gBAAgB,EACtB,KAAW;AAEX;;AAGF,IAAU,GAAO,EAAU;IAE7B,CAAC,EAAQ,CACV;AAED,KAAI,CAAC,EACH,QAAO;CAGT,IAAM,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;EACP,SAAS,IAAkB,IAAU,KAAA;YAErC,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,aAAW;GACX,aAAW;GACX,WAAW;IACT,EAAO;IACP,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC;IACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,WAAW;GACX,UAAU,MAAU,EAAM,iBAAiB;GAC3C,GAAI;aAjBN,CAmBG,KACC,kBAAC,OAAD;IAAK,IAAI;IAAS,WAAW,EAAO;cAApC,CACE,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAY;KAAa,CAAA,EAChD,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,cAAW;KACX,SAAS;eACV;KAEQ,CAAA,CAEP;OAEP,MAAS,KAAA,KAAa,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAU;IAAW,CAAA,CAC/D;;EACF,CAAA;AAOR,QAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,KAAK"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/Drawer/Drawer.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 { Button } from '../Button/Button';\nimport { FOCUSABLE, trapFocus, useVisualViewport } from '../Dialog/dialogUtils';\n\nimport styles from './Drawer.module.css';\n\nexport type DrawerSide = 'left' | 'right';\nexport type DrawerSize = 'classic' | 'wide';\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'title'> {\n  /** Whether the drawer is visible. */\n  open: boolean;\n  /** Edge that the drawer slides in from. Defaults to `\"right\"`. */\n  side?: DrawerSide;\n  /** Preset drawer width. Defaults to `\"classic\"`. */\n  size?: DrawerSize;\n  /** Optional drawer heading. */\n  title?: ReactNode;\n  /** Drawer content when a prop is preferred over `children`. */\n  content?: ReactNode;\n  /** Drawer content. Used when `content` is not provided. */\n  children?: ReactNode;\n  /** Called when the user dismisses the drawer with Escape or the backdrop. */\n  onClose?: () => void;\n  /** Whether clicking the backdrop closes the drawer. Defaults to `true`. */\n  closeOnBackdrop?: boolean;\n}\n\n/**\n * Slide-over panel for supplementary content.\n *\n * The drawer is controlled through `open`, renders into `document.body`, and\n * accepts its body as either `content` or `children`.\n */\nexport const Drawer = ({\n  open,\n  side = 'right',\n  size = 'classic',\n  title,\n  content,\n  children,\n  onClose,\n  closeOnBackdrop = true,\n  className,\n  ...props\n}: DrawerProps) => {\n  const drawerRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const previouslyFocused = useRef<Element | null>(null);\n  const viewportStyle = useVisualViewport();\n  const body = content !== undefined ? content : children;\n\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      drawerRef.current?.querySelector<HTMLElement>(FOCUSABLE)?.focus();\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        onClose?.();\n\n        return;\n      }\n\n      trapFocus(event, drawerRef);\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  const node = (\n    <div\n      className={styles.backdrop}\n      style={viewportStyle}\n      onClick={closeOnBackdrop ? onClose : undefined}\n    >\n      <div\n        ref={drawerRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        data-side={side}\n        data-size={size}\n        className={[\n          styles.drawer,\n          side === 'left' ? styles.left : styles.right,\n          size === 'wide' ? styles.wide : styles.classic,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onKeyDown={handleKeyDown}\n        onClick={(event) => event.stopPropagation()}\n        {...props}\n      >\n        {title && (\n          <div id={titleId} className={styles.title}>\n            <span className={styles.titleText}>{title}</span>\n            {onClose && (\n              <Button\n                variant=\"flat\"\n                shape=\"circular\"\n                size=\"sm\"\n                aria-label=\"Close\"\n                onClick={onClose}\n              >\n                ✕\n              </Button>\n            )}\n          </div>\n        )}\n        {body !== undefined && <div className={styles.content}>{body}</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":";;;;;;;AA6CA,IAAa,KAAU,EACrB,SACA,UAAO,SACP,UAAO,WACP,UACA,YACA,aACA,YACA,qBAAkB,IAClB,cACA,GAAG,QACc;CACjB,IAAM,IAAY,EAAuB,IAAI,GACvC,IAAU,EAAM,GAChB,IAAoB,EAAuB,IAAI,GAC/C,IAAgB,EAAkB,GAClC,IAAO,MAAY,KAAA,IAAsB,IAAV;CAErC,QAAgB;EACd,AAAI,KACF,EAAkB,UAAU,SAAS,eACrC,EAAU,SAAS,cAA2B,CAAS,GAAG,MAAM,KAEhE,EAAmB,SAAgC,MAAM;CAE7D,GAAG,CAAC,CAAI,CAAC;CAET,IAAM,IAAgB,GACnB,MAAyC;EACxC,IAAI,EAAM,QAAQ,UAAU;GAE1B,AADA,EAAM,eAAe,GACrB,IAAU;GAEV;EACF;EAEA,EAAU,GAAO,CAAS;CAC5B,GACA,CAAC,CAAO,CACV;CAEA,IAAI,CAAC,GACH,OAAO;CAGT,IAAM,IACJ,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,OAAO;EACP,SAAS,IAAkB,IAAU,KAAA;YAErC,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB,IAAQ,IAAU,KAAA;GACnC,aAAW;GACX,aAAW;GACX,WAAW;IACT,EAAO;IACP,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC,MAAS,SAAS,EAAO,OAAO,EAAO;IACvC;GACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;GACX,WAAW;GACX,UAAU,MAAU,EAAM,gBAAgB;GAC1C,GAAI;aAjBN,CAmBG,KACC,kBAAC,OAAD;IAAK,IAAI;IAAS,WAAW,EAAO;cAApC,CACE,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAY;IAAY,CAAA,GAC/C,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,OAAM;KACN,MAAK;KACL,cAAW;KACX,SAAS;eACV;IAEO,CAAA,CAEP;OAEN,MAAS,KAAA,KAAa,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAU;GAAU,CAAA,CAC/D;;CACF,CAAA;CAOP,OAJI,OAAO,WAAa,MACf,IAGF,EAAa,GAAM,SAAS,IAAI;AACzC"}

package/dist/components/Drawer/Drawer.module.css.cjs

@@ -1,2 +1,2 @@
-var e=`_backdrop_z2wwe_3`,t=`_drawer_z2wwe_28`,n=`_classic_z2wwe_40`,r=`_wide_z2wwe_44`,i=`_left_z2wwe_48`,a=`_right_z2wwe_58`,o=`_title_z2wwe_86`,s=`_titleText_z2wwe_94`,c=`_content_z2wwe_104`,l={backdrop:e,"backdrop-in":`_backdrop-in_z2wwe_1`,drawer:t,classic:n,wide:r,left:i,"drawer-in-left":`_drawer-in-left_z2wwe_1`,right:a,"drawer-in-right":`_drawer-in-right_z2wwe_1`,title:o,titleText:s,content:c};exports.default=l;
+var e={backdrop:`_backdrop_z2wwe_3`,"backdrop-in":`_backdrop-in_z2wwe_1`,drawer:`_drawer_z2wwe_28`,classic:`_classic_z2wwe_40`,wide:`_wide_z2wwe_44`,left:`_left_z2wwe_48`,"drawer-in-left":`_drawer-in-left_z2wwe_1`,right:`_right_z2wwe_58`,"drawer-in-right":`_drawer-in-right_z2wwe_1`,title:`_title_z2wwe_86`,titleText:`_titleText_z2wwe_94`,content:`_content_z2wwe_104`};exports.default=e;
 //# sourceMappingURL=Drawer.module.css.cjs.map

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

@@ -1,19 +1,18 @@
-//#region src/components/Drawer/Drawer.module.css
-var e = "_backdrop_z2wwe_3", t = "_drawer_z2wwe_28", n = "_classic_z2wwe_40", r = "_wide_z2wwe_44", i = "_left_z2wwe_48", a = "_right_z2wwe_58", o = "_title_z2wwe_86", s = "_titleText_z2wwe_94", c = "_content_z2wwe_104", l = {
-	backdrop: e,
+var e = {
+	backdrop: "_backdrop_z2wwe_3",
 	"backdrop-in": "_backdrop-in_z2wwe_1",
-	drawer: t,
-	classic: n,
-	wide: r,
-	left: i,
+	drawer: "_drawer_z2wwe_28",
+	classic: "_classic_z2wwe_40",
+	wide: "_wide_z2wwe_44",
+	left: "_left_z2wwe_48",
 	"drawer-in-left": "_drawer-in-left_z2wwe_1",
-	right: a,
+	right: "_right_z2wwe_58",
 	"drawer-in-right": "_drawer-in-right_z2wwe_1",
-	title: o,
-	titleText: s,
-	content: c
+	title: "_title_z2wwe_86",
+	titleText: "_titleText_z2wwe_94",
+	content: "_content_z2wwe_104"
 };
 //#endregion
-export { l as default };
+export { e as default };
 
 //# sourceMappingURL=Drawer.module.css.js.map

package/dist/components/Drawer.cjs

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

package/dist/components/Dropdown/Dropdown.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`./Dropdown.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`),i=require(`@gnome-ui/icons`);function a({options:a,value:o,onChange:s,placeholder:c=`Select an option`,disabled:l,className:u,...d}){let[f,p]=(0,n.useState)(!1),[m,h]=(0,n.useState)(-1),[g,_]=(0,n.useState)(!1),v=(0,n.useId)(),y=(0,n.useId)(),b=(0,n.useRef)(null),x=(0,n.useRef)(null),S=a.find(e=>e.value===o),C=(0,n.useCallback)(()=>{if(!b.current)return;let e=b.current.getBoundingClientRect(),t=window.innerHeight-e.bottom,n=Math.min(a.length*48+8,280);_(t<n&&e.top>n)},[a.length]),w=(0,n.useCallback)(()=>{if(l)return;C(),p(!0);let e=a.findIndex(e=>e.value===o&&!e.disabled);h(e>=0?e:a.findIndex(e=>!e.disabled))},[l,C,a,o]),T=(0,n.useCallback)(()=>{p(!1),h(-1),b.current?.focus()},[]),E=(0,n.useCallback)(e=>{e.disabled||(s?.(e.value),T())},[s,T]);(0,n.useEffect)(()=>{!f||m<0||!x.current||x.current.children[m]?.scrollIntoView({block:`nearest`})},[m,f]),(0,n.useEffect)(()=>{if(!f)return;let e=e=>{!b.current?.contains(e.target)&&!x.current?.contains(e.target)&&T()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[f,T]);let D=(0,n.useCallback)(e=>{switch(e.key){case`Enter`:case` `:case`ArrowDown`:e.preventDefault(),w();break;case`ArrowUp`:e.preventDefault(),C(),p(!0),h(a.reduce((e,t,n)=>t.disabled?e:n,-1));break}},[w,C,a]),O=(0,n.useCallback)(e=>{let t=a.map((e,t)=>({o:e,i:t})).filter(({o:e})=>!e.disabled).map(({i:e})=>e),n=t.indexOf(m);switch(e.key){case`ArrowDown`:{e.preventDefault();let r=t[Math.min(n+1,t.length-1)];h(r??m);break}case`ArrowUp`:{e.preventDefault();let r=t[Math.max(n-1,0)];h(r??m);break}case`Home`:e.preventDefault(),h(t[0]??-1);break;case`End`:e.preventDefault(),h(t[t.length-1]??-1);break;case`Enter`:case` `:e.preventDefault(),m>=0&&E(a[m]);break;case`Escape`:case`Tab`:T();break}},[a,m,E,T]);return(0,r.jsxs)(`div`,{className:[t.default.wrapper,u].filter(Boolean).join(` `),...d,children:[(0,r.jsxs)(`button`,{ref:b,id:v,type:`button`,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":f,"aria-controls":y,"aria-activedescendant":f&&m>=0?`${y}-opt-${m}`:void 0,disabled:l,className:[t.default.trigger,f?t.default.triggerOpen:null].filter(Boolean).join(` `),onClick:()=>f?T():w(),onKeyDown:D,children:[(0,r.jsx)(`span`,{className:[t.default.triggerLabel,S?null:t.default.placeholder].filter(Boolean).join(` `),children:S?.label??c}),(0,r.jsx)(e.Icon,{icon:i.PanDown,size:`md`,"aria-hidden":!0,className:[t.default.chevron,f?t.default.chevronOpen:null].filter(Boolean).join(` `)})]}),f&&(0,r.jsx)(`ul`,{ref:x,id:y,role:`listbox`,"aria-labelledby":v,tabIndex:-1,className:[t.default.list,g?t.default.listUp:t.default.listDown].filter(Boolean).join(` `),onKeyDown:O,children:a.map((n,a)=>(0,r.jsxs)(`li`,{id:`${y}-opt-${a}`,role:`option`,"aria-selected":n.value===o,"aria-disabled":n.disabled,className:[t.default.option,n.value===o?t.default.optionSelected:null,a===m?t.default.optionActive:null,n.disabled?t.default.optionDisabled:null].filter(Boolean).join(` `),onMouseEnter:()=>!n.disabled&&h(a),onClick:()=>E(n),children:[(0,r.jsxs)(`span`,{className:t.default.optionText,children:[(0,r.jsx)(`span`,{className:t.default.optionLabel,children:n.label}),n.description&&(0,r.jsx)(`span`,{className:t.default.optionDesc,children:n.description})]}),n.value===o&&(0,r.jsx)(e.Icon,{icon:i.Check,size:`md`,"aria-hidden":!0,className:t.default.checkIcon})]},n.value))})]})}exports.Dropdown=a;
+const e=require("../Icon/Icon.cjs"),t=require("./Dropdown.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@gnome-ui/icons");var a=({options:a,value:o,onChange:s,placeholder:c=`Select an option`,disabled:l,className:u,...d})=>{let[f,p]=(0,n.useState)(!1),[m,h]=(0,n.useState)(-1),[g,_]=(0,n.useState)(!1),v=(0,n.useId)(),y=(0,n.useId)(),b=(0,n.useRef)(null),x=(0,n.useRef)(null),S=a.find(e=>e.value===o),C=(0,n.useCallback)(()=>{if(!b.current)return;let e=b.current.getBoundingClientRect(),t=window.innerHeight-e.bottom,n=Math.min(a.length*48+8,280);_(t<n&&e.top>n)},[a.length]),w=(0,n.useCallback)(()=>{if(l)return;C(),p(!0);let e=a.findIndex(e=>e.value===o&&!e.disabled);h(e>=0?e:a.findIndex(e=>!e.disabled))},[l,C,a,o]),T=(0,n.useCallback)(()=>{p(!1),h(-1),b.current?.focus()},[]),E=(0,n.useCallback)(e=>{e.disabled||(s?.(e.value),T())},[s,T]);(0,n.useEffect)(()=>{!f||m<0||!x.current||x.current.children[m]?.scrollIntoView({block:`nearest`})},[m,f]),(0,n.useEffect)(()=>{if(!f)return;let e=e=>{!b.current?.contains(e.target)&&!x.current?.contains(e.target)&&T()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[f,T]);let D=(0,n.useCallback)(e=>{switch(e.key){case`Enter`:case` `:case`ArrowDown`:e.preventDefault(),w();break;case`ArrowUp`:e.preventDefault(),C(),p(!0),h(a.reduce((e,t,n)=>t.disabled?e:n,-1));break}},[w,C,a]),O=(0,n.useCallback)(e=>{let t=a.map((e,t)=>({o:e,i:t})).filter(({o:e})=>!e.disabled).map(({i:e})=>e),n=t.indexOf(m);switch(e.key){case`ArrowDown`:{e.preventDefault();let r=t[Math.min(n+1,t.length-1)];h(r??m);break}case`ArrowUp`:{e.preventDefault();let r=t[Math.max(n-1,0)];h(r??m);break}case`Home`:e.preventDefault(),h(t[0]??-1);break;case`End`:e.preventDefault(),h(t[t.length-1]??-1);break;case`Enter`:case` `:e.preventDefault(),m>=0&&E(a[m]);break;case`Escape`:case`Tab`:T();break}},[a,m,E,T]);return(0,r.jsxs)(`div`,{className:[t.default.wrapper,u].filter(Boolean).join(` `),...d,children:[(0,r.jsxs)(`button`,{ref:b,id:v,type:`button`,role:`combobox`,"aria-haspopup":`listbox`,"aria-expanded":f,"aria-controls":y,"aria-activedescendant":f&&m>=0?`${y}-opt-${m}`:void 0,disabled:l,className:[t.default.trigger,f?t.default.triggerOpen:null].filter(Boolean).join(` `),onClick:()=>f?T():w(),onKeyDown:D,children:[(0,r.jsx)(`span`,{className:[t.default.triggerLabel,S?null:t.default.placeholder].filter(Boolean).join(` `),children:S?.label??c}),(0,r.jsx)(e.Icon,{icon:i.PanDown,size:`md`,"aria-hidden":!0,className:[t.default.chevron,f?t.default.chevronOpen:null].filter(Boolean).join(` `)})]}),f&&(0,r.jsx)(`ul`,{ref:x,id:y,role:`listbox`,"aria-labelledby":v,tabIndex:-1,className:[t.default.list,g?t.default.listUp:t.default.listDown].filter(Boolean).join(` `),onKeyDown:O,children:a.map((n,a)=>(0,r.jsxs)(`li`,{id:`${y}-opt-${a}`,role:`option`,"aria-selected":n.value===o,"aria-disabled":n.disabled,className:[t.default.option,n.value===o?t.default.optionSelected:null,a===m?t.default.optionActive:null,n.disabled?t.default.optionDisabled:null].filter(Boolean).join(` `),onMouseEnter:()=>!n.disabled&&h(a),onClick:()=>E(n),children:[(0,r.jsxs)(`span`,{className:t.default.optionText,children:[(0,r.jsx)(`span`,{className:t.default.optionLabel,children:n.label}),n.description&&(0,r.jsx)(`span`,{className:t.default.optionDesc,children:n.description})]}),n.value===o&&(0,r.jsx)(e.Icon,{icon:i.Check,size:`md`,"aria-hidden":!0,className:t.default.checkIcon})]},n.value))})]})};exports.Dropdown=a;
 //# sourceMappingURL=Dropdown.cjs.map