@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/shape-loader/shape-loader-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-loader-variants.js","names":[],"sources":["../../../src/components/shape-loader/shape-loader-variants.tsx"],"sourcesContent":["// Ported from amicro \"Geometric Shapes\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport type { CSSProperties, ReactNode } from \"react\";\n\n/*\n * The variant table for ShapeLoader, split out to keep each file small.\n *\n * Source px ÷ 8 = em, so a 32px square is 4em at the default size. Framer's\n * keyframe arrays become @keyframes whose stops are spread evenly, the way\n * Framer spreads them; its easeInOut is CSS ease-in-out, applied per segment\n * as Framer does. The source's springs (cube flip, diamond spin, spring hex)\n * become the overshoot curve, the closest a CSS easing gets to a bounce.\n *\n * Renamed: amicro's \"apple-icon-morph\" is `icon-morph` here.\n */\n\nexport const PREFIX = \"dowel-shape-loader\";\n\n/** A delay or duration in seconds, scaled for reduced motion. */\nexport function scaled(seconds: number): string {\n  return `calc(${String(seconds)}s * var(--motion-scale-indicator, 1))`;\n}\n\nconst OVERSHOOT = \"var(--ease-overshoot, cubic-bezier(0.34, 1.4, 0.64, 1))\";\n\nexport type Variant = {\n  /** Layout of the root, inline so it outranks the unlayered stylesheet. */\n  root: CSSProperties;\n  render: () => ReactNode;\n};\n\ntype Motion = {\n  name: string;\n  duration: number;\n  delay?: number;\n  ease?: string;\n};\n\n/** The inline animation for a part: keyframe, scaled duration and delay. */\nfunction animate({ name, duration, delay = 0, ease }: Motion): CSSProperties {\n  const style: Style = {\n    animationName: `${PREFIX}-${name}`,\n    \"--dur\": scaled(duration),\n    \"--delay\": scaled(delay),\n  };\n  if (ease) style.animationTimingFunction = ease;\n  return style;\n}\n\n/**\n * A span part. `kind` picks its base look in the stylesheet: `shape` is a\n * filled block, `outline` a bordered one, `group` a transparent layer that may\n * move, `frame` a transparent layer that never does.\n */\nfunction part(\n  key: number | string,\n  kind: \"shape\" | \"outline\" | \"group\" | \"frame\",\n  style: CSSProperties,\n  motion?: Motion,\n  children?: ReactNode,\n): ReactNode {\n  return (\n    <span key={key} data-part={kind} style={{ ...style, ...(motion ? animate(motion) : {}) }}>\n      {children}\n    </span>\n  );\n}\n\ntype Style = CSSProperties & Record<`--${string}`, string>;\n\nfunction square(size: string, radius: string, extra: Style = {}): Style {\n  return { width: size, height: size, borderRadius: radius, ...extra };\n}\n\nconst HEXAGON = \"25,5 45,15 45,35 25,45 5,35 5,15\";\nconst TRIANGLE = \"25,5 45,40 5,40\";\nconst INFINITY =\n  \"M 15 15 C 15 5, 25 5, 30 15 C 35 25, 45 25, 45 15 C 45 5, 35 5, 30 15 C 25 25, 15 25, 15 15\";\nconst HEART =\n  \"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\";\n\ntype StrokeProps = {\n  strokeWidth: number;\n  strokeDasharray?: number;\n  strokeLinecap?: \"round\";\n  strokeLinejoin?: \"round\";\n};\n\n/** A stroked SVG outline: a faint track, or the moving line when given a motion. */\nfunction stroke(\n  key: string,\n  shape: \"polygon\" | \"polyline\" | \"path\",\n  geometry: string,\n  props: StrokeProps,\n  motion?: Motion,\n): ReactNode {\n  const style = motion ? animate(motion) : { opacity: 0.2 };\n  const common = { \"data-part\": \"stroke\", style, ...props };\n  if (shape === \"path\") return <path key={key} {...common} d={geometry} />;\n  if (shape === \"polyline\") return <polyline key={key} {...common} points={geometry} />;\n  return <polygon key={key} {...common} points={geometry} />;\n}\n\nfunction svg(\n  width: string,\n  height: string,\n  viewBox: string,\n  children: ReactNode,\n  motion?: Motion,\n): ReactNode {\n  return (\n    <svg\n      data-part=\"svg\"\n      width={width}\n      height={height}\n      viewBox={viewBox}\n      aria-hidden=\"true\"\n      style={{ width, height, ...(motion ? animate(motion) : {}) }}\n    >\n      {children}\n    </svg>\n  );\n}\n\nconst BOX = (size: string): CSSProperties => ({ width: size, height: size });\n\n/** Every variant, in catalogue order. */\nexport const VARIANT_NAMES = [\n  \"flip-square\",\n  \"morphing-shape\",\n  \"newtons-cradle\",\n  \"spinning-squares\",\n  \"expanding-cross\",\n  \"square-grid\",\n  \"floating-diamonds\",\n  \"pulse-square\",\n  \"pendulum\",\n  \"hexagon-spinner\",\n  \"wandering-cube\",\n  \"hourglass\",\n  \"rotating-triangle\",\n  \"bouncing-square\",\n  \"breathing-square\",\n  \"diamond-grid\",\n  \"square-snake\",\n  \"infinity-path\",\n  \"morphing-infinity\",\n  \"zig-zag-pulse\",\n  \"pumping-heart\",\n  \"heartbeat\",\n  \"spiral-spinner\",\n  \"concentric-squares\",\n  \"rotating-cross\",\n  \"icon-morph\",\n  \"smooth-rounded-square\",\n  \"cube-flip-spring\",\n  \"origami-shape\",\n  \"diamond-rotate-spring\",\n  \"shape-shift-grid\",\n  \"spring-hexagon\",\n  \"elastic-square\",\n  \"minimal-triangle\",\n  \"fluid-diamond\",\n] as const;\n\nexport type VariantName = (typeof VARIANT_NAMES)[number];\n\nexport const VARIANTS: Record<VariantName, Variant> = {\n  \"flip-square\": {\n    root: {},\n    render: () => part(\"s\", \"shape\", square(\"4em\", \"0.75em\"), { name: \"flip\", duration: 2 }),\n  },\n  \"morphing-shape\": {\n    root: {},\n    render: () => part(\"s\", \"shape\", square(\"5em\", \"10%\"), { name: \"morph\", duration: 2 }),\n  },\n  \"newtons-cradle\": {\n    root: { gap: \"0.25em\" },\n    render: () => [\n      part(\n        \"a\",\n        \"shape\",\n        { ...BOX(\"1.5em\"), transformOrigin: \"top\" },\n        {\n          name: \"cradle-a\",\n          duration: 1.5,\n        },\n      ),\n      part(\"b\", \"shape\", BOX(\"1.5em\")),\n      part(\"c\", \"shape\", BOX(\"1.5em\")),\n      part(\n        \"d\",\n        \"shape\",\n        { ...BOX(\"1.5em\"), transformOrigin: \"top\" },\n        {\n          name: \"cradle-b\",\n          duration: 1.5,\n        },\n      ),\n    ],\n  },\n  \"spinning-squares\": {\n    root: BOX(\"5em\"),\n    render: () => [\n      part(\n        \"a\",\n        \"shape\",\n        square(\"2em\", \"0.25em\", { position: \"absolute\", top: 0, left: 0, \"--d\": \"3em\" }),\n        { name: \"trace\", duration: 2 },\n      ),\n      part(\n        \"b\",\n        \"shape\",\n        square(\"2em\", \"0.25em\", {\n          position: \"absolute\",\n          bottom: 0,\n          right: 0,\n          opacity: 0.3,\n          \"--d\": \"-3em\",\n        }),\n        { name: \"trace\", duration: 2 },\n      ),\n    ],\n  },\n  \"expanding-cross\": {\n    root: BOX(\"4em\"),\n    render: () => [\n      part(\n        \"h\",\n        \"shape\",\n        {\n          position: \"absolute\",\n          top: \"calc(50% - 0.25em)\",\n          left: 0,\n          width: \"100%\",\n          height: \"0.5em\",\n        },\n        { name: \"stretch-x\", duration: 1.5 },\n      ),\n      part(\n        \"v\",\n        \"shape\",\n        {\n          position: \"absolute\",\n          left: \"calc(50% - 0.25em)\",\n          top: 0,\n          height: \"100%\",\n          width: \"0.5em\",\n        },\n        { name: \"stretch-y\", duration: 1.5, delay: 0.75 },\n      ),\n    ],\n  },\n  \"square-grid\": {\n    root: { display: \"grid\", gridTemplateColumns: \"repeat(2, auto)\", gap: \"0.75em\" },\n    render: () =>\n      [0, 1, 2, 3].map((index) =>\n        part(index, \"shape\", square(\"2em\", \"0.25em\"), {\n          name: \"shrink\",\n          duration: 1.5,\n          delay: index * 0.2,\n        }),\n      ),\n  },\n  \"floating-diamonds\": {\n    root: { gap: \"1em\" },\n    // The source's rotate-45 is the `rotate` property, which composes outside\n    // Framer's transform, so each diamond bobs along its own rotated axis.\n    render: () =>\n      [0, 1, 2].map((index) =>\n        part(index, \"shape\", square(\"1.5em\", \"0.25em\", { rotate: \"45deg\" }), {\n          name: \"float\",\n          duration: 1,\n          delay: index * 0.2,\n        }),\n      ),\n  },\n  \"pulse-square\": {\n    root: {},\n    render: () =>\n      part(\"s\", \"outline\", square(\"4em\", \"20%\", { borderWidth: \"0.5em\" }), {\n        name: \"pulse\",\n        duration: 1.5,\n      }),\n  },\n  pendulum: {\n    root: { width: \"8em\", height: \"6em\", alignItems: \"flex-start\" },\n    render: () => [\n      part(\"beam\", \"shape\", {\n        position: \"absolute\",\n        top: 0,\n        width: \"100%\",\n        height: \"0.5em\",\n        borderRadius: \"9999px 9999px 0 0\",\n        opacity: 0.2,\n      }),\n      part(\n        \"arm\",\n        \"group\",\n        {\n          position: \"absolute\",\n          top: 0,\n          left: \"calc(50% - 0.25em)\",\n          width: \"0.5em\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          transformOrigin: \"top\",\n        },\n        { name: \"swing\", duration: 1.5 },\n        [\n          part(\"rod\", \"shape\", { width: \"0.5em\", height: \"4em\", borderRadius: 0 }),\n          part(\"bob\", \"shape\", BOX(\"2em\")),\n        ],\n      ),\n    ],\n  },\n  \"hexagon-spinner\": {\n    root: {},\n    render: () =>\n      svg(\"5em\", \"5em\", \"0 0 50 50\", [\n        stroke(\"track\", \"polygon\", HEXAGON, { strokeWidth: 4 }),\n        stroke(\n          \"line\",\n          \"polygon\",\n          HEXAGON,\n          { strokeWidth: 4, strokeLinecap: \"round\", strokeDasharray: 120 },\n          { name: \"dash-120\", duration: 2, ease: \"linear\" },\n        ),\n      ]),\n  },\n  \"wandering-cube\": {\n    root: BOX(\"5em\"),\n    render: () =>\n      part(\"s\", \"shape\", square(\"2em\", \"0.25em\", { position: \"absolute\", top: 0, left: 0 }), {\n        name: \"wander\",\n        duration: 2.5,\n      }),\n  },\n  hourglass: {\n    root: {},\n    render: () =>\n      part(\n        \"glass\",\n        \"group\",\n        {\n          width: \"4em\",\n          height: \"5em\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          alignItems: \"center\",\n          justifyContent: \"space-between\",\n        },\n        { name: \"hourglass\", duration: 3 },\n        [\n          part(\"top\", \"frame\", {\n            width: \"4em\",\n            height: 0,\n            borderStyle: \"solid\",\n            borderWidth: \"2em 2em 0\",\n            borderColor: \"currentColor transparent transparent\",\n          }),\n          part(\"bottom\", \"frame\", {\n            width: \"4em\",\n            height: 0,\n            borderStyle: \"solid\",\n            borderWidth: \"0 2em 2em\",\n            borderColor: \"transparent transparent currentColor\",\n          }),\n        ],\n      ),\n  },\n  \"rotating-triangle\": {\n    root: {},\n    render: () =>\n      svg(\n        \"5em\",\n        \"5em\",\n        \"0 0 50 50\",\n        stroke(\n          \"line\",\n          \"polygon\",\n          TRIANGLE,\n          { strokeWidth: 4, strokeLinejoin: \"round\" },\n          { name: \"spin\", duration: 2, ease: \"linear\" },\n        ),\n      ),\n  },\n  \"bouncing-square\": {\n    root: { width: \"5em\", height: \"6em\", alignItems: \"flex-end\" },\n    render: () => [\n      part(\"shadow\", \"shape\", {\n        position: \"absolute\",\n        bottom: 0,\n        width: \"4em\",\n        height: \"0.5em\",\n        opacity: 0.2,\n        filter: \"blur(0.5em)\",\n      }),\n      part(\"s\", \"shape\", square(\"3em\", \"0.25em\", { transformOrigin: \"bottom\" }), {\n        name: \"hop\",\n        duration: 0.6,\n      }),\n    ],\n  },\n  \"breathing-square\": {\n    root: {},\n    render: () => part(\"s\", \"shape\", square(\"4em\", \"0%\"), { name: \"breathe\", duration: 2 }),\n  },\n  \"diamond-grid\": {\n    root: {},\n    render: () =>\n      part(\n        \"grid\",\n        \"frame\",\n        {\n          display: \"grid\",\n          gridTemplateColumns: \"repeat(2, auto)\",\n          gap: \"1em\",\n          rotate: \"45deg\",\n        },\n        undefined,\n        [0, 1, 2, 3].map((index) =>\n          part(index, \"shape\", square(\"1.5em\", \"0.25em\"), {\n            name: \"shrink\",\n            duration: 1.5,\n            delay: index * 0.2,\n          }),\n        ),\n      ),\n  },\n  \"square-snake\": {\n    root: {\n      ...BOX(\"5em\"),\n      display: \"grid\",\n      gridTemplateColumns: \"repeat(3, 1fr)\",\n      gridTemplateRows: \"repeat(3, 1fr)\",\n      gap: \"0.5em\",\n      // The family root centres its children; these cells are sized by the\n      // grid tracks, so they must stretch into them or they collapse to 0.\n      alignItems: \"stretch\",\n      justifyContent: \"stretch\",\n    },\n    render: () =>\n      Array.from({ length: 9 }, (_, index) =>\n        part(\n          index,\n          \"shape\",\n          { borderRadius: \"0.25em\" },\n          {\n            name: \"flicker\",\n            duration: 1.5,\n            delay: ((index % 3) + Math.floor(index / 3)) * 0.15,\n          },\n        ),\n      ),\n  },\n  \"infinity-path\": {\n    root: {},\n    render: () =>\n      svg(\"6em\", \"3em\", \"0 0 60 30\", [\n        stroke(\"track\", \"path\", INFINITY, { strokeWidth: 4, strokeLinecap: \"round\" }),\n        stroke(\n          \"line\",\n          \"path\",\n          INFINITY,\n          { strokeWidth: 4, strokeLinecap: \"round\", strokeDasharray: 100 },\n          { name: \"dash-100\", duration: 2, ease: \"linear\" },\n        ),\n      ]),\n  },\n  \"morphing-infinity\": {\n    root: { width: \"6em\", height: \"3em\", justifyContent: \"space-between\" },\n    render: () => [\n      part(\n        \"a\",\n        \"outline\",\n        { ...BOX(\"3em\"), borderWidth: \"0.25em\" },\n        {\n          name: \"loop-a\",\n          duration: 2,\n        },\n      ),\n      part(\n        \"b\",\n        \"outline\",\n        { ...BOX(\"3em\"), borderWidth: \"0.25em\", position: \"absolute\", top: 0, left: 0 },\n        {\n          name: \"loop-b\",\n          duration: 2,\n        },\n      ),\n    ],\n  },\n  \"zig-zag-pulse\": {\n    root: {\n      ...BOX(\"6em\"),\n      display: \"grid\",\n      gridTemplateColumns: \"repeat(3, 1fr)\",\n      gridTemplateRows: \"repeat(3, 1fr)\",\n      gap: \"1em\",\n    },\n    render: () =>\n      [\n        [0, 0],\n        [1, 1],\n        [2, 0],\n        [0, 2],\n        [1, 1],\n        [2, 2],\n      ].map(([column = 0, row = 0], index) =>\n        part(\n          index,\n          \"shape\",\n          { ...BOX(\"1.25em\"), gridColumn: column + 1, gridRow: row + 1 },\n          {\n            name: \"fade\",\n            duration: 1.2,\n            delay: index * 0.1,\n          },\n        ),\n      ),\n  },\n  \"pumping-heart\": {\n    root: {},\n    render: () =>\n      svg(\"4em\", \"4em\", \"0 0 24 24\", <path data-part=\"fill\" d={HEART} />, {\n        name: \"pump\",\n        duration: 1.5,\n      }),\n  },\n  heartbeat: {\n    root: {},\n    render: () =>\n      svg(\n        \"8em\",\n        \"4em\",\n        \"0 0 64 32\",\n        stroke(\n          \"line\",\n          \"polyline\",\n          \"0,16 16,16 24,4 32,28 40,16 64,16\",\n          {\n            strokeWidth: 2,\n            strokeLinecap: \"round\",\n            strokeLinejoin: \"round\",\n            strokeDasharray: 100,\n          },\n          { name: \"dash-100\", duration: 2, ease: \"linear\" },\n        ),\n      ),\n  },\n  \"spiral-spinner\": {\n    root: {},\n    render: () =>\n      part(\n        \"s\",\n        \"outline\",\n        { ...BOX(\"5em\"), borderWidth: \"0.375em\", borderTopColor: \"transparent\" },\n        { name: \"spiral\", duration: 1.5 },\n      ),\n  },\n  \"concentric-squares\": {\n    root: BOX(\"6em\"),\n    render: () => [\n      part(\n        \"outer\",\n        \"outline\",\n        square(\"6em\", \"0.25em\", { position: \"absolute\", borderWidth: \"0.25em\" }),\n        {\n          name: \"nest-outer\",\n          duration: 2,\n        },\n      ),\n      part(\n        \"inner\",\n        \"outline\",\n        square(\"3em\", \"0.25em\", { position: \"absolute\", borderWidth: \"0.25em\", opacity: 0.6 }),\n        { name: \"nest-inner\", duration: 2 },\n      ),\n    ],\n  },\n  \"rotating-cross\": {\n    root: {},\n    render: () =>\n      part(\"cross\", \"group\", BOX(\"4em\"), { name: \"half-turn\", duration: 0.8 }, [\n        part(\"h\", \"shape\", {\n          position: \"absolute\",\n          top: \"calc(50% - 0.375em)\",\n          width: \"100%\",\n          height: \"0.75em\",\n          borderRadius: \"0.25em\",\n        }),\n        part(\"v\", \"shape\", {\n          position: \"absolute\",\n          left: \"calc(50% - 0.375em)\",\n          height: \"100%\",\n          width: \"0.75em\",\n          borderRadius: \"0.25em\",\n        }),\n      ]),\n  },\n  \"icon-morph\": {\n    root: {},\n    render: () => part(\"s\", \"shape\", square(\"4em\", \"20%\"), { name: \"icon\", duration: 2 }),\n  },\n  \"smooth-rounded-square\": {\n    root: {},\n    render: () =>\n      part(\"s\", \"outline\", square(\"5em\", \"10%\", { borderWidth: \"0.375em\" }), {\n        name: \"round\",\n        duration: 2,\n      }),\n  },\n  \"cube-flip-spring\": {\n    root: {},\n    render: () =>\n      part(\"s\", \"shape\", square(\"4em\", \"1em\"), { name: \"cube\", duration: 2, ease: OVERSHOOT }),\n  },\n  \"origami-shape\": {\n    root: BOX(\"5em\"),\n    render: () => [\n      part(\n        \"a\",\n        \"shape\",\n        square(\"2.5em\", \"0.75em 0 0 0\", {\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          transformOrigin: \"right\",\n        }),\n        { name: \"fold\", duration: 2 },\n      ),\n      part(\n        \"b\",\n        \"shape\",\n        square(\"2.5em\", \"0 0 0.75em 0\", {\n          position: \"absolute\",\n          bottom: 0,\n          right: 0,\n          transformOrigin: \"left\",\n          opacity: 0.6,\n        }),\n        { name: \"fold\", duration: 2 },\n      ),\n    ],\n  },\n  \"diamond-rotate-spring\": {\n    root: {},\n    render: () =>\n      part(\"s\", \"shape\", square(\"4em\", \"0.25em\"), {\n        name: \"diamond\",\n        duration: 2,\n        ease: OVERSHOOT,\n      }),\n  },\n  \"shape-shift-grid\": {\n    root: {\n      ...BOX(\"4em\"),\n      display: \"grid\",\n      gridTemplateColumns: \"repeat(2, 1fr)\",\n      gridTemplateRows: \"repeat(2, 1fr)\",\n      gap: \"0.5em\",\n    },\n    render: () =>\n      [0, 1, 2, 3].map((index) =>\n        part(\n          index,\n          \"shape\",\n          { borderRadius: \"10%\" },\n          {\n            name: \"shift\",\n            duration: 1.5,\n            delay: index * 0.1,\n          },\n        ),\n      ),\n  },\n  \"spring-hexagon\": {\n    root: {},\n    render: () =>\n      svg(\"5em\", \"5em\", \"0 0 50 50\", <polygon data-part=\"fill\" points={HEXAGON} />, {\n        name: \"hex\",\n        duration: 2,\n        ease: OVERSHOOT,\n      }),\n  },\n  \"elastic-square\": {\n    root: {\n      ...BOX(\"6em\"),\n      alignItems: \"flex-end\",\n      borderBottom: \"0.25em solid color-mix(in oklab, currentColor 20%, transparent)\",\n    },\n    render: () =>\n      part(\"s\", \"shape\", square(\"3em\", \"0.25em\", { transformOrigin: \"bottom\" }), {\n        name: \"elastic\",\n        duration: 0.8,\n      }),\n  },\n  \"minimal-triangle\": {\n    root: {},\n    render: () =>\n      svg(\"5em\", \"5em\", \"0 0 50 50\", [\n        stroke(\"track\", \"polygon\", TRIANGLE, { strokeWidth: 3 }),\n        stroke(\n          \"line\",\n          \"polygon\",\n          TRIANGLE,\n          { strokeWidth: 3, strokeDasharray: 120 },\n          { name: \"dash-tri\", duration: 2 },\n        ),\n      ]),\n  },\n  \"fluid-diamond\": {\n    root: {},\n    render: () => part(\"s\", \"shape\", square(\"3em\", \"0.25em\"), { name: \"fluid\", duration: 1.5 }),\n  },\n};\n"],"mappings":"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"}

package/dist/components/shape-loader/shape-loader.d.ts

@@ -0,0 +1,26 @@
+import { VariantName } from "./shape-loader-variants.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/shape-loader/shape-loader.d.ts
+type ShapeLoaderVariant = VariantName;
+/** Every variant, in catalogue order. Stories and tests iterate this. */
+declare const shapeLoaderVariantNames: ("heartbeat" | "flip-square" | "morphing-shape" | "newtons-cradle" | "spinning-squares" | "expanding-cross" | "square-grid" | "floating-diamonds" | "pulse-square" | "pendulum" | "hexagon-spinner" | "wandering-cube" | "hourglass" | "rotating-triangle" | "bouncing-square" | "breathing-square" | "diamond-grid" | "square-snake" | "infinity-path" | "morphing-infinity" | "zig-zag-pulse" | "pumping-heart" | "spiral-spinner" | "concentric-squares" | "rotating-cross" | "icon-morph" | "smooth-rounded-square" | "cube-flip-spring" | "origami-shape" | "diamond-rotate-spring" | "shape-shift-grid" | "spring-hexagon" | "elastic-square" | "minimal-triangle" | "fluid-diamond")[];
+declare const shapeLoaderVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ShapeLoaderProps extends Omit<ComponentPropsWithRef<"span">, "children">, VariantProps<typeof shapeLoaderVariants> {
+  /** Which animation to play. */
+  variant?: ShapeLoaderVariant;
+  /**
+   * Announced to assistive technology while the loader is visible.
+   *
+   * Omit it when the loader sits inside something that already reports its
+   * busy state — announcing twice is worse than not announcing at all.
+   */
+  label?: string;
+}
+/** An indeterminate loading indicator made of geometric shapes, in 35 motions. */
+declare function ShapeLoader({ className, size, variant, label, style, ...props }: ShapeLoaderProps): import("react").JSX.Element;
+//#endregion
+export { ShapeLoader, ShapeLoaderProps, ShapeLoaderVariant, shapeLoaderVariantNames, shapeLoaderVariants };
+//# sourceMappingURL=shape-loader.d.ts.map

package/dist/components/shape-loader/shape-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-loader.d.ts","names":[],"sources":["../../../src/components/shape-loader/shape-loader.tsx"],"mappings":";;;;KA4EY,qBAAqB;;cAGpB;cAEP,sBAAmB;;6CAYvB;UAEe,yBAEb,KAAK,4CACL,oBAAoB;;EAEtB,UAAU;;;;;;;EAOV;;;iBAIc,cACd,WACA,MACA,SACA,OACA,UACG,SACF,mCAAgB,IAAA"}

package/dist/components/shape-loader/shape-loader.js

@@ -0,0 +1,99 @@
+import { cn } from "../../lib/utils.js";
+import { PREFIX, VARIANTS, VARIANT_NAMES } from "./shape-loader-variants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/shape-loader/shape-loader.tsx
+/** The keyframes every variant draws on. Stops are spread evenly, as Framer spreads them. */
+const KEYFRAMES = `
+@keyframes ${PREFIX}-flip{0%{transform:rotateX(0) rotateY(0)}33.333%{transform:rotateX(180deg) rotateY(0)}66.667%{transform:rotateX(180deg) rotateY(180deg)}100%{transform:rotateX(0) rotateY(180deg)}}
+@keyframes ${PREFIX}-morph{0%{border-radius:10%;transform:scale(1) rotate(0)}50%{border-radius:50%;transform:scale(.8) rotate(90deg)}100%{border-radius:10%;transform:scale(1) rotate(180deg)}}
+@keyframes ${PREFIX}-cradle-a{0%,100%{transform:rotate(25deg)}20%,40%,60%,80%{transform:rotate(0)}}
+@keyframes ${PREFIX}-cradle-b{0%,20%,40%,80%,100%{transform:rotate(0)}60%{transform:rotate(-25deg)}}
+@keyframes ${PREFIX}-trace{0%,100%{transform:translate(0,0)}25%{transform:translate(var(--d),0)}50%{transform:translate(var(--d),var(--d))}75%{transform:translate(0,var(--d))}}
+@keyframes ${PREFIX}-wander{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(3em,0) rotate(-90deg)}50%{transform:translate(3em,3em) rotate(-180deg)}75%{transform:translate(0,3em) rotate(-270deg)}100%{transform:translate(0,0) rotate(-360deg)}}
+@keyframes ${PREFIX}-stretch-x{0%,100%{transform:scaleX(.2)}50%{transform:scaleX(1)}}
+@keyframes ${PREFIX}-stretch-y{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
+@keyframes ${PREFIX}-shrink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.3}}
+@keyframes ${PREFIX}-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.25em)}}
+@keyframes ${PREFIX}-pulse{0%,100%{transform:scale(1);opacity:1;border-radius:20%}50%{transform:scale(1.2);opacity:.3;border-radius:50%}}
+@keyframes ${PREFIX}-swing{0%,100%{transform:rotate(-45deg)}50%{transform:rotate(45deg)}}
+@keyframes ${PREFIX}-dash-120{from{stroke-dashoffset:120}to{stroke-dashoffset:-120}}
+@keyframes ${PREFIX}-dash-100{from{stroke-dashoffset:100}to{stroke-dashoffset:-100}}
+@keyframes ${PREFIX}-dash-tri{0%{stroke-dashoffset:120}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-120}}
+@keyframes ${PREFIX}-hourglass{0%{transform:rotate(0)}25%,50%{transform:rotate(180deg)}75%,100%{transform:rotate(360deg)}}
+@keyframes ${PREFIX}-spin{to{transform:rotate(360deg)}}
+@keyframes ${PREFIX}-hop{0%,100%{transform:translateY(0) scale(1.2,.8)}50%{transform:translateY(-3em) scale(.9,1.1)}}
+@keyframes ${PREFIX}-elastic{0%,100%{transform:translateY(0) scale(1.3,.7)}50%{transform:translateY(-2.5em) scale(.8,1.2)}}
+@keyframes ${PREFIX}-breathe{0%{transform:scale(1) rotate(0);border-radius:0%}50%{transform:scale(1.2) rotate(90deg);border-radius:50%}100%{transform:scale(1) rotate(180deg);border-radius:0%}}
+@keyframes ${PREFIX}-flicker{0%,100%{opacity:.1}50%{opacity:1}}
+@keyframes ${PREFIX}-fade{0%,100%{opacity:.2}50%{opacity:1}}
+@keyframes ${PREFIX}-loop-a{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(3em) scale(.5)}}
+@keyframes ${PREFIX}-loop-b{0%,100%{transform:translateX(3em) scale(.5)}50%{transform:translateX(0) scale(1)}}
+@keyframes ${PREFIX}-pump{0%,50%,100%{transform:scale(1)}25%,75%{transform:scale(1.25)}}
+@keyframes ${PREFIX}-spiral{0%{rotate:0deg;scale:1}50%{scale:.8}100%{rotate:360deg;scale:1}}
+@keyframes ${PREFIX}-nest-outer{0%{rotate:0deg;scale:1}33.333%{scale:1}50%{rotate:90deg}66.667%{scale:.8}100%{rotate:90deg;scale:1}}
+@keyframes ${PREFIX}-nest-inner{0%{rotate:0deg;scale:1}33.333%{scale:1}50%{rotate:-90deg}66.667%{scale:1.2}100%{rotate:-90deg;scale:1}}
+@keyframes ${PREFIX}-half-turn{from{transform:rotate(0)}to{transform:rotate(180deg)}}
+@keyframes ${PREFIX}-icon{0%{border-radius:20%;transform:rotate(0)}33.333%{border-radius:50%;transform:rotate(90deg)}66.667%{border-radius:50%;transform:rotate(180deg)}100%{border-radius:20%;transform:rotate(270deg)}}
+@keyframes ${PREFIX}-round{0%,100%{border-radius:10%}50%{border-radius:50%}}
+@keyframes ${PREFIX}-cube{0%{transform:rotateX(0) rotateY(0)}50%{transform:rotateX(180deg) rotateY(0)}100%{transform:rotateX(180deg) rotateY(180deg)}}
+@keyframes ${PREFIX}-fold{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}
+@keyframes ${PREFIX}-diamond{0%{transform:rotate(45deg)}33.333%{transform:rotate(135deg)}66.667%{transform:rotate(225deg)}100%{transform:rotate(315deg)}}
+@keyframes ${PREFIX}-shift{0%,100%{border-radius:10%;transform:scale(1)}50%{border-radius:50%;transform:scale(.8)}}
+@keyframes ${PREFIX}-hex{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(60deg)}100%{transform:scale(1) rotate(60deg)}}
+@keyframes ${PREFIX}-fluid{0%,100%{transform:scale(1,1) rotate(45deg)}50%{transform:scale(1.5,.5) rotate(45deg)}}
+`;
+const STYLES = `
+.${PREFIX}{direction:ltr;position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}
+.${PREFIX} [data-part]{display:block;box-sizing:border-box;flex-shrink:0;border-radius:9999px;background:currentColor;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--dur);animation-delay:var(--delay,0s)}
+.${PREFIX} [data-part=outline]{background:transparent;border-style:solid;border-color:currentColor}
+.${PREFIX} [data-part=group]{background:transparent;border-radius:0}
+.${PREFIX} [data-part=frame]{background:transparent;border-radius:0;animation:none}
+.${PREFIX} [data-part=svg]{background:transparent;border-radius:0;overflow:visible;transform-origin:center}
+.${PREFIX} [data-part=stroke]{background:none;border-radius:0;fill:none;stroke:currentColor;transform-box:fill-box;transform-origin:center}
+.${PREFIX} [data-part=fill]{background:none;border-radius:0;fill:currentColor;animation:none}
+${KEYFRAMES}`;
+/** Every variant, in catalogue order. Stories and tests iterate this. */
+const shapeLoaderVariantNames = [...VARIANT_NAMES];
+const shapeLoaderVariants = cva("", {
+	variants: { size: {
+		sm: "text-[0.25rem]",
+		md: "text-[0.375rem]",
+		lg: "text-[0.5rem]",
+		xl: "text-[0.625rem]"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** An indeterminate loading indicator made of geometric shapes, in 35 motions. */
+function ShapeLoader({ className, size, variant = "flip-square", label, style, ...props }) {
+	const spec = VARIANTS[variant];
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}),
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "shape-loader",
+			"data-variant": variant,
+			"data-motion": "indicator",
+			className: cn(PREFIX, shapeLoaderVariants({ size }), className),
+			style: {
+				...spec.root,
+				...style
+			},
+			...props,
+			children: spec.render()
+		}),
+		label ? /* @__PURE__ */ jsx("span", {
+			role: "status",
+			className: "sr-only",
+			children: label
+		}) : null
+	] });
+}
+//#endregion
+export { ShapeLoader, shapeLoaderVariantNames, shapeLoaderVariants };
+
+//# sourceMappingURL=shape-loader.js.map

