@exegia/corpora-ui 0.5.0

package/src/components/ui/button.tsx

@@ -0,0 +1,199 @@
+"use client";
+
+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 type * as React from "react";
+import { cn } from "@/lib/utils";
+import { Spinner } from "@/components/ui/spinner";
+import { LiquidGlass } from "@/components/ui/glasscn/liquid-glass";
+import {
+  type FrostGlassVariant,
+  glassVariantStyles,
+  liquidRefractStyles,
+} from "@/lib/glass-variants";
+
+export const buttonVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-[scale,box-shadow,width,height,background-color,border-color] [transition-duration:150ms,150ms,300ms,300ms,150ms,150ms] ease-smooth-out active:scale-97 data-pressed:scale-97 motion-reduce:transition-none motion-reduce:active:scale-100 motion-reduce:data-pressed:scale-100 [&_svg]:transition-transform [&_svg]:duration-150 [&_svg]:ease-smooth-out motion-reduce:[&_svg]:transition-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-loading:select-none sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+  {
+    compoundVariants: [
+      {
+        // `link` is inline text, not a control surface: drop the button box so
+        // it sits with the surrounding copy instead of riding high in a 32/36px
+        // flex box. Both the bare and `sm:` heights have to be reset —
+        // tailwind-merge keeps modifier-prefixed classes in a separate group,
+        // so a call-site `h-auto` alone still loses to `sm:h-8`. border-0 makes
+        // the inline box exactly one line-height so it doesn't grow the line.
+        //
+        // align-middle is the alignment that holds: an inline-flex box exposes
+        // the baseline of its *first* flex item, which here is the always-
+        // mounted loading indicator rather than the label, so plain baseline
+        // alignment leaves the text ~3px high. `items-baseline` fixes that but
+        // then hangs icons 3px above the label. Centering the box lands within
+        // ~1px in every state without touching the loading-morph machinery.
+        //
+        // Icon sizes are excluded; they keep their square hit area.
+        class: "h-auto border-0 px-0 align-middle sm:h-auto",
+        size: ["xs", "sm", "default", "lg", "xl"],
+        variant: "link",
+      },
+    ],
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
+        icon: "size-9 sm:size-8",
+        "icon-lg": "size-10 sm:size-9",
+        "icon-sm": "size-8 sm:size-7",
+        "icon-xl":
+          "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+        "icon-xs":
+          "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
+        sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
+        xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+        xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
+      },
+      variant: {
+        default:
+          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs hover:bg-primary/90 data-pressed:bg-primary/90 *:data-[slot=button-loading-indicator]:text-primary-foreground [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none",
+        destructive:
+          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs hover:bg-destructive/90 data-pressed:bg-destructive/90 *:data-[slot=button-loading-indicator]:text-white [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none",
+        "destructive-outline":
+          "border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:border-destructive/32 hover:bg-destructive/4 data-pressed:border-destructive/32 data-pressed:bg-destructive/4 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
+        ghost:
+          "border-transparent text-foreground hover:bg-accent data-pressed:bg-accent *:data-[slot=button-loading-indicator]:text-foreground",
+        // Base for the glass treatment. The finish itself (blur, tint, bevel)
+        // comes from glassVariantStyles keyed by the `glassVariant` prop,
+        // which is only accepted when variant is "glass".
+        glass:
+          "border-transparent text-foreground *:data-[slot=button-loading-indicator]:text-foreground",
+        link: "border-transparent text-foreground underline-offset-4 hover:underline data-pressed:underline *:data-[slot=button-loading-indicator]:text-foreground",
+        outline:
+          "border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-accent/50 data-pressed:bg-accent/50 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:data-pressed:bg-input/64 dark:hover:bg-input/64 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90 *:data-[slot=button-loading-indicator]:text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80",
+      },
+    },
+  },
+);
+
+type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+
+interface ButtonBaseProps extends useRender.ComponentProps<"button"> {
+  size?: VariantProps<typeof buttonVariants>["size"];
+  loading?: boolean;
+  /**
+   * Emit cuelume press/release attributes. Inert unless the app opts into
+   * interaction sound by calling `bindSounds()` once.
+   */
+  sound?: boolean;
+}
+
+export type ButtonProps = ButtonBaseProps &
+  (
+    | {
+        variant: "glass";
+        /** Glass finish. Only available when `variant` is "glass". */
+        glassVariant?: FrostGlassVariant;
+      }
+    | {
+        variant?: Exclude<ButtonVariant, "glass">;
+        glassVariant?: never;
+      }
+  );
+
+export function Button({
+  className,
+  variant,
+  size,
+  render,
+  children,
+  loading = false,
+  disabled: disabledProp,
+  glassVariant,
+  sound = true,
+  ...props
+}: ButtonProps): React.ReactElement {
+  const isDisabled: boolean = Boolean(loading || disabledProp);
+  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
+    render ? undefined : "button";
+
+  const resolvedGlassVariant: FrostGlassVariant | undefined =
+    variant === "glass" ? (glassVariant ?? "liquid-refract") : undefined;
+  const isLiquidRefract = resolvedGlassVariant === "liquid-refract";
+
+  // Icon-only sizes overlay the spinner on top of the (hidden) icon; text
+  // sizes keep the label visible and show the spinner inline before it.
+  const isIconSize = (size ?? "default").startsWith("icon");
+
+  const defaultProps = {
+    children: (
+      <>
+        {!isIconSize && (
+          // Always mounted so the button width morphs as the slot collapses
+          // and expands; the closed state cancels the flex gap (which varies
+          // per size) with a matching negative margin.
+          <span
+            aria-hidden={loading ? undefined : true}
+            data-slot="button-loading-indicator"
+            className={cn(
+              "pointer-events-none inline-flex shrink-0 items-center overflow-hidden transition-[max-width,margin-inline-start,opacity,filter] duration-300 ease-smooth-out motion-reduce:transition-none",
+              loading
+                ? "max-w-6"
+                : cn(
+                    "max-w-0 opacity-0 blur-[2px]",
+                    size === "xs" ? "-ms-1" : size === "sm" ? "-ms-1.5" : "-ms-2",
+                  ),
+            )}
+          >
+            <Spinner className={loading ? undefined : "animate-none"} />
+          </span>
+        )}
+        {children}
+        {loading && isIconSize && (
+          <Spinner
+            className="pointer-events-none absolute"
+            data-slot="button-loading-indicator"
+          />
+        )}
+      </>
+    ),
+    className: cn(
+      buttonVariants({ size, variant }),
+      // Label + icon buttons: icons do a gentle scale bump on hover. The
+      // class-based :not() skips the spinner (animate-spin / animate-none).
+      !isIconSize &&
+        "hover:[&_svg:not([class*='animate-'])]:scale-110 motion-reduce:hover:[&_svg]:scale-100",
+      loading && isIconSize && "data-loading:text-transparent",
+      resolvedGlassVariant && glassVariantStyles[resolvedGlassVariant],
+      isLiquidRefract && liquidRefractStyles,
+      className,
+    ),
+    "aria-disabled": loading || undefined,
+    "data-cuelume-press": sound ? "" : undefined,
+    "data-cuelume-release": sound ? "" : undefined,
+    "data-loading": loading ? "" : undefined,
+    "data-glass-variant": resolvedGlassVariant,
+    "data-slot": "button",
+    disabled: isDisabled,
+    type: typeValue,
+  };
+
+  const element = useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(defaultProps, props),
+    render,
+  });
+
+  // liquid-refract delegates the finish to the LiquidGlass wrapper, which
+  // renders the SVG-displacement backdrop behind an unstyled button.
+  if (isLiquidRefract) {
+    return <LiquidGlass>{element}</LiquidGlass>;
+  }
+
+  return element;
+}

