@zyncat/ui 0.11.0 → 0.13.0

package/dist/pagination.css

@@ -1,43 +1,47 @@
-/* Pagination - cursor strip: layout, mono readout, square arrows + directional caret nudge (on Button vocabulary). */
+@layer zyncat.tokens, zyncat.components;
 
-.pgn {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-3);
-}
+@layer zyncat.components {
+  /* Pagination - cursor strip: layout, mono readout, square arrows + directional caret nudge (on Button vocabulary). */
 
-/* mono tabular readout; .pgn__range is the node Motion slides - keep it transformable (inline-block) */
-.pgn__readout {
-  font: var(--type-mono);
-  font-variant-numeric: tabular-nums;
-  color: var(--text-subtle);
-  white-space: nowrap;
-}
-.pgn__range {
-  display: inline-block;
-}
-.pgn__range b {
-  font-weight: var(--weight-medium);
-  color: var(--text-body);
-}
+  .pgn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
 
-/* arrows kept adjacent (not flanking the readout) so repeated paging needs no mouse travel and a growing readout never shifts them */
-.pgn__nav {
-  display: flex;
-  gap: var(--space-1);
-}
-.pgn__btn {
-  width: var(--control-height-sm);
-  padding: 0;
-}
+  /* mono tabular readout; .pgn__range is the node Motion slides - keep it transformable (inline-block) */
+  .pgn__readout {
+    font: var(--type-mono);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-subtle);
+    white-space: nowrap;
+  }
+  .pgn__range {
+    display: inline-block;
+  }
+  .pgn__range b {
+    font-weight: var(--weight-medium);
+    color: var(--text-body);
+  }
 
-/* Caret nudges toward its direction on hover - a 1px optical cue. */
-.pgn__btn .icon {
-  transition: transform var(--duration-fast) var(--ease-standard);
-}
-.pgn__btn--prev:hover:not(:disabled) .icon {
-  transform: translateX(calc(var(--space-px) * -1));
-}
-.pgn__btn--next:hover:not(:disabled) .icon {
-  transform: translateX(var(--space-px));
+  /* arrows kept adjacent (not flanking the readout) so repeated paging needs no mouse travel and a growing readout never shifts them */
+  .pgn__nav {
+    display: flex;
+    gap: var(--space-1);
+  }
+  .pgn__btn {
+    width: var(--control-height-sm);
+    padding: 0;
+  }
+
+  /* Caret nudges toward its direction on hover - a 1px optical cue. */
+  .pgn__btn .icon {
+    transition: transform var(--duration-fast) var(--ease-standard);
+  }
+  .pgn__btn--prev:hover:not(:disabled) .icon {
+    transform: translateX(calc(var(--space-px) * -1));
+  }
+  .pgn__btn--next:hover:not(:disabled) .icon {
+    transform: translateX(var(--space-px));
+  }
 }

package/dist/pagination.js