package/dist/components/shape-loader/shape-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape-loader.js","names":[],"sources":["../../../src/components/shape-loader/shape-loader.tsx"],"sourcesContent":["// Ported from amicro \"Geometric Shapes\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport {\n  PREFIX,\n  VARIANT_NAMES,\n  VARIANTS,\n  type Variant,\n  type VariantName,\n} from \"./shape-loader-variants\";\n\n/*\n * Follows the loader family shape (ADR 0014), as DotsLoader does: geometry in\n * `em`, colour from `currentColor`, keyframes hoisted with the component, and\n * every duration and delay scaled by --motion-scale-indicator.\n *\n * Parts pick a base look with data-part: `shape` is a filled block, `outline`\n * a bordered one, `group` a transparent layer that moves its children, `frame`\n * a transparent layer that never moves, and `svg`/`stroke`/`fill` draw with\n * the current colour. Squares set their own radius inline.\n */\n/** The keyframes every variant draws on. Stops are spread evenly, as Framer spreads them. */\nconst KEYFRAMES = `\n@keyframes ${PREFIX}-flip{0%{transform:rotateX(0) rotateY(0)}33.333%{transform:rotateX(180deg) rotateY(0)}66.667%{transform:rotateX(180deg) rotateY(180deg)}100%{transform:rotateX(0) rotateY(180deg)}}\n@keyframes ${PREFIX}-morph{0%{border-radius:10%;transform:scale(1) rotate(0)}50%{border-radius:50%;transform:scale(.8) rotate(90deg)}100%{border-radius:10%;transform:scale(1) rotate(180deg)}}\n@keyframes ${PREFIX}-cradle-a{0%,100%{transform:rotate(25deg)}20%,40%,60%,80%{transform:rotate(0)}}\n@keyframes ${PREFIX}-cradle-b{0%,20%,40%,80%,100%{transform:rotate(0)}60%{transform:rotate(-25deg)}}\n@keyframes ${PREFIX}-trace{0%,100%{transform:translate(0,0)}25%{transform:translate(var(--d),0)}50%{transform:translate(var(--d),var(--d))}75%{transform:translate(0,var(--d))}}\n@keyframes ${PREFIX}-wander{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(3em,0) rotate(-90deg)}50%{transform:translate(3em,3em) rotate(-180deg)}75%{transform:translate(0,3em) rotate(-270deg)}100%{transform:translate(0,0) rotate(-360deg)}}\n@keyframes ${PREFIX}-stretch-x{0%,100%{transform:scaleX(.2)}50%{transform:scaleX(1)}}\n@keyframes ${PREFIX}-stretch-y{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}\n@keyframes ${PREFIX}-shrink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.5);opacity:.3}}\n@keyframes ${PREFIX}-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.25em)}}\n@keyframes ${PREFIX}-pulse{0%,100%{transform:scale(1);opacity:1;border-radius:20%}50%{transform:scale(1.2);opacity:.3;border-radius:50%}}\n@keyframes ${PREFIX}-swing{0%,100%{transform:rotate(-45deg)}50%{transform:rotate(45deg)}}\n@keyframes ${PREFIX}-dash-120{from{stroke-dashoffset:120}to{stroke-dashoffset:-120}}\n@keyframes ${PREFIX}-dash-100{from{stroke-dashoffset:100}to{stroke-dashoffset:-100}}\n@keyframes ${PREFIX}-dash-tri{0%{stroke-dashoffset:120}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-120}}\n@keyframes ${PREFIX}-hourglass{0%{transform:rotate(0)}25%,50%{transform:rotate(180deg)}75%,100%{transform:rotate(360deg)}}\n@keyframes ${PREFIX}-spin{to{transform:rotate(360deg)}}\n@keyframes ${PREFIX}-hop{0%,100%{transform:translateY(0) scale(1.2,.8)}50%{transform:translateY(-3em) scale(.9,1.1)}}\n@keyframes ${PREFIX}-elastic{0%,100%{transform:translateY(0) scale(1.3,.7)}50%{transform:translateY(-2.5em) scale(.8,1.2)}}\n@keyframes ${PREFIX}-breathe{0%{transform:scale(1) rotate(0);border-radius:0%}50%{transform:scale(1.2) rotate(90deg);border-radius:50%}100%{transform:scale(1) rotate(180deg);border-radius:0%}}\n@keyframes ${PREFIX}-flicker{0%,100%{opacity:.1}50%{opacity:1}}\n@keyframes ${PREFIX}-fade{0%,100%{opacity:.2}50%{opacity:1}}\n@keyframes ${PREFIX}-loop-a{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(3em) scale(.5)}}\n@keyframes ${PREFIX}-loop-b{0%,100%{transform:translateX(3em) scale(.5)}50%{transform:translateX(0) scale(1)}}\n@keyframes ${PREFIX}-pump{0%,50%,100%{transform:scale(1)}25%,75%{transform:scale(1.25)}}\n@keyframes ${PREFIX}-spiral{0%{rotate:0deg;scale:1}50%{scale:.8}100%{rotate:360deg;scale:1}}\n@keyframes ${PREFIX}-nest-outer{0%{rotate:0deg;scale:1}33.333%{scale:1}50%{rotate:90deg}66.667%{scale:.8}100%{rotate:90deg;scale:1}}\n@keyframes ${PREFIX}-nest-inner{0%{rotate:0deg;scale:1}33.333%{scale:1}50%{rotate:-90deg}66.667%{scale:1.2}100%{rotate:-90deg;scale:1}}\n@keyframes ${PREFIX}-half-turn{from{transform:rotate(0)}to{transform:rotate(180deg)}}\n@keyframes ${PREFIX}-icon{0%{border-radius:20%;transform:rotate(0)}33.333%{border-radius:50%;transform:rotate(90deg)}66.667%{border-radius:50%;transform:rotate(180deg)}100%{border-radius:20%;transform:rotate(270deg)}}\n@keyframes ${PREFIX}-round{0%,100%{border-radius:10%}50%{border-radius:50%}}\n@keyframes ${PREFIX}-cube{0%{transform:rotateX(0) rotateY(0)}50%{transform:rotateX(180deg) rotateY(0)}100%{transform:rotateX(180deg) rotateY(180deg)}}\n@keyframes ${PREFIX}-fold{0%,100%{transform:rotateY(0)}50%{transform:rotateY(180deg)}}\n@keyframes ${PREFIX}-diamond{0%{transform:rotate(45deg)}33.333%{transform:rotate(135deg)}66.667%{transform:rotate(225deg)}100%{transform:rotate(315deg)}}\n@keyframes ${PREFIX}-shift{0%,100%{border-radius:10%;transform:scale(1)}50%{border-radius:50%;transform:scale(.8)}}\n@keyframes ${PREFIX}-hex{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(60deg)}100%{transform:scale(1) rotate(60deg)}}\n@keyframes ${PREFIX}-fluid{0%,100%{transform:scale(1,1) rotate(45deg)}50%{transform:scale(1.5,.5) rotate(45deg)}}\n`;\n\nconst STYLES = `\n.${PREFIX}{direction:ltr;position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:inherit}\n.${PREFIX} [data-part]{display:block;box-sizing:border-box;flex-shrink:0;border-radius:9999px;background:currentColor;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--dur);animation-delay:var(--delay,0s)}\n.${PREFIX} [data-part=outline]{background:transparent;border-style:solid;border-color:currentColor}\n.${PREFIX} [data-part=group]{background:transparent;border-radius:0}\n.${PREFIX} [data-part=frame]{background:transparent;border-radius:0;animation:none}\n.${PREFIX} [data-part=svg]{background:transparent;border-radius:0;overflow:visible;transform-origin:center}\n.${PREFIX} [data-part=stroke]{background:none;border-radius:0;fill:none;stroke:currentColor;transform-box:fill-box;transform-origin:center}\n.${PREFIX} [data-part=fill]{background:none;border-radius:0;fill:currentColor;animation:none}\n${KEYFRAMES}`;\n\nexport type ShapeLoaderVariant = VariantName;\n\n/** Every variant, in catalogue order. Stories and tests iterate this. */\nexport const shapeLoaderVariantNames = [...VARIANT_NAMES];\n\nconst shapeLoaderVariants = cva(\"\", {\n  variants: {\n    size: {\n      sm: \"text-[0.25rem]\",\n      md: \"text-[0.375rem]\",\n      lg: \"text-[0.5rem]\",\n      xl: \"text-[0.625rem]\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface ShapeLoaderProps\n  extends\n    Omit<ComponentPropsWithRef<\"span\">, \"children\">,\n    VariantProps<typeof shapeLoaderVariants> {\n  /** Which animation to play. */\n  variant?: ShapeLoaderVariant;\n  /**\n   * Announced to assistive technology while the loader is visible.\n   *\n   * Omit it when the loader sits inside something that already reports its\n   * busy state — announcing twice is worse than not announcing at all.\n   */\n  label?: string;\n}\n\n/** An indeterminate loading indicator made of geometric shapes, in 35 motions. */\nexport function ShapeLoader({\n  className,\n  size,\n  variant = \"flip-square\",\n  label,\n  style,\n  ...props\n}: ShapeLoaderProps) {\n  const spec: Variant = VARIANTS[variant];\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"shape-loader\"\n        data-variant={variant}\n        // Exempt from the reduced-motion blanket: a loader that stops says the\n        // application has hung. It is slowed instead — see ADR 0014.\n        data-motion=\"indicator\"\n        className={cn(PREFIX, shapeLoaderVariants({ size }), className)}\n        style={{ ...spec.root, ...style }}\n        {...props}\n      >\n        {spec.render()}\n      </span>\n      {label ? (\n        <span role=\"status\" className=\"sr-only\">\n          {label}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport { shapeLoaderVariants };\n"],"mappings":";;;;;;AAyBA,MAAM,YAAY;aACL,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;aACP,OAAO;;AAGpB,MAAM,SAAS;GACZ,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;GACP,OAAO;EACR;;AAKF,MAAa,0BAA0B,CAAC,GAAG,aAAa;AAExD,MAAM,sBAAsB,IAAI,IAAI;CAClC,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAkBD,SAAgB,YAAY,EAC1B,WACA,MACA,UAAU,eACV,OACA,OACA,GAAG,SACgB;CACnB,MAAM,OAAgB,SAAS;CAE/B,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,SAAD;GAAO,MAAM;GAAQ,YAAW;GAC7B,UAAA;EACI,CAAA;EACP,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,gBAAc;GAGd,eAAY;GACZ,WAAW,GAAG,QAAQ,oBAAoB,EAAE,KAAK,CAAC,GAAG,SAAS;GAC9D,OAAO;IAAE,GAAG,KAAK;IAAM,GAAG;GAAM;GAChC,GAAI;GAEH,UAAA,KAAK,OAAO;EACT,CAAA;EACL,QACC,oBAAC,QAAD;GAAM,MAAK;GAAS,WAAU;GAC3B,UAAA;EACG,CAAA,IACJ;CACJ,EAAA,CAAA;AAEN"}

