@epilot/spark-ui 0.24.0 → 0.25.0

package/dist/components/accordion.cjs

@@ -1,10 +1,10 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-let _base_ui_react_accordion = require("@base-ui/react/accordion");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _base_ui_react_accordion = require("@base-ui/react/accordion");
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cn = require("cn");
 //#region src/components/accordion.tsx

package/dist/components/accordion.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import * as React$1 from "react";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 
 //#region src/components/accordion.d.ts
 type AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline';

package/dist/components/accordion.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
+import "react";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { KeyboardArrowDown } from "@epilot/spark-icons";
-import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {

package/dist/components/alert-dialog.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_alert_dialog = require("@base-ui/react/alert-dialog");
 let cn = require("cn");

package/dist/components/alert-dialog.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { Button, buttonVariants } from "./button.js";
-import { Close } from "@epilot/spark-icons";
 import "react";
+import { Close } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 //#region src/components/alert-dialog.tsx

package/dist/components/autocomplete.cjs

@@ -5,9 +5,9 @@ const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_field = require("./field.cjs");
 const require_components_input = require("./input.cjs");
 const require_components_input_group = require("./input-group.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_autocomplete = require("@base-ui/react/autocomplete");
 let cn = require("cn");

package/dist/components/autocomplete.js

@@ -4,8 +4,8 @@ import { cn } from "../utils/cn.js";
 import { useFieldControl } from "./field.js";
 import { Input } from "./input.js";
 import { InputGroup } from "./input-group.js";
-import { Close, KeyboardArrowDown } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { Close, KeyboardArrowDown } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
 //#region src/components/autocomplete.tsx

package/dist/components/avatar.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar as Avatar$1 } from "@base-ui/react/avatar";

package/dist/components/badge.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/badge.tsx

package/dist/components/bar-chart.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
 import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";

package/dist/components/box.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { containerChrome, containerInteractiveClasses, containerPaddingAll, radiusClasses } from "../lib/container-chrome.js";
+import { cn } from "../utils/cn.js";
 import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";

package/dist/components/bubble.d.cts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "outline" | "destructive" | "secondary" | "default" | "muted" | "tinted" | null | undefined;
+  variant?: "ghost" | "outline" | "secondary" | "destructive" | "default" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/bubble.d.ts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "outline" | "destructive" | "secondary" | "default" | "muted" | "tinted" | null | undefined;
+  variant?: "ghost" | "outline" | "secondary" | "destructive" | "default" | "muted" | "tinted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/button-group.js

@@ -1,7 +1,7 @@
 "use client";
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Button } from "@base-ui/react/button";

package/dist/components/button.d.cts

@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "primary" | "destructive" | "secondary" | "tertiary" | "bare" | null | undefined;
-  color?: "primary" | "accent" | "neutral" | "danger" | "destructive" | null | undefined;
-  size?: "small" | "icon" | "default" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
+  color?: "accent" | "neutral" | "primary" | "destructive" | "danger" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Preferred: `primary` | `neutral` | `destructive`. `accent` / `danger` stay as aliases. */
 type SparkButtonColor = 'primary' | 'accent' | 'neutral' | 'destructive' | 'danger';

package/dist/components/button.d.ts

@@ -7,9 +7,9 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "primary" | "destructive" | "secondary" | "tertiary" | "bare" | null | undefined;
-  color?: "primary" | "accent" | "neutral" | "danger" | "destructive" | null | undefined;
-  size?: "small" | "icon" | "default" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  variant?: "primary" | "secondary" | "tertiary" | "bare" | "destructive" | null | undefined;
+  color?: "accent" | "neutral" | "primary" | "destructive" | "danger" | null | undefined;
+  size?: "small" | "default" | "medium" | "icon-small" | "icon" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** Preferred: `primary` | `neutral` | `destructive`. `accent` / `danger` stay as aliases. */
 type SparkButtonColor = 'primary' | 'accent' | 'neutral' | 'destructive' | 'danger';

package/dist/components/button.js

@@ -1,7 +1,7 @@
 "use client";
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";

package/dist/components/calendar.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _daypicker_react = require("@daypicker/react");
 let cn = require("cn");

package/dist/components/calendar.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { buttonVariants } from "./button.js";
-import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import "react";
+import { ChevronLeft, ChevronRight } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { DayPicker } from "@daypicker/react";
 //#region src/components/calendar.tsx

package/dist/components/callout.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let cn = require("cn");

package/dist/components/callout.d.cts

@@ -8,7 +8,7 @@ import { SparkIcon } from "@epilot/spark-icons";
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "neutral" | "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "error" | "success" | "warning" | "info" | "neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/callout.d.ts

@@ -1,14 +1,14 @@
 "use client";
 
 import { ButtonProps } from "./button.js";
-import { SparkIcon } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { SparkIcon } from "@epilot/spark-icons";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "neutral" | "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "error" | "success" | "warning" | "info" | "neutral" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/callout.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { Button } from "./button.js";
-import { Cancel, CheckCircle, Info, Warning } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { Cancel, CheckCircle, Info, Warning } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/callout.tsx

package/dist/components/card.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { containerChrome, containerInteractiveClasses, containerPaddingX, radiusClasses } from "../lib/container-chrome.js";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/components/checkbox.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";

package/dist/components/dialog.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_components_button = require("./button.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_dialog = require("@base-ui/react/dialog");
 let cn = require("cn");

package/dist/components/dialog.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { buttonVariants } from "./button.js";
-import { Close } from "@epilot/spark-icons";
 import "react";
+import { Close } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 //#region src/components/dialog.tsx

package/dist/components/dropdown-menu.cjs

@@ -1,9 +1,9 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_menu = require("@base-ui/react/menu");
 let cn = require("cn");

package/dist/components/dropdown-menu.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { Check, ChevronRight } from "@epilot/spark-icons";
 import "react";
+import { Check, ChevronRight } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 //#region src/components/dropdown-menu.tsx

package/dist/components/empty-state.d.cts

@@ -6,7 +6,7 @@ import { SparkIcon } from "@epilot/spark-icons";
 
 //#region src/components/empty-state.d.ts
 declare const emptyStateVariants: (props?: ({
-  variant?: "ghost" | "dashed" | null | undefined;
+  variant?: "dashed" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {
   title: string;

package/dist/components/empty-state.d.ts

@@ -1,12 +1,12 @@
 "use client";
 
-import { SparkIcon } from "@epilot/spark-icons";
 import { ReactNode } from "react";
+import { SparkIcon } from "@epilot/spark-icons";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/empty-state.d.ts
 declare const emptyStateVariants: (props?: ({
-  variant?: "ghost" | "dashed" | null | undefined;
+  variant?: "dashed" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface EmptyStateProps extends VariantProps<typeof emptyStateVariants> {
   title: string;

package/dist/components/entity-card.d.ts

@@ -1,8 +1,8 @@
 "use client";
 
 import { Tone } from "../lib/tones.js";
-import { SparkIcon } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { SparkIcon } from "@epilot/spark-icons";
 
 //#region src/components/entity-card.d.ts
 declare const EntityCard: ({

package/dist/components/icon.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../utils/cn.js";
 import { accentByColor } from "../lib/accent-colors.js";
+import { cn } from "../utils/cn.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon.tsx

package/dist/components/input-date.cjs

@@ -6,9 +6,9 @@ const require_components_button = require("./button.cjs");
 const require_components_input_group = require("./input-group.cjs");
 const require_components_calendar = require("./calendar.cjs");
 const require_components_popover = require("./popover.cjs");
-let _epilot_spark_icons = require("@epilot/spark-icons");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let ictus = require("ictus");
 let cn = require("cn");

package/dist/components/input-date.js

@@ -5,8 +5,8 @@ import { Button } from "./button.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
 import { Calendar } from "./calendar.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
-import { CalendarMonth } from "@epilot/spark-icons";
 import * as React$1 from "react";
+import { CalendarMonth } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { apply, formatDate, isDateMaskKey, parseDate } from "ictus";
 //#region src/components/input-date.tsx

package/dist/components/input-otp.cjs

@@ -1,7 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_components_field = require("./field.cjs");
 const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
+const require_components_field = require("./field.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let _base_ui_react_otp_field = require("@base-ui/react/otp-field");

package/dist/components/input-otp.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { useFieldControl } from "./field.js";
 import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
+import { useFieldControl } from "./field.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { OTPField } from "@base-ui/react/otp-field";

package/dist/components/input.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_components_field = require("./field.cjs");
 const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
+const require_components_field = require("./field.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/input.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { useFieldControl } from "./field.js";
 import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
+import { useFieldControl } from "./field.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/components/line-chart.cjs

@@ -1,11 +1,11 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
 const require_components_chart = require("./chart.cjs");
-const require_hooks_use_chart_zoom = require("../hooks/use-chart-zoom.cjs");
 const require_utils_chart_time_ticks = require("../utils/chart-time-ticks.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);

package/dist/components/line-chart.js

@@ -1,10 +1,10 @@
 "use client";
-import { cn } from "../utils/cn.js";
+import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { useReducedMotion } from "../hooks/use-reduced-motion.js";
+import { cn } from "../utils/cn.js";
 import { getDocumentLang, localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
 import { ChartTooltipCard, ChartZoomResetButton, clampTooltipPosition, useMeasuredSize } from "./chart.js";
-import { useAnimatedChartDomain, useChartZoom } from "../hooks/use-chart-zoom.js";
 import { buildTimeTicks } from "../utils/chart-time-ticks.js";
 import * as React$1 from "react";
 import { useCallback, useMemo } from "react";

package/dist/components/list.cjs

@@ -18,6 +18,22 @@ const radiusRowClasses = {
 	"3xl": "group-data-[list-radius=3xl]/list:first:rounded-t-3xl group-data-[list-radius=3xl]/list:last:rounded-b-3xl",
 	full: "group-data-[list-radius=full]/list:first:rounded-t-full group-data-[list-radius=full]/list:last:rounded-b-full"
 };
+const lookClasses = [
+	"group-data-[look=soft]/list:bg-gray-3 dark:group-data-[look=soft]/list:bg-gray-a3",
+	"group-data-[look=soft-accent]/list:bg-(--spark-a3)",
+	"group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-3 dark:group-data-[look=surface]/list:bg-gray-a3",
+	"group-data-[look=surface-accent]/list:border-spark-a6 group-data-[look=surface-accent]/list:bg-(--spark-surface)",
+	"group-data-[look=outline]/list:border-gray-a6",
+	"group-data-[look=outline-accent]/list:border-spark-a6",
+	"group-data-[look=solid]/list:bg-gray-1",
+	"group-data-[look=solid-accent]/list:bg-spark-9"
+];
+const borderLookClasses = [
+	"group-data-[look=surface]/list:border-gray-a6",
+	"group-data-[look=surface-accent]/list:border-spark-a6",
+	"group-data-[look=outline]/list:border-gray-a6",
+	"group-data-[look=outline-accent]/list:border-spark-a6"
+];
 const ListItemContext = react.createContext({ recent: false });
 const ListItemColumnContext = react.createContext({ isEnd: false });
 function List({ className, variant = "soft", color = "neutral", radius = "lg", gap = .5, style, ...props }) {
@@ -39,46 +55,80 @@ function List({ className, variant = "soft", color = "neutral", radius = "lg", g
 		...props
 	});
 }
+function splitListItemChildren(children, render, skeleton) {
+	if (skeleton) return {};
+	const childArray = react.Children.toArray(children);
+	const rendersAnchorOrButton = react.isValidElement(render) && (render.type === "a" || render.type === "button");
+	const leadingChild = childArray.find((child) => react.isValidElement(child) && child.type === ListItemLeading);
+	const leading = rendersAnchorOrButton && leadingChild?.props.interactive ? leadingChild : void 0;
+	const detail = childArray.find((child) => react.isValidElement(child) && child.type === ListItemDetail);
+	return {
+		leading,
+		detail,
+		rowChildren: childArray.filter((child) => child !== leading && child !== detail)
+	};
+}
+function itemClassName({ className, hoistLeading, hasDetail, isSelected, interactive }) {
+	const detailSelected = hasDetail && isSelected;
+	return (0, cn.cn)("relative has-focus-visible:z-10", !hoistLeading && detailSelected && "bg-spark-a3", hoistLeading && [
+		"flex min-w-0 items-center gap-4 pl-4",
+		hasDetail && "flex-wrap gap-y-0 *:data-[slot=list-item-detail]:pl-0",
+		isSelected && "bg-spark-a3",
+		interactive && [
+			"cursor-pointer",
+			hasDetail ? "has-focus-visible:bg-spark-a3 has-[[data-slot=list-item-row]:hover]:bg-spark-a3" : "hover:bg-spark-a3 has-focus-visible:bg-spark-a3",
+			"has-focus-visible:ring-2 has-focus-visible:ring-offset-2"
+		]
+	], "group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b", "group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b", detailSelected ? borderLookClasses : lookClasses, Object.values(radiusRowClasses), className);
+}
 function ListItem({ className, children, recent, selected, skeleton, render, ...props }) {
 	const interactive = !skeleton && render != null;
 	const recentCtx = react.useMemo(() => ({ recent: recent ?? false }), [recent]);
-	const rendersAnchorOrButton = react.isValidElement(render) && (render.type === "a" || render.type === "button");
-	const childArray = skeleton ? void 0 : react.Children.toArray(children);
-	const leadingChild = childArray?.find((child) => react.isValidElement(child) && child.type === ListItemLeading);
-	const hoistLeading = rendersAnchorOrButton && Boolean(leadingChild?.props.interactive);
-	const leading = hoistLeading ? leadingChild : void 0;
+	const { leading, detail, rowChildren } = splitListItemChildren(children, render, skeleton);
+	const hoistLeading = leading != null;
+	const selectOnItem = hoistLeading || detail != null;
+	const isSelected = !skeleton && selected;
 	const row = (0, _base_ui_react_use_render.useRender)({
 		defaultTagName: "div",
 		render: skeleton ? void 0 : render,
 		props: {
 			"data-slot": "list-item-row",
 			"aria-hidden": skeleton ? true : void 0,
-			className: (0, cn.cn)("flex min-h-[2.75rem] items-center gap-4 py-3 text-left no-underline", hoistLeading ? "min-w-0 flex-1 pr-4" : "w-full rounded-[inherit] px-4", !hoistLeading && !skeleton && selected && "bg-spark-a3", interactive && [
+			className: (0, cn.cn)("flex min-h-[2.75rem] items-center gap-4 py-3 text-left no-underline", hoistLeading ? "min-w-0 flex-1 pr-4" : detail ? "w-full rounded-t-[inherit] px-4" : "w-full rounded-[inherit] px-4", !selectOnItem && isSelected && "bg-spark-a3", interactive && [
 				"group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none",
 				"disabled:pointer-events-none disabled:opacity-50",
 				hoistLeading ? "focus-visible:outline-hidden" : ["hover:bg-spark-a3 focus-visible:bg-spark-a3", "focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden"]
 			]),
-			children: skeleton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemSkeleton, {}) : hoistLeading ? childArray?.filter((child) => child !== leadingChild) : children
+			children: skeleton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemSkeleton, {}) : rowChildren
 		}
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
 		"data-slot": "list-item",
-		className: (0, cn.cn)("relative has-focus-visible:z-10", hoistLeading && [
-			"flex min-w-0 items-center gap-4 pl-4",
-			!skeleton && selected && "bg-spark-a3",
-			interactive && [
-				"cursor-pointer",
-				"hover:bg-spark-a3 has-focus-visible:bg-spark-a3",
-				"has-focus-visible:ring-2 has-focus-visible:ring-offset-2"
-			]
-		], "group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b", "group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b", "group-data-[look=soft]/list:bg-gray-a2 dark:group-data-[look=soft]/list:bg-gray-a3", "group-data-[look=soft-accent]/list:bg-(--spark-a3)", "group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-2", "group-data-[look=surface-accent]/list:border-spark-a6 group-data-[look=surface-accent]/list:bg-(--spark-surface)", "group-data-[look=outline]/list:border-gray-a6", "group-data-[look=outline-accent]/list:border-spark-a6", "group-data-[look=solid]/list:bg-(--neutral-1)", "group-data-[look=solid-accent]/list:bg-spark-9", Object.values(radiusRowClasses), className),
+		className: itemClassName({
+			className,
+			hoistLeading,
+			hasDetail: detail != null,
+			isSelected,
+			interactive
+		}),
 		...props,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ListItemContext.Provider, {
 			value: recentCtx,
-			children: [leading, row]
+			children: [
+				leading,
+				row,
+				detail
+			]
 		})
 	});
 }
+function ListItemDetail({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "list-item-detail",
+		className: (0, cn.cn)("w-full min-w-0 cursor-auto px-4 pb-3", className),
+		...props
+	});
+}
 function ListItemSkeleton() {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "size-10 shrink-0 rounded-full" }),
@@ -155,6 +205,7 @@ function ListItemTrailing({ className, ...props }) {
 exports.List = List;
 exports.ListItem = ListItem;
 exports.ListItemContent = ListItemContent;
+exports.ListItemDetail = ListItemDetail;
 exports.ListItemLeading = ListItemLeading;
 exports.ListItemPreline = ListItemPreline;
 exports.ListItemSubline = ListItemSubline;