@vibe-labs/design-components-uploads

Upload component tokens, styles, and TypeScript types for the Vibe Design System. Covers drop zones, file lists, per-file items with status tracking, and a top-bar upload indicator.

Usage

@import "@vibe-labs/design-components-uploads";

import { UploadItemStatuses } from "@vibe-labs/design-components-uploads/types";
import type { UploadZoneStyleProps, UploadItemStyleProps, UploadIndicatorStyleProps } from "@vibe-labs/design-components-uploads/types";

Contents

Tokens (upload.css)

CSS custom properties defined in @layer vibe.tokens:

Drop Zone

Token	Default	Description
--upload-zone-border-width	2px	Border width
--upload-zone-border-style	dashed	Border style
--upload-zone-border-color	--border-default	Default border
--upload-zone-border-color-active	--color-accent	Dragover/hover border
--upload-zone-radius	--radius-lg	Border radius
--upload-zone-bg	transparent	Background
--upload-zone-bg-active	--overlay-tint	Dragover background
--upload-zone-padding	--space-8	Inner padding
--upload-zone-min-height	10rem	Minimum height
--upload-zone-color	--text-muted	Icon/label color
--upload-zone-icon-size	2.5rem	Icon dimensions

File List

Token	Default
--upload-list-gap	--space-2
--upload-list-max-height	24rem

File Item

Token	Default
--upload-item-bg	--surface-elevated
--upload-item-border-color	--border-subtle
--upload-item-border-width	--border-width-1
--upload-item-radius	--radius-md
--upload-item-padding	--space-3
--upload-item-gap	--space-3
--upload-thumb-size	2.5rem
--upload-thumb-radius	--radius-sm

Status Colors

Token	Default	Status
--upload-status-queued	--text-disabled	Waiting in queue
--upload-status-pending	--text-muted	Ready to start
--upload-status-uploading	--color-accent	In progress
--upload-status-complete	--color-success	Done
--upload-status-error	--color-danger	Failed

Top-Bar Indicator

Token	Default
--upload-indicator-size	2rem
--upload-indicator-bg	--surface-elevated
--upload-indicator-border-color	--border-subtle
--upload-indicator-radius	--radius-full
--upload-indicator-shadow	--shadow-sm

Generated Styles (upload.g.css)

Component classes generated into @layer vibe.components.

Drop Zone

• upload-zone — dashed border flex container with hidden file input overlay
• dragover modifier — accent border + tinted background
• compact modifier — inline row layout with reduced padding
• Slots: upload-zone-icon, upload-zone-label, upload-zone-browse (accent underlined link), upload-zone-hint (muted subtext)
• Focus-within ring, disabled state

File List

• upload-list — scrollable flex column (24rem max height)
• unbounded modifier — removes max height

File Item

• upload-item — flex row with thumbnail, content, and trailing actions
• upload-item-thumb — square image/icon preview slot
• upload-item-content — flex column with name and meta
• upload-item-name — truncated semibold filename
• upload-item-meta — muted size/type info
• upload-item-trail — trailing action slot
• upload-item-remove — danger-hover remove button
• upload-item-status — status icon colored by scoped --_upload-status-color
• upload-item-progress — 2px bottom bar with fill driven by --progress-value

Status States

Status variant on upload-item sets --_upload-status-color used by both the status icon and progress fill. Error status also changes the item border.

Top-Bar Indicator

• upload-indicator — pill-shaped clickable status widget
• upload-indicator-spinner — inline border spinner
• upload-indicator-progress — conic-gradient circular progress with ::after donut punch-out
• complete / error modifiers — success/danger colored border and text

TypeScript Types (types/)

UploadItemStatuses // ["queued", "pending", "uploading", "complete", "error"]
type UploadItemStatus

interface UploadZoneStyleProps { dragover?: boolean; compact?: boolean; disabled?: boolean }
interface UploadZoneIconStyleProps {}
interface UploadZoneLabelStyleProps {}
interface UploadZoneBrowseStyleProps {}
interface UploadZoneHintStyleProps {}

interface UploadListStyleProps { unbounded?: boolean }

interface UploadItemStyleProps { status?: UploadItemStatus }
interface UploadItemThumbStyleProps {}
interface UploadItemContentStyleProps {}
interface UploadItemNameStyleProps {}
interface UploadItemMetaStyleProps {}
interface UploadItemTrailStyleProps {}
interface UploadItemRemoveStyleProps {}
interface UploadItemStatusIconStyleProps {}
interface UploadItemProgressStyleProps {}
interface UploadItemProgressFillStyleProps {}

interface UploadIndicatorStyleProps { complete?: boolean; error?: boolean }
interface UploadIndicatorSpinnerStyleProps {}
interface UploadIndicatorProgressStyleProps {}

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
upload.css	Token definitions
upload.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires tokens from @vibe-labs/design (colors, surfaces, borders, spacing, typography, transitions, elevation, overlays). Uses spinner tokens from @vibe-labs/design-components-spinners for indicator spinner.

Build

npm run build