@cntyclub/ui-react 0.1.0

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,169 @@
+"use client";
+
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+
+import { cn } from "../../lib/utils/css";
+
+const AlertDialogCreateHandle = AlertDialogPrimitive.createHandle;
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+function AlertDialogTrigger(props: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogBackdrop({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      className={cn(
+        "fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className,
+      )}
+      data-slot="alert-dialog-backdrop"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogViewport({
+  className,
+  ...props
+}: AlertDialogPrimitive.Viewport.Props) {
+  return (
+    <AlertDialogPrimitive.Viewport
+      className={cn(
+        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4",
+        className,
+      )}
+      data-slot="alert-dialog-viewport"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogPopup({
+  className,
+  bottomStickOnMobile = true,
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  bottomStickOnMobile?: boolean;
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogBackdrop />
+      <AlertDialogViewport
+        className={cn(
+          bottomStickOnMobile &&
+            "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",
+        )}
+      >
+        <AlertDialogPrimitive.Popup
+          className={cn(
+            "-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            bottomStickOnMobile &&
+              "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
+            className,
+          )}
+          data-slot="alert-dialog-popup"
+          {...props}
+        />
+      </AlertDialogViewport>
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 p-6 text-center max-sm:pb-4 sm:text-left",
+        className,
+      )}
+      data-slot="alert-dialog-header"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & {
+  variant?: "default" | "bare";
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]",
+        variant === "default" && "border-t bg-muted/72 py-4",
+        variant === "bare" && "pb-6",
+        className,
+      )}
+      data-slot="alert-dialog-footer"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: AlertDialogPrimitive.Title.Props) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn(
+        "font-heading font-semibold text-xl leading-none",
+        className,
+      )}
+      data-slot="alert-dialog-title"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogPrimitive.Description.Props) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="alert-dialog-description"
+      {...props}
+    />
+  );
+}
+
+function AlertDialogClose(props: AlertDialogPrimitive.Close.Props) {
+  return (
+    <AlertDialogPrimitive.Close data-slot="alert-dialog-close" {...props} />
+  );
+}
+
+export {
+  AlertDialogCreateHandle,
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogBackdrop,
+  AlertDialogBackdrop as AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogPopup,
+  AlertDialogPopup as AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogClose,
+  AlertDialogViewport,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,80 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const alertVariants = cva(
+  "relative grid w-full items-start gap-x-2 gap-y-0.5 rounded-xl border px-3.5 py-3 text-card-foreground text-sm has-[>svg]:has-data-[slot=alert-action]:grid-cols-[calc(var(--spacing)*4)_1fr_auto] has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-data-[slot=alert-action]:grid-cols-[1fr_auto] has-[>svg]:gap-x-2 [&>svg]:h-lh [&>svg]:w-4",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default:
+          "bg-transparent dark:bg-input/32 [&>svg]:text-muted-foreground",
+        error:
+          "border-destructive/32 bg-destructive/4 [&>svg]:text-destructive",
+        info: "border-info/32 bg-info/4 [&>svg]:text-info",
+        success: "border-success/32 bg-success/4 [&>svg]:text-success",
+        warning: "border-warning/32 bg-warning/4 [&>svg]:text-warning",
+      },
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      className={cn(alertVariants({ variant }), className)}
+      data-slot="alert"
+      role="alert"
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("font-medium [svg~&]:col-start-2", className)}
+      data-slot="alert-title"
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2.5 text-muted-foreground [svg~&]:col-start-2",
+        className,
+      )}
+      data-slot="alert-description"
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex gap-1 max-sm:col-start-2 max-sm:mt-2 sm:row-start-1 sm:row-end-3 sm:self-center sm:[[data-slot=alert-description]~&]:col-start-2 sm:[[data-slot=alert-title]~&]:col-start-2 sm:[svg~&]:col-start-2 sm:[svg~[data-slot=alert-description]~&]:col-start-3 sm:[svg~[data-slot=alert-title]~&]:col-start-3",
+        className,
+      )}
+      data-slot="alert-action"
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/src/components/ui/animated-theme-toggler.tsx

