@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/orb-face/orb-face.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"orb-face.js","names":[],"sources":["../../../src/components/orb-face/orb-face.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI AI Orb Face (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { MotionConfig, motion, useSpring } from \"motion/react\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A little character rather than an indicator: status is carried by\n * expression. It squints while it thinks and glances away, widens its eyes\n * while it listens, talks while it speaks, grins and hops when it is done, and\n * goes spiral-eyed when it breaks — and keeps the spirals for as long as the\n * state lasts, because a broken assistant must not recover to a neutral face\n * on its own.\n *\n * `motion` is used for one thing only: the gaze, a spring that follows the\n * pointer continuously (ADR 0014). Blinks, hops, wobbles and the talking mouth\n * are CSS keyframes. Under reduced motion the gaze, blinking and saccades are\n * switched off and the global blanket stops the keyframes, leaving each state's\n * settled face — which still says everything the animation did.\n */\n\nconst PREFIX = \"dowel-orb-face\";\n\nconst VIEWBOX = 100;\nconst CENTER = VIEWBOX / 2;\nconst EYE_OFFSET = 16;\nconst EYE_Y = 44;\nconst EYE_WIDTH = 11;\nconst EYE_HEIGHT = 26;\nconst EYE_RADIUS = 5.5;\n/** How far the pupils travel from centre, in viewBox units. */\nconst GAZE_RANGE = 5.5;\n/** Pointer distance, in px, at which the gaze reaches full deflection. */\nconst GAZE_FALLOFF = 220;\nconst BLINK_MIN_MS = 3200;\nconst BLINK_EXTRA_MS = 2600;\nconst BLINK_MS = 230;\nconst DOUBLE_BLINK_CHANCE = 0.25;\n/** Thinking saccades: the eyes look away and up, the way people search. */\nconst SACCADE_MIN_MS = 700;\nconst SACCADE_EXTRA_MS = 700;\nconst SACCADES = [\n  { x: -1, y: -1 },\n  { x: 1, y: -1 },\n  { x: -0.6, y: -0.4 },\n  { x: 0.8, y: -0.9 },\n] as const;\n/** A ~1.25-turn swirl; spun in place it reads as dizzy. */\nconst SPIRAL = \"M0 0C-0.6 -4 5 -5 6 -0.6C7 4.5 1 8 -4 6C-9 4.5 -9.5 -2 -6 -6\";\n\nfunction scaled(ms: number): string {\n  return `calc(${String(ms)}ms * var(--motion-scale, 1))`;\n}\n\nconst EASE_OUT = \"cubic-bezier(0.23, 1, 0.32, 1)\";\nconst STYLES = `\n.${PREFIX}{display:block;overflow:visible;flex-shrink:0}\n.${PREFIX} [data-slot=orb-face-body]{transform-box:fill-box;transform-origin:center;scale:calc(1 + var(--face-amplitude, 0) * .07);translate:0 calc(var(--face-amplitude, 0) * -2px)}\n.${PREFIX}[data-state=done] [data-slot=orb-face-body]{animation:${PREFIX}-hop ${scaled(850)} ${EASE_OUT} 1}\n.${PREFIX}[data-state=error] [data-slot=orb-face-body]{animation:${PREFIX}-wobble ${scaled(1050)} cubic-bezier(0.45, 0, 0.55, 1) 1}\n.${PREFIX} [data-part=eye]{transform-box:fill-box;transform-origin:center}\n.${PREFIX} [data-blink=single] [data-part=eye]{animation:${PREFIX}-blink ${scaled(BLINK_MS)} linear 1}\n.${PREFIX} [data-blink=double] [data-part=eye]{animation:${PREFIX}-blink ${scaled(BLINK_MS)} linear 2}\n.${PREFIX} [data-part=arc]{stroke-dasharray:1;stroke-dashoffset:0;animation:${PREFIX}-draw ${scaled(320)} ${EASE_OUT} 1 backwards}\n.${PREFIX} [data-part=spiral]{animation:${PREFIX}-spin ${scaled(2400)} linear infinite}\n.${PREFIX} [data-part=spiral][data-side=left]{animation-direction:reverse}\n.${PREFIX} [data-part=hmm]{animation:${PREFIX}-hmm ${scaled(2400)} ${EASE_OUT} infinite}\n.${PREFIX} [data-part=talk]{transform-box:fill-box;transform-origin:center;animation:${PREFIX}-talk ${scaled(280)} ease-in-out infinite alternate}\n@keyframes ${PREFIX}-blink{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.08)}}\n@keyframes ${PREFIX}-hop{0%{transform:translateY(0) scale(1,1)}12%{transform:translateY(3px) scale(1.08,.9)}40%{transform:translateY(-9px) scale(.94,1.08)}62%{transform:translateY(0) scale(1.04,.95)}82%{transform:translateY(-3px) scale(.99,1.02)}100%{transform:translateY(0) scale(1,1)}}\n@keyframes ${PREFIX}-wobble{0%,100%{transform:translateX(0) rotate(0)}17%{transform:translateX(-5px) rotate(-11deg)}33%{transform:translateX(4px) rotate(9deg)}50%{transform:translateX(-3px) rotate(-7deg)}67%{transform:translateX(2px) rotate(5deg)}83%{transform:translateX(-1px) rotate(-3deg)}}\n@keyframes ${PREFIX}-draw{from{stroke-dashoffset:1}}\n@keyframes ${PREFIX}-spin{to{transform:rotate(360deg)}}\n@keyframes ${PREFIX}-hmm{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}\n@keyframes ${PREFIX}-talk{from{transform:scaleY(.35)}to{transform:scaleY(1)}}\n`;\n\nexport type OrbFaceState =\n  \"idle\" | \"listening\" | \"thinking\" | \"streaming\" | \"speaking\" | \"done\" | \"error\";\n\n/** How open the eyes rest in each state. Drives height; the blink owns scale. */\nconst EYE_OPENNESS: Partial<Record<OrbFaceState, number>> = {\n  listening: 1.15,\n  thinking: 0.62,\n  streaming: 0.88,\n  speaking: 0.92,\n};\n\nexport interface OrbFaceColors {\n  body?: string;\n  bodyEdge?: string;\n  /** Eyes and mouth. */\n  feature?: string;\n}\n\n/** Features in primary-foreground on a primary body contrast in every theme. */\nconst DEFAULT_COLORS: Required<OrbFaceColors> = {\n  body: \"var(--color-primary)\",\n  bodyEdge: \"color-mix(in oklab, var(--color-primary) 72%, var(--color-foreground))\",\n  feature: \"var(--color-primary-foreground)\",\n};\n\nexport interface OrbFaceProps extends Omit<ComponentPropsWithRef<\"svg\">, \"children\" | \"color\"> {\n  /** What the assistant is doing, told by expression. */\n  state?: OrbFaceState;\n  /**\n   * Follow the pointer with its gaze. Turn it off in dense UI, where a dozen\n   * faces tracking the cursor would be noise.\n   */\n  gaze?: boolean;\n  /** Live audio level, 0–1: while listening, the body swells with the voice. */\n  amplitude?: number;\n  /** Rendered size. A number is pixels; a string is any CSS length. */\n  size?: number | string;\n  /** Any CSS colours — theme tokens by default. */\n  colors?: OrbFaceColors;\n}\n\nconst REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribeToReducedMotion(onChange: () => void) {\n  const query = window.matchMedia(REDUCED_MOTION);\n  query.addEventListener(\"change\", onChange);\n  return () => query.removeEventListener(\"change\", onChange);\n}\n\n/** Read live, not cached, so the face follows the setting as it changes. */\nfunction usePrefersReducedMotion(): boolean {\n  return useSyncExternalStore(\n    subscribeToReducedMotion,\n    () => window.matchMedia(REDUCED_MOTION).matches,\n    () => false,\n  );\n}\n\n/** Random blinking — occasionally a double — while the eyes are open. */\nfunction useBlink(enabled: boolean) {\n  const [blink, setBlink] = useState<\"single\" | \"double\" | null>(null);\n  useEffect(() => {\n    if (!enabled) return;\n    let schedule: ReturnType<typeof setTimeout>;\n    let reset: ReturnType<typeof setTimeout>;\n    const next = () => {\n      schedule = setTimeout(\n        () => {\n          const double = Math.random() < DOUBLE_BLINK_CHANCE;\n          setBlink(double ? \"double\" : \"single\");\n          // Cleared by timer rather than animationend, so a blink can replay\n          // and a stopped animation cannot strand the attribute.\n          reset = setTimeout(() => setBlink(null), BLINK_MS * (double ? 2 : 1) + 50);\n          next();\n        },\n        BLINK_MIN_MS + Math.random() * BLINK_EXTRA_MS,\n      );\n    };\n    next();\n    return () => {\n      clearTimeout(schedule);\n      clearTimeout(reset);\n      setBlink(null);\n    };\n  }, [enabled]);\n  return blink;\n}\n\n/** A cartoon orb whose gaze follows the pointer and whose face tells its state. */\nexport function OrbFace({\n  className,\n  state = \"idle\",\n  gaze = true,\n  amplitude,\n  size = 128,\n  colors,\n  style,\n  ref,\n  ...props\n}: OrbFaceProps) {\n  const reduced = usePrefersReducedMotion();\n  const palette = { ...DEFAULT_COLORS, ...colors };\n  const gradientId = `${PREFIX}-${useId().replace(/:/g, \"\")}`;\n  const svgRef = useRef<SVGSVGElement | null>(null);\n  const gazeX = useSpring(0, { damping: 26, stiffness: 220 });\n  const gazeY = useSpring(0, { damping: 26, stiffness: 220 });\n\n  const happy = state === \"done\";\n  const broken = state === \"error\";\n  const thinking = state === \"thinking\";\n  const eyesOpen = !happy && !broken;\n  const blink = useBlink(eyesOpen && !reduced);\n  const named = props[\"aria-label\"] != null || props[\"aria-labelledby\"] != null;\n\n  // The gaze follows the pointer — except while thinking, when it looks away,\n  // which is exactly what makes \"thinking\" legible without a graphic.\n  const tracking = gaze && !reduced && !thinking && eyesOpen;\n  useEffect(() => {\n    if (!tracking) {\n      if (!thinking) {\n        gazeX.set(0);\n        gazeY.set(0);\n      }\n      return;\n    }\n    const handle = (event: PointerEvent) => {\n      const svg = svgRef.current;\n      if (!svg) return;\n      const rect = svg.getBoundingClientRect();\n      const dx = event.clientX - (rect.left + rect.width / 2);\n      const dy = event.clientY - (rect.top + rect.height / 2);\n      const reach = Math.min(1, Math.hypot(dx, dy) / GAZE_FALLOFF) * GAZE_RANGE;\n      const angle = Math.atan2(dy, dx);\n      gazeX.set(Math.cos(angle) * reach);\n      gazeY.set(Math.sin(angle) * reach);\n    };\n    window.addEventListener(\"pointermove\", handle);\n    return () => window.removeEventListener(\"pointermove\", handle);\n  }, [tracking, thinking, gazeX, gazeY]);\n\n  // Thinking saccades.\n  useEffect(() => {\n    if (!thinking) return;\n    if (reduced) {\n      gazeX.set(0);\n      gazeY.set(0);\n      return;\n    }\n    let timeout: ReturnType<typeof setTimeout>;\n    let index = 0;\n    const next = () => {\n      timeout = setTimeout(\n        () => {\n          const target = SACCADES[index % SACCADES.length] ?? SACCADES[0];\n          index += 1;\n          gazeX.set(target.x * GAZE_RANGE);\n          gazeY.set(target.y * GAZE_RANGE);\n          next();\n        },\n        SACCADE_MIN_MS + Math.random() * SACCADE_EXTRA_MS,\n      );\n    };\n    next();\n    return () => clearTimeout(timeout);\n  }, [thinking, reduced, gazeX, gazeY]);\n\n  const openness = EYE_OPENNESS[state] ?? 1;\n  const resolvedSize = typeof size === \"number\" ? `${String(size)}px` : size;\n  const level = state === \"listening\" && amplitude != null && !reduced ? amplitude : 0;\n\n  function eye(side: -1 | 1) {\n    const height = EYE_HEIGHT * openness;\n    return (\n      <rect\n        key={side}\n        data-part=\"eye\"\n        x={CENTER + side * EYE_OFFSET - EYE_WIDTH / 2}\n        // Centred as it opens and closes, so a squint reads as lids meeting\n        // rather than the eye sliding up the face.\n        y={EYE_Y + (EYE_HEIGHT - height) / 2}\n        width={EYE_WIDTH}\n        height={height}\n        rx={Math.min(EYE_RADIUS, height / 2)}\n        fill={palette.feature}\n      />\n    );\n  }\n\n  function arc(side: -1 | 1) {\n    const cx = CENTER + side * EYE_OFFSET;\n    const y = EYE_Y + EYE_HEIGHT / 2;\n    return (\n      <path\n        key={side}\n        data-part=\"arc\"\n        pathLength={1}\n        d={`M${String(cx - 8)} ${String(y + 3)} Q${String(cx)} ${String(y - 11)} ${String(cx + 8)} ${String(y + 3)}`}\n        fill=\"none\"\n        stroke={palette.feature}\n        strokeLinecap=\"round\"\n        strokeWidth={7}\n        style={{ animationDelay: side === 1 ? scaled(60) : undefined }}\n      />\n    );\n  }\n\n  function spiral(side: -1 | 1) {\n    return (\n      <g\n        key={side}\n        transform={`translate(${String(CENTER + side * EYE_OFFSET)} ${String(EYE_Y + EYE_HEIGHT / 2)}) scale(1.5)`}\n      >\n        <path\n          data-part=\"spiral\"\n          data-side={side === -1 ? \"left\" : \"right\"}\n          d={SPIRAL}\n          fill=\"none\"\n          stroke={palette.feature}\n          strokeLinecap=\"round\"\n          strokeWidth={3}\n        />\n      </g>\n    );\n  }\n\n  function mouth() {\n    const line = { stroke: palette.feature, strokeLinecap: \"round\" as const, strokeWidth: 4 };\n    if (happy) {\n      return (\n        <path\n          data-part=\"arc\"\n          data-slot=\"orb-face-mouth\"\n          pathLength={1}\n          d={`M${String(CENTER - 11)} 76 Q${String(CENTER)} 88 ${String(CENTER + 11)} 76`}\n          fill=\"none\"\n          {...line}\n          strokeWidth={5}\n        />\n      );\n    }\n    if (broken) {\n      // A woozy wave, not a frown: it is confused, not scolding anyone.\n      return (\n        <path\n          data-slot=\"orb-face-mouth\"\n          d={`M${String(CENTER - 12)} 79 q6 -7 12 0 t12 0`}\n          fill=\"none\"\n          {...line}\n        />\n      );\n    }\n    if (state === \"speaking\") {\n      return (\n        <ellipse\n          data-slot=\"orb-face-mouth\"\n          data-part=\"talk\"\n          cx={CENTER}\n          cy={78}\n          rx={6}\n          ry={4.5}\n          fill={palette.feature}\n        />\n      );\n    }\n    return (\n      <line\n        data-slot=\"orb-face-mouth\"\n        data-part={thinking ? \"hmm\" : undefined}\n        // Off-centre while thinking: the universal \"hmm\".\n        x1={thinking ? CENTER - 6 : CENTER - 7}\n        x2={thinking ? CENTER + 8 : CENTER + 7}\n        y1={78}\n        y2={78}\n        {...line}\n      />\n    );\n  }\n\n  function setRefs(node: SVGSVGElement | null) {\n    svgRef.current = node;\n    if (typeof ref === \"function\") ref(node);\n    else if (ref) ref.current = node;\n  }\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <svg\n        ref={setRefs}\n        viewBox={`0 0 ${String(VIEWBOX)} ${String(VIEWBOX)}`}\n        data-slot=\"orb-face\"\n        data-state={state}\n        role={named ? \"img\" : undefined}\n        aria-hidden={named ? undefined : true}\n        className={cn(PREFIX, className)}\n        style={\n          {\n            width: resolvedSize,\n            height: resolvedSize,\n            \"--face-amplitude\": String(Math.min(1, Math.max(0, level))),\n            ...style,\n          } as CSSProperties\n        }\n        {...props}\n      >\n        <defs>\n          <radialGradient id={gradientId} cx=\"35%\" cy=\"28%\" r=\"80%\">\n            <stop offset=\"0%\" stopColor={palette.body} />\n            <stop offset=\"100%\" stopColor={palette.bodyEdge} />\n          </radialGradient>\n        </defs>\n        <g data-slot=\"orb-face-body\">\n          <circle cx={CENTER} cy={CENTER} r={48} fill={`url(#${gradientId})`} />\n          {/* Screen-blended body colour always lightens, in any theme. One\n              highlight is what makes it a body rather than a flat disc. */}\n          <ellipse\n            cx={CENTER - 14}\n            cy={CENTER - 22}\n            rx={13}\n            ry={8}\n            fill={palette.body}\n            opacity={0.7}\n            style={{ mixBlendMode: \"screen\" }}\n          />\n          {eyesOpen ? (\n            <motion.g\n              data-slot=\"orb-face-eyes\"\n              data-blink={blink ?? undefined}\n              style={{ x: gazeX, y: gazeY }}\n            >\n              {eye(-1)}\n              {eye(1)}\n            </motion.g>\n          ) : null}\n          {happy ? [arc(-1), arc(1)] : null}\n          {broken ? [spiral(-1), spiral(1)] : null}\n          {mouth()}\n        </g>\n      </svg>\n    </MotionConfig>\n  );\n}\n"],"mappings":"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"}

