@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/tooltip/tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../lib/utils.js";
 import { Tooltip } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/tooltip/tooltip.tsx
 /**
 * A short label revealed on hover or focus.
@@ -10,6 +10,10 @@ import { jsx } from "react/jsx-runtime";
 * never be the only place information appears, because it is unreachable on
 * touch devices and disappears the moment attention moves. If the content is
 * essential, put it in the interface.
+*
+* It pops toward the side it opens on: a few pixels of travel away from the
+* trigger plus a slight overshoot in scale. The instant re-open when moving
+* between tooltips is not animated, and the pop stops under reduced motion.
 */
 const TooltipProvider = Tooltip.Provider;
 const TooltipTrigger = Tooltip.Trigger;
@@ -23,14 +27,26 @@ function Tooltip$1({ children, ...props }) {
 		children
 	}) });
 }
+const PREFIX = "dowel-tooltip";
+const STYLES = `
+@keyframes ${PREFIX}-in{from{opacity:0;transform:translate(var(--${PREFIX}-x,0),var(--${PREFIX}-y,0)) scale(.95)}}
+[data-slot=tooltip-content][data-side=top]{--${PREFIX}-y:4px}
+[data-slot=tooltip-content][data-side=bottom]{--${PREFIX}-y:-4px}
+[data-slot=tooltip-content][data-side=left]{--${PREFIX}-x:4px}
+[data-slot=tooltip-content][data-side=right]{--${PREFIX}-x:-4px}
+`;
 function TooltipContent({ className, sideOffset = 6, children, ...props }) {
-	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Content, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Content, {
 		"data-slot": "tooltip-content",
 		sideOffset,
-		className: cn("z-[var(--z-tooltip)] max-w-64 rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md", "origin-[var(--radix-tooltip-content-transform-origin)] text-balance", "data-[state=closed]:animate-float-out data-[state=delayed-open]:animate-float-in", className),
+		className: cn("z-[var(--z-tooltip)] max-w-64 rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md", "origin-[var(--radix-tooltip-content-transform-origin)] text-balance", "data-[state=closed]:animate-float-out", "data-[state=delayed-open]:animate-[dowel-tooltip-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]", className),
 		...props,
 		children
-	}) });
+	}) })] });
 }
 //#endregion
 export { Tooltip$1 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["TooltipPrimitive","Tooltip"],"sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A short label revealed on hover or focus.\n *\n * A tooltip supplements a control that is already understandable — it must\n * never be the only place information appears, because it is unreachable on\n * touch devices and disappears the moment attention moves. If the content is\n * essential, put it in the interface.\n */\nexport const TooltipProvider = TooltipPrimitive.Provider;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport type TooltipProps = ComponentPropsWithRef<typeof TooltipPrimitive.Root>;\n\n/**\n * Self-providing, so a single tooltip works without app-level setup. Wrap a\n * subtree in TooltipProvider to share open/close timing across many tooltips.\n */\nexport function Tooltip({ children, ...props }: TooltipProps) {\n  return (\n    <TooltipPrimitive.Provider>\n      <TooltipPrimitive.Root {...props}>{children}</TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n\nexport type TooltipContentProps = ComponentPropsWithRef<typeof TooltipPrimitive.Content>;\n\nexport function TooltipContent({\n  className,\n  sideOffset = 6,\n  children,\n  ...props\n}: TooltipContentProps) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-[var(--z-tooltip)] max-w-64 rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md\",\n          \"origin-[var(--radix-tooltip-content-transform-origin)] text-balance\",\n          \"data-[state=closed]:animate-float-out data-[state=delayed-open]:animate-float-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAa,kBAAkBA,QAAiB;AAChD,MAAa,iBAAiBA,QAAiB;;;;;AAQ/C,SAAgBC,UAAQ,EAAE,UAAU,GAAG,SAAuB;CAC5D,OACE,oBAACD,QAAiB,UAAlB,EAAA,UACE,oBAACA,QAAiB,MAAlB;EAAuB,GAAI;EAAQ;CAAgC,CAAA,EAC1C,CAAA;AAE/B;AAIA,SAAgB,eAAe,EAC7B,WACA,aAAa,GACb,UACA,GAAG,SACmB;CACtB,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACE,aAAU;EACE;EACZ,WAAW,GACT,0GACA,uEACA,oFACA,SACF;EACA,GAAI;EAEH;CACuB,CAAA,EACH,CAAA;AAE7B"}
