@moduix/solid-tailwind 1.0.0

package/dist/components/input-group/InputGroup.js

@@ -0,0 +1,191 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { createContext, splitProps, useContext } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { Button } from "../button/index.js";
+import { Input } from "../input/index.js";
+const inputGroupSizeVariants = {
+    xs: 'px-2.5 text-xs leading-4',
+    sm: 'px-3 text-sm leading-5',
+    md: 'px-3.5 text-md leading-6',
+    lg: 'px-4 text-lg leading-7',
+    xl: 'px-4.5 text-lg leading-7'
+};
+const inputGroupRootVariants = cva('flex w-full max-w-none items-stretch overflow-hidden rounded-md border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out focus-within:outline-ring has-[[data-slot=input-root][data-invalid]]:border-destructive has-[[data-slot=input-root][data-invalid]]:focus-within:outline-destructive has-[[data-slot=input-root][aria-invalid=true]]:border-destructive has-[[data-slot=input-root][aria-invalid=true]]:focus-within:outline-destructive has-[[data-slot=input-root][data-disabled]]:opacity-50 has-[[data-slot=input-root]:disabled]:opacity-50 motion-reduce:transition-none', {
+    variants: {
+        size: {
+            xs: 'min-h-control-xs',
+            sm: 'min-h-control-sm',
+            md: 'min-h-control-md',
+            lg: 'min-h-control-lg',
+            xl: 'min-h-control-xl'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const inputGroupInputVariants = cva('min-h-0 min-w-0 grow basis-auto rounded-none border-0 bg-transparent outline-0', {
+    variants: {
+        size: inputGroupSizeVariants
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const inputGroupAddonVariants = cva('inline-flex min-w-0 items-center justify-center gap-2 truncate bg-muted text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0 border-s border-e border-border first:border-s-0 last:border-e-0', {
+    variants: {
+        size: inputGroupSizeVariants
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const inputGroupTextVariants = cva('inline-flex min-w-0 items-center justify-center gap-2 truncate bg-transparent text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', {
+    variants: {
+        size: inputGroupSizeVariants
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const inputGroupButtonClass = 'h-auto self-stretch rounded-none border-0';
+const defaultInputGroupSize = 'md';
+const defaultInputGroupSizeAccessor = ()=>defaultInputGroupSize;
+const InputGroupSizeContext = createContext(defaultInputGroupSizeAccessor);
+function InputGroupRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-size',
+        'data-slot',
+        'size'
+    ]);
+    return createComponent(InputGroupSizeContext.Provider, {
+        value: ()=>local.size ?? defaultInputGroupSize,
+        get children () {
+            return createComponent(ark.div, mergeProps({
+                get asChild () {
+                    return local.asChild;
+                }
+            }, others, {
+                "data-scope": "input-group",
+                "data-part": "root",
+                "data-slot": "input-group-root",
+                get ["data-size"] () {
+                    return local.size ?? 'md';
+                },
+                get ["class"] () {
+                    return cn(inputGroupRootVariants({
+                        size: local.size
+                    }), local.class);
+                },
+                get children () {
+                    return local.children;
+                }
+            }));
+        }
+    });
+}
+function InputGroupInput(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'size'
+    ]);
+    const groupSize = useContext(InputGroupSizeContext) ?? defaultInputGroupSizeAccessor;
+    return createComponent(Input, mergeProps(others, {
+        get ["class"] () {
+            return cn(inputGroupInputVariants({
+                size: groupSize()
+            }), local.class);
+        },
+        get size () {
+            return local.size ?? groupSize();
+        }
+    }));
+}
+function InputGroupAddon(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    const groupSize = useContext(InputGroupSizeContext) ?? defaultInputGroupSizeAccessor;
+    return createComponent(ark.span, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "input-group",
+        "data-part": "addon",
+        "data-slot": "input-group-addon",
+        get ["class"] () {
+            return cn(inputGroupAddonVariants({
+                size: groupSize()
+            }), local.class);
+        }
+    }));
+}
+function InputGroupText(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    const groupSize = useContext(InputGroupSizeContext) ?? defaultInputGroupSizeAccessor;
+    return createComponent(ark.span, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-scope": "input-group",
+        "data-part": "text",
+        "data-slot": "input-group-text",
+        get ["class"] () {
+            return cn(inputGroupTextVariants({
+                size: groupSize()
+            }), local.class);
+        }
+    }));
+}
+function InputGroupButton(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'size',
+        'type',
+        'variant'
+    ]);
+    const groupSize = useContext(InputGroupSizeContext) ?? defaultInputGroupSizeAccessor;
+    const buttonSize = ()=>local.size ?? groupSize();
+    return createComponent(Button, mergeProps(others, {
+        "data-slot": "input-group-button",
+        get ["class"] () {
+            return cn(inputGroupButtonClass, local.class);
+        },
+        get variant () {
+            return local.variant ?? 'ghost';
+        },
+        get size () {
+            return buttonSize();
+        },
+        get type () {
+            return local.type ?? 'button';
+        }
+    }));
+}
+const InputGroup = Object.assign(InputGroupRoot, {
+    Root: InputGroupRoot,
+    Input: InputGroupInput,
+    Addon: InputGroupAddon,
+    Text: InputGroupText,
+    Button: InputGroupButton
+});
+export { InputGroup };

package/dist/components/input-group/InputGroup.jsx

@@ -0,0 +1,129 @@
+import { ark } from "@ark-ui/solid/factory";
+import { cva } from "class-variance-authority";
+import { createContext, splitProps, useContext } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { Button } from "../button/index.jsx";
+import { Input } from "../input/index.jsx";
+const inputGroupSizeVariants = {
+    xs: 'px-2.5 text-xs leading-4',
+    sm: 'px-3 text-sm leading-5',
+    md: 'px-3.5 text-md leading-6',
+    lg: 'px-4 text-lg leading-7',
+    xl: 'px-4.5 text-lg leading-7'
+};
+const inputGroupRootVariants = cva('flex w-full max-w-none items-stretch overflow-hidden rounded-md border border-border bg-background text-foreground outline-1 -outline-offset-1 outline-transparent transition-[border-color,outline-color,opacity] duration-200 ease-in-out focus-within:outline-ring has-[[data-slot=input-root][data-invalid]]:border-destructive has-[[data-slot=input-root][data-invalid]]:focus-within:outline-destructive has-[[data-slot=input-root][aria-invalid=true]]:border-destructive has-[[data-slot=input-root][aria-invalid=true]]:focus-within:outline-destructive has-[[data-slot=input-root][data-disabled]]:opacity-50 has-[[data-slot=input-root]:disabled]:opacity-50 motion-reduce:transition-none', {
+    variants: {
+        size: {
+            xs: 'min-h-control-xs',
+            sm: 'min-h-control-sm',
+            md: 'min-h-control-md',
+            lg: 'min-h-control-lg',
+            xl: 'min-h-control-xl'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const inputGroupInputVariants = cva('min-h-0 min-w-0 grow basis-auto rounded-none border-0 bg-transparent outline-0', {
+    variants: {
+        size: inputGroupSizeVariants
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const inputGroupAddonVariants = cva('inline-flex min-w-0 items-center justify-center gap-2 truncate bg-muted text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0 border-s border-e border-border first:border-s-0 last:border-e-0', {
+    variants: {
+        size: inputGroupSizeVariants
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const inputGroupTextVariants = cva('inline-flex min-w-0 items-center justify-center gap-2 truncate bg-transparent text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0', {
+    variants: {
+        size: inputGroupSizeVariants
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const inputGroupButtonClass = 'h-auto self-stretch rounded-none border-0';
+const defaultInputGroupSize = 'md';
+const defaultInputGroupSizeAccessor = ()=>defaultInputGroupSize;
+const InputGroupSizeContext = createContext(defaultInputGroupSizeAccessor);
+function InputGroupRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-size',
+        'data-slot',
+        'size'
+    ]);
+    return <InputGroupSizeContext.Provider value={()=>local.size ?? defaultInputGroupSize}>
+      <ark.div asChild={local.asChild} {...others} data-scope="input-group" data-part="root" data-slot="input-group-root" data-size={local.size ?? 'md'} class={cn(inputGroupRootVariants({
+        size: local.size
+    }), local.class)}>
+        {local.children}
+      </ark.div>
+    </InputGroupSizeContext.Provider>;
+}
+function InputGroupInput(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'size'
+    ]);
+    const groupSize = useContext(InputGroupSizeContext) ?? defaultInputGroupSizeAccessor;
+    return <Input {...others} class={cn(inputGroupInputVariants({
+        size: groupSize()
+    }), local.class)} size={local.size ?? groupSize()}/>;
+}
+function InputGroupAddon(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    const groupSize = useContext(InputGroupSizeContext) ?? defaultInputGroupSizeAccessor;
+    return <ark.span asChild={local.asChild} {...others} data-scope="input-group" data-part="addon" data-slot="input-group-addon" class={cn(inputGroupAddonVariants({
+        size: groupSize()
+    }), local.class)}/>;
+}
+function InputGroupText(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'class',
+        'data-part',
+        'data-scope',
+        'data-slot'
+    ]);
+    const groupSize = useContext(InputGroupSizeContext) ?? defaultInputGroupSizeAccessor;
+    return <ark.span asChild={local.asChild} {...others} data-scope="input-group" data-part="text" data-slot="input-group-text" class={cn(inputGroupTextVariants({
+        size: groupSize()
+    }), local.class)}/>;
+}
+function InputGroupButton(props) {
+    const [local, others] = splitProps(props, [
+        'class',
+        'size',
+        'type',
+        'variant'
+    ]);
+    const groupSize = useContext(InputGroupSizeContext) ?? defaultInputGroupSizeAccessor;
+    const buttonSize = ()=>local.size ?? groupSize();
+    return <Button {...others} data-slot="input-group-button" class={cn(inputGroupButtonClass, local.class)} variant={local.variant ?? 'ghost'} size={buttonSize()} type={local.type ?? 'button'}/>;
+}
+const InputGroup = Object.assign(InputGroupRoot, {
+    Root: InputGroupRoot,
+    Input: InputGroupInput,
+    Addon: InputGroupAddon,
+    Text: InputGroupText,
+    Button: InputGroupButton
+});
+export { InputGroup };

package/dist/components/input-group/index.d.ts

@@ -0,0 +1 @@
+export { InputGroup } from './InputGroup.js';

package/dist/components/input-group/index.js

@@ -0,0 +1 @@
+export { InputGroup } from "./InputGroup.js";

package/dist/components/input-group/index.jsx

@@ -0,0 +1 @@
+export { InputGroup } from "./InputGroup.jsx";

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

@@ -0,0 +1,11 @@
+import { useJsonTreeView, type JsonTreeViewRootProps, type JsonTreeViewRootProviderProps, type JsonTreeViewTreeProps, type UseJsonTreeViewProps, type UseJsonTreeViewReturn } from '@ark-ui/solid/json-tree-view';
+declare function JsonTreeViewRoot(props: JsonTreeViewRootProps): import("solid-js").JSX.Element;
+declare function JsonTreeViewRootProvider(props: JsonTreeViewRootProviderProps): import("solid-js").JSX.Element;
+declare function JsonTreeViewTree(props: JsonTreeViewTreeProps): import("solid-js").JSX.Element;
+declare const JsonTreeView: typeof JsonTreeViewRoot & {
+    Root: typeof JsonTreeViewRoot;
+    RootProvider: typeof JsonTreeViewRootProvider;
+    Tree: typeof JsonTreeViewTree;
+};
+export { JsonTreeView, useJsonTreeView };
+export type { JsonTreeViewRootProps, JsonTreeViewRootProviderProps, JsonTreeViewTreeProps, UseJsonTreeViewProps, UseJsonTreeViewReturn, };

package/dist/components/json-tree-view/JsonTreeView.js

@@ -0,0 +1,69 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { JsonTreeView, useJsonTreeView } from "@ark-ui/solid/json-tree-view";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+import { ChevronRightIcon } from "../../internal/icons/ui/Icons.js";
+function JsonTreeViewRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(JsonTreeView.Root, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-slot": "json-tree-view-root",
+        get ["class"] () {
+            return cn("box-border flex w-full min-w-0 flex-col font-mono text-xs leading-4 text-foreground data-disabled:opacity-50 [&_[data-kind='brace']]:font-medium [&_[data-kind='brace']]:text-muted-foreground [&_[data-kind='colon']]:text-muted-foreground [&_[data-kind='constructor']]:font-medium [&_[data-kind='constructor']]:text-muted-foreground [&_[data-kind='error-stack']]:text-destructive [&_[data-kind='function-body']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-body']]:italic [&_[data-kind='function-type']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-type']]:italic [&_[data-kind='key']]:font-medium [&_[data-kind='key']]:text-[color-mix(in_oklab,theme(--color-chart-1)_72%,theme(--color-foreground))] [&_[data-kind='operator']]:text-destructive [&_[data-kind='preview'][data-type='bigint']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='boolean']]:font-medium [&_[data-kind='preview'][data-type='boolean']]:text-[color-mix(in_oklab,theme(--color-chart-4)_74%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='error']]:text-destructive [&_[data-kind='preview'][data-type='function']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='null']]:font-medium [&_[data-kind='preview'][data-type='null']]:text-muted-foreground [&_[data-kind='preview'][data-type='null']]:italic [&_[data-kind='preview'][data-type='number']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='string']]:text-[color-mix(in_oklab,theme(--color-success)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='undefined']]:font-medium [&_[data-kind='preview'][data-type='undefined']]:text-muted-foreground [&_[data-kind='preview'][data-type='undefined']]:italic [&_[data-kind='preview-text']]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch']]:flex [&_[data-scope='json-tree-view'][data-part='branch']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex [&_[data-scope='json-tree-view'][data-part='branch-content']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch-content']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:overflow-hidden [&_[data-scope='json-tree-view'][data-part='branch-control']]:relative [&_[data-scope='json-tree-view'][data-part='branch-control']]:z-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:box-border [&_[data-scope='json-tree-view'][data-part='branch-control']]:flex [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:w-full [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='branch-control']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-control']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='branch-control']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:pe-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-start [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-inherit [&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='branch-control']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:outline-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:select-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:absolute [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='branch-control']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch-control'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:inline-flex [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:shrink-0 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:justify-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:text-[color-mix(in_oklab,theme(--color-muted-foreground)_42%,theme(--color-foreground))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-transform [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:ease-in-out motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-none [&_[data-scope='json-tree-view'][data-part='branch-indicator']_svg]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator'][data-state='open']]:rotate-90 [&_[data-scope='json-tree-view'][data-part='branch-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-text']]:wrap-anywhere [&_[data-scope='json-tree-view'][data-part='item']]:relative [&_[data-scope='json-tree-view'][data-part='item']]:z-0 [&_[data-scope='json-tree-view'][data-part='item']]:box-border [&_[data-scope='json-tree-view'][data-part='item']]:flex [&_[data-scope='json-tree-view'][data-part='item']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='item']]:w-full [&_[data-scope='json-tree-view'][data-part='item']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='item']]:items-center [&_[data-scope='json-tree-view'][data-part='item']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='item']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:pe-1 [&_[data-scope='json-tree-view'][data-part='item']]:text-start [&_[data-scope='json-tree-view'][data-part='item']]:text-inherit [&_[data-scope='json-tree-view'][data-part='item']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='item']]:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:outline-none [&_[data-scope='json-tree-view'][data-part='item']]:select-none [&_[data-scope='json-tree-view'][data-part='item']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='item']]:before:absolute [&_[data-scope='json-tree-view'][data-part='item']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='item']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='item']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='item'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='item-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item-text']]:wrap-anywhere [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='branch-control']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='item']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))]", local.class);
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function JsonTreeViewRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return createComponent(JsonTreeView.RootProvider, mergeProps({
+        get asChild () {
+            return local.asChild;
+        }
+    }, others, {
+        "data-slot": "json-tree-view-root-provider",
+        get ["class"] () {
+            return cn("box-border flex w-full min-w-0 flex-col font-mono text-xs leading-4 text-foreground data-disabled:opacity-50 [&_[data-kind='brace']]:font-medium [&_[data-kind='brace']]:text-muted-foreground [&_[data-kind='colon']]:text-muted-foreground [&_[data-kind='constructor']]:font-medium [&_[data-kind='constructor']]:text-muted-foreground [&_[data-kind='error-stack']]:text-destructive [&_[data-kind='function-body']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-body']]:italic [&_[data-kind='function-type']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-type']]:italic [&_[data-kind='key']]:font-medium [&_[data-kind='key']]:text-[color-mix(in_oklab,theme(--color-chart-1)_72%,theme(--color-foreground))] [&_[data-kind='operator']]:text-destructive [&_[data-kind='preview'][data-type='bigint']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='boolean']]:font-medium [&_[data-kind='preview'][data-type='boolean']]:text-[color-mix(in_oklab,theme(--color-chart-4)_74%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='error']]:text-destructive [&_[data-kind='preview'][data-type='function']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='null']]:font-medium [&_[data-kind='preview'][data-type='null']]:text-muted-foreground [&_[data-kind='preview'][data-type='null']]:italic [&_[data-kind='preview'][data-type='number']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='string']]:text-[color-mix(in_oklab,theme(--color-success)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='undefined']]:font-medium [&_[data-kind='preview'][data-type='undefined']]:text-muted-foreground [&_[data-kind='preview'][data-type='undefined']]:italic [&_[data-kind='preview-text']]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch']]:flex [&_[data-scope='json-tree-view'][data-part='branch']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex [&_[data-scope='json-tree-view'][data-part='branch-content']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch-content']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:overflow-hidden [&_[data-scope='json-tree-view'][data-part='branch-control']]:relative [&_[data-scope='json-tree-view'][data-part='branch-control']]:z-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:box-border [&_[data-scope='json-tree-view'][data-part='branch-control']]:flex [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:w-full [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='branch-control']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-control']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='branch-control']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:pe-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-start [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-inherit [&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='branch-control']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:outline-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:select-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:absolute [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='branch-control']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch-control'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:inline-flex [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:shrink-0 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:justify-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:text-[color-mix(in_oklab,theme(--color-muted-foreground)_42%,theme(--color-foreground))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-transform [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:ease-in-out motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-none [&_[data-scope='json-tree-view'][data-part='branch-indicator']_svg]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator'][data-state='open']]:rotate-90 [&_[data-scope='json-tree-view'][data-part='branch-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-text']]:wrap-anywhere [&_[data-scope='json-tree-view'][data-part='item']]:relative [&_[data-scope='json-tree-view'][data-part='item']]:z-0 [&_[data-scope='json-tree-view'][data-part='item']]:box-border [&_[data-scope='json-tree-view'][data-part='item']]:flex [&_[data-scope='json-tree-view'][data-part='item']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='item']]:w-full [&_[data-scope='json-tree-view'][data-part='item']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='item']]:items-center [&_[data-scope='json-tree-view'][data-part='item']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='item']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:pe-1 [&_[data-scope='json-tree-view'][data-part='item']]:text-start [&_[data-scope='json-tree-view'][data-part='item']]:text-inherit [&_[data-scope='json-tree-view'][data-part='item']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='item']]:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:outline-none [&_[data-scope='json-tree-view'][data-part='item']]:select-none [&_[data-scope='json-tree-view'][data-part='item']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='item']]:before:absolute [&_[data-scope='json-tree-view'][data-part='item']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='item']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='item']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='item'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='item-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item-text']]:wrap-anywhere [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='branch-control']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='item']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))]", local.class);
+        }
+    }, others, {
+        get children () {
+            return local.children;
+        }
+    }));
+}
+function JsonTreeViewTree(props) {
+    const [local, others] = splitProps(props, [
+        'arrow',
+        'class'
+    ]);
+    return createComponent(JsonTreeView.Tree, mergeProps(others, {
+        get arrow () {
+            return local.arrow ?? createComponent(ChevronRightIcon, {
+                "aria-hidden": "true"
+            });
+        },
+        "data-slot": "json-tree-view-tree",
+        get ["class"] () {
+            return cn('flex min-w-0 flex-col gap-1', local.class);
+        }
+    }));
+}
+const JsonTreeView_JsonTreeView = Object.assign(JsonTreeViewRoot, {
+    Root: JsonTreeViewRoot,
+    RootProvider: JsonTreeViewRootProvider,
+    Tree: JsonTreeViewTree
+});
+export { JsonTreeView_JsonTreeView as JsonTreeView, useJsonTreeView };

package/dist/components/json-tree-view/JsonTreeView.jsx

@@ -0,0 +1,37 @@
+import { JsonTreeView, useJsonTreeView } from "@ark-ui/solid/json-tree-view";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.jsx";
+import { ChevronRightIcon } from "../../internal/icons/ui/Icons.jsx";
+function JsonTreeViewRoot(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <JsonTreeView.Root asChild={local.asChild} {...others} data-slot="json-tree-view-root" class={cn("box-border flex w-full min-w-0 flex-col font-mono text-xs leading-4 text-foreground data-disabled:opacity-50 [&_[data-kind='brace']]:font-medium [&_[data-kind='brace']]:text-muted-foreground [&_[data-kind='colon']]:text-muted-foreground [&_[data-kind='constructor']]:font-medium [&_[data-kind='constructor']]:text-muted-foreground [&_[data-kind='error-stack']]:text-destructive [&_[data-kind='function-body']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-body']]:italic [&_[data-kind='function-type']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-type']]:italic [&_[data-kind='key']]:font-medium [&_[data-kind='key']]:text-[color-mix(in_oklab,theme(--color-chart-1)_72%,theme(--color-foreground))] [&_[data-kind='operator']]:text-destructive [&_[data-kind='preview'][data-type='bigint']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='boolean']]:font-medium [&_[data-kind='preview'][data-type='boolean']]:text-[color-mix(in_oklab,theme(--color-chart-4)_74%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='error']]:text-destructive [&_[data-kind='preview'][data-type='function']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='null']]:font-medium [&_[data-kind='preview'][data-type='null']]:text-muted-foreground [&_[data-kind='preview'][data-type='null']]:italic [&_[data-kind='preview'][data-type='number']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='string']]:text-[color-mix(in_oklab,theme(--color-success)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='undefined']]:font-medium [&_[data-kind='preview'][data-type='undefined']]:text-muted-foreground [&_[data-kind='preview'][data-type='undefined']]:italic [&_[data-kind='preview-text']]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch']]:flex [&_[data-scope='json-tree-view'][data-part='branch']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex [&_[data-scope='json-tree-view'][data-part='branch-content']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch-content']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:overflow-hidden [&_[data-scope='json-tree-view'][data-part='branch-control']]:relative [&_[data-scope='json-tree-view'][data-part='branch-control']]:z-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:box-border [&_[data-scope='json-tree-view'][data-part='branch-control']]:flex [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:w-full [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='branch-control']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-control']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='branch-control']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:pe-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-start [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-inherit [&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='branch-control']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:outline-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:select-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:absolute [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='branch-control']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch-control'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:inline-flex [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:shrink-0 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:justify-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:text-[color-mix(in_oklab,theme(--color-muted-foreground)_42%,theme(--color-foreground))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-transform [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:ease-in-out motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-none [&_[data-scope='json-tree-view'][data-part='branch-indicator']_svg]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator'][data-state='open']]:rotate-90 [&_[data-scope='json-tree-view'][data-part='branch-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-text']]:wrap-anywhere [&_[data-scope='json-tree-view'][data-part='item']]:relative [&_[data-scope='json-tree-view'][data-part='item']]:z-0 [&_[data-scope='json-tree-view'][data-part='item']]:box-border [&_[data-scope='json-tree-view'][data-part='item']]:flex [&_[data-scope='json-tree-view'][data-part='item']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='item']]:w-full [&_[data-scope='json-tree-view'][data-part='item']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='item']]:items-center [&_[data-scope='json-tree-view'][data-part='item']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='item']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:pe-1 [&_[data-scope='json-tree-view'][data-part='item']]:text-start [&_[data-scope='json-tree-view'][data-part='item']]:text-inherit [&_[data-scope='json-tree-view'][data-part='item']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='item']]:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:outline-none [&_[data-scope='json-tree-view'][data-part='item']]:select-none [&_[data-scope='json-tree-view'][data-part='item']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='item']]:before:absolute [&_[data-scope='json-tree-view'][data-part='item']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='item']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='item']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='item'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='item-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item-text']]:wrap-anywhere [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='branch-control']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='item']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))]", local.class)}>
+      {local.children}
+    </JsonTreeView.Root>;
+}
+function JsonTreeViewRootProvider(props) {
+    const [local, others] = splitProps(props, [
+        'asChild',
+        'children',
+        'class'
+    ]);
+    return <JsonTreeView.RootProvider asChild={local.asChild} {...others} data-slot="json-tree-view-root-provider" class={cn("box-border flex w-full min-w-0 flex-col font-mono text-xs leading-4 text-foreground data-disabled:opacity-50 [&_[data-kind='brace']]:font-medium [&_[data-kind='brace']]:text-muted-foreground [&_[data-kind='colon']]:text-muted-foreground [&_[data-kind='constructor']]:font-medium [&_[data-kind='constructor']]:text-muted-foreground [&_[data-kind='error-stack']]:text-destructive [&_[data-kind='function-body']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-body']]:italic [&_[data-kind='function-type']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='function-type']]:italic [&_[data-kind='key']]:font-medium [&_[data-kind='key']]:text-[color-mix(in_oklab,theme(--color-chart-1)_72%,theme(--color-foreground))] [&_[data-kind='operator']]:text-destructive [&_[data-kind='preview'][data-type='bigint']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='boolean']]:font-medium [&_[data-kind='preview'][data-type='boolean']]:text-[color-mix(in_oklab,theme(--color-chart-4)_74%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='error']]:text-destructive [&_[data-kind='preview'][data-type='function']]:text-[color-mix(in_oklab,theme(--color-chart-5)_72%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='null']]:font-medium [&_[data-kind='preview'][data-type='null']]:text-muted-foreground [&_[data-kind='preview'][data-type='null']]:italic [&_[data-kind='preview'][data-type='number']]:text-[color-mix(in_oklab,theme(--color-chart-3)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='string']]:text-[color-mix(in_oklab,theme(--color-success)_78%,theme(--color-foreground))] [&_[data-kind='preview'][data-type='undefined']]:font-medium [&_[data-kind='preview'][data-type='undefined']]:text-muted-foreground [&_[data-kind='preview'][data-type='undefined']]:italic [&_[data-kind='preview-text']]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch']]:flex [&_[data-scope='json-tree-view'][data-part='branch']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex [&_[data-scope='json-tree-view'][data-part='branch-content']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-content']]:flex-col [&_[data-scope='json-tree-view'][data-part='branch-content']]:gap-1 [&_[data-scope='json-tree-view'][data-part='branch-content']]:overflow-hidden [&_[data-scope='json-tree-view'][data-part='branch-control']]:relative [&_[data-scope='json-tree-view'][data-part='branch-control']]:z-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:box-border [&_[data-scope='json-tree-view'][data-part='branch-control']]:flex [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:w-full [&_[data-scope='json-tree-view'][data-part='branch-control']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='branch-control']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-control']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='branch-control']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:pe-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-start [&_[data-scope='json-tree-view'][data-part='branch-control']]:text-inherit [&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='branch-control']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:outline-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:select-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:absolute [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='branch-control']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-control']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='branch-control']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='branch-control'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='branch-control'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='branch-control'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:inline-flex [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:shrink-0 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:items-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:justify-center [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:text-[color-mix(in_oklab,theme(--color-muted-foreground)_42%,theme(--color-foreground))] [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-transform [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:duration-200 [&_[data-scope='json-tree-view'][data-part='branch-indicator']]:ease-in-out motion-reduce:[&_[data-scope='json-tree-view'][data-part='branch-indicator']]:transition-none [&_[data-scope='json-tree-view'][data-part='branch-indicator']_svg]:size-3 [&_[data-scope='json-tree-view'][data-part='branch-indicator'][data-state='open']]:rotate-90 [&_[data-scope='json-tree-view'][data-part='branch-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='branch-text']]:wrap-anywhere [&_[data-scope='json-tree-view'][data-part='item']]:relative [&_[data-scope='json-tree-view'][data-part='item']]:z-0 [&_[data-scope='json-tree-view'][data-part='item']]:box-border [&_[data-scope='json-tree-view'][data-part='item']]:flex [&_[data-scope='json-tree-view'][data-part='item']]:min-h-5 [&_[data-scope='json-tree-view'][data-part='item']]:w-full [&_[data-scope='json-tree-view'][data-part='item']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item']]:cursor-pointer [&_[data-scope='json-tree-view'][data-part='item']]:items-center [&_[data-scope='json-tree-view'][data-part='item']]:gap-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:rounded-xs [&_[data-scope='json-tree-view'][data-part='item']]:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:py-0.5 [&_[data-scope='json-tree-view'][data-part='item']]:ps-[calc(0.5rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:pe-1 [&_[data-scope='json-tree-view'][data-part='item']]:text-start [&_[data-scope='json-tree-view'][data-part='item']]:text-inherit [&_[data-scope='json-tree-view'][data-part='item']]:transition-[color,opacity] [&_[data-scope='json-tree-view'][data-part='item']]:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:outline-none [&_[data-scope='json-tree-view'][data-part='item']]:select-none [&_[data-scope='json-tree-view'][data-part='item']]:[font:inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:pointer-events-none [&_[data-scope='json-tree-view'][data-part='item']]:before:absolute [&_[data-scope='json-tree-view'][data-part='item']]:before:inset-y-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:start-[calc(0.25rem+((var(--depth,1)-1)*1rem))] [&_[data-scope='json-tree-view'][data-part='item']]:before:end-0 [&_[data-scope='json-tree-view'][data-part='item']]:before:-z-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:rounded-[inherit] [&_[data-scope='json-tree-view'][data-part='item']]:before:bg-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-1 [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-transparent [&_[data-scope='json-tree-view'][data-part='item']]:before:transition-[background-color,box-shadow] [&_[data-scope='json-tree-view'][data-part='item']]:before:duration-200 [&_[data-scope='json-tree-view'][data-part='item']]:before:ease-in-out [&_[data-scope='json-tree-view'][data-part='item']]:before:content-[''] [&_[data-scope='json-tree-view'][data-part='item']]:before:ring-inset motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:transition-none motion-reduce:[&_[data-scope='json-tree-view'][data-part='item']]:before:transition-none [&_[data-scope='json-tree-view'][data-part='item']:focus-visible]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:cursor-default [&_[data-scope='json-tree-view'][data-part='item'][data-disabled]]:text-muted-foreground [&_[data-scope='json-tree-view'][data-part='item'][data-focus]]:before:ring-ring [&_[data-scope='json-tree-view'][data-part='item'][data-selected]]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [&_[data-scope='json-tree-view'][data-part='item-text']]:min-w-0 [&_[data-scope='json-tree-view'][data-part='item-text']]:wrap-anywhere [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='branch-control']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))] [@media(hover:hover)]:[&_[data-scope='json-tree-view'][data-part='item']:not([data-disabled]):hover]:before:bg-[color-mix(in_oklab,theme(--color-accent)_72%,theme(--color-background))]", local.class)} {...others}>
+      {local.children}
+    </JsonTreeView.RootProvider>;
+}
+function JsonTreeViewTree(props) {
+    const [local, others] = splitProps(props, [
+        'arrow',
+        'class'
+    ]);
+    return <JsonTreeView.Tree {...others} arrow={local.arrow ?? <ChevronRightIcon aria-hidden="true"/>} data-slot="json-tree-view-tree" class={cn('flex min-w-0 flex-col gap-1', local.class)}/>;
+}
+const JsonTreeView_JsonTreeView = Object.assign(JsonTreeViewRoot, {
+    Root: JsonTreeViewRoot,
+    RootProvider: JsonTreeViewRootProvider,
+    Tree: JsonTreeViewTree
+});
+export { JsonTreeView_JsonTreeView as JsonTreeView, useJsonTreeView };

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

@@ -0,0 +1 @@
+export * from './JsonTreeView.js';

package/dist/components/json-tree-view/index.js

@@ -0,0 +1 @@
+export * from "./JsonTreeView.js";

package/dist/components/json-tree-view/index.jsx

@@ -0,0 +1 @@
+export * from "./JsonTreeView.jsx";

package/dist/components/kbd/Kbd.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLArkProps } from '@ark-ui/solid/factory';
+declare function KbdRoot(props: HTMLArkProps<'kbd'>): import("solid-js").JSX.Element;
+declare function KbdGroupPart(props: HTMLArkProps<'span'>): import("solid-js").JSX.Element;
+declare const Kbd: typeof KbdRoot & {
+    Root: typeof KbdRoot;
+    Group: typeof KbdGroupPart;
+};
+export { Kbd };

package/dist/components/kbd/Kbd.js

@@ -0,0 +1,36 @@
+import { createComponent, mergeProps } from "solid-js/web";
+import { ark } from "@ark-ui/solid/factory";
+import { splitProps } from "solid-js";
+import { cn } from "../../internal/cn.js";
+function KbdRoot(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.kbd, mergeProps(others, {
+        "data-scope": "kbd",
+        "data-part": "root",
+        "data-slot": "kbd-root",
+        get ["class"] () {
+            return cn('box-border inline-flex min-h-control-xs max-w-full min-w-control-xs flex-none items-center justify-center rounded-sm border border-border bg-muted px-2 py-0 text-center align-middle font-mono text-xs font-medium wrap-anywhere text-foreground tabular-nums shadow-[inset_0_-1px_0_color-mix(in_oklab,currentColor_12%,transparent)] select-none', local.class);
+        }
+    }));
+}
+function KbdGroupPart(props) {
+    const [local, others] = splitProps(props, [
+        'class'
+    ]);
+    return createComponent(ark.span, mergeProps(others, {
+        role: "group",
+        "data-scope": "kbd",
+        "data-part": "group",
+        "data-slot": "kbd-group",
+        get ["class"] () {
+            return cn('box-border inline-flex max-w-full flex-wrap items-center gap-1 border-0 bg-transparent p-0 align-middle text-muted-foreground shadow-none', local.class);
+        }
+    }));
+}
+const Kbd = Object.assign(KbdRoot, {
+    Root: KbdRoot,
+    Group: KbdGroupPart
+});
+export { Kbd };