New components

app/(app)/alpha/additional-details/_client.tsx

@@ -27,18 +27,18 @@ import {
   slideThreeSubmitAction,
   slideTwoSubmitAction,
 } from "./_actions";
-import { Heading, Subheading } from "./components/heading";
-import { Divider } from "./components/divider";
 import {
   ErrorMessage,
   Field,
   Fieldset,
   Label,
   Legend,
-} from "./components/fieldset";
-import { Input } from "./components/input";
-import { Select } from "./components/select";
-import { Button } from "./components/button";
+} from "@/components/ui-components/fieldset";
+import { Input } from "@/components/ui-components/input";
+import { Select } from "@/components/ui-components/select";
+import { Button } from "@/components/ui-components/button";
+import { Heading, Subheading } from "@/components/ui-components/heading";
+import { Divider } from "@/components/ui-components/divider";
 
 type UserDetails = {
   username: string;

components/ui-components/alert.tsx

@@ -0,0 +1,108 @@
+import * as Headless from "@headlessui/react";
+import clsx from "clsx";
+import React from "react";
+import { Text } from "./text";
+
+const sizes = {
+  xs: "sm:max-w-xs",
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-xl",
+  "2xl": "sm:max-w-2xl",
+  "3xl": "sm:max-w-3xl",
+  "4xl": "sm:max-w-4xl",
+  "5xl": "sm:max-w-5xl",
+};
+
+export function Alert({
+  size = "md",
+  className,
+  children,
+  ...props
+}: {
+  size?: keyof typeof sizes;
+  className?: string;
+  children: React.ReactNode;
+} & Omit<Headless.DialogProps, "as" | "className">) {
+  return (
+    <Headless.Dialog {...props}>
+      <Headless.DialogBackdrop
+        transition
+        className="fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/15 px-2 py-2 transition duration-100 focus:outline-0 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in dark:bg-zinc-950/50 sm:px-6 sm:py-8 lg:px-8 lg:py-16"
+      />
+
+      <div className="fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0">
+        <div className="grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center p-8 sm:grid-rows-[1fr_auto_3fr] sm:p-4">
+          <Headless.DialogPanel
+            transition
+            className={clsx(
+              className,
+              sizes[size],
+              "row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 dark:bg-zinc-900 dark:ring-white/10 sm:rounded-2xl sm:p-6 forced-colors:outline",
+              "transition duration-100 will-change-transform data-[closed]:data-[enter]:scale-95 data-[closed]:opacity-0 data-[enter]:ease-out data-[leave]:ease-in",
+            )}
+          >
+            {children}
+          </Headless.DialogPanel>
+        </div>
+      </div>
+    </Headless.Dialog>
+  );
+}
+
+export function AlertTitle({
+  className,
+  ...props
+}: { className?: string } & Omit<
+  Headless.DialogTitleProps,
+  "as" | "className"
+>) {
+  return (
+    <Headless.DialogTitle
+      {...props}
+      className={clsx(
+        className,
+        "text-balance text-center text-base/6 font-semibold text-zinc-950 dark:text-white sm:text-wrap sm:text-left sm:text-sm/6",
+      )}
+    />
+  );
+}
+
+export function AlertDescription({
+  className,
+  ...props
+}: { className?: string } & Omit<
+  Headless.DescriptionProps<typeof Text>,
+  "as" | "className"
+>) {
+  return (
+    <Headless.Description
+      as={Text}
+      {...props}
+      className={clsx(className, "mt-2 text-pretty text-center sm:text-left")}
+    />
+  );
+}
+
+export function AlertBody({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return <div {...props} className={clsx(className, "mt-4")} />;
+}
+
+export function AlertActions({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      {...props}
+      className={clsx(
+        className,
+        "mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto",
+      )}
+    />
+  );
+}

components/ui-components/avatar.tsx

@@ -0,0 +1,100 @@
+import * as Headless from "@headlessui/react";
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+import { TouchTarget } from "./button";
+import { Link } from "./link";
+
+type AvatarProps = {
+  src?: string | null;
+  square?: boolean;
+  initials?: string;
+  alt?: string;
+  className?: string;
+};
+
+export function Avatar({
+  src = null,
+  square = false,
+  initials,
+  alt = "",
+  className,
+  ...props
+}: AvatarProps & React.ComponentPropsWithoutRef<"span">) {
+  return (
+    <span
+      data-slot="avatar"
+      {...props}
+      className={clsx(
+        className,
+        // Basic layout
+        "inline-grid shrink-0 align-middle [--avatar-radius:20%] [--ring-opacity:20%] *:col-start-1 *:row-start-1",
+        "outline outline-1 -outline-offset-1 outline-black/[--ring-opacity] dark:outline-white/[--ring-opacity]",
+        // Add the correct border radius
+        square
+          ? "rounded-[--avatar-radius] *:rounded-[--avatar-radius]"
+          : "rounded-full *:rounded-full",
+      )}
+    >
+      {initials && (
+        <svg
+          className="size-full select-none fill-current p-[5%] text-[48px] font-medium uppercase"
+          viewBox="0 0 100 100"
+          aria-hidden={alt ? undefined : "true"}
+        >
+          {alt && <title>{alt}</title>}
+          <text
+            x="50%"
+            y="50%"
+            alignmentBaseline="middle"
+            dominantBaseline="middle"
+            textAnchor="middle"
+            dy=".125em"
+          >
+            {initials}
+          </text>
+        </svg>
+      )}
+      {src && <img className="size-full" src={src} alt={alt} />}
+    </span>
+  );
+}
+
+export const AvatarButton = forwardRef(function AvatarButton(
+  {
+    src,
+    square = false,
+    initials,
+    alt,
+    className,
+    ...props
+  }: AvatarProps &
+    (
+      | Omit<Headless.ButtonProps, "as" | "className">
+      | Omit<React.ComponentPropsWithoutRef<typeof Link>, "className">
+    ),
+  ref: React.ForwardedRef<HTMLElement>,
+) {
+  const classes = clsx(
+    className,
+    square ? "rounded-[20%]" : "rounded-full",
+    "relative inline-grid focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500",
+  );
+
+  return "href" in props ? (
+    <Link
+      {...props}
+      className={classes}
+      ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+    >
+      <TouchTarget>
+        <Avatar src={src} square={square} initials={initials} alt={alt} />
+      </TouchTarget>
+    </Link>
+  ) : (
+    <Headless.Button {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Avatar src={src} square={square} initials={initials} alt={alt} />
+      </TouchTarget>
+    </Headless.Button>
+  );
+});

components/ui-components/badge.tsx

@@ -0,0 +1,90 @@
+import * as Headless from "@headlessui/react";
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+import { TouchTarget } from "./button";
+import { Link } from "./link";
+
+const colors = {
+  red: "bg-red-500/15 text-red-700 group-data-[hover]:bg-red-500/25 dark:bg-red-500/10 dark:text-red-400 dark:group-data-[hover]:bg-red-500/20",
+  orange:
+    "bg-orange-500/15 text-orange-700 group-data-[hover]:bg-orange-500/25 dark:bg-orange-500/10 dark:text-orange-400 dark:group-data-[hover]:bg-orange-500/20",
+  amber:
+    "bg-amber-400/20 text-amber-700 group-data-[hover]:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400 dark:group-data-[hover]:bg-amber-400/15",
+  yellow:
+    "bg-yellow-400/20 text-yellow-700 group-data-[hover]:bg-yellow-400/30 dark:bg-yellow-400/10 dark:text-yellow-300 dark:group-data-[hover]:bg-yellow-400/15",
+  lime: "bg-lime-400/20 text-lime-700 group-data-[hover]:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:group-data-[hover]:bg-lime-400/15",
+  green:
+    "bg-green-500/15 text-green-700 group-data-[hover]:bg-green-500/25 dark:bg-green-500/10 dark:text-green-400 dark:group-data-[hover]:bg-green-500/20",
+  emerald:
+    "bg-emerald-500/15 text-emerald-700 group-data-[hover]:bg-emerald-500/25 dark:bg-emerald-500/10 dark:text-emerald-400 dark:group-data-[hover]:bg-emerald-500/20",
+  teal: "bg-teal-500/15 text-teal-700 group-data-[hover]:bg-teal-500/25 dark:bg-teal-500/10 dark:text-teal-300 dark:group-data-[hover]:bg-teal-500/20",
+  cyan: "bg-cyan-400/20 text-cyan-700 group-data-[hover]:bg-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-300 dark:group-data-[hover]:bg-cyan-400/15",
+  sky: "bg-sky-500/15 text-sky-700 group-data-[hover]:bg-sky-500/25 dark:bg-sky-500/10 dark:text-sky-300 dark:group-data-[hover]:bg-sky-500/20",
+  blue: "bg-blue-500/15 text-blue-700 group-data-[hover]:bg-blue-500/25 dark:text-blue-400 dark:group-data-[hover]:bg-blue-500/25",
+  indigo:
+    "bg-indigo-500/15 text-indigo-700 group-data-[hover]:bg-indigo-500/25 dark:text-indigo-400 dark:group-data-[hover]:bg-indigo-500/20",
+  violet:
+    "bg-violet-500/15 text-violet-700 group-data-[hover]:bg-violet-500/25 dark:text-violet-400 dark:group-data-[hover]:bg-violet-500/20",
+  purple:
+    "bg-purple-500/15 text-purple-700 group-data-[hover]:bg-purple-500/25 dark:text-purple-400 dark:group-data-[hover]:bg-purple-500/20",
+  fuchsia:
+    "bg-fuchsia-400/15 text-fuchsia-700 group-data-[hover]:bg-fuchsia-400/25 dark:bg-fuchsia-400/10 dark:text-fuchsia-400 dark:group-data-[hover]:bg-fuchsia-400/20",
+  pink: "bg-pink-400/15 text-pink-700 group-data-[hover]:bg-pink-400/25 dark:bg-pink-400/10 dark:text-pink-400 dark:group-data-[hover]:bg-pink-400/20",
+  rose: "bg-rose-400/15 text-rose-700 group-data-[hover]:bg-rose-400/25 dark:bg-rose-400/10 dark:text-rose-400 dark:group-data-[hover]:bg-rose-400/20",
+  zinc: "bg-zinc-600/10 text-zinc-700 group-data-[hover]:bg-zinc-600/20 dark:bg-white/5 dark:text-zinc-400 dark:group-data-[hover]:bg-white/10",
+};
+
+type BadgeProps = { color?: keyof typeof colors };
+
+export function Badge({
+  color = "zinc",
+  className,
+  ...props
+}: BadgeProps & React.ComponentPropsWithoutRef<"span">) {
+  return (
+    <span
+      {...props}
+      className={clsx(
+        className,
+        "inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline",
+        colors[color],
+      )}
+    />
+  );
+}
+
+export const BadgeButton = forwardRef(function BadgeButton(
+  {
+    color = "zinc",
+    className,
+    children,
+    ...props
+  }: BadgeProps & { className?: string; children: React.ReactNode } & (
+      | Omit<Headless.ButtonProps, "as" | "className">
+      | Omit<React.ComponentPropsWithoutRef<typeof Link>, "className">
+    ),
+  ref: React.ForwardedRef<HTMLElement>,
+) {
+  const classes = clsx(
+    className,
+    "group relative inline-flex rounded-md focus:outline-none data-[focus]:outline data-[focus]:outline-2 data-[focus]:outline-offset-2 data-[focus]:outline-blue-500",
+  );
+
+  return "href" in props ? (
+    <Link
+      {...props}
+      className={classes}
+      ref={ref as React.ForwardedRef<HTMLAnchorElement>}
+    >
+      <TouchTarget>
+        <Badge color={color}>{children}</Badge>
+      </TouchTarget>
+    </Link>
+  ) : (
+    <Headless.Button {...props} className={classes} ref={ref}>
+      <TouchTarget>
+        <Badge color={color}>{children}</Badge>
+      </TouchTarget>
+    </Headless.Button>
+  );
+});