venice-ui 3.0.24 → 3.0.25

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -9,7 +9,7 @@ const config_1 = require("../../config");
 const ComponentRoot_1 = require("../ComponentRoot");
 const Checkbox_styles_1 = require("./Checkbox.styles");
 const IconsPath_1 = require("../Icon/IconsPath");
-const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, }) => {
+const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, width = 'auto', themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, componentWidth }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -26,8 +26,8 @@ const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'to
             handleClick(!value);
         }
     };
-    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true },
-        react_1.default.createElement(Checkbox_styles_1.CheckboxRoot, { onClick: onClick, isDisabled: isDisabled, id: 'dupa' },
+    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${checkboxConfig.size[size].width}px` },
+        react_1.default.createElement(Checkbox_styles_1.CheckboxRoot, { onClick: onClick, isDisabled: isDisabled },
             react_1.default.createElement(Checkbox_styles_1.CheckboxBox, { theme: resolvedTheme, config: checkboxConfig, size: size, isDisabled: isDisabled, isIntermedian: isIntermedian, isActive: value }, (value || isIntermedian) && (react_1.default.createElement("svg", { width: resolvedSize.iconSize, height: resolvedSize.iconSize, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
                 react_1.default.createElement("path", { d: iconName, fill: isDisabled
                         ? checkboxConfig.color.disabled.icon

package/dist/cjs/components/Toggle/Toggle.js

@@ -21,7 +21,7 @@ const Toggle = ({ name, value = true, size = 'md', label, labelPosition = 'top',
             handleClick(!value);
         }
     };
-    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: toggleConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: `${toggleConfig.size[size].width}  px` },
+    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: toggleConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${toggleConfig.size[size].width}px` },
         react_1.default.createElement(Toggle_styles_1.ToggleRoot, { onClick: onClick, isDisabled: isDisabled },
             react_1.default.createElement(Toggle_styles_1.ToggleTrack, { size: size, theme: resolvedTheme, config: toggleConfig, isDisabled: isDisabled, isActive: value },
                 react_1.default.createElement(Toggle_styles_1.TrackThumb, { size: size, theme: resolvedTheme, config: toggleConfig, isActive: value, isDisabled: isDisabled })))));

package/dist/esm/components/Checkbox/Checkbox.js

@@ -3,7 +3,7 @@ import { resolveThemeWithComponentsConfig } from '../../config';
 import { ComponentRoot } from '../ComponentRoot';
 import { CheckboxBox, CheckboxRoot } from './Checkbox.styles';
 import { iconsPath } from '../Icon/IconsPath';
-export const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, }) => {
+export const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, width = 'auto', themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, componentWidth }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -20,8 +20,8 @@ export const Checkbox = ({ name, value = false, size = 'md', label, labelPositio
             handleClick(!value);
         }
     };
-    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true },
-        React.createElement(CheckboxRoot, { onClick: onClick, isDisabled: isDisabled, id: 'dupa' },
+    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${checkboxConfig.size[size].width}px` },
+        React.createElement(CheckboxRoot, { onClick: onClick, isDisabled: isDisabled },
             React.createElement(CheckboxBox, { theme: resolvedTheme, config: checkboxConfig, size: size, isDisabled: isDisabled, isIntermedian: isIntermedian, isActive: value }, (value || isIntermedian) && (React.createElement("svg", { width: resolvedSize.iconSize, height: resolvedSize.iconSize, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
                 React.createElement("path", { d: iconName, fill: isDisabled
                         ? checkboxConfig.color.disabled.icon

package/dist/esm/components/Toggle/Toggle.js

@@ -15,7 +15,7 @@ export const Toggle = ({ name, value = true, size = 'md', label, labelPosition =
             handleClick(!value);
         }
     };
-    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: toggleConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: `${toggleConfig.size[size].width}  px` },
+    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: toggleConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${toggleConfig.size[size].width}px` },
         React.createElement(ToggleRoot, { onClick: onClick, isDisabled: isDisabled },
             React.createElement(ToggleTrack, { size: size, theme: resolvedTheme, config: toggleConfig, isDisabled: isDisabled, isActive: value },
                 React.createElement(TrackThumb, { size: size, theme: resolvedTheme, config: toggleConfig, isActive: value, isDisabled: isDisabled })))));

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

@@ -7,6 +7,7 @@ interface ICheckboxProps {
     size?: InputSize;
     label?: string;
     labelPosition?: LabelPosition;
+    width?: string;
     theme?: AppTheme;
     themeVariant?: ThemeName;
     handleClick: (value: boolean) => void;
@@ -18,6 +19,7 @@ interface ICheckboxProps {
     required?: boolean;
     optional?: boolean;
     optionalLabel?: string;
+    componentWidth?: string;
 }
 export declare const Checkbox: FC<ICheckboxProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "3.0.24",
+  "version": "3.0.25",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",