@krizaka/ui 3.20.0 → 3.21.0

package/dist/action-bar.js

@@ -5,14 +5,14 @@ import {
 import {
   ExternalGlyph
 } from "./chunk-XCBVFMNV.js";
-import {
-  buttonVariants
-} from "./chunk-2NB27LM7.js";
-import "./chunk-2VNYHG4E.js";
 import {
   cn
 } from "./chunk-4LOMIQVX.js";
+import {
+  buttonVariants
+} from "./chunk-3IN6TOPM.js";
 import "./chunk-43PTCDTL.js";
+import "./chunk-2VNYHG4E.js";
 
 // src/action-bar/action-bar.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/argument-card.js

@@ -4,11 +4,11 @@ import {
 import {
   BlockLink
 } from "./chunk-2AGSO3WH.js";
+import "./chunk-XVLWVTQA.js";
 import {
   ArrowGlyph,
   ChevronGlyph
 } from "./chunk-XCBVFMNV.js";
-import "./chunk-XVLWVTQA.js";
 import {
   cn
 } from "./chunk-4LOMIQVX.js";

package/dist/blocks.css

@@ -584,7 +584,7 @@ a.kz-fact:focus-visible { outline: 2px solid var(--kz-ring, var(--kz-accent)); o
 @media (max-width: 1023px) {
   .kz-toc-layout { grid-template-columns: minmax(0, 1fr); gap: 8px; }
   .kz-toc-aside { position: static; padding-top: 0; margin-inline: calc(-1 * var(--kz-gutter, 16px)); }
-  .kz-toc { padding: 0 var(--kz-gutter, 16px) 4px; overflow-x: auto; scrollbar-width: none; }
+  .kz-toc { padding: 0 var(--kz-gutter, 16px) 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
   .kz-toc .kz-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
   .kz-toc ol { margin: 0; display: flex; gap: 8px; width: max-content; border: 0; }
   .kz-toc a { min-height: 36px; padding: 0 14px; border-radius: 999px; white-space: nowrap; background: var(--kz-surface-1); border: 1px solid var(--kz-border-default); }

package/dist/button.js

@@ -1,10 +1,11 @@
+import "./chunk-TDG7ED2W.js";
 import {
   Button,
   IconButton,
   buttonVariants
-} from "./chunk-2NB27LM7.js";
-import "./chunk-2VNYHG4E.js";
+} from "./chunk-3IN6TOPM.js";
 import "./chunk-43PTCDTL.js";
+import "./chunk-2VNYHG4E.js";
 export {
   Button,
   IconButton,

package/dist/card.js

@@ -1,9 +1,9 @@
-import {
-  defineRecipe
-} from "./chunk-2VNYHG4E.js";
 import {
   cn
 } from "./chunk-4LOMIQVX.js";
+import {
+  defineRecipe
+} from "./chunk-2VNYHG4E.js";
 
 // src/card/card.tsx
 import { Slot } from "radix-ui";

package/dist/{chunk-2NB27LM7.js → chunk-3IN6TOPM.js}

@@ -1,9 +1,9 @@
-import {
-  defineRecipe
-} from "./chunk-2VNYHG4E.js";
 import {
   LoaderGlyph
 } from "./chunk-43PTCDTL.js";
+import {
+  defineRecipe
+} from "./chunk-2VNYHG4E.js";
 
 // src/button/button.tsx
 import { Slot } from "radix-ui";
@@ -107,4 +107,4 @@ export {
   Button,
   IconButton
 };
-//# sourceMappingURL=chunk-2NB27LM7.js.map
+//# sourceMappingURL=chunk-3IN6TOPM.js.map

package/dist/{chunk-VDR2EP6K.js → chunk-4QN5YJ3D.js}

@@ -3,7 +3,7 @@
 // src/sliding-indicator.ts
 import * as React from "react";
 var useIsoLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
-function useSlidingIndicator({ item, active, follow = false }) {
+function useSlidingIndicator({ item, active, prefer, follow = false }) {
   const ref = React.useRef(null);
   const place = React.useCallback((target) => {
     const list = ref.current;
@@ -20,7 +20,19 @@ function useSlidingIndicator({ item, active, follow = false }) {
     list.style.setProperty("--kz-ind-h", `${a.height}px`);
     list.setAttribute("data-indicator", "on");
   }, []);
-  const rest = React.useCallback(() => place(ref.current?.querySelector(active) ?? null), [place, active]);
+  const rest = React.useCallback(
+    () => {
+      const list = ref.current;
+      const hovered = follow ? list?.querySelector(`${item}:hover`) : null;
+      place((prefer ? list?.querySelector(prefer) : null) ?? hovered ?? list?.querySelector(active) ?? null);
+    },
+    [place, active, prefer, item, follow]
+  );
+  const follow_ = React.useCallback((target) => {
+    const hit = target instanceof Element ? target.closest(item) : null;
+    if (hit && ref.current?.contains(hit)) place(hit);
+    else rest();
+  }, [item, place, rest]);
   useIsoLayoutEffect(() => {
     const list = ref.current;
     if (!list) return;
@@ -35,9 +47,9 @@ function useSlidingIndicator({ item, active, follow = false }) {
     };
   }, [rest]);
   const handlers = follow ? {
-    onPointerOver: (e) => place(e.target.closest(item)),
+    onPointerOver: (e) => follow_(e.target),
     onPointerLeave: rest,
-    onFocus: (e) => place(e.target.closest(item)),
+    onFocus: (e) => follow_(e.target),
     onBlur: rest
   } : {};
   return { ref, handlers };
@@ -46,4 +58,4 @@ function useSlidingIndicator({ item, active, follow = false }) {
 export {
   useSlidingIndicator
 };
-//# sourceMappingURL=chunk-VDR2EP6K.js.map
+//# sourceMappingURL=chunk-4QN5YJ3D.js.map

package/dist/chunk-4QN5YJ3D.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/sliding-indicator.ts"],"sourcesContent":["// The shared sliding indicator (NavBar, Tabs): one element that glides from item to item instead of each item lighting\n// up on its own. It writes the target's box as CSS variables on the list (`--kz-ind-x/y/w/h`) and `data-indicator=\"on\"`\n// — no re-render, no animation frame: the glide is a CSS transition (none under reduced motion). Before hydration the\n// items keep their own active style, so nothing flashes.\nimport * as React from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\n/**\n * `item`: the selector of an item; `active`: of the current one, where the light rests; `prefer`: an item that, when\n * present, holds the light before the current one (the NavBar's open menu); `follow`: the light follows the pointer\n * and the focus — over anything that is not an item (an open menu's panel) it goes back to rest.\n */\nexport function useSlidingIndicator<T extends HTMLElement>({ item, active, prefer, follow = false }: { item: string; active: string; prefer?: string; follow?: boolean }) {\n  const ref = React.useRef<T>(null);\n  const place = React.useCallback((target: Element | null) => {\n    const list = ref.current;\n    if (!list) return;\n    if (!(target instanceof HTMLElement) || !list.contains(target)) {\n      list.removeAttribute(\"data-indicator\");\n      return;\n    }\n    const a = target.getBoundingClientRect();\n    const b = list.getBoundingClientRect();\n    list.style.setProperty(\"--kz-ind-x\", `${a.left - b.left + list.scrollLeft}px`);\n    list.style.setProperty(\"--kz-ind-y\", `${a.top - b.top + list.scrollTop}px`);\n    list.style.setProperty(\"--kz-ind-w\", `${a.width}px`);\n    list.style.setProperty(\"--kz-ind-h\", `${a.height}px`);\n    list.setAttribute(\"data-indicator\", \"on\");\n  }, []);\n  const rest = React.useCallback(\n    () => {\n      const list = ref.current;\n      // An item re-rendered under a resting pointer (a menu closing) keeps the light the pointer gave it.\n      const hovered = follow ? list?.querySelector(`${item}:hover`) : null;\n      place((prefer ? list?.querySelector(prefer) : null) ?? hovered ?? list?.querySelector(active) ?? null);\n    },\n    [place, active, prefer, item, follow],\n  );\n  const follow_ = React.useCallback((target: EventTarget) => {\n    const hit = target instanceof Element ? target.closest(item) : null;\n    if (hit && ref.current?.contains(hit)) place(hit);\n    else rest();\n  }, [item, place, rest]);\n\n  useIsoLayoutEffect(() => {\n    const list = ref.current;\n    if (!list) return;\n    rest();\n    const resize = new ResizeObserver(rest);\n    resize.observe(list);\n    const changes = new MutationObserver(rest);\n    changes.observe(list, { subtree: true, attributes: true, attributeFilter: [\"data-state\", \"aria-current\", \"data-active\"] });\n    return () => {\n      resize.disconnect();\n      changes.disconnect();\n    };\n  }, [rest]);\n\n  const handlers = follow\n    ? {\n        onPointerOver: (e: React.PointerEvent) => follow_(e.target),\n        onPointerLeave: rest,\n        onFocus: (e: React.FocusEvent) => follow_(e.target),\n        onBlur: rest,\n      }\n    : {};\n  return { ref, handlers };\n}\n"],"mappings":";;;AAIA,YAAY,WAAW;AAEvB,IAAM,qBAAqB,OAAO,WAAW,cAAoB,kBAAkB;AAO5E,SAAS,oBAA2C,EAAE,MAAM,QAAQ,QAAQ,SAAS,MAAM,GAAwE;AACxK,QAAM,MAAY,aAAU,IAAI;AAChC,QAAM,QAAc,kBAAY,CAAC,WAA2B;AAC1D,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAM;AACX,QAAI,EAAE,kBAAkB,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG;AAC9D,WAAK,gBAAgB,gBAAgB;AACrC;AAAA,IACF;AACA,UAAM,IAAI,OAAO,sBAAsB;AACvC,UAAM,IAAI,KAAK,sBAAsB;AACrC,SAAK,MAAM,YAAY,cAAc,GAAG,EAAE,OAAO,EAAE,OAAO,KAAK,UAAU,IAAI;AAC7E,SAAK,MAAM,YAAY,cAAc,GAAG,EAAE,MAAM,EAAE,MAAM,KAAK,SAAS,IAAI;AAC1E,SAAK,MAAM,YAAY,cAAc,GAAG,EAAE,KAAK,IAAI;AACnD,SAAK,MAAM,YAAY,cAAc,GAAG,EAAE,MAAM,IAAI;AACpD,SAAK,aAAa,kBAAkB,IAAI;AAAA,EAC1C,GAAG,CAAC,CAAC;AACL,QAAM,OAAa;AAAA,IACjB,MAAM;AACJ,YAAM,OAAO,IAAI;AAEjB,YAAM,UAAU,SAAS,MAAM,cAAc,GAAG,IAAI,QAAQ,IAAI;AAChE,aAAO,SAAS,MAAM,cAAc,MAAM,IAAI,SAAS,WAAW,MAAM,cAAc,MAAM,KAAK,IAAI;AAAA,IACvG;AAAA,IACA,CAAC,OAAO,QAAQ,QAAQ,MAAM,MAAM;AAAA,EACtC;AACA,QAAM,UAAgB,kBAAY,CAAC,WAAwB;AACzD,UAAM,MAAM,kBAAkB,UAAU,OAAO,QAAQ,IAAI,IAAI;AAC/D,QAAI,OAAO,IAAI,SAAS,SAAS,GAAG,EAAG,OAAM,GAAG;AAAA,QAC3C,MAAK;AAAA,EACZ,GAAG,CAAC,MAAM,OAAO,IAAI,CAAC;AAEtB,qBAAmB,MAAM;AACvB,UAAM,OAAO,IAAI;AACjB,QAAI,CAAC,KAAM;AACX,SAAK;AACL,UAAM,SAAS,IAAI,eAAe,IAAI;AACtC,WAAO,QAAQ,IAAI;AACnB,UAAM,UAAU,IAAI,iBAAiB,IAAI;AACzC,YAAQ,QAAQ,MAAM,EAAE,SAAS,MAAM,YAAY,MAAM,iBAAiB,CAAC,cAAc,gBAAgB,aAAa,EAAE,CAAC;AACzH,WAAO,MAAM;AACX,aAAO,WAAW;AAClB,cAAQ,WAAW;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,WAAW,SACb;AAAA,IACE,eAAe,CAAC,MAA0B,QAAQ,EAAE,MAAM;AAAA,IAC1D,gBAAgB;AAAA,IAChB,SAAS,CAAC,MAAwB,QAAQ,EAAE,MAAM;AAAA,IAClD,QAAQ;AAAA,EACV,IACA,CAAC;AACL,SAAO,EAAE,KAAK,SAAS;AACzB;","names":[]}

package/dist/chunk-TDG7ED2W.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-TDG7ED2W.js.map

package/dist/chunk-TDG7ED2W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/code-block.js

@@ -18,7 +18,7 @@ import { tv } from "tailwind-variants";
 // src/sliding-indicator.ts
 import * as React from "react";
 var useIsoLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
-function useSlidingIndicator({ item, active, follow = false }) {
+function useSlidingIndicator({ item, active, prefer, follow = false }) {
   const ref = React.useRef(null);
   const place = React.useCallback((target) => {
     const list = ref.current;
@@ -35,7 +35,19 @@ function useSlidingIndicator({ item, active, follow = false }) {
     list.style.setProperty("--kz-ind-h", `${a.height}px`);
     list.setAttribute("data-indicator", "on");
   }, []);
-  const rest = React.useCallback(() => place(ref.current?.querySelector(active) ?? null), [place, active]);
+  const rest = React.useCallback(
+    () => {
+      const list = ref.current;
+      const hovered = follow ? list?.querySelector(`${item}:hover`) : null;
+      place((prefer ? list?.querySelector(prefer) : null) ?? hovered ?? list?.querySelector(active) ?? null);
+    },
+    [place, active, prefer, item, follow]
+  );
+  const follow_ = React.useCallback((target) => {
+    const hit = target instanceof Element ? target.closest(item) : null;
+    if (hit && ref.current?.contains(hit)) place(hit);
+    else rest();
+  }, [item, place, rest]);
   useIsoLayoutEffect(() => {
     const list = ref.current;
     if (!list) return;
@@ -50,9 +62,9 @@ function useSlidingIndicator({ item, active, follow = false }) {
     };
   }, [rest]);
   const handlers = follow ? {
-    onPointerOver: (e) => place(e.target.closest(item)),
+    onPointerOver: (e) => follow_(e.target),
     onPointerLeave: rest,
-    onFocus: (e) => place(e.target.closest(item)),
+    onFocus: (e) => follow_(e.target),
     onBlur: rest
   } : {};
   return { ref, handlers };
@@ -83,7 +95,7 @@ var tabs = tv({
       },
       /* Pills that scroll sideways on a phone: a feed's sections. */
       pills: {
-        list: "gap-1.5 overflow-x-auto overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1 before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-full before:border before:border-accent before:bg-accent-soft",
+        list: "gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-full before:border before:border-accent before:bg-accent-soft",
         trigger: "h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent"
       }
     }

package/dist/code-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/code-block/code-block.tsx","../src/tabs/tabs.tsx","../src/sliding-indicator.ts","../src/code-block/tokens.tsx","../src/code-block/highlighter.ts"],"sourcesContent":["// Client (the copy button, the tabs). A sample of code (blocks.css): its language and its file name, the code\n// highlighted by TanStack Highlight (it scrolls sideways, never shrinks, and takes the keyboard's focus to scroll),\n// lines numbered or set apart (highlighted, added, removed, in focus), a copy button that says it copied in a polite\n// live region. CodeTabs puts several ways to write the same thing (Maven · Gradle · npm) under\n// the tabs of @krizaka/ui.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { CheckGlyph, CopyGlyph } from \"../glyphs\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"../tabs/tabs\";\nimport { type CodeAnnotation, highlight } from \"./tokens\";\n\nexport type CodeBlockProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The code, as it is copied. */\n  code: string;\n  /**\n   * Its language, shown as a tag and used by the highlighter: `ts`, `tsx`, `js`, `jsx`, `json`, `yaml`, `bash`, `html`\n   * (`xml`), `css`, `java`, `kotlin`, `diff`, `properties`. Another one is shown as plain text.\n   */\n  language?: string;\n  /** The file it belongs in (`pom.xml`, `application.yml`), or what it is (`Terminal`). */\n  file?: React.ReactNode;\n  /** The copy button's words, passed translated. Without them there is no copy button (a sample inside a text, say). */\n  copyLabel?: string;\n  /** What the button says once the code is copied (announced politely). */\n  copiedLabel?: string;\n  /**\n   * Colours comments, strings, keywords, types, tags and numbers (the tokens' roles).\n   * @default true\n   */\n  highlight?: boolean;\n  /** A number before every line. */\n  lineNumbers?: boolean;\n  /** Lines set apart: `highlight`, `added`, `removed`, `error`, `warning`, `dim`, or `focus` (all the others are dimmed). */\n  annotations?: readonly CodeAnnotation[];\n  /** Called after the code is copied. */\n  onCopy?: () => void;\n};\n\n/** A code sample: language and file name, highlighted code that scrolls sideways, a copy button. */\nexport function CodeBlock({ code, language = \"text\", file, copyLabel, copiedLabel, highlight: colour = true, lineNumbers, annotations, onCopy, className, ...props }: CodeBlockProps) {\n  const [copied, setCopied] = React.useState(false);\n  React.useEffect(() => {\n    if (!copied) return;\n    const t = setTimeout(() => setCopied(false), 1800);\n    return () => clearTimeout(t);\n  }, [copied]);\n  const copy = () =>\n    navigator.clipboard?.writeText(code).then(() => {\n      setCopied(true);\n      onCopy?.();\n    });\n  return (\n    <figure className={cn(\"kz-code\", className)} {...props}>\n      {file || language !== \"text\" || copyLabel ? (\n        <figcaption className=\"kz-code-bar\">\n          <span className=\"kz-code-file\">\n            {language !== \"text\" && <span className=\"kz-code-lang\">{language}</span>}\n            {file}\n          </span>\n          {copyLabel ? (\n            <button type=\"button\" className=\"kz-code-copy\" onClick={copy} data-copied={copied ? \"\" : undefined}>\n              {copied ? <CheckGlyph className=\"h-3.5 w-3.5\" /> : <CopyGlyph className=\"h-3.5 w-3.5\" />}\n              <span aria-live=\"polite\">{copied ? (copiedLabel ?? copyLabel) : copyLabel}</span>\n            </button>\n          ) : null}\n        </figcaption>\n      ) : null}\n      <pre tabIndex={0} className={lineNumbers ? \"th-code--line-numbers\" : undefined} data-focus={annotations?.some((a) => a.kind === \"focus\") ? \"\" : undefined}>\n        <code data-language={language}>{colour ? highlight(code, language, { lineNumbers, annotations }) : code}</code>\n      </pre>\n    </figure>\n  );\n}\n\nexport type CodeTabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"dir\" | \"defaultValue\"> & {\n  /** What the tabs choose between (`Build tool`): the tab list's accessible name. */\n  label: string;\n  /** The ways to write it: an id, the tab's words, its sample (a `CodeBlock`). */\n  tabs: readonly { id: string; label: React.ReactNode; content: React.ReactNode }[];\n  /** The tab open at first. Defaults to the first one. */\n  defaultValue?: string;\n};\n\n/** Several ways to write the same thing (Maven · Gradle · npm): segmented tabs above code samples. */\nexport function CodeTabs({ label, tabs, defaultValue, className, ...props }: CodeTabsProps) {\n  return (\n    <TabsRoot defaultValue={defaultValue ?? tabs[0]?.id} variant=\"segmented\" className={cn(\"kz-code-tabs\", className)} {...props}>\n      <TabsList aria-label={label}>\n        {tabs.map((t) => (\n          <TabsTrigger key={t.id} value={t.id}>\n            {t.label}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n      {tabs.map((t) => (\n        <TabsContent key={t.id} value={t.id}>\n          {t.content}\n        </TabsContent>\n      ))}\n    </TabsRoot>\n  );\n}\n","// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1 \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-full before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n","// The shared sliding indicator (NavBar, Tabs): one element that glides from item to item instead of each item lighting\n// up on its own. It writes the target's box as CSS variables on the list (`--kz-ind-x/y/w/h`) and `data-indicator=\"on\"`\n// — no re-render, no animation frame: the glide is a CSS transition (none under reduced motion). Before hydration the\n// items keep their own active style, so nothing flashes.\nimport * as React from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\nexport function useSlidingIndicator<T extends HTMLElement>({ item, active, follow = false }: { item: string; active: string; follow?: boolean }) {\n  const ref = React.useRef<T>(null);\n  const place = React.useCallback((target: Element | null) => {\n    const list = ref.current;\n    if (!list) return;\n    if (!(target instanceof HTMLElement) || !list.contains(target)) {\n      list.removeAttribute(\"data-indicator\");\n      return;\n    }\n    const a = target.getBoundingClientRect();\n    const b = list.getBoundingClientRect();\n    list.style.setProperty(\"--kz-ind-x\", `${a.left - b.left + list.scrollLeft}px`);\n    list.style.setProperty(\"--kz-ind-y\", `${a.top - b.top + list.scrollTop}px`);\n    list.style.setProperty(\"--kz-ind-w\", `${a.width}px`);\n    list.style.setProperty(\"--kz-ind-h\", `${a.height}px`);\n    list.setAttribute(\"data-indicator\", \"on\");\n  }, []);\n  const rest = React.useCallback(() => place(ref.current?.querySelector(active) ?? null), [place, active]);\n\n  useIsoLayoutEffect(() => {\n    const list = ref.current;\n    if (!list) return;\n    rest();\n    const resize = new ResizeObserver(rest);\n    resize.observe(list);\n    const changes = new MutationObserver(rest);\n    changes.observe(list, { subtree: true, attributes: true, attributeFilter: [\"data-state\", \"aria-current\", \"data-active\"] });\n    return () => {\n      resize.disconnect();\n      changes.disconnect();\n    };\n  }, [rest]);\n\n  const handlers = follow\n    ? {\n        onPointerOver: (e: React.PointerEvent) => place((e.target as Element).closest(item)),\n        onPointerLeave: rest,\n        onFocus: (e: React.FocusEvent) => place((e.target as Element).closest(item)),\n        onBlur: rest,\n      }\n    : {};\n  return { ref, handlers };\n}\n","// Code → React nodes, from TanStack Highlight's tokens: spans with the `th-*` classes that blocks.css paints with the\n// tokens' text roles (≥ 4.5:1 on the code surface, both themes). No raw HTML: the nodes are elements and text.\nimport { type HighlightDecoration, type HighlightRenderNode, renderTokens } from \"@tanstack/highlight/core\";\nimport * as React from \"react\";\n\nimport { codeHighlighter } from \"./highlighter\";\n\n/** What an annotation says about its lines. */\nexport type AnnotationKind = \"highlight\" | \"added\" | \"removed\" | \"focus\" | \"dim\" | \"error\" | \"warning\";\n\n/** Lines of a sample set apart: one line (`3`) or a range (`[3, 5]`), counted from 1. */\nexport type CodeAnnotation = {\n  lines: number | readonly [number, number];\n  kind: AnnotationKind;\n};\n\nexport type HighlightOptions = {\n  /** A number before every line. */\n  lineNumbers?: boolean;\n  /** Lines set apart: highlighted, added, removed, in focus (the others are dimmed), dimmed, error, warning. */\n  annotations?: readonly CodeAnnotation[];\n};\n\nconst toReact = (node: HighlightRenderNode, key: number): React.ReactNode => {\n  if (node.type === \"text\") return node.value;\n  const data = Object.fromEntries(Object.entries(node.data ?? {}).map(([name, value]) => [`data-${name}`, value]));\n  return React.createElement(\"span\", { key, className: node.classNames.join(\" \"), ...data }, node.children.map(toReact));\n};\n\n/** Splits `code` into text and coloured spans (`th-keyword`, `th-string`…), and into lines when numbered or annotated. */\nexport function highlight(code: string, language = \"text\", { lineNumbers, annotations }: HighlightOptions = {}): React.ReactNode[] {\n  const { tokens } = codeHighlighter.tokenize(code, { lang: language });\n  const decorations: HighlightDecoration[] = (annotations ?? []).map(({ lines, kind }) => ({ lines, className: `kz-line kz-line-${kind}`, data: { kind } }));\n  return renderTokens(tokens, { lineNumbers, decorations }).map(toReact);\n}\n\n/** The language a sample is tokenized in (`bash` → `shell`, `xml` → `html`, unknown → `plaintext`). */\nexport function normalizeCodeLanguage(language?: string): string {\n  return codeHighlighter.normalizeLanguage(language);\n}\n","// The highlighter of every code sample: TanStack Highlight (a deterministic, synchronous tokenizer — the same markup on\n// the server and on the client) with the grammars a Krizaka page shows. Each grammar is registered by hand: nothing\n// else is bundled. An unknown language is plain text, never an error.\nimport { createHighlighter } from \"@tanstack/highlight/core\";\nimport { css } from \"@tanstack/highlight/languages/css\";\nimport { diff } from \"@tanstack/highlight/languages/diff\";\nimport { env } from \"@tanstack/highlight/languages/env\";\nimport { html } from \"@tanstack/highlight/languages/html\";\nimport { java } from \"@tanstack/highlight/languages/java\";\nimport { js } from \"@tanstack/highlight/languages/js\";\nimport { json } from \"@tanstack/highlight/languages/json\";\nimport { jsx } from \"@tanstack/highlight/languages/jsx\";\nimport { kotlin } from \"@tanstack/highlight/languages/kotlin\";\nimport { plaintext } from \"@tanstack/highlight/languages/plaintext\";\nimport { shell } from \"@tanstack/highlight/languages/shell\";\nimport { ts } from \"@tanstack/highlight/languages/ts\";\nimport { tsx } from \"@tanstack/highlight/languages/tsx\";\nimport { yaml } from \"@tanstack/highlight/languages/yaml\";\n\n/** The languages a sample can be written in, with the names they answer to (`bash`, `xml`, `yml`, `kt`, `properties`…). */\nexport const codeHighlighter = createHighlighter({\n  languages: [css, diff, { ...env, aliases: [...(env.aliases ?? []), \"properties\"] }, html, java, js, json, jsx, kotlin, plaintext, shell, ts, tsx, yaml],\n  fallbackLanguage: \"plaintext\",\n});\n"],"mappings":"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","names":["React","React","React","jsx","jsx","tabs"]}
+{"version":3,"sources":["../src/code-block/code-block.tsx","../src/tabs/tabs.tsx","../src/sliding-indicator.ts","../src/code-block/tokens.tsx","../src/code-block/highlighter.ts"],"sourcesContent":["// Client (the copy button, the tabs). A sample of code (blocks.css): its language and its file name, the code\n// highlighted by TanStack Highlight (it scrolls sideways, never shrinks, and takes the keyboard's focus to scroll),\n// lines numbered or set apart (highlighted, added, removed, in focus), a copy button that says it copied in a polite\n// live region. CodeTabs puts several ways to write the same thing (Maven · Gradle · npm) under\n// the tabs of @krizaka/ui.\nimport * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { CheckGlyph, CopyGlyph } from \"../glyphs\";\nimport { TabsContent, TabsList, TabsRoot, TabsTrigger } from \"../tabs/tabs\";\nimport { type CodeAnnotation, highlight } from \"./tokens\";\n\nexport type CodeBlockProps = Omit<React.HTMLAttributes<HTMLElement>, \"children\"> & {\n  /** The code, as it is copied. */\n  code: string;\n  /**\n   * Its language, shown as a tag and used by the highlighter: `ts`, `tsx`, `js`, `jsx`, `json`, `yaml`, `bash`, `html`\n   * (`xml`), `css`, `java`, `kotlin`, `diff`, `properties`. Another one is shown as plain text.\n   */\n  language?: string;\n  /** The file it belongs in (`pom.xml`, `application.yml`), or what it is (`Terminal`). */\n  file?: React.ReactNode;\n  /** The copy button's words, passed translated. Without them there is no copy button (a sample inside a text, say). */\n  copyLabel?: string;\n  /** What the button says once the code is copied (announced politely). */\n  copiedLabel?: string;\n  /**\n   * Colours comments, strings, keywords, types, tags and numbers (the tokens' roles).\n   * @default true\n   */\n  highlight?: boolean;\n  /** A number before every line. */\n  lineNumbers?: boolean;\n  /** Lines set apart: `highlight`, `added`, `removed`, `error`, `warning`, `dim`, or `focus` (all the others are dimmed). */\n  annotations?: readonly CodeAnnotation[];\n  /** Called after the code is copied. */\n  onCopy?: () => void;\n};\n\n/** A code sample: language and file name, highlighted code that scrolls sideways, a copy button. */\nexport function CodeBlock({ code, language = \"text\", file, copyLabel, copiedLabel, highlight: colour = true, lineNumbers, annotations, onCopy, className, ...props }: CodeBlockProps) {\n  const [copied, setCopied] = React.useState(false);\n  React.useEffect(() => {\n    if (!copied) return;\n    const t = setTimeout(() => setCopied(false), 1800);\n    return () => clearTimeout(t);\n  }, [copied]);\n  const copy = () =>\n    navigator.clipboard?.writeText(code).then(() => {\n      setCopied(true);\n      onCopy?.();\n    });\n  return (\n    <figure className={cn(\"kz-code\", className)} {...props}>\n      {file || language !== \"text\" || copyLabel ? (\n        <figcaption className=\"kz-code-bar\">\n          <span className=\"kz-code-file\">\n            {language !== \"text\" && <span className=\"kz-code-lang\">{language}</span>}\n            {file}\n          </span>\n          {copyLabel ? (\n            <button type=\"button\" className=\"kz-code-copy\" onClick={copy} data-copied={copied ? \"\" : undefined}>\n              {copied ? <CheckGlyph className=\"h-3.5 w-3.5\" /> : <CopyGlyph className=\"h-3.5 w-3.5\" />}\n              <span aria-live=\"polite\">{copied ? (copiedLabel ?? copyLabel) : copyLabel}</span>\n            </button>\n          ) : null}\n        </figcaption>\n      ) : null}\n      <pre tabIndex={0} className={lineNumbers ? \"th-code--line-numbers\" : undefined} data-focus={annotations?.some((a) => a.kind === \"focus\") ? \"\" : undefined}>\n        <code data-language={language}>{colour ? highlight(code, language, { lineNumbers, annotations }) : code}</code>\n      </pre>\n    </figure>\n  );\n}\n\nexport type CodeTabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"dir\" | \"defaultValue\"> & {\n  /** What the tabs choose between (`Build tool`): the tab list's accessible name. */\n  label: string;\n  /** The ways to write it: an id, the tab's words, its sample (a `CodeBlock`). */\n  tabs: readonly { id: string; label: React.ReactNode; content: React.ReactNode }[];\n  /** The tab open at first. Defaults to the first one. */\n  defaultValue?: string;\n};\n\n/** Several ways to write the same thing (Maven · Gradle · npm): segmented tabs above code samples. */\nexport function CodeTabs({ label, tabs, defaultValue, className, ...props }: CodeTabsProps) {\n  return (\n    <TabsRoot defaultValue={defaultValue ?? tabs[0]?.id} variant=\"segmented\" className={cn(\"kz-code-tabs\", className)} {...props}>\n      <TabsList aria-label={label}>\n        {tabs.map((t) => (\n          <TabsTrigger key={t.id} value={t.id}>\n            {t.label}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n      {tabs.map((t) => (\n        <TabsContent key={t.id} value={t.id}>\n          {t.content}\n        </TabsContent>\n      ))}\n    </TabsRoot>\n  );\n}\n","// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useSlidingIndicator } from \"../sliding-indicator\";\n\nexport const tabs = tv({\n  slots: {\n    root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n    // One light glides from the active tab to the next (`before:`, placed by useSlidingIndicator); until it is placed\n    // (server render), each trigger carries its own active style.\n    list:\n      \"group/tabs relative isolate flex shrink-0 data-[orientation=vertical]:flex-col \" +\n      \"before:pointer-events-none before:absolute before:-z-10 before:opacity-0 before:transition-[translate,width,height,opacity] before:duration-300 \" +\n      \"motion-reduce:before:transition-none data-[indicator=on]:before:opacity-100\",\n    trigger:\n      \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n    content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n  variants: {\n    variant: {\n      /* The section of a page: a line under the list, the active tab underlined in the accent. */\n      underline: {\n        list:\n          \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r before:rounded-full before:bg-accent \" +\n          \"data-[orientation=horizontal]:before:-bottom-px data-[orientation=horizontal]:before:left-0 data-[orientation=horizontal]:before:h-0.5 \" +\n          \"data-[orientation=horizontal]:before:w-(--kz-ind-w) data-[orientation=horizontal]:before:translate-x-(--kz-ind-x) \" +\n          \"data-[orientation=vertical]:before:-right-px data-[orientation=vertical]:before:top-0 data-[orientation=vertical]:before:w-0.5 \" +\n          \"data-[orientation=vertical]:before:h-(--kz-ind-h) data-[orientation=vertical]:before:translate-y-(--kz-ind-y)\",\n        trigger:\n          \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n          \"after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent \" +\n          \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n          \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5 \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:after:bg-transparent\",\n      },\n      /* A view switch: equal segments in a track, the active one filled. */\n      segmented: {\n        list:\n          \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) before:rounded-lg before:bg-accent before:shadow-sm\",\n        trigger:\n          \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n          \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent \" +\n          \"transition-colors group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent group-data-[indicator=on]/tabs:data-[state=active]:shadow-none\",\n      },\n      /* Pills that scroll sideways on a phone: a feed's sections. */\n      pills: {\n        list:\n          \"gap-1.5 overflow-x-auto overflow-y-hidden overscroll-x-contain pt-1 -mt-1 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden \" +\n          \"before:left-0 before:top-0 before:h-(--kz-ind-h) before:w-(--kz-ind-w) before:translate-x-(--kz-ind-x) before:translate-y-(--kz-ind-y) \" +\n          \"before:rounded-full before:border before:border-accent before:bg-accent-soft\",\n        trigger:\n          \"h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n          \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg \" +\n          \"group-data-[indicator=on]/tabs:data-[state=active]:border-transparent group-data-[indicator=on]/tabs:data-[state=active]:bg-transparent\",\n      },\n    },\n  },\n  defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & {\n  /** underline (the sections of a page) · segmented (a view switch) · pills (a feed's sections). */\n  variant?: TabsVariants[\"variant\"];\n};\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n  return (\n    <VariantContext.Provider value={variant}>\n      <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n    </VariantContext.Provider>\n  );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. One light glides to the active tab. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n  const variant = React.useContext(VariantContext);\n  const { ref } = useSlidingIndicator<HTMLDivElement>({ item: \"[role=tab]\", active: \"[role=tab][data-state=active]\" });\n  return <TabsPrimitive.List ref={ref} data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  const variant = React.useContext(VariantContext);\n  return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n","// The shared sliding indicator (NavBar, Tabs): one element that glides from item to item instead of each item lighting\n// up on its own. It writes the target's box as CSS variables on the list (`--kz-ind-x/y/w/h`) and `data-indicator=\"on\"`\n// — no re-render, no animation frame: the glide is a CSS transition (none under reduced motion). Before hydration the\n// items keep their own active style, so nothing flashes.\nimport * as React from \"react\";\n\nconst useIsoLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\n/**\n * `item`: the selector of an item; `active`: of the current one, where the light rests; `prefer`: an item that, when\n * present, holds the light before the current one (the NavBar's open menu); `follow`: the light follows the pointer\n * and the focus — over anything that is not an item (an open menu's panel) it goes back to rest.\n */\nexport function useSlidingIndicator<T extends HTMLElement>({ item, active, prefer, follow = false }: { item: string; active: string; prefer?: string; follow?: boolean }) {\n  const ref = React.useRef<T>(null);\n  const place = React.useCallback((target: Element | null) => {\n    const list = ref.current;\n    if (!list) return;\n    if (!(target instanceof HTMLElement) || !list.contains(target)) {\n      list.removeAttribute(\"data-indicator\");\n      return;\n    }\n    const a = target.getBoundingClientRect();\n    const b = list.getBoundingClientRect();\n    list.style.setProperty(\"--kz-ind-x\", `${a.left - b.left + list.scrollLeft}px`);\n    list.style.setProperty(\"--kz-ind-y\", `${a.top - b.top + list.scrollTop}px`);\n    list.style.setProperty(\"--kz-ind-w\", `${a.width}px`);\n    list.style.setProperty(\"--kz-ind-h\", `${a.height}px`);\n    list.setAttribute(\"data-indicator\", \"on\");\n  }, []);\n  const rest = React.useCallback(\n    () => {\n      const list = ref.current;\n      // An item re-rendered under a resting pointer (a menu closing) keeps the light the pointer gave it.\n      const hovered = follow ? list?.querySelector(`${item}:hover`) : null;\n      place((prefer ? list?.querySelector(prefer) : null) ?? hovered ?? list?.querySelector(active) ?? null);\n    },\n    [place, active, prefer, item, follow],\n  );\n  const follow_ = React.useCallback((target: EventTarget) => {\n    const hit = target instanceof Element ? target.closest(item) : null;\n    if (hit && ref.current?.contains(hit)) place(hit);\n    else rest();\n  }, [item, place, rest]);\n\n  useIsoLayoutEffect(() => {\n    const list = ref.current;\n    if (!list) return;\n    rest();\n    const resize = new ResizeObserver(rest);\n    resize.observe(list);\n    const changes = new MutationObserver(rest);\n    changes.observe(list, { subtree: true, attributes: true, attributeFilter: [\"data-state\", \"aria-current\", \"data-active\"] });\n    return () => {\n      resize.disconnect();\n      changes.disconnect();\n    };\n  }, [rest]);\n\n  const handlers = follow\n    ? {\n        onPointerOver: (e: React.PointerEvent) => follow_(e.target),\n        onPointerLeave: rest,\n        onFocus: (e: React.FocusEvent) => follow_(e.target),\n        onBlur: rest,\n      }\n    : {};\n  return { ref, handlers };\n}\n","// Code → React nodes, from TanStack Highlight's tokens: spans with the `th-*` classes that blocks.css paints with the\n// tokens' text roles (≥ 4.5:1 on the code surface, both themes). No raw HTML: the nodes are elements and text.\nimport { type HighlightDecoration, type HighlightRenderNode, renderTokens } from \"@tanstack/highlight/core\";\nimport * as React from \"react\";\n\nimport { codeHighlighter } from \"./highlighter\";\n\n/** What an annotation says about its lines. */\nexport type AnnotationKind = \"highlight\" | \"added\" | \"removed\" | \"focus\" | \"dim\" | \"error\" | \"warning\";\n\n/** Lines of a sample set apart: one line (`3`) or a range (`[3, 5]`), counted from 1. */\nexport type CodeAnnotation = {\n  lines: number | readonly [number, number];\n  kind: AnnotationKind;\n};\n\nexport type HighlightOptions = {\n  /** A number before every line. */\n  lineNumbers?: boolean;\n  /** Lines set apart: highlighted, added, removed, in focus (the others are dimmed), dimmed, error, warning. */\n  annotations?: readonly CodeAnnotation[];\n};\n\nconst toReact = (node: HighlightRenderNode, key: number): React.ReactNode => {\n  if (node.type === \"text\") return node.value;\n  const data = Object.fromEntries(Object.entries(node.data ?? {}).map(([name, value]) => [`data-${name}`, value]));\n  return React.createElement(\"span\", { key, className: node.classNames.join(\" \"), ...data }, node.children.map(toReact));\n};\n\n/** Splits `code` into text and coloured spans (`th-keyword`, `th-string`…), and into lines when numbered or annotated. */\nexport function highlight(code: string, language = \"text\", { lineNumbers, annotations }: HighlightOptions = {}): React.ReactNode[] {\n  const { tokens } = codeHighlighter.tokenize(code, { lang: language });\n  const decorations: HighlightDecoration[] = (annotations ?? []).map(({ lines, kind }) => ({ lines, className: `kz-line kz-line-${kind}`, data: { kind } }));\n  return renderTokens(tokens, { lineNumbers, decorations }).map(toReact);\n}\n\n/** The language a sample is tokenized in (`bash` → `shell`, `xml` → `html`, unknown → `plaintext`). */\nexport function normalizeCodeLanguage(language?: string): string {\n  return codeHighlighter.normalizeLanguage(language);\n}\n","// The highlighter of every code sample: TanStack Highlight (a deterministic, synchronous tokenizer — the same markup on\n// the server and on the client) with the grammars a Krizaka page shows. Each grammar is registered by hand: nothing\n// else is bundled. An unknown language is plain text, never an error.\nimport { createHighlighter } from \"@tanstack/highlight/core\";\nimport { css } from \"@tanstack/highlight/languages/css\";\nimport { diff } from \"@tanstack/highlight/languages/diff\";\nimport { env } from \"@tanstack/highlight/languages/env\";\nimport { html } from \"@tanstack/highlight/languages/html\";\nimport { java } from \"@tanstack/highlight/languages/java\";\nimport { js } from \"@tanstack/highlight/languages/js\";\nimport { json } from \"@tanstack/highlight/languages/json\";\nimport { jsx } from \"@tanstack/highlight/languages/jsx\";\nimport { kotlin } from \"@tanstack/highlight/languages/kotlin\";\nimport { plaintext } from \"@tanstack/highlight/languages/plaintext\";\nimport { shell } from \"@tanstack/highlight/languages/shell\";\nimport { ts } from \"@tanstack/highlight/languages/ts\";\nimport { tsx } from \"@tanstack/highlight/languages/tsx\";\nimport { yaml } from \"@tanstack/highlight/languages/yaml\";\n\n/** The languages a sample can be written in, with the names they answer to (`bash`, `xml`, `yml`, `kt`, `properties`…). */\nexport const codeHighlighter = createHighlighter({\n  languages: [css, diff, { ...env, aliases: [...(env.aliases ?? []), \"properties\"] }, html, java, js, json, jsx, kotlin, plaintext, shell, ts, tsx, yaml],\n  fallbackLanguage: \"plaintext\",\n});\n"],"mappings":"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","names":["React","React","React","jsx","jsx","tabs"]}

package/dist/date-picker.js

@@ -767,7 +767,7 @@ var datePicker = tv({
     clear: "absolute right-1.5 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring",
     content: "w-auto rounded-2xl bg-sheen p-4 shadow-floating inset-shadow-edge",
     layout: "flex flex-col gap-4 sm:flex-row",
-    presets: "flex gap-1.5 overflow-x-auto pb-1 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-border-subtle sm:pb-0 sm:pr-4",
+    presets: "flex gap-1.5 overflow-x-auto overflow-y-hidden pt-1 -mt-1 pb-1 sm:w-40 sm:flex-col sm:overflow-visible sm:border-r sm:border-border-subtle sm:pb-0 sm:pr-4",
     preset: "inline-flex shrink-0 items-center gap-2.5 whitespace-nowrap rounded-lg px-2.5 py-2 text-left text-xs font-semibold text-fg-secondary transition-colors hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring aria-pressed:bg-accent-soft aria-pressed:text-fg",
     presetNode: "node shrink-0 group-aria-pressed:node-lit",
     hint: "text-xs text-fg-secondary",
@@ -918,7 +918,7 @@ var dayStrip = tv({
     title: "text-sm font-semibold capitalize text-fg",
     navs: "flex gap-1.5",
     nav: "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-subtle bg-surface-2 bg-sheen text-fg-secondary inset-shadow-edge transition-colors hover:border-border-strong hover:text-fg focus-visible:outline-hidden focus-visible:focus-ring disabled:pointer-events-none disabled:opacity-35",
-    track: "-mx-1 flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth px-1 py-1.5 [scrollbar-width:none] motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
+    track: "-mx-1 flex snap-x snap-mandatory gap-2 overflow-x-auto overflow-y-hidden scroll-smooth px-1 py-1.5 [scrollbar-width:none] motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
     day: "relative flex h-[4.5rem] w-14 shrink-0 snap-start flex-col items-center justify-center gap-0.5 rounded-2xl border border-border-default bg-surface-2 bg-sheen text-fg inset-shadow-edge transition-[background-color,border-color,box-shadow,transform] duration-150 hover:border-border-strong active:scale-95 motion-reduce:transition-none motion-reduce:active:scale-100 focus-visible:outline-hidden focus-visible:focus-ring aria-checked:border-transparent aria-checked:bg-accent aria-checked:bg-fill-shade aria-checked:text-on-accent aria-checked:shadow-glow aria-checked:inset-shadow-edge-fill disabled:cursor-not-allowed disabled:border-dashed disabled:bg-transparent disabled:bg-none disabled:text-fg-muted disabled:shadow-none",
     weekday: "text-[11px] font-semibold uppercase tracking-wider text-fg-secondary group-aria-checked:text-on-accent group-disabled:text-fg-muted",
     number: "text-lg font-semibold tabular-nums leading-none",