@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/slosh-slider/slosh-slider.js

@@ -0,0 +1,140 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Direction, Slider } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { MotionConfig, motion, useSpring, useTransform, useVelocity } from "motion/react";
+//#region src/components/slosh-slider/slosh-slider.tsx
+/** Extra width the fill carries past its value, so the lean has room to show. */
+const PAD = 16;
+/** The furthest the leading edge may lean, in px. */
+const MAX_LEAN = 12;
+const sloshSliderVariants = cva(cn("relative flex h-10 w-full touch-none items-center overflow-hidden select-none", "cursor-ew-resize bg-(--slosh-track) data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55", "has-[[data-slot=slosh-slider-thumb]:focus-visible]:ring-2 has-[[data-slot=slosh-slider-thumb]:focus-visible]:ring-ring/55", "has-[[data-slot=slosh-slider-thumb]:focus-visible]:ring-offset-2 has-[[data-slot=slosh-slider-thumb]:focus-visible]:ring-offset-background"), {
+	variants: { 
+	/** `light`: a muted track filled with the card surface. `dark`: a foreground slab. */
+fill: {
+		light: cn("[--slosh-track:color-mix(in_oklab,var(--color-foreground)_11%,var(--color-card))]", "[--slosh-fill:var(--color-card)] [--slosh-knob:var(--color-foreground)]"),
+		dark: cn("[--slosh-knob:var(--color-background)] [--slosh-track:var(--color-foreground)]", "[--slosh-fill:color-mix(in_oklab,var(--color-background)_15%,var(--color-foreground))]")
+	} },
+	defaultVariants: { fill: "light" }
+});
+const clamp = (value, lo, hi) => Math.min(Math.max(value, lo), hi);
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function subscribeToMotionPreference(onChange) {
+	const query = window.matchMedia(REDUCED_MOTION);
+	query.addEventListener("change", onChange);
+	return () => query.removeEventListener("change", onChange);
+}
+/** Live: turning the setting on mid-session stops the slosh at once. */
+function usePrefersReducedMotion() {
+	return useSyncExternalStore(subscribeToMotionPreference, () => window.matchMedia(REDUCED_MOTION).matches, () => false);
+}
+/** Maps the three feel levels to spring constants tuned against the source. */
+function sloshSpring(viscosity, momentum) {
+	return {
+		stiffness: 600,
+		damping: 20 + clamp(viscosity, 0, 100) * .7,
+		mass: .4 + clamp(momentum, 0, 100) / 100 * 1.2
+	};
+}
+/** A liquid-fill slider: the knob jumps, the fill sloshes after it. */
+function SloshSlider({ className, style, fill: fillVariant, stroke = false, value: valueProp, defaultValue = 62, onValueChange, onValueCommit, min = 0, max = 100, step = 1, largeStep = 10, viscosity = 15, momentum = 55, tilt = 45, corner = 13, disabled, formatValue, dir: dirProp, onKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuetext": ariaValueText, ...props }) {
+	const dir = Direction.useDirection(dirProp);
+	const [uncontrolled, setUncontrolled] = useState(defaultValue);
+	const controlled = valueProp !== void 0;
+	const value = clamp(controlled ? valueProp : uncontrolled, min, max);
+	const reduceMotion = usePrefersReducedMotion();
+	const range = max - min;
+	const percent = range > 0 ? (value - min) / range * 100 : 0;
+	const level = useSpring(percent, sloshSpring(viscosity, momentum));
+	const velocity = useVelocity(level);
+	const gain = reduceMotion ? 0 : clamp(tilt, 0, 100) / 100 * .07;
+	const live = useRef({
+		gain,
+		rtl: dir === "rtl"
+	});
+	useEffect(() => {
+		live.current = {
+			gain,
+			rtl: dir === "rtl"
+		};
+	}, [gain, dir]);
+	const lean = useTransform(velocity, (v) => clamp(v * live.current.gain, -12, MAX_LEAN));
+	const width = useTransform(level, (p) => `calc(${String(clamp(p, 0, 100))}% + ${String(PAD)}px)`);
+	const clipPath = useTransform(lean, (l) => live.current.rtl ? `polygon(${String(PAD - l)}px 0, 100% 0, 100% 100%, ${String(PAD + l)}px 100%)` : `polygon(0 0, calc(100% - ${String(PAD - l)}px) 0, calc(100% - ${String(PAD + l)}px) 100%, 0 100%)`);
+	const first = useRef(true);
+	useEffect(() => {
+		if (first.current || reduceMotion) level.jump(percent);
+		else level.set(percent);
+		first.current = false;
+	}, [
+		percent,
+		reduceMotion,
+		level
+	]);
+	useMissingNameWarning(ariaLabel, ariaLabelledBy);
+	function update(next) {
+		if (next === value) return;
+		if (!controlled) setUncontrolled(next);
+		onValueChange?.(next);
+	}
+	function handleKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled) return;
+		if (event.key !== "PageUp" && event.key !== "PageDown") return;
+		event.preventDefault();
+		const raw = value + (event.key === "PageUp" ? 1 : -1) * largeStep * step;
+		const next = clamp(Math.round((raw - min) / step) * step + min, min, max);
+		update(next);
+		onValueCommit?.(next);
+	}
+	return /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsxs(Slider.Root, {
+			"data-slot": "slosh-slider",
+			value: [value],
+			min,
+			max,
+			step,
+			disabled,
+			dir: dirProp,
+			onValueChange: ([next]) => next !== void 0 && update(next),
+			onValueCommit: ([next]) => next !== void 0 && onValueCommit?.(next),
+			onKeyDown: handleKeyDown,
+			className: cn(sloshSliderVariants({ fill: fillVariant }), stroke && "shadow-[inset_0_0_0_1px_var(--color-border)]", className),
+			style: {
+				borderRadius: `${String(clamp(corner, 0, 20))}px`,
+				...style
+			},
+			...props,
+			children: [/* @__PURE__ */ jsx(motion.span, {
+				"data-slot": "slosh-slider-fill",
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-y-0 start-0 bg-(--slosh-fill)",
+				style: {
+					width,
+					clipPath
+				}
+			}), /* @__PURE__ */ jsx(Slider.Thumb, {
+				"data-slot": "slosh-slider-thumb",
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-valuetext": ariaValueText ?? formatValue?.(value),
+				className: "block h-7 w-[3px] rounded-full bg-(--slosh-knob) outline-none"
+			})]
+		})
+	});
+}
+/** Warns, in development only, when the thumb would render unnamed. */
+function useMissingNameWarning(ariaLabel, ariaLabelledBy) {
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (ariaLabel ?? ariaLabelledBy) return;
+		console.warn("[SloshSlider] The slider has no accessible name. Pass aria-label or aria-labelledby.");
+	}, [ariaLabel, ariaLabelledBy]);
+}
+//#endregion
+export { SloshSlider, sloshSliderVariants, sloshSpring };
+
+//# sourceMappingURL=slosh-slider.js.map