package/dist/components/sheet/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["class-variance-authority", "radix-ui"],
 	registryDependencies: [],
 	files: ["sheet.tsx"],
-	a11y: "Modal, with the same focus trapping and restoration as Dialog. Always render a SheetTitle. For a side navigation sheet, put a nav landmark inside rather than relying on placement to convey the role."
+	a11y: "Modal, with the same focus trapping and restoration as Dialog. Always render a SheetTitle. For a side navigation sheet, put a nav landmark inside rather than relying on placement to convey the role. The optional section stagger stops under reduced motion."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/sheet/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"sheet\",\n  title: \"Sheet\",\n  description: \"A panel that enters from an edge of the viewport for secondary content.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"sheet.tsx\"],\n  a11y:\n    \"Modal, with the same focus trapping and restoration as Dialog. Always render a SheetTitle. \" +\n    \"For a side navigation sheet, put a nav landmark inside rather than relying on placement \" +\n    \"to convey the role.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,WAAW;CACnB,MACE;AAGJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/sheet/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"sheet\",\n  title: \"Sheet\",\n  description: \"A panel that enters from an edge of the viewport for secondary content.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"sheet.tsx\"],\n  a11y:\n    \"Modal, with the same focus trapping and restoration as Dialog. Always render a SheetTitle. \" +\n    \"For a side navigation sheet, put a nav landmark inside rather than relying on placement \" +\n    \"to convey the role. The optional section stagger stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,WAAW;CACnB,MACE;AAGJ,CAAC"}

package/dist/components/sheet/sheet.d.ts

