@agroshine/ags-web-ui-kit 1.0.0

package/dist/organisms/index.d.cts

@@ -0,0 +1,396 @@
+import * as React$1 from 'react';
+import React__default, { ReactNode, FC } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Dayjs } from 'dayjs';
+import { O as Option } from '../interface-DnK5S6ww.cjs';
+import { ToasterProps as ToasterProps$1 } from 'sonner';
+export { toast } from 'sonner';
+
+interface AccordionItemData {
+    key: string;
+    title: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+    /** Icono opcional a la izquierda del título. */
+    icon?: ReactNode;
+    /** Número/string al estilo `acc-num` (chip circular). Solo se renderiza en `variant="card"`. */
+    number?: ReactNode;
+}
+type AccordionType = 'single' | 'multiple';
+type AccordionVariant = 'default' | 'card';
+interface AccordionBaseProps {
+    items: AccordionItemData[];
+    /**
+     * `default` (canon): ítems separados por línea inferior, border-top en el primero.
+     * `card`           : cada ítem como tarjeta independiente con borde completo + margen.
+     */
+    variant?: AccordionVariant;
+    className?: string;
+    collapsible?: boolean;
+}
+interface AccordionSingleProps extends AccordionBaseProps {
+    type: 'single';
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+}
+interface AccordionMultipleProps extends AccordionBaseProps {
+    type: 'multiple';
+    defaultValue?: string[];
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}
+type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+
+declare const Accordion: React$1.ForwardRefExoticComponent<AccordionProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ContentProps {
+    children: ReactNode;
+    padded?: boolean;
+    maxWidth?: number | 'full';
+    className?: string;
+}
+
+declare const Content: React$1.ForwardRefExoticComponent<ContentProps & React$1.RefAttributes<HTMLElement>>;
+
+interface FormCardProps {
+    title?: string;
+    description?: string;
+    disabled?: boolean;
+    children?: React__default.ReactNode;
+}
+declare const FormCard: React__default.FC<FormCardProps>;
+
+interface BrandLogoProps {
+    /** Letra/iniciales mostradas dentro del cuadrado naranja-tierra. */
+    mark?: string;
+    /** Texto al lado del cuadrado. */
+    name?: string;
+    className?: string;
+}
+/**
+ * Brand AgroShine del top nav (canon `.lh-brand` + `.brand-mark`):
+ * cuadrado `bg-secondary-500` con la letra "A" y el texto "AgroShine" al lado.
+ * Padding `0 22px 0 18px` + ancho mínimo 240 px para alinear con el sidebar.
+ */
+declare function BrandLogo({ mark, name, className }: BrandLogoProps): react_jsx_runtime.JSX.Element;
+
+interface FarmChipProps {
+    /** Contenido del chip: ej. "La Esperanza · Tenjo". */
+    children: ReactNode;
+    /** Renderiza un dot ámbar a la izquierda (canon `.lh-farm-dot`). */
+    withDot?: boolean;
+    className?: string;
+}
+/**
+ * Pill que muestra la finca/contexto del usuario (canon `.lh-farm`):
+ * borde `border-white/20`, padding `4px 12px`, texto pequeño blanco.
+ */
+declare function FarmChip({ children, withDot, className }: FarmChipProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderItem {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    active?: boolean;
+    href?: string;
+    onClick?: () => void;
+}
+/**
+ * Configuración del campo de búsqueda integrado del Header AgroShine.
+ *
+ * - `undefined` (o `false`) ⇒ el search no se renderiza.
+ * - Pasar un objeto (aunque sea `{}`) ⇒ muestra el input con valores por defecto.
+ */
+interface HeaderSearch {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+}
+interface HeaderProps {
+    /** Slot brand. Si se omite se renderiza el brand AgroShine por defecto. */
+    brand?: ReactNode;
+    /** Items de navegación horizontal. Vacío ⇒ no se renderiza la nav. */
+    items?: HeaderItem[];
+    onItemClick?: (item: HeaderItem) => void;
+    /**
+     * Search integrado a la derecha del nav.
+     * `undefined` o `false` lo oculta; objeto (aunque vacío) lo muestra.
+     */
+    search?: HeaderSearch | false;
+    /** Chip pequeño tipo "🌿 Finca La Esperanza" antes del avatar. */
+    farmChip?: ReactNode;
+    /** Slot abierto para avatar/dropdown del usuario. */
+    user?: ReactNode;
+    /** Slot extra (bell, settings, etc.) entre el chip y el avatar. */
+    actions?: ReactNode;
+    className?: string;
+    sticky?: boolean;
+    /** Altura en px. Default 60 (canon Components.html). */
+    height?: number;
+}
+
+/**
+ * Header (Top Nav) AgroShine — canon `Components.html` § "Header (Top Nav)" L1847.
+ *
+ * Layout horizontal sobre `bg-primary-500` con borde inferior `border-primary-700`:
+ *   `[brand] [nav items] [search] [farm chip] [actions] [user]`
+ *
+ * Compatibilidad: las props originales (`brand`, `items`, `onItemClick`, `actions`,
+ * `user`, `className`, `sticky`, `height`) conservan su firma. Se añaden `search` y
+ * `farmChip` como slots opcionales. Si no se pasa `brand` se renderiza el brand
+ * AgroShine por defecto (cuadrado naranja + "AgroShine") para que el componente
+ * cumpla con el canon out-of-the-box.
+ */
+declare const Header: React$1.ForwardRefExoticComponent<HeaderProps & React$1.RefAttributes<HTMLElement>>;
+
+interface SearchBoxProps extends HeaderSearch {
+    className?: string;
+}
+/**
+ * Search integrado del top nav (canon `.lh-search`):
+ * input transparente sobre el verde con `bg-white/10`, borde `border-white/15`,
+ * texto blanco, placeholder `white/50`. Ancho ~260 px. Lupa absoluta a la izquierda.
+ *
+ * Soporta uso controlado (`value` + `onChange`) y no controlado (estado interno).
+ */
+declare const SearchBox: React$1.ForwardRefExoticComponent<SearchBoxProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface UserAvatarProps {
+    /** Iniciales mostradas dentro del círculo (ej. "MR"). */
+    initials: string;
+    /** Etiqueta accesible (nombre completo). */
+    label?: string;
+    className?: string;
+    onClick?: () => void;
+}
+/**
+ * Avatar circular del top nav (canon `.avatar.avatar-sm` sobre `.lh-dark`):
+ * círculo de 32 px con iniciales sobre `bg-white/15`, border sutil `border-white/20`.
+ */
+declare function UserAvatar({ initials, label, className, onClick }: UserAvatarProps): react_jsx_runtime.JSX.Element;
+
+interface LayoutProps {
+    header?: ReactNode;
+    sidebar?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    hasHeader?: boolean;
+    hasSidebar?: boolean;
+    sidebarCollapsed?: boolean;
+    className?: string;
+}
+
+declare const Layout: React$1.ForwardRefExoticComponent<LayoutProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface PageHeaderProps {
+    title: string;
+    subtitle?: string;
+    onBack?: () => void;
+    headerLeft?: React.ReactNode;
+    extra?: React.ReactNode | React.ReactNode[];
+    children?: React.ReactNode;
+}
+declare const PageHeader: FC<PageHeaderProps>;
+
+type PickerSize = 'large' | 'medium' | 'small';
+type PickerStatus = 'error' | 'warning' | 'success' | 'validating';
+type PickerPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+interface PickerBaseProps {
+    allowClear?: boolean;
+    className?: string;
+    getPopupContainer?: (trigger: HTMLElement) => HTMLElement;
+    needConfirm?: boolean;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: PickerPlacement;
+    size?: PickerSize;
+    status?: PickerStatus;
+    externalLabel?: string;
+    help?: string;
+    errorMessage?: string;
+}
+interface DatePickerProps extends PickerBaseProps {
+    defaultValue?: Dayjs | null;
+    value?: Dayjs | null;
+    format?: string | string[];
+    placeholder?: string;
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
+    picker?: 'date' | 'month' | 'year';
+    isDateUnavailable?: (date: unknown) => boolean;
+    showMonthAndYearPickers?: boolean;
+    onChange?: (date: Dayjs | null, dateString: string) => void;
+    onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
+}
+interface RangePickerProps extends PickerBaseProps {
+    defaultValue?: [Dayjs | null, Dayjs | null] | null;
+    value?: [Dayjs | null, Dayjs | null] | null;
+    format?: string | string[];
+    placeholder?: [string, string];
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
+    isDateUnavailable?: (date: unknown) => boolean;
+    allowsNonContiguousRanges?: boolean;
+    visibleMonths?: 1 | 2 | 3;
+    onCalendarChange?: (dates: [Dayjs | null, Dayjs | null], dateStrings: [string, string], info: {
+        range?: 'start' | 'end';
+    }) => void;
+    onChange?: (dates: [Dayjs | null, Dayjs | null] | null, dateStrings: [string, string]) => void;
+    onFocus?: (e: React.FocusEvent<HTMLElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLElement>) => void;
+}
+interface PickerPanelProps {
+    value?: Dayjs | null;
+    defaultValue?: Dayjs | null;
+    minDate?: Dayjs;
+    maxDate?: Dayjs;
+    className?: string;
+    isDateUnavailable?: (date: unknown) => boolean;
+    onChange?: (value: Dayjs | null) => void;
+}
+
+declare const DatePicker: React__default.ForwardRefExoticComponent<DatePickerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const PickerPanel: React__default.FC<PickerPanelProps>;
+
+declare const RangePicker: React__default.ForwardRefExoticComponent<RangePickerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+declare const DEFAULT_FORMAT = "DD/MM/YYYY";
+declare const DEFAULT_FORMATS: string[];
+
+interface QueryStateProps {
+    loading?: boolean;
+    error?: unknown;
+    empty?: boolean;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    emptyAction?: ReactNode;
+    errorTitle?: string;
+    errorDescription?: string;
+    onRetry?: () => void;
+    loadingFallback?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+
+declare const QueryState: React$1.ForwardRefExoticComponent<QueryStateProps & React$1.RefAttributes<HTMLDivElement>>;
+
+type ResultStatus = 'success' | 'error' | 'warning' | 'info' | '404' | '500';
+interface ResultProps {
+    status: ResultStatus;
+    title: string;
+    description?: string;
+    icon?: ReactNode;
+    extra?: ReactNode;
+    className?: string;
+}
+
+declare const Result: React$1.ForwardRefExoticComponent<ResultProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface SearchFilterBarProps {
+    options: Option[];
+    selectedOption: string;
+    onOptionChange: (value: string) => void;
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    searchPlaceholder?: string;
+    className?: string;
+}
+declare function SearchFilterBar({ options, selectedOption, onOptionChange, searchValue, onSearchChange, searchPlaceholder, className, }: SearchFilterBarProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarItem {
+    key: string;
+    label: string;
+    /** Icono opcional a la izquierda. Si no se pasa, se renderiza un `dot` canon. */
+    icon?: ReactNode;
+    href?: string;
+    active?: boolean;
+    disabled?: boolean;
+    badge?: ReactNode;
+    /** Sub-items (no usados en canon default — reservado para extensión futura). */
+    children?: SidebarItem[];
+}
+interface SidebarGroup {
+    key: string;
+    label?: string;
+    items: SidebarItem[];
+    /** Canon: grupos colapsables. Default `true`. */
+    collapsible?: boolean;
+    /** Default abierto. Default `true`. */
+    defaultOpen?: boolean;
+}
+/**
+ * Encabezado de módulo `.ls-context` (canon HTML L1869):
+ *   - `label` pequeño uppercase muted (ej. "Módulo")
+ *   - `title` grande bold (ej. "Aspersiones")
+ *   - `sub`   pequeño muted (ej. "Programa W20 · loop sanidad")
+ */
+interface SidebarContext {
+    label?: ReactNode;
+    title: ReactNode;
+    sub?: ReactNode;
+}
+interface SidebarProps {
+    groups: SidebarGroup[];
+    /** Encabezado de contexto del módulo. */
+    context?: SidebarContext;
+    collapsed?: boolean;
+    onCollapsedChange?: (v: boolean) => void;
+    width?: number;
+    collapsedWidth?: number;
+    /** Slot libre arriba del context (ej. logo). Compat con API anterior. */
+    brand?: ReactNode;
+    /** Slot libre abajo. Compat. */
+    footer?: ReactNode;
+    onItemClick?: (item: SidebarItem) => void;
+    className?: string;
+}
+
+declare const Sidebar: React$1.ForwardRefExoticComponent<SidebarProps & React$1.RefAttributes<HTMLElement>>;
+
+interface ToasterProps extends ToasterProps$1 {
+    className?: string;
+}
+/**
+ * Toaster AgroShine — wrapper sobre `sonner` alineado al canon HTML
+ * (`Components.html` § Toast · Sonner).
+ *
+ * - `position` default: `top-right` (canon: stack arriba-derecha).
+ * - `theme` default: `light` (la lib aún no soporta dark-mode global).
+ * - `richColors` desactivado: las variantes (`success`, `error`,
+ *   `warning`, `info`) reciben classNames manuales basados en
+ *   tokens semánticos AgroShine (paletas `success-*`, `warning-*`,
+ *   `danger-*`, `primary-*`).
+ * - `closeButton: true` — botón de dismiss visible (canon § Toast).
+ *
+ * Estructura visual: `grid 18px 1fr auto` (icon · texto · acción/dismiss).
+ */
+declare const Toaster: React$1.ForwardRefExoticComponent<ToasterProps & React$1.RefAttributes<HTMLElement>>;
+
+interface TreeNode {
+    key: string;
+    title: ReactNode;
+    icon?: ReactNode;
+    children?: TreeNode[];
+    disabled?: boolean;
+    selectable?: boolean;
+}
+interface TreeProps {
+    data: TreeNode[];
+    defaultExpanded?: string[];
+    expanded?: string[];
+    onExpandedChange?: (keys: string[]) => void;
+    selectedKey?: string;
+    onSelect?: (key: string, node: TreeNode) => void;
+    showLine?: boolean;
+    className?: string;
+}
+
+declare const Tree: React$1.ForwardRefExoticComponent<TreeProps & React$1.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, type AccordionItemData, type AccordionMultipleProps, type AccordionProps, type AccordionSingleProps, type AccordionType, BrandLogo, type BrandLogoProps, Content, type ContentProps, DEFAULT_FORMAT, DEFAULT_FORMATS, DatePicker, type DatePickerProps, FarmChip, type FarmChipProps, FormCard, Header, type HeaderItem, type HeaderProps, type HeaderSearch, Layout, type LayoutProps, PageHeader, type PickerBaseProps, PickerPanel, type PickerPlacement, type PickerSize, type PickerStatus, QueryState, type QueryStateProps, RangePicker, type RangePickerProps, Result, type ResultProps, type ResultStatus, SearchBox, type SearchBoxProps, SearchFilterBar, Sidebar, type SidebarGroup, type SidebarItem, type SidebarProps, Toaster, type ToasterProps, Tree, type TreeNode, type TreeProps, UserAvatar, type UserAvatarProps };