@codeplex-sac/formularios 0.1.2

package/lib/area-texto-ajustable/area-texto-ajustable.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { TextareaAutosizeProps as MuiTextareaAutosizeProps, SxProps, Theme } from '@mui/material';
+export interface CodeplexAreaTextoAjustableProps extends Omit<MuiTextareaAutosizeProps, 'maxRows' | 'minRows' | 'placeholder' | 'style' | 'disabled' | 'value' | 'onChange'> {
+    variante?: 'contorneado' | 'relleno' | 'estandar';
+    etiqueta?: React.ReactNode;
+    textoAyuda?: React.ReactNode;
+    valor?: string | number;
+    alCambiar?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    deshabilitado?: boolean;
+    error?: boolean;
+    mensajeError?: React.ReactNode;
+    filasMinimas?: number;
+    filasMaximas?: number;
+    marcador?: string;
+    anchoCompleto?: boolean;
+    redimension?: 'vertical' | 'horizontal' | 'ambas' | 'ninguna';
+    sx?: SxProps<Theme>;
+}
+export declare const CodeplexAreaTextoAjustable: ({ variante, etiqueta, textoAyuda, valor, alCambiar, deshabilitado, error, mensajeError, filasMinimas, filasMaximas, marcador, anchoCompleto, redimension, sx, ...props }: CodeplexAreaTextoAjustableProps) => import("react/jsx-runtime").JSX.Element;

package/lib/autocompletado/autocompletado.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { AutocompleteProps, AutocompleteRenderInputParams, AutocompleteValue, AutocompleteChangeReason, AutocompleteChangeDetails } from '@mui/material/Autocomplete';
+import { TextFieldProps } from '@mui/material/TextField';
+export interface CodeplexAutocompletadoProps<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> extends Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'renderInput' | 'options' | 'value' | 'onChange' | 'loading' | 'disabled' | 'readOnly'> {
+    opciones: ReadonlyArray<T>;
+    valor?: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>;
+    alCambiar?: (event: React.SyntheticEvent, value: AutocompleteValue<T, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<T>) => void;
+    etiqueta?: string;
+    textoAyuda?: string;
+    marcador?: string;
+    error?: boolean;
+    mensajeError?: string;
+    requerido?: boolean;
+    cargando?: boolean;
+    deshabilitado?: boolean;
+    soloLectura?: boolean;
+    limpiable?: boolean;
+    multiple?: Multiple;
+    renderizarEntrada?: (params: AutocompleteRenderInputParams) => React.ReactNode;
+    propsEntrada?: TextFieldProps;
+}
+export declare function CodeplexAutocompletado<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined>({ opciones, valor, alCambiar, etiqueta, textoAyuda, marcador, error, mensajeError, requerido, cargando, deshabilitado, soloLectura, limpiable, multiple, propsEntrada, renderizarEntrada, ...props }: CodeplexAutocompletadoProps<T, Multiple, DisableClearable, FreeSolo>): import("react/jsx-runtime").JSX.Element;
+export declare const CodeplexAutocomplete: typeof CodeplexAutocompletado;

package/lib/campo-numero/campo-numero.d.ts