package/dist/components/slosh-slider/slosh-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slosh-slider.js","names":["SliderPrimitive"],"sources":["../../../src/components/slosh-slider/slosh-slider.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Slosh slider (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { MotionConfig, motion, useSpring, useTransform, useVelocity } from \"motion/react\";\nimport { Direction, Slider as SliderPrimitive } from \"radix-ui\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A slider whose fill behaves like liquid in a tube. The knob — the Radix\n * thumb, drawn as a thin bar — jumps to the value at once; the fill behind it\n * is a damped spring chasing that value, so it lags on the way, overshoots\n * when you stop and settles. Its leading edge is a parallelogram whose lean\n * follows the fill's velocity, so the surface tilts in the direction of travel.\n *\n * That is continuous physics with velocity, which is what `motion` is for here.\n * Under reduced motion the fill jumps with the knob and never leans.\n *\n * Semantics are entirely Radix's: a role=\"slider\" thumb with pointer\n * jump-to-value, arrows, Home/End, right-to-left and a form input. Page Up/Down\n * are taken over so they move by `largeStep` rather than Radix's fixed ten\n * steps.\n */\n\n/** Extra width the fill carries past its value, so the lean has room to show. */\nconst PAD = 16;\n/** The furthest the leading edge may lean, in px. */\nconst MAX_LEAN = 12;\n\nconst sloshSliderVariants = cva(\n  cn(\n    \"relative flex h-10 w-full touch-none items-center overflow-hidden select-none\",\n    \"cursor-ew-resize bg-(--slosh-track) data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55\",\n    \"has-[[data-slot=slosh-slider-thumb]:focus-visible]:ring-2 has-[[data-slot=slosh-slider-thumb]:focus-visible]:ring-ring/55\",\n    \"has-[[data-slot=slosh-slider-thumb]:focus-visible]:ring-offset-2 has-[[data-slot=slosh-slider-thumb]:focus-visible]:ring-offset-background\",\n  ),\n  {\n    variants: {\n      /** `light`: a muted track filled with the card surface. `dark`: a foreground slab. */\n      fill: {\n        light: cn(\n          \"[--slosh-track:color-mix(in_oklab,var(--color-foreground)_11%,var(--color-card))]\",\n          \"[--slosh-fill:var(--color-card)] [--slosh-knob:var(--color-foreground)]\",\n        ),\n        dark: cn(\n          \"[--slosh-knob:var(--color-background)] [--slosh-track:var(--color-foreground)]\",\n          \"[--slosh-fill:color-mix(in_oklab,var(--color-background)_15%,var(--color-foreground))]\",\n        ),\n      },\n    },\n    defaultVariants: {\n      fill: \"light\",\n    },\n  },\n);\n\ntype RootProps = ComponentPropsWithRef<typeof SliderPrimitive.Root>;\n\nexport interface SloshSliderProps\n  extends\n    Omit<\n      RootProps,\n      | \"value\"\n      | \"defaultValue\"\n      | \"onValueChange\"\n      | \"onValueCommit\"\n      | \"orientation\"\n      | \"inverted\"\n      | \"minStepsBetweenThumbs\"\n      | \"children\"\n    >,\n    VariantProps<typeof sloshSliderVariants> {\n  /** Controlled value. */\n  value?: number;\n  /** Initial value when uncontrolled. */\n  defaultValue?: number;\n  /** Called on every change while dragging or keying. */\n  onValueChange?: (value: number) => void;\n  /** Called when an interaction ends: pointer released or key pressed. */\n  onValueCommit?: (value: number) => void;\n  /** Steps moved by Page Up / Page Down (multiplied by `step`). */\n  largeStep?: number;\n  /** 0–100. Damping: higher is thicker liquid — less slosh, more lag. */\n  viscosity?: number;\n  /** 0–100. The fill's mass: higher overshoots further and settles slower. */\n  momentum?: number;\n  /** 0–100. How far the leading edge leans per unit of fill velocity. */\n  tilt?: number;\n  /** 0–20. Corner radius of the bar, in px. */\n  corner?: number;\n  /** A 1px inset hairline ring around the bar. */\n  stroke?: boolean;\n  /** Spoken value (`aria-valuetext`), for units: `(v) => \\`${v}%\\``. */\n  formatValue?: (value: number) => string;\n}\n\nconst clamp = (value: number, lo: number, hi: number) => Math.min(Math.max(value, lo), hi);\n\nconst REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribeToMotionPreference(onChange: () => void) {\n  const query = window.matchMedia(REDUCED_MOTION);\n  query.addEventListener(\"change\", onChange);\n  return () => query.removeEventListener(\"change\", onChange);\n}\n\n/** Live: turning the setting on mid-session stops the slosh at once. */\nfunction usePrefersReducedMotion() {\n  return useSyncExternalStore(\n    subscribeToMotionPreference,\n    () => window.matchMedia(REDUCED_MOTION).matches,\n    () => false,\n  );\n}\n\n/** Maps the three feel levels to spring constants tuned against the source. */\nexport function sloshSpring(viscosity: number, momentum: number) {\n  return {\n    stiffness: 600,\n    damping: 20 + clamp(viscosity, 0, 100) * 0.7,\n    mass: 0.4 + (clamp(momentum, 0, 100) / 100) * 1.2,\n  };\n}\n\n/** A liquid-fill slider: the knob jumps, the fill sloshes after it. */\nexport function SloshSlider({\n  className,\n  style,\n  fill: fillVariant,\n  stroke = false,\n  value: valueProp,\n  defaultValue = 62,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  step = 1,\n  largeStep = 10,\n  viscosity = 15,\n  momentum = 55,\n  tilt = 45,\n  corner = 13,\n  disabled,\n  formatValue,\n  dir: dirProp,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-valuetext\": ariaValueText,\n  ...props\n}: SloshSliderProps) {\n  const dir = Direction.useDirection(dirProp);\n  const [uncontrolled, setUncontrolled] = useState(defaultValue);\n  const controlled = valueProp !== undefined;\n  const value = clamp(controlled ? valueProp : uncontrolled, min, max);\n  const reduceMotion = usePrefersReducedMotion();\n\n  const range = max - min;\n  const percent = range > 0 ? ((value - min) / range) * 100 : 0;\n  const level = useSpring(percent, sloshSpring(viscosity, momentum));\n  const velocity = useVelocity(level);\n  // Read through a ref: a transform's function is not re-bound on re-render.\n  const gain = reduceMotion ? 0 : (clamp(tilt, 0, 100) / 100) * 0.07;\n  const live = useRef({ gain, rtl: dir === \"rtl\" });\n  useEffect(() => {\n    live.current = { gain, rtl: dir === \"rtl\" };\n  }, [gain, dir]);\n  const lean = useTransform(velocity, (v) => clamp(v * live.current.gain, -MAX_LEAN, MAX_LEAN));\n  const width = useTransform(\n    level,\n    (p) => `calc(${String(clamp(p, 0, 100))}% + ${String(PAD)}px)`,\n  );\n  const clipPath = useTransform(lean, (l) =>\n    live.current.rtl\n      ? `polygon(${String(PAD - l)}px 0, 100% 0, 100% 100%, ${String(PAD + l)}px 100%)`\n      : `polygon(0 0, calc(100% - ${String(PAD - l)}px) 0, calc(100% - ${String(PAD + l)}px) 100%, 0 100%)`,\n  );\n\n  // The fill chases the value; under reduced motion it simply arrives.\n  const first = useRef(true);\n  useEffect(() => {\n    if (first.current || reduceMotion) level.jump(percent);\n    else level.set(percent);\n    first.current = false;\n  }, [percent, reduceMotion, level]);\n\n  useMissingNameWarning(ariaLabel, ariaLabelledBy);\n\n  function update(next: number) {\n    if (next === value) return;\n    if (!controlled) setUncontrolled(next);\n    onValueChange?.(next);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || disabled) return;\n    if (event.key !== \"PageUp\" && event.key !== \"PageDown\") return;\n    // Handled here, so Radix's own ten-step page jump never runs.\n    event.preventDefault();\n    const raw = value + (event.key === \"PageUp\" ? 1 : -1) * largeStep * step;\n    const next = clamp(Math.round((raw - min) / step) * step + min, min, max);\n    update(next);\n    onValueCommit?.(next);\n  }\n\n  return (\n    <MotionConfig reducedMotion=\"user\">\n      <SliderPrimitive.Root\n        data-slot=\"slosh-slider\"\n        value={[value]}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        dir={dirProp}\n        onValueChange={([next]) => next !== undefined && update(next)}\n        onValueCommit={([next]) => next !== undefined && onValueCommit?.(next)}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          sloshSliderVariants({ fill: fillVariant }),\n          stroke && \"shadow-[inset_0_0_0_1px_var(--color-border)]\",\n          className,\n        )}\n        style={{ borderRadius: `${String(clamp(corner, 0, 20))}px`, ...style }}\n        {...props}\n      >\n        <motion.span\n          data-slot=\"slosh-slider-fill\"\n          aria-hidden=\"true\"\n          className=\"pointer-events-none absolute inset-y-0 start-0 bg-(--slosh-fill)\"\n          style={{ width, clipPath }}\n        />\n        <SliderPrimitive.Thumb\n          data-slot=\"slosh-slider-thumb\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-valuetext={ariaValueText ?? formatValue?.(value)}\n          className=\"block h-7 w-[3px] rounded-full bg-(--slosh-knob) outline-none\"\n        />\n      </SliderPrimitive.Root>\n    </MotionConfig>\n  );\n}\n\n/** Warns, in development only, when the thumb would render unnamed. */\nfunction useMissingNameWarning(ariaLabel?: string, ariaLabelledBy?: string) {\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\") return;\n    if (ariaLabel ?? ariaLabelledBy) return;\n    console.warn(\n      \"[SloshSlider] The slider has no accessible name. Pass aria-label or aria-labelledby.\",\n    );\n  }, [ariaLabel, ariaLabelledBy]);\n}\n\nexport { sloshSliderVariants };\n"],"mappings":"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"}

