@themodcraft/pro-kit

Advanced UI kit for larger application surfaces.

Includes:

• Navbar system
• Container and overlay components
• Slider and soon-state components
• SmartForm / CForm-compatible composed form components
• SmartFormBuilder for JSON-driven forms, generated validation, and admin/settings workflows
• DataTable, Breadcrumbs, OtpField, and CodeField workflow components
• TabGroup / Tab workflow panels
• AppIcon, AppCard, and AppCardGrid application surfaces
• EmptyState and settings workspace surfaces
• Transport-neutral FileDropzone and UploadQueue components
• Profile image helpers and app-router-friendly React components

Install:

npm install @themodcraft/pro-kit

This package publishes compiled output only.

Application cards and settings surfaces

AppCard keeps its primary link or button keyboard accessible while leaving action as a separate control. AppIcon uses the supplied image and falls back to initials.

import {
  AppCard,
  AppCardGrid,
  EmptyState,
  SettingsCard,
  SettingsPageHeader,
} from "@themodcraft/pro-kit";

export function ProductList() {
  return (
    <>
      <SettingsPageHeader title="Products" subtitle="Manage catalog products and releases." />
      <SettingsCard title="Catalog">
        <AppCardGrid>
          <AppCard
            description="Creative media workspace"
            href="/store/tmc-oxide"
            iconAlt="TMC Oxide app icon"
            iconSrc="/assets/tmc-oxide.png"
            meta="macOS"
            name="TMC Oxide"
            status="success"
            statusLabel="Published"
          />
        </AppCardGrid>
      </SettingsCard>
    </>
  );
}

EmptyState, SettingsPageHeader, SettingsCard, SettingsRow, and DetailTile accept inline React content and actions. They do not import routing, catalog, account, or API models.

File selection and upload presentation

FileDropzone performs client-side type and size checks. It reports accepted files and structured rejections, but it does not upload or hash them. The named native file input remains available to forms when browser selection is used.

"use client";

import { useState } from "react";
import {
  FileDropzone,
  UploadQueue,
  UploadQueueItem,
  type FileDropzoneRejection,
} from "@themodcraft/pro-kit";

export function ArtifactUpload() {
  const [file, setFile] = useState<File>();
  const [error, setError] = useState<string>();
  const [progress, setProgress] = useState(0);

  function reject(rejections: FileDropzoneRejection[]) {
    setError(rejections.flatMap((item) => item.reasons.map((reason) => reason.message)).join(" "));
  }

  return (
    <>
      <FileDropzone
        accept={[".dmg", ".pkg", "application/zip"]}
        description="Choose a signed release artifact up to 4 GiB."
        error={error}
        label="Release artifact"
        maxSize={4 * 1024 ** 3}
        name="artifact"
        onFilesRejected={reject}
        onFilesSelected={([selected]) => {
          setError(undefined);
          setFile(selected);
        }}
      />

      {file ? (
        <UploadQueue label="Release uploads">
          <UploadQueueItem
            fileName={file.name}
            fileSize={file.size}
            onCancel={() => setFile(undefined)}
            onPause={() => undefined}
            progress={progress}
            status="uploading"
          />
        </UploadQueue>
      ) : null}
    </>
  );
}

Queue items receive status, progress, and action callbacks from the application. Supported states are queued, uploading, paused, verifying, ready, quarantined, failed, retired, and cancelled. Presigned URLs, multipart orchestration, retries, checksums, API calls, authorization, and persisted upload state remain application concerns.