@@ -16,12 +16,20 @@ declare const SheetPortal: import("react").FC<Dialog.DialogPortalProps>;
 declare const SheetClose: import("react").ForwardRefExoticComponent<Dialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare function SheetOverlay({ className, ...props }: ComponentPropsWithRef<typeof Dialog.Overlay>): import("react").JSX.Element;
 declare const sheetVariants: (props?: ({
-  side?: "top" | "bottom" | "left" | "right" | null | undefined;
+  side?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SheetContentProps extends ComponentPropsWithRef<typeof Dialog.Content>, VariantProps<typeof sheetVariants> {
   showCloseButton?: boolean;
+  /**
+   * How the content arrives. `default` slides in as one piece. `spring` slides
+   * the panel the same way, then brings its sections — header, body, footer —
+   * in one after another. The panel itself never overshoots: a sheet that
+   * bounced past its edge would lift off the side it is attached to. Stops
+   * under reduced motion.
+   */
+  animation?: "default" | "spring";
 }
-declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetContentProps): import("react").JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, animation, ...props }: SheetContentProps): import("react").JSX.Element;
 declare function SheetHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 declare function SheetFooter({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 declare function SheetTitle({ className, ...props }: ComponentPropsWithRef<typeof Dialog.Title>): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"sheet.d.ts","names":[],"sources":["../../../src/components/sheet/sheet.tsx"],"mappings":";;;;;;;;;;;;cAiBa,uBAAK,GAAA,OAAA;cACL,8BAAY,0BAAA,OAAA,qCAAA,cAAA;cACZ,6BAAW,GAAA,OAAA;cACX,4BAAU,0BAAA,OAAA,mCAAA,cAAA;iBAEP,eACd,cACG,SACF,6BAA6B,OAAe,2BAAQ,IAAA;cAcjD,gBAAa;;6CAoBlB;UAEgB,0BAEb,6BAA6B,OAAe,UAC5C,oBAAoB;EACtB;;iBAGc,eACd,WACA,UACA,MACA,oBACG,SACF,oCAAiB,IAAA;iBAoCJ,cAAc,cAAc,SAAS,+CAA4B,IAAA;iBAUjE,cAAc,cAAc,SAAS,+CAA4B,IAAA;iBAajE,aACd,cACG,SACF,6BAA6B,OAAe,yBAAM,IAAA;iBAUrC,mBACd,cACG,SACF,6BAA6B,OAAe,+BAAY,IAAA"}
+{"version":3,"file":"sheet.d.ts","names":[],"sources":["../../../src/components/sheet/sheet.tsx"],"mappings":";;;;;;;;;;;;cAkBa,uBAAK,GAAA,OAAA;cACL,8BAAY,0BAAA,OAAA,qCAAA,cAAA;cACZ,6BAAW,GAAA,OAAA;cACX,4BAAU,0BAAA,OAAA,mCAAA,cAAA;iBAEP,eACd,cACG,SACF,6BAA6B,OAAe,2BAAQ,IAAA;cAcjD,gBAAa;;6CAwBlB;UAwBgB,0BAEb,6BAA6B,OAAe,UAC5C,oBAAoB;EACtB;;;;;;;;EAQA;;iBAGc,eACd,WACA,UACA,MACA,iBACA,cACG,SACF,oCAAiB,IAAA;iBA8CJ,cAAc,cAAc,SAAS,+CAA4B,IAAA;iBAUjE,cAAc,cAAc,SAAS,+CAA4B,IAAA;iBAajE,aACd,cACG,SACF,6BAA6B,OAAe,yBAAM,IAAA;iBAUrC,mBACd,cACG,SACF,6BAA6B,OAAe,+BAAY,IAAA"}

package/dist/components/sheet/sheet.js

@@ -2,7 +2,7 @@
 import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { Dialog } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/sheet/sheet.tsx
 /**
@@ -33,15 +33,34 @@ const sheetVariants = cva(cn("fixed z-[var(--z-drawer)] flex flex-col gap-4 bg-c
 	} },
 	defaultVariants: { side: "right" }
 });
-function SheetContent({ className, children, side, showCloseButton = true, ...props }) {
-	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
+const PREFIX = "dowel-sheet";
+/** Sections start once the panel is mostly in, then follow 50ms apart. */
+const STAGGER_BASE_MS = 120;
+const STAGGER_STEP_MS = 50;
+const STAGGERED = 6;
+const SPRING_CHILD = `[data-slot=sheet-content][data-animation=spring][data-state=open]>:not([data-slot=sheet-close])`;
+const delay = (index) => `calc(${String(STAGGER_BASE_MS + index * STAGGER_STEP_MS)}ms * var(--motion-scale))`;
+const STYLES = `
+@keyframes ${PREFIX}-section-in{from{opacity:0;transform:translateY(6px)}}
+${SPRING_CHILD}{animation:${PREFIX}-section-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both;animation-delay:${delay(0)}}
+${Array.from({ length: 5 }, (_, i) => `${SPRING_CHILD}:nth-child(${String(i + 2)}){animation-delay:${delay(i + 1)}}`).join("\n")}
+${SPRING_CHILD}:nth-child(n+${String(7)}){animation-delay:${delay(STAGGERED)}}
+`;
+function SheetContent({ className, children, side, showCloseButton = true, animation = "default", ...props }) {
+	const spring = animation === "spring";
+	return /* @__PURE__ */ jsxs(Fragment, { children: [spring ? /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}) : null, /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
 		"data-slot": "sheet-content",
+		"data-animation": spring ? "spring" : void 0,
 		className: cn(sheetVariants({ side }), className),
 		...props,
 		children: [children, showCloseButton ? /* @__PURE__ */ jsx(Dialog.Close, {
 			"data-slot": "sheet-close",
 			"aria-label": "Close",
-			className: cn("absolute top-4 right-4 grid size-7 place-items-center rounded-md text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground", "[&_svg]:size-4", focusRing),
+			className: cn("absolute end-4 top-4 grid size-7 place-items-center rounded-md text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground", "[&_svg]:size-4", focusRing),
 			children: /* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 24 24",
 				fill: "none",
@@ -54,12 +73,12 @@ function SheetContent({ className, children, side, showCloseButton = true, ...pr
 				})
 			})
 		}) : null]
-	})] });
+	})] })] });
 }
 function SheetHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "sheet-header",
-		className: cn("flex flex-col gap-1.5 pr-8 text-left", className),
+		className: cn("flex flex-col gap-1.5 pe-8 text-start", className),
 		...props
 	});
 }

package/dist/components/sheet/sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../../src/components/sheet/sheet.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Dialog as SheetPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A panel that enters from an edge of the viewport.\n *\n * Built on the same modal primitive as Dialog, so focus management, Escape\n * handling and page inerting are identical; only the placement and motion\n * differ. Reach for Sheet when the content is a secondary surface — filters,\n * details, navigation — rather than a decision that must be answered.\n */\nexport const Sheet = SheetPrimitive.Root;\nexport const SheetTrigger = SheetPrimitive.Trigger;\nexport const SheetPortal = SheetPrimitive.Portal;\nexport const SheetClose = SheetPrimitive.Close;\n\nexport function SheetOverlay({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-[var(--z-overlay)] bg-overlay\",\n        \"data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst sheetVariants = cva(\n  cn(\n    \"fixed z-[var(--z-drawer)] flex flex-col gap-4 bg-card p-6 text-card-foreground shadow-xl\",\n    \"data-[state=closed]:animate-slide-out data-[state=open]:animate-slide-in\",\n  ),\n  {\n    variants: {\n      // --slide-x/--slide-y feed the shared slide keyframes, so all four sides\n      // reuse one animation pair instead of eight bespoke keyframes.\n      side: {\n        top: \"inset-x-0 top-0 border-b [--slide-y:-100%]\",\n        bottom: \"inset-x-0 bottom-0 border-t [--slide-y:100%]\",\n        left: \"inset-y-0 left-0 h-full w-3/4 max-w-sm border-r [--slide-x:-100%]\",\n        right: \"inset-y-0 right-0 h-full w-3/4 max-w-sm border-l [--slide-x:100%]\",\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  },\n);\n\nexport interface SheetContentProps\n  extends\n    ComponentPropsWithRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {\n  showCloseButton?: boolean;\n}\n\nexport function SheetContent({\n  className,\n  children,\n  side,\n  showCloseButton = true,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(sheetVariants({ side }), className)}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            aria-label=\"Close\"\n            className={cn(\n              \"absolute top-4 right-4 grid size-7 place-items-center rounded-md text-muted-foreground\",\n              \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n              \"[&_svg]:size-4\",\n              focusRing,\n            )}\n          >\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n              <path\n                d=\"m6 6 12 12M18 6 6 18\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </SheetPrimitive.Close>\n        ) : null}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n}\n\nexport function SheetHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 pr-8 text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        \"mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SheetTitle({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-lg leading-tight font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { sheetVariants };\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,QAAQA,OAAe;AACpC,MAAa,eAAeA,OAAe;AAC3C,MAAa,cAAcA,OAAe;AAC1C,MAAa,aAAaA,OAAe;AAEzC,SAAgB,aAAa,EAC3B,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,iDACA,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAgB,IACpB,GACE,4FACA,0EACF,GACA;CACE,UAAU,EAGR,MAAM;EACJ,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF;AASA,SAAgB,aAAa,EAC3B,WACA,UACA,MACA,kBAAkB,MAClB,GAAG,SACiB;CACpB,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,qBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;EAChD,GAAI;EAHN,UAAA,CAKG,UACA,kBACC,oBAACA,OAAe,OAAhB;GACE,aAAU;GACV,cAAW;GACX,WAAW,GACT,0FACA,2FACA,kBACA,SACF;GAEA,UAAA,oBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAAO,eAAY;IAC/C,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA;GACE,CAAA;EACe,CAAA,IACpB,IACkB;CACb,CAAA,CAAA,EAAA,CAAA;AAEjB;AAEA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,WAAW,EACzB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,iBAAiB,EAC/B,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"sheet.js","names":["SheetPrimitive"],"sources":["../../../src/components/sheet/sheet.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI Drawer (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Dialog as SheetPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A panel that enters from an edge of the viewport.\n *\n * Built on the same modal primitive as Dialog, so focus management, Escape\n * handling and page inerting are identical; only the placement and motion\n * differ. Reach for Sheet when the content is a secondary surface — filters,\n * details, navigation — rather than a decision that must be answered.\n */\nexport const Sheet = SheetPrimitive.Root;\nexport const SheetTrigger = SheetPrimitive.Trigger;\nexport const SheetPortal = SheetPrimitive.Portal;\nexport const SheetClose = SheetPrimitive.Close;\n\nexport function SheetOverlay({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-[var(--z-overlay)] bg-overlay\",\n        \"data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst sheetVariants = cva(\n  cn(\n    \"fixed z-[var(--z-drawer)] flex flex-col gap-4 bg-card p-6 text-card-foreground shadow-xl\",\n    \"data-[state=closed]:animate-slide-out data-[state=open]:animate-slide-in\",\n  ),\n  {\n    variants: {\n      // --slide-x/--slide-y feed the shared slide keyframes, so all four sides\n      // reuse one animation pair instead of eight bespoke keyframes.\n      side: {\n        top: \"inset-x-0 top-0 border-b [--slide-y:-100%]\",\n        bottom: \"inset-x-0 bottom-0 border-t [--slide-y:100%]\",\n        // rtl-ok: the variant is named `left`, and a sheet asked for on the\n        // left that opens on the right in Arabic is an API telling a lie. The\n        // logical version of this is a `start`/`end` side, which is a rename\n        // rather than a restyle.\n        left: \"inset-y-0 left-0 h-full w-3/4 max-w-sm border-r [--slide-x:-100%]\", // rtl-ok: named side\n        right: \"inset-y-0 right-0 h-full w-3/4 max-w-sm border-l [--slide-x:100%]\", // rtl-ok: named side\n      },\n    },\n    defaultVariants: {\n      side: \"right\",\n    },\n  },\n);\n\nconst PREFIX = \"dowel-sheet\";\n\n/** Sections start once the panel is mostly in, then follow 50ms apart. */\nconst STAGGER_BASE_MS = 120;\nconst STAGGER_STEP_MS = 50;\nconst STAGGERED = 6;\n\nconst SPRING_CHILD = `[data-slot=sheet-content][data-animation=spring][data-state=open]>:not([data-slot=sheet-close])`;\n\nconst delay = (index: number) =>\n  `calc(${String(STAGGER_BASE_MS + index * STAGGER_STEP_MS)}ms * var(--motion-scale))`;\n\nconst STYLES = `\n@keyframes ${PREFIX}-section-in{from{opacity:0;transform:translateY(6px)}}\n${SPRING_CHILD}{animation:${PREFIX}-section-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both;animation-delay:${delay(0)}}\n${Array.from(\n  { length: STAGGERED - 1 },\n  (_, i) => `${SPRING_CHILD}:nth-child(${String(i + 2)}){animation-delay:${delay(i + 1)}}`,\n).join(\"\\n\")}\n${SPRING_CHILD}:nth-child(n+${String(STAGGERED + 1)}){animation-delay:${delay(STAGGERED)}}\n`;\n\nexport interface SheetContentProps\n  extends\n    ComponentPropsWithRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {\n  showCloseButton?: boolean;\n  /**\n   * How the content arrives. `default` slides in as one piece. `spring` slides\n   * the panel the same way, then brings its sections — header, body, footer —\n   * in one after another. The panel itself never overshoots: a sheet that\n   * bounced past its edge would lift off the side it is attached to. Stops\n   * under reduced motion.\n   */\n  animation?: \"default\" | \"spring\";\n}\n\nexport function SheetContent({\n  className,\n  children,\n  side,\n  showCloseButton = true,\n  animation = \"default\",\n  ...props\n}: SheetContentProps) {\n  const spring = animation === \"spring\";\n\n  return (\n    <>\n      {spring ? (\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n      ) : null}\n      <SheetPortal>\n        <SheetOverlay />\n        <SheetPrimitive.Content\n          data-slot=\"sheet-content\"\n          data-animation={spring ? \"spring\" : undefined}\n          className={cn(sheetVariants({ side }), className)}\n          {...props}\n        >\n          {children}\n          {showCloseButton ? (\n            <SheetPrimitive.Close\n              data-slot=\"sheet-close\"\n              aria-label=\"Close\"\n              className={cn(\n                \"absolute end-4 top-4 grid size-7 place-items-center rounded-md text-muted-foreground\",\n                \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n                \"[&_svg]:size-4\",\n                focusRing,\n              )}\n            >\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"m6 6 12 12M18 6 6 18\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                />\n              </svg>\n            </SheetPrimitive.Close>\n          ) : null}\n        </SheetPrimitive.Content>\n      </SheetPortal>\n    </>\n  );\n}\n\nexport function SheetHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 pe-8 text-start\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        \"mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function SheetTitle({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-lg leading-tight font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SheetDescription({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { sheetVariants };\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,QAAQA,OAAe;AACpC,MAAa,eAAeA,OAAe;AAC3C,MAAa,cAAcA,OAAe;AAC1C,MAAa,aAAaA,OAAe;AAEzC,SAAgB,aAAa,EAC3B,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,OAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,iDACA,gFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,gBAAgB,IACpB,GACE,4FACA,0EACF,GACA;CACE,UAAU,EAGR,MAAM;EACJ,KAAK;EACL,QAAQ;EAKR,MAAM;EACN,OAAO;CACT,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF;AAEA,MAAM,SAAS;;AAGf,MAAM,kBAAkB;AACxB,MAAM,kBAAkB;AACxB,MAAM,YAAY;AAElB,MAAM,eAAe;AAErB,MAAM,SAAS,UACb,QAAQ,OAAO,kBAAkB,QAAQ,eAAe,EAAE;AAE5D,MAAM,SAAS;aACF,OAAO;EAClB,aAAa,aAAa,OAAO,2FAA2F,MAAM,CAAC,EAAE;EACrI,MAAM,KACN,EAAE,QAAQ,EAAc,IACvB,GAAG,MAAM,GAAG,aAAa,aAAa,OAAO,IAAI,CAAC,EAAE,oBAAoB,MAAM,IAAI,CAAC,EAAE,EACxF,CAAC,CAAC,KAAK,IAAI,EAAE;EACX,aAAa,eAAe,OAAO,CAAa,EAAE,oBAAoB,MAAM,SAAS,EAAE;;AAkBzF,SAAgB,aAAa,EAC3B,WACA,UACA,MACA,kBAAkB,MAClB,YAAY,WACZ,GAAG,SACiB;CACpB,MAAM,SAAS,cAAc;CAE7B,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,SACC,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,IACL,MACJ,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,qBAACA,OAAe,SAAhB;EACE,aAAU;EACV,kBAAgB,SAAS,WAAW,KAAA;EACpC,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;EAChD,GAAI;EAJN,UAAA,CAMG,UACA,kBACC,oBAACA,OAAe,OAAhB;GACE,aAAU;GACV,cAAW;GACX,WAAW,GACT,wFACA,2FACA,kBACA,SACF;GAEA,UAAA,oBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAAO,eAAY;IAC/C,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;IACf,CAAA;GACE,CAAA;EACe,CAAA,IACpB,IACkB;CACb,CAAA,CAAA,EAAA,CAAA,CACb,EAAA,CAAA;AAEN;AAEA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,YAAY,EAAE,WAAW,GAAG,SAAuC;CACjF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,WAAW,EACzB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,iBAAiB,EAC/B,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/shimmer-text/index.d.ts

@@ -0,0 +1,2 @@
+import { ShimmerText, ShimmerTextElement, ShimmerTextProps, ShimmerTextVariant, shimmerTextVariants } from "./shimmer-text.js";
+export { ShimmerText, type ShimmerTextElement, type ShimmerTextProps, type ShimmerTextVariant, shimmerTextVariants };

package/dist/components/shimmer-text/index.js

@@ -0,0 +1,2 @@
+import { ShimmerText, shimmerTextVariants } from "./shimmer-text.js";
+export { ShimmerText, shimmerTextVariants };

package/dist/components/shimmer-text/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/shimmer-text/meta.ts
+const meta = defineMeta({
+	name: "shimmer-text",
+	title: "Shimmer Text",
+	description: "Text with a light band sweeping across it on a loop, or a blur-and-glide entrance as it arrives.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["shimmer-text.tsx"],
+	a11y: "The text is never split, so it reads as one run and copies cleanly. The effect is decoration: under reduced motion the shine becomes plain text in the base colour and the entrance settles at once to its visible end state. In forced-colours mode the clipped gradient is dropped so the text takes the system colour. Pick base and shine colours that both meet contrast against the background."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/shimmer-text/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/shimmer-text/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"shimmer-text\",\n  title: \"Shimmer Text\",\n  description:\n    \"Text with a light band sweeping across it on a loop, or a blur-and-glide entrance as it arrives.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"shimmer-text.tsx\"],\n  a11y:\n    \"The text is never split, so it reads as one run and copies cleanly. The effect is decoration: under \" +\n    \"reduced motion the shine becomes plain text in the base colour and the entrance settles at once to its \" +\n    \"visible end state. In forced-colours mode the clipped gradient is dropped so the text takes the system colour. \" +\n    \"Pick base and shine colours that both meet contrast against the background.\",\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,kBAAkB;CAC1B,MACE;AAIJ,CAAC"}

package/dist/components/shimmer-text/shimmer-text.d.ts

@@ -0,0 +1,33 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, Ref } from "react";
+//#region src/components/shimmer-text/shimmer-text.d.ts
+/** Elements text effects render as. They are all phrasing or heading content. */
+type ShimmerTextElement = "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+declare const shimmerTextVariants: (props?: ({
+  variant?: "sweep" | "shine" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ShimmerTextVariant = NonNullable<VariantProps<typeof shimmerTextVariants>["variant"]>;
+interface ShimmerTextProps extends Omit<ComponentPropsWithRef<"span">, "ref">, VariantProps<typeof shimmerTextVariants> {
+  ref?: Ref<HTMLElement>;
+  /** The element to render. */
+  as?: ShimmerTextElement;
+  /** `loop` (shine's default) repeats forever; `once` plays a single pass. Sweep always plays once. */
+  repeat?: "loop" | "once";
+  /** One pass, in milliseconds. Defaults to 2500 for shine, 850 for sweep. */
+  duration?: number;
+  /** Shine only: the pause between sweeps, in milliseconds. */
+  repeatDelay?: number;
+  /** Delay before the first pass, in milliseconds. */
+  delay?: number;
+  /** Shine only: the text colour outside the band. Any CSS colour; use a token. */
+  baseColor?: string;
+  /** Shine only: the colour of the band. Any CSS colour; use a token. */
+  shineColor?: string;
+  /** Wait until the text scrolls into view before playing. */
+  triggerOnView?: boolean;
+}
+/** Text with a looping light band (`shine`) or a blur-and-glide entrance (`sweep`). */
+declare function ShimmerText({ as: Component, variant, repeat, duration, repeatDelay, delay, baseColor, shineColor, triggerOnView, className, style, ref, children, ...props }: ShimmerTextProps): import("react").JSX.Element;
+//#endregion
+export { ShimmerText, ShimmerTextElement, ShimmerTextProps, ShimmerTextVariant, shimmerTextVariants };
+//# sourceMappingURL=shimmer-text.d.ts.map

package/dist/components/shimmer-text/shimmer-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer-text.d.ts","names":[],"sources":["../../../src/components/shimmer-text/shimmer-text.tsx"],"mappings":";;;;KAgEY;cAEN,sBAAmB;;6CAWvB;KAEU,qBAAqB,YAC/B,oBAAoB;UAGL,yBACP,KAAK,uCAAuC,oBAAoB;EACxE,MAAM,IAAI;;EAEV,KAAK;;EAEL;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;iBAwCc,cACd,IAAI,WACJ,SACA,QACA,UACA,aACA,OACA,WACA,YACA,eACA,WACA,OACA,KACA,aACG,SACF,mCAAgB,IAAA"}

package/dist/components/shimmer-text/shimmer-text.js

@@ -0,0 +1,120 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/components/shimmer-text/shimmer-text.tsx
+const PREFIX = "dowel-shimmer-text";
+const STYLES = `
+[data-slot=shimmer-text][data-variant=shine]{background-image:linear-gradient(110deg,var(--${PREFIX}-base) 40%,var(--${PREFIX}-shine) 50%,var(--${PREFIX}-base) 60%);background-size:250% 100%;background-position-x:150%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
+[data-slot=shimmer-text][data-variant=sweep]{display:inline-block;--${PREFIX}-x:-22px}
+[data-slot=shimmer-text][data-variant=sweep]:dir(rtl){--${PREFIX}-x:22px}
+[data-slot=shimmer-text][data-variant=sweep][data-state=waiting]{opacity:0}
+@keyframes ${PREFIX}-sweep{from{opacity:0;filter:blur(8px);transform:translateX(var(--${PREFIX}-x))}to{opacity:1;filter:blur(0);transform:none}}
+@media (prefers-reduced-motion:reduce){[data-slot=shimmer-text][data-variant=shine]{background-image:none;color:var(--${PREFIX}-base);-webkit-text-fill-color:currentColor}}
+@media (forced-colors:active){[data-slot=shimmer-text][data-variant=shine]{background-image:none;-webkit-text-fill-color:currentColor}}
+`;
+/** The hold at the end of each shine loop, as a keyframe of its own. */
+function shineKeyframes(hold) {
+	const name = `${PREFIX}-shine-${String(hold)}`;
+	return {
+		name,
+		css: `@keyframes ${name}{0%{background-position-x:150%}${hold === 100 ? "100%" : `${String(hold)}%,100%`}{background-position-x:-150%}}`
+	};
+}
+/** Milliseconds, scaled so reduced motion and --motion-scale reach it. */
+function scaled(ms) {
+	return `calc(${String(ms)}ms * var(--motion-scale, 1))`;
+}
+const shimmerTextVariants = cva("", {
+	variants: { 
+	/** `shine` loops a light band across the text; `sweep` is a blur-and-glide entrance. */
+variant: {
+		shine: "",
+		sweep: ""
+	} },
+	defaultVariants: { variant: "shine" }
+});
+/**
+* Plays once the element is in view, when asked to. Without IntersectionObserver
+* (old browsers, tests, before hydration) it plays immediately, so the text is
+* never stranded invisible.
+*/
+function useInViewTrigger(enabled) {
+	const [waiting, setWaiting] = useState(false);
+	const observer = useRef(null);
+	const seen = useRef(false);
+	const attach = useCallback((node) => {
+		observer.current?.disconnect();
+		observer.current = null;
+		if (!node || !enabled || seen.current || typeof IntersectionObserver !== "function") return;
+		setWaiting(true);
+		observer.current = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				seen.current = true;
+				setWaiting(false);
+				observer.current?.disconnect();
+				observer.current = null;
+			}
+		});
+		observer.current.observe(node);
+	}, [enabled]);
+	useEffect(() => () => observer.current?.disconnect(), []);
+	return {
+		waiting: enabled && waiting,
+		attach
+	};
+}
+/** Text with a looping light band (`shine`) or a blur-and-glide entrance (`sweep`). */
+function ShimmerText({ as: Component = "span", variant = "shine", repeat = "loop", duration, repeatDelay = 600, delay = 0, baseColor = "var(--color-muted-foreground)", shineColor = "var(--color-foreground)", triggerOnView = false, className, style, ref, children, ...props }) {
+	const { waiting, attach } = useInViewTrigger(triggerOnView);
+	const setRef = useCallback((node) => {
+		attach(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [attach, ref]);
+	const shine = variant === "shine";
+	const pass = duration ?? (shine ? 2500 : 850);
+	const pause = shine && repeat === "loop" ? repeatDelay : 0;
+	const hold = pass + pause > 0 ? Math.round(pass / (pass + pause) * 100) : 100;
+	const keyframes = shine ? shineKeyframes(hold) : null;
+	const animation = waiting ? { animationName: "none" } : {
+		animationName: keyframes ? keyframes.name : `${PREFIX}-sweep`,
+		animationDuration: scaled(pass + pause),
+		animationDelay: scaled(delay),
+		animationTimingFunction: shine ? "linear" : "var(--ease-out-quint)",
+		animationIterationCount: shine && repeat === "loop" ? "infinite" : "1",
+		animationFillMode: "both"
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("style", {
+			href: PREFIX,
+			precedence: "dowel",
+			children: STYLES
+		}),
+		keyframes ? /* @__PURE__ */ jsx("style", {
+			href: keyframes.name,
+			precedence: "dowel",
+			children: keyframes.css
+		}) : null,
+		/* @__PURE__ */ jsx(Component, {
+			ref: setRef,
+			"data-slot": "shimmer-text",
+			"data-variant": variant,
+			"data-state": waiting ? "waiting" : "playing",
+			className: cn(shimmerTextVariants({ variant }), className),
+			style: {
+				[`--${PREFIX}-base`]: baseColor,
+				[`--${PREFIX}-shine`]: shineColor,
+				...animation,
+				...style
+			},
+			...props,
+			children
+		})
+	] });
+}
+//#endregion
+export { ShimmerText, shimmerTextVariants };
+
+//# sourceMappingURL=shimmer-text.js.map

package/dist/components/shimmer-text/shimmer-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer-text.js","names":[],"sources":["../../../src/components/shimmer-text/shimmer-text.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Shimmer Sweep and Shine Text (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type Ref,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Two SmoothUI text effects share one component (ADR 0014, families not copies):\n *\n * - `shine` (Shine Text): a highlight band sweeps across the letters on a loop.\n *   The text is painted by a gradient clipped to the glyphs; the band is the\n *   middle stop, and the loop moves `background-position-x` from 150% to -150%.\n *   The source's pause between sweeps (`repeatDelay`) is baked into the\n *   keyframe as a hold at the end, so one CSS animation loops exactly as the\n *   JavaScript one did.\n * - `sweep` (Shimmer Sweep): a one-shot entrance — the whole string fades in\n *   from 8px of blur while gliding 22px from the inline start, over 850ms on\n *   Apple's ease-out, which is our --ease-out-quint.\n *\n * Neither splits the text, so it stays one run for assistive technology and\n * for copy and paste. Both are decoration: under reduced motion the global\n * blanket collapses the animation to its final keyframe (sweep: fully visible)\n * and the stylesheet below drops the shine gradient for plain text in the base\n * colour, as the source did.\n */\n\nconst PREFIX = \"dowel-shimmer-text\";\n\nconst STYLES = `\n[data-slot=shimmer-text][data-variant=shine]{background-image:linear-gradient(110deg,var(--${PREFIX}-base) 40%,var(--${PREFIX}-shine) 50%,var(--${PREFIX}-base) 60%);background-size:250% 100%;background-position-x:150%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}\n[data-slot=shimmer-text][data-variant=sweep]{display:inline-block;--${PREFIX}-x:-22px}\n[data-slot=shimmer-text][data-variant=sweep]:dir(rtl){--${PREFIX}-x:22px}\n[data-slot=shimmer-text][data-variant=sweep][data-state=waiting]{opacity:0}\n@keyframes ${PREFIX}-sweep{from{opacity:0;filter:blur(8px);transform:translateX(var(--${PREFIX}-x))}to{opacity:1;filter:blur(0);transform:none}}\n@media (prefers-reduced-motion:reduce){[data-slot=shimmer-text][data-variant=shine]{background-image:none;color:var(--${PREFIX}-base);-webkit-text-fill-color:currentColor}}\n@media (forced-colors:active){[data-slot=shimmer-text][data-variant=shine]{background-image:none;-webkit-text-fill-color:currentColor}}\n`;\n\n/** The hold at the end of each shine loop, as a keyframe of its own. */\nfunction shineKeyframes(hold: number): { name: string; css: string } {\n  const name = `${PREFIX}-shine-${String(hold)}`;\n  const end = hold === 100 ? \"100%\" : `${String(hold)}%,100%`;\n  return {\n    name,\n    css: `@keyframes ${name}{0%{background-position-x:150%}${end}{background-position-x:-150%}}`,\n  };\n}\n\n/** Milliseconds, scaled so reduced motion and --motion-scale reach it. */\nfunction scaled(ms: number): string {\n  return `calc(${String(ms)}ms * var(--motion-scale, 1))`;\n}\n\n/** Elements text effects render as. They are all phrasing or heading content. */\nexport type ShimmerTextElement = \"span\" | \"p\" | \"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\nconst shimmerTextVariants = cva(\"\", {\n  variants: {\n    /** `shine` loops a light band across the text; `sweep` is a blur-and-glide entrance. */\n    variant: {\n      shine: \"\",\n      sweep: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"shine\",\n  },\n});\n\nexport type ShimmerTextVariant = NonNullable<\n  VariantProps<typeof shimmerTextVariants>[\"variant\"]\n>;\n\nexport interface ShimmerTextProps\n  extends Omit<ComponentPropsWithRef<\"span\">, \"ref\">, VariantProps<typeof shimmerTextVariants> {\n  ref?: Ref<HTMLElement>;\n  /** The element to render. */\n  as?: ShimmerTextElement;\n  /** `loop` (shine's default) repeats forever; `once` plays a single pass. Sweep always plays once. */\n  repeat?: \"loop\" | \"once\";\n  /** One pass, in milliseconds. Defaults to 2500 for shine, 850 for sweep. */\n  duration?: number;\n  /** Shine only: the pause between sweeps, in milliseconds. */\n  repeatDelay?: number;\n  /** Delay before the first pass, in milliseconds. */\n  delay?: number;\n  /** Shine only: the text colour outside the band. Any CSS colour; use a token. */\n  baseColor?: string;\n  /** Shine only: the colour of the band. Any CSS colour; use a token. */\n  shineColor?: string;\n  /** Wait until the text scrolls into view before playing. */\n  triggerOnView?: boolean;\n}\n\n/**\n * Plays once the element is in view, when asked to. Without IntersectionObserver\n * (old browsers, tests, before hydration) it plays immediately, so the text is\n * never stranded invisible.\n */\nfunction useInViewTrigger(enabled: boolean) {\n  const [waiting, setWaiting] = useState(false);\n  const observer = useRef<IntersectionObserver | null>(null);\n  // Once it has played it never waits again, even if the ref is re-attached.\n  const seen = useRef(false);\n\n  const attach = useCallback(\n    (node: HTMLElement | null) => {\n      observer.current?.disconnect();\n      observer.current = null;\n      if (!node || !enabled || seen.current || typeof IntersectionObserver !== \"function\")\n        return;\n      setWaiting(true);\n      observer.current = new IntersectionObserver((entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          seen.current = true;\n          setWaiting(false);\n          observer.current?.disconnect();\n          observer.current = null;\n        }\n      });\n      observer.current.observe(node);\n    },\n    [enabled],\n  );\n\n  useEffect(() => () => observer.current?.disconnect(), []);\n\n  return { waiting: enabled && waiting, attach };\n}\n\n/** Text with a looping light band (`shine`) or a blur-and-glide entrance (`sweep`). */\nexport function ShimmerText({\n  as: Component = \"span\",\n  variant = \"shine\",\n  repeat = \"loop\",\n  duration,\n  repeatDelay = 600,\n  delay = 0,\n  baseColor = \"var(--color-muted-foreground)\",\n  shineColor = \"var(--color-foreground)\",\n  triggerOnView = false,\n  className,\n  style,\n  ref,\n  children,\n  ...props\n}: ShimmerTextProps) {\n  const { waiting, attach } = useInViewTrigger(triggerOnView);\n  const setRef = useCallback(\n    (node: HTMLElement | null) => {\n      attach(node);\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) ref.current = node;\n    },\n    [attach, ref],\n  );\n\n  const shine = variant === \"shine\";\n  const pass = duration ?? (shine ? 2500 : 850);\n  // The loop pauses between passes only when it repeats.\n  const pause = shine && repeat === \"loop\" ? repeatDelay : 0;\n  const hold = pass + pause > 0 ? Math.round((pass / (pass + pause)) * 100) : 100;\n  const keyframes = shine ? shineKeyframes(hold) : null;\n\n  const animation: CSSProperties = waiting\n    ? { animationName: \"none\" }\n    : {\n        animationName: keyframes ? keyframes.name : `${PREFIX}-sweep`,\n        animationDuration: scaled(pass + pause),\n        animationDelay: scaled(delay),\n        animationTimingFunction: shine ? \"linear\" : \"var(--ease-out-quint)\",\n        animationIterationCount: shine && repeat === \"loop\" ? \"infinite\" : \"1\",\n        animationFillMode: \"both\",\n      };\n\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      {keyframes ? (\n        <style href={keyframes.name} precedence=\"dowel\">\n          {keyframes.css}\n        </style>\n      ) : null}\n      <Component\n        ref={setRef}\n        data-slot=\"shimmer-text\"\n        data-variant={variant}\n        data-state={waiting ? \"waiting\" : \"playing\"}\n        className={cn(shimmerTextVariants({ variant }), className)}\n        style={\n          {\n            [`--${PREFIX}-base`]: baseColor,\n            [`--${PREFIX}-shine`]: shineColor,\n            ...animation,\n            ...style,\n          } as CSSProperties\n        }\n        {...props}\n      >\n        {children}\n      </Component>\n    </>\n  );\n}\n\nexport { shimmerTextVariants };\n"],"mappings":"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"}