react-better-html 1.1.61 → 1.1.62

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 (3) hide show
  1. package/dist/components/ToggleInput.d.ts +1 -0
  2. package/dist/components/ToggleInput.js +4 -4
  3. package/package.json +1 -1
package/dist/components/ToggleInput.d.ts CHANGED
@@ -3,6 +3,7 @@ import { OmitProps } from "../types/app";
3
3
  export type ToggleInputRef = {};
4
4
  type InternalToggleInputProps<Value> = {
5
5
  label?: string;
6
+ labelColor?: string;
6
7
  text?: string;
7
8
  errorText?: string;
8
9
  infoText?: string;
package/dist/components/ToggleInput.js CHANGED
@@ -108,7 +108,7 @@ const SwitchElement = styled_components_1.default.div.withConfig({
108
108
  ${(props) => props.hoverStyle}
109
109
  }
110
110
  `;
111
- const ToggleInputComponent = (0, react_1.forwardRef)(function ToggleInput({ label, text, errorText, infoText, value, onChange, checked: controlledChecked, required, ...props }, ref) {
111
+ const ToggleInputComponent = (0, react_1.forwardRef)(function ToggleInput({ label, labelColor, text, errorText, infoText, value, onChange, checked: controlledChecked, color, required, ...props }, ref) {
112
112
  const theme = (0, BetterHtmlProvider_1.useTheme)();
113
113
  const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme, true);
114
114
  const styledComponentStylesWithExcluded = (0, hooks_1.useComponentPropsWithExcludedStyle)(props);
@@ -129,7 +129,7 @@ const ToggleInputComponent = (0, react_1.forwardRef)(function ToggleInput({ labe
129
129
  setInternalChecked(newIsChecked);
130
130
  onChange?.(newIsChecked, value);
131
131
  }, [checked, controlledChecked, onChange, value]);
132
- return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputElement, { theme: theme, type: props.type ?? "checkbox", checked: checked, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }), props.type === "checkbox" ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "check", position: "absolute", top: "50%", left: "50%", color: theme.colors.base, size: 14, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none", transition: theme.styles.transition })) : props.type === "radio" ? ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", width: 10, height: 10, top: "50%", left: "50%", backgroundColor: theme.colors.base, borderRadius: 999, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none" })) : undefined] }), text && ((0, jsx_runtime_1.jsx)(Text_1.default, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: text }))] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
132
+ return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, color: labelColor, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(InputElement, { theme: theme, type: props.type ?? "checkbox", checked: checked, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }), props.type === "checkbox" ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: "check", position: "absolute", top: "50%", left: "50%", color: theme.colors.base, size: 14, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none", transition: theme.styles.transition })) : props.type === "radio" ? ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", width: 10, height: 10, top: "50%", left: "50%", backgroundColor: theme.colors.base, borderRadius: 999, transform: `translate(-50%, -50%)${checked ? "" : " scale(0.4)"}`, opacity: checked ? 1 : 0, pointerEvents: "none" })) : undefined] }), text && ((0, jsx_runtime_1.jsx)(Text_1.default, { color: color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: text }))] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
133
133
  });
134
134
  exports.default = {
135
135
  checkbox: (0, react_1.forwardRef)(function Checkbox(props, ref) {
@@ -138,7 +138,7 @@ exports.default = {
138
138
  radiobutton: (0, react_1.forwardRef)(function RadioButton(props, ref) {
139
139
  return (0, jsx_runtime_1.jsx)(ToggleInputComponent, { type: "radio", ref: ref, ...props });
140
140
  }),
141
- switch: (0, react_1.forwardRef)(function Switch({ label, errorText, infoText, disabled, value, onChange, checked: controlledChecked, required, ...props }, ref) {
141
+ switch: (0, react_1.forwardRef)(function Switch({ label, labelColor, errorText, infoText, disabled, value, onChange, checked: controlledChecked, required, color, ...props }, ref) {
142
142
  const theme = (0, BetterHtmlProvider_1.useTheme)();
143
143
  const styledComponentStyles = (0, hooks_1.useStyledComponentStyles)(props, theme, true);
144
144
  const styledComponentStylesWithExcluded = (0, hooks_1.useComponentPropsWithExcludedStyle)(props);
@@ -156,6 +156,6 @@ exports.default = {
156
156
  setInternalChecked.setState(newIsChecked);
157
157
  onChange?.(newIsChecked, value);
158
158
  }, [disabled, checked, onChange, controlledChecked, value]);
159
- return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "fit-content", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, onMouseDown: setIsMouseDown.setTrue, onMouseUp: setIsMouseDown.setFalse, onMouseOut: setIsMouseDown.setFalse, onTouchStart: setIsMouseDown.setTrue, onTouchEnd: setIsMouseDown.setFalse, onTouchCancel: setIsMouseDown.setFalse, children: (0, jsx_runtime_1.jsx)(SwitchElement, { theme: theme, checked: checked, disabled: disabled ?? false, isMouseDown: isMouseDown, onClick: onClickElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }) }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : theme.colors.textSecondary, children: errorText || infoText }))] }));
159
+ return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "fit-content", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, color: labelColor, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, onMouseDown: setIsMouseDown.setTrue, onMouseUp: setIsMouseDown.setFalse, onMouseOut: setIsMouseDown.setFalse, onTouchStart: setIsMouseDown.setTrue, onTouchEnd: setIsMouseDown.setFalse, onTouchCancel: setIsMouseDown.setFalse, children: (0, jsx_runtime_1.jsx)(SwitchElement, { theme: theme, checked: checked, disabled: disabled ?? false, isMouseDown: isMouseDown, onClick: onClickElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps }) }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : color ?? theme.colors.textSecondary, children: errorText || infoText }))] }));
160
160
  }),
161
161
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-better-html",
3
- "version": "1.1.61",
3
+ "version": "1.1.62",
4
4
  "description": "A component library for react that is as close to plane html as possible",
5
5
  "main": "dist/index.js",
6
6
  "files": [