@@ -1,18 +1,13 @@
-'use client';import { tokenPx } from './chunk-UE63OOVG.js';
-import { animate } from './chunk-YGCVWGUG.js';
-import { Icon } from './chunk-3SBCBYB7.js';
-import { UIMotion } from './chunk-S5ZTZANS.js';
-import { Button } from './chunk-2F5PITAO.js';
+'use client';import { slideIn } from './chunk-HDSFWZ7L.js';
+import { animate } from './chunk-IJS7TPGV.js';
+import { Icon } from './chunk-EAI4POPB.js';
+import { UIMotion } from './chunk-7IZJERGA.js';
+import { Button } from './chunk-HY5MPISE.js';
 import { cx } from './chunk-QGNC7LH5.js';
 import './pagination.css';
 import { useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var pgnTravelPx = null;
-function pgnTravel() {
-  if (pgnTravelPx == null) pgnTravelPx = tokenPx("--space-2");
-  return pgnTravelPx;
-}
 function pgnFormat(n) {
   return n.toLocaleString("en-US").replace(/,/g, "\u2009");
 }
@@ -40,8 +35,7 @@ function Pagination({
     if (pf === from && pt === to) return;
     const dir = from > pf ? 1 : -1;
     shownRef.current = range;
-    if (rangeRef.current)
-      animate(rangeRef.current, { x: [dir * pgnTravel(), 0], opacity: [0, 1], timing: UIMotion.t.enter });
+    if (rangeRef.current) animate(rangeRef.current, slideIn(dir * UIMotion.dist.sm, UIMotion.t.enter));
   }, [from, to]);
   useEffect(() => {
     if (loading || document.activeElement !== document.body) return;

package/dist/pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/composites/pagination/Pagination.tsx"],"names":[],"mappings":"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","file":"pagination.js","sourcesContent":["'use client';\n\nimport './pagination.css';\nimport { useEffect, useRef, type HTMLAttributes } from 'react';\nimport { animate } from '../../../engine';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { tokenPx } from '../../internal/utils/token-px';\nimport { Icon } from '../../internal/icon/Icon';\nimport { Button } from '../../primitives/button/Button';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nexport interface PaginationProps {\n  /** Accessible name for the nav landmark - name the list (\"Posts\"), not \"pagination\". @default 'Pagination' */\n  ariaLabel?: string;\n  /** Items currently shown, 1-based inclusive: `[from, to]` (e.g. `[26, 50]`). */\n  range: [number, number];\n  /** Total item count - render `of N` only when the API reports one; omit for endless lists. */\n  total?: number | null;\n  /** A previous cursor exists. @default false */\n  hasPrev?: boolean;\n  /** A next cursor exists. @default false */\n  hasNext?: boolean;\n  /** Fired when the previous arrow is pressed. */\n  onPrev?: () => void;\n  /** Fired when the next arrow is pressed. */\n  onNext?: () => void;\n  /** A page fetch is in flight: both arrows go inert, the clicked arrow carries the spinner. @default false */\n  loading?: boolean;\n  /** Extra class(es) merged onto the root element. */\n  className?: string;\n  /** Standard <nav> attributes (style, data-*, aria-*, ...) forwarded to the root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLElement>, 'className'> & DataAttributes;\n}\n\nlet pgnTravelPx: number | null = null;\nfunction pgnTravel() {\n  if (pgnTravelPx == null) pgnTravelPx = tokenPx('--space-2');\n  return pgnTravelPx;\n}\n\nfunction pgnFormat(n: number) {\n  return n.toLocaleString('en-US').replace(/,/g, '\\u2009');\n}\n\nexport function Pagination({\n  ariaLabel = 'Pagination',\n  range,\n  total = null,\n  hasPrev = false,\n  hasNext = false,\n  onPrev,\n  onNext,\n  loading = false,\n  className = '',\n  htmlProps,\n}: PaginationProps) {\n  const rangeRef = useRef<HTMLSpanElement>(null);\n  const prevBtnRef = useRef<HTMLButtonElement>(null);\n  const nextBtnRef = useRef<HTMLButtonElement>(null);\n  const shownRef = useRef<[number, number]>(range);\n  const lastDirRef = useRef(0);\n\n  const from = range[0];\n  const to = range[1];\n\n  useEffect(() => {\n    const pf = shownRef.current[0],\n      pt = shownRef.current[1];\n    if (pf === from && pt === to) return;\n    const dir = from > pf ? 1 : -1;\n    shownRef.current = range;\n    if (rangeRef.current)\n      animate(rangeRef.current, { x: [dir * pgnTravel(), 0], opacity: [0, 1], timing: UIMotion.t.enter });\n  }, [from, to]);\n\n  useEffect(() => {\n    if (loading || document.activeElement !== document.body) return;\n    const d = lastDirRef.current;\n    if (d === 1 && !hasNext && hasPrev && prevBtnRef.current) prevBtnRef.current.focus();\n    if (d === -1 && !hasPrev && hasNext && nextBtnRef.current) nextBtnRef.current.focus();\n  }, [loading, hasPrev, hasNext]);\n\n  const prevBusy = loading && lastDirRef.current === -1;\n  const nextBusy = loading && lastDirRef.current === 1;\n\n  return (\n    <nav className={cx('pgn', className)} aria-label={ariaLabel} aria-busy={loading || undefined} {...htmlProps}>\n      <span className=\"pgn__readout\" aria-live=\"polite\">\n        <span className=\"pgn__range\" ref={rangeRef}>\n          <b>\n            {pgnFormat(from)}-{pgnFormat(to)}\n          </b>\n          {total != null ? <span className=\"pgn__total\"> of {pgnFormat(total)}</span> : null}\n        </span>\n      </span>\n      <div className=\"pgn__nav\">\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          ref={prevBtnRef}\n          className=\"pgn__btn pgn__btn--prev\"\n          loading={prevBusy}\n          disabled={!hasPrev || loading}\n          htmlProps={{ 'aria-label': 'Previous page' }}\n          onClick={() => {\n            lastDirRef.current = -1;\n            if (onPrev) onPrev();\n          }}\n        >\n          <Icon name=\"caret-left\" size=\"sm\" />\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          ref={nextBtnRef}\n          className=\"pgn__btn pgn__btn--next\"\n          loading={nextBusy}\n          disabled={!hasNext || loading}\n          htmlProps={{ 'aria-label': 'Next page' }}\n          onClick={() => {\n            lastDirRef.current = 1;\n            if (onNext) onNext();\n          }}\n        >\n          <Icon name=\"caret-right\" size=\"sm\" />\n        </Button>\n      </div>\n    </nav>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/composites/pagination/Pagination.tsx"],"names":[],"mappings":"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","file":"pagination.js","sourcesContent":["'use client';\n\nimport './pagination.css';\n\nimport { useEffect, useRef, type HTMLAttributes } from 'react';\n\nimport type { DataAttributes } from '../../../dom-props';\nimport { animate } from '../../../engine';\nimport { slideIn } from '../../../motion/presets';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { Icon } from '../../internal/icon/Icon';\nimport { cx } from '../../internal/utils/cx';\nimport { Button } from '../../primitives/button/Button';\n\nexport interface PaginationProps {\n  /** Accessible name for the nav landmark - name the list (\"Posts\"), not \"pagination\". @default 'Pagination' */\n  ariaLabel?: string;\n  /** Items currently shown, 1-based inclusive: `[from, to]` (e.g. `[26, 50]`). */\n  range: [number, number];\n  /** Total item count - render `of N` only when the API reports one; omit for endless lists. */\n  total?: number | null;\n  /** A previous cursor exists. @default false */\n  hasPrev?: boolean;\n  /** A next cursor exists. @default false */\n  hasNext?: boolean;\n  /** Fired when the previous arrow is pressed. */\n  onPrev?: () => void;\n  /** Fired when the next arrow is pressed. */\n  onNext?: () => void;\n  /** A page fetch is in flight: both arrows go inert, the clicked arrow carries the spinner. @default false */\n  loading?: boolean;\n  /** Extra class(es) merged onto the root element. */\n  className?: string;\n  /** Standard <nav> attributes (style, data-*, aria-*, ...) forwarded to the root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLElement>, 'className'> & DataAttributes;\n}\n\nfunction pgnFormat(n: number) {\n  return n.toLocaleString('en-US').replace(/,/g, '\\u2009');\n}\n\nexport function Pagination({\n  ariaLabel = 'Pagination',\n  range,\n  total = null,\n  hasPrev = false,\n  hasNext = false,\n  onPrev,\n  onNext,\n  loading = false,\n  className = '',\n  htmlProps,\n}: PaginationProps) {\n  const rangeRef = useRef<HTMLSpanElement>(null);\n  const prevBtnRef = useRef<HTMLButtonElement>(null);\n  const nextBtnRef = useRef<HTMLButtonElement>(null);\n  const shownRef = useRef<[number, number]>(range);\n  const lastDirRef = useRef(0);\n\n  const from = range[0];\n  const to = range[1];\n\n  useEffect(() => {\n    const pf = shownRef.current[0],\n      pt = shownRef.current[1];\n    if (pf === from && pt === to) return;\n    const dir = from > pf ? 1 : -1;\n    shownRef.current = range;\n    if (rangeRef.current) animate(rangeRef.current, slideIn(dir * UIMotion.dist.sm, UIMotion.t.enter));\n  }, [from, to]);\n\n  useEffect(() => {\n    if (loading || document.activeElement !== document.body) return;\n    const d = lastDirRef.current;\n    if (d === 1 && !hasNext && hasPrev && prevBtnRef.current) prevBtnRef.current.focus();\n    if (d === -1 && !hasPrev && hasNext && nextBtnRef.current) nextBtnRef.current.focus();\n  }, [loading, hasPrev, hasNext]);\n\n  const prevBusy = loading && lastDirRef.current === -1;\n  const nextBusy = loading && lastDirRef.current === 1;\n\n  return (\n    <nav className={cx('pgn', className)} aria-label={ariaLabel} aria-busy={loading || undefined} {...htmlProps}>\n      <span className=\"pgn__readout\" aria-live=\"polite\">\n        <span className=\"pgn__range\" ref={rangeRef}>\n          <b>\n            {pgnFormat(from)}-{pgnFormat(to)}\n          </b>\n          {total != null ? <span className=\"pgn__total\"> of {pgnFormat(total)}</span> : null}\n        </span>\n      </span>\n      <div className=\"pgn__nav\">\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          ref={prevBtnRef}\n          className=\"pgn__btn pgn__btn--prev\"\n          loading={prevBusy}\n          disabled={!hasPrev || loading}\n          htmlProps={{ 'aria-label': 'Previous page' }}\n          onClick={() => {\n            lastDirRef.current = -1;\n            if (onPrev) onPrev();\n          }}\n        >\n          <Icon name=\"caret-left\" size=\"sm\" />\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          ref={nextBtnRef}\n          className=\"pgn__btn pgn__btn--next\"\n          loading={nextBusy}\n          disabled={!hasNext || loading}\n          htmlProps={{ 'aria-label': 'Next page' }}\n          onClick={() => {\n            lastDirRef.current = 1;\n            if (onNext) onNext();\n          }}\n        >\n          <Icon name=\"caret-right\" size=\"sm\" />\n        </Button>\n      </div>\n    </nav>\n  );\n}\n"]}

package/dist/popover.css

@@ -1,69 +1,73 @@
-/* popover.css - anchored panel paint: fixed coords from useAnchorPosition; entrance origin = arrow tip, else the aligned edge (inset --space-4), else center. */
-.overlay-popover {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: max-content;
-  outline: none;
-}
+@layer zyncat.tokens, zyncat.components;
 
-.overlay-popover[data-align='start'] {
-  --ov-origin: var(--space-4);
-}
-.overlay-popover[data-align='center'] {
-  --ov-origin: 50%;
-}
-.overlay-popover[data-align='end'] {
-  --ov-origin: calc(100% - var(--space-4));
-}
+@layer zyncat.components {
+  /* popover.css - anchored panel paint: fixed coords from useAnchorPosition; entrance origin = arrow tip, else the aligned edge (inset --space-4), else center. */
+  .overlay-popover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: max-content;
+    outline: none;
+  }
 
-.overlay-popover[data-side='bottom'] {
-  transform-origin: var(--overlay-arrow-x, var(--ov-origin)) top;
-}
-.overlay-popover[data-side='top'] {
-  transform-origin: var(--overlay-arrow-x, var(--ov-origin)) bottom;
-}
-.overlay-popover[data-side='right'] {
-  transform-origin: left var(--overlay-arrow-y, var(--ov-origin));
-}
-.overlay-popover[data-side='left'] {
-  transform-origin: right var(--overlay-arrow-y, var(--ov-origin));
-}
+  .overlay-popover[data-align='start'] {
+    --ov-origin: var(--space-4);
+  }
+  .overlay-popover[data-align='center'] {
+    --ov-origin: 50%;
+  }
+  .overlay-popover[data-align='end'] {
+    --ov-origin: calc(100% - var(--space-4));
+  }
 
-/* Arrow - a rotated square on the panel edge (--overlay-arrow-x/y); only its two outward edges keep the hairline, the panel covers the rest (must be opaque). */
-.overlay-popover__arrow {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  background: var(--overlay-arrow-bg, var(--bg-surface-raised));
-  border: var(--border-hairline) solid var(--border-default);
-  pointer-events: none;
-}
-.overlay-popover[data-side='bottom'] .overlay-popover__arrow {
-  top: -5px;
-  left: var(--overlay-arrow-x, 50%);
-  transform: translateX(-50%) rotate(45deg);
-  border-right: none;
-  border-bottom: none;
-}
-.overlay-popover[data-side='top'] .overlay-popover__arrow {
-  bottom: -5px;
-  left: var(--overlay-arrow-x, 50%);
-  transform: translateX(-50%) rotate(45deg);
-  border-left: none;
-  border-top: none;
-}
-.overlay-popover[data-side='right'] .overlay-popover__arrow {
-  left: -5px;
-  top: var(--overlay-arrow-y, 50%);
-  transform: translateY(-50%) rotate(45deg);
-  border-right: none;
-  border-top: none;
-}
-.overlay-popover[data-side='left'] .overlay-popover__arrow {
-  right: -5px;
-  top: var(--overlay-arrow-y, 50%);
-  transform: translateY(-50%) rotate(45deg);
-  border-left: none;
-  border-bottom: none;
+  .overlay-popover[data-side='bottom'] {
+    transform-origin: var(--overlay-arrow-x, var(--ov-origin)) top;
+  }
+  .overlay-popover[data-side='top'] {
+    transform-origin: var(--overlay-arrow-x, var(--ov-origin)) bottom;
+  }
+  .overlay-popover[data-side='right'] {
+    transform-origin: left var(--overlay-arrow-y, var(--ov-origin));
+  }
+  .overlay-popover[data-side='left'] {
+    transform-origin: right var(--overlay-arrow-y, var(--ov-origin));
+  }
+
+  /* Arrow - a rotated square on the panel edge (--overlay-arrow-x/y); only its two outward edges keep the hairline, the panel covers the rest (must be opaque). */
+  .overlay-popover__arrow {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    background: var(--overlay-arrow-bg, var(--bg-surface-raised));
+    border: var(--border-hairline) solid var(--border-default);
+    pointer-events: none;
+  }
+  .overlay-popover[data-side='bottom'] .overlay-popover__arrow {
+    top: -5px;
+    left: var(--overlay-arrow-x, 50%);
+    transform: translateX(-50%) rotate(45deg);
+    border-right: none;
+    border-bottom: none;
+  }
+  .overlay-popover[data-side='top'] .overlay-popover__arrow {
+    bottom: -5px;
+    left: var(--overlay-arrow-x, 50%);
+    transform: translateX(-50%) rotate(45deg);
+    border-left: none;
+    border-top: none;
+  }
+  .overlay-popover[data-side='right'] .overlay-popover__arrow {
+    left: -5px;
+    top: var(--overlay-arrow-y, 50%);
+    transform: translateY(-50%) rotate(45deg);
+    border-right: none;
+    border-top: none;
+  }
+  .overlay-popover[data-side='left'] .overlay-popover__arrow {
+    right: -5px;
+    top: var(--overlay-arrow-y, 50%);
+    transform: translateY(-50%) rotate(45deg);
+    border-left: none;
+    border-bottom: none;
+  }
 }

package/dist/popover.js

@@ -1,15 +1,17 @@
-'use client';export { Popover } from './chunk-XJQQQJAO.js';
-import './chunk-62P3KD57.js';
-import './chunk-DKVUPFQR.js';
-import './chunk-U4MHX3KH.js';
+'use client';export { Popover } from './chunk-CF4QHO4N.js';
+import './chunk-IUQAUBVM.js';
 import './chunk-UE63OOVG.js';
-import './chunk-NEF5XAHG.js';
-import './chunk-NGTA34V2.js';
-import './chunk-XWUWYSCT.js';
-import './chunk-YGCVWGUG.js';
+import './chunk-A5WTZACK.js';
+import './chunk-VAXCXZ53.js';
+import './chunk-JY6A2ZJZ.js';
+import './chunk-HDSFWZ7L.js';
+import './chunk-DDRSMHN4.js';
+import './chunk-TUTXXC3W.js';
+import './chunk-M43IOM5C.js';
+import './chunk-IJS7TPGV.js';
 import './chunk-MMRIQNEN.js';
-import './chunk-S5ZTZANS.js';
-import './chunk-VTJTGVZZ.js';
+import './chunk-7IZJERGA.js';
+import './chunk-DMX2F6B4.js';
 import './chunk-QGNC7LH5.js';
 //# sourceMappingURL=popover.js.map
 //# sourceMappingURL=popover.js.map