react-better-html 1.1.67 → 1.1.69

package/dist/components/InputField.js

@@ -153,7 +153,7 @@ const InputFieldComponent = (0, react_1.forwardRef)(function InputField({ label,
             return;
         onChangeValue?.(debouncedValue);
     }, [withDebounce, onChangeValue, debouncedValue]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap / 2, ...styledComponentStylesWithExcluded, ref: holderRef, 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, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: props.className?.includes("react-better-html-dropdown-open-late") ? 1002 : 1 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, placeholder: placeholder ?? label, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : labelColor ?? theme.colors.textSecondary, children: errorText || infoText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap, ...styledComponentStylesWithExcluded, ref: holderRef, 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, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none", zIndex: props.className?.includes("react-better-html-dropdown-open-late") ? 1002 : 1 })), (0, jsx_runtime_1.jsx)(InputElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, placeholder: placeholder ?? label, onChange: onChangeElement, ...styledComponentStylesWithoutExcluded, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined, insideInputFieldComponent] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : labelColor ?? theme.colors.textSecondary, children: errorText || infoText }))] }));
 });
 InputFieldComponent.multiline = (0, react_1.forwardRef)(function Multiline({ label, placeholder, errorText, infoText, leftIcon, rightIcon, onChange, onChangeValue, onClickRightIcon, required, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
@@ -165,7 +165,7 @@ InputFieldComponent.multiline = (0, react_1.forwardRef)(function Multiline({ lab
         onChange?.(event);
         onChangeValue?.(event.target.value);
     }, [onChange, onChangeValue]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap / 2, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" })), (0, jsx_runtime_1.jsx)(TextareaElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, placeholder: placeholder ?? label, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : props.labelColor ?? theme.colors.textSecondary, fontSize: 14, children: errorText || infoText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { gap: theme.styles.gap, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, required: required, isError: !!errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", children: [leftIcon && ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: leftIcon, position: "absolute", top: 46 / 2, left: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" })), (0, jsx_runtime_1.jsx)(TextareaElement, { theme: theme, withLeftIcon: leftIcon !== undefined, withRightIcon: rightIcon !== undefined, required: required, placeholder: placeholder ?? label, onChange: onChangeElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref }), rightIcon ? (onClickRightIcon ? ((0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1 - theme.styles.space / 2, transform: "translateY(-50%)", onClick: onClickRightIcon })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { name: rightIcon, position: "absolute", top: 46 / 2, right: theme.styles.space + 1, transform: "translateY(-50%)", pointerEvents: "none" }))) : undefined] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", marginTop: theme.styles.gap / 2, color: errorText ? theme.colors.error : props.labelColor ?? theme.colors.textSecondary, fontSize: 14, children: errorText || infoText }))] }));
 });
 InputFieldComponent.email = (0, react_1.forwardRef)(function Email({ ...props }, ref) {
     return ((0, jsx_runtime_1.jsx)(InputFieldComponent, { type: "email", placeholder: "your@email.here", autoComplete: "email", autoCorrect: "off", autoCapitalize: "off", ref: ref, ...props }));
@@ -211,7 +211,7 @@ InputFieldComponent.phoneNumber = (0, react_1.forwardRef)(function PhoneNumber({
         setDropdownValue(country.phoneNumberExtension);
         setInputFieldValue(newValue.slice(country?.phoneNumberExtension.length + 1));
     }, [value]);
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default, { width: "100%", children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, color: labelColor, required: props.required, isError: !!props.errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { children: [(0, jsx_runtime_1.jsx)(Dropdown_1.default, { options: options, renderOption: renderOption, width: 130, minWidth: 116, withSearch: true, placeholder: "+00", inputFieldClassName: "react-better-html-phone-number-holder", defaultValue: defaultValue, value: dropdownValue, onChange: setDropdownValue, withoutClearButton: true }), (0, jsx_runtime_1.jsx)(InputFieldComponent, { placeholder: label ?? "Phone number", className: "react-better-html-phone-number", value: inputFieldValue, onChangeValue: onChangeValueElement, ref: ref, ...props })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap, children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { text: label, color: labelColor, required: props.required, isError: !!props.errorText }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { children: [(0, jsx_runtime_1.jsx)(Dropdown_1.default, { options: options, renderOption: renderOption, width: 130, minWidth: 116, withSearch: true, placeholder: "+00", inputFieldClassName: "react-better-html-phone-number-holder", defaultValue: defaultValue, value: dropdownValue, onChange: setDropdownValue, withoutClearButton: true }), (0, jsx_runtime_1.jsx)(InputFieldComponent, { placeholder: label ?? "Phone number", className: "react-better-html-phone-number", value: inputFieldValue, onChangeValue: onChangeValueElement, ref: ref, ...props })] })] }));
 });
 InputFieldComponent.date = (0, react_1.forwardRef)(function Date({ className, onFocus, onBlur, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();

package/dist/components/PageHeader.js

@@ -12,7 +12,8 @@ const Image_1 = __importDefault(require("./Image"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 function PageHeader({ imageUrl, imageSize = 60, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const { app } = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
     const mediaQuery = (0, hooks_1.useMediaQuery)();
-    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : undefined, gap: theme.styles.space, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), titleRightElement] }), (0, jsx_runtime_1.jsx)(Text_1.default, { textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description })] }), rightElement] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.space, marginBottom: marginBottom ?? theme.styles.space * 2, children: [imageUrl && (0, jsx_runtime_1.jsx)(Image_1.default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }), (0, jsx_runtime_1.jsxs)(Div_1.default.column, { justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : undefined, flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: textAlign === "center" ? "center" : textAlign === "right" ? "flex-end" : undefined, gap: theme.styles.space, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: titleAs ?? "h1", textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textPrimary, children: title }), titleRightElement] }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { maxWidth: !mediaQuery.size600 ? app.contentMaxWidth * 0.6 : undefined, textAlign: textAlign, color: lightMode ? theme.colors.base : theme.colors.textSecondary, opacity: lightMode ? 0.7 : undefined, children: description }))] }), rightElement] }));
 }
 exports.default = (0, react_1.memo)(PageHeader);

