Aurora Item

1"use client"
2 
3import * as React from "react"
4 
5export interface ItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
6  title: React.ReactNode
7  description?: React.ReactNode
8  action?: React.ReactNode
9  icon?: React.ReactNode
10}
11 
12export function Item({ title, description, action, icon, className, style, ref, ...props }: ItemProps & { ref?: React.Ref<HTMLDivElement> }) {
13  return (
14    <div
15      ref={ref}
16      className={["grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-[8px] border px-3 py-2.5", className].filter(Boolean).join(" ")}
17      style={{
18        background: "var(--aurora-panel-medium)",
19        borderColor: "var(--aurora-border-default)",
20        color: "var(--aurora-text-primary)",
21        ...style,
22      }}
23      {...props}
24    >
25      {icon ? (
26        <span aria-hidden="true" style={{ color: "var(--aurora-text-muted)", display: "inline-flex", alignItems: "center", justifyContent: "center", width: 16, height: 16 }}>
27          {icon}
28        </span>
29      ) : (
30        <span aria-hidden="true" style={{ display: "inline-flex", width: 16, height: 16 }} />
31      )}
32      <span className="min-w-0">
33        <span
34          className="block truncate"
35          style={{
36            fontFamily: "var(--aurora-font-sans)",
37            fontSize: "var(--aurora-type-body)",
38            fontWeight: "var(--aurora-weight-label)",
39            lineHeight: "var(--aurora-line-ui)",
40            letterSpacing: "var(--aurora-letter-ui)",
41            color: "var(--aurora-text-primary)",
42          }}
43        >
44          {title}
45        </span>
46        {description ? (
47          <span
48            className="block truncate"
49            style={{
50              fontFamily: "var(--aurora-font-sans)",
51              fontSize: "var(--aurora-type-body-sm)",
52              fontWeight: "var(--aurora-weight-body)",
53              lineHeight: "var(--aurora-line-body)",
54              color: "var(--aurora-text-muted)",
55            }}
56          >
57            {description}
58          </span>
59        ) : null}
60      </span>
61      {action ? <span className="shrink-0">{action}</span> : null}
62    </div>
63  )
64}
65 
66export default Item