@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/contribution-graph/contribution-graph.js

@@ -0,0 +1,298 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId, useMemo, useRef, useState } from "react";
+//#region src/components/contribution-graph/contribution-graph.tsx
+const DAY = 864e5;
+const contributionGraphCellVariants = cva("block size-2.5 rounded-[2px]", {
+	variants: { level: {
+		0: "bg-muted",
+		1: "bg-[color-mix(in_oklab,var(--color-primary)_25%,var(--color-muted))]",
+		2: "bg-[color-mix(in_oklab,var(--color-primary)_50%,var(--color-muted))]",
+		3: "bg-[color-mix(in_oklab,var(--color-primary)_75%,var(--color-muted))]",
+		4: "bg-primary"
+	} },
+	defaultVariants: { level: 0 }
+});
+const LEVELS = [
+	0,
+	1,
+	2,
+	3,
+	4
+];
+function defaultLevel(count, max) {
+	if (count <= 0 || max <= 0) return 0;
+	return Math.min(4, Math.ceil(count / max * 4));
+}
+function defaultCount(count) {
+	if (count === 0) return "No contributions";
+	return `${String(count)} ${count === 1 ? "contribution" : "contributions"}`;
+}
+const keyOf = (time) => new Date(time).toISOString().slice(0, 10);
+const weekday = (time) => new Date(time).getUTCDay();
+function isRtl(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+/** A year of activity as a keyboard-navigable heatmap grid. */
+function ContributionGraph({ className, data = [], year = (/* @__PURE__ */ new Date()).getUTCFullYear(), locales, showLegend = true, showTooltips = true, label, getLevel = defaultLevel, formatCount = defaultCount, lessLabel = "Less", moreLabel = "More", ...props }) {
+	const captionId = useId();
+	const table = useRef(null);
+	const surface = useRef(null);
+	const start = Date.UTC(year, 0, 1);
+	const end = Date.UTC(year, 11, 31);
+	const gridStart = start - weekday(start) * DAY;
+	const weeks = Math.round(((end + (6 - weekday(end)) * DAY - gridStart) / DAY + 1) / 7);
+	const [active, setActive] = useState(start);
+	const current = Math.min(Math.max(active, start), end);
+	const [hovered, setHovered] = useState(null);
+	const [focused, setFocused] = useState(false);
+	const [dismissed, setDismissed] = useState(false);
+	const [anchor, setAnchor] = useState({
+		left: 0,
+		top: 0,
+		width: 0,
+		height: 0
+	});
+	const { byDate, max, total } = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		let busiest = 0;
+		let sum = 0;
+		for (const day of data) {
+			if (!day.date.startsWith(String(year))) continue;
+			map.set(day.date, day);
+			busiest = Math.max(busiest, day.count);
+			sum += day.count;
+		}
+		return {
+			byDate: map,
+			max: busiest,
+			total: sum
+		};
+	}, [data, year]);
+	const names = useMemo(() => {
+		const month = new Intl.DateTimeFormat(locales, {
+			month: "short",
+			timeZone: "UTC"
+		});
+		const short = new Intl.DateTimeFormat(locales, {
+			weekday: "short",
+			timeZone: "UTC"
+		});
+		const long = new Intl.DateTimeFormat(locales, {
+			weekday: "long",
+			timeZone: "UTC"
+		});
+		const full = new Intl.DateTimeFormat(locales, {
+			dateStyle: "full",
+			timeZone: "UTC"
+		});
+		const sunday = Date.UTC(2023, 0, 1);
+		return {
+			month: (time) => month.format(time),
+			days: Array.from({ length: 7 }, (_, index) => ({
+				short: short.format(sunday + index * DAY),
+				long: long.format(sunday + index * DAY)
+			})),
+			full: (time) => full.format(time)
+		};
+	}, [locales]);
+	function dayAt(time) {
+		const entry = byDate.get(keyOf(time));
+		const count = entry?.count ?? 0;
+		return {
+			count,
+			level: Math.min(4, Math.max(0, Math.round(entry?.level ?? getLevel(count, max)))),
+			text: `${formatCount(count)}, ${names.full(time)}`
+		};
+	}
+	const months = [];
+	for (let week = 0; week < weeks; week++) {
+		const first = Math.max(gridStart + week * 7 * DAY, start);
+		const month = new Date(first).getUTCMonth();
+		const last = months[months.length - 1];
+		if (last?.key === String(month)) last.span++;
+		else months.push({
+			key: String(month),
+			name: names.month(first),
+			span: 1
+		});
+	}
+	function place(cell) {
+		const box = surface.current?.getBoundingClientRect();
+		const rect = cell.getBoundingClientRect();
+		setAnchor({
+			left: rect.left - (box?.left ?? 0),
+			top: rect.top - (box?.top ?? 0),
+			width: rect.width,
+			height: rect.height
+		});
+	}
+	function focusDay(time) {
+		(table.current?.querySelector(`[data-date="${keyOf(time)}"]`))?.focus();
+	}
+	function handleKeyDown(event) {
+		if (event.key === "Escape") {
+			setDismissed(true);
+			return;
+		}
+		const forward = isRtl(event.currentTarget) ? -1 : 1;
+		const day = weekday(current);
+		const target = {
+			ArrowRight: current + 7 * DAY * forward,
+			ArrowLeft: current - 7 * DAY * forward,
+			ArrowDown: current + DAY,
+			ArrowUp: current - DAY,
+			PageDown: current + 28 * DAY,
+			PageUp: current - 28 * DAY,
+			Home: event.ctrlKey ? start : start + (day - weekday(start) + 7) % 7 * DAY,
+			End: event.ctrlKey ? end : end - (weekday(end) - day + 7) % 7 * DAY
+		}[event.key];
+		if (target === void 0) return;
+		event.preventDefault();
+		const next = event.key.startsWith("Page") ? Math.min(Math.max(target, start), end) : target;
+		if (next < start || next > end) return;
+		focusDay(next);
+	}
+	const shown = hovered ?? (focused ? current : null);
+	const open = showTooltips && shown !== null && !dismissed;
+	const tooltipDay = shown === null ? null : dayAt(shown);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "contribution-graph",
+		className: cn("flex flex-col gap-3 text-xs", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "overflow-x-auto",
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: surface,
+				className: "relative w-fit",
+				children: [/* @__PURE__ */ jsxs("table", {
+					ref: table,
+					role: "grid",
+					"aria-labelledby": captionId,
+					className: "border-separate border-spacing-[3px]",
+					onKeyDown: handleKeyDown,
+					onPointerLeave: () => {
+						setHovered(null);
+					},
+					onFocus: () => {
+						setFocused(true);
+					},
+					onBlur: (event) => {
+						if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+					},
+					children: [
+						/* @__PURE__ */ jsx("caption", {
+							id: captionId,
+							className: "sr-only",
+							children: label ?? `${String(total)} ${total === 1 ? "contribution" : "contributions"} in ${String(year)}`
+						}),
+						/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "Weekday"
+							})
+						}), months.map((month, index) => /* @__PURE__ */ jsx("th", {
+							scope: "colgroup",
+							colSpan: month.span,
+							className: "h-4 p-0 text-start align-bottom font-normal whitespace-nowrap text-muted-foreground",
+							children: month.span > 1 ? month.name : /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: month.name
+							})
+						}, `${month.key}-${String(index)}`))] }) }),
+						/* @__PURE__ */ jsx("tbody", { children: names.days.map((name, row) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsxs("th", {
+							scope: "row",
+							className: "h-2.5 p-0 pe-1 text-start text-2xs leading-none font-normal text-muted-foreground",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: row % 2 ? "invisible" : void 0,
+								children: name.short
+							}), /* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: name.long
+							})]
+						}), Array.from({ length: weeks }, (_, week) => {
+							const time = gridStart + (week * 7 + row) * DAY;
+							if (time < start || time > end) return /* @__PURE__ */ jsx("td", {
+								role: "gridcell",
+								className: "p-0"
+							}, week);
+							const day = dayAt(time);
+							const key = keyOf(time);
+							return /* @__PURE__ */ jsxs("td", {
+								role: "gridcell",
+								"data-date": key,
+								"data-level": day.level,
+								tabIndex: time === current ? 0 : -1,
+								className: cn("rounded-[2px] p-0", focusRing),
+								onFocus: (event) => {
+									setActive(time);
+									setDismissed(false);
+									place(event.currentTarget);
+								},
+								onPointerEnter: (event) => {
+									setHovered(time);
+									setDismissed(false);
+									place(event.currentTarget);
+								},
+								children: [/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: cn(contributionGraphCellVariants({ level: day.level }), "transition-[scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] hover:scale-125")
+								}), /* @__PURE__ */ jsx("span", {
+									className: "sr-only",
+									children: day.text
+								})]
+							}, week);
+						})] }, name.long)) })
+					]
+				}), showTooltips ? /* @__PURE__ */ jsxs(Tooltip, {
+					open,
+					onOpenChange: (next) => {
+						if (!next) setDismissed(true);
+					},
+					children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							"data-slot": "contribution-graph-anchor",
+							className: "pointer-events-none absolute",
+							style: anchor
+						})
+					}), tooltipDay && shown !== null ? /* @__PURE__ */ jsxs(TooltipContent, { children: [/* @__PURE__ */ jsx("span", {
+						className: "block font-semibold",
+						children: formatCount(tooltipDay.count)
+					}), /* @__PURE__ */ jsx("span", {
+						className: "block opacity-80",
+						children: names.full(shown)
+					})] }) : null]
+				}) : null]
+			})
+		}), showLegend ? /* @__PURE__ */ jsxs("div", {
+			"data-slot": "contribution-graph-legend",
+			className: "flex items-center justify-end gap-1 text-muted-foreground",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "me-1",
+					children: lessLabel
+				}),
+				LEVELS.map((level) => /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: contributionGraphCellVariants({ level })
+				}, level)),
+				/* @__PURE__ */ jsx("span", {
+					className: "ms-1",
+					children: moreLabel
+				})
+			]
+		}) : null]
+	});
+}
+//#endregion
+export { ContributionGraph, contributionGraphCellVariants };
+
+//# sourceMappingURL=contribution-graph.js.map

