create-mithaq 0.0.0-stage → 0.2.0

package/template/apps/asas-tanstack/src/auth-frame.tsx

@@ -0,0 +1,150 @@
+import { useState, type ComponentProps, type ReactNode } from 'react'
+import { redirect, useRouteContext } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { Eye, EyeOff } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group'
+import { authArm } from './api.ts'
+import { FieldShell, describedBy } from 'mithaq-admin/field-shell.tsx'
+import { refusalKey } from './copy.ts'
+import { LocaleSwitch } from './locale-switch.tsx'
+import { landing } from './redirect.ts'
+import { useCopy } from './routes/__root.tsx'
+
+/** The one search key the auth pages read, off the raw search. */
+export const redirectSearch = (search: Record<string, unknown>): { redirect?: string } =>
+  typeof search.redirect === 'string' ? { redirect: search.redirect } : {}
+
+/** Whether a read of the actor names someone. A read that throws, or an actor with no email, names no one. */
+export const signedInAs = async (actor: Promise<unknown>) => Boolean(((await actor.catch(() => null)) as { email?: unknown } | null)?.email)
+
+/**
+ * Whether this request carries a session, the screens it opens, the first of them as `home`, which a link back names,
+ * and the provider's password bounds. No auth page sends a referrer, since the reset page's address carries its token.
+ */
+export const authGate = createServerFn({ method: 'GET' }).handler(async () => {
+  // Imported inside the server half so no auth page ships the screen host to the browser.
+  const [{ getRequest, setResponseHeader }, { asas }, { loadEnterable }] = await Promise.all([import('@tanstack/react-start/server'), import('asas'), import('./screens.tsx')])
+  setResponseHeader('referrer-policy', 'no-referrer')
+  type Provider = { name: string; server: { $context: Promise<{ password: { config: { minPasswordLength: number; maxPasswordLength: number } } }> } }
+  const provider = (asas.auth.strategies as unknown as Provider[]).find((one) => one.name === 'user')!
+  const [signedIn, { password }] = await Promise.all([signedInAs(asas.auth.actor(getRequest().headers)), provider.server.$context])
+  const entered = signedIn ? ((await loadEnterable())?.screens ?? []) : []
+  const home: { path: string; name?: string } = entered[0] ?? { path: '/unauthorized' }
+  return { signedIn, home, screens: entered, password: { min: password.config.minPasswordLength, max: password.config.maxPasswordLength } }
+})
+
+/**
+ * Sign-in's and sign-up's `beforeLoad`. A signed-in person is sent where a
+ * successful sign-in sends them; everyone else gets the password bounds in the
+ * route context.
+ */
+export const gate = async ({ search }: { search: { redirect?: string } }) => {
+  const { signedIn, screens, password } = await authGate()
+  if (signedIn) throw redirect({ href: landing({ asked: search.redirect, screens }) })
+  return { password }
+}
+
+/** What a link to `home` says: the screen it opens, or, where it opens none, the action of seeing the account's status. */
+export const useHomeLabel = () => {
+  const { t } = useCopy()
+  return (home: { name?: string }, sentence: 'auth.backTo' | 'marketing.openScreen') =>
+    home.name === undefined
+      ? t('auth.accountStatus', 'See your account status')
+      : t(sentence, sentence === 'auth.backTo' ? 'Back to {screen}' : 'Open {screen}')!.replace('{screen}', () => t(`screens.${home.name}`, home.name)!)
+}
+
+/** What the forgot and reset pages draw for someone already signed in: the way on, and a sign-out. */
+export function AlreadySignedIn({ redirect: asked, home, screens }: { redirect?: string; home: { path: string; name?: string }; screens: readonly { name: string; path: string }[] }) {
+  const { t } = useCopy()
+  const label = useHomeLabel()
+  const to = landing({ asked, screens })
+  return (
+    <AuthFrame title={t('auth.alreadySignedIn', 'You are already signed in')}>
+      <div className="grid gap-4">
+        {/* An anchor: the path is the visitor's own, not a route the router knows. */}
+        <a className="text-primary text-center text-sm underline underline-offset-4" href={to}>
+          {to === home.path ? label(home, 'auth.backTo') : t('auth.continue', 'Continue')}
+        </a>
+        <Button type="button" variant="outline" onClick={() => void authArm('sign-out').then(() => window.location.reload())}>
+          {t('admin.signOut', 'Sign out')}
+        </Button>
+      </div>
+    </AuthFrame>
+  )
+}
+
+/** The sentence for a refusal of the provider: this app's own words for the status or code, then `fallback`. Never the provider's `message`, which is English in any locale. */
+export const useRefusal = () => {
+  const { t } = useCopy()
+  return (answered: { status: number; body: Record<string, unknown> | null }, fallback: string | undefined) => {
+    const key = refusalKey(answered.status, answered.body?.code)
+    return (key && t(key)) || fallback || ''
+  }
+}
+
+/** Whether the browser's own `type="email"` refuses this text. */
+export const notAnEmail = (value: string) => Object.assign(document.createElement('input'), { type: 'email', value }).validity.typeMismatch
+
+/** The frame every auth page is drawn in: the app's name linking home, the language switch, and the page's card. */
+export function AuthFrame({ title, description, children }: { title: string | undefined; description?: ReactNode; children: ReactNode }) {
+  const { t, locale } = useCopy()
+  const { app } = useRouteContext({ from: '__root__' })
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-2 px-4 sm:px-6">
+        {/* An anchor: `/` is not a router route in an app whose start entry answers its home. */}
+        <a className="text-lg font-semibold" href="/">
+          {t(app, 'Asas')}
+        </a>
+        <LocaleSwitch locale={locale} />
+      </header>
+      <main className="flex flex-1 items-center justify-center px-4 pb-16">
+        <Card className="w-full max-w-sm">
+          <CardHeader>
+            <CardTitle><h1>{title}</h1></CardTitle>
+            {description ? <CardDescription>{description}</CardDescription> : null}
+          </CardHeader>
+          {/* Descriptions follow the text direction; the shared primitive aligns them left. */}
+          <CardContent className="[&_[data-slot=field-description]]:text-start">{children}</CardContent>
+        </Card>
+      </main>
+    </div>
+  )
+}
+
+function PasswordInput(props: ComponentProps<'input'>) {
+  const { t } = useCopy()
+  const [shown, setShown] = useState(false)
+  return (
+    // Focus moving to the box's own toggle has not left the box.
+    <InputGroup onBlur={(event) => event.currentTarget.contains(event.relatedTarget) && event.stopPropagation()}>
+      <InputGroupInput {...props} dir="ltr" type={shown ? 'text' : 'password'} />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton aria-label={t('auth.showPassword', 'Show password')} aria-pressed={shown} size="icon-xs" onClick={() => setShown((was) => !was)}>
+          {shown ? <EyeOff /> : <Eye />}
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  )
+}
+
+/** One labelled box, which says what is wrong with it once it has been left. An email or password reads left to right in any locale. */
+export function AuthBox({
+  id,
+  label,
+  error,
+  description,
+  onLeave,
+  ...props
+}: { id: string; label: string | undefined; error?: string; description?: string; onLeave: () => void } & ComponentProps<'input'>) {
+  const control = { 'aria-describedby': describedBy({ id, description, error }), 'aria-invalid': error ? true : undefined, id, name: id, required: true, ...props }
+  return (
+    <FieldShell id={id} label={label ?? id} description={description} error={error} onBlur={onLeave}>
+      {props.type === 'password' ? <PasswordInput {...control} /> : <Input dir={props.type === 'email' ? 'ltr' : 'auto'} {...control} />}
+    </FieldShell>
+  )
+}
+// mithaq-admin 0.0.0 e498423cf4a61adb8cf6358d043d31ae92d853de4c6939a9c0fe138c848b7211

package/template/apps/asas-tanstack/src/choose-password.tsx

@@ -0,0 +1,150 @@
+import { useState, type ComponentProps } from 'react'
+import { Link, useNavigate } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
+import { Button } from '@/components/ui/button'
+import { authArm } from './api.ts'
+import { AlreadySignedIn, AuthBox, AuthFrame, authGate, redirectSearch, useRefusal } from './auth-frame.tsx'
+import { useCopy } from './routes/__root.tsx'
+
+/** The search keys of a page a mailed link opens: its token, and where to go after. */
+export const tokenSearch = (search: Record<string, unknown>): { redirect?: string; token?: string } => ({
+  ...redirectSearch(search),
+  ...(typeof search.token === 'string' && search.token ? { token: search.token } : {}),
+})
+
+/**
+ * The address of the account a live link chooses the password of, or `null` for a spent, expired or made-up one: the
+ * provider's own answer, read in process. A POST, so the token rides in no further URL.
+ */
+const passwordLink = createServerFn({ method: 'POST' })
+  .validator((token: unknown) => (typeof token === 'string' ? token : ''))
+  .handler(async ({ data }) => {
+    // Imported inside the server half so no page ships the provider to the browser.
+    const { asas } = await import('asas')
+    type Provider = { name: string; server: { api: { setPasswordState(args: { query: { token: string } }): Promise<{ email: string }> } } }
+    const provider = (asas.auth.strategies as unknown as Provider[]).find((one) => one.name === 'user')!
+    return data ? provider.server.api.setPasswordState({ query: { token: data } }).then(({ email }) => email, () => null) : null
+  })
+
+/** The `beforeLoad` of a page a mailed link opens: the auth gate's answer, and the account the link is for. */
+export const passwordGate = async ({ token }: { token?: string }) => ({ ...(await authGate()), email: token ? await passwordLink({ data: token }) : null })
+
+type Props = {
+  /** A first password, chosen from a sign-up's or an added person's link, rather than a forgotten one replaced. */
+  first: boolean
+  token?: string
+  redirect?: string
+  signedIn: boolean
+  home: { path: string; name?: string }
+  /** The screens a signed-in person opens. */
+  screens: readonly { name: string; path: string }[]
+  password: { min: number; max: number }
+  /** The account the link is for; `null` for a link that names none, `undefined` while unread. */
+  email?: string | null
+}
+
+/**
+ * The page a mailed link opens to choose an account's password: a first one, or one forgotten. It shows the account
+ * it is for and signs the person in with the password just chosen, through the ordinary sign-in, as Payload's reset
+ * does: every rule a sign-in keeps still holds, and nothing is known that the person did not just type.
+ */
+export function ChoosePassword({ first, token, redirect, signedIn, home, screens, password: bounds, email }: Props) {
+  const { t } = useCopy()
+  const navigate = useNavigate()
+  const refused = useRefusal()
+  const [password, setPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [pending, setPending] = useState(false)
+  const [done, setDone] = useState(false)
+  // The answer, not its sentence, so a language switch says it again in the language chosen.
+  const [refusal, setRefusal] = useState<Parameters<typeof refused>[0] | null>(null)
+  const [left, setLeft] = useState<ReadonlySet<string>>(() => new Set())
+  const title = first ? t('auth.setPassword', 'Choose your password') : t('auth.resetPassword', 'Reset password')
+  const wrong = {
+    password: () =>
+      !password ? t('auth.required', 'This field is required.')
+      : password.length < bounds.min ? t('auth.passwordTooShort', 'Password too short')
+      : password.length > bounds.max ? t('auth.passwordTooLong', 'Password too long')
+      : undefined,
+    confirmation: () => (!confirmation ? t('auth.required', 'This field is required.') : confirmation === password ? undefined : t('auth.passwordsDiffer', 'The two passwords are not the same.')),
+  }
+  const errorOf = (box: keyof typeof wrong) => (left.has(box) ? wrong[box]() : undefined)
+  const box = (id: keyof typeof wrong, label: string | undefined, props: ComponentProps<'input'> & { description?: string }) => (
+    <AuthBox id={id} label={label} error={errorOf(id)} onLeave={() => setLeft((already) => new Set(already).add(id))} {...props} />
+  )
+  const signIn = (
+    <p className="mt-4 text-center text-sm">
+      <Link className="text-primary underline underline-offset-4" to="/auth/sign-in">
+        {t('auth.signIn', 'Sign in')}
+      </Link>
+    </p>
+  )
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    setLeft(new Set(Object.keys(wrong)))
+    if (Object.values(wrong).some((check) => check())) return
+    setPending(true)
+    setRefusal(null)
+    const answered = await authArm('reset-password', { newPassword: password, token })
+    if (!answered.ok) {
+      setPending(false)
+      return setRefusal(answered)
+    }
+    // A sign-in this refuses, a banned account's, is left to the sign-in page, which says why.
+    // Signed in, the sign-in page's own gate sends the person on to `redirect` or their first screen.
+    if (email && (await authArm('sign-in/email', { email, password })).ok) return navigate({ to: '/auth/sign-in', search: { redirect } })
+    setPending(false)
+    setDone(true)
+  }
+
+  if (signedIn) return <AlreadySignedIn redirect={redirect} home={home} screens={screens} />
+  if (!token || email === null) {
+    return (
+      <AuthFrame title={title} description={t('auth.tokenInvalid', 'Token is either invalid or has expired.')}>
+        <p className="text-center text-sm">
+          <Link className="text-primary underline underline-offset-4" to="/auth/forgot-password">
+            {t('auth.forgotPassword', 'Forgot password')}
+          </Link>
+        </p>
+      </AuthFrame>
+    )
+  }
+  if (done) {
+    return (
+      <AuthFrame title={title} description={first ? t('auth.passwordChosen', 'Your address is confirmed and your password is set. Sign in with it.') : t('auth.passwordReset', 'Password reset successfully.')}>
+        {signIn}
+      </AuthFrame>
+    )
+  }
+  return (
+    <AuthFrame title={title}>
+      <form className="grid gap-4" noValidate onSubmit={submit}>
+        {/* The account the password is for, which a password manager saves it under. */}
+        {email ? <AuthBox id="email" label={t('auth.email', 'Email')} type="email" autoComplete="username" readOnly value={email} onLeave={() => {}} /> : null}
+        {box('password', t('auth.newPassword', 'New password'), {
+          autoComplete: 'new-password',
+          description: t('auth.passwordRule', 'At least {count} characters.')!.replace('{count}', String(bounds.min)),
+          onChange: (event) => setPassword(event.target.value),
+          type: 'password',
+          value: password,
+        })}
+        {box('confirmation', t('auth.confirmPassword', 'Confirm the password'), {
+          autoComplete: 'new-password',
+          onChange: (event) => setConfirmation(event.target.value),
+          type: 'password',
+          value: confirmation,
+        })}
+        {refusal && (
+          <p className="text-destructive text-sm" role="alert">
+            {refused(refusal, t('auth.resetFailed', 'That reset did not work.'))}
+          </p>
+        )}
+        <Button disabled={pending} type="submit">
+          {first ? t('auth.setPasswordSubmit', 'Confirm and set password') : t('auth.resetPassword', 'Reset password')}
+        </Button>
+      </form>
+      {signIn}
+    </AuthFrame>
+  )
+}

package/template/apps/asas-tanstack/src/components/ui/accordion.tsx

@@ -0,0 +1,10 @@
+import { Accordion as Primitive } from '@base-ui/react/accordion'
+import { cn } from '@/lib/utils'
+
+export const Accordion = Primitive.Root
+export const AccordionItem = Primitive.Item
+export const AccordionHeader = Primitive.Header
+export const AccordionPanel = Primitive.Panel
+export function AccordionTrigger({ className, ...props }: Primitive.Trigger.Props) {
+  return <Primitive.Trigger className={cn('flex w-full cursor-pointer items-center justify-between px-4 py-3 text-start', className)} {...props} />
+}

package/template/apps/asas-tanstack/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,173 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "./button"
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/5 gap-6 rounded-4xl p-6 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn("bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}

package/template/apps/asas-tanstack/src/components/ui/avatar.tsx

@@ -0,0 +1,104 @@
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "rounded-full aspect-square size-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn("bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}

package/template/apps/asas-tanstack/src/components/ui/badge.tsx

@@ -0,0 +1,48 @@
+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 { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ className, variant })),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }