siam-ui-utils 3.1.4 → 3.2.0

package/dist/CustomBootstrap.js

@@ -1,6 +1,13 @@
 import { jsx } from "react/jsx-runtime";
-import Col from "./node_modules/@neolution-ch/reactstrap/esm/Col.js";
-const Colxx = (props) => /* @__PURE__ */ jsx(Col, { ...props, widths: ["xxs", "xs", "sm", "md", "lg", "xl", "xxl"] });
+import { Col } from "siam-ui";
+const Colxx = ({ xxs, xxsOffset, xs, xsOffset, ...rest }) => /* @__PURE__ */ jsx(
+  Col,
+  {
+    xs: xs ?? xxs,
+    xsOffset: xsOffset ?? xxsOffset,
+    ...rest
+  }
+);
 const Separator = ({ className }) => /* @__PURE__ */ jsx("div", { className: `separator ${className}` });
 export {
   Colxx,

package/dist/CustomBootstrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomBootstrap.js","sources":["../src/CustomBootstrap.jsx"],"sourcesContent":["import { Col } from '@neolution-ch/reactstrap';\r\n\r\nconst Colxx = (props) => (\r\n  <Col {...props} widths={['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']} />\r\n);\r\n\r\nconst Separator = ({ className }) => (\r\n  <div className={`separator ${className}`} />\r\n);\r\nexport { Colxx, Separator };\r\n"],"names":[],"mappings":";;AAEA,MAAM,QAAQ,CAAC,UACb,oBAAC,KAAA,EAAK,GAAG,OAAO,QAAQ,CAAC,OAAO,MAAM,MAAM,MAAM,MAAM,MAAM,KAAK,EAAA,CAAG;AAGxE,MAAM,YAAY,CAAC,EAAE,UAAA,0BAClB,OAAA,EAAI,WAAW,aAAa,SAAS,GAAA,CAAI;"}
+{"version":3,"file":"CustomBootstrap.js","sources":["../src/CustomBootstrap.jsx"],"sourcesContent":["import { Col } from 'siam-ui';\r\n\r\nconst Colxx = ({ xxs, xxsOffset, xs, xsOffset, ...rest }) => (\r\n  <Col\r\n    xs={xs ?? xxs}\r\n    xsOffset={xsOffset ?? xxsOffset}\r\n    {...rest}\r\n  />\r\n);\r\n\r\nconst Separator = ({ className }) => (\r\n  <div className={`separator ${className}`} />\r\n);\r\nexport { Colxx, Separator };\r\n"],"names":[],"mappings":";;AAEA,MAAM,QAAQ,CAAC,EAAE,KAAK,WAAW,IAAI,UAAU,GAAG,KAAA,MAChD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,IAAI,MAAM;AAAA,IACV,UAAU,YAAY;AAAA,IACrB,GAAG;AAAA,EAAA;AACN;AAGF,MAAM,YAAY,CAAC,EAAE,UAAA,0BAClB,OAAA,EAAI,WAAW,aAAa,SAAS,GAAA,CAAI;"}

package/dist/copy-link/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import Button from "../node_modules/@neolution-ch/reactstrap/esm/Button.js";
+import { Button } from "siam-ui";
 import copiarIcon from "../assets/img/copiar.png.js";
 import "./styles.css";
 const copyToClipboard = async (text) => {
@@ -43,8 +43,8 @@ const CopyLink = ({ link }) => {
     /* @__PURE__ */ jsx(
       Button,
       {
-        color: "link",
-        size: "sm",
+        $variant: "transparent",
+        $size: "small",
         onClick: handleCopy,
         title: "Copiar link",
         className: "copy-link-btn",

package/dist/copy-link/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/copy-link/index.jsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { Button } from '@neolution-ch/reactstrap';\r\nimport copiarIcon from '../assets/img/copiar.png';\r\nimport './styles.scss';\r\n\r\nconst copyToClipboard = async (text) => {\r\n  try {\r\n    if (!text) return false;\r\n    if (navigator.clipboard?.writeText) {\r\n      await navigator.clipboard.writeText(text);\r\n      return true;\r\n    }\r\n    const ta = document.createElement('textarea');\r\n    ta.value = text;\r\n    ta.style.position = 'fixed';\r\n    ta.style.left = '-9999px';\r\n    document.body.appendChild(ta);\r\n    ta.select();\r\n    document.execCommand('copy');\r\n    document.body.removeChild(ta);\r\n    return true;\r\n  } catch {\r\n    return false;\r\n  }\r\n};\r\n\r\nconst CopyLink = ({ link }) => {\r\n  const [copied, setCopied] = useState(false);\r\n\r\n  const handleCopy = async () => {\r\n    await copyToClipboard(link);\r\n    setCopied(true);\r\n    setTimeout(() => setCopied(false), 2000);\r\n  };\r\n  return (\r\n    <span className=\"copy-link-container\">\r\n      <span\r\n        title={link}\r\n        className={`copy-link-text${copied ? ' copied' : ''}`}\r\n        onClick={handleCopy}\r\n      >\r\n        {link}\r\n      </span>\r\n      <Button\r\n        color=\"link\"\r\n        size=\"sm\"\r\n        onClick={handleCopy}\r\n        title=\"Copiar link\"\r\n        className=\"copy-link-btn\"\r\n      >\r\n        <img src={copiarIcon} alt=\"Copiar\" />\r\n      </Button>\r\n      {copied && <span className=\"copy-link-copied\">¡Copiado!</span>}\r\n    </span>\r\n  );\r\n};\r\n\r\nexport { CopyLink };\r\n"],"names":[],"mappings":";;;;;AAKA,MAAM,kBAAkB,OAAO,SAAS;AACtC,MAAI;AACF,QAAI,CAAC,KAAM,QAAO;AAClB,QAAI,UAAU,WAAW,WAAW;AAClC,YAAM,UAAU,UAAU,UAAU,IAAI;AACxC,aAAO;AAAA,IACT;AACA,UAAM,KAAK,SAAS,cAAc,UAAU;AAC5C,OAAG,QAAQ;AACX,OAAG,MAAM,WAAW;AACpB,OAAG,MAAM,OAAO;AAChB,aAAS,KAAK,YAAY,EAAE;AAC5B,OAAG,OAAA;AACH,aAAS,YAAY,MAAM;AAC3B,aAAS,KAAK,YAAY,EAAE;AAC5B,WAAO;AAAA,EACT,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,MAAM,WAAW,CAAC,EAAE,WAAW;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,aAAa,YAAY;AAC7B,UAAM,gBAAgB,IAAI;AAC1B,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,EACzC;AACA,SACE,qBAAC,QAAA,EAAK,WAAU,uBACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAW,iBAAiB,SAAS,YAAY,EAAE;AAAA,QACnD,SAAS;AAAA,QAER,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,MAAK;AAAA,QACL,SAAS;AAAA,QACT,OAAM;AAAA,QACN,WAAU;AAAA,QAEV,UAAA,oBAAC,OAAA,EAAI,KAAK,YAAY,KAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpC,UAAU,oBAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,YAAA,CAAS;AAAA,EAAA,GACzD;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../src/copy-link/index.jsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { Button } from 'siam-ui';\r\nimport copiarIcon from '../assets/img/copiar.png';\r\nimport './styles.scss';\r\n\r\nconst copyToClipboard = async (text) => {\r\n  try {\r\n    if (!text) return false;\r\n    if (navigator.clipboard?.writeText) {\r\n      await navigator.clipboard.writeText(text);\r\n      return true;\r\n    }\r\n    const ta = document.createElement('textarea');\r\n    ta.value = text;\r\n    ta.style.position = 'fixed';\r\n    ta.style.left = '-9999px';\r\n    document.body.appendChild(ta);\r\n    ta.select();\r\n    document.execCommand('copy');\r\n    document.body.removeChild(ta);\r\n    return true;\r\n  } catch {\r\n    return false;\r\n  }\r\n};\r\n\r\nconst CopyLink = ({ link }) => {\r\n  const [copied, setCopied] = useState(false);\r\n\r\n  const handleCopy = async () => {\r\n    await copyToClipboard(link);\r\n    setCopied(true);\r\n    setTimeout(() => setCopied(false), 2000);\r\n  };\r\n  return (\r\n    <span className=\"copy-link-container\">\r\n      <span\r\n        title={link}\r\n        className={`copy-link-text${copied ? ' copied' : ''}`}\r\n        onClick={handleCopy}\r\n      >\r\n        {link}\r\n      </span>\r\n      <Button\r\n        $variant=\"transparent\"\r\n        $size=\"small\"\r\n        onClick={handleCopy}\r\n        title=\"Copiar link\"\r\n        className=\"copy-link-btn\"\r\n      >\r\n        <img src={copiarIcon} alt=\"Copiar\" />\r\n      </Button>\r\n      {copied && <span className=\"copy-link-copied\">¡Copiado!</span>}\r\n    </span>\r\n  );\r\n};\r\n\r\nexport { CopyLink };\r\n"],"names":[],"mappings":";;;;;AAKA,MAAM,kBAAkB,OAAO,SAAS;AACtC,MAAI;AACF,QAAI,CAAC,KAAM,QAAO;AAClB,QAAI,UAAU,WAAW,WAAW;AAClC,YAAM,UAAU,UAAU,UAAU,IAAI;AACxC,aAAO;AAAA,IACT;AACA,UAAM,KAAK,SAAS,cAAc,UAAU;AAC5C,OAAG,QAAQ;AACX,OAAG,MAAM,WAAW;AACpB,OAAG,MAAM,OAAO;AAChB,aAAS,KAAK,YAAY,EAAE;AAC5B,OAAG,OAAA;AACH,aAAS,YAAY,MAAM;AAC3B,aAAS,KAAK,YAAY,EAAE;AAC5B,WAAO;AAAA,EACT,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,MAAM,WAAW,CAAC,EAAE,WAAW;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,aAAa,YAAY;AAC7B,UAAM,gBAAgB,IAAI;AAC1B,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,EACzC;AACA,SACE,qBAAC,QAAA,EAAK,WAAU,uBACd,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,WAAW,iBAAiB,SAAS,YAAY,EAAE;AAAA,QACnD,SAAS;AAAA,QAER,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,OAAM;AAAA,QACN,SAAS;AAAA,QACT,OAAM;AAAA,QACN,WAAU;AAAA,QAEV,UAAA,oBAAC,OAAA,EAAI,KAAK,YAAY,KAAI,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpC,UAAU,oBAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,YAAA,CAAS;AAAA,EAAA,GACzD;AAEJ;"}

package/dist/custom-input/CustomInputCheckbox.js

@@ -1,8 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import FormGroup from "../node_modules/@neolution-ch/reactstrap/esm/FormGroup.js";
-import Input from "../node_modules/@neolution-ch/reactstrap/esm/Input.js";
-import Label from "../node_modules/@neolution-ch/reactstrap/esm/Label.js";
-import "./index.css";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { Checkbox } from "siam-ui";
 const CustomInputCheckbox = ({
   className,
   id,
@@ -11,24 +8,45 @@ const CustomInputCheckbox = ({
   defaultChecked,
   disabled,
   label,
-  onChange
+  onChange,
+  direction = "row",
+  style,
+  slotProps
 }) => {
-  return /* @__PURE__ */ jsxs(FormGroup, { check: true, className: "custom-checkbox", children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      Input,
+      Checkbox,
       {
-        type: "checkbox",
         id: `check_${id}`,
         className,
         checked,
         onChange,
         defaultChecked,
-        disabled
+        disabled,
+        label,
+        direction,
+        style: {
+          "--siam-checkbox-size": "19px",
+          ...style
+        },
+        slotProps: {
+          ...slotProps,
+          root: {
+            ...slotProps?.root,
+            style: {
+              flexDirection: direction,
+              ...slotProps?.root?.style
+            }
+          },
+          label: {
+            ...slotProps?.label,
+            style: { fontSize: "12px", ...slotProps?.label?.style }
+          }
+        }
       }
     ),
-    /* @__PURE__ */ jsx(Label, { check: true, htmlFor: `check_${id}`, children: label }),
     children
-  ] }, id);
+  ] });
 };
 export {
   CustomInputCheckbox

package/dist/custom-input/CustomInputCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomInputCheckbox.js","sources":["../../src/custom-input/CustomInputCheckbox.jsx"],"sourcesContent":["import { FormGroup, Label, Input } from '@neolution-ch/reactstrap';\r\nimport './index.css';\r\n\r\nexport const CustomInputCheckbox = ({\r\n  className,\r\n  id,\r\n  checked,\r\n  children,\r\n  defaultChecked,\r\n  disabled,\r\n  label,\r\n  onChange,\r\n}) => {\r\n  return (\r\n    <FormGroup check key={id} className=\"custom-checkbox\">\r\n      <Input\r\n        type=\"checkbox\"\r\n        id={`check_${id}`}\r\n        className={className}\r\n        checked={checked}\r\n        onChange={onChange}\r\n        defaultChecked={defaultChecked}\r\n        disabled={disabled}\r\n      />\r\n      <Label check htmlFor={`check_${id}`}>\r\n        {label}\r\n      </Label>\r\n      {children}\r\n    </FormGroup>\r\n  );\r\n};\r\nexport default CustomInputCheckbox;\r\n"],"names":[],"mappings":";;;;;AAGO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE,qBAAC,WAAA,EAAU,OAAK,MAAU,WAAU,mBAClC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,SAAS,EAAE;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,oBAAC,SAAM,OAAK,MAAC,SAAS,SAAS,EAAE,IAC9B,UAAA,MAAA,CACH;AAAA,IACC;AAAA,EAAA,EAAA,GAbmB,EActB;AAEJ;"}
+{"version":3,"file":"CustomInputCheckbox.js","sources":["../../src/custom-input/CustomInputCheckbox.jsx"],"sourcesContent":["import { Checkbox } from 'siam-ui';\n\nexport const CustomInputCheckbox = ({\n  className,\n  id,\n  checked,\n  children,\n  defaultChecked,\n  disabled,\n  label,\n  onChange,\n  direction = 'row',\n  style,\n  slotProps,\n}) => {\n  return (\n    <>\n      <Checkbox\n        id={`check_${id}`}\n        className={className}\n        checked={checked}\n        onChange={onChange}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        label={label}\n        direction={direction}\n        style={{\n          '--siam-checkbox-size': '19px',\n          ...style,\n        }}\n        slotProps={{\n          ...slotProps,\n          root: {\n            ...slotProps?.root,\n            style: {\n              flexDirection: direction,\n              ...slotProps?.root?.style,\n            },\n          },\n          label: {\n            ...slotProps?.label,\n            style: { fontSize: '12px', ...slotProps?.label?.style },\n          },\n        }}\n      />\n      {children}\n    </>\n  );\n};\n\nexport default CustomInputCheckbox;\n"],"names":[],"mappings":";;AAEO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAM;AACJ,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,SAAS,EAAE;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,UACL,wBAAwB;AAAA,UACxB,GAAG;AAAA,QAAA;AAAA,QAEL,WAAW;AAAA,UACT,GAAG;AAAA,UACH,MAAM;AAAA,YACJ,GAAG,WAAW;AAAA,YACd,OAAO;AAAA,cACL,eAAe;AAAA,cACf,GAAG,WAAW,MAAM;AAAA,YAAA;AAAA,UACtB;AAAA,UAEF,OAAO;AAAA,YACL,GAAG,WAAW;AAAA,YACd,OAAO,EAAE,UAAU,QAAQ,GAAG,WAAW,OAAO,MAAA;AAAA,UAAM;AAAA,QACxD;AAAA,MACF;AAAA,IAAA;AAAA,IAED;AAAA,EAAA,GACH;AAEJ;"}

package/dist/custom-input/CustomInputCurrency.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import Input from "../node_modules/@neolution-ch/reactstrap/esm/Input.js";
+import { Input } from "siam-ui";
 import { fieldToCurrency } from "siam-utils";
 const CustomInputCurrency = (props) => {
   const {

package/dist/custom-input/CustomInputCurrency.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomInputCurrency.js","sources":["../../src/custom-input/CustomInputCurrency.jsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Input } from '@neolution-ch/reactstrap';\r\nimport { fieldToCurrency } from 'siam-utils';\r\n/**\r\n * value, //admite formato como devuelve la BD (varchar), flotante o currency\r\n * al setear un valor en el componente se visualiza como Currency:\r\n *    Formato $ 3.000,60\r\n * Al intentar editar el VALOR automaticamente se conviertea un numero cuyo formato es:\r\n *    sin separador de miles, sin simbolo pesos ($), y la coma como separador de decimales\r\n *    Formato: 3000,60\r\n * Al perder el foco el VALOR cambia a formato currency\r\n * Para el componente PADRE que lo esta usando, va a recibir desde el evento onblur un valor cuyo formato es el PERSISTENCE:\r\n *    Formato: 3000.60\r\n */\r\nexport const CustomInputCurrency = (props) => {\r\n  const {\r\n    onChange = () => {\r\n      undefined;\r\n    },\r\n    onFocus = () => {\r\n      undefined;\r\n    },\r\n    value = {},\r\n    maxLength = '20',\r\n    style = {},\r\n  } = props;\r\n  const styleCurrency = { ...style, textAlign: 'right' };\r\n  const [valueInputCur, setValueInputCur] = useState('');\r\n  const escapeRegExp = (string) =>\r\n    string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\r\n\r\n  const handleInputOnBlur = (event) => {\r\n    const { target } = event;\r\n    if (valueInputCur !== '') {\r\n      const valor = valueInputCur.replace('.', '');\r\n      const valorPersistence = valor.replace(',', '.');\r\n      setValueInputCur(fieldToCurrency(valorPersistence));\r\n      onChange({\r\n        ...event,\r\n        target: {\r\n          ...target,\r\n          value: valorPersistence,\r\n          valueCurrency: fieldToCurrency(valorPersistence),\r\n          valueFloat: parseFloat(valorPersistence),\r\n        },\r\n      });\r\n    }\r\n  };\r\n\r\n  const handleInputOnFocus = (e) => {\r\n    if (valueInputCur !== '') {\r\n      const valor = valueInputCur.replace('$ ', '');\r\n      const valor2 = valor.replace(/\\./g, '');\r\n      setValueInputCur(valor2);\r\n    }\r\n    onFocus(e);\r\n  };\r\n\r\n  const handleInputChange = (event) => {\r\n    const { target } = event;\r\n    const valor = target.value.replace('$ ', '');\r\n    const valid = /^-?[0-9.]*(?:[,]\\d?\\d?)?$/;\r\n    if (valid.test(valor)) {\r\n      const sepDec = valor.slice(-1) === '.' ? `${valor.slice(0, -1)},` : valor;\r\n      const punto = new RegExp(escapeRegExp('.'), 'g');\r\n      const sinSepMil = sepDec.replace(punto, '');\r\n      const posPuntoDec = sinSepMil.indexOf(',');\r\n      const parteDecimal = posPuntoDec >= 0 ? sinSepMil.slice(posPuntoDec) : '';\r\n      const parteEntera =\r\n        posPuntoDec >= 0 ? sinSepMil.slice(0, posPuntoDec) : sinSepMil;\r\n      setValueInputCur(parteEntera + parteDecimal);\r\n    }\r\n  };\r\n  useEffect(() => {\r\n    if (value && value !== '') {\r\n      if (typeof value != 'number' && value && value.includes('$')) {\r\n        setValueInputCur(value.toString());\r\n      } else {\r\n        setValueInputCur(fieldToCurrency(value.toString()));\r\n      }\r\n    } else {\r\n      setValueInputCur('');\r\n    }\r\n  }, [value]);\r\n\r\n  return (\r\n    <Input\r\n      {...props}\r\n      style={styleCurrency}\r\n      maxLength={maxLength}\r\n      value={valueInputCur}\r\n      onFocus={handleInputOnFocus}\r\n      onChange={handleInputChange}\r\n      onBlur={handleInputOnBlur}\r\n    />\r\n  );\r\n};\r\n\r\nexport default CustomInputCurrency;\r\n"],"names":[],"mappings":";;;;AAcO,MAAM,sBAAsB,CAAC,UAAU;AAC5C,QAAM;AAAA,IACJ,WAAW,MAAM;AAAA,IAEjB;AAAA,IACA,UAAU,MAAM;AAAA,IAEhB;AAAA,IACA,QAAQ,CAAA;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ,CAAA;AAAA,EAAC,IACP;AACJ,QAAM,gBAAgB,EAAE,GAAG,OAAO,WAAW,QAAA;AAC7C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AACrD,QAAM,eAAe,CAAC,WACpB,OAAO,QAAQ,uBAAuB,MAAM;AAE9C,QAAM,oBAAoB,CAAC,UAAU;AACnC,UAAM,EAAE,WAAW;AACnB,QAAI,kBAAkB,IAAI;AACxB,YAAM,QAAQ,cAAc,QAAQ,KAAK,EAAE;AAC3C,YAAM,mBAAmB,MAAM,QAAQ,KAAK,GAAG;AAC/C,uBAAiB,gBAAgB,gBAAgB,CAAC;AAClD,eAAS;AAAA,QACP,GAAG;AAAA,QACH,QAAQ;AAAA,UACN,GAAG;AAAA,UACH,OAAO;AAAA,UACP,eAAe,gBAAgB,gBAAgB;AAAA,UAC/C,YAAY,WAAW,gBAAgB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF;AAEA,QAAM,qBAAqB,CAAC,MAAM;AAChC,QAAI,kBAAkB,IAAI;AACxB,YAAM,QAAQ,cAAc,QAAQ,MAAM,EAAE;AAC5C,YAAM,SAAS,MAAM,QAAQ,OAAO,EAAE;AACtC,uBAAiB,MAAM;AAAA,IACzB;AACA,YAAQ,CAAC;AAAA,EACX;AAEA,QAAM,oBAAoB,CAAC,UAAU;AACnC,UAAM,EAAE,WAAW;AACnB,UAAM,QAAQ,OAAO,MAAM,QAAQ,MAAM,EAAE;AAC3C,UAAM,QAAQ;AACd,QAAI,MAAM,KAAK,KAAK,GAAG;AACrB,YAAM,SAAS,MAAM,MAAM,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM;AACpE,YAAM,QAAQ,IAAI,OAAO,aAAa,GAAG,GAAG,GAAG;AAC/C,YAAM,YAAY,OAAO,QAAQ,OAAO,EAAE;AAC1C,YAAM,cAAc,UAAU,QAAQ,GAAG;AACzC,YAAM,eAAe,eAAe,IAAI,UAAU,MAAM,WAAW,IAAI;AACvE,YAAM,cACJ,eAAe,IAAI,UAAU,MAAM,GAAG,WAAW,IAAI;AACvD,uBAAiB,cAAc,YAAY;AAAA,IAC7C;AAAA,EACF;AACA,YAAU,MAAM;AACd,QAAI,SAAS,UAAU,IAAI;AACzB,UAAI,OAAO,SAAS,YAAY,SAAS,MAAM,SAAS,GAAG,GAAG;AAC5D,yBAAiB,MAAM,UAAU;AAAA,MACnC,OAAO;AACL,yBAAiB,gBAAgB,MAAM,SAAA,CAAU,CAAC;AAAA,MACpD;AAAA,IACF,OAAO;AACL,uBAAiB,EAAE;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGd;"}
+{"version":3,"file":"CustomInputCurrency.js","sources":["../../src/custom-input/CustomInputCurrency.jsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Input } from 'siam-ui';\r\nimport { fieldToCurrency } from 'siam-utils';\r\n/**\r\n * value, //admite formato como devuelve la BD (varchar), flotante o currency\r\n * al setear un valor en el componente se visualiza como Currency:\r\n *    Formato $ 3.000,60\r\n * Al intentar editar el VALOR automaticamente se conviertea un numero cuyo formato es:\r\n *    sin separador de miles, sin simbolo pesos ($), y la coma como separador de decimales\r\n *    Formato: 3000,60\r\n * Al perder el foco el VALOR cambia a formato currency\r\n * Para el componente PADRE que lo esta usando, va a recibir desde el evento onblur un valor cuyo formato es el PERSISTENCE:\r\n *    Formato: 3000.60\r\n */\r\nexport const CustomInputCurrency = (props) => {\r\n  const {\r\n    onChange = () => {\r\n      undefined;\r\n    },\r\n    onFocus = () => {\r\n      undefined;\r\n    },\r\n    value = {},\r\n    maxLength = '20',\r\n    style = {},\r\n  } = props;\r\n  const styleCurrency = { ...style, textAlign: 'right' };\r\n  const [valueInputCur, setValueInputCur] = useState('');\r\n  const escapeRegExp = (string) =>\r\n    string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\r\n\r\n  const handleInputOnBlur = (event) => {\r\n    const { target } = event;\r\n    if (valueInputCur !== '') {\r\n      const valor = valueInputCur.replace('.', '');\r\n      const valorPersistence = valor.replace(',', '.');\r\n      setValueInputCur(fieldToCurrency(valorPersistence));\r\n      onChange({\r\n        ...event,\r\n        target: {\r\n          ...target,\r\n          value: valorPersistence,\r\n          valueCurrency: fieldToCurrency(valorPersistence),\r\n          valueFloat: parseFloat(valorPersistence),\r\n        },\r\n      });\r\n    }\r\n  };\r\n\r\n  const handleInputOnFocus = (e) => {\r\n    if (valueInputCur !== '') {\r\n      const valor = valueInputCur.replace('$ ', '');\r\n      const valor2 = valor.replace(/\\./g, '');\r\n      setValueInputCur(valor2);\r\n    }\r\n    onFocus(e);\r\n  };\r\n\r\n  const handleInputChange = (event) => {\r\n    const { target } = event;\r\n    const valor = target.value.replace('$ ', '');\r\n    const valid = /^-?[0-9.]*(?:[,]\\d?\\d?)?$/;\r\n    if (valid.test(valor)) {\r\n      const sepDec = valor.slice(-1) === '.' ? `${valor.slice(0, -1)},` : valor;\r\n      const punto = new RegExp(escapeRegExp('.'), 'g');\r\n      const sinSepMil = sepDec.replace(punto, '');\r\n      const posPuntoDec = sinSepMil.indexOf(',');\r\n      const parteDecimal = posPuntoDec >= 0 ? sinSepMil.slice(posPuntoDec) : '';\r\n      const parteEntera =\r\n        posPuntoDec >= 0 ? sinSepMil.slice(0, posPuntoDec) : sinSepMil;\r\n      setValueInputCur(parteEntera + parteDecimal);\r\n    }\r\n  };\r\n  useEffect(() => {\r\n    if (value && value !== '') {\r\n      if (typeof value != 'number' && value && value.includes('$')) {\r\n        setValueInputCur(value.toString());\r\n      } else {\r\n        setValueInputCur(fieldToCurrency(value.toString()));\r\n      }\r\n    } else {\r\n      setValueInputCur('');\r\n    }\r\n  }, [value]);\r\n\r\n  return (\r\n    <Input\r\n      {...props}\r\n      style={styleCurrency}\r\n      maxLength={maxLength}\r\n      value={valueInputCur}\r\n      onFocus={handleInputOnFocus}\r\n      onChange={handleInputChange}\r\n      onBlur={handleInputOnBlur}\r\n    />\r\n  );\r\n};\r\n\r\nexport default CustomInputCurrency;\r\n"],"names":[],"mappings":";;;;AAcO,MAAM,sBAAsB,CAAC,UAAU;AAC5C,QAAM;AAAA,IACJ,WAAW,MAAM;AAAA,IAEjB;AAAA,IACA,UAAU,MAAM;AAAA,IAEhB;AAAA,IACA,QAAQ,CAAA;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ,CAAA;AAAA,EAAC,IACP;AACJ,QAAM,gBAAgB,EAAE,GAAG,OAAO,WAAW,QAAA;AAC7C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AACrD,QAAM,eAAe,CAAC,WACpB,OAAO,QAAQ,uBAAuB,MAAM;AAE9C,QAAM,oBAAoB,CAAC,UAAU;AACnC,UAAM,EAAE,WAAW;AACnB,QAAI,kBAAkB,IAAI;AACxB,YAAM,QAAQ,cAAc,QAAQ,KAAK,EAAE;AAC3C,YAAM,mBAAmB,MAAM,QAAQ,KAAK,GAAG;AAC/C,uBAAiB,gBAAgB,gBAAgB,CAAC;AAClD,eAAS;AAAA,QACP,GAAG;AAAA,QACH,QAAQ;AAAA,UACN,GAAG;AAAA,UACH,OAAO;AAAA,UACP,eAAe,gBAAgB,gBAAgB;AAAA,UAC/C,YAAY,WAAW,gBAAgB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF;AAEA,QAAM,qBAAqB,CAAC,MAAM;AAChC,QAAI,kBAAkB,IAAI;AACxB,YAAM,QAAQ,cAAc,QAAQ,MAAM,EAAE;AAC5C,YAAM,SAAS,MAAM,QAAQ,OAAO,EAAE;AACtC,uBAAiB,MAAM;AAAA,IACzB;AACA,YAAQ,CAAC;AAAA,EACX;AAEA,QAAM,oBAAoB,CAAC,UAAU;AACnC,UAAM,EAAE,WAAW;AACnB,UAAM,QAAQ,OAAO,MAAM,QAAQ,MAAM,EAAE;AAC3C,UAAM,QAAQ;AACd,QAAI,MAAM,KAAK,KAAK,GAAG;AACrB,YAAM,SAAS,MAAM,MAAM,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM;AACpE,YAAM,QAAQ,IAAI,OAAO,aAAa,GAAG,GAAG,GAAG;AAC/C,YAAM,YAAY,OAAO,QAAQ,OAAO,EAAE;AAC1C,YAAM,cAAc,UAAU,QAAQ,GAAG;AACzC,YAAM,eAAe,eAAe,IAAI,UAAU,MAAM,WAAW,IAAI;AACvE,YAAM,cACJ,eAAe,IAAI,UAAU,MAAM,GAAG,WAAW,IAAI;AACvD,uBAAiB,cAAc,YAAY;AAAA,IAC7C;AAAA,EACF;AACA,YAAU,MAAM;AACd,QAAI,SAAS,UAAU,IAAI;AACzB,UAAI,OAAO,SAAS,YAAY,SAAS,MAAM,SAAS,GAAG,GAAG;AAC5D,yBAAiB,MAAM,UAAU;AAAA,MACnC,OAAO;AACL,yBAAiB,gBAAgB,MAAM,SAAA,CAAU,CAAC;AAAA,MACpD;AAAA,IACF,OAAO;AACL,uBAAiB,EAAE;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGd;"}

package/dist/custom-input/CustomInputFile.js

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import FormGroup from "../node_modules/@neolution-ch/reactstrap/esm/FormGroup.js";
-import Input from "../node_modules/@neolution-ch/reactstrap/esm/Input.js";
-import Label from "../node_modules/@neolution-ch/reactstrap/esm/Label.js";
+import { useState, useRef } from "react";
+import { useTheme } from "styled-components";
+import { Label, Input } from "siam-ui";
 import { MENSAJE } from "./constant.js";
-import "./index.css";
+const ClipIcon = ({ color }) => /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
 const CustomInputFile = ({
   accept,
   className = "",
@@ -13,30 +12,40 @@ const CustomInputFile = ({
   name,
   onChange
 }) => {
-  const [fileName, setFileName] = useState(label || LABEL_FILE);
+  const theme = useTheme();
+  const iconColor = theme?.colors?.primary?.base ?? "#016E6C";
   const { LABEL_FILE } = MENSAJE;
+  const [fileName, setFileName] = useState("");
+  const inputRef = useRef(null);
+  const openPicker = () => inputRef.current?.click();
   const handleFileChange = (event) => {
     const files = event.target.files;
-    if (files.length > 0) {
-      setFileName(files[0].name);
-    } else {
-      setFileName(label || LABEL_FILE);
-    }
-    if (onChange) {
-      onChange(event);
-    }
+    setFileName(files.length > 0 ? files[0].name : "");
+    if (onChange) onChange(event);
   };
-  return /* @__PURE__ */ jsxs(FormGroup, { className: `custom-file ${className}`, children: [
-    /* @__PURE__ */ jsx(Label, { for: id, className: "custom-file-label", children: fileName }),
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    label && /* @__PURE__ */ jsx(Label, { htmlFor: id, style: { display: "block", marginBottom: 4 }, children: label }),
     /* @__PURE__ */ jsx(
       Input,
       {
+        readOnly: true,
+        value: fileName,
+        placeholder: LABEL_FILE,
+        onClick: openPicker,
+        style: { cursor: "pointer" },
+        iconRight: /* @__PURE__ */ jsx("span", { onClick: openPicker, style: { display: "flex", alignItems: "center", cursor: "pointer" }, children: /* @__PURE__ */ jsx(ClipIcon, { color: iconColor }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
         id,
         name,
         accept,
-        type: "file",
-        onChange: handleFileChange,
-        className: "custom-file-input"
+        style: { display: "none" },
+        onChange: handleFileChange
       }
     )
   ] });

package/dist/custom-input/CustomInputFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomInputFile.js","sources":["../../src/custom-input/CustomInputFile.jsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { FormGroup, Input, Label } from '@neolution-ch/reactstrap';\r\nimport { MENSAJE } from './constant';\r\nimport './index.css';\r\n\r\nexport const CustomInputFile = ({\r\n  accept,\r\n  className = '',\r\n  id,\r\n  label,\r\n  name,\r\n  onChange,\r\n}) => {\r\n  const [fileName, setFileName] = useState(label || LABEL_FILE);\r\n  const { LABEL_FILE } = MENSAJE;\r\n  const handleFileChange = (event) => {\r\n    const files = event.target.files;\r\n    if (files.length > 0) {\r\n      setFileName(files[0].name);\r\n    } else {\r\n      setFileName(label || LABEL_FILE);\r\n    }\r\n\r\n    if (onChange) {\r\n      onChange(event);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <FormGroup className={`custom-file ${className}`}>\r\n      <Label for={id} className=\"custom-file-label\">\r\n        {fileName}\r\n      </Label>\r\n      <Input\r\n        id={id}\r\n        name={name}\r\n        accept={accept}\r\n        type=\"file\"\r\n        onChange={handleFileChange}\r\n        className=\"custom-file-input\"\r\n      />\r\n    </FormGroup>\r\n  );\r\n};\r\n\r\nexport default CustomInputFile;\r\n"],"names":[],"mappings":";;;;;;;AAKO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,SAAS,UAAU;AAC5D,QAAM,EAAE,eAAe;AACvB,QAAM,mBAAmB,CAAC,UAAU;AAClC,UAAM,QAAQ,MAAM,OAAO;AAC3B,QAAI,MAAM,SAAS,GAAG;AACpB,kBAAY,MAAM,CAAC,EAAE,IAAI;AAAA,IAC3B,OAAO;AACL,kBAAY,SAAS,UAAU;AAAA,IACjC;AAEA,QAAI,UAAU;AACZ,eAAS,KAAK;AAAA,IAChB;AAAA,EACF;AAEA,SACE,qBAAC,WAAA,EAAU,WAAW,eAAe,SAAS,IAC5C,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAM,KAAK,IAAI,WAAU,qBACvB,UAAA,UACH;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,UAAU;AAAA,QACV,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}
+{"version":3,"file":"CustomInputFile.js","sources":["../../src/custom-input/CustomInputFile.jsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { Input, Label } from 'siam-ui';\nimport { MENSAJE } from './constant';\n\nconst ClipIcon = ({ color }) => (\n  <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <path d=\"m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48\"/>\n  </svg>\n);\n\nexport const CustomInputFile = ({\n  accept,\n  className = '',\n  id,\n  label,\n  name,\n  onChange,\n}) => {\n  const theme = useTheme();\n  const iconColor = theme?.colors?.primary?.base ?? '#016E6C';\n  const { LABEL_FILE } = MENSAJE;\n  const [fileName, setFileName] = useState('');\n  const inputRef = useRef(null);\n\n  const openPicker = () => inputRef.current?.click();\n\n  const handleFileChange = (event) => {\n    const files = event.target.files;\n    setFileName(files.length > 0 ? files[0].name : '');\n    if (onChange) onChange(event);\n  };\n\n  return (\n    <div className={className}>\n      {label && <Label htmlFor={id} style={{ display: 'block', marginBottom: 4 }}>{label}</Label>}\n      <Input\n        readOnly\n        value={fileName}\n        placeholder={LABEL_FILE}\n        onClick={openPicker}\n        style={{ cursor: 'pointer' }}\n        iconRight={\n          <span onClick={openPicker} style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>\n            <ClipIcon color={iconColor} />\n          </span>\n        }\n      />\n      <input\n        ref={inputRef}\n        type=\"file\"\n        id={id}\n        name={name}\n        accept={accept}\n        style={{ display: 'none' }}\n        onChange={handleFileChange}\n      />\n    </div>\n  );\n};\n\nexport default CustomInputFile;\n"],"names":[],"mappings":";;;;;AAKA,MAAM,WAAW,CAAC,EAAE,MAAA,MAClB,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAQ,OAAO,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAC9H,UAAA,oBAAC,QAAA,EAAK,GAAE,kHAAA,CAAiH,EAAA,CAC3H;AAGK,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAA;AACd,QAAM,YAAY,OAAO,QAAQ,SAAS,QAAQ;AAClD,QAAM,EAAE,eAAe;AACvB,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,WAAW,OAAO,IAAI;AAE5B,QAAM,aAAa,MAAM,SAAS,SAAS,MAAA;AAE3C,QAAM,mBAAmB,CAAC,UAAU;AAClC,UAAM,QAAQ,MAAM,OAAO;AAC3B,gBAAY,MAAM,SAAS,IAAI,MAAM,CAAC,EAAE,OAAO,EAAE;AACjD,QAAI,mBAAmB,KAAK;AAAA,EAC9B;AAEA,SACE,qBAAC,SAAI,WACF,UAAA;AAAA,IAAA,SAAS,oBAAC,OAAA,EAAM,SAAS,IAAI,OAAO,EAAE,SAAS,SAAS,cAAc,EAAA,GAAM,UAAA,MAAA,CAAM;AAAA,IACnF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAQ;AAAA,QACR,OAAO;AAAA,QACP,aAAa;AAAA,QACb,SAAS;AAAA,QACT,OAAO,EAAE,QAAQ,UAAA;AAAA,QACjB,WACE,oBAAC,QAAA,EAAK,SAAS,YAAY,OAAO,EAAE,SAAS,QAAQ,YAAY,UAAU,QAAQ,UAAA,GACjF,8BAAC,UAAA,EAAS,OAAO,WAAW,EAAA,CAC9B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,EAAE,SAAS,OAAA;AAAA,QAClB,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF;AAEJ;"}

package/dist/custom-input/CustomInputRadio.js

@@ -1,64 +1,48 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import FormGroup from "../node_modules/@neolution-ch/reactstrap/esm/FormGroup.js";
-import Input from "../node_modules/@neolution-ch/reactstrap/esm/Input.js";
-import Label from "../node_modules/@neolution-ch/reactstrap/esm/Label.js";
-import "./index.css";
+import { jsx } from "react/jsx-runtime";
+import { Radio } from "siam-ui";
 const CustomInputRadio = ({
   className,
   customClassName,
   checked,
   disabled,
   id,
-  inline,
   label,
   name,
   onChange,
-  direction = "row"
+  direction = "row",
+  style,
+  slotProps
 }) => {
   return /* @__PURE__ */ jsx(
-    FormGroup,
+    Radio,
     {
-      inline,
-      className: `custom-radio ${customClassName || ""}`,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
+      id,
+      name,
+      checked: checked ?? false,
+      onChange,
+      disabled,
+      className: className ?? customClassName,
+      label,
+      direction: direction === "column" ? "col" : "row",
+      style: {
+        "--siam-radio-size": "19px",
+        "--siam-radio-inner-size": "11px",
+        ...style
+      },
+      slotProps: {
+        ...slotProps,
+        root: {
+          ...slotProps?.root,
           style: {
-            display: "flex",
-            flexDirection: direction,
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id,
-                type: "radio",
-                name,
-                checked,
-                onChange,
-                disabled,
-                className
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Label,
-              {
-                check: true,
-                htmlFor: id,
-                style: {
-                  alignItems: "center",
-                  justifyContent: "center",
-                  height: "25px",
-                  width: "25px"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { children: label })
-          ]
+            flexDirection: direction === "column" ? "column" : "row",
+            ...slotProps?.root?.style
+          }
+        },
+        label: {
+          ...slotProps?.label,
+          style: { fontSize: "12px", ...slotProps?.label?.style }
         }
-      )
+      }
     }
   );
 };

package/dist/custom-input/CustomInputRadio.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomInputRadio.js","sources":["../../src/custom-input/CustomInputRadio.jsx"],"sourcesContent":["import { FormGroup, Label, Input } from '@neolution-ch/reactstrap';\r\nimport './index.css';\r\n\r\nexport const CustomInputRadio = ({\r\n  className,\r\n  customClassName,\r\n  checked,\r\n  disabled,\r\n  id,\r\n  inline,\r\n  label,\r\n  name,\r\n  onChange,\r\n  direction = 'row',\r\n}) => {\r\n  return (\r\n    <FormGroup\r\n      inline={inline}\r\n      className={`custom-radio ${customClassName || ''}`}\r\n    >\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          flexDirection: direction,\r\n          alignItems: 'center',\r\n          justifyContent: 'center',\r\n        }}\r\n      >\r\n        <Input\r\n          id={id}\r\n          type=\"radio\"\r\n          name={name}\r\n          checked={checked}\r\n          onChange={onChange}\r\n          disabled={disabled}\r\n          className={className}\r\n        />\r\n\r\n        <Label\r\n          check\r\n          htmlFor={id}\r\n          style={{\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            height: '25px',\r\n            width: '25px',\r\n          }}\r\n        ></Label>\r\n        <div>{label}</div>\r\n      </div>\r\n    </FormGroup>\r\n  );\r\n};\r\n\r\nexport default CustomInputRadio;\r\n"],"names":[],"mappings":";;;;;AAGO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,gBAAgB,mBAAmB,EAAE;AAAA,MAEhD,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,gBAAgB;AAAA,UAAA;AAAA,UAGlB,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA,MAAK;AAAA,gBACL;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAK;AAAA,gBACL,SAAS;AAAA,gBACT,OAAO;AAAA,kBACL,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,QAAQ;AAAA,kBACR,OAAO;AAAA,gBAAA;AAAA,cACT;AAAA,YAAA;AAAA,YAEF,oBAAC,SAAK,UAAA,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACd;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"CustomInputRadio.js","sources":["../../src/custom-input/CustomInputRadio.jsx"],"sourcesContent":["import { Radio } from 'siam-ui';\n\nexport const CustomInputRadio = ({\n  className,\n  customClassName,\n  checked,\n  disabled,\n  id,\n  label,\n  name,\n  onChange,\n  direction = 'row',\n  style,\n  slotProps,\n}) => {\n  return (\n    <Radio\n      id={id}\n      name={name}\n      checked={checked ?? false}\n      onChange={onChange}\n      disabled={disabled}\n      className={className ?? customClassName}\n      label={label}\n      direction={direction === 'column' ? 'col' : 'row'}\n      style={{\n        '--siam-radio-size': '19px',\n        '--siam-radio-inner-size': '11px',\n        ...style,\n      }}\n      slotProps={{\n        ...slotProps,\n        root: {\n          ...slotProps?.root,\n          style: {\n            flexDirection: direction === 'column' ? 'column' : 'row',\n            ...slotProps?.root?.style,\n          },\n        },\n        label: {\n          ...slotProps?.label,\n          style: { fontSize: '12px', ...slotProps?.label?.style },\n        },\n      }}\n    />\n  );\n};\n\nexport default CustomInputRadio;\n"],"names":[],"mappings":";;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAS,WAAW;AAAA,MACpB;AAAA,MACA;AAAA,MACA,WAAW,aAAa;AAAA,MACxB;AAAA,MACA,WAAW,cAAc,WAAW,QAAQ;AAAA,MAC5C,OAAO;AAAA,QACL,qBAAqB;AAAA,QACrB,2BAA2B;AAAA,QAC3B,GAAG;AAAA,MAAA;AAAA,MAEL,WAAW;AAAA,QACT,GAAG;AAAA,QACH,MAAM;AAAA,UACJ,GAAG,WAAW;AAAA,UACd,OAAO;AAAA,YACL,eAAe,cAAc,WAAW,WAAW;AAAA,YACnD,GAAG,WAAW,MAAM;AAAA,UAAA;AAAA,QACtB;AAAA,QAEF,OAAO;AAAA,UACL,GAAG,WAAW;AAAA,UACd,OAAO,EAAE,UAAU,QAAQ,GAAG,WAAW,OAAO,MAAA;AAAA,QAAM;AAAA,MACxD;AAAA,IACF;AAAA,EAAA;AAGN;"}

package/dist/custom-input/index.css

@@ -1,167 +1,25 @@
-/* Estilos para los checkbox personalizados */
-.custom-checkbox input[type='checkbox'] {
-  position: absolute;
-  opacity: 0;
-  z-index: -1;
-}
-
-.custom-checkbox input[type='checkbox'] + label {
-  position: relative;
-  padding-left: 2rem;
-  cursor: pointer;
-  line-height: 0px !important;
-}
-
-.custom-checkbox input[type='checkbox'] + label::before {
-  content: '';
-  display: inline-block;
-  width: 1rem;
-  height: 1rem;
-  border: 1px solid #ccc;
-  border-radius: 0.25rem;
-  background-color: white;
-  position: absolute;
-  left: 0;
-  top: -11px;
-  transition: background-color 0.2s, border-color 0.2s;
-}
-
-.custom-checkbox input[type='checkbox']:checked + label::before {
-  background-color: #900604;
-  border-color: #900604;
-}
-
-.custom-checkbox input[type='checkbox']:checked + label::after {
-  content: '';
-  position: absolute;
-  top: -10px;
-  left: 0.3rem;
-  width: 0.5rem;
-  height: 0.6rem;
-  border: solid white;
-  border-width: 0 0.2rem 0.2rem 0;
-  transform: rotate(45deg);
-}
-
-/* Estilos específicos para CheckMultiSelect */
-.check-multi-select
-  .custom-checkbox
-  input[type='checkbox']:not(:checked)
-  + label::before {
-  background-color: #900604; /* Fondo rojo en CheckMultiSelect para desmarcados */
-  border-color: #900604;
-}
-
-.check-multi-select
-  .custom-checkbox
-  input[type='checkbox']:not(:checked)
-  + label::after {
-  content: '';
-  position: absolute;
-  top: -0.29rem; /* Ajusta la posición del tilde */
-  left: 0.25rem;
-  width: 0.5rem;
-  height: 0.1rem;
-  background-color: white;
-}
-
-/* Estilos para checkboxes deshabilitados */
-.custom-checkbox input[type='checkbox']:disabled + label {
-  cursor: not-allowed; /* Cambia el cursor */
-  color: #6c757d;
-  line-height: 0px !important;
-}
-
-.custom-checkbox input[type='checkbox']:disabled + label::before {
-  background-color: #e9ecef;
-  border-color: #ced4da;
-}
-
-.custom-checkbox input[type='checkbox']:disabled:checked + label::before {
-  background-color: #adb5bd;
-  border-color: #adb5bd;
-}
-
-/* Estilos para los radio buttons personalizados */
-.custom-radio input[type='radio'] {
-  position: absolute;
-  opacity: 0;
-}
-
-.custom-radio label {
-  display: inline-flex;
-  align-items: center;
-  justify-items: center;
-  cursor: pointer;
-}
-
-.custom-radio label::before {
-  position: absolute;
-  content: '';
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 2px solid #ced4da;
-  background-color: white;
-  transition: background-color 0.2s, border-color 0.2s;
-}
-
-.custom-radio input[type='radio']:checked + label::before {
-  position: absolute;
-  background-color: #900604;
-  border-color: #900604;
-}
-
-.custom-radio input[type='radio']:checked + label::after {
-  content: '';
-  position: absolute;
-  width: 0.5rem;
-  height: 0.45rem;
-  background-color: white !important;
-  transition: translateY(-50%);
-  border-radius: 50%;
-  display: inline-block;
-}
-
-/* Estilos específicos para radio buttons deshabilitados */
-.custom-radio input[type='radio']:disabled + label {
-  cursor: not-allowed; /* Cambia el cursor */
-  color: #6c757d; /* Color gris */
-}
-
-.custom-radio input[type='radio']:disabled + label::before {
-  background-color: #e9ecef; /* Fondo gris claro */
-  border-color: #ced4da; /* Borde gris claro */
-}
-
-.custom-radio input[type='radio']:disabled:checked + label::before {
-  background-color: #adb5bd; /* Fondo gris más oscuro para el estado checked */
-  border-color: #adb5bd; /* Borde gris más oscuro */
-}
-
-/* Estilos para el custom file */
-.custom-file {
-  height: calc(2.5rem + 2px);
-}
-
-.custom-file-label:focus,
-.custom-file-input:focus {
-  border-color: #900604;
-}
-
-.custom-file-label::after {
-  height: calc(2.5rem + 2px - 2px);
-  padding: 0.75rem 0.75rem 0.5rem 0.75rem;
-  background: #900604;
-  color: white; /* Ajustado para contraste */
-  border-color: #900604;
-}
-
-.custom-file-input:focus ~ .custom-file-label {
-  border-color: rgba(144, 6, 4, 0.6);
-}
-
-.custom-file-input {
-  box-shadow: initial !important;
-}
+/* Estilos para el custom file */
+.custom-file {
+  height: calc(2.5rem + 2px);
+}
+
+.custom-file-label:focus,
+.custom-file-input:focus {
+  border-color: #900604;
+}
+
+.custom-file-label::after {
+  height: calc(2.5rem + 2px - 2px);
+  padding: 0.75rem 0.75rem 0.5rem 0.75rem;
+  background: #900604;
+  color: white;
+  border-color: #900604;
+}
+
+.custom-file-input:focus ~ .custom-file-label {
+  border-color: rgba(144, 6, 4, 0.6);
+}
+
+.custom-file-input {
+  box-shadow: initial !important;
+}