package/dist/components/contribution-graph/contribution-graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contribution-graph.js","names":[],"sources":["../../../src/components/contribution-graph/contribution-graph.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Contribution Graph (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva } from \"class-variance-authority\";\nimport {\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/tooltip\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A GitHub-style year heatmap, as an ARIA grid: weekdays are rows, weeks are\n * columns, and every day is a gridcell whose screen-reader text is the whole\n * fact (\"3 contributions on Monday, 6 January 2025\"). One cell is in the tab\n * order (roving tabindex); arrow keys move a day or a week — mirrored in RTL,\n * where weeks run the other way — Home/End go to the ends of the weekday's\n * row, Ctrl+Home/End to the ends of the year, PageUp/PageDown by four weeks.\n *\n * There is one Dowel Tooltip, not 371. It is controlled, and its trigger is an\n * invisible anchor moved over whichever day is hovered or focused, so pointer\n * and keyboard users see the same tooltip. Escape dismisses it.\n *\n * Dates are calendar days in UTC throughout: \"2025-03-09\" is that day wherever\n * the reader is, which the source's local-time arithmetic did not guarantee.\n * Levels are the primary token mixed into muted at 25/50/75/100%.\n */\n\nconst DAY = 86_400_000;\n\nexport interface ContributionDay {\n  /** Calendar date, `YYYY-MM-DD`. */\n  date: string;\n  count: number;\n  /** 0–4. Derived from `count` when omitted. */\n  level?: number;\n}\n\nconst contributionGraphCellVariants = cva(\"block size-2.5 rounded-[2px]\", {\n  variants: {\n    level: {\n      0: \"bg-muted\",\n      1: \"bg-[color-mix(in_oklab,var(--color-primary)_25%,var(--color-muted))]\",\n      2: \"bg-[color-mix(in_oklab,var(--color-primary)_50%,var(--color-muted))]\",\n      3: \"bg-[color-mix(in_oklab,var(--color-primary)_75%,var(--color-muted))]\",\n      4: \"bg-primary\",\n    },\n  },\n  defaultVariants: { level: 0 },\n});\n\ntype Level = 0 | 1 | 2 | 3 | 4;\nconst LEVELS: Level[] = [0, 1, 2, 3, 4];\n\nexport interface ContributionGraphProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** One entry per day with activity. Missing days count as zero. */\n  data?: ContributionDay[];\n  /** The calendar year shown. Defaults to the current year. */\n  year?: number;\n  /** Locale for month, weekday and date names. */\n  locales?: Intl.LocalesArgument;\n  /** Show the Less → More legend. */\n  showLegend?: boolean;\n  /** Show a tooltip for the hovered or focused day. */\n  showTooltips?: boolean;\n  /** The grid's accessible name. Defaults to \"N contributions in YEAR\". */\n  label?: string;\n  /** Maps a count to a level 0–4. Defaults to quarters of the year's busiest day. */\n  getLevel?: (count: number, max: number) => number;\n  /** The text for one day, used as its accessible name and in the tooltip. */\n  formatCount?: (count: number) => string;\n  lessLabel?: string;\n  moreLabel?: string;\n}\n\nfunction defaultLevel(count: number, max: number): number {\n  if (count <= 0 || max <= 0) return 0;\n  return Math.min(4, Math.ceil((count / max) * 4));\n}\n\nfunction defaultCount(count: number): string {\n  if (count === 0) return \"No contributions\";\n  return `${String(count)} ${count === 1 ? \"contribution\" : \"contributions\"}`;\n}\n\nconst keyOf = (time: number) => new Date(time).toISOString().slice(0, 10);\nconst weekday = (time: number) => new Date(time).getUTCDay();\n\nfunction isRtl(element: Element) {\n  return element.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n}\n\n/** A year of activity as a keyboard-navigable heatmap grid. */\nexport function ContributionGraph({\n  className,\n  data = [],\n  year = new Date().getUTCFullYear(),\n  locales,\n  showLegend = true,\n  showTooltips = true,\n  label,\n  getLevel = defaultLevel,\n  formatCount = defaultCount,\n  lessLabel = \"Less\",\n  moreLabel = \"More\",\n  ...props\n}: ContributionGraphProps) {\n  const captionId = useId();\n  const table = useRef<HTMLTableElement>(null);\n  const surface = useRef<HTMLDivElement>(null);\n\n  const start = Date.UTC(year, 0, 1);\n  const end = Date.UTC(year, 11, 31);\n  const gridStart = start - weekday(start) * DAY;\n  const weeks = Math.round(((end + (6 - weekday(end)) * DAY - gridStart) / DAY + 1) / 7);\n\n  const [active, setActive] = useState(start);\n  const current = Math.min(Math.max(active, start), end);\n  const [hovered, setHovered] = useState<number | null>(null);\n  const [focused, setFocused] = useState(false);\n  const [dismissed, setDismissed] = useState(false);\n  const [anchor, setAnchor] = useState({ left: 0, top: 0, width: 0, height: 0 });\n\n  const { byDate, max, total } = useMemo(() => {\n    const map = new Map<string, ContributionDay>();\n    let busiest = 0;\n    let sum = 0;\n    for (const day of data) {\n      if (!day.date.startsWith(String(year))) continue;\n      map.set(day.date, day);\n      busiest = Math.max(busiest, day.count);\n      sum += day.count;\n    }\n    return { byDate: map, max: busiest, total: sum };\n  }, [data, year]);\n\n  const names = useMemo(() => {\n    const month = new Intl.DateTimeFormat(locales, { month: \"short\", timeZone: \"UTC\" });\n    const short = new Intl.DateTimeFormat(locales, { weekday: \"short\", timeZone: \"UTC\" });\n    const long = new Intl.DateTimeFormat(locales, { weekday: \"long\", timeZone: \"UTC\" });\n    const full = new Intl.DateTimeFormat(locales, { dateStyle: \"full\", timeZone: \"UTC\" });\n    // 1 January 2023 was a Sunday.\n    const sunday = Date.UTC(2023, 0, 1);\n    return {\n      month: (time: number) => month.format(time),\n      days: Array.from({ length: 7 }, (_, index) => ({\n        short: short.format(sunday + index * DAY),\n        long: long.format(sunday + index * DAY),\n      })),\n      full: (time: number) => full.format(time),\n    };\n  }, [locales]);\n\n  function dayAt(time: number) {\n    const entry = byDate.get(keyOf(time));\n    const count = entry?.count ?? 0;\n    const level = Math.min(\n      4,\n      Math.max(0, Math.round(entry?.level ?? getLevel(count, max))),\n    ) as Level;\n    return { count, level, text: `${formatCount(count)}, ${names.full(time)}` };\n  }\n\n  // Month headers: consecutive weeks grouped by the month their first in-year day falls in.\n  const months: { key: string; name: string; span: number }[] = [];\n  for (let week = 0; week < weeks; week++) {\n    const first = Math.max(gridStart + week * 7 * DAY, start);\n    const month = new Date(first).getUTCMonth();\n    const last = months[months.length - 1];\n    if (last?.key === String(month)) last.span++;\n    else months.push({ key: String(month), name: names.month(first), span: 1 });\n  }\n\n  function place(cell: HTMLElement) {\n    const box = surface.current?.getBoundingClientRect();\n    const rect = cell.getBoundingClientRect();\n    setAnchor({\n      left: rect.left - (box?.left ?? 0),\n      top: rect.top - (box?.top ?? 0),\n      width: rect.width,\n      height: rect.height,\n    });\n  }\n\n  function focusDay(time: number) {\n    const cell = table.current?.querySelector<HTMLElement>(`[data-date=\"${keyOf(time)}\"]`);\n    cell?.focus();\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLTableElement>) {\n    if (event.key === \"Escape\") {\n      setDismissed(true);\n      return;\n    }\n    const forward = isRtl(event.currentTarget) ? -1 : 1;\n    const day = weekday(current);\n    const targets: Record<string, number> = {\n      ArrowRight: current + 7 * DAY * forward,\n      ArrowLeft: current - 7 * DAY * forward,\n      ArrowDown: current + DAY,\n      ArrowUp: current - DAY,\n      PageDown: current + 28 * DAY,\n      PageUp: current - 28 * DAY,\n      Home: event.ctrlKey ? start : start + ((day - weekday(start) + 7) % 7) * DAY,\n      End: event.ctrlKey ? end : end - ((weekday(end) - day + 7) % 7) * DAY,\n    };\n    const target = targets[event.key];\n    if (target === undefined) return;\n    event.preventDefault();\n    const next = event.key.startsWith(\"Page\") ? Math.min(Math.max(target, start), end) : target;\n    if (next < start || next > end) return;\n    focusDay(next);\n  }\n\n  const shown = hovered ?? (focused ? current : null);\n  const open = showTooltips && shown !== null && !dismissed;\n  const tooltipDay = shown === null ? null : dayAt(shown);\n\n  return (\n    <div\n      data-slot=\"contribution-graph\"\n      className={cn(\"flex flex-col gap-3 text-xs\", className)}\n      {...props}\n    >\n      <div className=\"overflow-x-auto\">\n        <div ref={surface} className=\"relative w-fit\">\n          <table\n            ref={table}\n            role=\"grid\"\n            aria-labelledby={captionId}\n            className=\"border-separate border-spacing-[3px]\"\n            onKeyDown={handleKeyDown}\n            onPointerLeave={() => {\n              setHovered(null);\n            }}\n            onFocus={() => {\n              setFocused(true);\n            }}\n            onBlur={(event) => {\n              if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);\n            }}\n          >\n            <caption id={captionId} className=\"sr-only\">\n              {label ??\n                `${String(total)} ${total === 1 ? \"contribution\" : \"contributions\"} in ${String(year)}`}\n            </caption>\n            <thead>\n              <tr>\n                <th scope=\"col\">\n                  <span className=\"sr-only\">Weekday</span>\n                </th>\n                {months.map((month, index) => (\n                  <th\n                    key={`${month.key}-${String(index)}`}\n                    scope=\"colgroup\"\n                    colSpan={month.span}\n                    className=\"h-4 p-0 text-start align-bottom font-normal whitespace-nowrap text-muted-foreground\"\n                  >\n                    {month.span > 1 ? (\n                      month.name\n                    ) : (\n                      <span className=\"sr-only\">{month.name}</span>\n                    )}\n                  </th>\n                ))}\n              </tr>\n            </thead>\n            <tbody>\n              {names.days.map((name, row) => (\n                <tr key={name.long}>\n                  <th\n                    scope=\"row\"\n                    className=\"h-2.5 p-0 pe-1 text-start text-2xs leading-none font-normal text-muted-foreground\"\n                  >\n                    <span aria-hidden=\"true\" className={row % 2 ? \"invisible\" : undefined}>\n                      {name.short}\n                    </span>\n                    <span className=\"sr-only\">{name.long}</span>\n                  </th>\n                  {Array.from({ length: weeks }, (_, week) => {\n                    const time = gridStart + (week * 7 + row) * DAY;\n                    if (time < start || time > end) {\n                      return <td key={week} role=\"gridcell\" className=\"p-0\" />;\n                    }\n                    const day = dayAt(time);\n                    const key = keyOf(time);\n                    return (\n                      <td\n                        key={week}\n                        role=\"gridcell\"\n                        data-date={key}\n                        data-level={day.level}\n                        tabIndex={time === current ? 0 : -1}\n                        className={cn(\"rounded-[2px] p-0\", focusRing)}\n                        onFocus={(event) => {\n                          setActive(time);\n                          setDismissed(false);\n                          place(event.currentTarget);\n                        }}\n                        onPointerEnter={(event) => {\n                          setHovered(time);\n                          setDismissed(false);\n                          place(event.currentTarget);\n                        }}\n                      >\n                        <span\n                          aria-hidden=\"true\"\n                          className={cn(\n                            contributionGraphCellVariants({ level: day.level }),\n                            \"transition-[scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)] hover:scale-125\",\n                          )}\n                        />\n                        <span className=\"sr-only\">{day.text}</span>\n                      </td>\n                    );\n                  })}\n                </tr>\n              ))}\n            </tbody>\n          </table>\n          {showTooltips ? (\n            <Tooltip\n              open={open}\n              onOpenChange={(next) => {\n                if (!next) setDismissed(true);\n              }}\n            >\n              <TooltipTrigger asChild>\n                <span\n                  aria-hidden=\"true\"\n                  data-slot=\"contribution-graph-anchor\"\n                  className=\"pointer-events-none absolute\"\n                  style={anchor}\n                />\n              </TooltipTrigger>\n              {tooltipDay && shown !== null ? (\n                <TooltipContent>\n                  <span className=\"block font-semibold\">{formatCount(tooltipDay.count)}</span>\n                  <span className=\"block opacity-80\">{names.full(shown)}</span>\n                </TooltipContent>\n              ) : null}\n            </Tooltip>\n          ) : null}\n        </div>\n      </div>\n      {showLegend ? (\n        <div\n          data-slot=\"contribution-graph-legend\"\n          className=\"flex items-center justify-end gap-1 text-muted-foreground\"\n        >\n          <span className=\"me-1\">{lessLabel}</span>\n          {LEVELS.map((level) => (\n            <span\n              key={level}\n              aria-hidden=\"true\"\n              className={contributionGraphCellVariants({ level })}\n            />\n          ))}\n          <span className=\"ms-1\">{moreLabel}</span>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport { contributionGraphCellVariants };\n"],"mappings":"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"}

