@juanarenas31/metrik-ui 0.2.0 → 0.3.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ComponentPropsWithoutRef, ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, FormHTMLAttributes, SVGAttributes, TdHTMLAttributes, ThHTMLAttributes, RefObject } from 'react';
+import { HTMLAttributes, ComponentPropsWithoutRef, ButtonHTMLAttributes, ReactNode, ComponentType, ComponentProps, CSSProperties, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, FormHTMLAttributes, SVGAttributes, TdHTMLAttributes, ThHTMLAttributes, RefObject } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -8,10 +8,17 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { DayPickerProps, DateRange } from 'react-day-picker';
+import * as recharts_types_util_payload_getUniqPayload from 'recharts/types/util/payload/getUniqPayload';
+import * as recharts_types_component_Tooltip from 'recharts/types/component/Tooltip';
+import * as recharts_types_util_types from 'recharts/types/util/types';
+import * as recharts_types_component_DefaultTooltipContent from 'recharts/types/component/DefaultTooltipContent';
+import * as RechartsPrimitive from 'recharts';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { ColumnDef } from '@tanstack/react-table';
+export { ColumnDef } from '@tanstack/react-table';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as _radix_ui_react_slot from '@radix-ui/react-slot';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -132,6 +139,70 @@ declare const CardDescription: react.ForwardRefExoticComponent<DivProps & react.
 declare const CardContent: react.ForwardRefExoticComponent<DivProps & react.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: react.ForwardRefExoticComponent<DivProps & react.RefAttributes<HTMLDivElement>>;
 
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+type ChartConfig = {
+    [k in string]: {
+        label?: ReactNode;
+        icon?: ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+type ChartContextProps = {
+    config: ChartConfig;
+};
+declare function useChart(): ChartContextProps;
+declare const ChartContainer: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & {
+    config: ChartConfig;
+    children: ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare function ChartStyle({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}): react_jsx_runtime.JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const ChartTooltipContent: react.ForwardRefExoticComponent<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> & {
+    accessibilityLayer?: boolean;
+    active?: boolean | undefined;
+    includeHidden?: boolean | undefined;
+    allowEscapeViewBox?: recharts_types_util_types.AllowInDimension;
+    animationDuration?: recharts_types_util_types.AnimationDuration;
+    animationEasing?: recharts_types_util_types.AnimationTiming;
+    content?: recharts_types_component_Tooltip.ContentType<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> | undefined;
+    coordinate?: Partial<recharts_types_util_types.Coordinate>;
+    cursor?: boolean | react.ReactElement | react.SVGProps<SVGElement>;
+    filterNull?: boolean;
+    defaultIndex?: number;
+    isAnimationActive?: boolean;
+    offset?: number;
+    payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<recharts_types_component_DefaultTooltipContent.Payload<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>> | undefined;
+    position?: Partial<recharts_types_util_types.Coordinate>;
+    reverseDirection?: recharts_types_util_types.AllowInDimension;
+    shared?: boolean;
+    trigger?: "hover" | "click";
+    useTranslate3d?: boolean;
+    viewBox?: recharts_types_util_types.CartesianViewBox;
+    wrapperStyle?: CSSProperties;
+} & react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+}, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare const ChartLegendContent: react.ForwardRefExoticComponent<Omit<react.ClassAttributes<HTMLDivElement> & react.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+}, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
 interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
@@ -271,6 +342,26 @@ declare const CommandItem: react.ForwardRefExoticComponent<Omit<{
 } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 declare function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
 
+declare const containerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "prose" | "full" | null | undefined;
+    padding?: "none" | "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ContainerVariants = VariantProps<typeof containerVariants>;
+
+interface ContainerProps extends HTMLAttributes<HTMLDivElement>, ContainerVariants {
+    /** Renderiza el hijo en lugar de un `<div>` (Radix Slot). */
+    asChild?: boolean;
+}
+/**
+ * Contenedor centrado con ancho máximo y padding horizontal responsive.
+ * La pieza base para componer el layout de una página.
+ *
+ * @example
+ *   <Container size="lg">…</Container>
+ *   <Container asChild><main>…</main></Container>
+ */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;
+
 declare const ContextMenu: react.FC<ContextMenuPrimitive.ContextMenuProps>;
 declare const ContextMenuTrigger: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & react.RefAttributes<HTMLSpanElement>>;
 declare const ContextMenuGroup: react.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
@@ -294,6 +385,27 @@ declare const ContextMenuSubTrigger: react.ForwardRefExoticComponent<Omit<Contex
 } & react.RefAttributes<HTMLDivElement>>;
 declare const ContextMenuSubContent: react.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    /** Columna por la que filtrar con el input de búsqueda. */
+    filterColumn?: string;
+    filterPlaceholder?: string;
+    /** Filas por página. */
+    pageSize?: number;
+    /** Oculta la barra superior (búsqueda + columnas). */
+    hideToolbar?: boolean;
+    className?: string;
+}
+/**
+ * Tabla de datos con orden, filtro, paginación y visibilidad de columnas,
+ * construida sobre TanStack Table.
+ *
+ * @example
+ *   <DataTable columns={columns} data={rows} filterColumn="programa" />
+ */
+declare function DataTable<TData, TValue>({ columns, data, filterColumn, filterPlaceholder, pageSize, hideToolbar, className, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+
 interface DateRangePillProps {
     value?: DateRange;
     onValueChange?: (range: DateRange | undefined) => void;
@@ -404,6 +516,26 @@ declare const FormControl: react.ForwardRefExoticComponent<Omit<_radix_ui_react_
 declare function FormDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
 declare function FormMessage({ className, children, ...props }: HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element | null;
 
+declare const gridVariants: (props?: ({
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | null | undefined;
+    gap?: "none" | "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    flow?: "col" | "row" | "dense" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type GridVariants = VariantProps<typeof gridVariants>;
+
+interface GridProps extends HTMLAttributes<HTMLDivElement>, GridVariants {
+    asChild?: boolean;
+}
+/**
+ * Layout en cuadrícula CSS, con columnas y `gap` tipados. Para columnas
+ * responsive usa `className` (p. ej. `className="md:grid-cols-3"`).
+ *
+ * @example
+ *   <Grid cols={3} gap="lg">…</Grid>
+ *   <Grid cols={1} className="md:grid-cols-2 lg:grid-cols-4">…</Grid>
+ */
+declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
+
 declare const HoverCard: react.FC<HoverCardPrimitive.HoverCardProps>;
 declare const HoverCardTrigger: react.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & react.RefAttributes<HTMLAnchorElement>>;
 declare const HoverCardContent: react.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
@@ -522,6 +654,27 @@ interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
 }
 declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<SVGSVGElement>>;
 
+declare const stackVariants: (props?: ({
+    direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
+    gap?: "none" | "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    align?: "center" | "end" | "start" | "baseline" | "stretch" | null | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type StackVariants = VariantProps<typeof stackVariants>;
+
+interface StackProps extends HTMLAttributes<HTMLDivElement>, StackVariants {
+    asChild?: boolean;
+}
+/**
+ * Layout flex en una dirección, con `gap`, alineación y justificación tipados.
+ *
+ * @example
+ *   <Stack gap="lg">…</Stack>
+ *   <Stack direction="row" align="center" justify="between">…</Stack>
+ */
+declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLDivElement>>;
+
 interface SwitchProps extends ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
 }
 declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
@@ -643,4 +796,4 @@ declare function useClickOutside<T extends HTMLElement>(ref: RefObject<T | null>
 
 declare function useToggle(initial?: boolean): [boolean, () => void, (v: boolean) => void];
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertVariants, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, type BadgeVariants, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, type ButtonVariants, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, type ChipOption, ChipSelector, type ChipSelectorProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DateRangePill, type DateRangePillProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type DisclosureControls, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FileDropzone, type FileDropzoneProps, FloatingDatePicker, type FloatingDatePickerProps, FloatingFileInput, type FloatingFileInputProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, FloatingTextarea, type FloatingTextareaProps, Form, FormControl, FormDescription, FormField, type FormFieldProps, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, Input, type InputProps, type InputVariants, Label, type LabelProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, RichTextEditor, type RichTextEditorProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Slider, Spinner, type SpinnerProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, Toaster, Toggle, ToggleGroup, ToggleGroupItem, type ToggleProps, type ToggleVariants, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, VisuallyHidden, alertVariants, badgeVariants, buttonVariants, cn, inputVariants, toggleVariants, useBreakpoint, useClickOutside, useDebounce, useDisclosure, useLocalStorage, useMediaQuery, useTheme, useToggle };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertVariants, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, type BadgeVariants, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, type ButtonVariants, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, type CheckboxProps, type ChipOption, ChipSelector, type ChipSelectorProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, type ComboboxOption, type ComboboxProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Container, type ContainerProps, type ContainerVariants, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, type DataTableProps, DateRangePill, type DateRangePillProps, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type DisclosureControls, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FileDropzone, type FileDropzoneProps, FloatingDatePicker, type FloatingDatePickerProps, FloatingFileInput, type FloatingFileInputProps, FloatingInput, type FloatingInputProps, FloatingSelect, type FloatingSelectProps, FloatingTextarea, type FloatingTextareaProps, Form, FormControl, FormDescription, FormField, type FormFieldProps, FormLabel, FormMessage, Grid, type GridProps, type GridVariants, HoverCard, HoverCardContent, HoverCardTrigger, Input, type InputProps, type InputVariants, Label, type LabelProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, type ProgressProps, RadioGroup, RadioGroupItem, RichTextEditor, type RichTextEditorProps, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Slider, Spinner, type SpinnerProps, Stack, type StackProps, type StackVariants, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, Toaster, Toggle, ToggleGroup, ToggleGroupItem, type ToggleProps, type ToggleVariants, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, VisuallyHidden, alertVariants, badgeVariants, buttonVariants, cn, containerVariants, gridVariants, inputVariants, stackVariants, toggleVariants, useBreakpoint, useChart, useClickOutside, useDebounce, useDisclosure, useLocalStorage, useMediaQuery, useTheme, useToggle };