@azmr/ui 0.0.1 → 0.2.0

package/dist/motion.css

@@ -0,0 +1,295 @@
+/*
+ * Motion presets. CSS-first: every preset is a class, driven by the motion tokens (duration and easing
+ * come from tokens.css, so a theme or reduced motion changes them everywhere).
+ *
+ * Rules (checked by tests):
+ *  - Keyframes animate only transform, scale, opacity, clip-path and (for the SVG tick) stroke-dashoffset;
+ *    collapse animates grid-template-rows. Nothing here animates width, height, margin or position.
+ *  - Under prefers-reduced-motion every slide and scale becomes a plain fade, and the rest stop.
+ *
+ * Use the classes directly (`motion-fade-in`) or through `motionPresets` from `@azmr/ui/presets`.
+ */
+
+@keyframes azmr-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes azmr-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes azmr-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes azmr-scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@keyframes azmr-slide-up-in {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes azmr-slide-up-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+}
+
+@keyframes azmr-slide-down-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes azmr-slide-down-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+}
+
+@keyframes azmr-slide-left-in {
+  from {
+    opacity: 0;
+    transform: translateX(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes azmr-slide-left-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-0.5rem);
+  }
+}
+
+@keyframes azmr-slide-right-in {
+  from {
+    opacity: 0;
+    transform: translateX(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes azmr-slide-right-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(0.5rem);
+  }
+}
+
+@keyframes azmr-shimmer {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes azmr-check-draw {
+  from {
+    stroke-dashoffset: 24;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* Enter eases out (arrives fast, settles); exit is shorter and eases in. */
+.motion-fade-in {
+  animation: azmr-fade-in var(--motion-duration-base) var(--motion-ease-decelerate) both;
+}
+.motion-fade-out {
+  animation: azmr-fade-out var(--motion-duration-fast) var(--motion-ease-accelerate) both;
+}
+.motion-scale-in {
+  animation: azmr-scale-in var(--motion-duration-base) var(--motion-ease-decelerate) both;
+}
+.motion-scale-out {
+  animation: azmr-scale-out var(--motion-duration-fast) var(--motion-ease-accelerate) both;
+}
+.motion-slide-up-in {
+  animation: azmr-slide-up-in var(--motion-duration-base) var(--motion-ease-decelerate) both;
+}
+.motion-slide-up-out {
+  animation: azmr-slide-up-out var(--motion-duration-fast) var(--motion-ease-accelerate) both;
+}
+.motion-slide-down-in {
+  animation: azmr-slide-down-in var(--motion-duration-base) var(--motion-ease-decelerate) both;
+}
+.motion-slide-down-out {
+  animation: azmr-slide-down-out var(--motion-duration-fast) var(--motion-ease-accelerate) both;
+}
+.motion-slide-left-in {
+  animation: azmr-slide-left-in var(--motion-duration-base) var(--motion-ease-decelerate) both;
+}
+.motion-slide-left-out {
+  animation: azmr-slide-left-out var(--motion-duration-fast) var(--motion-ease-accelerate) both;
+}
+.motion-slide-right-in {
+  animation: azmr-slide-right-in var(--motion-duration-base) var(--motion-ease-decelerate) both;
+}
+.motion-slide-right-out {
+  animation: azmr-slide-right-out var(--motion-duration-fast) var(--motion-ease-accelerate) both;
+}
+
+/*
+ * Collapse: animates grid-template-rows between 0fr and 1fr, so the height is never measured in
+ * JavaScript. The inner element must be able to shrink to nothing.
+ */
+.motion-collapse {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--motion-duration-base) var(--motion-ease-standard);
+}
+.motion-collapse[data-state="open"] {
+  grid-template-rows: 1fr;
+}
+.motion-collapse-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Stagger: each item enters a step after the one before it. `--stagger-index` is set by <Stagger>. */
+.motion-stagger > .motion-stagger-item {
+  animation: azmr-slide-up-in var(--motion-duration-base) var(--motion-ease-decelerate) both;
+  animation-delay: calc(var(--stagger-index, 0) * var(--motion-stagger-step));
+}
+
+/* Skeleton shimmer: a soft highlight sweeps across, moved with transform only. */
+.motion-shimmer {
+  position: relative;
+  overflow: hidden;
+}
+.motion-shimmer::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  transform: translateX(-100%);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in oklab, var(--foreground) 8%, transparent),
+    transparent
+  );
+  animation: azmr-shimmer var(--motion-duration-ambient) var(--motion-ease-standard) infinite;
+}
+
+/* Success tick: the stroke draws itself. The path has pathLength 24. */
+.motion-check path {
+  stroke-dasharray: 24;
+  stroke-dashoffset: 0;
+  animation: azmr-check-draw var(--motion-duration-slow) var(--motion-ease-decelerate) both;
+}
+
+/* Page transitions (React <ViewTransition>, the View Transitions API): a cross-fade, opacity only. */
+::view-transition-old(root) {
+  animation: azmr-fade-out var(--motion-duration-fast) var(--motion-ease-accelerate) both;
+}
+::view-transition-new(root) {
+  animation: azmr-fade-in var(--motion-duration-base) var(--motion-ease-decelerate) both;
+}
+
+/* Reduced motion: no movement. Slides and scales become a fade; the rest stop or finish at once. */
+@media (prefers-reduced-motion: reduce) {
+  .motion-slide-up-in,
+  .motion-slide-down-in,
+  .motion-slide-left-in,
+  .motion-slide-right-in,
+  .motion-scale-in {
+    animation-name: azmr-fade-in;
+  }
+
+  .motion-slide-up-out,
+  .motion-slide-down-out,
+  .motion-slide-left-out,
+  .motion-slide-right-out,
+  .motion-scale-out {
+    animation-name: azmr-fade-out;
+  }
+
+  .motion-stagger > .motion-stagger-item {
+    animation-name: azmr-fade-in;
+    animation-delay: 0s;
+  }
+
+  .motion-shimmer::after {
+    animation: none;
+  }
+
+  .motion-check path {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+
+  .motion-collapse {
+    transition: none;
+  }
+
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation-duration: var(--motion-duration-instant);
+  }
+}