package/dist/components/contribution-graph/index.d.ts

@@ -0,0 +1,2 @@
+import { ContributionDay, ContributionGraph, ContributionGraphProps, contributionGraphCellVariants } from "./contribution-graph.js";
+export { type ContributionDay, ContributionGraph, type ContributionGraphProps, contributionGraphCellVariants };

package/dist/components/contribution-graph/index.js

@@ -0,0 +1,2 @@
+import { ContributionGraph, contributionGraphCellVariants } from "./contribution-graph.js";
+export { ContributionGraph, contributionGraphCellVariants };

package/dist/components/contribution-graph/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/contribution-graph/meta.ts
+const meta = defineMeta({
+	name: "contribution-graph",
+	title: "Contribution Graph",
+	description: "A GitHub-style year heatmap of daily counts — a keyboard-navigable grid with a tooltip per day.",
+	category: "data",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["tooltip"],
+	files: ["contribution-graph.tsx"],
+	a11y: "A table with role=\"grid\", named by its caption (\"1,234 contributions in 2025\" or `label`). Weekdays are row headers and months column headers; every day is a gridcell whose screen-reader text states the count and the full date, so colour never carries the value. One day is tabbable (roving tabindex): arrows move by day and week (mirrored in RTL), Home/End to the ends of the weekday row, Ctrl+Home/End to the ends of the year, PageUp/PageDown by four weeks. The tooltip follows keyboard focus as well as hover and Escape dismisses it."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/contribution-graph/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/contribution-graph/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"contribution-graph\",\n  title: \"Contribution Graph\",\n  description:\n    \"A GitHub-style year heatmap of daily counts — a keyboard-navigable grid with a tooltip per day.\",\n  category: \"data\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"tooltip\"],\n  files: [\"contribution-graph.tsx\"],\n  a11y:\n    'A table with role=\"grid\", named by its caption (\"1,234 contributions in 2025\" or `label`). Weekdays are row ' +\n    \"headers and months column headers; every day is a gridcell whose screen-reader text states the count and the \" +\n    \"full date, so colour never carries the value. One day is tabbable (roving tabindex): arrows move by day and \" +\n    \"week (mirrored in RTL), Home/End to the ends of the weekday row, Ctrl+Home/End to the ends of the year, \" +\n    \"PageUp/PageDown by four weeks. The tooltip follows keyboard focus as well as hover and Escape dismisses it.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,SAAS;CAChC,OAAO,CAAC,wBAAwB;CAChC,MACE;AAKJ,CAAC"}

package/dist/components/copy-button/copy-button.d.ts

@@ -0,0 +1,81 @@
+import { ButtonProps } from "../button/button.js";
+import "../button/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+//#region src/components/copy-button/copy-button.d.ts
+declare const copyButtonVariants: (props?: ({
+  tone?: "current" | "primary" | "success" | "warning" | "destructive" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CopyButtonState = "idle" | "copied" | "error";
+interface CopyButtonBaseProps extends Omit<ButtonProps, "value" | "asChild">, VariantProps<typeof copyButtonVariants> {
+  /**
+   * What goes on the clipboard. Pass a function to read it at the moment of
+   * the click — the current contents of an editor, say — rather than at render.
+   * Required unless the deprecated `getText` is given.
+   */
+  value?: string | (() => string);
+  /**
+   * Replaces the label while the confirmation shows. On an icon-only button a
+   * string `copiedLabel` is announced instead, as Code Block's original did.
+   */
+  copiedLabel?: ReactNode;
+  /**
+   * Announced to assistive technology on success. Defaults to "Copied", or to
+   * a string `copiedLabel` on an icon-only button, where it is never shown.
+   */
+  copiedAnnouncement?: string;
+  /** Announced to assistive technology when the clipboard refuses the write. */
+  errorAnnouncement?: string;
+  /**
+   * How long the confirmation stays, in milliseconds (default 2000). A
+   * behaviour timer, not a duration.
+   */
+  timeout?: number;
+  /** The resting icon. Defaults to a copy glyph. */
+  icon?: ReactNode;
+  /** The confirmation icon. Defaults to a check. */
+  copiedIcon?: ReactNode;
+  /** Called with the copied text once the clipboard write has resolved. */
+  onCopied?: (text: string) => void;
+  /** Called when the clipboard is unavailable or refuses the write. */
+  onCopyError?: (error: unknown) => void;
+  /**
+   * Reads the text to copy at the moment of the click.
+   *
+   * @deprecated Use `value`, which also takes a function: `value={() => text}`.
+   */
+  getText?: () => string;
+  /**
+   * The accessible name of an icon-only button.
+   *
+   * @deprecated Use `aria-label`, or pass a visible label as children.
+   */
+  label?: string;
+  /**
+   * How long the confirmation stays, in milliseconds.
+   *
+   * @deprecated Use `timeout`.
+   */
+  resetAfter?: number;
+}
+/**
+ * Props for {@link CopyButton}. One source of text is required: `value`, or
+ * the deprecated `getText` kept from Code Block's original copy button.
+ */
+type CopyButtonProps = CopyButtonBaseProps & ({
+  value: string | (() => string);
+} | {
+  getText: () => string;
+});
+/**
+ * Copies a value to the clipboard and confirms it.
+ *
+ * The confirmation is state, not decoration: the icon morphs to a check, the
+ * label (if any) becomes `copiedLabel`, and a polite live region announces it,
+ * then everything reverts after `timeout`. A refused write reports through
+ * `onCopyError` and the error announcement — never the check.
+ */
+declare function CopyButton({ className, value, getText, label, resetAfter, children, copiedLabel, copiedAnnouncement, errorAnnouncement, timeout, icon, copiedIcon, tone, variant, size, onClick, onCopied, onCopyError, "aria-label": ariaLabel, ...props }: CopyButtonProps): import("react").JSX.Element;
+//#endregion
+export { CopyButton, CopyButtonProps, CopyButtonState, copyButtonVariants };
+//# sourceMappingURL=copy-button.d.ts.map

package/dist/components/copy-button/copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.d.ts","names":[],"sources":["../../../src/components/copy-button/copy-button.tsx"],"mappings":";;;;;cAoBM,qBAAkB;;6CAetB;KA0CU;UAEF,4BACA,KAAK,mCAAmC,oBAAoB;;;;;;EAMpE;;;;;EAKA,cAAc;;;;;EAKd;;EAEA;;;;;EAKA;;EAEA,OAAO;;EAEP,aAAa;;EAEb,YAAY;;EAEZ,eAAe;;;;;;EAMf;;;;;;EAMA;;;;;;EAMA;;;;;;KAOU,kBAAkB;EACzB;;EAAqC;;;;;;;;;;iBAU1B,aACd,WACA,OACA,SACA,OACA,YACA,UACA,aACA,oBACA,mBACA,SACA,MACA,YACA,MACA,SACA,MACA,SACA,UACA,2BACc,cACX,SACF,kCAAe,IAAA"}

package/dist/components/copy-button/copy-button.js

@@ -0,0 +1,146 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/copy-button/copy-button.tsx
+const copyButtonVariants = cva("", {
+	variants: { 
+	/** Colour of the confirmation icon. The label keeps the button's colour. */
+tone: {
+		current: "",
+		primary: "text-primary",
+		success: "text-success",
+		warning: "text-warning",
+		destructive: "text-destructive",
+		info: "text-info"
+	} },
+	defaultVariants: { tone: "current" }
+});
+const layer = cn("col-start-1 row-start-1 inline-flex items-center justify-center", "transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]");
+const shown = "scale-100 opacity-100";
+const hidden = "scale-50 opacity-0";
+function CopyIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "8",
+			y: "8",
+			width: "14",
+			height: "14",
+			rx: "2"
+		}), /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })]
+	});
+}
+function CheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+	});
+}
+/**
+* Copies a value to the clipboard and confirms it.
+*
+* The confirmation is state, not decoration: the icon morphs to a check, the
+* label (if any) becomes `copiedLabel`, and a polite live region announces it,
+* then everything reverts after `timeout`. A refused write reports through
+* `onCopyError` and the error announcement — never the check.
+*/
+function CopyButton({ className, value, getText, label, resetAfter, children, copiedLabel = "Copied", copiedAnnouncement, errorAnnouncement = "Copy failed", timeout, icon, copiedIcon, tone, variant = "outline", size, onClick, onCopied, onCopyError, "aria-label": ariaLabel, ...props }) {
+	const [state, setState] = useState("idle");
+	const duration = timeout ?? resetAfter ?? 2e3;
+	const source = value ?? getText;
+	const missingSource = source === void 0;
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || !missingSource) return;
+		console.warn("CopyButton: pass `value` so there is something to copy.");
+	}, [missingSource]);
+	const timer = useRef(null);
+	useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	const settle = (next) => {
+		setState(next);
+		if (timer.current) clearTimeout(timer.current);
+		timer.current = setTimeout(() => {
+			setState("idle");
+		}, duration);
+	};
+	async function copy() {
+		try {
+			if (source === void 0) throw new Error("CopyButton has no `value` to copy.");
+			const text = typeof source === "function" ? source() : source;
+			await navigator.clipboard.writeText(text);
+			settle("copied");
+			onCopied?.(text);
+		} catch (error) {
+			settle("error");
+			onCopyError?.(error);
+		}
+	}
+	function handleClick(event) {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		copy();
+	}
+	const copied = state === "copied";
+	const hasLabel = children !== void 0 && children !== null && children !== false;
+	const announcement = copiedAnnouncement ?? (!hasLabel && typeof copiedLabel === "string" ? copiedLabel : "Copied");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Button, {
+		"data-slot": "copy-button",
+		"data-state": state,
+		variant,
+		size: size ?? (hasLabel ? "md" : "icon"),
+		"aria-label": ariaLabel ?? (hasLabel ? void 0 : label ?? "Copy"),
+		className,
+		onClick: handleClick,
+		...props,
+		children: [/* @__PURE__ */ jsxs("span", {
+			"data-slot": "copy-button-icon",
+			className: "grid",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn(layer, copied ? hidden : shown),
+				children: icon ?? /* @__PURE__ */ jsx(CopyIcon, {})
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn(layer, copyButtonVariants({ tone }), copied ? shown : hidden),
+				children: copiedIcon ?? /* @__PURE__ */ jsx(CheckIcon, {})
+			})]
+		}), hasLabel ? /* @__PURE__ */ jsxs("span", {
+			"data-slot": "copy-button-label",
+			className: "grid",
+			children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": copied || void 0,
+				className: cn(layer, copied ? hidden : shown),
+				children
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": !copied || void 0,
+				className: cn(layer, copied ? shown : hidden),
+				children: copiedLabel
+			})]
+		}) : null]
+	}), /* @__PURE__ */ jsx("span", {
+		role: "status",
+		"aria-live": "polite",
+		className: "sr-only",
+		children: copied ? announcement : state === "error" ? errorAnnouncement : ""
+	})] });
+}
+//#endregion
+export { CopyButton, copyButtonVariants };
+
+//# sourceMappingURL=copy-button.js.map