package/dist/components/social-selector/index.d.ts

@@ -0,0 +1,2 @@
+import { SocialPlatform, SocialSelector, SocialSelectorProps, socialSelectorVariants } from "./social-selector.js";
+export { type SocialPlatform, SocialSelector, type SocialSelectorProps, socialSelectorVariants };

package/dist/components/social-selector/index.js

@@ -0,0 +1,2 @@
+import { SocialSelector, socialSelectorVariants } from "./social-selector.js";
+export { SocialSelector, socialSelectorVariants };

package/dist/components/social-selector/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/social-selector/meta.ts
+const meta = defineMeta({
+	name: "social-selector",
+	title: "Social Selector",
+	description: "Pick a social platform from a row of icons — a pill slides behind the choice and the caption links to the profile.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["social-selector.tsx"],
+	a11y: "A Radix radio group named by `label`: one tab stop, arrow keys move and select (following the reading direction), and the value submits with a form under `name`. Each icon-only radio is named by the platform's `name`; icons and the sliding pill are aria-hidden. Caption links say when they open in a new tab. The pill's slide and the caption's blur-in stop under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/social-selector/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/social-selector/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"social-selector\",\n  title: \"Social Selector\",\n  description:\n    \"Pick a social platform from a row of icons — a pill slides behind the choice and the caption links to the profile.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"social-selector.tsx\"],\n  a11y:\n    \"A Radix radio group named by `label`: one tab stop, arrow keys move and select (following the reading \" +\n    \"direction), and the value submits with a form under `name`. Each icon-only radio is named by the platform's \" +\n    \"`name`; icons and the sliding pill are aria-hidden. Caption links say when they open in a new tab. The \" +\n    \"pill's slide and the caption's blur-in stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,qBAAqB;CAC7B,MACE;AAIJ,CAAC"}

package/dist/components/social-selector/social-selector.d.ts

@@ -0,0 +1,45 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/social-selector/social-selector.d.ts
+declare const socialSelectorVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SocialPlatform {
+  /** Submitted value and identity. */
+  value: string;
+  /** Accessible name — the icon alone names nothing. */
+  name: string;
+  /** Decorative icon; hidden from assistive technology. */
+  icon: ReactNode;
+  /** Profile URL. Without one the caption shows the domain as text. */
+  url?: string;
+  /** Shown in the caption, e.g. "bsky.app". Defaults to `name`. */
+  domain?: string;
+}
+interface SocialSelectorProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "dir" | "children">, VariantProps<typeof socialSelectorVariants> {
+  platforms: SocialPlatform[];
+  /** Controlled selected platform value. */
+  value?: string;
+  /** Initial selection when uncontrolled. Defaults to the first platform. */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Accessible name for the radio group. */
+  label?: string;
+  /** The handle shown under the domain, without the "@". */
+  handle?: string;
+  /** Text before the domain. */
+  captionPrefix?: ReactNode;
+  /** Show the domain and handle line under the icons. */
+  showCaption?: boolean;
+  /** Open profile links in a new tab. */
+  openInNewTab?: boolean;
+  /** Submits the value with a form under this name. */
+  name?: string;
+  disabled?: boolean;
+  dir?: "ltr" | "rtl";
+}
+/** A radio group of social platforms with a sliding selection pill. */
+declare function SocialSelector({ className, style, size, platforms, value: valueProp, defaultValue, onValueChange, label, handle, captionPrefix, showCaption, openInNewTab, name, disabled, dir, ...props }: SocialSelectorProps): import("react").JSX.Element;
+//#endregion
+export { SocialPlatform, SocialSelector, SocialSelectorProps, socialSelectorVariants };
+//# sourceMappingURL=social-selector.d.ts.map

package/dist/components/social-selector/social-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"social-selector.d.ts","names":[],"sources":["../../../src/components/social-selector/social-selector.tsx"],"mappings":";;;cAwCM,yBAAsB;;6CAW1B;UAEe;;EAEf;;EAEA;;EAEA,MAAM;;EAEN;;EAEA;;UAGe,4BAEb,KAAK,iFACL,oBAAoB;EACtB,WAAW;;EAEX;;EAEA;EACA,iBAAiB;;EAEjB;;EAEA;;EAEA,gBAAgB;;EAEhB;;EAEA;;EAEA;EACA;EACA;;;iBAIc,iBACd,WACA,OACA,MACA,WACA,OAAO,WACP,cACA,eACA,OACA,QACA,eACA,aACA,cACA,MACA,UACA,QACG,SACF,sCAAmB,IAAA"}

