@gnome-ui/react 1.44.0 → 1.45.1

package/dist/components/ComboRow/ComboRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboRow.cjs","names":[],"sources":["../../../src/components/ComboRow/ComboRow.tsx"],"sourcesContent":["import { useState, useRef, useId, useEffect, useCallback, type HTMLAttributes, type KeyboardEvent, type ReactNode } from \"react\";\nimport styles from \"./ComboRow.module.css\";\n\nexport interface ComboRowOption<V extends string = string> {\n  value: V;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface ComboRowProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** The list of selectable options. */\n  options: ComboRowOption<V>[];\n  /** The currently selected value (controlled). */\n  value?: V;\n  /** Initial value when uncontrolled. */\n  defaultValue?: V;\n  /** Called when the user selects an option. */\n  onValueChange?: (value: V) => void;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\n/**\n * Settings row with an inline combo selector at the trailing edge.\n *\n * Mirrors `AdwComboRow` — a standard `ActionRow` layout with a dropdown\n * for choosing among a set of options. The dropdown opens inline in the row\n * and follows the same keyboard patterns as the standalone `Dropdown`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html\n */\nexport function ComboRow<V extends string = string>({\n  title,\n  subtitle,\n  leading,\n  options,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  ...props\n}: ComboRowProps<V>) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState<V | undefined>(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) return;\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 44 + 8, 260);\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) return;\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: ComboRowOption<V>) => {\n      if (opt.disabled) return;\n      if (!isControlled) setUncontrolledValue(opt.value);\n      onValueChange?.(opt.value);\n      closeList();\n    },\n    [isControlled, onValueChange, closeList],\n  );\n\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) return;\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n    item?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex, open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open, closeList]);\n\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case \"Enter\":\n        case \" \":\n        case \"ArrowDown\":\n          e.preventDefault();\n          openList();\n          break;\n        case \"ArrowUp\":\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(\n            options.reduce((last, o, i) => (!o.disabled ? i : last), -1),\n          );\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case \"ArrowDown\": {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case \"ArrowUp\": {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case \"Home\":\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case \"End\":\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case \"Enter\":\n        case \" \": {\n          e.preventDefault();\n          if (activeIndex >= 0) selectOption(options[activeIndex]);\n          break;\n        }\n        case \"Escape\":\n        case \"Tab\":\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Combo trigger button */}\n      <div className={styles.comboWrap}>\n        <button\n          ref={triggerRef}\n          id={triggerId}\n          type=\"button\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-controls={listboxId}\n          aria-activedescendant={\n            open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n          }\n          disabled={disabled}\n          className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(\" \")}\n          onClick={() => (open ? closeList() : openList())}\n          onKeyDown={handleTriggerKeyDown}\n        >\n          <span className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean).join(\" \")}>\n            {selected?.label ?? \"—\"}\n          </span>\n          <svg\n            className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(\" \")}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        {open && (\n          <ul\n            ref={listRef}\n            id={listboxId}\n            role=\"listbox\"\n            aria-labelledby={triggerId}\n            tabIndex={-1}\n            className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n              .filter(Boolean)\n              .join(\" \")}\n            onKeyDown={handleListKeyDown}\n          >\n            {options.map((opt, i) => (\n              <li\n                key={opt.value}\n                id={`${listboxId}-opt-${i}`}\n                role=\"option\"\n                aria-selected={opt.value === value}\n                aria-disabled={opt.disabled}\n                className={[\n                  styles.option,\n                  opt.value === value ? styles.optionSelected : null,\n                  i === activeIndex ? styles.optionActive : null,\n                  opt.disabled ? styles.optionDisabled : null,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n                onClick={() => selectOption(opt)}\n              >\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.value === value && (\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\" className={styles.checkIcon}>\n                    <path\n                      d=\"M3 8l4 4 6-6\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.75\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ComboRow.cjs","names":[],"sources":["../../../src/components/ComboRow/ComboRow.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './ComboRow.module.css';\n\nexport interface ComboRowOption<V extends string = string> {\n  value: V;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface ComboRowProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** The list of selectable options. */\n  options: ComboRowOption<V>[];\n  /** The currently selected value (controlled). */\n  value?: V;\n  /** Initial value when uncontrolled. */\n  defaultValue?: V;\n  /** Called when the user selects an option. */\n  onValueChange?: (value: V) => void;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\n/**\n * Settings row with an inline combo selector at the trailing edge.\n *\n * Mirrors `AdwComboRow` — a standard `ActionRow` layout with a dropdown\n * for choosing among a set of options. The dropdown opens inline in the row\n * and follows the same keyboard patterns as the standalone `Dropdown`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html\n */\nexport function ComboRow<V extends string = string>({\n  title,\n  subtitle,\n  leading,\n  options,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  ...props\n}: ComboRowProps<V>) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState<V | undefined>(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 44 + 8, 260);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: ComboRowOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(opt.value);\n      }\n\n      onValueChange?.(opt.value);\n      closeList();\n    },\n    [isControlled, onValueChange, closeList],\n  );\n\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Combo trigger button */}\n      <div className={styles.comboWrap}>\n        <button\n          ref={triggerRef}\n          id={triggerId}\n          type=\"button\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-controls={listboxId}\n          aria-activedescendant={\n            open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n          }\n          disabled={disabled}\n          className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n          onClick={() => (open ? closeList() : openList())}\n          onKeyDown={handleTriggerKeyDown}\n        >\n          <span\n            className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {selected?.label ?? '—'}\n          </span>\n          <svg\n            className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        {open && (\n          <ul\n            ref={listRef}\n            id={listboxId}\n            aria-labelledby={triggerId}\n            tabIndex={-1}\n            className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n              .filter(Boolean)\n              .join(' ')}\n            onKeyDown={handleListKeyDown}\n          >\n            {options.map((opt, i) => (\n              <li\n                key={opt.value}\n                id={`${listboxId}-opt-${i}`}\n                aria-selected={opt.value === value}\n                aria-disabled={opt.disabled}\n                className={[\n                  styles.option,\n                  opt.value === value ? styles.optionSelected : null,\n                  i === activeIndex ? styles.optionActive : null,\n                  opt.disabled ? styles.optionDisabled : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n                onClick={() => selectOption(opt)}\n              >\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.value === value && (\n                  <svg\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 16 16\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    className={styles.checkIcon}\n                  >\n                    <path\n                      d=\"M3 8l4 4 6-6\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.75\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/ComboRow/ComboRow.d.ts

@@ -4,7 +4,7 @@ export interface ComboRowOption<V extends string = string> {
     label: string;
     disabled?: boolean;
 }
-export interface ComboRowProps<V extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface ComboRowProps<V extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Primary label. */
     title: string;
     /** Secondary line below the title. */

package/dist/components/ComboRow/ComboRow.js

@@ -148,14 +148,12 @@ function c({ title: c, subtitle: l, leading: u, options: d, value: f, defaultVal
 				}), S && /* @__PURE__ */ o("ul", {
 					ref: j,
 					id: k,
-					role: "listbox",
 					"aria-labelledby": O,
 					tabIndex: -1,
 					className: [e.list, E ? e.listUp : e.listDown].filter(Boolean).join(" "),
 					onKeyDown: R,
 					children: d.map((t, n) => /* @__PURE__ */ s("li", {
 						id: `${k}-opt-${n}`,
-						role: "option",
 						"aria-selected": t.value === x,
 						"aria-disabled": t.disabled,
 						className: [

package/dist/components/ComboRow/ComboRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboRow.js","names":[],"sources":["../../../src/components/ComboRow/ComboRow.tsx"],"sourcesContent":["import { useState, useRef, useId, useEffect, useCallback, type HTMLAttributes, type KeyboardEvent, type ReactNode } from \"react\";\nimport styles from \"./ComboRow.module.css\";\n\nexport interface ComboRowOption<V extends string = string> {\n  value: V;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface ComboRowProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** The list of selectable options. */\n  options: ComboRowOption<V>[];\n  /** The currently selected value (controlled). */\n  value?: V;\n  /** Initial value when uncontrolled. */\n  defaultValue?: V;\n  /** Called when the user selects an option. */\n  onValueChange?: (value: V) => void;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\n/**\n * Settings row with an inline combo selector at the trailing edge.\n *\n * Mirrors `AdwComboRow` — a standard `ActionRow` layout with a dropdown\n * for choosing among a set of options. The dropdown opens inline in the row\n * and follows the same keyboard patterns as the standalone `Dropdown`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html\n */\nexport function ComboRow<V extends string = string>({\n  title,\n  subtitle,\n  leading,\n  options,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  ...props\n}: ComboRowProps<V>) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState<V | undefined>(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) return;\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 44 + 8, 260);\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) return;\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: ComboRowOption<V>) => {\n      if (opt.disabled) return;\n      if (!isControlled) setUncontrolledValue(opt.value);\n      onValueChange?.(opt.value);\n      closeList();\n    },\n    [isControlled, onValueChange, closeList],\n  );\n\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) return;\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n    item?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex, open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open, closeList]);\n\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case \"Enter\":\n        case \" \":\n        case \"ArrowDown\":\n          e.preventDefault();\n          openList();\n          break;\n        case \"ArrowUp\":\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(\n            options.reduce((last, o, i) => (!o.disabled ? i : last), -1),\n          );\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case \"ArrowDown\": {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case \"ArrowUp\": {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case \"Home\":\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case \"End\":\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case \"Enter\":\n        case \" \": {\n          e.preventDefault();\n          if (activeIndex >= 0) selectOption(options[activeIndex]);\n          break;\n        }\n        case \"Escape\":\n        case \"Tab\":\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Combo trigger button */}\n      <div className={styles.comboWrap}>\n        <button\n          ref={triggerRef}\n          id={triggerId}\n          type=\"button\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-controls={listboxId}\n          aria-activedescendant={\n            open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n          }\n          disabled={disabled}\n          className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(\" \")}\n          onClick={() => (open ? closeList() : openList())}\n          onKeyDown={handleTriggerKeyDown}\n        >\n          <span className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean).join(\" \")}>\n            {selected?.label ?? \"—\"}\n          </span>\n          <svg\n            className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(\" \")}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        {open && (\n          <ul\n            ref={listRef}\n            id={listboxId}\n            role=\"listbox\"\n            aria-labelledby={triggerId}\n            tabIndex={-1}\n            className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n              .filter(Boolean)\n              .join(\" \")}\n            onKeyDown={handleListKeyDown}\n          >\n            {options.map((opt, i) => (\n              <li\n                key={opt.value}\n                id={`${listboxId}-opt-${i}`}\n                role=\"option\"\n                aria-selected={opt.value === value}\n                aria-disabled={opt.disabled}\n                className={[\n                  styles.option,\n                  opt.value === value ? styles.optionSelected : null,\n                  i === activeIndex ? styles.optionActive : null,\n                  opt.disabled ? styles.optionDisabled : null,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n                onClick={() => selectOption(opt)}\n              >\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.value === value && (\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" focusable=\"false\" className={styles.checkIcon}>\n                    <path\n                      d=\"M3 8l4 4 6-6\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.75\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ComboRow.js","names":[],"sources":["../../../src/components/ComboRow/ComboRow.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './ComboRow.module.css';\n\nexport interface ComboRowOption<V extends string = string> {\n  value: V;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface ComboRowProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** The list of selectable options. */\n  options: ComboRowOption<V>[];\n  /** The currently selected value (controlled). */\n  value?: V;\n  /** Initial value when uncontrolled. */\n  defaultValue?: V;\n  /** Called when the user selects an option. */\n  onValueChange?: (value: V) => void;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\n/**\n * Settings row with an inline combo selector at the trailing edge.\n *\n * Mirrors `AdwComboRow` — a standard `ActionRow` layout with a dropdown\n * for choosing among a set of options. The dropdown opens inline in the row\n * and follows the same keyboard patterns as the standalone `Dropdown`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ComboRow.html\n */\nexport function ComboRow<V extends string = string>({\n  title,\n  subtitle,\n  leading,\n  options,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  disabled = false,\n  className,\n  ...props\n}: ComboRowProps<V>) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState<V | undefined>(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 44 + 8, 260);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: ComboRowOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      if (!isControlled) {\n        setUncontrolledValue(opt.value);\n      }\n\n      onValueChange?.(opt.value);\n      closeList();\n    },\n    [isControlled, onValueChange, closeList],\n  );\n\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Combo trigger button */}\n      <div className={styles.comboWrap}>\n        <button\n          ref={triggerRef}\n          id={triggerId}\n          type=\"button\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={open}\n          aria-controls={listboxId}\n          aria-activedescendant={\n            open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n          }\n          disabled={disabled}\n          className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n          onClick={() => (open ? closeList() : openList())}\n          onKeyDown={handleTriggerKeyDown}\n        >\n          <span\n            className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {selected?.label ?? '—'}\n          </span>\n          <svg\n            className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            aria-hidden=\"true\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </button>\n\n        {open && (\n          <ul\n            ref={listRef}\n            id={listboxId}\n            aria-labelledby={triggerId}\n            tabIndex={-1}\n            className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n              .filter(Boolean)\n              .join(' ')}\n            onKeyDown={handleListKeyDown}\n          >\n            {options.map((opt, i) => (\n              <li\n                key={opt.value}\n                id={`${listboxId}-opt-${i}`}\n                aria-selected={opt.value === value}\n                aria-disabled={opt.disabled}\n                className={[\n                  styles.option,\n                  opt.value === value ? styles.optionSelected : null,\n                  i === activeIndex ? styles.optionActive : null,\n                  opt.disabled ? styles.optionDisabled : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n                onClick={() => selectOption(opt)}\n              >\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.value === value && (\n                  <svg\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 16 16\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                    className={styles.checkIcon}\n                  >\n                    <path\n                      d=\"M3 8l4 4 6-6\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.75\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e=`_row_46mn8_3`,t=`_disabled_46mn8_16`,n=`_leading_46mn8_23`,r=`_content_46mn8_32`,i=`_title_46mn8_40`,a=`_subtitle_46mn8_51`,o=`_comboWrap_46mn8_65`,s=`_trigger_46mn8_73`,c=`_triggerOpen_46mn8_126`,l=`_triggerLabel_46mn8_136`,u=`_placeholder_46mn8_144`,d=`_chevron_46mn8_150`,f=`_chevronOpen_46mn8_157`,p=`_list_46mn8_163`,m=`_listDown_46mn8_192`,h=`_listUp_46mn8_196`,g=`_option_46mn8_208`,_=`_optionActive_46mn8_225`,v=`_optionSelected_46mn8_229`,y=`_optionDisabled_46mn8_233`,b=`_optionLabel_46mn8_239`,x=`_checkIcon_46mn8_247`,S={row:e,disabled:t,leading:n,content:r,title:i,subtitle:a,comboWrap:o,trigger:s,triggerOpen:c,triggerLabel:l,placeholder:u,chevron:d,chevronOpen:f,list:p,"list-in":`_list-in_46mn8_1`,listDown:m,listUp:h,"list-in-up":`_list-in-up_46mn8_1`,option:g,optionActive:_,optionSelected:v,optionDisabled:y,optionLabel:b,checkIcon:x};exports.default=S;
+var e=`_row_1rib3_3`,t=`_disabled_1rib3_16`,n=`_leading_1rib3_23`,r=`_content_1rib3_32`,i=`_title_1rib3_40`,a=`_subtitle_1rib3_51`,o=`_comboWrap_1rib3_65`,s=`_trigger_1rib3_73`,c=`_triggerOpen_1rib3_126`,l=`_triggerLabel_1rib3_136`,u=`_placeholder_1rib3_144`,d=`_chevron_1rib3_150`,f=`_chevronOpen_1rib3_157`,p=`_list_1rib3_163`,m=`_listDown_1rib3_200`,h=`_listUp_1rib3_204`,g=`_option_1rib3_224`,_=`_optionActive_1rib3_241`,v=`_optionSelected_1rib3_245`,y=`_optionDisabled_1rib3_249`,b=`_optionLabel_1rib3_255`,x=`_checkIcon_1rib3_263`,S={row:e,disabled:t,leading:n,content:r,title:i,subtitle:a,comboWrap:o,trigger:s,triggerOpen:c,triggerLabel:l,placeholder:u,chevron:d,chevronOpen:f,list:p,"list-in":`_list-in_1rib3_1`,listDown:m,listUp:h,"list-in-up":`_list-in-up_1rib3_1`,option:g,optionActive:_,optionSelected:v,optionDisabled:y,optionLabel:b,checkIcon:x};exports.default=S;
 //# sourceMappingURL=ComboRow.module.css.cjs.map

package/dist/components/ComboRow/ComboRow.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboRow.module.css.cjs","names":[],"sources":["../../../src/components/ComboRow/ComboRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: start;\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Combo wrapper ─────────────────────────────────────────────────────────── */\n\n.comboWrap {\n  position: relative;\n  flex-shrink: 0;\n  min-width: 120px;\n}\n\n/* ─── Trigger button ────────────────────────────────────────────────────────── */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n\n  padding: 5px var(--gnome-space-2, 12px);\n  min-height: 32px;\n\n  appearance: none;\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 90%, black 10%);\n}\n\n.trigger:focus {\n  outline: none;\n}\n\n.trigger:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.trigger:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.triggerOpen {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Trigger label ─────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron ───────────────────────────────────────────────────────────────── */\n\n.chevron {\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n/* ─── Listbox ───────────────────────────────────────────────────────────────── */\n\n.list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n\n  margin: 0;\n  padding: 4px 0;\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow:\n    0 4px 16px rgba(0, 0, 0, 0.12),\n    0 1px 3px rgba(0, 0, 0, 0.08);\n\n  max-height: 260px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  animation: list-in var(--gnome-duration-fast) var(--gnome-easing-default) both;\n}\n\n@keyframes list-in {\n  from { opacity: 0; transform: scaleY(0.95); transform-origin: top center; }\n  to   { opacity: 1; transform: scaleY(1);    transform-origin: top center; }\n}\n\n.listDown {\n  top: calc(100% + 4px);\n}\n\n.listUp {\n  bottom: calc(100% + 4px);\n  animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n  from { opacity: 0; transform: scaleY(0.95); transform-origin: bottom center; }\n  to   { opacity: 1; transform: scaleY(1);    transform-origin: bottom center; }\n}\n\n/* ─── Option ────────────────────────────────────────────────────────────────── */\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 6px var(--gnome-space-2, 12px);\n  min-height: 36px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.optionActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.optionLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.checkIcon {\n  flex-shrink: 0;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .trigger {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .trigger:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 16px rgba(0, 0, 0, 0.4),\n      0 1px 3px rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .trigger,\n  .chevron {\n    transition: none;\n  }\n\n  .list {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ComboRow.module.css.cjs","names":[],"sources":["../../../src/components/ComboRow/ComboRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: start;\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Combo wrapper ─────────────────────────────────────────────────────────── */\n\n.comboWrap {\n  position: relative;\n  flex-shrink: 0;\n  min-width: 120px;\n}\n\n/* ─── Trigger button ────────────────────────────────────────────────────────── */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n\n  padding: 5px var(--gnome-space-2, 12px);\n  min-height: 32px;\n\n  appearance: none;\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 90%, black 10%);\n}\n\n.trigger:focus {\n  outline: none;\n}\n\n.trigger:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.trigger:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.triggerOpen {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Trigger label ─────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron ───────────────────────────────────────────────────────────────── */\n\n.chevron {\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n/* ─── Listbox ───────────────────────────────────────────────────────────────── */\n\n.list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n\n  margin: 0;\n  padding: 4px 0;\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow:\n    0 4px 16px rgba(0, 0, 0, 0.12),\n    0 1px 3px rgba(0, 0, 0, 0.08);\n\n  max-height: 260px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  animation: list-in var(--gnome-duration-fast) var(--gnome-easing-default) both;\n}\n\n@keyframes list-in {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: top center;\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: top center;\n  }\n}\n\n.listDown {\n  top: calc(100% + 4px);\n}\n\n.listUp {\n  bottom: calc(100% + 4px);\n  animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: bottom center;\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: bottom center;\n  }\n}\n\n/* ─── Option ────────────────────────────────────────────────────────────────── */\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 6px var(--gnome-space-2, 12px);\n  min-height: 36px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.optionActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.optionLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.checkIcon {\n  flex-shrink: 0;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .trigger {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .trigger:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 16px rgba(0, 0, 0, 0.4),\n      0 1px 3px rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .trigger,\n  .chevron {\n    transition: none;\n  }\n\n  .list {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,5 +1,5 @@
 //#region src/components/ComboRow/ComboRow.module.css
-var e = "_row_46mn8_3", t = "_disabled_46mn8_16", n = "_leading_46mn8_23", r = "_content_46mn8_32", i = "_title_46mn8_40", a = "_subtitle_46mn8_51", o = "_comboWrap_46mn8_65", s = "_trigger_46mn8_73", c = "_triggerOpen_46mn8_126", l = "_triggerLabel_46mn8_136", u = "_placeholder_46mn8_144", d = "_chevron_46mn8_150", f = "_chevronOpen_46mn8_157", p = "_list_46mn8_163", m = "_listDown_46mn8_192", h = "_listUp_46mn8_196", g = "_option_46mn8_208", _ = "_optionActive_46mn8_225", v = "_optionSelected_46mn8_229", y = "_optionDisabled_46mn8_233", b = "_optionLabel_46mn8_239", x = "_checkIcon_46mn8_247", S = {
+var e = "_row_1rib3_3", t = "_disabled_1rib3_16", n = "_leading_1rib3_23", r = "_content_1rib3_32", i = "_title_1rib3_40", a = "_subtitle_1rib3_51", o = "_comboWrap_1rib3_65", s = "_trigger_1rib3_73", c = "_triggerOpen_1rib3_126", l = "_triggerLabel_1rib3_136", u = "_placeholder_1rib3_144", d = "_chevron_1rib3_150", f = "_chevronOpen_1rib3_157", p = "_list_1rib3_163", m = "_listDown_1rib3_200", h = "_listUp_1rib3_204", g = "_option_1rib3_224", _ = "_optionActive_1rib3_241", v = "_optionSelected_1rib3_245", y = "_optionDisabled_1rib3_249", b = "_optionLabel_1rib3_255", x = "_checkIcon_1rib3_263", S = {
 	row: e,
 	disabled: t,
 	leading: n,
@@ -14,10 +14,10 @@ var e = "_row_46mn8_3", t = "_disabled_46mn8_16", n = "_leading_46mn8_23", r = "
 	chevron: d,
 	chevronOpen: f,
 	list: p,
-	"list-in": "_list-in_46mn8_1",
+	"list-in": "_list-in_1rib3_1",
 	listDown: m,
 	listUp: h,
-	"list-in-up": "_list-in-up_46mn8_1",
+	"list-in-up": "_list-in-up_1rib3_1",
 	option: g,
 	optionActive: _,
 	optionSelected: v,

package/dist/components/ComboRow/ComboRow.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboRow.module.css.js","names":[],"sources":["../../../src/components/ComboRow/ComboRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: start;\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Combo wrapper ─────────────────────────────────────────────────────────── */\n\n.comboWrap {\n  position: relative;\n  flex-shrink: 0;\n  min-width: 120px;\n}\n\n/* ─── Trigger button ────────────────────────────────────────────────────────── */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n\n  padding: 5px var(--gnome-space-2, 12px);\n  min-height: 32px;\n\n  appearance: none;\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 90%, black 10%);\n}\n\n.trigger:focus {\n  outline: none;\n}\n\n.trigger:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n.trigger:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.triggerOpen {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Trigger label ─────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron ───────────────────────────────────────────────────────────────── */\n\n.chevron {\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n/* ─── Listbox ───────────────────────────────────────────────────────────────── */\n\n.list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n\n  margin: 0;\n  padding: 4px 0;\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow:\n    0 4px 16px rgba(0, 0, 0, 0.12),\n    0 1px 3px rgba(0, 0, 0, 0.08);\n\n  max-height: 260px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  animation: list-in var(--gnome-duration-fast) var(--gnome-easing-default) both;\n}\n\n@keyframes list-in {\n  from { opacity: 0; transform: scaleY(0.95); transform-origin: top center; }\n  to   { opacity: 1; transform: scaleY(1);    transform-origin: top center; }\n}\n\n.listDown {\n  top: calc(100% + 4px);\n}\n\n.listUp {\n  bottom: calc(100% + 4px);\n  animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n  from { opacity: 0; transform: scaleY(0.95); transform-origin: bottom center; }\n  to   { opacity: 1; transform: scaleY(1);    transform-origin: bottom center; }\n}\n\n/* ─── Option ────────────────────────────────────────────────────────────────── */\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 6px var(--gnome-space-2, 12px);\n  min-height: 36px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.optionActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.optionLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.checkIcon {\n  flex-shrink: 0;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .trigger {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .trigger:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 16px rgba(0, 0, 0, 0.4),\n      0 1px 3px rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .trigger,\n  .chevron {\n    transition: none;\n  }\n\n  .list {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ComboRow.module.css.js","names":[],"sources":["../../../src/components/ComboRow/ComboRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: start;\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Combo wrapper ─────────────────────────────────────────────────────────── */\n\n.comboWrap {\n  position: relative;\n  flex-shrink: 0;\n  min-width: 120px;\n}\n\n/* ─── Trigger button ────────────────────────────────────────────────────────── */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n\n  padding: 5px var(--gnome-space-2, 12px);\n  min-height: 32px;\n\n  appearance: none;\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n  white-space: nowrap;\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 90%, black 10%);\n}\n\n.trigger:focus {\n  outline: none;\n}\n\n.trigger:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n.trigger:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.triggerOpen {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Trigger label ─────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron ───────────────────────────────────────────────────────────────── */\n\n.chevron {\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n/* ─── Listbox ───────────────────────────────────────────────────────────────── */\n\n.list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n\n  margin: 0;\n  padding: 4px 0;\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow:\n    0 4px 16px rgba(0, 0, 0, 0.12),\n    0 1px 3px rgba(0, 0, 0, 0.08);\n\n  max-height: 260px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  animation: list-in var(--gnome-duration-fast) var(--gnome-easing-default) both;\n}\n\n@keyframes list-in {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: top center;\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: top center;\n  }\n}\n\n.listDown {\n  top: calc(100% + 4px);\n}\n\n.listUp {\n  bottom: calc(100% + 4px);\n  animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: bottom center;\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: bottom center;\n  }\n}\n\n/* ─── Option ────────────────────────────────────────────────────────────────── */\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 6px var(--gnome-space-2, 12px);\n  min-height: 36px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.optionActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.optionLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.checkIcon {\n  flex-shrink: 0;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .trigger {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .trigger:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 16px rgba(0, 0, 0, 0.4),\n      0 1px 3px rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .trigger,\n  .chevron {\n    transition: none;\n  }\n\n  .list {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/components/ComboRow/index.d.ts

@@ -1,2 +1,2 @@
+export type { ComboRowOption, ComboRowProps } from './ComboRow';
 export { ComboRow } from './ComboRow';
-export type { ComboRowProps, ComboRowOption } from './ComboRow';

package/dist/components/ContributionGraph/ContributionGraph.cjs

@@ -1,2 +1,2 @@
-const e=require(`./ContributionGraph.module.css.cjs`),t=require(`../GnomeProvider/GnomeContext.cjs`);let n=require(`react`),r=require(`react-dom`),i=require(`react/jsx-runtime`);var a=new Date(2e3,0,2);function o(e,t){return t.format(new Date(2e3,e))}function s(e,t){let n=new Date(a);return n.setDate(a.getDate()+e),t.format(n)}var c=28,l=20,u=new Set([`blue`,`green`,`yellow`,`orange`,`red`,`purple`,`brown`]);function ee(e){return[`var(--gnome-card-shade-color)`,`var(--gnome-${e}-1)`,`var(--gnome-${e}-2)`,`var(--gnome-${e}-4)`,`var(--gnome-${e}-5)`]}function d(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`}function f(e){let[t,n,r]=e.split(`-`).map(Number);return new Date(t,n-1,r)}function p(e,t){return t.format(f(e))}function m({data:a,maxLevel:f=4,cellSize:m=12,cellGap:h=3,responsive:g=!0,minCellSize:te=8,maxCellSize:ne=24,weekStartDay:_=1,showMonthLabels:v=!0,showDayLabels:y=!0,showLegend:re=!0,weeks:b=52,ariaLabel:x=`Contribution graph`,onDayClick:S,tooltipContent:ie,className:ae}){let C=t.useDateTimeFormatter({month:`short`}),w=t.useDateTimeFormatter({weekday:`short`}),T=t.useDateTimeFormatter({weekday:`long`,year:`numeric`,month:`long`,day:`numeric`}),{accentColor:E}=(0,n.useContext)(t.GnomeContext),D=u.has(E)?E:`green`,O=(0,n.useRef)(null),k=(0,n.useRef)(null),A=(0,n.useRef)(null),j=(0,n.useMemo)(()=>ee(D),[D]),[M,N]=(0,n.useState)(null),[P,F]=(0,n.useState)({col:0,row:0}),[I,L]=(0,n.useState)(null),[R,z]=(0,n.useState)(null);(0,n.useEffect)(()=>{if(!g)return;let e=k.current;if(!e)return;let t=()=>{let t=e.clientWidth||e.getBoundingClientRect().width;t>0&&N(t)};if(t(),typeof ResizeObserver>`u`)return window.addEventListener(`resize`,t),()=>window.removeEventListener(`resize`,t);let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[g]),(0,n.useEffect)(()=>{if(!I)return;let e=()=>{let e=A.current;if(!e)return;let t=I.target.getBoundingClientRect(),n=e.getBoundingClientRect(),r=document.documentElement.clientWidth||window.innerWidth,i=document.documentElement.clientHeight||window.innerHeight,a=Math.max(8,r-n.width-8),o=Math.max(8,i-n.height-8),s=t.left+t.width/2-n.width/2,c=t.top-n.height-6,l=c>=8?c:t.bottom+6;z({left:Math.max(8,Math.min(s,a)),top:Math.max(8,Math.min(l,o))})};return e(),window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,{capture:!0})}},[I]);let B=(0,n.useMemo)(()=>{let e=new Map;for(let t of a)e.set(t.date,t.count);return e},[a]),V=(0,n.useMemo)(()=>Math.max(1,...a.map(e=>e.count)),[a]),H=y?c:0,U=v?l:0,W=Math.max(1,Math.floor(b)),G=Math.max(1,te),K=Math.max(G,ne),q=(0,n.useMemo)(()=>{if(!g||M===null)return{cellSize:m,weeks:W};let e=Math.max(0,M-H),t=(e+h)/W-h;if(t>=G)return{cellSize:Math.min(K,t),weeks:W};let n=Math.floor((e+h)/(G+h));return{cellSize:G,weeks:Math.max(1,Math.min(W,n))}},[M,h,m,W,H,K,G,g]),J=q.weeks,Y=q.cellSize,X=Y+h,{grid:Z,monthLabels:oe}=(0,n.useMemo)(()=>{let e=new Date;e.setHours(0,0,0,0);let t=(e.getDay()-_+7)%7,n=new Date(e);n.setDate(e.getDate()-t);let r=new Date(n);r.setDate(n.getDate()-(J-1)*7);let i=[],a=[],s=-1;for(let t=0;t<J;t++){let n=new Date(r);n.setDate(r.getDate()+t*7),n.getMonth()!==s&&(a.push({col:t,month:o(n.getMonth(),C)}),s=n.getMonth());let c=[];for(let n=0;n<7;n++){let i=new Date(r);i.setDate(r.getDate()+t*7+n);let a=i>e,o=d(i),s=a?0:B.get(o)??0,l=s===0?0:Math.min(f,Math.ceil(s/V*f));c.push({iso:o,count:s,level:l,future:a})}i.push(c)}return{grid:i,monthLabels:a}},[B,V,f,J,_,C]),se=(0,n.useMemo)(()=>[1,3,5].map(e=>({row:(e-_+7)%7,label:s(e,w)})),[_,w]),ce=H+J*X-h,le=U+7*X-h,Q=Math.min(4,Math.floor(Y/3));(0,n.useEffect)(()=>{F(e=>({col:Math.min(J-1,e.col),row:e.row}))},[J]);function ue(e,t){let n=Math.max(0,Math.min(J-1,e)),r=Math.max(0,Math.min(6,t));F({col:n,row:r}),O.current?.querySelector(`[data-col="${n}"][data-row="${r}"]`)?.focus()}function $(e,t,n){let r={ArrowRight:[t+1,n],ArrowLeft:[t-1,n],ArrowDown:[t,n+1],ArrowUp:[t,n-1]};if(r[e.key])e.preventDefault(),ue(...r[e.key]);else if(e.key===`Enter`||e.key===` `){e.preventDefault();let r=Z[t]?.[n];r&&!r.future&&S?.({date:r.iso,count:r.count})}}function de(e,t){z(null),L({target:e.currentTarget,text:t})}function fe(){L(null),z(null)}function pe(e){return e.future?j[0]:j[Math.min(e.level,j.length-1)]??j[j.length-1]}function me(e){if(e.future)return p(e.iso,T);let t=p(e.iso,T);return ie?.({date:e.iso,count:e.count})??`${e.count} contribution${e.count===1?``:`s`} on ${t}`}return(0,i.jsxs)(`div`,{className:[e.default.wrapper,ae].filter(Boolean).join(` `),children:[(0,i.jsx)(`div`,{ref:k,className:e.default.graphViewport,children:(0,i.jsxs)(`svg`,{ref:O,width:ce,height:le,className:e.default.svg,"aria-label":x,role:`img`,"data-cell-size":Y,"data-visible-weeks":J,children:[v&&oe.map(({col:t,month:n})=>(0,i.jsx)(`text`,{x:H+t*X,y:12,className:e.default.label,children:n},`m-${t}`)),y&&se.map(({row:t,label:n})=>(0,i.jsx)(`text`,{x:0,y:U+t*X+Y-1,className:e.default.label,children:n},`d-${t}`)),(0,i.jsx)(`g`,{role:`grid`,"aria-label":x,children:Z.map((t,n)=>(0,i.jsx)(`g`,{role:`row`,children:t.map((t,r)=>{let a=me(t),o=P.col===n&&P.row===r;return(0,i.jsx)(`rect`,{"data-col":n,"data-row":r,x:H+n*X,y:U+r*X,width:Y,height:Y,rx:Q,fill:pe(t),opacity:t.future?.35:1,className:e.default.cell,role:`gridcell`,"aria-label":a,"aria-disabled":t.future||void 0,tabIndex:o?0:-1,onClick:()=>!t.future&&S?.({date:t.iso,count:t.count}),onKeyDown:e=>$(e,n,r),onFocus:()=>F({col:n,row:r}),onMouseEnter:e=>de(e,a),onMouseLeave:fe},`${n}-${r}`)})},n))})]})}),I&&typeof document<`u`&&(0,r.createPortal)((0,i.jsx)(`div`,{ref:A,className:e.default.tooltip,style:R?{left:R.left,top:R.top}:{visibility:`hidden`,left:0,top:0},role:`tooltip`,children:I.text}),document.body),re&&(0,i.jsxs)(`div`,{className:e.default.legend,children:[(0,i.jsx)(`span`,{className:e.default.legendLabel,children:`Less`}),Array.from({length:f+1},(t,n)=>(0,i.jsx)(`svg`,{width:Y,height:Y,"aria-hidden":`true`,className:e.default.legendCell,children:(0,i.jsx)(`rect`,{width:Y,height:Y,rx:Q,fill:j[Math.min(n,j.length-1)]})},n)),(0,i.jsx)(`span`,{className:e.default.legendLabel,children:`More`})]})]})}exports.ContributionGraph=m;
+const e=require(`../GnomeProvider/GnomeContext.cjs`),t=require(`./ContributionGraph.module.css.cjs`);let n=require(`react`),r=require(`react-dom`),i=require(`react/jsx-runtime`);var a=new Date(2e3,0,2);function o(e,t){return t.format(new Date(2e3,e))}function s(e,t){let n=new Date(a);return n.setDate(a.getDate()+e),t.format(n)}var c=28,l=20,u=new Set([`blue`,`green`,`yellow`,`orange`,`red`,`purple`,`brown`]);function ee(e){return[`var(--gnome-card-shade-color)`,`var(--gnome-${e}-1)`,`var(--gnome-${e}-2)`,`var(--gnome-${e}-4)`,`var(--gnome-${e}-5)`]}function d(e){return`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,`0`)}-${String(e.getDate()).padStart(2,`0`)}`}function f(e){let[t,n,r]=e.split(`-`).map(Number);return new Date(t,n-1,r)}function p(e,t){return t.format(f(e))}function m({data:a,maxLevel:f=4,cellSize:m=12,cellGap:h=3,responsive:g=!0,minCellSize:te=8,maxCellSize:ne=24,weekStartDay:_=1,showMonthLabels:v=!0,showDayLabels:y=!0,showLegend:re=!0,weeks:b=52,ariaLabel:x=`Contribution graph`,onDayClick:S,tooltipContent:ie,className:ae}){let C=e.useDateTimeFormatter({month:`short`}),w=e.useDateTimeFormatter({weekday:`short`}),T=e.useDateTimeFormatter({weekday:`long`,year:`numeric`,month:`long`,day:`numeric`}),{accentColor:E}=(0,n.useContext)(e.GnomeContext),D=u.has(E)?E:`green`,O=(0,n.useRef)(null),k=(0,n.useRef)(null),A=(0,n.useRef)(null),j=(0,n.useMemo)(()=>ee(D),[D]),[M,N]=(0,n.useState)(null),[P,F]=(0,n.useState)({col:0,row:0}),[I,L]=(0,n.useState)(null),[R,z]=(0,n.useState)(null);(0,n.useEffect)(()=>{if(!g)return;let e=k.current;if(!e)return;let t=()=>{let t=e.clientWidth||e.getBoundingClientRect().width;t>0&&N(t)};if(t(),typeof ResizeObserver>`u`)return window.addEventListener(`resize`,t),()=>window.removeEventListener(`resize`,t);let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[g]),(0,n.useEffect)(()=>{if(!I)return;let e=()=>{let e=A.current;if(!e)return;let t=I.target.getBoundingClientRect(),n=e.getBoundingClientRect(),r=document.documentElement.clientWidth||window.innerWidth,i=document.documentElement.clientHeight||window.innerHeight,a=Math.max(8,r-n.width-8),o=Math.max(8,i-n.height-8),s=t.left+t.width/2-n.width/2,c=t.top-n.height-6,l=c>=8?c:t.bottom+6;z({left:Math.max(8,Math.min(s,a)),top:Math.max(8,Math.min(l,o))})};return e(),window.addEventListener(`resize`,e),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,e,{capture:!0})}},[I]);let B=(0,n.useMemo)(()=>{let e=new Map;for(let t of a)e.set(t.date,t.count);return e},[a]),V=(0,n.useMemo)(()=>Math.max(1,...a.map(e=>e.count)),[a]),H=y?c:0,U=v?l:0,W=Math.max(1,Math.floor(b)),G=Math.max(1,te),K=Math.max(G,ne),q=(0,n.useMemo)(()=>{if(!g||M===null)return{cellSize:m,weeks:W};let e=Math.max(0,M-H),t=(e+h)/W-h;if(t>=G)return{cellSize:Math.min(K,t),weeks:W};let n=Math.floor((e+h)/(G+h));return{cellSize:G,weeks:Math.max(1,Math.min(W,n))}},[M,h,m,W,H,K,G,g]),J=q.weeks,Y=q.cellSize,X=Y+h,{grid:Z,monthLabels:oe}=(0,n.useMemo)(()=>{let e=new Date;e.setHours(0,0,0,0);let t=(e.getDay()-_+7)%7,n=new Date(e);n.setDate(e.getDate()-t);let r=new Date(n);r.setDate(n.getDate()-(J-1)*7);let i=[],a=[],s=-1;for(let t=0;t<J;t++){let n=new Date(r);n.setDate(r.getDate()+t*7),n.getMonth()!==s&&(a.push({col:t,month:o(n.getMonth(),C)}),s=n.getMonth());let c=[];for(let n=0;n<7;n++){let i=new Date(r);i.setDate(r.getDate()+t*7+n);let a=i>e,o=d(i),s=a?0:B.get(o)??0,l=s===0?0:Math.min(f,Math.ceil(s/V*f));c.push({iso:o,count:s,level:l,future:a})}i.push(c)}return{grid:i,monthLabels:a}},[B,V,f,J,_,C]),se=(0,n.useMemo)(()=>[1,3,5].map(e=>({row:(e-_+7)%7,label:s(e,w)})),[_,w]),ce=H+J*X-h,le=U+7*X-h,Q=Math.min(4,Math.floor(Y/3));(0,n.useEffect)(()=>{F(e=>({col:Math.min(J-1,e.col),row:e.row}))},[J]);function ue(e,t){let n=Math.max(0,Math.min(J-1,e)),r=Math.max(0,Math.min(6,t));F({col:n,row:r}),O.current?.querySelector(`[data-col="${n}"][data-row="${r}"]`)?.focus()}function $(e,t,n){let r={ArrowRight:[t+1,n],ArrowLeft:[t-1,n],ArrowDown:[t,n+1],ArrowUp:[t,n-1]};if(r[e.key])e.preventDefault(),ue(...r[e.key]);else if(e.key===`Enter`||e.key===` `){e.preventDefault();let r=Z[t]?.[n];r&&!r.future&&S?.({date:r.iso,count:r.count})}}function de(e,t){z(null),L({target:e.currentTarget,text:t})}function fe(){L(null),z(null)}function pe(e){return e.future?j[0]:j[Math.min(e.level,j.length-1)]??j[j.length-1]}function me(e){if(e.future)return p(e.iso,T);let t=p(e.iso,T);return ie?.({date:e.iso,count:e.count})??`${e.count} contribution${e.count===1?``:`s`} on ${t}`}return(0,i.jsxs)(`div`,{className:[t.default.wrapper,ae].filter(Boolean).join(` `),children:[(0,i.jsx)(`div`,{ref:k,className:t.default.graphViewport,children:(0,i.jsxs)(`svg`,{ref:O,width:ce,height:le,className:t.default.svg,"aria-label":x,role:`img`,"data-cell-size":Y,"data-visible-weeks":J,children:[v&&oe.map(({col:e,month:n})=>(0,i.jsx)(`text`,{x:H+e*X,y:12,className:t.default.label,children:n},`m-${e}`)),y&&se.map(({row:e,label:n})=>(0,i.jsx)(`text`,{x:0,y:U+e*X+Y-1,className:t.default.label,children:n},`d-${e}`)),(0,i.jsx)(`g`,{role:`grid`,"aria-label":x,children:Z.map((e,n)=>(0,i.jsx)(`g`,{role:`row`,children:e.map((e,r)=>{let a=me(e),o=P.col===n&&P.row===r;return(0,i.jsx)(`rect`,{"data-col":n,"data-row":r,x:H+n*X,y:U+r*X,width:Y,height:Y,rx:Q,fill:pe(e),opacity:e.future?.35:1,className:t.default.cell,role:`gridcell`,"aria-label":a,"aria-disabled":e.future||void 0,tabIndex:o?0:-1,onClick:()=>!e.future&&S?.({date:e.iso,count:e.count}),onKeyDown:e=>$(e,n,r),onFocus:()=>F({col:n,row:r}),onMouseEnter:e=>de(e,a),onMouseLeave:fe},`${n}-${r}`)})},n))})]})}),I&&typeof document<`u`&&(0,r.createPortal)((0,i.jsx)(`div`,{ref:A,className:t.default.tooltip,style:R?{left:R.left,top:R.top}:{visibility:`hidden`,left:0,top:0},role:`tooltip`,children:I.text}),document.body),re&&(0,i.jsxs)(`div`,{className:t.default.legend,children:[(0,i.jsx)(`span`,{className:t.default.legendLabel,children:`Less`}),Array.from({length:f+1},(e,n)=>(0,i.jsx)(`svg`,{width:Y,height:Y,"aria-hidden":`true`,className:t.default.legendCell,children:(0,i.jsx)(`rect`,{width:Y,height:Y,rx:Q,fill:j[Math.min(n,j.length-1)]})},n)),(0,i.jsx)(`span`,{className:t.default.legendLabel,children:`More`})]})]})}exports.ContributionGraph=m;
 //# sourceMappingURL=ContributionGraph.cjs.map

package/dist/components/ContributionGraph/ContributionGraph.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContributionGraph.cjs","names":[],"sources":["../../../src/components/ContributionGraph/ContributionGraph.tsx"],"sourcesContent":["import { useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./ContributionGraph.module.css\";\nimport {\n  GnomeContext,\n  useDateTimeFormatter,\n  type GnomeNamedAccentColor,\n} from \"../GnomeProvider/GnomeContext\";\n\nexport interface ContributionDay {\n  /** ISO 8601 date — \"YYYY-MM-DD\". */\n  date: string;\n  /** Non-negative activity count. */\n  count: number;\n}\n\nexport interface ContributionGraphProps {\n  /** Activity data. Days absent from the array are treated as count = 0. */\n  data: ContributionDay[];\n  /**\n   * Number of intensity levels (excluding 0).\n   * @default 4\n   */\n  maxLevel?: number;\n  /** Cell side length in pixels. @default 12 */\n  cellSize?: number;\n  /** Gap between cells in pixels. @default 3 */\n  cellGap?: number;\n  /**\n   * Fit the graph to its container by resizing cells and reducing visible\n   * weeks when the configured range cannot stay legible.\n   * @default true\n   */\n  responsive?: boolean;\n  /** Smallest responsive cell side length in pixels. @default 8 */\n  minCellSize?: number;\n  /** Largest responsive cell side length in pixels. @default 24 */\n  maxCellSize?: number;\n  /** 0 = Sunday · 1 = Monday (GNOME locale default). @default 1 */\n  weekStartDay?: 0 | 1;\n  /** @default true */\n  showMonthLabels?: boolean;\n  /** @default true */\n  showDayLabels?: boolean;\n  /** @default true */\n  showLegend?: boolean;\n  /** Number of week columns to display. @default 52 */\n  weeks?: number;\n  /** @default \"Contribution graph\" */\n  ariaLabel?: string;\n  onDayClick?: (day: ContributionDay) => void;\n  /** Returns a plain-text tooltip string for a day. */\n  tooltipContent?: (day: ContributionDay) => string;\n  className?: string;\n}\n\n// Reference Sunday: 2000-01-02 is a Sunday (day index 0)\nconst REF_SUNDAY = new Date(2000, 0, 2);\n\nfunction getShortMonth(\n  monthIndex: number,\n  formatter: Intl.DateTimeFormat,\n): string {\n  return formatter.format(new Date(2000, monthIndex));\n}\n\nfunction getShortDay(\n  dayIndex: number,\n  formatter: Intl.DateTimeFormat,\n): string {\n  const date = new Date(REF_SUNDAY);\n  date.setDate(REF_SUNDAY.getDate() + dayIndex);\n  return formatter.format(date);\n}\n\nconst DAY_LABEL_WIDTH = 28;\nconst MONTH_LABEL_HEIGHT = 20;\n\nconst NAMED_ACCENTS = new Set<GnomeNamedAccentColor>([\n  \"blue\",\n  \"green\",\n  \"yellow\",\n  \"orange\",\n  \"red\",\n  \"purple\",\n  \"brown\",\n]);\n\nfunction accentScale(accentColor: GnomeNamedAccentColor): string[] {\n  return [\n    \"var(--gnome-card-shade-color)\",\n    `var(--gnome-${accentColor}-1)`,\n    `var(--gnome-${accentColor}-2)`,\n    `var(--gnome-${accentColor}-4)`,\n    `var(--gnome-${accentColor}-5)`,\n  ];\n}\n\nfunction dateToIso(date: Date): string {\n  const y = date.getFullYear();\n  const m = String(date.getMonth() + 1).padStart(2, \"0\");\n  const d = String(date.getDate()).padStart(2, \"0\");\n  return `${y}-${m}-${d}`;\n}\n\nfunction isoToLocal(iso: string): Date {\n  const [y, m, d] = iso.split(\"-\").map(Number);\n  return new Date(y, m - 1, d);\n}\n\nfunction fullDateLabel(iso: string, formatter: Intl.DateTimeFormat): string {\n  return formatter.format(isoToLocal(iso));\n}\n\ninterface GridCell {\n  iso: string;\n  count: number;\n  level: number;\n  future: boolean;\n}\n\nexport function ContributionGraph({\n  data,\n  maxLevel = 4,\n  cellSize = 12,\n  cellGap = 3,\n  responsive = true,\n  minCellSize = 8,\n  maxCellSize = 24,\n  weekStartDay = 1,\n  showMonthLabels = true,\n  showDayLabels = true,\n  showLegend = true,\n  weeks = 52,\n  ariaLabel = \"Contribution graph\",\n  onDayClick,\n  tooltipContent,\n  className,\n}: ContributionGraphProps) {\n  const monthFormatter = useDateTimeFormatter({ month: \"short\" });\n  const weekdayFormatter = useDateTimeFormatter({ weekday: \"short\" });\n  const fullDateFormatter = useDateTimeFormatter({\n    weekday: \"long\",\n    year: \"numeric\",\n    month: \"long\",\n    day: \"numeric\",\n  });\n  const { accentColor } = useContext(GnomeContext);\n  const graphAccent = NAMED_ACCENTS.has(accentColor as GnomeNamedAccentColor)\n    ? accentColor as GnomeNamedAccentColor\n    : \"green\";\n  const svgRef = useRef<SVGSVGElement>(null);\n  const graphViewportRef = useRef<HTMLDivElement>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const colors = useMemo(() => accentScale(graphAccent), [graphAccent]);\n\n  const [availableWidth, setAvailableWidth] = useState<number | null>(null);\n  const [focusedCell, setFocusedCell] = useState({ col: 0, row: 0 });\n  const [tooltip, setTooltip] = useState<{\n    target: SVGRectElement;\n    text: string;\n  } | null>(null);\n  const [tooltipPosition, setTooltipPosition] = useState<{\n    left: number;\n    top: number;\n  } | null>(null);\n\n  useEffect(() => {\n    if (!responsive) return;\n\n    const viewport = graphViewportRef.current;\n    if (!viewport) return;\n\n    const updateWidth = () => {\n      const width = viewport.clientWidth || viewport.getBoundingClientRect().width;\n      if (width > 0) setAvailableWidth(width);\n    };\n\n    updateWidth();\n\n    if (typeof ResizeObserver === \"undefined\") {\n      window.addEventListener(\"resize\", updateWidth);\n      return () => window.removeEventListener(\"resize\", updateWidth);\n    }\n\n    const observer = new ResizeObserver(updateWidth);\n    observer.observe(viewport);\n    return () => observer.disconnect();\n  }, [responsive]);\n\n  useEffect(() => {\n    if (!tooltip) return;\n\n    const placeTooltip = () => {\n      const tooltipNode = tooltipRef.current;\n      if (!tooltipNode) return;\n\n      const cellRect = tooltip.target.getBoundingClientRect();\n      const tipRect = tooltipNode.getBoundingClientRect();\n      const margin = 8;\n      const gap = 6;\n      const viewportWidth = document.documentElement.clientWidth || window.innerWidth;\n      const viewportHeight = document.documentElement.clientHeight || window.innerHeight;\n      const maxLeft = Math.max(margin, viewportWidth - tipRect.width - margin);\n      const maxTop = Math.max(margin, viewportHeight - tipRect.height - margin);\n      const centeredLeft = cellRect.left + cellRect.width / 2 - tipRect.width / 2;\n      const aboveTop = cellRect.top - tipRect.height - gap;\n      const preferredTop = aboveTop >= margin ? aboveTop : cellRect.bottom + gap;\n\n      setTooltipPosition({\n        left: Math.max(margin, Math.min(centeredLeft, maxLeft)),\n        top: Math.max(margin, Math.min(preferredTop, maxTop)),\n      });\n    };\n\n    placeTooltip();\n    window.addEventListener(\"resize\", placeTooltip);\n    window.addEventListener(\"scroll\", placeTooltip, { passive: true, capture: true });\n\n    return () => {\n      window.removeEventListener(\"resize\", placeTooltip);\n      window.removeEventListener(\"scroll\", placeTooltip, { capture: true });\n    };\n  }, [tooltip]);\n\n  const countMap = useMemo(() => {\n    const map = new Map<string, number>();\n    for (const d of data) map.set(d.date, d.count);\n    return map;\n  }, [data]);\n\n  const maxCount = useMemo(\n    () => Math.max(1, ...data.map((d) => d.count)),\n    [data],\n  );\n\n  const dayLabelW = showDayLabels ? DAY_LABEL_WIDTH : 0;\n  const monthLabelH = showMonthLabels ? MONTH_LABEL_HEIGHT : 0;\n  const configuredWeeks = Math.max(1, Math.floor(weeks));\n  const normalizedMinCellSize = Math.max(1, minCellSize);\n  const normalizedMaxCellSize = Math.max(normalizedMinCellSize, maxCellSize);\n  const fit = useMemo(() => {\n    if (!responsive || availableWidth === null) {\n      return { cellSize, weeks: configuredWeeks };\n    }\n\n    const gridWidth = Math.max(0, availableWidth - dayLabelW);\n    const fittedCellSize = (gridWidth + cellGap) / configuredWeeks - cellGap;\n\n    if (fittedCellSize >= normalizedMinCellSize) {\n      return {\n        cellSize: Math.min(normalizedMaxCellSize, fittedCellSize),\n        weeks: configuredWeeks,\n      };\n    }\n\n    const fittedWeeks = Math.floor((gridWidth + cellGap) / (normalizedMinCellSize + cellGap));\n    return {\n      cellSize: normalizedMinCellSize,\n      weeks: Math.max(1, Math.min(configuredWeeks, fittedWeeks)),\n    };\n  }, [\n    availableWidth,\n    cellGap,\n    cellSize,\n    configuredWeeks,\n    dayLabelW,\n    normalizedMaxCellSize,\n    normalizedMinCellSize,\n    responsive,\n  ]);\n  const visibleWeeks = fit.weeks;\n  const resolvedCellSize = fit.cellSize;\n  const stride = resolvedCellSize + cellGap;\n\n  const { grid, monthLabels } = useMemo(() => {\n    const today = new Date();\n    today.setHours(0, 0, 0, 0);\n\n    // Align to start of current week\n    const daysFromWeekStart = (today.getDay() - weekStartDay + 7) % 7;\n    const lastWeekStart = new Date(today);\n    lastWeekStart.setDate(today.getDate() - daysFromWeekStart);\n\n    const firstDay = new Date(lastWeekStart);\n    firstDay.setDate(lastWeekStart.getDate() - (visibleWeeks - 1) * 7);\n\n    const gridResult: GridCell[][] = [];\n    const labels: { col: number; month: string }[] = [];\n    let lastMonth = -1;\n\n    for (let col = 0; col < visibleWeeks; col++) {\n      const colStart = new Date(firstDay);\n      colStart.setDate(firstDay.getDate() + col * 7);\n\n      // Month label when the column starts a new month\n      if (colStart.getMonth() !== lastMonth) {\n        labels.push({\n          col,\n          month: getShortMonth(colStart.getMonth(), monthFormatter),\n        });\n        lastMonth = colStart.getMonth();\n      }\n\n      const column: GridCell[] = [];\n      for (let row = 0; row < 7; row++) {\n        const date = new Date(firstDay);\n        date.setDate(firstDay.getDate() + col * 7 + row);\n        const future = date > today;\n        const iso = dateToIso(date);\n        const count = future ? 0 : (countMap.get(iso) ?? 0);\n        const level =\n          count === 0\n            ? 0\n            : Math.min(maxLevel, Math.ceil((count / maxCount) * maxLevel));\n        column.push({ iso, count, level, future });\n      }\n      gridResult.push(column);\n    }\n\n    return { grid: gridResult, monthLabels: labels };\n  }, [countMap, maxCount, maxLevel, visibleWeeks, weekStartDay, monthFormatter]);\n\n  // Always label Mon(1), Wed(3), Fri(5) — rows shift with weekStartDay\n  const labelRows = useMemo(\n    () =>\n      [1, 3, 5].map((dayIndex) => ({\n        row: (dayIndex - weekStartDay + 7) % 7,\n        label: getShortDay(dayIndex, weekdayFormatter),\n      })),\n    [weekStartDay, weekdayFormatter],\n  );\n\n  const svgWidth = dayLabelW + visibleWeeks * stride - cellGap;\n  const svgHeight = monthLabelH + 7 * stride - cellGap;\n  const cellRx = Math.min(4, Math.floor(resolvedCellSize / 3));\n\n  useEffect(() => {\n    setFocusedCell((current) => ({\n      col: Math.min(visibleWeeks - 1, current.col),\n      row: current.row,\n    }));\n  }, [visibleWeeks]);\n\n  function focusCell(col: number, row: number) {\n    const c = Math.max(0, Math.min(visibleWeeks - 1, col));\n    const r = Math.max(0, Math.min(6, row));\n    setFocusedCell({ col: c, row: r });\n    svgRef.current\n      ?.querySelector<SVGRectElement>(`[data-col=\"${c}\"][data-row=\"${r}\"]`)\n      ?.focus();\n  }\n\n  function handleCellKey(e: KeyboardEvent, col: number, row: number) {\n    const moves: Record<string, [number, number]> = {\n      ArrowRight: [col + 1, row],\n      ArrowLeft: [col - 1, row],\n      ArrowDown: [col, row + 1],\n      ArrowUp: [col, row - 1],\n    };\n    if (moves[e.key]) {\n      e.preventDefault();\n      focusCell(...moves[e.key]);\n    } else if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      const cell = grid[col]?.[row];\n      if (cell && !cell.future) onDayClick?.({ date: cell.iso, count: cell.count });\n    }\n  }\n\n  function handleMouseEnter(\n    e: React.MouseEvent<SVGRectElement>,\n    text: string,\n  ) {\n    setTooltipPosition(null);\n    setTooltip({\n      target: e.currentTarget,\n      text,\n    });\n  }\n\n  function hideTooltip() {\n    setTooltip(null);\n    setTooltipPosition(null);\n  }\n\n  function cellColor(cell: GridCell): string {\n    if (cell.future) return colors[0];\n    return colors[Math.min(cell.level, colors.length - 1)] ?? colors[colors.length - 1];\n  }\n\n  function cellTooltip(cell: GridCell): string {\n    if (cell.future) return fullDateLabel(cell.iso, fullDateFormatter);\n    const formattedDate = fullDateLabel(cell.iso, fullDateFormatter);\n    return (\n      tooltipContent?.({ date: cell.iso, count: cell.count }) ??\n      `${cell.count} contribution${cell.count !== 1 ? \"s\" : \"\"} on ${formattedDate}`\n    );\n  }\n\n  return (\n    <div\n      className={[styles.wrapper, className].filter(Boolean).join(\" \")}\n    >\n      <div ref={graphViewportRef} className={styles.graphViewport}>\n        <svg\n          ref={svgRef}\n          width={svgWidth}\n          height={svgHeight}\n          className={styles.svg}\n          aria-label={ariaLabel}\n          role=\"img\"\n          data-cell-size={resolvedCellSize}\n          data-visible-weeks={visibleWeeks}\n        >\n        {/* Month labels */}\n        {showMonthLabels &&\n          monthLabels.map(({ col, month }) => (\n            <text\n              key={`m-${col}`}\n              x={dayLabelW + col * stride}\n              y={12}\n              className={styles.label}\n            >\n              {month}\n            </text>\n          ))}\n\n        {/* Day-of-week labels: Mon, Wed, Fri */}\n        {showDayLabels &&\n          labelRows.map(({ row, label }) => (\n            <text\n              key={`d-${row}`}\n              x={0}\n              y={monthLabelH + row * stride + resolvedCellSize - 1}\n              className={styles.label}\n            >\n              {label}\n            </text>\n          ))}\n\n        {/* Activity grid */}\n        <g role=\"grid\" aria-label={ariaLabel}>\n          {grid.map((column, col) => (\n            <g key={col} role=\"row\">\n              {column.map((cell, row) => {\n                const tipText = cellTooltip(cell);\n                const isFocused =\n                  focusedCell.col === col && focusedCell.row === row;\n\n                return (\n                  <rect\n                    key={`${col}-${row}`}\n                    data-col={col}\n                    data-row={row}\n                    x={dayLabelW + col * stride}\n                    y={monthLabelH + row * stride}\n                    width={resolvedCellSize}\n                    height={resolvedCellSize}\n                    rx={cellRx}\n                    fill={cellColor(cell)}\n                    opacity={cell.future ? 0.35 : 1}\n                    className={styles.cell}\n                    role=\"gridcell\"\n                    aria-label={tipText}\n                    aria-disabled={cell.future || undefined}\n                    tabIndex={isFocused ? 0 : -1}\n                    onClick={() => !cell.future && onDayClick?.({ date: cell.iso, count: cell.count })}\n                    onKeyDown={(e) => handleCellKey(e, col, row)}\n                    onFocus={() => setFocusedCell({ col, row })}\n                    onMouseEnter={(e) => handleMouseEnter(e, tipText)}\n                    onMouseLeave={hideTooltip}\n                  />\n                );\n              })}\n            </g>\n          ))}\n        </g>\n        </svg>\n      </div>\n\n      {tooltip && typeof document !== \"undefined\" && createPortal(\n        <div\n          ref={tooltipRef}\n          className={styles.tooltip}\n          style={\n            tooltipPosition\n              ? { left: tooltipPosition.left, top: tooltipPosition.top }\n              : { visibility: \"hidden\", left: 0, top: 0 }\n          }\n          role=\"tooltip\"\n        >\n          {tooltip.text}\n        </div>,\n        document.body,\n      )}\n\n      {showLegend && (\n        <div className={styles.legend}>\n          <span className={styles.legendLabel}>Less</span>\n          {Array.from({ length: maxLevel + 1 }, (_, i) => (\n            <svg\n              key={i}\n              width={resolvedCellSize}\n              height={resolvedCellSize}\n              aria-hidden=\"true\"\n              className={styles.legendCell}\n            >\n              <rect\n                width={resolvedCellSize}\n                height={resolvedCellSize}\n                rx={cellRx}\n                fill={colors[Math.min(i, colors.length - 1)]}\n              />\n            </svg>\n          ))}\n          <span className={styles.legendLabel}>More</span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"kLA0DA,IAAM,EAAa,IAAI,KAAK,IAAM,EAAG,EAAE,CAEvC,SAAS,EACP,EACA,EACQ,CACR,OAAO,EAAU,OAAO,IAAI,KAAK,IAAM,EAAW,CAAC,CAGrD,SAAS,EACP,EACA,EACQ,CACR,IAAM,EAAO,IAAI,KAAK,EAAW,CAEjC,OADA,EAAK,QAAQ,EAAW,SAAS,CAAG,EAAS,CACtC,EAAU,OAAO,EAAK,CAG/B,IAAM,EAAkB,GAClB,EAAqB,GAErB,EAAgB,IAAI,IAA2B,CACnD,OACA,QACA,SACA,SACA,MACA,SACA,QACD,CAAC,CAEF,SAAS,GAAY,EAA8C,CACjE,MAAO,CACL,gCACA,eAAe,EAAY,KAC3B,eAAe,EAAY,KAC3B,eAAe,EAAY,KAC3B,eAAe,EAAY,KAC5B,CAGH,SAAS,EAAU,EAAoB,CAIrC,MAAO,GAHG,EAAK,aAAa,CAGhB,GAFF,OAAO,EAAK,UAAU,CAAG,EAAE,CAAC,SAAS,EAAG,IAAI,CAErC,GADP,OAAO,EAAK,SAAS,CAAC,CAAC,SAAS,EAAG,IAAI,GAInD,SAAS,EAAW,EAAmB,CACrC,GAAM,CAAC,EAAG,EAAG,GAAK,EAAI,MAAM,IAAI,CAAC,IAAI,OAAO,CAC5C,OAAO,IAAI,KAAK,EAAG,EAAI,EAAG,EAAE,CAG9B,SAAS,EAAc,EAAa,EAAwC,CAC1E,OAAO,EAAU,OAAO,EAAW,EAAI,CAAC,CAU1C,SAAgB,EAAkB,CAChC,OACA,WAAW,EACX,WAAW,GACX,UAAU,EACV,aAAa,GACb,eAAc,EACd,eAAc,GACd,eAAe,EACf,kBAAkB,GAClB,gBAAgB,GAChB,cAAa,GACb,QAAQ,GACR,YAAY,qBACZ,aACA,kBACA,cACyB,CACzB,IAAM,EAAiB,EAAA,qBAAqB,CAAE,MAAO,QAAS,CAAC,CACzD,EAAmB,EAAA,qBAAqB,CAAE,QAAS,QAAS,CAAC,CAC7D,EAAoB,EAAA,qBAAqB,CAC7C,QAAS,OACT,KAAM,UACN,MAAO,OACP,IAAK,UACN,CAAC,CACI,CAAE,gBAAA,EAAA,EAAA,YAA2B,EAAA,aAAa,CAC1C,EAAc,EAAc,IAAI,EAAqC,CACvE,EACA,QACE,GAAA,EAAA,EAAA,QAA+B,KAAK,CACpC,GAAA,EAAA,EAAA,QAA0C,KAAK,CAC/C,GAAA,EAAA,EAAA,QAAoC,KAAK,CACzC,GAAA,EAAA,EAAA,aAAuB,GAAY,EAAY,CAAE,CAAC,EAAY,CAAC,CAE/D,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA6C,KAAK,CACnE,CAAC,EAAa,IAAA,EAAA,EAAA,UAA2B,CAAE,IAAK,EAAG,IAAK,EAAG,CAAC,CAC5D,CAAC,EAAS,IAAA,EAAA,EAAA,UAGN,KAAK,CACT,CAAC,EAAiB,IAAA,EAAA,EAAA,UAGd,KAAK,EAEf,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,EAAY,OAEjB,IAAM,EAAW,EAAiB,QAClC,GAAI,CAAC,EAAU,OAEf,IAAM,MAAoB,CACxB,IAAM,EAAQ,EAAS,aAAe,EAAS,uBAAuB,CAAC,MACnE,EAAQ,GAAG,EAAkB,EAAM,EAKzC,GAFA,GAAa,CAET,OAAO,eAAmB,IAE5B,OADA,OAAO,iBAAiB,SAAU,EAAY,KACjC,OAAO,oBAAoB,SAAU,EAAY,CAGhE,IAAM,EAAW,IAAI,eAAe,EAAY,CAEhD,OADA,EAAS,QAAQ,EAAS,KACb,EAAS,YAAY,EACjC,CAAC,EAAW,CAAC,EAEhB,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,EAAS,OAEd,IAAM,MAAqB,CACzB,IAAM,EAAc,EAAW,QAC/B,GAAI,CAAC,EAAa,OAElB,IAAM,EAAW,EAAQ,OAAO,uBAAuB,CACjD,EAAU,EAAY,uBAAuB,CAG7C,EAAgB,SAAS,gBAAgB,aAAe,OAAO,WAC/D,EAAiB,SAAS,gBAAgB,cAAgB,OAAO,YACjE,EAAU,KAAK,IAAI,EAAQ,EAAgB,EAAQ,MAAQ,EAAO,CAClE,EAAS,KAAK,IAAI,EAAQ,EAAiB,EAAQ,OAAS,EAAO,CACnE,EAAe,EAAS,KAAO,EAAS,MAAQ,EAAI,EAAQ,MAAQ,EACpE,EAAW,EAAS,IAAM,EAAQ,OAAS,EAC3C,EAAe,GAAY,EAAS,EAAW,EAAS,OAAS,EAEvE,EAAmB,CACjB,KAAM,KAAK,IAAI,EAAQ,KAAK,IAAI,EAAc,EAAQ,CAAC,CACvD,IAAK,KAAK,IAAI,EAAQ,KAAK,IAAI,EAAc,EAAO,CAAC,CACtD,CAAC,EAOJ,OAJA,GAAc,CACd,OAAO,iBAAiB,SAAU,EAAa,CAC/C,OAAO,iBAAiB,SAAU,EAAc,CAAE,QAAS,GAAM,QAAS,GAAM,CAAC,KAEpE,CACX,OAAO,oBAAoB,SAAU,EAAa,CAClD,OAAO,oBAAoB,SAAU,EAAc,CAAE,QAAS,GAAM,CAAC,GAEtE,CAAC,EAAQ,CAAC,CAEb,IAAM,GAAA,EAAA,EAAA,aAAyB,CAC7B,IAAM,EAAM,IAAI,IAChB,IAAK,IAAM,KAAK,EAAM,EAAI,IAAI,EAAE,KAAM,EAAE,MAAM,CAC9C,OAAO,GACN,CAAC,EAAK,CAAC,CAEJ,GAAA,EAAA,EAAA,aACE,KAAK,IAAI,EAAG,GAAG,EAAK,IAAK,GAAM,EAAE,MAAM,CAAC,CAC9C,CAAC,EAAK,CACP,CAEK,EAAY,EAAgB,EAAkB,EAC9C,EAAc,EAAkB,EAAqB,EACrD,EAAkB,KAAK,IAAI,EAAG,KAAK,MAAM,EAAM,CAAC,CAChD,EAAwB,KAAK,IAAI,EAAG,GAAY,CAChD,EAAwB,KAAK,IAAI,EAAuB,GAAY,CACpE,GAAA,EAAA,EAAA,aAAoB,CACxB,GAAI,CAAC,GAAc,IAAmB,KACpC,MAAO,CAAE,WAAU,MAAO,EAAiB,CAG7C,IAAM,EAAY,KAAK,IAAI,EAAG,EAAiB,EAAU,CACnD,GAAkB,EAAY,GAAW,EAAkB,EAEjE,GAAI,GAAkB,EACpB,MAAO,CACL,SAAU,KAAK,IAAI,EAAuB,EAAe,CACzD,MAAO,EACR,CAGH,IAAM,EAAc,KAAK,OAAO,EAAY,IAAY,EAAwB,GAAS,CACzF,MAAO,CACL,SAAU,EACV,MAAO,KAAK,IAAI,EAAG,KAAK,IAAI,EAAiB,EAAY,CAAC,CAC3D,EACA,CACD,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACD,CAAC,CACI,EAAe,EAAI,MACnB,EAAmB,EAAI,SACvB,EAAS,EAAmB,EAE5B,CAAE,OAAM,iBAAA,EAAA,EAAA,aAA8B,CAC1C,IAAM,EAAQ,IAAI,KAClB,EAAM,SAAS,EAAG,EAAG,EAAG,EAAE,CAG1B,IAAM,GAAqB,EAAM,QAAQ,CAAG,EAAe,GAAK,EAC1D,EAAgB,IAAI,KAAK,EAAM,CACrC,EAAc,QAAQ,EAAM,SAAS,CAAG,EAAkB,CAE1D,IAAM,EAAW,IAAI,KAAK,EAAc,CACxC,EAAS,QAAQ,EAAc,SAAS,EAAI,EAAe,GAAK,EAAE,CAElE,IAAM,EAA2B,EAAE,CAC7B,EAA2C,EAAE,CAC/C,EAAY,GAEhB,IAAK,IAAI,EAAM,EAAG,EAAM,EAAc,IAAO,CAC3C,IAAM,EAAW,IAAI,KAAK,EAAS,CACnC,EAAS,QAAQ,EAAS,SAAS,CAAG,EAAM,EAAE,CAG1C,EAAS,UAAU,GAAK,IAC1B,EAAO,KAAK,CACV,MACA,MAAO,EAAc,EAAS,UAAU,CAAE,EAAe,CAC1D,CAAC,CACF,EAAY,EAAS,UAAU,EAGjC,IAAM,EAAqB,EAAE,CAC7B,IAAK,IAAI,EAAM,EAAG,EAAM,EAAG,IAAO,CAChC,IAAM,EAAO,IAAI,KAAK,EAAS,CAC/B,EAAK,QAAQ,EAAS,SAAS,CAAG,EAAM,EAAI,EAAI,CAChD,IAAM,EAAS,EAAO,EAChB,EAAM,EAAU,EAAK,CACrB,EAAQ,EAAS,EAAK,EAAS,IAAI,EAAI,EAAI,EAC3C,EACJ,IAAU,EACN,EACA,KAAK,IAAI,EAAU,KAAK,KAAM,EAAQ,EAAY,EAAS,CAAC,CAClE,EAAO,KAAK,CAAE,MAAK,QAAO,QAAO,SAAQ,CAAC,CAE5C,EAAW,KAAK,EAAO,CAGzB,MAAO,CAAE,KAAM,EAAY,YAAa,EAAQ,EAC/C,CAAC,EAAU,EAAU,EAAU,EAAc,EAAc,EAAe,CAAC,CAGxE,IAAA,EAAA,EAAA,aAEF,CAAC,EAAG,EAAG,EAAE,CAAC,IAAK,IAAc,CAC3B,KAAM,EAAW,EAAe,GAAK,EACrC,MAAO,EAAY,EAAU,EAAiB,CAC/C,EAAE,CACL,CAAC,EAAc,EAAiB,CACjC,CAEK,GAAW,EAAY,EAAe,EAAS,EAC/C,GAAY,EAAc,EAAI,EAAS,EACvC,EAAS,KAAK,IAAI,EAAG,KAAK,MAAM,EAAmB,EAAE,CAAC,EAE5D,EAAA,EAAA,eAAgB,CACd,EAAgB,IAAa,CAC3B,IAAK,KAAK,IAAI,EAAe,EAAG,EAAQ,IAAI,CAC5C,IAAK,EAAQ,IACd,EAAE,EACF,CAAC,EAAa,CAAC,CAElB,SAAS,GAAU,EAAa,EAAa,CAC3C,IAAM,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,EAAe,EAAG,EAAI,CAAC,CAChD,EAAI,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,EAAI,CAAC,CACvC,EAAe,CAAE,IAAK,EAAG,IAAK,EAAG,CAAC,CAClC,EAAO,SACH,cAA8B,cAAc,EAAE,eAAe,EAAE,IAAI,EACnE,OAAO,CAGb,SAAS,EAAc,EAAkB,EAAa,EAAa,CACjE,IAAM,EAA0C,CAC9C,WAAY,CAAC,EAAM,EAAG,EAAI,CAC1B,UAAW,CAAC,EAAM,EAAG,EAAI,CACzB,UAAW,CAAC,EAAK,EAAM,EAAE,CACzB,QAAS,CAAC,EAAK,EAAM,EAAE,CACxB,CACD,GAAI,EAAM,EAAE,KACV,EAAE,gBAAgB,CAClB,GAAU,GAAG,EAAM,EAAE,KAAK,SACjB,EAAE,MAAQ,SAAW,EAAE,MAAQ,IAAK,CAC7C,EAAE,gBAAgB,CAClB,IAAM,EAAO,EAAK,KAAO,GACrB,GAAQ,CAAC,EAAK,QAAQ,IAAa,CAAE,KAAM,EAAK,IAAK,MAAO,EAAK,MAAO,CAAC,EAIjF,SAAS,GACP,EACA,EACA,CACA,EAAmB,KAAK,CACxB,EAAW,CACT,OAAQ,EAAE,cACV,OACD,CAAC,CAGJ,SAAS,IAAc,CACrB,EAAW,KAAK,CAChB,EAAmB,KAAK,CAG1B,SAAS,GAAU,EAAwB,CAEzC,OADI,EAAK,OAAe,EAAO,GACxB,EAAO,KAAK,IAAI,EAAK,MAAO,EAAO,OAAS,EAAE,GAAK,EAAO,EAAO,OAAS,GAGnF,SAAS,GAAY,EAAwB,CAC3C,GAAI,EAAK,OAAQ,OAAO,EAAc,EAAK,IAAK,EAAkB,CAClE,IAAM,EAAgB,EAAc,EAAK,IAAK,EAAkB,CAChE,OACE,KAAiB,CAAE,KAAM,EAAK,IAAK,MAAO,EAAK,MAAO,CAAC,EACvD,GAAG,EAAK,MAAM,eAAe,EAAK,QAAU,EAAU,GAAN,IAAS,MAAM,IAInE,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,QAAS,GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UADlE,EAGE,EAAA,EAAA,KAAC,MAAD,CAAK,IAAK,EAAkB,UAAW,EAAA,QAAO,wBAC5C,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,MAAO,GACP,OAAQ,GACR,UAAW,EAAA,QAAO,IAClB,aAAY,EACZ,KAAK,MACL,iBAAgB,EAChB,qBAAoB,WARtB,CAWC,GACC,GAAY,KAAK,CAAE,MAAK,YACtB,EAAA,EAAA,KAAC,OAAD,CAEE,EAAG,EAAY,EAAM,EACrB,EAAG,GACH,UAAW,EAAA,QAAO,eAEjB,EACI,CANA,KAAK,IAML,CACP,CAGH,GACC,GAAU,KAAK,CAAE,MAAK,YACpB,EAAA,EAAA,KAAC,OAAD,CAEE,EAAG,EACH,EAAG,EAAc,EAAM,EAAS,EAAmB,EACnD,UAAW,EAAA,QAAO,eAEjB,EACI,CANA,KAAK,IAML,CACP,EAGJ,EAAA,EAAA,KAAC,IAAD,CAAG,KAAK,OAAO,aAAY,WACxB,EAAK,KAAK,EAAQ,KACjB,EAAA,EAAA,KAAC,IAAD,CAAa,KAAK,eACf,EAAO,KAAK,EAAM,IAAQ,CACzB,IAAM,EAAU,GAAY,EAAK,CAC3B,EACJ,EAAY,MAAQ,GAAO,EAAY,MAAQ,EAEjD,OACE,EAAA,EAAA,KAAC,OAAD,CAEE,WAAU,EACV,WAAU,EACV,EAAG,EAAY,EAAM,EACrB,EAAG,EAAc,EAAM,EACvB,MAAO,EACP,OAAQ,EACR,GAAI,EACJ,KAAM,GAAU,EAAK,CACrB,QAAS,EAAK,OAAS,IAAO,EAC9B,UAAW,EAAA,QAAO,KAClB,KAAK,WACL,aAAY,EACZ,gBAAe,EAAK,QAAU,IAAA,GAC9B,SAAU,EAAY,EAAI,GAC1B,YAAe,CAAC,EAAK,QAAU,IAAa,CAAE,KAAM,EAAK,IAAK,MAAO,EAAK,MAAO,CAAC,CAClF,UAAY,GAAM,EAAc,EAAG,EAAK,EAAI,CAC5C,YAAe,EAAe,CAAE,MAAK,MAAK,CAAC,CAC3C,aAAe,GAAM,GAAiB,EAAG,EAAQ,CACjD,aAAc,GACd,CApBK,GAAG,EAAI,GAAG,IAoBf,EAEJ,CACA,CA/BI,EA+BJ,CACJ,CACA,CAAA,CACE,GACF,CAAA,CAEL,GAAW,OAAO,SAAa,MAAA,EAAA,EAAA,eAC9B,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACL,UAAW,EAAA,QAAO,QAClB,MACE,EACI,CAAE,KAAM,EAAgB,KAAM,IAAK,EAAgB,IAAK,CACxD,CAAE,WAAY,SAAU,KAAM,EAAG,IAAK,EAAG,CAE/C,KAAK,mBAEJ,EAAQ,KACL,CAAA,CACN,SAAS,KACV,CAEA,KACC,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAvB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,qBAAa,OAAW,CAAA,CAC/C,MAAM,KAAK,CAAE,OAAQ,EAAW,EAAG,EAAG,EAAG,KACxC,EAAA,EAAA,KAAC,MAAD,CAEE,MAAO,EACP,OAAQ,EACR,cAAY,OACZ,UAAW,EAAA,QAAO,qBAElB,EAAA,EAAA,KAAC,OAAD,CACE,MAAO,EACP,OAAQ,EACR,GAAI,EACJ,KAAM,EAAO,KAAK,IAAI,EAAG,EAAO,OAAS,EAAE,EAC3C,CAAA,CACE,CAZC,EAYD,CACN,EACF,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,qBAAa,OAAW,CAAA,CAC5C,GAEJ"}
+{"version":3,"file":"ContributionGraph.cjs","names":[],"sources":["../../../src/components/ContributionGraph/ContributionGraph.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent } from 'react';\nimport { useContext, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport {\n  GnomeContext,\n  type GnomeNamedAccentColor,\n  useDateTimeFormatter,\n} from '../GnomeProvider/GnomeContext';\n\nimport styles from './ContributionGraph.module.css';\n\nexport interface ContributionDay {\n  /** ISO 8601 date — \"YYYY-MM-DD\". */\n  date: string;\n  /** Non-negative activity count. */\n  count: number;\n}\n\nexport interface ContributionGraphProps {\n  /** Activity data. Days absent from the array are treated as count = 0. */\n  data: ContributionDay[];\n  /**\n   * Number of intensity levels (excluding 0).\n   * @default 4\n   */\n  maxLevel?: number;\n  /** Cell side length in pixels. @default 12 */\n  cellSize?: number;\n  /** Gap between cells in pixels. @default 3 */\n  cellGap?: number;\n  /**\n   * Fit the graph to its container by resizing cells and reducing visible\n   * weeks when the configured range cannot stay legible.\n   * @default true\n   */\n  responsive?: boolean;\n  /** Smallest responsive cell side length in pixels. @default 8 */\n  minCellSize?: number;\n  /** Largest responsive cell side length in pixels. @default 24 */\n  maxCellSize?: number;\n  /** 0 = Sunday · 1 = Monday (GNOME locale default). @default 1 */\n  weekStartDay?: 0 | 1;\n  /** @default true */\n  showMonthLabels?: boolean;\n  /** @default true */\n  showDayLabels?: boolean;\n  /** @default true */\n  showLegend?: boolean;\n  /** Number of week columns to display. @default 52 */\n  weeks?: number;\n  /** @default \"Contribution graph\" */\n  ariaLabel?: string;\n  onDayClick?: (day: ContributionDay) => void;\n  /** Returns a plain-text tooltip string for a day. */\n  tooltipContent?: (day: ContributionDay) => string;\n  className?: string;\n}\n\n// Reference Sunday: 2000-01-02 is a Sunday (day index 0)\nconst REF_SUNDAY = new Date(2000, 0, 2);\n\nfunction getShortMonth(monthIndex: number, formatter: Intl.DateTimeFormat): string {\n  return formatter.format(new Date(2000, monthIndex));\n}\n\nfunction getShortDay(dayIndex: number, formatter: Intl.DateTimeFormat): string {\n  const date = new Date(REF_SUNDAY);\n\n  date.setDate(REF_SUNDAY.getDate() + dayIndex);\n\n  return formatter.format(date);\n}\n\nconst DAY_LABEL_WIDTH = 28;\nconst MONTH_LABEL_HEIGHT = 20;\n\nconst NAMED_ACCENTS = new Set<GnomeNamedAccentColor>([\n  'blue',\n  'green',\n  'yellow',\n  'orange',\n  'red',\n  'purple',\n  'brown',\n]);\n\nfunction accentScale(accentColor: GnomeNamedAccentColor): string[] {\n  return [\n    'var(--gnome-card-shade-color)',\n    `var(--gnome-${accentColor}-1)`,\n    `var(--gnome-${accentColor}-2)`,\n    `var(--gnome-${accentColor}-4)`,\n    `var(--gnome-${accentColor}-5)`,\n  ];\n}\n\nfunction dateToIso(date: Date): string {\n  const y = date.getFullYear();\n  const m = String(date.getMonth() + 1).padStart(2, '0');\n  const d = String(date.getDate()).padStart(2, '0');\n\n  return `${y}-${m}-${d}`;\n}\n\nfunction isoToLocal(iso: string): Date {\n  const [y, m, d] = iso.split('-').map(Number);\n\n  return new Date(y, m - 1, d);\n}\n\nfunction fullDateLabel(iso: string, formatter: Intl.DateTimeFormat): string {\n  return formatter.format(isoToLocal(iso));\n}\n\ninterface GridCell {\n  iso: string;\n  count: number;\n  level: number;\n  future: boolean;\n}\n\nexport function ContributionGraph({\n  data,\n  maxLevel = 4,\n  cellSize = 12,\n  cellGap = 3,\n  responsive = true,\n  minCellSize = 8,\n  maxCellSize = 24,\n  weekStartDay = 1,\n  showMonthLabels = true,\n  showDayLabels = true,\n  showLegend = true,\n  weeks = 52,\n  ariaLabel = 'Contribution graph',\n  onDayClick,\n  tooltipContent,\n  className,\n}: ContributionGraphProps) {\n  const monthFormatter = useDateTimeFormatter({ month: 'short' });\n  const weekdayFormatter = useDateTimeFormatter({ weekday: 'short' });\n  const fullDateFormatter = useDateTimeFormatter({\n    weekday: 'long',\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  });\n  const { accentColor } = useContext(GnomeContext);\n  const graphAccent = NAMED_ACCENTS.has(accentColor as GnomeNamedAccentColor)\n    ? (accentColor as GnomeNamedAccentColor)\n    : 'green';\n  const svgRef = useRef<SVGSVGElement>(null);\n  const graphViewportRef = useRef<HTMLDivElement>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const colors = useMemo(() => accentScale(graphAccent), [graphAccent]);\n\n  const [availableWidth, setAvailableWidth] = useState<number | null>(null);\n  const [focusedCell, setFocusedCell] = useState({ col: 0, row: 0 });\n  const [tooltip, setTooltip] = useState<{\n    target: SVGRectElement;\n    text: string;\n  } | null>(null);\n  const [tooltipPosition, setTooltipPosition] = useState<{\n    left: number;\n    top: number;\n  } | null>(null);\n\n  useEffect(() => {\n    if (!responsive) {\n      return;\n    }\n\n    const viewport = graphViewportRef.current;\n\n    if (!viewport) {\n      return;\n    }\n\n    const updateWidth = () => {\n      const width = viewport.clientWidth || viewport.getBoundingClientRect().width;\n\n      if (width > 0) {\n        setAvailableWidth(width);\n      }\n    };\n\n    updateWidth();\n\n    if (typeof ResizeObserver === 'undefined') {\n      window.addEventListener('resize', updateWidth);\n\n      return () => window.removeEventListener('resize', updateWidth);\n    }\n\n    const observer = new ResizeObserver(updateWidth);\n\n    observer.observe(viewport);\n\n    return () => observer.disconnect();\n  }, [responsive]);\n\n  useEffect(() => {\n    if (!tooltip) {\n      return;\n    }\n\n    const placeTooltip = () => {\n      const tooltipNode = tooltipRef.current;\n\n      if (!tooltipNode) {\n        return;\n      }\n\n      const cellRect = tooltip.target.getBoundingClientRect();\n      const tipRect = tooltipNode.getBoundingClientRect();\n      const margin = 8;\n      const gap = 6;\n      const viewportWidth = document.documentElement.clientWidth || window.innerWidth;\n      const viewportHeight = document.documentElement.clientHeight || window.innerHeight;\n      const maxLeft = Math.max(margin, viewportWidth - tipRect.width - margin);\n      const maxTop = Math.max(margin, viewportHeight - tipRect.height - margin);\n      const centeredLeft = cellRect.left + cellRect.width / 2 - tipRect.width / 2;\n      const aboveTop = cellRect.top - tipRect.height - gap;\n      const preferredTop = aboveTop >= margin ? aboveTop : cellRect.bottom + gap;\n\n      setTooltipPosition({\n        left: Math.max(margin, Math.min(centeredLeft, maxLeft)),\n        top: Math.max(margin, Math.min(preferredTop, maxTop)),\n      });\n    };\n\n    placeTooltip();\n    window.addEventListener('resize', placeTooltip);\n    window.addEventListener('scroll', placeTooltip, { passive: true, capture: true });\n\n    return () => {\n      window.removeEventListener('resize', placeTooltip);\n      window.removeEventListener('scroll', placeTooltip, { capture: true });\n    };\n  }, [tooltip]);\n\n  const countMap = useMemo(() => {\n    const map = new Map<string, number>();\n\n    for (const d of data) {\n      map.set(d.date, d.count);\n    }\n\n    return map;\n  }, [data]);\n\n  const maxCount = useMemo(() => Math.max(1, ...data.map((d) => d.count)), [data]);\n\n  const dayLabelW = showDayLabels ? DAY_LABEL_WIDTH : 0;\n  const monthLabelH = showMonthLabels ? MONTH_LABEL_HEIGHT : 0;\n  const configuredWeeks = Math.max(1, Math.floor(weeks));\n  const normalizedMinCellSize = Math.max(1, minCellSize);\n  const normalizedMaxCellSize = Math.max(normalizedMinCellSize, maxCellSize);\n  const fit = useMemo(() => {\n    if (!responsive || availableWidth === null) {\n      return { cellSize, weeks: configuredWeeks };\n    }\n\n    const gridWidth = Math.max(0, availableWidth - dayLabelW);\n    const fittedCellSize = (gridWidth + cellGap) / configuredWeeks - cellGap;\n\n    if (fittedCellSize >= normalizedMinCellSize) {\n      return {\n        cellSize: Math.min(normalizedMaxCellSize, fittedCellSize),\n        weeks: configuredWeeks,\n      };\n    }\n\n    const fittedWeeks = Math.floor((gridWidth + cellGap) / (normalizedMinCellSize + cellGap));\n\n    return {\n      cellSize: normalizedMinCellSize,\n      weeks: Math.max(1, Math.min(configuredWeeks, fittedWeeks)),\n    };\n  }, [\n    availableWidth,\n    cellGap,\n    cellSize,\n    configuredWeeks,\n    dayLabelW,\n    normalizedMaxCellSize,\n    normalizedMinCellSize,\n    responsive,\n  ]);\n  const visibleWeeks = fit.weeks;\n  const resolvedCellSize = fit.cellSize;\n  const stride = resolvedCellSize + cellGap;\n\n  const { grid, monthLabels } = useMemo(() => {\n    const today = new Date();\n\n    today.setHours(0, 0, 0, 0);\n\n    // Align to start of current week\n    const daysFromWeekStart = (today.getDay() - weekStartDay + 7) % 7;\n    const lastWeekStart = new Date(today);\n\n    lastWeekStart.setDate(today.getDate() - daysFromWeekStart);\n\n    const firstDay = new Date(lastWeekStart);\n\n    firstDay.setDate(lastWeekStart.getDate() - (visibleWeeks - 1) * 7);\n\n    const gridResult: GridCell[][] = [];\n    const labels: { col: number; month: string }[] = [];\n\n    let lastMonth = -1;\n\n    for (let col = 0; col < visibleWeeks; col++) {\n      const colStart = new Date(firstDay);\n\n      colStart.setDate(firstDay.getDate() + col * 7);\n\n      // Month label when the column starts a new month\n      if (colStart.getMonth() !== lastMonth) {\n        labels.push({\n          col,\n          month: getShortMonth(colStart.getMonth(), monthFormatter),\n        });\n        lastMonth = colStart.getMonth();\n      }\n\n      const column: GridCell[] = [];\n\n      for (let row = 0; row < 7; row++) {\n        const date = new Date(firstDay);\n\n        date.setDate(firstDay.getDate() + col * 7 + row);\n        const future = date > today;\n        const iso = dateToIso(date);\n        const count = future ? 0 : (countMap.get(iso) ?? 0);\n        const level =\n          count === 0 ? 0 : Math.min(maxLevel, Math.ceil((count / maxCount) * maxLevel));\n\n        column.push({ iso, count, level, future });\n      }\n\n      gridResult.push(column);\n    }\n\n    return { grid: gridResult, monthLabels: labels };\n  }, [countMap, maxCount, maxLevel, visibleWeeks, weekStartDay, monthFormatter]);\n\n  // Always label Mon(1), Wed(3), Fri(5) — rows shift with weekStartDay\n  const labelRows = useMemo(\n    () =>\n      [1, 3, 5].map((dayIndex) => ({\n        row: (dayIndex - weekStartDay + 7) % 7,\n        label: getShortDay(dayIndex, weekdayFormatter),\n      })),\n    [weekStartDay, weekdayFormatter],\n  );\n\n  const svgWidth = dayLabelW + visibleWeeks * stride - cellGap;\n  const svgHeight = monthLabelH + 7 * stride - cellGap;\n  const cellRx = Math.min(4, Math.floor(resolvedCellSize / 3));\n\n  useEffect(() => {\n    setFocusedCell((current) => ({\n      col: Math.min(visibleWeeks - 1, current.col),\n      row: current.row,\n    }));\n  }, [visibleWeeks]);\n\n  function focusCell(col: number, row: number) {\n    const c = Math.max(0, Math.min(visibleWeeks - 1, col));\n    const r = Math.max(0, Math.min(6, row));\n\n    setFocusedCell({ col: c, row: r });\n    svgRef.current?.querySelector<SVGRectElement>(`[data-col=\"${c}\"][data-row=\"${r}\"]`)?.focus();\n  }\n\n  function handleCellKey(e: KeyboardEvent, col: number, row: number) {\n    const moves: Record<string, [number, number]> = {\n      ArrowRight: [col + 1, row],\n      ArrowLeft: [col - 1, row],\n      ArrowDown: [col, row + 1],\n      ArrowUp: [col, row - 1],\n    };\n\n    if (moves[e.key]) {\n      e.preventDefault();\n      focusCell(...moves[e.key]);\n    } else if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      const cell = grid[col]?.[row];\n\n      if (cell && !cell.future) {\n        onDayClick?.({ date: cell.iso, count: cell.count });\n      }\n    }\n  }\n\n  function handleMouseEnter(e: MouseEvent<SVGRectElement>, text: string) {\n    setTooltipPosition(null);\n    setTooltip({\n      target: e.currentTarget,\n      text,\n    });\n  }\n\n  function hideTooltip() {\n    setTooltip(null);\n    setTooltipPosition(null);\n  }\n\n  function cellColor(cell: GridCell): string {\n    if (cell.future) {\n      return colors[0];\n    }\n\n    return colors[Math.min(cell.level, colors.length - 1)] ?? colors[colors.length - 1];\n  }\n\n  function cellTooltip(cell: GridCell): string {\n    if (cell.future) {\n      return fullDateLabel(cell.iso, fullDateFormatter);\n    }\n\n    const formattedDate = fullDateLabel(cell.iso, fullDateFormatter);\n\n    return (\n      tooltipContent?.({ date: cell.iso, count: cell.count }) ??\n      `${cell.count} contribution${cell.count !== 1 ? 's' : ''} on ${formattedDate}`\n    );\n  }\n\n  return (\n    <div className={[styles.wrapper, className].filter(Boolean).join(' ')}>\n      <div ref={graphViewportRef} className={styles.graphViewport}>\n        <svg\n          ref={svgRef}\n          width={svgWidth}\n          height={svgHeight}\n          className={styles.svg}\n          aria-label={ariaLabel}\n          role=\"img\"\n          data-cell-size={resolvedCellSize}\n          data-visible-weeks={visibleWeeks}\n        >\n          {/* Month labels */}\n          {showMonthLabels &&\n            monthLabels.map(({ col, month }) => (\n              <text key={`m-${col}`} x={dayLabelW + col * stride} y={12} className={styles.label}>\n                {month}\n              </text>\n            ))}\n\n          {/* Day-of-week labels: Mon, Wed, Fri */}\n          {showDayLabels &&\n            labelRows.map(({ row, label }) => (\n              <text\n                key={`d-${row}`}\n                x={0}\n                y={monthLabelH + row * stride + resolvedCellSize - 1}\n                className={styles.label}\n              >\n                {label}\n              </text>\n            ))}\n\n          {/* Activity grid */}\n          <g role=\"grid\" aria-label={ariaLabel}>\n            {grid.map((column, col) => (\n              <g key={col} role=\"row\">\n                {column.map((cell, row) => {\n                  const tipText = cellTooltip(cell);\n                  const isFocused = focusedCell.col === col && focusedCell.row === row;\n\n                  return (\n                    <rect\n                      key={`${col}-${row}`}\n                      data-col={col}\n                      data-row={row}\n                      x={dayLabelW + col * stride}\n                      y={monthLabelH + row * stride}\n                      width={resolvedCellSize}\n                      height={resolvedCellSize}\n                      rx={cellRx}\n                      fill={cellColor(cell)}\n                      opacity={cell.future ? 0.35 : 1}\n                      className={styles.cell}\n                      role=\"gridcell\"\n                      aria-label={tipText}\n                      aria-disabled={cell.future || undefined}\n                      tabIndex={isFocused ? 0 : -1}\n                      onClick={() =>\n                        !cell.future && onDayClick?.({ date: cell.iso, count: cell.count })\n                      }\n                      onKeyDown={(e) => handleCellKey(e, col, row)}\n                      onFocus={() => setFocusedCell({ col, row })}\n                      onMouseEnter={(e) => handleMouseEnter(e, tipText)}\n                      onMouseLeave={hideTooltip}\n                    />\n                  );\n                })}\n              </g>\n            ))}\n          </g>\n        </svg>\n      </div>\n\n      {tooltip &&\n        typeof document !== 'undefined' &&\n        createPortal(\n          <div\n            ref={tooltipRef}\n            className={styles.tooltip}\n            style={\n              tooltipPosition\n                ? { left: tooltipPosition.left, top: tooltipPosition.top }\n                : { visibility: 'hidden', left: 0, top: 0 }\n            }\n            role=\"tooltip\"\n          >\n            {tooltip.text}\n          </div>,\n          document.body,\n        )}\n\n      {showLegend && (\n        <div className={styles.legend}>\n          <span className={styles.legendLabel}>Less</span>\n          {Array.from({ length: maxLevel + 1 }, (_, i) => (\n            <svg\n              key={i}\n              width={resolvedCellSize}\n              height={resolvedCellSize}\n              aria-hidden=\"true\"\n              className={styles.legendCell}\n            >\n              <rect\n                width={resolvedCellSize}\n                height={resolvedCellSize}\n                rx={cellRx}\n                fill={colors[Math.min(i, colors.length - 1)]}\n              />\n            </svg>\n          ))}\n          <span className={styles.legendLabel}>More</span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}