@quintara.ai/ui 0.0.1

package/README.md

@@ -0,0 +1,127 @@
+# @quintarai/ui
+
+Biblioteca personalizada de componentes React Quintara AI.
+
+Repositorio: https://gitlab.com/leoquintara/quintarai-ui.git
+
+## 1. Objetivos
+
+- **Reutilización**: centralizar componentes UI reutilizables para proyectos React.
+- **Consistencia**: mantener una experiencia visual y de interacción uniforme.
+- **Productividad**: reducir tiempo de desarrollo (componentes listos + utilidades comunes).
+- **Compatibilidad**: funcionar correctamente en proyectos consumidores como Gatsby/React.
+
+## 2. Instalación del paquete
+
+### 2.1 Instalación desde registry (recomendado)
+
+```bash
+yarn add @quintara.ai/ui
+```
+
+o
+
+```bash
+npm i @quintara.ai/ui
+```
+
+### 2.2 Peer dependencies
+
+El consumidor debe instalar (o ya tener instalados) estos paquetes:
+
+- `react`
+- `react-dom`
+- `styled-components`
+- `iconoir-react`
+
+## 3. Estructura
+
+Estructura general:
+
+```text
+src/
+  components/
+    (componentes UI)
+  constants/
+    (constantes compartidas)
+  utils/
+    (helpers/utilidades compartidas)
+
+dist/
+  index.js / index.esm.js / index.d.ts
+  components.js / components.esm.js / components.d.ts
+  constants.js / constants.esm.js / constants.d.ts
+  utils.js / utils.esm.js / utils.d.ts
+```
+
+Puntos de entrada:
+
+- `src/index.ts`
+- `src/components/index.ts`
+- `src/constants/index.ts`
+- `src/utils/index.ts`
+
+## 4. Arquitectura
+
+- **Compilación**: Rollup genera salidas CJS y ESM en `dist/`.
+- **Tipos**: se genera `.d.ts` para cada entry.
+- **Aliases internos**:
+  - `@components` → `src/components`
+  - `@utils` → `src/utils`
+  - `@constants` → `src/constants`
+
+## 5. Cómo utilizar un componente
+
+Import recomendado (por subpath):
+
+```jsx
+import React from "react";
+import { Button, Flex, Text } from "@quintara.ai/ui/components";
+
+export default function Example() {
+  return (
+    <Flex $items="center" $justify="center" $gap={12}>
+      <Text $type="strong">Hola</Text>
+      <Button theme="primary" onClick={() => console.log("click")}>
+        Aceptar
+      </Button>
+    </Flex>
+  );
+}
+```
+
+## 6. Constantes
+
+Las constantes compartidas viven en `src/constants` y se exponen por:
+
+```ts
+import { REGEX } from "@quintara.ai/ui/constants";
+
+REGEX.email.test("test@mail.com");
+```
+
+## 6. Utils
+
+Las utilidades compartidas viven en `src/utils` y se exponen por:
+
+```ts
+import { hasWindow, slugify } from "@quintara.ai/ui/utils";
+
+if (hasWindow()) {
+  slugify("Hola Mundo");
+}
+```
+
+## 7. Vínculos a DBGrid y React Super CSS
+
+- **DBGrid** (sistema de grid/breakpoints):
+  - https://www.npmjs.com/package/dbgrid
+
+- **@digitalbooting/react-super-css**:
+  - https://www.npmjs.com/package/@digitalbooting/react-super-css
+
+## 8. Autor
+
+**Quintara AI**
+
+https://gitlab.com/leoquintara

package/dist/components.d.ts

@@ -0,0 +1,485 @@
+import React, { HTMLAttributes, ReactNode, SVGProps, MutableRefObject, KeyboardEvent, CSSProperties, InputHTMLAttributes, ButtonHTMLAttributes, Ref, VideoHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    smMaxw?: string;
+    mdMaxw?: string;
+    lgMaxw?: string;
+}
+
+declare const _default$o: React.NamedExoticComponent<ContainerProps>;
+
+type SuperCSSProps = Record<string, any>;
+
+type IconType = "fingerIcon" | "keyIcon" | "rollback" | "show" | "hide" | "close" | "facebook" | "instagram" | "x" | "share" | "arrowl" | "arrowr" | "arrowDown" | "messageAlert" | "info" | "success" | "warning" | "danger" | "checkEmpty" | "checkFill" | "radioEmpty" | "radioFill" | "navLeft" | "navRight" | "menu" | "wallet" | "cash" | "home" | "search" | "xmark" | "cloudless" | "farrowr" | "link" | "bank" | "creditCard" | "upload" | "download" | "bell" | "more" | "plus" | "calendar" | "trash" | "cloudUpload" | "refresh" | "hdDisplay";
+interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
+    id?: string;
+    classes?: string;
+    type?: IconType;
+    wsvg?: number;
+    children?: ReactNode;
+}
+interface IconsProps extends SVGProps<SVGSVGElement> {
+    id?: string;
+    classes?: string;
+    type?: IconType;
+    wsvg?: number;
+    containerProps?: SuperCSSProps;
+    component?: ReactNode | null;
+}
+
+declare const _default$n: React.MemoExoticComponent<({ show, width, onClose, children, icon, iconless, type, title, titleless, isCancel, className, unClosed, ...props }: {
+    show?: boolean;
+    width?: string | number;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    icon?: IconType;
+    iconless?: boolean;
+    type?: "success" | "warning";
+    title?: string;
+    titleless?: boolean;
+    isCancel?: boolean;
+    className?: string;
+    unClosed?: boolean;
+    [key: string]: unknown;
+}) => react_jsx_runtime.JSX.Element>;
+
+declare const _default$m: React.NamedExoticComponent<SuperCSSProps>;
+
+declare const _default$l: React.MemoExoticComponent<({ title, message, }: {
+    title?: string | undefined;
+    message?: string | undefined;
+}) => react_jsx_runtime.JSX.Element>;
+
+type InputRole = "input" | "textarea";
+type InputAlign = "left" | "center" | "right";
+type InputType = "text" | "password" | "email" | "tel" | "number" | "curp" | "calendar";
+interface InputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCopy" | "onPaste" | "onChange"> {
+    isSlug?: boolean;
+    placeholder?: string;
+    type?: InputType;
+    getValue?: (value: string) => void;
+    role?: InputRole;
+    value?: string;
+    forwardRef?: ((instance: HTMLInputElement | HTMLTextAreaElement | null) => void) | MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null> | null;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onKeyUp?: (e: KeyboardEvent) => void;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onCopy?: boolean;
+    onPaste?: boolean;
+    error?: string;
+    warning?: string;
+    disabled?: boolean;
+    maxLength?: number;
+    isNumber?: boolean;
+    scapeCharacters?: boolean;
+    onlyCharaters?: boolean;
+    onlyAlpha?: boolean;
+    normalizer?: boolean;
+    isCurp?: boolean;
+    onlyNL?: boolean;
+    onlyLetters?: boolean;
+    onlyPositiveNumbers?: boolean;
+    readOnly?: boolean;
+    capitalize?: boolean;
+    showCalendar?: boolean;
+    hasRequired?: string;
+    autoComplete?: boolean;
+    align?: InputAlign;
+    styles?: CSSProperties;
+    height?: number;
+    suffix?: ReactNode;
+}
+
+declare const _default$k: React.MemoExoticComponent<React.NamedExoticComponent<InputProps>>;
+
+interface InputHelperProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    tooltip?: ReactNode;
+}
+
+declare const _default$j: React.MemoExoticComponent<({ children, tooltip, ...props }: InputHelperProps) => react_jsx_runtime.JSX.Element>;
+
+interface SelectOption {
+    id: string | number;
+    name: string;
+    selected?: boolean;
+}
+interface SelectProps extends HTMLAttributes<HTMLDivElement> {
+    id?: string;
+    type?: string;
+    value?: string;
+    error?: string;
+    warning?: string;
+    disabled?: boolean;
+    otherLess?: boolean;
+    placeholder?: string;
+    defaultValue?: string;
+    hasRequired?: boolean;
+    options?: SelectOption[];
+    excludes?: SelectOption[];
+    exclusion?: "default" | "invert";
+    getValue?: (value: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+
+declare const CustomSelect: ({ options, id, defaultValue, otherLess, excludes, exclusion, placeholder, type, getValue, value, onChange, onBlur, onFocus, error, warning, disabled, hasRequired, ...props }: SelectProps) => react_jsx_runtime.JSX.Element;
+
+interface DropdownOption {
+    id: string | number;
+    name: string;
+    tooltip?: string;
+    icon?: IconType;
+    disabled?: boolean;
+    divider?: boolean;
+}
+interface DropdownProps {
+    /** Array de opciones */
+    options: DropdownOption[];
+    /** Placeholder o texto del trigger */
+    placeholder?: string;
+    /** Valor seleccionado (id de la opción) */
+    value?: string | number;
+    /** Bloquear el dropdown */
+    block?: boolean;
+    /** Callback cuando se selecciona una opción */
+    onSelect?: (option: DropdownOption) => void;
+    /** Posición horizontal del dropdown */
+    position?: "left" | "right";
+    /** Ancho mínimo del dropdown */
+    minWidth?: number;
+    /** Altura máxima del panel (permite scroll) */
+    maxHeight?: number;
+    /** Deshabilitar dropdown */
+    disabled?: boolean;
+    /** Tono del dropdown */
+    theme?: "light" | "outline" | "fill";
+    trigger?: SuperCSSProps;
+    panel?: SuperCSSProps;
+    /** Renderizado personalizado del trigger */
+    renderTrigger?: (props: {
+        isOpen: boolean;
+        selectedOption?: DropdownOption;
+        toggle: () => void;
+    }) => ReactNode;
+    /** Renderizado personalizado de cada opción */
+    renderOption?: (option: DropdownOption, index: number) => ReactNode;
+    /** Cerrar al seleccionar */
+    closeOnSelect?: boolean;
+}
+
+declare function Dropdown({ options, placeholder, value, onSelect, block, theme, position, minWidth, maxHeight, disabled, renderTrigger, renderOption, closeOnSelect, trigger, panel, ...props }: DropdownProps & SuperCSSProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxValue {
+    checked: boolean;
+    value: string | number | boolean | undefined;
+}
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value"> {
+    children?: ReactNode;
+    name?: string;
+    id?: string;
+    value?: string | number | boolean | undefined;
+    disabled?: boolean;
+    selected?: boolean | null;
+    getValue?: (data: CheckboxValue) => void;
+}
+
+declare const _default$i: React.NamedExoticComponent<CheckboxProps>;
+
+interface RadioValue {
+    checked: boolean;
+    value: string | number | boolean | undefined;
+}
+interface RadioProps {
+    children?: ReactNode;
+    name?: string;
+    id?: string;
+    value?: string | number;
+    selected?: boolean;
+    getValue?: (data: RadioValue) => void;
+}
+
+declare const _default$h: React.NamedExoticComponent<RadioProps>;
+
+type ButtonType = "button" | "link" | "submit";
+type ButtonTheme = "primary" | "secondary" | "tertiary" | "outline" | "light" | "over";
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    children: ReactNode;
+    type?: ButtonType;
+    theme?: ButtonTheme;
+    loading?: boolean;
+    mobile?: boolean;
+    forwardRef?: Ref<HTMLButtonElement>;
+    name?: string;
+    $hoverless?: string | undefined;
+}
+
+declare const _default$g: React.NamedExoticComponent<ButtonProps & SuperCSSProps>;
+
+type TooltipDirection$1 = "top" | "bottom" | "left" | "right";
+interface ButtonIconProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    loading?: boolean;
+    mobile?: boolean;
+    tooltip?: string;
+    direction?: TooltipDirection$1;
+    widthTooltip?: number | string;
+    small?: boolean;
+    width?: number | string;
+    nohover?: boolean;
+}
+
+declare const _default$f: React.NamedExoticComponent<ButtonIconProps & SuperCSSProps>;
+
+type TooltipDirection = "top" | "bottom" | "left" | "right";
+type TooltipIcon = "info";
+interface TooltipProps {
+    w?: string | number | undefined;
+    icon?: TooltipIcon;
+    direction?: TooltipDirection;
+    delay?: number;
+    widthIcon?: number;
+    element?: ReactNode;
+    children?: ReactNode;
+    iconStyle?: any;
+    theme?: string;
+}
+
+declare const Tooltip: React.FC<TooltipProps>;
+
+type AlertType = "info" | "success" | "warning" | "danger";
+type AlertAlign = "left" | "center" | "right";
+interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    type: AlertType;
+    align?: AlertAlign;
+    noClose?: boolean;
+    onClose?: () => void;
+}
+
+declare const _default$e: React.NamedExoticComponent<AlertProps & SuperCSSProps>;
+
+interface SvgProps extends HTMLAttributes<HTMLElement>, SuperCSSProps {
+    children?: ReactNode;
+    $icon?: string;
+    $wsvg?: number;
+    $mr?: number;
+    $ml?: number;
+    $cursor?: string;
+}
+
+declare const _default$d: React.NamedExoticComponent<SvgProps>;
+
+type ViewerTheme = "light" | "dark";
+type MediaFormat = "jpeg" | "jpg" | "png" | "webp" | "mp4" | "webm" | "avi";
+type ObjectFit$2 = "contain" | "cover" | "fill" | "none" | "scale-down";
+interface ViewerFile {
+    url: string;
+    format: MediaFormat;
+    alt?: string;
+    fit?: ObjectFit$2;
+    persistAutoplay?: boolean;
+}
+interface ViewerProps {
+    id?: string;
+    show?: boolean;
+    files?: ViewerFile[];
+    currentImg?: number;
+    onClose?: (() => void) | null;
+    hideInfo?: boolean;
+    title?: string;
+    caption?: string;
+    theme?: ViewerTheme;
+}
+
+declare const ViewerComponent: React.FC<ViewerProps>;
+
+type BadgeTheme = "primary" | "secondary" | "tertiary" | "action" | "light" | "pill";
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    $theme?: BadgeTheme;
+    /** Mostrar icono de cerrar */
+    $closable?: boolean;
+    /** Callback al hacer click en el icono de cerrar */
+    onClose?: () => void;
+}
+
+declare const _default$c: React.NamedExoticComponent<BadgeProps & SuperCSSProps>;
+
+type ObjectFit$1 = "contain" | "cover" | "fill" | "none" | "scale-down";
+interface ImageProps extends HTMLAttributes<HTMLPictureElement> {
+    url?: string;
+    name?: string;
+    fit?: ObjectFit$1;
+    imagePosition?: string;
+    children?: ReactNode;
+    blur?: string;
+    ratio?: string;
+    radius?: string | number;
+    [key: string]: unknown;
+}
+
+declare const _default$b: React.NamedExoticComponent<ImageProps>;
+
+type ObjectFit = "contain" | "cover" | "fill" | "none" | "scale-down";
+interface VideoProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, "style"> {
+    src?: string;
+    alt?: string;
+    title?: string;
+    type?: string;
+    controls?: boolean;
+    autoPlay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    className?: string;
+    containerStyles?: CSSProperties;
+    videoStyles?: CSSProperties;
+    fit?: ObjectFit;
+    poster?: string;
+    id?: string;
+    name?: string;
+    style?: SuperCSSProps;
+    persistAutoplay?: boolean;
+    fetchpriority?: "high" | "low" | "auto";
+    preload?: "none" | "metadata" | "auto";
+}
+
+declare const _default$a: React.MemoExoticComponent<({ src, title, type, controls, autoPlay, muted, loop, className, containerStyles, videoStyles, fit, poster, id, name, persistAutoplay, ...props }: VideoProps) => react_jsx_runtime.JSX.Element>;
+
+interface BoxProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    $inline?: boolean;
+}
+
+declare const _default$9: React.NamedExoticComponent<BoxProps>;
+
+interface CenterProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    $wsvg?: number;
+    [key: string]: unknown;
+}
+
+declare const _default$8: React.NamedExoticComponent<CenterProps>;
+
+type TextType = "link" | "strong" | "span" | "p" | "small";
+interface TextProps extends HTMLAttributes<HTMLElement> {
+    $type?: TextType;
+    children?: ReactNode;
+    $hoverColor?: string;
+    [key: string]: any;
+}
+
+declare const _default$7: React.NamedExoticComponent<TextProps>;
+
+type TitleType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    [key: `$${string}`]: any;
+    $type?: TitleType;
+    children?: ReactNode;
+}
+
+declare const _default$6: React.NamedExoticComponent<TitleProps>;
+
+declare const _default$5: React.NamedExoticComponent<SuperCSSProps>;
+
+declare const _default$4: React.NamedExoticComponent<SuperCSSProps>;
+
+type GridType = "inline" | "grid";
+interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    type?: GridType | null;
+}
+
+declare const _default$3: React.NamedExoticComponent<GridProps & SuperCSSProps>;
+
+interface ColorProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    color?: string;
+    value?: string | number;
+    getValue?: (value: string | number | undefined) => void;
+}
+
+declare const _default$2: React.NamedExoticComponent<ColorProps>;
+
+interface SlideProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    height?: number | string;
+    autoPlay?: boolean;
+    autoPlayTime?: number;
+    hideControls?: boolean;
+    indicators?: boolean;
+    noOverflow?: boolean;
+    caption?: string;
+}
+
+declare const _default$1: React.MemoExoticComponent<({ children, height, autoPlay, autoPlayTime, hideControls, indicators, noOverflow, caption, ...props }: SlideProps) => react_jsx_runtime.JSX.Element>;
+
+declare const _default: React.NamedExoticComponent<SuperCSSProps>;
+
+declare const IconWrapper: React.FC<WrapperProps & SuperCSSProps>;
+declare const Icons: React.FC<IconsProps & SuperCSSProps>;
+
+/** Información extendida de un archivo */
+interface FileInfo {
+    /** Archivo original */
+    file: File;
+    /** ID único para el archivo */
+    id: string;
+    /** Nombre del archivo */
+    name: string;
+    /** Tamaño en bytes */
+    size: number;
+    /** Tamaño formateado (ej: "2.5 MB") */
+    sizeFormatted: string;
+    /** Tipo MIME */
+    type: string;
+    /** Extensión del archivo */
+    extension: string;
+    /** URL de preview (para imágenes) */
+    previewUrl?: string;
+    /** Fecha de última modificación */
+    lastModified: Date;
+    /** Estado de validación */
+    isValid: boolean;
+    /** Mensaje de error si no es válido */
+    errorMessage?: string;
+}
+/** Formatos de archivo permitidos */
+type FileFormat = "pdf" | "jpg" | "jpeg" | "png" | "webp" | "*";
+/** Props del componente FileUpload */
+interface FileUploadProps extends SuperCSSProps {
+    /** Formatos permitidos */
+    accept?: FileFormat[];
+    /** Permitir múltiples archivos */
+    multiple?: boolean;
+    /** Tamaño máximo por archivo en bytes (default: 10MB) */
+    maxSize?: number;
+    /** Número máximo de archivos (solo aplica si multiple=true) */
+    maxFiles?: number;
+    /** Archivos actuales (controlado) */
+    files?: FileInfo[];
+    /** Callback cuando cambian los archivos */
+    onChange?: (files: FileInfo[]) => void;
+    /** Callback cuando hay error */
+    onError?: (error: string) => void;
+    /** Texto del placeholder */
+    placeholder?: string;
+    /** Texto secundario del placeholder */
+    placeholderSecondary?: string;
+    /** Deshabilitado */
+    disabled?: boolean;
+    /** Mostrar lista de archivos */
+    showFileList?: boolean;
+    /** Tema visual */
+    theme?: "default" | "compact" | "minimal";
+}
+
+/** Componente FileUpload */
+declare function FileUpload({ accept, multiple, maxSize, // 10MB default
+maxFiles, files: controlledFiles, onChange, onError, placeholder, placeholderSecondary, disabled, showFileList, theme, ...props }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+export { _default$e as Alert, _default$c as Badge, _default$9 as Box, _default$g as Button, _default$f as ButtonIcon, _default$8 as Center, _default$i as CheckBox, _default$5 as Col, _default$2 as Color, _default$o as Container, _default as Dialog, Dropdown, FileUpload, _default$4 as Flex, _default$3 as Grid, IconWrapper, Icons, _default$b as Image, _default$k as Input, _default$j as InputHelper, _default$m as Loader, _default$l as Loading, _default$n as Modal, _default$h as Radio, CustomSelect as Select, _default$1 as Slide, _default$d as Svg, _default$7 as Text, _default$6 as Title, Tooltip, _default$a as Video, ViewerComponent as Viewer };
+export type { FileFormat, FileInfo, FileUploadProps };