package/dist/components/social-selector/social-selector.js

@@ -0,0 +1,128 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { RadioGroup } from "radix-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useState } from "react";
+//#region src/components/social-selector/social-selector.tsx
+const PREFIX = "dowel-social-selector";
+const STYLES = `
+@keyframes ${PREFIX}-in {
+  from { opacity: 0; filter: blur(5px); translate: 0 0.625rem; }
+}
+[data-slot="social-selector-domain"] {
+  display: inline-block;
+  animation: ${PREFIX}-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both;
+}
+`;
+const socialSelectorVariants = cva("flex flex-col items-center gap-6 text-center", {
+	variants: { size: {
+		sm: "[--social-gap:0.75rem] [--social-size:2rem] [&_[data-slot=social-selector-item]_svg]:size-4",
+		md: "[--social-gap:1rem] [--social-size:2.25rem] [&_[data-slot=social-selector-item]_svg]:size-5",
+		lg: "[--social-gap:1.25rem] [--social-size:2.75rem] [&_[data-slot=social-selector-item]_svg]:size-6"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** A radio group of social platforms with a sliding selection pill. */
+function SocialSelector({ className, style, size, platforms, value: valueProp, defaultValue, onValueChange, label = "Platform", handle, captionPrefix = "Updates on", showCaption = true, openInNewTab = true, name, disabled, dir, ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultValue ?? platforms[0]?.value ?? "");
+	const value = valueProp ?? uncontrolled;
+	const index = platforms.findIndex((platform) => platform.value === value);
+	const selected = platforms[index];
+	function handleValueChange(next) {
+		if (valueProp === void 0) setUncontrolled(next);
+		onValueChange?.(next);
+	}
+	const external = openInNewTab ? {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	} : { rel: "noopener noreferrer" };
+	const newTab = openInNewTab ? /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: " (opens in a new tab)"
+	}) : null;
+	const domain = selected ? selected.domain ?? selected.name : null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "social-selector",
+		dir,
+		className: cn(socialSelectorVariants({ size }), className),
+		style,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: PREFIX,
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsxs(RadioGroup.Root, {
+				"data-slot": "social-selector-group",
+				"aria-label": label,
+				orientation: "horizontal",
+				value,
+				onValueChange: handleValueChange,
+				name,
+				disabled,
+				dir,
+				className: "relative flex items-center gap-[var(--social-gap)]",
+				children: [selected ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "social-selector-indicator",
+					"aria-hidden": "true",
+					className: cn("absolute start-0 top-0 size-[var(--social-size)] rounded-full border border-border bg-background shadow-xs", "[--social-dir:1] rtl:[--social-dir:-1]", "transition-[translate] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]"),
+					style: {
+						"--social-index": index,
+						translate: "calc(var(--social-index) * (var(--social-size) + var(--social-gap)) * var(--social-dir)) 0"
+					}
+				}) : null, platforms.map((platform) => /* @__PURE__ */ jsx(RadioGroup.Item, {
+					value: platform.value,
+					"aria-label": platform.name,
+					"data-slot": "social-selector-item",
+					className: cn("relative z-[1] grid size-[var(--social-size)] shrink-0 cursor-pointer place-items-center rounded-full", "text-muted-foreground transition-colors duration-[var(--duration-fast)]", "hover:text-foreground data-[state=checked]:text-foreground", "disabled:cursor-not-allowed disabled:opacity-55", "[&_svg]:pointer-events-none [&_svg]:shrink-0", focusRing),
+					children: /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "contents",
+						children: platform.icon
+					})
+				}, platform.value))]
+			}),
+			showCaption && selected ? /* @__PURE__ */ jsxs("p", {
+				"data-slot": "social-selector-caption",
+				className: "text-muted-foreground",
+				children: [
+					captionPrefix,
+					" ",
+					selected.url ? /* @__PURE__ */ jsxs("a", {
+						"data-slot": "social-selector-domain",
+						href: selected.url,
+						className: cn("rounded-sm font-medium text-foreground hover:underline", focusRing),
+						...external,
+						children: [domain, newTab]
+					}, selected.value) : /* @__PURE__ */ jsx("span", {
+						"data-slot": "social-selector-domain",
+						className: "font-medium text-foreground",
+						children: domain
+					}, selected.value),
+					handle ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("br", {}), selected.url ? /* @__PURE__ */ jsxs("a", {
+						href: selected.url,
+						"data-slot": "social-selector-handle",
+						className: cn("rounded-sm font-medium text-foreground hover:underline", focusRing),
+						...external,
+						children: [
+							"@",
+							handle,
+							newTab
+						]
+					}) : /* @__PURE__ */ jsxs("span", {
+						"data-slot": "social-selector-handle",
+						className: "font-medium text-foreground",
+						children: ["@", handle]
+					})] }) : null
+				]
+			}) : null
+		]
+	});
+}
+//#endregion
+export { SocialSelector, socialSelectorVariants };
+
+//# sourceMappingURL=social-selector.js.map

