compote-ui 0.48.0 → 0.49.0

package/dist/components/dialog/dialog-close-trigger.svelte

@@ -2,20 +2,42 @@
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import type { DialogCloseTriggerBaseProps } from '@ark-ui/svelte/dialog';
 	import { PhX } from '../../icons';
-	import type { ClassValue } from 'svelte/elements';
+	import {
+		button,
+		type ButtonVariant,
+		type ButtonSize
+	} from '../button/button.variants';
+	import type { ClassValue } from 'tailwind-variants';
 
 	interface Props extends DialogCloseTriggerBaseProps {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
 		class?: ClassValue;
 	}
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { class: className, variant, size, children, ...rest }: Props = $props();
+
+	const isIconMode = $derived(!children);
+
+	const classes = $derived(
+		isIconMode
+			? button({
+					variant: variant ?? 'ghost',
+					size: size ?? 'icon-sm',
+					class: [
+						'absolute top-3 right-3 opacity-70 hover:opacity-100 active:opacity-50',
+						className
+					]
+				})
+			: button({
+					variant: variant ?? 'outline',
+					size: size ?? 'default',
+					class: className
+				})
+	);
 </script>
 
-<Dialog.CloseTrigger
-	{...rest}
-	class={className ??
-		'absolute top-3 right-3 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none active:opacity-50'}
->
+<Dialog.CloseTrigger {...rest} class={classes}>
 	{#if children}
 		{@render children()}
 	{:else}

package/dist/components/dialog/dialog-close-trigger.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { DialogCloseTriggerBaseProps } from '@ark-ui/svelte/dialog';
-import type { ClassValue } from 'svelte/elements';
+import { type ButtonVariant, type ButtonSize } from '../button/button.variants';
+import type { ClassValue } from 'tailwind-variants';
 interface Props extends DialogCloseTriggerBaseProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     class?: ClassValue;
 }
 declare const DialogCloseTrigger: import("svelte").Component<Props, {}, "">;

package/dist/components/drawer/drawer-footer.svelte

@@ -11,6 +11,11 @@
 	let { class: className, children }: Props = $props();
 </script>
 
-<div class={cn('mt-auto flex flex-row items-center justify-end gap-2 border-t border-border p-4', className)}>
+<div
+	class={cn(
+		'mt-auto flex flex-row items-center justify-end gap-2 border-t border-border p-4',
+		className
+	)}
+>
 	{@render children()}
 </div>

package/dist/components/json-tree-view/json-tree-view.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+	import { JsonTreeView } from '@ark-ui/svelte/json-tree-view';
+	import type {
+		JsonTreeViewRootBaseProps,
+		JsonTreeViewTreeBaseProps
+	} from '@ark-ui/svelte/json-tree-view';
+	import type { ClassValue } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	import { PhCaretRight } from '../../icons';
+
+	interface Props extends JsonTreeViewRootBaseProps {
+		class?: ClassValue;
+		treeClass?: ClassValue;
+		indentGuide?: JsonTreeViewTreeBaseProps['indentGuide'];
+		renderValue?: JsonTreeViewTreeBaseProps['renderValue'];
+	}
+
+	let {
+		class: className,
+		treeClass,
+		defaultExpandedDepth = 1,
+		indentGuide = true,
+		renderValue,
+		...rootProps
+	}: Props = $props();
+</script>
+
+<JsonTreeView.Root
+	{defaultExpandedDepth}
+	class={cn(
+		'w-full overflow-auto font-mono text-xs text-ink',
+		'**:data-[part=branch-content]:relative',
+		'**: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',
+		'[&_[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',
+		'**: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',
+		'[&_[data-part=branch-indicator][data-state=open]]:rotate-90',
+		'**: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',
+		'[&_[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',
+		'**: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',
+		'**: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',
+		className
+	)}
+	{...rootProps}
+>
+	<JsonTreeView.Tree
+		class={cn('flex flex-col leading-[1.8] [&_svg]:size-3', treeClass)}
+		{indentGuide}
+		{renderValue}
+	>
+		{#snippet arrow()}
+			<PhCaretRight class="size-3" />
+		{/snippet}
+	</JsonTreeView.Tree>
+</JsonTreeView.Root>
+
+<style>
+	/* depth-based indentation requires calc(var(--depth)...) — not expressible in Tailwind */
+	:global([data-scope='json-tree-view'] [data-part='branch-indent-guide']) {
+		position: absolute;
+		height: 100%;
+		width: 1px;
+		background: var(--compote-border);
+		inset-inline-start: calc((var(--depth) - 1) * 1rem + 0.75rem);
+	}
+
+	:global([data-scope='json-tree-view'] [data-part='branch-indent-guide'][data-depth='1']) {
+		inset-inline-start: 0.75rem;
+	}
+
+	:global([data-scope='json-tree-view'] [data-part='branch-control']) {
+		padding-inline-start: calc((var(--depth) - 1) * 0.75rem);
+	}
+
+	:global([data-scope='json-tree-view'] [data-part='branch-control'][data-depth='1']) {
+		padding-inline-start: 0.25rem;
+	}
+
+	:global([data-scope='json-tree-view'] [data-part='item']) {
+		padding-inline-start: calc(((var(--depth) - 1) * 0.75rem) + 0.75rem);
+	}
+
+	:global([data-scope='json-tree-view'] [data-part='item'][data-depth='1']) {
+		padding-inline-start: 1.5rem;
+	}
+
+	/* Value types — light-dark() for dark mode, not expressible in Tailwind */
+	:global([data-scope='json-tree-view'] [data-type='string']) {
+		color: light-dark(#16a34a, #4ade80);
+	}
+
+	:global([data-scope='json-tree-view'] [data-type='number']) {
+		color: light-dark(#2563eb, #60a5fa);
+	}
+
+	:global([data-scope='json-tree-view'] [data-type='boolean']) {
+		color: light-dark(#d97706, #fbbf24);
+		font-weight: 600;
+	}
+
+	:global([data-scope='json-tree-view'] [data-type='null']),
+	:global([data-scope='json-tree-view'] [data-type='undefined']) {
+		color: var(--compote-ink-dim);
+		font-style: italic;
+		font-weight: 600;
+	}
+
+	:global([data-scope='json-tree-view'] [data-type='function']) {
+		color: light-dark(#9333ea, #c084fc);
+		font-style: italic;
+	}
+
+	:global([data-scope='json-tree-view'] [data-type='date']) {
+		color: light-dark(#0891b2, #22d3ee);
+	}
+
+	:global([data-scope='json-tree-view'] [data-type='error']) {
+		color: light-dark(#dc2626, #f87171);
+		font-weight: 500;
+	}
+
+	:global([data-scope='json-tree-view'] [data-type='regex']) {
+		color: light-dark(#7c3aed, #a78bfa);
+	}
+
+	/* Syntax elements */
+	:global([data-scope='json-tree-view'] [data-kind='brace']) {
+		color: var(--compote-ink);
+		font-weight: 700;
+	}
+
+	:global([data-scope='json-tree-view'] [data-kind='key']) {
+		color: var(--compote-primary);
+		font-weight: 500;
+	}
+
+	:global([data-scope='json-tree-view'] [data-kind='colon']) {
+		color: var(--compote-ink-dim);
+		margin-inline: 0.25rem;
+	}
+
+	:global([data-scope='json-tree-view'] [data-kind='preview-text']) {
+		color: var(--compote-ink-dim);
+		font-style: italic;
+	}
+
+	:global([data-scope='json-tree-view'] [data-kind='constructor']) {
+		color: var(--compote-primary);
+		font-weight: 500;
+	}
+</style>

package/dist/components/json-tree-view/json-tree-view.svelte.d.ts

@@ -0,0 +1,12 @@
+import { JsonTreeView } from '@ark-ui/svelte/json-tree-view';
+import type { JsonTreeViewRootBaseProps, JsonTreeViewTreeBaseProps } from '@ark-ui/svelte/json-tree-view';
+import type { ClassValue } from 'svelte/elements';
+interface Props extends JsonTreeViewRootBaseProps {
+    class?: ClassValue;
+    treeClass?: ClassValue;
+    indentGuide?: JsonTreeViewTreeBaseProps['indentGuide'];
+    renderValue?: JsonTreeViewTreeBaseProps['renderValue'];
+}
+declare const JsonTreeView: import("svelte").Component<Props, {}, "">;
+type JsonTreeView = ReturnType<typeof JsonTreeView>;
+export default JsonTreeView;

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { default as ImageCropper } from './components/image-cropper/image-croppe
 export type { ImageCropperProps, ImageCropperCropData } from './components/image-cropper/types';
 export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
 export type { ImageCropDialogProps } from './components/image-crop-dialog/types';
+export { default as JsonTreeView } from './components/json-tree-view/json-tree-view.svelte';
 export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
 export type { NumberInputProps } from './components/number-input/types';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as FileUploadDropzone } from './components/file-upload/file-upl
 export { default as FileUpload } from './components/file-upload/file-upload.svelte';
 export { default as ImageCropper } from './components/image-cropper/image-cropper.svelte';
 export { default as ImageCropDialog } from './components/image-crop-dialog/image-crop-dialog.svelte';
+export { default as JsonTreeView } from './components/json-tree-view/json-tree-view.svelte';
 export * as Listbox from './components/listbox';
 export { default as NumberInput } from './components/number-input/number-input.svelte';
 export * as Popover from './components/popover';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.48.0",
+	"version": "0.49.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",