@momentumworld/ui-react 0.17.0

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-counter.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+interface AnimatedCounterProps extends Omit<React.ComponentProps<"span">, "children"> {
+  /** The target value to animate to. */
+  value: number;
+  /** Tween duration in ms (default 650). */
+  duration?: number;
+  /** Decimal places to render (default 0). */
+  decimals?: number;
+  /** Prefix rendered before the number, e.g. "$". */
+  prefix?: string;
+  /** Suffix rendered after the number, e.g. "%". */
+  suffix?: string;
+  /** Group digits with thousands separators (default true). */
+  separator?: boolean;
+}
+
+/**
+ * A number that tweens smoothly from its previous value to the next whenever
+ * `value` changes — e.g. dashboard stats re-counting when the time range
+ * switches. Dependency-free (requestAnimationFrame), so it stays tiny and works
+ * anywhere. Respects `prefers-reduced-motion` by snapping to the final value.
+ *
+ * The animation is purely visual; the accessible text is always the final
+ * value (via `aria-label`) so screen readers never read the intermediate tween.
+ */
+function AnimatedCounter({
+  value,
+  duration = 650,
+  decimals = 0,
+  prefix = "",
+  suffix = "",
+  separator = true,
+  className,
+  ...props
+}: AnimatedCounterProps) {
+  const [display, setDisplay] = useState(value);
+  const fromRef = useRef(value);
+  const rafRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const from = fromRef.current;
+    const to = value;
+    if (from === to) return;
+
+    const reduce =
+      typeof window !== "undefined" &&
+      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (reduce || duration <= 0) {
+      fromRef.current = to;
+      setDisplay(to);
+      return;
+    }
+
+    let start: number | null = null;
+    const step = (ts: number) => {
+      if (start === null) start = ts;
+      const t = Math.min(1, (ts - start) / duration);
+      // easeOutCubic — quick then settles, matching a "count up" feel.
+      const eased = 1 - Math.pow(1 - t, 3);
+      const current = from + (to - from) * eased;
+      setDisplay(current);
+      if (t < 1) {
+        rafRef.current = requestAnimationFrame(step);
+      } else {
+        fromRef.current = to;
+      }
+    };
+    rafRef.current = requestAnimationFrame(step);
+    return () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [value, duration]);
+
+  const rounded = Number(display.toFixed(decimals));
+  const formatted = separator
+    ? rounded.toLocaleString(undefined, {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals,
+      })
+    : rounded.toFixed(decimals);
+
+  const finalLabel = `${prefix}${value.toLocaleString(undefined, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  })}${suffix}`;
+
+  return (
+    <span
+      className={cn("tabular-nums", className)}
+      data-slot="animated-counter"
+      aria-label={finalLabel}
+      {...props}
+    >
+      <span aria-hidden>
+        {prefix}
+        {formatted}
+        {suffix}
+      </span>
+    </span>
+  );
+}
+
+export { AnimatedCounter, type AnimatedCounterProps };

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,
+};

package/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,23 @@
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+function AspectRatio({
+  ratio = 1,
+  className,
+  style,
+  ...props
+}: React.ComponentProps<"div"> & {
+  ratio?: number;
+}) {
+  return (
+    <div
+      className={cn("relative w-full overflow-hidden", className)}
+      data-slot="aspect-ratio"
+      style={{ aspectRatio: ratio, ...style }}
+      {...props}
+    />
+  );
+}
+
+export { AspectRatio };