compote-ui 0.48.1 → 0.49.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/json-tree-view/json-tree-view.svelte +154 -0
  2. package/dist/components/json-tree-view/json-tree-view.svelte.d.ts +12 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +1 -0
  5. package/package.json +1 -1
package/dist/components/json-tree-view/json-tree-view.svelte ADDED
@@ -0,0 +1,154 @@
1
+ <script lang="ts">
2
+ import { JsonTreeView } from '@ark-ui/svelte/json-tree-view';
3
+ import type {
4
+ JsonTreeViewRootBaseProps,
5
+ JsonTreeViewTreeBaseProps
6
+ } from '@ark-ui/svelte/json-tree-view';
7
+ import type { ClassValue } from 'svelte/elements';
8
+ import { cn } from 'tailwind-variants';
9
+ import { PhCaretRight } from '../../icons';
10
+
11
+ interface Props extends JsonTreeViewRootBaseProps {
12
+ class?: ClassValue;
13
+ treeClass?: ClassValue;
14
+ indentGuide?: JsonTreeViewTreeBaseProps['indentGuide'];
15
+ renderValue?: JsonTreeViewTreeBaseProps['renderValue'];
16
+ }
17
+
18
+ let {
19
+ class: className,
20
+ treeClass,
21
+ defaultExpandedDepth = 1,
22
+ indentGuide = true,
23
+ renderValue,
24
+ data,
25
+ ...rootProps
26
+ }: Props = $props();
27
+
28
+ const snapshotData = $derived($state.snapshot(data));
29
+ </script>
30
+
31
+ <JsonTreeView.Root
32
+ data={snapshotData}
33
+ {defaultExpandedDepth}
34
+ class={cn(
35
+ 'w-full overflow-auto font-mono text-xs text-ink',
36
+ '**:data-[part=branch-content]:relative',
37
+ '**:data-[part=branch-control]:flex **:data-[part=branch-control]:min-w-0 **:data-[part=branch-control]:cursor-pointer **:data-[part=branch-control]:items-baseline **:data-[part=branch-control]:rounded-sm **:data-[part=branch-control]:py-0.5 **:data-[part=branch-control]:pe-2 **:data-[part=branch-control]:outline-none **:data-[part=branch-control]:select-none',
38
+ '[&_[data-part=branch-control]:focus-visible]:ring-2 [&_[data-part=branch-control]:focus-visible]:ring-ring [&_[data-part=branch-control]:focus-visible]:ring-offset-1 [&_[data-part=branch-control]:focus-visible]:ring-offset-surface-1 [&_[data-part=branch-control]:hover]:bg-surface-2 [&_[data-part=branch-control][data-highlighted]]:bg-surface-2 [&_[data-part=branch-control][data-selected]]:bg-surface-2',
39
+ '**:data-[part=branch-indicator]:me-1 **:data-[part=branch-indicator]:inline-flex **:data-[part=branch-indicator]:size-3 **:data-[part=branch-indicator]:shrink-0 **:data-[part=branch-indicator]:origin-center **:data-[part=branch-indicator]:items-center **:data-[part=branch-indicator]:justify-center **:data-[part=branch-indicator]:text-ink-dim **:data-[part=branch-indicator]:transition-transform **:data-[part=branch-indicator]:duration-150',
40
+ '[&_[data-part=branch-indicator][data-state=open]]:rotate-90',
41
+ '**:data-[part=item]:relative **:data-[part=item]:flex **:data-[part=item]:min-w-0 **:data-[part=item]:rounded-sm **:data-[part=item]:py-0.5 **:data-[part=item]:pe-2 **:data-[part=item]:outline-none',
42
+ '[&_[data-part=item]:focus-visible]:ring-2 [&_[data-part=item]:focus-visible]:ring-ring [&_[data-part=item]:focus-visible]:ring-offset-1 [&_[data-part=item]:focus-visible]:ring-offset-surface-1 [&_[data-part=item]:hover]:bg-surface-2 [&_[data-part=item][data-highlighted]]:bg-surface-2 [&_[data-part=item][data-selected]]:bg-surface-2',
43
+ '**:data-[part=item-text]:flex **:data-[part=item-text]:min-w-0 **:data-[part=item-text]:flex-wrap **:data-[part=item-text]:items-baseline **:data-[part=item-text]:wrap-break-word',
44
+ '**:data-[part=branch-text]:flex **:data-[part=branch-text]:min-w-0 **:data-[part=branch-text]:flex-wrap **:data-[part=branch-text]:items-baseline **:data-[part=branch-text]:wrap-break-word',
45
+ className
46
+ )}
47
+ {...rootProps}
48
+ >
49
+ <JsonTreeView.Tree
50
+ class={cn('flex flex-col leading-[1.8] [&_svg]:size-3', treeClass)}
51
+ {indentGuide}
52
+ {renderValue}
53
+ >
54
+ {#snippet arrow()}
55
+ <PhCaretRight class="size-3" />
56
+ {/snippet}
57
+ </JsonTreeView.Tree>
58
+ </JsonTreeView.Root>
59
+
60
+ <style>
61
+ /* depth-based indentation requires calc(var(--depth)...) — not expressible in Tailwind */
62
+ :global([data-scope='json-tree-view'] [data-part='branch-indent-guide']) {
63
+ position: absolute;
64
+ height: 100%;
65
+ width: 1px;
66
+ background: var(--compote-border);
67
+ inset-inline-start: calc((var(--depth) - 1) * 1rem + 0.75rem);
68
+ }
69
+
70
+ :global([data-scope='json-tree-view'] [data-part='branch-indent-guide'][data-depth='1']) {
71
+ inset-inline-start: 0.75rem;
72
+ }
73
+
74
+ :global([data-scope='json-tree-view'] [data-part='branch-control']) {
75
+ padding-inline-start: calc((var(--depth) - 1) * 0.75rem);
76
+ }
77
+
78
+ :global([data-scope='json-tree-view'] [data-part='branch-control'][data-depth='1']) {
79
+ padding-inline-start: 0.25rem;
80
+ }
81
+
82
+ :global([data-scope='json-tree-view'] [data-part='item']) {
83
+ padding-inline-start: calc(((var(--depth) - 1) * 0.75rem) + 0.75rem);
84
+ }
85
+
86
+ :global([data-scope='json-tree-view'] [data-part='item'][data-depth='1']) {
87
+ padding-inline-start: 1.5rem;
88
+ }
89
+
90
+ /* Value types — light-dark() for dark mode, not expressible in Tailwind */
91
+ :global([data-scope='json-tree-view'] [data-type='string']) {
92
+ color: light-dark(#16a34a, #4ade80);
93
+ }
94
+
95
+ :global([data-scope='json-tree-view'] [data-type='number']) {
96
+ color: light-dark(#2563eb, #60a5fa);
97
+ }
98
+
99
+ :global([data-scope='json-tree-view'] [data-type='boolean']) {
100
+ color: light-dark(#d97706, #fbbf24);
101
+ font-weight: 600;
102
+ }
103
+
104
+ :global([data-scope='json-tree-view'] [data-type='null']),
105
+ :global([data-scope='json-tree-view'] [data-type='undefined']) {
106
+ color: var(--compote-ink-dim);
107
+ font-style: italic;
108
+ font-weight: 600;
109
+ }
110
+
111
+ :global([data-scope='json-tree-view'] [data-type='function']) {
112
+ color: light-dark(#9333ea, #c084fc);
113
+ font-style: italic;
114
+ }
115
+
116
+ :global([data-scope='json-tree-view'] [data-type='date']) {
117
+ color: light-dark(#0891b2, #22d3ee);
118
+ }
119
+
120
+ :global([data-scope='json-tree-view'] [data-type='error']) {
121
+ color: light-dark(#dc2626, #f87171);
122
+ font-weight: 500;
123
+ }
124
+
125
+ :global([data-scope='json-tree-view'] [data-type='regex']) {
126
+ color: light-dark(#7c3aed, #a78bfa);
127
+ }
128
+
129
+ /* Syntax elements */
130
+ :global([data-scope='json-tree-view'] [data-kind='brace']) {
131
+ color: var(--compote-ink);
132
+ font-weight: 700;
133
+ }
134
+
135
+ :global([data-scope='json-tree-view'] [data-kind='key']) {
136
+ color: var(--compote-primary);
137
+ font-weight: 500;
138
+ }
139
+
140
+ :global([data-scope='json-tree-view'] [data-kind='colon']) {
141
+ color: var(--compote-ink-dim);
142
+ margin-inline: 0.25rem;
143
+ }
144
+
145
+ :global([data-scope='json-tree-view'] [data-kind='preview-text']) {
146
+ color: var(--compote-ink-dim);
147
+ font-style: italic;
148
+ }
149
+
150
+ :global([data-scope='json-tree-view'] [data-kind='constructor']) {
151
+ color: var(--compote-primary);
152
+ font-weight: 500;
153
+ }
154
+ </style>
package/dist/components/json-tree-view/json-tree-view.svelte.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { JsonTreeView } from '@ark-ui/svelte/json-tree-view';
2
+ import type { JsonTreeViewRootBaseProps, JsonTreeViewTreeBaseProps } from '@ark-ui/svelte/json-tree-view';
3
+ import type { ClassValue } from 'svelte/elements';
4
+ interface Props extends JsonTreeViewRootBaseProps {
5
+ class?: ClassValue;
6
+ treeClass?: ClassValue;
7
+ indentGuide?: JsonTreeViewTreeBaseProps['indentGuide'];
8
+ renderValue?: JsonTreeViewTreeBaseProps['renderValue'];
9
+ }
10
+ declare const JsonTreeView: import("svelte").Component<Props, {}, "">;
11
+ type JsonTreeView = ReturnType<typeof JsonTreeView>;
12
+ export default JsonTreeView;
package/dist/index.d.ts CHANGED
@@ -23,6 +23,7 @@ export { default as ImageCropper } from './components/image-cropper/image-croppe
23
23
  export type { ImageCropperProps, ImageCropperCropData } from './components/image-cropper/types';
24
24
  export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
25
25
  export type { ImageCropDialogProps } from './components/image-crop-dialog/types';
26
+ export { default as JsonTreeView } from './components/json-tree-view/json-tree-view.svelte';
26
27
  export * as Listbox from './components/listbox';
27
28
  export { default as NumberInput } from './components/number-input/number-input.svelte';
28
29
  export type { NumberInputProps } from './components/number-input/types';
package/dist/index.js CHANGED
@@ -18,6 +18,7 @@ export { default as FileUploadDropzone } from './components/file-upload/file-upl
18
18
  export { default as FileUpload } from './components/file-upload/file-upload.svelte';
19
19
  export { default as ImageCropper } from './components/image-cropper/image-cropper.svelte';
20
20
  export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
21
+ export { default as JsonTreeView } from './components/json-tree-view/json-tree-view.svelte';
21
22
  export * as Listbox from './components/listbox';
22
23
  export { default as NumberInput } from './components/number-input/number-input.svelte';
23
24
  export * as Popover from './components/popover';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "compote-ui",
3
- "version": "0.48.1",
3
+ "version": "0.49.2",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "dev": "vite dev --open",