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

package/TextInput/index.web.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { BaseProps } from '@digigov/react-core/Base';
+export interface TextInputProps extends BaseProps<'input'> {
+    /**
+     * maxWidth is optional.
+     * @value '2-char';
+     * @value '3-char';
+     * @value '4-char';
+     * @value '5-char';
+     * @value '10-char';
+     * @value '20-char';
+     */
+    maxWidth?: '2-char' | '3-char' | '4-char' | '5-char' | '10-char' | '20-char';
+    /**
+     * width is optional.
+     * Use width prop to define a custom width in your component.
+     * @value '25%';
+     * @value '33.3%';
+     * @value '50%';
+     * @value '66.6%';
+     * @value '75%';
+     * @value '100%';
+     * @value 'full';
+     */
+    width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
+    /**
+     * error is optional. The default value is false.
+     * Use this prop when there is an error at the input.
+     * @value true
+     * @value false
+     */
+    error?: boolean;
+    /**
+     * dense is optional.
+     * @value true TextInput will be dense.
+     * @value false
+     * @default false
+     */
+    dense?: boolean;
+}
+/**
+ * TextInput component when you need to let users enter text that’s no
+ * longer than a single line, such as their name or phone number.
+ */
+export declare const TextInput: React.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export default TextInput;

package/TextInput/index.web.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/TextInput/index.web.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface TextInputProps extends BaseProps<'input'> {\n  /**\n   * maxWidth is optional.\n   * @value '2-char';\n   * @value '3-char';\n   * @value '4-char';\n   * @value '5-char';\n   * @value '10-char';\n   * @value '20-char';\n   */\n  maxWidth?: '2-char' | '3-char' | '4-char' | '5-char' | '10-char' | '20-char';\n\n  /**\n   * width is optional.\n   * Use width prop to define a custom width in your component.\n   * @value '25%';\n   * @value '33.3%';\n   * @value '50%';\n   * @value '66.6%';\n   * @value '75%';\n   * @value '100%';\n   * @value 'full';\n   */\n  width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';\n\n  /**\n   * error is optional. The default value is false.\n   * Use this prop when there is an error at the input.\n   * @value true\n   * @value false\n   */\n  error?: boolean;\n  /**\n   * dense is optional.\n   * @value true TextInput will be dense.\n   * @value false\n   * @default false\n   */\n  dense?: boolean;\n}\n/**\n * TextInput component when you need to let users enter text that\u2019s no\n * longer than a single line, such as their name or phone number.\n */\nexport const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(\n  function TextInput(\n    {\n      type = 'text',\n      maxWidth,\n      width,\n      error,\n      dense,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) {\n    return (\n      <Base\n        as=\"input\"\n        type={type}\n        ref={ref}\n        className={clsx(className, {\n          'ds-input': true,\n          'ds-input--error': error,\n          'ds-input--dense': dense,\n          [`ds-input--width-${maxWidth}`]: maxWidth !== undefined,\n          'ds-!-width-one-quarter': width === '25%',\n          'ds-!-width-one-third': width === '33.3%',\n          'ds-!-width-one-half': width === '50%',\n          'ds-!-width-two-thirds': width === '66.6%',\n          'ds-!-width-three-quarters': width === '75%',\n        })}\n        {...props}\n      >\n        {children}\n      </Base>\n    );\n  }\n);\n\nexport default TextInput;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,UAAyB;AA8CzB,MAAM,YAAY,MAAM;AAAA,EAC7B,SAASA,WACP;AAAA,IACE,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA,WAAW,KAAK,WAAW;AAAA,UACzB,YAAY;AAAA,UACZ,mBAAmB;AAAA,UACnB,mBAAmB;AAAA,UACnB,CAAC,mBAAmB,QAAQ,EAAE,GAAG,aAAa;AAAA,UAC9C,0BAA0B,UAAU;AAAA,UACpC,wBAAwB,UAAU;AAAA,UAClC,uBAAuB,UAAU;AAAA,UACjC,yBAAyB,UAAU;AAAA,UACnC,6BAA6B,UAAU;AAAA,QACzC,CAAC;AAAA,QACA,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,IAAO,oBAAQ;",
+  "names": ["TextInput"]
+}

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

