@krizaka/ui 3.11.0 → 3.12.0

package/registry/map.json

@@ -930,7 +930,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.11.0",
+    "@krizaka/tokens@^3.12.0",
     "@protomaps/basemaps@5.7.2",
     "tailwind-variants@^3.3.1"
   ],

package/registry/nav-bar.json

@@ -470,7 +470,7 @@
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.11.0",
+    "@krizaka/tokens@^3.12.0",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],

package/registry/showcase.json

@@ -308,7 +308,7 @@
     },
     {
       "path": "showcase/showcase.tsx",
-      "content": "// Client (state, timers' observers, keys). A slideshow that advances by itself — and shows it: a segmented progress bar\n// (one segment per slide, the current one fills over the interval, each one a button) with a counter, previous / next and a\n// visible pause button (WCAG 2.2.2). The time IS the CSS animation of the current segment (`.kz-showcase-fill`):\n// when it ends, the next slide comes — so what you see filling is exactly what decides, and pausing the animation pauses\n// the show. Its two rules travel with the component (a hoisted, deduplicated <style>): no stylesheet to import. It waits while the pointer is over it, while a keyboard focus is inside, while the tab is hidden and while it\n// is off screen; under reduced motion it never advances by itself. Slides are slots: any content.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nconst FILL_CSS = \".kz-showcase-fill{transform-origin:left;animation:kz-showcase-fill 6s linear forwards}@keyframes kz-showcase-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}\";\nconst REDUCED = \"(prefers-reduced-motion: reduce)\";\nconst subscribeNothing = () => () => undefined;\nconst readReduced = () => Boolean(typeof window !== \"undefined\" && window.matchMedia?.(REDUCED).matches);\nfunction subscribeReduced(notify: () => void) {\n  const query = window.matchMedia?.(REDUCED);\n  query?.addEventListener?.(\"change\", notify);\n  return () => query?.removeEventListener?.(\"change\", notify);\n}\nconst readHidden = () => document.visibilityState === \"hidden\";\nfunction subscribeVisibility(notify: () => void) {\n  document.addEventListener(\"visibilitychange\", notify);\n  return () => document.removeEventListener(\"visibilitychange\", notify);\n}\n\nexport interface ShowcaseLabels {\n  /** The previous button's name. */\n  previous: string;\n  /** The next button's name. */\n  next: string;\n  /** The pause button's name while it plays. */\n  pause: string;\n  /** The same button's name while it is paused. */\n  play: string;\n  /** A progress segment's name: `(3, 17) => \"Go to image 3\"`. */\n  goTo: (n: number, total: number) => string;\n  /** The position in words, beside the title: `(1, 17) => \"Image 1 of 17\"`. */\n  counter: (n: number, total: number) => string;\n  /** The slide's accessible name: `(1, 17) => \"1 of 17\"`. */\n  slide: (n: number, total: number) => string;\n}\n\n/** English defaults — pass your own translated `labels`. */\nexport const showcaseLabels: ShowcaseLabels = {\n  previous: \"Previous slide\",\n  next: \"Next slide\",\n  pause: \"Pause the slideshow\",\n  play: \"Play the slideshow\",\n  goTo: (n) => `Go to slide ${n}`,\n  counter: (n, total) => `Slide ${n} of ${total}`,\n  slide: (n, total) => `${n} of ${total}`,\n};\n\nexport interface ShowcaseSlideState {\n  index: number;\n  /** The slide in view. */\n  active: boolean;\n}\n\nexport interface ShowcaseProps<T> extends Omit<React.ComponentProps<\"section\">, \"children\" | \"onChange\"> {\n  /** The slideshow's accessible name (“Prompt to image”), passed translated. */\n  label: string;\n  /** The slides, in order. */\n  items: readonly T[];\n  /** A stable key for an item. */\n  getId: (item: T) => string;\n  /** One slide's content. Only the slide in view and its neighbours are mounted (the rest stay empty): give slides the same size. */\n  renderItem: (item: T, state: ShowcaseSlideState) => React.ReactNode;\n  /** A slide's title, shown before the counter (“Golden-hour editorial”). */\n  getTitle?: (item: T) => string;\n  /** Milliseconds a slide stays (the time the segment takes to fill). @default 6000 */\n  interval?: number;\n  /** Advances by itself. Never under `prefers-reduced-motion`. @default true */\n  autoplay?: boolean;\n  /** `fade` crossfades; `slide` also moves the slides a few pixels. @default \"fade\" */\n  transition?: \"fade\" | \"slide\";\n  /** After the last slide, go back to the first. @default true */\n  loop?: boolean;\n  /** The slide in view (controlled). */\n  index?: number;\n  /** The slide shown first. @default 0 */\n  defaultIndex?: number;\n  /** Called when the slide in view changes — `user` is true when the visitor asked for it. */\n  onIndexChange?: (index: number, user: boolean) => void;\n  /** The words of the controls, translated. */\n  labels?: ShowcaseLabels;\n}\n\n/** An auto-advancing slideshow with a visible, clickable progress bar, a counter, prev / next and a pause button. */\nexport function Showcase<T>({\n  label,\n  items,\n  getId,\n  renderItem,\n  getTitle,\n  interval = 6000,\n  autoplay = true,\n  transition = \"fade\",\n  loop = true,\n  index: controlled,\n  defaultIndex = 0,\n  onIndexChange,\n  labels = showcaseLabels,\n  className,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onPointerEnter,\n  onPointerLeave,\n  ...props\n}: ShowcaseProps<T>) {\n  const total = items.length;\n  const root = React.useRef<HTMLElement>(null);\n  const [inner, setInner] = React.useState(defaultIndex);\n  const current = Math.min(Math.max(controlled ?? inner, 0), Math.max(total - 1, 0));\n  const mounted = React.useSyncExternalStore(subscribeNothing, () => true, () => false);\n  const reduced = React.useSyncExternalStore(subscribeReduced, readReduced, () => false);\n  const hidden = React.useSyncExternalStore(subscribeVisibility, readHidden, () => false);\n  const [paused, setPaused] = React.useState(false);\n  const [hover, setHover] = React.useState(false);\n  const [focus, setFocus] = React.useState(false);\n  const [inView, setInView] = React.useState(true);\n  const [announce, setAnnounce] = React.useState(false);\n\n  React.useEffect(() => {\n    const host = root.current;\n    if (!host || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver((entries) => setInView(entries.some((e) => e.isIntersecting)), { threshold: 0.2 });\n    observer.observe(host);\n    return () => observer.disconnect();\n  }, []);\n\n  const move = (to: number, user: boolean) => {\n    if (total === 0) return;\n    const next = loop ? (to + total) % total : Math.min(Math.max(to, 0), total - 1);\n    if (next === current) return;\n    setAnnounce(user);\n    if (controlled === undefined) setInner(next);\n    onIndexChange?.(next, user);\n  };\n\n  const playing = autoplay && mounted && !reduced && total > 1;\n  const running = playing && !paused && !hover && !focus && !hidden && inView;\n  const lastStop = !loop && current === total - 1;\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;\n    const target = event.target as HTMLElement;\n    if (target.closest(\"input, textarea, select, [contenteditable='true']\")) return;\n    const to = event.key === \"ArrowRight\" ? current + 1 : event.key === \"ArrowLeft\" ? current - 1 : event.key === \"Home\" ? 0 : event.key === \"End\" ? total - 1 : null;\n    if (to === null) return;\n    event.preventDefault();\n    move(to, true);\n  };\n\n  const item = items[current];\n  const title = item !== undefined ? getTitle?.(item) : undefined;\n  const button = \"inline-flex h-9 w-9 items-center justify-center rounded-full border border-border-default bg-surface-1 text-fg-secondary transition-colors hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40\";\n\n  return (\n    <section\n      ref={root}\n      aria-roledescription=\"carousel\"\n      aria-label={label}\n      data-running={running ? \"\" : undefined}\n      className={cn(\"flex flex-col gap-3\", className)}\n      onKeyDown={handleKeyDown}\n      onPointerEnter={(e) => {\n        onPointerEnter?.(e);\n        if (e.pointerType === \"mouse\") setHover(true);\n      }}\n      onPointerLeave={(e) => {\n        onPointerLeave?.(e);\n        setHover(false);\n      }}\n      onFocus={(e) => {\n        onFocus?.(e);\n        // A mouse click on a button is not a reason to stop: only a keyboard focus is.\n        let visible = true;\n        try {\n          visible = e.target.matches(\":focus-visible\");\n        } catch {\n          /* a stand-in without :focus-visible */\n        }\n        if (visible) setFocus(true);\n      }}\n      onBlur={(e) => {\n        onBlur?.(e);\n        if (!e.currentTarget.contains(e.relatedTarget)) setFocus(false);\n      }}\n      {...props}\n    >\n      <style href=\"kz-showcase\" precedence=\"medium\">\n        {FILL_CSS}\n      </style>\n      <div aria-live={announce ? \"polite\" : \"off\"} className=\"grid\">\n        {items.map((slide, i) => {\n          const active = i === current;\n          const gap = Math.abs(i - current);\n          const near = gap <= 1 || (loop && total - gap <= 1);\n          const side = i < current ? \"-translate-x-4\" : \"translate-x-4\";\n          return (\n            <div\n              key={getId(slide)}\n              role=\"group\"\n              aria-roledescription=\"slide\"\n              aria-label={labels.slide(i + 1, total)}\n              aria-hidden={active ? undefined : true}\n              inert={active ? undefined : true}\n              data-active={active ? \"\" : undefined}\n              className={cn(\n                \"col-start-1 row-start-1 min-w-0 transition-[opacity,translate,visibility] duration-500 motion-reduce:transition-none\",\n                active ? \"visible opacity-100\" : \"invisible opacity-0\",\n                transition === \"slide\" && (active ? \"translate-x-0\" : side),\n              )}\n            >\n              {near ? renderItem(slide, { index: i, active }) : null}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"flex gap-1\">\n        {items.map((slide, i) => (\n          <button\n            key={getId(slide)}\n            type=\"button\"\n            aria-label={labels.goTo(i + 1, total)}\n            aria-current={i === current ? \"true\" : undefined}\n            tabIndex={i === current ? 0 : -1}\n            onClick={() => move(i, true)}\n            className=\"group/seg relative flex h-6 min-w-0 flex-1 cursor-pointer items-center rounded-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <span className=\"relative block h-1 w-full overflow-hidden rounded-full bg-surface-3 transition-[height] group-hover/seg:h-1.5\">\n              {i < current || (i === current && (!playing || lastStop)) ? <span className=\"absolute inset-0 bg-accent\" /> : null}\n              {i === current && playing && !lastStop ? (\n                <span\n                  key={`${current}`}\n                  data-segment-fill\n                  className=\"kz-showcase-fill absolute inset-0 bg-accent\"\n                  style={{ animationDuration: `${interval}ms`, animationPlayState: running ? \"running\" : \"paused\" }}\n                  onAnimationEnd={() => running && move(current + 1, false)}\n                />\n              ) : null}\n            </span>\n          </button>\n        ))}\n      </div>\n\n      <div className=\"flex items-center gap-3\">\n        <p className=\"m-0 min-w-0 flex-1 truncate text-sm text-fg-secondary\">\n          {title ? <span className=\"font-medium text-fg\">{title}</span> : null}\n          {title ? <span aria-hidden> · </span> : null}\n          <span>{labels.counter(current + 1, total)}</span>\n        </p>\n        <div className=\"flex items-center gap-1.5\">\n          <button type=\"button\" aria-label={labels.previous} disabled={!loop && current === 0} onClick={() => move(current - 1, true)} className={button}>\n            <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n              <path d=\"M15 5l-7 7 7 7\" />\n            </svg>\n          </button>\n          {playing ? (\n            <button type=\"button\" aria-label={paused ? labels.play : labels.pause} onClick={() => setPaused(!paused)} className={button}>\n              <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"currentColor\" aria-hidden>\n                {paused ? <path d=\"M8 5.5v13l10-6.5Z\" /> : <path d=\"M7 5h3.5v14H7zM13.5 5H17v14h-3.5z\" />}\n              </svg>\n            </button>\n          ) : null}\n          <button type=\"button\" aria-label={labels.next} disabled={!loop && current === total - 1} onClick={() => move(current + 1, true)} className={button}>\n            <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n              <path d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n/**\n * The typed reveal of a text, kept minimal: the visible prefix grows at `speed` characters per second while `active`;\n * under reduced motion (or when not active) it is the whole text at once. Render the full text for assistive technology\n * (`sr-only`) and this one `aria-hidden`.\n */\nexport function useTypedText(text: string, { active = true, speed = 45 }: { active?: boolean; speed?: number } = {}) {\n  const [typed, setTyped] = React.useState({ of: \"\", count: 0 });\n  const reduced = React.useSyncExternalStore(subscribeReduced, readReduced, () => false);\n  React.useEffect(() => {\n    if (!active || reduced) return;\n    const id = window.setInterval(() => {\n      setTyped((state) => {\n        const count = state.of === text ? state.count + 1 : 1;\n        if (count >= text.length) window.clearInterval(id);\n        return { of: text, count };\n      });\n    }, Math.max(10, 1000 / speed));\n    return () => window.clearInterval(id);\n  }, [text, active, reduced, speed]);\n  const count = typed.of === text ? typed.count : 0;\n  const done = !active || reduced || count >= text.length;\n  return { text: done ? text : text.slice(0, count), done };\n}\n"
+      "content": "// Client (state, timers' observers, keys). A slideshow that advances by itself — and shows it: a segmented progress bar\n// (one segment per slide, the current one fills over the interval, each one a button) with a counter, previous / next and a\n// visible pause button (WCAG 2.2.2). The time IS the CSS animation of the current segment (`.kz-showcase-fill`):\n// when it ends, the next slide comes — so what you see filling is exactly what decides, and pausing the animation pauses\n// the show. Its two rules travel with the component (a hoisted, deduplicated <style>): no stylesheet to import. It waits while the pointer is over it, while a keyboard focus is inside, while the tab is hidden and while it\n// is off screen; under reduced motion it never advances by itself. Slides are slots: any content.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nconst FILL_CSS = \".kz-showcase-fill{transform-origin:left;animation:kz-showcase-fill 6s linear forwards}@keyframes kz-showcase-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}\";\nconst REDUCED = \"(prefers-reduced-motion: reduce)\";\nconst subscribeNothing = () => () => undefined;\nconst readReduced = () => Boolean(typeof window !== \"undefined\" && window.matchMedia?.(REDUCED).matches);\nfunction subscribeReduced(notify: () => void) {\n  const query = window.matchMedia?.(REDUCED);\n  query?.addEventListener?.(\"change\", notify);\n  return () => query?.removeEventListener?.(\"change\", notify);\n}\nconst readHidden = () => document.visibilityState === \"hidden\";\nfunction subscribeVisibility(notify: () => void) {\n  document.addEventListener(\"visibilitychange\", notify);\n  return () => document.removeEventListener(\"visibilitychange\", notify);\n}\n\nexport interface ShowcaseLabels {\n  /** The previous button's name. */\n  previous: string;\n  /** The next button's name. */\n  next: string;\n  /** The pause button's name while it plays. */\n  pause: string;\n  /** The same button's name while it is paused. */\n  play: string;\n  /** A progress segment's name: `(3, 17) => \"Go to image 3\"`. */\n  goTo: (n: number, total: number) => string;\n  /** The position in words, beside the title: `(1, 17) => \"Image 1 of 17\"`. */\n  counter: (n: number, total: number) => string;\n  /** The slide's accessible name: `(1, 17) => \"1 of 17\"`. */\n  slide: (n: number, total: number) => string;\n}\n\n/** English defaults — pass your own translated `labels`. */\nexport const showcaseLabels: ShowcaseLabels = {\n  previous: \"Previous slide\",\n  next: \"Next slide\",\n  pause: \"Pause the slideshow\",\n  play: \"Play the slideshow\",\n  goTo: (n) => `Go to slide ${n}`,\n  counter: (n, total) => `Slide ${n} of ${total}`,\n  slide: (n, total) => `${n} of ${total}`,\n};\n\nexport interface ShowcaseSlideState {\n  index: number;\n  /** The slide in view. */\n  active: boolean;\n}\n\nexport interface ShowcaseProps<T> extends Omit<React.ComponentProps<\"section\">, \"children\" | \"onChange\"> {\n  /** The slideshow's accessible name (“Prompt to image”), passed translated. */\n  label: string;\n  /** The slides, in order. */\n  items: readonly T[];\n  /** A stable key for an item. */\n  getId: (item: T) => string;\n  /** One slide's content. Only the slide in view and its neighbours are mounted (the rest stay empty): give slides the same size. */\n  renderItem: (item: T, state: ShowcaseSlideState) => React.ReactNode;\n  /** A slide's title, shown before the counter (“Golden-hour editorial”). */\n  getTitle?: (item: T) => string;\n  /** Milliseconds a slide stays (the time the segment takes to fill). @default 6000 */\n  interval?: number;\n  /** Advances by itself. Never under `prefers-reduced-motion`. @default true */\n  autoplay?: boolean;\n  /** `fade` crossfades; `slide` also moves the slides a few pixels. @default \"fade\" */\n  transition?: \"fade\" | \"slide\";\n  /** After the last slide, go back to the first. @default true */\n  loop?: boolean;\n  /** The slide in view (controlled). */\n  index?: number;\n  /** The slide shown first. @default 0 */\n  defaultIndex?: number;\n  /** Called when the slide in view changes — `user` is true when the visitor asked for it. */\n  onIndexChange?: (index: number, user: boolean) => void;\n  /** The words of the controls, translated. */\n  labels?: ShowcaseLabels;\n}\n\n/** An auto-advancing slideshow with a visible, clickable progress bar, a counter, prev / next and a pause button. */\nexport function Showcase<T>({\n  label,\n  items,\n  getId,\n  renderItem,\n  getTitle,\n  interval = 6000,\n  autoplay = true,\n  transition = \"fade\",\n  loop = true,\n  index: controlled,\n  defaultIndex = 0,\n  onIndexChange,\n  labels = showcaseLabels,\n  className,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onPointerEnter,\n  onPointerLeave,\n  ...props\n}: ShowcaseProps<T>) {\n  const total = items.length;\n  const root = React.useRef<HTMLElement>(null);\n  const [inner, setInner] = React.useState(defaultIndex);\n  const current = Math.min(Math.max(controlled ?? inner, 0), Math.max(total - 1, 0));\n  const mounted = React.useSyncExternalStore(subscribeNothing, () => true, () => false);\n  const reduced = React.useSyncExternalStore(subscribeReduced, readReduced, () => false);\n  const hidden = React.useSyncExternalStore(subscribeVisibility, readHidden, () => false);\n  const [paused, setPaused] = React.useState(false);\n  const [hover, setHover] = React.useState(false);\n  const [focus, setFocus] = React.useState(false);\n  const [inView, setInView] = React.useState(true);\n  const [announce, setAnnounce] = React.useState(false);\n\n  React.useEffect(() => {\n    const host = root.current;\n    if (!host || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver((entries) => setInView(entries.some((e) => e.isIntersecting)), { threshold: 0.2 });\n    observer.observe(host);\n    return () => observer.disconnect();\n  }, []);\n\n  const move = (to: number, user: boolean) => {\n    if (total === 0) return;\n    const next = loop ? (to + total) % total : Math.min(Math.max(to, 0), total - 1);\n    if (next === current) return;\n    setAnnounce(user);\n    if (controlled === undefined) setInner(next);\n    onIndexChange?.(next, user);\n  };\n\n  const playing = autoplay && mounted && !reduced && total > 1;\n  const running = playing && !paused && !hover && !focus && !hidden && inView;\n  const lastStop = !loop && current === total - 1;\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;\n    const target = event.target as HTMLElement;\n    if (target.closest(\"input, textarea, select, [contenteditable='true']\")) return;\n    const to = event.key === \"ArrowRight\" ? current + 1 : event.key === \"ArrowLeft\" ? current - 1 : event.key === \"Home\" ? 0 : event.key === \"End\" ? total - 1 : null;\n    if (to === null) return;\n    event.preventDefault();\n    move(to, true);\n  };\n\n  const item = items[current];\n  const title = item !== undefined ? getTitle?.(item) : undefined;\n  const button = \"inline-flex h-9 w-9 items-center justify-center rounded-full border border-border-default bg-surface-1 text-fg-secondary transition-colors hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40\";\n\n  return (\n    <section\n      ref={root}\n      aria-roledescription=\"carousel\"\n      aria-label={label}\n      data-running={running ? \"\" : undefined}\n      className={cn(\"flex flex-col gap-3\", className)}\n      onKeyDown={handleKeyDown}\n      onPointerEnter={(e) => {\n        onPointerEnter?.(e);\n        if (e.pointerType === \"mouse\") setHover(true);\n      }}\n      onPointerLeave={(e) => {\n        onPointerLeave?.(e);\n        setHover(false);\n      }}\n      onFocus={(e) => {\n        onFocus?.(e);\n        // A mouse click on a button is not a reason to stop: only a keyboard focus is.\n        let visible = true;\n        try {\n          visible = e.target.matches(\":focus-visible\");\n        } catch {\n          /* a stand-in without :focus-visible */\n        }\n        if (visible) setFocus(true);\n      }}\n      onBlur={(e) => {\n        onBlur?.(e);\n        if (!e.currentTarget.contains(e.relatedTarget)) setFocus(false);\n      }}\n      {...props}\n    >\n      <style href=\"kz-showcase\" precedence=\"medium\">\n        {FILL_CSS}\n      </style>\n      <div aria-live={announce ? \"polite\" : \"off\"} className=\"grid grid-cols-[minmax(0,1fr)]\">\n        {items.map((slide, i) => {\n          const active = i === current;\n          const gap = Math.abs(i - current);\n          const near = gap <= 1 || (loop && total - gap <= 1);\n          const side = i < current ? \"-translate-x-4\" : \"translate-x-4\";\n          return (\n            <div\n              key={getId(slide)}\n              role=\"group\"\n              aria-roledescription=\"slide\"\n              aria-label={labels.slide(i + 1, total)}\n              aria-hidden={active ? undefined : true}\n              inert={active ? undefined : true}\n              data-active={active ? \"\" : undefined}\n              className={cn(\n                \"col-start-1 row-start-1 min-w-0 transition-[opacity,translate,visibility] duration-500 motion-reduce:transition-none\",\n                active ? \"visible opacity-100\" : \"invisible opacity-0\",\n                transition === \"slide\" && (active ? \"translate-x-0\" : side),\n              )}\n            >\n              {near ? renderItem(slide, { index: i, active }) : null}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"flex gap-1\">\n        {items.map((slide, i) => (\n          <button\n            key={getId(slide)}\n            type=\"button\"\n            aria-label={labels.goTo(i + 1, total)}\n            aria-current={i === current ? \"true\" : undefined}\n            tabIndex={i === current ? 0 : -1}\n            onClick={() => move(i, true)}\n            className=\"group/seg relative flex h-6 min-w-0 flex-1 cursor-pointer items-center rounded-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <span className=\"relative block h-1 w-full overflow-hidden rounded-full bg-surface-3 transition-[height] group-hover/seg:h-1.5\">\n              {i < current || (i === current && (!playing || lastStop)) ? <span className=\"absolute inset-0 bg-accent\" /> : null}\n              {i === current && playing && !lastStop ? (\n                <span\n                  key={`${current}`}\n                  data-segment-fill\n                  className=\"kz-showcase-fill absolute inset-0 bg-accent\"\n                  style={{ animationDuration: `${interval}ms`, animationPlayState: running ? \"running\" : \"paused\" }}\n                  onAnimationEnd={() => running && move(current + 1, false)}\n                />\n              ) : null}\n            </span>\n          </button>\n        ))}\n      </div>\n\n      <div className=\"flex items-center gap-3\">\n        <p className=\"m-0 min-w-0 flex-1 truncate text-sm text-fg-secondary\">\n          {title ? <span className=\"font-medium text-fg\">{title}</span> : null}\n          {title ? <span aria-hidden> · </span> : null}\n          <span>{labels.counter(current + 1, total)}</span>\n        </p>\n        <div className=\"flex items-center gap-1.5\">\n          <button type=\"button\" aria-label={labels.previous} disabled={!loop && current === 0} onClick={() => move(current - 1, true)} className={button}>\n            <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n              <path d=\"M15 5l-7 7 7 7\" />\n            </svg>\n          </button>\n          {playing ? (\n            <button type=\"button\" aria-label={paused ? labels.play : labels.pause} onClick={() => setPaused(!paused)} className={button}>\n              <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5\" fill=\"currentColor\" aria-hidden>\n                {paused ? <path d=\"M8 5.5v13l10-6.5Z\" /> : <path d=\"M7 5h3.5v14H7zM13.5 5H17v14h-3.5z\" />}\n              </svg>\n            </button>\n          ) : null}\n          <button type=\"button\" aria-label={labels.next} disabled={!loop && current === total - 1} onClick={() => move(current + 1, true)} className={button}>\n            <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n              <path d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </section>\n  );\n}\n\n/**\n * The typed reveal of a text, kept minimal: the visible prefix grows at `speed` characters per second while `active`;\n * under reduced motion (or when not active) it is the whole text at once. Render the full text for assistive technology\n * (`sr-only`) and this one `aria-hidden`.\n */\nexport function useTypedText(text: string, { active = true, speed = 45 }: { active?: boolean; speed?: number } = {}) {\n  const [typed, setTyped] = React.useState({ of: \"\", count: 0 });\n  const reduced = React.useSyncExternalStore(subscribeReduced, readReduced, () => false);\n  React.useEffect(() => {\n    if (!active || reduced) return;\n    const id = window.setInterval(() => {\n      setTyped((state) => {\n        const count = state.of === text ? state.count + 1 : 1;\n        if (count >= text.length) window.clearInterval(id);\n        return { of: text, count };\n      });\n    }, Math.max(10, 1000 / speed));\n    return () => window.clearInterval(id);\n  }, [text, active, reduced, speed]);\n  const count = typed.of === text ? typed.count : 0;\n  const done = !active || reduced || count >= text.length;\n  return { text: done ? text : text.slice(0, count), done };\n}\n"
     }
   ],
   "dependencies": [],

package/registry/site-footer.json

@@ -255,11 +255,11 @@
     },
     {
       "path": "site-footer/site-footer.tsx",
-      "content": "// Client (the marks hold an id). The footer shared by every site of the Krizaka family: the site's own columns, then the\n// family in columns from `@krizaka/ui/sites` (the same groups as the bar's switcher), then the signature line — “A\n// Krizaka product” by the kind of the current site — the version and the place.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { FamilyMark } from \"../family-mark\";\nimport { KrizakaLogo } from \"../marks/KrizakaLogo\";\nimport { type FamilyLabels, familyLabels, siteById, type SiteId, sitesByGroup } from \"../sites/sites\";\n\nexport const siteFooter = tv({\n  slots: {\n    root: \"w-full border-t border-border-subtle bg-surface-0 text-fg\",\n    inner: \"mx-auto grid w-full max-w-(--kz-page-max,72rem) gap-10 px-(--kz-page-gutter,16px) py-12\",\n    top: \"grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]\",\n    site: \"grid content-start gap-3\",\n    siteName: \"inline-flex items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg\",\n    siteText: \"max-w-xs text-sm leading-relaxed text-fg-secondary\",\n    own: \"grid grid-cols-2 gap-8 sm:grid-cols-3\",\n    family: \"grid grid-cols-2 gap-8 border-t border-border-subtle pt-8 md:grid-cols-4\",\n    column: \"grid content-start gap-3\",\n    title: \"text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    list: \"grid gap-2\",\n    link:\n      \"inline-flex min-h-6 items-center gap-2 rounded-md text-sm text-fg-secondary no-underline transition-colors hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg aria-[current=true]:text-fg aria-[current=true]:font-semibold\",\n    mark: \"flex h-4 w-4 shrink-0 items-center justify-center text-fg\",\n    tag: \"rounded-full bg-surface-3 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    bottom: \"flex flex-wrap items-center gap-x-5 gap-y-3 border-t border-border-subtle pt-6 text-xs text-fg-secondary\",\n    signature:\n      \"inline-flex items-center gap-2 rounded-md font-medium text-fg no-underline hover:text-fg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    version: \"rounded-full border border-border-subtle bg-surface-2 px-2 py-0.5 font-mono text-[11px] text-fg-secondary\",\n    legal: \"flex flex-wrap items-center gap-x-4 gap-y-2 sm:ml-auto\",\n  },\n});\nconst s = siteFooter();\n\nexport type SiteFooterProps = Omit<React.ComponentProps<\"footer\">, \"children\"> & {\n  /** The site this footer belongs to (`@krizaka/ui/sites`): its mark and line, its signature, marked in the family. */\n  current: SiteId;\n  /**\n   * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.\n   * @default familyLabels.en\n   */\n  labels?: FamilyLabels;\n  /** The site's own columns (`SiteFooter.Column`), before the family. */\n  children?: React.ReactNode;\n  /** The version the site runs (`1.2.3`, shown `v1.2.3`). */\n  version?: string;\n  /** The environment, when it is not production (`DEV`). */\n  env?: string;\n  /** The end of the signature line: legal links, a language switch (`SiteFooter.Link`s or any inline content). */\n  legal?: React.ReactNode;\n};\n\n/** The footer of a Krizaka site: its own columns, the family in columns, the signature, the version, Montréal. */\nexport function SiteFooter({ current, labels = familyLabels.en, children, version, env, legal, className, ...props }: SiteFooterProps) {\n  const id = React.useId();\n  const site = siteById(current);\n  const krizaka = siteById(\"krizaka\");\n  const tag = [env, version && `v${version.replace(/^v/, \"\")}`].filter(Boolean).join(\" · \");\n  return (\n    <footer className={s.root({ className })} {...props}>\n      <div className={s.inner()}>\n        <div className={s.top()}>\n          <div className={s.site()}>\n            <a href={site.url} className={s.siteName()}>\n              <FamilyMark mark={site.mark} size={24} />\n              {site.name}\n            </a>\n            <p className={s.siteText()}>{labels.descriptions[site.id]}</p>\n          </div>\n          {children && <div className={s.own()}>{children}</div>}\n        </div>\n        <nav aria-label={labels.family} className={s.family()}>\n          {sitesByGroup().map(({ group, sites }) => (\n            <div key={group} className={s.column()}>\n              <p id={`${id}-${group}`} className={s.title()}>\n                {labels.groups[group]}\n              </p>\n              <ul aria-labelledby={`${id}-${group}`} className={s.list()}>\n                {sites.map((item) => (\n                  <li key={item.id}>\n                    <a href={item.url} aria-current={item.id === current ? \"true\" : undefined} className={s.link()}>\n                      <span className={s.mark()}>\n                        <FamilyMark mark={item.mark} size={16} />\n                      </span>\n                      {item.name}\n                      {item.status !== \"released\" && <span className={s.tag()}>{labels.status[item.status]}</span>}\n                      {item.id === current && <span className=\"sr-only\">({labels.current})</span>}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </nav>\n        <div className={s.bottom()}>\n          <a href={krizaka.url} className={s.signature()}>\n            <KrizakaLogo size={18} animated={false} />\n            {labels.signature[site.kind]}\n          </a>\n          {tag && (\n            <span className={s.version()}>\n              <span className=\"sr-only\">{labels.version} </span>\n              {tag}\n            </span>\n          )}\n          <span>{labels.place}</span>\n          {legal && <div className={s.legal()}>{legal}</div>}\n        </div>\n      </div>\n    </footer>\n  );\n}\n\nexport type SiteFooterColumnProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The column's heading (“Docs”) — passed translated. */\n  title: string;\n  /** Its links (`SiteFooter.Link`). */\n  children: React.ReactNode;\n};\n\n/** One of the site's own columns: a heading and its links. */\nexport function SiteFooterColumn({ title, children, className, ...props }: SiteFooterColumnProps) {\n  const id = React.useId();\n  return (\n    <div className={s.column({ className })} {...props}>\n      <p id={id} className={s.title()}>\n        {title}\n      </p>\n      <ul aria-labelledby={id} className={s.list()}>\n        {React.Children.map(children, (child) => (child ? <li>{child}</li> : null))}\n      </ul>\n    </div>\n  );\n}\n\nexport type SiteFooterLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page: `aria-current=\"page\"`. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the footer. */\nexport function SiteFooterLink({ active, asChild, className, ...props }: SiteFooterLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.link({ className })} {...props} />;\n}\n\nSiteFooter.Column = SiteFooterColumn;\nSiteFooter.Link = SiteFooterLink;\n"
+      "content": "// Client (the marks hold an id). The footer shared by every site of the Krizaka family: the site's own columns, then the\n// family in columns from `@krizaka/ui/sites` (the same groups as the bar's switcher), then the signature line — “A\n// Krizaka product” by the kind of the current site — the version and the place.\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { FamilyMark } from \"../family-mark\";\nimport { KrizakaLogo } from \"../marks/KrizakaLogo\";\nimport { type FamilyLabels, familyLabels, siteById, type SiteId, sitesByGroup } from \"../sites/sites\";\n\nexport const siteFooter = tv({\n  slots: {\n    root: \"w-full border-t border-border-subtle bg-surface-0 text-fg\",\n    inner: \"mx-auto grid w-full max-w-(--kz-page-max,72rem) grid-cols-[minmax(0,1fr)] gap-10 px-(--kz-page-gutter,16px) py-12\",\n    top: \"grid grid-cols-[minmax(0,1fr)] gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]\",\n    site: \"grid content-start gap-3\",\n    siteName: \"inline-flex items-center gap-2 font-display text-[15px] font-bold tracking-tight text-fg\",\n    siteText: \"max-w-xs text-sm leading-relaxed text-fg-secondary\",\n    own: \"grid grid-cols-2 gap-8 sm:grid-cols-3\",\n    family: \"grid grid-cols-2 gap-8 border-t border-border-subtle pt-8 md:grid-cols-4\",\n    column: \"grid min-w-0 content-start gap-3\",\n    title: \"text-[11px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    list: \"grid min-w-0 gap-2\",\n    link:\n      \"inline-flex min-h-6 min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 rounded-md text-sm [overflow-wrap:anywhere] text-fg-secondary no-underline transition-colors hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:text-fg aria-[current=true]:text-fg aria-[current=true]:font-semibold\",\n    mark: \"flex h-4 w-4 shrink-0 items-center justify-center text-fg\",\n    tag: \"rounded-full bg-surface-3 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    bottom: \"flex flex-wrap items-center gap-x-5 gap-y-3 border-t border-border-subtle pt-6 text-xs text-fg-secondary\",\n    signature:\n      \"inline-flex items-center gap-2 rounded-md font-medium text-fg no-underline hover:text-fg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    version: \"rounded-full border border-border-subtle bg-surface-2 px-2 py-0.5 font-mono text-[11px] text-fg-secondary\",\n    legal: \"flex flex-wrap items-center gap-x-4 gap-y-2 sm:ml-auto\",\n  },\n});\nconst s = siteFooter();\n\nexport type SiteFooterProps = Omit<React.ComponentProps<\"footer\">, \"children\"> & {\n  /** The site this footer belongs to (`@krizaka/ui/sites`): its mark and line, its signature, marked in the family. */\n  current: SiteId;\n  /**\n   * The family's words, passed translated: `familyLabels.fr` from `@krizaka/ui/sites`, or your own of the same shape.\n   * @default familyLabels.en\n   */\n  labels?: FamilyLabels;\n  /** The site's own columns (`SiteFooter.Column`), before the family. */\n  children?: React.ReactNode;\n  /** The version the site runs (`1.2.3`, shown `v1.2.3`). */\n  version?: string;\n  /** The environment, when it is not production (`DEV`). */\n  env?: string;\n  /** The end of the signature line: legal links, a language switch (`SiteFooter.Link`s or any inline content). */\n  legal?: React.ReactNode;\n};\n\n/** The footer of a Krizaka site: its own columns, the family in columns, the signature, the version, Montréal. */\nexport function SiteFooter({ current, labels = familyLabels.en, children, version, env, legal, className, ...props }: SiteFooterProps) {\n  const id = React.useId();\n  const site = siteById(current);\n  const krizaka = siteById(\"krizaka\");\n  const tag = [env, version && `v${version.replace(/^v/, \"\")}`].filter(Boolean).join(\" · \");\n  return (\n    <footer className={s.root({ className })} {...props}>\n      <div className={s.inner()}>\n        <div className={s.top()}>\n          <div className={s.site()}>\n            <a href={site.url} className={s.siteName()}>\n              <FamilyMark mark={site.mark} size={24} />\n              {site.name}\n            </a>\n            <p className={s.siteText()}>{labels.descriptions[site.id]}</p>\n          </div>\n          {children && <div className={s.own()}>{children}</div>}\n        </div>\n        <nav aria-label={labels.family} className={s.family()}>\n          {sitesByGroup().map(({ group, sites }) => (\n            <div key={group} className={s.column()}>\n              <p id={`${id}-${group}`} className={s.title()}>\n                {labels.groups[group]}\n              </p>\n              <ul aria-labelledby={`${id}-${group}`} className={s.list()}>\n                {sites.map((item) => (\n                  <li key={item.id}>\n                    <a href={item.url} aria-current={item.id === current ? \"true\" : undefined} className={s.link()}>\n                      <span className={s.mark()}>\n                        <FamilyMark mark={item.mark} size={16} />\n                      </span>\n                      {item.name}\n                      {item.status !== \"released\" && <span className={s.tag()}>{labels.status[item.status]}</span>}\n                      {item.id === current && <span className=\"sr-only\">({labels.current})</span>}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </nav>\n        <div className={s.bottom()}>\n          <a href={krizaka.url} className={s.signature()}>\n            <KrizakaLogo size={18} animated={false} />\n            {labels.signature[site.kind]}\n          </a>\n          {tag && (\n            <span className={s.version()}>\n              <span className=\"sr-only\">{labels.version} </span>\n              {tag}\n            </span>\n          )}\n          <span>{labels.place}</span>\n          {legal && <div className={s.legal()}>{legal}</div>}\n        </div>\n      </div>\n    </footer>\n  );\n}\n\nexport type SiteFooterColumnProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  /** The column's heading (“Docs”) — passed translated. */\n  title: string;\n  /** Its links (`SiteFooter.Link`). */\n  children: React.ReactNode;\n};\n\n/** One of the site's own columns: a heading and its links. */\nexport function SiteFooterColumn({ title, children, className, ...props }: SiteFooterColumnProps) {\n  const id = React.useId();\n  return (\n    <div className={s.column({ className })} {...props}>\n      <p id={id} className={s.title()}>\n        {title}\n      </p>\n      <ul aria-labelledby={id} className={s.list()}>\n        {React.Children.map(children, (child) => (child ? <li>{child}</li> : null))}\n      </ul>\n    </div>\n  );\n}\n\nexport type SiteFooterLinkProps = React.ComponentProps<\"a\"> & {\n  /** The current page: `aria-current=\"page\"`. */\n  active?: boolean;\n  /** Renders your router's `<Link>`. */\n  asChild?: boolean;\n};\n\n/** A link of the footer. */\nexport function SiteFooterLink({ active, asChild, className, ...props }: SiteFooterLinkProps) {\n  const Comp = asChild ? Slot.Root : \"a\";\n  return <Comp aria-current={active ? \"page\" : undefined} className={s.link({ className })} {...props} />;\n}\n\nSiteFooter.Column = SiteFooterColumn;\nSiteFooter.Link = SiteFooterLink;\n"
     }
   ],
   "dependencies": [
-    "@krizaka/tokens@^3.11.0",
+    "@krizaka/tokens@^3.12.0",
     "radix-ui@^1.7.0",
     "tailwind-variants@^3.3.1"
   ],