package/dist/components/Table.d.ts

@@ -4,26 +4,27 @@ import { ToggleInputProps } from "./ToggleInput";
 import { ImageProps } from "./Image";
 type TextColumn<DataItem> = {
     type: "text";
-    keyName: keyof DataItem;
-    format?: (value: any) => string;
+    keyName?: keyof DataItem;
+    format?: (item: DataItem, index: number) => string;
 };
 type ElementColumn<DataItem> = {
     type: "element";
-    render: (item: DataItem, index: number) => ReactNode;
+    render?: (item: DataItem, index: number) => ReactNode;
 };
 type ImageColumn<DataItem> = {
     type: "image";
     keyName?: keyof DataItem;
 } & ImageProps;
-type CheckboxColumn<DataItem> = {
+type CheckboxColumn = {
     type: "checkbox";
-    keyName?: keyof DataItem;
 } & ToggleInputProps<boolean>;
 export type TableColumn<DataItem> = {
     label?: string;
     width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
     align?: "left" | "center" | "right";
-} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem>);
+} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn);
 export type TableProps<DataItem> = {
     columns: TableColumn<DataItem>[];
     data: DataItem[];
@@ -34,7 +35,7 @@ export type TableProps<DataItem> = {
     /** @default "No data available" */
     noDataItemsMessage?: string;
     onClickRow?: (item: DataItem, index: number) => void;
-    onClickAllCheckboxes?: () => void;
+    onClickAllCheckboxes?: (checked: boolean) => void;
 } & ComponentMarginProps;
 type TableComponentType = {
     <DataItem>(props: ComponentPropWithRef<HTMLDivElement, TableProps<DataItem>>): React.ReactElement;

package/dist/components/Table.js

@@ -100,9 +100,11 @@ const TableStyledComponent = styled_components_1.default.table.withConfig({
    }
 `;
 const ThStyledComponent = styled_components_1.default.th.withConfig({
-    shouldForwardProp: (prop) => !["width", "textAlign"].includes(prop),
+    shouldForwardProp: (prop) => !["width", "minWidth", "maxWidth", "textAlign"].includes(prop),
 }) `
    ${(props) => (props.width ? `width: ${props.width}px;` : "")}
+   ${(props) => (props.minWidth ? `min-width: ${props.minWidth}px;` : "")}
+   ${(props) => (props.maxWidth ? `max-width: ${props.maxWidth}px;` : "")}
    ${(props) => (props.textAlign ? `text-align: ${props.textAlign} !important;` : "")}
 `;
 const TdStyledComponent = styled_components_1.default.td.withConfig({
@@ -112,14 +114,15 @@ const TdStyledComponent = styled_components_1.default.td.withConfig({
 `;
 const TableComponent = (0, react_1.forwardRef)(function Table({ columns, data, isStriped, withStickyHeader, noDataItemsMessage = "No data available", onClickRow, onClickAllCheckboxes, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const [checkedItems, setCheckedItems] = (0, react_1.useState)([]);
     const renderCellContent = (0, react_1.useCallback)((column, item, index) => {
         switch (column.type) {
             case "text": {
-                const value = item[column.keyName];
-                return column.format ? column.format(value) : String(value ?? "");
+                const value = column.keyName ? item[column.keyName] : undefined;
+                return column.format ? column.format(item, index) : String(value ?? "");
             }
             case "element": {
-                return column.render(item, index);
+                return column.render?.(item, index) ?? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
             }
             case "image": {
                 const { type, keyName, ...props } = column;
@@ -127,28 +130,30 @@ const TableComponent = (0, react_1.forwardRef)(function Table({ columns, data, i
                 return ((0, jsx_runtime_1.jsx)(Image_1.default, { src: src, width: defaultImageWidth, borderRadius: theme.styles.borderRadius / 2, ...props }));
             }
             case "checkbox": {
-                const { type, keyName, ...props } = column;
-                const checked = keyName ? item[keyName] : false;
-                return (0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: checked, ...props });
+                const { type, onChange, ...props } = column;
+                const checkedValue = checkedItems[index];
+                return ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: checkedValue, onChange: (checked, value) => {
+                        setCheckedItems((oldValue) => oldValue.map((isChecked, internalIndex) => (internalIndex === index ? checked : isChecked)));
+                        onChange?.(checked, value);
+                    }, ...props }));
             }
             default: {
                 return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
             }
         }
-    }, [theme]);
+    }, [theme, checkedItems]);
     const onClickRowElement = (0, react_1.useCallback)((item, index) => {
         onClickRow?.(item, index);
     }, [onClickRow]);
+    const onClickAllCheckboxesElement = (0, react_1.useCallback)((checked) => {
+        onClickAllCheckboxes?.(checked);
+        setCheckedItems(data.map(() => checked));
+    }, [onClickAllCheckboxes, data]);
     const everythingIsChecked = (0, react_1.useMemo)(() => {
-        if (!columns.some((column) => column.type === "checkbox"))
-            return false;
-        const keyName = columns.find((column) => column.type === "checkbox")?.keyName;
-        if (!keyName)
-            return false;
-        return data.every((item) => item[keyName]);
-    }, [data]);
-    return ((0, jsx_runtime_1.jsx)(Div_1.default, { border: `1px solid ${theme.colors.border}`, borderRadius: theme.styles.borderRadius * 2, overflow: "auto", ...props, ref: ref, children: (0, jsx_runtime_1.jsxs)(TableStyledComponent, { isStriped: isStriped, withHover: onClickRow !== undefined, withStickyHeader: withStickyHeader, theme: theme, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)(ThStyledComponent, { width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width, textAlign: column.align, children: column.label ??
-                                (column.type === "checkbox" && onClickAllCheckboxes ? ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: everythingIsChecked, onChange: onClickAllCheckboxes })) : ("")) }, column.type + column.label + index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: data.length > 0 ? (data.map((item, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: onClickRow ? "isClickable" : undefined, onClick: () => onClickRowElement(item, rowIndex), children: columns.map((column, colIndex) => ((0, jsx_runtime_1.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))) }, JSON.stringify(item) + rowIndex)))) : ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: "noData", colSpan: columns.length, children: (0, jsx_runtime_1.jsx)(Text_1.default.unknown, { children: noDataItemsMessage }) }) })) })] }) }));
+        return checkedItems.every((checked) => checked) && checkedItems.length === data.length;
+    }, [data, checkedItems]);
+    return ((0, jsx_runtime_1.jsx)(Div_1.default, { border: `1px solid ${theme.colors.border}`, borderRadius: theme.styles.borderRadius * 2, overflow: "auto", ...props, ref: ref, children: (0, jsx_runtime_1.jsxs)(TableStyledComponent, { isStriped: isStriped, withHover: onClickRow !== undefined, withStickyHeader: withStickyHeader, theme: theme, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)(ThStyledComponent, { width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, textAlign: column.align, children: column.label ??
+                                (column.type === "checkbox" && onClickAllCheckboxes ? ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: everythingIsChecked, onChange: onClickAllCheckboxesElement })) : ("")) }, column.type + column.label + index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: data.length > 0 ? (data.map((item, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: onClickRow ? "isClickable" : undefined, onClick: () => onClickRowElement(item, rowIndex), children: columns.map((column, colIndex) => ((0, jsx_runtime_1.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))) }, JSON.stringify(item) + rowIndex)))) : ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: "noData", colSpan: columns.length, children: (0, jsx_runtime_1.jsx)(Text_1.default.unknown, { children: noDataItemsMessage }) }) })) })] }) }));
 });
 const Table = (0, react_1.memo)(TableComponent);
 exports.default = Table;

