egutierrez
0a0fe8c997
From: sources/frontend_designs/Ads Analytics Dashboard _standalone_.html New components: - funnel_chart_ts_ui — visualización de funnel de conversión con barras degradadas y tasa entre etapas como Badge semántico. - heatmap_grid_ts_ui — matriz rows × cols con intensidad color-mix sobre el primary color. Genérica (day×hour, cohort, correlation...). Improvements: - alert_ts_ui v1.1.0 — añadidas variantes semánticas success, warning, info (antes: solo default y destructive). - data_table_ts_ui v1.1.0 — prop opcional density: compact | cozy | roomy. No rompe API existente (default 'cozy' = comportamiento previo). Barrel frontend/functions/ui/index.ts actualizado con los dos nuevos exports y el type DataTableDensity. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
74 lines
1.6 KiB
TypeScript
74 lines
1.6 KiB
TypeScript
import * as React from 'react'
|
|
import { Alert as MantineAlert, Box, Text } from '@mantine/core'
|
|
|
|
type AlertVariant = 'default' | 'destructive' | 'success' | 'warning' | 'info'
|
|
|
|
const variantColorMap: Record<AlertVariant, string | undefined> = {
|
|
default: undefined,
|
|
destructive: 'red',
|
|
success: 'green',
|
|
warning: 'yellow',
|
|
info: 'blue',
|
|
}
|
|
|
|
function Alert({
|
|
className,
|
|
variant = 'default',
|
|
children,
|
|
...props
|
|
}: React.ComponentProps<'div'> & { variant?: AlertVariant }) {
|
|
return (
|
|
<MantineAlert
|
|
data-slot="alert"
|
|
color={variantColorMap[variant]}
|
|
radius="md"
|
|
variant="light"
|
|
className={className}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</MantineAlert>
|
|
)
|
|
}
|
|
|
|
function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<Text
|
|
component="div"
|
|
data-slot="alert-title"
|
|
fw={500}
|
|
size="sm"
|
|
className={className}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<Text
|
|
component="div"
|
|
data-slot="alert-description"
|
|
size="sm"
|
|
c="dimmed"
|
|
className={className}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function AlertAction({ className, style, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<Box
|
|
data-slot="alert-action"
|
|
style={{ position: 'absolute', top: 'var(--mantine-spacing-xs)', right: 'var(--mantine-spacing-xs)', ...style }}
|
|
className={className}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const alertVariants = {} as const
|
|
|
|
export { Alert, AlertTitle, AlertDescription, AlertAction, alertVariants }
|