@sewadah/selaras 0.1.1

package/dist/runtime/theme/checkbox.d.ts

@@ -0,0 +1,218 @@
+export declare const checkboxTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            box: string;
+            indicator: string;
+        };
+        neutral: {
+            box: string;
+            indicator: string;
+        };
+        secondary: {
+            box: string;
+            indicator: string;
+        };
+        success: {
+            box: string;
+            indicator: string;
+        };
+        danger: {
+            box: string;
+            indicator: string;
+        };
+        info: {
+            box: string;
+            indicator: string;
+        };
+        warning: {
+            box: string;
+            indicator: string;
+        };
+    };
+    size: {
+        sm: {
+            box: string;
+            indicator: string;
+            label: string;
+            description: string;
+        };
+        md: {
+            box: string;
+            indicator: string;
+            label: string;
+            description: string;
+        };
+        lg: {
+            box: string;
+            indicator: string;
+            label: string;
+            description: string;
+        };
+    };
+    variant: {
+        default: {};
+        card: {
+            root: string;
+            box: string;
+        };
+    };
+    invalid: {
+        true: {
+            box: string;
+        };
+    };
+}, {
+    root: string;
+    box: string;
+    indicator: string;
+    checkIcon: string;
+    indeterminateIcon: string;
+    label: string;
+    description: string;
+    labelGroup: string;
+}, undefined, {
+    color: {
+        primary: {
+            box: string;
+            indicator: string;
+        };
+        neutral: {
+            box: string;
+            indicator: string;
+        };
+        secondary: {
+            box: string;
+            indicator: string;
+        };
+        success: {
+            box: string;
+            indicator: string;
+        };
+        danger: {
+            box: string;
+            indicator: string;
+        };
+        info: {
+            box: string;
+            indicator: string;
+        };
+        warning: {
+            box: string;
+            indicator: string;
+        };
+    };
+    size: {
+        sm: {
+            box: string;
+            indicator: string;
+            label: string;
+            description: string;
+        };
+        md: {
+            box: string;
+            indicator: string;
+            label: string;
+            description: string;
+        };
+        lg: {
+            box: string;
+            indicator: string;
+            label: string;
+            description: string;
+        };
+    };
+    variant: {
+        default: {};
+        card: {
+            root: string;
+            box: string;
+        };
+    };
+    invalid: {
+        true: {
+            box: string;
+        };
+    };
+}, {
+    root: string;
+    box: string;
+    indicator: string;
+    checkIcon: string;
+    indeterminateIcon: string;
+    label: string;
+    description: string;
+    labelGroup: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: {
+            box: string;
+            indicator: string;
+        };
+        neutral: {
+            box: string;
+            indicator: string;
+        };
+        secondary: {
+            box: string;
+            indicator: string;
+        };
+        success: {
+            box: string;
+            indicator: string;
+        };
+        danger: {
+            box: string;
+            indicator: string;
+        };
+        info: {
+            box: string;
+            indicator: string;
+        };
+        warning: {
+            box: string;
+            indicator: string;
+        };
+    };
+    size: {
+        sm: {
+            box: string;
+            indicator: string;
+            label: string;
+            description: string;
+        };
+        md: {
+            box: string;
+            indicator: string;
+            label: string;
+            description: string;
+        };
+        lg: {
+            box: string;
+            indicator: string;
+            label: string;
+            description: string;
+        };
+    };
+    variant: {
+        default: {};
+        card: {
+            root: string;
+            box: string;
+        };
+    };
+    invalid: {
+        true: {
+            box: string;
+        };
+    };
+}, {
+    root: string;
+    box: string;
+    indicator: string;
+    checkIcon: string;
+    indeterminateIcon: string;
+    label: string;
+    description: string;
+    labelGroup: string;
+}>>;
+export type CheckboxThemeSlots = keyof (typeof checkboxTheme)['slots'];

package/dist/runtime/theme/checkbox.js

@@ -0,0 +1,113 @@
+import { tv } from "tailwind-variants";
+export const checkboxTheme = tv({
+  slots: {
+    root: "inline-flex items-center gap-2 cursor-pointer has-[[data-disabled]]:cursor-not-allowed has-[[data-disabled]]:opacity-50",
+    // Ported from RadioGroup's own hover/focus halo (see its theme file for
+    // the full derivation) - same mechanism, same size (18px box, 36px
+    // halo), same fixes: `isolate` so the halo's -z-10 pseudo keeps its own
+    // stacking context instead of leaking to the page root, ring-[1.5px]
+    // over plain ring-1 since a 1px stroke on this size circle/box rendered
+    // jagged at normal scale, outline-none replacing the old
+    // focus-visible:outline box now that the halo itself is the focus
+    // indicator. Unlike the radio item, this box keeps its own solid
+    // data-[state=checked]/indeterminate background fill (the standard
+    // checkbox convention, unlike radio's hollow ring) - the halo still
+    // shows correctly layered in front of that fill, since within this
+    // element's own isolated stacking context its own background paints
+    // first and the negative-z halo paints after it, same as the check
+    // icon itself. Only the unchecked resting background was dropped
+    // (transparent instead of --ui-bg), the same reason radio's item is
+    // hollow - an opaque fill there would block the halo from showing as
+    // a full disc instead of a ring cut off by the box's own edge.
+    box: "relative isolate flex shrink-0 items-center justify-center rounded-[var(--ui-radius-sm)] ring-[1.5px] ring-inset ring-[var(--ui-border)] transition-colors before:absolute before:-z-10 before:[transform:scale(0)] before:rounded-full before:bg-[var(--ui-border-hover)] before:opacity-35 before:transition-transform before:duration-200 before:content-[''] hover:before:[transform:scale(1)] focus-visible:outline-none focus-visible:before:[transform:scale(1)]",
+    indicator: "flex items-center justify-center",
+    // A hand-drawn stroke path (not an Icon/icon-registry glyph, unlike
+    // every other icon in this library) animated via stroke-dasharray/
+    // stroke-dashoffset - the classic "self-drawing" checkmark technique,
+    // which needs a real path to control, not an arbitrary swappable
+    // Iconify icon. This is a deliberate, one-off exception to the
+    // icon-registry pattern documented in use-icons.ts: this glyph isn't
+    // overridable via app.config.icons, only restylable (stroke width/
+    // color/duration) via these two :ui slots. dasharray/dashoffset are
+    // each set to the exact measured length of their own path
+    // (path.getTotalLength(), not a guess) so the "draw" finishes exactly
+    // at the stroke's own end with no visible overshoot or gap.
+    checkIcon: "[stroke-dasharray:20px] [stroke-dashoffset:20px] transition-[stroke-dashoffset] duration-200 data-[state=checked]:[stroke-dashoffset:0]",
+    indeterminateIcon: "[stroke-dasharray:14px] [stroke-dashoffset:14px] transition-[stroke-dashoffset] duration-200 data-[state=indeterminate]:[stroke-dashoffset:0]",
+    label: "select-none text-sm text-[var(--ui-text)]",
+    description: "block select-none text-xs text-[var(--ui-text-muted)]",
+    // Only rendered when there's a description (wrapping the label and
+    // description together so they stack under one another) - same font-
+    // baseline correction as RadioGroup's own labelGroup slot (see its
+    // theme file for the full derivation): the label text visually sits a
+    // bit lower than its own line box's true center, so this nudges the
+    // whole block up slightly to compensate.
+    labelGroup: "-mt-[2.5px]"
+  },
+  variants: {
+    // Fills/rings the box in the given color when checked/indeterminate,
+    // and colors the checkmark stroke (via the indicator's own
+    // `currentColor`) with that color's matching foreground token - same
+    // pairing Button's own `solid` variant already uses. Unchecked always
+    // stays the same neutral ring regardless of `color`.
+    color: {
+      primary: {
+        box: "data-[state=checked]:bg-[var(--ui-primary)] data-[state=checked]:ring-[var(--ui-primary)] data-[state=checked]:before:bg-[var(--ui-primary)] data-[state=indeterminate]:bg-[var(--ui-primary)] data-[state=indeterminate]:ring-[var(--ui-primary)] data-[state=indeterminate]:before:bg-[var(--ui-primary)]",
+        indicator: "text-[var(--ui-primary-foreground)]"
+      },
+      neutral: {
+        box: "data-[state=checked]:bg-[var(--ui-bg-inverted)] data-[state=checked]:ring-[var(--ui-bg-inverted)] data-[state=checked]:before:bg-[var(--ui-bg-inverted)] data-[state=indeterminate]:bg-[var(--ui-bg-inverted)] data-[state=indeterminate]:ring-[var(--ui-bg-inverted)] data-[state=indeterminate]:before:bg-[var(--ui-bg-inverted)]",
+        indicator: "text-[var(--ui-text-inverted)]"
+      },
+      secondary: {
+        box: "data-[state=checked]:bg-[var(--ui-secondary)] data-[state=checked]:ring-[var(--ui-secondary)] data-[state=checked]:before:bg-[var(--ui-secondary)] data-[state=indeterminate]:bg-[var(--ui-secondary)] data-[state=indeterminate]:ring-[var(--ui-secondary)] data-[state=indeterminate]:before:bg-[var(--ui-secondary)]",
+        indicator: "text-[var(--ui-secondary-foreground)]"
+      },
+      success: {
+        box: "data-[state=checked]:bg-[var(--ui-success)] data-[state=checked]:ring-[var(--ui-success)] data-[state=checked]:before:bg-[var(--ui-success)] data-[state=indeterminate]:bg-[var(--ui-success)] data-[state=indeterminate]:ring-[var(--ui-success)] data-[state=indeterminate]:before:bg-[var(--ui-success)]",
+        indicator: "text-[var(--ui-success-foreground)]"
+      },
+      danger: {
+        box: "data-[state=checked]:bg-[var(--ui-danger)] data-[state=checked]:ring-[var(--ui-danger)] data-[state=checked]:before:bg-[var(--ui-danger)] data-[state=indeterminate]:bg-[var(--ui-danger)] data-[state=indeterminate]:ring-[var(--ui-danger)] data-[state=indeterminate]:before:bg-[var(--ui-danger)]",
+        indicator: "text-[var(--ui-danger-foreground)]"
+      },
+      info: {
+        box: "data-[state=checked]:bg-[var(--ui-info)] data-[state=checked]:ring-[var(--ui-info)] data-[state=checked]:before:bg-[var(--ui-info)] data-[state=indeterminate]:bg-[var(--ui-info)] data-[state=indeterminate]:ring-[var(--ui-info)] data-[state=indeterminate]:before:bg-[var(--ui-info)]",
+        indicator: "text-[var(--ui-info-foreground)]"
+      },
+      warning: {
+        box: "data-[state=checked]:bg-[var(--ui-warning)] data-[state=checked]:ring-[var(--ui-warning)] data-[state=checked]:before:bg-[var(--ui-warning)] data-[state=indeterminate]:bg-[var(--ui-warning)] data-[state=indeterminate]:ring-[var(--ui-warning)] data-[state=indeterminate]:before:bg-[var(--ui-warning)]",
+        indicator: "text-[var(--ui-warning-foreground)]"
+      }
+    },
+    // Same +4px-per-step scale RadioGroup's own `size` variant uses.
+    size: {
+      sm: { box: "size-3.5 before:-inset-[7px]", indicator: "size-2.5", label: "text-xs", description: "text-xs" },
+      md: { box: "size-4.5 before:-inset-[9px]", indicator: "size-3.5", label: "text-sm", description: "text-xs" },
+      lg: { box: "size-5.5 before:-inset-[11px]", indicator: "size-4", label: "text-base", description: "text-sm" }
+    },
+    // Wraps the checkbox+label in a bordered box, highlighted when
+    // checked - same pattern already proven on RadioGroup's own `card`
+    // variant (see radio-group.ts), applied here to root/box instead of
+    // itemWrapper/item since there's one control, not a list.
+    variant: {
+      default: {},
+      card: {
+        root: "w-full items-start gap-3 rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] px-3.5 py-3 transition-colors has-[[data-state=checked]]:border-[var(--ui-primary)] has-[[data-state=checked]]:bg-[var(--ui-primary-soft)]",
+        box: "mt-0.5"
+      }
+    },
+    // Declared last (after color) so tailwind-merge lets its own
+    // data-[state=checked]/indeterminate ring override win over color's -
+    // invalid should always show danger regardless of what color was also
+    // requested, not whichever variant happens to compose later. See
+    // RadioGroup's own theme file, which already has this order right.
+    invalid: {
+      true: { box: "ring-[var(--ui-danger)] data-[state=checked]:ring-[var(--ui-danger)] data-[state=indeterminate]:ring-[var(--ui-danger)]" }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md"
+  }
+});

package/dist/runtime/theme/chip.d.ts

@@ -0,0 +1,155 @@
+export declare const chipTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    variant: {
+        solid: "";
+        soft: "";
+        outline: "";
+    };
+    size: {
+        sm: {
+            root: string;
+            leadingIcon: string;
+            removeIcon: string;
+        };
+        md: {
+            root: string;
+            leadingIcon: string;
+            removeIcon: string;
+        };
+        lg: {
+            root: string;
+            leadingIcon: string;
+            removeIcon: string;
+        };
+    };
+    rounded: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+    removable: {
+        true: {};
+    };
+}, {
+    root: string;
+    leadingIcon: string;
+    label: string;
+    remove: string;
+    removeIcon: string;
+}, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    variant: {
+        solid: "";
+        soft: "";
+        outline: "";
+    };
+    size: {
+        sm: {
+            root: string;
+            leadingIcon: string;
+            removeIcon: string;
+        };
+        md: {
+            root: string;
+            leadingIcon: string;
+            removeIcon: string;
+        };
+        lg: {
+            root: string;
+            leadingIcon: string;
+            removeIcon: string;
+        };
+    };
+    rounded: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+    removable: {
+        true: {};
+    };
+}, {
+    root: string;
+    leadingIcon: string;
+    label: string;
+    remove: string;
+    removeIcon: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
+    variant: {
+        solid: "";
+        soft: "";
+        outline: "";
+    };
+    size: {
+        sm: {
+            root: string;
+            leadingIcon: string;
+            removeIcon: string;
+        };
+        md: {
+            root: string;
+            leadingIcon: string;
+            removeIcon: string;
+        };
+        lg: {
+            root: string;
+            leadingIcon: string;
+            removeIcon: string;
+        };
+    };
+    rounded: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+    removable: {
+        true: {};
+    };
+}, {
+    root: string;
+    leadingIcon: string;
+    label: string;
+    remove: string;
+    removeIcon: string;
+}>>;
+export type ChipThemeSlots = keyof (typeof chipTheme)['slots'];

package/dist/runtime/theme/chip.js

@@ -0,0 +1,86 @@
+import { tv } from "tailwind-variants";
+export const chipTheme = tv({
+  slots: {
+    // rounded-sm by default, same as Badge's own shape - `rounded` opts a
+    // specific chip into the fully-rounded pill look instead. Padding/
+    // height below is Badge's original scale, carried over here; Badge
+    // itself moved to a tighter one (see badge.ts).
+    root: "inline-flex items-center gap-1 rounded-[var(--ui-radius-sm)] font-medium whitespace-nowrap",
+    leadingIcon: "shrink-0",
+    label: "truncate",
+    // inline-flex items-center justify-center centers the icon in both
+    // axes and keeps the button's own box vertically centered against the
+    // label's line box via the root's items-center, not just tall enough
+    // to look right by accident (the exact bug already fixed once for
+    // Input/Select's clear button - a plain <button> with no centering
+    // inherits ambient line-height on height only).
+    remove: "inline-flex shrink-0 items-center justify-center rounded-full p-0.5 opacity-70 transition-[opacity,background-color] hover:opacity-100 hover:bg-current/10 active:bg-current/15 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:opacity-30 disabled:pointer-events-none",
+    removeIcon: "shrink-0"
+  },
+  variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
+    variant: {
+      solid: "",
+      soft: "",
+      outline: ""
+    },
+    size: {
+      sm: { root: "h-5 px-1.5 text-xs", leadingIcon: "size-3", removeIcon: "size-3" },
+      md: { root: "h-6 px-2 text-xs", leadingIcon: "size-3.5", removeIcon: "size-3.5" },
+      lg: { root: "h-7 px-2.5 text-sm", leadingIcon: "size-4", removeIcon: "size-4" }
+    },
+    rounded: {
+      true: { root: "rounded-full" }
+    },
+    disabled: {
+      true: { root: "opacity-50 pointer-events-none" }
+    },
+    // The remove button's own p-0.5 (plus its hover-circle inset) already
+    // adds visual weight on its own side, so root's end padding (the side
+    // the remove button actually renders on, in either direction - it's
+    // the last flex child) trims down one step per size to compensate -
+    // start padding is untouched.
+    removable: {
+      true: {}
+    }
+  },
+  compoundVariants: [
+    { size: "sm", removable: true, class: { root: "pe-1" } },
+    { size: "md", removable: true, class: { root: "pe-1.5" } },
+    { size: "lg", removable: true, class: { root: "pe-2" } },
+    { color: "primary", variant: "solid", class: { root: "bg-[var(--ui-primary)] text-[var(--ui-primary-foreground)]" } },
+    { color: "primary", variant: "soft", class: { root: "bg-[var(--ui-primary-soft)] text-[var(--ui-primary)]" } },
+    { color: "primary", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-primary)] text-[var(--ui-primary)]" } },
+    { color: "neutral", variant: "solid", class: { root: "bg-[var(--ui-neutral)] text-[var(--ui-neutral-foreground)]" } },
+    { color: "neutral", variant: "soft", class: { root: "bg-[var(--ui-neutral-soft)] text-[var(--ui-text)]" } },
+    { color: "neutral", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-border)] text-[var(--ui-text)]" } },
+    { color: "secondary", variant: "solid", class: { root: "bg-[var(--ui-secondary)] text-[var(--ui-secondary-foreground)]" } },
+    { color: "secondary", variant: "soft", class: { root: "bg-[var(--ui-secondary-soft)] text-[var(--ui-secondary)]" } },
+    { color: "secondary", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-secondary)] text-[var(--ui-secondary)]" } },
+    { color: "success", variant: "solid", class: { root: "bg-[var(--ui-success)] text-[var(--ui-success-foreground)]" } },
+    { color: "success", variant: "soft", class: { root: "bg-[var(--ui-success-soft)] text-[var(--ui-success)]" } },
+    { color: "success", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-success)] text-[var(--ui-success)]" } },
+    { color: "danger", variant: "solid", class: { root: "bg-[var(--ui-danger)] text-[var(--ui-danger-foreground)]" } },
+    { color: "danger", variant: "soft", class: { root: "bg-[var(--ui-danger-soft)] text-[var(--ui-danger)]" } },
+    { color: "danger", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-danger)] text-[var(--ui-danger)]" } },
+    { color: "info", variant: "solid", class: { root: "bg-[var(--ui-info)] text-[var(--ui-info-foreground)]" } },
+    { color: "info", variant: "soft", class: { root: "bg-[var(--ui-info-soft)] text-[var(--ui-info)]" } },
+    { color: "info", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-info)] text-[var(--ui-info)]" } },
+    { color: "warning", variant: "solid", class: { root: "bg-[var(--ui-warning)] text-[var(--ui-warning-foreground)]" } },
+    { color: "warning", variant: "soft", class: { root: "bg-[var(--ui-warning-soft)] text-[var(--ui-warning)]" } },
+    { color: "warning", variant: "outline", class: { root: "ring-1 ring-inset ring-[var(--ui-warning)] text-[var(--ui-warning)]" } }
+  ],
+  defaultVariants: {
+    color: "neutral",
+    variant: "soft",
+    size: "md"
+  }
+});

package/dist/runtime/theme/code-button.d.ts

@@ -0,0 +1,32 @@
+export declare const codeButtonTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    icon: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string;
+    icon: string;
+}>>;
+export type CodeButtonThemeSlots = keyof (typeof codeButtonTheme)['slots'];

package/dist/runtime/theme/code-button.js

@@ -0,0 +1,7 @@
+import { tv } from "tailwind-variants";
+export const codeButtonTheme = tv({
+  slots: {
+    root: "inline-flex items-center gap-1.5 rounded-[var(--ui-radius-sm)] bg-[var(--ui-bg-elevated)] px-2 py-1 font-mono text-sm text-[var(--ui-text)] transition-colors hover:bg-[var(--ui-bg-elevated)]/70",
+    icon: "size-3.5 shrink-0 text-[var(--ui-text-muted)]"
+  }
+});

package/dist/runtime/theme/code-tree.d.ts

@@ -0,0 +1,50 @@
+export declare const codeTreeTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            pre?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            tree?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            pre?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            tree?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    tree: string;
+    content: string;
+    pre: string;
+    empty: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            pre?: import("tailwind-variants").ClassValue;
+            empty?: import("tailwind-variants").ClassValue;
+            tree?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    tree: string;
+    content: string;
+    pre: string;
+    empty: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string;
+    tree: string;
+    content: string;
+    pre: string;
+    empty: string;
+}>>;
+export type CodeTreeThemeSlots = keyof (typeof codeTreeTheme)['slots'];

package/dist/runtime/theme/code-tree.js

@@ -0,0 +1,13 @@
+import { tv } from "tailwind-variants";
+export const codeTreeTheme = tv({
+  slots: {
+    root: "flex overflow-hidden rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] bg-[var(--ui-bg)]",
+    // FileTree's own root box (border/bg/padding) is stripped via its :ui
+    // override below - this wrapper provides that framing instead, so the
+    // two panels read as one split view rather than a box inside a box.
+    tree: "w-56 shrink-0 overflow-auto border-e border-[var(--ui-border)] p-2",
+    content: "min-w-0 flex-1 overflow-auto p-4",
+    pre: "whitespace-pre font-mono text-sm text-[var(--ui-text)]",
+    empty: "flex flex-1 items-center justify-center p-4 text-center text-sm text-[var(--ui-text-muted)]"
+  }
+});