package/dist/components/social-selector/social-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"social-selector.js","names":[],"sources":["../../../src/components/social-selector/social-selector.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Social Selector (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { RadioGroup } from \"radix-ui\";\nimport {\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Pick one platform from a row of icons; a pill slides behind the chosen one\n * and the line underneath says where the updates are.\n *\n * Choosing one of several is a radio group, so that is what it is — Radix's,\n * for roving focus, arrow keys that follow the reading direction, and a value\n * that submits with a form. The source slid the pill with a `motion` layoutId;\n * every item is the same size, so the pill's position is a function of the\n * selected index and moving it is a CSS `translate` transition. The domain\n * line re-enters with a short blur keyframe when the choice changes. Both stop\n * under reduced motion.\n */\n\nconst PREFIX = \"dowel-social-selector\";\n\nconst STYLES = `\n@keyframes ${PREFIX}-in {\n  from { opacity: 0; filter: blur(5px); translate: 0 0.625rem; }\n}\n[data-slot=\"social-selector-domain\"] {\n  display: inline-block;\n  animation: ${PREFIX}-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both;\n}\n`;\n\nconst socialSelectorVariants = cva(\"flex flex-col items-center gap-6 text-center\", {\n  variants: {\n    size: {\n      sm: \"[--social-gap:0.75rem] [--social-size:2rem] [&_[data-slot=social-selector-item]_svg]:size-4\",\n      md: \"[--social-gap:1rem] [--social-size:2.25rem] [&_[data-slot=social-selector-item]_svg]:size-5\",\n      lg: \"[--social-gap:1.25rem] [--social-size:2.75rem] [&_[data-slot=social-selector-item]_svg]:size-6\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface SocialPlatform {\n  /** Submitted value and identity. */\n  value: string;\n  /** Accessible name — the icon alone names nothing. */\n  name: string;\n  /** Decorative icon; hidden from assistive technology. */\n  icon: ReactNode;\n  /** Profile URL. Without one the caption shows the domain as text. */\n  url?: string;\n  /** Shown in the caption, e.g. \"bsky.app\". Defaults to `name`. */\n  domain?: string;\n}\n\nexport interface SocialSelectorProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\" | \"dir\" | \"children\">,\n    VariantProps<typeof socialSelectorVariants> {\n  platforms: SocialPlatform[];\n  /** Controlled selected platform value. */\n  value?: string;\n  /** Initial selection when uncontrolled. Defaults to the first platform. */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Accessible name for the radio group. */\n  label?: string;\n  /** The handle shown under the domain, without the \"@\". */\n  handle?: string;\n  /** Text before the domain. */\n  captionPrefix?: ReactNode;\n  /** Show the domain and handle line under the icons. */\n  showCaption?: boolean;\n  /** Open profile links in a new tab. */\n  openInNewTab?: boolean;\n  /** Submits the value with a form under this name. */\n  name?: string;\n  disabled?: boolean;\n  dir?: \"ltr\" | \"rtl\";\n}\n\n/** A radio group of social platforms with a sliding selection pill. */\nexport function SocialSelector({\n  className,\n  style,\n  size,\n  platforms,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  label = \"Platform\",\n  handle,\n  captionPrefix = \"Updates on\",\n  showCaption = true,\n  openInNewTab = true,\n  name,\n  disabled,\n  dir,\n  ...props\n}: SocialSelectorProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultValue ?? platforms[0]?.value ?? \"\");\n  const value = valueProp ?? uncontrolled;\n  const index = platforms.findIndex((platform) => platform.value === value);\n  const selected = platforms[index];\n\n  function handleValueChange(next: string) {\n    if (valueProp === undefined) setUncontrolled(next);\n    onValueChange?.(next);\n  }\n\n  const external = openInNewTab\n    ? { target: \"_blank\", rel: \"noopener noreferrer\" }\n    : { rel: \"noopener noreferrer\" };\n  const newTab = openInNewTab ? <span className=\"sr-only\"> (opens in a new tab)</span> : null;\n  const domain = selected ? (selected.domain ?? selected.name) : null;\n\n  return (\n    <div\n      data-slot=\"social-selector\"\n      dir={dir}\n      className={cn(socialSelectorVariants({ size }), className)}\n      style={style}\n      {...props}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <RadioGroup.Root\n        data-slot=\"social-selector-group\"\n        aria-label={label}\n        orientation=\"horizontal\"\n        value={value}\n        onValueChange={handleValueChange}\n        name={name}\n        disabled={disabled}\n        dir={dir}\n        className=\"relative flex items-center gap-[var(--social-gap)]\"\n      >\n        {selected ? (\n          <span\n            data-slot=\"social-selector-indicator\"\n            aria-hidden=\"true\"\n            className={cn(\n              \"absolute start-0 top-0 size-[var(--social-size)] rounded-full border border-border bg-background shadow-xs\",\n              \"[--social-dir:1] rtl:[--social-dir:-1]\",\n              \"transition-[translate] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n            )}\n            style={\n              {\n                \"--social-index\": index,\n                translate:\n                  \"calc(var(--social-index) * (var(--social-size) + var(--social-gap)) * var(--social-dir)) 0\",\n              } as CSSProperties\n            }\n          />\n        ) : null}\n        {platforms.map((platform) => (\n          <RadioGroup.Item\n            key={platform.value}\n            value={platform.value}\n            aria-label={platform.name}\n            data-slot=\"social-selector-item\"\n            className={cn(\n              \"relative z-[1] grid size-[var(--social-size)] shrink-0 cursor-pointer place-items-center rounded-full\",\n              \"text-muted-foreground transition-colors duration-[var(--duration-fast)]\",\n              \"hover:text-foreground data-[state=checked]:text-foreground\",\n              \"disabled:cursor-not-allowed disabled:opacity-55\",\n              \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n              focusRing,\n            )}\n          >\n            <span aria-hidden=\"true\" className=\"contents\">\n              {platform.icon}\n            </span>\n          </RadioGroup.Item>\n        ))}\n      </RadioGroup.Root>\n      {showCaption && selected ? (\n        <p data-slot=\"social-selector-caption\" className=\"text-muted-foreground\">\n          {captionPrefix}{\" \"}\n          {selected.url ? (\n            <a\n              key={selected.value}\n              data-slot=\"social-selector-domain\"\n              href={selected.url}\n              className={cn(\n                \"rounded-sm font-medium text-foreground hover:underline\",\n                focusRing,\n              )}\n              {...external}\n            >\n              {domain}\n              {newTab}\n            </a>\n          ) : (\n            <span\n              key={selected.value}\n              data-slot=\"social-selector-domain\"\n              className=\"font-medium text-foreground\"\n            >\n              {domain}\n            </span>\n          )}\n          {handle ? (\n            <>\n              <br />\n              {selected.url ? (\n                <a\n                  href={selected.url}\n                  data-slot=\"social-selector-handle\"\n                  className={cn(\n                    \"rounded-sm font-medium text-foreground hover:underline\",\n                    focusRing,\n                  )}\n                  {...external}\n                >\n                  @{handle}\n                  {newTab}\n                </a>\n              ) : (\n                <span\n                  data-slot=\"social-selector-handle\"\n                  className=\"font-medium text-foreground\"\n                >\n                  @{handle}\n                </span>\n              )}\n            </>\n          ) : null}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nexport { socialSelectorVariants };\n"],"mappings":";;;;;;;;AA4BA,MAAM,SAAS;AAEf,MAAM,SAAS;aACF,OAAO;;;;;eAKL,OAAO;;;AAItB,MAAM,yBAAyB,IAAI,gDAAgD;CACjF,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AA0CD,SAAgB,eAAe,EAC7B,WACA,OACA,MACA,WACA,OAAO,WACP,cACA,eACA,QAAQ,YACR,QACA,gBAAgB,cAChB,cAAc,MACd,eAAe,MACf,MACA,UACA,KACA,GAAG,SACmB;CACtB,MAAM,CAAC,cAAc,mBAAmB,SAAS,gBAAgB,UAAU,EAAE,EAAE,SAAS,EAAE;CAC1F,MAAM,QAAQ,aAAa;CAC3B,MAAM,QAAQ,UAAU,WAAW,aAAa,SAAS,UAAU,KAAK;CACxE,MAAM,WAAW,UAAU;CAE3B,SAAS,kBAAkB,MAAc;EACvC,IAAI,cAAc,KAAA,GAAW,gBAAgB,IAAI;EACjD,gBAAgB,IAAI;CACtB;CAEA,MAAM,WAAW,eACb;EAAE,QAAQ;EAAU,KAAK;CAAsB,IAC/C,EAAE,KAAK,sBAAsB;CACjC,MAAM,SAAS,eAAe,oBAAC,QAAD;EAAM,WAAU;EAAU,UAAA;CAA2B,CAAA,IAAI;CACvF,MAAM,SAAS,WAAY,SAAS,UAAU,SAAS,OAAQ;CAE/D,OACE,qBAAC,OAAD;EACE,aAAU;EACL;EACL,WAAW,GAAG,uBAAuB,EAAE,KAAK,CAAC,GAAG,SAAS;EAClD;EACP,GAAI;EALN,UAAA;GAOE,oBAAC,SAAD;IAAO,MAAM;IAAQ,YAAW;IAC7B,UAAA;GACI,CAAA;GACP,qBAAC,WAAW,MAAZ;IACE,aAAU;IACV,cAAY;IACZ,aAAY;IACL;IACP,eAAe;IACT;IACI;IACL;IACL,WAAU;IATZ,UAAA,CAWG,WACC,oBAAC,QAAD;KACE,aAAU;KACV,eAAY;KACZ,WAAW,GACT,8GACA,0CACA,uFACF;KACA,OACE;MACE,kBAAkB;MAClB,WACE;KACJ;IAEH,CAAA,IACC,MACH,UAAU,KAAK,aACd,oBAAC,WAAW,MAAZ;KAEE,OAAO,SAAS;KAChB,cAAY,SAAS;KACrB,aAAU;KACV,WAAW,GACT,yGACA,2EACA,8DACA,mDACA,gDACA,SACF;KAEA,UAAA,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;MAChC,UAAA,SAAS;KACN,CAAA;IACS,GAhBV,SAAS,KAgBC,CAClB,CACc;;GAChB,eAAe,WACd,qBAAC,KAAD;IAAG,aAAU;IAA0B,WAAU;IAAjD,UAAA;KACG;KAAe;KACf,SAAS,MACR,qBAAC,KAAD;MAEE,aAAU;MACV,MAAM,SAAS;MACf,WAAW,GACT,0DACA,SACF;MACA,GAAI;MARN,UAAA,CAUG,QACA,MACA;KAXI,GAAA,SAAS,KAWb,IAEH,oBAAC,QAAD;MAEE,aAAU;MACV,WAAU;MAET,UAAA;KACG,GALC,SAAS,KAKV;KAEP,SACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,CAAK,CAAA,GACJ,SAAS,MACR,qBAAC,KAAD;MACE,MAAM,SAAS;MACf,aAAU;MACV,WAAW,GACT,0DACA,SACF;MACA,GAAI;MAPN,UAAA;OAQC;OACG;OACD;MACA;KAEH,CAAA,IAAA,qBAAC,QAAD;MACE,aAAU;MACV,WAAU;MAFZ,UAAA,CAGC,KACG,MACE;KAER,CAAA,CAAA,EAAA,CAAA,IACA;IACH;GACD,CAAA,IAAA;EACD;;AAET"}

