@ansh-ui/react 0.2.0 → 0.3.0

package/dist/primitives.cjs

@@ -2,10 +2,10 @@
 'use strict';
 
 var chunkOHBWBXLO_cjs = require('./chunk-OHBWBXLO.cjs');
-var chunkC32LKF23_cjs = require('./chunk-C32LKF23.cjs');
+var chunkKTLTYHAT_cjs = require('./chunk-KTLTYHAT.cjs');
 var chunkXMXECSQO_cjs = require('./chunk-XMXECSQO.cjs');
 var chunkPO5DU3FU_cjs = require('./chunk-PO5DU3FU.cjs');
-var chunk6VRF7X5C_cjs = require('./chunk-6VRF7X5C.cjs');
+var chunkTEPQGFR4_cjs = require('./chunk-TEPQGFR4.cjs');
 var chunkSFU5EPSN_cjs = require('./chunk-SFU5EPSN.cjs');
 
 
@@ -36,43 +36,43 @@ Object.defineProperty(exports, "useSpringValue", {
 });
 Object.defineProperty(exports, "Presence", {
   enumerable: true,
-  get: function () { return chunkC32LKF23_cjs.Presence; }
+  get: function () { return chunkKTLTYHAT_cjs.Presence; }
 });
 Object.defineProperty(exports, "Slot", {
   enumerable: true,
-  get: function () { return chunkC32LKF23_cjs.Slot; }
+  get: function () { return chunkKTLTYHAT_cjs.Slot; }
 });
 Object.defineProperty(exports, "countElements", {
   enumerable: true,
-  get: function () { return chunkC32LKF23_cjs.countElements; }
+  get: function () { return chunkKTLTYHAT_cjs.countElements; }
 });
 Object.defineProperty(exports, "getTabbable", {
   enumerable: true,
-  get: function () { return chunkC32LKF23_cjs.getTabbable; }
+  get: function () { return chunkKTLTYHAT_cjs.getTabbable; }
 });
 Object.defineProperty(exports, "slotted", {
   enumerable: true,
-  get: function () { return chunkC32LKF23_cjs.slotted; }
+  get: function () { return chunkKTLTYHAT_cjs.slotted; }
 });
 Object.defineProperty(exports, "useAutoFocus", {
   enumerable: true,
-  get: function () { return chunkC32LKF23_cjs.useAutoFocus; }
+  get: function () { return chunkKTLTYHAT_cjs.useAutoFocus; }
 });
 Object.defineProperty(exports, "useFocusRestore", {
   enumerable: true,
-  get: function () { return chunkC32LKF23_cjs.useFocusRestore; }
+  get: function () { return chunkKTLTYHAT_cjs.useFocusRestore; }
 });
 Object.defineProperty(exports, "useFocusTrap", {
   enumerable: true,
-  get: function () { return chunkC32LKF23_cjs.useFocusTrap; }
+  get: function () { return chunkKTLTYHAT_cjs.useFocusTrap; }
 });
 Object.defineProperty(exports, "usePresence", {
   enumerable: true,
-  get: function () { return chunkC32LKF23_cjs.usePresence; }
+  get: function () { return chunkKTLTYHAT_cjs.usePresence; }
 });
 Object.defineProperty(exports, "useRovingFocus", {
   enumerable: true,
-  get: function () { return chunkC32LKF23_cjs.useRovingFocus; }
+  get: function () { return chunkKTLTYHAT_cjs.useRovingFocus; }
 });
 Object.defineProperty(exports, "Portal", {
   enumerable: true,
@@ -104,39 +104,43 @@ Object.defineProperty(exports, "useControllableState", {
 });
 Object.defineProperty(exports, "useElementSize", {
   enumerable: true,
-  get: function () { return chunk6VRF7X5C_cjs.useElementSize; }
+  get: function () { return chunkTEPQGFR4_cjs.useElementSize; }
 });
 Object.defineProperty(exports, "useFrameBudget", {
   enumerable: true,
-  get: function () { return chunk6VRF7X5C_cjs.useFrameBudget; }
+  get: function () { return chunkTEPQGFR4_cjs.useFrameBudget; }
 });
 Object.defineProperty(exports, "useInView", {
   enumerable: true,
-  get: function () { return chunk6VRF7X5C_cjs.useInView; }
+  get: function () { return chunkTEPQGFR4_cjs.useInView; }
 });
 Object.defineProperty(exports, "useMergedRef", {
   enumerable: true,
-  get: function () { return chunk6VRF7X5C_cjs.useMergedRef; }
+  get: function () { return chunkTEPQGFR4_cjs.useMergedRef; }
 });
 Object.defineProperty(exports, "usePointer", {
   enumerable: true,
-  get: function () { return chunk6VRF7X5C_cjs.usePointer; }
+  get: function () { return chunkTEPQGFR4_cjs.usePointer; }
 });
 Object.defineProperty(exports, "useReducedMotion", {
   enumerable: true,
-  get: function () { return chunk6VRF7X5C_cjs.useReducedMotion; }
+  get: function () { return chunkTEPQGFR4_cjs.useReducedMotion; }
 });
 Object.defineProperty(exports, "useScrollProgress", {
   enumerable: true,
-  get: function () { return chunk6VRF7X5C_cjs.useScrollProgress; }
+  get: function () { return chunkTEPQGFR4_cjs.useScrollProgress; }
 });
 Object.defineProperty(exports, "useTicker", {
   enumerable: true,
-  get: function () { return chunk6VRF7X5C_cjs.useTicker; }
+  get: function () { return chunkTEPQGFR4_cjs.useTicker; }
+});
+Object.defineProperty(exports, "useTickerSubscriberCount", {
+  enumerable: true,
+  get: function () { return chunkTEPQGFR4_cjs.useTickerSubscriberCount; }
 });
 Object.defineProperty(exports, "useWindowScroll", {
   enumerable: true,
-  get: function () { return chunk6VRF7X5C_cjs.useWindowScroll; }
+  get: function () { return chunkTEPQGFR4_cjs.useWindowScroll; }
 });
 Object.defineProperty(exports, "assignRef", {
   enumerable: true,

package/dist/primitives.d.cts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { Ref, SyntheticEvent, ReactNode, RefObject, CSSProperties } from 'react';
-import { b as PositionResult, a as PositionOptions } from './position-DVScKcaa.cjs';
-export { A as Align, P as Placement, R as Rect, S as Side, c as computePosition } from './position-DVScKcaa.cjs';
-export { I as InViewOptions, u as useElementSize, a as useFrameBudget, b as useInView, c as useMergedRef, d as usePointer, e as useReducedMotion, f as useScrollProgress, g as useTicker, h as useWindowScroll } from './use-observers-B9qtimrk.cjs';
+import { b as PositionResult, a as PositionOptions } from './position-CW6cGpSF.cjs';
+export { A as Align, P as Placement, R as Rect, S as Side, c as computePosition } from './position-CW6cGpSF.cjs';
+export { I as InViewOptions, u as useElementSize, a as useFrameBudget, b as useInView, c as useMergedRef, d as usePointer, e as useReducedMotion, f as useScrollProgress, g as useTicker, h as useTickerSubscriberCount, i as useWindowScroll } from './use-observers-DvA7hSz4.cjs';
 import * as _ansh_ui_core from '@ansh-ui/core';
 import { MotionValue, AnimationOptions, SpringOptions } from '@ansh-ui/core';
 
@@ -291,4 +291,5 @@ interface AnchoredPosition {
  */
 declare function useAnchoredPosition(anchorRef: RefObject<HTMLElement | null>, floatingRef: RefObject<HTMLElement | null>, open: boolean, options?: AnchoredPositionOptions): AnchoredPosition;
 
-export { type AnchoredPosition, type AnchoredPositionOptions, type DismissOptions, Portal, type PortalProps, PositionOptions, PositionResult, Presence, type PresenceProps, Slot, type SlotProps, assignRef, composeEventHandlers, countElements, cx, getLayerStack, getTabbable, mergeProps, mergeRefs, slotted, useAnchoredPosition, useAnimate, useAutoFocus, useControllableState, useDismiss, useFocusRestore, useFocusTrap, useIsMounted, useMotionStyle, useMotionValue, useMotionValueState, usePresence, useRovingFocus, useScrollLock, useSpringValue };
+export { Portal, PositionOptions, PositionResult, Presence, Slot, assignRef, composeEventHandlers, countElements, cx, getLayerStack, getTabbable, mergeProps, mergeRefs, slotted, useAnchoredPosition, useAnimate, useAutoFocus, useControllableState, useDismiss, useFocusRestore, useFocusTrap, useIsMounted, useMotionStyle, useMotionValue, useMotionValueState, usePresence, useRovingFocus, useScrollLock, useSpringValue };
+export type { AnchoredPosition, AnchoredPositionOptions, DismissOptions, PortalProps, PresenceProps, SlotProps };

package/dist/primitives.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { Ref, SyntheticEvent, ReactNode, RefObject, CSSProperties } from 'react';
-import { b as PositionResult, a as PositionOptions } from './position-DVScKcaa.js';
-export { A as Align, P as Placement, R as Rect, S as Side, c as computePosition } from './position-DVScKcaa.js';
-export { I as InViewOptions, u as useElementSize, a as useFrameBudget, b as useInView, c as useMergedRef, d as usePointer, e as useReducedMotion, f as useScrollProgress, g as useTicker, h as useWindowScroll } from './use-observers-B9qtimrk.js';
+import { b as PositionResult, a as PositionOptions } from './position-CW6cGpSF.js';
+export { A as Align, P as Placement, R as Rect, S as Side, c as computePosition } from './position-CW6cGpSF.js';
+export { I as InViewOptions, u as useElementSize, a as useFrameBudget, b as useInView, c as useMergedRef, d as usePointer, e as useReducedMotion, f as useScrollProgress, g as useTicker, h as useTickerSubscriberCount, i as useWindowScroll } from './use-observers-DvA7hSz4.js';
 import * as _ansh_ui_core from '@ansh-ui/core';
 import { MotionValue, AnimationOptions, SpringOptions } from '@ansh-ui/core';
 
@@ -291,4 +291,5 @@ interface AnchoredPosition {
  */
 declare function useAnchoredPosition(anchorRef: RefObject<HTMLElement | null>, floatingRef: RefObject<HTMLElement | null>, open: boolean, options?: AnchoredPositionOptions): AnchoredPosition;
 
-export { type AnchoredPosition, type AnchoredPositionOptions, type DismissOptions, Portal, type PortalProps, PositionOptions, PositionResult, Presence, type PresenceProps, Slot, type SlotProps, assignRef, composeEventHandlers, countElements, cx, getLayerStack, getTabbable, mergeProps, mergeRefs, slotted, useAnchoredPosition, useAnimate, useAutoFocus, useControllableState, useDismiss, useFocusRestore, useFocusTrap, useIsMounted, useMotionStyle, useMotionValue, useMotionValueState, usePresence, useRovingFocus, useScrollLock, useSpringValue };
+export { Portal, PositionOptions, PositionResult, Presence, Slot, assignRef, composeEventHandlers, countElements, cx, getLayerStack, getTabbable, mergeProps, mergeRefs, slotted, useAnchoredPosition, useAnimate, useAutoFocus, useControllableState, useDismiss, useFocusRestore, useFocusTrap, useIsMounted, useMotionStyle, useMotionValue, useMotionValueState, usePresence, useRovingFocus, useScrollLock, useSpringValue };
+export type { AnchoredPosition, AnchoredPositionOptions, DismissOptions, PortalProps, PresenceProps, SlotProps };

package/dist/primitives.js

@@ -1,9 +1,9 @@
 'use client';
 export { useAnimate, useIsMounted, useMotionStyle, useMotionValue, useMotionValueState, useSpringValue } from './chunk-O2PX54KX.js';
-export { Presence, Slot, countElements, getTabbable, slotted, useAutoFocus, useFocusRestore, useFocusTrap, usePresence, useRovingFocus } from './chunk-HO2YSF5O.js';
+export { Presence, Slot, countElements, getTabbable, slotted, useAutoFocus, useFocusRestore, useFocusTrap, usePresence, useRovingFocus } from './chunk-742E5FQS.js';
 export { Portal, computePosition, getLayerStack, useAnchoredPosition, useDismiss, useScrollLock } from './chunk-XEP6P7E6.js';
 export { useControllableState } from './chunk-LXCIXR5T.js';
-export { useElementSize, useFrameBudget, useInView, useMergedRef, usePointer, useReducedMotion, useScrollProgress, useTicker, useWindowScroll } from './chunk-IBXLC5IE.js';
+export { useElementSize, useFrameBudget, useInView, useMergedRef, usePointer, useReducedMotion, useScrollProgress, useTicker, useTickerSubscriberCount, useWindowScroll } from './chunk-P5MRISBP.js';
 export { assignRef, composeEventHandlers, cx, mergeProps, mergeRefs } from './chunk-H34OXXJU.js';
 //# sourceMappingURL=primitives.js.map
 //# sourceMappingURL=primitives.js.map

package/dist/{sidebar-D-PafAXw.d.cts → sidebar-Dyt67t2z.d.cts}

@@ -68,4 +68,5 @@ interface AppShellProps {
  */
 declare function AppShell({ sidebar, header, children, className }: AppShellProps): react.JSX.Element;
 
-export { AppShell as A, type NavItem as N, Sidebar as S, type AppShellProps as a, type NavSection as b, type SidebarProps as c };
+export { AppShell as A, Sidebar as S };
+export type { NavItem as N, AppShellProps as a, NavSection as b, SidebarProps as c };

package/dist/{sidebar-D-PafAXw.d.ts → sidebar-Dyt67t2z.d.ts}

@@ -68,4 +68,5 @@ interface AppShellProps {
  */
 declare function AppShell({ sidebar, header, children, className }: AppShellProps): react.JSX.Element;
 
-export { AppShell as A, type NavItem as N, Sidebar as S, type AppShellProps as a, type NavSection as b, type SidebarProps as c };
+export { AppShell as A, Sidebar as S };
+export type { NavItem as N, AppShellProps as a, NavSection as b, SidebarProps as c };

package/dist/styles.css

@@ -1294,6 +1294,353 @@
   }
 }
 
+/* ==========================================================================
+   Motion UI — presentation components with motion of their own.
+
+   Split out of `components.css`, which is already ~830 lines. Everything here targets a plain
+   `ansh-*` class or a `data-*` attribute and contains nothing React-specific, so it is shared
+   verbatim with `@ansh-ui/vue`'s build the same way every other stylesheet in this directory is.
+   ========================================================================== */
+
+/* --- Rotating headline word ---------------------------------------------- */
+
+/*
+ * Deliberately NOT `overflow: hidden` on this element. An inline-level box with clipped overflow
+ * is baseline-aligned by its bottom margin edge rather than by its text, which drops the rotating
+ * word below the line of the sentence containing it. The clipping happens on `__clip` instead,
+ * which is absolutely positioned and so takes no part in baseline alignment.
+ */
+.ansh-rotate {
+  position: relative;
+  display: inline-block;
+}
+
+/*
+ * The width and baseline holder, in normal flow. `visibility: hidden` rather than `display: none`
+ * — a display-none element contributes no size, which would defeat the point of measuring the
+ * longest word.
+ */
+.ansh-rotate__sizer {
+  display: grid;
+  grid-template-areas: 'word';
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.ansh-rotate__ghost {
+  grid-area: word;
+  white-space: nowrap;
+}
+
+.ansh-rotate__clip {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+}
+
+.ansh-rotate__word {
+  display: inline-block;
+  white-space: nowrap;
+  will-change: transform, opacity;
+}
+
+.ansh-rotate[data-animation='slide'] .ansh-rotate__word {
+  animation: ansh-rotate-slide var(--ansh-duration-slow, 420ms) var(--ansh-ease-emphasized) both;
+}
+
+.ansh-rotate[data-animation='fade'] .ansh-rotate__word {
+  animation: ansh-rotate-fade var(--ansh-duration-slow, 420ms) var(--ansh-ease-standard) both;
+}
+
+.ansh-rotate[data-animation='flip'] .ansh-rotate__word {
+  animation: ansh-rotate-flip var(--ansh-duration-slow, 420ms) var(--ansh-ease-emphasized) both;
+  transform-origin: 50% 0;
+}
+
+@keyframes ansh-rotate-slide {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes ansh-rotate-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes ansh-rotate-flip {
+  from {
+    transform: rotateX(-90deg);
+    opacity: 0;
+  }
+  to {
+    transform: rotateX(0);
+    opacity: 1;
+  }
+}
+
+/* --- Before/after comparison --------------------------------------------- */
+
+.ansh-compare {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--ansh-radius-lg);
+  /* Without this a drag that starts on the surface scrolls the page on touch instead of moving
+     the divider — the single most common defect in comparison sliders on mobile. */
+  touch-action: none;
+  user-select: none;
+}
+
+.ansh-compare__layer {
+  position: absolute;
+  inset: 0;
+}
+
+.ansh-compare__layer > * {
+  width: 100%;
+  height: 100%;
+}
+
+/*
+ * The revealed layer sits above and is clipped. Clipping rather than resizing is what keeps its
+ * contents from reflowing as the handle moves.
+ */
+.ansh-compare__layer--before {
+  z-index: 1;
+}
+
+.ansh-compare__handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 2px;
+  margin-left: -1px;
+  background: var(--ansh-content-primary);
+  cursor: ew-resize;
+  touch-action: none;
+}
+
+.ansh-compare__handle:focus-visible {
+  outline: 2px solid var(--ansh-border-focus);
+  outline-offset: 2px;
+}
+
+.ansh-compare__grip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.25rem;
+  height: 2.25rem;
+  transform: translate(-50%, -50%);
+  border-radius: var(--ansh-radius-full);
+  background: var(--ansh-content-primary);
+  box-shadow: var(--ansh-shadow-lg);
+}
+
+/* The double chevron, drawn with borders so no icon asset or SVG is needed. */
+.ansh-compare__grip::before,
+.ansh-compare__grip::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 0.4rem;
+  height: 0.4rem;
+  border-top: 2px solid var(--ansh-surface-canvas);
+  border-right: 2px solid var(--ansh-surface-canvas);
+}
+
+.ansh-compare__grip::before {
+  left: 30%;
+  transform: translate(0, -50%) rotate(-135deg);
+}
+
+.ansh-compare__grip::after {
+  right: 30%;
+  transform: translate(0, -50%) rotate(45deg);
+}
+
+.ansh-compare[data-dragging] {
+  cursor: ew-resize;
+}
+
+/* --- Device / browser mockup --------------------------------------------- */
+
+.ansh-mock {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--ansh-surface-raised);
+  border: 1px solid var(--ansh-border-default);
+  box-shadow: var(--ansh-shadow-lg);
+}
+
+.ansh-mock--browser,
+.ansh-mock--window {
+  border-radius: var(--ansh-radius-lg);
+}
+
+.ansh-mock__chrome {
+  display: flex;
+  align-items: center;
+  gap: var(--ansh-space-3);
+  padding: var(--ansh-space-3) var(--ansh-space-4);
+  background: var(--ansh-surface-sunken);
+  border-bottom: 1px solid var(--ansh-border-subtle);
+}
+
+.ansh-mock__dots {
+  display: flex;
+  gap: var(--ansh-space-2);
+  flex-shrink: 0;
+}
+
+.ansh-mock__dots i {
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: var(--ansh-radius-full);
+  background: var(--ansh-border-strong);
+}
+
+.ansh-mock__url,
+.ansh-mock__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--ansh-text-xs);
+  color: var(--ansh-content-tertiary);
+}
+
+.ansh-mock__url {
+  padding: var(--ansh-space-1) var(--ansh-space-3);
+  border-radius: var(--ansh-radius-full);
+  background: var(--ansh-surface-raised);
+  font-family: var(--ansh-font-mono);
+}
+
+.ansh-mock__title {
+  text-align: center;
+}
+
+.ansh-mock__screen {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--ansh-surface-canvas);
+}
+
+/* The phone frame: a thick bezel and a notch, no chrome bar. */
+.ansh-mock--phone {
+  border-radius: 2.25rem;
+  border-width: 0.6rem;
+  border-color: var(--ansh-content-primary);
+  padding: 0;
+  position: relative;
+}
+
+.ansh-mock--phone .ansh-mock__screen {
+  border-radius: 1.7rem;
+}
+
+.ansh-mock__notch {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2;
+  width: 38%;
+  height: 1.1rem;
+  border-radius: 0 0 var(--ansh-radius-lg) var(--ansh-radius-lg);
+  background: var(--ansh-content-primary);
+}
+
+/* --- Card stack ----------------------------------------------------------- */
+
+.ansh-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ansh-space-4);
+}
+
+.ansh-stack__deck {
+  position: relative;
+  display: grid;
+  /* One cell: every card stacks in it, and the tallest card sets the height so the deck does not
+     resize as cards advance. */
+  grid-template-areas: 'card';
+  isolation: isolate;
+}
+
+.ansh-stack__card {
+  grid-area: card;
+  transition:
+    transform var(--ansh-duration-slow, 420ms) var(--ansh-ease-emphasized),
+    opacity var(--ansh-duration-slow, 420ms) var(--ansh-ease-standard);
+  will-change: transform, opacity;
+}
+
+.ansh-stack__controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ansh-space-3);
+}
+
+.ansh-stack__button {
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--ansh-radius-full);
+  border: 1px solid var(--ansh-border-default);
+  background: var(--ansh-surface-raised);
+  color: var(--ansh-content-secondary);
+  font: inherit;
+  font-size: var(--ansh-text-lg);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.ansh-stack__button:hover {
+  border-color: var(--ansh-border-strong);
+  color: var(--ansh-content-primary);
+}
+
+.ansh-stack__count {
+  font-family: var(--ansh-font-mono);
+  font-size: var(--ansh-text-xs);
+  color: var(--ansh-content-tertiary);
+  min-width: 3.5rem;
+  text-align: center;
+}
+
+/*
+ * Reduced motion. The library's kernel handles JS-driven motion, but these components animate in
+ * CSS, so they need their own guard — `@ansh-ui/tokens` neutralises durations globally, and this
+ * additionally removes the transform travel so cards and words change in place rather than
+ * snapping across a distance in 0.01ms.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .ansh-rotate__word {
+    animation: none !important;
+  }
+
+  .ansh-stack__card {
+    transition: none !important;
+  }
+}
+
 /* ==========================================================================
    Forms
    ========================================================================== */
