@cntyclub/ui-react 0.1.0

package/src/components/ui/progress.tsx

@@ -0,0 +1,289 @@
+"use client";
+
+import { Progress as ProgressPrimitive } from "@base-ui/react/progress";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+function Progress({
+  className,
+  children,
+  ...props
+}: ProgressPrimitive.Root.Props) {
+  return (
+    <ProgressPrimitive.Root
+      className={cn("flex w-full flex-col gap-2", className)}
+      data-slot="progress"
+      {...props}
+    >
+      {children ? (
+        children
+      ) : (
+        <ProgressTrack>
+          <ProgressIndicator />
+        </ProgressTrack>
+      )}
+    </ProgressPrimitive.Root>
+  );
+}
+
+function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      className={cn("font-medium text-sm", className)}
+      data-slot="progress-label"
+      {...props}
+    />
+  );
+}
+
+function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
+  return (
+    <ProgressPrimitive.Track
+      className={cn(
+        "block h-1.5 w-full overflow-hidden rounded-full bg-input",
+        className,
+      )}
+      data-slot="progress-track"
+      {...props}
+    />
+  );
+}
+
+function ProgressIndicator({
+  className,
+  ...props
+}: ProgressPrimitive.Indicator.Props) {
+  return (
+    <ProgressPrimitive.Indicator
+      className={cn("bg-primary transition-all duration-500", className)}
+      data-slot="progress-indicator"
+      {...props}
+    />
+  );
+}
+
+function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cn("text-sm tabular-nums", className)}
+      data-slot="progress-value"
+      {...props}
+    />
+  );
+}
+
+/**
+ * A tooltip-like value bubble that floats above or below the track,
+ * following the progress percentage. Render it next to a ProgressTrack
+ * inside a `relative` wrapper.
+ */
+function ProgressFloatingValue({
+  className,
+  side = "top",
+  value,
+  max = 100,
+  children,
+  style,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "top" | "bottom";
+  value: number;
+  max?: number;
+}) {
+  const percent = Math.min(100, Math.max(0, (value / max) * 100));
+  return (
+    <div
+      className={cn(
+        "absolute -translate-x-1/2 transition-[left] duration-500",
+        side === "top" ? "bottom-full mb-2" : "top-full mt-2",
+        className,
+      )}
+      data-side={side}
+      data-slot="progress-floating-value"
+      style={{
+        left: `clamp(1.25rem, ${percent}%, calc(100% - 1.25rem))`,
+        ...style,
+      }}
+      {...props}
+    >
+      <div className="rounded-md border bg-popover px-2 py-1 font-semibold text-popover-foreground text-xs tabular-nums shadow-md/5">
+        {children ?? `${Math.round(percent)}%`}
+      </div>
+    </div>
+  );
+}
+
+const progressCircleSizes = {
+  sm: { label: "text-[0.625rem]", px: 64, stroke: 6, value: "text-sm" },
+  md: { label: "text-xs", px: 120, stroke: 10, value: "text-2xl" },
+  lg: { label: "text-sm", px: 160, stroke: 12, value: "text-3xl" },
+} as const;
+
+type ProgressCircleSize = keyof typeof progressCircleSizes;
+
+interface ProgressCircleProps extends ProgressPrimitive.Root.Props {
+  size?: ProgressCircleSize;
+  /** A short caption rendered above the value, inside the circle. */
+  label?: React.ReactNode;
+  /** Hide the centered percentage. */
+  showValue?: boolean;
+}
+
+/** A circular progress ring with an optional centered value and label. */
+function ProgressCircle({
+  className,
+  size = "md",
+  label,
+  showValue = true,
+  value,
+  max = 100,
+  ...props
+}: ProgressCircleProps) {
+  const { px, stroke, value: valueClass, label: labelClass } =
+    progressCircleSizes[size];
+  const radius = (px - stroke) / 2;
+  const percent = Math.min(100, Math.max(0, ((value ?? 0) / max) * 100));
+
+  return (
+    <ProgressPrimitive.Root
+      className={cn(
+        "relative inline-flex items-center justify-center",
+        className,
+      )}
+      data-slot="progress-circle"
+      max={max}
+      value={value}
+      {...props}
+    >
+      <svg
+        className="-rotate-90"
+        fill="none"
+        height={px}
+        viewBox={`0 0 ${px} ${px}`}
+        width={px}
+      >
+        <circle
+          className="text-input"
+          cx={px / 2}
+          cy={px / 2}
+          r={radius}
+          stroke="currentColor"
+          strokeWidth={stroke}
+        />
+        <circle
+          className="text-primary transition-[stroke-dashoffset] duration-500"
+          cx={px / 2}
+          cy={px / 2}
+          pathLength={100}
+          r={radius}
+          stroke="currentColor"
+          strokeDasharray={100}
+          strokeDashoffset={100 - percent}
+          strokeLinecap="round"
+          strokeWidth={stroke}
+        />
+      </svg>
+      {showValue || label ? (
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          {label ? (
+            <span className={cn("text-muted-foreground", labelClass)}>
+              {label}
+            </span>
+          ) : null}
+          {showValue ? (
+            <ProgressPrimitive.Value
+              className={cn(
+                "font-semibold text-foreground tabular-nums",
+                valueClass,
+              )}
+              data-slot="progress-circle-value"
+            />
+          ) : null}
+        </div>
+      ) : null}
+    </ProgressPrimitive.Root>
+  );
+}
+
+/** A half-circle (gauge) progress arc with an optional value and label. */
+function ProgressHalfCircle({
+  className,
+  size = "md",
+  label,
+  showValue = true,
+  value,
+  max = 100,
+  ...props
+}: ProgressCircleProps) {
+  const { px, stroke, value: valueClass, label: labelClass } =
+    progressCircleSizes[size];
+  const radius = (px - stroke) / 2;
+  const height = px / 2 + stroke / 2;
+  const arc = `M ${stroke / 2} ${px / 2} A ${radius} ${radius} 0 0 1 ${px - stroke / 2} ${px / 2}`;
+  const percent = Math.min(100, Math.max(0, ((value ?? 0) / max) * 100));
+
+  return (
+    <ProgressPrimitive.Root
+      className={cn("relative inline-flex justify-center", className)}
+      data-slot="progress-half-circle"
+      max={max}
+      value={value}
+      {...props}
+    >
+      <svg
+        fill="none"
+        height={height}
+        viewBox={`0 0 ${px} ${height}`}
+        width={px}
+      >
+        <path
+          className="text-input"
+          d={arc}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeWidth={stroke}
+        />
+        <path
+          className="text-primary transition-[stroke-dashoffset] duration-500"
+          d={arc}
+          pathLength={100}
+          stroke="currentColor"
+          strokeDasharray={100}
+          strokeDashoffset={100 - percent}
+          strokeLinecap="round"
+          strokeWidth={stroke}
+        />
+      </svg>
+      {showValue || label ? (
+        <div className="absolute inset-x-0 bottom-0 flex flex-col items-center">
+          {label ? (
+            <span className={cn("text-muted-foreground", labelClass)}>
+              {label}
+            </span>
+          ) : null}
+          {showValue ? (
+            <ProgressPrimitive.Value
+              className={cn(
+                "font-semibold text-foreground tabular-nums",
+                valueClass,
+              )}
+              data-slot="progress-half-circle-value"
+            />
+          ) : null}
+        </div>
+      ) : null}
+    </ProgressPrimitive.Root>
+  );
+}
+
+export {
+  Progress,
+  ProgressLabel,
+  ProgressTrack,
+  ProgressIndicator,
+  ProgressValue,
+  ProgressFloatingValue,
+  ProgressCircle,
+  ProgressHalfCircle,
+};

package/src/components/ui/qr-code.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type { Options as QRCodeStylingOptions } from "qr-code-styling";
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const qrCodeVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center text-foreground [&_canvas]:size-full [&_svg]:size-full",
+  {
+    defaultVariants: { size: "md" },
+    variants: {
+      size: {
+        sm: "size-24",
+        md: "size-40",
+        lg: "size-60",
+      },
+    },
+  },
+);
+
+interface QRCodeProps
+  extends Omit<React.ComponentProps<"div">, "children">,
+    VariantProps<typeof qrCodeVariants> {
+  /** The text or URL encoded in the QR code. */
+  value: string;
+  /**
+   * Extra qr-code-styling options merged over the themed defaults — e.g. a
+   * center image, custom dot colors or shapes. See the qr-code-styling docs.
+   */
+  options?: Partial<QRCodeStylingOptions>;
+}
+
+/**
+ * A themeable QR code rendered with qr-code-styling. Dots follow the
+ * foreground color (and re-tint when the theme flips) unless overridden
+ * via `options`.
+ */
+function QRCode({ className, size, value, options, ...props }: QRCodeProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    let disposed = false;
+    let observer: MutationObserver | undefined;
+
+    const {
+      dotsOptions,
+      cornersSquareOptions,
+      cornersDotOptions,
+      imageOptions,
+      ...rest
+    } = options ?? {};
+
+    // The container's computed color is the resolved foreground token, so the
+    // code stays on-theme without hard-coding hex values.
+    const themedShapes = () => {
+      const color = getComputedStyle(container).color;
+      return {
+        cornersDotOptions: { color, ...cornersDotOptions },
+        cornersSquareOptions: {
+          color,
+          type: "extra-rounded" as const,
+          ...cornersSquareOptions,
+        },
+        dotsOptions: { color, type: "rounded" as const, ...dotsOptions },
+      };
+    };
+
+    // qr-code-styling touches the DOM at import time, so load it lazily to
+    // keep the component SSR-safe.
+    import("qr-code-styling").then(({ default: QRCodeStyling }) => {
+      if (disposed) return;
+      const edge = container.clientWidth || 160;
+      const qr = new QRCodeStyling({
+        backgroundOptions: { color: "transparent" },
+        data: value,
+        height: edge,
+        imageOptions: {
+          crossOrigin: "anonymous",
+          imageSize: 0.4,
+          margin: 4,
+          ...imageOptions,
+        },
+        margin: 0,
+        qrOptions: { errorCorrectionLevel: "Q" },
+        type: "svg",
+        width: edge,
+        ...themedShapes(),
+        ...rest,
+      });
+      container.replaceChildren();
+      qr.append(container);
+
+      observer = new MutationObserver(() => qr.update(themedShapes()));
+      observer.observe(document.documentElement, {
+        attributeFilter: ["data-theme", "class"],
+        attributes: true,
+      });
+    });
+
+    return () => {
+      disposed = true;
+      observer?.disconnect();
+      container.replaceChildren();
+    };
+  }, [value, size, options]);
+
+  return (
+    <div
+      aria-label={`QR code for ${value}`}
+      className={cn(qrCodeVariants({ size }), className)}
+      data-slot="qr-code"
+      ref={containerRef}
+      role="img"
+      {...props}
+    />
+  );
+}
+
+/**
+ * An animated scan-line overlay for a QR code. Render it inside a `relative`
+ * wrapper around the `<QRCode />`.
+ */
+function QRCodeGradientScan({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 overflow-hidden rounded-lg",
+        className,
+      )}
+      data-slot="qr-code-gradient-scan"
+      {...props}
+    >
+      <div className="absolute inset-x-0 top-0 h-1/2 animate-qr-scan will-change-transform">
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-brand/20 to-transparent" />
+        <div className="absolute inset-x-0 top-1/2 h-px bg-brand/80 shadow-[0_0_10px_1px_var(--brand)]" />
+      </div>
+    </div>
+  );
+}
+
+export { QRCode, QRCodeGradientScan, qrCodeVariants };

package/src/components/ui/radio-group.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+
+import { cn } from "../../lib/utils/css";
+
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return (
+    <RadioGroupPrimitive
+      className={cn("flex flex-col gap-3", className)}
+      data-slot="radio-group"
+      {...props}
+    />
+  );
+}
+
+const radioSizes = {
+  sm: {
+    box: "size-4.5 sm:size-4",
+    indicator: "size-4.5 sm:size-4",
+    dot: "before:size-2 sm:before:size-1.5",
+    check: "size-3.5 sm:size-3",
+  },
+  md: {
+    box: "size-5",
+    indicator: "size-5",
+    dot: "before:size-2",
+    check: "size-4",
+  },
+} as const;
+
+interface RadioProps extends RadioPrimitive.Root.Props {
+  /** Visual size of the radio. Defaults to "sm". */
+  size?: keyof typeof radioSizes;
+  /** Indicator style: the classic dot or a checkbox-style tick. Defaults to "dot". */
+  variant?: "dot" | "check";
+}
+
+function Radio({
+  className,
+  size = "sm",
+  variant = "dot",
+  ...props
+}: RadioProps) {
+  const sizes = radioSizes[size];
+  return (
+    <RadioPrimitive.Root
+      className={cn(
+        "relative inline-flex shrink-0 items-center justify-center border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/6%)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:opacity-64 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none",
+        variant === "check"
+          ? "rounded-[4px] before:rounded-[3px]"
+          : "rounded-full before:rounded-full",
+        sizes.box,
+        className,
+      )}
+      data-slot="radio"
+      {...props}
+    >
+      {variant === "check" ? (
+        <RadioPrimitive.Indicator
+          className="-inset-px absolute flex items-center justify-center rounded-[4px] text-primary-foreground transition-opacity duration-150 ease-out data-checked:bg-primary data-checked:opacity-100 data-unchecked:opacity-0"
+          data-slot="radio-indicator"
+          keepMounted
+        >
+          {/* biome-ignore lint/a11y/noSvgWithoutTitle: decorative indicator */}
+          <svg
+            className={sizes.check}
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="3"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            {/* Same draw-in motion as the Checkbox: the tick strokes itself in
+                a beat after the fill fades in. */}
+            <path
+              className="[stroke-dasharray:1] [stroke-dashoffset:1] [transition:stroke-dashoffset_250ms_cubic-bezier(0.65,0,0.35,1)_110ms] in-[[data-checked]]:[stroke-dashoffset:0]"
+              d="M5.252 12.7 10.2 18.63 18.748 5.37"
+              pathLength={1}
+            />
+          </svg>
+        </RadioPrimitive.Indicator>
+      ) : (
+        <RadioPrimitive.Indicator
+          className={cn(
+            "-inset-px absolute flex origin-center items-center justify-center rounded-full transition-[background-color,box-shadow] duration-150 ease-out before:rounded-full before:bg-primary-foreground before:transition-[transform,opacity] before:duration-200 before:ease-[cubic-bezier(0.34,1.56,0.64,1)] data-checked:bg-primary data-checked:before:scale-100 data-checked:before:opacity-100 data-unchecked:before:scale-0 data-unchecked:before:opacity-0",
+            sizes.indicator,
+            sizes.dot,
+          )}
+          data-slot="radio-indicator"
+          keepMounted
+        />
+      )}
+    </RadioPrimitive.Root>
+  );
+}
+
+export { RadioGroup, Radio, Radio as RadioGroupItem };

package/src/components/ui/resizable.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { GripVerticalIcon } from "lucide-react";
+import type * as React from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "../../lib/utils/css";
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className,
+      )}
+      data-slot="resizable-panel-group"
+      {...props}
+    />
+  );
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      className={cn(
+        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className,
+      )}
+      data-slot="resizable-handle"
+      {...props}
+    >
+      {withHandle && (
+        <div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

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

@@ -0,0 +1,90 @@
+"use client";
+
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import { useSmoothWheel } from "./smooth-scroll";
+
+function ScrollArea({
+  className,
+  children,
+  scrollFade = false,
+  scrollbarGutter = false,
+  wheelToHorizontal = false,
+  smooth = false,
+  viewportClassName,
+  ...props
+}: ScrollAreaPrimitive.Root.Props & {
+  scrollFade?: boolean;
+  scrollbarGutter?: boolean;
+  /**
+   * Translate vertical mouse-wheel scrolling into (eased) horizontal scrolling
+   * while the pointer is over the viewport. The page only scrolls once this
+   * element reaches its horizontal start/end.
+   */
+  wheelToHorizontal?: boolean;
+  /** Eased, momentum-style vertical wheel scrolling. */
+  smooth?: boolean;
+  viewportClassName?: string;
+}) {
+  const viewportRef = React.useRef<HTMLDivElement>(null);
+
+  // Eased horizontal scrolling (smooth + slower than a raw scrollLeft jump).
+  useSmoothWheel(viewportRef, { enabled: wheelToHorizontal, horizontal: true });
+  // Optional eased vertical scrolling.
+  useSmoothWheel(viewportRef, {
+    enabled: smooth && !wheelToHorizontal,
+    horizontal: false,
+  });
+
+  return (
+    <ScrollAreaPrimitive.Root
+      className={cn("flex flex-col min-h-0", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        ref={viewportRef}
+        className={cn(
+          "flex grow flex-col min-h-0 rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-x:overscroll-x-contain data-has-overflow-y:overscroll-y-contain",
+          scrollFade &&
+            "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
+          scrollbarGutter &&
+            "data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5",
+          viewportClassName,
+        )}
+        data-slot="scroll-area-viewport"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar orientation="vertical" />
+      <ScrollBar orientation="horizontal" />
+      <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      className={cn(
+        "m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100",
+        className,
+      )}
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        className="relative flex-1 rounded-full bg-foreground/20"
+        data-slot="scroll-area-thumb"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };