@akira-io/ui 1.3.0 → 2.0.0

package/dist/chunk-VA6A4HZ2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/alert.tsx","../src/components/ui/checkbox.tsx","../src/components/ui/field-context.ts","../src/components/ui/field-error.tsx","../src/components/ui/field.tsx","../src/components/ui/password-input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { elevatedSurface } from '@/lib/language';\nimport { cn } from '@/lib/utils';\nimport { useUiLabels } from '@/locales/context';\nimport type { SlotNameProps } from '@/types';\n\nconst alertVariants = cva(\n    `${elevatedSurface} relative w-full px-5 py-4 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current`,\n    {\n        variants: {\n            variant: {\n                default: 'bg-card text-card-foreground',\n                destructive:\n                    'border-destructive/30 bg-destructive/10 text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/80',\n                warning:\n                    'ring-warning/20 bg-warning/10 text-warning *:data-[slot=alert-description]:text-warning/80',\n                info: 'ring-info/20 bg-info/10 text-info *:data-[slot=alert-description]:text-info/80',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n        },\n    },\n);\n\nexport interface AlertLabels {\n    warningLabel: string;\n    infoLabel: string;\n}\n\nexport const alertDefaultLabels: AlertLabels = {\n    warningLabel: 'Warning',\n    infoLabel: 'Information',\n};\n\ntype AlertVariant = VariantProps<typeof alertVariants>['variant'];\n\nconst SEVERITY_LABELS: Partial<\n    Record<NonNullable<AlertVariant>, keyof AlertLabels>\n> = {\n    warning: 'warningLabel',\n    info: 'infoLabel',\n};\n\nfunction Alert({\n    className,\n    variant,\n    labels,\n    slotName = 'alert',\n    ...props\n}: React.ComponentProps<'div'> &\n    VariantProps<typeof alertVariants> &\n    SlotNameProps & { labels?: Partial<AlertLabels> }) {\n    const resolved = useUiLabels('alert', alertDefaultLabels, labels);\n    const severity = variant ? SEVERITY_LABELS[variant] : undefined;\n\n    return (\n        <div\n            role=\"alert\"\n            aria-label={severity ? resolved[severity] : undefined}\n            className={cn(alertVariants({ variant }), className)}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nfunction AlertTitle({\n    className,\n    slotName = 'alert-title',\n    ...props\n}: React.ComponentProps<'div'> & SlotNameProps) {\n    return (\n        <div\n            className={cn(\n                'min-h-4 font-medium tracking-tight col-start-2 line-clamp-1',\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nfunction AlertDescription({\n    className,\n    slotName = 'alert-description',\n    ...props\n}: React.ComponentProps<'div'> & SlotNameProps) {\n    return (\n        <div\n            className={cn(\n                'gap-1 text-sm [&_p]:leading-relaxed col-start-2 grid justify-items-start text-muted-foreground',\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nexport { Alert, AlertDescription, AlertTitle };\n","import * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { focusRing } from '@/lib/language';\nimport { cn } from '@/lib/utils';\nimport type { SlotNameProps } from '@/types';\n\nfunction Checkbox({\n    className,\n    slotName = 'checkbox',\n    ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root> & SlotNameProps) {\n    return (\n        <CheckboxPrimitive.Root\n            className={cn(\n                `peer size-5 shadow-xs shrink-0 rounded-md border border-border transition-all disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground ${focusRing}`,\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        >\n            <CheckboxPrimitive.Indicator\n                data-slot=\"checkbox-indicator\"\n                className=\"flex items-center justify-center text-current transition-none\"\n            >\n                <CheckIcon className=\"size-3.5\" />\n            </CheckboxPrimitive.Indicator>\n        </CheckboxPrimitive.Root>\n    );\n}\n\nexport { Checkbox };\n","import * as React from 'react';\n\nexport type FieldOrientation = 'vertical' | 'horizontal';\n\nexport interface FieldContextValue {\n    controlId: string;\n    descriptionId: string;\n    errorId: string;\n    orientation: FieldOrientation;\n    invalid: boolean;\n    required: boolean;\n    hasDescription: boolean;\n    setHasDescription: (present: boolean) => void;\n}\n\nexport const FieldContext = React.createContext<FieldContextValue | null>(null);\n\nexport function useOptionalField(): FieldContextValue | null {\n    return React.useContext(FieldContext);\n}\n\nexport function useField(): FieldContextValue {\n    const field = useOptionalField();\n\n    if (!field) {\n        throw new Error('Field parts must be rendered inside a Field.');\n    }\n\n    return field;\n}\n","import * as React from 'react';\n\nimport { useOptionalField } from '@/components/ui/field-context';\nimport { cn } from '@/lib/utils';\nimport type { SlotNameProps } from '@/types';\n\ninterface FieldErrorProps extends React.ComponentProps<'p'> {\n    message?: string;\n}\n\nexport function FieldError({\n    message,\n    className,\n    slotName = 'field-error',\n    ...props\n}: FieldErrorProps & SlotNameProps) {\n    const field = useOptionalField();\n\n    if (!message) {\n        return null;\n    }\n\n    return (\n        <p\n            id={field?.errorId}\n            className={cn(\n                'ml-1 text-xs font-medium text-destructive group-data-[orientation=horizontal]/field:col-span-2 group-data-[orientation=horizontal]/field:row-start-3',\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        >\n            {message}\n        </p>\n    );\n}\n","import { Slot } from '@radix-ui/react-slot';\nimport * as React from 'react';\n\nimport {\n    FieldContext,\n    useField,\n    type FieldContextValue,\n    type FieldOrientation,\n} from '@/components/ui/field-context';\nimport { FieldError } from '@/components/ui/field-error';\nimport { Label } from '@/components/ui/label';\nimport { cn } from '@/lib/utils';\nimport type { SlotNameProps } from '@/types';\n\nexport interface FieldLabels {\n    requiredLabel: string;\n}\n\ninterface FieldProps extends React.ComponentProps<'div'> {\n    orientation?: FieldOrientation;\n    error?: string;\n    invalid?: boolean;\n    required?: boolean;\n}\n\nexport function Field({\n    className,\n    children,\n    id,\n    orientation = 'vertical',\n    error,\n    invalid,\n    required = false,\n    slotName = 'field',\n    ...props\n}: FieldProps & SlotNameProps) {\n    const generatedId = React.useId();\n    const fieldId = id ?? generatedId;\n    const [hasDescription, setHasDescription] = React.useState(false);\n    const isInvalid = invalid ?? Boolean(error);\n\n    const field = React.useMemo<FieldContextValue>(\n        () => ({\n            controlId: fieldId,\n            descriptionId: `${fieldId}-description`,\n            errorId: `${fieldId}-error`,\n            orientation,\n            invalid: isInvalid,\n            required,\n            hasDescription,\n            setHasDescription,\n        }),\n        [fieldId, orientation, isInvalid, required, hasDescription],\n    );\n\n    return (\n        <FieldContext.Provider value={field}>\n            <div\n                data-orientation={orientation}\n                data-invalid={isInvalid ? 'true' : undefined}\n                className={cn(\n                    'group/field',\n                    orientation === 'horizontal'\n                        ? 'gap-x-4 gap-y-1 grid grid-cols-[1fr_auto] items-center'\n                        : 'gap-2 flex flex-col',\n                    className,\n                )}\n                {...props}\n                data-slot={slotName}\n            >\n                {children}\n                <FieldError message={error} />\n            </div>\n        </FieldContext.Provider>\n    );\n}\n\nexport function FieldGroup({\n    className,\n    slotName = 'field-group',\n    ...props\n}: React.ComponentProps<'div'> & SlotNameProps) {\n    return (\n        <div\n            className={cn('gap-6 flex w-full flex-col', className)}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\ninterface FieldLabelProps extends React.ComponentProps<typeof Label> {\n    requiredLabel?: FieldLabels['requiredLabel'];\n}\n\nexport function FieldLabel({\n    className,\n    children,\n    requiredLabel = 'Required',\n    slotName = 'field-label',\n    ...props\n}: FieldLabelProps & SlotNameProps) {\n    const { controlId, invalid, required } = useField();\n\n    return (\n        <Label\n            htmlFor={controlId}\n            className={cn(\n                'gap-1 flex items-center group-data-[orientation=horizontal]/field:col-start-1 group-data-[orientation=horizontal]/field:row-start-1',\n                invalid && 'text-destructive',\n                className,\n            )}\n            {...props}\n            slotName={slotName}\n        >\n            {children}\n            {required ? (\n                <>\n                    <span\n                        data-slot=\"field-required\"\n                        aria-hidden=\"true\"\n                        className=\"text-destructive\"\n                    >\n                        *\n                    </span>\n                    <span className=\"sr-only\">{requiredLabel}</span>\n                </>\n            ) : null}\n        </Label>\n    );\n}\n\nexport function FieldDescription({\n    className,\n    slotName = 'field-description',\n    ...props\n}: React.ComponentProps<'p'> & SlotNameProps) {\n    const { descriptionId, setHasDescription } = useField();\n\n    React.useEffect(() => {\n        setHasDescription(true);\n\n        return () => setHasDescription(false);\n    }, [setHasDescription]);\n\n    return (\n        <p\n            id={descriptionId}\n            className={cn(\n                'ml-1 text-xs font-medium text-muted-foreground group-data-[orientation=horizontal]/field:col-start-1 group-data-[orientation=horizontal]/field:row-start-2',\n                className,\n            )}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nexport function FieldControl({\n    className,\n    ...props\n}: React.ComponentProps<typeof Slot>) {\n    const {\n        controlId,\n        descriptionId,\n        errorId,\n        invalid,\n        required,\n        hasDescription,\n    } = useField();\n\n    const requiredProps: React.InputHTMLAttributes<HTMLElement> = required\n        ? { required: true }\n        : {};\n\n    const describedBy = [\n        hasDescription ? descriptionId : null,\n        invalid ? errorId : null,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    return (\n        <Slot\n            data-field-control=\"true\"\n            id={controlId}\n            aria-describedby={describedBy || undefined}\n            aria-invalid={invalid ? true : undefined}\n            {...requiredProps}\n            className={cn(\n                'group-data-[orientation=horizontal]/field:col-start-2 group-data-[orientation=horizontal]/field:row-span-2 group-data-[orientation=horizontal]/field:row-start-1 group-data-[orientation=horizontal]/field:justify-self-end',\n                className,\n            )}\n            {...props}\n        />\n    );\n}\n","import { Eye, EyeOff } from 'lucide-react';\nimport * as React from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { cn } from '@/lib/utils';\nimport { useUiLabels } from '@/locales/context';\nimport type { SlotNameProps } from '@/types';\n\nexport interface PasswordInputLabels {\n    showLabel: string;\n    hideLabel: string;\n}\n\nexport const passwordInputDefaultLabels: PasswordInputLabels = {\n    showLabel: 'Show password',\n    hideLabel: 'Hide password',\n};\n\ninterface PasswordInputProps extends Omit<\n    React.ComponentProps<typeof Input>,\n    'type'\n> {\n    revealable?: boolean;\n    showLabel?: PasswordInputLabels['showLabel'];\n    hideLabel?: PasswordInputLabels['hideLabel'];\n}\n\nexport function PasswordInput({\n    className,\n    revealable = true,\n    showLabel,\n    hideLabel,\n    slotName = 'password-input',\n    ...props\n}: PasswordInputProps & SlotNameProps) {\n    const labels = useUiLabels('passwordInput', passwordInputDefaultLabels, {\n        showLabel,\n        hideLabel,\n    });\n    const [visible, setVisible] = React.useState(false);\n\n    return (\n        <div className=\"relative w-full\" data-slot={slotName}>\n            <Input\n                type={visible ? 'text' : 'password'}\n                className={cn(revealable && 'pr-12', className)}\n                {...props}\n            />\n            {revealable ? (\n                <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    slotName=\"password-input-toggle\"\n                    aria-label={visible ? labels.hideLabel : labels.showLabel}\n                    aria-pressed={visible}\n                    disabled={props.disabled}\n                    onMouseDown={(event) => event.preventDefault()}\n                    onClick={() => setVisible((current) => !current)}\n                    className=\"right-1 absolute top-1/2 -translate-y-1/2\"\n                >\n                    {visible ? (\n                        <EyeOff aria-hidden=\"true\" />\n                    ) : (\n                        <Eye aria-hidden=\"true\" />\n                    )}\n                </Button>\n            ) : null}\n        </div>\n    );\n}\n"],"mappings":"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","names":["jsx","jsx","React","jsx","React","jsx","jsxs"]}

package/dist/{chunk-SBLZ6T3D.js → chunk-YBXRJSR3.js}

@@ -1,8 +1,14 @@
-import { focusRing, glassControl, controlFill, cn } from './chunk-I5UZAJB4.js';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva } from 'class-variance-authority';
-import { jsx } from 'react/jsx-runtime';
+import {
+  cn,
+  controlFill,
+  focusRing,
+  glassControl
+} from "./chunk-KHOA4TEI.js";
 
+// src/components/ui/toggle.tsx
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
 var toggleVariants = cva(
   `inline-flex items-center justify-center gap-2 rounded-xl text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:font-semibold data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 transition-[color,box-shadow] aria-invalid:ring-destructive/20 aria-invalid:border-destructive ${focusRing}`,
   {
@@ -40,6 +46,8 @@ function Toggle({
   );
 }
 
-export { Toggle, toggleVariants };
-//# sourceMappingURL=chunk-SBLZ6T3D.js.map
-//# sourceMappingURL=chunk-SBLZ6T3D.js.map
+export {
+  toggleVariants,
+  Toggle
+};
+//# sourceMappingURL=chunk-YBXRJSR3.js.map

package/dist/chunk-YBXRJSR3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/toggle.tsx"],"sourcesContent":["import * as TogglePrimitive from '@radix-ui/react-toggle';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { controlFill, focusRing, glassControl } from '@/lib/language';\nimport { cn } from '@/lib/utils';\nimport type { SlotNameProps } from '@/types';\n\nconst toggleVariants = cva(\n    `inline-flex items-center justify-center gap-2 rounded-xl text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:font-semibold data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 transition-[color,box-shadow] aria-invalid:ring-destructive/20 aria-invalid:border-destructive ${focusRing}`,\n    {\n        variants: {\n            variant: {\n                default: 'bg-transparent',\n                outline: `${glassControl} ${controlFill} hover:bg-accent hover:text-accent-foreground`,\n            },\n            size: {\n                default: 'h-11 px-4 min-w-11',\n                sm: 'h-9 px-3 min-w-9',\n                lg: 'h-12 px-6 min-w-12',\n            },\n        },\n        defaultVariants: {\n            variant: 'default',\n            size: 'default',\n        },\n    },\n);\n\nfunction Toggle({\n    className,\n    variant,\n    size,\n    slotName = 'toggle',\n    ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants> &\n    SlotNameProps) {\n    return (\n        <TogglePrimitive.Root\n            className={cn(toggleVariants({ variant, size, className }))}\n            {...props}\n            data-slot={slotName}\n        />\n    );\n}\n\nexport { Toggle, toggleVariants };\n"],"mappings":";;;;;;;;AAAA,YAAY,qBAAqB;AACjC,SAAS,WAA8B;AAsC/B;AA/BR,IAAM,iBAAiB;AAAA,EACnB,4bAA4b,SAAS;AAAA,EACrc;AAAA,IACI,UAAU;AAAA,MACN,SAAS;AAAA,QACL,SAAS;AAAA,QACT,SAAS,GAAG,YAAY,IAAI,WAAW;AAAA,MAC3C;AAAA,MACA,MAAM;AAAA,QACF,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,MACR;AAAA,IACJ;AAAA,IACA,iBAAiB;AAAA,MACb,SAAS;AAAA,MACT,MAAM;AAAA,IACV;AAAA,EACJ;AACJ;AAEA,SAAS,OAAO;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACP,GAEmB;AACf,SACI;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACG,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,MACzD,GAAG;AAAA,MACJ,aAAW;AAAA;AAAA,EACf;AAER;","names":[]}

package/dist/code.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { S as SlotNameProps } from './types-cmBL8zOc.js';
-export { C as CodeBlock, a as CodeBlockLabels, b as CodeBlockProps, J as JsonViewer, c as JsonViewerLabels, d as JsonViewerProps, e as codeBlockLabels, j as jsonViewerLabels } from './json-viewer-BARA2RCW.js';
+import { S as SlotNameProps } from './types-CMZRvMV5.js';
+export { C as CodeBlock, a as CodeBlockLabels, b as CodeBlockProps, J as JsonViewer, c as JsonViewerLabels, d as JsonViewerProps, e as codeBlockLabels, j as jsonViewerLabels } from './json-viewer-Bssv9mTD.js';
 import '@tanstack/react-table';
 import 'lucide-react';
 

package/dist/code.js

@@ -1,10 +1,24 @@
-import { CopyButton } from './chunk-MCMBS2SB.js';
-import { useUiLabels } from './chunk-QNF4LJVT.js';
-import { cn, compactRadius, controlFill, elevatedSurface, nestedSurfaceReset, Button, focusRing } from './chunk-I5UZAJB4.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React2 from 'react';
-import { FileCode, ChevronRight } from 'lucide-react';
+'use client';
 
+"use client";
+import {
+  CopyButton
+} from "./chunk-UXVI326F.js";
+import {
+  useUiLabels
+} from "./chunk-E26KKMGS.js";
+import {
+  Button,
+  cn,
+  compactRadius,
+  controlFill,
+  elevatedSurface,
+  focusRing,
+  nestedSurfaceReset
+} from "./chunk-KHOA4TEI.js";
+
+// src/components/ui/code.tsx
+import { jsx } from "react/jsx-runtime";
 function Code({
   className,
   slotName = "code",
@@ -24,6 +38,13 @@ function Code({
     }
   );
 }
+
+// src/components/ui/code-block.tsx
+import * as React2 from "react";
+
+// src/components/ui/code-block-header.tsx
+import { FileCode } from "lucide-react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function CodeBlockHeader({
   filename,
   language,
@@ -38,8 +59,8 @@ function CodeBlockHeader({
       className: "gap-2 px-4 py-2 flex items-center border-b border-border",
       "data-slot": slotName,
       children: [
-        /* @__PURE__ */ jsx(FileCode, { className: "size-4 shrink-0 text-muted-foreground" }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(FileCode, { className: "size-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx2(
           "span",
           {
             "data-slot": "code-block-filename",
@@ -47,7 +68,7 @@ function CodeBlockHeader({
             children: filename
           }
         ),
-        language !== void 0 && /* @__PURE__ */ jsx(
+        language !== void 0 && /* @__PURE__ */ jsx2(
           "span",
           {
             "data-slot": "code-block-language",
@@ -55,7 +76,7 @@ function CodeBlockHeader({
             children: language
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           CopyButton,
           {
             value: code,
@@ -69,12 +90,15 @@ function CodeBlockHeader({
   );
 }
 
+// src/hooks/use-highlighted-code.ts
+import * as React from "react";
+
 // src/lib/shiki.ts
 var LIGHT_THEME = "github-light";
 var DARK_THEME = "github-dark";
 var pending = null;
 function loadCodeToHtml() {
-  pending ??= import('shiki').then((module) => module.codeToHtml).catch(() => null);
+  pending ??= import("shiki").then((module) => module.codeToHtml).catch(() => null);
   return pending;
 }
 async function highlightCode(code, language) {
@@ -95,10 +119,10 @@ async function highlightCode(code, language) {
 
 // src/hooks/use-highlighted-code.ts
 function useHighlightedCode(code, language, html) {
-  const [highlighted, setHighlighted] = React2.useState(
+  const [highlighted, setHighlighted] = React.useState(
     html ?? null
   );
-  React2.useEffect(() => {
+  React.useEffect(() => {
     if (html !== void 0) {
       setHighlighted(html);
       return;
@@ -185,6 +209,9 @@ function splitHighlightedLines(html) {
   }
   return lines.length > 0 ? lines : null;
 }
+
+// src/components/ui/code-block.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var codeBlockLabels = {
   copyLabel: "Copy",
   copiedLabel: "Copied",
@@ -233,7 +260,7 @@ function CodeBlock({
     }
     setClipped(body.scrollHeight > body.clientHeight + 1);
   }, [maxHeight, expanded, lines, markup]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cn(
@@ -245,7 +272,7 @@ function CodeBlock({
       ...props,
       "data-slot": slotName,
       children: [
-        filename === void 0 ? /* @__PURE__ */ jsx(
+        filename === void 0 ? /* @__PURE__ */ jsx3(
           CopyButton,
           {
             value: code,
@@ -253,7 +280,7 @@ function CodeBlock({
             copiedLabel: labels.copiedLabel,
             className: "top-2 right-2 absolute z-10 text-muted-foreground"
           }
-        ) : /* @__PURE__ */ jsx(
+        ) : /* @__PURE__ */ jsx3(
           CodeBlockHeader,
           {
             filename,
@@ -263,14 +290,14 @@ function CodeBlock({
             copiedLabel: labels.copiedLabel
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx3(
           "div",
           {
             ref: bodyRef,
             "data-slot": "code-block-body",
             style: { maxHeight: expanded ? void 0 : maxHeight },
             className: "py-4 font-mono text-sm leading-6 overflow-auto rounded-[inherit]",
-            children: /* @__PURE__ */ jsx("pre", { className: "w-max min-w-full", children: /* @__PURE__ */ jsx("code", { "data-slot": "code-block-code", children: lines.map((line, index) => /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx3("pre", { className: "w-max min-w-full", children: /* @__PURE__ */ jsx3("code", { "data-slot": "code-block-code", children: lines.map((line, index) => /* @__PURE__ */ jsx3(
               CodeBlockLine,
               {
                 number: index + 1,
@@ -283,7 +310,7 @@ function CodeBlock({
             )) }) })
           }
         ),
-        clipped && /* @__PURE__ */ jsx(
+        clipped && /* @__PURE__ */ jsx3(
           CodeBlockExpander,
           {
             expanded,
@@ -304,7 +331,7 @@ function CodeBlockLine({
   emphasised,
   slotName = "code-block-line"
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "span",
     {
       "data-highlighted": emphasised ? "" : void 0,
@@ -314,7 +341,7 @@ function CodeBlockLine({
       ),
       "data-slot": slotName,
       children: [
-        lineNumbers && /* @__PURE__ */ jsx(
+        lineNumbers && /* @__PURE__ */ jsx3(
           "span",
           {
             "data-slot": "code-block-gutter",
@@ -323,7 +350,7 @@ function CodeBlockLine({
             children: number
           }
         ),
-        markup === void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "code-block-source", children: line }) : /* @__PURE__ */ jsx(
+        markup === void 0 ? /* @__PURE__ */ jsx3("span", { "data-slot": "code-block-source", children: line }) : /* @__PURE__ */ jsx3(
           "span",
           {
             "data-slot": "code-block-source",
@@ -341,20 +368,20 @@ function CodeBlockExpander({
   onToggle,
   slotName = "code-block-expander"
 }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: "inset-x-0 bottom-0 pt-10 pb-2 absolute flex justify-center",
       "data-slot": slotName,
       children: [
-        !expanded && /* @__PURE__ */ jsx(
+        !expanded && /* @__PURE__ */ jsx3(
           "span",
           {
             "aria-hidden": "true",
             className: "inset-0 pointer-events-none absolute bg-gradient-to-t from-card to-transparent"
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx3(
           Button,
           {
             type: "button",
@@ -369,6 +396,13 @@ function CodeBlockExpander({
   );
 }
 
+// src/components/ui/json-viewer.tsx
+import * as React4 from "react";
+
+// src/components/ui/json-node.tsx
+import { ChevronRight } from "lucide-react";
+import * as React3 from "react";
+
 // src/lib/json-value.ts
 var CIRCULAR_MARKER = "[Circular]";
 function jsonKind(value) {
@@ -427,6 +461,9 @@ function serialisable(value, ancestors) {
 function stringifyJson(value) {
   return JSON.stringify(serialisable(value, []), null, 2) ?? "null";
 }
+
+// src/components/ui/json-node.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var LEAF_CLASS = {
   string: "text-success",
   number: "text-primary",
@@ -453,7 +490,7 @@ function JsonKey({
   name,
   slotName = "json-viewer-key"
 }) {
-  return /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", "data-slot": slotName, children: [
+  return /* @__PURE__ */ jsxs3("span", { className: "font-medium text-foreground", "data-slot": slotName, children: [
     name,
     ":"
   ] });
@@ -470,26 +507,26 @@ function JsonNode({
   const kind = jsonKind(value);
   const branch = isBranch(kind);
   const circular = branch && ancestors.includes(value);
-  const [open, setOpen] = React2.useState(depth < initialDepth);
-  const entries = React2.useMemo(
+  const [open, setOpen] = React3.useState(depth < initialDepth);
+  const entries = React3.useMemo(
     () => branch && !circular ? entriesOf(value) : [],
     [branch, circular, value]
   );
-  const trail = React2.useMemo(
+  const trail = React3.useMemo(
     () => branch ? [...ancestors, value] : ancestors,
     [branch, ancestors, value]
   );
   if (!branch || circular) {
-    return /* @__PURE__ */ jsxs("div", { className: "gap-2 py-0.5 pl-5 flex", "data-slot": slotName, children: [
-      name !== void 0 && /* @__PURE__ */ jsx(JsonKey, { name }),
-      circular ? /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs3("div", { className: "gap-2 py-0.5 pl-5 flex", "data-slot": slotName, children: [
+      name !== void 0 && /* @__PURE__ */ jsx4(JsonKey, { name }),
+      circular ? /* @__PURE__ */ jsx4(
         "span",
         {
           "data-slot": "json-viewer-circular",
           className: "text-muted-foreground italic",
           children: labels.circularLabel
         }
-      ) : /* @__PURE__ */ jsx(
+      ) : /* @__PURE__ */ jsx4(
         "span",
         {
           "data-slot": "json-viewer-value",
@@ -500,8 +537,8 @@ function JsonNode({
     ] });
   }
   const [opening, closing] = BRACKETS[kind === "array" ? "array" : "object"];
-  return /* @__PURE__ */ jsxs("div", { "data-slot": slotName, children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3("div", { "data-slot": slotName, children: [
+    /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
@@ -514,7 +551,7 @@ function JsonNode({
           focusRing
         ),
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx4(
             ChevronRight,
             {
               "aria-hidden": "true",
@@ -524,10 +561,10 @@ function JsonNode({
               )
             }
           ),
-          name !== void 0 && /* @__PURE__ */ jsx(JsonKey, { name }),
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: opening }),
-          !open && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
+          name !== void 0 && /* @__PURE__ */ jsx4(JsonKey, { name }),
+          /* @__PURE__ */ jsx4("span", { className: "text-muted-foreground", children: opening }),
+          !open && /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsx4(
               "span",
               {
                 "data-slot": "json-viewer-summary",
@@ -535,13 +572,13 @@ function JsonNode({
                 children: labels.entriesLabel(entries.length)
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: closing })
+            /* @__PURE__ */ jsx4("span", { className: "text-muted-foreground", children: closing })
           ] })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs("div", { className: "ml-1.5 pl-3 border-l border-border", children: [
-      entries.map(([key, item]) => /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsxs3("div", { className: "ml-1.5 pl-3 border-l border-border", children: [
+      entries.map(([key, item]) => /* @__PURE__ */ jsx4(
         JsonNode,
         {
           name: key,
@@ -553,10 +590,13 @@ function JsonNode({
         },
         key
       )),
-      /* @__PURE__ */ jsx("div", { className: "pl-5 text-muted-foreground", children: closing })
+      /* @__PURE__ */ jsx4("div", { className: "pl-5 text-muted-foreground", children: closing })
     ] })
   ] });
 }
+
+// src/components/ui/json-viewer.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var jsonViewerLabels = {
   copyLabel: "Copy",
   copiedLabel: "Copied",
@@ -587,7 +627,7 @@ function JsonViewer({
     circularLabel,
     entriesLabel
   });
-  const labels = React2.useMemo(
+  const labels = React4.useMemo(
     () => ({
       expandLabel: text.expandLabel,
       collapseLabel: text.collapseLabel,
@@ -601,7 +641,7 @@ function JsonViewer({
       text.entriesLabel
     ]
   );
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn(
@@ -613,7 +653,7 @@ function JsonViewer({
       ...props,
       "data-slot": slotName,
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx5(
           CopyButton,
           {
             value: stringifyJson(value),
@@ -622,13 +662,13 @@ function JsonViewer({
             className: "top-2 right-2 absolute z-10 text-muted-foreground"
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             "data-slot": "json-viewer-body",
             style: { maxHeight },
             className: "p-4 pr-12 font-mono text-sm leading-6 overflow-auto rounded-[inherit]",
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx5(
               JsonNode,
               {
                 value,
@@ -644,7 +684,11 @@ function JsonViewer({
     }
   );
 }
-
-export { Code, CodeBlock, JsonViewer, codeBlockLabels, jsonViewerLabels };
-//# sourceMappingURL=code.js.map
+export {
+  Code,
+  CodeBlock,
+  JsonViewer,
+  codeBlockLabels,
+  jsonViewerLabels
+};
 //# sourceMappingURL=code.js.map