@@ -0,0 +1,265 @@
+"use client";
+
+import { MoonIcon, SunIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+
+import { cn } from "../../lib/utils/css";
+import { useTheme } from "../theme-provider";
+import { buttonVariants } from "./button";
+
+export type ThemeTogglerVariant =
+  | "circle"
+  | "square"
+  | "triangle"
+  | "diamond"
+  | "hexagon"
+  | "rectangle"
+  | "star";
+
+interface AnimatedThemeTogglerProps
+  extends React.ComponentPropsWithoutRef<"button"> {
+  /** Duration of the reveal animation in milliseconds. */
+  duration?: number;
+  /** Clip-path shape used for the view-transition reveal. */
+  variant?: ThemeTogglerVariant;
+  /** Expand from the viewport center instead of the button center. */
+  fromCenter?: boolean;
+}
+
+function polygonCollapsed(cx: number, cy: number, vertexCount: number): string {
+  const pairs = Array.from(
+    { length: vertexCount },
+    () => `${cx}px ${cy}px`,
+  ).join(", ");
+  return `polygon(${pairs})`;
+}
+
+function getThemeTransitionClipPaths(
+  variant: ThemeTogglerVariant,
+  cx: number,
+  cy: number,
+  maxRadius: number,
+  viewportWidth: number,
+  viewportHeight: number,
+): [string, string] {
+  switch (variant) {
+    case "circle":
+      return [
+        `circle(0px at ${cx}px ${cy}px)`,
+        `circle(${maxRadius}px at ${cx}px ${cy}px)`,
+      ];
+    case "square": {
+      const halfW = Math.max(cx, viewportWidth - cx);
+      const halfH = Math.max(cy, viewportHeight - cy);
+      const halfSide = Math.max(halfW, halfH) * 1.05;
+      const end = [
+        `${cx - halfSide}px ${cy - halfSide}px`,
+        `${cx + halfSide}px ${cy - halfSide}px`,
+        `${cx + halfSide}px ${cy + halfSide}px`,
+        `${cx - halfSide}px ${cy + halfSide}px`,
+      ].join(", ");
+      return [polygonCollapsed(cx, cy, 4), `polygon(${end})`];
+    }
+    case "triangle": {
+      const scale = maxRadius * 2.2;
+      const dx = (Math.sqrt(3) / 2) * scale;
+      const verts = [
+        `${cx}px ${cy - scale}px`,
+        `${cx + dx}px ${cy + 0.5 * scale}px`,
+        `${cx - dx}px ${cy + 0.5 * scale}px`,
+      ].join(", ");
+      return [polygonCollapsed(cx, cy, 3), `polygon(${verts})`];
+    }
+    case "diamond": {
+      // Slightly larger than the circle radius so axis-aligned coverage matches.
+      const R = maxRadius * Math.SQRT2;
+      const end = [
+        `${cx}px ${cy - R}px`,
+        `${cx + R}px ${cy}px`,
+        `${cx}px ${cy + R}px`,
+        `${cx - R}px ${cy}px`,
+      ].join(", ");
+      return [polygonCollapsed(cx, cy, 4), `polygon(${end})`];
+    }
+    case "hexagon": {
+      const R = maxRadius * Math.SQRT2;
+      const verts: string[] = [];
+      for (let i = 0; i < 6; i++) {
+        const a = -Math.PI / 2 + (i * Math.PI) / 3;
+        verts.push(`${cx + R * Math.cos(a)}px ${cy + R * Math.sin(a)}px`);
+      }
+      return [polygonCollapsed(cx, cy, 6), `polygon(${verts.join(", ")})`];
+    }
+    case "rectangle": {
+      const halfW = Math.max(cx, viewportWidth - cx);
+      const halfH = Math.max(cy, viewportHeight - cy);
+      const end = [
+        `${cx - halfW}px ${cy - halfH}px`,
+        `${cx + halfW}px ${cy - halfH}px`,
+        `${cx + halfW}px ${cy + halfH}px`,
+        `${cx - halfW}px ${cy + halfH}px`,
+      ].join(", ");
+      return [polygonCollapsed(cx, cy, 4), `polygon(${end})`];
+    }
+    case "star": {
+      // Small overscan so the last frames never leave a 1px seam.
+      const R = maxRadius * Math.SQRT2 * 1.03;
+      const innerRatio = 0.42;
+      const starPolygon = (radius: number) => {
+        const verts: string[] = [];
+        for (let i = 0; i < 5; i++) {
+          const outerA = -Math.PI / 2 + (i * 2 * Math.PI) / 5;
+          verts.push(
+            `${cx + radius * Math.cos(outerA)}px ${cy + radius * Math.sin(outerA)}px`,
+          );
+          const innerA = outerA + Math.PI / 5;
+          verts.push(
+            `${cx + radius * innerRatio * Math.cos(innerA)}px ${cy + radius * innerRatio * Math.sin(innerA)}px`,
+          );
+        }
+        return `polygon(${verts.join(", ")})`;
+      };
+      const startR = Math.max(2, R * 0.025);
+      return [starPolygon(startR), starPolygon(R)];
+    }
+    default:
+      return [
+        `circle(0px at ${cx}px ${cy}px)`,
+        `circle(${maxRadius}px at ${cx}px ${cy}px)`,
+      ];
+  }
+}
+
+type DocumentWithViewTransition = Document & {
+  startViewTransition?: (callback: () => void) => {
+    finished: Promise<void>;
+    ready: Promise<void>;
+  };
+};
+
+/**
+ * Animated light/dark toggle using the View Transitions API.
+ *
+ * Drives the kit's `ThemeProvider` (via `useTheme`), so persistence and the
+ * `data-theme` attribute are handled for you. On browsers without the View
+ * Transitions API it falls back to an instant toggle.
+ *
+ * Requires the kit stylesheet (`@countryclub/ui-react/styles.css`), which
+ * defines the scoped `::view-transition` rules.
+ */
+function AnimatedThemeToggler({
+  className,
+  duration = 400,
+  variant,
+  fromCenter = false,
+  ...props
+}: AnimatedThemeTogglerProps) {
+  const shape = variant ?? "circle";
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const isDark = resolvedTheme === "dark";
+
+  const toggleTheme = useCallback(() => {
+    const button = buttonRef.current;
+    if (!button) return;
+
+    const applyTheme = () => {
+      setTheme(isDark ? "light" : "dark");
+    };
+
+    const doc = document as DocumentWithViewTransition;
+    if (typeof doc.startViewTransition !== "function") {
+      applyTheme();
+      return;
+    }
+
+    const viewportWidth = window.visualViewport?.width ?? window.innerWidth;
+    const viewportHeight = window.visualViewport?.height ?? window.innerHeight;
+
+    let x: number;
+    let y: number;
+    if (fromCenter) {
+      x = viewportWidth / 2;
+      y = viewportHeight / 2;
+    } else {
+      const { top, left, width, height } = button.getBoundingClientRect();
+      x = left + width / 2;
+      y = top + height / 2;
+    }
+
+    const maxRadius = Math.hypot(
+      Math.max(x, viewportWidth - x),
+      Math.max(y, viewportHeight - y),
+    );
+
+    const clipPath = getThemeTransitionClipPaths(
+      shape,
+      x,
+      y,
+      maxRadius,
+      viewportWidth,
+      viewportHeight,
+    );
+
+    const root = document.documentElement;
+    root.dataset.themeVt = "active";
+    root.style.setProperty("--theme-toggle-vt-duration", `${duration}ms`);
+    // Origin for the CSS initial clip-path, so the new snapshot starts hidden
+    // at the same point the JS animation expands from (prevents a pre-animation
+    // flash of the new theme).
+    root.style.setProperty("--theme-vt-x", `${x}px`);
+    root.style.setProperty("--theme-vt-y", `${y}px`);
+    const cleanup = () => {
+      delete root.dataset.themeVt;
+      root.style.removeProperty("--theme-toggle-vt-duration");
+      root.style.removeProperty("--theme-vt-x");
+      root.style.removeProperty("--theme-vt-y");
+    };
+
+    const transition = doc.startViewTransition(() => {
+      flushSync(applyTheme);
+    });
+
+    transition.finished.finally(cleanup);
+
+    transition.ready.then(() => {
+      document.documentElement.animate(
+        { clipPath },
+        {
+          duration,
+          // Star: linear avoids easing overshoot that fights polygon interpolation.
+          easing: shape === "star" ? "linear" : "ease-in-out",
+          fill: "forwards",
+          pseudoElement: "::view-transition-new(root)",
+        },
+      );
+    });
+  }, [shape, fromCenter, duration, isDark, setTheme]);
+
+  return (
+    <button
+      aria-label="Toggle theme"
+      className={cn(
+        buttonVariants({ size: "icon", variant: "ghost" }),
+        className,
+      )}
+      data-slot="animated-theme-toggler"
+      onClick={toggleTheme}
+      ref={buttonRef}
+      type="button"
+      {...props}
+    >
+      {mounted && isDark ? <SunIcon /> : <MoonIcon />}
+      <span className="sr-only">Toggle theme</span>
+    </button>
+  );
+}
+
+export { AnimatedThemeToggler };

package/src/components/ui/app-store-buttons.tsx

@@ -0,0 +1,182 @@
+"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 appStoreButtonVariants = cva(
+  "relative inline-flex h-12 shrink-0 cursor-pointer items-center justify-center gap-2.5 whitespace-nowrap rounded-lg border px-[calc(--spacing(3.5)-1px)] text-start outline-none transition-[box-shadow,filter] duration-100 [: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-6 [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default:
+          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-primary/90",
+        outline:
+          "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",
+      },
+    },
+  },
+);
+
+function GooglePlayLogoIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M1.337.924a1.486 1.486 0 0 0-.112.568v21.017c0 .217.045.419.124.6l11.155-11.087L1.337.924Z"
+        fill="#00AFFF"
+      />
+      <path
+        d="M13.544 10.989 16.802 7.75 3.45.195a1.466 1.466 0 0 0-.946-.179l11.04 10.973Z"
+        fill="#00DE76"
+      />
+      <path
+        d="m22.018 13.298-3.919 2.218-3.515-3.493 3.543-3.521 3.891 2.202a1.49 1.49 0 0 1 0 2.594Z"
+        fill="#FFBD00"
+      />
+      <path
+        d="m13.544 13.056-11 10.933c.298.036.612-.016.906-.183l13.324-7.54-3.23-3.21Z"
+        fill="#E12653"
+      />
+    </svg>
+  );
+}
+
+function AppleLogoIcon(props: React.ComponentProps<"svg">) {
+  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 GalaxyStoreLogoIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M16.5 7.2v-.55a4.5 4.5 0 1 0-9 0v.55H5.1c-1 0-1.85.74-1.98 1.74l-1.05 8A2.9 2.9 0 0 0 4.95 20.2h14.1a2.9 2.9 0 0 0 2.88-3.28l-1.05-8A2 2 0 0 0 18.9 7.2h-2.4Zm-7.2-.55a2.7 2.7 0 1 1 5.4 0v.55H9.3v-.55Z"
+        fill="#4D7CFE"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+      <path
+        d="M12.34 9.74c.48 2.43 1.16 3.1 3.59 3.59.35.07.35.57 0 .64-2.43.48-3.1 1.16-3.59 3.59-.07.35-.57.35-.64 0-.48-2.43-1.16-3.1-3.59-3.59-.35-.07-.35-.57 0-.64 2.43-.48 3.1-1.16 3.59-3.59.07-.35.57-.35.64 0Z"
+        fill="#fff"
+      />
+    </svg>
+  );
+}
+
+function AppGalleryLogoIcon(props: React.ComponentProps<"svg">) {
+  return (
+    <svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <rect x="2.4" y="2.4" width="19.2" height="19.2" rx="4.8" fill="#E2334D" />
+      <path
+        d="M8.9 9V7.7a3.1 3.1 0 0 1 6.2 0V9"
+        stroke="#fff"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+      <path
+        d="M6.55 9h10.9c.58 0 1.05.47 1.05 1.05v6.1c0 .58-.47 1.05-1.05 1.05H6.55a1.05 1.05 0 0 1-1.05-1.05v-6.1C5.5 9.47 5.97 9 6.55 9Z"
+        stroke="#fff"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
+
+type AppStoreButtonStore =
+  | "google-play"
+  | "app-store"
+  | "galaxy-store"
+  | "app-gallery";
+
+const stores: Record<
+  AppStoreButtonStore,
+  {
+    eyebrow: string;
+    name: string;
+    Icon: (props: React.ComponentProps<"svg">) => React.ReactElement;
+  }
+> = {
+  "app-gallery": {
+    eyebrow: "EXPLORE IT ON",
+    name: "AppGallery",
+    Icon: AppGalleryLogoIcon,
+  },
+  "app-store": {
+    eyebrow: "Download on the",
+    name: "App Store",
+    Icon: AppleLogoIcon,
+  },
+  "galaxy-store": {
+    eyebrow: "Available on",
+    name: "Galaxy Store",
+    Icon: GalaxyStoreLogoIcon,
+  },
+  "google-play": {
+    eyebrow: "GET IT ON",
+    name: "Google Play",
+    Icon: GooglePlayLogoIcon,
+  },
+};
+
+interface AppStoreButtonProps extends useRender.ComponentProps<"button"> {
+  /** Which store badge to render: google-play, app-store, galaxy-store or app-gallery. */
+  store: AppStoreButtonStore;
+  variant?: VariantProps<typeof appStoreButtonVariants>["variant"];
+}
+
+function AppStoreButton({
+  className,
+  store,
+  variant = "default",
+  render,
+  ...props
+}: AppStoreButtonProps) {
+  const { eyebrow, name, Icon } = stores[store];
+  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
+    render ? undefined : "button";
+
+  const defaultProps = {
+    className: cn(appStoreButtonVariants({ className, variant })),
+    "data-slot": "app-store-button",
+    "data-store": store,
+    type: typeValue,
+    children: (
+      <>
+        <Icon aria-hidden="true" />
+        <span className="flex flex-col" data-slot="app-store-button-label">
+          <span className="font-medium text-[10px] leading-3.5 opacity-72">
+            {eyebrow}
+          </span>
+          <span className="font-semibold text-base leading-5 tracking-[-0.01em]">
+            {name}
+          </span>
+        </span>
+      </>
+    ),
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+}
+
+export {
+  AppStoreButton,
+  appStoreButtonVariants,
+  GooglePlayLogoIcon,
+  AppleLogoIcon,
+  GalaxyStoreLogoIcon,
+  AppGalleryLogoIcon,
+  type AppStoreButtonStore,
+};