@@ -5363,6 +5710,123 @@ button.ansh-stepper__button:hover {
   text-underline-offset: 2px;
 }
 
+/* --- Carousel ------------------------------------------------------------- */
+
+.ansh-carousel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ansh-space-3);
+}
+
+.ansh-carousel__viewport {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--ansh-radius-lg);
+  /* Without this a horizontal drag scrolls the page on touch instead of moving the track — the
+     same defect the comparison slider guards against. */
+  touch-action: pan-y;
+}
+
+.ansh-carousel__track {
+  display: flex;
+  transition: transform var(--ansh-duration-slow, 420ms) var(--ansh-ease-emphasized);
+  will-change: transform;
+}
+
+.ansh-carousel__slide {
+  /* `flex: 0 0 100%` rather than `width: 100%`: flex items shrink by default, so eight slides in a
+     row would each collapse to an eighth of the viewport instead of queueing beside it. */
+  flex: 0 0 100%;
+  min-width: 0;
+}
+
+.ansh-carousel__viewport[data-dragging] {
+  cursor: grabbing;
+}
+
+.ansh-carousel__arrow {
+  position: absolute;
+  top: calc(50% - 1.25rem);
+  display: grid;
+  place-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--ansh-radius-full);
+  border: 1px solid var(--ansh-border-default);
+  background: var(--ansh-surface-overlay);
+  color: var(--ansh-content-primary);
+  font: inherit;
+  font-size: var(--ansh-text-xl);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.ansh-carousel__arrow:hover:not(:disabled) {
+  border-color: var(--ansh-border-strong);
+}
+
+.ansh-carousel__arrow:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.ansh-carousel__arrow--prev {
+  left: var(--ansh-space-3);
+}
+
+.ansh-carousel__arrow--next {
+  right: var(--ansh-space-3);
+}
+
+.ansh-carousel__controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ansh-space-3);
+}
+
+.ansh-carousel__dots {
+  display: flex;
+  gap: var(--ansh-space-2);
+}
+
+.ansh-carousel__dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ansh-radius-full);
+  background: var(--ansh-border-strong);
+  cursor: pointer;
+  transition: background-color var(--ansh-duration-fast) var(--ansh-ease-standard);
+}
+
+.ansh-carousel__dot[aria-current] {
+  background: var(--ansh-accent-default);
+}
+
+.ansh-carousel__pause {
+  display: grid;
+  place-items: center;
+  min-width: 1.75rem;
+  height: 1.75rem;
+  padding: 0 var(--ansh-space-2);
+  border-radius: var(--ansh-radius-full);
+  border: 1px solid var(--ansh-border-default);
+  background: transparent;
+  color: var(--ansh-content-secondary);
+  font: inherit;
+  font-size: var(--ansh-text-xs);
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ansh-carousel__track {
+    transition: none !important;
+  }
+}
+
 /* ==========================================================================
    Feedback — alerts, banners, callouts
    ========================================================================== */

package/dist/{use-observers-B9qtimrk.d.cts → use-observers-DvA7hSz4.d.cts}

@@ -93,7 +93,16 @@ declare function useReducedMotion(): boolean;
  * ship in production render paths; the `enabled` flag exists so it can be gated on `NODE_ENV`.
  */
 declare function useFrameBudget(enabled?: boolean): BudgetReport | null;
+/**
+ * Live count of components currently subscribed to the shared ticker.
+ *
+ * Intended for a devtools-style overlay, alongside `useFrameBudget` — the ticker only exposes
+ * `subscriberCount` as a getter with no change event, so this piggybacks on `onBudget`'s existing
+ * ~4 Hz sample instead of opening a second interval or rAF loop just to poll one number.
+ */
+declare function useTickerSubscriberCount(enabled?: boolean): number;
 /** Merge several refs into one callback ref, for components that both forward and use a ref. */
 declare function useMergedRef<T>(...refs: Array<React.Ref<T> | undefined | null>): (node: T | null) => void;
 
-export { type InViewOptions as I, useFrameBudget as a, useInView as b, useMergedRef as c, usePointer as d, useReducedMotion as e, useScrollProgress as f, useTicker as g, useWindowScroll as h, useElementSize as u };
+export { useFrameBudget as a, useInView as b, useMergedRef as c, usePointer as d, useReducedMotion as e, useScrollProgress as f, useTicker as g, useTickerSubscriberCount as h, useWindowScroll as i, useElementSize as u };
+export type { InViewOptions as I };