@alexgorbatchev/shadcn 0.0.41 → 0.0.42

package/dist/components/DataViewer.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentProps, type ReactElement } from "react";
+import type { IDensityProps } from "../density/types.js";
+type DataViewerProps = Omit<ComponentProps<"section">, "children"> & IDensityProps & {
+    /** JSON-compatible data to present. */
+    value: unknown;
+    /** Accessible name of the view. */
+    label?: string;
+    /** Turns a property key into its visible label. Defaults to `formatDataLabel`. */
+    formatLabel?: (key: string) => string;
+};
+/** Turns keys such as `track_id`, `playlistIds`, or `original-path` into "Track ID", "Playlist IDs", or "Original path". */
+declare function formatDataLabel(key: string): string;
+/** Presents JSON-compatible data as labelled, nested lists that people can read without knowing JSON. */
+declare function DataViewer({ value, label, formatLabel, density, className, ...props }: DataViewerProps): ReactElement;
+export { DataViewer, formatDataLabel };
+export type { DataViewerProps };

package/dist/components/json-render/index.js

@@ -27,7 +27,7 @@ import {
   DrawerHeader2,
   DrawerTitle2,
   DrawerDescription2
-} from "../../chunk-v0va5w5c.js";
+} from "../../chunk-4stkzcvt.js";
 import"../../chunk-e6hk39ev.js";
 import"../../chunk-j89xg1ak.js";
 import"../../chunk-aa7m22zj.js";

package/dist/index.d.ts

@@ -29,6 +29,8 @@ export { useDropTarget } from "./hooks/useDropTarget.js";
 export type { IDragDropItem, IDragSourceOptions, IDragSource, IDropTargetOptions, IDropTarget, } from "./drag-drop/types.js";
 export { EmptyState } from "./components/EmptyState.js";
 export { PageMessage } from "./components/PageMessage.js";
+export { DataViewer, formatDataLabel } from "./components/DataViewer.js";
+export type { DataViewerProps } from "./components/DataViewer.js";
 export { JsonViewer } from "./components/JsonViewer.js";
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, } from "./components/AlertDialog.js";
 export { Checkbox } from "./components/Checkbox.js";

package/dist/index.js

@@ -6,6 +6,8 @@ import {
   AccordionContent2,
   EmptyState3,
   PageMessage2,
+  formatDataLabel2,
+  DataViewer2,
   JsonViewer2,
   AlertDialog2,
   AlertDialogTrigger2,
@@ -176,7 +178,7 @@ import {
   StatusTracker2,
   DashboardLayout2,
   BillingUsage2
-} from "./chunk-v0va5w5c.js";
+} from "./chunk-4stkzcvt.js";
 import {
   Tabs2,
   tabsListVariants2,
@@ -558,6 +560,7 @@ export {
   ContextMenuSubTrigger2 as ContextMenuSubTrigger,
   ContextMenuTrigger2 as ContextMenuTrigger,
   DashboardLayout2 as DashboardLayout,
+  DataViewer2 as DataViewer,
   DensityProvider2 as DensityProvider,
   Dialog2 as Dialog,
   DialogClose2 as DialogClose,
@@ -822,6 +825,7 @@ export {
   cn2 as cn,
   collectLayoutViolations2 as collectLayoutViolations,
   createToastManager2 as createToastManager,
+  formatDataLabel2 as formatDataLabel,
   markerVariants2 as markerVariants,
   navigationMenuTriggerStyle2 as navigationMenuTriggerStyle,
   tabsListVariants2 as tabsListVariants,

package/dist/prototype.js

@@ -2051,7 +2051,7 @@ var program = new Command;
 // package.json
 var package_default = {
   name: "@alexgorbatchev/shadcn",
-  version: "0.0.41",
+  version: "0.0.42",
   description: "Sharp, monospace React components with compact and comfortable densities.",
   license: "MIT",
   repository: {

package/llms/components/data-display/DataViewer.md

@@ -0,0 +1,90 @@
+# DataViewer
+
+Story: @alexgorbatchev/shadcn/components/data-display/DataViewer
+Source: src/components/stories/data-display/DataViewer.stories.tsx
+
+[Full source and local helpers](https://github.com/alexgorbatchev/shadcn/blob/main/src/components/stories/data-display/DataViewer.stories.tsx)
+
+## Public imports
+
+```tsx
+import { DataViewer, formatDataLabel } from "@alexgorbatchev/shadcn";
+```
+
+## Default component
+
+```tsx
+DataViewer
+```
+
+## Default args
+
+```tsx
+{ label: "Result" }
+```
+
+## Examples
+
+Storybook CSF excerpts. Default args and render apply unless overridden. Local helpers, fixtures, decorators, and providers may be required; these are reference excerpts, not standalone consumer modules. Interaction tests are omitted.
+
+### TrackResult
+
+```tsx
+{
+    args: {
+        value: {
+            track_id: 42,
+            playlistIds: [3, 12],
+            original_path: "/Music/First light.flac",
+            timing_cleared: false,
+            reanalysis_required: true,
+            album: null,
+            comment: "",
+        },
+    }
+}
+```
+
+### NestedRecords
+
+```tsx
+{
+    args: {
+        value: {
+            imported: [
+                { id: "staged-1", track_id: 7 },
+                { id: "staged-2", track_id: 8 },
+            ],
+            failed: [],
+            source: { percent: 50, metadata: {} },
+        },
+    }
+}
+```
+
+### PlainValue
+
+```tsx
+{
+    args: { value: "Finished", label: "Status" }
+}
+```
+
+### Empty
+
+```tsx
+{
+    args: { value: undefined }
+}
+```
+
+### CustomLabels
+
+```tsx
+{
+    args: {
+        value: { bpm: 128, source_url: "https://example.com/track" },
+        formatLabel: (key) => (key === "bpm" ? "Tempo (BPM)" : formatDataLabel(key)),
+    }
+}
+```

package/llms/setup.md

@@ -398,7 +398,7 @@ The preview shows compact individual badges, up to five labels followed by `+N m
 
 `useDropTarget().feedback` retains the last accepted MIME type, Alt modifier, and drop effect after leaving or dropping. Use this snapshot for hint content that remains visible during an exit animation; use `isOver` to control visibility and active highlighting. New accepted drag events update feedback immediately, including modifier changes. The live `type`, `isAlt`, and `effect` fields still describe the current hover.
 
-`EmptyState` composes a title, description, and optional child actions. `JsonViewer` displays a read-only formatted JSON value with configurable `label` and `rows`.
+`EmptyState` composes a title, description, and optional child actions. `DataViewer` presents JSON-compatible data for people: records become labelled terms, lists of plain values read on one line, lists of records are numbered, booleans read Yes or No, and missing or empty values read None or Empty. Keys become sentence-case labels with common acronyms (`track_id` reads "Track ID"); pass `formatLabel` to name domain keys, falling back to the exported `formatDataLabel`. `JsonViewer` displays a read-only formatted JSON value with configurable `label` and `rows` for people who need the JSON text itself.
 
 # Devhost Preview
 

package/llms.txt

@@ -336,6 +336,7 @@ Generated from the public package exports and Storybook sources.
 - [DataGridColumnOptions](./llms/components/data-display/DataGridColumnOptions.md)
 - [DataGridFilterSummary](./llms/components/data-display/DataGridFilterSummary.md)
 - [DataGridFilters](./llms/components/data-display/DataGridFilters.md)
+- [DataViewer](./llms/components/data-display/DataViewer.md)
 - [Item](./llms/components/data-display/Item.md)
 - [JsonRender](./llms/components/data-display/JsonRender.md)
 - [JsonViewer](./llms/components/data-display/JsonViewer.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexgorbatchev/shadcn",
-  "version": "0.0.41",
+  "version": "0.0.42",
   "description": "Sharp, monospace React components with compact and comfortable densities.",
   "license": "MIT",
   "repository": {