tembro 2.0.5 → 2.0.6

package/packages/cli/vendor/src/components/display/carousel.tsx

@@ -25,6 +25,12 @@ export type CarouselProps = React.ComponentProps<"div"> & {
   playLabel?: string
   pauseLabel?: string
   onAutoplayChange?: (playing: boolean) => void
+  viewportClassName?: string
+  controlsClassName?: string
+  dotsClassName?: string
+  arrowClassName?: string
+  dotClassName?: string
+  activeDotClassName?: string
 }
 
 export type CarouselItemProps = React.ComponentProps<"div">
@@ -56,6 +62,12 @@ function Carousel({
   playLabel = "Start autoplay",
   pauseLabel = "Pause autoplay",
   onAutoplayChange,
+  viewportClassName,
+  controlsClassName,
+  dotsClassName,
+  arrowClassName,
+  dotClassName,
+  activeDotClassName,
   className,
   children,
   ...props
@@ -151,7 +163,7 @@ function Carousel({
         "relative overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08))]",
         variant === "hero" && "min-h-72",
         variant === "minimal" && "rounded-[var(--radius-md)] shadow-none"
-      )}>
+      , viewportClassName)}>
         <div className="transition-transform duration-300 ease-out" aria-live="polite">
           {items[activeIndex]}
         </div>
@@ -161,7 +173,7 @@ function Carousel({
               type="button"
               variant={variant === "hero" ? "default" : "secondary"}
               size="icon-sm"
-              className="absolute left-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg"
+              className={cn("absolute left-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg", arrowClassName)}
               disabled={!canGoPrevious}
               aria-label={previousLabel}
               onClick={() => setActiveIndex(activeIndex - 1)}
@@ -172,7 +184,7 @@ function Carousel({
               type="button"
               variant={variant === "hero" ? "default" : "secondary"}
               size="icon-sm"
-              className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg"
+              className={cn("absolute right-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg", arrowClassName)}
               disabled={!canGoNext}
               aria-label={nextLabel}
               onClick={() => setActiveIndex(activeIndex + 1)}
@@ -183,7 +195,7 @@ function Carousel({
         ) : null}
       </div>
       {showDots && items.length > 1 && (
-        <div className="flex flex-wrap items-center justify-center gap-2" role="tablist" aria-label={`${ariaLabel} slides`}>
+        <div className={cn("flex flex-wrap items-center justify-center gap-2", dotsClassName)} role="tablist" aria-label={`${ariaLabel} slides`}>
           {items.map((_, itemIndex) => (
             <button
               key={itemIndex}
@@ -193,7 +205,7 @@ function Carousel({
               aria-selected={itemIndex === activeIndex}
               className={cn(
                 "h-2.5 rounded-full bg-muted-foreground/30 transition-[width,background-color,opacity] hover:bg-muted-foreground/55",
-                itemIndex === activeIndex ? "w-7 bg-primary" : "w-2.5"
+                itemIndex === activeIndex ? cn("w-7 bg-primary", activeDotClassName) : cn("w-2.5", dotClassName)
               )}
               onClick={() => setActiveIndex(itemIndex)}
             />
@@ -203,7 +215,7 @@ function Carousel({
               type="button"
               variant="ghost"
               size="sm"
-              className="ml-2 rounded-full"
+              className={cn("ml-2 rounded-full", controlsClassName)}
               onClick={() => {
                 const nextPlaying = !autoplayEnabled
                 setAutoplayStopped(false)

package/packages/cli/vendor/src/components/display/smart-card.tsx

@@ -38,7 +38,7 @@ export type InfoCardRenderContext = {
   footer?: React.ReactNode
 }
 
-export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size"> & InfoCardRenderContext & {
+export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size" | "orientation"> & InfoCardRenderContext & {
   orientation?: InfoCardOrientation
   variant?: InfoCardVariant
   size?: InfoCardSize

package/packages/cli/vendor/src/components/display/status-legend.tsx

@@ -18,7 +18,7 @@ export type StatusLegendItem = {
   className?: string
 }
 
-export type StatusLegendProps = React.ComponentProps<typeof Card> & {
+export type StatusLegendProps = Omit<React.ComponentProps<typeof Card>, "orientation"> & {
   title?: React.ReactNode
   description?: React.ReactNode
   actions?: React.ReactNode

package/packages/cli/vendor/src/components/form/form-input.tsx

@@ -8,7 +8,7 @@ import {
   type DateRangeValue,
 } from "@/components/inputs/date-range-input"
 import { DateInput, type DateInputProps } from "@/components/inputs/date-input"
-import { Input, type InputTextProps } from "@/components/ui/input"
+import { Input, type InputClearableProps, type InputSearchProps, type InputTextProps } from "@/components/ui/input"
 import { MaskedInput, type MaskedInputProps } from "@/components/inputs/masked-input"
 import { MoneyInput, type MoneyInputProps } from "@/components/inputs/money-input"
 import { NumberInput, type NumberInputProps } from "@/components/inputs/number-input"
@@ -18,11 +18,6 @@ import {
   type PhoneInputProps,
 } from "@/components/inputs/phone-input"
 import { QuantityInput, type QuantityInputProps } from "@/components/inputs/quantity-input"
-import { SearchInput, type SearchInputProps } from "@/components/inputs/search-input"
-import {
-  ClearableInput,
-  type ClearableInputProps,
-} from "@/components/inputs/clearable-input"
 import {
   FormFieldShell,
   type FormFieldShellControlProps,
@@ -76,7 +71,7 @@ export type FormTextInputProps<
 export type FormInputSearchVariantProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Omit<SearchInputProps, "name" | "value" | "defaultValue" | "onValueChange"> &
+> = Omit<InputSearchProps, "name" | "value" | "defaultValue" | "onValueChange" | "kind"> &
   FormControlledFieldProps<TFieldValues, TName> & {
     kind: "search"
     onValueChange?: (value: string) => void
@@ -134,7 +129,7 @@ export type FormInputDateRangeVariantProps<
 export type FormInputClearableVariantProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Omit<ClearableInputProps, "name" | "value" | "defaultValue" | "onValueChange"> &
+> = Omit<InputClearableProps, "name" | "value" | "defaultValue" | "onValueChange" | "kind"> &
   FormControlledFieldProps<TFieldValues, TName> & {
     kind: "clearable"
     emptyValue?: unknown
@@ -275,8 +270,9 @@ function FormInput<
               error={error}
               htmlFor={id ?? inputId}
             >
-              <SearchInput
-                {...searchProps}
+              <Input
+                {...(searchProps as Omit<InputSearchProps, "kind">)}
+                type="search"
                 id={id ?? inputId}
                 name={field.name}
                 ref={field.ref}
@@ -605,8 +601,9 @@ function FormInput<
               error={error}
               htmlFor={id ?? inputId}
             >
-              <ClearableInput
-                {...clearableProps}
+              <Input
+                {...(clearableProps as Omit<InputClearableProps, "kind">)}
+                clearable
                 id={id ?? inputId}
                 name={field.name}
                 ref={field.ref}

package/packages/cli/vendor/src/components/form/form-select.tsx

@@ -6,7 +6,7 @@ import {
   type AsyncSelectOption,
   type AsyncSelectProps,
 } from "@/components/inputs/async-select"
-import { SimpleSelect, type SimpleSelectProps } from "@/components/inputs/simple-select"
+import { Select, type SelectProps } from "@/components/ui/select"
 import {
   FormFieldShell,
   type FormFieldShellControlProps,
@@ -27,7 +27,7 @@ type FormSelectBaseProps<
 export type FormSimpleSelectProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = Omit<SimpleSelectProps, "value" | "onValueChange" | "disabled"> &
+> = Omit<SelectProps, "children" | "value" | "onValueChange" | "disabled"> &
   FormSelectBaseProps<TFieldValues, TName> & {
     kind?: "simple"
     emptyValue?: unknown
@@ -196,9 +196,9 @@ function FormSelect<
             errorId={resolvedIds.errorId}
             error={error}
           >
-            <SimpleSelect
+            <Select
               {...simpleProps}
-              value={field.value == null ? "" : String(field.value)}
+              value={field.value == null ? undefined : String(field.value)}
               disabled={disabled || readOnly}
               aria-describedby={resolvedIds.describedBy}
               aria-errormessage={error ? resolvedIds.errorId : undefined}

package/packages/cli/vendor/src/components/inputs/async-select.tsx

@@ -109,11 +109,11 @@ export type AsyncSelectMultiModeProps<
   isMulti: true
 }
 
-export type AsyncMultiSelectProps<
-  TValue extends string = string,
-  TData = unknown,
-  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
-> = Omit<React.ComponentProps<"div">, "onChange"> & {
+export type AsyncMultiSelectProps<
+  TValue extends string = string,
+  TData = unknown,
+  TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,
+> = Omit<React.ComponentProps<"div">, "onChange"> & {
   value?: TValue[]
   selectedOptions?: TOption[]
   onValueChange?: (value: TValue[], options: TOption[]) => void
@@ -148,8 +148,8 @@ export type AsyncMultiSelectProps<
   searchClassName?: string
   optionClassName?: string
   tagClassName?: string
-  invalid?: boolean
-}
+  invalid?: boolean
+}
 
 type AsyncSelectCacheEntry<
   TValue extends string,
@@ -778,7 +778,10 @@ function AsyncSelect<
   )
 }
 
-function AsyncMultiSelect<
+/**
+ * @deprecated Prefer `AsyncSelect` with `isMulti` for new usage.
+ */
+function AsyncMultiSelect<
   TValue extends string = string,
   TData = unknown,
   TOption extends AsyncSelectOption<TValue, TData> = AsyncSelectOption<TValue, TData>,

package/packages/cli/vendor/src/components/inputs/search-input.tsx

@@ -14,8 +14,11 @@ export type SearchInputProps = Omit<ClearableInputProps, "leadingIcon" | "type"
   onValueChange?: (value: string) => void
   onDebouncedValueChange?: (value: string) => void
 }
-
-const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+
+/**
+ * @deprecated Prefer `Input` with `type="search"` and search-related props for new usage.
+ */
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
   (
     {
       searchIcon,

package/packages/cli/vendor/src/components/inputs/simple-select.tsx

@@ -1,193 +1,23 @@
-import * as React from "react"
-import { CheckIcon, LoaderCircleIcon, SearchIcon, XIcon } from "lucide-react"
-
 import {
   Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+  type SelectOption,
+  type SelectProps,
 } from "@/components/ui/select"
-import { cn, stopInteractivePropagation } from "@/lib/utils"
-
-export type SimpleSelectOption = {
-  label: React.ReactNode
-  value: string
-  disabled?: boolean
-  description?: React.ReactNode
-  keywords?: string[]
-}
-
-export type SimpleSelectProps = Omit<
-  React.ComponentProps<typeof Select>,
-  "value" | "onValueChange"
-> & {
-  value?: string
-  onValueChange?: (value: string | undefined) => void
-  options: SimpleSelectOption[]
-  placeholder?: string
-  searchPlaceholder?: string
-  emptyLabel?: React.ReactNode
-  clearLabel?: string
-  size?: "sm" | "default" | "lg"
-  clearable?: boolean
-  searchable?: boolean
-  loading?: boolean
-  loadingLabel?: React.ReactNode
-  disabled?: boolean
-  showSelectedDescription?: boolean
-  triggerClassName?: string
-  contentClassName?: string
-  itemClassName?: string
-  searchClassName?: string
-  renderOption?: (option: SimpleSelectOption, state: { selected: boolean }) => React.ReactNode
-  invalid?: boolean
-}
-
-function optionMatchesSearch(option: SimpleSelectOption, search: string) {
-  const normalized = search.trim().toLowerCase()
-  if (!normalized) return true
-
-  const labelText = typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : option.value
-  const haystack = [labelText, option.value, ...(option.keywords ?? [])].join(" ").toLowerCase()
-  return haystack.includes(normalized)
-}
-
-function SimpleSelect({
-  value,
-  onValueChange,
-  options,
-  placeholder = "Select",
-  searchPlaceholder = "Search options...",
-  emptyLabel = "No options found",
-  clearLabel = "Clear selection",
-  size = "default",
-  clearable = false,
-  searchable = false,
-  loading = false,
-  loadingLabel = "Loading options...",
-  disabled = false,
-  showSelectedDescription = true,
-  triggerClassName,
-  contentClassName,
-  itemClassName,
-  searchClassName,
-  renderOption,
-  invalid,
-  onOpenChange,
-  ...props
-}: SimpleSelectProps) {
-  const [search, setSearch] = React.useState("")
-  const selectedOption = options.find((option) => option.value === value)
-  const filteredOptions = options.filter((option) => optionMatchesSearch(option, search))
-
-  return (
-    <Select
-      value={value}
-      onValueChange={(val) => onValueChange?.(val as string)}
-      disabled={disabled || loading}
-      onOpenChange={(open, eventDetails) => {
-        if (!open) setSearch("")
-        onOpenChange?.(open, eventDetails)
-      }}
-      {...props}
-    >
-      <SelectTrigger
-        size={size}
-        aria-invalid={invalid || undefined}
-        className={cn(
-          "w-full",
-          triggerClassName
-        )}
-      >
-        <SelectValue placeholder={placeholder}>
-          {selectedOption ? (
-            <span className="flex min-w-0 flex-col items-start">
-              <span className="truncate">{selectedOption.label}</span>
-              {showSelectedDescription && selectedOption.description ? (
-                <span className="truncate text-[11px] font-medium text-muted-foreground">{selectedOption.description}</span>
-              ) : null}
-            </span>
-          ) : null}
-        </SelectValue>
-        {loading ? <LoaderCircleIcon className="size-4 animate-spin text-muted-foreground" /> : null}
-        {clearable && value && !disabled && !loading ? (
-          <span
-            role="button"
-            tabIndex={0}
-            aria-label={clearLabel}
-            className="ml-1 rounded-[var(--radius-sm)] border border-border/65 p-1 text-muted-foreground transition-colors hover:border-border hover:bg-muted/55 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            onClick={(event) => {
-              event.preventDefault()
-              stopInteractivePropagation(event)
-              onValueChange?.(undefined)
-            }}
-            onMouseDown={stopInteractivePropagation}
-            onDoubleClick={stopInteractivePropagation}
-            onKeyDown={(event) => {
-              if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault()
-                onValueChange?.(undefined)
-              }
-            }}
-          >
-            <XIcon className="size-3.5" />
-          </span>
-        ) : null}
-      </SelectTrigger>
-      <SelectContent
-        className={cn(
-          "w-(--anchor-width)",
-          contentClassName
-        )}
-      >
-        {searchable ? (
-          <div data-slot="select-search" className="sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-popover px-2.5 py-2 text-sm">
-            <SearchIcon className="size-4 text-muted-foreground" />
-            <input
-              value={search}
-              onChange={(event) => setSearch(event.target.value)}
-              placeholder={searchPlaceholder}
-              className={cn("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", searchClassName)}
-            />
-          </div>
-        ) : null}
-
-        {loading ? (
-          <div data-slot="select-state" className="flex items-center gap-2 rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground">
-            <LoaderCircleIcon className="size-4 animate-spin" />
-            {loadingLabel}
-          </div>
-        ) : filteredOptions.length === 0 ? (
-          <div data-slot="select-state" className="rounded-[var(--radius-md)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_55%)] px-3 py-2.5 text-sm text-muted-foreground">{emptyLabel}</div>
-        ) : (
-          filteredOptions.map((option) => {
-            const selected = option.value === value
-            return (
-              <SelectItem
-                key={option.value}
-                value={option.value}
-                disabled={option.disabled}
-                className={cn("rounded-[var(--radius-md)]", itemClassName)}
-              >
-                {renderOption ? (
-                  renderOption(option, { selected })
-                ) : (
-                  <span className="flex min-w-0 flex-1 flex-col">
-                    <span className="flex min-w-0 items-center gap-2">
-                      <span className="truncate">{option.label}</span>
-                      {selected ? <CheckIcon className="ml-auto size-3.5 text-primary" /> : null}
-                    </span>
-                    {option.description && <span className="truncate text-xs text-muted-foreground">{option.description}</span>}
-                  </span>
-                )}
-              </SelectItem>
-            )
-          })
-        )}
-      </SelectContent>
-    </Select>
-  )
-}
-
-export { SimpleSelect }
+
+export type SimpleSelectOption = SelectOption
+
+/**
+ * @deprecated Prefer `Select` with `options` for new usage.
+ */
+export type SimpleSelectProps = Omit<SelectProps, "children"> & {
+  options: SimpleSelectOption[]
+}
+
+/**
+ * @deprecated Prefer `Select` with `options` for new usage.
+ */
+function SimpleSelect(props: SimpleSelectProps) {
+  return <Select {...props} />
+}
+
+export { SimpleSelect }

package/packages/cli/vendor/src/components/ui/card/index.tsx

@@ -65,14 +65,28 @@ type CardSurfaceSlots = {
   media?: React.ReactNode
   content?: React.ReactNode
   footer?: React.ReactNode
+  mediaClassName?: string
+  bodyClassName?: string
   headerClassName?: string
+  eyebrowClassName?: string
   titleClassName?: string
   descriptionClassName?: string
   contentClassName?: string
   footerClassName?: string
 }
 
-export type CardProps = Omit<React.ComponentProps<"div">, keyof CardSurfaceSlots> & VariantProps<typeof cardVariants> & CardSurfaceSlots
+export type CardOrientation = "vertical" | "horizontal"
+export type CardMediaAspect = "auto" | "square" | "video" | "poster" | "wide"
+export type CardPadding = "none" | "sm" | "default" | "lg"
+
+export type CardProps = Omit<React.ComponentProps<"div">, keyof CardSurfaceSlots> &
+  VariantProps<typeof cardVariants> &
+  CardSurfaceSlots & {
+    orientation?: CardOrientation
+    mediaPosition?: "start" | "end"
+    mediaAspect?: CardMediaAspect
+    padding?: CardPadding
+  }
 
 function hasSurfaceContent(props: CardSurfaceSlots) {
   return (
@@ -96,6 +110,10 @@ function Card({
   interactive,
   selected,
   disabled,
+  orientation = "vertical",
+  mediaPosition = "start",
+  mediaAspect = "auto",
+  padding = "default",
   tabIndex,
   eyebrow,
   title,
@@ -105,7 +123,10 @@ function Card({
   media,
   content,
   footer,
+  mediaClassName,
+  bodyClassName,
   headerClassName,
+  eyebrowClassName,
   titleClassName,
   descriptionClassName,
   contentClassName,
@@ -126,6 +147,36 @@ function Card({
   const resolvedContent = content ?? children
   const hasHeader = eyebrow != null || title != null || description != null || badge != null || action != null
   const hasFooter = footer != null
+  const mediaNode = media ? (
+    <div
+      data-slot="card-media"
+      data-media-position={mediaPosition}
+      data-media-aspect={mediaAspect}
+      className={cn(
+        "overflow-hidden",
+        orientation === "horizontal" ? "shrink-0 self-stretch" : "",
+        mediaAspect === "square" && (orientation === "horizontal" ? "w-40" : "aspect-square"),
+        mediaAspect === "video" && (orientation === "horizontal" ? "w-56" : "aspect-video"),
+        mediaAspect === "poster" && (orientation === "horizontal" ? "w-36" : "aspect-[3/4]"),
+        mediaAspect === "wide" && (orientation === "horizontal" ? "w-72" : "aspect-[16/7]"),
+        mediaClassName
+      )}
+    >
+      {media}
+    </div>
+  ) : null
+  const surfacePaddingClassName = {
+    none: "",
+    sm: "px-4",
+    default: "px-(--card-spacing)",
+    lg: "px-6",
+  } satisfies Record<CardPadding, string>
+  const bodyPaddingClassName = {
+    none: "",
+    sm: "pb-4",
+    default: "",
+    lg: "pb-6",
+  } satisfies Record<CardPadding, string>
 
   return (
     <div
@@ -139,37 +190,56 @@ function Card({
       data-selected={selected || undefined}
       data-disabled={disabled || undefined}
       data-has-footer={hasFooter || undefined}
+      data-orientation={orientation}
+      data-padding={padding}
       aria-disabled={disabled || undefined}
       tabIndex={interactive && !disabled ? tabIndex ?? 0 : tabIndex}
-      className={cn(cardVariants({ variant, size, density, tone, interactive, selected, disabled }), className)}
+      className={cn(
+        cardVariants({ variant, size, density, tone, interactive, selected, disabled }),
+        orientation === "horizontal" && "flex-row py-0",
+        interactive && "hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:shadow-[var(--aui-card-shadow-hover,var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08)))]",
+        selected && "border-[color:var(--aui-control-border-strong,var(--ring))] shadow-[var(--aui-card-shadow-hover,var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08)))]",
+        className
+      )}
       {...props}
     >
       {surfaceMode ? (
         <>
-          {media}
-          {hasHeader ? (
-            <CardHeader className={headerClassName}>
-              <div className="min-w-0 space-y-1">
-                {eyebrow != null ? (
-                  <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/80">
-                    {eyebrow}
-                  </div>
-                ) : null}
-                {title != null ? <CardTitle className={titleClassName}>{title}</CardTitle> : null}
-                {description != null ? (
-                  <CardDescription className={descriptionClassName}>{description}</CardDescription>
+          {mediaPosition === "start" ? mediaNode : null}
+          <div
+            data-slot="card-body"
+            className={cn(
+              "flex min-w-0 flex-1 flex-col",
+              orientation === "horizontal" ? "py-(--card-spacing)" : "",
+              bodyPaddingClassName[padding],
+              bodyClassName
+            )}
+          >
+            {hasHeader ? (
+              <CardHeader className={cn(surfacePaddingClassName[padding], headerClassName)}>
+                <div className="min-w-0 space-y-1">
+                  {eyebrow != null ? (
+                    <div className={cn("text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/80", eyebrowClassName)}>
+                      {eyebrow}
+                    </div>
+                  ) : null}
+                  {title != null ? <CardTitle className={titleClassName}>{title}</CardTitle> : null}
+                  {description != null ? (
+                    <CardDescription className={descriptionClassName}>{description}</CardDescription>
+                  ) : null}
+                </div>
+                {badge != null || action != null ? (
+                  <CardAction className="flex items-center gap-2">
+                    {badge}
+                    {action}
+                  </CardAction>
                 ) : null}
-              </div>
-              {badge != null || action != null ? (
-                <CardAction className="flex items-center gap-2">
-                  {badge}
-                  {action}
-                </CardAction>
-              ) : null}
-            </CardHeader>
-          ) : null}
-          {resolvedContent != null ? <CardContent className={contentClassName}>{resolvedContent}</CardContent> : null}
-          {hasFooter ? <CardFooter className={footerClassName}>{footer}</CardFooter> : null}
+              </CardHeader>
+            ) : null}
+            {resolvedContent != null ? <CardContent className={cn(surfacePaddingClassName[padding], contentClassName)}>{resolvedContent}</CardContent> : null}
+            {hasFooter ? <CardFooter className={cn(surfacePaddingClassName[padding], footerClassName)}>{footer}</CardFooter> : null}
+          </div>
+          {mediaPosition === "end" ? mediaNode : null}
         </>
       ) : (
         children