File size picker

A lighter, API-free alternative built entirely from Squad UI primitives (Badge, Button, Input, Select, FeaturedIcon). Instead of the account-scoped fetch + filter chips, v2 takes its catalog as props and lays it out in stacked sections — Kits · Recommended · Defaults · Custom — with a live removable-chip "Selected" footer and an inline custom-dimension form. Pass `recommended` / `defaults` / `kits`, and `value` + `onChange` to control selection.

Installation

$Terminal

npx shadcn add https://raw.githubusercontent.com/sis-thesqd/squad-sdk/main/public/r/file-size-picker-v2-block.json

Usage

Drop in the demo component or wire up the picker with your own state.

TSImport

import { FileSizePickerV2, type FileSizeV2, type FileSizeKitV2 } from "@/components/blocks/file-size-picker-v2-block";

TSExample

"use client";

import * as React from "react";
import {
  FileSizePickerV2,
  type FileSizeV2,
  type FileSizeKitV2,
} from "@/components/blocks/file-size-picker-v2-block";

// v2 is fully self-contained — no account, no API. You pass the catalog in as
// props (recommended / defaults / kits) and it manages selection locally, or
// pass value + onChange to control it.
// Sizes split into Print / Digital sections by `printDigital`, each color-coded.
// Print rows carry `bleedSize` (→ magenta bleed badge) or, when print with no
// bleed, a pink "No bleed" badge. `lastUsed` floats an amber "Last used" badge.
const SIZES: FileSizeV2[] = [
  { name: "Tri-Fold", w: 11, h: 17, unit: "in", printDigital: "print", bleedSize: 0.125, foldType: "tri-fold", lastUsed: true },
  { name: "Tri-Fold", w: 11, h: 17, unit: "in", printDigital: "print", bleedSize: 0.25, foldType: "tri-fold" },
  { name: "Poster", w: 24, h: 36, unit: "in", printDigital: "print", bleedSize: 0.125 },
  { name: "Postcard", w: 6, h: 4, unit: "in", printDigital: "print", bleedSize: 0.125 },
  { name: "Yard Sign", w: 24, h: 18, unit: "in", printDigital: "print" },
  { name: "Instagram Post", w: 1080, h: 1080, unit: "px", printDigital: "digital", lastUsed: true },
  { name: "Story", w: 1080, h: 1920, unit: "px", printDigital: "digital" },
  { name: "Presentation Slide", w: 1920, h: 1080, unit: "px", printDigital: "digital" },
  { name: "Web Banner", w: 1600, h: 600, unit: "px", printDigital: "digital" },
];

const KITS: FileSizeKitV2[] = [
  {
    name: "Sermon Series",
    desc: "Everything for a multi-week series",
    sizes: [
      { name: "Title Slide", w: 1920, h: 1080, unit: "px", printDigital: "digital", lastUsed: true },
      { name: "Background Only", w: 1920, h: 1080, unit: "px", printDigital: "digital" },
      { name: "Social Square", w: 1080, h: 1080, unit: "px", printDigital: "digital" },
      { name: "Web Banner", w: 1440, h: 810, unit: "px", printDigital: "digital" },
    ],
  },
];

export function Example() {
  const [selected, setSelected] = React.useState<FileSizeV2[]>([]);
  return (
    <FileSizePickerV2
      required
      sizes={SIZES}
      kits={KITS}
      custom={[{ name: "Lobby Screen", w: 1920, h: 1080, unit: "px" }]}
      value={selected}
      onChange={setSelected}
    />
  );
}