package/dist/components/ToggleInput.js

@@ -129,7 +129,7 @@ const ToggleInputComponent = (0, react_1.forwardRef)(function ToggleInput({ labe
             setInternalChecked(newIsChecked);
         onChange?.(newIsChecked, value);
     }, [checked, controlledChecked, onChange, value]);
-    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.jsxs)(Text_1.default, { color: color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [text, required && !label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] }))] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : labelColor ?? theme.colors.textSecondary, children: errorText || infoText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "100%", gap: theme.styles.gap, ...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.jsxs)(Text_1.default, { color: color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [text, required && !label && ((0, jsx_runtime_1.jsxs)(Text_1.default, { as: "span", fontSize: 16, color: theme.colors.error, children: [" ", "*"] }))] }))] }), (errorText || infoText) && ((0, jsx_runtime_1.jsx)(Text_1.default, { as: "span", display: "block", fontSize: 14, color: errorText ? theme.colors.error : labelColor ?? theme.colors.textSecondary, children: errorText || infoText }))] }));
 });
 exports.default = {
     checkbox: (0, react_1.forwardRef)(function Checkbox(props, ref) {
@@ -156,6 +156,6 @@ exports.default = {
                 setInternalChecked.setState(newIsChecked);
             onChange?.(newIsChecked, value);
         }, [disabled, checked, onChange, controlledChecked, value]);
-        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 : labelColor ?? theme.colors.textSecondary, children: errorText || infoText }))] }));
+        return ((0, jsx_runtime_1.jsxs)(Div_1.default.column, { width: "fit-content", gap: theme.styles.gap, ...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 : labelColor ?? theme.colors.textSecondary, children: errorText || infoText }))] }));
     }),
 };