@@ -0,0 +1,21 @@
+import { TextFieldProps } from '@mui/material/TextField';
+export type CodeplexCampoNumeroAlineacion = 'izquierda' | 'centro' | 'derecha';
+export interface CodeplexCampoNumeroProps extends Omit<TextFieldProps, 'onChange' | 'error' | 'helperText'> {
+    etiqueta?: string;
+    textoAyuda?: string;
+    minimo?: number;
+    maximo?: number;
+    paso?: number;
+    valor?: number | null;
+    valorPorDefecto?: number;
+    alineacion?: CodeplexCampoNumeroAlineacion;
+    mostrarControles?: boolean;
+    error?: boolean;
+    mensajeError?: string;
+    deshabilitado?: boolean;
+    soloLectura?: boolean;
+    anchoCompleto?: boolean;
+    alCambiar?: (value: number | null) => void;
+}
+export declare const CodeplexCampoNumero: ({ etiqueta, textoAyuda, minimo: minimoOriginal, maximo: maximoOriginal, paso, valor, valorPorDefecto, alineacion, mostrarControles, error, mensajeError, deshabilitado, soloLectura, anchoCompleto, alCambiar, InputProps, ...props }: CodeplexCampoNumeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeplexNumberField: ({ etiqueta, textoAyuda, minimo: minimoOriginal, maximo: maximoOriginal, paso, valor, valorPorDefecto, alineacion, mostrarControles, error, mensajeError, deshabilitado, soloLectura, anchoCompleto, alCambiar, InputProps, ...props }: CodeplexCampoNumeroProps) => import("react/jsx-runtime").JSX.Element;

package/lib/campo-texto/campo-texto.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { TextFieldProps } from '@mui/material/TextField';
+export interface CodeplexCampoTextoProps extends Omit<TextFieldProps, 'label' | 'helperText' | 'disabled' | 'readOnly' | 'value' | 'onChange' | 'error' | 'multiline' | 'rows' | 'minRows' | 'maxRows' | 'placeholder' | 'fullWidth' | 'type' | 'onFocus' | 'onBlur'> {
+    etiqueta?: React.ReactNode;
+    textoAyuda?: React.ReactNode;
+    valor?: string | number | readonly string[];
+    alCambiar?: TextFieldProps['onChange'];
+    deshabilitado?: boolean;
+    soloLectura?: boolean;
+    error?: boolean;
+    mensajeError?: React.ReactNode;
+    multilinea?: boolean;
+    filas?: number;
+    filasMinimas?: number;
+    filasMaximas?: number;
+    marcador?: string;
+    anchoCompleto?: boolean;
+    tipo?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+    iconoInicio?: React.ReactNode;
+    iconoFin?: React.ReactNode;
+    alEnfocar?: TextFieldProps['onFocus'];
+    alDesenfocar?: TextFieldProps['onBlur'];
+    contenedorProps?: React.HTMLAttributes<HTMLDivElement>;
+}
+export declare const CodeplexCampoTexto: ({ etiqueta, textoAyuda, valor, alCambiar, deshabilitado, soloLectura, error, mensajeError, multilinea, filas, filasMinimas, filasMaximas, marcador, anchoCompleto, tipo, iconoInicio, iconoFin, alEnfocar, alDesenfocar, InputProps, sx, ...props }: CodeplexCampoTextoProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeplexTextField: ({ etiqueta, textoAyuda, valor, alCambiar, deshabilitado, soloLectura, error, mensajeError, multilinea, filas, filasMinimas, filasMaximas, marcador, anchoCompleto, tipo, iconoInicio, iconoFin, alEnfocar, alDesenfocar, InputProps, sx, ...props }: CodeplexCampoTextoProps) => import("react/jsx-runtime").JSX.Element;

package/lib/campo-texto/campo-texto.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CodeplexCampoTexto } from './campo-texto';
+declare const meta: Meta<typeof CodeplexCampoTexto>;
+export default meta;
+type Story = StoryObj<typeof CodeplexCampoTexto>;
+export declare const Basico: Story;
+export declare const ConAyuda: Story;
+export declare const ConError: Story;
+export declare const Deshabilitado: Story;
+export declare const SoloLectura: Story;
+export declare const AnchoCompleto: Story;
+export declare const Multilinea: Story;
+export declare const ConIconos: Story;

package/lib/cargador-archivos/cargador-archivos.d.ts

@@ -0,0 +1,21 @@
+import { DropzoneOptions } from 'react-dropzone';
+export interface CodeplexArchivoInfo {
+    archivo: File;
+    id: string;
+    error?: string;
+}
+export interface CodeplexCargadorArchivosProps {
+    archivos?: CodeplexArchivoInfo[];
+    alAgregar?: (archivos: CodeplexArchivoInfo[]) => void;
+    alEliminar?: (id: string) => void;
+    tiposAceptados?: DropzoneOptions['accept'];
+    maxArchivos?: number;
+    tamanoMaximo?: number;
+    textoArrastrar?: string;
+    textoSecundario?: string;
+    deshabilitado?: boolean;
+    mostrarLista?: boolean;
+    error?: boolean;
+    mensajeError?: string;
+}
+export declare const CodeplexCargadorArchivos: ({ archivos, alAgregar, alEliminar, tiposAceptados, maxArchivos, tamanoMaximo, textoArrastrar, textoSecundario, deshabilitado, mostrarLista, error, mensajeError, }: CodeplexCargadorArchivosProps) => import("react/jsx-runtime").JSX.Element;

package/lib/cargador-archivos/cargador-archivos.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CodeplexCargadorArchivos } from './cargador-archivos';
+declare const meta: Meta<typeof CodeplexCargadorArchivos>;
+export default meta;
+type Story = StoryObj<typeof CodeplexCargadorArchivos>;
+export declare const Basico: Story;
+export declare const SoloImagenes: Story;
+export declare const ConError: Story;
+export declare const Deshabilitado: Story;

package/lib/casilla/casilla.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { CheckboxProps } from '@mui/material/Checkbox';
+import { default as FormGroup } from '@mui/material/FormGroup';
+export type CodeplexCasillaTamano = 'pequeno' | 'mediano' | 'grande';
+export type CodeplexCasillaColor = 'primario' | 'secundario' | 'exito' | 'error' | 'info' | 'advertencia';
+export type CodeplexCasillaVariante = 'estandar' | 'suave' | 'borde';
+export interface CodeplexCasillaProps extends Omit<CheckboxProps, 'size' | 'color' | 'checked'> {
+    etiqueta?: React.ReactNode;
+    posicionEtiqueta?: 'derecha' | 'izquierda' | 'arriba' | 'abajo';
+    seleccionado?: boolean;
+    indeterminado?: boolean;
+    deshabilitado?: boolean;
+    soloLectura?: boolean;
+    requerido?: boolean;
+    error?: boolean;
+    tamano?: CodeplexCasillaTamano | 'p' | 'm' | 'g';
+    color?: CodeplexCasillaColor;
+    variante?: CodeplexCasillaVariante;
+    alCambiar?: (evento: React.ChangeEvent<HTMLInputElement>, seleccionado: boolean) => void;
+}
+export declare const CodeplexCasilla: React.ForwardRefExoticComponent<Omit<CodeplexCasillaProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { FormGroup as CodeplexGrupoFormulario };
+export declare const CodeplexCheckbox: React.ForwardRefExoticComponent<Omit<CodeplexCasillaProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/lib/casilla/casilla.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CodeplexCasilla } from './casilla';
+declare const meta: Meta<typeof CodeplexCasilla>;
+export default meta;
+type Story = StoryObj<typeof CodeplexCasilla>;
+export declare const Marcada: Story;
+export declare const Desmarcada: Story;
+export declare const Indeterminada: Story;
+export declare const Deshabilitada: Story;
+export declare const Controlada: Story;

package/lib/deslizador/deslizador.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { SliderProps } from '@mui/material/Slider';
+export type CodeplexDeslizadorColor = 'primario' | 'secundario' | 'exito' | 'error' | 'info' | 'advertencia';
+export type CodeplexDeslizadorMostrarEtiqueta = 'auto' | 'siempre' | 'nunca';
+export type CodeplexDeslizadorTamano = 'pequeno' | 'mediano';
+export interface CodeplexDeslizadorProps extends Omit<SliderProps, 'value' | 'min' | 'max' | 'step' | 'marks' | 'valueLabelDisplay' | 'color' | 'size' | 'orientation'> {
+    etiqueta?: string;
+    textoAyuda?: string;
+    valor?: number | number[];
+    minimo?: number;
+    maximo?: number;
+    paso?: number | null;
+    marcas?: boolean | Array<{
+        value: number;
+        label?: React.ReactNode;
+    }>;
+    mostrarEtiquetaValor?: CodeplexDeslizadorMostrarEtiqueta;
+    orientacion?: 'horizontal' | 'vertical';
+    color?: CodeplexDeslizadorColor;
+    alCambiar?: (event: Event, value: number | number[], activeThumb: number) => void;
+    tamano?: CodeplexDeslizadorTamano;
+}
+export declare const CodeplexDeslizador: ({ etiqueta, textoAyuda, valor, minimo, maximo, paso, marcas, mostrarEtiquetaValor, orientacion, color, alCambiar, tamano, sx, ...props }: CodeplexDeslizadorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeplexSlider: ({ etiqueta, textoAyuda, valor, minimo, maximo, paso, marcas, mostrarEtiquetaValor, orientacion, color, alCambiar, tamano, sx, ...props }: CodeplexDeslizadorProps) => import("react/jsx-runtime").JSX.Element;

package/lib/grupo-radio/grupo-radio.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { RadioProps } from '@mui/material/Radio';
+import { RadioGroupProps } from '@mui/material/RadioGroup';
+export type CodeplexGrupoRadioOrientacion = 'horizontal' | 'vertical';
+export type CodeplexGrupoRadioColor = 'primario' | 'secundario' | 'exito' | 'error' | 'info' | 'advertencia';
+export type CodeplexRadioPosicionEtiqueta = 'fin' | 'inicio' | 'arriba' | 'abajo';
+export interface CodeplexRadioProps extends Omit<RadioProps, 'color'> {
+    etiqueta?: string;
+    posicionEtiqueta?: CodeplexRadioPosicionEtiqueta;
+    colorTema?: CodeplexGrupoRadioColor;
+}
+export declare const CodeplexRadio: React.ForwardRefExoticComponent<Omit<CodeplexRadioProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface CodeplexGrupoRadioProps extends Omit<RadioGroupProps, 'row' | 'onChange'> {
+    etiqueta?: string;
+    opciones?: Array<{
+        valor: string;
+        etiqueta: string;
+        deshabilitado?: boolean;
+    }>;
+    orientacion?: CodeplexGrupoRadioOrientacion;
+    valor?: string;
+    alCambiar?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
+    color?: CodeplexGrupoRadioColor;
+    error?: boolean;
+    mensajeError?: string;
+}
+export declare const CodeplexGrupoRadio: ({ etiqueta, opciones, orientacion, valor, alCambiar, color, error, mensajeError, children, ...props }: CodeplexGrupoRadioProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeplexRadioGroup: ({ etiqueta, opciones, orientacion, valor, alCambiar, color, error, mensajeError, children, ...props }: CodeplexGrupoRadioProps) => import("react/jsx-runtime").JSX.Element;

package/lib/interruptor/interruptor.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { SwitchProps } from '@mui/material/Switch';
+export type CodeplexInterruptorColor = 'primario' | 'secundario' | 'exito' | 'error' | 'advertencia' | 'info';
+export type CodeplexInterruptorTamano = 'pequeno' | 'mediano';
+export type CodeplexInterruptorPosicionEtiqueta = 'inicio' | 'fin' | 'arriba' | 'abajo';
+export interface CodeplexInterruptorProps extends Omit<SwitchProps, 'size' | 'color' | 'checked' | 'defaultChecked' | 'onChange' | 'disabled'> {
+    etiqueta?: React.ReactNode;
+    posicionEtiqueta?: CodeplexInterruptorPosicionEtiqueta;
+    tamano?: CodeplexInterruptorTamano;
+    seleccionado?: boolean;
+    porDefectoSeleccionado?: boolean;
+    alCambiar?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    color?: CodeplexInterruptorColor;
+    deshabilitado?: boolean;
+    error?: boolean;
+    mensajeError?: string;
+}
+export declare const CodeplexInterruptor: ({ etiqueta, posicionEtiqueta, tamano, seleccionado, porDefectoSeleccionado, alCambiar, color, deshabilitado, error, mensajeError, sx, className, ...props }: CodeplexInterruptorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeplexSwitch: ({ etiqueta, posicionEtiqueta, tamano, seleccionado, porDefectoSeleccionado, alCambiar, color, deshabilitado, error, mensajeError, sx, className, ...props }: CodeplexInterruptorProps) => import("react/jsx-runtime").JSX.Element;

package/lib/interruptor/interruptor.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CodeplexInterruptor } from './interruptor';
+declare const meta: Meta<typeof CodeplexInterruptor>;
+export default meta;
+type Story = StoryObj<typeof CodeplexInterruptor>;
+export declare const Activo: Story;
+export declare const Inactivo: Story;
+export declare const Deshabilitado: Story;
+export declare const Colores: Story;
+export declare const Controlado: Story;

package/lib/lista-transferencia/lista-transferencia.d.ts

@@ -0,0 +1,17 @@
+export interface ElementoListaTransferencia {
+    id: string | number;
+    etiqueta: string;
+    deshabilitado?: boolean;
+}
+export interface CodeplexListaTransferenciaProps {
+    izquierda?: ElementoListaTransferencia[];
+    derecha?: ElementoListaTransferencia[];
+    alCambiar?: (izquierda: ElementoListaTransferencia[], derecha: ElementoListaTransferencia[]) => void;
+    tituloIzquierda?: string;
+    tituloDerecha?: string;
+    alto?: number | string;
+    buscable?: boolean;
+    deshabilitado?: boolean;
+}
+export declare const CodeplexListaTransferencia: ({ izquierda, derecha, alCambiar, tituloIzquierda, tituloDerecha, alto, buscable, deshabilitado }: CodeplexListaTransferenciaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CodeplexTransferList: ({ izquierda, derecha, alCambiar, tituloIzquierda, tituloDerecha, alto, buscable, deshabilitado }: CodeplexListaTransferenciaProps) => import("react/jsx-runtime").JSX.Element;

package/lib/selector/selector.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+import { SelectProps } from '@mui/material/Select';
+import { default as MenuItem } from '@mui/material/MenuItem';
+export interface CodeplexSelectorOpcion {
+    valor: string | number;
+    etiqueta: string;
+    deshabilitado?: boolean;
+}
+export interface CodeplexSelectorProps extends Omit<SelectProps, 'renderValue'> {
+    etiqueta?: string;
+    opciones?: CodeplexSelectorOpcion[];
+    textoAyuda?: ReactNode;
+    marcador?: string;
+    renderizarValor?: (value: unknown) => ReactNode;
+    alCambiar?: SelectProps['onChange'];
+    tamano?: SelectProps['size'];
+    alCrearNuevo?: () => void;
+    textoCrearNuevo?: string;
+    mensajeError?: string;
+    buscable?: boolean;
+}
+export declare const CodeplexSelector: ({ value, onChange, size, multiple, error, disabled, required, variant, displayEmpty, etiqueta, opciones, textoAyuda, marcador, renderizarValor, alCambiar, tamano, alCrearNuevo, textoCrearNuevo, mensajeError, buscable, children, sx, ...props }: CodeplexSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export { MenuItem as CodeplexElementoMenu };
+export { default as CodeplexSubcabeceraLista } from '@mui/material/ListSubheader';
+export declare const CodeplexSelect: ({ value, onChange, size, multiple, error, disabled, required, variant, displayEmpty, etiqueta, opciones, textoAyuda, marcador, renderizarValor, alCambiar, tamano, alCrearNuevo, textoCrearNuevo, mensajeError, buscable, children, sx, ...props }: CodeplexSelectorProps) => import("react/jsx-runtime").JSX.Element;

package/lib/selector/selector.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CodeplexSelector } from './selector';
+declare const meta: Meta<typeof CodeplexSelector>;
+export default meta;
+type Story = StoryObj<typeof CodeplexSelector>;
+export declare const Basico: Story;
+export declare const ConValorPorDefecto: Story;
+export declare const Deshabilitado: Story;
+export declare const ConError: Story;
+export declare const Controlado: Story;

package/lib/selector-color/selector-color.d.ts

@@ -0,0 +1,10 @@
+export interface CodeplexSelectorColorProps {
+    valor?: string;
+    alCambiar?: (color: string) => void;
+    etiqueta?: string;
+    deshabilitado?: boolean;
+    coloresPredefinidos?: string[];
+    mostrarHex?: boolean;
+    ancho?: number;
+}
+export declare const CodeplexSelectorColor: ({ valor, alCambiar, etiqueta, deshabilitado, coloresPredefinidos, mostrarHex, ancho, }: CodeplexSelectorColorProps) => import("react/jsx-runtime").JSX.Element;

package/lib/selector-color/selector-color.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CodeplexSelectorColor } from './selector-color';
+declare const meta: Meta<typeof CodeplexSelectorColor>;
+export default meta;
+type Story = StoryObj<typeof CodeplexSelectorColor>;
+export declare const Basico: Story;
+export declare const SinColoresPredefinidos: Story;
+export declare const PredefinidosMarca: Story;
+export declare const Deshabilitado: Story;

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@codeplex-sac/formularios",
+  "version": "0.1.2",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@mui/material": "^7.3.6",
+    "@mui/icons-material": "^7.3.6",
+    "@mui/system": "^7.3.7",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1"
+  }
+}