package/dist/components/spinner/spinner.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/spinner/spinner.d.ts
 declare const spinnerVariants: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SpinnerProps extends Omit<ComponentPropsWithRef<"svg">, "children">, VariantProps<typeof spinnerVariants> {
   /**

package/dist/components/star-count/index.d.ts

@@ -0,0 +1,2 @@
+import { StarCount, StarCountProps, starCountVariants } from "./star-count.js";
+export { StarCount, type StarCountProps, starCountVariants };

package/dist/components/star-count/index.js

@@ -0,0 +1,2 @@
+import { StarCount, starCountVariants } from "./star-count.js";
+export { StarCount, starCountVariants };

package/dist/components/star-count/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/star-count/meta.ts
+const meta = defineMeta({
+	name: "star-count",
+	title: "Star Count",
+	description: "An animated star counter — plain or as a star button — with the stargazers' avatars beside it. The count is a prop; nothing is fetched.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["avatar-group", "number-flow"],
+	files: ["star-count.tsx"],
+	a11y: "The settled count is screen-reader text (\"1,234 stars\") while the rolling digits and the star icon are aria-hidden, so a reader never hears the count-up. With href the counter is a real link with a focus ring. Stargazers are an AvatarGroup list named by stargazersLabel. Under reduced motion the count appears settled and the star does not pop."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/star-count/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/star-count/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"star-count\",\n  title: \"Star Count\",\n  description:\n    \"An animated star counter — plain or as a star button — with the stargazers' avatars beside it. The count is a prop; nothing is fetched.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"avatar-group\", \"number-flow\"],\n  files: [\"star-count.tsx\"],\n  a11y:\n    'The settled count is screen-reader text (\"1,234 stars\") while the rolling digits and the star icon are ' +\n    \"aria-hidden, so a reader never hears the count-up. With href the counter is a real link with a focus ring. \" +\n    \"Stargazers are an AvatarGroup list named by stargazersLabel. Under reduced motion the count appears settled \" +\n    \"and the star does not pop.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,gBAAgB,aAAa;CACpD,OAAO,CAAC,gBAAgB;CACxB,MACE;AAIJ,CAAC"}

package/dist/components/star-count/star-count.d.ts

@@ -0,0 +1,35 @@
+import { AvatarGroupItem } from "../avatar-group/avatar-group.js";
+import "../avatar-group/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/star-count/star-count.d.ts
+declare const starCountVariants: (props?: ({
+  variant?: "pill" | "plain" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface StarCountProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof starCountVariants> {
+  /** The number of stars. Fetch it yourself; the component makes no network calls. */
+  count: number;
+  /** People who starred, shown as an overlapping avatar group before the count. */
+  stargazers?: AvatarGroupItem[];
+  /** How many stargazers to show before "+N". */
+  maxAvatars?: number;
+  /** Accessible name of the stargazer list. */
+  stargazersLabel?: string;
+  /** Makes the counter a link, e.g. to the repository. */
+  href?: string;
+  /** The unit after the number. Defaults to "star" / "stars". */
+  unit?: (count: number) => ReactNode;
+  /** The icon before the number. Defaults to a filled star. */
+  icon?: ReactNode;
+  /** Count up from zero on mount. When false the count starts settled. */
+  animateOnMount?: boolean;
+  /** Passed to Intl.NumberFormat, for the digits and the screen-reader text. */
+  locales?: Intl.LocalesArgument;
+  /** Intl.NumberFormat options, e.g. `{ notation: "compact" }` for "12K". */
+  format?: Intl.NumberFormatOptions;
+}
+/** An animated star counter, optionally a link, with the stargazers beside it. */
+declare function StarCount({ className, count, stargazers, maxAvatars, stargazersLabel, href, unit, icon, animateOnMount, locales, format, variant, ...props }: StarCountProps): import("react").JSX.Element;
+//#endregion
+export { StarCount, StarCountProps, starCountVariants };
+//# sourceMappingURL=star-count.d.ts.map