+{"version":3,"file":"tooltip.js","names":["TooltipPrimitive","Tooltip"],"sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AnimatedTooltip (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A short label revealed on hover or focus.\n *\n * A tooltip supplements a control that is already understandable — it must\n * never be the only place information appears, because it is unreachable on\n * touch devices and disappears the moment attention moves. If the content is\n * essential, put it in the interface.\n *\n * It pops toward the side it opens on: a few pixels of travel away from the\n * trigger plus a slight overshoot in scale. The instant re-open when moving\n * between tooltips is not animated, and the pop stops under reduced motion.\n */\nexport const TooltipProvider = TooltipPrimitive.Provider;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport type TooltipProps = ComponentPropsWithRef<typeof TooltipPrimitive.Root>;\n\n/**\n * Self-providing, so a single tooltip works without app-level setup. Wrap a\n * subtree in TooltipProvider to share open/close timing across many tooltips.\n */\nexport function Tooltip({ children, ...props }: TooltipProps) {\n  return (\n    <TooltipPrimitive.Provider>\n      <TooltipPrimitive.Root {...props}>{children}</TooltipPrimitive.Root>\n    </TooltipPrimitive.Provider>\n  );\n}\n\nconst PREFIX = \"dowel-tooltip\";\n\n/* Travel comes from the side Radix placed the tooltip on (a physical side, so\n * no RTL flip is needed): it starts 4px back toward the trigger. */\nconst STYLES = `\n@keyframes ${PREFIX}-in{from{opacity:0;transform:translate(var(--${PREFIX}-x,0),var(--${PREFIX}-y,0)) scale(.95)}}\n[data-slot=tooltip-content][data-side=top]{--${PREFIX}-y:4px}\n[data-slot=tooltip-content][data-side=bottom]{--${PREFIX}-y:-4px}\n[data-slot=tooltip-content][data-side=left]{--${PREFIX}-x:4px}\n[data-slot=tooltip-content][data-side=right]{--${PREFIX}-x:-4px}\n`;\n\nexport type TooltipContentProps = ComponentPropsWithRef<typeof TooltipPrimitive.Content>;\n\nexport function TooltipContent({\n  className,\n  sideOffset = 6,\n  children,\n  ...props\n}: TooltipContentProps) {\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <TooltipPrimitive.Portal>\n        <TooltipPrimitive.Content\n          data-slot=\"tooltip-content\"\n          sideOffset={sideOffset}\n          className={cn(\n            \"z-[var(--z-tooltip)] max-w-64 rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md\",\n            \"origin-[var(--radix-tooltip-content-transform-origin)] text-balance\",\n            \"data-[state=closed]:animate-float-out\",\n            // Spelled out because Tailwind reads class names from the source.\n            \"data-[state=delayed-open]:animate-[dowel-tooltip-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </TooltipPrimitive.Content>\n      </TooltipPrimitive.Portal>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAa,kBAAkBA,QAAiB;AAChD,MAAa,iBAAiBA,QAAiB;;;;;AAQ/C,SAAgBC,UAAQ,EAAE,UAAU,GAAG,SAAuB;CAC5D,OACE,oBAACD,QAAiB,UAAlB,EAAA,UACE,oBAACA,QAAiB,MAAlB;EAAuB,GAAI;EAAQ;CAAgC,CAAA,EAC1C,CAAA;AAE/B;AAEA,MAAM,SAAS;AAIf,MAAM,SAAS;aACF,OAAO,+CAA+C,OAAO,cAAc,OAAO;+CAChD,OAAO;kDACJ,OAAO;gDACT,OAAO;iDACN,OAAO;;AAKxD,SAAgB,eAAe,EAC7B,WACA,aAAa,GACb,UACA,GAAG,SACmB;CACtB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,GACP,oBAACA,QAAiB,QAAlB,EAAA,UACE,oBAACA,QAAiB,SAAlB;EACE,aAAU;EACE;EACZ,WAAW,GACT,0GACA,uEACA,yCAEA,8GACA,SACF;EACA,GAAI;EAEH;CACuB,CAAA,EACH,CAAA,CACzB,EAAA,CAAA;AAEN"}

package/dist/components/tweet-card/index.d.ts

@@ -0,0 +1,2 @@
+import { TweetCard, TweetCardAuthor, TweetCardMedia, TweetCardMetrics, TweetCardProps, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants } from "./tweet-card.js";
+export { TweetCard, type TweetCardAuthor, type TweetCardMedia, type TweetCardMetrics, type TweetCardProps, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants };

package/dist/components/tweet-card/index.js

@@ -0,0 +1,2 @@
+import { TweetCard, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants } from "./tweet-card.js";
+export { TweetCard, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants };

package/dist/components/tweet-card/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/tweet-card/meta.ts
+const meta = defineMeta({
+	name: "tweet-card",
+	title: "Tweet Card",
+	description: "A social post drawn from props — author, text, photos, date and counts — with a link out to the original. No network, no embed script.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["avatar", "skeleton"],
+	files: ["tweet-card.tsx"],
+	a11y: "An article named by its author, with the post in a blockquote citing its URL. URLs, @mentions and #hashtags in string text become real links. The link to the post is a real, named link revealed on hover and on keyboard focus, and always shown on devices that cannot hover. The avatar is decorative (the name beside it is the link); verification is announced as text, counts are read in full (\"1200 likes\", not \"1.2K\"), and the date is a <time> element. Photos need alt text."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/tweet-card/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/tweet-card/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"tweet-card\",\n  title: \"Tweet Card\",\n  description:\n    \"A social post drawn from props — author, text, photos, date and counts — with a link out to the original. No network, no embed script.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"avatar\", \"skeleton\"],\n  files: [\"tweet-card.tsx\"],\n  a11y:\n    \"An article named by its author, with the post in a blockquote citing its URL. URLs, @mentions and \" +\n    \"#hashtags in string text become real links. The link to the post is a real, named link revealed on \" +\n    \"hover and on keyboard focus, and always shown on devices that cannot hover. The avatar is decorative \" +\n    \"(the name beside it is the link); verification is announced as text, counts are read in full \" +\n    '(\"1200 likes\", not \"1.2K\"), and the date is a <time> element. Photos need alt text.',\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,UAAU,UAAU;CAC3C,OAAO,CAAC,gBAAgB;CACxB,MACE;AAKJ,CAAC"}

package/dist/components/tweet-card/tweet-card.d.ts

@@ -0,0 +1,57 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/tweet-card/tweet-card.d.ts
+declare const tweetCardVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/** The avatar's corner shape — the source's `avatarRounded`. */
+declare const tweetCardAvatarVariants: (props?: ({
+  avatarShape?: "circle" | "rounded" | "rounded-md" | "rounded-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TweetCardAuthor {
+  name: string;
+  /** Without the leading "@". */
+  handle: string;
+  /** Image URL. Initials are shown while it loads and if it fails. */
+  avatar?: string;
+  verified?: boolean;
+  /** Profile URL. Defaults to the handle on x.com. */
+  href?: string;
+}
+interface TweetCardMedia {
+  src: string;
+  /** Describe the image; an empty string marks it decorative. */
+  alt: string;
+  width?: number;
+  height?: number;
+}
+interface TweetCardMetrics {
+  replies?: number;
+  reposts?: number;
+  likes?: number;
+  views?: number;
+}
+interface TweetCardProps extends Omit<ComponentPropsWithRef<"article">, "children">, VariantProps<typeof tweetCardAvatarVariants> {
+  author: TweetCardAuthor;
+  /** A string is linked: URLs, @mentions and #hashtags. Pass nodes to control it. */
+  text: ReactNode;
+  /** Up to four photos, laid out as the source did. */
+  media?: TweetCardMedia[];
+  timestamp?: Date | string;
+  metrics?: TweetCardMetrics;
+  /** The post's URL. Adds the "view post" link. */
+  href?: string;
+  /** Where the author sits. */
+  userInfoPosition?: "top" | "bottom";
+  /** BCP 47 locale for the date and counts. */
+  locale?: string;
+  /** Name of the link to the post. */
+  linkLabel?: string;
+}
+/** Truncates a long handle, as the source did at 16 characters. */
+declare function truncate(value: string, length: number): string;
+/** A social post rendered from props — no network, no embed script. */
+declare function TweetCard({ className, author, text, media, timestamp, metrics, href, userInfoPosition, avatarShape, locale, linkLabel, id, ...props }: TweetCardProps): import("react").JSX.Element;
+/** Placeholder while a post loads — the source's TweetSkeleton. */
+declare function TweetCardSkeleton({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
+//#endregion
+export { TweetCard, TweetCardAuthor, TweetCardMedia, TweetCardMetrics, TweetCardProps, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants };
+//# sourceMappingURL=tweet-card.d.ts.map

package/dist/components/tweet-card/tweet-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tweet-card.d.ts","names":[],"sources":["../../../src/components/tweet-card/tweet-card.tsx"],"mappings":";;;cAsBM,oBAAiB,iDAAA;;cAQjB,0BAAuB;;6CAY3B;UAEe;EACf;;EAEA;;EAEA;EACA;;EAEA;;UAGe;EACf;;EAEA;EACA;EACA;;UAGe;EACf;EACA;EACA;EACA;;UAGe,uBAEb,KAAK,+CACL,oBAAoB;EACtB,QAAQ;;EAER,MAAM;;EAEN,QAAQ;EACR,YAAY;EACZ,UAAU;;EAEV;;EAEA;;EAEA;;EAEA;;;iBA2Cc,SAAS,eAAe;;iBA0ExB,YACd,WACA,QACA,MACA,OACA,WACA,SACA,MACA,kBACA,aACA,QACA,WACA,OACG,SACF,iCAAc,IAAA;;iBAoID,oBAAoB,cAAc,SAAS,+CAA4B,IAAA"}

package/dist/components/tweet-card/tweet-card.js

@@ -0,0 +1,243 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId } from "react";
+//#region src/components/tweet-card/tweet-card.tsx
+const tweetCardVariants = cva(cn("group/tweet relative flex flex-col gap-6 overflow-hidden rounded-xl border border-border bg-card p-6 text-card-foreground", "transition-[border-color,box-shadow] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)] hover:shadow-md"));
+/** The avatar's corner shape — the source's `avatarRounded`. */
+const tweetCardAvatarVariants = cva("size-10", {
+	variants: { avatarShape: {
+		circle: "rounded-full",
+		rounded: "rounded",
+		"rounded-md": "rounded-md",
+		"rounded-lg": "rounded-lg"
+	} },
+	defaultVariants: { avatarShape: "rounded" }
+});
+const ENTITY = /(https?:\/\/[^\s]+|@\w{1,15}|#[\p{L}\p{N}_]+)/gu;
+const linkStyles = cn("rounded-sm font-medium text-primary underline-offset-4 hover:underline", focusRing);
+/** Splits plain text into text and links, as react-tweet's entities did. */
+function linkify(text) {
+	return text.split(ENTITY).map((part, index) => {
+		if (index % 2 === 0) return part;
+		const href = part.startsWith("@") ? `https://x.com/${part.slice(1)}` : part.startsWith("#") ? `https://x.com/hashtag/${encodeURIComponent(part.slice(1))}` : part;
+		return /* @__PURE__ */ jsx("a", {
+			href,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: linkStyles,
+			children: part
+		}, index);
+	});
+}
+function initials(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => word[0]?.toUpperCase()).join("");
+}
+/** Truncates a long handle, as the source did at 16 characters. */
+function truncate(value, length) {
+	return value.length <= length ? value : `${value.slice(0, length - 1)}…`;
+}
+function VerifiedBadge() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		"data-slot": "tweet-card-verified",
+		className: "size-4 shrink-0 text-primary",
+		children: [/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M22.5 12.5c0-1.58-.88-2.95-2.18-3.65.16-.44.25-.92.25-1.43 0-2.21-1.71-4-3.83-4-.47 0-.93.09-1.35.25C14.8 2.37 13.5 1.5 12 1.5s-2.8.87-3.39 2.17a3.7 3.7 0 0 0-1.35-.25c-2.12 0-3.83 1.79-3.83 4 0 .51.09.99.25 1.43A4.1 4.1 0 0 0 1.5 12.5c0 1.5.8 2.8 1.98 3.52-.02.15-.03.3-.03.46 0 2.21 1.71 4 3.83 4 .47 0 .93-.09 1.35-.25.59 1.3 1.88 2.17 3.37 2.17s2.78-.87 3.37-2.17c.42.16.88.25 1.35.25 2.12 0 3.83-1.79 3.83-4 0-.16-.01-.31-.03-.46a4.1 4.1 0 0 0 1.98-3.52Z"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "m8.5 12.5 2.5 2.5 4.5-5",
+			fill: "none",
+			stroke: "var(--color-primary-foreground)",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	});
+}
+function MediaGrid({ media }) {
+	const photos = media.slice(0, 4);
+	const image = (photo, className) => /* @__PURE__ */ jsx("img", {
+		src: photo.src,
+		alt: photo.alt,
+		width: photo.width,
+		height: photo.height,
+		loading: "lazy",
+		draggable: false,
+		className: cn("size-full rounded-xl border border-border object-cover", className)
+	}, photo.src);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "tweet-card-media",
+		className: cn("grid w-full gap-2", photos.length > 1 && "grid-cols-2"),
+		children: photos.map((photo, index) => image(photo, index === 0 && photos.length === 3 ? "row-span-2" : void 0))
+	});
+}
+const METRICS = [
+	{
+		key: "replies",
+		label: "replies",
+		path: "M21 11.5a8.4 8.4 0 0 1-9 8.5 9 9 0 0 1-3.8-.8L3 21l1.8-4.7A8.4 8.4 0 0 1 3 11.5 8.4 8.4 0 0 1 12 3a8.4 8.4 0 0 1 9 8.5Z"
+	},
+	{
+		key: "reposts",
+		label: "reposts",
+		path: "m17 2 4 4-4 4M3 11V9a3 3 0 0 1 3-3h15M7 22l-4-4 4-4m14-1v2a3 3 0 0 1-3 3H3"
+	},
+	{
+		key: "likes",
+		label: "likes",
+		path: "M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z"
+	},
+	{
+		key: "views",
+		label: "views",
+		path: "M3 3v18h18M7 16V9m5 7V5m5 11v-4"
+	}
+];
+/** A social post rendered from props — no network, no embed script. */
+function TweetCard({ className, author, text, media, timestamp, metrics, href, userInfoPosition = "bottom", avatarShape, locale, linkLabel = "View post on X", id, ...props }) {
+	const uid = useId();
+	const nameId = `${id ?? uid}-author`;
+	const date = timestamp === void 0 ? void 0 : new Date(timestamp);
+	const validDate = date && !Number.isNaN(date.getTime()) ? date : void 0;
+	const count = new Intl.NumberFormat(locale, { notation: "compact" });
+	const shown = METRICS.filter(({ key }) => metrics?.[key] !== void 0);
+	const userInfo = /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tweet-card-author",
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("a", {
+			href: author.href ?? `https://x.com/${author.handle}`,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			tabIndex: -1,
+			"aria-hidden": "true",
+			className: "shrink-0",
+			children: /* @__PURE__ */ jsxs(Avatar, {
+				className: tweetCardAvatarVariants({ avatarShape }),
+				children: [author.avatar ? /* @__PURE__ */ jsx(AvatarImage, {
+					src: author.avatar,
+					alt: ""
+				}) : null, /* @__PURE__ */ jsx(AvatarFallback, {
+					className: "rounded-[inherit]",
+					children: initials(author.name)
+				})]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsxs("p", {
+				className: "flex items-center gap-1 text-sm font-semibold tracking-tight",
+				children: [/* @__PURE__ */ jsx("a", {
+					id: nameId,
+					href: author.href ?? `https://x.com/${author.handle}`,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: cn("truncate rounded-sm hover:underline", focusRing),
+					children: author.name
+				}), author.verified ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(VerifiedBadge, {}), /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: "Verified account"
+				})] }) : null]
+			}), /* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-muted-foreground",
+				children: ["@", truncate(author.handle, 16)]
+			})]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("article", {
+		id,
+		"data-slot": "tweet-card",
+		"aria-labelledby": nameId,
+		className: cn(tweetCardVariants(), className),
+		...props,
+		children: [
+			userInfoPosition === "top" ? userInfo : null,
+			/* @__PURE__ */ jsx("blockquote", {
+				"data-slot": "tweet-card-text",
+				cite: href,
+				className: "text-sm tracking-tight text-balance whitespace-pre-line",
+				children: typeof text === "string" ? linkify(text) : text
+			}),
+			media && media.length > 0 ? /* @__PURE__ */ jsx(MediaGrid, { media }) : null,
+			validDate || shown.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted-foreground",
+				children: [validDate ? /* @__PURE__ */ jsx("time", {
+					dateTime: validDate.toISOString(),
+					children: validDate.toLocaleDateString(locale, {
+						year: "numeric",
+						month: "short",
+						day: "numeric"
+					})
+				}) : null, shown.length > 0 ? /* @__PURE__ */ jsx("ul", {
+					"data-slot": "tweet-card-metrics",
+					className: "flex items-center gap-4",
+					children: shown.map(({ key, label, path }) => /* @__PURE__ */ jsxs("li", {
+						className: "flex items-center gap-1",
+						children: [
+							/* @__PURE__ */ jsx("svg", {
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								"aria-hidden": "true",
+								className: "size-3.5",
+								children: /* @__PURE__ */ jsx("path", { d: path })
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: count.format(metrics?.[key] ?? 0)
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: `${String(metrics?.[key] ?? 0)} ${label}`
+							})
+						]
+					}, key))
+				}) : null]
+			}) : null,
+			userInfoPosition === "bottom" ? userInfo : null,
+			href ? /* @__PURE__ */ jsx("a", {
+				href,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				"aria-label": linkLabel,
+				"data-slot": "tweet-card-link",
+				className: cn("absolute end-6 bottom-6 z-10 grid size-8 place-items-center rounded-full border border-border bg-primary text-primary-foreground", "opacity-0 transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "group-hover/tweet:opacity-100 hover:scale-110 focus-visible:opacity-100 [@media(hover:none)]:opacity-100", focusRing),
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					"aria-hidden": "true",
+					className: "size-4",
+					children: /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3" })
+				})
+			}) : null
+		]
+	});
+}
+/** Placeholder while a post loads — the source's TweetSkeleton. */
+function TweetCardSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "tweet-card-skeleton",
+		"aria-hidden": "true",
+		className: cn("flex w-full flex-col gap-2 rounded-xl border border-border p-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex gap-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-10 shrink-0 rounded-full" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" })]
+		}), /* @__PURE__ */ jsx(Skeleton, { className: "h-20 w-full" })]
+	});
+}
+//#endregion
+export { TweetCard, TweetCardSkeleton, truncate, tweetCardAvatarVariants, tweetCardVariants };
+
+//# sourceMappingURL=tweet-card.js.map

