@digigov/react-core 1.2.0-mobile → 1.2.0-mobile-1

package/Base/compat/Input/CheckboxInput/index.js

@@ -1,22 +1,7 @@
 import React from "react";
-import { TouchableOpacity, View, StyleSheet } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 const CheckboxInput = React.forwardRef(function CheckboxInput2({ checked, onChange, ...props }, ref) {
-  return /* @__PURE__ */ React.createElement(TouchableOpacity, { ref, onPress: () => onChange({ currentTarget: { checked: !checked } }), ...props }, /* @__PURE__ */ React.createElement(View, { style: styles.checkbox }, checked && /* @__PURE__ */ React.createElement(View, { style: styles.checkmark })));
-});
-const styles = StyleSheet.create({
-  checkbox: {
-    width: 20,
-    height: 20,
-    borderWidth: 2,
-    borderColor: "#000",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  checkmark: {
-    width: 12,
-    height: 12,
-    backgroundColor: "#000"
-  }
+  return /* @__PURE__ */ React.createElement(TouchableOpacity, { ref, onPress: () => onChange({ currentTarget: { checked: !checked, value: props.value } }), ...props }, checked && /* @__PURE__ */ React.createElement(View, { className: "ds-checkboxes__input--checked" }));
 });
 var CheckboxInput_default = CheckboxInput;
 export {

package/Base/compat/Input/CheckboxInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/Base/compat/Input/CheckboxInput.tsx"],
-  "sourcesContent": ["import React, { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport { TouchableOpacity, View, StyleSheet } from \"react-native\";\n\ntype HTMLElementProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  \"ref\"\n>;\nexport const CheckboxInput = React.forwardRef(function CheckboxInput({ checked, onChange, ...props }, ref){\n  return (\n    <TouchableOpacity ref={ref} onPress={()=>onChange({currentTarget:{checked:!checked}})} {...props}>\n      <View style={styles.checkbox}>\n        {checked && <View style={styles.checkmark} />}\n      </View>\n    </TouchableOpacity>\n  );\n});\n\nconst styles = StyleSheet.create({\n  checkbox: {\n    width: 20,\n    height: 20,\n    borderWidth: 2,\n    borderColor: '#000',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  checkmark: {\n    width: 12,\n    height: 12,\n    backgroundColor: '#000',\n  },\n});\n\nexport default CheckboxInput;\n"],
-  "mappings": "AAAA,OAAO,WAAuD;AAC9D,SAAS,kBAAkB,MAAM,kBAAkB;AAM5C,MAAM,gBAAgB,MAAM,WAAW,SAASA,eAAc,EAAE,SAAS,UAAU,GAAG,MAAM,GAAG,KAAI;AACxG,SACE,oCAAC,oBAAiB,KAAU,SAAS,MAAI,SAAS,EAAC,eAAc,EAAC,SAAQ,CAAC,QAAO,EAAC,CAAC,GAAI,GAAG,SACzF,oCAAC,QAAK,OAAO,OAAO,YACjB,WAAW,oCAAC,QAAK,OAAO,OAAO,WAAW,CAC7C,CACF;AAEJ,CAAC;AAED,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,UAAU;AAAA,IACR,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,EACnB;AACF,CAAC;AAED,IAAO,wBAAQ;",
+  "sourcesContent": ["import React, { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport { TouchableOpacity, View } from \"react-native\";\n\ntype HTMLElementProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  \"ref\"\n>;\n\nexport const CheckboxInput = React.forwardRef(function CheckboxInput({ checked, onChange, ...props }, ref) {\n\n  return (\n    <TouchableOpacity ref={ref} onPress={() => onChange({ currentTarget: { checked: !checked, value: props.value } })} {...props}>\n      {checked && <View className=\"ds-checkboxes__input--checked\" />}\n    </TouchableOpacity>\n  );\n});\n\nexport default CheckboxInput;\n"],
+  "mappings": "AAAA,OAAO,WAAuD;AAC9D,SAAS,kBAAkB,YAAY;AAOhC,MAAM,gBAAgB,MAAM,WAAW,SAASA,eAAc,EAAE,SAAS,UAAU,GAAG,MAAM,GAAG,KAAK;AAEzG,SACE,oCAAC,oBAAiB,KAAU,SAAS,MAAM,SAAS,EAAE,eAAe,EAAE,SAAS,CAAC,SAAS,OAAO,MAAM,MAAM,EAAE,CAAC,GAAI,GAAG,SACpH,WAAW,oCAAC,QAAK,WAAU,iCAAgC,CAC9D;AAEJ,CAAC;AAED,IAAO,wBAAQ;",
   "names": ["CheckboxInput"]
 }

package/Base/compat/Input/RadioInput/index.js

@@ -1,9 +1,10 @@
 import React from "react";
-import { TouchableOpacity, View, StyleSheet } from "react-native";
+import { TouchableOpacity, View } from "react-native";
 const RadioInput = React.forwardRef(function RadioInput2({
   value,
-  checked = false,
-  onChange
+  checked,
+  onChange,
+  ...props
 }, ref) {
   const handlePress = () => {
     if (onChange) {
@@ -16,26 +17,9 @@ const RadioInput = React.forwardRef(function RadioInput2({
       onChange(syntheticEvent);
     }
   };
-  return /* @__PURE__ */ React.createElement(TouchableOpacity, { ref, onPress: handlePress }, /* @__PURE__ */ React.createElement(View, { style: styles.outerCircle }, checked && /* @__PURE__ */ React.createElement(View, { style: styles.innerCircle })));
+  return /* @__PURE__ */ React.createElement(TouchableOpacity, { ref, onPress: handlePress, ...props }, checked && /* @__PURE__ */ React.createElement(View, { className: "ds-radios__input--checked" }));
 });
 var RadioInput_default = RadioInput;
-const styles = StyleSheet.create({
-  outerCircle: {
-    height: 24,
-    width: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    borderColor: "#000",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  innerCircle: {
-    height: 12,
-    width: 12,
-    borderRadius: 6,
-    backgroundColor: "#000"
-  }
-});
 export {
   RadioInput,
   RadioInput_default as default

package/Base/compat/Input/RadioInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/Base/compat/Input/RadioInput.tsx"],
-  "sourcesContent": ["import React, { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport { TouchableOpacity, View, Text, StyleSheet } from \"react-native\";\n\ntype HTMLElementProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  \"ref\"\n>;\n\nexport const RadioInput = React.forwardRef(function RadioInput({\n  value,\n  checked = false,\n  onChange,\n}: HTMLElementProps, ref) {\n  const handlePress = () => {\n    if (onChange) {\n      const syntheticEvent = {\n        target: {\n          value,\n          checked: true,\n        },\n      } as React.ChangeEvent<HTMLInputElement>;\n      onChange(syntheticEvent);\n    }\n  };\n  return (\n    <TouchableOpacity ref={ref} onPress={handlePress}>\n      <View style={styles.outerCircle}>\n        {checked && <View style={styles.innerCircle} />}\n      </View>\n    </TouchableOpacity>\n  );\n});\n\nexport default RadioInput;\n\nconst styles = StyleSheet.create({\n  outerCircle: {\n    height: 24,\n    width: 24,\n    borderRadius: 12,\n    borderWidth: 2,\n    borderColor: '#000',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  innerCircle: {\n    height: 12,\n    width: 12,\n    borderRadius: 6,\n    backgroundColor: '#000',\n  },\n});\n"],
-  "mappings": "AAAA,OAAO,WAAuD;AAC9D,SAAS,kBAAkB,MAAY,kBAAkB;AAOlD,MAAM,aAAa,MAAM,WAAW,SAASA,YAAW;AAAA,EAC7D;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAAqB,KAAK;AACxB,QAAM,cAAc,MAAM;AACxB,QAAI,UAAU;AACZ,YAAM,iBAAiB;AAAA,QACrB,QAAQ;AAAA,UACN;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MACF;AACA,eAAS,cAAc;AAAA,IACzB;AAAA,EACF;AACA,SACE,oCAAC,oBAAiB,KAAU,SAAS,eACnC,oCAAC,QAAK,OAAO,OAAO,eACjB,WAAW,oCAAC,QAAK,OAAO,OAAO,aAAa,CAC/C,CACF;AAEJ,CAAC;AAED,IAAO,qBAAQ;AAEf,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AAAA,EACA,aAAa;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;",
+  "sourcesContent": ["import React, { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport { TouchableOpacity, View } from \"react-native\";\n\ntype HTMLElementProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  \"ref\"\n>;\n\nexport const RadioInput = React.forwardRef(function RadioInput({\n  value,\n  checked,\n  onChange,\n  ...props\n}, ref) {\n  const handlePress = () => {\n    if (onChange) {\n      const syntheticEvent = {\n        target: {\n          value,\n          checked: true,\n        },\n      } as React.ChangeEvent<HTMLInputElement>;\n      onChange(syntheticEvent);\n    }\n  };\n  return (\n    <TouchableOpacity ref={ref} onPress={handlePress} {...props}>\n      {checked && <View className=\"ds-radios__input--checked\" />}\n    </TouchableOpacity>\n  );\n});\n\nexport default RadioInput;\n"],
+  "mappings": "AAAA,OAAO,WAAuD;AAC9D,SAAS,kBAAkB,YAAY;AAOhC,MAAM,aAAa,MAAM,WAAW,SAASA,YAAW;AAAA,EAC7D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAG,KAAK;AACN,QAAM,cAAc,MAAM;AACxB,QAAI,UAAU;AACZ,YAAM,iBAAiB;AAAA,QACrB,QAAQ;AAAA,UACN;AAAA,UACA,SAAS;AAAA,QACX;AAAA,MACF;AACA,eAAS,cAAc;AAAA,IACzB;AAAA,EACF;AACA,SACE,oCAAC,oBAAiB,KAAU,SAAS,aAAc,GAAG,SACnD,WAAW,oCAAC,QAAK,WAAU,6BAA4B,CAC1D;AAEJ,CAAC;AAED,IAAO,qBAAQ;",
   "names": ["RadioInput"]
 }

package/Base/compat/Input/StringInput/index.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { TextInput } from "react-native";
-const StringInput = React.forwardRef(function StringInput2({
+import { wrap } from "../../utils";
+const StringInput = wrap(React.forwardRef(function StringInput2({
   type,
   onChange,
   onBlur,
@@ -59,7 +60,7 @@ const StringInput = React.forwardRef(function StringInput2({
       ...props
     }
   );
-});
+}));
 export {
   StringInput
 };

package/Base/compat/Input/StringInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/Base/compat/Input/StringInput.tsx"],
-  "sourcesContent": ["import React, { DetailedHTMLProps, InputHTMLAttributes, useEffect } from \"react\";\nimport { TextInput } from \"react-native\";\n\ntype HTMLElementProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  \"ref\"\n>;\n\nexport const StringInput = React.forwardRef(function StringInput({type, onChange, onBlur, onFocus, value,maxLength,\n  \"aria-activedescendant\": ariaActivedescendant,\n  \"aria-owns\": ariaOwns,\n  \"aria-autocomplete\": ariaAutocomplete,\n  \"aria-expanded\": ariaExpanded,\n  \n  ...props}: HTMLElementProps, ref) {\n  switch (type) {\n    case \"email\":\n      props.keyboardType = \"email-address\";\n      break;\n    case \"password\":\n      props.secureTextEntry = true;\n      break;\n    case \"number\":\n      props.keyboardType = \"numeric\";\n      break;\n    case \"tel\":\n      props.keyboardType = \"phone-pad\";\n      break;\n    case \"url\":\n      props.keyboardType = \"url\";\n      break;\n    default:\n      props.keyboardType = \"default\";\n  }\n  const [currentValue, setValue] = React.useState(value);\n  useEffect(()=>{\n    if(currentValue !== value){\n      onChange?.({ target: { value: currentValue } })\n    }\n\n  },[currentValue])\n  useEffect(()=>{\n    if(currentValue !== value){\n      setValue(value)\n    }\n  },[value])\n  return <TextInput\n    ref={ref}\n    onChangeText={setValue}\n    onBlur={()=>{onBlur?.({ target: { value: currentValue } })}}\n    onFocus={()=>{onFocus?.({ target: { value: currentValue } })}}\n    value={currentValue}\n    maxLength={Number(maxLength) || undefined}\n  {...props} />;\n});\n\n"],
-  "mappings": "AAAA,OAAO,SAAiD,iBAAiB;AACzE,SAAS,iBAAiB;AAOnB,MAAM,cAAc,MAAM,WAAW,SAASA,aAAY;AAAA,EAAC;AAAA,EAAM;AAAA,EAAU;AAAA,EAAQ;AAAA,EAAS;AAAA,EAAM;AAAA,EACvG,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EAEjB,GAAG;AAAK,GAAqB,KAAK;AAClC,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,YAAM,eAAe;AACrB;AAAA,IACF,KAAK;AACH,YAAM,kBAAkB;AACxB;AAAA,IACF,KAAK;AACH,YAAM,eAAe;AACrB;AAAA,IACF,KAAK;AACH,YAAM,eAAe;AACrB;AAAA,IACF,KAAK;AACH,YAAM,eAAe;AACrB;AAAA,IACF;AACE,YAAM,eAAe;AAAA,EACzB;AACA,QAAM,CAAC,cAAc,QAAQ,IAAI,MAAM,SAAS,KAAK;AACrD,YAAU,MAAI;AACZ,QAAG,iBAAiB,OAAM;AACxB,iBAAW,EAAE,QAAQ,EAAE,OAAO,aAAa,EAAE,CAAC;AAAA,IAChD;AAAA,EAEF,GAAE,CAAC,YAAY,CAAC;AAChB,YAAU,MAAI;AACZ,QAAG,iBAAiB,OAAM;AACxB,eAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAE,CAAC,KAAK,CAAC;AACT,SAAO;AAAA,IAAC;AAAA;AAAA,MACN;AAAA,MACA,cAAc;AAAA,MACd,QAAQ,MAAI;AAAC,iBAAS,EAAE,QAAQ,EAAE,OAAO,aAAa,EAAE,CAAC;AAAA,MAAC;AAAA,MAC1D,SAAS,MAAI;AAAC,kBAAU,EAAE,QAAQ,EAAE,OAAO,aAAa,EAAE,CAAC;AAAA,MAAC;AAAA,MAC5D,OAAO;AAAA,MACP,WAAW,OAAO,SAAS,KAAK;AAAA,MACjC,GAAG;AAAA;AAAA,EAAO;AACb,CAAC;",
+  "sourcesContent": ["import React, { DetailedHTMLProps, InputHTMLAttributes, useEffect } from \"react\";\nimport { TextInput,  } from \"react-native\";\nimport { wrap } from \"../../utils\";\n\ntype HTMLElementProps = Omit<\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,\n  \"ref\"\n>;\n\nexport const StringInput = wrap(React.forwardRef(function StringInput({\n  type, \n  onChange, \n  onBlur, \n  onFocus, \n  value,\n  maxLength,\n  \"aria-activedescendant\": ariaActivedescendant,\n  \"aria-owns\": ariaOwns,\n  \"aria-autocomplete\": ariaAutocomplete,\n  \"aria-expanded\": ariaExpanded,\n  ...props\n}: HTMLElementProps, ref) {\n  switch (type) {\n    case \"email\":\n      props.keyboardType = \"email-address\";\n      break;\n    case \"password\":\n      props.secureTextEntry = true;\n      break;\n    case \"number\":\n      props.keyboardType = \"numeric\";\n      break;\n    case \"tel\":\n      props.keyboardType = \"phone-pad\";\n      break;\n    case \"url\":\n      props.keyboardType = \"url\";\n      break;\n    default:\n      props.keyboardType = \"default\";\n  }\n  const [currentValue, setValue] = React.useState(value);\n  useEffect(()=>{\n    if(currentValue !== value){\n      onChange?.({ target: { value: currentValue } })\n    }\n\n  },[currentValue])\n  useEffect(()=>{\n    if(currentValue !== value){\n      setValue(value)\n    }\n  },[value])\n  return <TextInput\n    ref={ref}\n    onChangeText={setValue}\n    onBlur={()=>{onBlur?.({ target: { value: currentValue } })}}\n    onFocus={()=>{onFocus?.({ target: { value: currentValue } })}}\n    value={currentValue}\n    maxLength={Number(maxLength) || undefined}\n  {...props} />;\n}));\n\n"],
+  "mappings": "AAAA,OAAO,SAAiD,iBAAiB;AACzE,SAAS,iBAAmB;AAC5B,SAAS,YAAY;AAOd,MAAM,cAAc,KAAK,MAAM,WAAW,SAASA,aAAY;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,iBAAiB;AAAA,EACjB,GAAG;AACL,GAAqB,KAAK;AACxB,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,YAAM,eAAe;AACrB;AAAA,IACF,KAAK;AACH,YAAM,kBAAkB;AACxB;AAAA,IACF,KAAK;AACH,YAAM,eAAe;AACrB;AAAA,IACF,KAAK;AACH,YAAM,eAAe;AACrB;AAAA,IACF,KAAK;AACH,YAAM,eAAe;AACrB;AAAA,IACF;AACE,YAAM,eAAe;AAAA,EACzB;AACA,QAAM,CAAC,cAAc,QAAQ,IAAI,MAAM,SAAS,KAAK;AACrD,YAAU,MAAI;AACZ,QAAG,iBAAiB,OAAM;AACxB,iBAAW,EAAE,QAAQ,EAAE,OAAO,aAAa,EAAE,CAAC;AAAA,IAChD;AAAA,EAEF,GAAE,CAAC,YAAY,CAAC;AAChB,YAAU,MAAI;AACZ,QAAG,iBAAiB,OAAM;AACxB,eAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAE,CAAC,KAAK,CAAC;AACT,SAAO;AAAA,IAAC;AAAA;AAAA,MACN;AAAA,MACA,cAAc;AAAA,MACd,QAAQ,MAAI;AAAC,iBAAS,EAAE,QAAQ,EAAE,OAAO,aAAa,EAAE,CAAC;AAAA,MAAC;AAAA,MAC1D,SAAS,MAAI;AAAC,kBAAU,EAAE,QAAQ,EAAE,OAAO,aAAa,EAAE,CAAC;AAAA,MAAC;AAAA,MAC5D,OAAO;AAAA,MACP,WAAW,OAAO,SAAS,KAAK;AAAA,MACjC,GAAG;AAAA;AAAA,EAAO;AACb,CAAC,CAAC;",
   "names": ["StringInput"]
 }

package/Base/compat/button/index.js

@@ -0,0 +1,25 @@
+import { FormContext } from "@digigov/form/FormContext";
+import { Pressable } from "react-native";
+import React, { useContext } from "react";
+const FormButton = React.forwardRef(function FormButton2({ onClick, ...props }, ref) {
+  const formContext = useContext(FormContext);
+  return /* @__PURE__ */ React.createElement(CompatButton, { ...props, onClick: () => {
+    onClick && onClick();
+    formContext?.[props.type]();
+  } });
+});
+const CompatButton = React.forwardRef(function CompatButton2({ onClick, ...props }, ref) {
+  return /* @__PURE__ */ React.createElement(Pressable, { onPress: onClick, ref, hitSlop: 10, ...props });
+});
+const Button = React.forwardRef(function Button2(props, ref) {
+  if (["submit", "reset"].includes(props.type)) {
+    return /* @__PURE__ */ React.createElement(FormButton, { ref, ...props });
+  }
+  return /* @__PURE__ */ React.createElement(CompatButton, { ref, ...props });
+});
+export {
+  Button,
+  CompatButton,
+  FormButton
+};
+//# sourceMappingURL=button.js.map

package/Base/compat/button/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/Base/compat/button/index.js"
+}

package/Base/compat/button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/Base/compat/button.tsx"],
+  "sourcesContent": ["import { FormContext } from '@digigov/form/FormContext';\nimport { Pressable } from \"react-native\";\nimport React, { useContext } from 'react';\nexport const FormButton = React.forwardRef(function FormButton({onClick, ...props}, ref) {\n  const formContext = useContext(FormContext)\n  return <CompatButton {...props} onClick={()=>{\n    onClick && onClick();\n    formContext?.[props.type]();\n  }} />;\n});\n\nexport const CompatButton = React.forwardRef(function CompatButton({onClick, ...props}, ref) {\n  return <Pressable onPress={onClick} ref={ref} hitSlop={10} {...props} />;\n});\n\nexport const Button = React.forwardRef(function Button(props, ref) {\n  if (['submit', 'reset'].includes(props.type)) {\n    return <FormButton ref={ref} {...props} />\n  }\n  return <CompatButton ref={ref} {...props} />;\n});\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,OAAO,SAAS,kBAAkB;AAC3B,MAAM,aAAa,MAAM,WAAW,SAASA,YAAW,EAAC,SAAS,GAAG,MAAK,GAAG,KAAK;AACvF,QAAM,cAAc,WAAW,WAAW;AAC1C,SAAO,oCAAC,gBAAc,GAAG,OAAO,SAAS,MAAI;AAC3C,eAAW,QAAQ;AACnB,kBAAc,MAAM,IAAI,EAAE;AAAA,EAC5B,GAAG;AACL,CAAC;AAEM,MAAM,eAAe,MAAM,WAAW,SAASC,cAAa,EAAC,SAAS,GAAG,MAAK,GAAG,KAAK;AAC3F,SAAO,oCAAC,aAAU,SAAS,SAAS,KAAU,SAAS,IAAK,GAAG,OAAO;AACxE,CAAC;AAEM,MAAM,SAAS,MAAM,WAAW,SAASC,QAAO,OAAO,KAAK;AACjE,MAAI,CAAC,UAAU,OAAO,EAAE,SAAS,MAAM,IAAI,GAAG;AAC5C,WAAO,oCAAC,cAAW,KAAW,GAAG,OAAO;AAAA,EAC1C;AACA,SAAO,oCAAC,gBAAa,KAAW,GAAG,OAAO;AAC5C,CAAC;",
+  "names": ["FormButton", "CompatButton", "Button"]
+}

package/Base/index.native/index.js

@@ -1,34 +1,7 @@
-import React, { useState } from "react";
+import React from "react";
 import { Text, View } from "react-native";
 import { mapping } from "@digigov/react-core/Base/mapping";
-import clsx from "clsx";
-import { basePropGenerator } from "./utils";
-const WrapperComponent = ({ classNames, focused, ...props }) => {
-  const focusedClassNames = focused ? classNames.map((cls) => `${cls}--focus`).join(" ") : " ";
-  return /* @__PURE__ */ React.createElement(View, { className: clsx(classNames.join(" "), focusedClassNames), ...props });
-};
-const Focusable = ({ wrapperClassNames, Component }) => {
-  return React.forwardRef(function Focusable2(props, ref) {
-    const [focused, setFocused] = useState(false);
-    return /* @__PURE__ */ React.createElement(WrapperComponent, { classNames: wrapperClassNames, focused }, /* @__PURE__ */ React.createElement(
-      Component,
-      {
-        ref,
-        onFocus: () => {
-          if (wrapperClassNames.length) {
-            setFocused(true);
-          }
-        },
-        onBlur: () => {
-          if (wrapperClassNames.length) {
-            setFocused(false);
-          }
-        },
-        ...props
-      }
-    ));
-  });
-};
+import { basePropGenerator, wrap } from "@digigov/react-core/Base/utils";
 const BooleanMapper = {
   true: true,
   false: false,
@@ -80,14 +53,7 @@ const Base = React.forwardRef(function Base2({
   "aria-expanded": ariaExpanded,
   ...props
 }, ref) {
-  const wrapperClassNames = [];
-  const classNames = (className?.split(" ") || []).filter((cls) => {
-    if (cls.endsWith("__wrapper")) {
-      wrapperClassNames.push(cls);
-      return false;
-    }
-    return true;
-  });
+  const classNames = className?.split(" ") || [];
   if (typeof children === "string") {
     children = [children];
   }
@@ -118,8 +84,8 @@ const Base = React.forwardRef(function Base2({
     });
   }
   let Component = mapping[as] || View;
-  if (wrapperClassNames.length > 0) {
-    Component = Focusable({ wrapperClassNames, Component });
+  if (classNames.find((className2) => className2.match(/__wrapper|__before|__after$/))) {
+    Component = wrap(Component);
   }
   Object.keys(props).forEach((k) => {
     if (k.startsWith("aria")) {
@@ -172,7 +138,7 @@ const Base = React.forwardRef(function Base2({
         mdHidden,
         lgHidden,
         xlHidden,
-        className: (classNames || []).join(" ")
+        className
       })
     },
     children

package/Base/index.native.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Base/index.native.tsx"],
-  "sourcesContent": ["import React, { useRef, useState } from \"react\";\nimport { Text, View, ViewProps } from \"react-native\";\nimport { mapping } from \"@digigov/react-core/Base/mapping\";\nimport  { BaseProps as CoreBaseProps } from \"@digigov/react-core/Base/index\";\nimport clsx from 'clsx';\nimport { basePropGenerator } from \"./utils\";\nexport type BaseProps<C extends React.ElementType> = CoreBaseProps<C> &\n  ViewProps;\nexport type BaseComponent = <C extends React.ElementType = \"span\">(\n  props: BaseProps<C>\n) => React.ReactNode | null;\nconst WrapperComponent = ({classNames, focused, ...props})=>{\n  const focusedClassNames = focused ? classNames.map(cls=>`${cls}--focus`).join(' ') :' '\n  return <View className={clsx(classNames.join(' '), focusedClassNames)} {...props} />\n}\nconst Focusable = ({ wrapperClassNames, Component}) =>{\n  return React.forwardRef(function Focusable(props, ref){\n    const [focused, setFocused] = useState(false);\n    return <WrapperComponent classNames={wrapperClassNames} focused={focused}>\n      <Component\n        ref={ref}\n        onFocus={() => {\n          if (wrapperClassNames.length) {\n            setFocused(true)\n          }\n        }}\n        onBlur={() => {\n          if (wrapperClassNames.length) {\n            setFocused(false)\n          }\n        }}\n        {...props}\n      />\n    </WrapperComponent>\n  })\n}\nconst BooleanMapper = {\n  true: true,\n  false: false,\n  undefined: false,\n  null: false,\n  \"\": false,\n};\nexport const Base: BaseComponent = React.forwardRef(function Base({\n  as,\n  children,\n  margin,\n  marginTop,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  m,\n  mt,\n  mb,\n  ml,\n  mr,\n  mx,\n  my,\n  padding,\n  paddingTop,\n  paddingBottom,\n  paddingLeft,\n  paddingRight,\n  p,\n  pt,\n  pb,\n  pr,\n  pl,\n  px,\n  py,\n  printHidden,\n  printVisible,\n  hidden,\n  xsUpHidden,\n  smUpHidden,\n  mdUpHidden,\n  lgUpHidden,\n  xlUpHidden,\n  xsHidden,\n  smHidden,\n  mdHidden,\n  lgHidden,\n  xlHidden,\n  className,\n  'aria-expanded': ariaExpanded,\n  ...props\n}, ref) {\n  const wrapperClassNames: string[] = []\n  \n  const classNames = (className?.split(\" \") || [])\n  .filter((cls) => {\n    if (cls.endsWith('__wrapper')){\n      wrapperClassNames.push(cls)\n      return false\n    }\n    return true\n  })\n  \n  if (typeof children === \"string\") {\n    children = [children];\n  }\n  if (Array.isArray(children)) {\n    const textClassNames = classNames?.map((className) => `${className}__text`).join(\" \")\n    children = children.map((child, index) => {\n      if(Array.isArray(child)) {\n        return child.map((child, index) => {\n          if (typeof child === \"string\") {\n            return (\n              <Text key={index} className={textClassNames}>\n                {child}\n              </Text>\n            );\n          }\n          return child;\n        });\n      }else if (typeof child === \"string\") {\n        return (\n          <Text key={index} className={textClassNames}\n            {...props.onClick && {\n              onPress: props.onClick\n            }}\n          >\n            {child}\n          </Text>\n        );\n      }\n      return child;\n    });\n  }\n  let Component = mapping[as as keyof JSX.IntrinsicElements] || View;\n\n  if(wrapperClassNames.length > 0){\n    Component = Focusable({wrapperClassNames, Component})\n  }\n  Object.keys(props).forEach((k)=>{\n    if(k.startsWith('aria')){\n      if(BooleanMapper[props[k]] !== undefined){\n        props[k] = BooleanMapper[props[k]]\n      }\n    }\n  })\n  return (\n      <Component\n        {...props}\n        ref={ref}\n        aria-expanded={ariaExpanded === 'false'? false : ariaExpanded === true? true: undefined}\n        className={\n          basePropGenerator({\n            margin,\n            marginTop,\n            marginBottom,\n            marginLeft,\n            marginRight,\n            m,\n            mt,\n            mb,\n            ml,\n            mr,\n            mx,\n            my,\n            padding,\n            paddingTop,\n            paddingBottom,\n            paddingLeft,\n            paddingRight,\n            p,\n            pt,\n            pb,\n            pr,\n            pl,\n            px,\n            py,\n            printHidden,\n            printVisible,\n            hidden,\n            xsUpHidden,\n            smUpHidden,\n            mdUpHidden,\n            lgUpHidden,\n            xlUpHidden,\n            xsHidden,\n            smHidden,\n            mdHidden,\n            lgHidden,\n            xlHidden,\n            className: (classNames|| []).join(' ')\n          })\n        }\n        >\n        {children}\n      </Component>\n\n  );\n});\n\nexport default Base;"],
-  "mappings": "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",
-  "names": ["Focusable", "Base", "className", "child", "index"]
+  "sourcesContent": ["import React, { useRef, useState } from 'react';\nimport { Text, View, ViewProps } from 'react-native';\nimport { mapping } from '@digigov/react-core/Base/mapping';\nimport { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';\nimport clsx from 'clsx';\nimport { basePropGenerator, wrap } from '@digigov/react-core/Base/utils';\nexport type BaseProps<C extends React.ElementType> = CoreBaseProps<C> &\n  ViewProps;\nexport type BaseComponent = <C extends React.ElementType = 'span'>(\n  props: BaseProps<C>\n) => React.ReactNode | null;\n\n\nconst BooleanMapper = {\n  true: true,\n  false: false,\n  undefined: false,\n  null: false,\n  '': false,\n};\nexport const Base: BaseComponent = React.forwardRef(function Base(\n  {\n    as,\n    children,\n    margin,\n    marginTop,\n    marginBottom,\n    marginLeft,\n    marginRight,\n    m,\n    mt,\n    mb,\n    ml,\n    mr,\n    mx,\n    my,\n    padding,\n    paddingTop,\n    paddingBottom,\n    paddingLeft,\n    paddingRight,\n    p,\n    pt,\n    pb,\n    pr,\n    pl,\n    px,\n    py,\n    printHidden,\n    printVisible,\n    hidden,\n    xsUpHidden,\n    smUpHidden,\n    mdUpHidden,\n    lgUpHidden,\n    xlUpHidden,\n    xsHidden,\n    smHidden,\n    mdHidden,\n    lgHidden,\n    xlHidden,\n    className,\n    'aria-expanded': ariaExpanded,\n    ...props\n  },\n  ref\n) {\n  const classNames = className?.split(' ') || []\n  if (typeof children === 'string') {\n    children = [children];\n  }\n  if (Array.isArray(children)) {\n    const textClassNames = classNames\n      ?.map((className) => `${className}__text`)\n      .join(' ');\n    children = children.map((child, index) => {\n      if (Array.isArray(child)) {\n        return child.map((child, index) => {\n          if (typeof child === 'string') {\n            return (\n              <Text key={index} className={textClassNames}>\n                {child}\n              </Text>\n            );\n          }\n          return child;\n        });\n      } else if (typeof child === 'string') {\n        return (\n          <Text\n            key={index}\n            className={textClassNames}\n            {...(props.onClick && {\n              onPress: props.onClick,\n            })}\n          >\n            {child}\n          </Text>\n        );\n      }\n      return child;\n    });\n  }\n  let Component = mapping[as as keyof JSX.IntrinsicElements] || View;\n  if(classNames.find((className) => className.match(/__wrapper|__before|__after$/))) {\n    Component = wrap(Component)\n  }\n\n  Object.keys(props).forEach((k) => {\n    if (k.startsWith('aria')) {\n      if (BooleanMapper[props[k]] !== undefined) {\n        props[k] = BooleanMapper[props[k]];\n      }\n    }\n  });\n  return (\n    <Component\n      {...props}\n      ref={ref}\n      aria-expanded={\n        ariaExpanded === 'false'\n          ? false\n          : ariaExpanded === true\n            ? true\n            : undefined\n      }\n      className={basePropGenerator({\n        margin,\n        marginTop,\n        marginBottom,\n        marginLeft,\n        marginRight,\n        m,\n        mt,\n        mb,\n        ml,\n        mr,\n        mx,\n        my,\n        padding,\n        paddingTop,\n        paddingBottom,\n        paddingLeft,\n        paddingRight,\n        p,\n        pt,\n        pb,\n        pr,\n        pl,\n        px,\n        py,\n        printHidden,\n        printVisible,\n        hidden,\n        xsUpHidden,\n        smUpHidden,\n        mdUpHidden,\n        lgUpHidden,\n        xlUpHidden,\n        xsHidden,\n        smHidden,\n        mdHidden,\n        lgHidden,\n        xlHidden,\n        className,\n      })}\n    >\n      {children}\n    </Component>\n  );\n});\n\nexport default Base;\n"],
+  "mappings": "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",
+  "names": ["Base", "className", "child", "index"]
 }

package/Base/mapping/index.js

@@ -1,27 +1,15 @@
-import { Pressable, Image, TextInput } from "react-native";
-import React, { useContext } from "react";
+import { Image, TextInput } from "react-native";
+import React from "react";
 import BaseInput from "./compat/Input";
 import CompatDetails from "./compat/details";
 import Svg, { Path, Circle, Rect, G, Polygon } from "react-native-svg";
 import { Link } from "expo-router";
-import { FormContext } from "@digigov/form/FormContext";
 import { Ol } from "./compat/ol";
-const Button = (props) => {
-  return /* @__PURE__ */ React.createElement(Pressable, { onPress: props.onClick, hitSlop: 10, ...props });
-};
-const SubmitButton = (props) => {
-  const formContext = useContext(FormContext);
-  return /* @__PURE__ */ React.createElement(Button, { ...props, onClick: formContext?.submit });
-};
+import { Button } from "./compat/button";
 const mapping = {
   a: Link,
   img: Image,
-  button: React.forwardRef(function CompatButton(props, ref) {
-    if (props.type === "submit") {
-      return /* @__PURE__ */ React.createElement(SubmitButton, { ref, ...props });
-    }
-    return /* @__PURE__ */ React.createElement(Button, { ref, ...props });
-  }),
+  button: Button,
   input: BaseInput,
   textarea: React.forwardRef(function TextAreaInput(props, ref) {
     return /* @__PURE__ */ React.createElement(TextInput, { ref, multiline: true, scrollEnabled: true, ...props });

package/Base/mapping.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Base/mapping.tsx"],
-  "sourcesContent": ["import { Pressable, Image, Text, TextInput, View } from \"react-native\";\nimport React, { useContext } from \"react\";\nimport BaseInput from \"./compat/Input\";\nimport CompatDetails from \"./compat/details\";\nimport Svg, { Path, Circle, Rect, G, Polygon } from \"react-native-svg\";\nimport { Link } from \"expo-router\";\nimport { FormContext } from '@digigov/form/FormContext';\nimport {Li} from \"./compat/li\";\nimport {Ol} from \"./compat/ol\";\nexport type MapProps<T extends keyof JSX.IntrinsicElements> =\n  React.ComponentPropsWithoutRef<T>;\nexport type MappingType = {\n  [K in keyof JSX.IntrinsicElements]?: (props: MapProps<K>) => JSX.Element;\n};\n\nconst Button = (props) => {\n  return <Pressable onPress={props.onClick} hitSlop={10} {...props} />;\n};\nconst SubmitButton = (props) => {\n  const formContext = useContext(FormContext)\n  return <Button {...props} onClick={formContext?.submit} />;\n};\nexport const mapping: MappingType = {\n  a: Link,\n  img: Image,\n  button: React.forwardRef(function CompatButton(props,ref) {\n    if(props.type === 'submit') {\n      return <SubmitButton ref={ref} {...props} />\n    }\n    return <Button ref={ref} {...props} />\n  }),\n  input: BaseInput,\n  textarea: React.forwardRef(function TextAreaInput(props,ref) {\n    return <TextInput ref={ref} multiline={true} scrollEnabled={true} {...props} />\n  }),\n  details: CompatDetails,\n  ol: Ol,\n  path: Path,\n  svg: Svg,\n  rect: Rect,\n  circle: Circle,\n  g: G,\n  polygon: Polygon,\n};\n"],
-  "mappings": "AAAA,SAAS,WAAW,OAAa,iBAAuB;AACxD,OAAO,SAAS,kBAAkB;AAClC,OAAO,eAAe;AACtB,OAAO,mBAAmB;AAC1B,OAAO,OAAO,MAAM,QAAQ,MAAM,GAAG,eAAe;AACpD,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAE5B,SAAQ,UAAS;AAOjB,MAAM,SAAS,CAAC,UAAU;AACxB,SAAO,oCAAC,aAAU,SAAS,MAAM,SAAS,SAAS,IAAK,GAAG,OAAO;AACpE;AACA,MAAM,eAAe,CAAC,UAAU;AAC9B,QAAM,cAAc,WAAW,WAAW;AAC1C,SAAO,oCAAC,UAAQ,GAAG,OAAO,SAAS,aAAa,QAAQ;AAC1D;AACO,MAAM,UAAuB;AAAA,EAClC,GAAG;AAAA,EACH,KAAK;AAAA,EACL,QAAQ,MAAM,WAAW,SAAS,aAAa,OAAM,KAAK;AACxD,QAAG,MAAM,SAAS,UAAU;AAC1B,aAAO,oCAAC,gBAAa,KAAW,GAAG,OAAO;AAAA,IAC5C;AACA,WAAO,oCAAC,UAAO,KAAW,GAAG,OAAO;AAAA,EACtC,CAAC;AAAA,EACD,OAAO;AAAA,EACP,UAAU,MAAM,WAAW,SAAS,cAAc,OAAM,KAAK;AAC3D,WAAO,oCAAC,aAAU,KAAU,WAAW,MAAM,eAAe,MAAO,GAAG,OAAO;AAAA,EAC/E,CAAC;AAAA,EACD,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,GAAG;AAAA,EACH,SAAS;AACX;",
+  "sourcesContent": ["import { Pressable, Image, Text, TextInput, View } from \"react-native\";\nimport React, { useContext } from \"react\";\nimport BaseInput from \"./compat/Input\";\nimport CompatDetails from \"./compat/details\";\nimport Svg, { Path, Circle, Rect, G, Polygon } from \"react-native-svg\";\nimport { Link } from \"expo-router\";\nimport {Li} from \"./compat/li\";\nimport {Ol} from \"./compat/ol\";\nimport { Button } from \"./compat/button\";\nexport type MapProps<T extends keyof JSX.IntrinsicElements> =\n  React.ComponentPropsWithoutRef<T>;\nexport type MappingType = {\n  [K in keyof JSX.IntrinsicElements]?: (props: MapProps<K>) => JSX.Element;\n};\n\n\nexport const mapping: MappingType = {\n  a: Link,\n  img: Image,\n  button: Button,\n  input: BaseInput,\n  textarea: React.forwardRef(function TextAreaInput(props,ref) {\n    return <TextInput ref={ref} multiline={true} scrollEnabled={true} {...props} />\n  }),\n  details: CompatDetails,\n  ol: Ol,\n  path: Path,\n  svg: Svg,\n  rect: Rect,\n  circle: Circle,\n  g: G,\n  polygon: Polygon,\n};\n"],
+  "mappings": "AAAA,SAAoB,OAAa,iBAAuB;AACxD,OAAO,WAA2B;AAClC,OAAO,eAAe;AACtB,OAAO,mBAAmB;AAC1B,OAAO,OAAO,MAAM,QAAQ,MAAM,GAAG,eAAe;AACpD,SAAS,YAAY;AAErB,SAAQ,UAAS;AACjB,SAAS,cAAc;AAQhB,MAAM,UAAuB;AAAA,EAClC,GAAG;AAAA,EACH,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU,MAAM,WAAW,SAAS,cAAc,OAAM,KAAK;AAC3D,WAAO,oCAAC,aAAU,KAAU,WAAW,MAAM,eAAe,MAAO,GAAG,OAAO;AAAA,EAC/E,CAAC;AAAA,EACD,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,KAAK;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,GAAG;AAAA,EACH,SAAS;AACX;",
   "names": []
 }

package/Base/utils/index.js

@@ -1,4 +1,6 @@
 import clsx from "clsx";
+import React, { useContext, useMemo, useState } from "react";
+import { View } from "react-native";
 const basePropGenerator = ({
   margin,
   marginTop,
@@ -78,7 +80,56 @@ const basePropGenerator = ({
   "ds-hidden-lg": !!lgHidden,
   "ds-hidden-xl": !!xlHidden
 });
+const WrapperContext = React.createContext((cls) => {
+  return cls;
+});
+const Wrapper = ({ children }) => {
+  const [className, setClassName] = useState("");
+  return /* @__PURE__ */ React.createElement(WrapperContext.Provider, { value: setClassName }, /* @__PURE__ */ React.createElement(View, { className, focusable: false }, children));
+};
+const wrap = (Component) => {
+  const WrappedComponent = React.forwardRef(({ className, onBlur, onFocus, ...props }, ref) => {
+    const setClassName = useContext(WrapperContext);
+    const wrapperClassNames = [];
+    const beforeClassNames = [];
+    const afterClassNames = [];
+    const focusedWrapperClassNames = [];
+    const classNames = useMemo(() => (className?.split(" ") || []).filter((cls) => {
+      if (cls.endsWith("__wrapper")) {
+        wrapperClassNames.push(cls);
+        focusedWrapperClassNames.push(`${cls}--focus`);
+        return false;
+      } else if (cls.endsWith("__before")) {
+        beforeClassNames.push(cls);
+        return false;
+      } else if (cls.endsWith("__after")) {
+        afterClassNames.push(cls);
+        return false;
+      }
+      return true;
+    }), []);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, beforeClassNames.length ? /* @__PURE__ */ React.createElement(View, { focusable: false, className: beforeClassNames.join(" ") }) : "", /* @__PURE__ */ React.createElement(
+      Component,
+      {
+        onFocus: (e) => {
+          setClassName(focusedWrapperClassNames.join(" "));
+          onFocus && onFocus(e);
+        },
+        onBlur: (e) => {
+          setClassName(wrapperClassNames.join(" "));
+          onBlur && onBlur(e);
+        },
+        className: classNames.join(" "),
+        ...props
+      }
+    ), afterClassNames.length ? /* @__PURE__ */ React.createElement(View, { focusable: false, className: afterClassNames.join(" ") }) : "");
+  });
+  return React.forwardRef(function Wrapped({ ...props }, ref) {
+    return /* @__PURE__ */ React.createElement(Wrapper, null, /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, ref }));
+  });
+};
 export {
-  basePropGenerator
+  basePropGenerator,
+  wrap
 };
 //# sourceMappingURL=utils.js.map

package/Base/utils.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 export declare const basePropGenerator: ({ margin, marginTop, marginBottom, marginLeft, marginRight, m, mt, mb, ml, mr, mx, my, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, p, pt, pb, pr, pl, px, py, printHidden, printVisible, hidden, xsUpHidden, smUpHidden, mdUpHidden, lgUpHidden, xlUpHidden, xsHidden, smHidden, mdHidden, lgHidden, xlHidden, className, }: {
     margin: any;
     marginTop: any;
@@ -38,3 +39,4 @@ export declare const basePropGenerator: ({ margin, marginTop, marginBottom, marg
     xlHidden: any;
     className: any;
 }) => string;
+export declare const wrap: (Component: any) => React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;

package/Base/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/Base/utils.ts"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nexport const basePropGenerator = ({\n  margin,\n  marginTop,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  m,\n  mt,\n  mb,\n  ml,\n  mr,\n  mx,\n  my,\n  padding,\n  paddingTop,\n  paddingBottom,\n  paddingLeft,\n  paddingRight,\n  p,\n  pt,\n  pb,\n  pr,\n  pl,\n  px,\n  py,\n  printHidden,\n  printVisible,\n  hidden,\n  xsUpHidden,\n  smUpHidden,\n  mdUpHidden,\n  lgUpHidden,\n  xlUpHidden,\n  xsHidden,\n  smHidden,\n  mdHidden,\n  lgHidden,\n  xlHidden,\n  className,\n}) => clsx(className, {\n  [`ds-m-${margin}`]: margin !== undefined ? true : undefined,\n  [`ds-mt-${marginTop}`]: marginTop !== undefined ? true : undefined,\n  [`ds-mb-${marginBottom}`]:\n    marginBottom !== undefined ? true : undefined,\n  [`ds-mr-${marginRight}`]: marginRight !== undefined ? true : undefined,\n  [`ds-ml-${marginLeft}`]: marginLeft !== undefined ? true : undefined,\n  [`ds-m-${m}`]: m !== undefined ? true : undefined,\n  [`ds-mt-${mt}`]: mt !== undefined ? true : undefined,\n  [`ds-mb-${mb}`]: mb !== undefined ? true : undefined,\n  [`ds-mr-${mr}`]: mr !== undefined ? true : undefined,\n  [`ds-ml-${ml}`]: ml !== undefined ? true : undefined,\n  [`ds-mx-${mx}`]: mx !== undefined ? true : undefined,\n  [`ds-my-${my}`]: my !== undefined ? true : undefined,\n  [`ds-p-${padding}`]: padding !== undefined ? true : undefined,\n  [`ds-pt-${paddingTop}`]: paddingTop !== undefined ? true : undefined,\n  [`ds-pb-${paddingBottom}`]:\n    paddingBottom !== undefined ? true : undefined,\n  [`ds-pr-${paddingRight}`]:\n    paddingRight !== undefined ? true : undefined,\n  [`ds-pl-${paddingLeft}`]: paddingLeft !== undefined ? true : undefined,\n  [`ds-p-${p}`]: p !== undefined ? true : undefined,\n  [`ds-pt-${pt}`]: pt !== undefined ? true : undefined,\n  [`ds-pb-${pb}`]: pb !== undefined ? true : undefined,\n  [`ds-pr-${pr}`]: pr !== undefined ? true : undefined,\n  [`ds-pl-${pl}`]: pl !== undefined ? true : undefined,\n  [`ds-px-${px}`]: px !== undefined ? true : undefined,\n  [`ds-py-${py}`]: py !== undefined ? true : undefined,\n  'ds-print-hidden': !!printHidden,\n  'ds-print-visible-block': printVisible === 'block',\n  'ds-print-visible-inline': printVisible === 'inline',\n  'ds-hidden': !!hidden,\n  'ds-hidden-xs-up': !!xsUpHidden,\n  'ds-hidden-sm-up': !!smUpHidden,\n  'ds-hidden-md-up': !!mdUpHidden,\n  'ds-hidden-lg-up': !!lgUpHidden,\n  'ds-hidden-xl-up': !!xlUpHidden,\n  'ds-hidden-xs': !!xsHidden,\n  'ds-hidden-sm': !!smHidden,\n  'ds-hidden-md': !!mdHidden,\n  'ds-hidden-lg': !!lgHidden,\n  'ds-hidden-xl': !!xlHidden,\n})"],
-  "mappings": "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",
+  "sources": ["../../src/Base/utils.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport React, { useContext, useMemo, useState } from 'react';\nimport { View } from 'react-native';\n\nexport const basePropGenerator = ({\n  margin,\n  marginTop,\n  marginBottom,\n  marginLeft,\n  marginRight,\n  m,\n  mt,\n  mb,\n  ml,\n  mr,\n  mx,\n  my,\n  padding,\n  paddingTop,\n  paddingBottom,\n  paddingLeft,\n  paddingRight,\n  p,\n  pt,\n  pb,\n  pr,\n  pl,\n  px,\n  py,\n  printHidden,\n  printVisible,\n  hidden,\n  xsUpHidden,\n  smUpHidden,\n  mdUpHidden,\n  lgUpHidden,\n  xlUpHidden,\n  xsHidden,\n  smHidden,\n  mdHidden,\n  lgHidden,\n  xlHidden,\n  className,\n}) => clsx(className, {\n  [`ds-m-${margin}`]: margin !== undefined ? true : undefined,\n  [`ds-mt-${marginTop}`]: marginTop !== undefined ? true : undefined,\n  [`ds-mb-${marginBottom}`]:\n    marginBottom !== undefined ? true : undefined,\n  [`ds-mr-${marginRight}`]: marginRight !== undefined ? true : undefined,\n  [`ds-ml-${marginLeft}`]: marginLeft !== undefined ? true : undefined,\n  [`ds-m-${m}`]: m !== undefined ? true : undefined,\n  [`ds-mt-${mt}`]: mt !== undefined ? true : undefined,\n  [`ds-mb-${mb}`]: mb !== undefined ? true : undefined,\n  [`ds-mr-${mr}`]: mr !== undefined ? true : undefined,\n  [`ds-ml-${ml}`]: ml !== undefined ? true : undefined,\n  [`ds-mx-${mx}`]: mx !== undefined ? true : undefined,\n  [`ds-my-${my}`]: my !== undefined ? true : undefined,\n  [`ds-p-${padding}`]: padding !== undefined ? true : undefined,\n  [`ds-pt-${paddingTop}`]: paddingTop !== undefined ? true : undefined,\n  [`ds-pb-${paddingBottom}`]:\n    paddingBottom !== undefined ? true : undefined,\n  [`ds-pr-${paddingRight}`]:\n    paddingRight !== undefined ? true : undefined,\n  [`ds-pl-${paddingLeft}`]: paddingLeft !== undefined ? true : undefined,\n  [`ds-p-${p}`]: p !== undefined ? true : undefined,\n  [`ds-pt-${pt}`]: pt !== undefined ? true : undefined,\n  [`ds-pb-${pb}`]: pb !== undefined ? true : undefined,\n  [`ds-pr-${pr}`]: pr !== undefined ? true : undefined,\n  [`ds-pl-${pl}`]: pl !== undefined ? true : undefined,\n  [`ds-px-${px}`]: px !== undefined ? true : undefined,\n  [`ds-py-${py}`]: py !== undefined ? true : undefined,\n  'ds-print-hidden': !!printHidden,\n  'ds-print-visible-block': printVisible === 'block',\n  'ds-print-visible-inline': printVisible === 'inline',\n  'ds-hidden': !!hidden,\n  'ds-hidden-xs-up': !!xsUpHidden,\n  'ds-hidden-sm-up': !!smUpHidden,\n  'ds-hidden-md-up': !!mdUpHidden,\n  'ds-hidden-lg-up': !!lgUpHidden,\n  'ds-hidden-xl-up': !!xlUpHidden,\n  'ds-hidden-xs': !!xsHidden,\n  'ds-hidden-sm': !!smHidden,\n  'ds-hidden-md': !!mdHidden,\n  'ds-hidden-lg': !!lgHidden,\n  'ds-hidden-xl': !!xlHidden,\n})\nconst WrapperContext = React.createContext((cls)=>{return cls});\nconst Wrapper = ({children})=>{\n  const [className, setClassName] = useState('');\n  return <WrapperContext.Provider value={setClassName}>\n    <View className={className} focusable={false}>\n    {children}\n    </View>\n  </WrapperContext.Provider>\n}\n\nexport const wrap = (Component) => {\n  // @ts-ignore\n  const WrappedComponent = React.forwardRef(({className, onBlur, onFocus, ...props}, ref)=>{\n    const setClassName = useContext(WrapperContext);\n    const wrapperClassNames: string[] = [];\n    const beforeClassNames: string[] = [];\n    const afterClassNames: string[] = [];\n    const focusedWrapperClassNames: string[] = []\n    const classNames = useMemo(() => (className?.split(' ') || []).filter((cls) => {\n      if (\n        cls.endsWith('__wrapper')\n      ) {\n        wrapperClassNames.push(cls);\n        focusedWrapperClassNames.push(`${cls}--focus`);\n        return false;\n      } else if (cls.endsWith('__before')) {\n        beforeClassNames.push(cls);\n        return false;\n      } else if (cls.endsWith('__after')) {\n        afterClassNames.push(cls);\n        return false;\n      }\n      return true;\n    }), []);\n    return <>\n      {beforeClassNames.length ? <View focusable={false} className={beforeClassNames.join(' ')} />: ''}\n      <Component\n        onFocus={(e) => {\n          setClassName(focusedWrapperClassNames.join(' '));\n          onFocus && onFocus(e);\n        }}\n        onBlur={(e) => {\n          setClassName(wrapperClassNames.join(' '));\n          onBlur && onBlur(e);\n        }}\n        className={classNames.join(' ')}\n        {...props}\n      />\n      {afterClassNames.length ? <View focusable={false} className={afterClassNames.join(' ')} />: ''}\n\n    </>\n  })\n  return React.forwardRef(function Wrapped({ ...props }, ref) {\n    return (\n      <Wrapper>\n        <WrappedComponent {...props}  ref={ref}/>\n      </Wrapper>\n    );\n  });\n};"],
+  "mappings": "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",
   "names": []
 }

package/CheckboxItem/index.js

@@ -2,6 +2,7 @@ import React from "react";
 import clsx from "clsx";
 import Base from "@digigov/react-core/Base";
 import ChoiceDividerText from "@digigov/react-core/ChoiceDividerText";
+import CheckboxItemInput from "@digigov/react-core/CheckboxItemInput";
 import LabelContainer from "@digigov/react-core/LabelContainer";
 const CheckboxItem = React.forwardRef(function CheckboxItem2({ name, value, dividerText, className, disabled, children, ...props }, ref) {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, dividerText && /* @__PURE__ */ React.createElement(ChoiceDividerText, null, dividerText), /* @__PURE__ */ React.createElement(
@@ -21,21 +22,7 @@ const CheckboxItem = React.forwardRef(function CheckboxItem2({ name, value, divi
         })
       },
       children,
-      /* @__PURE__ */ React.createElement(
-        Base,
-        {
-          as: "input",
-          ref,
-          type: "checkbox",
-          name,
-          value,
-          className: clsx({
-            "ds-checkboxes__input": true
-          }),
-          disabled,
-          ...props
-        }
-      )
+      /* @__PURE__ */ React.createElement(CheckboxItemInput, { ref, name, value, disabled, ...props })
     )
   ));
 });

package/CheckboxItem/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/CheckboxItem/index.tsx"],
-  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\nimport ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';\nimport LabelContainer from '@digigov/react-core/LabelContainer';\n\nexport interface CheckboxItemProps extends BaseProps<'input'> {\n  /**\n   * dividerText is optional.\n   * Add this prop to add a choice divider on top of a checkbox item.\n   * The string is the text that it will appear above this checkbox item.\n   */\n  dividerText?: string;\n}\n/**\n * Details for the CheckboxItem.\n * CheckboxItem component allows the user to select one or more checkboxes\n * CheckboxItem must be used inside Checkbox component\n */\nexport const CheckboxItem = React.forwardRef<\n  HTMLInputElement,\n  CheckboxItemProps\n>(function CheckboxItem(\n  { name, value, dividerText, className, disabled, children, ...props },\n  ref\n) {\n  return (\n    <>\n      {dividerText && <ChoiceDividerText>{dividerText}</ChoiceDividerText>}\n      <Base as='div'\n        className={clsx(className, {\n          'ds-checkboxes__item': true,\n        })}\n      >\n        <LabelContainer\n          className={clsx({\n            'ds-checkboxes__label': true,\n            'ds-checkboxes__label--disabled': disabled,\n          })}\n        >\n          {children}\n          <Base\n            as=\"input\"\n            ref={ref}\n            type=\"checkbox\"\n            name={name}\n            value={value}\n            className={clsx({\n              'ds-checkboxes__input': true,\n            })}\n            disabled={disabled}\n            {...props}\n          />\n        </LabelContainer>\n      </Base>\n    </>\n  );\n});\n\nexport default CheckboxItem;\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,UAAyB;AAChC,OAAO,uBAAuB;AAC9B,OAAO,oBAAoB;AAepB,MAAM,eAAe,MAAM,WAGhC,SAASA,cACT,EAAE,MAAM,OAAO,aAAa,WAAW,UAAU,UAAU,GAAG,MAAM,GACpE,KACA;AACA,SACE,0DACG,eAAe,oCAAC,yBAAmB,WAAY,GAChD;AAAA,IAAC;AAAA;AAAA,MAAK,IAAG;AAAA,MACP,WAAW,KAAK,WAAW;AAAA,QACzB,uBAAuB;AAAA,MACzB,CAAC;AAAA;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK;AAAA,UACd,wBAAwB;AAAA,UACxB,kCAAkC;AAAA,QACpC,CAAC;AAAA;AAAA,MAEA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,IAAG;AAAA,UACH;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAW,KAAK;AAAA,YACd,wBAAwB;AAAA,UAC1B,CAAC;AAAA,UACD;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,IACF;AAAA,EACF,CACF;AAEJ,CAAC;AAED,IAAO,uBAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\nimport ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';\nimport CheckboxItemInput from '@digigov/react-core/CheckboxItemInput';\nimport LabelContainer from '@digigov/react-core/LabelContainer';\n\nexport interface CheckboxItemProps extends BaseProps<'input'> {\n  /**\n   * dividerText is optional.\n   * Add this prop to add a choice divider on top of a checkbox item.\n   * The string is the text that it will appear above this checkbox item.\n   */\n  dividerText?: string;\n}\n/**\n * Details for the CheckboxItem.\n * CheckboxItem component allows the user to select one or more checkboxes\n * CheckboxItem must be used inside Checkbox component\n */\nexport const CheckboxItem = React.forwardRef<\n  HTMLInputElement,\n  CheckboxItemProps\n>(function CheckboxItem(\n  { name, value, dividerText, className, disabled, children, ...props },\n  ref\n) {\n  return (\n    <>\n      {dividerText && <ChoiceDividerText>{dividerText}</ChoiceDividerText>}\n      <Base as='div'\n        className={clsx(className, {\n          'ds-checkboxes__item': true,\n        })}\n      >\n        <LabelContainer\n          className={clsx({\n            'ds-checkboxes__label': true,\n            'ds-checkboxes__label--disabled': disabled,\n          })}\n        >\n          {children}\n          <CheckboxItemInput ref={ref} name={name} value={value} disabled={disabled} {...props} />\n        </LabelContainer>\n      </Base>\n    </>\n  );\n});\n\nexport default CheckboxItem;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,UAAyB;AAChC,OAAO,uBAAuB;AAC9B,OAAO,uBAAuB;AAC9B,OAAO,oBAAoB;AAepB,MAAM,eAAe,MAAM,WAGhC,SAASA,cACT,EAAE,MAAM,OAAO,aAAa,WAAW,UAAU,UAAU,GAAG,MAAM,GACpE,KACA;AACA,SACE,0DACG,eAAe,oCAAC,yBAAmB,WAAY,GAChD;AAAA,IAAC;AAAA;AAAA,MAAK,IAAG;AAAA,MACP,WAAW,KAAK,WAAW;AAAA,QACzB,uBAAuB;AAAA,MACzB,CAAC;AAAA;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK;AAAA,UACd,wBAAwB;AAAA,UACxB,kCAAkC;AAAA,QACpC,CAAC;AAAA;AAAA,MAEA;AAAA,MACD,oCAAC,qBAAkB,KAAU,MAAY,OAAc,UAAqB,GAAG,OAAO;AAAA,IACxF;AAAA,EACF,CACF;AAEJ,CAAC;AAED,IAAO,uBAAQ;",
   "names": ["CheckboxItem"]
 }

package/CheckboxItemInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@digigov/react-core/CheckboxItemInput/index.web';
+export { default as default } from '@digigov/react-core/CheckboxItemInput/index.web';

package/CheckboxItemInput/index.js

@@ -0,0 +1,6 @@
+export * from "@digigov/react-core/CheckboxItemInput/index.web";
+import { default as default2 } from "@digigov/react-core/CheckboxItemInput/index.web";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/CheckboxItemInput/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/CheckboxItemInput/index.tsx"],
+  "sourcesContent": ["export * from '@digigov/react-core/CheckboxItemInput/index.web';\nexport { default as default } from '@digigov/react-core/CheckboxItemInput/index.web';"],
+  "mappings": "AAAA,cAAc;AACd,SAAoB,WAAXA,gBAA0B;",
+  "names": ["default"]
+}

package/CheckboxItemInput/index.native/index.js

@@ -0,0 +1,15 @@
+import extend from "@digigov/react-core/utils/extend";
+import CoreCheckboxItemInput from "@digigov/react-core/CheckboxItemInput/index.web";
+import clsx from "clsx";
+const CheckboxItemInput = extend(CoreCheckboxItemInput, ({ className, ...props }) => ({
+  ...props,
+  className: clsx(className, {
+    "ds-checkboxes__input__wrapper": true
+  })
+}));
+var index_native_default = CheckboxItemInput;
+export {
+  CheckboxItemInput,
+  index_native_default as default
+};
+//# sourceMappingURL=index.native.js.map

package/CheckboxItemInput/index.native/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../cjs/CheckboxItemInput/index.native/index.js"
+}

package/CheckboxItemInput/index.native.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const CheckboxItemInput: import("react").ForwardRefExoticComponent<Omit<Omit<import("@digigov/react-core/CheckboxItemInput/index.web").CheckboxItemInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement> & {
+    className?: string | undefined;
+}, "ref"> & import("react").RefAttributes<unknown>>;
+export default CheckboxItemInput;

package/CheckboxItemInput/index.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/CheckboxItemInput/index.native.tsx"],
+  "sourcesContent": ["import extend from '@digigov/react-core/utils/extend';\nimport CoreCheckboxItemInput from '@digigov/react-core/CheckboxItemInput/index.web';\nimport clsx from 'clsx';\nexport const CheckboxItemInput = extend(CoreCheckboxItemInput, ({ className, ...props }) => ({\n    ...props,\n    className: clsx(className, {\n        'ds-checkboxes__input__wrapper': true\n    })\n}))\nexport default CheckboxItemInput;\n"],
+  "mappings": "AAAA,OAAO,YAAY;AACnB,OAAO,2BAA2B;AAClC,OAAO,UAAU;AACV,MAAM,oBAAoB,OAAO,uBAAuB,CAAC,EAAE,WAAW,GAAG,MAAM,OAAO;AAAA,EACzF,GAAG;AAAA,EACH,WAAW,KAAK,WAAW;AAAA,IACvB,iCAAiC;AAAA,EACrC,CAAC;AACL,EAAE;AACF,IAAO,uBAAQ;",
+  "names": []
+}

package/CheckboxItemInput/index.web/index.js

@@ -0,0 +1,26 @@
+import React from "react";
+import clsx from "clsx";
+import Base from "@digigov/react-core/Base";
+const CheckboxItemInput = React.forwardRef(function CheckboxItemInput2({ name, value, className, disabled, children, ...props }, ref) {
+  return /* @__PURE__ */ React.createElement(
+    Base,
+    {
+      as: "input",
+      ref,
+      type: "checkbox",
+      name,
+      value,
+      className: clsx({
+        "ds-checkboxes__input": true
+      }),
+      disabled,
+      ...props
+    }
+  );
+});
+var index_web_default = CheckboxItemInput;
+export {
+  CheckboxItemInput,
+  index_web_default as default
+};
+//# sourceMappingURL=index.web.js.map