package/dist/pagination.d.ts

@@ -0,0 +1,82 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactElement, LiHTMLAttributes, AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+
+type PageRangeItem = number | "start-ellipsis" | "end-ellipsis";
+interface PageRangeOptions {
+    /** The current page, 1-based. Out-of-range values are clamped. */
+    page: number;
+    /** How many pages there are. */
+    pageCount: number;
+    /** Pages shown either side of the current one. Default 1. */
+    siblingCount?: number;
+    /** Pages always shown at each end. Default 1. */
+    boundaryCount?: number;
+}
+/**
+ * The page numbers to show for a paginator, with `"start-ellipsis"` and `"end-ellipsis"` where pages
+ * are skipped: `[1, "start-ellipsis", 4, 5, 6, "end-ellipsis", 10]`. Pure, so a data grid can reuse it.
+ *
+ * With the defaults the result is 7 long once there are more than 7 pages, so the control does not
+ * change width as you page. A skipped run of exactly one page is shown as that page rather than as an
+ * ellipsis, which would save no space.
+ */
+declare function getPageRange({ page, pageCount, siblingCount, boundaryCount, }: PageRangeOptions): PageRangeItem[];
+
+declare const PaginationNav: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    label?: string;
+} & react.RefAttributes<HTMLElement>>;
+declare const PaginationList: react.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & react.RefAttributes<HTMLUListElement>>;
+declare const PaginationItem: react.ForwardRefExoticComponent<LiHTMLAttributes<HTMLLIElement> & react.RefAttributes<HTMLLIElement>>;
+type LinkBase = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "type">;
+interface PaginationLinkProps extends LinkBase {
+    /** The current page: filled, and `aria-current="page"`. */
+    isActive?: boolean;
+    /** Where it goes. Without one it renders a `<button>` (for client state). */
+    href?: string;
+    onClick?: () => void;
+    /** Cannot be used. A link loses its `href` and is announced as disabled; a button is `disabled`. */
+    disabled?: boolean;
+    /** Square (a page number) or sized for text (Previous and Next). Default `icon`. */
+    size?: "icon" | "md";
+    /** Render your router's `Link` instead of an `<a>`. */
+    render?: ReactElement;
+}
+/** One page control: a link when it has an `href`, otherwise a button. */
+declare const PaginationLink: react.ForwardRefExoticComponent<PaginationLinkProps & react.RefAttributes<HTMLElement>>;
+declare function PaginationEllipsis({ label, className, ...props }: HTMLAttributes<HTMLSpanElement> & {
+    label?: string;
+}): react.JSX.Element;
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+    /** The current page, 1-based. */
+    page: number;
+    pageCount: number;
+    /** Link mode: where each page goes. Works in Server Components. Wins over `onPageChange`. */
+    hrefFor?: (page: number) => string;
+    /** Button mode: called with the page that was chosen. For client state. */
+    onPageChange?: (page: number) => void;
+    /** Render your router's `Link`: `renderLink={(href) => <NextLink href={href} />}`. */
+    renderLink?: (href: string) => ReactElement;
+    /** Pages shown either side of the current one. Default 1. */
+    siblingCount?: number;
+    /** Pages always shown at each end. Default 1. */
+    boundaryCount?: number;
+    /** Show Previous and Next. Default true. */
+    showPrevNext?: boolean;
+    /** The landmark's name. Default "Pagination". */
+    label?: string;
+    /** Names the controls, for translation. */
+    labels?: {
+        previous?: string;
+        next?: string;
+        page?: (page: number) => string;
+        more?: string;
+    };
+}
+/**
+ * A page control. Give it `hrefFor` and it is a set of real links that work without JavaScript (and
+ * in Server Components); give it `onPageChange` and it is a set of buttons for client state. Either
+ * way the current page is `aria-current="page"` and Previous and Next are disabled at the ends.
+ */
+declare function Pagination({ page, pageCount, hrefFor, onPageChange, renderLink, siblingCount, boundaryCount, showPrevNext, label, labels, ...props }: PaginationProps): react.JSX.Element | null;
+
+export { type PageRangeItem, type PageRangeOptions, Pagination, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationList, PaginationNav, type PaginationProps, getPageRange };

