@octanejs/shadcn 0.0.7 → 0.0.9

package/src/bases/base-ui/ui/avatar.tsrx

@@ -0,0 +1,89 @@
+// Base UI base avatar — runs on @octanejs/base-ui's Avatar (Root/Image/Fallback), a direct
+// one-to-one mapping with the radix base.
+//
+// `AvatarBadge`, `AvatarGroup` and `AvatarGroupCount` are plain host elements in every base —
+// upstream defines no primitive for them — so they are unchanged from the radix source.
+//
+// Nothing here keys off a primitive-emitted attribute: the `data-[size=…]` variants read the
+// `data-size` this component writes itself, and the primitive emits no state attributes at all
+// (verified by rendering it — Root and Fallback are bare spans). So unlike the overlays and the
+// form controls, there is no dialect to get wrong.
+//
+// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
+// transcribed from upstream's Base UI source.
+import { Avatar as AvatarPrimitive } from '@octanejs/base-ui/avatar';
+
+import { cn } from '../../../lib/utils';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+export interface AvatarProps extends Props {
+	size?: 'default' | 'sm' | 'lg';
+}
+
+export function Avatar({ className, size = 'default', ...props }: AvatarProps) @{
+	<AvatarPrimitive.Root
+		data-slot="avatar"
+		data-size={size}
+		className={cn(
+			'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AvatarImage({ className, ...props }: Props) @{
+	<AvatarPrimitive.Image
+		data-slot="avatar-image"
+		className={cn('aspect-square size-full rounded-full object-cover', className)}
+		{...props}
+	/>
+}
+
+export function AvatarFallback({ className, ...props }: Props) @{
+	<AvatarPrimitive.Fallback
+		data-slot="avatar-fallback"
+		className={cn(
+			'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AvatarBadge({ className, ...props }: Props) @{
+	<span
+		data-slot="avatar-badge"
+		className={cn(
+			'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background 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}
+	/>
+}
+
+export function AvatarGroup({ className, ...props }: Props) @{
+	<div
+		data-slot="avatar-group"
+		className={cn(
+			'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function AvatarGroupCount({ className, ...props }: Props) @{
+	<div
+		data-slot="avatar-group-count"
+		className={cn(
+			'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background 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',
+			className,
+		)}
+		{...props}
+	/>
+}

package/src/bases/base-ui/ui/badge.tsrx

@@ -0,0 +1,56 @@
+// Base UI base badge — a plain host `<span>` carrying the shared cva strings.
+//
+// The cva block is byte-identical to the radix and React Aria bases (checked, not assumed), and no
+// primitive is involved: badge is a span with `data-slot` and `data-variant`, and nothing
+// underneath emits state. So there is no dialect here to get wrong, and no motion to mistranslate.
+//
+// NO ESCAPE HATCH, DELIBERATELY. Upstream's other bases each let a badge render as a different
+// element, and each does it differently: radix takes `asChild` and swaps in `Slot`; React Aria
+// takes a `render` FUNCTION and calls it with the computed props. Base UI has no Slot, and its own
+// convention is a `render` ELEMENT prop backed by `useRender` — but badge is not a Base UI
+// primitive, so nothing here decides which of those shapes upstream's Base UI badge actually
+// exposes, or whether it exposes one at all.
+//
+// Guessing would publish an API this base may not have, and an API shape is not something a later
+// commit can quietly correct. Adding the hatch once the upstream source is available is additive
+// and non-breaking; shipping the wrong one is not. This follows button.tsrx in the same base,
+// which omits `LinkButton` for the same reason. A consumer needing a different element today can
+// spread `badgeVariants({ variant })` onto it directly, which is what the class export is for.
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+import type { HostProps } from '../../../lib/types';
+
+export const badgeVariants = cva(
+	'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
+	{
+		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 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+export interface BadgeProps extends HostProps<'span'> {
+	variant?: VariantProps<typeof badgeVariants>['variant'];
+	/** Not supported in this base — see the header. Declared so it fails to compile, not silently. */
+	asChild?: never;
+}
+
+export function Badge({ className, variant = 'default', ...props }: BadgeProps) @{
+	<span
+		data-slot="badge"
+		data-variant={variant}
+		className={cn(badgeVariants({ variant }), className)}
+		{...props}
+	/>
+}

package/src/bases/base-ui/ui/breadcrumb.tsrx

@@ -0,0 +1,109 @@
+// Base UI base breadcrumb — class strings from the maintainer-supplied radix source, verbatim.
+// Six of the seven parts are plain host elements with no primitive underneath and no state
+// attributes, so they carry across unchanged and there is no dialect to get wrong.
+//
+// `BreadcrumbLink` IS MISSING ITS ESCAPE HATCH, and unlike badge that costs something real: the
+// `asChild` branch is how a router's Link gets plugged in, which is most of what this family is
+// for. It is still left out, for the same reason:
+//
+//   radix        `asChild` swaps in `Slot`, a pure prop-merger
+//   React Aria   routes through RAC's own `Link` primitive with a `render` prop
+//   Base UI      has neither — no Slot, and no Link primitive
+//
+// Base UI's house convention is a `render` ELEMENT prop backed by `useRender`, and this base
+// already relies on it where a real primitive offers it (see pagination). But breadcrumb has no
+// primitive, so nothing here settles whether upstream's Base UI breadcrumb implements `render`
+// itself, and an API shape is not something a later commit can quietly correct — adding it is
+// additive, shipping the wrong spelling is breaking.
+//
+// Until then a router link still works, it just has to carry the classes itself:
+//
+//     <BreadcrumbItem>
+//       <RouterLink className="transition-colors hover:text-foreground">Home</RouterLink>
+//     </BreadcrumbItem>
+//
+// which loses only the `data-slot="breadcrumb-link"` hook.
+import { ChevronRightIcon, MoreHorizontalIcon } from '@octanejs/lucide';
+import { type OctaneNode } from 'octane';
+
+import { cn } from '../../../lib/utils';
+
+type Props = { className?: string } & Record<string, unknown>;
+
+export function Breadcrumb({ className, ...props }: Props) @{
+	<nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
+}
+
+export function BreadcrumbList({ className, ...props }: Props) @{
+	<ol
+		data-slot="breadcrumb-list"
+		className={cn(
+			'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function BreadcrumbItem({ className, ...props }: Props) @{
+	<li
+		data-slot="breadcrumb-item"
+		className={cn('inline-flex items-center gap-1', className)}
+		{...props}
+	/>
+}
+
+export interface BreadcrumbLinkProps extends Props {
+	/**
+ * NOT SUPPORTED in this base — see the header. Declared as `never` so markup carrying it over
+ * from the radix base fails to compile instead of silently rendering the anchor AND the child,
+ * which nests one link inside another.
+ */
+	asChild?: never;
+}
+
+export function BreadcrumbLink({ className, ...props }: BreadcrumbLinkProps) @{
+	<a
+		data-slot="breadcrumb-link"
+		className={cn('transition-colors hover:text-foreground', className)}
+		{...props}
+	/>
+}
+
+export function BreadcrumbPage({ className, ...props }: Props) @{
+	<span
+		data-slot="breadcrumb-page"
+		role="link"
+		aria-disabled="true"
+		aria-current="page"
+		className={cn('font-normal text-foreground', className)}
+		{...props}
+	/>
+}
+
+export function BreadcrumbSeparator(props: Props & { children?: OctaneNode }) @{
+	const { className, children: _children, ...rest } = props;
+
+	<li
+		data-slot="breadcrumb-separator"
+		role="presentation"
+		aria-hidden="true"
+		className={cn('[&>svg]:size-3.5', className)}
+		{...rest}
+	>
+		{props.children ?? <ChevronRightIcon className="cn-rtl-flip" />}
+	</li>
+}
+
+export function BreadcrumbEllipsis({ className, ...props }: Props) @{
+	<span
+		data-slot="breadcrumb-ellipsis"
+		role="presentation"
+		aria-hidden="true"
+		className={cn('flex size-5 items-center justify-center [&>svg]:size-4', className)}
+		{...props}
+	>
+		<MoreHorizontalIcon />
+		<span className="sr-only">More</span>
+	</span>
+}

package/src/bases/base-ui/ui/button.tsrx

@@ -0,0 +1,69 @@
+// Base UI base button — runs on the @octanejs/base-ui `Button` primitive.
+//
+// TWO THINGS HERE ARE RECORDED FACTS, not guesses, both from the React Aria base's own
+// provenance note:
+//   1. Upstream's bases SHARE button's cva strings exactly, so the class strings below are the
+//      package's shipped utilities-inlined flavor and match the other bases.
+//   2. The Base UI base OMITS the `data-variant`/`data-size` attributes the aria base sets. They
+//      are deliberately absent rather than forgotten — no selector in these strings keys off
+//      them, so nothing styles differently for their absence.
+//
+// NO LinkButton. The aria base has one because RAC ships a `Link` primitive slotted as a button;
+// Base UI has no such primitive, and upstream's Base UI base composes links through the `render`
+// prop instead. Inventing one here would be an API this base does not have — `pagination`, which
+// consumes it in the aria base, therefore stays unported until the upstream source says how.
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Button as ButtonPrimitive } from '@octanejs/base-ui/button';
+
+import { cn } from '../../../lib/utils';
+
+export const buttonVariants = cva(
+	'group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+				outline: 'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+				ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+				destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				xs: 'h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\'size-\'])]:size-3',
+				sm: 'h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=\'size-\'])]:size-3.5',
+				lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+				icon: 'size-8',
+				'icon-xs': 'size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*=\'size-\'])]:size-3',
+				'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+				'icon-lg': 'size-9',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
+);
+
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+export interface ButtonProps extends Record<string, any> {
+	variant?: ButtonVariants['variant'];
+	size?: ButtonVariants['size'];
+	className?: string;
+}
+
+export function Button({
+	className,
+	variant = 'default',
+	size = 'default',
+	...props
+}: ButtonProps) @{
+	<ButtonPrimitive
+		data-slot="button"
+		className={cn(buttonVariants({ variant, size, className }))}
+		{...props}
+	/>
+}

package/src/bases/base-ui/ui/card.tsrx

@@ -0,0 +1,76 @@
+// Base UI base card — presentational, no headless primitive in any base.
+//
+// UNVERIFIED PROVENANCE: derived from this package's React Aria base rather than transcribed
+// from upstream's `bases/base-ui/ui/card.tsx`, which was not available at port time.
+// Diff the class strings against the upstream source before treating this as ported.
+import { cn } from '../../../lib/utils';
+import type { DivProps } from '../../../lib/types';
+
+export interface CardProps extends DivProps {
+	size?: 'default' | 'sm';
+}
+
+export function Card({ className, size = 'default', ...props }: CardProps) @{
+	<div
+		data-slot="card"
+		data-size={size}
+		className={cn(
+			'group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function CardHeader({ className, ...props }: DivProps) @{
+	<div
+		data-slot="card-header"
+		className={cn(
+			'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function CardTitle({ className, ...props }: DivProps) @{
+	<div
+		data-slot="card-title"
+		className={cn(
+			'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
+			className,
+		)}
+		{...props}
+	/>
+}
+
+export function CardDescription({ className, ...props }: DivProps) @{
+	<div
+		data-slot="card-description"
+		className={cn('text-sm text-muted-foreground', className)}
+		{...props}
+	/>
+}
+
+export function CardAction({ className, ...props }: DivProps) @{
+	<div
+		data-slot="card-action"
+		className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+		{...props}
+	/>
+}
+
+export function CardContent({ className, ...props }: DivProps) @{
+	<div data-slot="card-content" className={cn('px-(--card-spacing)', className)} {...props} />
+}
+
+export function CardFooter({ className, ...props }: DivProps) @{
+	<div
+		data-slot="card-footer"
+		className={cn(
+			'flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)',
+			className,
+		)}
+		{...props}
+	/>
+}

package/src/bases/base-ui/ui/checkbox.tsrx

@@ -0,0 +1,43 @@
+// Base UI base checkbox — runs on the @octanejs/base-ui `Checkbox` primitive.
+//
+// THE CONDITIONAL UTILITIES ARE ADAPTED, NOT COPIED, and the reason is structural rather than
+// stylistic. Base UI's Checkbox.Root renders a `<span role="checkbox">` — verified by rendering
+// it, not assumed — with a visually-hidden native `<input>` alongside it for form submission.
+// A `<span>` is never `:disabled`, so Tailwind's `disabled:` variant (which compiles to the
+// `:disabled` pseudo-class) can NEVER match. The primitive publishes `data-disabled` instead:
+//
+//   radix base:   `disabled:opacity-50`        -> matches, Root is a real button
+//   base-ui base: `data-disabled:opacity-50`   <- what this file uses
+//
+// `data-checked:` needs no change — the radix base already uses that exact form, and Base UI
+// emits `data-checked`/`data-unchecked` too. `focus-visible:` also stays: the span carries
+// tabindex, so the native pseudo-class applies.
+//
+// UNVERIFIED PROVENANCE: the non-conditional utilities are taken from this package's radix base
+// rather than transcribed from upstream's Base UI source.
+import { Checkbox as CheckboxPrimitive } from '@octanejs/base-ui/checkbox';
+import { CheckIcon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+
+export interface CheckboxProps extends Record<string, unknown> {
+	className?: string;
+}
+
+export function Checkbox({ className, ...props }: CheckboxProps) @{
+	<CheckboxPrimitive.Root
+		data-slot="checkbox"
+		className={cn(
+			'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
+			className,
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator
+			data-slot="checkbox-indicator"
+			className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+		>
+			<CheckIcon />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+}

package/src/bases/base-ui/ui/collapsible.tsrx

@@ -0,0 +1,25 @@
+// Base UI base collapsible — runs on @octanejs/base-ui's Collapsible.
+//
+// PART MAPPING: shadcn names the content part `CollapsibleContent` while the Base UI part
+// underneath is `Collapsible.Panel` — the same rename this base already makes for `accordion`.
+// The exported names and all three `data-slot` values stay as shadcn defines them, so consumers
+// see no difference between bases.
+//
+// No class strings: upstream ships this family unstyled in every base, leaving layout to the
+// consumer. There is correspondingly no styling risk here, and nothing to verify against a
+// class-string source.
+import { Collapsible as CollapsiblePrimitive } from '@octanejs/base-ui/collapsible';
+
+type Props = Record<string, unknown>;
+
+export function Collapsible(props: Props) @{
+	<CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+export function CollapsibleTrigger(props: Props) @{
+	<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+}
+
+export function CollapsibleContent(props: Props) @{
+	<CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+}

package/src/bases/base-ui/ui/dialog.tsrx

@@ -0,0 +1,137 @@
+// Base UI base dialog — runs on @octanejs/base-ui's Dialog.
+// Part mapping: Overlay -> Backdrop, Content -> Popup, and the close affordance composes a
+// Button through Base UI's render-as-ELEMENT contract rather than radix's `asChild`.
+//
+// `data-open:`/`data-closed:` need no adaptation — the radix base already uses that exact form
+// and Base UI emits the same attributes.
+//
+// Drops upstream's `cn-font-heading` on the title, matching the react-aria base and this base's
+// alert-dialog: the package ships the utilities-inlined flavor and nothing defines that hook.
+//
+// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
+// transcribed from upstream's Base UI source.
+import { createElement, type OctaneNode } from 'octane';
+import { Dialog as DialogPrimitive } from '@octanejs/base-ui/dialog';
+import { XIcon } from '@octanejs/lucide';
+
+import { cn } from '../../../lib/utils';
+import { Button } from './button.tsrx';
+
+type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
+
+export function Dialog(props: Record<string, unknown>) @{
+	<DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+export function DialogTrigger(props: Record<string, unknown>) @{
+	<DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+export function DialogPortal(props: Record<string, unknown>) @{
+	<DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+export function DialogClose(props: Record<string, unknown>) @{
+	<DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+export function DialogOverlay({ className, ...props }: Props) @{
+	<DialogPrimitive.Backdrop
+		data-slot="dialog-overlay"
+		className={cn(
+			'fixed inset-0 isolate z-50 bg-black/10 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}
+	/>
+}
+
+export interface DialogContentProps extends Props {
+	showCloseButton?: boolean;
+}
+
+export function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: DialogContentProps) {
+	return createElement(
+		DialogPrimitive.Portal,
+		{ 'data-slot': 'dialog-portal' },
+		createElement(DialogOverlay, { key: 'overlay' }),
+		createElement(
+			DialogPrimitive.Popup,
+			{
+				key: 'content',
+				'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-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm 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
+				? createElement(DialogPrimitive.Close, {
+						key: 'close',
+						'data-slot': 'dialog-close',
+						className: 'absolute top-2 right-2',
+						render: createElement(
+							Button,
+							{ variant: 'ghost', size: 'icon-sm' },
+							createElement(XIcon, { key: 'icon' }),
+							createElement('span', { key: 'sr', className: 'sr-only' }, 'Close'),
+						),
+					})
+				: null,
+		),
+	);
+}
+
+export function DialogHeader({ className, ...props }: Props) @{
+	<div data-slot="dialog-header" className={cn('flex flex-col gap-2', className)} {...props} />
+}
+
+export interface DialogFooterProps extends Props {
+	showCloseButton?: boolean;
+}
+
+export function DialogFooter(props: DialogFooterProps) @{
+	const { className, showCloseButton = false, children: _children, ...rest } = props;
+
+	<div
+		data-slot="dialog-footer"
+		className={cn(
+			'-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+			className,
+		)}
+		{...rest}
+	>
+		{props.children}
+		{showCloseButton
+			? createElement(DialogPrimitive.Close, {
+					render: createElement(Button, { variant: 'outline' }, 'Close'),
+				})
+			: null}
+	</div>
+}
+
+export function DialogTitle({ className, ...props }: Props) @{
+	<DialogPrimitive.Title
+		data-slot="dialog-title"
+		className={cn('text-base leading-none font-medium', className)}
+		{...props}
+	/>
+}
+
+export function DialogDescription({ className, ...props }: Props) @{
+	<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}
+	/>
+}