@godxjp/ui 13.17.3 → 14.0.0

package/dist/components/charts/area-chart.d.ts

@@ -0,0 +1,8 @@
+import type { AreaChartProp } from "../../props/components/charts.prop";
+export type { AreaChartProp, AreaChartProp as AreaChartProps, } from "../../props/components/charts.prop";
+/**
+ * Area chart — magnitude over an ordered category axis. `stacked` accumulates
+ * series; `curved` smooths the line. Import from the tree-shaken
+ * `@godxjp/ui/charts` entry; requires the `recharts` optional peer.
+ */
+export declare function AreaChart(props: AreaChartProp): import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/area-chart.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { CartesianChart } from "./chart-cartesian";
+function AreaChart(props) {
+  return /* @__PURE__ */ jsx(CartesianChart, { kind: "area", ...props });
+}
+export {
+  AreaChart
+};

package/dist/components/charts/bar-chart.d.ts

@@ -0,0 +1,8 @@
+import type { BarChartProp } from "../../props/components/charts.prop";
+export type { BarChartProp, BarChartProp as BarChartProps, } from "../../props/components/charts.prop";
+/**
+ * Bar chart — compare a value across categories. `stacked` stacks series into one
+ * bar; `horizontal` puts the category axis on the left. Import from the
+ * tree-shaken `@godxjp/ui/charts` entry; requires the `recharts` optional peer.
+ */
+export declare function BarChart(props: BarChartProp): import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/bar-chart.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { CartesianChart } from "./chart-cartesian";
+function BarChart(props) {
+  return /* @__PURE__ */ jsx(CartesianChart, { kind: "bar", ...props });
+}
+export {
+  BarChart
+};

package/dist/components/charts/chart-cartesian.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { ChartDatum, ChartSeriesProp } from "../../props/components/charts.prop";
+/**
+ * Shared cartesian renderer for Line / Bar / Area. Internal — the filename pascal
+ * (`ChartCartesian`) is intentionally NOT exported, so this is not a catalog entry.
+ */
+type CartesianKind = "line" | "bar" | "area";
+type CartesianChartProps = {
+    kind: CartesianKind;
+    data: ChartDatum[];
+    series: ChartSeriesProp[];
+    categoryKey: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    size?: "xs" | "sm" | "md" | "lg";
+    height?: number;
+    showLegend?: boolean;
+    showGrid?: boolean;
+    numberFormat?: Intl.NumberFormatOptions;
+    emptyMessage?: string;
+    className?: string;
+    id?: string;
+    /** line/area */
+    curved?: boolean;
+    /** bar/area */
+    stacked?: boolean;
+    /** bar */
+    horizontal?: boolean;
+};
+export declare function CartesianChart({ kind, data, series, categoryKey, label, description, size, height, showLegend, showGrid, numberFormat, emptyMessage, className, id, curved, stacked, horizontal, }: CartesianChartProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/charts/chart-cartesian.js

@@ -0,0 +1,178 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Area,
+  AreaChart as RAreaChart,
+  Bar,
+  BarChart as RBarChart,
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart as RLineChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import { EmptyState } from "../data-display/empty-state";
+import { useTranslation } from "../../i18n/use-translation";
+import {
+  ChartFrame,
+  chartColor,
+  chartHeight,
+  useChartNumberFormat
+} from "./chart-frame";
+import { buildCartesianSummary } from "./chart-summary";
+function CartesianChart({
+  kind,
+  data,
+  series,
+  categoryKey,
+  label,
+  description,
+  size = "md",
+  height,
+  showLegend = true,
+  showGrid = true,
+  numberFormat,
+  emptyMessage,
+  className,
+  id,
+  curved = false,
+  stacked = false,
+  horizontal = false
+}) {
+  const { t, locale } = useTranslation();
+  const fmt = useChartNumberFormat(numberFormat);
+  const list = React.useMemo(
+    () => new Intl.ListFormat(locale, { style: "narrow", type: "unit" }),
+    [locale]
+  );
+  const hasData = data.length > 0 && series.length > 0;
+  const summary = buildCartesianSummary(
+    data,
+    series,
+    categoryKey,
+    fmt,
+    list,
+    (c) => t("chart.summaryCartesian", { series: fmt.format(c.series), points: fmt.format(c.points) })
+  );
+  const resolvedHeight = chartHeight(size, height);
+  const tickFormatter = (value) => fmt.format(value);
+  const curve = curved ? "monotone" : "linear";
+  const axes = (numberAxisVertical) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    showGrid ? /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--border))" }) : null,
+    numberAxisVertical ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: categoryKey,
+          tickLine: false,
+          stroke: "hsl(var(--muted-foreground))",
+          fontSize: 12
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tickFormatter,
+          tickLine: false,
+          stroke: "hsl(var(--muted-foreground))",
+          fontSize: 12
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          type: "number",
+          tickFormatter,
+          tickLine: false,
+          stroke: "hsl(var(--muted-foreground))",
+          fontSize: 12
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          type: "category",
+          dataKey: categoryKey,
+          tickLine: false,
+          stroke: "hsl(var(--muted-foreground))",
+          fontSize: 12
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Tooltip, { formatter: (value) => fmt.format(Number(value)) }),
+    showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null
+  ] });
+  const chart = () => {
+    if (kind === "line") {
+      return /* @__PURE__ */ jsxs(RLineChart, { data, children: [
+        axes(true),
+        series.map((s, i) => /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: curve,
+            dataKey: s.dataKey,
+            name: s.label ?? s.dataKey,
+            stroke: chartColor(i, s.color),
+            strokeWidth: 2,
+            dot: false
+          },
+          s.dataKey
+        ))
+      ] });
+    }
+    if (kind === "area") {
+      return /* @__PURE__ */ jsxs(RAreaChart, { data, children: [
+        axes(true),
+        series.map((s, i) => /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: curve,
+            dataKey: s.dataKey,
+            name: s.label ?? s.dataKey,
+            stackId: stacked ? "stack" : void 0,
+            stroke: chartColor(i, s.color),
+            fill: chartColor(i, s.color),
+            fillOpacity: 0.2,
+            strokeWidth: 2
+          },
+          s.dataKey
+        ))
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(RBarChart, { data, layout: horizontal ? "vertical" : "horizontal", children: [
+      axes(!horizontal),
+      series.map((s, i) => /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: s.dataKey,
+          name: s.label ?? s.dataKey,
+          stackId: stacked ? "stack" : void 0,
+          fill: chartColor(i, s.color),
+          radius: 2
+        },
+        s.dataKey
+      ))
+    ] });
+  };
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      label,
+      description,
+      summaryRows: summary.rows,
+      imgSummary: summary.img,
+      hasData,
+      height: resolvedHeight,
+      className,
+      id,
+      children: hasData ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: chart() }) : /* @__PURE__ */ jsx(EmptyState, { title: emptyMessage ?? t("chart.empty") })
+    }
+  );
+}
+export {
+  CartesianChart
+};

package/dist/components/charts/chart-frame.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+/**
+ * Shared chart chrome — owns the cross-cutting concerns every chart needs so the
+ * individual chart wrappers stay tiny:
+ *   - a11y: a `<figure>` with a visible `<figcaption>` title and a screen-reader
+ *     text alternative (WCAG 1.1.1) describing the plotted data, with the SVG
+ *     itself marked `role="img"` so AT announces one labelled graphic.
+ *   - i18n: a locale-aware `Intl.NumberFormat` shared by axis ticks + tooltips.
+ *   - tokens: the `--chart-1..6` palette + size→height tiers.
+ *
+ * Internal — NOT a public catalog primitive (re-exported only through the chart
+ * wrappers). See check-mcp-orphans ALLOWLIST.
+ */
+/** Canonical decorative chart palette (foundation tokens). */
+export declare const CHART_COLORS: readonly ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)", "var(--chart-6)"];
+/** Resolve a series/slice colour: explicit wins, else cycle the palette by index. */
+export declare function chartColor(index: number, explicit?: string): string;
+/** Resolve the canvas height: explicit px overrides the `size` tier. */
+export declare function chartHeight(size?: "xs" | "sm" | "md" | "lg", height?: number): number;
+/** A locale-bound number formatter for the active app locale. */
+export declare function useChartNumberFormat(options?: Intl.NumberFormatOptions): Intl.NumberFormat;
+type ChartFrameProps = {
+    /** Visible caption; also the accessible name via `aria-labelledby` → `<figcaption>`. */
+    label: React.ReactNode;
+    /** Extra context appended to the screen-reader description. */
+    description?: React.ReactNode;
+    /** Pre-formatted "category: value" rows for the screen-reader text alternative. */
+    summaryRows: string[];
+    /** Concise summary read on the `role="img"` SVG wrapper. */
+    imgSummary: string;
+    /** True when there is data to plot (otherwise children render an empty state). */
+    hasData: boolean;
+    height: number;
+    className?: string;
+    id?: string;
+    children: React.ReactNode;
+};
+/**
+ * The accessible figure wrapper. The recharts SVG passed as `children` is wrapped
+ * in a `role="img"` element with a short `aria-label`; the full data is exposed as
+ * a sibling visually-hidden list referenced by the figure's `aria-describedby`.
+ */
+export declare function ChartFrame({ label, description, summaryRows, imgSummary, hasData, height, className, id, children, }: ChartFrameProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/charts/chart-frame.js

@@ -0,0 +1,72 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { useTranslation } from "../../i18n/use-translation";
+const CHART_COLORS = [
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)",
+  "var(--chart-6)"
+];
+function chartColor(index, explicit) {
+  return explicit ?? CHART_COLORS[index % CHART_COLORS.length];
+}
+const SIZE_HEIGHT = {
+  xs: 160,
+  sm: 220,
+  md: 300,
+  lg: 400
+};
+function chartHeight(size = "md", height) {
+  return height ?? SIZE_HEIGHT[size];
+}
+function useChartNumberFormat(options) {
+  const { locale } = useTranslation();
+  return React.useMemo(() => new Intl.NumberFormat(locale, options), [locale, options]);
+}
+function ChartFrame({
+  label,
+  description,
+  summaryRows,
+  imgSummary,
+  hasData,
+  height,
+  className,
+  id,
+  children
+}) {
+  const reactId = React.useId();
+  const titleId = `${id ?? reactId}-title`;
+  const descId = `${id ?? reactId}-desc`;
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      id,
+      "data-slot": "chart",
+      className: cn("ui-chart", className),
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
+      children: [
+        /* @__PURE__ */ jsx("figcaption", { id: titleId, className: "ui-chart-title", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "ui-chart-canvas", style: { height }, role: "img", "aria-label": imgSummary, children }),
+        /* @__PURE__ */ jsxs("p", { id: descId, className: "sr-only", children: [
+          description ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            description,
+            " "
+          ] }) : null,
+          hasData ? imgSummary : null
+        ] }),
+        hasData ? /* @__PURE__ */ jsx("ul", { className: "sr-only", children: summaryRows.map((row, i) => /* @__PURE__ */ jsx("li", { children: row }, i)) }) : null
+      ]
+    }
+  );
+}
+export {
+  CHART_COLORS,
+  ChartFrame,
+  chartColor,
+  chartHeight,
+  useChartNumberFormat
+};

package/dist/components/charts/chart-summary.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Pure helpers that turn chart data into a localized screen-reader text
+ * alternative (WCAG 1.1.1). No JSX — filename pascal is intentionally NOT
+ * exported, so this is not a catalog primitive.
+ */
+import type { ChartDatum, ChartSeriesProp } from "../../props/components/charts.prop";
+type Formatter = Intl.NumberFormat;
+export type ChartSummary = {
+    rows: string[];
+    img: string;
+};
+/** Build the per-category rows + a one-line summary for a cartesian chart. */
+export declare function buildCartesianSummary(data: ChartDatum[], series: ChartSeriesProp[], categoryKey: string, fmt: Formatter, list: Intl.ListFormat, summaryLine: (counts: {
+    series: number;
+    points: number;
+}) => string): ChartSummary;
+/** Build the per-slice rows + a one-line summary for a pie chart. */
+export declare function buildPieSummary(data: ChartDatum[], dataKey: string, nameKey: string, fmt: Formatter, summaryLine: (counts: {
+    slices: number;
+}) => string): ChartSummary;
+export {};

package/dist/components/charts/chart-summary.js

@@ -0,0 +1,23 @@
+function numeric(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+}
+function buildCartesianSummary(data, series, categoryKey, fmt, list, summaryLine) {
+  const rows = data.map((datum) => {
+    const category = String(datum[categoryKey] ?? "");
+    const parts = series.map(
+      (s) => `${s.label ?? s.dataKey}: ${fmt.format(numeric(datum[s.dataKey]))}`
+    );
+    return `${category} \u2014 ${list.format(parts)}`;
+  });
+  return { rows, img: summaryLine({ series: series.length, points: data.length }) };
+}
+function buildPieSummary(data, dataKey, nameKey, fmt, summaryLine) {
+  const rows = data.map(
+    (datum) => `${String(datum[nameKey] ?? "")}: ${fmt.format(numeric(datum[dataKey]))}`
+  );
+  return { rows, img: summaryLine({ slices: data.length }) };
+}
+export {
+  buildCartesianSummary,
+  buildPieSummary
+};

package/dist/components/charts/index.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Charts entry — `@godxjp/ui/charts`. Isolated from the main barrel so the
+ * `recharts` dependency is only pulled in when a consumer imports a chart
+ * (tree-shaking: `sideEffects: false` + a dedicated tsup entry + recharts as an
+ * optional peer dependency).
+ */
+export { LineChart } from "./line-chart";
+export type { LineChartProp, LineChartProps } from "./line-chart";
+export { BarChart } from "./bar-chart";
+export type { BarChartProp, BarChartProps } from "./bar-chart";
+export { AreaChart } from "./area-chart";
+export type { AreaChartProp, AreaChartProps } from "./area-chart";
+export { PieChart } from "./pie-chart";
+export type { PieChartProp, PieChartProps } from "./pie-chart";
+export type { ChartSeriesProp, ChartDatum } from "../../props/components/charts.prop";
+export { CHART_COLORS } from "./chart-frame";

package/dist/components/charts/index.js

@@ -0,0 +1,12 @@
+import { LineChart } from "./line-chart";
+import { BarChart } from "./bar-chart";
+import { AreaChart } from "./area-chart";
+import { PieChart } from "./pie-chart";
+import { CHART_COLORS } from "./chart-frame";
+export {
+  AreaChart,
+  BarChart,
+  CHART_COLORS,
+  LineChart,
+  PieChart
+};

package/dist/components/charts/line-chart.d.ts

@@ -0,0 +1,8 @@
+import type { LineChartProp } from "../../props/components/charts.prop";
+export type { LineChartProp, LineChartProp as LineChartProps, } from "../../props/components/charts.prop";
+/**
+ * Line chart — trends over an ordered category axis (one or more series).
+ * Import from the tree-shaken `@godxjp/ui/charts` entry; requires the `recharts`
+ * optional peer dependency.
+ */
+export declare function LineChart(props: LineChartProp): import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/line-chart.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { CartesianChart } from "./chart-cartesian";
+function LineChart(props) {
+  return /* @__PURE__ */ jsx(CartesianChart, { kind: "line", ...props });
+}
+export {
+  LineChart
+};

package/dist/components/charts/pie-chart.d.ts

@@ -0,0 +1,8 @@
+import type { PieChartProp } from "../../props/components/charts.prop";
+export type { PieChartProp, PieChartProp as PieChartProps, } from "../../props/components/charts.prop";
+/**
+ * Pie / donut chart — part-to-whole composition across a small set of slices.
+ * Import from the tree-shaken `@godxjp/ui/charts` entry; requires the `recharts`
+ * optional peer dependency.
+ */
+export declare function PieChart({ data, dataKey, nameKey, colors, label, description, size, height, showLegend, numberFormat, donut, emptyMessage, className, id, }: PieChartProp): import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/pie-chart.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Cell,
+  Legend,
+  Pie,
+  PieChart as RPieChart,
+  ResponsiveContainer,
+  Tooltip
+} from "recharts";
+import { EmptyState } from "../data-display/empty-state";
+import { useTranslation } from "../../i18n/use-translation";
+import { ChartFrame, chartColor, chartHeight, useChartNumberFormat } from "./chart-frame";
+import { buildPieSummary } from "./chart-summary";
+function PieChart({
+  data,
+  dataKey,
+  nameKey,
+  colors,
+  label,
+  description,
+  size = "md",
+  height,
+  showLegend = true,
+  numberFormat,
+  donut = false,
+  emptyMessage,
+  className,
+  id
+}) {
+  const { t } = useTranslation();
+  const fmt = useChartNumberFormat(numberFormat);
+  const hasData = data.length > 0;
+  const summary = buildPieSummary(
+    data,
+    dataKey,
+    nameKey,
+    fmt,
+    (c) => t("chart.summaryPie", { slices: fmt.format(c.slices) })
+  );
+  const resolvedHeight = chartHeight(size, height);
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      label,
+      description,
+      summaryRows: summary.rows,
+      imgSummary: summary.img,
+      hasData,
+      height: resolvedHeight,
+      className,
+      id,
+      children: hasData ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(RPieChart, { children: [
+        /* @__PURE__ */ jsx(
+          Pie,
+          {
+            data,
+            dataKey,
+            nameKey,
+            innerRadius: donut ? "55%" : 0,
+            outerRadius: "80%",
+            paddingAngle: donut ? 2 : 0,
+            children: data.map((_, i) => /* @__PURE__ */ jsx(Cell, { fill: chartColor(i, colors?.[i]) }, i))
+          }
+        ),
+        /* @__PURE__ */ jsx(Tooltip, { formatter: (value) => fmt.format(Number(value)) }),
+        showLegend ? /* @__PURE__ */ jsx(Legend, {}) : null
+      ] }) }) : /* @__PURE__ */ jsx(EmptyState, { title: emptyMessage ?? t("chart.empty") })
+    }
+  );
+}
+export {
+  PieChart
+};

package/dist/components/data-display/card.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 type CardSize = "md" | "compact";
-/** Semantic 3px leading-edge accent stripe (border-inline-start). */
+/** Semantic leading-edge accent stripe (border-inline-start; width via the
+ *  --card-accent-rail-width token, default 6px). */
 type CardAccent = "primary" | "success" | "warning" | "info" | "attention" | "destructive";
 /** Surface fill — plain card, muted band, borderless outline, or emphasized featured ring. */
 type CardVariant = "default" | "muted" | "outline" | "featured";

package/dist/components/data-display/index.d.ts

@@ -1,5 +1,7 @@
 export { Badge } from "./badge";
 export type { BadgeProps } from "./badge";
+export { ListRow } from "./list-row";
+export type { ListRowProps } from "./list-row";
 export { Avatar, AvatarImage, AvatarFallback } from "./avatar";
 export { Card, CardBar, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, CardAction, StatCard, } from "./card";
 export type { StatCardProps, CardBarProps } from "./card";

package/dist/components/data-display/index.js

@@ -1,4 +1,5 @@
 import { Badge } from "./badge";
+import { ListRow } from "./list-row";
 import { Avatar, AvatarImage, AvatarFallback } from "./avatar";
 import {
   Card,
@@ -74,6 +75,7 @@ export {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
+  ListRow,
   Popover,
   PopoverAnchor,
   PopoverContent,

package/dist/components/data-display/list-row.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+/**
+ * ListRow — a single-line entity row (leading · title/description · trailing) for SHORT lists
+ * inside a Card: active sessions, API tokens, linked accounts, passkeys, MFA factors, invitations.
+ * Use it INSTEAD of a hand-rolled `<div className="flex items-center justify-between border-b …">`.
+ * DataTable is too heavy for a 2–4 item list, and nesting a Card per row would be card-in-card —
+ * ListRow is the in-between surface. Drop rows into a `<Card><CardContent flush>…` and they stack
+ * with a quiet divider; the trailing slot holds the row's action (Button / DropdownMenu / Switch).
+ */
+export interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`. */
+    as?: "div" | "li";
+    /** Leading slot — a decorative icon or an Avatar. Mark a purely decorative icon `aria-hidden`. */
+    leading?: React.ReactNode;
+    /** Primary line — rendered in medium weight; truncates to a single line. */
+    title: React.ReactNode;
+    /** Secondary line under the title (muted, xs); truncates to a single line. */
+    description?: React.ReactNode;
+    /** Trailing slot — the row action(s): a Button / DropdownMenu trigger, a Badge, or a Switch. */
+    trailing?: React.ReactNode;
+    /** Cross-axis alignment of the columns — `center` (default) or `start` for multi-line content. */
+    align?: "center" | "start";
+}
+export declare const ListRow: React.ForwardRefExoticComponent<ListRowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/data-display/list-row.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Text } from "../general/typography";
+const ListRow = React.forwardRef(
+  ({ as = "div", leading, title, description, trailing, align = "center", className, ...props }, ref) => {
+    const Comp = as;
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        "data-slot": "list-row",
+        "data-align": align === "start" ? "start" : void 0,
+        className: cn("ui-list-row", className),
+        ...props,
+        children: [
+          leading != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-leading", children: leading }) : null,
+          /* @__PURE__ */ jsxs("span", { "data-slot": "list-row-body", children: [
+            /* @__PURE__ */ jsx(Text, { weight: "medium", truncate: true, children: title }),
+            description != null ? /* @__PURE__ */ jsx(Text, { size: "xs", tone: "muted", truncate: true, children: description }) : null
+          ] }),
+          trailing != null ? /* @__PURE__ */ jsx("span", { "data-slot": "list-row-trailing", children: trailing }) : null
+        ]
+      }
+    );
+  }
+);
+ListRow.displayName = "ListRow";
+export {
+  ListRow
+};