@@ -34,22 +34,7 @@ module.exports = __toCommonJS(CheckboxInput_exports);
 var import_react = __toESM(require("react"));
 var import_react_native = require("react-native");
 const CheckboxInput = import_react.default.forwardRef(function CheckboxInput2({ checked, onChange, ...props }, ref) {
-  return /* @__PURE__ */ import_react.default.createElement(import_react_native.TouchableOpacity, { ref, onPress: () => onChange({ currentTarget: { checked: !checked } }), ...props }, /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { style: styles.checkbox }, checked && /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { style: styles.checkmark })));
-});
-const styles = import_react_native.StyleSheet.create({
-  checkbox: {
-    width: 20,
-    height: 20,
-    borderWidth: 2,
-    borderColor: "#000",
-    justifyContent: "center",
-    alignItems: "center"
-  },
-  checkmark: {
-    width: 12,
-    height: 12,
-    backgroundColor: "#000"
-  }
+  return /* @__PURE__ */ import_react.default.createElement(import_react_native.TouchableOpacity, { ref, onPress: () => onChange({ currentTarget: { checked: !checked, value: props.value } }), ...props }, checked && /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { className: "ds-checkboxes__input--checked" }));
 });
 var CheckboxInput_default = CheckboxInput;
 // Annotate the CommonJS export names for ESM import in node:

package/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8D;AAC9D,0BAAmD;AAM5C,MAAM,gBAAgB,aAAAA,QAAM,WAAW,SAASC,eAAc,EAAE,SAAS,UAAU,GAAG,MAAM,GAAG,KAAI;AACxG,SACE,6BAAAD,QAAA,cAAC,wCAAiB,KAAU,SAAS,MAAI,SAAS,EAAC,eAAc,EAAC,SAAQ,CAAC,QAAO,EAAC,CAAC,GAAI,GAAG,SACzF,6BAAAA,QAAA,cAAC,4BAAK,OAAO,OAAO,YACjB,WAAW,6BAAAA,QAAA,cAAC,4BAAK,OAAO,OAAO,WAAW,CAC7C,CACF;AAEJ,CAAC;AAED,MAAM,SAAS,+BAAW,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8D;AAC9D,0BAAuC;AAOhC,MAAM,gBAAgB,aAAAA,QAAM,WAAW,SAASC,eAAc,EAAE,SAAS,UAAU,GAAG,MAAM,GAAG,KAAK;AAEzG,SACE,6BAAAD,QAAA,cAAC,wCAAiB,KAAU,SAAS,MAAM,SAAS,EAAE,eAAe,EAAE,SAAS,CAAC,SAAS,OAAO,MAAM,MAAM,EAAE,CAAC,GAAI,GAAG,SACpH,WAAW,6BAAAA,QAAA,cAAC,4BAAK,WAAU,iCAAgC,CAC9D;AAEJ,CAAC;AAED,IAAO,wBAAQ;",
   "names": ["React", "CheckboxInput"]
 }

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

@@ -35,8 +35,9 @@ var import_react = __toESM(require("react"));
 var import_react_native = require("react-native");
 const RadioInput = import_react.default.forwardRef(function RadioInput2({
   value,
-  checked = false,
-  onChange
+  checked,
+  onChange,
+  ...props
 }, ref) {
   const handlePress = () => {
     if (onChange) {
@@ -49,26 +50,9 @@ const RadioInput = import_react.default.forwardRef(function RadioInput2({
       onChange(syntheticEvent);
     }
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react_native.TouchableOpacity, { ref, onPress: handlePress }, /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { style: styles.outerCircle }, checked && /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { style: styles.innerCircle })));
+  return /* @__PURE__ */ import_react.default.createElement(import_react_native.TouchableOpacity, { ref, onPress: handlePress, ...props }, checked && /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { className: "ds-radios__input--checked" }));
 });
 var RadioInput_default = RadioInput;
-const styles = import_react_native.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"
-  }
-});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   RadioInput

package/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8D;AAC9D,0BAAyD;AAOlD,MAAM,aAAa,aAAAA,QAAM,WAAW,SAASC,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,6BAAAD,QAAA,cAAC,wCAAiB,KAAU,SAAS,eACnC,6BAAAA,QAAA,cAAC,4BAAK,OAAO,OAAO,eACjB,WAAW,6BAAAA,QAAA,cAAC,4BAAK,OAAO,OAAO,aAAa,CAC/C,CACF;AAEJ,CAAC;AAED,IAAO,qBAAQ;AAEf,MAAM,SAAS,+BAAW,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8D;AAC9D,0BAAuC;AAOhC,MAAM,aAAa,aAAAA,QAAM,WAAW,SAASC,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,6BAAAD,QAAA,cAAC,wCAAiB,KAAU,SAAS,aAAc,GAAG,SACnD,WAAW,6BAAAA,QAAA,cAAC,4BAAK,WAAU,6BAA4B,CAC1D;AAEJ,CAAC;AAED,IAAO,qBAAQ;",
   "names": ["React", "RadioInput"]
 }

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

@@ -32,7 +32,8 @@ __export(StringInput_exports, {
 module.exports = __toCommonJS(StringInput_exports);
 var import_react = __toESM(require("react"));
 var import_react_native = require("react-native");
-const StringInput = import_react.default.forwardRef(function StringInput2({
+var import_utils = require("../../utils");
+const StringInput = (0, import_utils.wrap)(import_react.default.forwardRef(function StringInput2({
   type,
   onChange,
   onBlur,
@@ -91,7 +92,7 @@ const StringInput = import_react.default.forwardRef(function StringInput2({
       ...props
     }
   );
-});
+}));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   StringInput

package/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyE;AACzE,0BAA0B;AAOnB,MAAM,cAAc,aAAAA,QAAM,WAAW,SAASC,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,aAAAD,QAAM,SAAS,KAAK;AACrD,8BAAU,MAAI;AACZ,QAAG,iBAAiB,OAAM;AACxB,iBAAW,EAAE,QAAQ,EAAE,OAAO,aAAa,EAAE,CAAC;AAAA,IAChD;AAAA,EAEF,GAAE,CAAC,YAAY,CAAC;AAChB,8BAAU,MAAI;AACZ,QAAG,iBAAiB,OAAM;AACxB,eAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAE,CAAC,KAAK,CAAC;AACT,SAAO,6BAAAA,QAAA;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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyE;AACzE,0BAA4B;AAC5B,mBAAqB;AAOd,MAAM,kBAAc,mBAAK,aAAAA,QAAM,WAAW,SAASC,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,aAAAD,QAAM,SAAS,KAAK;AACrD,8BAAU,MAAI;AACZ,QAAG,iBAAiB,OAAM;AACxB,iBAAW,EAAE,QAAQ,EAAE,OAAO,aAAa,EAAE,CAAC;AAAA,IAChD;AAAA,EAEF,GAAE,CAAC,YAAY,CAAC;AAChB,8BAAU,MAAI;AACZ,QAAG,iBAAiB,OAAM;AACxB,eAAS,KAAK;AAAA,IAChB;AAAA,EACF,GAAE,CAAC,KAAK,CAAC;AACT,SAAO,6BAAAA,QAAA;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": ["React", "StringInput"]
 }

package/cjs/Base/compat/button/index.js

@@ -0,0 +1,60 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button,
+  CompatButton: () => CompatButton,
+  FormButton: () => FormButton
+});
+module.exports = __toCommonJS(button_exports);
+var import_FormContext = require("@digigov/form/FormContext");
+var import_react_native = require("react-native");
+var import_react = __toESM(require("react"));
+const FormButton = import_react.default.forwardRef(function FormButton2({ onClick, ...props }, ref) {
+  const formContext = (0, import_react.useContext)(import_FormContext.FormContext);
+  return /* @__PURE__ */ import_react.default.createElement(CompatButton, { ...props, onClick: () => {
+    onClick && onClick();
+    formContext?.[props.type]();
+  } });
+});
+const CompatButton = import_react.default.forwardRef(function CompatButton2({ onClick, ...props }, ref) {
+  return /* @__PURE__ */ import_react.default.createElement(import_react_native.Pressable, { onPress: onClick, ref, hitSlop: 10, ...props });
+});
+const Button = import_react.default.forwardRef(function Button2(props, ref) {
+  if (["submit", "reset"].includes(props.type)) {
+    return /* @__PURE__ */ import_react.default.createElement(FormButton, { ref, ...props });
+  }
+  return /* @__PURE__ */ import_react.default.createElement(CompatButton, { ref, ...props });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  CompatButton,
+  FormButton
+});
+//# sourceMappingURL=button.js.map

package/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAA4B;AAC5B,0BAA0B;AAC1B,mBAAkC;AAC3B,MAAM,aAAa,aAAAA,QAAM,WAAW,SAASC,YAAW,EAAC,SAAS,GAAG,MAAK,GAAG,KAAK;AACvF,QAAM,kBAAc,yBAAW,8BAAW;AAC1C,SAAO,6BAAAD,QAAA,cAAC,gBAAc,GAAG,OAAO,SAAS,MAAI;AAC3C,eAAW,QAAQ;AACnB,kBAAc,MAAM,IAAI,EAAE;AAAA,EAC5B,GAAG;AACL,CAAC;AAEM,MAAM,eAAe,aAAAA,QAAM,WAAW,SAASE,cAAa,EAAC,SAAS,GAAG,MAAK,GAAG,KAAK;AAC3F,SAAO,6BAAAF,QAAA,cAAC,iCAAU,SAAS,SAAS,KAAU,SAAS,IAAK,GAAG,OAAO;AACxE,CAAC;AAEM,MAAM,SAAS,aAAAA,QAAM,WAAW,SAASG,QAAO,OAAO,KAAK;AACjE,MAAI,CAAC,UAAU,OAAO,EAAE,SAAS,MAAM,IAAI,GAAG;AAC5C,WAAO,6BAAAH,QAAA,cAAC,cAAW,KAAW,GAAG,OAAO;AAAA,EAC1C;AACA,SAAO,6BAAAA,QAAA,cAAC,gBAAa,KAAW,GAAG,OAAO;AAC5C,CAAC;",
+  "names": ["React", "FormButton", "CompatButton", "Button"]
+}

package/cjs/Base/index.native/index.js

@@ -34,34 +34,7 @@ module.exports = __toCommonJS(index_native_exports);
 var import_react = __toESM(require("react"));
 var import_react_native = require("react-native");
 var import_mapping = require("@digigov/react-core/Base/mapping");
-var import_clsx = __toESM(require("clsx"));
-var import_utils = require("./utils");
-const WrapperComponent = ({ classNames, focused, ...props }) => {
-  const focusedClassNames = focused ? classNames.map((cls) => `${cls}--focus`).join(" ") : " ";
-  return /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { className: (0, import_clsx.default)(classNames.join(" "), focusedClassNames), ...props });
-};
-const Focusable = ({ wrapperClassNames, Component }) => {
-  return import_react.default.forwardRef(function Focusable2(props, ref) {
-    const [focused, setFocused] = (0, import_react.useState)(false);
-    return /* @__PURE__ */ import_react.default.createElement(WrapperComponent, { classNames: wrapperClassNames, focused }, /* @__PURE__ */ import_react.default.createElement(
-      Component,
-      {
-        ref,
-        onFocus: () => {
-          if (wrapperClassNames.length) {
-            setFocused(true);
-          }
-        },
-        onBlur: () => {
-          if (wrapperClassNames.length) {
-            setFocused(false);
-          }
-        },
-        ...props
-      }
-    ));
-  });
-};
+var import_utils = require("@digigov/react-core/Base/utils");
 const BooleanMapper = {
   true: true,
   false: false,
@@ -113,14 +86,7 @@ const Base = import_react.default.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];
   }