package/dist/components/tweet-card/tweet-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tweet-card.js","names":[],"sources":["../../../src/components/tweet-card/tweet-card.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Tweet Card (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useId, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/avatar\";\nimport { Skeleton } from \"@/components/skeleton\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A post, drawn from props. The source fetched it with react-tweet; this\n * never touches the network, so it renders on the server, in a static\n * export and in a test, and the data can come from any API — or be written\n * by hand for a testimonial wall.\n *\n * The source's \"open\" control was a button calling window.open that only\n * appeared on hover. Here it is a real link, revealed on hover *and* on\n * keyboard focus, and always visible on devices that cannot hover.\n */\n\nconst tweetCardVariants = cva(\n  cn(\n    \"group/tweet relative flex flex-col gap-6 overflow-hidden rounded-xl border border-border bg-card p-6 text-card-foreground\",\n    \"transition-[border-color,box-shadow] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)] hover:shadow-md\",\n  ),\n);\n\n/** The avatar's corner shape — the source's `avatarRounded`. */\nconst tweetCardAvatarVariants = cva(\"size-10\", {\n  variants: {\n    avatarShape: {\n      circle: \"rounded-full\",\n      rounded: \"rounded\",\n      \"rounded-md\": \"rounded-md\",\n      \"rounded-lg\": \"rounded-lg\",\n    },\n  },\n  defaultVariants: {\n    avatarShape: \"rounded\",\n  },\n});\n\nexport interface TweetCardAuthor {\n  name: string;\n  /** Without the leading \"@\". */\n  handle: string;\n  /** Image URL. Initials are shown while it loads and if it fails. */\n  avatar?: string;\n  verified?: boolean;\n  /** Profile URL. Defaults to the handle on x.com. */\n  href?: string;\n}\n\nexport interface TweetCardMedia {\n  src: string;\n  /** Describe the image; an empty string marks it decorative. */\n  alt: string;\n  width?: number;\n  height?: number;\n}\n\nexport interface TweetCardMetrics {\n  replies?: number;\n  reposts?: number;\n  likes?: number;\n  views?: number;\n}\n\nexport interface TweetCardProps\n  extends\n    Omit<ComponentPropsWithRef<\"article\">, \"children\">,\n    VariantProps<typeof tweetCardAvatarVariants> {\n  author: TweetCardAuthor;\n  /** A string is linked: URLs, @mentions and #hashtags. Pass nodes to control it. */\n  text: ReactNode;\n  /** Up to four photos, laid out as the source did. */\n  media?: TweetCardMedia[];\n  timestamp?: Date | string;\n  metrics?: TweetCardMetrics;\n  /** The post's URL. Adds the \"view post\" link. */\n  href?: string;\n  /** Where the author sits. */\n  userInfoPosition?: \"top\" | \"bottom\";\n  /** BCP 47 locale for the date and counts. */\n  locale?: string;\n  /** Name of the link to the post. */\n  linkLabel?: string;\n}\n\nconst ENTITY = /(https?:\\/\\/[^\\s]+|@\\w{1,15}|#[\\p{L}\\p{N}_]+)/gu;\n\nconst linkStyles = cn(\n  \"rounded-sm font-medium text-primary underline-offset-4 hover:underline\",\n  focusRing,\n);\n\n/** Splits plain text into text and links, as react-tweet's entities did. */\nfunction linkify(text: string): ReactNode[] {\n  return text.split(ENTITY).map((part, index) => {\n    if (index % 2 === 0) return part;\n    const href = part.startsWith(\"@\")\n      ? `https://x.com/${part.slice(1)}`\n      : part.startsWith(\"#\")\n        ? `https://x.com/hashtag/${encodeURIComponent(part.slice(1))}`\n        : part;\n    return (\n      <a\n        key={index}\n        href={href}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className={linkStyles}\n      >\n        {part}\n      </a>\n    );\n  });\n}\n\nfunction initials(name: string): string {\n  return name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((word) => word[0]?.toUpperCase())\n    .join(\"\");\n}\n\n/** Truncates a long handle, as the source did at 16 characters. */\nexport function truncate(value: string, length: number): string {\n  return value.length <= length ? value : `${value.slice(0, length - 1)}…`;\n}\n\nfunction VerifiedBadge() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      aria-hidden=\"true\"\n      data-slot=\"tweet-card-verified\"\n      className=\"size-4 shrink-0 text-primary\"\n    >\n      <path\n        fill=\"currentColor\"\n        d=\"M22.5 12.5c0-1.58-.88-2.95-2.18-3.65.16-.44.25-.92.25-1.43 0-2.21-1.71-4-3.83-4-.47 0-.93.09-1.35.25C14.8 2.37 13.5 1.5 12 1.5s-2.8.87-3.39 2.17a3.7 3.7 0 0 0-1.35-.25c-2.12 0-3.83 1.79-3.83 4 0 .51.09.99.25 1.43A4.1 4.1 0 0 0 1.5 12.5c0 1.5.8 2.8 1.98 3.52-.02.15-.03.3-.03.46 0 2.21 1.71 4 3.83 4 .47 0 .93-.09 1.35-.25.59 1.3 1.88 2.17 3.37 2.17s2.78-.87 3.37-2.17c.42.16.88.25 1.35.25 2.12 0 3.83-1.79 3.83-4 0-.16-.01-.31-.03-.46a4.1 4.1 0 0 0 1.98-3.52Z\"\n      />\n      <path\n        d=\"m8.5 12.5 2.5 2.5 4.5-5\"\n        fill=\"none\"\n        stroke=\"var(--color-primary-foreground)\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction MediaGrid({ media }: { media: TweetCardMedia[] }) {\n  const photos = media.slice(0, 4);\n  const image = (photo: TweetCardMedia, className?: string) => (\n    <img\n      key={photo.src}\n      src={photo.src}\n      alt={photo.alt}\n      width={photo.width}\n      height={photo.height}\n      loading=\"lazy\"\n      draggable={false}\n      className={cn(\"size-full rounded-xl border border-border object-cover\", className)}\n    />\n  );\n  return (\n    <div\n      data-slot=\"tweet-card-media\"\n      className={cn(\"grid w-full gap-2\", photos.length > 1 && \"grid-cols-2\")}\n    >\n      {photos.map((photo, index) =>\n        image(photo, index === 0 && photos.length === 3 ? \"row-span-2\" : undefined),\n      )}\n    </div>\n  );\n}\n\nconst METRICS: { key: keyof TweetCardMetrics; label: string; path: string }[] = [\n  {\n    key: \"replies\",\n    label: \"replies\",\n    path: \"M21 11.5a8.4 8.4 0 0 1-9 8.5 9 9 0 0 1-3.8-.8L3 21l1.8-4.7A8.4 8.4 0 0 1 3 11.5 8.4 8.4 0 0 1 12 3a8.4 8.4 0 0 1 9 8.5Z\",\n  },\n  {\n    key: \"reposts\",\n    label: \"reposts\",\n    path: \"m17 2 4 4-4 4M3 11V9a3 3 0 0 1 3-3h15M7 22l-4-4 4-4m14-1v2a3 3 0 0 1-3 3H3\",\n  },\n  {\n    key: \"likes\",\n    label: \"likes\",\n    path: \"M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z\",\n  },\n  { key: \"views\", label: \"views\", path: \"M3 3v18h18M7 16V9m5 7V5m5 11v-4\" },\n];\n\n/** A social post rendered from props — no network, no embed script. */\nexport function TweetCard({\n  className,\n  author,\n  text,\n  media,\n  timestamp,\n  metrics,\n  href,\n  userInfoPosition = \"bottom\",\n  avatarShape,\n  locale,\n  linkLabel = \"View post on X\",\n  id,\n  ...props\n}: TweetCardProps) {\n  const uid = useId();\n  const nameId = `${id ?? uid}-author`;\n  const date = timestamp === undefined ? undefined : new Date(timestamp);\n  const validDate = date && !Number.isNaN(date.getTime()) ? date : undefined;\n  const count = new Intl.NumberFormat(locale, { notation: \"compact\" });\n  const shown = METRICS.filter(({ key }) => metrics?.[key] !== undefined);\n\n  const userInfo = (\n    <div data-slot=\"tweet-card-author\" className=\"flex items-center gap-2\">\n      <a\n        href={author.href ?? `https://x.com/${author.handle}`}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        className=\"shrink-0\"\n      >\n        <Avatar className={tweetCardAvatarVariants({ avatarShape })}>\n          {author.avatar ? <AvatarImage src={author.avatar} alt=\"\" /> : null}\n          <AvatarFallback className=\"rounded-[inherit]\">{initials(author.name)}</AvatarFallback>\n        </Avatar>\n      </a>\n      <div className=\"min-w-0\">\n        <p className=\"flex items-center gap-1 text-sm font-semibold tracking-tight\">\n          <a\n            id={nameId}\n            href={author.href ?? `https://x.com/${author.handle}`}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className={cn(\"truncate rounded-sm hover:underline\", focusRing)}\n          >\n            {author.name}\n          </a>\n          {author.verified ? (\n            <>\n              <VerifiedBadge />\n              <span className=\"sr-only\">Verified account</span>\n            </>\n          ) : null}\n        </p>\n        <p className=\"text-xs text-muted-foreground\">@{truncate(author.handle, 16)}</p>\n      </div>\n    </div>\n  );\n\n  return (\n    <article\n      id={id}\n      data-slot=\"tweet-card\"\n      aria-labelledby={nameId}\n      className={cn(tweetCardVariants(), className)}\n      {...props}\n    >\n      {userInfoPosition === \"top\" ? userInfo : null}\n      <blockquote\n        data-slot=\"tweet-card-text\"\n        cite={href}\n        className=\"text-sm tracking-tight text-balance whitespace-pre-line\"\n      >\n        {typeof text === \"string\" ? linkify(text) : text}\n      </blockquote>\n      {media && media.length > 0 ? <MediaGrid media={media} /> : null}\n      {validDate || shown.length > 0 ? (\n        <div className=\"flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-muted-foreground\">\n          {validDate ? (\n            <time dateTime={validDate.toISOString()}>\n              {validDate.toLocaleDateString(locale, {\n                year: \"numeric\",\n                month: \"short\",\n                day: \"numeric\",\n              })}\n            </time>\n          ) : null}\n          {shown.length > 0 ? (\n            <ul data-slot=\"tweet-card-metrics\" className=\"flex items-center gap-4\">\n              {shown.map(({ key, label, path }) => (\n                <li key={key} className=\"flex items-center gap-1\">\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    aria-hidden=\"true\"\n                    className=\"size-3.5\"\n                  >\n                    <path d={path} />\n                  </svg>\n                  <span aria-hidden=\"true\">{count.format(metrics?.[key] ?? 0)}</span>\n                  <span className=\"sr-only\">{`${String(metrics?.[key] ?? 0)} ${label}`}</span>\n                </li>\n              ))}\n            </ul>\n          ) : null}\n        </div>\n      ) : null}\n      {userInfoPosition === \"bottom\" ? userInfo : null}\n      {href ? (\n        <a\n          href={href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          aria-label={linkLabel}\n          data-slot=\"tweet-card-link\"\n          className={cn(\n            \"absolute end-6 bottom-6 z-10 grid size-8 place-items-center rounded-full border border-border bg-primary text-primary-foreground\",\n            \"opacity-0 transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n            \"group-hover/tweet:opacity-100 hover:scale-110 focus-visible:opacity-100 [@media(hover:none)]:opacity-100\",\n            focusRing,\n          )}\n        >\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n            className=\"size-4\"\n          >\n            <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3\" />\n          </svg>\n        </a>\n      ) : null}\n    </article>\n  );\n}\n\n/** Placeholder while a post loads — the source's TweetSkeleton. */\nexport function TweetCardSkeleton({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"tweet-card-skeleton\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex w-full flex-col gap-2 rounded-xl border border-border p-4\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex gap-2\">\n        <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n        <Skeleton className=\"h-10 w-full\" />\n      </div>\n      <Skeleton className=\"h-20 w-full\" />\n    </div>\n  );\n}\n\nexport { tweetCardAvatarVariants, tweetCardVariants };\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import { TypewriterText, TypewriterTextElement, TypewriterTextProps, typewriterTextVariants } from "./typewriter-text.js";
+export { TypewriterText, type TypewriterTextElement, type TypewriterTextProps, typewriterTextVariants };

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

@@ -0,0 +1,2 @@
+import { TypewriterText, typewriterTextVariants } from "./typewriter-text.js";
+export { TypewriterText, typewriterTextVariants };

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

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/typewriter-text/meta.ts
+const meta = defineMeta({
+	name: "typewriter-text",
+	title: "Typewriter Text",
+	description: "Types text a character at a time behind a blinking caret — once, on a loop, or cycling through a list.",
+	category: "effects",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["typewriter-text.tsx"],
+	a11y: "The typed characters are aria-hidden and an sr-only copy holds the full text (every item, for a list), so a screen reader reads it once and never per character. The server renders the finished text, and the untyped remainder reserves its space so nothing reflows. Under reduced motion the full text shows immediately."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/typewriter-text/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"typewriter-text\",\n  title: \"Typewriter Text\",\n  description:\n    \"Types text a character at a time behind a blinking caret — once, on a loop, or cycling through a list.\",\n  category: \"effects\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"typewriter-text.tsx\"],\n  a11y:\n    \"The typed characters are aria-hidden and an sr-only copy holds the full text (every item, for a list), so a \" +\n    \"screen reader reads it once and never per character. The server renders the finished text, and the untyped \" +\n    \"remainder reserves its space so nothing reflows. Under reduced motion the full text shows immediately.\",\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,qBAAqB;CAC7B,MACE;AAGJ,CAAC"}

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

@@ -0,0 +1,33 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, Ref } from "react";
+//#region src/components/typewriter-text/typewriter-text.d.ts
+/** Elements text effects render as. They are all phrasing or heading content. */
+type TypewriterTextElement = "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+declare const typewriterTextVariants: (props?: ({
+  caret?: "none" | "block" | "bar" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface TypewriterTextProps extends Omit<ComponentPropsWithRef<"span">, "ref" | "children">, VariantProps<typeof typewriterTextVariants> {
+  ref?: Ref<HTMLElement>;
+  /** One string to type, or a list to type, delete and cycle through. */
+  children: string | readonly string[];
+  /** The element to render. */
+  as?: TypewriterTextElement;
+  /** Milliseconds per typed character. */
+  speed?: number;
+  /** Milliseconds per deleted character, for a list. Defaults to half of `speed`. */
+  deleteSpeed?: number;
+  /** Milliseconds a finished string holds before it restarts or is deleted. */
+  pause?: number;
+  /**
+   * Keep going. A single string clears and retypes; a list cycles back to its
+   * first item. Defaults to `false` for a string and `true` for a list.
+   */
+  loop?: boolean;
+  /** Milliseconds before typing starts. */
+  startDelay?: number;
+}
+/** Types text behind a caret, once, in a loop, or cycling through a list. */
+declare function TypewriterText({ as: Component, children, speed, deleteSpeed, pause, loop, startDelay, caret, className, ref, ...props }: TypewriterTextProps): import("react").JSX.Element;
+//#endregion
+export { TypewriterText, TypewriterTextElement, TypewriterTextProps, typewriterTextVariants };
+//# sourceMappingURL=typewriter-text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typewriter-text.d.ts","names":[],"sources":["../../../src/components/typewriter-text/typewriter-text.tsx"],"mappings":";;;;KAmCY;cAGN,yBAAsB;;6CAe3B;UAEgB,4BAEb,KAAK,oDACL,oBAAoB;EACtB,MAAM,IAAI;;EAEV;;EAEA,KAAK;;EAEL;;EAEA;;EAEA;;;;;EAKA;;EAEA;;;iBAuBc,iBACd,IAAI,WACJ,UACA,OACA,aACA,OACA,MACA,YACA,OACA,WACA,QACG,SACF,sCAAmB,IAAA"}