FileUpload

Source: client/lib/theme/vueda-tailwind/controls/index.js

The outer container. In inline-trigger mode this is a tight flex column wrapping the picker button plus optional helper text; in dropzone mode it grows into a dashed-border target (2px input-coloured dashes, 6 spacing pad, large radius) that highlights with a primary-tinted fill when dragging. The disabled state dims the whole region and switches the cursor; the inner trigger still picks up its own disabled treatment from _ButtonBase.root.

Vue component: FileUpload

Slot	Default classes	Description
root	callback	The outer container. In inline-trigger mode this is a tight flex column wrapping the picker button plus optional helper text; in dropzone mode it grows into a dashed-border target (2px input-coloured dashes, 6 spacing pad, large radius) that highlights with a primary-tinted fill when dragging. The disabled state dims the whole region and switches the cursor; the inner trigger still picks up its own disabled treatment from _ButtonBase.root.
trigger	h-vueda-control px-vueda-control-px has-[>svg]:px-vueda-control-px-sm	The "choose file" affordance. Composes _ButtonBase.root plus _ButtonOutline.root so the trigger reads as the same neutral chip as an outline-variant Button.root, at the default control height with the icon-aware narrower padding kicking in when the trigger carries an icon.
dropMessage	text-sm text-muted-foreground	The "or drop here" helper line below the trigger. Muted secondary text at the sm tier so it sits as ancillary copy and never competes with the trigger label or a selected-file readout.

root

The outer container. In inline-trigger mode this is a tight flex column wrapping the picker button plus optional helper text; in dropzone mode it grows into a dashed-border target (2px input-coloured dashes, 6 spacing pad, large radius) that highlights with a primary-tinted fill when dragging. The disabled state dims the whole region and switches the cursor; the inner trigger still picks up its own disabled treatment from _ButtonBase.root.

Callback:

({ dropzone, dragging, disabled }) => ({
            class: [
                // Base layout.
                "inline-flex flex-col items-center gap-1",

                // Dropzone and disabled states. The dragging branch swaps the border to
                // primary; gate the at-rest border on !dragging so only one border-color
                // is ever live (the two are mutually exclusive, not order-dependent).
                {
                    "rounded-lg border-2 border-dashed p-6 transition-colors": dropzone,
                    "border-input": dropzone && !dragging,
                    "border-primary bg-primary/5": dropzone && dragging,
                    "opacity-50 cursor-not-allowed": disabled,
                },
            ],
        })

Source: client/lib/theme/vueda-tailwind/controls/FileUpload.theme.js:19

trigger

The "choose file" affordance. Composes _ButtonBase.root plus _ButtonOutline.root so the trigger reads as the same neutral chip as an outline-variant Button.root, at the default control height with the icon-aware narrower padding kicking in when the trigger carries an icon.

Default classes:

h-vueda-control px-vueda-control-px has-[>svg]:px-vueda-control-px-sm

Composes: _ButtonBase.root _ButtonOutline.root

Source: client/lib/theme/vueda-tailwind/controls/FileUpload.theme.js:36

dropMessage

The "or drop here" helper line below the trigger. Muted secondary text at the sm tier so it sits as ancillary copy and never competes with the trigger label or a selected-file readout.

Default classes:

text-sm text-muted-foreground

Source: client/lib/theme/vueda-tailwind/controls/FileUpload.theme.js:44