@momentumworld/ui-react 0.17.0

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,16 @@
+import { cn } from "../../lib/utils/css";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "animate-skeleton rounded-sm [--skeleton-highlight:--alpha(var(--color-white)/64%)] [background:linear-gradient(120deg,transparent_40%,var(--skeleton-highlight),transparent_60%)_var(--color-muted)_0_0/200%_100%_fixed] dark:[--skeleton-highlight:--alpha(var(--color-white)/4%)]",
+        className,
+      )}
+      data-slot="skeleton"
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/components/ui/slider.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+type SliderLabelPosition = "bottom" | "floating";
+
+function Slider({
+  className,
+  children,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  labelPosition,
+  formatLabel = (labelValue) => String(labelValue),
+  ...props
+}: SliderPrimitive.Root.Props & {
+  /** Render each thumb's value beneath it, or in a floating bubble above it. */
+  labelPosition?: SliderLabelPosition;
+  formatLabel?: (value: number) => React.ReactNode;
+}) {
+  const _values = React.useMemo(() => {
+    if (value !== undefined) {
+      return Array.isArray(value) ? value : [value];
+    }
+    if (defaultValue !== undefined) {
+      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    }
+    return [min];
+  }, [value, defaultValue, min]);
+
+  return (
+    <SliderPrimitive.Root
+      className={cn("data-[orientation=horizontal]:w-full", className)}
+      defaultValue={defaultValue}
+      max={max}
+      min={min}
+      thumbAlignment="edge"
+      value={value}
+      {...props}
+    >
+      {children}
+      <SliderPrimitive.Control
+        className="flex touch-none select-none data-disabled:pointer-events-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:min-w-44 data-[orientation=vertical]:flex-col data-disabled:opacity-64"
+        data-slot="slider-control"
+      >
+        <SliderPrimitive.Track
+          className="relative grow select-none before:absolute before:rounded-full before:bg-input data-[orientation=horizontal]:h-1 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1 data-[orientation=horizontal]:before:inset-x-0.5 data-[orientation=vertical]:before:inset-x-0 data-[orientation=horizontal]:before:inset-y-0 data-[orientation=vertical]:before:inset-y-0.5"
+          data-slot="slider-track"
+        >
+          <SliderPrimitive.Indicator
+            className="select-none rounded-full bg-primary data-[orientation=horizontal]:ms-0.5 data-[orientation=vertical]:mb-0.5"
+            data-slot="slider-indicator"
+          />
+          {Array.from({ length: _values.length }, (_, index) => (
+            <SliderPrimitive.Thumb
+              className="block size-5 shrink-0 select-none rounded-full border border-input bg-white not-dark:bg-clip-padding shadow-xs/5 outline-none transition-[box-shadow,scale] duration-150 ease-out before:absolute before:inset-0 before:rounded-full before:shadow-[0_1px_--theme(--color-black/6%)] has-focus-visible:ring-[3px] has-focus-visible:ring-ring/24 data-dragging:data-[active]:scale-115 sm:size-4 dark:border-background dark:has-focus-visible:ring-ring/48 [:has(*:focus-visible),[data-dragging]]:shadow-none"
+              data-slot="slider-thumb"
+              index={index}
+              key={String(index)}
+              render={(thumbProps, state) => (
+                <div
+                  {...thumbProps}
+                  data-active={
+                    state.activeThumbIndex === index ? "" : undefined
+                  }
+                >
+                  {thumbProps.children}
+                  {labelPosition === "bottom" && (
+                    <span
+                      className="pointer-events-none absolute start-1/2 top-full mt-2 -translate-x-1/2 select-none whitespace-nowrap font-medium text-foreground text-sm rtl:translate-x-1/2"
+                      data-slot="slider-thumb-label"
+                    >
+                      {formatLabel(state.values[index] ?? min)}
+                    </span>
+                  )}
+                  {labelPosition === "floating" && (
+                    <span
+                      className="pointer-events-none absolute bottom-full start-1/2 mb-2.5 -translate-x-1/2 select-none whitespace-nowrap rounded-md border bg-popover not-dark:bg-clip-padding px-2 py-1 font-semibold text-popover-foreground text-xs shadow-md/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] rtl:translate-x-1/2 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]"
+                      data-slot="slider-thumb-label"
+                    >
+                      {formatLabel(state.values[index] ?? min)}
+                    </span>
+                  )}
+                </div>
+              )}
+            />
+          ))}
+        </SliderPrimitive.Track>
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  );
+}
+
+function SliderValue({ className, ...props }: SliderPrimitive.Value.Props) {
+  return (
+    <SliderPrimitive.Value
+      className={cn("flex justify-end text-sm", className)}
+      data-slot="slider-value"
+      {...props}
+    />
+  );
+}
+
+export { Slider, SliderValue };

