@freighttech/ui 0.13.18

package/src/primitives/Notice.tsx

@@ -0,0 +1,83 @@
+"use client"
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+/**
+ * @deprecated Use <Alert variant="destructive|warning|info"> instead.
+ * Migration guide: docs/design-system/migration-tables.md#j3-component-mapping
+ *
+ * Notice variant="error"   → Alert variant="destructive"
+ * Notice variant="warning" → Alert variant="warning"
+ * Notice variant="info"    → Alert variant="info"
+ */
+
+const variantStyles = {
+  error: {
+    container: 'border-status-error-border bg-status-error-bg text-status-error-text',
+    icon: 'border-status-error-icon',
+  },
+  info: {
+    container: 'border-status-info-border bg-status-info-bg text-status-info-text',
+    icon: 'border-status-info-icon',
+  },
+  warning: {
+    container: 'border-status-warning-border bg-status-warning-bg text-status-warning-text',
+    icon: 'border-status-warning-icon',
+  },
+} as const
+
+export type NoticeVariant = keyof typeof variantStyles
+
+export type NoticeProps = {
+  variant?: NoticeVariant
+  title?: string
+  message?: string
+  action?: React.ReactNode
+  children?: React.ReactNode
+  className?: string
+  compact?: boolean
+}
+
+export function Notice({
+  variant = 'info',
+  title,
+  message,
+  action,
+  children,
+  className,
+  compact = false,
+}: NoticeProps) {
+  if (process.env.NODE_ENV === 'development') {
+    console.warn(
+      '[DS] <Notice> is deprecated. Use <Alert variant="destructive|warning|info"> instead. ' +
+      'See: docs/design-system/migration-tables.md'
+    )
+  }
+
+  const styles = variantStyles[variant]
+
+  if (compact || (!title && !action && (children || message))) {
+    return (
+      <div className={cn('rounded-md border px-3 py-2 text-sm', styles.container, className)}>
+        {children ?? message}
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('rounded-md border p-4', styles.container, className)}>
+      <div className="flex items-start gap-3">
+        <span
+          className={cn('inline-block mt-0.5 h-4 w-4 rounded-full border-2 shrink-0', styles.icon)}
+          aria-hidden
+        />
+        <div className="space-y-1">
+          {title ? <div className="text-sm font-medium">{title}</div> : null}
+          {message ? <div className="text-sm opacity-90">{message}</div> : null}
+          {children}
+          {action ? <div className="mt-2">{action}</div> : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/primitives/alert.tsx

@@ -0,0 +1,59 @@
+/**
+ * @deprecated Use `Alert` from `@freighttech/ui/components` instead.
+ *   The new component matches the Figma "FMS-Componenets" Alert spec
+ *   (info / success / warning / error / neutral), pulls colours from
+ *   the `--status-*` semantic tokens so dark mode works automatically,
+ *   and supports a dismiss button. Will be removed in a future minor.
+ */
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8",
+  {
+    variants: {
+      variant: {
+        default: 'border-border bg-background text-foreground [&>svg]:text-foreground',
+        destructive:
+          'border-status-error-border bg-status-error-bg text-status-error-text [&>svg]:text-status-error-icon',
+        success:
+          'border-status-success-border bg-status-success-bg text-status-success-text [&>svg]:text-status-success-icon',
+        warning:
+          'border-status-warning-border bg-status-warning-bg text-status-warning-text [&>svg]:text-status-warning-icon',
+        info:
+          'border-status-info-border bg-status-info-bg text-status-info-text [&>svg]:text-status-info-icon',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+))
+
+Alert.displayName = 'Alert'
+
+const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn('mb-1 text-sm font-semibold leading-tight', className)} {...props} />
+  )
+)
+
+AlertTitle.displayName = 'AlertTitle'
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm leading-relaxed', className)} {...props} />
+  )
+)
+
+AlertDescription.displayName = 'AlertDescription'
+
+export { Alert, AlertDescription, AlertTitle, alertVariants }

package/src/primitives/badge.tsx

@@ -0,0 +1,43 @@
+/**
+ * @deprecated Use `Badge` from `@freighttech/ui/components` instead.
+ *   The new component aligns with the Figma "FMS-Componenets" Badge
+ *   spec, exposes typed `variant`/`size` props, optional status dot,
+ *   and drops the `class-variance-authority` runtime. Will be removed
+ *   in a future minor.
+ */
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow',
+        outline: 'text-foreground',
+        muted: 'border-transparent bg-muted text-muted-foreground',
+        success: 'border-status-success-border bg-status-success-bg text-status-success-text',
+        warning: 'border-status-warning-border bg-status-warning-bg text-status-warning-text',
+        info: 'border-status-info-border bg-status-info-bg text-status-info-text',
+        neutral: 'border-status-neutral-border bg-status-neutral-bg text-status-neutral-text',
+        error: 'border-status-error-border bg-status-error-bg text-status-error-text',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>
+
+export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />
+))
+
+Badge.displayName = 'Badge'
+
+export { badgeVariants }

package/src/primitives/button.tsx

@@ -0,0 +1,60 @@
+/**
+ * @deprecated Use `Button` from `@freighttech/ui/components` instead.
+ *   This primitive ships the upstream `class-variance-authority` API and
+ *   imports `@open-mercato/shared/lib/utils#cn`, which isn't part of that
+ *   package's `exports` map and breaks Vite-based tooling (Storybook).
+ *   The new component matches the Figma "FMS-Componenets" Button spec,
+ *   exposes the same variants under a flatter prop API, and ships with
+ *   a Storybook reference.
+ *   Migration path: change the import to `@freighttech/ui/components`
+ *   and rename `variant="default"` → `variant="primary"`. Will be
+ *   removed in a future minor of `@freighttech/ui`.
+ */
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium cursor-pointer transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        muted: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'button'
+  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />
+}
+
+export { buttonVariants }
+

package/src/primitives/calendar.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from 'react'
+import { DayPicker } from 'react-day-picker'
+import type { DayPickerProps } from 'react-day-picker'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type CalendarProps = DayPickerProps
+
+export function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row gap-4',
+        month: 'space-y-4',
+        month_caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'flex items-center gap-1',
+        button_previous: cn(
+          'absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+          'inline-flex items-center justify-center rounded-md text-sm font-medium',
+          'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2',
+          'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+          'hover:bg-accent hover:text-accent-foreground border-0'
+        ),
+        button_next: cn(
+          'absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+          'inline-flex items-center justify-center rounded-md text-sm font-medium',
+          'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2',
+          'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+          'hover:bg-accent hover:text-accent-foreground border-0'
+        ),
+        month_grid: 'w-full border-collapse space-y-1',
+        weekdays: 'flex',
+        weekday: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        weeks: 'w-full border-collapse space-y-1',
+        week: 'flex w-full mt-2',
+        day: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day_button: cn(
+          'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
+          'inline-flex items-center justify-center rounded-md text-sm',
+          'ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2',
+          'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none',
+          'hover:bg-accent hover:text-accent-foreground'
+        ),
+        selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md',
+        today: 'bg-accent text-accent-foreground rounded-md',
+        outside:
+          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        disabled: 'text-muted-foreground opacity-50',
+        hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation }) =>
+          orientation === 'left' ? (
+            <ChevronLeft className="h-4 w-4" />
+          ) : (
+            <ChevronRight className="h-4 w-4" />
+          ),
+      }}
+      {...props}
+    />
+  )
+}

package/src/primitives/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from '@open-mercato/shared/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/primitives/checkbox.tsx

@@ -0,0 +1,34 @@
+/**
+ * @deprecated Use `Checkbox` from `@freighttech/ui/components` instead.
+ *   The new component is native (no Radix runtime), supports
+ *   indeterminate + error states, and matches the Figma
+ *   "FMS-Componenets" Checkbox spec. Will be removed in a future minor.
+ */
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@open-mercato/shared/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer size-4 shrink-0 rounded-sm border border-input bg-background shadow-xs ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="size-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

package/src/primitives/dialog.tsx

@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/50 transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => {
+  const t = useT()
+
+  React.useEffect(() => {
+    return () => {
+      if (typeof window === 'undefined') return
+      window.setTimeout(() => {
+        if (document.querySelector('[data-dialog-content][data-state="open"]')) return
+        document.body.style.removeProperty('overflow')
+        document.body.style.removeProperty('pointer-events')
+      }, 0)
+    }
+  }, [])
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        data-dialog-content=""
+        className={cn(
+          'fixed inset-x-0 bottom-0 z-50 flex min-h-[50vh] max-h-[70vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg',
+          'sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-w-lg sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border',
+          'focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out',
+          className,
+        )}
+        {...props}
+      >
+        <DialogClose
+          data-dialog-close=""
+          className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+          aria-label={t('ui.dialog.close.ariaLabel', 'Close')}
+        >
+          <X className="h-4 w-4" />
+        </DialogClose>
+        {children}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+})
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

package/src/primitives/form-field.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import * as React from 'react'
+import { Label } from './label'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type FormFieldProps = {
+  /** Visible label text */
+  label?: string
+  /** Auto-generated if not provided. Links label → input via htmlFor/id */
+  id?: string
+  /** Show required indicator (*) next to label */
+  required?: boolean
+  /** Help text below input */
+  description?: React.ReactNode
+  /** Error message — replaces description when present */
+  error?: string
+  /** Layout: vertical (default) or horizontal (label beside input) */
+  orientation?: 'vertical' | 'horizontal'
+  /** Disabled styling on label */
+  disabled?: boolean
+  /** The input element (slot) */
+  children: React.ReactNode
+  /** Additional className on root wrapper */
+  className?: string
+}
+
+export function FormField({
+  label,
+  id: idProp,
+  required = false,
+  description,
+  error,
+  orientation = 'vertical',
+  disabled = false,
+  children,
+  className,
+}: FormFieldProps) {
+  const generatedId = React.useId()
+  const fieldId = idProp ?? generatedId
+  const descriptionId = description && !error ? `${fieldId}-desc` : undefined
+  const errorId = error ? `${fieldId}-error` : undefined
+  const ariaDescribedBy = [descriptionId, errorId].filter(Boolean).join(' ') || undefined
+
+  // Clone child to inject accessibility props
+  const enhancedChild = React.isValidElement(children)
+    ? React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {
+        id: fieldId,
+        'aria-describedby': ariaDescribedBy,
+        'aria-invalid': error ? true : undefined,
+        'aria-required': required ? true : undefined,
+        disabled: disabled || undefined,
+      })
+    : children
+
+  const isHorizontal = orientation === 'horizontal'
+
+  return (
+    <div
+      className={cn(
+        isHorizontal
+          ? 'flex items-center justify-between gap-4'
+          : 'flex flex-col gap-1.5',
+        disabled && 'opacity-50',
+        className,
+      )}
+      data-slot="form-field"
+    >
+      {label ? (
+        <Label
+          htmlFor={fieldId}
+          className={cn(
+            isHorizontal && 'min-w-0 shrink-0',
+            disabled && 'cursor-not-allowed',
+          )}
+        >
+          {label}
+          {required && (
+            <span className="text-status-error-icon ml-0.5" aria-hidden="true">*</span>
+          )}
+        </Label>
+      ) : null}
+
+      <div className={cn(isHorizontal && 'flex-1')}>
+        {enhancedChild}
+      </div>
+
+      {error ? (
+        <p
+          id={errorId}
+          role="alert"
+          className="text-xs text-status-error-text"
+        >
+          {error}
+        </p>
+      ) : description ? (
+        <p
+          id={descriptionId}
+          className="text-xs text-muted-foreground"
+        >
+          {description}
+        </p>
+      ) : null}
+    </div>
+  )
+}