package/dist/pagination.js

@@ -0,0 +1,211 @@
+import {
+  renderElement
+} from "./chunk-LTOLV67A.js";
+import {
+  Icon
+} from "./chunk-Q4PPM2SU.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/pagination/page-range.ts
+var range = (from, to) => Array.from({ length: Math.max(to - from + 1, 0) }, (_, i) => from + i);
+function getPageRange({
+  page,
+  pageCount,
+  siblingCount = 1,
+  boundaryCount = 1
+}) {
+  const count = Math.floor(pageCount);
+  if (!(count >= 1)) return [];
+  const current = Number.isFinite(page) ? Math.floor(page) : 1;
+  const sibling = Math.max(0, Math.floor(siblingCount));
+  const boundary = Math.max(0, Math.floor(boundaryCount));
+  const startPages = range(1, Math.min(boundary, count));
+  const endPages = range(Math.max(count - boundary + 1, boundary + 1), count);
+  const siblingsStart = Math.max(
+    Math.min(current - sibling, count - boundary - sibling * 2 - 1),
+    boundary + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(current + sibling, boundary + sibling * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : count - 1
+  );
+  const items = [
+    ...startPages,
+    siblingsStart > boundary + 2 ? "start-ellipsis" : boundary + 1 < count - boundary ? boundary + 1 : null,
+    ...range(siblingsStart, siblingsEnd),
+    siblingsEnd < count - boundary - 1 ? "end-ellipsis" : count - boundary > boundary ? count - boundary : null,
+    ...endPages
+  ];
+  return items.filter((item) => item !== null);
+}
+
+// src/components/pagination/pagination.tsx
+import { ChevronLeft, ChevronRight, Ellipsis } from "lucide-react";
+import {
+  forwardRef
+} from "react";
+
+// src/components/button/variants.ts
+import { cva } from "class-variance-authority";
+var buttonVariants = cva(
+  [
+    "relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium",
+    "h-(--density-control-height) px-(--density-control-padding-x)",
+    "transition-colors duration-(--motion-duration-fast) ease-standard",
+    "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        success: "bg-success text-success-foreground hover:bg-success/90",
+        warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+        info: "bg-info text-info-foreground hover:bg-info/90",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "",
+        lg: "h-11 px-6",
+        icon: "size-(--density-control-height) p-0"
+      }
+    },
+    defaultVariants: { variant: "default", size: "md" }
+  }
+);
+
+// src/components/pagination/pagination.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PaginationNav = forwardRef(function PaginationNav2({ label = "Pagination", ...props }, ref) {
+  return /* @__PURE__ */ jsx("nav", { ref, "aria-label": label, ...props });
+});
+var PaginationList = forwardRef(
+  function PaginationList2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        className: cn("flex flex-row flex-wrap items-center gap-1", className),
+        ...props
+      }
+    );
+  }
+);
+var PaginationItem = forwardRef(
+  function PaginationItem2(props, ref) {
+    return /* @__PURE__ */ jsx("li", { ref, ...props });
+  }
+);
+var PaginationLink = forwardRef(function PaginationLink2({ isActive, href, onClick, disabled, size = "icon", render, className, children, ...props }, ref) {
+  const cls = cn(
+    buttonVariants({ variant: isActive ? "default" : "ghost", size }),
+    disabled && "pointer-events-none opacity-50",
+    className
+  );
+  const common = { ref, "aria-current": isActive ? "page" : void 0, ...props, className: cls };
+  if (href !== void 0 || render) {
+    return renderElement(
+      // A disabled control must not be navigable, so it never takes the router element (whose own `href` would win).
+      disabled ? void 0 : render,
+      "a",
+      disabled ? { ...common, "aria-disabled": "true" } : { ...common, href, onClick },
+      children
+    );
+  }
+  return renderElement(
+    void 0,
+    "button",
+    { ...common, type: "button", disabled, onClick: disabled || isActive ? void 0 : onClick },
+    children
+  );
+});
+function PaginationEllipsis({
+  label = "More pages",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-azmr-ellipsis": "",
+      className: cn("flex size-(--density-control-height) items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon: Ellipsis }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+}
+function Pagination({
+  page,
+  pageCount,
+  hrefFor,
+  onPageChange,
+  renderLink,
+  siblingCount,
+  boundaryCount,
+  showPrevNext = true,
+  label,
+  labels,
+  ...props
+}) {
+  const items = getPageRange({ page, pageCount, siblingCount, boundaryCount });
+  if (items.length === 0) return null;
+  const count = Math.floor(pageCount);
+  const current = Math.min(Math.max(Math.floor(page) || 1, 1), count);
+  const pageLabel = labels?.page ?? ((p) => `Page ${p}`);
+  const control = (target, extra, children) => {
+    const href = hrefFor?.(target);
+    return /* @__PURE__ */ jsx(
+      PaginationLink,
+      {
+        ...href !== void 0 ? { href, render: renderLink?.(href) } : { onClick: () => onPageChange?.(target) },
+        ...extra,
+        children
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(PaginationNav, { label, ...props, children: /* @__PURE__ */ jsxs(PaginationList, { children: [
+    showPrevNext && /* @__PURE__ */ jsx(PaginationItem, { children: control(
+      current - 1,
+      {
+        size: "md",
+        disabled: current <= 1,
+        "aria-label": labels?.previous ?? "Previous page"
+      },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Icon, { icon: ChevronLeft }),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Previous" })
+      ] })
+    ) }),
+    items.map(
+      (item) => typeof item === "number" ? /* @__PURE__ */ jsx(PaginationItem, { children: control(item, { isActive: item === current, "aria-label": pageLabel(item) }, item) }, item) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, { label: labels?.more }) }, item)
+    ),
+    showPrevNext && /* @__PURE__ */ jsx(PaginationItem, { children: control(
+      current + 1,
+      { size: "md", disabled: current >= count, "aria-label": labels?.next ?? "Next page" },
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Next" }),
+        /* @__PURE__ */ jsx(Icon, { icon: ChevronRight })
+      ] })
+    ) })
+  ] }) });
+}
+export {
+  Pagination,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationList,
+  PaginationNav,
+  getPageRange
+};

package/dist/presets.d.ts

@@ -0,0 +1,97 @@
+import * as react from 'react';
+import { SVGProps, HTMLAttributes, ReactNode, ElementType, ReactElement } from 'react';
+
+interface AnimatedCheckProps extends Omit<SVGProps<SVGSVGElement>, "ref" | "children"> {
+    /** Pixel size (width and height). Default 24. */
+    size?: number;
+    /** Accessible name. When set the tick is an image ("Saved"); without it the tick is decorative. */
+    label?: string;
+}
+/**
+ * A tick that draws itself, for a success moment. It uses the current text colour, so
+ * `className="text-success"` colours it. Under reduced motion it is drawn at once. Server-safe.
+ */
+declare const AnimatedCheck: react.ForwardRefExoticComponent<AnimatedCheckProps & react.RefAttributes<SVGSVGElement>>;
+
+interface CollapseProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Whether the content is showing. */
+    open: boolean;
+    children: ReactNode;
+}
+/**
+ * Shows and hides content with a height animation that is **not measured in JavaScript**: it
+ * animates `grid-template-rows` between `0fr` and `1fr`. Server-safe, and instant under reduced
+ * motion.
+ *
+ * The content stays mounted while closed, so it keeps its state and can animate; while closed it is
+ * `inert` and `aria-hidden`, so it cannot be focused or read. You own the trigger: give it
+ * `aria-expanded` and `aria-controls` pointing at this element's `id`. For a ready-made disclosure
+ * with all of that wired, use `Collapsible` or `Accordion`.
+ */
+declare const Collapse: react.ForwardRefExoticComponent<CollapseProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * The preset classes from `@azmr/ui/styles.css`. Spelled out in full so the Tailwind scanner finds
+ * them in `dist`, and so a typo is a type error. Every class is defined in `motion.css` and every
+ * motion class there is listed here (a test keeps the two in step).
+ *
+ * `enter` eases out and runs on `--motion-duration-base`; `exit` is shorter and eases in. Under
+ * `prefers-reduced-motion` the slides and scales become a plain fade.
+ */
+declare const motionPresets: {
+    readonly fade: {
+        readonly enter: "motion-fade-in";
+        readonly exit: "motion-fade-out";
+    };
+    readonly scale: {
+        readonly enter: "motion-scale-in";
+        readonly exit: "motion-scale-out";
+    };
+    readonly slideUp: {
+        readonly enter: "motion-slide-up-in";
+        readonly exit: "motion-slide-up-out";
+    };
+    readonly slideDown: {
+        readonly enter: "motion-slide-down-in";
+        readonly exit: "motion-slide-down-out";
+    };
+    readonly slideLeft: {
+        readonly enter: "motion-slide-left-in";
+        readonly exit: "motion-slide-left-out";
+    };
+    readonly slideRight: {
+        readonly enter: "motion-slide-right-in";
+        readonly exit: "motion-slide-right-out";
+    };
+    /** A grid-template-rows collapse. Use `Collapse`. */
+    readonly collapse: {
+        readonly root: "motion-collapse";
+        readonly inner: "motion-collapse-inner";
+    };
+    /** A staggered list. Use `Stagger`. */
+    readonly stagger: {
+        readonly container: "motion-stagger";
+        readonly item: "motion-stagger-item";
+    };
+    /** A sweeping highlight for loading placeholders. Put it on a rounded, overflow-clipped box. */
+    readonly shimmer: "motion-shimmer";
+    /** An SVG tick that draws itself. Use `AnimatedCheck`. */
+    readonly checkDraw: "motion-check";
+};
+type MotionPresetName = keyof typeof motionPresets;
+
+interface StaggerProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    children: ReactNode;
+    /** The element to render. Default `div`; use `ul` or `ol` for a list. */
+    as?: ElementType;
+    /** The last index that gets its own delay, so a long list does not take forever to appear. Default 12. */
+    max?: number;
+}
+/**
+ * Makes the children of a list enter one after another. Each child gets a `--stagger-index`, and the
+ * delay is `index x --motion-stagger-step` (40 ms), capped at `max`. Under reduced motion the step is
+ * zero and they fade in together. Only elements are staggered; text is left alone. Server-safe.
+ */
+declare function Stagger({ as, max, className, children, ...props }: StaggerProps): ReactElement<any, string | react.JSXElementConstructor<any>>;
+
+export { AnimatedCheck, type AnimatedCheckProps, Collapse, type CollapseProps, type MotionPresetName, Stagger, type StaggerProps, motionPresets };