package/src/components/ui/smooth-scroll.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+export interface SmoothWheelOptions {
+  /** Turn the behaviour on/off (so it can be called unconditionally). */
+  enabled?: boolean;
+  /** Translate vertical wheel movement into horizontal scrolling. */
+  horizontal?: boolean;
+  /** Scales the wheel delta — lower feels slower/heavier. Default 0.8. */
+  multiplier?: number;
+  /** Lerp factor toward the target each frame (0–1). Lower = smoother. */
+  ease?: number;
+}
+
+/**
+ * Eased, momentum-style wheel scrolling for any scrollable element. Instead of
+ * jumping `scrollTop`/`scrollLeft` by the raw wheel delta (which feels fast and
+ * abrupt), it animates toward an accumulated target with `requestAnimationFrame`.
+ *
+ * It only smooths genuine mouse wheels. Trackpads already scroll smoothly with
+ * OS-level inertia, so layering our own easing on top makes it fight the native
+ * momentum — the container sticks, or snaps back to where the animation was
+ * still heading. In the default vertical mode a trackpad therefore keeps native
+ * behaviour; in horizontal mode we still translate a vertical mouse wheel into
+ * horizontal scrolling (the whole point of the mode) but let a real horizontal
+ * trackpad swipe scroll natively. Every time control returns to native
+ * scrolling — trackpad, or an edge — the in-flight animation is cancelled and
+ * the target resynced so it can never pull the position back.
+ */
+export function useSmoothWheel(
+  ref: React.RefObject<HTMLElement | null>,
+  {
+    enabled = true,
+    horizontal = false,
+    multiplier = 0.8,
+    ease = 0.12,
+  }: SmoothWheelOptions = {},
+) {
+  React.useEffect(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    if (!el) return;
+
+    // Respect users who prefer no motion — fall back to native scrolling.
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+
+    const axisProp = horizontal ? "scrollLeft" : "scrollTop";
+    const sizeProp = horizontal ? "scrollWidth" : "scrollHeight";
+    const clientProp = horizontal ? "clientWidth" : "clientHeight";
+
+    let target = el[axisProp];
+    let raf = 0;
+    let animating = false;
+    let kind: "mouse" | "trackpad" | null = null;
+    let lastTs = 0;
+
+    // Cancel the animation and resync the target to the real position, so any
+    // native scrolling that follows is never yanked back to a stale target.
+    const releaseToNative = () => {
+      if (raf) cancelAnimationFrame(raf);
+      raf = 0;
+      animating = false;
+      target = el[axisProp];
+    };
+
+    const tick = () => {
+      const max = el[sizeProp] - el[clientProp];
+      target = Math.max(0, Math.min(target, max));
+      const current = el[axisProp];
+      const diff = target - current;
+      if (Math.abs(diff) < 0.5) {
+        el[axisProp] = target;
+        raf = 0;
+        animating = false;
+        return;
+      }
+      el[axisProp] = current + diff * ease;
+      raf = requestAnimationFrame(tick);
+    };
+
+    // Strong per-event trackpad signals: fractional deltas, a horizontal
+    // component (mice almost never emit deltaX), or small pixel steps.
+    const looksLikeTrackpad = (e: WheelEvent) =>
+      e.deltaMode === 0 &&
+      (!Number.isInteger(e.deltaY) ||
+        e.deltaX !== 0 ||
+        Math.abs(e.deltaY) < 50);
+
+    // Sticky, gesture-scoped classification: decide once per burst of events
+    // (< 200ms apart) so a hard trackpad flick whose mid-gesture deltas look
+    // mouse-like stays classified as a trackpad the whole way through.
+    const classify = (e: WheelEvent, now: number): "mouse" | "trackpad" => {
+      if (kind === null || now - lastTs > 200) {
+        kind = looksLikeTrackpad(e) ? "trackpad" : "mouse";
+      } else if (
+        kind === "mouse" &&
+        (e.deltaX !== 0 || !Number.isInteger(e.deltaY))
+      ) {
+        kind = "trackpad";
+      }
+      return kind;
+    };
+
+    const onWheel = (event: WheelEvent) => {
+      if (event.ctrlKey) return; // pinch-zoom
+      const max = el[sizeProp] - el[clientProp];
+      if (max <= 0) return;
+
+      const now = performance.now();
+      const source = classify(event, now);
+      lastTs = now;
+
+      if (horizontal) {
+        // Native handles a real horizontal swipe; we only translate the
+        // vertical wheel (mouse, or a trackpad's vertical swipe) into
+        // horizontal motion — that translation is the reason the mode exists.
+        if (event.deltaX !== 0 && Math.abs(event.deltaX) >= Math.abs(event.deltaY)) {
+          releaseToNative();
+          return;
+        }
+      } else if (source === "trackpad") {
+        // Vertical mode: let the OS scroll the trackpad natively.
+        releaseToNative();
+        return;
+      }
+
+      let delta =
+        horizontal && event.deltaX !== 0 ? event.deltaX : event.deltaY;
+      // deltaMode: 0 = pixel, 1 = line, 2 = page.
+      if (event.deltaMode === 1) delta *= 16;
+      else if (event.deltaMode === 2) delta *= el[clientProp];
+      delta *= multiplier;
+      if (delta === 0) return;
+
+      if (!animating) target = el[axisProp];
+
+      const atStart = target <= 0;
+      const atEnd = target >= max;
+      // Let the wheel bubble at the edges so the page keeps scrolling.
+      if ((delta < 0 && atStart) || (delta > 0 && atEnd)) {
+        releaseToNative();
+        return;
+      }
+
+      event.preventDefault();
+      target = Math.max(0, Math.min(target + delta, max));
+      if (!animating) {
+        animating = true;
+        raf = requestAnimationFrame(tick);
+      }
+    };
+
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      cancelAnimationFrame(raf);
+    };
+  }, [ref, enabled, horizontal, multiplier, ease]);
+}
+
+export interface SmoothScrollProps extends React.ComponentProps<"div"> {
+  /** Scroll horizontally (vertical wheel is translated to horizontal). */
+  horizontal?: boolean;
+  /** Scales the wheel delta — lower feels slower/heavier. Default 0.8. */
+  multiplier?: number;
+  /** Lerp factor toward the target each frame (0–1). Lower = smoother. */
+  ease?: number;
+}
+
+/**
+ * A scroll container with eased, momentum-style wheel scrolling. Drop any
+ * overflowing content inside; pass `horizontal` for a row that scrolls
+ * smoothly with a normal mouse wheel.
+ */
+function SmoothScroll({
+  className,
+  children,
+  horizontal = false,
+  multiplier,
+  ease,
+  ...props
+}: SmoothScrollProps) {
+  const ref = React.useRef<HTMLDivElement>(null);
+  useSmoothWheel(ref, { ease, horizontal, multiplier });
+
+  return (
+    <div
+      className={cn(
+        horizontal ? "overflow-x-auto overflow-y-hidden" : "overflow-y-auto",
+        className,
+      )}
+      data-slot="smooth-scroll"
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export { SmoothScroll };

package/src/components/ui/social-button.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const socialButtonVariants = cva(
+  "relative inline-flex h-10 shrink-0 cursor-pointer items-center justify-center gap-2.5 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-[box-shadow,filter] duration-100 sm:h-9 sm:text-sm [:active:not(:disabled)]:brightness-95 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0 sm:[&_svg]:size-4.5",
+  {
+    defaultVariants: {
+      iconOnly: false,
+      theme: "brand",
+    },
+    variants: {
+      iconOnly: {
+        false: "px-[calc(--spacing(4)-1px)]",
+        true: "w-10 px-0 sm:w-9",
+      },
+      theme: {
+        // Filled with the provider's brand color (set per provider below).
+        brand:
+          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none",
+        // Outline surface with the provider's full-color logo.
+        color:
+          "border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",
+        // Neutral tonal surface with a monochrome logo.
+        gray: "border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90",
+      },
+      provider: {
+        apple: "",
+        dribbble: "",
+        facebook: "",
+        figma: "",
+        google: "",
+        twitter: "",
+      },
+    },
+    compoundVariants: [
+      {
+        provider: "google",
+        theme: "brand",
+        className:
+          "border-[#4285F4] bg-[#4285F4] text-white shadow-[#4285F4]/24 [:hover,[data-pressed]]:bg-[#4285F4]/90",
+      },
+      {
+        provider: "facebook",
+        theme: "brand",
+        className:
+          "border-[#1877F2] bg-[#1877F2] text-white shadow-[#1877F2]/24 [:hover,[data-pressed]]:bg-[#1877F2]/90",
+      },
+      {
+        provider: "dribbble",
+        theme: "brand",
+        className:
+          "border-[#EA4C89] bg-[#EA4C89] text-white shadow-[#EA4C89]/24 [:hover,[data-pressed]]:bg-[#EA4C89]/90",
+      },
+      // Black-brand providers invert in dark mode so they stay visible.
+      ...["apple", "twitter", "figma"].map((provider) => ({
+        provider: provider as SocialButtonProvider,
+        theme: "brand" as const,
+        className:
+          "border-black bg-black text-white shadow-black/24 [:hover,[data-pressed]]:bg-black/90 dark:border-white dark:bg-white dark:text-black dark:shadow-white/8 dark:not-disabled:inset-shadow-none dark:[:hover,[data-pressed]]:bg-white/90",
+      })),
+    ],
+  },
+);
+
+interface SocialLogoProps extends React.ComponentProps<"svg"> {
+  /** Render the provider's full-color logo instead of currentColor. */
+  colored?: boolean;
+}
+
+function GoogleLogoIcon({ colored, ...props }: SocialLogoProps) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M23.52 12.273c0-.851-.076-1.67-.218-2.455H12v4.642h6.458a5.52 5.52 0 0 1-2.394 3.622v3.01h3.878c2.269-2.088 3.578-5.165 3.578-8.819Z"
+        fill={colored ? "#4285F4" : "currentColor"}
+      />
+      <path
+        d="M12 24c3.24 0 5.957-1.075 7.942-2.907l-3.878-3.011c-1.075.72-2.45 1.145-4.064 1.145-3.125 0-5.77-2.11-6.715-4.947H1.276v3.11A11.995 11.995 0 0 0 12 24Z"
+        fill={colored ? "#34A853" : "currentColor"}
+      />
+      <path
+        d="M5.285 14.28A7.213 7.213 0 0 1 4.91 12c0-.79.136-1.56.376-2.28V6.61H1.276a11.995 11.995 0 0 0 0 10.78l4.009-3.11Z"
+        fill={colored ? "#FBBC05" : "currentColor"}
+      />
+      <path
+        d="M12 4.773c1.762 0 3.344.605 4.587 1.794l3.442-3.442C17.952 1.19 15.235 0 12 0A11.995 11.995 0 0 0 1.276 6.61l4.01 3.11C6.228 6.884 8.874 4.773 12 4.773Z"
+        fill={colored ? "#EA4335" : "currentColor"}
+      />
+    </svg>
+  );
+}
+
+function FacebookLogoIcon({ colored, ...props }: SocialLogoProps) {
+  return (
+    <svg
+      fill={colored ? "#1877F2" : "currentColor"}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M24 12c0-6.627-5.373-12-12-12S0 5.373 0 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078V12h3.047V9.356c0-3.007 1.792-4.668 4.533-4.668 1.312 0 2.686.234 2.686.234v2.953h-1.514c-1.491 0-1.955.926-1.955 1.875V12h3.328l-.532 3.469h-2.796v8.385C19.612 22.954 24 17.99 24 12Z" />
+    </svg>
+  );
+}
+
+function AppleLogoIcon({ colored: _colored, ...props }: SocialLogoProps) {
+  return (
+    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
+    </svg>
+  );
+}
+
+function XLogoIcon({ colored: _colored, ...props }: SocialLogoProps) {
+  return (
+    <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.45-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117l11.966 15.644Z" />
+    </svg>
+  );
+}
+
+function FigmaLogoIcon({ colored, ...props }: SocialLogoProps) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8.167 24a3.834 3.834 0 0 0 3.833-3.833V16.333H8.167a3.834 3.834 0 0 0 0 7.667Z"
+        fill={colored ? "#0ACF83" : "currentColor"}
+      />
+      <path
+        d="M4.333 12a3.834 3.834 0 0 1 3.834-3.833H12v7.666H8.167A3.834 3.834 0 0 1 4.333 12Z"
+        fill={colored ? "#A259FF" : "currentColor"}
+      />
+      <path
+        d="M4.333 4.167A3.834 3.834 0 0 1 8.167.333H12V8H8.167a3.834 3.834 0 0 1-3.834-3.833Z"
+        fill={colored ? "#F24E1E" : "currentColor"}
+      />
+      <path
+        d="M12 .333h3.833a3.834 3.834 0 0 1 0 7.667H12V.333Z"
+        fill={colored ? "#FF7262" : "currentColor"}
+      />
+      <path
+        d="M19.667 12a3.834 3.834 0 1 1-7.667 0 3.834 3.834 0 0 1 7.667 0Z"
+        fill={colored ? "#1ABCFE" : "currentColor"}
+      />
+    </svg>
+  );
+}
+
+function DribbbleLogoIcon({ colored, ...props }: SocialLogoProps) {
+  return (
+    <svg
+      fill={colored ? "#EA4C89" : "currentColor"}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 24C5.385 24 0 18.615 0 12S5.385 0 12 0s12 5.385 12 12-5.385 12-12 12Zm10.12-10.358c-.35-.11-3.17-.953-6.384-.438 1.34 3.684 1.887 6.684 1.992 7.308 2.3-1.555 3.936-4.02 4.395-6.87Zm-6.115 7.808c-.153-.9-.75-4.032-2.19-7.77l-.066.02c-5.79 2.015-7.86 6.025-8.04 6.4 1.73 1.358 3.92 2.166 6.29 2.166 1.42 0 2.77-.29 4-.814Zm-11.62-2.58c.232-.4 3.045-5.055 8.332-6.765.135-.045.27-.084.405-.12-.26-.585-.54-1.167-.832-1.74C7.17 11.775 2.206 11.71 1.756 11.7l-.004.312c0 2.633.998 5.037 2.634 6.855ZM1.96 9.92c.46.008 4.683.026 9.477-1.248-1.698-3.018-3.53-5.558-3.8-5.928-2.868 1.35-5.01 3.99-5.676 7.17ZM9.6 2.052c.282.38 2.145 2.914 3.822 6 3.645-1.365 5.19-3.44 5.373-3.702-1.81-1.61-4.19-2.586-6.795-2.586-.825 0-1.63.1-2.4.285Zm10.335 3.483c-.218.29-1.935 2.493-5.724 4.04.24.49.47.985.68 1.486.08.18.15.36.22.53 3.41-.43 6.8.26 7.14.33-.02-2.42-.88-4.64-2.31-6.38Z"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+type SocialButtonProvider =
+  | "google"
+  | "facebook"
+  | "apple"
+  | "twitter"
+  | "figma"
+  | "dribbble";
+
+const providers: Record<
+  SocialButtonProvider,
+  {
+    label: string;
+    Icon: (props: SocialLogoProps) => React.ReactElement;
+  }
+> = {
+  apple: { Icon: AppleLogoIcon, label: "Sign in with Apple" },
+  dribbble: { Icon: DribbbleLogoIcon, label: "Sign in with Dribbble" },
+  facebook: { Icon: FacebookLogoIcon, label: "Sign in with Facebook" },
+  figma: { Icon: FigmaLogoIcon, label: "Sign in with Figma" },
+  google: { Icon: GoogleLogoIcon, label: "Sign in with Google" },
+  twitter: { Icon: XLogoIcon, label: "Sign in with X" },
+};
+
+interface SocialButtonProps extends useRender.ComponentProps<"button"> {
+  /** Which provider to render: google, facebook, apple, twitter, figma or dribbble. */
+  provider: SocialButtonProvider;
+  /** brand (provider-filled), color (outline + full-color logo) or gray (tonal). */
+  theme?: VariantProps<typeof socialButtonVariants>["theme"];
+  /** Render a square button with the logo only. */
+  iconOnly?: boolean;
+}
+
+function SocialButton({
+  className,
+  provider,
+  theme = "brand",
+  iconOnly = false,
+  render,
+  children,
+  ...props
+}: SocialButtonProps) {
+  const { label, Icon } = providers[provider];
+  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
+    render ? undefined : "button";
+
+  const defaultProps = {
+    "aria-label": iconOnly ? label : undefined,
+    className: cn(socialButtonVariants({ className, iconOnly, provider, theme })),
+    "data-provider": provider,
+    "data-slot": "social-button",
+    type: typeValue,
+    children: (
+      <>
+        <Icon aria-hidden="true" colored={theme === "color"} />
+        {!iconOnly && <span>{children ?? label}</span>}
+      </>
+    ),
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+export {
+  SocialButton,
+  socialButtonVariants,
+  GoogleLogoIcon,
+  FacebookLogoIcon,
+  XLogoIcon,
+  FigmaLogoIcon,
+  DribbbleLogoIcon,
+  type SocialButtonProvider,
+};

package/src/components/ui/spinner-on-demand.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Loader2Icon } from "lucide-react";
+import { useSpinDelay } from "spin-delay";
+import { cn } from "../../lib/utils/css";
+
+function SpinnerOnDemand({
+  className,
+  options,
+  isLoading,
+  icon,
+  ...props
+}: React.ComponentProps<typeof Loader2Icon> & {
+  isLoading: boolean;
+  options?: Parameters<typeof useSpinDelay>[1];
+  icon?: React.ReactNode;
+}) {
+  const shouldShow = useSpinDelay(isLoading, options);
+
+  if (!shouldShow) return icon || null;
+
+  return (
+    <Loader2Icon
+      aria-label="Loading"
+      className={cn("animate-spin", className)}
+      role="status"
+      {...props}
+    />
+  );
+}
+
+export { SpinnerOnDemand };

package/src/components/ui/spinner.tsx

@@ -0,0 +1,18 @@
+import { Loader2Icon } from "lucide-react";
+import { cn } from "../../lib/utils/css";
+
+function Spinner({
+  className,
+  ...props
+}: React.ComponentProps<typeof Loader2Icon>) {
+  return (
+    <Loader2Icon
+      aria-label="Loading"
+      className={cn("animate-spin", className)}
+      role="status"
+      {...props}
+    />
+  );
+}
+
+export { Spinner };