package/dist/components/otp-input/index.d.ts

@@ -0,0 +1,2 @@
+import { OtpInput, OtpInputAllow, OtpInputProps, otpInputVariants } from "./otp-input.js";
+export { OtpInput, type OtpInputAllow, type OtpInputProps, otpInputVariants };

package/dist/components/otp-input/index.js

@@ -0,0 +1,2 @@
+import { OtpInput, otpInputVariants } from "./otp-input.js";
+export { OtpInput, otpInputVariants };

package/dist/components/otp-input/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/otp-input/meta.ts
+const meta = defineMeta({
+	name: "otp-input",
+	title: "OTP Input",
+	description: "A one-time-code field drawn as a row of animated slots — paste, SMS autofill, masking and grouping included.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["otp-input.tsx"],
+	a11y: "One real text input with autocomplete=\"one-time-code\" and a numeric inputmode sits over the slots, so paste, SMS autofill, password managers and screen readers all meet a single labelled field holding the code; the painted slots are aria-hidden. Every prop except className lands on that input, so FormField's id, aria-describedby and aria-invalid wire up through FormControl. It is named \"One-time code\" only when given no aria-label, aria-labelledby or id. Arrow keys, Home and End move between slots; typing over a filled slot replaces it. The slots stay left-to-right in RTL, as codes are read. Slot, digit and caret motion is decoration and stops under reduced motion, leaving the caret visible."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/otp-input/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/otp-input/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"otp-input\",\n  title: \"OTP Input\",\n  description:\n    \"A one-time-code field drawn as a row of animated slots — paste, SMS autofill, masking and grouping included.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"otp-input.tsx\"],\n  a11y:\n    'One real text input with autocomplete=\"one-time-code\" and a numeric inputmode sits over the slots, so ' +\n    \"paste, SMS autofill, password managers and screen readers all meet a single labelled field holding the \" +\n    \"code; the painted slots are aria-hidden. Every prop except className lands on that input, so FormField's \" +\n    'id, aria-describedby and aria-invalid wire up through FormControl. It is named \"One-time code\" only ' +\n    \"when given no aria-label, aria-labelledby or id. Arrow keys, Home and End move between slots; typing \" +\n    \"over a filled slot replaces it. The slots stay left-to-right in RTL, as codes are read. Slot, digit and \" +\n    \"caret motion is decoration and stops under reduced motion, leaving the caret visible.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,eAAe;CACvB,MACE;AAOJ,CAAC"}

package/dist/components/otp-input/otp-input.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/otp-input/otp-input.d.ts
+/** A painted slot. */
+declare const otpInputVariants: (props?: ({
+  slotSize?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Which characters a slot accepts. A RegExp is tested against one character. */
+type OtpInputAllow = "numeric" | "alphanumeric" | "alpha" | RegExp;
+interface OtpInputProps extends Omit<ComponentPropsWithRef<"input">, "value" | "defaultValue" | "onChange" | "type" | "maxLength" | "size" | "children">, VariantProps<typeof otpInputVariants> {
+  /** Number of characters in the code. */
+  length?: number;
+  /** Controlled value. */
+  value?: string;
+  /** Initial value when uncontrolled. */
+  defaultValue?: string;
+  /** Called with the sanitised code whenever it changes. */
+  onValueChange?: (value: string) => void;
+  /** Called once each time the last slot is filled. */
+  onComplete?: (value: string) => void;
+  /** Characters accepted; anything else typed or pasted is dropped. */
+  allow?: OtpInputAllow;
+  /** Paints each filled slot with a dot, or the given character, instead of its value. */
+  mask?: boolean | string;
+  /** Slot counts per group, e.g. `[3, 3]`. A separator is drawn between groups. */
+  groups?: number[];
+  /** Drawn between groups. Decorative. */
+  separator?: ReactNode;
+  /** Classes for each painted slot. */
+  slotClassName?: string;
+}
+/** A one-time-code field: one real input, drawn as a row of animated slots. */
+declare function OtpInput({ className, slotClassName, length, value: valueProp, defaultValue, onValueChange, onComplete, allow, mask, groups, separator, slotSize, disabled, style, ref, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onPaste, onSelect, "aria-invalid": ariaInvalid, ...props }: OtpInputProps): import("react").JSX.Element;
+//#endregion
+export { OtpInput, OtpInputAllow, OtpInputProps, otpInputVariants };
+//# sourceMappingURL=otp-input.d.ts.map

package/dist/components/otp-input/otp-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.d.ts","names":[],"sources":["../../../src/components/otp-input/otp-input.tsx"],"mappings":";;;;cAqDM,mBAAgB;;6CAoBrB;;KAGW,uDAAuD;UAQlD,sBAEb,KACE,qHAGF,oBAAoB;;EAEtB;;EAEA;;EAEA;;EAEA,iBAAiB;;EAEjB,cAAc;;EAEd,QAAQ;;EAER;;EAEA;;EAEA,YAAY;;EAEZ;;;iBA4Cc,WACd,WACA,eACA,QACA,OAAO,WACP,cACA,eACA,YACA,OACA,MACA,QACA,WACA,UACA,UACA,OACA,KACA,SACA,QACA,WACA,SACA,SACA,SACA,0BACgB,gBACb,SACF,gCAAa,IAAA"}

package/dist/components/otp-input/otp-input.js

@@ -0,0 +1,249 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/otp-input/otp-input.tsx
+const PREFIX = "dowel-otp-input";
+const STYLES = `
+@keyframes ${PREFIX}-enter{from{opacity:0;transform:translateY(10px) scale(.8)}}
+@keyframes ${PREFIX}-char{from{opacity:0;transform:rotateY(-90deg) scale(.5)}}
+@keyframes ${PREFIX}-caret{0%,100%{opacity:0}50%{opacity:1}}
+[data-slot=otp-input-slot]{animation:${PREFIX}-enter calc(200ms * var(--motion-scale)) var(--ease-out-quint) both;animation-delay:calc(var(--${PREFIX}-index) * 50ms * var(--motion-scale))}
+[data-slot=otp-input-char]{animation:${PREFIX}-char calc(200ms * var(--motion-scale)) var(--ease-out-quint) both}
+[data-slot=otp-input-caret]{animation:${PREFIX}-caret calc(1s * var(--motion-scale)) var(--ease-in-out-quint) infinite}
+`;
+/** A painted slot. */
+const otpInputVariants = cva(cn("relative flex items-center justify-center rounded-md border border-input bg-background font-medium text-foreground shadow-xs", "transition-[border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] [perspective:20em]", "data-[filled]:scale-105", "data-[active]:z-10 data-[active]:border-ring data-[active]:ring-2 data-[active]:ring-ring/55", "data-[invalid]:border-destructive data-[invalid]:data-[active]:ring-destructive/40"), {
+	variants: { slotSize: {
+		sm: "size-8 text-sm",
+		md: "size-10 text-base",
+		lg: "size-12 text-lg"
+	} },
+	defaultVariants: { slotSize: "md" }
+});
+const ALLOW = {
+	numeric: /^\d$/,
+	alphanumeric: /^[\p{L}\p{N}]$/u,
+	alpha: /^\p{L}$/u
+};
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+function sanitize(text, allow, length) {
+	const test = typeof allow === "string" ? ALLOW[allow] : allow;
+	let out = "";
+	for (const char of text) {
+		if (out.length >= length) break;
+		if (test.test(char)) out += char;
+	}
+	return out;
+}
+/** The slot indexes of each group, in order. */
+function layout(groups, length) {
+	const sizes = groups && groups.length > 0 ? groups : [length];
+	const result = [];
+	let next = 0;
+	for (const size of sizes) {
+		const group = [];
+		for (let i = 0; i < size && next < length; i += 1) group.push(next++);
+		if (group.length > 0) result.push(group);
+	}
+	if (next < length) result.push(Array.from({ length: length - next }, (_, i) => next + i));
+	return result;
+}
+/** Laid over the slots: catches every pointer and keystroke, paints nothing. */
+const INPUT_STYLE = {
+	color: "transparent",
+	caretColor: "transparent",
+	background: "transparent",
+	fontSize: "1rem",
+	letterSpacing: "-0.5em",
+	fontFamily: "monospace"
+};
+/** A one-time-code field: one real input, drawn as a row of animated slots. */
+function OtpInput({ className, slotClassName, length = 6, value: valueProp, defaultValue = "", onValueChange, onComplete, allow = "numeric", mask = false, groups, separator, slotSize, disabled, style, ref, onFocus, onBlur, onKeyDown, onKeyUp, onClick, onPaste, onSelect, "aria-invalid": ariaInvalid, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(() => sanitize(defaultValue, allow, length));
+	const controlled = valueProp !== void 0;
+	const value = controlled ? sanitize(valueProp, allow, length) : uncontrolled;
+	const [focused, setFocused] = useState(false);
+	const [selection, setSelection] = useState([value.length, value.length]);
+	const inputRef = useRef(null);
+	const slotRefs = useRef([]);
+	const pendingCaret = useRef(null);
+	const setRefs = useCallback((node) => {
+		inputRef.current = node;
+		assignRef(ref, node);
+	}, [ref]);
+	/** Reads the caret, widening a collapsed one in front of a character to select it. */
+	const sync = useCallback(() => {
+		const el = inputRef.current;
+		if (!el) return;
+		let start = el.selectionStart ?? el.value.length;
+		let end = el.selectionEnd ?? start;
+		if (start === end && el.value.length > 0) {
+			if (start < el.value.length) end = start + 1;
+			else if (el.value.length >= length) [start, end] = [length - 1, length];
+			if (end !== start) el.setSelectionRange(start, end);
+		}
+		setSelection([start, end]);
+	}, [length]);
+	const moveTo = useCallback((index) => {
+		const el = inputRef.current;
+		if (!el) return;
+		const at = Math.max(0, Math.min(index, el.value.length));
+		el.setSelectionRange(at, at);
+		sync();
+	}, [sync]);
+	useLayoutEffect(() => {
+		const el = inputRef.current;
+		if (!el || el.ownerDocument.activeElement !== el) return;
+		if (pendingCaret.current !== null) {
+			el.setSelectionRange(pendingCaret.current, pendingCaret.current);
+			pendingCaret.current = null;
+		}
+		sync();
+	}, [value, sync]);
+	function commit(next) {
+		if (next === value) return;
+		if (!controlled) setUncontrolled(next);
+		onValueChange?.(next);
+		if (next.length === length && value.length !== length) onComplete?.(next);
+	}
+	function handleChange(event) {
+		commit(sanitize(event.target.value, allow, length));
+	}
+	function handlePaste(event) {
+		onPaste?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		const pasted = sanitize(event.clipboardData.getData("text/plain"), allow, length);
+		if (!pasted) return;
+		const el = event.currentTarget;
+		const start = el.selectionStart ?? value.length;
+		const end = el.selectionEnd ?? start;
+		const next = pasted.length >= length ? pasted : sanitize(value.slice(0, start) + pasted + value.slice(end), allow, length);
+		pendingCaret.current = Math.min(pasted.length >= length ? length : start + pasted.length, length);
+		commit(next);
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;
+		const [start] = selection;
+		const target = {
+			ArrowLeft: start - 1,
+			ArrowRight: start + 1,
+			Home: 0,
+			End: value.length
+		}[event.key];
+		if (target === void 0 || event.shiftKey) return;
+		event.preventDefault();
+		moveTo(target);
+	}
+	function handleClick(event) {
+		onClick?.(event);
+		const hit = slotRefs.current.findIndex((slot) => {
+			const box = slot?.getBoundingClientRect();
+			return !!box && box.width > 0 && event.clientX >= box.left && event.clientX <= box.right;
+		});
+		if (hit >= 0) moveTo(hit);
+		else sync();
+	}
+	function handleFocus(event) {
+		onFocus?.(event);
+		setFocused(true);
+		moveTo(event.currentTarget.value.length);
+	}
+	function handleBlur(event) {
+		onBlur?.(event);
+		setFocused(false);
+	}
+	const [start, end] = selection;
+	const invalid = ariaInvalid === true || ariaInvalid === "true";
+	const maskChar = typeof mask === "string" ? mask : "•";
+	const named = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0 || props.id !== void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "otp-input",
+		"data-disabled": disabled ? "" : void 0,
+		dir: "ltr",
+		className: cn("relative inline-flex items-center gap-2 data-[disabled]:opacity-55", className),
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: PREFIX,
+				precedence: "dowel",
+				children: STYLES
+			}),
+			layout(groups, length).map((group, groupIndex) => /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				"aria-hidden": "true",
+				children: [groupIndex > 0 ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "otp-input-separator",
+					className: "flex text-muted-foreground",
+					children: separator ?? /* @__PURE__ */ jsx("span", { className: "h-0.5 w-3 rounded-full bg-current" })
+				}) : null, group.map((index) => {
+					const char = value[index];
+					const active = focused && index >= Math.min(start, length - 1) && index < Math.max(end, start + 1);
+					const caret = focused && start === end && start === index && index === value.length;
+					return /* @__PURE__ */ jsxs("div", {
+						ref: (node) => {
+							slotRefs.current[index] = node;
+						},
+						"data-slot": "otp-input-slot",
+						"data-active": active ? "" : void 0,
+						"data-filled": char ? "" : void 0,
+						"data-invalid": invalid ? "" : void 0,
+						style: { [`--${PREFIX}-index`]: index },
+						className: cn(otpInputVariants({ slotSize }), slotClassName),
+						children: [char ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "otp-input-char",
+							children: mask ? maskChar : char
+						}, `${index}-${char}`) : null, caret ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "otp-input-caret",
+							className: "pointer-events-none absolute h-1/2 w-px bg-foreground"
+						}) : null]
+					}, index);
+				})]
+			}, group[0])),
+			/* @__PURE__ */ jsx("input", {
+				ref: setRefs,
+				"data-slot": "otp-input-control",
+				type: "text",
+				inputMode: allow === "numeric" ? "numeric" : "text",
+				autoComplete: "one-time-code",
+				autoCapitalize: "off",
+				autoCorrect: "off",
+				spellCheck: false,
+				"aria-label": named ? void 0 : "One-time code",
+				"aria-invalid": ariaInvalid,
+				disabled,
+				maxLength: length,
+				value,
+				style: {
+					...INPUT_STYLE,
+					...style
+				},
+				className: "absolute inset-0 size-full border-0 p-0 outline-none selection:bg-transparent disabled:cursor-not-allowed",
+				onChange: handleChange,
+				onPaste: handlePaste,
+				onKeyDown: handleKeyDown,
+				onKeyUp: (event) => {
+					onKeyUp?.(event);
+					sync();
+				},
+				onSelect: (event) => {
+					onSelect?.(event);
+					sync();
+				},
+				onClick: handleClick,
+				onFocus: handleFocus,
+				onBlur: handleBlur,
+				...props
+			})
+		]
+	});
+}
+//#endregion
+export { OtpInput, otpInputVariants };
+
+//# sourceMappingURL=otp-input.js.map