package/dist/components/copy-button/copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.js","names":[],"sources":["../../../src/components/copy-button/copy-button.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Button Copy (MIT, © 2024 Eduardo Calvo) and amicro \"Copy Hash\" (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useEffect, useRef, useState, type MouseEvent, type ReactNode } from \"react\";\n\nimport { Button, type ButtonProps } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * The sources swap the icon on hover (amicro) or after a fake one-second\n * \"loading\" delay (SmoothUI). Here the swap reports what actually happened: it\n * morphs only once the clipboard write has resolved, and a refused write never\n * shows the check.\n *\n * Both icons, and both labels, share one grid cell. The button is always as\n * wide as its longer label, so \"Copy\" becoming \"Copied\" does not shove its\n * neighbours sideways, and the morph is a pure opacity/scale transition.\n */\n\nconst copyButtonVariants = cva(\"\", {\n  variants: {\n    /** Colour of the confirmation icon. The label keeps the button's colour. */\n    tone: {\n      current: \"\",\n      primary: \"text-primary\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n      destructive: \"text-destructive\",\n      info: \"text-info\",\n    },\n  },\n  defaultVariants: {\n    tone: \"current\",\n  },\n});\n\nconst layer = cn(\n  \"col-start-1 row-start-1 inline-flex items-center justify-center\",\n  \"transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n);\nconst shown = \"scale-100 opacity-100\";\nconst hidden = \"scale-50 opacity-0\";\n\nfunction CopyIcon() {\n  return (\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    >\n      <rect x=\"8\" y=\"8\" width=\"14\" height=\"14\" rx=\"2\" />\n      <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\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    >\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nexport type CopyButtonState = \"idle\" | \"copied\" | \"error\";\n\ninterface CopyButtonBaseProps\n  extends Omit<ButtonProps, \"value\" | \"asChild\">, VariantProps<typeof copyButtonVariants> {\n  /**\n   * What goes on the clipboard. Pass a function to read it at the moment of\n   * the click — the current contents of an editor, say — rather than at render.\n   * Required unless the deprecated `getText` is given.\n   */\n  value?: string | (() => string);\n  /**\n   * Replaces the label while the confirmation shows. On an icon-only button a\n   * string `copiedLabel` is announced instead, as Code Block's original did.\n   */\n  copiedLabel?: ReactNode;\n  /**\n   * Announced to assistive technology on success. Defaults to \"Copied\", or to\n   * a string `copiedLabel` on an icon-only button, where it is never shown.\n   */\n  copiedAnnouncement?: string;\n  /** Announced to assistive technology when the clipboard refuses the write. */\n  errorAnnouncement?: string;\n  /**\n   * How long the confirmation stays, in milliseconds (default 2000). A\n   * behaviour timer, not a duration.\n   */\n  timeout?: number;\n  /** The resting icon. Defaults to a copy glyph. */\n  icon?: ReactNode;\n  /** The confirmation icon. Defaults to a check. */\n  copiedIcon?: ReactNode;\n  /** Called with the copied text once the clipboard write has resolved. */\n  onCopied?: (text: string) => void;\n  /** Called when the clipboard is unavailable or refuses the write. */\n  onCopyError?: (error: unknown) => void;\n  /**\n   * Reads the text to copy at the moment of the click.\n   *\n   * @deprecated Use `value`, which also takes a function: `value={() => text}`.\n   */\n  getText?: () => string;\n  /**\n   * The accessible name of an icon-only button.\n   *\n   * @deprecated Use `aria-label`, or pass a visible label as children.\n   */\n  label?: string;\n  /**\n   * How long the confirmation stays, in milliseconds.\n   *\n   * @deprecated Use `timeout`.\n   */\n  resetAfter?: number;\n}\n\n/**\n * Props for {@link CopyButton}. One source of text is required: `value`, or\n * the deprecated `getText` kept from Code Block's original copy button.\n */\nexport type CopyButtonProps = CopyButtonBaseProps &\n  ({ value: string | (() => string) } | { getText: () => string });\n\n/**\n * Copies a value to the clipboard and confirms it.\n *\n * The confirmation is state, not decoration: the icon morphs to a check, the\n * label (if any) becomes `copiedLabel`, and a polite live region announces it,\n * then everything reverts after `timeout`. A refused write reports through\n * `onCopyError` and the error announcement — never the check.\n */\nexport function CopyButton({\n  className,\n  value,\n  getText,\n  label,\n  resetAfter,\n  children,\n  copiedLabel = \"Copied\",\n  copiedAnnouncement,\n  errorAnnouncement = \"Copy failed\",\n  timeout,\n  icon,\n  copiedIcon,\n  tone,\n  variant = \"outline\",\n  size,\n  onClick,\n  onCopied,\n  onCopyError,\n  \"aria-label\": ariaLabel,\n  ...props\n}: CopyButtonProps) {\n  const [state, setState] = useState<CopyButtonState>(\"idle\");\n  const duration = timeout ?? resetAfter ?? 2000;\n  const source = value ?? getText;\n\n  const missingSource = source === undefined;\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\" || !missingSource) return;\n    // The type requires one; this catches untyped callers before a click\n    // reports a failure with no obvious cause.\n    console.warn(\"CopyButton: pass `value` so there is something to copy.\");\n  }, [missingSource]);\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const settle = (next: CopyButtonState) => {\n    setState(next);\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = setTimeout(() => {\n      setState(\"idle\");\n    }, duration);\n  };\n\n  async function copy() {\n    try {\n      if (source === undefined) throw new Error(\"CopyButton has no `value` to copy.\");\n      const text = typeof source === \"function\" ? source() : source;\n      // Called synchronously within the click, so the user activation that\n      // Safari requires for clipboard access is still live.\n      await navigator.clipboard.writeText(text);\n      settle(\"copied\");\n      onCopied?.(text);\n    } catch (error) {\n      // Refused, or no clipboard API outside a secure context. Saying so\n      // beats pretending it worked.\n      settle(\"error\");\n      onCopyError?.(error);\n    }\n  }\n\n  function handleClick(event: MouseEvent<HTMLButtonElement>) {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    void copy();\n  }\n\n  const copied = state === \"copied\";\n  const hasLabel = children !== undefined && children !== null && children !== false;\n  // An icon-only button never shows copiedLabel, and Code Block's original\n  // copy button announced it, so a string one is what gets announced there.\n  const announcement =\n    copiedAnnouncement ??\n    (!hasLabel && typeof copiedLabel === \"string\" ? copiedLabel : \"Copied\");\n\n  return (\n    <>\n      <Button\n        data-slot=\"copy-button\"\n        data-state={state}\n        variant={variant}\n        size={size ?? (hasLabel ? \"md\" : \"icon\")}\n        aria-label={ariaLabel ?? (hasLabel ? undefined : (label ?? \"Copy\"))}\n        className={className}\n        onClick={handleClick}\n        {...props}\n      >\n        <span data-slot=\"copy-button-icon\" className=\"grid\">\n          <span aria-hidden=\"true\" className={cn(layer, copied ? hidden : shown)}>\n            {icon ?? <CopyIcon />}\n          </span>\n          <span\n            aria-hidden=\"true\"\n            className={cn(layer, copyButtonVariants({ tone }), copied ? shown : hidden)}\n          >\n            {copiedIcon ?? <CheckIcon />}\n          </span>\n        </span>\n        {hasLabel ? (\n          <span data-slot=\"copy-button-label\" className=\"grid\">\n            <span\n              aria-hidden={copied || undefined}\n              className={cn(layer, copied ? hidden : shown)}\n            >\n              {children}\n            </span>\n            <span\n              aria-hidden={!copied || undefined}\n              className={cn(layer, copied ? shown : hidden)}\n            >\n              {copiedLabel}\n            </span>\n          </span>\n        ) : null}\n      </Button>\n      {/* A sibling rather than a child, so the announcement never becomes part\n          of the button's accessible name. */}\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {copied ? announcement : state === \"error\" ? errorAnnouncement : \"\"}\n      </span>\n    </>\n  );\n}\n\nexport { copyButtonVariants };\n"],"mappings":"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"}

package/dist/components/copy-button/index.d.ts

@@ -0,0 +1,2 @@
+import { CopyButton, CopyButtonProps, CopyButtonState, copyButtonVariants } from "./copy-button.js";
+export { CopyButton, type CopyButtonProps, type CopyButtonState, copyButtonVariants };

package/dist/components/copy-button/index.js

@@ -0,0 +1,2 @@
+import { CopyButton, copyButtonVariants } from "./copy-button.js";
+export { CopyButton, copyButtonVariants };