51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T223b,"use client"; import { useState } from "react"; import { Hash, Palette, Scissors, MousePointerClick, ChevronDown } from "lucide-react"; import JsonViewer from "../blocks/json-viewer"; import { cn } from "@/lib/utils"; import { Button } from "@/registry/8starlabs-ui/blocks/button"; import { Input } from "@/registry/8starlabs-ui/ui/input"; import { Label } from "@/registry/8starlabs-ui/ui/label"; import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem } from "@/registry/8starlabs-ui/ui/dropdown-menu"; const JsonViewerFeaturesDemo = () => { const [showLineNumbers, setShowLineNumbers] = useState(true); const [showColorIndent, setShowColorIndent] = useState(false); const [collapseOnDoubleClick, setCollapseOnDoubleClick] = useState(false); const [enableTruncation, setEnableTruncation] = useState(true); const [truncationLimit, setTruncationLimit] = useState(3); const [defaultExpanded, setDefaultExpanded] = useState( false ); const jsonData = { id: "0001", type: "donut", name: "Cake", ppu: 0.55, website: "https://example.com/donuts/cake", primaryColor: "#FF5733", secondaryColor: "rgb(255, 255, 255)", createdAt: 1709251200000, updatedAt: "2026-03-06T12:00:00.000Z", isActive: true, isGlutenFree: false, discontinued: null, description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lobortis tellus eu justo hendrerit, a viverra turpis aliquam. Morbi sollicitudin accumsan lectus, eget sollicitudin magna tempus et. Cras fringilla risus sed libero consequat faucibus. Nulla facilisi. Quisque pretium, lorem id dignissim iaculis, est sem aliquet risus, sed suscipit elit sem sit amet dui. Vivamus tempor orci nec imperdiet molestie. Integer elit ex, elementum sed libero vitae, varius porta nisi. Pellentesque eget nibh justo. Morbi nec cursus metus, et faucibus nunc. Quisque vehicula sollicitudin ipsum, laoreet aliquam libero lobortis nec. Nulla facilisi.", batters: { batter: [ { id: "1001", type: "Regular" }, { id: "1002", type: "Chocolate" }, { id: "1003", type: "Blueberry" }, { id: "1004", type: "Devil's Food" } ] }, topping: [ { id: "5001", type: "None" }, { id: "5002", type: "Glazed" }, { id: "5005", type: "Sugar" }, { id: "5007", type: "Powdered Sugar" }, { id: "5006", type: "Chocolate with Sprinkles" }, { id: "5003", type: "Chocolate" }, { id: "5004", type: "Maple" } ] }; return (

{/* Feature Dashboard */}

Initial Expansion: } > {defaultExpanded === true ? "Expand All" : defaultExpanded === false ? "Collapsed" : `Depth ${defaultExpanded}`} { if (value === "true") setDefaultExpanded(true); else if (value === "false") setDefaultExpanded(false); else setDefaultExpanded(Number(value)); }} > Collapsed Expand All Depth 1 Depth 2 Depth 3

{enableTruncation && (

Limit: setTruncationLimit(Number(e.target.value))} className="w-16 h-8 text-xs px-2" />

)}

); }; export default JsonViewerFeaturesDemo; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@8starlabs-ui","registryDependencies":["https://ui.8starlabs.com/r/button.json","https://ui.8starlabs.com/r/input.json","https://ui.8starlabs.com/r/label.json","https://ui.8starlabs.com/r/dropdown-menu.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/8starlabs-ui/examples/json-viewer-features-demo.tsx","content":"$53","type":"registry:example","target":"components/8starlabs-ui/examples/json-viewer-features-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]