@trilogy-ds/react 0.0.3-beta-v4 → 0.0.3-fix-timepicker

package/lib/components/radio/list/RadioList.js

@@ -1,23 +1,36 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import { is } from '../../../services';
-import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
+import { ComponentName } from '../../../components/enumsComponentsName';
 import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers';
 import { getJustifiedClassName } from '../../../objects';
+import { is } from '../../../services';
+import { isRequiredChild } from '../../../helpers/require';
+import clsx from 'clsx';
+import * as React from 'react';
+import { Text, TextMarkup } from '../../../components/text';
+import { TypographyColor } from '../../../objects/Typography';
 /**
- * Radio List Component
- * @param children {ReactNode} RadioList children
+ * RadioList Component
+ * @param children {ReactNode} CheckboxList children
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param align {boolean} align radios
- * @param verticalDesktop {boolean} Verical radios
- * @param horizontalMobile {boolean} espect mobile screen
+ * @param verticalDesktop {boolean} Vertical radios
+ * @param horizontalMobile {boolean} Expect mobile screen
+ * @param accessibilityLabelledBy {string} aria-labelledby attribute
  */
-var RadioList = function (_a) {
-    var className = _a.className, id = _a.id, align = _a.align, horizontalMobile = _a.horizontalMobile, verticalDesktop = _a.verticalDesktop, others = __rest(_a, ["className", "id", "align", "horizontalMobile", "verticalDesktop"]);
+var RadioList = React.forwardRef(function (_a, ref) {
+    var className = _a.className, id = _a.id, align = _a.align, horizontalMobile = _a.horizontalMobile, verticalDesktop = _a.verticalDesktop, accessibilityLabelledBy = _a.accessibilityLabelledBy, children = _a.children, label = _a.label, testId = _a.testId, others = __rest(_a, ["className", "id", "align", "horizontalMobile", "verticalDesktop", "accessibilityLabelledBy", "children", "label", "testId"]);
     var styled = useTrilogyContext().styled;
-    return (React.createElement("div", __assign({ id: id, className: hashClass(styled, clsx('radios', className, align && is(getJustifiedClassName(align)), horizontalMobile && is('horizontal-mobile'), verticalDesktop && is('vertical-desktop'))) }, others)));
-};
+    var groupLabelClasses = hashClass(styled, 'group-label');
+    return (React.createElement(React.Fragment, null,
+        label && (React.createElement("p", { className: groupLabelClasses },
+            label,
+            isRequiredChild(children) && (React.createElement(Text, { markup: TextMarkup.SPAN, typo: TypographyColor.TEXT_ERROR },
+                ' ',
+                "*")))),
+        React.createElement("div", __assign({ "data-testid": testId, ref: ref, id: id, role: 'radiogroup', "aria-labelledby": accessibilityLabelledBy, "aria-required": isRequiredChild(children) ? 'true' : undefined, className: hashClass(styled, clsx('radios', className, align && is(getJustifiedClassName(align)), horizontalMobile && is('horizontal-mobile'), verticalDesktop && is('vertical-desktop'))) }, others), children)));
+});
+RadioList.displayName = ComponentName.RadioList;
 export default RadioList;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9MaXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9yYWRpby9saXN0L1JhZGlvTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDL0IsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUVqRDs7Ozs7Ozs7R0FRRztBQUNILElBQU0sU0FBUyxHQUFHLFVBQUMsRUFPQztJQU5sQixJQUFBLFNBQVMsZUFBQSxFQUNULEVBQUUsUUFBQSxFQUNGLEtBQUssV0FBQSxFQUNMLGdCQUFnQixzQkFBQSxFQUNoQixlQUFlLHFCQUFBLEVBQ1osTUFBTSxjQU5RLG1FQU9sQixDQURVO0lBRUQsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFdEMsT0FBTyxDQUNMLHNDQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLFNBQVMsQ0FDbEIsTUFBTSxFQUNOLElBQUksQ0FDRixRQUFRLEVBQ1IsU0FBUyxFQUNULEtBQUssSUFBSSxFQUFFLENBQUMscUJBQXFCLENBQUMsS0FBSyxDQUFDLENBQUMsRUFDekMsZ0JBQWdCLElBQUksRUFBRSxDQUFDLG1CQUFtQixDQUFDLEVBQzNDLGVBQWUsSUFBSSxFQUFFLENBQUMsa0JBQWtCLENBQUMsQ0FDMUMsQ0FDRixJQUNHLE1BQU0sRUFDVixDQUNILENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLFNBQVMsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9MaXN0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9yYWRpby9saXN0L1JhZGlvTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDakQsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUMvQixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDbkQsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDcEQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBRXREOzs7Ozs7Ozs7R0FTRztBQUNILElBQU0sU0FBUyxHQUFHLEtBQUssQ0FBQyxVQUFVLENBQ2hDLFVBQUMsRUFBd0gsRUFBRSxHQUFHO0lBQTNILElBQUEsU0FBUyxlQUFBLEVBQUUsRUFBRSxRQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsZ0JBQWdCLHNCQUFBLEVBQUUsZUFBZSxxQkFBQSxFQUFFLHVCQUF1Qiw2QkFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLEtBQUssV0FBQSxFQUFFLE1BQU0sWUFBQSxFQUFLLE1BQU0sY0FBdEgsNkhBQXdILENBQUY7SUFDN0csSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxpQkFBaUIsR0FBRyxTQUFTLENBQUMsTUFBTSxFQUFFLGFBQWEsQ0FBQyxDQUFBO0lBRTFELE9BQU8sQ0FDTDtRQUNHLEtBQUssSUFBSSxDQUNSLDJCQUFHLFNBQVMsRUFBRSxpQkFBaUI7WUFDNUIsS0FBSztZQUNMLGVBQWUsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUM1QixvQkFBQyxJQUFJLElBQUMsTUFBTSxFQUFFLFVBQVUsQ0FBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLGVBQWUsQ0FBQyxVQUFVO2dCQUM1RCxHQUFHO29CQUNDLENBQ1IsQ0FDQyxDQUNMO1FBQ0QscURBQ2UsTUFBTSxFQUNuQixHQUFHLEVBQUUsR0FBRyxFQUNSLEVBQUUsRUFBRSxFQUFFLEVBQ04sSUFBSSxFQUFDLFlBQVkscUJBQ0EsdUJBQXVCLG1CQUN6QixlQUFlLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsU0FBUyxFQUM3RCxTQUFTLEVBQUUsU0FBUyxDQUNsQixNQUFNLEVBQ04sSUFBSSxDQUNGLFFBQVEsRUFDUixTQUFTLEVBQ1QsS0FBSyxJQUFJLEVBQUUsQ0FBQyxxQkFBcUIsQ0FBQyxLQUFLLENBQUMsQ0FBQyxFQUN6QyxnQkFBZ0IsSUFBSSxFQUFFLENBQUMsbUJBQW1CLENBQUMsRUFDM0MsZUFBZSxJQUFJLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxDQUMxQyxDQUNGLElBQ0csTUFBTSxHQUVULFFBQVEsQ0FDTCxDQUNMLENBQ0osQ0FBQTtBQUNILENBQUMsQ0FDRixDQUFBO0FBRUQsU0FBUyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFBO0FBQy9DLGVBQWUsU0FBUyxDQUFBIn0=

