@hexure/ui 1.14.10 → 1.14.12

package/dist/cjs/types/components/Checkbox/Checkbox.d.ts

@@ -21,6 +21,8 @@ export interface CheckboxProps extends AccessibleProps {
     isWarningError?: boolean;
     dataSectionName?: string;
     isLabelBold?: boolean;
+    /** Location of the label: "Bottom" or "Right" (default: "Right") */
+    labelLoc?: 'Bottom' | 'Right';
 }
 declare const Checkbox: FC<CheckboxProps>;
 export default Checkbox;

package/dist/cjs/types/components/Checklist/Checklist.d.ts

@@ -4,6 +4,7 @@ interface OptionProps {
     label?: string;
     value: string | number;
     color?: string;
+    dataItemid?: string;
 }
 export interface ChecklistProps extends AccessibleProps {
     disabled?: boolean;

package/dist/cjs/types/components/Radio/Radio.d.ts

@@ -21,6 +21,8 @@ export interface RadioProps extends AccessibleProps {
     isInvalidRedBackground?: boolean;
     isWarningError?: boolean;
     isLabelBold?: boolean;
+    /** Location of the label: "Bottom" or "Right" (default: "Right") */
+    labelLoc?: 'Bottom' | 'Right';
 }
 declare const Radio: FC<RadioProps>;
 export default Radio;

package/dist/esm/index.js

@@ -3561,7 +3561,9 @@ const Wrapper$c = styled.label `
   margin-left: -6px;
   cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
   display: flex;
-  align-items: center;
+  flex-direction: ${props => (props.$labelLoc === 'Bottom' ? 'column' : 'row')};
+  align-items: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'center')};
+  justify-content: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'flex-start')};
   font-size: ${FontSizes.DEFAULT};
   line-height: 1.6em;
   box-sizing: border-box;
@@ -3653,16 +3655,19 @@ const Label$3 = styled.span `
   font-weight: ${props => (props.$isLabelBold ? 'bold' : '400')};
   line-height: 1.6em;
   color: ${props => props.color || Colors.BLACK.Hex};
-  margin-left: 6px;
+  margin-left: ${props => (props.$labelLoc === 'Bottom' ? '0' : '6px')};
+  margin-top: ${props => (props.$labelLoc === 'Bottom' ? '6px' : '0')};
   box-sizing: border-box;
+  width: 100%;
+  text-align: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'left')};
 `;
 const Checkbox = (_a) => {
-    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, dataSectionName, isLabelBold = false } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "dataSectionName", "isLabelBold"]);
+    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, dataSectionName, isLabelBold = false, labelLoc = 'Right' } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "dataSectionName", "isLabelBold", "labelLoc"]);
     const baseId = dataItemid || 'checkbox';
-    return (React.createElement(Wrapper$c, Object.assign({ "$disabled": disabled }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+    return (React.createElement(Wrapper$c, Object.assign({ "$disabled": disabled, "$labelLoc": labelLoc }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Input$2, { "$invalid": invalid, checked: checked, "data-itemid": `${baseId}-input`, "data-section-name": dataSectionName, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
         React.createElement(Check$1, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "data-itemid": `${baseId}-check` }),
-        children ? (React.createElement(Label$3, { "$isLabelBold": isLabelBold, color: color, "data-itemid": `${baseId}-label` },
+        children ? (React.createElement(Label$3, { "$isLabelBold": isLabelBold, "$labelLoc": labelLoc, color: color, "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
 };
@@ -3710,8 +3715,8 @@ const Checklist = (_a) => {
         React.createElement(Options$1, { "data-itemid": `${baseId}-options` }, options.map((option, i) => {
             const label = `${option.label || option.value}`;
             const checked = selected.includes(option.value);
-            const optionId = `${baseId}-option-${i}`;
-            return (React.createElement(Checkbox, Object.assign({ "data-itemid": `${optionId}-checkbox`, key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
+            const optionId = option.dataItemid || `${baseId}-option-${i}`;
+            return (React.createElement(Checkbox, Object.assign({ dataItemid: `${optionId}-checkbox`, key: i }, accessibleProps, { checked: checked, color: option.color, disabled: disabled, onChange: handleChange.bind(null, option) }), label));
         }))));
 };
 
@@ -6200,7 +6205,9 @@ const Wrapper$2 = styled.label `
   margin-left: -6px;
   cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
   display: flex;
-  align-items: center;
+  flex-direction: ${props => (props.$labelLoc === 'Bottom' ? 'column' : 'row')};
+  align-items: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'center')};
+  justify-content: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'flex-start')};
   font-size: ${FontSizes.DEFAULT};
   line-height: 1.6em;
   box-sizing: border-box;
@@ -6290,15 +6297,18 @@ const Label = styled.span `
   font-weight: ${props => (props.$isLabelBold ? 'bold' : '400')};
   color: ${Colors.BLACK.Hex};
   line-height: 1.6em;
-  margin-left: 6px;
+  margin-left: ${props => (props.$labelLoc === 'Bottom' ? '0' : '6px')};
+  margin-top: ${props => (props.$labelLoc === 'Bottom' ? '6px' : '0')};
+  width: 100%;
+  text-align: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'left')};
 `;
 const Radio = (_a) => {
-    var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, isLabelBold = false } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "isLabelBold"]);
+    var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, isLabelBold = false, labelLoc = 'Right' } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "isLabelBold", "labelLoc"]);
     const baseId = dataItemid || 'radio';
-    return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+    return (React.createElement(Wrapper$2, Object.assign({ "$disabled": disabled, "$labelLoc": labelLoc }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Input, { "$invalid": invalid, checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'radio', value: value }),
         React.createElement(Check, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "data-itemid": `${baseId}-check` }),
-        React.createElement(Label, { "$isLabelBold": isLabelBold, "data-itemid": `${baseId}-label` },
+        React.createElement(Label, { "$isLabelBold": isLabelBold, "$labelLoc": labelLoc, "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
 };