package/dist/components/star-count/star-count.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-count.d.ts","names":[],"sources":["../../../src/components/star-count/star-count.tsx"],"mappings":";;;;;cA6BM,oBAAiB;;6CAiBtB;UAUgB,uBAEb,KAAK,2CACL,oBAAoB;;EAEtB;;EAEA,aAAa;;EAEb;;EAEA;;EAEA;;EAEA,QAAQ,kBAAkB;;EAE1B,OAAO;;EAEP;;EAEA,UAAU,KAAK;;EAEf,SAAS,KAAK;;;iBAIA,YACd,WACA,OACA,YACA,YACA,iBACA,MACA,MACA,MACA,gBACA,SACA,QACA,YACG,SACF,iCAAc,IAAA"}

package/dist/components/star-count/star-count.js

@@ -0,0 +1,94 @@
+"use client";
+import "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { NumberFlow } from "../number-flow/number-flow.js";
+import { AvatarGroup } from "../avatar-group/avatar-group.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useState } from "react";
+//#region src/components/star-count/star-count.tsx
+const PREFIX = "dowel-star-count";
+const STYLES = `@keyframes ${PREFIX}-pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
+[data-slot=star-count-icon]{animation:${PREFIX}-pop calc(400ms * var(--motion-scale, 1)) var(--ease-overshoot, ease-out) both}`;
+const starCountVariants = cva("inline-flex items-center gap-1.5 font-medium whitespace-nowrap", {
+	variants: { 
+	/** `plain` is the source's inline counter; `pill` is a GitHub-style star button. */
+variant: {
+		plain: "",
+		pill: cn("h-8 rounded-full border border-border bg-card px-3 text-sm text-card-foreground shadow-xs", "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]")
+	} },
+	defaultVariants: { variant: "plain" }
+});
+function StarIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		className: "size-4",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.49l-5.87 3.09 1.12-6.54L2.5 9.41l6.56-.95z" })
+	});
+}
+/** An animated star counter, optionally a link, with the stargazers beside it. */
+function StarCount({ className, count, stargazers, maxAvatars = 5, stargazersLabel = "Stargazers", href, unit = (value) => value === 1 ? "star" : "stars", icon, animateOnMount = true, locales, format, variant = "plain", ...props }) {
+	const [started, setStarted] = useState(!animateOnMount);
+	useEffect(() => {
+		if (started) return;
+		const frame = requestAnimationFrame(() => {
+			setStarted(true);
+		});
+		return () => {
+			cancelAnimationFrame(frame);
+		};
+	}, [started]);
+	const shown = started ? count : 0;
+	const text = new Intl.NumberFormat(locales, format).format(count);
+	const Counter = href ? "a" : "span";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "star-count",
+		className: cn("inline-flex items-center gap-3", className),
+		...props,
+		children: [stargazers && stargazers.length > 0 ? /* @__PURE__ */ jsx(AvatarGroup, {
+			"aria-label": stargazersLabel,
+			avatars: stargazers,
+			max: maxAvatars,
+			overlap: .2
+		}) : null, /* @__PURE__ */ jsxs(Counter, {
+			"data-slot": "star-count-counter",
+			href,
+			className: cn(starCountVariants({ variant }), href && "outline-none focus-visible:ring-2 focus-visible:ring-ring/55 focus-visible:ring-offset-2 focus-visible:ring-offset-background", href && variant === "pill" && "hover:bg-accent hover:text-accent-foreground", href && variant === "plain" && "rounded-sm hover:underline"),
+			children: [
+				/* @__PURE__ */ jsx("style", {
+					href: PREFIX,
+					precedence: "dowel",
+					children: STYLES
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "star-count-icon",
+					"aria-hidden": "true",
+					className: "inline-flex",
+					children: icon ?? /* @__PURE__ */ jsx(StarIcon, {})
+				}, count),
+				/* @__PURE__ */ jsx(NumberFlow, {
+					"aria-hidden": "true",
+					value: shown,
+					locales,
+					format
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: text
+				}),
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "star-count-unit",
+					className: "text-sm text-muted-foreground",
+					children: unit(count)
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { StarCount, starCountVariants };
+
+//# sourceMappingURL=star-count.js.map

package/dist/components/star-count/star-count.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"star-count.js","names":[],"sources":["../../../src/components/star-count/star-count.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI GitHub Stars Animation (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useEffect, useState, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { AvatarGroup, type AvatarGroupItem } from \"@/components/avatar-group\";\nimport { NumberFlow } from \"@/components/number-flow\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * The source fetches a repository's stars and stargazers from the GitHub API\n * and counts up with a requestAnimationFrame loop. A library component makes\n * no network calls: the count and the stargazers are props, and fetching them\n * (server-side, cached, with a token) is the application's job.\n *\n * The count-up is NumberFlow: the first frame renders zero, the next renders\n * the real count, and every digit rolls from 0 to its place. Later changes\n * roll from the old value. It is all token-driven CSS, so under reduced\n * motion the final count simply appears. The star pops (a hoisted keyframe on\n * the motion scale) whenever the count changes. Stargazers are an AvatarGroup.\n */\n\nconst PREFIX = \"dowel-star-count\";\n\nconst STYLES = `@keyframes ${PREFIX}-pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}\n[data-slot=star-count-icon]{animation:${PREFIX}-pop calc(400ms * var(--motion-scale, 1)) var(--ease-overshoot, ease-out) both}`;\n\nconst starCountVariants = cva(\n  \"inline-flex items-center gap-1.5 font-medium whitespace-nowrap\",\n  {\n    variants: {\n      /** `plain` is the source's inline counter; `pill` is a GitHub-style star button. */\n      variant: {\n        plain: \"\",\n        pill: cn(\n          \"h-8 rounded-full border border-border bg-card px-3 text-sm text-card-foreground shadow-xs\",\n          \"transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n        ),\n      },\n    },\n    defaultVariants: {\n      variant: \"plain\",\n    },\n  },\n);\n\nfunction StarIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\" aria-hidden=\"true\">\n      <path d=\"M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.49l-5.87 3.09 1.12-6.54L2.5 9.41l6.56-.95z\" />\n    </svg>\n  );\n}\n\nexport interface StarCountProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"children\">,\n    VariantProps<typeof starCountVariants> {\n  /** The number of stars. Fetch it yourself; the component makes no network calls. */\n  count: number;\n  /** People who starred, shown as an overlapping avatar group before the count. */\n  stargazers?: AvatarGroupItem[];\n  /** How many stargazers to show before \"+N\". */\n  maxAvatars?: number;\n  /** Accessible name of the stargazer list. */\n  stargazersLabel?: string;\n  /** Makes the counter a link, e.g. to the repository. */\n  href?: string;\n  /** The unit after the number. Defaults to \"star\" / \"stars\". */\n  unit?: (count: number) => ReactNode;\n  /** The icon before the number. Defaults to a filled star. */\n  icon?: ReactNode;\n  /** Count up from zero on mount. When false the count starts settled. */\n  animateOnMount?: boolean;\n  /** Passed to Intl.NumberFormat, for the digits and the screen-reader text. */\n  locales?: Intl.LocalesArgument;\n  /** Intl.NumberFormat options, e.g. `{ notation: \"compact\" }` for \"12K\". */\n  format?: Intl.NumberFormatOptions;\n}\n\n/** An animated star counter, optionally a link, with the stargazers beside it. */\nexport function StarCount({\n  className,\n  count,\n  stargazers,\n  maxAvatars = 5,\n  stargazersLabel = \"Stargazers\",\n  href,\n  unit = (value) => (value === 1 ? \"star\" : \"stars\"),\n  icon,\n  animateOnMount = true,\n  locales,\n  format,\n  variant = \"plain\",\n  ...props\n}: StarCountProps) {\n  const [started, setStarted] = useState(!animateOnMount);\n\n  // One frame at zero first, so the digits have somewhere to roll from.\n  useEffect(() => {\n    if (started) return;\n    const frame = requestAnimationFrame(() => {\n      setStarted(true);\n    });\n    return () => {\n      cancelAnimationFrame(frame);\n    };\n  }, [started]);\n\n  const shown = started ? count : 0;\n  const text = new Intl.NumberFormat(locales, format).format(count);\n  const Counter = href ? \"a\" : \"span\";\n\n  return (\n    <div\n      data-slot=\"star-count\"\n      className={cn(\"inline-flex items-center gap-3\", className)}\n      {...props}\n    >\n      {stargazers && stargazers.length > 0 ? (\n        <AvatarGroup\n          aria-label={stargazersLabel}\n          avatars={stargazers}\n          max={maxAvatars}\n          overlap={0.2}\n        />\n      ) : null}\n      <Counter\n        data-slot=\"star-count-counter\"\n        href={href}\n        className={cn(\n          starCountVariants({ variant }),\n          href && focusRing,\n          href && variant === \"pill\" && \"hover:bg-accent hover:text-accent-foreground\",\n          href && variant === \"plain\" && \"rounded-sm hover:underline\",\n        )}\n      >\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n        <span\n          key={count}\n          data-slot=\"star-count-icon\"\n          aria-hidden=\"true\"\n          className=\"inline-flex\"\n        >\n          {icon ?? <StarIcon />}\n        </span>\n        <NumberFlow aria-hidden=\"true\" value={shown} locales={locales} format={format} />\n        <span className=\"sr-only\">{text}</span>{\" \"}\n        <span data-slot=\"star-count-unit\" className=\"text-sm text-muted-foreground\">\n          {unit(count)}\n        </span>\n      </Counter>\n    </div>\n  );\n}\n\nexport { starCountVariants };\n"],"mappings":";;;;;;;;;AAwBA,MAAM,SAAS;AAEf,MAAM,SAAS,cAAc,OAAO;wCACI,OAAO;AAE/C,MAAM,oBAAoB,IACxB,kEACA;CACE,UAAU;;AAER,SAAS;EACP,OAAO;EACP,MAAM,GACJ,6FACA,gFACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,QACX;AACF,CACF;AAEA,SAAS,WAAW;CAClB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,MAAK;EAAe,WAAU;EAAS,eAAY;EAC1E,UAAA,oBAAC,QAAD,EAAM,GAAE,iGAAkG,CAAA;CACvG,CAAA;AAET;;AA6BA,SAAgB,UAAU,EACxB,WACA,OACA,YACA,aAAa,GACb,kBAAkB,cAClB,MACA,QAAQ,UAAW,UAAU,IAAI,SAAS,SAC1C,MACA,iBAAiB,MACjB,SACA,QACA,UAAU,SACV,GAAG,SACc;CACjB,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,cAAc;CAGtD,gBAAgB;EACd,IAAI,SAAS;EACb,MAAM,QAAQ,4BAA4B;GACxC,WAAW,IAAI;EACjB,CAAC;EACD,aAAa;GACX,qBAAqB,KAAK;EAC5B;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,QAAQ,UAAU,QAAQ;CAChC,MAAM,OAAO,IAAI,KAAK,aAAa,SAAS,MAAM,CAAC,CAAC,OAAO,KAAK;CAChE,MAAM,UAAU,OAAO,MAAM;CAE7B,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;EAHN,UAAA,CAKG,cAAc,WAAW,SAAS,IACjC,oBAAC,aAAD;GACE,cAAY;GACZ,SAAS;GACT,KAAK;GACL,SAAS;EACV,CAAA,IACC,MACJ,qBAAC,SAAD;GACE,aAAU;GACJ;GACN,WAAW,GACT,kBAAkB,EAAE,QAAQ,CAAC,GAC7B,QAAA,iIACA,QAAQ,YAAY,UAAU,gDAC9B,QAAQ,YAAY,WAAW,4BACjC;GARF,UAAA;IAUE,oBAAC,SAAD;KAAO,MAAM;KAAQ,YAAW;KAC7B,UAAA;IACI,CAAA;IACP,oBAAC,QAAD;KAEE,aAAU;KACV,eAAY;KACZ,WAAU;KAET,UAAA,QAAQ,oBAAC,UAAD,CAAW,CAAA;IAChB,GANC,KAMD;IACN,oBAAC,YAAD;KAAY,eAAY;KAAO,OAAO;KAAgB;KAAiB;IAAS,CAAA;IAChF,oBAAC,QAAD;KAAM,WAAU;KAAW,UAAA;IAAW,CAAA;IAAE;IACxC,oBAAC,QAAD;KAAM,aAAU;KAAkB,WAAU;KACzC,UAAA,KAAK,KAAK;IACP,CAAA;GACC;EACN,CAAA,CAAA;;AAET"}

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

@@ -0,0 +1,2 @@
+import { Stepper, StepperProps, StepperStep, StepperStepState, stepperIndicatorVariants, stepperVariants } from "./stepper.js";
+export { Stepper, type StepperProps, type StepperStep, type StepperStepState, stepperIndicatorVariants, stepperVariants };

package/dist/components/stepper/index.js

@@ -0,0 +1,2 @@
+import { Stepper, stepperIndicatorVariants, stepperVariants } from "./stepper.js";
+export { Stepper, stepperIndicatorVariants, stepperVariants };

package/dist/components/stepper/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/stepper/meta.ts
+const meta = defineMeta({
+	name: "stepper",
+	title: "Stepper",
+	description: "A multi-step wizard's progress — connectors fill, finished steps draw a check, and each step's content slides in from the side it comes from.",
+	category: "navigation",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["stepper.tsx"],
+	a11y: "An ordered list named \"Progress\", with aria-current=\"step\" on the current step and finished steps named with a visually hidden \"completed\". Steps are plain list items unless `navigation` makes them choosable; then they are buttons sharing one tab stop, moved between with the arrow keys (mirrored in RTL, Up/Down when vertical), Home and End, and chosen with Enter or Space. The content area is a group labelled by the current step. Horizontal labels collapse to screen-reader-only text on narrow screens. All motion is CSS decoration and stops under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map