pixelize-design-library 2.2.126 → 2.2.127

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/Components/Common/FormLabel.d.ts +1 -1
  2. package/dist/Components/Common/FormLabel.js +3 -3
  3. package/dist/Components/RadioButton/RadioButton.js +5 -4
  4. package/package.json +1 -1
package/dist/Components/Common/FormLabel.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- export declare const TextLabel: ({ label, id, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, }: {
2
+ export declare const TextLabel: ({ label, isRequired, isInformation, informationMessage, fontSize, showTooltip, tooltipLabel, clampLines, }: {
3
3
  label: string;
4
4
  id?: string | undefined;
5
5
  isInformation?: boolean | undefined;
package/dist/Components/Common/FormLabel.js CHANGED
@@ -9,7 +9,7 @@ var react_2 = require("@chakra-ui/react");
9
9
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
10
10
  var lucide_react_1 = require("lucide-react");
11
11
  var TextLabel = function (_a) {
12
- var label = _a.label, id = _a.id, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d, fontSize = _a.fontSize, showTooltip = _a.showTooltip, tooltipLabel = _a.tooltipLabel, clampLines = _a.clampLines;
12
+ var label = _a.label, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d, fontSize = _a.fontSize, showTooltip = _a.showTooltip, tooltipLabel = _a.tooltipLabel, clampLines = _a.clampLines;
13
13
  var theme = (0, useCustomTheme_1.useCustomTheme)();
14
14
  var clampStyles = clampLines ? {
15
15
  display: "-webkit-box",
@@ -19,8 +19,8 @@ var TextLabel = function (_a) {
19
19
  textOverflow: "ellipsis",
20
20
  whiteSpace: "normal",
21
21
  } : {};
22
- return (react_1.default.createElement(react_2.Box, null,
23
- react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], fontWeight: 400, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.875rem", mb: "0" },
22
+ return (react_1.default.createElement(react_2.Box, { as: "span" },
23
+ react_1.default.createElement(react_2.Box, { as: "span", color: theme.colors.gray[600], fontWeight: 400, fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.875rem" },
24
24
  react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem" },
25
25
  showTooltip ? (react_1.default.createElement(react_2.Tooltip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
26
26
  react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label))) : (react_1.default.createElement(react_2.Box, { as: "span", sx: clampStyles }, label)),
package/dist/Components/RadioButton/RadioButton.js CHANGED
@@ -11,7 +11,10 @@ var FormLabel_1 = require("../Common/FormLabel");
11
11
  var RadioButton = function (_a) {
12
12
  var label = _a.label, colorScheme = _a.colorScheme, isChecked = _a.isChecked, onChange = _a.onChange, isDisabled = _a.isDisabled, size = _a.size, value = _a.value, defaultChecked = _a.defaultChecked, _b = _a.labelFontSize, labelFontSize = _b === void 0 ? "0.75rem" : _b, _c = _a.labelClampLines, labelClampLines = _c === void 0 ? 2 : _c, _d = _a.showLabelTooltip, showLabelTooltip = _d === void 0 ? (label || "").length > 18 : _d, _e = _a.labelTooltip, labelTooltip = _e === void 0 ? label : _e;
13
13
  var theme = (0, useCustomTheme_1.useCustomTheme)();
14
- return (react_1.default.createElement(react_2.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, sx: {
14
+ return (react_1.default.createElement(react_2.Radio, { colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], borderWidth: "1.6px", _hover: {
15
+ borderColor: theme.colors.primary[500],
16
+ backgroundColor: theme.colors.background[100],
17
+ }, sx: {
15
18
  "&[data-checked]": {
16
19
  backgroundColor: theme.colors.primary[500],
17
20
  borderColor: theme.colors.primary[500]
@@ -21,8 +24,6 @@ var RadioButton = function (_a) {
21
24
  borderColor: theme.colors.primary[500],
22
25
  boxShadow: "0 0 0 2px ".concat(theme.colors.primary[200]),
23
26
  },
24
- // alignItems: "flex-start",
25
- mt: "2px",
26
27
  } },
27
28
  react_1.default.createElement(FormLabel_1.TextLabel, { label: label, fontSize: labelFontSize, showTooltip: showLabelTooltip, tooltipLabel: labelTooltip, clampLines: labelClampLines })));
28
29
  };
@@ -30,6 +31,6 @@ exports.RadioButton = RadioButton;
30
31
  var RadioButtonGroup = function (_a) {
31
32
  var options = _a.options, onChange = _a.onChange, value = _a.value, defaultValue = _a.defaultValue, isDisabled = _a.isDisabled, size = _a.size, colorScheme = _a.colorScheme, spacing = _a.spacing, _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "" : _c, labelFontSize = _a.labelFontSize, labelClampLines = _a.labelClampLines, showLabelTooltip = _a.showLabelTooltip;
32
33
  return (react_1.default.createElement(react_2.RadioGroup, { onChange: onChange, value: value, defaultValue: defaultValue },
33
- react_1.default.createElement(react_2.Stack, { direction: direction, spacing: spacing || "2", align: align }, options.map(function (option) { return (react_1.default.createElement(RadioButton, { key: option.id, label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip })); }))));
34
+ react_1.default.createElement(react_2.Stack, { direction: direction, spacing: spacing || "2", align: align, gap: direction === "row" ? "1.25rem" : "0.1rem" }, options.map(function (option) { return (react_1.default.createElement(RadioButton, { key: option.id, label: option.label, value: option.id, isDisabled: isDisabled, size: size, colorScheme: colorScheme, labelFontSize: labelFontSize, labelClampLines: labelClampLines, showLabelTooltip: typeof showLabelTooltip === 'function' ? showLabelTooltip(option) : showLabelTooltip })); }))));
34
35
  };
35
36
  exports.RadioButtonGroup = RadioButtonGroup;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.126",
3
+ "version": "2.2.127",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",