package/dist/chunk-CURW36FI.js

@@ -1,47 +0,0 @@
-"use client";
-
-// src/avatar/avatar.tsx
-import { Avatar as AvatarPrimitive } from "radix-ui";
-import * as React from "react";
-import { tv } from "tailwind-variants";
-import { jsx, jsxs } from "react/jsx-runtime";
-var avatar = tv({
-  slots: {
-    root: "relative inline-flex shrink-0 overflow-hidden rounded-full bg-surface-3 align-middle",
-    image: "h-full w-full object-cover",
-    fallback: "flex h-full w-full items-center justify-center font-semibold uppercase text-fg-secondary",
-    group: "flex items-center -space-x-2 [&>*]:ring-2 [&>*]:ring-surface-0"
-  },
-  variants: {
-    size: {
-      xs: { root: "h-5 w-5 text-[9px]" },
-      sm: { root: "h-8 w-8 text-xs" },
-      md: { root: "h-10 w-10 text-sm" },
-      lg: { root: "h-14 w-14 text-base" },
-      xl: { root: "h-20 w-20 text-lg" }
-    }
-  },
-  defaultVariants: { size: "md" }
-});
-function AvatarRoot({ src, alt = "", fallback, size, className, ...props }) {
-  const s = avatar({ size });
-  return /* @__PURE__ */ jsxs(AvatarPrimitive.Root, { "data-size": size ?? "md", className: s.root({ className }), ...props, children: [
-    src && /* @__PURE__ */ jsx(AvatarPrimitive.Image, { src, alt, className: s.image() }),
-    /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, { delayMs: src ? 300 : 0, className: s.fallback(), children: fallback })
-  ] });
-}
-function AvatarGroup({ max, size, className, children, ...props }) {
-  const items = React.Children.toArray(children);
-  const shown = max === void 0 ? items : items.slice(0, max);
-  const rest = items.length - shown.length;
-  return /* @__PURE__ */ jsxs("div", { className: avatar().group({ className }), ...props, children: [
-    shown,
-    rest > 0 && /* @__PURE__ */ jsx(AvatarRoot, { size, fallback: `+${rest}` })
-  ] });
-}
-var Avatar = Object.assign(AvatarRoot, { Group: AvatarGroup });
-
-export {
-  Avatar
-};
-//# sourceMappingURL=chunk-CURW36FI.js.map

