@dowel-ui/react 0.7.0 → 0.8.0

package/src/components/slosh-slider/slosh-slider.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+// Ported from bencho Slosh slider (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import { MotionConfig, motion, useSpring, useTransform, useVelocity } from "motion/react";
+import { Direction, Slider as SliderPrimitive } from "radix-ui";
+import {
+  useEffect,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ComponentPropsWithRef,
+  type KeyboardEvent,
+} from "react";
+
+import { cn } from "@/lib/utils";
+
+/*
+ * A slider whose fill behaves like liquid in a tube. The knob — the Radix
+ * thumb, drawn as a thin bar — jumps to the value at once; the fill behind it
+ * is a damped spring chasing that value, so it lags on the way, overshoots
+ * when you stop and settles. Its leading edge is a parallelogram whose lean
+ * follows the fill's velocity, so the surface tilts in the direction of travel.
+ *
+ * That is continuous physics with velocity, which is what `motion` is for here.
+ * Under reduced motion the fill jumps with the knob and never leans.
+ *
+ * Semantics are entirely Radix's: a role="slider" thumb with pointer
+ * jump-to-value, arrows, Home/End, right-to-left and a form input. Page Up/Down
+ * are taken over so they move by `largeStep` rather than Radix's fixed ten
+ * steps.
+ */
+
+/** 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",
+    },
+  },
+);
+
+type RootProps = ComponentPropsWithRef<typeof SliderPrimitive.Root>;
+
+export interface SloshSliderProps
+  extends
+    Omit<
+      RootProps,
+      | "value"
+      | "defaultValue"
+      | "onValueChange"
+      | "onValueCommit"
+      | "orientation"
+      | "inverted"
+      | "minStepsBetweenThumbs"
+      | "children"
+    >,
+    VariantProps<typeof sloshSliderVariants> {
+  /** Controlled value. */
+  value?: number;
+  /** Initial value when uncontrolled. */
+  defaultValue?: number;
+  /** Called on every change while dragging or keying. */
+  onValueChange?: (value: number) => void;
+  /** Called when an interaction ends: pointer released or key pressed. */
+  onValueCommit?: (value: number) => void;
+  /** Steps moved by Page Up / Page Down (multiplied by `step`). */
+  largeStep?: number;
+  /** 0–100. Damping: higher is thicker liquid — less slosh, more lag. */
+  viscosity?: number;
+  /** 0–100. The fill's mass: higher overshoots further and settles slower. */
+  momentum?: number;
+  /** 0–100. How far the leading edge leans per unit of fill velocity. */
+  tilt?: number;
+  /** 0–20. Corner radius of the bar, in px. */
+  corner?: number;
+  /** A 1px inset hairline ring around the bar. */
+  stroke?: boolean;
+  /** Spoken value (`aria-valuetext`), for units: `(v) => \`${v}%\``. */
+  formatValue?: (value: number) => string;
+}
+
+const clamp = (value: number, lo: number, hi: number) => Math.min(Math.max(value, lo), hi);
+
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+
+function subscribeToMotionPreference(onChange: () => void) {
+  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. */
+export function sloshSpring(viscosity: number, momentum: number) {
+  return {
+    stiffness: 600,
+    damping: 20 + clamp(viscosity, 0, 100) * 0.7,
+    mass: 0.4 + (clamp(momentum, 0, 100) / 100) * 1.2,
+  };
+}
+
+/** A liquid-fill slider: the knob jumps, the fill sloshes after it. */
+export 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
+}: SloshSliderProps) {
+  const dir = Direction.useDirection(dirProp);
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const controlled = valueProp !== undefined;
+  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);
+  // Read through a ref: a transform's function is not re-bound on re-render.
+  const gain = reduceMotion ? 0 : (clamp(tilt, 0, 100) / 100) * 0.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, -MAX_LEAN, 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%)`,
+  );
+
+  // The fill chases the value; under reduced motion it simply arrives.
+  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: number) {
+    if (next === value) return;
+    if (!controlled) setUncontrolled(next);
+    onValueChange?.(next);
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || disabled) return;
+    if (event.key !== "PageUp" && event.key !== "PageDown") return;
+    // Handled here, so Radix's own ten-step page jump never runs.
+    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 (
+    <MotionConfig reducedMotion="user">
+      <SliderPrimitive.Root
+        data-slot="slosh-slider"
+        value={[value]}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        dir={dirProp}
+        onValueChange={([next]) => next !== undefined && update(next)}
+        onValueCommit={([next]) => next !== undefined && 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}
+      >
+        <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 }}
+        />
+        <SliderPrimitive.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"
+        />
+      </SliderPrimitive.Root>
+    </MotionConfig>
+  );
+}
+
+/** Warns, in development only, when the thumb would render unnamed. */
+function useMissingNameWarning(ariaLabel?: string, ariaLabelledBy?: string) {
+  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]);
+}
+
+export { sloshSliderVariants };

package/src/components/social-selector/index.ts

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

package/src/components/social-selector/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export 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.",
+});

package/src/components/social-selector/social-selector.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+// Ported from SmoothUI Social Selector (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.
+import { cva, type VariantProps } from "class-variance-authority";
+import { RadioGroup } from "radix-ui";
+import {
+  useState,
+  type ComponentPropsWithRef,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+
+import { focusRing } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/*
+ * Pick one platform from a row of icons; a pill slides behind the chosen one
+ * and the line underneath says where the updates are.
+ *
+ * Choosing one of several is a radio group, so that is what it is — Radix's,
+ * for roving focus, arrow keys that follow the reading direction, and a value
+ * that submits with a form. The source slid the pill with a `motion` layoutId;
+ * every item is the same size, so the pill's position is a function of the
+ * selected index and moving it is a CSS `translate` transition. The domain
+ * line re-enters with a short blur keyframe when the choice changes. Both stop
+ * under reduced motion.
+ */
+
+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",
+  },
+});
+
+export 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;
+}
+
+export 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. */
+export function SocialSelector({
+  className,
+  style,
+  size,
+  platforms,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  label = "Platform",
+  handle,
+  captionPrefix = "Updates on",
+  showCaption = true,
+  openInNewTab = true,
+  name,
+  disabled,
+  dir,
+  ...props
+}: SocialSelectorProps) {
+  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: string) {
+    if (valueProp === undefined) setUncontrolled(next);
+    onValueChange?.(next);
+  }
+
+  const external = openInNewTab
+    ? { target: "_blank", rel: "noopener noreferrer" }
+    : { rel: "noopener noreferrer" };
+  const newTab = openInNewTab ? <span className="sr-only"> (opens in a new tab)</span> : null;
+  const domain = selected ? (selected.domain ?? selected.name) : null;
+
+  return (
+    <div
+      data-slot="social-selector"
+      dir={dir}
+      className={cn(socialSelectorVariants({ size }), className)}
+      style={style}
+      {...props}
+    >
+      <style href={PREFIX} precedence="dowel">
+        {STYLES}
+      </style>
+      <RadioGroup.Root
+        data-slot="social-selector-group"
+        aria-label={label}
+        orientation="horizontal"
+        value={value}
+        onValueChange={handleValueChange}
+        name={name}
+        disabled={disabled}
+        dir={dir}
+        className="relative flex items-center gap-[var(--social-gap)]"
+      >
+        {selected ? (
+          <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",
+              } as CSSProperties
+            }
+          />
+        ) : null}
+        {platforms.map((platform) => (
+          <RadioGroup.Item
+            key={platform.value}
+            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,
+            )}
+          >
+            <span aria-hidden="true" className="contents">
+              {platform.icon}
+            </span>
+          </RadioGroup.Item>
+        ))}
+      </RadioGroup.Root>
+      {showCaption && selected ? (
+        <p data-slot="social-selector-caption" className="text-muted-foreground">
+          {captionPrefix}{" "}
+          {selected.url ? (
+            <a
+              key={selected.value}
+              data-slot="social-selector-domain"
+              href={selected.url}
+              className={cn(
+                "rounded-sm font-medium text-foreground hover:underline",
+                focusRing,
+              )}
+              {...external}
+            >
+              {domain}
+              {newTab}
+            </a>
+          ) : (
+            <span
+              key={selected.value}
+              data-slot="social-selector-domain"
+              className="font-medium text-foreground"
+            >
+              {domain}
+            </span>
+          )}
+          {handle ? (
+            <>
+              <br />
+              {selected.url ? (
+                <a
+                  href={selected.url}
+                  data-slot="social-selector-handle"
+                  className={cn(
+                    "rounded-sm font-medium text-foreground hover:underline",
+                    focusRing,
+                  )}
+                  {...external}
+                >
+                  @{handle}
+                  {newTab}
+                </a>
+              ) : (
+                <span
+                  data-slot="social-selector-handle"
+                  className="font-medium text-foreground"
+                >
+                  @{handle}
+                </span>
+              )}
+            </>
+          ) : null}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export { socialSelectorVariants };

package/src/components/star-count/index.ts

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

package/src/components/star-count/meta.ts

@@ -0,0 +1,18 @@
+import { defineMeta } from "@/registry/schema";
+
+export 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.",
+});