{"version":3,"file":"ListTile.cjs","names":[],"sources":["../../../src/components/ListTile/ListTile.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — leading, title, subtitle and trailing are the four\n * slots of a list row, and onClick/disabled/selected are what make it a row you can\n * pick. That is the whole component — there is no second one inside it.\n */\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./ListTile.module.css\";\n\nexport interface ListTileProps {\n    /** Left slot — typically an icon or avatar. */\n    leading?: ReactNode;\n    /** Primary line. Required. */\n    title: ReactNode;\n    /** Secondary line rendered under the title. */\n    subtitle?: ReactNode;\n    /** Right slot — typically an icon, switch or meta text. */\n    trailing?: ReactNode;\n    /** When provided, the tile becomes an interactive button. */\n    onClick?: () => void;\n    /** When true, the tile is dimmed and non-interactive. */\n    disabled?: boolean;\n    /** When true, the tile is highlighted as the active row. */\n    selected?: boolean;\n    /** Extra class names merged onto the root. */\n    className?: string;\n}\n\n/**\n * The canonical Material list row: an optional leading slot, a title with an\n * optional subtitle, and an optional trailing slot. When `onClick` is supplied\n * the tile renders as a full-width, keyboard-accessible `<button>`; otherwise it\n * renders as a static `<div>`.\n *\n * @example\n * <ListTile\n *     leading={<User />}\n *     title=\"Maria Silva\"\n *     subtitle=\"maria@example.com\"\n *     trailing={<ChevronRight />}\n *     onClick={() => open(user)}\n * />\n */\nexport function ListTile({\n    leading,\n    title,\n    subtitle,\n    trailing,\n    onClick,\n    disabled = false,\n    selected = false,\n    className,\n}: ListTileProps) {\n    const content = (\n        <>\n            {leading !== undefined && <span className={styles.leading}>{leading}</span>}\n            <span className={styles.body}>\n                <span className={styles.title}>{title}</span>\n                {subtitle !== undefined && <span className={styles.subtitle}>{subtitle}</span>}\n            </span>\n            {trailing !== undefined && <span className={styles.trailing}>{trailing}</span>}\n        </>\n    );\n\n    const rootClassName = cn(\n        styles.tile,\n        selected && styles.selected,\n        disabled && styles.disabled,\n        className,\n    );\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                className={cn(rootClassName, styles.interactive)}\n                aria-pressed={selected ? true : undefined}\n                disabled={disabled}\n                onClick={onClick}\n            >\n                {content}\n            </button>\n        );\n    }\n\n    return <div className={rootClassName}>{content}</div>;\n}\n"],"mappings":"4GA2CA,SAAgB,EAAS,CACrB,UACA,QACA,WACA,WACA,UACA,WAAW,GACX,WAAW,GACX,aACc,CACd,IAAM,GACF,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,CACK,IAAY,IAAA,KAAa,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,QAAU,SAAA,CAAc,CAAA,GAC1E,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAxB,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAQ,SAAA,CAAY,CAAA,EAC3C,IAAa,IAAA,KAAa,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAW,SAAA,CAAe,CAAA,CAC3E,IACL,IAAa,IAAA,KAAa,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAW,SAAA,CAAe,CAAA,CAC/E,CAAA,CAAA,EAGA,EAAgB,EAAA,GAClB,EAAA,QAAO,KACP,GAAY,EAAA,QAAO,SACnB,GAAY,EAAA,QAAO,SACnB,CACJ,EAgBA,OAdI,GAEI,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,GAAG,EAAe,EAAA,QAAO,WAAW,EAC/C,eAAc,EAAW,GAAO,IAAA,GACtB,WACD,UAER,SAAA,CACG,CAAA,GAIT,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAgB,SAAA,CAAa,CAAA,CACxD"}