@preset.nz/ux-kit 0.0.0-stage → 0.1.0

package/src/components/color-field.tsx

@@ -0,0 +1,248 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+import { ColorSwatch } from "./color-swatch"
+import { Input } from "./input"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+
+// ColorField: swatch, hex text, optional alpha, preset grid, native picker.
+// Union of M&T's ColorField (presets, hex input), Oblique's colour renderers
+// (native picker, read-only hex, one picker session = one undo step via
+// onPickStart/onPickEnd, optional colour), and Strata's swatch popover
+// (clearable, no-colour chip). Values are hex strings: #rrggbb, or #rrggbbaa
+// when `alpha` is set. The palette engine (presets and derivation) is app
+// domain data and stays in the app; it feeds `presets` and nothing more.
+
+interface Rgba {
+  r: number
+  g: number
+  b: number
+  a: number
+}
+
+/** Parses #rgb, #rgba, #rrggbb or #rrggbbaa (leading # optional). Alpha is 0 to 1. */
+function parseHex(input: string): Rgba | null {
+  let h = input.trim().replace(/^#/, "")
+  if (!/^[0-9a-f]+$/i.test(h)) return null
+  if (h.length === 3 || h.length === 4) h = [...h].map((c) => c + c).join("")
+  if (h.length !== 6 && h.length !== 8) return null
+  const n = (i: number) => parseInt(h.slice(i, i + 2), 16)
+  return { r: n(0), g: n(2), b: n(4), a: h.length === 8 ? n(6) / 255 : 1 }
+}
+
+function toHex({ r, g, b, a }: Rgba, withAlpha: boolean): string {
+  const p = (v: number) => Math.round(v).toString(16).padStart(2, "0")
+  return `#${p(r)}${p(g)}${p(b)}${withAlpha ? p(a * 255) : ""}`
+}
+
+interface ColorFieldProps
+  extends Omit<React.ComponentProps<"div">, "onChange" | "defaultValue"> {
+  /** #rrggbb or #rrggbbaa. `null` shows the empty chip and a dash. */
+  value: string | null
+  /** Called with a normalised lowercase hex, or null from the clear button. */
+  onChange?: (value: string | null) => void
+  label?: string
+  /** Shows an alpha percentage field; output is #rrggbbaa. Default false. */
+  alpha?: boolean
+  /** Preset colours as hex. Omit for none. */
+  presets?: string[]
+  /** Adds a "no colour" chip to the popover that calls `onChange(null)`. */
+  clearable?: boolean
+  /** Shows the colour and hex but cannot change them. Also the state when `onChange` is missing. */
+  readOnly?: boolean
+  disabled?: boolean
+  /** The colour a null value falls back to for the native picker. Default #000000. */
+  fallback?: string
+  /** The native picker opened or closed: the app's undo transaction boundary. */
+  onPickStart?: () => void
+  onPickEnd?: () => void
+  /** Extra controls after the fields, e.g. an eyedropper button. */
+  trailing?: React.ReactNode
+}
+
+function ColorField({
+  value: valueProp,
+  onChange,
+  label,
+  alpha = false,
+  presets,
+  clearable = false,
+  readOnly,
+  disabled,
+  fallback = "#000000",
+  onPickStart,
+  onPickEnd,
+  trailing,
+  id,
+  className,
+  ...props
+}: ColorFieldProps) {
+  const generatedId = React.useId()
+  const inputId = id ?? generatedId
+  const locked = !!readOnly || !onChange
+  // During a picker session the field shows only the colour picked so far and ignores incoming
+  // `value` props (an app that round-trips each change would fight the picker); on the picker
+  // closing it re-syncs to the prop.
+  const [live, setLive] = React.useState<string | null>(null)
+  const value = live ?? valueProp
+  const rgba = value ? parseHex(value) : null
+  const shown = value ? (rgba ? toHex(rgba, alpha) : value) : ""
+
+  const [draft, setDraft] = React.useState<string | null>(null)
+  const [alphaDraft, setAlphaDraft] = React.useState<string | null>(null)
+
+  const emit = (next: Rgba) => onChange?.(toHex(next, alpha))
+
+  const commitHex = () => {
+    if (draft === null) return
+    const parsed = parseHex(draft)
+    setDraft(null)
+    if (!parsed) return // invalid text reverts to the current value
+    // An entry without alpha digits keeps the existing alpha.
+    const digits = draft.trim().replace(/^#/, "").length
+    const hasAlpha = digits === 4 || digits === 8
+    emit(alpha && rgba && !hasAlpha ? { ...parsed, a: rgba.a } : parsed)
+  }
+
+  const commitAlpha = () => {
+    if (alphaDraft === null) return
+    const pct = Number(alphaDraft)
+    setAlphaDraft(null)
+    if (!Number.isFinite(pct)) return
+    emit({ ...(rgba ?? parseHex(fallback)!), a: Math.min(100, Math.max(0, pct)) / 100 })
+  }
+
+  const pick = (hex: string, session = false) => {
+    const parsed = parseHex(hex)
+    if (!parsed) return
+    if (session) setLive(toHex(parsed, false))
+    // Presets and the native picker carry no alpha of their own unless 8-digit.
+    emit(hex.replace(/^#/, "").length === 8 || !rgba ? parsed : { ...parsed, a: rgba.a })
+  }
+
+  const swatchLabel = label ? `${label} colour` : "Colour"
+  const chip = <ColorSwatch color={value} size="lg" className="size-7" />
+
+  return (
+    <div data-slot="color-field" className={cn("flex flex-col gap-1", className)} {...props}>
+      {label ? (
+        <label htmlFor={inputId} className="text-[11px] font-medium tracking-wide text-muted-foreground">
+          {label}
+        </label>
+      ) : null}
+      <div className={cn("flex items-center gap-2", disabled && "opacity-50")}>
+        {locked || disabled ? (
+          chip
+        ) : !presets?.length && !clearable ? (
+          // Nothing to offer but the picker: the swatch opens it directly.
+          <label
+            className="relative shrink-0 cursor-pointer rounded-sm focus-within:ring-1 focus-within:ring-ring"
+            title={swatchLabel}
+          >
+            {chip}
+            <input
+              type="color"
+              aria-label={`${swatchLabel} picker`}
+              value={rgba ? toHex(rgba, false) : toHex(parseHex(fallback) ?? { r: 0, g: 0, b: 0, a: 1 }, false)}
+              onChange={(e) => pick(e.target.value, true)}
+              onFocus={onPickStart}
+              onBlur={() => {
+                setLive(null)
+                onPickEnd?.()
+              }}
+              className="absolute inset-0 size-full cursor-pointer opacity-0"
+            />
+          </label>
+        ) : (
+          <Popover>
+            <PopoverTrigger
+              aria-label={swatchLabel}
+              className="shrink-0 rounded-sm outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            >
+              {chip}
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-auto gap-2 p-2">
+              {presets?.length || clearable ? (
+                <div className="grid grid-cols-7 gap-1" role="group" aria-label="Presets">
+                  {presets?.map((c) => (
+                    <button
+                      key={c}
+                      type="button"
+                      aria-label={c}
+                      aria-pressed={value?.toLowerCase() === c.toLowerCase()}
+                      onClick={() => pick(c)}
+                      className="rounded-xs outline-none hover:scale-110 focus-visible:ring-1 focus-visible:ring-ring aria-pressed:ring-2 aria-pressed:ring-foreground/40"
+                    >
+                      <ColorSwatch color={c} size="lg" />
+                    </button>
+                  ))}
+                  {clearable ? (
+                    <button
+                      type="button"
+                      aria-label="No colour"
+                      onClick={() => onChange?.(null)}
+                      className="rounded-xs outline-none hover:scale-110 focus-visible:ring-1 focus-visible:ring-ring"
+                    >
+                      <ColorSwatch color={null} size="lg" />
+                    </button>
+                  ) : null}
+                </div>
+              ) : null}
+              <input
+                type="color"
+                aria-label={`${swatchLabel} picker`}
+                value={rgba ? toHex(rgba, false) : toHex(parseHex(fallback) ?? { r: 0, g: 0, b: 0, a: 1 }, false)}
+                onChange={(e) => pick(e.target.value, true)}
+                onFocus={onPickStart}
+                onBlur={() => {
+                  setLive(null)
+                  onPickEnd?.()
+                }}
+                className="h-8 w-full cursor-pointer rounded-xs border border-border bg-transparent"
+              />
+            </PopoverContent>
+          </Popover>
+        )}
+        <Input
+          id={inputId}
+          value={draft ?? (value ? shown : "")}
+          placeholder="—"
+          readOnly={locked}
+          disabled={disabled}
+          spellCheck={false}
+          aria-label={label ? `${label} hex` : "Hex"}
+          onChange={(e) => setDraft(e.target.value)}
+          onBlur={commitHex}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") commitHex()
+            if (e.key === "Escape") setDraft(null)
+          }}
+          className="flex-1 font-mono"
+        />
+        {alpha ? (
+          <div className="flex w-16 shrink-0 items-center gap-1 text-xs text-muted-foreground">
+            <Input
+              inputMode="numeric"
+              value={alphaDraft ?? (rgba ? String(Math.round(rgba.a * 100)) : "")}
+              readOnly={locked}
+              disabled={disabled}
+              aria-label={label ? `${label} alpha` : "Alpha"}
+              onChange={(e) => setAlphaDraft(e.target.value)}
+              onBlur={commitAlpha}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") commitAlpha()
+                if (e.key === "Escape") setAlphaDraft(null)
+              }}
+              className="text-right tabular-nums"
+            />
+            %
+          </div>
+        ) : null}
+        {trailing}
+      </div>
+    </div>
+  )
+}
+
+export { ColorField, parseHex, toHex }
+export type { ColorFieldProps }

package/src/components/color-swatch.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+// A colour chip. Any CSS colour string works; `null` draws the dashed "no
+// colour" chip (Strata's colour label, Oblique's disabled optional colour).
+// A checkerboard sits under the colour so transparency reads as transparency.
+
+const CHECKER =
+  "conic-gradient(var(--muted) 25%, transparent 0 50%, var(--muted) 0 75%, transparent 0) 0 0 / 8px 8px"
+
+interface ColorSwatchProps extends Omit<React.ComponentProps<"span">, "color"> {
+  /** A CSS colour (#rrggbbaa, rgb(), a variable), or null for none. */
+  color?: string | null
+  /** `sm` 12px, `md` 16px, `lg` 24px. */
+  size?: "sm" | "md" | "lg"
+  shape?: "square" | "round"
+}
+
+function ColorSwatch({
+  color,
+  size = "md",
+  shape = "square",
+  className,
+  style,
+  ...props
+}: ColorSwatchProps) {
+  return (
+    <span
+      data-slot="color-swatch"
+      data-empty={color ? undefined : ""}
+      role={props["aria-label"] ? "img" : undefined}
+      aria-hidden={props["aria-label"] ? undefined : true}
+      className={cn(
+        "relative inline-block shrink-0 overflow-hidden border border-border",
+        size === "sm" && "size-3",
+        size === "md" && "size-4",
+        size === "lg" && "size-6",
+        shape === "round" ? "rounded-full" : "rounded-xs",
+        !color && "border-dashed border-muted-foreground/60",
+        className
+      )}
+      style={color ? { background: CHECKER, ...style } : style}
+      {...props}
+    >
+      {color ? <span className="absolute inset-0" style={{ backgroundColor: color }} /> : null}
+    </span>
+  )
+}
+
+export { ColorSwatch }
+export type { ColorSwatchProps }

package/src/components/context-menu.tsx

@@ -0,0 +1,249 @@
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
+import { CaretRightIcon, CheckIcon } from "@phosphor-icons/react"
+
+import { cn } from "../lib/utils"
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+}
+
+function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: ContextMenuPrimitive.Popup.Props &
+  Pick<ContextMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <ContextMenuPrimitive.Popup
+          data-slot="context-menu-content"
+          className={cn(
+            "z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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}
+        />
+      </ContextMenuPrimitive.Positioner>
+    </ContextMenuPrimitive.Portal>
+  )
+}
+
+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: ContextMenuPrimitive.GroupLabel.Props & { inset?: boolean }) {
+  return (
+    <ContextMenuPrimitive.GroupLabel
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: ContextMenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
+  return <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: ContextMenuPrimitive.SubmenuTrigger.Props & { inset?: boolean }) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <CaretRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function ContextMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuContent>) {
+  return (
+    <ContextMenuContent
+      data-slot="context-menu-sub-content"
+      className={cn("min-w-32 shadow-lg", className)}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  inset,
+  ...props
+}: ContextMenuPrimitive.CheckboxItem.Props & { inset?: boolean }) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="context-menu-checkbox-item-indicator"
+      >
+        <ContextMenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  )
+}
+
+function ContextMenuRadioGroup({ ...props }: ContextMenuPrimitive.RadioGroup.Props) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: ContextMenuPrimitive.RadioItem.Props & { inset?: boolean }) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:pl-8 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="context-menu-radio-item-indicator"
+      >
+        <ContextMenuPrimitive.RadioItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  )
+}
+
+function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Separator.Props) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuPortal,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuLabel,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+}

package/src/components/dialog.tsx

@@ -0,0 +1,137 @@
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import { XIcon } from "@phosphor-icons/react"
+
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-foreground/15 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none 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}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={<Button variant="ghost" className="absolute top-4 right-4" size="icon-sm" />}
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("font-heading leading-none font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}