package/lib/components/radio/list/RadioList.native.d.ts

@@ -1,13 +1,10 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { RadioListProps } from './RadioListProps';
-import { ComponentName } from '../../../components/enumsComponentsName';
 /**
  * RadioList Native Component
  * @param children {ReactNode} RadioList children
  * @param autolayout {boolean} Apply auto-layout rules
+ * @param label {string} RadioList label
  */
-declare const RadioList: {
-    ({ children }: RadioListProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const RadioList: React.ForwardRefExoticComponent<RadioListProps & React.RefAttributes<import("react-native").View>>;
 export default RadioList;

package/lib/components/radio/list/RadioList.native.js

@@ -1,9 +1,13 @@
 import { __assign } from "tslib";
-import * as React from 'react';
 import { AutoLayoutWrapper } from '../../../components/autolayout';
-import { SpacerSize } from '../../../components/spacer';
 import { SpacingMatrixMode } from '../../../components/autolayout/SpacingMatrix';
 import { ComponentName } from '../../../components/enumsComponentsName';
+import { SpacerSize } from '../../../components/spacer';
+import { Text } from '../../../components/text';
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { isRequiredChild } from '../../../helpers/require';
+import { TypographyColor } from '../../../objects/Typography';
 var THREE = SpacerSize.THREE, TWO = SpacerSize.TWO;
 var INSERT_SPACE_BETWEEN = SpacingMatrixMode.INSERT_SPACE_BETWEEN;
 var SPACING_MATRIX = [
@@ -15,11 +19,22 @@ var SPACING_MATRIX = [
  * RadioList Native Component
  * @param children {ReactNode} RadioList children
  * @param autolayout {boolean} Apply auto-layout rules
+ * @param label {string} RadioList label
  */
-var RadioList = function (_a) {
-    var children = _a.children;
-    return React.createElement(AutoLayoutWrapper, __assign({}, { autolayout: SPACING_MATRIX, children: children }));
-};
+var RadioList = React.forwardRef(function (_a, ref) {
+    var children = _a.children, label = _a.label;
+    var styles = StyleSheet.create({
+        label: {
+            marginBottom: 8,
+        },
+    });
+    return (React.createElement(AutoLayoutWrapper, __assign({}, { autolayout: SPACING_MATRIX }),
+        label && (React.createElement(Text, { style: styles.label },
+            label,
+            " ",
+            isRequiredChild(children) && React.createElement(Text, { typo: TypographyColor.TEXT_ERROR }, "*"))),
+        children));
+});
 RadioList.displayName = ComponentName.RadioList;
 export default RadioList;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9MaXN0Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcmFkaW8vbGlzdC9SYWRpb0xpc3QubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0seUJBQXlCLENBQUE7QUFDM0QsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBR2hELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHVDQUF1QyxDQUFBO0FBRXpFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUV4RCxJQUFBLEtBQUssR0FBVSxVQUFVLE1BQXBCLEVBQUUsR0FBRyxHQUFLLFVBQVUsSUFBZixDQUFlO0FBQ3pCLElBQUEsb0JBQW9CLEdBQUssaUJBQWlCLHFCQUF0QixDQUFzQjtBQUVsRCxJQUFNLGNBQWMsR0FBa0I7SUFDcEMsQ0FBQyxvQkFBb0IsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLEdBQUcsQ0FBQztJQUMvQyxDQUFDLG9CQUFvQixFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsR0FBRyxDQUFDO0lBQy9DLENBQUMsb0JBQW9CLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLENBQUM7Q0FDaEQsQ0FBQTtBQUVEOzs7O0dBSUc7QUFDSCxJQUFNLFNBQVMsR0FBRyxVQUFDLEVBQTRCO1FBQTFCLFFBQVEsY0FBQTtJQUMzQixPQUFPLG9CQUFDLGlCQUFpQixlQUFLLEVBQUUsVUFBVSxFQUFFLGNBQWMsRUFBRSxRQUFRLFVBQUEsRUFBRSxFQUFJLENBQUE7QUFDNUUsQ0FBQyxDQUFBO0FBRUQsU0FBUyxDQUFDLFdBQVcsR0FBRyxhQUFhLENBQUMsU0FBUyxDQUFBO0FBRS9DLGVBQWUsU0FBUyxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9MaXN0Lm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcmFkaW8vbGlzdC9SYWRpb0xpc3QubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0seUJBQXlCLENBQUE7QUFDM0QsT0FBTyxFQUFpQixpQkFBaUIsRUFBRSxNQUFNLHVDQUF1QyxDQUFBO0FBQ3hGLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0scUJBQXFCLENBQUE7QUFDaEQsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ3hDLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDekMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG1CQUFtQixDQUFBO0FBQ25ELE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUU5QyxJQUFBLEtBQUssR0FBVSxVQUFVLE1BQXBCLEVBQUUsR0FBRyxHQUFLLFVBQVUsSUFBZixDQUFlO0FBQ3pCLElBQUEsb0JBQW9CLEdBQUssaUJBQWlCLHFCQUF0QixDQUFzQjtBQUVsRCxJQUFNLGNBQWMsR0FBa0I7SUFDcEMsQ0FBQyxvQkFBb0IsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLEdBQUcsQ0FBQztJQUMvQyxDQUFDLG9CQUFvQixFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsR0FBRyxDQUFDO0lBQy9DLENBQUMsb0JBQW9CLEVBQUUsT0FBTyxFQUFFLE9BQU8sRUFBRSxLQUFLLENBQUM7Q0FDaEQsQ0FBQTtBQUVEOzs7OztHQUtHO0FBQ0gsSUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBcUMsVUFBQyxFQUFtQixFQUFFLEdBQUc7UUFBdEIsUUFBUSxjQUFBLEVBQUUsS0FBSyxXQUFBO0lBQ3ZGLElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDN0IsS0FBSyxFQUFFO1lBQ0wsWUFBWSxFQUFFLENBQUM7U0FDaEI7S0FDRixDQUFDLENBQUE7SUFFSixPQUFPLENBQ0wsb0JBQUMsaUJBQWlCLGVBQUssRUFBRSxVQUFVLEVBQUUsY0FBYyxFQUFFO1FBQ2xELEtBQUssSUFBSSxDQUNSLG9CQUFDLElBQUksSUFBQyxLQUFLLEVBQUUsTUFBTSxDQUFDLEtBQUs7WUFBRyxLQUFLOztZQUFHLGVBQWUsQ0FBQyxRQUFRLENBQUMsSUFBSSxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLGVBQWUsQ0FBQyxVQUFVLFFBQVUsQ0FBUSxDQUMxSDtRQUNBLFFBQVEsQ0FDUyxDQUNyQixDQUFBO0FBQ0gsQ0FBQyxDQUFDLENBQUE7QUFFRixTQUFTLENBQUMsV0FBVyxHQUFHLGFBQWEsQ0FBQyxTQUFTLENBQUE7QUFFL0MsZUFBZSxTQUFTLENBQUEifQ==

package/lib/components/radio/list/RadioListProps.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
-import { Alignable, AlignableValues } from '../../../objects';
+import { View } from 'react-native';
 import type { DividerProps } from '../../../components/divider/DividerProps';
 import type { RadioProps } from '../../../components/radio/RadioProps';
+import { AlignableProps, Dev } from '../../../objects';
 import { CommonProps } from '../../../objects/facets/CommonProps';
 type RadioListChildrenTypes = React.ReactElement<RadioProps | DividerProps> | undefined;
 /**
@@ -9,14 +10,18 @@ type RadioListChildrenTypes = React.ReactElement<RadioProps | DividerProps> | un
  */
 export interface RadioListProps {
     children?: RadioListChildrenTypes | RadioListChildrenTypes[];
+    label?: string;
 }
 /**
  * Radio List Web Interface
  */
-export interface RadioListWebProps extends RadioListProps, CommonProps {
-    align?: Alignable | AlignableValues;
+export interface RadioListWebProps extends RadioListProps, CommonProps, Dev {
+    align?: AlignableProps['align'];
     className?: string;
     horizontalMobile?: boolean;
     verticalDesktop?: boolean;
+    accessibilityLabelledBy?: string;
 }
+export type RadioListRef = HTMLDivElement;
+export type RadioListNativeRef = View;
 export {};

package/lib/components/radio/list/RadioListPropsDefaults.js

@@ -6,5 +6,12 @@ export default {
       "JSXElementConstructor<any>>",
       "RadioListChildrenTypes[]"
     ]
+  },
+  "label": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };

package/lib/components/radio/list/RadioListWebPropsDefaults.js

@@ -6,9 +6,19 @@ export default {
       "ALIGNED_CENTER",
       "ALIGNED_START",
       "ALIGNED_END",
+      "ALIGNED_STRETCH",
       "ALIGNED_CENTER",
       "ALIGNED_START",
-      "ALIGNED_END"
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
     ]
   },
   "className": {
@@ -34,6 +44,13 @@ export default {
       "true"
     ]
   },
+  "accessibilityLabelledBy": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "children": {
     "type": "react",
     "values": [
@@ -42,11 +59,25 @@ export default {
       "RadioListChildrenTypes[]"
     ]
   },
+  "label": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "id": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };

package/lib/components/radio/tiles/RadioTiles.d.ts

@@ -1,10 +1,15 @@
-/// <reference types="react" />
-import { RadioTilesProps } from './RadioTilesProps';
+import { RadioTilesProps } from '../../../components/radio/tiles/RadioTilesProps';
+import * as React from 'react';
 /**
- * Columns Item Component - Columns Child
- * @param size {ColumnsSize} Size 1-12
+ * RadioTiles
+ * @param id {string}
+ * @param children {ReactNode}
+ * @param align { Alignable | AlignableValues} align content
+ * @param verticalAlign { Alignable | AlignableValues} align vertical content
+ * @param numberCols {GridSize | GridItemSize} number of columns for grid layout
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
+ * @param accessibilityLabelledBy {string} aria-labelledby attribute
  */
-declare const RadioTiles: ({ id, className, children, align, verticalAlign, ...others }: RadioTilesProps) => JSX.Element;
+declare const RadioTiles: React.ForwardRefExoticComponent<RadioTilesProps & React.RefAttributes<HTMLDivElement>>;
 export default RadioTiles;

package/lib/components/radio/tiles/RadioTiles.js

@@ -1,18 +1,25 @@
 import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import clsx from 'clsx';
-import { hashClass } from '../../../helpers';
+import { ComponentName } from '../../../components/enumsComponentsName';
 import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers';
+import { isRequiredChild } from '../../../helpers/require';
 import { getAlignClassName } from '../../../objects';
 import { is } from '../../../services';
+import clsx from 'clsx';
+import * as React from 'react';
 /**
- * Columns Item Component - Columns Child
- * @param size {ColumnsSize} Size 1-12
+ * RadioTiles
+ * @param id {string}
+ * @param children {ReactNode}
+ * @param align { Alignable | AlignableValues} align content
+ * @param verticalAlign { Alignable | AlignableValues} align vertical content
+ * @param numberCols {GridSize | GridItemSize} number of columns for grid layout
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
+ * @param accessibilityLabelledBy {string} aria-labelledby attribute
  */
-var RadioTiles = function (_a) {
-    var id = _a.id, className = _a.className, children = _a.children, align = _a.align, verticalAlign = _a.verticalAlign, others = __rest(_a, ["id", "className", "children", "align", "verticalAlign"]);
+var RadioTiles = React.forwardRef(function (_a, ref) {
+    var id = _a.id, className = _a.className, children = _a.children, align = _a.align, verticalAlign = _a.verticalAlign, accessibilityLabelledBy = _a.accessibilityLabelledBy, numberCols = _a.numberCols, testId = _a.testId, others = __rest(_a, ["id", "className", "children", "align", "verticalAlign", "accessibilityLabelledBy", "numberCols", "testId"]);
     var styled = useTrilogyContext().styled;
     var alignClass = null;
     if (align) {
@@ -28,9 +35,32 @@ var RadioTiles = function (_a) {
             (getAlignClassName(verticalAlign) === 'aligned-start' && is('aligned-start')) ||
                 (getAlignClassName(verticalAlign) === 'aligned-center' && is('aligned-center')) ||
                 (getAlignClassName(verticalAlign) === 'aligned-end' && is('aligned-end')) ||
+                (getAlignClassName(verticalAlign) === 'aligned-stretch' && is('aligned-stretch')) ||
                 null;
     }
-    return (React.createElement("div", __assign({ id: id, className: hashClass(styled, clsx('radio-tiles', className, align && alignClass, verticalAlign && verticalAlignClass)) }, others), children));
-};
+    var getGridColumnClasses = function () {
+        if (!numberCols)
+            return null;
+        if (typeof numberCols === 'number')
+            return "is-grid-cols-".concat(numberCols);
+        var responsiveClasses = [];
+        if (numberCols.mobile)
+            responsiveClasses.push("is-grid-cols-mobile-".concat(numberCols.mobile));
+        if (numberCols.tablet)
+            responsiveClasses.push("is-grid-cols-tablet-".concat(numberCols.tablet));
+        if (numberCols.touch)
+            responsiveClasses.push("is-grid-cols-touch-".concat(numberCols.touch));
+        if (numberCols.desktop)
+            responsiveClasses.push("is-grid-cols-desktop-".concat(numberCols.desktop));
+        if (numberCols.widescreen)
+            responsiveClasses.push("is-grid-cols-widescreen-".concat(numberCols.widescreen));
+        if (numberCols.fullhd)
+            responsiveClasses.push("is-grid-cols-fullhd-".concat(numberCols.fullhd));
+        return responsiveClasses.join(' ');
+    };
+    var gridColumnClasses = getGridColumnClasses();
+    return (React.createElement("div", __assign({ "data-testid": testId, ref: ref, id: id, role: 'radiogroup', "aria-labelledby": accessibilityLabelledBy, "aria-required": isRequiredChild(children) ? 'true' : undefined, className: hashClass(styled, clsx('radio-tiles', className, align && alignClass, verticalAlign && verticalAlignClass, gridColumnClasses && 'is-grid', gridColumnClasses && gridColumnClasses)) }, others), children));
+});
+RadioTiles.displayName = ComponentName.RadioTiles;
 export default RadioTiles;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcmFkaW8vdGlsZXMvUmFkaW9UaWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBQzlCLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUV2QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLFlBQVksQ0FBQTtBQUUvQjs7Ozs7R0FLRztBQUNILElBQU0sVUFBVSxHQUFHLFVBQUMsRUFBNkU7SUFBM0UsSUFBQSxFQUFFLFFBQUEsRUFBRSxTQUFTLGVBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxhQUFhLG1CQUFBLEVBQUssTUFBTSxjQUExRCx5REFBNEQsQ0FBRjtJQUNwRSxJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUN0QyxJQUFJLFVBQVUsR0FBRyxJQUFJLENBQUE7SUFDckIsSUFBSSxLQUFLLEVBQUU7UUFDVCxVQUFVO1lBQ1IsQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLENBQUMsS0FBSyxlQUFlLElBQUksRUFBRSxDQUFDLGlCQUFpQixDQUFDLENBQUM7Z0JBQ3ZFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssZ0JBQWdCLElBQUksRUFBRSxDQUFDLGtCQUFrQixDQUFDLENBQUM7Z0JBQ3pFLENBQUMsaUJBQWlCLENBQUMsS0FBSyxDQUFDLEtBQUssYUFBYSxJQUFJLEVBQUUsQ0FBQyxlQUFlLENBQUMsQ0FBQztnQkFDbkUsSUFBSSxDQUFBO0tBQ1A7SUFDRCxJQUFJLGtCQUFrQixHQUFHLElBQUksQ0FBQTtJQUM3QixJQUFJLGFBQWEsRUFBRTtRQUNqQixrQkFBa0I7WUFDaEIsQ0FBQyxpQkFBaUIsQ0FBQyxhQUFhLENBQUMsS0FBSyxlQUFlLElBQUksRUFBRSxDQUFDLGVBQWUsQ0FBQyxDQUFDO2dCQUM3RSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxLQUFLLGdCQUFnQixJQUFJLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO2dCQUMvRSxDQUFDLGlCQUFpQixDQUFDLGFBQWEsQ0FBQyxLQUFLLGFBQWEsSUFBSSxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUM7Z0JBQ3pFLElBQUksQ0FBQTtLQUNQO0lBRUQsT0FBTyxDQUNMLHNDQUNFLEVBQUUsRUFBRSxFQUFFLEVBQ04sU0FBUyxFQUFFLFNBQVMsQ0FDbEIsTUFBTSxFQUNOLElBQUksQ0FBQyxhQUFhLEVBQUUsU0FBUyxFQUFFLEtBQUssSUFBSSxVQUFVLEVBQUUsYUFBYSxJQUFJLGtCQUFrQixDQUFDLENBQ3pGLElBQ0csTUFBTSxHQUVULFFBQVEsQ0FDTCxDQUNQLENBQUE7QUFDSCxDQUFDLENBQUE7QUFFRCxlQUFlLFVBQVUsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcmFkaW8vdGlsZXMvUmFkaW9UaWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUVoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDN0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDbkQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxZQUFZLENBQUE7QUFDL0IsT0FBTyxJQUFJLE1BQU0sTUFBTSxDQUFBO0FBQ3ZCLE9BQU8sS0FBSyxLQUFLLE1BQU0sT0FBTyxDQUFBO0FBRTlCOzs7Ozs7Ozs7O0dBVUc7QUFDSCxJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNqQyxVQUNFLEVBQXlHLEVBQ3pHLEdBQUc7SUFERCxJQUFBLEVBQUUsUUFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLEtBQUssV0FBQSxFQUFFLGFBQWEsbUJBQUEsRUFBRSx1QkFBdUIsNkJBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUUsTUFBTSxZQUFBLEVBQUssTUFBTSxjQUF2Ryw0R0FBeUcsQ0FBRjtJQUcvRixJQUFBLE1BQU0sR0FBSyxpQkFBaUIsRUFBRSxPQUF4QixDQUF3QjtJQUV0QyxJQUFJLFVBQVUsR0FBRyxJQUFJLENBQUE7SUFFckIsSUFBSSxLQUFLLEVBQUU7UUFDVCxVQUFVO1lBQ1IsQ0FBQyxpQkFBaUIsQ0FBQyxLQUFLLENBQUMsS0FBSyxlQUFlLElBQUksRUFBRSxDQUFDLGlCQUFpQixDQUFDLENBQUM7Z0JBQ3ZFLENBQUMsaUJBQWlC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

package/lib/components/radio/tiles/RadioTiles.native.d.ts

@@ -0,0 +1,13 @@
+import { RadioTilesProps } from '../../../components/radio/tiles/RadioTilesProps';
+import React from 'react';
+import { View } from 'react-native';
+/**
+ * RadioTiles
+ * @param id {string}
+ * @param children {ReactNode}
+ * @param align { Alignable | AlignableValues} align content
+ * @param verticalAlign { Alignable | AlignableValues} align vertical content
+ * @param numberCols {GridSize | GridItemSize} number of columns for grid layout
+ */
+declare const RadioTiles: React.ForwardRefExoticComponent<RadioTilesProps & React.RefAttributes<View>>;
+export default RadioTiles;

package/lib/components/radio/tiles/RadioTiles.native.js

@@ -0,0 +1,63 @@
+import { __assign, __rest } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
+import { SpacerSize } from '../../../components/spacer';
+import { Alignable } from '../../../objects/facets/Alignable';
+import React, { useCallback, useMemo } from 'react';
+import { FlatList, StyleSheet, View } from 'react-native';
+import { RadioTilesContext } from './context';
+/**
+ * RadioTiles
+ * @param id {string}
+ * @param children {ReactNode}
+ * @param align { Alignable | AlignableValues} align content
+ * @param verticalAlign { Alignable | AlignableValues} align vertical content
+ * @param numberCols {GridSize | GridItemSize} number of columns for grid layout
+ */
+var RadioTiles = React.forwardRef(function (_a, ref) {
+    var id = _a.id, children = _a.children, align = _a.align, verticalAlign = _a.verticalAlign, numberCols = _a.numberCols, others = __rest(_a, ["id", "children", "align", "verticalAlign", "numberCols"]);
+    var childArray = useMemo(function () { return React.Children.toArray(children).filter(React.isValidElement); }, [children]);
+    var columnCount = useMemo(function () {
+        if (!numberCols || numberCols === 1)
+            return null;
+        if (typeof numberCols === 'number')
+            return numberCols;
+        if (numberCols.mobile === 1 || numberCols.tablet === 1)
+            return null;
+        return numberCols.mobile || numberCols.tablet;
+    }, [numberCols]);
+    var styles = StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: SpacerSize.TWO,
+            alignItems: (verticalAlign === Alignable.ALIGNED_CENTER && 'center') ||
+                (verticalAlign === Alignable.ALIGNED_START && 'flex-start') ||
+                (verticalAlign === Alignable.ALIGNED_END && 'flex-end') ||
+                undefined,
+            justifyContent: (align === Alignable.ALIGNED_CENTER && 'center') ||
+                (align === Alignable.ALIGNED_START && 'flex-start') ||
+                (align === Alignable.ALIGNED_END && 'flex-end') ||
+                undefined,
+        },
+        columnWrapper: {
+            gap: SpacerSize.TWO,
+            marginBottom: SpacerSize.TWO,
+        },
+    });
+    var renderItem = useCallback(function (_a) {
+        var item = _a.item, index = _a.index;
+        if (!columnCount)
+            return React.createElement(View, { style: { flex: 1 } }, item);
+        var isLastItem = index === childArray.length - 1;
+        var isOddItem = childArray.length % columnCount !== 0 && isLastItem;
+        return (React.createElement(View, { style: {
+                flex: isOddItem ? 0 : 1,
+                width: isOddItem ? "".concat(100 / columnCount, "%") : undefined,
+            } }, item));
+    }, [childArray.length, columnCount]);
+    var keyExtractor = useCallback(function (_, index) { return index.toString(); }, []);
+    return (React.createElement(RadioTilesContext.Provider, { value: { isGrid: columnCount !== null } }, columnCount !== null ? (React.createElement(FlatList, __assign({ id: id, ref: ref, data: childArray, numColumns: columnCount, scrollEnabled: false, renderItem: renderItem, keyExtractor: keyExtractor, columnWrapperStyle: [styles.columnWrapper], style: { overflow: 'visible' } }, others))) : (React.createElement(View, __assign({ ref: ref, id: id, style: [styles.container] }, others), children))));
+});
+RadioTiles.displayName = ComponentName.RadioTiles;
+export default RadioTiles;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlcy5uYXRpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3JhZGlvL3RpbGVzL1JhZGlvVGlsZXMubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtDQUFrQyxDQUFBO0FBRWhFLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQTtBQUNoRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sNEJBQTRCLENBQUE7QUFDdEQsT0FBTyxLQUFLLEVBQUUsRUFBd0IsV0FBVyxFQUFFLE9BQU8sRUFBRSxNQUFNLE9BQU8sQ0FBQTtBQUN6RSxPQUFPLEVBQUUsUUFBUSxFQUFFLFVBQVUsRUFBRSxJQUFJLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFDekQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBRTdDOzs7Ozs7O0dBT0c7QUFDSCxJQUFNLFVBQVUsR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNqQyxVQUFDLEVBQTZELEVBQUUsR0FBRztJQUFoRSxJQUFBLEVBQUUsUUFBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLEtBQUssV0FBQSxFQUFFLGFBQWEsbUJBQUEsRUFBRSxVQUFVLGdCQUFBLEVBQUssTUFBTSxjQUEzRCwwREFBNkQsQ0FBRjtJQUMxRCxJQUFNLFVBQVUsR0FBRyxPQUFPLENBQUMsY0FBTSxPQUFBLEtBQUssQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsY0FBYyxDQUFDLEVBQTdELENBQTZELEVBQUUsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFBO0lBRTNHLElBQU0sV0FBVyxHQUFHLE9BQU8sQ0FBQztRQUMxQixJQUFJLENBQUMsVUFBVSxJQUFJLFVBQVUsS0FBSyxDQUFDO1lBQUUsT0FBTyxJQUFJLENBQUE7UUFDaEQsSUFBSSxP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

package/lib/components/radio/tiles/RadioTilesProps.d.ts

@@ -1,9 +1,12 @@
 /// <reference types="react" />
-import { AlignableProps } from '../../../objects';
+import { View } from 'react-native';
+import { AlignableProps, Dev } from '../../../objects';
 import { CommonProps } from '../../../objects/facets/CommonProps';
-/**
- * Columns Item Interface
- */
-export interface RadioTilesProps extends AlignableProps, CommonProps {
+import { GridItemSize, GridSize } from '../../../objects/facets/Grid';
+export interface RadioTilesProps extends AlignableProps, CommonProps, Dev {
     children: React.ReactNode;
+    accessibilityLabelledBy?: string;
+    numberCols?: GridSize | GridItemSize;
 }
+export type RadioTilesRef = HTMLDivElement;
+export type RadioTilesNativeRef = View;

package/lib/components/radio/tiles/RadioTilesPropsDefaults.js

@@ -13,6 +13,32 @@ export default {
       "ReactPortal"
     ]
   },
+  "accessibilityLabelledBy": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "numberCols": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "2",
+      "1",
+      "GridSize",
+      "3",
+      "4",
+      "5",
+      "6",
+      "7",
+      "8",
+      "9",
+      "10",
+      "11",
+      "12"
+    ]
+  },
   "align": {
     "type": "enum",
     "values": [
@@ -20,9 +46,19 @@ export default {
       "ALIGNED_CENTER",
       "ALIGNED_START",
       "ALIGNED_END",
+      "ALIGNED_STRETCH",
       "ALIGNED_CENTER",
       "ALIGNED_START",
-      "ALIGNED_END"
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
     ]
   },
   "verticalAlign": {
@@ -32,9 +68,19 @@ export default {
       "ALIGNED_CENTER",
       "ALIGNED_START",
       "ALIGNED_END",
+      "ALIGNED_STRETCH",
       "ALIGNED_CENTER",
       "ALIGNED_START",
-      "ALIGNED_END"
+      "ALIGNED_END",
+      "ALIGNED_STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH",
+      "CENTER",
+      "START",
+      "END",
+      "STRETCH"
     ]
   },
   "id": {
@@ -50,5 +96,12 @@ export default {
       "undefined",
       "string"
     ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
   }
 };

package/lib/components/radio/tiles/context/RadioTilesContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RadioTilesContextProps } from './RadioTilesContextProps';
+export declare const RadioTilesContext: React.Context<RadioTilesContextProps>;

package/lib/components/radio/tiles/context/RadioTilesContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+export var RadioTilesContext = React.createContext({
+    isGrid: false,
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlc0NvbnRleHQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb21wb25lbnRzL3JhZGlvL3RpbGVzL2NvbnRleHQvUmFkaW9UaWxlc0NvbnRleHQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUd6QixNQUFNLENBQUMsSUFBTSxpQkFBaUIsR0FBRyxLQUFLLENBQUMsYUFBYSxDQUF5QjtJQUMzRSxNQUFNLEVBQUUsS0FBSztDQUNkLENBQUMsQ0FBQSJ9

package/lib/components/radio/tiles/context/RadioTilesContextProps.d.ts

@@ -0,0 +1,3 @@
+export interface RadioTilesContextProps {
+    isGrid: boolean;
+}

package/lib/components/radio/tiles/context/RadioTilesContextProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUmFkaW9UaWxlc0NvbnRleHRQcm9wcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvcmFkaW8vdGlsZXMvY29udGV4dC9SYWRpb1RpbGVzQ29udGV4dFByb3BzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIifQ==

package/lib/components/radio/tiles/context/RadioTilesContextPropsDefaults.js

@@ -0,0 +1,9 @@
+export default {
+  "isGrid": {
+    "type": "boolean",
+    "values": [
+      "false",
+      "true"
+    ]
+  }
+};

package/lib/components/radio/tiles/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RadioTilesContext';
+export * from './RadioTilesContextProps';

package/lib/components/radio/tiles/context/index.js

@@ -0,0 +1,3 @@
+export * from './RadioTilesContext';
+export * from './RadioTilesContextProps';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9jb21wb25lbnRzL3JhZGlvL3RpbGVzL2NvbnRleHQvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxxQkFBcUIsQ0FBQTtBQUNuQyxjQUFjLDBCQUEwQixDQUFBIn0=

package/lib/components/radio/tiles/tile/RadioTile.d.ts

@@ -1,10 +1,23 @@
-/// <reference types="react" />
-import { RadioTileProps } from './RadioTileProps';
+import { RadioTileProps } from '../../../../components/radio/tiles/tile/RadioTileProps';
+import React from 'react';
 /**
- * Columns Item Component - Columns Child
- * @param size {ColumnsSize} Size 1-12
+ * radioTile Component
+ * @param checked {boolean} Checked radio
+ * @param disabled {boolean} Disabled
+ * @param readOnly {boolean} readonly radio
+ * @param id {string} Id for button, by default id is generate
+ * @param label {string} Label for radio
+ * @param description {ReactNode} Description for radio
+ * @param onChange {ChangeEvent}
+ * @param name {string} Name for radio
+ * @param value {string} Value for radio
+ * @param icon {IconName} icon for radio
+ * @param horizontal Horizontal radio
+ * @param sticker {string} sticker label
+ * @param stickerVariant {VariantState} Sticker variant
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional css classes (ONLY FOR WEB)
+ * @param required {boolean} Required radio
  */
-declare const RadioTile: ({ checked, className, disabled, readonly, id, label, onChange, name, value, description, icon, horizontal, ...others }: RadioTileProps) => JSX.Element;
+declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps & React.RefAttributes<HTMLDivElement>>;
 export default RadioTile;