package/dist/chunk-CURW36FI.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/avatar/avatar.tsx"],"sourcesContent":["// Client: Radix tracks the image's loading state and shows the fallback until it has loaded (or when it fails).\nimport { Avatar as AvatarPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nconst avatar = tv({\n  slots: {\n    root: \"relative inline-flex shrink-0 overflow-hidden rounded-full bg-surface-3 align-middle\",\n    image: \"h-full w-full object-cover\",\n    fallback: \"flex h-full w-full items-center justify-center font-semibold uppercase text-fg-secondary\",\n    group: \"flex items-center -space-x-2 [&>*]:ring-2 [&>*]:ring-surface-0\",\n  },\n  variants: {\n    size: {\n      xs: { root: \"h-5 w-5 text-[9px]\" },\n      sm: { root: \"h-8 w-8 text-xs\" },\n      md: { root: \"h-10 w-10 text-sm\" },\n      lg: { root: \"h-14 w-14 text-base\" },\n      xl: { root: \"h-20 w-20 text-lg\" },\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type AvatarSize = NonNullable<VariantProps<typeof avatar>[\"size\"]>;\n\nexport type AvatarProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** The image's text alternative (the person's name); empty when a visible name sits next to the avatar. */\n  alt?: string;\n  /** Shown while the image loads, when it fails or when there is none: initials, an icon. */\n  fallback?: React.ReactNode;\n  /**\n   * xs · sm · md · lg · xl.\n   * @default \"md\"\n   */\n  size?: AvatarSize;\n};\n\nexport function AvatarRoot({ src, alt = \"\", fallback, size, className, ...props }: AvatarProps) {\n  const s = avatar({ size });\n  return (\n    <AvatarPrimitive.Root data-size={size ?? \"md\"} className={s.root({ className })} {...props}>\n      {src && <AvatarPrimitive.Image src={src} alt={alt} className={s.image()} />}\n      <AvatarPrimitive.Fallback delayMs={src ? 300 : 0} className={s.fallback()}>\n        {fallback}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  );\n}\n\nexport type AvatarGroupProps = React.ComponentProps<\"div\"> & {\n  /** How many avatars are shown; the rest becomes a `+n` avatar. */\n  max?: number;\n  /** The size of the `+n` avatar (match the avatars of the group). */\n  size?: AvatarSize;\n};\n\n/** Overlapping avatars; past `max`, a `+n` avatar counts the rest. */\nexport function AvatarGroup({ max, size, className, children, ...props }: AvatarGroupProps) {\n  const items = React.Children.toArray(children);\n  const shown = max === undefined ? items : items.slice(0, max);\n  const rest = items.length - shown.length;\n  return (\n    <div className={avatar().group({ className })} {...props}>\n      {shown}\n      {rest > 0 && <AvatarRoot size={size} fallback={`+${rest}`} />}\n    </div>\n  );\n}\n\n/** `Avatar` (an image with a fallback) and `Avatar.Group`. */\nexport const Avatar = Object.assign(AvatarRoot, { Group: AvatarGroup });\n"],"mappings":";;;AACA,SAAS,UAAU,uBAAuB;AAC1C,YAAY,WAAW;AACvB,SAAS,UAA6B;AAwClC,SACU,KADV;AAtCJ,IAAM,SAAS,GAAG;AAAA,EAChB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,EAAE,MAAM,qBAAqB;AAAA,MACjC,IAAI,EAAE,MAAM,kBAAkB;AAAA,MAC9B,IAAI,EAAE,MAAM,oBAAoB;AAAA,MAChC,IAAI,EAAE,MAAM,sBAAsB;AAAA,MAClC,IAAI,EAAE,MAAM,oBAAoB;AAAA,IAClC;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAkBM,SAAS,WAAW,EAAE,KAAK,MAAM,IAAI,UAAU,MAAM,WAAW,GAAG,MAAM,GAAgB;AAC9F,QAAM,IAAI,OAAO,EAAE,KAAK,CAAC;AACzB,SACE,qBAAC,gBAAgB,MAAhB,EAAqB,aAAW,QAAQ,MAAM,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAClF;AAAA,WAAO,oBAAC,gBAAgB,OAAhB,EAAsB,KAAU,KAAU,WAAW,EAAE,MAAM,GAAG;AAAA,IACzE,oBAAC,gBAAgB,UAAhB,EAAyB,SAAS,MAAM,MAAM,GAAG,WAAW,EAAE,SAAS,GACrE,oBACH;AAAA,KACF;AAEJ;AAUO,SAAS,YAAY,EAAE,KAAK,MAAM,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1F,QAAM,QAAc,eAAS,QAAQ,QAAQ;AAC7C,QAAM,QAAQ,QAAQ,SAAY,QAAQ,MAAM,MAAM,GAAG,GAAG;AAC5D,QAAM,OAAO,MAAM,SAAS,MAAM;AAClC,SACE,qBAAC,SAAI,WAAW,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,GAAI,GAAG,OAChD;AAAA;AAAA,IACA,OAAO,KAAK,oBAAC,cAAW,MAAY,UAAU,IAAI,IAAI,IAAI;AAAA,KAC7D;AAEJ;AAGO,IAAM,SAAS,OAAO,OAAO,YAAY,EAAE,OAAO,YAAY,CAAC;","names":[]}