package/src/components/ui/card.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+export function Card({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn(
+      "relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+      className,
+    ),
+    "data-slot": "card",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardFrame({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn(
+      "relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]",
+      className,
+    ),
+    "data-slot": "card-frame",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardFrameHeader({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn(
+      "relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]",
+      className,
+    ),
+    "data-slot": "card-frame-header",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardFrameTitle({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn("self-center font-semibold text-sm", className),
+    "data-slot": "card-frame-title",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardFrameDescription({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn("self-center text-muted-foreground text-sm", className),
+    "data-slot": "card-frame-description",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardFrameAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn(
+      "col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end",
+      className,
+    ),
+    "data-slot": "card-frame-action",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardFrameFooter({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn("px-6 py-4", className),
+    "data-slot": "card-frame-footer",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardHeader({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn(
+      "grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+      className,
+    ),
+    "data-slot": "card-header",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardTitle({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn("font-heading font-semibold text-lg leading-none", className),
+    "data-slot": "card-title",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardDescription({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn("text-muted-foreground text-sm", className),
+    "data-slot": "card-description",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn(
+      "col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end",
+      className,
+    ),
+    "data-slot": "card-action",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardPanel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn(
+      "flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0",
+      className,
+    ),
+    "data-slot": "card-panel",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export function CardFooter({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">): React.ReactElement {
+  const defaultProps = {
+    className: cn(
+      "flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4",
+      className,
+    ),
+    "data-slot": "card-footer",
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(defaultProps, props),
+    render,
+  });
+}
+
+export { CardPanel as CardContent };

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import type React from "react";
+import { playCue } from "@/lib/sound";
+import { cn } from "@/lib/utils";
+
+export function Checkbox({
+  className,
+  sound = true,
+  onCheckedChange,
+  ...props
+}: CheckboxPrimitive.Root.Props & {
+  /** Play the cuelume toggle cue on check/uncheck. Silent until bindSounds(). */
+  sound?: boolean;
+}): React.ReactElement {
+  return (
+    <CheckboxPrimitive.Root
+      // Cued off the state change rather than data-cuelume-toggle: Base UI
+      // renders the native input as a *sibling* of this root, so a click on an
+      // associated <label> never bubbles through an element carrying the
+      // attribute and would toggle silently. This fires once for box clicks,
+      // label clicks and keyboard Space alike, and not for programmatic changes.
+      onCheckedChange={(checked, eventDetails) => {
+        if (sound) playCue("toggle");
+        onCheckedChange?.(checked, eventDetails);
+      }}
+      className={cn(
+        "relative inline-flex size-4.5 shrink-0 cursor-pointer items-center justify-center rounded-[.25rem] border border-input bg-background not-dark:bg-clip-padding shadow-xs/5 outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[3px] not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 data-disabled:cursor-not-allowed data-disabled:opacity-64 sm:size-4 dark:not-data-checked:bg-input/32 dark:aria-invalid:ring-destructive/24 dark:not-data-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)] [[data-disabled],[data-checked],[aria-invalid]]:shadow-none",
+        className,
+      )}
+      data-slot="checkbox"
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        className="absolute -inset-px flex items-center justify-center rounded-[.25rem] text-primary-foreground data-unchecked:hidden data-checked:bg-primary data-indeterminate:text-foreground"
+        data-slot="checkbox-indicator"
+        render={(
+          props: React.ComponentProps<"span">,
+          state: CheckboxPrimitive.Indicator.State,
+        ) => (
+          <span {...props}>
+            {state.indeterminate ? (
+              <svg
+                aria-hidden="true"
+                className="size-3.5 sm:size-3"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M5.252 12h13.496" />
+              </svg>
+            ) : (
+              <svg
+                aria-hidden="true"
+                className="size-3.5 sm:size-3"
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="3"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+              </svg>
+            )}
+          </span>
+        )}
+      />
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { CheckboxPrimitive };

package/src/components/ui/field.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+export function Field({
+  className,
+  ...props
+}: FieldPrimitive.Root.Props): React.ReactElement {
+  return (
+    <FieldPrimitive.Root
+      className={cn("flex flex-col items-start gap-2", className)}
+      data-slot="field"
+      {...props}
+    />
+  );
+}
+
+export function FieldLabel({
+  className,
+  ...props
+}: FieldPrimitive.Label.Props): React.ReactElement {
+  return (
+    <FieldPrimitive.Label
+      className={cn(
+        "inline-flex cursor-pointer items-center gap-2 font-medium text-base/4 text-foreground data-disabled:cursor-not-allowed data-disabled:opacity-64 sm:text-xs/3.5 ml-3",
+        className,
+      )}
+      data-slot="field-label"
+      {...props}
+    />
+  );
+}
+
+export function FieldItem({
+  className,
+  ...props
+}: FieldPrimitive.Item.Props): React.ReactElement {
+  return (
+    <FieldPrimitive.Item
+      className={cn("flex", className)}
+      data-slot="field-item"
+      {...props}
+    />
+  );
+}
+
+export function FieldDescription({
+  className,
+  ...props
+}: FieldPrimitive.Description.Props): React.ReactElement {
+  return (
+    <FieldPrimitive.Description
+      // Entrance morph when conditionally shown: height tweens from 0 via
+      // interpolate-size (set on :root) plus a fade/blur rise. Removal is
+      // unmount-instant; wrap in AnimatePresence when an exit is needed.
+      className={cn(
+        "overflow-hidden text-muted-foreground text-xs transition-[height,opacity,filter,translate] duration-300 ease-smooth-out starting:h-0 starting:translate-y-1 starting:opacity-0 starting:blur-[2px] motion-reduce:transition-none",
+        className,
+      )}
+      data-slot="field-description"
+      {...props}
+    />
+  );
+}
+
+export function FieldError({
+  className,
+  ...props
+}: FieldPrimitive.Error.Props): React.ReactElement {
+  return (
+    <FieldPrimitive.Error
+      className={cn(
+        "overflow-hidden text-destructive-foreground text-xs transition-[height,opacity,filter,translate] duration-300 ease-smooth-out starting:h-0 starting:translate-y-1 starting:opacity-0 starting:blur-[2px] motion-reduce:transition-none",
+        className,
+      )}
+      data-slot="field-error"
+      {...props}
+    />
+  );
+}
+
+export const FieldControl: typeof FieldPrimitive.Control =
+  FieldPrimitive.Control;
+export const FieldValidity: typeof FieldPrimitive.Validity =
+  FieldPrimitive.Validity;
+
+export { FieldPrimitive };