shadcn.io is not affiliated with official shadcn/ui
Data Export Settings Block for Ark UI
A data export panel built around a tree of what an account holds, where ticking a part adds what it depends on and says so, with a format control, the size, time and file count it adds up to, and a request list that queues one archive at a time.
Installation
Overview
Let people choose what leaves with them, and know what it costs before they ask, with this data export panel for React with Ark UI. Inside a hairline frame with a plus mark on each corner, a tree lists what the account holds: the recipes with their method, ingredients, cook notes and photos under one box that turns mixed while only some are ticked, then meal plans, shopping lists and the pantry, each row a Checkbox with its size and what it needs. Ticking Meal plans ticks Method and timings, because a plan can't be read without its recipes, and a line says so ("Meal plans depend on Method and timings: added"); unticking Method and timings unticks everything that needs it, and says that too. Under the tree a Segment Group picks JSON, CSV or NDJSON, and a Data List shows the size, how long it takes and how many files that format makes of this choice. A last line works out what the photos cost. The Shine Button queues a request in a list of the three most recent: one archive at a time, a waiting one can be cancelled, and a second request is refused with the reason. It's built from Checkbox, Segment Group, Data List, Button, Shine Button and Guides, with a CSS entrance only. For any product that stores a person's own work and owes them a copy.
FAQ
How do I fill it with my own data?
Edit the constants at the top. RECIPES is the section with several parts and SINGLES the parts that stand alone; each part has an id, a label, a one-line hint, its size in mb and the ids it needs. SPEED is how many megabytes an archive is built a minute, which drives the time, and FIRST is the list of past requests. Sizes should come from your own counts: the totals, the time and the photo line are all computed from them.
How do the dependencies work?
Each part lists the parts it can't be read without. Ticking one adds whatever is missing and the status line names it; unticking one removes every ticked part that needs it and names those too. The section box is ticked when all its parts are, mixed when some are, and pressing it ticks or unticks the lot, with the same rules. Because the rules live in one function, adding a part is a new entry in the data and nothing else.
What happens when I request an archive, and what stays local?
A row is added to the list with today's date, the format, the file count and the size, and its status is Processing. Nothing is prepared, sent or downloaded: no file exists, and the row stays Processing in this demo. To make it real, send the chosen part ids and the format to your server in the submit handler, and update the list from your own queue. The export dialog that hands over a real file is a separate block.
Why can only one request wait at a time?
Because building an archive is the expensive part, so a second request while one is waiting is refused: the status line says to cancel the waiting one first, and focus moves to its cancel button. Cancelling turns the row to Cancelled, says so, and puts focus back on the request button. Choosing nothing is refused too, with focus on the first box. The button stays visible and focusable in both cases and is marked aria-disabled rather than disabled.
What do the formats change?
The size stays the same, but the number of files doesn't: JSON and NDJSON make one file per section, CSV one flat file per part, so a seven-part choice is four JSON files or seven CSV files. The line under the control says what each format is for. The figures update as you tick parts or switch format, and the list's rows keep a fixed height, so requesting never moves the page.