package/dist/constants/theme.js

@@ -13,11 +13,13 @@ exports.theme = {
         light: {
             textPrimary: "#111111",
             textSecondary: "#777777",
+            textLink: "#0894ff",
             label: "#111111",
             primary: "#6d466b",
             secondary: "#412234",
+            accent: "#16d7ed",
             success: "#28a745",
-            info: "#1eb6dd",
+            info: "#0fa0da",
             warn: "#ffc107",
             error: "#dc3545",
             base: "#f8f8f8",
@@ -29,11 +31,13 @@ exports.theme = {
         dark: {
             textPrimary: "#f8f8f8",
             textSecondary: "#e8e8e8",
+            textLink: "#0894ff",
             label: "#111111",
             primary: "#9b6499",
             secondary: "#6c466b",
+            accent: "#16d7ed",
             success: "#28a745",
-            info: "#1eb6dd",
+            info: "#0fa0da",
             warn: "#ffc107",
             error: "#dc3545",
             base: "#f8f8f8",

package/dist/types/theme.d.ts

@@ -1,5 +1,5 @@
 export type Color = `#${string}` | "transparent";
-export type ColorName = "textPrimary" | "textSecondary" | "label" | "primary" | "secondary" | "success" | "info" | "warn" | "error" | "base" | "backgroundBase" | "backgroundSecondary" | "backgroundContent" | "border";
+export type ColorName = "textPrimary" | "textSecondary" | "textLink" | "label" | "primary" | "secondary" | "accent" | "success" | "info" | "warn" | "error" | "base" | "backgroundBase" | "backgroundSecondary" | "backgroundContent" | "border";
 export type ColorTheme = "light" | "dark";
 export type Styles = {
     space: number;

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.67",
+   "version": "1.1.69",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [