create-mithaq 0.0.0-stage → 0.2.0

package/package.json

@@ -1,6 +1,21 @@
 {
   "name": "create-mithaq",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "create-mithaq": "index.js"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/drhomet/mithaq.git",
+    "directory": "packages/create-mithaq"
+  },
+  "homepage": "https://github.com/drhomet/mithaq#readme",
+  "bugs": {
+    "url": "https://github.com/drhomet/mithaq/issues"
+  }
+}

package/template/apps/asas-backoffice/components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-sera",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "mauve",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": true,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/template/apps/asas-backoffice/gitignore

@@ -0,0 +1,3 @@
+.tanstack
+dist
+node_modules

package/template/apps/asas-backoffice/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "asas-backoffice",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "(cd ../../templates/asas && mithaq lock --check) && vite build",
+    "dev": "(cd ../../templates/asas && mithaq lock --check) && vite dev --port 5174",
+    "preview": "(cd ../../templates/asas && mithaq lock --check) && vite preview --port 4174"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.5.0",
+    "@fontsource-variable/figtree": "^5.3.0",
+    "@fontsource-variable/noto-sans": "^5.3.0",
+    "@fontsource/ibm-plex-sans-arabic": "^5.2.8",
+    "@hugeicons/core-free-icons": "4.3.5",
+    "@hugeicons/react": "^1.1.6",
+    "@lexical/extension": "0.52.0",
+    "@lexical/link": "0.52.0",
+    "@lexical/list": "0.52.0",
+    "@lexical/react": "0.52.0",
+    "@lexical/rich-text": "0.52.0",
+    "@lexical/selection": "0.52.0",
+    "@lexical/utils": "0.52.0",
+    "@tanstack/react-form": "^1.33.5",
+    "@tanstack/react-query": "^5.104.0",
+    "@tanstack/react-router": "^1.170.29",
+    "@tanstack/react-start": "^1.168.56",
+    "asas": "*",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.2.6",
+    "date-fns": "^4.4.0",
+    "input-otp": "^1.5.0",
+    "lexical": "0.52.0",
+    "lucide-react": "^1.16.0",
+    "mithaq": "*",
+    "mithaq-admin": "*",
+    "react": "^19.3.0",
+    "react-day-picker": "^10.0.1",
+    "react-dom": "^19.3.0",
+    "react-is": "^19.3.0",
+    "react-resizable-panels": "^4.14.1",
+    "recharts": "3.8.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.0",
+    "@tanstack/start-client-core": "^1.170.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.0.2",
+    "shadcn": "4.18.0",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^7.0.2",
+    "vite": "^8.0.13"
+  }
+}

package/template/apps/asas-backoffice/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" fill="#5b21b6"/><path d="M16 5l9 4v6c0 6-4 10-9 12-5-2-9-6-9-12V9z" fill="none" stroke="#f5f3ff" stroke-width="2.5" stroke-linejoin="round"/><path d="M12 16l3 3 5-6" fill="none" stroke="#f5f3ff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/template/apps/asas-backoffice/src/api.ts

@@ -0,0 +1,147 @@
+import { afterCommitHeader, type ClientKayan, type FetchClient } from 'mithaq/admin'
+
+/** What a write may ask beside its input on a kayan that keeps drafts: a draft save, and an autosave. The fetch plug reads them off the query string only. */
+export type DraftOptions = { readonly draft?: boolean; readonly autosave?: boolean }
+
+const queryOf = ({ draft, autosave }: DraftOptions = {}) => (draft ? `?draft=true${autosave ? '&autosave=true' : ''}` : '')
+
+const call = async ({ kayan, operation, input, ...options }: { kayan: string; operation: string; input: Record<string, unknown> } & DraftOptions) => {
+  const response = await fetch(`/api/${encodeURIComponent(kayan)}/${encodeURIComponent(operation)}${queryOf(options)}`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(input),
+  })
+  const answer = await response.json().catch(() => null)
+  if (!response.ok) {
+    const error = new Error(typeof answer?.message === 'string' ? answer.message : `HTTP ${response.status}`)
+    Object.assign(error, { status: response.status, code: answer?.code, data: answer?.data })
+    throw error
+  }
+  // A failed `afterCommit` raises the screens' banner and a committed write
+  // clears it. Only the server knows an operation's effect, so the plug sets
+  // the header on writes and never on reads.
+  const said = response.headers.get(afterCommitHeader)
+  if (typeof window !== 'undefined' && said) {
+    window.dispatchEvent(new CustomEvent('mithaq:after-commit', { detail: said === 'failed' }))
+  }
+  return answer
+}
+
+// Restated, not imported from the `.tsx` file that declares them: a `.ts` file
+// must not need the JSX compiler.
+type FoundPage = { docs: readonly Record<string, unknown>[]; hasNextPage: boolean; nextPage: number | null }
+type FindApi = Readonly<
+  Record<
+    string,
+    | {
+        find: (input: Record<string, unknown>) => Promise<FoundPage>
+        create?: (input: Record<string, unknown>) => Promise<unknown>
+        delete?: (input: Record<string, unknown>) => Promise<unknown>
+        update?: (input: Record<string, unknown>) => Promise<unknown>
+      }
+    | undefined
+  >
+>
+
+/**
+ * Every operation of every kayan, keyed by name strings. `arm[kayan][operation](input)`
+ * posts to `POST /api/<kayan>/<operation>`; the proxy never answers `undefined`,
+ * and a name no kayan has is the server's not-found.
+ */
+export type Arm = Readonly<Record<string, Readonly<Record<string, (input: Record<string, unknown>, options?: DraftOptions) => Promise<unknown>>>>>
+export const arm = new Proxy(Object.create(null) as Arm, {
+  get: (_target, kayan: string) => new Proxy(Object.create(null) as Record<string, (input: Record<string, unknown>, options?: DraftOptions) => Promise<unknown>>, {
+    get: (_operations, operation: string) => (input: Record<string, unknown>, options?: DraftOptions) => call({ kayan, operation, input, ...options }),
+  }),
+})
+
+/**
+ * Whether an operation's input names a key: probes the schema with a value no
+ * browser-written schema accepts and looks for an issue at that key. A schema
+ * that answers asynchronously, or throws, reads as naming nothing.
+ */
+export const takesKey = (input: { '~standard': { validate: (value: unknown) => unknown } }, key: string) => {
+  let answer: { issues?: readonly { path?: readonly unknown[] }[] }
+  try {
+    answer = input['~standard'].validate({ [key]: Symbol(key) }) as typeof answer
+  } catch {
+    return false
+  }
+  if (answer instanceof Promise) {
+    answer.catch(() => {})
+    return false
+  }
+  return answer.issues?.some(({ path }) => {
+    const segment = path?.[0]
+    return String(typeof segment === 'object' && segment ? (segment as { key: unknown }).key : segment) === key
+  }) ?? false
+}
+
+/** What a screen's `client` is over an arm; the draft words ride along with the input. */
+export const clientOf = (through: Arm): FetchClient => ({ kayan, operation, input, draft, autosave }) => through[kayan]![operation]!(input, { draft, autosave })
+
+/**
+ * What the server's `client` is: each operation in process, as `actor`. Only the
+ * two draft words are read off the caller's options and the actor goes last, so
+ * a loader cannot run as someone else.
+ */
+export const actingAs = (
+  through: Readonly<Record<string, { operations: Record<string, (input: object, options: { actor?: unknown } & DraftOptions) => Promise<unknown>> }>>,
+  actor: unknown,
+): FetchClient => ({ kayan, operation, input, draft, autosave }) => through[kayan]!.operations[operation]!(input, { draft, autosave, actor })
+
+/**
+ * What a relationship control and cell read a second kayan through. Only the
+ * kayans the screen's loader already narrowed to what this actor may read are
+ * in the record, so a picker cannot page any other.
+ */
+export const readsOf = (kayans: readonly ClientKayan[]): FindApi =>
+  Object.fromEntries(
+    kayans.map((kayan) => [
+      kayan.name,
+      {
+        find: (input: Record<string, unknown>) => arm[kayan.name]!.find!(input) as Promise<FoundPage>,
+      },
+    ]),
+  )
+
+type FieldReads = {
+  readonly collections?: Readonly<
+    Record<string, { readonly fields?: Readonly<Record<string, Readonly<Record<string, boolean>> | undefined>> } | undefined>
+  >
+}
+
+/**
+ * One kayan of the projection with every field this actor may not read taken
+ * off it. A loader's result is serialized into the document, so an unreadable
+ * field's name, label or rule would otherwise reach the viewer.
+ */
+export const readable = (one: ClientKayan, report: FieldReads): ClientKayan => ({
+  ...one,
+  fields: one.fields.filter((field) => report.collections?.[one.name]?.fields?.[field.name]?.read === true),
+})
+
+/**
+ * Whether a thrown refusal is the caller's. Those carry an HTTP status; a store
+ * that is down or a hook bug carries none and must be rethrown, not reported
+ * as a missing row.
+ */
+export const caused = (thrown: unknown): boolean =>
+  typeof (thrown as { status?: unknown } | null | undefined)?.status === 'number'
+
+/**
+ * One POST at the auth arm (Better Auth's router under `/api/auth/user`) with the session cookie.
+ * Returns the answer instead of throwing: a refusal is a sentence for the viewer; no reply is status 0.
+ */
+export const authArm = async (path: string, body: unknown = {}) => {
+  const response = await fetch(`/api/auth/user/${path}`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body),
+  }).catch(() => null)
+  if (!response) return { ok: false, status: 0, message: undefined, body: null }
+  const answered = (await response.json().catch(() => null)) as ({ message?: string } & Record<string, unknown>) | null
+  // The status too, because a rate limit's refusal carries no code to read.
+  return { ok: response.ok, status: response.status, message: answered?.message, body: answered }
+}
+// mithaq-admin 2d3ab739c92c6c2b397041b76bf4b23b2902b7a2 94db2fc49ad4391c0d1c2183cb41001dd08d62017c76af86cc5f611488c22c68

package/template/apps/asas-backoffice/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-backoffice/src/components/ui/accordion.tsx

@@ -0,0 +1,74 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+import { cn } from "cn"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-start text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-3.5 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+const AccordionHeader = AccordionPrimitive.Header
+const AccordionPanel = AccordionPrimitive.Panel
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent, AccordionHeader, AccordionPanel }

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

@@ -0,0 +1,185 @@
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import { cn } from "cn"
+
+import { Button } from "@/components/ui/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(
+        "fixed inset-0 isolate z-50 bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur-sm data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        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(
+          "group/alert-dialog-content fixed top-1/2 start-1/2 z-50 grid w-full -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2 gap-6 rounded-none bg-popover p-6 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          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-2 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-start 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(
+        "mb-2 inline-flex size-16 items-center justify-center rounded-none bg-muted 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-semibold tracking-wider uppercase 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(
+        "mt-0.5 text-sm leading-relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        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,
+}