@@ -151,8 +117,8 @@ const Base = import_react.default.forwardRef(function Base2({
     });
   }
   let Component = import_mapping.mapping[as] || import_react_native.View;
-  if (wrapperClassNames.length > 0) {
-    Component = Focusable({ wrapperClassNames, Component });
+  if (classNames.find((className2) => className2.match(/__wrapper|__before|__after$/))) {
+    Component = (0, import_utils.wrap)(Component);
   }
   Object.keys(props).forEach((k) => {
     if (k.startsWith("aria")) {
@@ -205,7 +171,7 @@ const Base = import_react.default.forwardRef(function Base2({
         mdHidden,
         lgHidden,
         xlHidden,
-        className: (classNames || []).join(" ")
+        className
       })
     },
     children

package/cjs/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAwC;AACxC,0BAAsC;AACtC,qBAAwB;AAExB,kBAAiB;AACjB,mBAAkC;AAMlC,MAAM,mBAAmB,CAAC,EAAC,YAAY,SAAS,GAAG,MAAK,MAAI;AAC1D,QAAM,oBAAoB,UAAU,WAAW,IAAI,SAAK,GAAG,GAAG,SAAS,EAAE,KAAK,GAAG,IAAG;AACpF,SAAO,6BAAAA,QAAA,cAAC,4BAAK,eAAW,YAAAC,SAAK,WAAW,KAAK,GAAG,GAAG,iBAAiB,GAAI,GAAG,OAAO;AACpF;AACA,MAAM,YAAY,CAAC,EAAE,mBAAmB,UAAS,MAAK;AACpD,SAAO,aAAAD,QAAM,WAAW,SAASE,WAAU,OAAO,KAAI;AACpD,UAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,WAAO,6BAAAF,QAAA,cAAC,oBAAiB,YAAY,mBAAmB,WACtD,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,MAAM;AACb,cAAI,kBAAkB,QAAQ;AAC5B,uBAAW,IAAI;AAAA,UACjB;AAAA,QACF;AAAA,QACA,QAAQ,MAAM;AACZ,cAAI,kBAAkB,QAAQ;AAC5B,uBAAW,KAAK;AAAA,UAClB;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN,CACF;AAAA,EACF,CAAC;AACH;AACA,MAAM,gBAAgB;AAAA,EACpB,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,EACN,IAAI;AACN;AACO,MAAM,OAAsB,aAAAA,QAAM,WAAW,SAASG,MAAK;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,GAAG;AACL,GAAG,KAAK;AACN,QAAM,oBAA8B,CAAC;AAErC,QAAM,cAAc,WAAW,MAAM,GAAG,KAAK,CAAC,GAC7C,OAAO,CAAC,QAAQ;AACf,QAAI,IAAI,SAAS,WAAW,GAAE;AAC5B,wBAAkB,KAAK,GAAG;AAC1B,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,CAAC;AAED,MAAI,OAAO,aAAa,UAAU;AAChC,eAAW,CAAC,QAAQ;AAAA,EACtB;AACA,MAAI,MAAM,QAAQ,QAAQ,GAAG;AAC3B,UAAM,iBAAiB,YAAY,IAAI,CAACC,eAAc,GAAGA,UAAS,QAAQ,EAAE,KAAK,GAAG;AACpF,eAAW,SAAS,IAAI,CAAC,OAAO,UAAU;AACxC,UAAG,MAAM,QAAQ,KAAK,GAAG;AACvB,eAAO,MAAM,IAAI,CAACC,QAAOC,WAAU;AACjC,cAAI,OAAOD,WAAU,UAAU;AAC7B,mBACE,6BAAAL,QAAA,cAAC,4BAAK,KAAKM,QAAO,WAAW,kBAC1BD,MACH;AAAA,UAEJ;AACA,iBAAOA;AAAA,QACT,CAAC;AAAA,MACH,WAAU,OAAO,UAAU,UAAU;AACnC,eACE,6BAAAL,QAAA;AAAA,UAAC;AAAA;AAAA,YAAK,KAAK;AAAA,YAAO,WAAW;AAAA,YAC1B,GAAG,MAAM,WAAW;AAAA,cACnB,SAAS,MAAM;AAAA,YACjB;AAAA;AAAA,UAEC;AAAA,QACH;AAAA,MAEJ;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AACA,MAAI,YAAY,uBAAQ,EAAiC,KAAK;AAE9D,MAAG,kBAAkB,SAAS,GAAE;AAC9B,gBAAY,UAAU,EAAC,mBAAmB,UAAS,CAAC;AAAA,EACtD;AACA,SAAO,KAAK,KAAK,EAAE,QAAQ,CAAC,MAAI;AAC9B,QAAG,EAAE,WAAW,MAAM,GAAE;AACtB,UAAG,cAAc,MAAM,CAAC,CAAC,MAAM,QAAU;AACvC,cAAM,CAAC,IAAI,cAAc,MAAM,CAAC,CAAC;AAAA,MACnC;AAAA,IACF;AAAA,EACF,CAAC;AACD,SACI,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,iBAAe,iBAAiB,UAAS,QAAQ,iBAAiB,OAAM,OAAM;AAAA,MAC9E,eACE,gCAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,cAAa,CAAC,GAAG,KAAK,GAAG;AAAA,MACvC,CAAC;AAAA;AAAA,IAGF;AAAA,EACH;AAGN,CAAC;AAED,IAAO,uBAAQ;",
-  "names": ["React", "clsx", "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": ["React", "Base", "className", "child", "index"]
 }

package/cjs/Base/mapping/index.js

@@ -36,24 +36,12 @@ var import_Input = __toESM(require("./compat/Input"));
 var import_details = __toESM(require("./compat/details"));
 var import_react_native_svg = __toESM(require("react-native-svg"));
 var import_expo_router = require("expo-router");
-var import_FormContext = require("@digigov/form/FormContext");
 var import_ol = require("./compat/ol");
-const Button = (props) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react_native.Pressable, { onPress: props.onClick, hitSlop: 10, ...props });
-};
-const SubmitButton = (props) => {
-  const formContext = (0, import_react.useContext)(import_FormContext.FormContext);
-  return /* @__PURE__ */ import_react.default.createElement(Button, { ...props, onClick: formContext?.submit });
-};
+var import_button = require("./compat/button");
 const mapping = {
   a: import_expo_router.Link,
   img: import_react_native.Image,
-  button: import_react.default.forwardRef(function CompatButton(props, ref) {
-    if (props.type === "submit") {
-      return /* @__PURE__ */ import_react.default.createElement(SubmitButton, { ref, ...props });
-    }
-    return /* @__PURE__ */ import_react.default.createElement(Button, { ref, ...props });
-  }),
+  button: import_button.Button,
   input: import_Input.default,
   textarea: import_react.default.forwardRef(function TextAreaInput(props, ref) {
     return /* @__PURE__ */ import_react.default.createElement(import_react_native.TextInput, { ref, multiline: true, scrollEnabled: true, ...props });

package/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAwD;AACxD,mBAAkC;AAClC,mBAAsB;AACtB,qBAA0B;AAC1B,8BAAoD;AACpD,yBAAqB;AACrB,yBAA4B;AAE5B,gBAAiB;AAOjB,MAAM,SAAS,CAAC,UAAU;AACxB,SAAO,6BAAAA,QAAA,cAAC,iCAAU,SAAS,MAAM,SAAS,SAAS,IAAK,GAAG,OAAO;AACpE;AACA,MAAM,eAAe,CAAC,UAAU;AAC9B,QAAM,kBAAc,yBAAW,8BAAW;AAC1C,SAAO,6BAAAA,QAAA,cAAC,UAAQ,GAAG,OAAO,SAAS,aAAa,QAAQ;AAC1D;AACO,MAAM,UAAuB;AAAA,EAClC,GAAG;AAAA,EACH,KAAK;AAAA,EACL,QAAQ,aAAAA,QAAM,WAAW,SAAS,aAAa,OAAM,KAAK;AACxD,QAAG,MAAM,SAAS,UAAU;AAC1B,aAAO,6BAAAA,QAAA,cAAC,gBAAa,KAAW,GAAG,OAAO;AAAA,IAC5C;AACA,WAAO,6BAAAA,QAAA,cAAC,UAAO,KAAW,GAAG,OAAO;AAAA,EACtC,CAAC;AAAA,EACD,OAAO,aAAAC;AAAA,EACP,UAAU,aAAAD,QAAM,WAAW,SAAS,cAAc,OAAM,KAAK;AAC3D,WAAO,6BAAAA,QAAA,cAAC,iCAAU,KAAU,WAAW,MAAM,eAAe,MAAO,GAAG,OAAO;AAAA,EAC/E,CAAC;AAAA,EACD,SAAS,eAAAE;AAAA,EACT,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,KAAK,wBAAAC;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,GAAG;AAAA,EACH,SAAS;AACX;",
-  "names": ["React", "BaseInput", "CompatDetails", "Svg"]
+  "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;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAwD;AACxD,mBAAkC;AAClC,mBAAsB;AACtB,qBAA0B;AAC1B,8BAAoD;AACpD,yBAAqB;AAErB,gBAAiB;AACjB,oBAAuB;AAQhB,MAAM,UAAuB;AAAA,EAClC,GAAG;AAAA,EACH,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,OAAO,aAAAA;AAAA,EACP,UAAU,aAAAC,QAAM,WAAW,SAAS,cAAc,OAAM,KAAK;AAC3D,WAAO,6BAAAA,QAAA,cAAC,iCAAU,KAAU,WAAW,MAAM,eAAe,MAAO,GAAG,OAAO;AAAA,EAC/E,CAAC;AAAA,EACD,SAAS,eAAAC;AAAA,EACT,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,KAAK,wBAAAC;AAAA,EACL,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,GAAG;AAAA,EACH,SAAS;AACX;",
+  "names": ["BaseInput", "React", "CompatDetails", "Svg"]
 }

package/cjs/Base/utils/index.js

@@ -27,10 +27,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var utils_exports = {};
 __export(utils_exports, {
-  basePropGenerator: () => basePropGenerator
+  basePropGenerator: () => basePropGenerator,
+  wrap: () => wrap
 });
 module.exports = __toCommonJS(utils_exports);
 var import_clsx = __toESM(require("clsx"));
+var import_react = __toESM(require("react"));
+var import_react_native = require("react-native");
 const basePropGenerator = ({
   margin,
   marginTop,
@@ -110,8 +113,57 @@ const basePropGenerator = ({
   "ds-hidden-lg": !!lgHidden,
   "ds-hidden-xl": !!xlHidden
 });
+const WrapperContext = import_react.default.createContext((cls) => {
+  return cls;
+});
+const Wrapper = ({ children }) => {
+  const [className, setClassName] = (0, import_react.useState)("");
+  return /* @__PURE__ */ import_react.default.createElement(WrapperContext.Provider, { value: setClassName }, /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { className, focusable: false }, children));
+};
+const wrap = (Component) => {
+  const WrappedComponent = import_react.default.forwardRef(({ className, onBlur, onFocus, ...props }, ref) => {
+    const setClassName = (0, import_react.useContext)(WrapperContext);
+    const wrapperClassNames = [];
+    const beforeClassNames = [];
+    const afterClassNames = [];
+    const focusedWrapperClassNames = [];
+    const classNames = (0, import_react.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__ */ import_react.default.createElement(import_react.default.Fragment, null, beforeClassNames.length ? /* @__PURE__ */ import_react.default.createElement(import_react_native.View, { focusable: false, className: beforeClassNames.join(" ") }) : "", /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement(import_react_native.View, { focusable: false, className: afterClassNames.join(" ") }) : "");
+  });
+  return import_react.default.forwardRef(function Wrapped({ ...props }, ref) {
+    return /* @__PURE__ */ import_react.default.createElement(Wrapper, null, /* @__PURE__ */ import_react.default.createElement(WrappedComponent, { ...props, ref }));
+  });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  basePropGenerator
+  basePropGenerator,
+  wrap
 });
 //# sourceMappingURL=utils.js.map

package/cjs/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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",
-  "names": ["clsx"]
+  "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": ["clsx", "React"]
 }

package/cjs/CheckboxItem/index.js

@@ -35,6 +35,7 @@ var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_Base = __toESM(require("@digigov/react-core/Base"));
 var import_ChoiceDividerText = __toESM(require("@digigov/react-core/ChoiceDividerText"));
+var import_CheckboxItemInput = __toESM(require("@digigov/react-core/CheckboxItemInput"));
 var import_LabelContainer = __toESM(require("@digigov/react-core/LabelContainer"));
 const CheckboxItem = import_react.default.forwardRef(function CheckboxItem2({ name, value, dividerText, className, disabled, children, ...props }, ref) {
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, dividerText && /* @__PURE__ */ import_react.default.createElement(import_ChoiceDividerText.default, null, dividerText), /* @__PURE__ */ import_react.default.createElement(
@@ -54,21 +55,7 @@ const CheckboxItem = import_react.default.forwardRef(function CheckboxItem2({ na
         })
       },
       children,
-      /* @__PURE__ */ import_react.default.createElement(
-        import_Base.default,
-        {
-          as: "input",
-          ref,
-          type: "checkbox",
-          name,
-          value,
-          className: (0, import_clsx.default)({
-            "ds-checkboxes__input": true
-          }),
-          disabled,
-          ...props
-        }
-      )
+      /* @__PURE__ */ import_react.default.createElement(import_CheckboxItemInput.default, { ref, name, value, disabled, ...props })
     )
   ));
 });

package/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,kBAAgC;AAChC,+BAA8B;AAC9B,4BAA2B;AAepB,MAAM,eAAe,aAAAA,QAAM,WAGhC,SAASC,cACT,EAAE,MAAM,OAAO,aAAa,WAAW,UAAU,UAAU,GAAG,MAAM,GACpE,KACA;AACA,SACE,6BAAAD,QAAA,2BAAAA,QAAA,gBACG,eAAe,6BAAAA,QAAA,cAAC,yBAAAE,SAAA,MAAmB,WAAY,GAChD,6BAAAF,QAAA;AAAA,IAAC,YAAAG;AAAA,IAAA;AAAA,MAAK,IAAG;AAAA,MACP,eAAW,YAAAC,SAAK,WAAW;AAAA,QACzB,uBAAuB;AAAA,MACzB,CAAC;AAAA;AAAA,IAED,6BAAAJ,QAAA;AAAA,MAAC,sBAAAK;AAAA,MAAA;AAAA,QACC,eAAW,YAAAD,SAAK;AAAA,UACd,wBAAwB;AAAA,UACxB,kCAAkC;AAAA,QACpC,CAAC;AAAA;AAAA,MAEA;AAAA,MACD,6BAAAJ,QAAA;AAAA,QAAC,YAAAG;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH;AAAA,UACA,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,eAAW,YAAAC,SAAK;AAAA,YACd,wBAAwB;AAAA,UAC1B,CAAC;AAAA,UACD;AAAA,UACC,GAAG;AAAA;AAAA,MACN;AAAA,IACF;AAAA,EACF,CACF;AAEJ,CAAC;AAED,IAAO,uBAAQ;",
-  "names": ["React", "CheckboxItem", "ChoiceDividerText", "Base", "clsx", "LabelContainer"]
+  "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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,kBAAiB;AACjB,kBAAgC;AAChC,+BAA8B;AAC9B,+BAA8B;AAC9B,4BAA2B;AAepB,MAAM,eAAe,aAAAA,QAAM,WAGhC,SAASC,cACT,EAAE,MAAM,OAAO,aAAa,WAAW,UAAU,UAAU,GAAG,MAAM,GACpE,KACA;AACA,SACE,6BAAAD,QAAA,2BAAAA,QAAA,gBACG,eAAe,6BAAAA,QAAA,cAAC,yBAAAE,SAAA,MAAmB,WAAY,GAChD,6BAAAF,QAAA;AAAA,IAAC,YAAAG;AAAA,IAAA;AAAA,MAAK,IAAG;AAAA,MACP,eAAW,YAAAC,SAAK,WAAW;AAAA,QACzB,uBAAuB;AAAA,MACzB,CAAC;AAAA;AAAA,IAED,6BAAAJ,QAAA;AAAA,MAAC,sBAAAK;AAAA,MAAA;AAAA,QACC,eAAW,YAAAD,SAAK;AAAA,UACd,wBAAwB;AAAA,UACxB,kCAAkC;AAAA,QACpC,CAAC;AAAA;AAAA,MAEA;AAAA,MACD,6BAAAJ,QAAA,cAAC,yBAAAM,SAAA,EAAkB,KAAU,MAAY,OAAc,UAAqB,GAAG,OAAO;AAAA,IACxF;AAAA,EACF,CACF;AAEJ,CAAC;AAED,IAAO,uBAAQ;",
+  "names": ["React", "CheckboxItem", "ChoiceDividerText", "Base", "clsx", "LabelContainer", "CheckboxItemInput"]
 }