package/dist/components/otp-input/otp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.js","names":[],"sources":["../../../src/components/otp-input/otp-input.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Animated OTP Input (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ClipboardEvent,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * One real <input> drives N painted slots.\n *\n * The input is transparent and laid over the slots, so it receives every\n * click, tap, paste and SMS autofill a native field would — `autocomplete=\n * \"one-time-code\"` only works on a real text input, and a row of six inputs\n * breaks paste, autofill and screen-reader reading all at once. The slots\n * are aria-hidden paint: what a screen reader meets is one labelled text\n * field holding the code.\n *\n * The caret lives on a slot rather than in the input. A collapsed caret in\n * front of a filled character is widened to select that character, so typing\n * overwrites it and moves on — the behaviour people expect from a code field.\n *\n * Motion is CSS: slots rise in with a stagger, a digit flips in when it lands,\n * the active slot rings. All of it is decoration and stops under reduced\n * motion; the caret settles visible instead of blinking.\n */\n\nconst PREFIX = \"dowel-otp-input\";\n\nconst STYLES = `\n@keyframes ${PREFIX}-enter{from{opacity:0;transform:translateY(10px) scale(.8)}}\n@keyframes ${PREFIX}-char{from{opacity:0;transform:rotateY(-90deg) scale(.5)}}\n@keyframes ${PREFIX}-caret{0%,100%{opacity:0}50%{opacity:1}}\n[data-slot=otp-input-slot]{animation:${PREFIX}-enter calc(200ms * var(--motion-scale)) var(--ease-out-quint) both;animation-delay:calc(var(--${PREFIX}-index) * 50ms * var(--motion-scale))}\n[data-slot=otp-input-char]{animation:${PREFIX}-char calc(200ms * var(--motion-scale)) var(--ease-out-quint) both}\n[data-slot=otp-input-caret]{animation:${PREFIX}-caret calc(1s * var(--motion-scale)) var(--ease-in-out-quint) infinite}\n`;\n\n/** A painted slot. */\nconst otpInputVariants = cva(\n  cn(\n    \"relative flex items-center justify-center rounded-md border border-input bg-background font-medium text-foreground shadow-xs\",\n    \"transition-[border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] [perspective:20em]\",\n    \"data-[filled]:scale-105\",\n    \"data-[active]:z-10 data-[active]:border-ring data-[active]:ring-2 data-[active]:ring-ring/55\",\n    \"data-[invalid]:border-destructive data-[invalid]:data-[active]:ring-destructive/40\",\n  ),\n  {\n    variants: {\n      slotSize: {\n        sm: \"size-8 text-sm\",\n        md: \"size-10 text-base\",\n        lg: \"size-12 text-lg\",\n      },\n    },\n    defaultVariants: {\n      slotSize: \"md\",\n    },\n  },\n);\n\n/** Which characters a slot accepts. A RegExp is tested against one character. */\nexport type OtpInputAllow = \"numeric\" | \"alphanumeric\" | \"alpha\" | RegExp;\n\nconst ALLOW: Record<Exclude<OtpInputAllow, RegExp>, RegExp> = {\n  numeric: /^\\d$/,\n  alphanumeric: /^[\\p{L}\\p{N}]$/u,\n  alpha: /^\\p{L}$/u,\n};\n\nexport interface OtpInputProps\n  extends\n    Omit<\n      ComponentPropsWithRef<\"input\">,\n      \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"maxLength\" | \"size\" | \"children\"\n    >,\n    VariantProps<typeof otpInputVariants> {\n  /** Number of characters in the code. */\n  length?: number;\n  /** Controlled value. */\n  value?: string;\n  /** Initial value when uncontrolled. */\n  defaultValue?: string;\n  /** Called with the sanitised code whenever it changes. */\n  onValueChange?: (value: string) => void;\n  /** Called once each time the last slot is filled. */\n  onComplete?: (value: string) => void;\n  /** Characters accepted; anything else typed or pasted is dropped. */\n  allow?: OtpInputAllow;\n  /** Paints each filled slot with a dot, or the given character, instead of its value. */\n  mask?: boolean | string;\n  /** Slot counts per group, e.g. `[3, 3]`. A separator is drawn between groups. */\n  groups?: number[];\n  /** Drawn between groups. Decorative. */\n  separator?: ReactNode;\n  /** Classes for each painted slot. */\n  slotClassName?: string;\n}\n\nfunction assignRef<T>(ref: Ref<T> | undefined, value: T | null) {\n  if (typeof ref === \"function\") ref(value);\n  else if (ref) ref.current = value;\n}\n\nfunction sanitize(text: string, allow: OtpInputAllow, length: number): string {\n  const test = typeof allow === \"string\" ? ALLOW[allow] : allow;\n  let out = \"\";\n  for (const char of text) {\n    if (out.length >= length) break;\n    if (test.test(char)) out += char;\n  }\n  return out;\n}\n\n/** The slot indexes of each group, in order. */\nfunction layout(groups: number[] | undefined, length: number): number[][] {\n  const sizes = groups && groups.length > 0 ? groups : [length];\n  const result: number[][] = [];\n  let next = 0;\n  for (const size of sizes) {\n    const group: number[] = [];\n    for (let i = 0; i < size && next < length; i += 1) group.push(next++);\n    if (group.length > 0) result.push(group);\n  }\n  // Whatever the groups leave over goes in a last group, so no slot is lost.\n  if (next < length) result.push(Array.from({ length: length - next }, (_, i) => next + i));\n  return result;\n}\n\n/** Laid over the slots: catches every pointer and keystroke, paints nothing. */\nconst INPUT_STYLE: CSSProperties = {\n  color: \"transparent\",\n  caretColor: \"transparent\",\n  background: \"transparent\",\n  fontSize: \"1rem\",\n  letterSpacing: \"-0.5em\",\n  fontFamily: \"monospace\",\n};\n\n/** A one-time-code field: one real input, drawn as a row of animated slots. */\nexport function OtpInput({\n  className,\n  slotClassName,\n  length = 6,\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  onComplete,\n  allow = \"numeric\",\n  mask = false,\n  groups,\n  separator,\n  slotSize,\n  disabled,\n  style,\n  ref,\n  onFocus,\n  onBlur,\n  onKeyDown,\n  onKeyUp,\n  onClick,\n  onPaste,\n  onSelect,\n  \"aria-invalid\": ariaInvalid,\n  ...props\n}: OtpInputProps) {\n  const [uncontrolled, setUncontrolled] = useState(() => sanitize(defaultValue, allow, length));\n  const controlled = valueProp !== undefined;\n  const value = controlled ? sanitize(valueProp, allow, length) : uncontrolled;\n  const [focused, setFocused] = useState(false);\n  const [selection, setSelection] = useState<[number, number]>([value.length, value.length]);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const slotRefs = useRef<(HTMLDivElement | null)[]>([]);\n  const pendingCaret = useRef<number | null>(null);\n\n  const setRefs = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node;\n      assignRef(ref, node);\n    },\n    [ref],\n  );\n\n  /** Reads the caret, widening a collapsed one in front of a character to select it. */\n  const sync = useCallback(() => {\n    const el = inputRef.current;\n    if (!el) return;\n    let start = el.selectionStart ?? el.value.length;\n    let end = el.selectionEnd ?? start;\n    if (start === end && el.value.length > 0) {\n      if (start < el.value.length) end = start + 1;\n      else if (el.value.length >= length) [start, end] = [length - 1, length];\n      if (end !== start) el.setSelectionRange(start, end);\n    }\n    setSelection([start, end]);\n  }, [length]);\n\n  const moveTo = useCallback(\n    (index: number) => {\n      const el = inputRef.current;\n      if (!el) return;\n      const at = Math.max(0, Math.min(index, el.value.length));\n      el.setSelectionRange(at, at);\n      sync();\n    },\n    [sync],\n  );\n\n  // After a change or paste, place the caret, then re-read it.\n  useLayoutEffect(() => {\n    const el = inputRef.current;\n    if (!el || el.ownerDocument.activeElement !== el) return;\n    if (pendingCaret.current !== null) {\n      el.setSelectionRange(pendingCaret.current, pendingCaret.current);\n      pendingCaret.current = null;\n    }\n    sync();\n  }, [value, sync]);\n\n  function commit(next: string) {\n    if (next === value) return;\n    if (!controlled) setUncontrolled(next);\n    onValueChange?.(next);\n    if (next.length === length && value.length !== length) onComplete?.(next);\n  }\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    commit(sanitize(event.target.value, allow, length));\n  }\n\n  function handlePaste(event: ClipboardEvent<HTMLInputElement>) {\n    onPaste?.(event);\n    if (event.defaultPrevented) return;\n    event.preventDefault();\n    const pasted = sanitize(event.clipboardData.getData(\"text/plain\"), allow, length);\n    if (!pasted) return;\n    const el = event.currentTarget;\n    const start = el.selectionStart ?? value.length;\n    const end = el.selectionEnd ?? start;\n    // A whole code replaces what is there; a fragment is inserted at the caret.\n    const next =\n      pasted.length >= length\n        ? pasted\n        : sanitize(value.slice(0, start) + pasted + value.slice(end), allow, length);\n    pendingCaret.current = Math.min(\n      pasted.length >= length ? length : start + pasted.length,\n      length,\n    );\n    commit(next);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey) return;\n    const [start] = selection;\n    const targets: Record<string, number> = {\n      ArrowLeft: start - 1,\n      ArrowRight: start + 1,\n      Home: 0,\n      End: value.length,\n    };\n    const target = targets[event.key];\n    if (target === undefined || event.shiftKey) return;\n    event.preventDefault();\n    moveTo(target);\n  }\n\n  function handleClick(event: MouseEvent<HTMLInputElement>) {\n    onClick?.(event);\n    // The input's own caret positions do not line up with the painted slots,\n    // so a click is resolved against the slots' boxes instead.\n    const hit = slotRefs.current.findIndex((slot) => {\n      const box = slot?.getBoundingClientRect();\n      return !!box && box.width > 0 && event.clientX >= box.left && event.clientX <= box.right;\n    });\n    if (hit >= 0) moveTo(hit);\n    else sync();\n  }\n\n  function handleFocus(event: FocusEvent<HTMLInputElement>) {\n    onFocus?.(event);\n    setFocused(true);\n    // Focus lands after the last character, never selecting the whole code:\n    // typing into a tabbed-to field continues it rather than wiping it.\n    moveTo(event.currentTarget.value.length);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    onBlur?.(event);\n    setFocused(false);\n  }\n\n  const [start, end] = selection;\n  const invalid = ariaInvalid === true || ariaInvalid === \"true\";\n  const maskChar = typeof mask === \"string\" ? mask : \"•\";\n  const named =\n    props[\"aria-label\"] !== undefined ||\n    props[\"aria-labelledby\"] !== undefined ||\n    props.id !== undefined;\n\n  return (\n    <div\n      data-slot=\"otp-input\"\n      data-disabled={disabled ? \"\" : undefined}\n      dir=\"ltr\"\n      className={cn(\n        \"relative inline-flex items-center gap-2 data-[disabled]:opacity-55\",\n        className,\n      )}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      {layout(groups, length).map((group, groupIndex) => (\n        <div key={group[0]} className=\"flex items-center gap-2\" aria-hidden=\"true\">\n          {groupIndex > 0 ? (\n            <span data-slot=\"otp-input-separator\" className=\"flex text-muted-foreground\">\n              {separator ?? <span className=\"h-0.5 w-3 rounded-full bg-current\" />}\n            </span>\n          ) : null}\n          {group.map((index) => {\n            const char = value[index];\n            const active =\n              focused &&\n              index >= Math.min(start, length - 1) &&\n              index < Math.max(end, start + 1);\n            const caret = focused && start === end && start === index && index === value.length;\n            return (\n              <div\n                key={index}\n                ref={(node) => {\n                  slotRefs.current[index] = node;\n                }}\n                data-slot=\"otp-input-slot\"\n                data-active={active ? \"\" : undefined}\n                data-filled={char ? \"\" : undefined}\n                data-invalid={invalid ? \"\" : undefined}\n                style={{ [`--${PREFIX}-index`]: index } as CSSProperties}\n                className={cn(otpInputVariants({ slotSize }), slotClassName)}\n              >\n                {char ? (\n                  <span key={`${index}-${char}`} data-slot=\"otp-input-char\">\n                    {mask ? maskChar : char}\n                  </span>\n                ) : null}\n                {caret ? (\n                  <span\n                    data-slot=\"otp-input-caret\"\n                    className=\"pointer-events-none absolute h-1/2 w-px bg-foreground\"\n                  />\n                ) : null}\n              </div>\n            );\n          })}\n        </div>\n      ))}\n      <input\n        ref={setRefs}\n        data-slot=\"otp-input-control\"\n        type=\"text\"\n        inputMode={allow === \"numeric\" ? \"numeric\" : \"text\"}\n        autoComplete=\"one-time-code\"\n        autoCapitalize=\"off\"\n        autoCorrect=\"off\"\n        spellCheck={false}\n        aria-label={named ? undefined : \"One-time code\"}\n        aria-invalid={ariaInvalid}\n        disabled={disabled}\n        maxLength={length}\n        value={value}\n        style={{ ...INPUT_STYLE, ...style }}\n        className=\"absolute inset-0 size-full border-0 p-0 outline-none selection:bg-transparent disabled:cursor-not-allowed\"\n        onChange={handleChange}\n        onPaste={handlePaste}\n        onKeyDown={handleKeyDown}\n        onKeyUp={(event) => {\n          onKeyUp?.(event);\n          sync();\n        }}\n        onSelect={(event) => {\n          onSelect?.(event);\n          sync();\n        }}\n        onClick={handleClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport { otpInputVariants };\n"],"mappings":"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"}

package/dist/components/pagination/index.d.ts

@@ -1,2 +1,2 @@
-import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationLinkProps, PaginationNext, PaginationPrevious } from "./pagination.js";
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious };
+import { Pagination, PaginationContent, PaginationContentProps, PaginationEllipsis, PaginationItem, PaginationLink, PaginationLinkProps, PaginationNext, PaginationPrevious } from "./pagination.js";
+export { Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious };

package/dist/components/pagination/meta.js

@@ -8,8 +8,8 @@ const meta = defineMeta({
 	status: "stable",
 	dependencies: ["radix-ui"],
 	registryDependencies: ["button"],
-	files: ["pagination.tsx"],
-	a11y: "A named nav landmark. The current page carries aria-current=\"page\" — styling it differently conveys nothing on its own. Links by default, since a page of results is a place worth sharing; use asChild for your router's link, or render buttons when paging only changes client state."
+	files: ["pagination.tsx", "pagination-indicator.tsx"],
+	a11y: "A named nav landmark. The current page carries aria-current=\"page\" — styling it differently conveys nothing on its own. Links by default, since a page of results is a place worth sharing; use asChild for your router's link, or render buttons when paging only changes client state. The optional sliding pill (indicator=\"slide\") is an aria-hidden list item, so the list's item count stays the number of pages, and it stops sliding under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/pagination/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/pagination/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"pagination\",\n  title: \"Pagination\",\n  description: \"Navigation between pages of a list.\",\n  category: \"navigation\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [\"button\"],\n  files: [\"pagination.tsx\"],\n  a11y:\n    'A named nav landmark. The current page carries aria-current=\"page\" — styling it ' +\n    \"differently conveys nothing on its own. Links by default, since a page of results is a \" +\n    \"place worth sharing; use asChild for your router's link, or render buttons when paging \" +\n    \"only changes client state.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,gBAAgB;CACxB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/pagination/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"pagination\",\n  title: \"Pagination\",\n  description: \"Navigation between pages of a list.\",\n  category: \"navigation\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [\"button\"],\n  files: [\"pagination.tsx\", \"pagination-indicator.tsx\"],\n  a11y:\n    'A named nav landmark. The current page carries aria-current=\"page\" — styling it ' +\n    \"differently conveys nothing on its own. Links by default, since a page of results is a \" +\n    \"place worth sharing; use asChild for your router's link, or render buttons when paging \" +\n    'only changes client state. The optional sliding pill (indicator=\"slide\") is an ' +\n    \"aria-hidden list item, so the list's item count stays the number of pages, and it \" +\n    \"stops sliding under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,kBAAkB,0BAA0B;CACpD,MACE;AAMJ,CAAC"}

package/dist/components/pagination/pagination-indicator.js

@@ -0,0 +1,76 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/pagination/pagination-indicator.tsx
+const ACTIVE = "[data-slot=\"pagination-link\"][aria-current=\"page\"]";
+function measure(list) {
+	const active = list.querySelector(ACTIVE);
+	if (!active) return null;
+	let { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = active;
+	if (active.offsetParent !== list) {
+		const from = list.getBoundingClientRect();
+		const to = active.getBoundingClientRect();
+		x = to.left - from.left - list.clientLeft;
+		y = to.top - from.top - list.clientTop;
+		width = to.width;
+		height = to.height;
+	}
+	return {
+		width,
+		height,
+		transform: `translate(${String(x)}px, ${String(y)}px)`
+	};
+}
+function same(a, b) {
+	return a?.transform === b?.transform && a?.width === b?.width && a?.height === b?.height;
+}
+/**
+* The sliding active-page pill. A list item because it lives in a `<ul>`,
+* and hidden from assistive technology so the list's item count is still the
+* number of pages: `aria-current` is what announces the current one.
+*/
+function PaginationIndicator({ className }) {
+	const [box, setBox] = useState(null);
+	const node = useRef(null);
+	const update = useCallback(() => {
+		const list = node.current?.parentElement;
+		if (!list) return;
+		const next = measure(list);
+		setBox((previous) => same(previous, next) ? previous : next);
+	}, []);
+	useLayoutEffect(() => {
+		const list = node.current?.parentElement;
+		if (!list) return;
+		update();
+		const mutations = new MutationObserver(update);
+		mutations.observe(list, {
+			attributes: true,
+			attributeFilter: ["aria-current"],
+			childList: true,
+			subtree: true
+		});
+		const resizes = new ResizeObserver(update);
+		resizes.observe(list);
+		return () => {
+			mutations.disconnect();
+			resizes.disconnect();
+		};
+	}, [update]);
+	return /* @__PURE__ */ jsx("li", {
+		ref: node,
+		"aria-hidden": "true",
+		"data-slot": "pagination-indicator",
+		"data-ready": box ? "" : void 0,
+		className: cn("pointer-events-none absolute rounded-md border border-border-strong bg-background", "transition-[transform,width,height] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]", "motion-reduce:transition-none", !box && "hidden", className),
+		style: box ? {
+			top: 0,
+			left: 0,
+			...box
+		} : void 0
+	});
+}
+//#endregion
+export { PaginationIndicator };
+
+//# sourceMappingURL=pagination-indicator.js.map

package/dist/components/pagination/pagination-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-indicator.js","names":[],"sources":["../../../src/components/pagination/pagination-indicator.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI Pagination (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { useCallback, useLayoutEffect, useRef, useState, type CSSProperties } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * The client half of `<PaginationContent indicator=\"slide\">`, in its own file\n * so the rest of Pagination stays renderable on the server.\n *\n * It measures its own parent list rather than being handed a ref, so\n * PaginationContent needs no state of its own. The move is a CSS transition\n * on transform and width with the overshoot curve standing in for SmoothUI's\n * spring; the global reduced-motion rule turns it into a jump.\n */\n\ntype Box = Pick<CSSProperties, \"width\" | \"height\" | \"transform\">;\n\nconst ACTIVE = '[data-slot=\"pagination-link\"][aria-current=\"page\"]';\n\nfunction measure(list: HTMLElement): Box | null {\n  const active = list.querySelector<HTMLElement>(ACTIVE);\n  if (!active) return null;\n  let { offsetLeft: x, offsetTop: y, offsetWidth: width, offsetHeight: height } = active;\n  if (active.offsetParent !== list) {\n    const from = list.getBoundingClientRect();\n    const to = active.getBoundingClientRect();\n    x = to.left - from.left - list.clientLeft;\n    y = to.top - from.top - list.clientTop;\n    width = to.width;\n    height = to.height;\n  }\n  return { width, height, transform: `translate(${String(x)}px, ${String(y)}px)` };\n}\n\nfunction same(a: Box | null, b: Box | null) {\n  return a?.transform === b?.transform && a?.width === b?.width && a?.height === b?.height;\n}\n\n/**\n * The sliding active-page pill. A list item because it lives in a `<ul>`,\n * and hidden from assistive technology so the list's item count is still the\n * number of pages: `aria-current` is what announces the current one.\n */\nexport function PaginationIndicator({ className }: { className?: string }) {\n  const [box, setBox] = useState<Box | null>(null);\n  const node = useRef<HTMLLIElement | null>(null);\n\n  const update = useCallback(() => {\n    const list = node.current?.parentElement;\n    if (!list) return;\n    const next = measure(list);\n    setBox((previous) => (same(previous, next) ? previous : next));\n  }, []);\n\n  useLayoutEffect(() => {\n    const list = node.current?.parentElement;\n    if (!list) return;\n    update();\n    // Client-state pagination re-renders the links with a new aria-current;\n    // a page list that grows or shrinks around the ellipsis changes sizes.\n    const mutations = new MutationObserver(update);\n    mutations.observe(list, {\n      attributes: true,\n      attributeFilter: [\"aria-current\"],\n      childList: true,\n      subtree: true,\n    });\n    const resizes = new ResizeObserver(update);\n    resizes.observe(list);\n    return () => {\n      mutations.disconnect();\n      resizes.disconnect();\n    };\n  }, [update]);\n\n  return (\n    <li\n      ref={node}\n      aria-hidden=\"true\"\n      data-slot=\"pagination-indicator\"\n      data-ready={box ? \"\" : undefined}\n      className={cn(\n        \"pointer-events-none absolute rounded-md border border-border-strong bg-background\",\n        \"transition-[transform,width,height] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n        \"motion-reduce:transition-none\",\n        !box && \"hidden\",\n        className,\n      )}\n      // Physical anchor, because the offsets it moves by are physical.\n      style={box ? { top: 0, left: 0, ...box } : undefined}\n    />\n  );\n}\n"],"mappings":";;;;;AAmBA,MAAM,SAAS;AAEf,SAAS,QAAQ,MAA+B;CAC9C,MAAM,SAAS,KAAK,cAA2B,MAAM;CACrD,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,EAAE,YAAY,GAAG,WAAW,GAAG,aAAa,OAAO,cAAc,WAAW;CAChF,IAAI,OAAO,iBAAiB,MAAM;EAChC,MAAM,OAAO,KAAK,sBAAsB;EACxC,MAAM,KAAK,OAAO,sBAAsB;EACxC,IAAI,GAAG,OAAO,KAAK,OAAO,KAAK;EAC/B,IAAI,GAAG,MAAM,KAAK,MAAM,KAAK;EAC7B,QAAQ,GAAG;EACX,SAAS,GAAG;CACd;CACA,OAAO;EAAE;EAAO;EAAQ,WAAW,aAAa,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,EAAE;CAAK;AACjF;AAEA,SAAS,KAAK,GAAe,GAAe;CAC1C,OAAO,GAAG,cAAc,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG;AACpF;;;;;;AAOA,SAAgB,oBAAoB,EAAE,aAAqC;CACzE,MAAM,CAAC,KAAK,UAAU,SAAqB,IAAI;CAC/C,MAAM,OAAO,OAA6B,IAAI;CAE9C,MAAM,SAAS,kBAAkB;EAC/B,MAAM,OAAO,KAAK,SAAS;EAC3B,IAAI,CAAC,MAAM;EACX,MAAM,OAAO,QAAQ,IAAI;EACzB,QAAQ,aAAc,KAAK,UAAU,IAAI,IAAI,WAAW,IAAK;CAC/D,GAAG,CAAC,CAAC;CAEL,sBAAsB;EACpB,MAAM,OAAO,KAAK,SAAS;EAC3B,IAAI,CAAC,MAAM;EACX,OAAO;EAGP,MAAM,YAAY,IAAI,iBAAiB,MAAM;EAC7C,UAAU,QAAQ,MAAM;GACtB,YAAY;GACZ,iBAAiB,CAAC,cAAc;GAChC,WAAW;GACX,SAAS;EACX,CAAC;EACD,MAAM,UAAU,IAAI,eAAe,MAAM;EACzC,QAAQ,QAAQ,IAAI;EACpB,aAAa;GACX,UAAU,WAAW;GACrB,QAAQ,WAAW;EACrB;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,OACE,oBAAC,MAAD;EACE,KAAK;EACL,eAAY;EACZ,aAAU;EACV,cAAY,MAAM,KAAK,KAAA;EACvB,WAAW,GACT,qFACA,sGACA,iCACA,CAAC,OAAO,UACR,SACF;EAEA,OAAO,MAAM;GAAE,KAAK;GAAG,MAAM;GAAG,GAAG;EAAI,IAAI,KAAA;CAC5C,CAAA;AAEL"}

package/dist/components/pagination/pagination.d.ts

@@ -9,7 +9,15 @@ import { ComponentPropsWithRef } from "react";
  * client state, render buttons instead — `PaginationLink` accepts either.
  */
 declare function Pagination({ className, ...props }: ComponentPropsWithRef<"nav">): import("react").JSX.Element;
-declare function PaginationContent({ className, ...props }: ComponentPropsWithRef<"ul">): import("react").JSX.Element;
+interface PaginationContentProps extends ComponentPropsWithRef<"ul"> {
+  /**
+   * `slide` moves one active-page pill between pages instead of restyling
+   * each link. Worth it when paging changes client state; a link that loads
+   * a new document never sees the slide. Default `none`.
+   */
+  indicator?: "none" | "slide";
+}
+declare function PaginationContent({ className, indicator, children, ...props }: PaginationContentProps): import("react").JSX.Element;
 declare function PaginationItem({ className, ...props }: ComponentPropsWithRef<"li">): import("react").JSX.Element;
 interface PaginationLinkProps extends ComponentPropsWithRef<"a"> {
   /** Marks the page the user is on. Sets aria-current="page". */
@@ -29,5 +37,5 @@ declare function PaginationNext({ className, ...props }: PaginationLinkProps): i
  */
 declare function PaginationEllipsis({ className, ...props }: ComponentPropsWithRef<"span">): import("react").JSX.Element;
 //#endregion
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationLinkProps, PaginationNext, PaginationPrevious };
+export { Pagination, PaginationContent, PaginationContentProps, PaginationEllipsis, PaginationItem, PaginationLink, PaginationLinkProps, PaginationNext, PaginationPrevious };
 //# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"mappings":";;;;;;;;;;iBAegB,aAAa,cAAc,SAAS,+CAA4B,IAAA;iBAahE,oBAAoB,cAAc,SAAS,8CAA2B,IAAA;iBAUtE,iBAAiB,cAAc,SAAS,8CAA2B,IAAA;UAIlE,4BAA4B;;EAE3C;EACA;EACA;;iBAGc,iBACd,WACA,UACA,MACA,YACG,SACF,sCAAmB,IAAA;iBAoBN,qBAAqB,cAAc,SAAS,sCAAmB,IAAA;iBA2B/D,iBAAiB,cAAc,SAAS,sCAAmB,IAAA;;;;;;;;iBAkC3D,qBAAqB,cAAc,SAAS,gDAA6B,IAAA"}
+{"version":3,"file":"pagination.d.ts","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"mappings":";;;;;;;;;;iBAkBgB,aAAa,cAAc,SAAS,+CAA4B,IAAA;UAa/D,+BAA+B;;;;;;EAM9C;;iBAGc,oBACd,WACA,WACA,aACG,SACF,yCAAsB,IAAA;iBA2BT,iBAAiB,cAAc,SAAS,8CAA2B,IAAA;UAIlE,4BAA4B;;EAE3C;EACA;EACA;;iBAGc,iBACd,WACA,UACA,MACA,YACG,SACF,sCAAmB,IAAA;iBAoBN,qBAAqB,cAAc,SAAS,sCAAmB,IAAA;iBA2B/D,iBAAiB,cAAc,SAAS,sCAAmB,IAAA;;;;;;;;iBAkC3D,qBAAqB,cAAc,SAAS,gDAA6B,IAAA"}

package/dist/components/pagination/pagination.js

@@ -1,6 +1,7 @@
 import { mirrorForDirection } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { buttonVariants } from "../button/button.js";
+import { PaginationIndicator } from "./pagination-indicator.js";
 import { Slot } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/pagination/pagination.tsx
@@ -20,11 +21,19 @@ function Pagination({ className, ...props }) {
 		...props
 	});
 }
-function PaginationContent({ className, ...props }) {
-	return /* @__PURE__ */ jsx("ul", {
+function PaginationContent({ className, indicator = "none", children, ...props }) {
+	const slide = indicator === "slide";
+	return /* @__PURE__ */ jsxs("ul", {
 		"data-slot": "pagination-content",
-		className: cn("flex flex-row items-center gap-1", className),
-		...props
+		"data-indicator": slide ? "slide" : void 0,
+		className: cn("flex flex-row items-center gap-1", slide && [
+			"relative",
+			"has-[>[data-slot=pagination-indicator][data-ready]]:[&_[data-slot=pagination-link]]:relative",
+			"has-[>[data-slot=pagination-indicator][data-ready]]:[&_[data-slot=pagination-link][aria-current=page]]:border-transparent",
+			"has-[>[data-slot=pagination-indicator][data-ready]]:[&_[data-slot=pagination-link][aria-current=page]]:bg-transparent"
+		], className),
+		...props,
+		children: [slide ? /* @__PURE__ */ jsx(PaginationIndicator, {}) : null, children]
 	});
 }
 function PaginationItem({ className, ...props }) {